:root{
        --primary:#5f61f2;        /* deep purple from your creative */
        --accent:#ffd24d;         /* yellow accent */
        --navy:#0a2b46;           /* deep navy for text */
        --muted:#6b7b8c;
        --white:#ffffff;
        --card:#fbfbfe;
        --radius:14px;
        --max-width:1200px;
      }

      *{box-sizing:border-box}
      html,body{height:100%}
      body{
        margin:0;
        font-family:'Poppins',system-ui,Segoe UI,Roboto,Arial;
        color:var(--navy);
        background:linear-gradient(180deg,#fcfcff 0%, #f7f8fb 100%);
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        line-height:1.45;
 
      }

      .container{
        max-width:var(--max-width);
        margin:0 auto;
        padding:28px;
      }
  

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background-color: var(--white);
  box-shadow: 0 4px 14px rgba(63,47,191,0.12);
  border-radius: 12px;
  position: relative;

}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand .logo img {
  height: 40px;
  width: auto;
}

nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* Updated styling for nav links - less "designed" */
nav a {
  text-decoration: none; /* Keep this to remove the default underline */
  color: inherit; /* Inherits the default text color, often black */
  font-weight: normal; /* Removes the bolding */
}

.cta-small {
  background: var(--primary);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
}

/* Hamburger button */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: #333;
  border-radius: 5px;
}

/* Mobile styles */
@media (max-width: 768px) {
  nav {
    display: none;
    flex-direction: column;
    gap: 15px;
    position: absolute;
    top: 70px;
    right: 20px;
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  }

  nav.active {
    display: flex;
  }

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  /* Tagline visible only in mobile */
  .tagline {
    display: block;
    font-size: 14px;
    margin-top: 6px;
  }
}

/* Desktop: hide tagline */
@media (min-width: 769px) {
  .tagline {
    display: none;
  }


}



.hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px;
  align-items: center;
  margin-top: 18px;
      }

    .eyebrow {  
  display: flex;
  align-items: center;   
  gap: 10px;             /* space between badge and text */
 
  margin: 0;
  padding: 0;
  
}
 .eyebrow span.pill{

  font-size:20px;
  font-weight:700;
  /* padding:6px 10px;
 border-radius:8px; */
color:#1c1c1c;

}

.eyebrow .badge1 {
  width:50px;   /* small, like an icon */
  height:auto;

}
      h1 {
        font-size:36px;
        line-height:1.02;
        margin:6px 0 14px 0;
        color:var(--navy);
        font-weight:800;
       line-height:1.4;
        padding:20px 0 0 0;
      }

      p.lead{
        margin:20px 0 0  0px;
        color:var(--muted);
        font-weight:600;
        max-width:720px;
        font-size:16px;
      }

      .benefit-box  {
        margin-top:25px;
        display:flex;
        gap:14px;
        align-items:center;
        background:var(--card);
        padding:14px 16px;
        border: 1px solid rgba(10,43,70,0.06);
        border-radius:12px;
        background-color:#ffffff;
        box-shadow:inset 0 0 0 1px rgba(10,43,70,0.03);
        color:var(--muted);
        max-width:720px;

      }



      .benefit-box strong{color:var(--navy); font-weight:700}

      /* Right card (form) */
      .hero-right {
        background:var(--white);
        border-radius:12px;
        padding:18px;
        box-shadow:0 8px 30px rgba(9,18,33,0.08);
        position:relative;
        overflow:visible;
      }
      .badge{
        position:absolute;
        top:-14px;
        right:18px;
        background:linear-gradient(90deg,#0004ff,#5f61f2);
        padding:6px 10px;
        border-radius:8px;
        font-weight:700;
        color:#ffffff;
        box-shadow:0 6px 18px rgba(255,178,77,0.16);
        display:flex; gap:8px; align-items:center;
      }
      .form-title{ font-size:20px; font-weight:800; margin-bottom:10px; color:var(--navy) }.form-title{ font-size:10spx; font-weight:800; margin-bottom:10px; color:var(--navy) }
form textarea{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid #e6e9ef; background:#fff; font-size:12px; margin-bottom:12px; resize:none; }

      form label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600}
      form input[type="text"], form input[type="email"], form input[type="tel"]{
        width:100%;
        padding:12px 14px;
        border-radius:10px;
        border:1px solid #e6e9ef;
        background:#fff;
        font-size:15px;
        margin-bottom:12px;
      }

      .form-row { display:flex; gap:10px }
      .small { flex:1 }

      .btn-primary{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:100%;
        padding:14px 16px;
        border-radius:10px;
        border:none;
        cursor:pointer;
        font-weight:800;
        background:linear-gradient(90deg,var(--primary),#2b25a6);
        color:var(--white);
        font-size:16px;
        margin-top:6px;
      }
      .muted-small{font-size:13px; color:var(--muted); margin-top:8px; display:flex;align-items:center; gap:8px}
      .muted-small input{transform:scale(1.05)}

      /* features / trust / badges */
      .trust-logos{display:flex; gap:12px; align-items:center; margin-top:20px; flex-wrap:wrap}
      .trust-logos img{
        height:100px; 
       
        /* filter:grayscale() 
        contrast(0.8); opacity:2 */
      }

      .section{
        background:transparent;
        margin-top:34px;
        padding:20px 0 0 0;
      }


      .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
      .card{
        background:var(--white);
        padding:20px;
        border-radius:12px;
        box-shadow:0 6px 20px rgba(15,23,42,0.04);
        min-height:120px;
      }
      .card h4{margin:0 0 8px 0; font-size:18px; color:var(--navy)}
      .card p{margin:0; color:var(--muted); font-size:14px}

     
      .avatar{width:56px;height:56px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
      .testimonial p{margin:0;color:var(--muted)}

      /* FAQ */
      .faq { margin-top:18px }
      .faq-item{background:var(--white); border-radius:12px; padding:14px; box-shadow:0 6px 18px rgba(10,20,40,0.04); margin-bottom:10px; cursor:pointer}
      .faq-item h5{margin:0; font-size:15px; color:var(--navy)}
      .faq-item p{display:none; margin-top:8px; color:var(--muted); font-size:14px}

      /* footer */
      footer{margin-top:34px; padding:24px 0; border-top:1px solid #eef2f6; color:var(--muted); font-size:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}

      /* responsive */
      @media (max-width:1060px){
        .hero{grid-template-columns:1fr 360px; gap:20px}
        h1{font-size:44px}
      }
      @media (max-width:900px){
        .container{padding:18px}
        .hero{grid-template-columns:1fr; padding:0; }
        .hero-right{order:-1; margin-bottom:18px}
        h1{font-size:36px}
        .grid-3{grid-template-columns:1fr}
      }
    

 @media  (max-width:480px){
        h1{font-size:18px; line-height:1.6;text-align: left;}
      .eyebrow span.pill {
    font-size:16px;
    font-weight: 700;
    color: #1c1c1c;
      }
        .brand .logo{width:30px;height:30px}
        .badge{right:12px; top:-10px}
.eyebrow .badge1 {
  width:30px;   /* small, like an icon */
  height:auto;
      }
  
.lead{
  display:none
}
      .benefit-box{
        margin-top:16px;
        padding:4px ;
        border: 1px solid rgba(10,43,70,0.06);
        border-radius:12px;
        background-color:#ffffff;
        box-shadow:inset 0 0 0 1px rgba(10,43,70,0.03);
        color:var(--muted);
        max-width:350px;
      }

      .benefit-box .lead{
        display:none;
      }


/* Right card (form) */
      .hero-right {
        background:var(--white);
        border-radius:12px;
        padding:18px;
        box-shadow:0 8px 30px rgba(9,18,33,0.08);
        position:relative;
        overflow:visible;
      }



.form-title{ font-size:10spx; font-weight:800; margin-bottom:10px; color:var(--navy) }
form textarea{ width:100%; padding:8px 10px; border-radius:10px; border:1px solid #e6e9ef; background:#fff; font-size:12px; margin-bottom:12px; resize:none; }
      form label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:600}
      form input[type="text"], form input[type="email"], form input[type="tel"]{  
    
        width:100%;
        padding:8px 10px;
        border-radius:10px;
        border:1px solid #e6e9ef;
        background:#fff;
        font-size:12px;
        margin-bottom:12px;

      }


      .form-row { display:flex; gap:10px }
      .small { flex:1 }

      .btn-primary{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:100%;
        padding:8px 10px;
        border-radius:10px;
        border:none;
        cursor:pointer;
        font-weight:800;
        background:linear-gradient(90deg,var(--primary),#2b25a6);
        color:var(--white);
        font-size:10px;
        margin-top:6px;
      }

.badge{
        position:absolute;
        top:-14px;
        right:18px;
        background:linear-gradient(90deg,#0004ff,#5f61f2);
        padding:4px 4px;
        border-radius:8px;
        font-weight:500;
        color:#ffffff;
        box-shadow:0 6px 18px rgba(255,178,77,0.16);
        display:flex; gap:8px; align-items:center;
      }

 }


/* Mobile-specific styles */

/* @media (max-width:1800px) {
  .container {
    flex-direction: column;
  }
  
  .hero-left{
    order: 1; 
  }

  .hero-right {
    order: 2; 
  }
} */





  /* small helper */
 .muted-2{color:var(--muted)}



   /* Testimonial Slider */
.slider-container {
  position: relative;
  max-width: 800px;
  width: 100%;
  overflow: hidden;
  padding: 20px 0px 0px 0px;
  margin: 0 auto;
}

.slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.testimonial-card {
  min-width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  gap: 20px;
}

.testimonial-card img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-content {
  flex: 1;
}

.testimonial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.testimonial-header h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #4a2f23;
}

.testimonial-header span {
  font-size: 0.9rem;
  color: #777;
  font-weight: 500;
  margin-left: 8px;
  font-style: italic;
}

.stars {
  color: #ffd000;
  font-size: 1.3rem;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  font-style: italic;
  margin: 0;
}

/* Dots */
.dots {
  text-align: center;
  margin-top: 15px;
}
.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}
.dot.active {
  background-color: #8b5e3c;
}

/* 📱 Responsive Styles */
@media (max-width: 768px) {
  .testimonial-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 16px;
    gap: 12px;
  }

  .testimonial-card img {
    width: 70px;
    height: 70px;
  }

  .testimonial-header {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }

  .stars {
    font-size: 1.1rem;
  }

  .testimonial-text {
    font-size: 0.9rem;
  }
}

@media (max-width:480px) {

  .testimonial-card {
    padding: 14px;
    gap: 10px;
    display: none;
  }


  .testimonial-card img {
    width: 60px;
    height: 60px;
  }

  .testimonial-header h4 {
    font-size: 1rem;
  }

  .testimonial-text {
    font-size: 0.85rem;
    line-height: 1.4;
  }

.dots {
 display: none;
}
}