@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

:root {
   --primary-color: #000000;
   --secondary-color: #d9fcb1;
   --text-primary: #666666;
   --text-secondary: #fff;
}

body {
   font-family: "Rubik", sans-serif;
   color: var(--text-color);
   line-height: 1.6;
}

.navbar-brand {
   font-weight: 700;
   font-size: 1.5rem;
   letter-spacing: -0.5px;
}
.navbar {
   padding: 1rem 0;
}
.nav-link {
   padding: 0.5rem 1rem !important;
   color: var(--primary-color) !important;
   transition: all 500ms;
   font-family: "Raleway", sans-serif;
}
.nav-link.active {
   font-weight: 700;
}
.nav-link:hover {
   color: var(--secondary-color) !important;
   transition: all 500ms;
}
.navbar-toggler {
   border: none;
}
.navbar-toggler:focus {
   box-shadow: none;
}

.navbar-scroll {
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
}

.navbar-scrolled {
   background-color: white !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-brand {
   color: #000 !important; /* Adjust text color if needed */
}

.raleway {
   font-family: "Raleway", sans-serif !important;
}
.rubik {
   font-family: "Rubik", sans-serif !important;
}
h1 {
   font-size: 3rem;
   margin-bottom: 20px;
}

h2 {
   font-size: 2.5rem;
   margin-bottom: 20px;
}

h3 {
   font-size: 2rem;
   margin-bottom: 20px;
}

h4 {
   font-size: 1.5rem;
   margin-bottom: 20px;
}

h5 {
   font-size: 1.25rem;
   margin-bottom: 20px;
}

h6 {
   font-size: 1rem;
   margin-bottom: 20px;
}

p {
   font-size: 1.2rem;
   margin-bottom: 30px;
   color: var(--text-primary);
}

section {
   padding: 100px 0;
}

.hero-banner {
   background-image: url(../imgs/hero-bg.png);
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
}

.hero {
   min-height: 900px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.hero button {
   background-color: var(--secondary-color);
   color: #000;
   font-family: "Raleway", sans-serif;
   font-weight: 600;
   font-size: 16px;
   padding: 10px 30px;
   border-radius: 999px;
   border: 3px solid #fff;
   outline: 3px solid #000;
   cursor: pointer;
   transition: all 0.3s ease;
}

.hero button:hover {
   background-color: var(--text-secondary);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cryto-item-list {
   padding: 15px 0px;
}
.crypto-item {
   display: inline-flex;
   align-items: center;
   margin-right: 20px;
   font-weight: 500;
}

.crypto-icon {
   width: 24px;
   height: 24px;
   border: 2px solid;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   margin-right: 8px;
}
/* About Us Section */
.aboutus-section {
   background-image: url(../imgs/aboutus-bg.png);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

/* About Us Section */
/* Features Section */
.features {
   background-image: url(../imgs/features-bg.png);
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
}
/* Features Section */
/* CTA section */
.cta-section {
   background-image: url(../imgs/cta-bg.png);
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
   width: 100%;
}
/* CTA section */

/* contact us */
.contact-us {
   background-image: url(../imgs/contactus-bg.png);
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}
/* contact us */
.contact-wrapper {
   background-color: #000;
   color: #fff;
   border-radius: 20px;
   padding: 40px;
   margin: auto;
   box-shadow: 30px 30px 0 var(--secondary-color);
}

.form-control {
   background-color: transparent;
   border: 1px solid #ccc;
   border-radius: 30px;
   color: #fff;
   padding: 12px 20px;
}

.form-control:focus {
   border-color: var(--secondary-color);
   box-shadow: none;
}

textarea.form-control {
   border-radius: 15px;
}

.submit-btn {
   background-color: var(--secondary-color); /* Exact green color */
   color: #000;
   font-family: "Arial", sans-serif;
   font-weight: 600;
   font-size: 16px;
   padding: 10px 30px;
   border-radius: 999px; /* Fully rounded */
   border: 2px solid #000; /* Black inner border */
   outline: 3px solid #fff; /* White outer outline */
   cursor: pointer;
   transition: all 0.3s ease;
}

.submit-btn:hover {
   background-color: #000;
   color: #fff;
   transition: all 500ms;
}
input::placeholder {
   color: #fff !important;
}

textarea::placeholder {
   color: #fff !important;
   opacity: 1; /* Ensure it's fully visible */
}

footer {
   padding: 50px 40px;
}

.footer-link {
   color: var(--text-secondaryr) !important;
   transition: all 500ms;
}
.footer-link:hover {
   color: var(--secondary-color) !important;
   transition: all 500ms;
}
@media (max-width: 768px) {
   .hero {
      min-height: 830px;
   }
   h1 {
      font-size: 1.8rem;
   }
   h2 {
      font-size: 1.7rem;
   }

   .hero-banner {
      background-position: center;
   }
   footer {
      padding: 50px 10px;
   }
   section {
      padding: 50px 0;
   }
   .navbar-scroll {
    background-color: #fff;
}
}