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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#ffffff;

    color:#222;

    overflow-x:hidden;

}

a{
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

/* ==========================================
   CONTAINER
========================================== */

.container{

    width:92%;

    max-width:1280px;

    margin:auto;

}

/* ==========================================
   NAVBAR
========================================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

    z-index:999;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

}

.nav-container{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/* ==========================================
   LOGO
========================================== */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:44px;

    height:44px;

    border-radius:12px;

}

.logo span{

    font-size:24px;

    font-weight:700;

    color:#4E746E;

}

/* ==========================================
   LINKS
========================================== */

.nav-links{

    display:flex;

    align-items:center;

    gap:34px;

}

.nav-links a{

    color:#333;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover{

    color:#4E746E;

}

/* ==========================================
   BUTTON
========================================== */

.btn-nav{

    background:#4E746E;

    color:#fff !important;

    padding:12px 24px;

    border-radius:30px;

    font-weight:600;

    transition:.3s;

}

.btn-nav:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(23,134,75,.25);

}

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

.menu-btn{

    display:none;

    font-size:28px;

    cursor:pointer;

}
/* ==========================================
   HERO
========================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding-top:140px;
    padding-bottom:90px;

    background:
        radial-gradient(circle at top left,#dff8ea 0%,transparent 30%),
        radial-gradient(circle at bottom right,#e8fff3 0%,transparent 30%),
        linear-gradient(
            180deg,
            #f9fffb 0%,
            #ffffff 100%
        );

}

.hero-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

}

.hero-left{

    flex:1;

}

.tag{

    display:inline-block;

    background:#EAF8EF;

    color:#4E746E;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:24px;

}

.hero h1{

font-size:60px;

line-height:1.08;

font-weight:700;

color:#151515;

letter-spacing:-1.5px;

margin-bottom:24px;

max-width:650px;

}

.hero p{

font-size:18px;

line-height:1.9;

color:#5d5d5d;

max-width:580px;

margin-top:10px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:38px;

}

.btn-primary{

background:#4E746E;

color:white;

padding:18px 36px;

border-radius:40px;

font-weight:600;

transition:.35s;

box-shadow:0 20px 40px rgba(23,134,75,.22);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:0 30px 55px rgba(23,134,75,.35);

}



.btn-secondary{

background:white;

border:2px solid #4E746E;

color:#4E746E;

padding:18px 36px;

border-radius:40px;

font-weight:600;

transition:.35s;

}

.btn-secondary:hover{

background:#4E746E;

color:white;

}
/* Store Buttons */

.store-buttons{

    display:flex;

    gap:18px;

    margin-top:35px;

    flex-wrap:wrap;

    align-items:center;

}

.store-buttons a{

    display:inline-block;

    transition:.25s;

}

.store-buttons a:hover{

    transform:translateY(-4px);

}

.store-buttons img{

    height:72px;

    width:auto;

    display:block;

}

.hero-stats{

display:flex;

gap:28px;

margin-top:50px;

flex-wrap:wrap;

}

.hero-stats div{

background:white;

padding:20px 28px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

min-width:120px;

text-align:center;

}

.hero-stats h3{

font-size:30px;

color:#4E746E;

margin-bottom:5px;

}

.hero-stats span{

    color:#666;

    font-size:15px;

}

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.hero-right img{

width:890px;

border-radius:40px;

animation:float 5s ease-in-out infinite;

box-shadow:

0 45px 80px rgba(0,0,0,.15),

0 10px 20px rgba(23,134,75,.18);

background:white;

padding:10px;

}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-14px);
}

100%{
transform:translateY(0px);
}

}
.hero::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:#4E746E;

opacity:.06;

border-radius:50%;

top:-140px;

left:-120px;

filter:blur(20px);

}

.hero::after{

content:"";

position:absolute;

width:360px;

height:360px;

background:#00D26A;

opacity:.05;

border-radius:50%;

right:-100px;

bottom:-100px;

filter:blur(30px);

}

/*==========================
      STORE BUTTONS
===========================*/

.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
}

.store-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.store-btn:hover{
    transform:translateY(-4px);
}

/* Google Play */

.store-btn img{
    width:239px;
    height:71px;
}

/* Apple */

.app-store{
    width:239px;
    height:71px;

    background:#ECECEC;
    border-radius:14px;

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

    gap:12px;
    padding: 10px;;
}

.apple-icon{
    font-size:50px;
    color:#6D8663;
}

.store-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.store-text span{
    font-size:16px;
    color:#6D8663;
}

.store-text strong{
    font-size:26px;
    color:#6D8663;
    font-weight:700;
}

.disabled{
    cursor:default;
}



/* ==========================================
   TRUSTED SECTION
========================================== */

.trusted{

    padding: 0px 0;

    background:#fff;

}

.trusted-title{

    text-align:center;

    font-size:20px;

    font-weight:600;

    color:#555;

    margin-bottom:45px;

}

.trusted-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.trusted-card{

    background:white;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

    border:1px solid #edf1ef;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.trusted-card:hover{

    transform:translateY(-8px);

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

}

.trusted-card h2{

    font-size:42px;

    color:#4E746E;

    margin-bottom:10px;

}

.trusted-card span{

    color:#666;

    font-size:15px;

    line-height:1.5;

}
/*==================================
        SECTION HEADER
==================================*/

.section-header{

    text-align:center;

    margin-bottom:55px;

}

.section-tag{

    display:inline-block;

    background:#EAF8EF;

    color:#4E746E;

    padding:8px 18px;

    border-radius:50px;

    font-weight:600;

    font-size:14px;

}

.section-header h2{

    margin-top:18px;

    font-size:42px;

    color:#111;

}

.section-header p{

    margin-top:14px;

    color:#666;

    font-size:18px;

}

/*==================================
        CATEGORIES
==================================*/

.categories{

    padding:70px 0;
    background:#F8FBF9;
    overflow:hidden;

}

.category-marquee{

    overflow:hidden;
    margin-top:40px;

}

.category-track{

    display:flex;
    width:max-content;
    gap:18px;

    animation:scrollCategories 35s linear infinite;

}

.category-track span{

    background:white;

    padding:14px 26px;

    border-radius:999px;

    white-space:nowrap;

    font-size:17px;

    font-weight:600;

    color:#333;

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

    border:1px solid #EAF8EF;

}

.category-track span:hover{

    background:#4E746E;
    color:white;

}

@keyframes scrollCategories{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}
/*==================================
            FEATURES
==================================*/

.features{

    padding:50px 0;

    background:#ffffff;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.feature-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    transition:.35s;

    text-align:center;

    border:1px solid #edf1ef;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.08);

}

.feature-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:24px;

    border-radius:50%;

    background:#EAF8EF;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}

.feature-card h3{

    margin-bottom:15px;

    font-size:22px;

    color:#222;

}

.feature-card p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}
/*==================================
        HOW IT WORKS
==================================*/

.how-it-works{

    padding:50px 0;

    background:#F8FBF9;

}

.steps{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

}

.step{

    flex:1;

    background:white;

    border-radius:24px;

    padding:40px 28px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

}

.step:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.08);

}

.step-number{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:22px;

    border-radius:50%;

    background:#4E746E;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:700;

}

.step h3{

    margin-bottom:14px;

    font-size:22px;

    color:#222;

}

.step p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}

.step-arrow{

    font-size:42px;

    color:#4E746E;

    font-weight:bold;

}

/*==================================
      APP SHOWCASE
==================================*/

.app-showcase{

    padding:20px 0 50px;

    background:white;

}

.showcase-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}

.showcase-left{

    flex:1;

}

.showcase-left h2{

    font-size:48px;

    margin:20px 0;

    line-height:1.15;

}

.showcase-left p{

    font-size:18px;

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

}

.showcase-list{

    list-style:none;

    margin-bottom:40px;

}

.showcase-list li{

    margin-bottom:16px;

    font-size:17px;

    color:#333;

}

.showcase-right{

    flex:1;

    position:relative;

    display:flex;

    justify-content:center;

}

.phone-image{

    width:340px;

    border-radius:40px;

    box-shadow:

        0 35px 70px rgba(0,0,0,.15);

}

.floating-card{

    position:absolute;

    background:white;

    padding:14px 20px;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    font-weight:600;

    animation:float 5s ease-in-out infinite;

}

.card-one{

    top:40px;

    left:30px;

}

.card-two{

    top:270px;

    right: 20px;;

}

.card-three{

    bottom:40px;

    left:40px;

}

.card-four{

    top:80px;

    right:20px;

}

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

.testimonials{

    padding:50px 0;

    background:#F8FBF9;

}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.testimonial-card{

    background:white;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.stars{

    color:#FFC107;

    font-size:22px;

    margin-bottom:18px;

}

.testimonial-card p{

    line-height:1.9;

    color:#555;

    margin-bottom:30px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h4{

    margin-bottom:5px;

}

.testimonial-user span{

    color:#777;

    font-size:14px;

}
/*==================================
        DOWNLOAD CTA
==================================*/

.download-section{

    padding:50px 0;

    background:#ffffff;

}

.download-box{

    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #5c827c 0%,
        #6a988f 45%,
        #4E746E 100%
    );

    border-radius:36px;
    padding:90px 50px;
    text-align:center;
    color:white;

}

.download-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:rgba(255,255,255,.08);

    border-radius:50%;

    top:-120px;

    right:-80px;

}

.download-box::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    bottom:-80px;

    left:-70px;

}

.download-box h2{

    position:relative;

    z-index:2;

    font-size:52px;

    line-height:1.2;

    margin:22px 0;

}

.download-box p{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;

    line-height:1.9;

    font-size:18px;

    color:rgba(255,255,255,.92);

}

.download-buttons{

    position:relative;

    z-index:2;

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

}

.download-box .btn-primary{

    background:white;

    color:#4E746E;

}

.download-box .btn-primary:hover{

    background:#f2f2f2;

}

.download-box .btn-secondary{

    border:2px solid white;

    color:white;

    background:transparent;

}

.download-box .btn-secondary:hover{

    background:white;

    color:#4E746E;

}

/*==================================
            FOOTER
==================================*/

.footer{

    background:#263936;

    color:white;

    padding-top:80px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-logo{

    font-size:34px;

    color:white;

    margin-bottom:20px;

}

.footer-text{

    color:#c7c7c7;

    line-height:1.9;

}

.footer h4{

    margin-bottom:20px;

    font-size:20px;

}

.footer ul{

    list-style:none;

}

.footer li{

    margin-bottom:14px;

}

.footer a{

    color:#c7c7c7;

    transition:.3s;

}

.footer a:hover{

    color:white;

}

.footer-bottom{

    margin-top:70px;

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

    padding:28px;

    color:#999;

}

/*==================================
            FAQ
==================================*/

.faq{

    padding:50px 0;

    background:#F8FBF9;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:white;

    border-radius:18px;

    margin-bottom:18px;

    padding:0 24px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.faq-item summary{

    cursor:pointer;

    list-style:none;

    padding:24px 0;

    font-size:18px;

    font-weight:600;

    color:#222;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    float:right;

    color:#4E746E;

    font-size:24px;

    transition:.3s;

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-item p{

    padding-bottom:24px;

    color:#666;

    line-height:1.8;

}

@media(max-width:900px){

.nav-links{

    position:absolute;
    top:80px;
    left:0;

    width:100%;

    background:#fff;

    display:none;

    flex-direction:column;

    padding:25px;

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

    gap:20px;

}

.nav-links.active{

    display:flex;

}

.menu-btn{

    display:none;

    font-size:22px;
    width:42px;
    height:42px;

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

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

}

}