* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

:root {
  --hue-primary: 223;
  --hue-secondary: 178;
  --primary500: hsl(var(--hue-primary), 90%, 50%);
  --primary600: hsl(var(--hue-primary), 90%, 60%);
  --primary700: hsl(var(--hue-primary), 90%, 70%);
  --secondary800: hsl(var(--hue-secondary), 90%, 80%);
  --dark-gray50: hsl(var(--hue-primary), 90%, 5%);
  --dark-gray100: hsl(var(--hue-primary), 90%, 10%);
  --white0: hsla(0, 0%, 100%, 0);
  --white50: hsla(0, 0%, 100%, 0.05);
  --white100: hsla(0, 0%, 100%, 0.1);
  --white200: hsla(0, 0%, 100%, 0.2);
  --white300: hsla(0, 0%, 100%, 0.3);
  --white400: hsla(0, 0%, 100%, 0.4);
  --white500: hsla(0, 0%, 100%, 0.5);
  --white: hsl(0, 0%, 100%);
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
}


html {
  scroll-behavior: smooth;
  background-color: black;

}

h1{ 
  font-family: "Dagger", sans-serif;
  
  overflow: hidden;
}

.text-gradient {
  background: linear-gradient(to right, #DFF4FF, #58C7EC, #1FA9E0, #476DBD);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient2 {
  background: linear-gradient(to left, #DFF4FF, #58C7EC, #1FA9E0, #476DBD);

}


/* @font-face {
  font-family: "SF UI Display";
  src: url("fonts/sf-ui-display-cufonfonts.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
} */


@font-face {
  font-family: "Dagger";
  src: url("/font/daggersquare-cufonfonts-webfont/DAGGERSQUARE.woff") format("opentype");
  font-weight: bold;
  font-style: normal;
}


#button-2 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-2 a {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  left: -200px;
  background: linear-gradient(to right, #DFF4FF, #58C7EC, #1FA9E0, #476DBD);
  position: absolute;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-2:hover #slide {
  left: 0;
}

#button-2:hover a {
  color: #000;
}

.button {
  display: inline-flex;
  
  border: 2px solid #58C7EC;
border-radius: 10px;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: #f2f3f3;
  text-decoration: none;
  letter-spacing: 1px;
}



/* box */

/* cards start */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .group:hover svg {
    transform: scale(1.1);
    transition: transform 0.3s ease;
  }




  

  /* General Section Styling */
.how-it-works {
  padding: 30px 20px 10px 20px;
  text-align: center;
}

.how-it-works h2 {
  text-align: center;
       font-size: 3rem;
        font-weight: 700; 
      margin-bottom: 40px;
      background: linear-gradient(to right, #FFF 40%, #58C7EC 60%, #1FA9E0 90%, #476DBD 100%);
      text-transform: uppercase;
      background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: "Dagger";
}

/* Container Layout */
.contain-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}

/* Left, Center, Right Sections */
.left-side,
.center,
.right-side {
  padding: 20px;
  box-sizing: border-box;
}

.left-side,
.right-side {
  flex: 1;
  min-width: 280px;
}

.center {
  flex: 1;
  min-width: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Step Card Styling */
.step {
  background-color: #1a1a1a;
      border-left: 4px solid #58C7EC;
      padding: 20px;
      margin-bottom: 30px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.4);
  text-align: left;
}
.step:hover {
      transform: scale(1.02);
      box-shadow: 0 0 20px #1FA9E0aa;
      border-left-color: #1FA9E0;
    }

.step h3 {
  background: linear-gradient(to right, #58C7EC, #1FA9E0, #476DBD);
       background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      margin-bottom: 10px;
      font-size: 22px;
}

.step p {
  line-height: 1.6;
      color: #FFF;
      font-size: 16px;
}

/* Desktop: 3 Columns */
@media (min-width: 992px) {
  .left-side,
  .center,
  .right-side {
    width: 33.33%;
  }
}

/* Tablet: Stack with Image in Middle */
@media (max-width: 991px) and (min-width: 768px) {
  .left-side,
  .right-side {
    width: 50%;
  }

  .center {
    width: 100%;
    margin: 30px 0;
  }
}

/* Mobile: Single Column */
@media (max-width: 767px) {
  .contain-section {
    flex-direction: column;
    align-items: center;
  }

  .left-side,
  .center,
  .right-side {
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }

  .step {
    text-align: center;
  }

  .center img {
    max-width: 80%;
    margin: 0 auto;
  }
}





    .faq-section {
      max-width: 900px;
      margin: 0px auto;
      padding: 20px 20px 60px 20px;
    }

    .faq-header {
      text-align: center;
      margin-bottom: 30px;
    }

    .faq-header h2 {
      text-align: center;
       font-size: 3rem;
        font-weight: 700; 
      margin-bottom: 0px;
      background: linear-gradient(to right, #FFF 40%, #58C7EC 60%, #1FA9E0 90%, #476DBD 100%);
      text-transform: uppercase;
      background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: "Dagger";
    }

    .faq-header p {
      color: #FFF;
      font-size: 19px;
    }

    .faq-item {
      background: #000;
      border-radius: 10px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px #58C7EC;
      overflow: hidden;
    }

    .faq-question {
      padding: 20px;
      cursor: pointer;
      position: relative;
      font-size: 18px;
      font-weight: 600;
      color: #FFF;
    }

    .faq-question::after {
      content: '+';
      position: absolute;
      right: 20px;
      font-size: 24px;
      transition: transform 0.3s ease;
    }

    .faq-question.active::after {
      content: '-';
    }

    .faq-answer {
      padding: 0 20px 20px;
      display: none;
      font-size: 16px;
      color: #FFF;
      border-top: 1px solid #58C7EC;
    }

    @media (max-width: 600px) {
      .faq-question {
        font-size: 16px;
      }
      .faq-answer {
        font-size: 14px;
      }
    }






/* Base Styles */
.footer {
  background-color: #111;
  color: #fff;
  padding: 40px 20px 20px;
}

.footer a {
  color: #f3eded;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #fff;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo {
  flex: 1 1 250px;
  min-width: 230px;
}

.footer-logo img {
  width: 150px;
  margin-bottom: 15px;
}

.footer-logo p {
  font-size: 16px;
  line-height: 1.6;
  color: #FFF;
}

/* Links Column */
.footer-links {
  flex: 1 1 150px;
  min-width: 140px;
}

.footer-links h3 {
  font-size: 20px;
  margin-bottom: 10px;
   background: linear-gradient(to right, #FFF 40%, #58C7EC 60%, #1FA9E0 90%, #476DBD 100%);
      text-transform: uppercase;
      background-clip: text;
  -webkit-background-clip: text;
  font-family: "Dagger";
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  font-size: 16px;
}

/* Social Media */
.footer-social {
  flex: 1 1 150px;
  min-width: 140px;
}

.footer-social h3 {
  font-size: 18px;
  margin-bottom: 10px;
   background: linear-gradient(to right, #FFF 40%, #58C7EC 60%, #1FA9E0 90%, #476DBD 100%);
      text-transform: uppercase;
      background-clip: text;
  -webkit-background-clip: text;
  font-family: "Dagger";
}

 
.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons img {
  width: 30px;
  height: 30px;
}

.contact-address {
  font-size: 16px;
  font-weight: 400;
  color: #FFF;
  margin-bottom: 15px;
}

.contact-address span {
  font-weight: 600;
  font-size: 18px;
}


/* Bottom Footer */
.footer-bottom {
  border-top: 1px solid #58C7EC;
  text-align: center;
  padding: 20px 10px 0;
  font-size: 16px;
  color: #f5f5f5;
  margin-top: 30px;
}

.footer-bottom a {
  color: #ece8e8;
}

.footer-bottom a:hover {
  color: #fff;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-logo,
  .footer-links,
  .footer-social {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-logo img {
    width: 120px;
  }

  .social-icons img {
    width: 25px;
    height: 25px;
  }
}