/* ==========================
   CHIDANAND WELLNESS
   GLOBAL STYLES
========================== */

:root{

    --green:#2F5D50;
    --green-light:#4E7A6D;

    --gold:#C9A84C;
    --gold-dark:#A98935;

    --cream:#F7F3EA;
    --white:#FFFFFF;

    --text:#333333;
    --text-light:#666666;

    --shadow:0 10px 30px rgba(0,0,0,0.08);

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:var(--cream);
    color:var(--text);
    overflow-x:hidden;

}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.container{

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

}

section{
    padding:100px 0;
}

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

.navbar{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    background:white;

    box-shadow:0 2px 20px rgba(0,0,0,0.05);

    z-index:1000;

}

.nav-container{

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

    min-height:85px;

}

.logo{

    display:flex;
    align-items:center;
    gap:15px;

}

.logo img{

    width:65px;
    height:65px;
    object-fit:contain;

}

.logo-text h2{

    color:var(--green);
    font-size:1.2rem;
    margin-bottom:3px;

}

.logo-text p{

    color:var(--text-light);
    font-size:0.8rem;

}

.nav-links{

    display:flex;
    align-items:center;
    gap:25px;

}

.nav-links a{

    color:var(--text);
    font-weight:500;
    transition:0.3s;

}

.nav-links a:hover{
    color:var(--green);
}

.appointment-btn{

    background:var(--gold);
    color:white !important;

    padding:12px 22px;
    border-radius:30px;

    transition:0.3s;

}

.appointment-btn:hover{
    background:var(--gold-dark);
}

.mobile-menu{

    display:none;

    font-size:1.8rem;
    cursor:pointer;

}

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

.hero{

    padding-top:120px;
    min-height:100vh;

    position:relative;

}

.hero-content{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    align-items:center;

}

.hero-tag{

    display:inline-block;

    background:rgba(201,168,76,0.15);

    color:var(--green);

    padding:10px 18px;

    border-radius:30px;

    margin-bottom:20px;

    font-size:0.9rem;

    font-weight:600;

}

.hero-left h1{

    font-size:4rem;
    line-height:1.1;

    color:var(--green);

    margin-bottom:25px;

}

.hero-left p{

    color:var(--text-light);

    font-size:1.1rem;

    line-height:1.8;

    margin-bottom:30px;

}

.hero-buttons{

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}

.primary-btn{

    background:var(--green);

    color:white;

    padding:15px 30px;

    border-radius:40px;

    font-weight:600;

    transition:0.3s;

}

.primary-btn:hover{

    background:var(--green-light);

}

.secondary-btn{

    border:2px solid var(--green);

    color:var(--green);

    padding:15px 30px;

    border-radius:40px;

    font-weight:600;

    transition:0.3s;

}

.secondary-btn:hover{

    background:var(--green);

    color:white;

}

.hero-right img{

    border-radius:25px;

    box-shadow:var(--shadow);

}

/* ==========================
   SECTION HEADERS
========================== */

.section-header{

    text-align:center;

    margin-bottom:60px;

}

.section-label{

    color:var(--gold);

    text-transform:uppercase;

    font-size:0.85rem;

    letter-spacing:2px;

    font-weight:600;

}

.section-header h2{

    font-size:2.7rem;

    color:var(--green);

    margin-top:15px;

}

/* ==========================
   FOUNDER SECTION
========================== */

.founder-section{

    background:white;

}

.founder-container{

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

    gap:70px;

    align-items:center;

}

.founder-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

}

.founder-content h2{

    color:var(--green);

    font-size:2.5rem;

    margin:20px 0;

}

.founder-content p{

    line-height:1.9;

    color:var(--text-light);

    margin-bottom:20px;

}

.read-more-btn{

    display:inline-block;

    background:var(--gold);

    color:white;

    padding:14px 25px;

    border-radius:30px;

    margin-top:10px;

}
/* ==========================
   WHY CHOOSE US
========================== */

.why-us{
    background:var(--cream);
}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:0.3s;

    text-align:center;

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card h3{

    color:var(--green);

    margin-bottom:15px;

}

.why-card p{

    color:var(--text-light);

    line-height:1.7;

}

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

.services-preview{

    background:white;

}

.services-grid{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:var(--cream);

    border-radius:20px;

    padding:35px;

    transition:0.3s;

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

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.service-card h3{

    color:var(--green);

    margin-bottom:15px;

    font-size:1.4rem;

}

.service-card p{

    color:var(--text-light);

    line-height:1.8;

}

.section-btn{

    display:inline-block;

    margin-top:50px;

    background:var(--gold);

    color:white;

    padding:15px 30px;

    border-radius:35px;

    font-weight:600;

}

.section-btn:hover{

    background:var(--gold-dark);

}

.services-preview .container{

    text-align:center;

}

/* ==========================
   WELLNESS JOURNEY
========================== */

.wellness-journey{

    background:var(--green);

    color:white;

}

.wellness-journey .section-header h2{

    color:white;

}

.wellness-journey .section-header p{

    color:rgba(255,255,255,0.8);

    margin-top:15px;

}

.journey-grid{

    display:grid;

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

    gap:25px;

}

.journey-step{

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

    backdrop-filter:blur(8px);

    border-radius:20px;

    padding:30px;

    text-align:center;

    border:
    1px solid rgba(255,255,255,0.08);

}

.step-number{

    width:60px;
    height:60px;

    border-radius:50%;

    background:var(--gold);

    display:flex;

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

    margin:auto;

    margin-bottom:20px;

    font-weight:700;

    color:white;

}

.journey-step h3{

    margin-bottom:15px;

}

.journey-step p{

    color:rgba(255,255,255,0.8);

    line-height:1.7;

}

/* ==========================
   GALLERY PREVIEW
========================== */

.gallery-preview{

    background:white;

}

.gallery-grid{

    display:grid;

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

    gap:20px;

}

.gallery-grid img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:20px;

    transition:0.4s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.03);

}

.center-btn{

    text-align:center;

    margin-top:50px;

}

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

.cta-section{

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--green-light)
    );

    text-align:center;

    color:white;

}

.cta-section h2{

    font-size:3rem;

    margin-bottom:20px;

}

.cta-section p{

    max-width:700px;

    margin:auto;

    margin-bottom:35px;

    line-height:1.8;

    color:rgba(255,255,255,0.85);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-section .primary-btn{

    background:var(--gold);

}

.cta-section .primary-btn:hover{

    background:var(--gold-dark);

}

.cta-section .secondary-btn{

    border:2px solid white;

    color:white;

}

.cta-section .secondary-btn:hover{

    background:white;

    color:var(--green);

}
/* ==========================
   CONTACT STRIP
========================== */

.contact-strip{

    background:white;

    padding:60px 0;

    border-top:1px solid rgba(0,0,0,0.05);

}

.contact-strip-grid{

    display:grid;

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

    gap:30px;

    text-align:center;

}

.contact-strip h4{

    color:var(--green);

    margin-bottom:12px;

    font-size:1.2rem;

}

.contact-strip p{

    color:var(--text-light);

    line-height:1.7;

}

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

.footer{

    background:#1f2f2a;

    color:white;

    padding-top:70px;

}

.footer-container{

    display:grid;

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

    gap:50px;

}

.footer-brand img{

    width:80px;

    margin-bottom:15px;

}

.footer-brand h3{

    margin-bottom:10px;

}

.footer-brand p{

    color:rgba(255,255,255,0.75);

    line-height:1.8;

}

.footer-links h4,
.footer-social h4{

    margin-bottom:20px;

    color:var(--gold);

}

.footer-links ul li{

    margin-bottom:12px;

}

.footer-links a,
.footer-social a{

    color:rgba(255,255,255,0.8);

    transition:0.3s;

}

.footer-links a:hover,
.footer-social a:hover{

    color:var(--gold);

}

.copyright{

    text-align:center;

    margin-top:50px;

    padding:25px 0;

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

}

.copyright p{

    color:rgba(255,255,255,0.7);

}

/* ==========================
   WHATSAPP FLOAT BUTTON
========================== */

.whatsapp-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    background:#25D366;

    color:white;

    display:flex;

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

    font-size:1.8rem;

    border-radius:50%;

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

    z-index:999;

    transition:0.3s;

}

.whatsapp-btn:hover{

    transform:scale(1.1);

}

/* ==========================
   PAGE HERO
   (FOR ABOUT, SERVICES,
   CONTACT, GALLERY ETC.)
========================== */

.page-hero{

    height:55vh;

    display:flex;

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

    text-align:center;

    color:white;

    background:
    linear-gradient(
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.5)
    ),
    url('../images/gallery6.jpg');

    background-size:cover;
    background-position:center;

}

.page-hero h1{

    font-size:4rem;

}

.page-hero p{

    margin-top:15px;

    font-size:1.1rem;

}

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

.info-card{

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.info-card h3{

    color:var(--green);

    margin-bottom:15px;

}

.info-card p{

    line-height:1.8;

    color:var(--text-light);

}

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

@media(max-width:991px){

    .mobile-menu{

        display:block;

    }

    .nav-links{

        position:fixed;

        top:85px;
        right:-100%;

        width:280px;
        height:calc(100vh - 85px);

        background:white;

        flex-direction:column;

        align-items:flex-start;

        padding:40px 30px;

        transition:0.4s;

        box-shadow:
        -10px 0 20px rgba(0,0,0,0.05);

    }

    .nav-links.active{

        right:0;

    }

    .hero-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .founder-container{

        grid-template-columns:1fr;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

}

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

@media(max-width:768px){

    section{

        padding:80px 0;

    }

    .hero{

        padding-top:130px;

    }

    .hero-left h1{

        font-size:3rem;

    }

    .section-header h2{

        font-size:2.2rem;

    }

    .cta-section h2{

        font-size:2.3rem;

    }

    .page-hero h1{

        font-size:3rem;

    }

}

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

@media(max-width:576px){

    .container{

        width:92%;

    }

    .logo img{

        width:50px;
        height:50px;

    }

    .logo-text h2{

        font-size:1rem;

    }

    .logo-text p{

        display:none;

    }

    .hero-left h1{

        font-size:2.3rem;

    }

    .hero-left p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

        text-align:center;

    }

    .page-hero{

        height:45vh;

    }

    .page-hero h1{

        font-size:2.3rem;

    }

    .cta-section h2{

        font-size:2rem;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid img{

        height:250px;

    }

    .whatsapp-btn{

        width:58px;
        height:58px;

        right:15px;
        bottom:15px;

    }

}
/* ==========================
   SCROLL ANIMATIONS
========================== */

.hidden{

    opacity:0;
    transform:translateY(40px);

    transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}

.show{

    opacity:1;
    transform:translateY(0);

}

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

.image-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    display:flex;

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

    z-index:9999;

}

.image-popup{

    max-width:90%;
    max-height:90%;

    position:relative;

}

.image-popup img{

    max-width:100%;
    max-height:85vh;

    border-radius:15px;

}

.close-popup{

    position:absolute;

    top:-15px;
    right:-15px;

    width:40px;
    height:40px;

    border-radius:50%;

    background:white;

    display:flex;

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

    cursor:pointer;

    font-weight:bold;

}
.founder-content ul{
    margin-top:15px;
    margin-left:20px;
}

.founder-content ul li{
    margin-bottom:8px;
    color:var(--text-light);
}
/* ==========================
   CONTACT PAGE
========================== */

.contact-form{

    max-width:700px;
    margin:auto;

    display:flex;
    flex-direction:column;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    padding:16px;

    border:none;

    border-radius:12px;

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

    box-shadow:var(--shadow);

}

.contact-form button{

    border:none;
    cursor:pointer;

}

.map-container{

    border-radius:20px;
    overflow:hidden;

    box-shadow:var(--shadow);

}
/* ==========================
   APPOINTMENT PAGE
========================== */

.appointment-form{

    max-width:800px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.appointment-form input,
.appointment-form select,
.appointment-form textarea{

    padding:16px;

    border:none;

    border-radius:12px;

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

    box-shadow:var(--shadow);

    background:white;

}

.appointment-form button{

    border:none;

    cursor:pointer;

}
/* ==========================
   GALLERY PAGE
========================== */

.gallery-section{
    padding:80px 0;
}

.gallery-section:nth-child(even){
    background:white;
}
/* ==========================
   CONTACT CARDS
========================== */

.contact-cards-section{
    padding:80px 0;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
}

.contact-card{

    background:#fff;

    border-radius:25px;

    padding:40px;

    text-align:center;

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

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:420px;

    transition:.3s;
}

.contact-card:hover{

    transform:translateY(-8px);

}

.contact-icon{

    font-size:3rem;

    margin-bottom:20px;

}

.contact-card h3{

    color:#245a4d;

    margin-bottom:20px;

    font-size:2rem;

}

.contact-info{

    font-size:1.2rem;

    font-weight:600;

    margin-bottom:20px;

    word-break:break-word;

}

.contact-description{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}

.contact-btn{

    display:inline-block;

    padding:16px 40px;

    background:#2d6a58;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.contact-btn:hover{

    background:#1f4e40;

    transform:translateY(-3px);

}

@media(max-width:768px){

    .contact-card{

        min-height:auto;

        padding:30px;

    }

}

/* ==========================
   GOOGLE FORM BOOKING CARD
========================== */

.booking-card{

    max-width:800px;

    margin:auto;

    background:white;

    padding:60px;

    border-radius:25px;

    text-align:center;

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

}

.booking-icon{

    font-size:80px;

    margin-bottom:20px;

}

.booking-card h2{

    color:#2F5D50;

    margin-bottom:20px;

}

.booking-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}

.google-form-btn{

    display:inline-block;

    padding:18px 40px;

    background:#2F5D50;

    color:white;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    transition:0.3s;

}

.google-form-btn:hover{

    background:#1f463c;

    transform:translateY(-3px);

}

@media(max-width:768px){

    .booking-card{

        padding:35px 25px;

    }

}

/* ==========================
   CONTACT BOXES
========================== */

.contact-info-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

.contact-box{

    background:#ffffff;

    padding:35px;

    border-radius:20px;

    text-align:center;

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

    transition:0.3s;
}

.contact-box:hover{

    transform:translateY(-8px);

}

.contact-icon{

    font-size:42px;

    margin-bottom:15px;

}

.contact-box h3{

    color:#2F5D50;

    margin-bottom:15px;

}

.contact-box p{

    color:#555;

    line-height:1.8;

}