/* ===============================
🌿 GLOBAL STYLES
=============================== */
:root{
    --primary-green:#2e7d32;
    --light-green:#66bb6a;
    --accent-green:#d4e157;
    --dark:#1b1b1b;
    --soft-dark:#2a2a2a;
    --text-light:#f5f5f5;
}

body{
    font-family:'Poppins', sans-serif;
    margin:0;
    padding:0;
    background:#f9fdf9;
}

/* ===============================
🌿 LOGO
=============================== */
.logo-container{
    position:fixed;
    top:20px;
    left:30px;
    z-index:1000;
    transition:0.4s ease;
}

.nav-logo{
    width:120px;
    transition:0.4s;
}

/* Hide on scroll */
.hide-on-scroll{
    opacity:0;
    transform:translateY(-20px);
}

/* ===============================
🌿 MENU BUTTON
=============================== */
.menu-toggle{
    position:fixed;
    top:30px;
    right:30px;
    color:white;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:8px;
    transition:0.3s;
}

.menu-toggle{
    z-index:1500;
    transition:0.3s;
}

/* HIDE MENU BUTTON WHEN SIDEBAR OPEN */
.side-menu.open ~ .menu-toggle{
    opacity:0;
    pointer-events:none;
}

.menu-text{
    font-size:22px;
    font-weight:500;
}

.menu-icon{
    font-size:26px;
}

/* ===============================
🌿 BACKDROP
=============================== */
.menu-backdrop{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:0.4s;
    z-index:998;
}

.menu-backdrop.show{
    opacity:1;
    visibility:visible;
}

/* ===============================
🌿 SIDE MENU
=============================== */
.side-menu{
    position:fixed;
    top:0;
    right:0;
    width:340px;
    height:100%;
    background:linear-gradient(180deg,#1b5e20,#2e7d32);
    transform:translateX(100%);
    transition:0.4s ease;
    z-index:2000;
    padding-top:90px;
}

.side-menu.open{
    transform:translateX(0);
}

/* CLOSE BUTTON */
.close-btn{
    position:absolute;
    top:20px;
    right:25px;
    font-size:28px;
    color:white;
    cursor:pointer;
}

/* ===============================
🌿 MENU LINKS
=============================== */
.side-links{
    list-style:none;
    padding:0 30px;
}

.side-links li{
    margin:22px 0;
    position:relative;
}

/* LINK STYLE */
.side-links a{
    color:#fff;
    font-size:22px;
    text-decoration:none;
    display:block;
    position:relative;
    transition:0.4s ease;
    font-weight:500;
}

.side-menu{
    pointer-events:auto;
}

.side-links a::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-4px;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,#9acd32,#d4e157);
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:transform 0.35s ease;
}

/* HOVER */
.side-links a:hover::before{
    transform:translateX(-50%) scaleX(1);
}
/* TEXT EFFECT */
.side-links a:hover{
    color:#d4e157; /* same as footer */
}


.side-links a{
    transition:color 0.3s ease;
}

/* BACKGROUND GLOW */

.side-links li{
    transition:0.3s ease;
}

.side-links li::after{
    pointer-events: none;
}

.side-links li:hover{
    transform:translateX(8px);
}


/* ===============================
🌿 DROPDOWN
=============================== */
.dropdown-toggle-custom{
    cursor:pointer;
}

.gallery-submenu{
    list-style:none;
    padding-left:15px;
    max-height:0;
    overflow:hidden;
    transition:0.4s ease;
}

.gallery-submenu li{
    margin:10px 0;
}

.gallery-submenu a{
    font-size:18px;
    color:#e0e0e0;
}

.gallery-submenu a:hover{
    color:var(--accent-green);
    padding-left:6px;
}

.gallery-submenu.open{
    max-height:200px;
}

/* ===============================
🌿 HERO SECTION (for home later)
=============================== */
.hero{
    height:100vh;
    position:relative;
    background-size:cover;
    background-position:center;
}

.hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
}

.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:white;
    text-align:center;
}

.hero h1{
    font-size:48px;
    font-weight:600;
}

.hero p{
    font-size:18px;
    opacity:0.9;
}

/* ===============================
🌿 GENERAL SECTIONS
=============================== */
.section{
    padding:80px 0;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
    font-weight:600;
    color:var(--primary-green);
}

.section-text{
    color:#555;
    line-height:1.7;
}

/* ===============================
🌿 BUTTONS
=============================== */
.btn-green{
    background:var(--primary-green);
    color:white;
    border:none;
    padding:10px 25px;
    border-radius:30px;
    transition:0.3s;
}

.btn-green:hover{
    background:var(--light-green);
    transform:translateY(-2px);
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){

.logo-container{
    left:20px;
}

.nav-logo{
    width:90px;
}

.menu-toggle{
    right:20px;
}

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

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

.side-menu{
    width:100%;
}
}

/* ===============================
🌿 FOOTER
=============================== */
.footer-section{
    background:linear-gradient(135deg,#0f2e16,#1b5e20,#2e7d32);
    color:#e8f5e9;
    padding:70px 0 30px;
    margin-top:80px;
    position:relative;
}

/* 🌿 subtle leaf glow line */
.footer-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,#9acd32,#d4e157);
}

.footer-logo{
    width:140px;
    display:block;
}

.footer-logo-wrapper{
    padding-left:50px; /* control here */
}

/* TITLES */
.footer-title{
    font-weight:600;
    margin-bottom:20px;
    color:#ffffff;
}

/* TEXT */
.footer-text{
    font-size:14px;
    color:#c8e6c9;
    line-height:1.7;
}

/* LINKS */
.footer-links{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    text-decoration:none;
    color:#c8e6c9;
    transition:0.3s;
}

/* 🌿 hover effect */
.footer-links a:hover{
    color:#d4e157;
    padding-left:6px;
}

/* CONTACT LINKS */
.footer-contact-link{
    color:#c8e6c9;
    text-decoration:none;
    transition:0.3s;
}

.footer-contact-link:hover{
    color:#d4e157;
}

/* SOCIAL ICONS */
.social-icons a{
    color:#c8e6c9;
    font-size:20px;
    margin-right:15px;
    transition:0.3s;
}

.social-icons a:hover{
    color:#d4e157;
    transform:translateY(-3px);
}

/* DIVIDER */
.footer-divider{
    border-color:rgba(255, 255, 255, 0.1);
    margin:40px 0 20px;
}

/* BOTTOM */
.footer-bottom{
    font-size:13px;
    color:#ecf1ec;
}

/* ===============================
🌿 WHATSAPP FLOAT
=============================== */
.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#25D366;
    color:white;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:0 6px 18px rgba(0,0,0,0.3);
    z-index:999;
    transition:0.3s ease;
    text-decoration:none;
}

/* 🌿 hover */
.whatsapp-float:hover{
    background:#1ebe5d;
    transform:scale(1.1);
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

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

/* make footer grid 2 columns */
.footer-section .row{
    display:flex;
    flex-wrap:wrap;
}

/* each column = 50% */
.footer-section .col-lg-3{
    width:50%;
}

/* spacing */
.footer-section .col-lg-3{
    margin-bottom:30px;
}

/* OPTIONAL: align text left for better look */
.footer-section{
    text-align:left;
}

/* center social icons if needed */
.social-icons{
    justify-content:flex-start;
}

.whatsapp-float{
    width:50px;
    height:50px;
    font-size:22px;
}
}

/* ===============================
🌿 HERO VIDEO SECTION
=============================== */
.hero-video{
    position:relative;
    height:90vh;
    overflow:hidden;
}

/* VIDEO */
.hero-video-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

/* OVERLAY */
.hero-overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    z-index:1;
}

/* CONTENT LEFT */
.hero-content-left{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    align-items:center;
}

/* TEXT BLOCK */
.hero-text{
    max-width:500px;
    color:white;
}

/* TITLE */
.hero-text h1{
    font-size:48px;
    font-weight:600;
    margin-bottom:20px;
}

/* PARAGRAPH */
.hero-text p{
    font-size:18px;
    margin-bottom:25px;
    opacity:0.9;
}

/* BUTTON */
.btn-green{
    background:linear-gradient(45deg,#2e7d32,#66bb6a);
    color:white;
    padding:12px 28px;
    border-radius:30px;
    text-decoration:none;
    transition:0.3s ease;
    display:inline-block;
}

/* BUTTON HOVER */
.btn-green:hover{
    background:linear-gradient(45deg,#388e3c,#81c784);
    transform:translateY(-2px);
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){

.hero-text{
    text-align:center;
    margin:auto;
}

.hero-text h1{
    font-size:32px;
}

.hero-text p{
    font-size:15px;
}

.hero-content-left{
    justify-content:center;
}

}

/* HERO SHOULD NEVER BLOCK UI */
.hero-video,
.hero-video-bg,
.hero-overlay{
    z-index:0 !important;
}

.logo-container{
    z-index:3000;
}

.menu-toggle{
    z-index:3000;
}

.side-menu{
    z-index:4000;
}

.menu-backdrop{
    z-index:3500;
}

/* ===============================
🌿 ABOUT SECTION WITH BG IMAGE
=============================== */
.about-section{
    position:relative;
    padding:80px 0;
    background:url("../images/about.jpg") center/cover no-repeat;
}

/* 🔥 WHITE OVERLAY ON BACKGROUND */
.about-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.9); /* 👈 VERY strong white */
    z-index:0;
}

/* keep content above overlay */
.about-section .container{
    position:relative;
    z-index:1;
}

/* IMAGE (NO OVERLAY) */
.about-image img{
    width:100%;
    border-radius:12px;
    display:block;
}

/* TEXT */
.about-content h2{
    color:var(--primary-green);
    font-weight:600;
    margin-bottom:20px;
}

.about-content p{
    color:#555;
    line-height:1.7;
    margin-bottom:15px;
}

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

.about-content{
    margin-top:30px;
    text-align:center;
}

}

/* ===============================
🌿 STATS SECTION
=============================== */
.stats-section{
    width:100%;
}

/* FLEX LAYOUT */
.stats-wrapper{
    display:flex;
    flex-wrap:wrap;
}

/* ===============================
🌿 LEFT SIDE (40%)
=============================== */
.stats-left{
    width:40%;
    min-height:450px;
    background:url("../images/stats.jpg") center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    padding:40px;
}

/* OVERLAY ON IMAGE */
.stats-left::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);
}

/* TEXT */
.stats-overlay{
    position:relative;
    z-index:1;
    color:#fff;
    max-width:500px;
}

.stats-overlay h3{
    font-size:36px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:15px;
}

.stats-overlay p{
    font-size:18px;
    line-height:1.6;
}

/* ===============================
🌿 RIGHT SIDE (60%)
=============================== */
.stats-right{
    width:60%;
    background:linear-gradient(135deg,#0f2e16,#1b5e20,#2e7d32);
    padding:60px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* SMALL HEADING */
.stats-heading h5{
    color:#d4e157;
    font-weight:600;
    margin-bottom:25px;
    letter-spacing:1px;
    font-size: 15px;
}

/* STACKED STATS */
.stats-grid{
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* ITEM */
.stat-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    color:#e8f5e9;
}

/* ICON */
.stat-item i{
    font-size:42px;
    color:#d4e157;
    min-width:42px;
}

/* BIG NUMBER */
.stat-item h3{
    font-size:26px;
    font-weight:700;
    color:#d4e157;
    margin:0;
}

/* TITLE */
.stat-item h4{
    margin:2px 0;
    font-size:18px;
    font-weight:600;
    color:#ffffff;
}

/* DESCRIPTION */
.stat-item p{
    margin:4px 0 0;
    font-size:14px;
    color:#c8e6c9;
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){

.stats-left,
.stats-right{
    width:100%;
}

/* smaller image height */
.stats-left{
    min-height:250px;
}

/* spacing */
.stats-right{
    padding:40px 20px;
}

}

/* ===============================
🌿 SERVICES SECTION
=============================== */
.services-section{
    padding:90px 0;
    background:#f9fdf9;
}

/* HEADER */
.services-header h2{
    color:var(--primary-green);
    margin-bottom:15px;
    font-weight: 600px;
}

.services-header p{
    max-width:600px;
    margin:auto;
    color:#555;
}

/* GRID → 3 CARDS */
.services-grid{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

/* CARD */
.service-card{
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    position:relative;
    box-shadow:0 12px 35px rgba(0,0,0,0.06);
    transition:0.3s ease;
}

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

/* IMAGE */
.servicee-image{
    height:200px;
    overflow:hidden;
}

.servicee-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

.service-card:hover img{
    transform:scale(1.08);
}

/* ICON (OVERLAP STYLE 🔥) */
.service-icon{
    position:absolute;
    top:160px;
    left:25px;
    background:#2e7d32;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.service-icon i{
    color:#fff;
    font-size:24px;
}

/* CONTENT */
.service-content{
    padding:40px 25px 25px;
}

.service-content h4{
    color:var(--primary-green);
    margin-bottom:10px;
}

.service-content p{
    color:#555;
    line-height:1.6;
}

/* MOBILE */
@media(max-width:768px){
.services-grid{
    grid-template-columns:1fr;
}
}

/* ===============================
🌿 TOPICS SECTION
=============================== */
.topics-section{
    position:relative;
    padding:90px 0;
    background:url("../images/topic.jpg") center/cover no-repeat;
}

/* 🔥 WHITE OVERLAY */
.topics-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.9); /* strong white */
}

.topics-section .container{
    position:relative;
    z-index:1;
}

/* HEADER */
.topics-header h2{
    color:var(--primary-green);
    margin-bottom:15px;
}

.topics-header p{
    max-width:650px;
    margin:auto;
    color:#555;
    line-height:1.7;
}

/* GRID */
.topics-grid{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:25px;
}

/* ITEM */
.topic-item{
    text-align:center;
    text-decoration:none;
}

/* IMAGE */
.topic-image{
    height:280px;
    border-radius:14px;
    overflow:hidden;
}

.topic-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

/* HOVER EFFECT */
.topic-item:hover img{
    transform:scale(1.08);
}

/* TEXT */
.topic-item h5{
    margin-top:12px;
    color:var(--primary-green);
    font-weight:600;
    transition:0.3s;
}

/* HOVER TEXT */
.topic-item:hover h5{
    color:#2e7d32;
    transform:translateY(2px);
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){
.topics-grid{
    grid-template-columns:repeat(2, 1fr);
}
}

/* ===============================
🌿 JOURNAL SECTION
=============================== */
.journal-section{
    padding:90px 0;
    background:#ffffff;
}

/* HEADER */
.journal-header h2{
    color:var(--primary-green);
    margin-bottom:40px;
}

/* GRID */
.journal-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

/* CARD */
.journal-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    transition:0.3s ease;
}

.journal-card:hover{
    transform:translateY(-8px);
}

/* IMAGE */
.journal-image{
    position:relative;
    height:200px;
}

.journal-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* TAG */
.journal-tag{
    position:absolute;
    bottom:0;   /* 🔥 no gap */
    left:0;     /* 🔥 no gap */
    background:#2e7d32;
    color:#fff;
    padding:6px 14px;
    font-size:12px;
    border-top-right-radius:10px; /* smooth corner */
}

/* CONTENT */
.journal-content{
    padding:20px;
}

.journal-content h4{
    color:#222;
    font-size:22px;
    line-height:1.4;
    text-decoration:underline;          /* 🔥 always underline */
    text-underline-offset:4px;          /* spacing */
    text-decoration-thickness:1.5px;    /* nicer line */
    transition:0.3s;
}
.journal-content h4{
    position:relative;
    display:inline-block;
}

/* animated underline */
.journal-content h4::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:0%;
    height:2px;
    background:var(--primary-green);
    transition:0.3s ease;
}

/* hover effect */
.journal-content a:hover h4::after{
    width:100%;
}

.journal-content a:hover h4{
    color:var(--primary-green);
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){
.journal-grid{
    grid-template-columns:1fr;
}
}

/* ===============================
🌿 HERO
=============================== */
.about-hero{
    height:60vh;
    background:url("../images/farm.jpg") center/cover no-repeat;
    position:relative;
}

.about-hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
}

.about-hero-overlay h1{
    color:#fff;
    font-size:48px;
    font-weight:600;
}

/* ===============================
🌿 SECTIONS
=============================== */
.about-page-bg .aboutt-section{
    padding:80px 0;
}

.about-page-bg .abouttt-section{
    padding:80px 0;
}

.about-page-bg .aboutt-section{
    background:rgba(255,255,255,0.15); /* 👈 main fix */
}

.about-page-bg .abouttt-section{
    background:rgba(255,255,255,0.65); /* 👈 main fix */
}

.about-page-bg .about-section:nth-child(even){
    background:rgba(255,255,255,0.7);
}

.about-page-bg .about-section.alt-bg{
    background:transparent !important;
}

.about-page-bg .about-section.alt-bg .container{
    background:transparent !important;
}

.about-img{
    width:100%;
    border-radius:12px;
}

.about-img-wrapper{
    height:400px;          /* 👈 control size here */
    overflow:hidden;
    border-radius:12px;
}

.about-img-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;      /* 🔥 keeps image looking good */
}

/* TEXT */
.about-page-bg .aboutt-section h2{
    color:var(--primary-green);
    margin-bottom:20px;
    font-weight: 600;
}

.about-page-bg .abouttt-section h2{
    color:var(--primary-green);
    margin-bottom:20px;
    font-weight: 600;
}

.about-page-bg .aboutt-section p{
    color:#000;
    line-height:1.7;
}

.about-page-bg .abouttt-section p{
    color:#000;
    line-height:1.7;
}

/* ===============================
🌿 CARDS
=============================== */
.about-cards{
    padding:80px 0;
    background:transparent;
}

.about-cards .row{
    display:flex;
    flex-wrap:wrap;
}

.about-cards .col-lg-4{
    display:flex;
}

.about-card{
    flex:1;
    padding:40px 25px;
    border-radius:16px;
    background:#f9fdf9;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
    transition:0.3s;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.about-card:hover{
    transform:translateY(-8px);
}

.about-card i{
    font-size:40px;
    color:var(--primary-green);
    margin-bottom:15px;
}

.about-card h4{
    margin-bottom:10px;
    color:#222;
}

.about-card p{
    color:#555;
}

.about-page-bg{
    background:url("../images/aboutus2.jpg") center/cover no-repeat;
    position:relative;
}

.about-page-bg{
    position:relative;
    z-index:0;
}

.about-page-bg::before{
    z-index:0; /* 👈 keep it behind */
}

.about-page-bg > *{
    position:relative;
    z-index:1;
}
/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){

.about-hero-overlay h1{
    font-size:32px;
}

.aboutt-section{
    text-align:center;
}

.aboutt-section img{
    margin-bottom:20px;
}

.abouttt-section{
    text-align:center;
}

.abouttt-section img{
    margin-bottom:20px;
}

}

/* ===============================
🌿 CONTACT HERO
=============================== */
.contact-hero{
    background:url("../images/stats.jpg") center/cover no-repeat;
}

/* ===============================
🌿 CONTACT SECTION
=============================== */
.contact-section{
    padding:80px 0;
}

/* CARD */
.contact-card{
    display:flex;
    flex-direction:column;
    height:100%;
    padding:30px;
    border-radius:16px;
    background:rgba(255,255,255,0.9);
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* TITLE */
.contact-title{
    color:var(--primary-green);
    margin-bottom:20px;
}

/* TEXT */
.contact-card p{
    color:#555;
    margin-bottom:15px;
    line-height:1.6;
}

/* ICON */
.contact-card i{
    color:var(--primary-green);
    margin-right:8px;
}

/* LINKS */
.contact-link{
    color:#2e7d32;
    text-decoration:none;
}

.contact-link:hover{
    text-decoration:underline;
}

/* DIVIDER */
.contact-divider{
    margin:20px 0;
    border-color:rgba(0,0,0,0.1);
}

/* ===============================
🌿 MAP BUTTON (STICKY)
=============================== */
.contact-map-btn-wrapper{
    margin-top:auto;
}

.contact-map-btn{
    display:block;
    width:calc(100% + 60px);
    margin-left:-30px;
    margin-right:-30px;
    margin-bottom:-30px;

    text-align:center;
    padding:16px;
    background:linear-gradient(45deg,#2e7d32,#66bb6a);
    color:#fff;
    font-weight:500;
    text-decoration:none;

    border-bottom-left-radius:16px;
    border-bottom-right-radius:16px;

    transition:0.3s;
}

.contact-map-btn:hover{
    background:linear-gradient(45deg,#388e3c,#81c784);
}

/* ===============================
🌿 MAP
=============================== */
.map-box{
    height:100%;
    min-height:450px;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.map-box iframe{
    width:100%;
    height:100%;
    border:0;
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){

.contact-card{
    text-align:center;
}

.map-box{
    min-height:300px;
}

}

/* ===============================
🌿 HERO MOBILE (GLOBAL FIX)
=============================== */
@media(max-width:768px){

/* ALL HERO SECTIONS */
.about-hero,
.contact-hero,
.hero-video,
.hero{
    height:45vh; /* 👈 reduce height */
    min-height:300px;
}

/* OVERLAY CONTENT */
.about-hero-overlay,
.hero-content,
.hero-content-left{
    text-align:center;
    padding:0 15px;
}

/* TITLE */
.about-hero-overlay h1,
.hero h1,
.hero-text h1{
    font-size:28px; /* 👈 smaller */
    line-height:1.2;
}

/* PARAGRAPH */
.hero-text p{
    font-size:14px;
}

/* BUTTON */
.btn-green{
    padding:10px 20px;
    font-size:14px;
}

}

/* ===============================
🎥 BACKGROUND VIDEO
=============================== */
.gallery-bg-video{
    position:fixed;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

.gallery-bg-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(6px) brightness(0.6);
}

/* overlay */
.gallery-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:-1;
}

/* ===============================
🌿 PAGE
=============================== */
.gallery-page{
    padding:80px 0;
    color:#fff;
}

/* HEADER */
.gallery-title{
    font-size:36px;
    font-weight:600;
}

.gallery-sub{
    color:#ddd;
    max-width:600px;
    margin:auto;
}

/* SECTION */
.gallery-section{
    margin-bottom:60px;
}

/* HEADER */
.gallery-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

/* ARROWS */
.gallery-arrows button{
    border:none;
    background:#2e7d32;
    color:#fff;
    margin-left:5px;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
}

/* ROW */
.gallery-row{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
}

/* BIGGER IMAGES */
.gallery-row img{
    height:220px; /* 🔥 bigger */
    border-radius:12px;
    cursor:pointer;
    transition:0.3s;
}

.gallery-row img:hover{
    transform:scale(1.05);
}

/* ===============================
🌿 LIGHTBOX
=============================== */
.lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    justify-content:center;
    align-items:center;
}

.lightbox img{
    max-width:85%;
    max-height:85%;
}

.lightbox .close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:30px;
    color:#fff;
    cursor:pointer;
}

.lightbox button{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}

.lightbox .prev{ left:20px; }
.lightbox .next{ right:20px; }

/* hide scrollbar but allow scroll */
.gallery-row{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;

    scrollbar-width:none;        /* Firefox */
    -ms-overflow-style:none;     /* IE */
}

.gallery-row::-webkit-scrollbar{
    display:none;                /* Chrome/Safari */
}

@media(max-width:768px){

.gallery-title{
    font-size:26px;
}

.gallery-sub{
    font-size:14px;
    padding:0 10px;
}

/* stack header */
.gallery-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

/* smaller arrows */
.gallery-arrows button{
    padding:5px 10px;
}

/* images */
.gallery-row img{
    height:160px;
}

}

/* ===============================
🌿 HERO
=============================== */
.services-hero{
    background:url("../images/nhs3.jpg") center/cover no-repeat;
}

/* ===============================
🌿 SERVICES PAGE
=============================== */
.services-intro{
    max-width:700px;
    margin:0 auto 60px;
}

.services-intro h2{
    color:var(--primary-green);
    margin-bottom:15px;
}

.services-intro p{
    color:#555;
    line-height:1.7;
}

.services-page{
    padding:90px 0;
}

/* ROW */
.service-row{
    display:flex;
    align-items:center;
    gap:40px;
    margin-bottom:80px;
}

/* REVERSE */
.service-row.reverse{
    flex-direction:row-reverse;
}

/* IMAGE */
.service-image{
    width:40%;
    height:320px;
    border-radius:16px;
    overflow:hidden;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

.service-row:hover img{
    transform:scale(1.05);
}

/* TEXT */
.service-text{
    width:60%;
}

.service-text h2{
    color:var(--primary-green);
    margin-bottom:15px;
}

.service-text p{
    color:#555;
    line-height:1.7;
    margin-bottom:12px;
}

/* ===============================
🌿 CTA
=============================== */
.cta-section{
    position:relative;
    padding:100px 0;
    background:url("../images/stats.jpg") center/cover no-repeat;
    color:#fff;
}

/* DARK OVERLAY */
.cta-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

/* KEEP CONTENT ABOVE */
.cta-section .container{
    position:relative;
    z-index:1;
}

/* TEXT */
.cta-section h2{
    margin-bottom:15px;
}

.cta-section p{
    color:#ddd;
}

/* ===============================
🌿 MOBILE
=============================== */
@media(max-width:768px){

.service-row{
    flex-direction:column;
    gap:20px;
}

.service-row.reverse{
    flex-direction:column;
}

.service-image{
    width:100%;
    height:220px;
}

.service-text{
    width:100%;
    text-align:center;
}

}

@media(max-width:768px){

.services-hero{
    height:45vh;
    min-height:280px;
}

.about-hero-overlay h1{
    font-size:28px;
    text-align:center;
    padding:0 15px;
}

}