html,body{
    font-family:"DM Sans",sans-serif;
    color:#161616;
    margin:0;
    padding:0;
  }

  /* Navbar */
  .navbar{
    padding:38px 0;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:#fff;
  }
  .nav-link{
    font-weight:500;
    color:#374151!important;
  }
  .nav-link.active,
  .nav-link:hover{
    color:#7209B7!important;
    font-size: 16px;
    font-weight: 500;
   
  }

  /* Hero with background image */
  .hero{
    position:relative;
    overflow:hidden;
    margin-top:80px;
    min-height:90vh;
    display:flex;
    align-items:center;
    background:url('https://www.moontriam.com/images/hero.jpg') center/cover no-repeat;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 100%);
    z-index:0;
  }
  .hero .container{
    position:relative;
    z-index:1;
    padding-top:56px;
    padding-bottom:56px;
    color:#111827;
  }
  @media (min-width:992px){
    .hero .container{
      padding-top:72px;
      padding-bottom:72px;
    }
  }

 
  .display-title .accent{
    color:#7209B7;
  }

  .lead-copy{
    color:#000000;
    max-width:60ch;
    font-size: 1rem;
    line-height: 150%;
  }
  .kicker{
    font-weight:400;
    color:#7209B7;
    font-size:1rem;
  }

  @media (max-width:768px){
    .display-title{
      font-size:32px;
    }
  }

  .display-title{
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;      /* Black */
  font-style: normal;
  font-size: 3rem;       /* 48px */
  line-height: 4rem;     /* 1 */
  letter-spacing: 0;
  margin-bottom: 1rem;   /* bootstrap की mb-3 जैसा */
}




/* === Promo Section (next section in screenshot) === */
.promo{position:relative;text-align:center;padding:6rem 0;background:linear-gradient(180deg,#ffffff 0%, #fff1ff 40%, #ffeefe 100%);} /* soft pink/purple wash */
/* .promo .container{max-width:1100px} */
.promo-title{
    font-weight:900;
    font-size:2.6rem;
    line-height:130%;
    margin:0 auto 1.5rem auto;
    color:#111827;
}

.promo-title .purple{background:linear-gradient(90deg, #7209B7 0%, #B5179E 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.promo-title .black{color:#111111}

.promo-desc{
    max-width:88ch;
    margin:4.5rem auto 2.5rem auto;
    color:#000000;
    opacity:.9;
    font-size:1rem;
    line-height:1.6;
    font-weight: 400;
}
.btn-cta{
    font-family:"DM Sans", sans-serif;
    font-style: medium;
    display:inline-block;
    border:none;
    border-radius:999px;
    padding:.9rem 2rem;
    font-weight:500;
    letter-spacing:.2px;
    margin-top: 70px;
    color: #FFFFFF;
    font-size: 1rem;
    text-decoration:none;
   background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
}
.btn-cta:hover{filter:brightness(.95)}


@media (max-width:992px){
.promo{padding:4.5rem 0}
.promo-title{font-size:2.5rem}
}
@media (max-width:576px){
.promo-title{font-size:2rem}
.promo-desc{padding:0 1rem}
}


 /* Section spacing helpers (rem units) */
  .py-lg-6{ padding-top: 6rem; padding-bottom: 6rem; }

  /* Title with purple gradient (#7209B7 -> #B5179E) */
  .why-title{
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;     /* 40px on desktop, adjust below */
    line-height: 1.1;
    /* margin: 0; */
    background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-top: 6rem;
     padding-bottom: 5rem;
  }

  /* Feature Card look (soft purple box, big radius, shadow) */
  .feature-card{
    background: #f8efff;                  /* हल्का लिलैक */
    border-radius: 1.5rem;                /* ~24px */
    padding: 2rem;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .feature-card:hover{
    transform: translateY(-0.25rem);
    box-shadow: 0 1rem 2.25rem rgba(114, 9, 183, 0.14);
  }

  /* Icon slot — you’ll replace the img srcs */
  .feature-icon{
    width: 3rem;    /* 48px */
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7209B7;
  }
  .feature-icon img{ max-width: 100%; height: auto; }

  .feature-title{
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 1.25rem;   /* 20px */
    color: #7209B7;
    margin: 0 0 0.5rem 0;
  }
  .feature-desc{
    font-size: 0.75rem;   /* ~15px */
    line-height: 1.6;
    color: #000000;       /* gray-800 */
    margin: 0;
  }

  /* Responsive tweaks */
  @media (max-width: 62rem){              /* ≤ 992px */
    .why-title{ font-size: 2.125rem; }    /* 34px */
  }
  @media (max-width: 36rem){              /* ≤ 576px */
    .why-title{ font-size: 1.75rem; }     /* 28px */
    .feature-card{ padding: 1.5rem; }
    .feature-title{ font-size: 1.125rem; }
    .feature-desc{ font-size: 0.9375rem; }
  }

.padding{

    padding-bottom: 5rem;
}

 /* nextgen-section */

/* 
  .nextgen-section{
    position: relative;
    background: linear-gradient(135deg, #ffeafd 0%, #ffffff 60%, #ffffff 100%);
    overflow: hidden;
    font-family: "DM Sans", sans-serif;
  }
  .py-lg-6{ padding-top: 6rem; padding-bottom: 6rem; }


  .ng-title{
    font-weight: 800;
    font-size: 2.80rem;          
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
  }
  .ng-title .black{ color:#111111; }


  .grad-text{
    background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }


  .ng-desc{
   font-family:"DM Sans",sans-serif;
    color:#000000;
    opacity:.9;
    font-size: 1rem;          
    line-height: 1.7;
    max-width: 30rem;  
    font-weight: 400;   
       margin-top: 5rem;
     
  }


  .btn-demo{
    font-family:"DM Sans",sans-serif;
    display:inline-block;
    padding: .9rem 2rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .02rem;
    background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
    color:#ffffff;
    box-shadow: 0 .5rem 1.25rem rgba(114, 9, 183, .25);
    font-size: 1rem;
     
  }
  .btn-demo:hover{ filter: brightness(.96); }

 
  .ng-figure{
    border-radius: 1.25rem;             
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(17,24,39,.12);
  }
  .ng-figure img{ display:block; width:100%; height:auto; }

  
  @media (max-width: 62rem){             
    .ng-title{ font-size: 2.5rem; }      
  }
  @media (max-width: 36rem){            
    .ng-title{ font-size: 2rem; }       
    .ng-desc{ max-width: none; }
    .btn-demo{ padding: .8rem 1.6rem; }
  } */




  .nextgen-section{
  position:relative;
  background:linear-gradient(135deg,#ffeafd 0%,#ffffff 60%,#ffffff 100%);
  overflow:hidden;
  font-family:"DM Sans",sans-serif;
}
.py-lg-6{padding-top:6rem;padding-bottom:6rem}

/* ---------- Fluid heading with clamp ---------- */
.ng-title{
  font-weight:800;
  /* mobile->desktop: 1.9rem to 3rem, viewport के साथ scale */
  font-size : 2.8rem;
  line-height:1.25;
  margin:0;
}
.ng-title .black{color:#111}

/* Gradient text */
.grad-text{
  background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

/* ---------- Description: fluid + safe margins ---------- */
.ng-desc{
  color:#000; opacity:.9;
  font-weight:400;
  /* 0.98rem..1.1rem तक fluid */
  font-size:clamp(.98rem, .9rem + .3vw, 1.1rem);
  line-height:1.7;
  max-width:42ch;              /* readable width */
  margin-top:1rem;             /* 5rem हटाया */
}

/* Button */
.btn-demo{
  display:inline-block;
  padding:.9rem 2rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:500;
  letter-spacing:.02rem;
  background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
  color:#fff;
  box-shadow:0 .5rem 1.25rem rgba(114,9,183,.25);
  font-size:1rem;
}
.btn-demo:hover{filter:brightness(.96)}

/* Image card */
.ng-figure{
  border-radius:1.25rem;
  overflow:hidden;
  /* box-shadow:0 1rem 2.5rem rgba(17,24,39,.12); */
  max-width:640px;             /* large screens पर control */
}
.ng-figure img{display:block;width:100%;height:auto}

/* ---------- 1024px tweaks (lg container चौड़ाई 960px होती है) ---------- */
@media (min-width:992px) and (max-width:1200px){
  /* थोड़ा gutter कम करो ताकि 1024 पर squeeze न लगे */
  .row.gx-lg-5{ --bs-gutter-x:1.25rem; }
  .ng-title{ font-size:2.4rem; }    /* 1024 पर comfortable */
  .ng-desc{ margin-top:.75rem; max-width:46ch; }
  .ng-figure{ max-width:560px; }
}

/* <= 992 (tablet & below) */
@media (max-width:991.98px){
  .ng-title{ line-height:1.3 }
  .ng-desc{ max-width:none }
  .btn-demo{ padding:.8rem 1.6rem }
  .ng-figure{ max-width:520px }
}

/* <= 576 */
@media (max-width:575.98px){
  .ng-title{ font-size:1.9rem }
}



   /* stats-section */

  .py-lg-6 { padding-top: 6rem; padding-bottom: 6rem; }

  .stats-section{
    background:#ffffff;
    font-family:"DM Sans",sans-serif;
  }


  .stat-value{
     font-family: "Roboto", sans-serif;
    font-weight:700;
    font-size:3rem;          /* 40px desktop below we bump */
    line-height:1;
    letter-spacing:0;
    margin-bottom:.5rem;
    background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display:inline-block;
  }

  .stat-label{
    font-family:"DM Sans",sans-serif;
    color:#000000;
    font-size:1.25rem;            /* 16px */
    line-height:1.5;
    opacity:.9;
    font-weight: 400;
  }

  /* Responsive sizing */
  @media (min-width: 62rem){   /* ≥ 992px */
    .stat-value{ font-size:3rem; }  /* 48px */
  }
  @media (max-width: 36rem){   /* ≤ 576px */
    .stat-value{ font-size:2rem; }  /* 32px */
  }

  



  /* CTA / Journey Section CSS */

   .py-6{ padding-top: 6rem; padding-bottom: 6rem; }

  .cta-journey{
    background:#000000;
    color:#ffffff;
    font-family:"DM Sans", sans-serif;
  }

  .cta-title{
    font-family:"DM Sans", sans-serif;
    font-weight:900;
    font-size:3rem;         /* 48px desktop */
    line-height:1.15;
    letter-spacing:0;
    margin:0 0 1rem 0;
    color:#ffffff;
  
  }

  /* MOON TRIAM gradient text */
  .cta-moon{
    font-family:"DM Sans", sans-serif;
    font-weight:900;
    font-size:3rem;         /* 48px */
    line-height:150%;
    margin:0 0 2rem 0;
    background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display:inline-block;
  }

  .cta-desc1{
    font-family:"DM Sans", sans-serif;
    font-style: light;
    max-width: 44rem;       /* ~704px */
    color:#FFFFFF;          /* subtle gray on black */
    opacity:.9;
    font-size:1rem;         /* 16px */
    line-height:1.7;
    margin: 0 auto 2.5rem auto;
    font-weight: 300;
    margin-bottom: 6.25rem;
  }

  .inquire-btn{
    font-family:"DM Sans", sans-serif;
    font-style: medium;
    display:inline-block;
    padding:.9rem 2rem;
    border-radius:999px;
    text-decoration:none;
    font-weight:500;
    letter-spacing:.02rem;
    background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
    color:#ffffff;
    box-shadow:0 .6rem 1.5rem rgba(114,9,183,.25);
    font-size: 1rem;
  }
  .btn-cta:hover{ filter:brightness(.96); }

  /* ===== Responsive ===== */
  @media (max-width: 62rem){              /* ≤ 992px */
    .cta-title{ font-size:2.5rem; }
    .cta-brand{ font-size:2.5rem; }
  }
  @media (max-width: 36rem){              /* ≤ 576px */
    .cta-title{ font-size:2rem; }
    .cta-brand{ font-size:2rem; margin-bottom:1.5rem; }
    .btn-cta{ padding:.8rem 1.6rem; }
  }

  /* What We Offer section*/

   .py-lg-6{ padding-top:6rem; padding-bottom:6rem; }  /* helper like earlier */

  .offer-section .container{
    font-family:"DM Sans",sans-serif;
    background:#ffffff;
     padding-left: 3rem;
  padding-right: 3rem;
  }

  /* Title (gradient purple text: #7209B7 → #B5179E) */
  .offer-title{
    font-family:"DM Sans", sans-serif;
    font-weight:900;
    font-size:3rem;           /* 40px desktop */
    line-height:1.1;
    margin:0;
    /* padding-bottom: 70px; */
    background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }

  .offer-intro{
     font-family:"DM Sans", sans-serif;
     font-style:"Regular";
    max-width:74rem;            /* ~960px */
    color:#000000;
    opacity:.9;
    font-size:1rem;             /* 16px */
    line-height:150%;
    font-weight: 400;
  }
  .offer-link{
    color:#7209B7;
    text-decoration:none;
    font-weight:700;
  }
  .offer-link:hover{ color:#B5179E; }

  /* Card look */
  .offer-card{
    background:#f7edff;         /* light lilac */
    border-radius:1.5rem;        /* ~24px */
    padding:2rem;
    box-shadow:0 .75rem 2rem rgba(114,9,183,.10);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .offer-card:hover{
    transform:translateY(-.25rem);
    box-shadow:0 1rem 2.25rem rgba(114,9,183,.14);
  }

  /* Icon holder (slot for your images) */
  .offer-icon{
    width:2.75rem;               /* 44px */
    height:2.75rem;
    border-radius:.75rem;        /* 12px */
    background:linear-gradient(90deg,rgba(114,9,183,.12) 0%, rgba(181,23,158,.12) 100%);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1rem;
  }
  .offer-icon img{ max-width:70%; height:auto; }

  .offer-heading{
    font-weight:500;
    font-size:1.25rem;           /* 20px */
    margin:0 0 .5rem 0;
    background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color: #7209B7;
  }

  .offer-desc{
    font-size:0.85rem;          /* 15px */
    line-height:1.6;
    color:#1f2937;
    margin:0;
    font-weight: 400;
  }

  /* Responsive tweaks */
  @media (max-width:62rem){      /* ≤ 992px */
    .offer-title{ font-size:2.125rem; }   /* 34px */
  }
  @media (max-width:36rem){      /* ≤ 576px */
    .offer-title{ font-size:1.75rem; }    /* 28px */
    .offer-card{ padding:1.5rem; }
    .offer-heading{ font-size:1.125rem; }
  }

  @media (min-width: 1200px){
  .offer-section .container{
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media (max-width: 576px){
  .offer-section .container{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Cards के बीच gap (Bootstrap gutter override) */
.offer-grid{
  --bs-gutter-x: 2.25rem;   /* default 1.5rem से बढ़ाया */
  --bs-gutter-y: 4rem;
}
@media (min-width: 992px){
  .offer-grid{ --bs-gutter-x: 2.5rem; }  /* lg+ पर और gap */
}

/* Card के अंदर left/right padding ज्यादा */
.offer-card{
  padding: 2rem 2.75rem;    /* पहले 2rem 2rem था */
}

/* चाहो तो card के content की right side थोड़ी extra breathing space */
.offer-heading,
.offer-desc{
  margin-right: .30rem;
       /* subtle inner-right spacing */
}

/* Compliance Feature Section (drop-in) */

/* 
.py-lg-6{ padding-top:6rem; padding-bottom:6rem; } 

  .comply-section{
    font-family:"DM Sans", sans-serif;
    background: linear-gradient(180deg, #fff4ff 0%, #ffffff 70%, #ffffff 100%);
  }


  .comply-figure{
    border-radius: 1rem;            
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(17,24,39,.12);
    margin-top: 0;
  }
  .comply-figure img{
    display:block; width:100%; height:auto;
  }

 
  .comply-title{
    font-weight: 900;
    font-size: 3rem;            
    line-height: 1.20;
    letter-spacing: 0;
    margin: 0;
    margin-top: 0;
  }
  .comply-title .black{ color:#111111; }
  .grad{
    background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
  }

  
  .comply-desc{
    color:#000000;
    opacity:.9;
    font-size: 1rem;              
    line-height: 1.7;
    max-width: 48rem; 
    font-weight: 400;             
  }


  @media (max-width: 62rem){        
    .comply-title{ font-size: 2.5rem; }   
  }
  @media (max-width: 36rem){        
    .comply-title{ font-size: 2rem; }   
  } */




  .py-lg-6{ padding-top:6rem; padding-bottom:6rem; }

.comply-section{
  font-family:"DM Sans", sans-serif;
  background: linear-gradient(180deg, #fff4ff 0%, #ffffff 70%, #ffffff 100%);
}

/* Image card */
.comply-figure{
  border-radius:1rem;
  overflow:hidden;
  /* box-shadow:0 1rem 2.5rem rgba(17,24,39,.12); */
  max-width:640px;                 /* cap so it doesn't dominate at 1024 */
}
.comply-figure img{ display:block; width:100%; height:auto; }

/* ---- Fluid Heading ---- */
.comply-title{
  font-weight:900;
  font-size:clamp(2rem, 1.2rem + 2.2vw, 3rem); /* mobile→desktop fluid */
  line-height:1.2;
  margin:0;
}
.comply-title .black{ color:#111; }

/* Gradient text */
.grad{
  background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}

/* ---- Body copy ---- */
.comply-desc{
  color:#000; opacity:.9;
  font-weight:400;
  font-size:clamp(.98rem, .9rem + .2vw, 1.05rem);
  line-height:1.7;
  max-width:60ch;                  /* readable width instead of wide 48rem */
  margin-top:.25rem;
}

/* ====== 1024 comfort zone (lg container ~960px) ====== */
@media (min-width:992px) and (max-width:1200px){
  /* gutters थोड़े कम ताकि columns को जगह मिले */
  .row.g-lg-5{ --bs-gutter-x:1.25rem; }
  .comply-title{ font-size:2.4rem; line-height:1.18; }
  .comply-desc{ max-width:62ch; }
  .comply-figure{ max-width:560px; }
}

/* Tablet & below */
@media (max-width:991.98px){
  .comply-figure{ max-width:540px; }
  .comply-title{ line-height:1.25; }
  .comply-desc{ max-width:none; }
}

/* Small phones */
@media (max-width:575.98px){
  .comply-title{ font-size:1.9rem; }
}



  /* Reviews / Testimonials Section  */

  .py-lg-6{ padding-top:6rem; padding-bottom:6rem; }

  .reviews-section{ font-family:"DM Sans",sans-serif; background:#ffffff; }

  .reviews-title{
    font-weight:900; 
    font-size:2.5rem; 
    line-height:1.1;
     margin:2.5rem ;
    padding-bottom: 6rem;
    background:linear-gradient(90deg,#7209B7 0%,#B5179E 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }

  /* equal-height columns on desktop */
  .reviews-grid > [class*="col-"]{ display:flex; }

  /* LEFT stack: coma top, arrow bottom, caption center-ish */
  .reviews-left{
    display:flex; flex-direction:column;
     align-items:flex-start;
    justify-content:space-between; 
    padding-left: 2.5rem;
    width:100%; 
    height:100%;
  }
  .reviews-left > *{ margin:0 !important; }  /* कोई extra margins नहीं */

  .quote-img{ height:3rem; width:auto; display:block; }              /* TOP line-up */
  .left-caption{ 

    color:#000000; 
    font-size:1.875rem;
     line-height:2.375rem; 

    }   /* MIDDLE */
  .arrow-img{ 

    height:0.93rem; 
    width:14.68rem;
     display:block; 
    
    }            /* BOTTOM line-up */

  /* MIDDLE photo — same height as right card (desktop) */
  .reviews-figure{
    width:100%; height:100%;
    border-radius:1rem; overflow:hidden;
    /* box-shadow:0 1rem 2.5rem rgba(17,24,39,.12); */
  }
  .reviews-figure img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  }

  /* RIGHT card — match photo height (desktop) */
  .testimonial-card{
    background:#f7edff; border-radius:1rem; 
    padding:4rem;
    box-shadow:0 .75rem 2rem rgba(114,9,183,.10);
    height:100%; display:flex; flex-direction:column;
  }
  .testimonial-title{
     font-weight:600;
      font-size:1.28rem;
       line-height:1.25;
        margin:0;
        padding-bottom: 3rem;
        padding-top: 1rem;
     }
  .testimonial-title .black{ color:#111; }
  .grad{
    background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block;
  }
  .testimonial-text
  { color:#7209B7; 
    font-size:0.90rem;
     line-height:1.7; 
     margin:0;
     font-weight: 400;
     }
  .testimonial-author
  { color:#000000; 
    font-weight:500; 
    font-size:1rem; 
    margin-top:2rem;
    padding-top: 4rem;
}

  /* Bottom nav buttons */
  .nav-btn{
    width:2.5rem; height:2.5rem; border:0; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 .15rem .4rem rgba(0,0,0,.08);
  }
  .nav-prev{ background:#f3f4f6; }
  .nav-next{ background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%); }

  /* Responsive */
  @media (max-width:62rem){ /* ≤992px */
    .reviews-title{ font-size:2.125rem; }
    .testimonial-title{ font-size:1.75rem; }
  }
  @media (max-width:36rem){ /* ≤576px */
    .reviews-title{ font-size:1.75rem; }
    /* मोबाइल पर natural stack; equal-height की जरूरत नहीं */
    .reviews-figure{ height:auto; aspect-ratio:3/4; }
    .reviews-figure img{ height:100%; object-fit:cover; }
  }




  /* ---- slider plumbing ---- */
/* image wrapper already has radius/overflow; make it a viewport */
.reviews-figure{ position:relative; overflow:hidden; border-radius:1rem; }
.rf-track{
  display:flex;
  height:100%;
  width:100%;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.rf-item{
  min-width:100%;   /* one full slide at a time */
  height:100%;
}
.rf-item img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* testimonial viewport */
.testimonial-viewport{ position:relative; overflow:hidden; }
.tc-track{
  display:flex;
  height:100%;
  width:100%;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}
.tc-track .testimonial-card{
  min-width:100%;          /* one card per view */
  height:100%;
  background:#f7edff;      /* keep your styles */
  border-radius:1rem;
  padding:4rem;
  box-shadow:0 .75rem 2rem rgba(114,9,183,.10);
  display:flex; flex-direction:column;
}

/* small screens: let heights flow naturally */
@media (max-width: 576px){
  .rf-item{ min-height:auto; }
  .tc-track .testimonial-card{ padding:2rem; }
}

  /* Our Clients */

  .py-lg-6{ padding-top:6rem; padding-bottom:6rem; }

  .clients-section{
    background:#000000; 
    color:#fff; 
    font-family:"DM Sans",sans-serif;
  }
  .clients-title{
    font-weight:900; 
    font-size:3rem;
     line-height:1.1; 
     margin:0;
     padding-top: 1rem;
     padding-bottom: 14px;
    background:linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
    -webkit-background-clip:text;
     background-clip:text;
      -webkit-text-fill-color:transparent;
  }
  .clients-subtitle{
    color:#ffff;
     font-size:0.875rem;
      line-height:1.6;
    margin:0;
    font-weight: 400;
  }

  /* Marquee layout (JS animates transform) */
  .clients-marquee{
    width:100%; overflow:hidden; padding:2rem 0;
  }
  .marquee-track{
    display:flex; align-items:center; gap:4rem;
    will-change: transform;           /* smoother on GPU */
  }

  .client-logo{
    height:3.5rem; width:auto; display:block;
    background:#fff; border-radius:.25rem;
    padding:.25rem .75rem; box-shadow:0 .25rem .75rem rgba(0,0,0,.15);
  }

  @media (min-width:992px){
    .clients-title{ font-size:2.75rem; }
    .client-logo{ height:4.5rem; }
    .marquee-track{ gap:5rem; }
  }
  @media (max-width:576px){
    .clients-title{ font-size:2rem; }
    .client-logo{ height:2.8rem; }
    .marquee-track{ gap:2rem; }
  }

/* FAQ Section */


.py-lg-6{ padding-top:6rem; padding-bottom:6rem; }

 .faq{

    color: #000;
font-family: "DM Sans";
font-size: 14px;
font-style: normal;
font-weight: 300;

  }

  .faq-section{
    font-family:"DM Sans",sans-serif;
    background: linear-gradient(180deg, #ffeefd 0%, #ffffff 60%, #ffffff 100%);
  }

  /* Left image card */
 .faq-figure{
  /* Figma ratio: 569 × 681  ⇒  61/73 */
  aspect-ratio: 61 / 73;

  /* fluid width, but cap at Figma size on large screens */
  width: 100%;
  max-width: 35.56rem;   /* 569px */

  /* aesthetics (आपके पहले वाले जैसे) */
  border-radius: 1.25rem;
  overflow: hidden;
  /* box-shadow: 0 1rem 2.5rem rgba(17,24,39,.12); */

  /* center inside column */
  margin-left: auto;
  margin-right: auto;
}
 .faq-figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cover = fill nicely, crop हो सकता है */
  object-position: center;
}

  /* Title (purple gradient) */
  .faq-title{
    font-weight:900;
     font-size:2.5rem;
      line-height:1.15;
       margin:0;
       padding-bottom: 5rem;
    background: linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }

  @media (max-width: 576px){
  .faq-figure{ max-width: 22rem; } /* ~352px; चाहो तो हटाओ */
}
  @media (max-width:576px){ .faq-title{ font-size:2rem; } }

  /* FAQ list */
  .faq-list{ display:grid; gap:1rem; }

  .faq-item{
    background: rgba(114,9,183,.06);
    border-radius:.75rem;
    box-shadow: 0 .75rem 2rem rgba(114,9,183,.08);
    padding-bottom: 0.70rem;
  }

  .faq-toggle{
  width:100%; border:0; background:transparent; color:#111;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.875rem 1rem; border-radius:.75rem; text-align:left;
  font-weight:600; font-size:.95rem; cursor:pointer;
}

.chev-img{
  width:1.25rem;            /* ~20px */
  height:1.25rem;
  flex:0 0 1.25rem;
  transition: transform .25s ease;
  transform: rotate(0deg);
}

/* open state पर rotate */
.faq-item.open .chev-img{
  transform: rotate(180deg);
}

/* बाकी accordion animation जैसा का तैसा */
.faq-content{ overflow:hidden; height:0; padding:0 1rem; transition:height .28s ease; }
.faq-content p{ color:#4b5563; font-size:.95rem; line-height:1.7; margin:.5rem 0 1rem; }

.faq-item{ background:rgba(114,9,183,.06); border-radius:.75rem; box-shadow:0 .75rem 2rem rgba(114,9,183,.08); }
.faq-item.open .faq-toggle{ background:rgba(114,9,183,.08); }
  .faq-toggle:hover{ background: rgba(114,9,183,.08); }

  /* Chevron (CSS only) */
  .chev{
    width:1.25rem; height:1.25rem; flex:0 0 1.25rem; border-radius:999px;
    position:relative; background:#fff; box-shadow:0 .1rem .3rem rgba(0,0,0,.08);
  }
  .chev::before{
    content:""; position:absolute; inset:0; margin:auto; width:.55rem; height:.35rem;
    background:conic-gradient(from 45deg at 50% 50%, transparent 0 25%, #7209B7 0 75%, transparent 0);
    -webkit-mask: radial-gradient(circle at 50% 50%, #000 68%, transparent 69%);
            mask: radial-gradient(circle at 50% 50%, #000 68%, transparent 69%);
    transform: rotate(0deg); transition: transform .25s ease;
  }

  .faq-content{
    overflow:hidden; height:0; padding:0 1rem; /* padding for text sides */
    transition: height .28s ease;
  }
  .faq-content p{
    color:#4b5563; font-size:.95rem; line-height:1.7; margin: .5rem 0 1rem 0;
  }

  /* Open state */
  .faq-item.open .chev::before{ transform: rotate(180deg); }
  .faq-item.open .faq-toggle{ background: rgba(114,9,183,.08); }


  /* Newsletter Subscribe  */

  .py-lg-6{ padding-top:6rem; padding-bottom:6rem; }

  .newsletter-section{
    font-family:"DM Sans", sans-serif;
    background: linear-gradient(180deg, #ffffff 0%, #fff2fb 55%, #ffeafd 100%);
  }

  .nl-title{
    font-weight:900;
     line-height:normal;
      margin:0;
    font-size:3rem; /* 40px */
    background: linear-gradient(90deg,#7209B7 0%, #B5179E 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .nl-sub{
     color:#000000;
      font-size:1rem; 
      line-height:normal;
       margin:0; 
    }

  /* ===== Figma-style chips (input + button same look) ===== */
  .chip-field, .chip-btn{
    /* Figma specs translated to responsive */
    height: 3rem;                         /* 48px */
    border-radius: 1.5rem;                /* 24px */
    padding: 1rem 1.5rem;                 /* 16px 24px */
    border: 2px solid #7209B7;
    background: #FFF3FD;
    /* width fluid, but cap at ~319px like Figma */
    width: min(100%, 19.9375rem);         /* 319px */
  }

  /* Input (text color & focus) */
  .chip-field{
    outline: none;
    font-size:.95rem;
    color:#111;
  }
  .chip-field::placeholder{ 
    color:#9ca3af; 
    font-size: 1rem;
    background: linear-gradient(90deg, #B5179E 0%, #7209B7 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
  .chip-field:focus{
    box-shadow: 0 0 0 .2rem rgba(114,9,183,.15);
  }

  /* Button same chip look + pointer & bold text */
 .chip-btn{
  display:flex; align-items:center;
   justify-content:center; 
   gap:.625rem;
  height: 3rem;                 /* 48px */
  border-radius: 1.5rem;        /* 24px */
  padding: 1rem 1.5rem;         /* 16px 24px */
  width: min(100%, 19.9375rem); /* 319px max */
  border: 0;                    /* gradient fill, border नहीं */
  background: linear-gradient(90deg, #7209B7 0%, #B5179E 100%);
  color:#ffffff; 
  font-weight:500;
  box-shadow: 0 .6rem 1.4rem rgba(114,9,183,.25);
  cursor:pointer;
  transition: filter .15s ease, transform .02s ease-in-out;
  font-size: 1.25rem;
    
}
  .chip-btn:hover{ filter: brightness(.96); }
.chip-btn:active{ transform: translateY(1px); }
.chip-btn:focus-visible{ outline: 2px solid rgba(114,9,183,.35); outline-offset: 2px; }

  /* Responsive tweaks */
  @media (max-width:576px){
    .nl-title{ font-size:2rem; }        /* 32px */
  }
  @media (min-width:992px){
    .nl-title{ font-size:2.75rem; }     /* 44px */
  }

  .nl-form{
    padding-top: 4rem;
  }


  /* Footer Section */

   .footer-section{
    font-family:"DM Sans",sans-serif;
    color:#fff;
    background: linear-gradient(135deg, #7209B7 0%, #B5179E 100%);
  }

  .footer-logo
  { 
    height:35px; 
    width:auto; 
    object-fit:contain;
 }
  .footer-brand{ font-weight:800; letter-spacing:.08em; }

  .footer-tagline
  { 

    color:#fff; 
    font-size:0.70rem;
    /* text-align: center;  */
    line-height: normal;
    font-weight: 300;
}

  .soc{
    width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.35); border-radius:50%;
    transition: background .2s ease, transform .1s ease;
  }
  .soc:hover{ background:rgba(255,255,255,.12); transform: translateY(-1px); }

  .footer-head{
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight:500; 
    margin-bottom:.75rem; 
    letter-spacing:.02em;
    font-size: 1.25rem;
  }

  .footer-links
  { list-style:none; 
    padding:0; margin:0;
 }
  .footer-links li{
   
    margin:.45rem 0;
  
    
 }
  .footer-links a{
     font-family: "Roboto", sans-serif; 
      color: #fff;
     text-decoration:none; 
       font-size: 0.875rem;
           font-weight: 400;
             line-height: normal;
    font-style: normal;

  }
  .footer-links a:hover{ color:#fff; text-decoration:underline; }

  .footer-hr{
    border:0; height:1px; background: rgba(255,255,255,.45);
  }

  .footer-mini{

    color:#fff; 
    text-decoration:none;
    font-size: 0.90rem;
  }
  .footer-mini:hover{ color:#fff; text-decoration:underline; }

  /* Responsive tweaks */
  @media (max-width: 576px){
    .footer-brand{ font-size:1rem; }
    .footer-logo{ height:32px; }
  }
.location{
     font-family: "Roboto", sans-serif; 

color: #FFF;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 18px */
}



/* reveal section */

.reveal-up{
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.98);
  transition:
    transform 900ms cubic-bezier(.22,1,.36,1),
    opacity   900ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}
.reveal-up.show{
  opacity: 1;
  transform: none;
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ transition: none; transform: none; opacity:1; }
}



/* Dropdown */


:root{ --accent:#7209B7; }

/* Active color for top nav links */
.navbar .nav-link.active{ color: var(--accent) !important; }

/* Dropdown items: active/pressed color */
.dropdown-item.active, .dropdown-item:active{
  background-color: var(--accent) !important;
  color:#fff !important;
}

/* Nice dropdown look */
.dropdown-menu{
  border-radius: 12px;
}

/* Hover to open (desktop only) */
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{
    display: block;
    margin-top: 0; /* snap to toggle */
  }
}

/* Optional: subtle hover colors */
.navbar .nav-link:hover{ color: var(--accent); }
.dropdown-item:hover{
  background: rgba(114,9,183,.08);
  color: var(--accent);
}

/* extra responsive */



@media (min-width: 768px) and (max-width: 1024px){
  .reviews-left .left-caption{
    padding-top: 24px !important; 
    padding-bottom: 24px !important;
    
  }

}


@media (min-width: 1024px) and (max-width: 1366px){
 
  .arrow-img{

    padding-right: 80px;
  }

}


@media (min-width: 1024px) and (max-width: 1366px){
 
  .arrow-img{

    padding-right: 80px;
  }

}




@media (width: 1024px) and (height: 600px) and (orientation: landscape){
  

  .faq-title{

    padding-bottom: 0;
  }

 
}