/* ===================================================
   RESET & BASE
=================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a2e;
  background: #ffffff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

:root {
  --green: #1e8e3e;
  --green-dark: #146c2e;
  --green-light: #e9f6ec;
  --navy: #1a2233;
  --dark-bg: #10182a;
  --text-gray: #55606e;
}


/* ===================================================
   HERO SECTION
=================================================== */

.hero{
    position: relative;
    padding: 70px 0 55px;
    overflow: hidden;
    background: #f8faf8;
    text-align: center;
}

/* ==========================
   Background Charts
========================== */

.hero__chart{
    position: absolute;
    inset: 0 auto 0 0;
    width: 260px;
    opacity: .35;
    pointer-events: none;
    z-index: 1;
}

.hero__chart--left{
    left: -30px;
    transform: scaleY(-1);
}

.hero__chart--right{
    left: auto;
    right: -30px;
}

.hero__chart svg{
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================
   Content
========================== */

.hero .container{
    position: relative;
    z-index: 2;
    max-width: 1180px;
}

/* ==========================
   Eyebrow
========================== */

.eyebrow{
    margin-bottom: 10px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1b2335;
}

/* ==========================
   Hero Title
========================== */

.hero__title{
    margin-bottom: 18px;
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--green);
}

/* ==========================
   Hero Subtitle
========================== */

.hero__subtitle{
    max-width: 800px;
    margin: 0 auto 36px;
    font-size: clamp(1rem, 2vw, 1.125rem);
    font-weight: 500;
    line-height: 1.7;
    color: #1d2435;
}

/* ==========================
   Responsive
========================== */

@media (max-width:991px){

    .hero{
        padding: 60px 0 50px;
    }

    .hero__chart{
        width: 180px;
        opacity: .2;
    }

}

@media (max-width:768px){

    .hero{
        padding: 50px 0 40px;
    }

    .hero__chart{
        display: none;
    }

    .hero__subtitle{
        margin-bottom: 28px;
    }

}

@media (max-width:576px){

    .eyebrow{
        font-size: .75rem;
        letter-spacing: 1.5px;
    }

    .hero__title{
        line-height: 1.1;
    }

}


.hero__desc{
    max-width:760px;
    margin:0 auto 32px;
    font-size:20px;
    font-weight:500;
    line-height:1.7;
    color:#1d2435;
}

.text-green{
    color:var(--green);
    font-weight:700;
}




.video-box{
    width:100%;
    max-width:1050px;
    margin:40px auto;
    position:relative;
    padding-bottom:56.25%; /* 16:9 */
    height:0;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    background:#000;
}

.video-box iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}





/* ===================================================
   WHATSAPP CTA
=================================================== */

.whatsapp-cta{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    width:100%;
    max-width:620px;

    padding:22px 34px;

    border-radius:14px;

    background:linear-gradient(180deg,#35c75a 0%,#239245 100%);

    color:#fff;

    text-decoration:none;

    box-shadow:0 14px 35px rgba(35,146,69,.35);

    transition:.25s ease;

    margin-bottom:22px;

}

.whatsapp-cta:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(35,146,69,.45);

}

.whatsapp-cta svg{

    width:52px;
    height:52px;

    flex-shrink:0;

}

.whatsapp-cta__text{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    line-height:1.2;

}

.whatsapp-cta__text strong{

    font-size:34px;

    font-weight:800;

    letter-spacing:.5px;

}

.whatsapp-cta__text small{

    margin-top:4px;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    opacity:.95;

    text-transform:uppercase;

}

/* ===================================================
   SECURITY LINE
=================================================== */

.security-line{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:15px;

    color:#555;

}

.security-line svg{

    width:18px;
    height:18px;

    fill:var(--green);

}

/* ===================================================
   SECTION HEADINGS
=================================================== */

.section-eyebrow{

    margin:0 0 10px;

    text-align:center;

    color:var(--green);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.section-title{

    position:relative;

    margin:0 auto 55px;

    text-align:center;

    font-size:40px;

    font-weight:800;

    color:var(--navy);

    line-height:1.2;

    padding-bottom:18px;

}

.title-underline{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:65px;

    height:4px;

    border-radius:50px;

    background:var(--green);

}

/* ===================================================
   TABLET
=================================================== */

@media (max-width:991px){

    .hero{
        padding:60px 0 45px;
    }

    .hero__chart{
        display:none;
    }

    .hero__title{
        font-size:56px;
    }

    .hero__subtitle{
        font-size:17px;
    }

    .hero__desc{
        font-size:18px;
    }

    .video-card{
        max-width:100%;
    }

    .whatsapp-cta{
        max-width:100%;
    }

    .whatsapp-cta__text strong{
        font-size:28px;
    }

}

/* ===================================================
   MOBILE
=================================================== */

@media (max-width:576px){

    .hero{
        padding:50px 0 40px;
    }

    .eyebrow{
        font-size:12px;
    }

    .hero__title{
        font-size:38px;
        line-height:1.1;
    }

    .hero__subtitle{
        font-size:15px;
        margin-bottom:28px;
    }

    .video-card{
        border-radius:12px;
    }

    .video-card__play{
        width:70px;
        height:70px;
    }

    .video-card__play svg{
        width:24px;
        height:24px;
    }

    .hero__desc{
        font-size:16px;
        margin-bottom:24px;
    }

    .whatsapp-cta{

        width:100%;

        padding:18px;

        gap:14px;

        border-radius:12px;

    }

    .whatsapp-cta svg{

        width:42px;
        height:42px;

    }

    .whatsapp-cta__text strong{

        font-size:22px;

    }

    .whatsapp-cta__text small{

        font-size:12px;

    }

    .security-line{

        font-size:13px;

        text-align:center;

        flex-wrap:wrap;

    }

    .section-title{

        font-size:30px;

        margin-bottom:40px;

    }

}
/* ===================================================
   BENEFITS SECTION
=================================================== */

.benefits {
    background: #f4faf4;
    padding: 70px 0;
}

/* Full Width Container */
.benefits .container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

/* Grid */
.benefits__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: flex-start;
    width: 100%;
}

/* Item */
.benefit-card {
    position: relative;
    text-align: center;
    padding: 0 28px;
}

/* Vertical Divider */
.benefit-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    height: 170px;
    background: #d8d8d8;
}

/* Icon */
.benefit-card__icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #dff0e2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.benefit-card__icon img,
.benefit-card__icon svg{
    width:40px;
    height:40px;
    object-fit: contain;
}

/* Heading */
.benefit-card h3{
    margin:0 0 12px;
    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    color:#12233d;
    letter-spacing:.4px;
    line-height:1.4;
}

/* Description */
.benefit-card p{
    margin:0 auto;
    max-width:180px;
    font-size:14px;
    line-height:1.75;
    color:#5f6368;
}

/* ==============================
   Tablet
============================== */

@media (max-width:991px){

    .benefits__grid{
        grid-template-columns:repeat(2,1fr);
        gap:45px 30px;
    }

    .benefit-card::after{
        display:none;
    }

}

/* ==============================
   Mobile
============================== */

@media (max-width:576px){

    .benefits{
        padding:55px 0;
    }

    .benefits .container{
        padding:0 18px;
    }

    .benefits__grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .benefit-card{
        padding:0;
    }

    .benefit-card__icon{
        width:74px;
        height:74px;
    }

    .benefit-card__icon img,
    .benefit-card__icon svg{
        width:34px;
        height:34px;
    }

    .benefit-card h3{
        font-size:14px;
    }

    .benefit-card p{
        font-size:13px;
        max-width:260px;
    }

}



/* ===================================================
   TESTIMONIALS SECTION
=================================================== */

.testimonials{
    background:#edf6ee;
    padding:80px 0;
}

.testimonials .container{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:0 30px;
}

/* ===================================================
   SWIPER
=================================================== */

.testimonialSwiper{
    width:100%;
    padding:20px 5px 60px;
    overflow:hidden;
}

.testimonialSwiper .swiper-wrapper{
    align-items:stretch;
}

.testimonialSwiper .swiper-slide{

    background: transparent;

    border-radius:18px;

    overflow:hidden;

    padding:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

/* .testimonialSwiper .swiper-slide:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

} */

/* ===================================================
   IMAGE
=================================================== */

.testimonialSwiper img{

    width:100%;

    max-width:280px;

    max-height:560px;

    height:auto;

    object-fit:contain;

    display:block;

    margin:auto;

    border-radius:14px;

}

/* ===================================================
   PAGINATION
=================================================== */

.testimonialSwiper .swiper-pagination{

    bottom:0 !important;

}

.testimonialSwiper .swiper-pagination-bullet{

    width:10px;

    height:10px;

    /* background:#c7c7c7; */

    opacity:1;

    transition:.3s;

}

.testimonialSwiper .swiper-pagination-bullet-active{

    width:30px;

    border-radius:50px;

    background:var(--green);

}

/* ===================================================
   NAVIGATION
=================================================== */

.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev{

    width:48px;

    height:48px;

    border-radius:50%;



    color:var(--green);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.testimonialSwiper .swiper-button-next::after,
.testimonialSwiper .swiper-button-prev::after{

    font-size:18px;

    font-weight:700;

}

.testimonialSwiper .swiper-button-next:hover,
.testimonialSwiper .swiper-button-prev:hover{

    background:var(--green);

    color:#fff;

}

/* ===================================================
   TABLET
=================================================== */

@media(max-width:991px){

    .testimonialSwiper img{

        max-width:240px;

        max-height:480px;

    }

    .testimonialSwiper .swiper-button-next,
    .testimonialSwiper .swiper-button-prev{

        display:none;

    }

}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:576px){

    .testimonials{

        padding:55px 0;

    }

    .testimonials .container{

        padding:0 18px;

    }

    .testimonialSwiper{

        padding-bottom:45px;

    }

    .testimonialSwiper .swiper-slide{

        padding:10px;

        border-radius:14px;

    }

    .testimonialSwiper img{

        width:100%;

        max-width:220px;

        max-height:420px;

        border-radius:12px;

    }

}

/* ===================================================
   TRUST BAR
=================================================== */

.trust-bar{
    background:#101820;
    padding:28px 0;
}

.trust-bar .container{
    max-width:1400px;
    width:100%;
    margin:0 auto;
    padding:0 30px;
}

.trust-bar__inner{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:50px;

    flex-wrap:wrap;

}

/* ==========================================
   TRUST ITEM
========================================== */

.trust-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.trust-item:hover{

    transform:translateY(-2px);

}

.trust-item svg,
.trust-item img{

    width:26px;

    height:26px;

    flex-shrink:0;

}

.trust-item span{

    line-height:1.4;

}

/* ==========================================
   TABLET
========================================== */

@media (max-width:991px){

    .trust-bar{

        padding:24px 0;

    }

    .trust-bar__inner{

        gap:30px;

    }

    .trust-item{

        font-size:14px;

    }

}

/* ==========================================
   MOBILE
========================================== */

/* @media (max-width:576px){

    .trust-bar{

        padding:22px 0;

    }

    .trust-bar .container{

        padding:0 18px;

    }

    .trust-bar__inner{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .trust-item{

        width:100%;

        font-size:14px;

    }

    .trust-item svg,
    .trust-item img{

        width:22px;

        height:22px;

    }

} */

/* ===================================================
   FOOTER
=================================================== */
.footer {
  background: #0b1220;
  padding: 26px 0;
  text-align: center;
}
.footer p {
  margin: 0 0 4px;
  color: #8a94a6;
  font-size: 12px;
}
.footer p:last-child { margin-bottom: 0; }

/* ===================================================
   RESPONSIVE
=================================================== */
@media (max-width: 900px) {
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero__title { font-size: 38px; }
  .hero__chart { width: 140px; opacity: 0.4; }
  .benefits__grid { grid-template-columns: repeat(3, 1fr); }
  .section-title { font-size: 27px; }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .hero { padding: 36px 0 32px; }
  .hero__title { font-size: 30px; }
  .hero__subtitle { font-size: 15px; }
  .hero__desc { font-size: 14px; }
  .whatsapp-cta { padding: 14px 26px; gap: 10px; }
  .whatsapp-cta__text strong { font-size: 15px; }
  .whatsapp-cta__text small { font-size: 10.5px; }
  .security-line { font-size: 11.5px; flex-wrap: wrap; }
  .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .trust-bar__inner { gap: 18px 26px; }
  .trust-item { font-size: 12px; }
  .section-title { font-size: 23px; margin-bottom: 34px; }
  .hero__chart--left, .hero__chart--right { width: 90px; opacity: 0.3; }
}