*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
background:#fff;
color:#222;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}

header{
position:sticky;
top:0;
background:#fff;
z-index:1000;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

header .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{
height:55px;
}

nav{
display:flex;
gap:35px;
}

nav a{
text-decoration:none;
font-weight:600;
color:#444;
transition:.3s;
}

nav a:hover,
nav .active{
color:#16a34a;
}

.header-buttons{
display:flex;
gap:15px;
align-items:center;
}

.book-btn{
background:#16a34a;
color:#fff;
padding:13px 24px;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.whatsapp-icon{
height:50px;
width:50px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:#25D366;
color:#fff;
font-size:25px;
text-decoration:none;
}

#menuBtn{
display:none;
font-size:30px;
cursor:pointer;
}

.hero{
padding:70px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:70px;
}

.tag{
display:inline-block;
padding:10px 20px;
background:#e8f8ef;
border-radius:30px;
color:#16a34a;
font-size:13px;
font-weight:600;
margin-bottom:20px;
}

.hero h1{
font-size:62px;
line-height:1.15;
font-weight:800;
margin-bottom:20px;
}

.hero h1 span{
color:#16a34a;
display:block;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}

.service-icons{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-bottom:35px;
}

.service-icons div{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
}

.service-icons i{
color:#16a34a;
}

.hero-buttons{
display:flex;
gap:18px;
}

.btn-green{
background:#16a34a;
padding:15px 32px;
border-radius:10px;
color:#fff;
text-decoration:none;
font-weight:600;
}

.btn-outline{
border:2px solid #16a34a;
padding:14px 30px;
border-radius:10px;
text-decoration:none;
color:#16a34a;
font-weight:600;
}

.hero-right{
position:relative;
}

.hero-right img{
width:100%;
border-radius:20px;
}

.floating-card{
position:absolute;
right:-25px;
top:60px;
background:#fff;
padding:25px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.floating-card p{
margin-bottom:12px;
font-size:15px;
}

.floating-card i{
color:#16a34a;
margin-right:10px;
}

.floating-whatsapp{
position:fixed;
right:30px;
bottom:30px;
height:65px;
width:65px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:34px;
text-decoration:none;
box-shadow:0 15px 30px rgba(0,0,0,.25);
}

@media(max-width:991px){

.hero-grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:42px;
}

/* Mobile navigation */
header .container{
position:relative;
}

nav#nav{
position:fixed;
top:91px;
left:0;
width:100%;
max-height:calc(100vh - 91px);
overflow-y:auto;
background:#fff;
display:flex;
flex-direction:column;
gap:0;
padding:18px 5%;
box-shadow:0 12px 25px rgba(0,0,0,.12);

transform:translateX(100%);
visibility:hidden;
opacity:0;
transition:
transform .3s ease,
opacity .3s ease,
visibility .3s ease;

z-index:1001;
}

nav#nav.show{
transform:translateX(0);
visibility:visible;
opacity:1;
}

nav#nav a{
display:block;
width:100%;
padding:15px 8px;
border-bottom:1px solid #eef2ef;
}

#menuBtn{
display:flex;
width:46px;
height:46px;
align-items:center;
justify-content:center;
border:0;
background:transparent;
color:#222;
font-size:28px;
cursor:pointer;
padding:0;
position:relative;
z-index:1002;
}

#menuBtn i{
pointer-events:none;
}

body.menu-open{
overflow:hidden;
}

.header-buttons{
display:none;
}

.floating-card{
position:relative;
right:0;
top:-40px;
}

}

/* ================= SECTION TITLE ================= */

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
font-size:40px;
font-weight:700;
}

.section-title span{
color:#16a34a;
}

.line{
width:80px;
height:4px;
background:#16a34a;
margin:15px auto;
border-radius:20px;
}

/* ================= SERVICES ================= */

.services{
padding:90px 0;
background:#fff;
}

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.service-card{
background:#fff;
padding:35px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
position:relative;
}

.service-card:hover{
transform:translateY(-10px);
}

.service-card i{
font-size:48px;
color:#16a34a;
margin-bottom:25px;
}

.service-card h3{
margin-bottom:15px;
}

.service-card p{
color:#666;
line-height:1.7;
margin-bottom:25px;
}

.service-card a{
color:#16a34a;
font-weight:600;
text-decoration:none;
}

.coming-badge{
position:absolute;
top:15px;
right:15px;
background:#ffd54f;
padding:5px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* ================= WHY ================= */

.why{
padding:80px 0;
background:#f7fcf8;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:25px;
}

.why-box{
background:#fff;
padding:35px;
text-align:center;
border-radius:15px;
transition:.3s;
}

.why-box:hover{
transform:translateY(-8px);
}

.why-box i{
font-size:42px;
color:#16a34a;
margin-bottom:20px;
}

/* ================= WORKS ================= */

.works{
padding:90px 0;
background:#fff;
}

.steps{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.step{
flex:1;
min-width:220px;
text-align:center;
position:relative;
}

.number{
width:45px;
height:45px;
background:#16a34a;
color:#fff;
margin:auto;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
margin-bottom:20px;
}

.step i{
font-size:52px;
color:#16a34a;
margin-bottom:20px;
}

.step h3{
margin-bottom:15px;
}

.step p{
color:#666;
line-height:1.6;
}

.arrow{
font-size:28px;
color:#16a34a;
}

@media(max-width:991px){

.steps{
flex-direction:column;
}

.arrow{
transform:rotate(90deg);
}

}

/* ================= AMC ================= */

.pricing{

padding:100px 0;

background:#f8fcf9;

}

.pricing-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

.plan{

background:#fff;

border-radius:20px;

padding:40px;

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

position:relative;

transition:.35s;

}

.plan:hover{

transform:translateY(-10px);

}

.popular{

border:3px solid #16a34a;

}

.popular-tag{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#16a34a;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:12px;

font-weight:600;

}

.subtitle{

color:#666;

margin-bottom:25px;

}

.plan ul{

list-style:none;

margin-bottom:30px;

}

.plan li{

margin-bottom:12px;

}

.price{

font-size:42px;

font-weight:700;

margin-bottom:25px;

}

.price span{

font-size:16px;

color:#777;

}

.plan-btn{

display:block;

text-align:center;

background:#16a34a;

padding:14px;

border-radius:10px;

color:#fff;

text-decoration:none;

font-weight:600;

}

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

.testimonials{

padding:100px 0;

}

.testimonial-slider{

max-width:850px;

margin:auto;

}

.testimonial{

display:none;

background:#fff;

padding:45px;

border-radius:20px;

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

text-align:center;

font-size:18px;

}

.testimonial.active{

display:block;

}

.testimonial h4{

margin-top:20px;

}

/* ================= ABOUT ================= */

.about{

padding:100px 0;

background:#eef8f2;

}

.about-grid{

display:grid;

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

gap:40px;

align-items:center;

}

.about h2{

font-size:42px;

margin-bottom:20px;

}

.about span{

color:#16a34a;

}

.about p{

line-height:1.8;

margin-bottom:25px;

}

.about-features div{

margin-bottom:15px;

font-weight:600;

}

.about img{

width:100%;

}

.help-box{

background:#fff;

padding:35px;

border-radius:18px;

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

}

.call-btn,

.chat-btn{

display:block;

text-align:center;

padding:14px;

border-radius:10px;

margin-top:15px;

text-decoration:none;

font-weight:600;

}

.call-btn{

background:#16a34a;

color:#fff;

}

.chat-btn{

border:2px solid #16a34a;

color:#16a34a;

}

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;

}

}

/* CTA */

.cta{

padding:80px 0;

background:#16a34a;

color:#fff;

}

.cta-box{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}

.cta-box h2{

font-size:42px;

margin-bottom:15px;

}

.cta-buttons{

display:flex;

gap:20px;

}

.cta .btn-outline{

border:2px solid #fff;

color:#fff;

}

/* FOOTER */

footer{

background:#111;

color:#ddd;

padding-top:70px;

}

.footer-grid{

display:grid;

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

gap:50px;

padding-bottom:60px;

}

.footer-logo{

height:60px;

margin-bottom:20px;

}

footer h3{

color:#fff;

margin-bottom:20px;

}

footer ul{

list-style:none;

}

footer li{

margin-bottom:12px;

}

footer a{

color:#ddd;

text-decoration:none;

}

.social{

display:flex;

gap:15px;

margin-top:20px;

}

.social a{

width:45px;

height:45px;

display:flex;

justify-content:center;

align-items:center;

background:#16a34a;

border-radius:50%;

color:#fff;

}

.copyright{

border-top:1px solid #333;

padding:20px;

text-align:center;

}

/* TOP BUTTON */

#topBtn{

position:fixed;

bottom:30px;

left:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#16a34a;

color:#fff;

font-size:20px;

cursor:pointer;

display:none;

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

}

/* RESPONSIVE */

@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr;

}

.cta-box{

flex-direction:column;

text-align:center;

}

.cta-buttons{

justify-content:center;

}

}



/* Mobile menu refinements */
@media(max-width:600px){
    nav#nav{
        top:91px;
        max-height:calc(100vh - 91px);
        padding:15px 6%;
    }

    nav#nav a{
        font-size:15px;
        padding:14px 6px;
    }

    #menuBtn{
        width:44px;
        height:44px;
        font-size:27px;
    }
}


/* =========================================
   CLICKABLE NAVIGATION / SMOOTH SCROLL
========================================= */

html{
    scroll-behavior:smooth;
}

section[id]{
    scroll-margin-top:100px;
}

a{
    cursor:pointer;
}


/* ================= UPDATED POLARITREE AMC ================= */

.pricing-intro{
    max-width:720px;
    margin:0 auto;
    color:#666;
    line-height:1.7;
}

.amc-three{
    grid-template-columns:repeat(3,1fr);
    align-items:stretch;
}

.plan{
    display:flex;
    flex-direction:column;
}

.plan-icon{
    width:58px;
    height:58px;
    border-radius:15px;
    background:#e8f8ef;
    color:#16a34a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    margin-bottom:20px;
}

.room-limit{
    display:inline-block;
    width:max-content;
    background:#f1f8f3;
    color:#15803d;
    font-size:13px;
    font-weight:700;
    padding:7px 12px;
    border-radius:20px;
    margin-bottom:22px;
}

.plan ul{
    flex:1;
}

.plan li{
    display:flex;
    gap:9px;
    align-items:flex-start;
    line-height:1.45;
}

.plan li i{
    color:#16a34a;
    margin-top:4px;
    font-size:13px;
    flex-shrink:0;
}

.premium-plan{
    border:2px solid #16a34a;
}

.amc-note{
    max-width:1050px;
    margin:35px auto 0;
    padding:18px 22px;
    background:#fff;
    border-left:4px solid #16a34a;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#666;
    font-size:13px;
    line-height:1.65;
}

.amc-note > i{
    color:#16a34a;
    margin-top:3px;
    flex-shrink:0;
}

@media(max-width:991px){
    .amc-three{
        grid-template-columns:1fr;
        max-width:650px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* ================= FINAL RESPONSIVE / IMAGE FIXES ================= */

/* Prevent desktop elements from creating horizontal page overflow */
html,
body{
    max-width:100%;
    overflow-x:hidden;
}

.hero-grid,
.about-grid,
.pricing-grid,
.footer-grid{
    min-width:0;
}

.hero-left,
.hero-right,
.about-grid > div{
    min-width:0;
}

.hero-right img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
}

.floating-card{
    max-width:calc(100% - 20px);
}

.about img{
    display:block;
    width:100%;
    height:auto;
    max-height:520px;
    object-fit:cover;
    border-radius:20px;
}

.amc-three{
    width:100%;
}

.plan{
    min-width:0;
}

.plan li{
    overflow-wrap:anywhere;
}

/* Keep the AMC cards comfortable on medium screens */
@media (max-width:1100px) and (min-width:992px){
    .hero-grid{
        gap:35px;
    }

    .hero h1{
        font-size:50px;
    }

    .floating-card{
        right:-10px;
        padding:20px;
    }

    header .container{
        gap:18px;
    }

    nav{
        gap:18px;
    }

    .header-buttons{
        gap:8px;
    }

    .book-btn{
        padding:11px 16px;
    }

    .amc-three{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px;
    }

    .plan{
        padding:28px 24px;
    }
}

@media (max-width:991px){
    .hero{
        padding:55px 0;
    }

    .hero-grid{
        gap:35px;
    }

    .hero-left{
        width:100%;
    }

    .hero-right{
        width:100%;
    }

    .floating-card{
        position:relative;
        right:auto;
        top:auto;
        margin:-35px 15px 0;
        max-width:none;
    }

    .about img{
        max-height:none;
    }
}

@media (max-width:600px){
    .container{
        width:92%;
    }

    .hero h1{
        font-size:38px;
        line-height:1.12;
    }

    .hero p{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons a{
        width:100%;
        text-align:center;
    }

    .floating-card{
        padding:20px;
        margin:-25px 8px 0;
    }

    .floating-card p{
        font-size:14px;
    }

    .section-title h2{
        font-size:32px;
    }

    .pricing{
        padding:75px 0;
    }

    .plan{
        padding:30px 24px;
    }

    .price{
        font-size:36px;
    }

    .floating-whatsapp{
        right:18px;
        bottom:18px;
        width:58px;
        height:58px;
        font-size:29px;
    }
}

/* ================= SERVICES CARD ALIGNMENT ================= */
/* Desktop/laptop: exactly 3 cards per row, matching the reference layout */
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:25px;
    align-items:stretch;
}

.service-card{
    min-width:0;
    min-height:300px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.service-card h3{
    width:100%;
}

.service-card p{
    width:100%;
    flex:1;
}

.service-card a{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:auto;
}

.service-card a i{
    font-size:28px;
    margin:0;
}

.service-card.coming{
    background:#f7fcf8;
}

.service-card.coming .coming-badge{
    background:#e8f8ef;
    color:#15803d;
}

@media (max-width:991px){
    .services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px){
    .services-grid{
        grid-template-columns:1fr;
    }

    .service-card{
        min-height:280px;
    }
}