/* ===========================
   GLOBAL SETTINGS
=========================== */


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


body{

    font-family:'Poppins',sans-serif;
    background:#f8faf9;
    color:#1f2937;
    line-height:1.6;

}


img{

    max-width:100%;
    display:block;

}


.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



/* ===========================
   ADVERTORIAL BADGE
=========================== */


.advertorial{

    position:fixed;
    top:20px;
    right:20px;

    background:#111827;
    color:white;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    z-index:999;

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

}



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


header{

    min-height:90vh;

    display:flex;

    align-items:center;

    background:

    linear-gradient(
    135deg,
    #ecfdf5,
    #ffffff
    );

    padding:80px 0;

}



.hero{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}



.hero-content{

    flex:1;

}



.hero-content h1{


    font-size:clamp(35px,5vw,58px);

    line-height:1.15;

    font-weight:700;

    color:#064e3b;

    margin-bottom:25px;


}



.hero-content p{


    font-size:18px;

    color:#4b5563;

    max-width:520px;

    margin-bottom:35px;


}



.hero-image{


    flex:1;

}



.hero-image img{


    border-radius:30px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);


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


}



/* Floating Animation */


@keyframes float{


    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


}



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


.cta{


    display:inline-block;

    background:#16a34a;

    color:white;

    padding:17px 38px;

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s;

    box-shadow:

    0 15px 30px rgba(22,163,74,.25);


}



.cta:hover{


    background:#15803d;

    transform:translateY(-3px);


}



/* ===========================
   SECTIONS
=========================== */


.section{


    padding:90px 0;


}



.section h2{


    text-align:center;

    font-size:38px;

    margin-bottom:50px;

    color:#065f46;


}



/* ===========================
   CARDS
=========================== */


.cards{


    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;


}



.card{


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

    backdrop-filter:blur(15px);

    padding:35px;


    border-radius:25px;


    border:1px solid rgba(255,255,255,.5);


    box-shadow:

    0 20px 40px rgba(0,0,0,.08);


    transition:.3s;


}



.card:hover{


    transform:translateY(-10px);


}



.card h3{


    margin-bottom:15px;

    color:#065f46;

    font-size:22px;


}



.card p{


    color:#6b7280;


}



/* ===========================
   CTA SECTION
=========================== */


.cta-section{


    background:

    linear-gradient(

    135deg,

    #065f46,

    #16a34a

    );


    color:white;

    text-align:center;

    padding:80px 20px;


}



.cta-section h2{


    color:white;

    font-size:40px;

    margin-bottom:15px;


}



.cta-section p{


    margin-bottom:30px;

    font-size:18px;


}



.cta-section .cta{


    background:white;

    color:#065f46;


}



.cta-section .cta:hover{


    background:#f0fdf4;


}



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


footer{


    background:#111827;

    color:#d1d5db;

    text-align:center;

    padding:40px 20px;

    font-size:14px;


}



footer p{

    margin-bottom:10px;

}



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


@media(max-width:768px){


.hero{


    flex-direction:column-reverse;

    text-align:center;


}



.hero-content p{


    margin-left:auto;

    margin-right:auto;


}



.hero-content h1{


    font-size:38px;


}



.advertorial{


    top:10px;

    right:10px;


}



.section h2{


    font-size:30px;


}


}
.exit-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.65);

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

}


.exit-box{

position:relative;

background:white;

width:90%;

max-width:450px;

padding:40px;

border-radius:25px;

text-align:center;

}


.exit-box button{

position:absolute;

right:15px;

top:10px;

border:none;

background:none;

font-size:30px;

cursor:pointer;

}
/*==============================
SCROLL PROGRESS BAR
==============================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(
90deg,
#16a34a,
#22c55e
);

z-index:999999;

transition:.15s;

}

/*==============================
FLOATING DESKTOP CTA
==============================*/

.floating-cta{

position:fixed;

right:25px;

bottom:25px;

z-index:9999;

}

.floating-cta a{

display:block;

padding:18px 30px;

background:#16a34a;

color:#fff;

text-decoration:none;

border-radius:60px;

font-weight:600;

box-shadow:0 20px 45px rgba(22,163,74,.35);

transition:.3s;

}

.floating-cta a:hover{

transform:translateY(-4px);

background:#15803d;

}

@media(max-width:768px){

.floating-cta{

display:none;

}

}

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

#topBtn{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#065f46;

color:white;

font-size:24px;

cursor:pointer;

display:none;

z-index:9999;

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

}

/* =================================
   GDPR COOKIE BANNER
================================= */


.cookie-banner{

    position:fixed;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:900px;

    background:rgba(255,255,255,0.95);

    backdrop-filter:blur(15px);

    border-radius:22px;

    padding:22px 28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.15);

    border:1px solid rgba(0,0,0,0.06);

    z-index:99999;

}



.cookie-content{

    display:flex;

    align-items:center;

    gap:18px;

}



.cookie-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ecfdf5;

    border-radius:50%;

    font-size:25px;

}



.cookie-text h4{

    font-size:18px;

    color:#065f46;

    margin-bottom:5px;

}



.cookie-text p{

    font-size:14px;

    color:#6b7280;

    margin:0;

    max-width:550px;

}



.cookie-actions{

    display:flex;

    align-items:center;

    gap:15px;

    white-space:nowrap;

}



.privacy-link{

    color:#065f46;

    font-size:14px;

    text-decoration:none;

}



#acceptCookies{


    border:none;

    background:#16a34a;

    color:white;

    padding:13px 28px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;


}



#acceptCookies:hover{

    background:#15803d;

    transform:translateY(-2px);

}





/* MOBILE */

@media(max-width:768px){


.cookie-banner{


    flex-direction:column;

    align-items:flex-start;

    bottom:15px;

    padding:20px;

}



.cookie-content{


    align-items:flex-start;


}



.cookie-actions{


    width:100%;

    justify-content:space-between;


}



#acceptCookies{


    padding:12px 25px;

}



}

/* =========================
INTERACTIVE BMI SECTION
========================= */


.bmi-section{

padding:90px 0;

background:#f0fdf4;

}



.bmi-wrapper{

max-width:750px;

margin:auto;

background:white;

padding:45px;

border-radius:30px;

box-shadow:

0 25px 70px rgba(0,0,0,.10);

}



.bmi-header{

text-align:center;

margin-bottom:35px;

}



.bmi-header span{

background:#dcfce7;

color:#166534;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

}



.bmi-header h2{

margin-top:20px;

font-size:38px;

color:#065f46;

}



.bmi-header p{

color:#6b7280;

}



.bmi-form{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.input-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}



.input-box{

display:flex;

align-items:center;

background:#f9fafb;

border:1px solid #e5e7eb;

border-radius:15px;

overflow:hidden;

}



.input-box input{

width:100%;

padding:16px;

border:none;

outline:none;

font-size:18px;

background:transparent;

}



.input-box span{

padding-right:18px;

color:#6b7280;

}



.bmi-button{

grid-column:1/-1;

padding:17px;

border:none;

border-radius:50px;

background:#16a34a;

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

}



.bmi-result{

margin-top:40px;

text-align:center;

display:none;

animation:fadeUp .5s ease;

}



.result-circle{

width:130px;

height:130px;

margin:auto;

border-radius:50%;

background:#ecfdf5;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

font-weight:700;

color:#065f46;

}



.bmi-result h3{

margin:20px 0 10px;

color:#065f46;

}



.bmi-result p{

color:#6b7280;

}



.bmi-meter{

height:12px;

background:#e5e7eb;

border-radius:20px;

overflow:hidden;

margin:25px 0;

}



#meterProgress{

height:100%;

width:0;

background:#16a34a;

transition:1s;

}



.bmi-cta{

margin-top:15px;

}




@media(max-width:600px){


.bmi-wrapper{

padding:25px;

}



.bmi-form{

grid-template-columns:1fr;

}



.bmi-header h2{

font-size:30px;

}


}

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


.faq-section{

padding:90px 0;

background:#ffffff;

}



.faq-header{

text-align:center;

margin-bottom:45px;

}



.faq-header span{

background:#dcfce7;

color:#166534;

padding:8px 20px;

border-radius:30px;

font-size:14px;

font-weight:600;

}



.faq-header h2{

margin-top:20px;

font-size:40px;

color:#065f46;

}



.faq-header p{

color:#6b7280;

}



.faq-container{

max-width:800px;

margin:auto;

}



.faq-item{

background:#f9fafb;

border-radius:18px;

margin-bottom:15px;

overflow:hidden;

border:1px solid #e5e7eb;

}



.faq-question{


width:100%;

padding:22px 25px;

border:none;

background:none;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:17px;

font-weight:600;

color:#064e3b;

text-align:left;


}



.faq-question i{


font-style:normal;

font-size:28px;

color:#16a34a;

transition:.3s;


}



.faq-answer{


max-height:0;

overflow:hidden;

transition:max-height .4s ease;


}



.faq-answer p{


padding:0 25px 25px;

color:#6b7280;

font-size:15px;


}




.faq-item.active 
.faq-answer{


max-height:200px;


}



.faq-item.active 
.faq-question i{


transform:rotate(45deg);


}



@media(max-width:600px){


.faq-header h2{

font-size:30px;

}



.faq-question{

font-size:15px;

padding:18px;

}



}