:root {
            --primary-green: #0b5e28;
            --header-light-green: #6fba2c;
            --light-green: #3ab54a;
            --button-green: #37c34b;
            --badge-border: #9bc3a1;
            --accent-yellow: #f6c851;
            --text-dark: #203c27;
            --text-heavy-dark: #1a3b25;
            --text-gray: #777777;
            --bg-light: #f1f5f1; 
            --dark-bg: #111a14;
            --white: #ffffff;
            --font-main: 'Outfit', sans-serif;
            --font-title: 'Playfair Display', serif; 
        }

        /* Reset & Base Styles */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-main); color: var(--text-gray); background-color: var(--white); overflow-x: hidden; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }

        .container { max-width: 90%; margin: 0 auto; padding: 0 20px; position: relative; }

        /* --- Enhanced Scroll Animations --- */
        .animate-item { 
            opacity: 0; 
            transform: translateY(40px) scale(0.95); 
            filter: blur(5px);
            transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
        }
        .animate-item.in-view { 
            opacity: 1; 
            transform: translateY(0) scale(1); 
            filter: blur(0);
        }
        .delay-100 { transition-delay: 0.1s; }
        .delay-200 { transition-delay: 0.2s; }
        .delay-300 { transition-delay: 0.3s; }
        .delay-400 { transition-delay: 0.4s; }
        .delay-500 { transition-delay: 0.5s; }

        /* --- Continuous Floating Animations --- */
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(3deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        @keyframes floatReverse {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(20px) rotate(-3deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        @keyframes pulseGlow {
            0% { box-shadow: 0 0 0 0 rgba(246, 200, 81, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(246, 200, 81, 0); }
            100% { box-shadow: 0 0 0 0 rgba(246, 200, 81, 0); }
        }
        @keyframes rotateSlow { 100% { transform: rotate(360deg); } }

        .floating-lettuce { animation: float 6s ease-in-out infinite; }
        .floating-palm { animation: floatReverse 7s ease-in-out infinite; }
        .floating-sketch { animation: floatReverse 9s ease-in-out infinite; }
        .floating-cart { animation: float 4s ease-in-out infinite; }

        /* --- Header --- */
        header { position: absolute; width: 100%; top: 0; z-index: 2000; } /* FIX: Higher z-index than mobile overlay */
        
        .top-bar { background-color: var(--primary-green); padding: 10px 0; }
        .top-bar-content { display: flex; justify-content: flex-end; }
        .top-bar ul { display: flex; gap: 25px; align-items: center; }
        .top-bar ul li { position: relative; padding: 5px 0; }
        .top-bar a { color: var(--white); font-size: 13px; font-weight: 400; display: flex; align-items: center; gap: 6px; transition: color 0.3s; }
        .top-bar a:hover { color: var(--accent-yellow); }

        /* Dropdown Menu Styles */
        .dropdown-menu {
            position: absolute; top: 100%; left: 0; background-color: var(--white); min-width: 220px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 6px; padding: 10px 0;
            opacity: 0; visibility: hidden; transform: translateY(15px);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 2000; display: flex; flex-direction: column;
        }
        .top-bar ul li:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-menu li { width: 100%; padding: 0; }
        .dropdown-menu a { color: var(--text-heavy-dark) !important; padding: 10px 20px; font-size: 13.5px !important; display: block; width: 100%; transition: all 0.3s ease; }
        .dropdown-menu a:hover { background-color: var(--bg-light); color: var(--light-green) !important; padding-left: 25px; }

        .main-nav {padding: 2px 0; background: #ffffffb5; box-shadow: 0 2px 10px rgb(0 0 0 / 10%); position: relative; z-index: 1001;}
        .main-nav-content { display: flex; justify-content: space-between; align-items: center; }
        .logo img { max-height: 90px; }
        .desktop-nav ul { display: flex; gap: 15px; align-items: center; }
        .desktop-nav a { color: #000; font-weight: 500; font-size: 15px; transition: color 0.3s; }
        .desktop-nav a:hover {color: #0b5e28;}

        /* --- Hamburger Menu Icon --- */
        .hamburger { display: none; cursor: pointer; flex-direction: column; gap: 6px; z-index: 1002; }
        .hamburger span {display: block; width: 30px; height: 3px; background-color: #000000; border-radius: 3px; transition: all 0.3s ease-in-out;}
        .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--accent-yellow); }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: var(--accent-yellow); }

        /* --- Mobile Overlay Menu --- */
        .mobile-menu-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--text-heavy-dark) 100%);
            z-index: 1999; /* FIX: Just below header so hamburger is clickable */
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
        }
        .mobile-menu-overlay.active { opacity: 1; pointer-events: all; }
        .mobile-menu-overlay ul { text-align: center; }
        .mobile-menu-overlay ul li { margin: 5px 0; transform: translateY(30px); opacity: 0; transition: all 0.5s ease; }
        .mobile-menu-overlay.active ul li { transform: translateY(0); opacity: 1; }
        .mobile-menu-overlay.active ul li:nth-child(1) { transition-delay: 0.1s; }
        .mobile-menu-overlay.active ul li:nth-child(2) { transition-delay: 0.2s; }
        .mobile-menu-overlay.active ul li:nth-child(3) { transition-delay: 0.3s; }
        .mobile-menu-overlay.active ul li:nth-child(4) { transition-delay: 0.4s; }
        .mobile-menu-overlay.active ul li:nth-child(5) { transition-delay: 0.5s; }
        
        .mobile-menu-overlay a { font-size: 14px; font-family: var(--font-title); color: var(--white); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s; }
        .mobile-menu-overlay a:hover { color: var(--accent-yellow); }
        .mobile-menu-overlay .top-bar-mobile { display: flex; gap: 20px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 30px; }
        .mobile-menu-overlay .top-bar-mobile a { font-size: 14px; font-family: var(--font-main); text-transform: none; letter-spacing: 0; }

        /* --- Hero Section --- */
/*         .hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; display: flex; align-items: center; } */
.hero {
	height: 100vh;
}
.hero video {
	width: 100%;
}
/*         .hero video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); z-index: -1; object-fit: cover; } */

        /* --- Shared Typography --- */
        .section-subtitle { color: var(--light-green); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; display: block; font-size: 12px; }
        .section-title { font-family: var(--font-title); font-size: 46px; line-height: 1.15; margin-bottom: 20px; color: var(--text-dark); font-weight: 600; }
        
        .btn { display: inline-block; background-color: var(--accent-yellow); color: var(--text-dark); padding: 12px 30px; border-radius: 30px; font-weight: 600; font-size: 14px; transition: all 0.3s; text-align: center; }
        .btn:hover { background-color: var(--primary-green); color: var(--white); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .btn-green { text-align: center; background-color: var(--button-green); color: var(--white); width: 100%; padding: 16px 0; border-radius: 30px; font-weight: 500; font-size: 15px; display: block; margin-top: 15px; transition: all 0.3s;}
        .btn-green:hover { background-color: var(--primary-green); transform: translateY(-3px); }

        /* --- About Us Section --- */
        .about-us { padding: 120px 0 80px; background-color: var(--white); position: relative; overflow: hidden; }
        .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
        .floating-lettuce { position: absolute; right: 0; top: 0; width: 300px; z-index: 10; pointer-events: none; opacity: 0.9; }
        
        .about-image-wrapper { position: relative; height: 100%; margin: 0 auto; aspect-ratio: 1/1;}
        .dashed-circle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px dashed var(--badge-border); border-radius: 50%; z-index: 1; animation: rotateSlow 30s linear infinite; }
        
        .about-main-img { position: absolute; top: 35px; left: 35px; right: 35px; bottom: 35px; border-radius: 50%; object-fit: cover; width: calc(100% - 70px); height: calc(100% - 70px); z-index: 2; }
        
        .badge { position: absolute; width: 75px; height: 75px; background: var(--white); border: 2px dotted var(--badge-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; padding: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); animation: pulseGlow 2s infinite; }
        .badge img { width: 100%; height: 100%; object-fit: contain; }
        .badge-1 { top: 2%; left: 32%; transform: translate(-50%, -50%); } 
        .badge-2 { top: 47%; left: -1%; transform: translate(-50%, -50%); animation-delay: 0.5s;} 
        .badge-3 { top: 93%; left: 22%; transform: translate(-50%, -50%); animation-delay: 1s;}

        .about-content p { font-size: 15px; line-height: 1.7; margin-bottom: 40px; color: #666; }
        .progress-item { margin-bottom: 25px; }
        .progress-header { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 600; color: var(--text-dark); font-size: 15px; }
        .progress-bar-bg { height: 4px; background-color: #e5e5e5; position: relative; width: 100%; border-radius: 4px; overflow: hidden; }
        .progress-bar-fill { height: 100%; background-color: var(--accent-yellow); position: absolute; top: 0; left: 0; transform-origin: left; animation: fillBar 1.5s ease-out forwards; }
        @keyframes fillBar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

        /* --- Gallery Section --- */
        .gallery { padding: 80px 0 160px; background-color: var(--bg-light); text-align: center; position: relative; overflow: hidden;}
        .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; text-align: left; position: relative; z-index: 2; }
        .gal-item { border-radius: 16px; overflow: hidden; position: relative; }
        .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
        .gal-item:hover img { transform: scale(1.1); }
        .gal-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); opacity: 0; transition: opacity 0.4s; pointer-events: none;}
        .gal-item:hover::after { opacity: 1; }

        .gal-img-1 { grid-column: span 2; height: 320px; }
        .gal-img-2 { grid-column: span 1; height: 320px; }
        .gal-img-3 { grid-column: span 1; height: 420px; }
        .gal-img-4 { grid-column: span 1; height: 420px; }
        .gal-col-5 { grid-column: span 1; display: flex; flex-direction: column; justify-content: space-between;}
        .gal-img-5 { height: 340px; border-radius: 16px; overflow: hidden; position: relative;}

        .floating-palm { position: absolute; right: -50px; bottom: -180px; width: 450px; z-index: 1; opacity: 0.85; pointer-events: none; }

        /* --- USP / Stats Section --- */
        .stats-wrapper { position: relative; z-index: 10; margin-top: -80px; }
        .stats-inner { background-color: var(--white); padding: 45px 30px; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.06); display: flex; justify-content: space-around; text-align: left; align-items: center; }
        .stat-item { display: flex; flex-direction: column; align-items: center; gap: 10px; border-right: 1px solid #f0f0f0; width: 25%; padding: 0px 30px; }
        .stat-item:last-child { border-right: none; }
        .stat-item h3 { font-family: var(--font-main); font-size: 20px; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; line-height: 1;}
        .stat-item p { color: var(--text-gray); font-weight: 500; font-size: 13px; display: flex; text-align: center;}
        .stat-item p i { color: var(--light-green); font-size: 35px; }

        /* --- Academy Section --- */
        .academy { padding: 120px 0 100px; background-color: var(--white); position: relative; overflow: hidden; }
        .academy-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: center; }
/*         .academy-left { position: relative; z-index: 2; padding-right: 20px;} */
        .academy-left h2 { font-size: 38px; margin-bottom: 25px; line-height: 1.15;} 
/*         .academy-left p { margin-bottom: 30px; font-size: 14.5px; color: #777; line-height: 1.7; } */
        .chemical-bg { position: absolute; bottom: -120px; left: 10px; width: 280px; opacity: 0.40; z-index: -1; pointer-events: none; animation: rotateSlow 40s linear infinite;}
        .academy-center-img { overflow: hidden; border-radius: 16px; }
        .academy-center-img img { width: 100%; border-radius: 16px; height: 500px; object-fit: cover; transition: transform 0.6s ease; }
        .academy-center-img:hover img { transform: scale(1.05); }
        .academy-feature { display: flex; gap: 20px; margin-bottom: 35px; align-items: flex-start; transition: transform 0.3s; }
        .academy-feature:hover { transform: translateX(10px); }
        .academy-icon { width: 45px; height: 45px; background-color: var(--accent-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-dark); font-size: 18px; flex-shrink: 0; transition: transform 0.3s, background-color 0.3s;}
        .academy-feature:hover .academy-icon { transform: rotate(15deg); background-color: var(--primary-green); color: var(--white); }
        .academy-feature h4 { font-family: var(--font-main); font-size: 18px; margin-bottom: 6px; color: var(--text-dark); font-weight: 700; }
        .academy-feature p { font-size: 13.5px; line-height: 1.6; color: #888; }
        .floating-cart { position: absolute; right: 20px; width: 35px; height: 35px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--light-green); font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); cursor: pointer;}
        .fc-1 { top: 20%; }
        .fc-2 { bottom: 10%; right: 40px; opacity: 0.2 !important;}

        /* --- Our Services Section --- */
        .services { padding: 100px 0; background-color: #eae9e9; position: relative; overflow: hidden; }
        .services-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(circle, rgba(200, 240, 200, 0.4) 0%, rgba(255,255,255,0) 60%); z-index: 1; pointer-events: none; }
        .services .container { position: relative; z-index: 2; }
        .services-header { text-align: center; margin-bottom: 60px; }
        .services-header .section-subtitle { display: flex; justify-content: center; align-items: center; gap: 15px; font-size: 14px; }
        .services-header .section-subtitle .line { width: 30px; height: 2px; background-color: var(--light-green); transition: width 0.3s;}
        .services-header:hover .line { width: 50px; }
        .services-header .section-title { font-family: var(--font-main); font-weight: 800; color: var(--text-heavy-dark); font-size: 42px; margin-top: 5px; }
        
        .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
        .service-card { background: #ffffff; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.05); padding: 20px; text-align: center; position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; }
        .service-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
        .service-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: url('https://ggff.co.in/assets/img/grass.jpg') center bottom / cover; opacity: 0.15; z-index: 0; pointer-events: none; }
        .sc-img-wrap { position: relative; margin-bottom: 25px; overflow: hidden; border-radius: 8px;}
        .sc-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.5s; }
        .service-card:hover .sc-img-wrap img { transform: scale(1.1); }
        .sc-wave { position: absolute; bottom: -2px; left: 0; width: 100%; height: 35px; z-index: 2;}
        .sc-content { position: relative; z-index: 1; padding-bottom: 15px; }
        .sc-content h4 { color: var(--text-heavy-dark); font-family: var(--font-main); font-size: 19px; font-weight: 800; margin-bottom: 15px; line-height: 1.3; }
        .sc-content p { color: #000; font-size: 12.5px; line-height: 1.7; margin: 0; padding: 0 5px; }

        /* --- Blog Section --- */
        .blog { padding: 100px 0; background-color: var(--white); position: relative; overflow: hidden; }
        .blog-header { text-align: center; margin-bottom: 50px; position: relative; }
        .floating-trees { position: absolute; right: 40px; top: -50px; width: 350px; z-index: 10; pointer-events: none; }
        .blog-header .section-title { font-family: var(--font-main); font-weight: 800; font-size: 38px; color: var(--text-heavy-dark); }
        .blog-header .section-title .light-text { font-weight: 300; color: #a0a0a0; margin-right: 5px; }
        .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; z-index: 2; }
        .blog-card { background: #ffffff; border: 1px solid #f0f0f0; border-radius: 16px; overflow: hidden; text-align: center; transition: all 0.4s ease; transform: translateY(0); }
        .blog-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.08); transform: translateY(-8px); border-color: transparent;}
        .blog-img-wrap { overflow: hidden; }
        .blog-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.5s ease;}
        .blog-card:hover img { transform: scale(1.08); }
        .blog-content { padding: 30px 25px; }
        .blog-content h4 { font-family: var(--font-main); font-weight: 700; color: var(--text-heavy-dark); font-size: 17px; margin-bottom: 15px; transition: color 0.3s;}
        .blog-card:hover h4 { color: var(--light-green); }
        .blog-meta { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; color: #aaa; font-size: 12px; }
        .blog-meta i { margin-right: 5px; color: var(--accent-yellow);}
        .blog-content p { color: #888; font-size: 13px; line-height: 1.6; margin-bottom: 25px; }
        .btn-outline { display: inline-block; border: 1px solid #e0e0e0; color: var(--text-heavy-dark); padding: 8px 25px; border-radius: 30px; font-size: 11px; font-weight: 700; text-transform: uppercase; transition: all 0.3s; }
        .btn-outline:hover { background-color: var(--primary-green); color: var(--white); border-color: var(--primary-green); }
        .floating-sketch { position: absolute; right: -50px; bottom: -80px; width: 280px; opacity: 0.4; z-index: 1; pointer-events: none; }

        /* --- Testimonial Section --- */
        .testimonial { padding: 100px 0; background-color: #eae9e9; position: relative; overflow: hidden; }
        .testimonial-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: center; }
        .testi-image img { width: 100%; max-width: 450px; display: block; margin: 0 auto; object-fit: contain; transition: transform 0.5s; }
        .testi-image:hover img { transform: scale(1.02); }
        .testi-card { background: #ffffff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); padding: 40px; position: relative; }
        .testi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
        .quote-icon svg { width: 45px; height: 45px; stroke: var(--light-green); fill: none; }
        .testi-stars { color: var(--accent-yellow); font-size: 14px; }
        .testi-stars .star-gray { color: #e0e0e0; }
        .testi-slider-container { overflow: hidden; width: 100%; position: relative; margin-bottom: 10px;}
        .testi-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); width: 100%; }
        .testi-slide { min-width: 100%; flex: 0 0 100%; }
        .testi-slide p { font-size: 15px; color: #777; line-height: 1.7; margin-bottom: 30px; padding-right: 15px;}
        .testi-author-info { display: flex; align-items: center; gap: 15px; }
        .testi-author-info img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; }
        .testi-author-info h4 { font-family: var(--font-title); font-size: 20px; color: var(--text-heavy-dark); margin-bottom: 2px; }
        .testi-author-info span { color: #a0a0a0; font-size: 13px; }
        .testi-dots { position: absolute; bottom: 50px; right: 40px; display: flex; gap: 6px; align-items: center; z-index: 10; }
        .testi-dots .dot { width: 8px; height: 8px; background-color: #e0e0e0; border-radius: 50%; display: inline-block; cursor: pointer; transition: all 0.3s ease;}
        .testi-dots .dot.active { background-color: var(--light-green); border: 2px solid white; box-shadow: 0 0 0 2px var(--light-green); width: 10px; height: 10px; }

        /* --- Footer Section --- */
        footer { background-color: #031c0c; color: var(--white); padding: 80px 0 30px; position: relative; background-image: url('https://ggff.co.in/assets/img/grass.jpg'); background-blend-mode: overlay; background-size: cover;}
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
        .footer-logo img { max-width: 180px; margin-bottom: 20px; }
        .footer-title { font-family: var(--font-title); font-size: 22px; margin-bottom: 25px; font-weight: 600;}
        .footer-links li { margin-bottom: 12px; font-size: 14.5px; transition: transform 0.3s; }
        .footer-links li:hover { transform: translateX(5px); }
        .footer-links a { color: #d1dfd3; transition: color 0.3s; }
        .footer-links a:hover { color: var(--accent-yellow); }
        .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); color: #d1dfd3; font-size: 14px; }

        /* ==========================================================================
           RESPONSIVE & MOBILE STYLES
           ========================================================================== */

        @media screen and (max-width: 1100px) {
            .gallery-grid { gap: 10px; }
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-inner { flex-wrap: wrap; padding: 20px; }
            .stat-item { width: 50%; padding: 20px; border-bottom: 1px solid #f0f0f0; border-right: none;}
            .stat-item:nth-child(odd) { border-right: 1px solid #f0f0f0; }
            .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }
        }

        @media screen and (max-width: 991px) {
            .top-bar { display: none; } 
            .desktop-nav { display: none; } 
            .hamburger { display: flex; } 
            
            .section-title { font-size: 36px; }
            
            .about-grid, .testimonial-grid { grid-template-columns: 1fr; gap: 40px; }
            .about-image-wrapper { max-width: 500px; margin: 0 auto 30px; aspect-ratio: 1/1; height: auto;}
            .floating-lettuce { width: 150px; opacity: 0.5; right: -20px;}
            
            .academy-grid { grid-template-columns: 1fr; text-align: center; }
            .academy-left { padding-right: 0; }
            .chemical-bg { display: none; } 
            .academy-feature { text-align: left; }
            
            .blog-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .gallery-grid { grid-template-columns: repeat(2, 1fr); }
            .gal-img-1 { grid-column: span 2; height: 250px;}
            .gal-img-3, .gal-img-4, .gal-img-5 { height: 250px; }

            .newsletter input { width: 100%; }
            .testi-dots { right: 50%; transform: translateX(50%); bottom: 20px; }
            .testi-card { padding-bottom: 60px; }
        }

        @media screen and (max-width: 768px) {
            .section-title { font-size: 28px; }
            .hero { min-height: auto; height: auto; }
			.hero video {margin-top: 100px;}
            
            .gallery-grid, .blog-grid, .footer-grid, .services-grid { grid-template-columns: 1fr; }
            .gal-img-1, .gal-img-2, .gal-img-3, .gal-img-4, .gal-col-5 { grid-column: span 1; height: 250px; }
            
            .stats-wrapper { margin-top: -40px; }
            .stat-item { width: 100%; border-right: none !important; border-bottom: 1px solid #f0f0f0; text-align: center; align-items: center; padding: 25px 10px; }
            .stat-item:last-child { border-bottom: none; }
            
            .floating-palm, .floating-trees, .floating-sketch { display: none; } 
			.testimonial-grid {
				display: block;
			}
			.testi-image {
				margin-bottom: 20px;
			}
            .testi-slide p { padding-right: 0; font-size: 14px; }
            .footer-grid { gap: 30px; text-align: center; }
            .newsletter { justify-content: center; }
            .footer-links li { transform: none !important; } 
        }

        /* --- Page Banner --- */
        .page-banner {
            position: relative;
            padding: 220px 0 120px;
            background: linear-gradient(rgba(11, 94, 40, 0.8), rgba(11, 94, 40, 0.8)), url('https://images.unsplash.com/photo-1500937386664-56d1dfef3854?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            text-align: center;
            color: var(--white);
            z-index: 1;
        }
        .page-banner h1 {
            font-family: var(--font-title);
            font-size: 56px;
            margin-bottom: 15px;
            font-weight: 700;
        }
        .breadcrumb {
            display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 16px; font-weight: 500;
        }
        .breadcrumb a { color: var(--accent-yellow); transition: color 0.3s; }
        .breadcrumb a:hover { color: var(--white); }
        .breadcrumb span { opacity: 0.7; font-size: 12px; }

        /* --- Shared Typography --- */
        .section-subtitle { color: var(--light-green); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }
        .section-subtitle::before { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }
        .section-title { font-family: var(--font-title); font-size: 46px; line-height: 1.15; margin-bottom: 20px; color: var(--text-dark); font-weight: 600; }

        /* --- About Intro Section --- */
        .about-intro { padding: 120px 0; background-color: var(--white); }
        .about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        
        .intro-images { position: relative; height: 500px; }
        .intro-img-1 { position: absolute; top: 0; left: 0; width: 70%; height: 80%; border-radius: 20px; object-fit: cover; z-index: 1; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
        .intro-img-2 { position: absolute; bottom: 0; right: 0; width: 55%; height: 60%; border-radius: 20px; object-fit: cover; border: 10px solid var(--white); z-index: 2; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
        .experience-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--accent-yellow); width: 140px; height: 140px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 3; text-align: center; color: var(--text-heavy-dark); box-shadow: 0 10px 30px rgba(246, 200, 81, 0.4); border: 8px solid var(--white); }
        .experience-badge h3 { font-size: 36px; font-weight: 800; font-family: var(--font-main); line-height: 1; margin-bottom: 5px;}
        .experience-badge p { font-size: 13px; font-weight: 600; text-transform: uppercase; line-height: 1.2; }

        .intro-content p { font-size: 16px; line-height: 1.8; color: var(--text-gray); margin-bottom: 25px; }
        .intro-content .highlight-text { font-size: 18px; color: var(--primary-green); font-weight: 500; border-left: 4px solid var(--light-green); padding-left: 15px; margin-bottom: 30px; font-style: italic;}
        
        .feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
        .feature-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-heavy-dark); }
        .feature-list li i { color: var(--light-green); font-size: 18px; }
        
        .btn { display: inline-block; background-color: var(--accent-yellow); color: var(--text-dark); padding: 12px 30px; border-radius: 30px; font-weight: 600; font-size: 14px; transition: all 0.3s; text-align: center; }
        .btn:hover { background-color: var(--primary-green); color: var(--white); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

        /* --- Mission & Vision Section --- */
        .mission-vision {
            padding: 120px 0;
            position: relative;
            background-color: var(--primary-green);
            overflow: hidden;
            background-image: url('https://croplifeindia.org/wp-content/uploads/2024/02/dark-icons.png');
            background-size: 400px;
            background-blend-mode: color-burn;
            color: var(--white);
        }
        
        .mission-vision::before {
            content: ''; position: absolute; inset: 0;  z-index: 1;
        }

        .mv-container { position: relative; z-index: 2; }
        .mv-header { text-align: center; margin-bottom: 60px; }
        .mv-header .section-title { color: var(--white); }
        .mv-header .section-subtitle { color: var(--accent-yellow); }
        .mv-header .section-subtitle::before { background-color: var(--white); }

        .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        .mv-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 50px 40px; border-radius: 20px; transition: transform 0.4s ease, background 0.4s ease; }
        .mv-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.12); }
        .mv-icon { width: 70px; height: 70px; background: var(--accent-yellow); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--text-heavy-dark); margin-bottom: 25px; transform: rotate(-5deg); transition: transform 0.3s; }
        .mv-card:hover .mv-icon { transform: rotate(0deg); }
        .mv-card h3 { font-family: var(--font-title); font-size: 32px; margin-bottom: 15px; }
        .mv-card p { font-size: 15px; line-height: 1.8; color: #e0e0e0; }

        /* --- Team Section --- */
        .team-section { padding: 120px 0; background-color: var(--bg-light); text-align: center; }
        .team-header { margin-bottom: 60px; }
        .team-header .section-subtitle { justify-content: center; }
        .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
        .team-card { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.04); transition: transform 0.3s ease; }
        .team-card:hover { transform: translateY(-10px); }
        .team-img { position: relative; overflow: hidden; height: 300px; }
        .team-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .team-card:hover .team-img img { transform: scale(1.08); }
        .team-socials { position: absolute; bottom: -50px; left: 0; width: 100%; display: flex; justify-content: center; gap: 10px; padding: 15px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); transition: bottom 0.3s ease; }
        .team-card:hover .team-socials { bottom: 0; }
        .team-socials a { width: 35px; height: 35px; background: var(--accent-yellow); color: var(--text-heavy-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.3s; }
        .team-socials a:hover { background: var(--light-green); color: var(--white); }
        .team-info { padding: 25px 20px; }
        .team-info h4 { font-family: var(--font-title); font-size: 22px; color: var(--text-heavy-dark); margin-bottom: 5px; }
        .team-info span { color: var(--light-green); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .about-intro-grid, .mv-grid { gap: 40px; }
            .team-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media screen and (max-width: 991px) {
            .about-intro-grid, .mv-grid { grid-template-columns: 1fr; }
            .intro-images { height: 400px; margin-bottom: 40px; }
            .page-banner { padding: 160px 0 80px; }
        }
        @media screen and (max-width: 768px) {
            .section-title { font-size: 32px; }
            .page-banner h1 { font-size: 40px; }
            .team-grid { grid-template-columns: 1fr; }
            .feature-list { grid-template-columns: 1fr; }
        }

        /* --- DISTINCT LAYOUT: Magazine Style Blog Section --- */
        .blog-magazine {
            padding: 100px 0;
            background-color: var(--white);
            position: relative;
        }

        /* 1. Featured Post Layout */
        .featured-post {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 0;
            background: var(--bg-light);
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 80px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.04);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .featured-post:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.08);
        }
        .featured-img {
            position: relative;
            height: 100%;
            min-height: 400px;
            overflow: hidden;
        }
        .featured-img img {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.6s ease;
        }
        .featured-post:hover .featured-img img { transform: scale(1.05); }
        
        .featured-content {
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .featured-category {
            display: inline-block;
            background: var(--light-green);
            color: var(--white);
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            align-self: flex-start;
        }
        .featured-content h2 {
            font-family: var(--font-title);
            font-size: 34px;
            color: var(--text-heavy-dark);
            margin-bottom: 20px;
            line-height: 1.2;
        }
        .featured-content p {
            color: var(--text-gray);
            font-size: 15.5px;
            line-height: 1.7;
            margin-bottom: 30px;
        }
        .post-meta {
            display: flex; align-items: center; gap: 20px;
            font-size: 13.5px; color: #888; font-weight: 500;
            margin-bottom: 30px; border-bottom: 1px solid #e0e0e0; padding-bottom: 20px;
        }
        .post-meta i { color: var(--accent-yellow); margin-right: 6px; }

        .read-more-btn {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--primary-green); font-weight: 700; font-size: 15px;
            text-transform: uppercase; letter-spacing: 1px;
            transition: color 0.3s, gap 0.3s;
        }
        .read-more-btn i { transition: transform 0.3s; }
        .read-more-btn:hover { color: var(--accent-yellow); gap: 12px; }

        /* 2. Standard Grid Layout */
        .grid-header {
            display: flex; justify-content: space-between; align-items: flex-end;
            margin-bottom: 40px;
        }
        
        .post-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 35px;
        }

        .post-card {
            background: #fff;
            border: 1px solid #eaeaea;
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.4s ease;
            display: flex; flex-direction: column;
        }
        .post-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.06);
            border-color: transparent;
        }
        .post-card-img {
            position: relative;
            height: 240px;
            overflow: hidden;
        }
        .post-card-img img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.5s ease;
        }
        .post-card:hover .post-card-img img { transform: scale(1.08); }
        
        .date-badge {
            position: absolute;
            top: 15px; left: 15px;
            background: var(--white);
            color: var(--text-heavy-dark);
            padding: 8px 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: 700; line-height: 1.1;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        .date-badge span { display: block; font-size: 11px; color: var(--primary-green); text-transform: uppercase; font-weight: 600;}

        .post-card-content {
            padding: 30px 25px;
            flex-grow: 1;
            display: flex; flex-direction: column;
        }
        .post-card-content h3 {
            font-family: var(--font-title);
            font-size: 21px;
            color: var(--text-heavy-dark);
            margin-bottom: 15px;
            line-height: 1.3;
            transition: color 0.3s;
        }
        .post-card:hover .post-card-content h3 { color: var(--primary-green); }
        
        .post-card-content p {
            color: var(--text-gray);
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 25px;
            flex-grow: 1;
        }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .post-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media screen and (max-width: 991px) {
            .featured-post { grid-template-columns: 1fr; }
            .featured-img { min-height: 300px; }
        }
        @media screen and (max-width: 768px) {
            .post-grid { grid-template-columns: 1fr; gap: 30px; }
            .featured-content h2 { font-size: 26px; }
        }

        /* --- Contact Info Cards (Distinct Layout) --- */
        .contact-info-wrapper {
            margin-top: -80px; /* Overlaps the banner */
            position: relative;
            z-index: 10;
            padding-bottom: 80px;
        }
        .contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .info-card {
            background: var(--white);
            padding: 50px 30px;
            border-radius: 16px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.06);
            text-align: center;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .info-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); }
        .info-icon {
            width: 80px; height: 80px;
            background: var(--bg-light);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px;
            color: var(--primary-green);
            margin: 0 auto 25px;
            transition: all 0.4s;
        }
        .info-card:hover .info-icon { background: var(--primary-green); color: var(--white); transform: rotateY(180deg); }
        .info-card h4 { font-family: var(--font-title); font-size: 24px; color: var(--text-heavy-dark); margin-bottom: 15px; }
        .info-card p { color: var(--text-gray); font-size: 15px; line-height: 1.6; margin: 0; }
        .info-card a { color: var(--text-gray); transition: color 0.3s; }
        .info-card a:hover { color: var(--light-green); }

        /* --- Contact Form & Map Section (Distinct Layout) --- */
        .contact-section { padding: 40px 0 120px; background-color: var(--white); position: relative; overflow: hidden; }
        
        /* Background Decoration */
        .contact-bg-shape { position: absolute; top: 0; right: 0; width: 500px; opacity: 0.03; z-index: 1; pointer-events: none; }
        .floating-leaf {position: absolute; left: 0%; bottom: 0%; width: 150px; animation: float 8s ease-in-out infinite; z-index: 1; opacity: 0.8;}

        .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: stretch; position: relative; z-index: 2; }
        
        .form-wrapper {
            background: var(--bg-light);
            padding: 50px 40px;
            border-radius: 20px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .form-wrapper .section-subtitle { color: var(--light-green); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }
        .form-wrapper .section-subtitle::before { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }
        .form-wrapper h2 { font-family: var(--font-title); font-size: 38px; color: var(--text-heavy-dark); margin-bottom: 15px; line-height: 1.2; }
        .form-wrapper p { color: var(--text-gray); font-size: 15px; margin-bottom: 35px; line-height: 1.6; }

        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .form-group { margin-bottom: 20px; }
        .form-control {
            width: 100%;
            padding: 16px 20px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            font-family: var(--font-main);
            font-size: 15px;
            color: var(--text-dark);
            background: var(--white);
            transition: all 0.3s ease;
        }
        .form-control::placeholder { color: #aaa; }
        .form-control:focus { outline: none; border-color: var(--light-green); box-shadow: 0 0 0 4px rgba(58, 181, 74, 0.1); }
        textarea.form-control { height: 160px; resize: none; }
        
        .btn-submit {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            background-color: var(--primary-green); color: var(--white);
            padding: 16px 40px; border: none; border-radius: 30px;
            font-family: var(--font-main); font-weight: 600; font-size: 16px;
            cursor: pointer; transition: all 0.3s;
        }
        .btn-submit:hover { background-color: var(--accent-yellow); color: var(--text-heavy-dark); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(246, 200, 81, 0.3); }

        .map-wrapper {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0,0,0,0.08);
            height: 100%;
            min-height: 500px;
            position: relative;
        }
        .map-wrapper iframe { width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0; filter: grayscale(15%) contrast(1.1); }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .contact-grid { gap: 30px; }
            .form-wrapper { padding: 40px 30px; }
        }
        @media screen and (max-width: 991px) {
            .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
            .contact-grid { grid-template-columns: 1fr; }
            .map-wrapper { min-height: 400px; margin-top: 20px; }
        }
        @media screen and (max-width: 768px) {
            .contact-info-grid { grid-template-columns: 1fr; gap: 20px; }
            .info-card { padding: 35px 20px; }
            .form-row { grid-template-columns: 1fr; gap: 0; } 
            .floating-leaf { display: none; }
        }

        /* --- DISTINCT LAYOUT: Featured Event Section --- */
        .featured-event-wrapper {
            padding: 100px 0;
            background-color: var(--white);
            position: relative;
        }
        
        .featured-event-card {
            display: flex;
            background: var(--bg-light);
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.05);
            border: 1px solid #eaeaea;
        }
        
        .fe-image {
            width: 50%;
            position: relative;
            min-height: 450px;
        }
        .fe-image img {
            width: 100%; height: 100%; object-fit: cover;
            position: absolute; top: 0; left: 0;
        }
        
        .fe-content {
            width: 50%;
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #ffffff;
        }
        
        .fe-badge {
            display: inline-block;
            background: var(--accent-yellow);
            color: var(--text-heavy-dark);
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            align-self: flex-start;
            margin-bottom: 20px;
        }
        
        .fe-content h2 {
            font-family: var(--font-title);
            font-size: 34px;
            color: var(--text-heavy-dark);
            margin-bottom: 20px;
            line-height: 1.25;
        }
        
        .fe-meta {
            display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px;
            font-size: 15px; color: var(--text-gray); font-weight: 500;
            padding-bottom: 25px; border-bottom: 1px solid #f0f0f0;
        }
        .fe-meta span { display: flex; align-items: center; }
        .fe-meta i { color: var(--primary-green); margin-right: 8px; font-size: 18px;}
        
        .fe-content p { color: var(--text-gray); font-size: 15px; line-height: 1.7; margin-bottom: 35px; }

        /* --- DISTINCT LAYOUT: Events Schedule List --- */
        .events-list-section {
            padding: 80px 0 120px;
            background-color: var(--bg-light);
        }
        
        .events-filter {
            display: flex; justify-content: center; gap: 15px; margin-bottom: 60px;
        }
        .filter-btn {
            padding: 12px 30px;
            background: transparent;
            border: 2px solid #e0e0e0;
            border-radius: 30px;
            font-family: var(--font-main);
            font-size: 15px;
            font-weight: 600;
            color: var(--text-gray);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .filter-btn:hover { border-color: var(--light-green); color: var(--light-green); }
        .filter-btn.active {
            background: var(--light-green);
            border-color: var(--light-green);
            color: var(--white);
            box-shadow: 0 8px 20px rgba(58, 181, 74, 0.2);
        }

        .event-row {
            background: var(--white);
            border-radius: 16px;
            padding: 35px 40px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            transition: all 0.4s ease;
            border-left: 5px solid transparent;
        }
        .event-row:hover {
            transform: translateX(10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.08);
            border-left-color: var(--light-green);
        }
        .event-row.hide { display: none; }

        .event-date-box {
            background: var(--bg-light);
            border-radius: 16px;
            min-width: 120px;
            height: 120px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; border: 1px solid #eaeaea;
            flex-shrink: 0;
            transition: background 0.3s, border-color 0.3s;
        }
        .event-row:hover .event-date-box {
            background: var(--white);
            border-color: var(--light-green);
            box-shadow: 0 5px 15px rgba(58, 181, 74, 0.1);
        }
        .event-date-box .day { font-size: 38px; font-weight: 800; color: var(--primary-green); line-height: 1; }
        .event-date-box .month-year { font-size: 13px; font-weight: 700; color: var(--text-gray); text-transform: uppercase; margin-top: 8px; letter-spacing: 1px;}

        .event-info { flex-grow: 1; }
        .event-info h4 { font-family: var(--font-title); font-size: 24px; color: var(--text-heavy-dark); margin-bottom: 15px; line-height: 1.3;}
        
        .event-details { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; color: #888; font-weight: 500; }
        .event-details span { display: flex; align-items: center;}
        .event-details i { color: var(--accent-yellow); margin-right: 8px; font-size: 16px;}

        .event-action { min-width: 160px; text-align: right; flex-shrink: 0;}

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .event-row { padding: 30px 25px; gap: 25px; }
            .event-date-box { min-width: 100px; height: 100px; }
            .event-date-box .day { font-size: 32px; }
            .fe-content { padding: 40px 30px; }
        }
        @media screen and (max-width: 991px) {
            .featured-event-card { flex-direction: column; }
            .fe-image, .fe-content { width: 100%; }
            .fe-image { min-height: 300px; }
            
            .event-row { flex-direction: column; text-align: center; gap: 20px; align-items: center;}
            .event-details { justify-content: center; }
            .event-action { text-align: center; width: 100%; margin-top: 10px;}
        }
        @media screen and (max-width: 768px) {
            .events-filter { flex-direction: column; align-items: stretch; gap: 10px; }
            .fe-content h2 { font-size: 28px; }
            .event-info h4 { font-size: 20px; }
        }

        /* --- DISTINCT LAYOUT: Filterable Photo Gallery --- */
        .gallery-wrapper {
            padding: 100px 0 120px;
            background-color: var(--bg-light);
            min-height: 800px;
        }
        
        .gallery-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .gallery-header .section-subtitle { color: var(--light-green); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; display: block; font-size: 13px; }
        .gallery-header h2 { font-family: var(--font-title); font-size: 42px; color: var(--text-heavy-dark); margin-bottom: 30px; }

        /* Filter Buttons */
        .gallery-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 50px;
        }
        .filter-btn {
            padding: 12px 28px;
            background: transparent;
            border: 2px solid #e0e0e0;
            border-radius: 30px;
            font-family: var(--font-main);
            font-size: 15px;
            font-weight: 600;
            color: var(--text-gray);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .filter-btn:hover {
            border-color: var(--light-green);
            color: var(--light-green);
        }
        .filter-btn.active {
            background: var(--light-green);
            border-color: var(--light-green);
            color: var(--white);
            box-shadow: 0 8px 20px rgba(58, 181, 74, 0.2);
        }

        /* Image Grid */
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            /* Using grid-auto-rows to allow some masonry-like variety if needed, but keeping it uniform looks cleanest */
        }

        .photo-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 4/3;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: transform 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
        }
        
        /* For filtering animation */
        .photo-item.hide {
            display: none;
        }

        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Hover Overlay */
        .photo-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(11, 94, 40, 0.85), rgba(58, 181, 74, 0.4));
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.4s ease;
        }
        
        .zoom-icon {
            width: 60px;
            height: 60px;
            background: var(--accent-yellow);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-heavy-dark);
            font-size: 22px;
            transform: translateY(30px) scale(0.8);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .photo-item:hover img { transform: scale(1.1); }
        .photo-item:hover .photo-overlay { opacity: 1; }
        .photo-item:hover .zoom-icon { transform: translateY(0) scale(1); opacity: 1; }

        /* Specific grid span classes to break the monotony */
        .span-row-2 { grid-row: span 2; aspect-ratio: 4/6.2; }
        .span-col-2 { grid-column: span 2; aspect-ratio: 16/6; }

        /* --- Full Screen Lightbox Modal --- */
        .lightbox-modal {
            position: fixed; inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 3000;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(8px);
        }
        .lightbox-modal.active { opacity: 1; pointer-events: all; }
        
        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        .lightbox-modal.active .lightbox-content { transform: scale(1); }
        
        .lightbox-content img {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        
        .lightbox-close {
            position: absolute;
            top: -40px; right: 0;
            background: none; border: none;
            color: var(--white); font-size: 36px;
            cursor: pointer; transition: color 0.3s;
        }
        .lightbox-close:hover { color: var(--accent-yellow); }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .span-col-2 { grid-column: span 1; aspect-ratio: 4/3; } /* Break specific spans on smaller screens */
            .span-row-2 { grid-row: span 1; aspect-ratio: 4/3; }
        }
        @media screen and (max-width: 768px) {
            .gallery-filters { gap: 10px; }
            .filter-btn { padding: 8px 20px; font-size: 13px; margin: 0;}
        }

        /* --- 16:9 Aspect Ratio Container for ALL YouTube iFrames --- */
        .responsive-iframe-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 ratio */
            height: 0;
            overflow: hidden;
            background-color: #000;
        }
        .responsive-iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* --- DISTINCT LAYOUT: Cinematic Video Grid --- */
        .video-gallery-wrapper {
            padding: 100px 0 140px;
            background-color: var(--bg-light);
        }

        .vg-header {
            text-align: center;
            margin-bottom: 60px;
        }
        .vg-header .section-subtitle { justify-content: center; }
        .vg-header .section-subtitle::after { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }

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

        .video-card {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 15px 35px rgba(0,0,0,0.06);
            cursor: pointer;
            transition: all 0.4s ease;
            aspect-ratio: 16 / 9;
        }
        
        .video-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            border: 2px solid var(--accent-yellow);
        }

        /* Native Video element inside grid acting as poster */
        .video-card video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7);
            transition: filter 0.4s ease, transform 0.6s ease;
            pointer-events: none; /* Let the card handle the click */
        }
        
        .video-card:hover video {
            filter: brightness(0.4);
            transform: scale(1.05);
        }

        /* Play Button Overlay */
        .play-btn-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            background: rgba(246, 200, 81, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-heavy-dark);
            font-size: 24px;
            padding-left: 5px; /* Optically center play icon */
            z-index: 2;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 0 0 0 rgba(246, 200, 81, 0.5);
        }
        
        .video-card:hover .play-btn-overlay {
            background: var(--light-green);
            color: var(--white);
            transform: translate(-50%, -50%) scale(1.15);
            box-shadow: 0 0 0 15px rgba(58, 181, 74, 0.2);
        }

        /* Video Info Overlay */
        .video-info-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 40px 20px 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
            z-index: 2;
            transform: translateY(10px);
            opacity: 0.9;
            transition: all 0.4s ease;
        }
        
        .video-card:hover .video-info-overlay {
            transform: translateY(0);
            opacity: 1;
        }

        .video-info-overlay h4 {
            font-family: var(--font-main);
            color: var(--white);
            font-size: 18px;
            font-weight: 600;
            margin: 0 0 5px 0;
        }
        
        .video-info-overlay span {
            color: var(--accent-yellow);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* --- Custom Lightbox Player Modal --- */
        .custom-lightbox {
            position: fixed;
            inset: 0;
            background: rgba(10, 15, 12, 0.95);
            backdrop-filter: blur(10px);
            z-index: 3000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        
        .custom-lightbox.active {
            opacity: 1;
            pointer-events: all;
        }

        .lightbox-container {
            width: 100%;
            max-width: 1100px;
            padding: 0 20px;
            position: relative;
            transform: scale(0.95);
            transition: transform 0.4s ease;
        }
        
        .custom-lightbox.active .lightbox-container {
            transform: scale(1);
        }

        .lightbox-container video {
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
            background: #000;
            outline: none;
        }

        .close-lightbox {
            position: absolute;
            top: -50px;
            right: 20px;
            background: none;
            border: none;
            color: var(--white);
            font-size: 36px;
            cursor: pointer;
            transition: color 0.3s ease;
            outline: none;
        }
        
        .close-lightbox:hover {
            color: var(--accent-yellow);
        }

        @media screen and (max-width: 768px) {
            .video-grid { grid-template-columns: 1fr; }
            .close-lightbox { top: -45px; right: 0; }
        }

        /* --- DISTINCT LAYOUT: Academy Intro (Vision/Mission) --- */
        .academy-intro { padding: 100px 0; background-color: var(--white); }
        .academy-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
        
        .intro-text-area p { color: var(--text-gray); font-size: 16px; line-height: 1.8; margin-bottom: 25px; }
        .highlight-quote { padding: 25px; background: var(--bg-light); border-left: 4px solid var(--light-green); border-radius: 0 12px 12px 0; margin-bottom: 30px; color: var(--text-heavy-dark); font-weight: 500; font-size: 18px; }
        
        .intro-image-area { position: relative; width: 100%; }
        .intro-img { 
            width: 100%; height: 480px; object-fit: cover; 
            border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); 
            display: block; background-color: #f0f0f0; 
        }
        .certification-badge { position: absolute; bottom: -30px; left: -30px; background: var(--primary-green); color: var(--white); padding: 25px 30px; border-radius: 16px; box-shadow: 0 15px 30px rgba(11, 94, 40, 0.3); display: flex; align-items: center; gap: 20px; z-index: 10;}
        .certification-badge i { font-size: 40px; color: var(--accent-yellow); }
        .certification-badge div h4 { font-family: var(--font-title); font-size: 22px; margin-bottom: 5px; }
        .certification-badge div p { font-size: 13px; opacity: 0.9; margin: 0; }

        /* --- DISTINCT LAYOUT: Agricultural Curriculum Grid --- */
        .curriculum-section { padding: 100px 0; background-color: var(--bg-light); background-image: radial-gradient(#d5d5d5 1px, transparent 1px); background-size: 35px 35px;}
        .curriculum-header { text-align: center; margin-bottom: 60px; }
        .curriculum-header .section-subtitle { justify-content: center; }
        .curriculum-header .section-subtitle::after { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }

        .curriculum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        
        .course-card { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.04); transition: all 0.4s ease; border: 1px solid #eaeaea; display: flex; flex-direction: column;}
        .course-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,0,0,0.1); border-color: var(--light-green); }
        
        .course-content { padding: 40px 30px; flex-grow: 1; display: flex; flex-direction: column;}
        .course-icon { width: 60px; height: 60px; background: var(--bg-light); color: var(--primary-green); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 25px; transition: background 0.3s; }
        .course-card:hover .course-icon { background: var(--light-green); color: var(--white); }
        
        .course-content h3 { font-family: var(--font-title); font-size: 24px; color: var(--text-heavy-dark); margin-bottom: 12px; line-height: 1.3; }
        .course-content p { color: var(--text-gray); font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
        
        .course-features { margin-top: auto; border-top: 1px solid #f0f0f0; padding-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-dark); font-weight: 500; }
        .course-features span { display: flex; align-items: flex-start; gap: 10px;}
        .course-features span i { color: var(--accent-yellow); margin-top: 3px; }

        /* --- DISTINCT LAYOUT: Farmer Welfare & Community Support Grid --- */
        .welfare-section { padding: 100px 0; background-color: var(--white); }
        .welfare-header { text-align: center; margin-bottom: 60px; }
        .welfare-header .section-subtitle { justify-content: center; }
        .welfare-header .section-subtitle::after { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }

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

        .welfare-card {
            background: var(--bg-light);
            border-radius: 20px;
            padding: 40px 30px;
            border-top: 6px solid var(--light-green);
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            transition: all 0.4s ease;
        }
        .welfare-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            border-top-color: var(--accent-yellow);
        }

        .welfare-icon {
            width: 70px; height: 70px;
            background: var(--white);
            color: var(--primary-green);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 28px; margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .welfare-card h3 { font-family: var(--font-title); font-size: 24px; color: var(--text-heavy-dark); margin-bottom: 5px; line-height: 1.3;}
        .welfare-card .bilingual-text { color: var(--primary-green); font-size: 14px; font-weight: 600; font-style: italic; margin-bottom: 15px; display: block;}
        .welfare-card p { font-size: 14.5px; color: var(--text-gray); line-height: 1.6; margin-bottom: 25px; }

        .welfare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px;}
        .welfare-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--text-heavy-dark);}
        .welfare-list li i { color: var(--accent-yellow); font-size: 16px; width: 20px; text-align: center;}

        /* --- DISTINCT LAYOUT: Allied Fields & Heritage (Dark Theme) --- */
        .allied-fields-section {
            padding: 100px 0;
            background: linear-gradient(135deg, var(--text-heavy-dark) 0%, var(--primary-green) 100%);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }
        .allied-fields-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://croplifeindia.org/wp-content/uploads/2024/02/dark-icons.png'); background-size: 400px; opacity: 0.05; }
        
        .heritage-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; position: relative; z-index: 2;}
        
        .heritage-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px 30px; transition: transform 0.4s ease;}
        .heritage-card:hover { transform: translateY(-10px); background: rgba(255,255,255,0.1); }
        .heritage-card i { font-size: 36px; color: var(--accent-yellow); margin-bottom: 20px;}
        .heritage-card h3 { font-family: var(--font-title); font-size: 24px; margin-bottom: 15px;}
        .heritage-card p { font-size: 14.5px; line-height: 1.7; color: #d1dfd3; margin: 0;}

        /* --- Distinct CTA Section (Scholarships) --- */
        .scholarship-cta { padding: 80px 0; background-color: var(--accent-yellow); text-align: center; }
        .scholarship-cta h2 { font-family: var(--font-title); font-size: 38px; color: var(--text-heavy-dark); margin-bottom: 20px;}
        .scholarship-cta p { font-size: 16px; color: var(--text-dark); margin-bottom: 30px; font-weight: 500;}

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .academy-intro-grid { gap: 40px; }
            .curriculum-grid, .welfare-grid { grid-template-columns: repeat(2, 1fr); }
            .heritage-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media screen and (max-width: 991px) {
            .academy-intro-grid { grid-template-columns: 1fr; }
            .intro-img { height: 350px; } 
            .intro-image-area { margin-top: 40px; max-width: 600px; margin-left: auto; margin-right: auto;}
            .certification-badge { left: 0; bottom: -20px; width: 90%; }
        }
        @media screen and (max-width: 768px) {
            .curriculum-grid, .welfare-grid { grid-template-columns: 1fr; }
            .heritage-grid { grid-template-columns: 1fr; }
            .certification-badge { flex-direction: column; text-align: center; padding: 20px; }
        }

        /* --- DISTINCT LAYOUT: Board Executive Leadership (Chairman & Vice Chairs) --- */
        .executive-section {
            padding: 100px 0;
            background-color: var(--primary-green);
            background-image: url('https://croplifeindia.org/wp-content/uploads/2024/02/dark-icons.png');
            background-size: 500px;
            background-blend-mode: color-burn;
            color: var(--white);
            position: relative;
        }
        .executive-section::before {
            content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 94, 40, 0.95), rgba(26, 59, 37, 0.98)); z-index: 1;
        }
        .executive-container { position: relative; z-index: 2; }
        
        .executive-header { text-align: center; margin-bottom: 70px; }
        .executive-header .section-title { color: var(--white); }
        .executive-header .section-subtitle { color: var(--accent-yellow); }
        .executive-header .section-subtitle::before { background-color: var(--white); }

        .executive-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .exec-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .exec-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        
        /* Chairman Badge */
        .chairman-badge {
            position: absolute; top: 20px; right: -35px;
            background: var(--accent-yellow); color: var(--text-heavy-dark);
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
            padding: 6px 40px; transform: rotate(45deg);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .exec-img {
            width: 140px; height: 140px;
            border-radius: 50%;
            margin: 0 auto 25px;
            border: 4px solid rgba(255,255,255,0.2);
            overflow: hidden;
            position: relative;
        }
        .exec-img img { width: 100%; height: 100%; object-fit: cover; }
        
        .exec-info h3 { font-family: var(--font-title); font-size: 26px; margin-bottom: 8px; color: var(--white); }
        .exec-info .role { color: var(--accent-yellow); font-weight: 600; font-size: 14px; text-transform: uppercase; margin-bottom: 15px; display: block; letter-spacing: 1px;}
        .exec-info .company { font-size: 15px; color: #d1dfd3; line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px;}
        .exec-info .linkedin-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--white); margin-top: 20px; transition: all 0.3s; }
        .exec-card:hover .linkedin-btn { background: #0077b5; color: var(--white); }

        /* --- DISTINCT LAYOUT: Board Members & Associate Members Grid --- */
        .board-members-section {
            padding: 100px 0;
            background-color: var(--white);
        }
        
        .grid-header { text-align: center; margin-bottom: 60px; }

        .board-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 100px; /* Space between Board and Associates */
        }

        .director-card {
            background: var(--bg-light);
            border-radius: 16px;
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid transparent;
        }
        .director-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.06);
            border-color: rgba(58, 181, 74, 0.2);
        }

        .director-img {
            width: 100%;
            height: 260px;
            overflow: hidden;
            position: relative;
        }
        .director-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .director-card:hover .director-img img { transform: scale(1.08); }
        
        /* Gradient Overlay for bottom of image */
        .director-img::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
            background: linear-gradient(to top, rgba(241,245,241,1), transparent);
        }

        .director-info {
            padding: 0 25px 30px;
            position: relative;
            z-index: 2;
        }
        .director-info h4 { font-family: var(--font-title); font-size: 21px; color: var(--text-heavy-dark); margin-bottom: 5px; }
        .director-info .role { color: var(--primary-green); font-size: 13px; font-weight: 500; display: block; margin-bottom: 10px; }
        .director-info .company { color: var(--text-gray); font-size: 14px; font-weight: 600; display: block; }
        
        .social-links {
            margin-top: 20px;
            display: flex; justify-content: center; gap: 10px;
        }
        .social-links a {
            color: #b0b0b0; transition: color 0.3s;
        }
        .social-links a:hover { color: #0077b5; } /* LinkedIn Blue */

        /* Divider between sections */
        .section-divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, transparent, #e0e0e0, transparent);
            margin: 80px 0;
        }

        /* Responsive Styles */
        @media screen and (max-width: 1200px) {
            .executive-grid { gap: 20px; }
            .board-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media screen and (max-width: 991px) {
            .executive-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
            .board-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media screen and (max-width: 768px) {
            .board-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 40px; }
        }

        /* --- DISTINCT LAYOUT: Members Page Setup --- */
        .members-page-wrapper {
            background-color: var(--bg-light);
            /* Tech/Network styling: Subtle dot pattern */
            background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
            background-size: 30px 30px;
            padding-bottom: 100px;
        }

        .members-intro {
            padding: 100px 0 50px;
            text-align: center;
        }
        .members-intro .section-subtitle { justify-content: center; }
        .members-intro .section-subtitle::after { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }
        .intro-desc {
            max-width: 750px;
            margin: 0 auto;
            color: var(--text-gray);
            line-height: 1.7;
            font-size: 16px;
        }

        /* --- Member Grids --- */
        .members-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 80px;
        }
        
        .associate-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        /* --- Distinct Member Card Design --- */
        .member-card {
            background: var(--white);
            border-radius: 16px;
            padding: 35px 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            border-bottom: 4px solid var(--light-green);
            transition: all 0.4s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
            z-index: 2;
        }
        .member-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            border-color: var(--accent-yellow);
        }

        .member-icon {
            width: 65px; height: 65px;
            background: var(--bg-light);
            color: var(--primary-green);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 26px; margin-bottom: 25px;
            transition: all 0.4s ease;
        }
        .member-card:hover .member-icon {
            background: var(--primary-green);
            color: var(--white);
            transform: rotate(10deg);
        }

        .member-card h3 {
            font-family: var(--font-title);
            font-size: 22px;
            color: var(--text-heavy-dark);
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .member-card p {
            color: var(--text-gray);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 25px;
            flex-grow: 1; /* Pushes the link to the bottom */
        }

        .member-link {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--primary-green); font-weight: 600; font-size: 14px;
            transition: color 0.3s;
            text-transform: uppercase; letter-spacing: 1px;
        }
        .member-link:hover { color: var(--accent-yellow); }

        .section-divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, transparent, #c4c4c4, transparent);
            margin: 80px 0;
        }

        .group-title {
            text-align: center;
            font-family: var(--font-main);
            font-size: 28px;
            font-weight: 800;
            color: var(--text-heavy-dark);
            margin-bottom: 40px;
        }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .members-grid, .associate-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media screen and (max-width: 991px) {
            .intro-desc { font-size: 15px; }
        }
        @media screen and (max-width: 768px) {
            .members-grid, .associate-grid { grid-template-columns: 1fr; gap: 20px; }
        }

        /* --- DISTINCT LAYOUT: Bento Box / Asymmetric Grid --- */
        .bento-section {
            padding: 100px 0 120px;
            background-color: var(--bg-light);
            /* Subtle geometric background pattern */
            background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .bento-header {
            text-align: center;
            margin-bottom: 60px;
        }
        .bento-header .section-subtitle { justify-content: center; }
        .bento-header .section-subtitle::after { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }

        .bento-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 280px;
            gap: 20px;
        }

        .bento-card {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.06);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 35px;
            color: var(--white);
            text-decoration: none;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .bento-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }

        .bento-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover;
            z-index: 1;
            transition: transform 0.8s ease;
        }
        .bento-card:hover .bento-bg { transform: scale(1.08); }

        .bento-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(11, 94, 40, 0.85) 100%);
            z-index: 2;
            transition: background 0.4s ease;
        }
        .bento-card:hover .bento-overlay {
            background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(11, 94, 40, 0.95) 100%);
        }

        .bento-content {
            position: relative;
            z-index: 3;
            transform: translateY(30px);
            transition: transform 0.4s ease;
        }
        .bento-card:hover .bento-content {
            transform: translateY(0);
        }

        .bento-tag {
            display: inline-block;
            background: var(--accent-yellow);
            color: var(--text-heavy-dark);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease 0.1s;
        }
        .bento-card:hover .bento-tag { opacity: 1; transform: translateY(0); }

        .bento-content h3 {
            font-family: var(--font-title);
            font-size: 24px;
            line-height: 1.25;
            margin-bottom: 0;
            transition: margin-bottom 0.4s ease;
        }
        .bento-large .bento-content h3 { font-size: 32px; }
        
        .bento-card:hover .bento-content h3 { margin-bottom: 15px; }

        .bento-link {
            font-family: var(--font-main);
            font-size: 14px;
            font-weight: 600;
            color: var(--accent-yellow);
            display: inline-flex; align-items: center; gap: 8px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease 0.1s;
        }
        .bento-card:hover .bento-link { opacity: 1; transform: translateY(0); }
        .bento-link i { font-size: 12px; }

        /* Specific Layout Sizes */
        .bento-large { grid-column: span 2; grid-row: span 2; }
        .bento-wide { grid-column: span 2; grid-row: span 1; }
        .bento-tall { grid-column: span 1; grid-row: span 2; }
        .bento-small { grid-column: span 1; grid-row: span 1; }

        /* --- Custom Newsletter Block for this page --- */
        .trending-newsletter {
            background-color: var(--white);
            padding: 80px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.05);
            margin-top: 60px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid #eaeaea;
        }
        .tn-bg-icon {
            position: absolute; top: -20px; right: -20px;
            font-size: 200px; color: var(--bg-light); z-index: 1;
            transform: rotate(-15deg); pointer-events: none;
        }
        .tn-content { position: relative; z-index: 2; }
        .tn-content h3 { font-family: var(--font-title); font-size: 36px; color: var(--text-heavy-dark); margin-bottom: 15px; }
        .tn-content p { color: var(--text-gray); font-size: 16px; margin-bottom: 30px; }
        .tn-form {
            display: flex; max-width: 500px; margin: 0 auto;
            background: var(--bg-light); border-radius: 40px; padding: 5px;
            border: 1px solid #e0e0e0;
        }
        .tn-form input {
            flex-grow: 1; border: none; background: transparent;
            padding: 15px 25px; font-family: var(--font-main); font-size: 15px;
            outline: none; color: var(--text-dark);
        }
        .tn-form button {
            background: var(--primary-green); color: var(--white);
            border: none; padding: 0 35px; border-radius: 35px;
            font-family: var(--font-main); font-weight: 600; font-size: 15px;
            cursor: pointer; transition: background 0.3s;
        }
        .tn-form button:hover { background: var(--accent-yellow); color: var(--text-heavy-dark); }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .bento-grid { grid-template-columns: repeat(3, 1fr); }
            .bento-tall { grid-column: span 2; grid-row: span 1; } /* Adjust layout for medium screens */
            .bento-large { grid-column: span 3; }
        }
        @media screen and (max-width: 991px) {
            .bento-grid { grid-template-columns: repeat(2, 1fr); }
            .bento-large, .bento-wide, .bento-tall { grid-column: span 2; grid-row: span 1;}
            .bento-small { grid-column: span 1; }
        }
        @media screen and (max-width: 768px) {
            .bento-grid { grid-template-columns: 1fr; }
            .bento-large, .bento-wide, .bento-tall, .bento-small { grid-column: span 1; grid-row: span 1; }
            
            .trending-newsletter { padding: 40px 20px; }
            .tn-form { flex-direction: column; border-radius: 20px; background: transparent; border: none; gap: 15px;}
            .tn-form input { background: var(--bg-light); border-radius: 30px; padding: 18px 25px; border: 1px solid #e0e0e0;}
            .tn-form button { padding: 18px 35px; border-radius: 30px;}
        }

        /* --- DISTINCT LAYOUT: Registration Split Section --- */
        .registration-section {
            padding: 100px 0 120px;
            background-color: var(--bg-light);
            background-image: radial-gradient(#d5d5d5 1px, transparent 1px);
            background-size: 35px 35px;
            position: relative;
        }
        
        .reg-container {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
            align-items: start;
        }

        /* Left Side: Info & Benefits */
        .reg-info {
            padding-top: 20px;
        }
        .reg-info p {
            color: var(--text-gray);
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 30px;
        }
        
        .benefit-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
        .benefit-item { display: flex; align-items: flex-start; gap: 15px; }
        .benefit-icon { 
            width: 45px; height: 45px; flex-shrink: 0;
            background: var(--white); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--primary-green); font-size: 18px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        .benefit-text h4 { font-family: var(--font-main); font-size: 18px; color: var(--text-heavy-dark); margin-bottom: 5px; }
        .benefit-text p { font-size: 14px; color: #888; margin: 0; line-height: 1.5; }

        /* Right Side: The Form Card */
        .reg-form-card {
            background: var(--white);
            border-radius: 24px;
            padding: 50px 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.06);
            border-top: 6px solid var(--primary-green);
        }
        
        .form-header { margin-bottom: 30px; text-align: center; }
        .form-header h3 { font-family: var(--font-title); font-size: 28px; color: var(--text-heavy-dark); margin-bottom: 10px; }
        .form-header p { font-size: 14px; color: var(--text-gray); }

        /* Form Elements */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .form-group { margin-bottom: 20px; position: relative; }
        .form-group.full-width { grid-column: span 2; }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 8px;
        }
        
        .form-control {
            width: 100%;
            padding: 16px 20px;
            background: var(--bg-light);
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            font-family: var(--font-main);
            font-size: 15px;
            color: var(--text-dark);
            transition: all 0.3s ease;
            outline: none;
        }
        .form-control:focus {
            background: var(--white);
            border-color: var(--light-green);
            box-shadow: 0 0 0 4px rgba(58, 181, 74, 0.1);
        }
        textarea.form-control { height: 120px; resize: vertical; }

        /* Custom Select */
        select.form-control { appearance: none; cursor: pointer; }
        .select-wrapper { position: relative; }
        .select-wrapper::after {
            content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
            color: var(--text-gray); pointer-events: none;
        }

        /* Membership Duration Toggle */
        .duration-toggle {
            display: flex;
            background: var(--bg-light);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }
        .duration-toggle label {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-gray);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        .duration-toggle input[type="radio"] { display: none; }
        .duration-toggle label:hover { background: #f9f9f9; }
        
        /* Active Radio State */
        .duration-toggle input[type="radio"]:checked + label {
            background: var(--primary-green);
            color: var(--white);
        }

        /* Dynamic Fee Display */
        .fee-display-box {
            background: rgba(246, 200, 81, 0.15);
            border: 2px dashed var(--accent-yellow);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            margin-top: 30px;
            margin-bottom: 30px;
            transition: all 0.3s;
        }
        .fee-display-box p { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; }
        .fee-amount {
            font-family: var(--font-main);
            font-size: 36px;
            font-weight: 800;
            color: var(--primary-green);
        }

        /* Submit Button */
        .registration-section .btn-submit {
            width: 100%;
            background: var(--accent-yellow);
            color: var(--text-heavy-dark);
            padding: 18px;
            border: none;
            border-radius: 30px;
            font-family: var(--font-main);
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .registration-section .btn-submit:hover {
            background: var(--primary-green);
            color: var(--white);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }

        /* Responsive Styles */
        @media screen and (max-width: 1100px) {
            .reg-container { grid-template-columns: 1fr; gap: 50px; max-width: 700px; margin: 0 auto;}
            .reg-info { padding-top: 0; text-align: center; }
            .benefit-item { text-align: left; }
        }
        @media screen and (max-width: 768px) {
            .reg-form-card { padding: 35px 20px; }
            .form-row { grid-template-columns: 1fr; gap: 0; }
            .form-group.full-width { grid-column: span 1; }
            .duration-toggle { flex-direction: column; }
            .duration-toggle label { border-bottom: 1px solid #e0e0e0; }
            .duration-toggle label:last-child { border-bottom: none; }
        }

/* --- DISTINCT LAYOUT: Intro Section --- */
        .objectives-intro {
            padding: 100px 0 40px;
            background-color: var(--bg-light);
            text-align: center;
        }
        .intro-wrapper {
            max-width: 850px;
            margin: 0 auto;
        }
        .intro-wrapper .section-subtitle { justify-content: center; }
        .intro-wrapper .section-subtitle::after { content: ''; width: 30px; height: 2px; background-color: var(--accent-yellow); }
        .intro-wrapper p {
            font-size: 17px;
            color: var(--text-gray);
            line-height: 1.8;
            margin-top: 15px;
        }

        /* --- DISTINCT LAYOUT: Watermarked Numbered Grid --- */
        .objectives-grid-section {
            padding: 40px 0 120px;
            background-color: var(--bg-light);
            position: relative;
        }

        /* Connecting background lines for a "network" feel */
        .grid-bg-lines {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
            background-size: 100px 100px;
            pointer-events: none;
            z-index: 0;
        }

        .obj-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            position: relative;
            z-index: 2;
        }

        /* Make the 10th card span across to look balanced in a 3-column layout */
        .obj-card:nth-child(10) {
            grid-column: 2 / 3; /* Centers the final card */
        }

        .obj-card {
            background: var(--white);
            border-radius: 20px;
            padding: 50px 40px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.04);
            border: 1px solid #eaeaea;
            transition: all 0.4s ease;
            z-index: 1;
        }

        .obj-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.08);
            border-color: var(--accent-yellow);
        }

        /* Massive Watermark Number */
        .obj-number {
            position: absolute;
            top: -20px;
            right: 10px;
            font-family: var(--font-title);
            font-size: 140px;
            font-weight: 800;
            color: rgba(58, 181, 74, 0.05); /* Very faint green */
            line-height: 1;
            z-index: -1;
            transition: color 0.4s ease, transform 0.4s ease;
        }
        .obj-card:hover .obj-number {
            color: rgba(246, 200, 81, 0.15); /* Shifts to yellow on hover */
            transform: scale(1.1);
        }

        /* Card Content */
        .obj-icon {
            width: 60px; height: 60px;
            background: var(--bg-light);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: var(--primary-green);
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }
        .obj-card:hover .obj-icon {
            background: var(--primary-green);
            color: var(--white);
            border-radius: 50%;
        }

        .obj-card h3 {
            font-family: var(--font-main);
            font-size: 22px;
            font-weight: 700;
            color: var(--text-heavy-dark);
            margin-bottom: 15px;
            line-height: 1.3;
        }
        .obj-card p {
            color: var(--text-gray);
            font-size: 14.5px;
            line-height: 1.7;
            margin: 0;
        }

		@media screen and (max-width: 1100px) {
            .obj-grid { grid-template-columns: repeat(2, 1fr); }
            .obj-card:nth-child(10) { grid-column: span 2; max-width: 50%; margin: 0 auto; text-align: center;}
            .obj-card:nth-child(10) .obj-icon { margin-left: auto; margin-right: auto; }
        }
        @media screen and (max-width: 768px) {
            .obj-grid { grid-template-columns: 1fr; }
            .obj-card:nth-child(10) { grid-column: span 1; max-width: 100%; text-align: left;}
            .obj-card:nth-child(10) .obj-icon { margin-left: 0; margin-right: 0; }
            .obj-card { padding: 40px 30px; }
        }