/* ===========================
   Reset & Base
=========================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6; color: #333; overflow-x: hidden;
}

.container { max-width:1200px; margin:0 auto; padding:0 20px; }

section h2 {
    text-align:center; font-size:36px; color:#1b5e20;
    position:relative; padding-bottom:16px; margin-bottom:12px;
}
section h2::after {
    content:''; position:absolute; bottom:0; left:50%;
    transform:translateX(-50%); width:60px; height:4px;
    background:#43a047; border-radius:2px;
}
.section-subtitle { text-align:center; color:#777; font-size:17px; margin-bottom:45px; }

/* ===========================
   Header
=========================== */
header {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    color:#fff; padding:15px 0;
    box-shadow:0 2px 10px rgba(0,0,0,0.2);
    position:sticky; top:0; z-index:1000;
}
header .container { display:flex; justify-content:space-between; align-items:center; }
header h1 { font-size:24px; font-weight:700; }
header h1::after { display:none; }

nav { display:flex; gap:4px; align-items:center; }
nav > a {
    color:#fff; text-decoration:none; font-weight:500;
    padding:8px 14px; border-radius:5px; transition:all 0.3s; font-size:15px;
}
nav > a:hover, nav > a.active { background:rgba(255,255,255,0.2); color:#a5d6a7; }

.dropdown { position:relative; display:inline-block; }
.dropbtn {
    color:#fff; text-decoration:none; font-weight:500;
    padding:8px 14px; border-radius:5px; cursor:pointer;
    display:inline-block; transition:all 0.3s; font-size:15px;
}
.dropdown:hover .dropbtn, .dropbtn.active { background:rgba(255,255,255,0.2); color:#a5d6a7; }
.dropdown-content {
    display:none; position:absolute; top:calc(100% + 8px); left:0;
    background:white; min-width:250px; border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2); overflow:hidden; z-index:2000;
}
.dropdown.open .dropdown-content { display:block; animation:fadeSlide 0.25s ease; }
.dropdown-content a {
    display:block; padding:11px 20px; color:#333; text-decoration:none;
    font-weight:500; font-size:14px; border-bottom:1px solid #f0f0f0; transition:all 0.25s;
}
.dropdown-content a:last-child { border-bottom:none; }
.dropdown-content a:hover { background:linear-gradient(135deg,#2e7d32,#43a047); color:white; padding-left:28px; }
@keyframes fadeSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ===================================================
   MOSAIC CARD STACK BANNER
=================================================== */
.mosaic-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Ambient glow bg */
.mosaic-banner::before {
    content:'';
    position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 20% 60%, rgba(46,125,50,0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 30%, rgba(67,160,71,0.15) 0%, transparent 50%);
    z-index:0; pointer-events:none;
}

/* ---------- Card Stack (left 52%) ---------- */
.mcard-stack {
    position: relative;
    width: 52%;
    height: 100%;
    flex-shrink: 0;
}

/* Image background directly on the card */
.mcard {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 480px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* default hidden state */
    opacity: 0;
    transform: translate(-50%,-50%) translateX(100px) rotate(15deg) scale(0.75);
    transition: transform 0.75s cubic-bezier(0.34,1.3,0.64,1),
                opacity 0.6s ease,
                box-shadow 0.4s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    z-index: 0;
}

/* Remove mcard-face — image is now on .mcard directly */
.mcard-face {
    display: none;
}

/* Shine */
.mcard-shine {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 55%);
    pointer-events: none;
}

/* Bottom gradient on each card */
.mcard::after {
    content: '';
    position: absolute; bottom:0; left:0; right:0; height:40%;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    pointer-events: none;
}

/* ACTIVE card — front & center */
.mcard.active {
    opacity: 1;
    z-index: 5;
    transform: translate(-50%,-50%) translateX(-20px) rotate(-3deg) scale(1);
    box-shadow: 0 40px 90px rgba(0,0,0,0.7);
}
.mcard.active .mcard-face { transform: scale(1.06); }

/* Behind cards — fanned out to the right */
.mcard.stack-1 {
    opacity: 0.75; z-index:4;
    transform: translate(-50%,-50%) translateX(28px) translateY(12px) rotate(3deg) scale(0.93);
}
.mcard.stack-2 {
    opacity: 0.5; z-index:3;
    transform: translate(-50%,-50%) translateX(56px) translateY(24px) rotate(7deg) scale(0.86);
}
.mcard.stack-3 {
    opacity: 0.3; z-index:2;
    transform: translate(-50%,-50%) translateX(80px) translateY(34px) rotate(11deg) scale(0.79);
}
.mcard.stack-4 {
    opacity: 0.15; z-index:1;
    transform: translate(-50%,-50%) translateX(100px) translateY(42px) rotate(14deg) scale(0.73);
}

/* Exit — fly off left */
.mcard.exit-left {
    opacity: 0 !important;
    transform: translate(-50%,-50%) translateX(-200%) rotate(-25deg) scale(0.6) !important;
    transition: transform 0.65s cubic-bezier(0.55,0,1,0.45), opacity 0.45s ease !important;
}

/* ---------- Right Content Panel (right 48%) ---------- */
.mbanner-content {
    position: relative;
    z-index: 10;
    width: 48%;
    padding: 0 60px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.mbanner-tag {
    display: inline-block;
    background: rgba(67,160,71,0.2);
    border: 1px solid rgba(67,160,71,0.6);
    color: #81c784;
    font-size: 11px; font-weight:700;
    letter-spacing: 3px; text-transform:uppercase;
    padding: 7px 18px; border-radius:30px;
    margin-bottom: 22px; width:fit-content;
}

.mbanner-title {
    font-size: 66px; font-weight:900;
    color: white; line-height:1.05;
    margin-bottom: 20px;
}
.mbanner-title::after { display:none; }
.mbanner-title span { color:#66bb6a; display:block; }

.mbanner-desc {
    font-size: 17px;
    color: rgba(64, 197, 47, 0.75);
    line-height: 1.85;
    margin-bottom: 36px;
    max-width: 420px;
}

.mbanner-btns {
    display: flex; gap:14px; flex-wrap:wrap;
    margin-bottom: 44px;
}

/* Banner buttons */
.mbtn {
    padding:14px 32px; border-radius:6px;
    font-size:15px; font-weight:700;
    text-decoration:none; display:inline-block;
    transition:all 0.3s; cursor:pointer; border:none;
}
.mbtn-fill {
    background:#43a047; color:white;
    box-shadow:0 6px 22px rgba(67,160,71,0.45);
}
.mbtn-fill:hover { background:#388e3c; transform:translateY(-3px); box-shadow:0 10px 28px rgba(67,160,71,0.55); }
.mbtn-ghost {
    background:transparent; color:white;
    border:2px solid rgba(255,255,255,0.45);
}
.mbtn-ghost:hover { border-color:#43a047; background:rgba(255,255,255,0.1); transform:translateY(-3px); }

/* Number pill nav */
.mpills { display:flex; gap:10px; }
.mpill {
    width:42px; height:42px; border-radius:50%;
    border:2px solid rgba(15, 255, 6, 0.2);
    background:transparent; color:rgba(9, 255, 0, 0.45);
    font-size:12px; font-weight:700; cursor:pointer;
    transition:all 0.3s;
    display:flex; align-items:center; justify-content:center;
}
.mpill:hover { border-color:#43a047; color:#43a047; }
.mpill.active { background:#43a047; border-color:#43a047; color:white; transform:scale(1.15); }

/* ---------- Prev / Next Arrows ---------- */
.marrow {
    position:absolute; bottom:38px; z-index:10;
    width:50px; height:50px; border-radius:50%;
    border:2px solid #43a047;
    background:rgba(255,255,255,0.07);
    color:#43a047; font-size:20px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s; backdrop-filter:blur(6px);
}
.marrow:hover { background:#43a047; border-color:#43a047; transform:scale(1.1); }
.marrow-prev { left:calc(52% - 120px); }
.marrow-next { left:calc(52% - 62px); }

/* ---------- SVG Progress Ring ---------- */
.mprogress-ring {
    position:absolute; bottom:30px;
    left:calc(52% + 4px);
    width:58px; height:58px; z-index:10;
    transform:rotate(-90deg);
}
.mprogress-track { fill:none; stroke:rgba(255,255,255,0.1); stroke-width:3; }
.mprogress-fill  {
    fill:none; stroke:#43a047; stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:150.8;
    stroke-dashoffset:150.8;
}

/* ===========================
   Page Buttons
=========================== */
.btn {
    padding:13px 30px; border-radius:6px; font-weight:600;
    font-size:15px; text-decoration:none; display:inline-block;
    cursor:pointer; transition:all 0.3s; border:none;
}
.btn-primary { background:#43a047; color:rgb(59, 199, 24); box-shadow:0 4px 14px rgba(67,160,71,0.4); }
.btn-primary:hover { background:#388e3c; transform:translateY(-2px); box-shadow:0 8px 20px rgba(67,160,71,0.5); }

/* ===========================
   About Section
=========================== */
.about-section { padding:80px 20px; background:#f8f9fa; }
.about-section h2 { margin-bottom:40px; }
.about-content { display:flex; flex-direction:column; gap:40px; }
.about-text { max-width:850px; margin:0 auto; font-size:17px; line-height:1.8; color:#555; text-align:center; }
.about-text p { margin-bottom:18px; }
.about-highlights { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
.highlight-item {
    background:white; padding:30px 25px; border-radius:12px;
    text-align:center; box-shadow:0 4px 15px rgba(0,0,0,0.07);
    transition:transform 0.3s; border-top:4px solid #43a047;
}
.highlight-item:hover { transform:translateY(-6px); }
.highlight-icon { font-size:46px; margin-bottom:14px; }
.highlight-item h3 { font-size:20px; margin-bottom:10px; color:#1b5e20; }
.highlight-item h3::after { display:none; }
.highlight-item p { color:#666; font-size:15px; }

/* ===========================
   Products Section
=========================== */
.services-section { padding:80px 20px; background:white; }
.services-section h2 { margin-bottom:12px; }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:25px; }
.service-card {
    background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%);
    padding:30px 25px; border-radius:12px; text-align:center;
    transition:all 0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.07);
    border-bottom:3px solid #43a047;
}
.service-card:hover { transform:translateY(-8px); box-shadow:0 12px 30px rgba(0,0,0,0.15); }
.service-icon { font-size:50px; margin-bottom:16px; }
.service-card h3 { font-size:19px; margin-bottom:10px; color:#1b5e20; }
.service-card h3::after { display:none; }
.service-card p { color:#555; line-height:1.7; font-size:14px; }

/* ===========================
   Gallery Section
=========================== */
.gallery-section { padding:80px 20px; background:#f8f9fa; }
.gallery-section h2 { margin-bottom:12px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:40px; }
.gallery-item {
    position:relative; overflow:hidden; border-radius:12px;
    box-shadow:0 4px 15px rgba(0,0,0,0.1); aspect-ratio:4/3; cursor:pointer;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(27,94,32,0.8),rgba(67,160,71,0.8));
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay span { color:white; font-size:18px; font-weight:700; letter-spacing:3px; text-transform:uppercase; }
.gallery-btn-wrap { text-align:center; margin-top:10px; }

/* ===========================
   FAQ Section
=========================== */
.faq-section { padding:80px 20px; background:white; }
.faq-section h2 { margin-bottom:50px; }
.faq-container { max-width:860px; margin:0 auto; }
.faq-item {
    background:#f8f9fa; margin-bottom:12px; border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06); overflow:hidden;
    border-left:4px solid #43a047;
}
.faq-question {
    padding:18px 25px; cursor:pointer;
    display:flex; justify-content:space-between; align-items:center;
    transition:background 0.3s; user-select:none;
}
.faq-question:hover { background:#e8f5e9; }
.faq-question h3 { font-size:16px; color:#2c3e50; font-weight:600; }
.faq-question h3::after { display:none; }
.faq-toggle { font-size:22px; color:#43a047; font-weight:bold; transition:transform 0.3s; flex-shrink:0; margin-left:15px; }
.faq-item.active .faq-toggle { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease; background:white; }
.faq-item.active .faq-answer { max-height:500px; }
.faq-answer p { padding:16px 25px 20px; color:#555; line-height:1.8; font-size:15px; }

/* ===========================
   Footer
=========================== */
footer { background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%); color:white; padding:55px 20px 0; }
.footer-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; margin-bottom:40px; }
.footer-col h3 { font-size:17px; margin-bottom:18px; color:#a5d6a7; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:10px; }
.footer-col h3::after { display:none; }
.footer-col p { line-height:1.8; opacity:0.9; font-size:14px; margin-bottom:8px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { color:white; text-decoration:none; opacity:0.85; font-size:14px; transition:all 0.3s; }
.footer-col ul li a:hover { opacity:1; color:#a5d6a7; padding-left:5px; }
.footer-bottom { text-align:center; padding:20px 0; border-top:1px solid rgba(255,255,255,0.12); font-size:14px; opacity:0.85; }

/* ===========================
   Contact
=========================== */
.contact-section { padding:70px 20px; background:#f8f9fa; }
.contact-section h2 { margin-bottom:40px; }
.contact-wrapper { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:35px; max-width:1000px; margin:0 auto; }
.contact-info, .contact-form { background:white; padding:35px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.08); }
.contact-info h3, .contact-form h3 { font-size:22px; margin-bottom:20px; color:#1b5e20; }
.contact-info h3::after, .contact-form h3::after { display:none; }
.contact-info p { line-height:1.8; color:#555; margin-bottom:12px; font-size:15px; }
.contact-form form { display:flex; flex-direction:column; gap:14px; }
.contact-form input, .contact-form textarea { padding:12px 15px; border:1px solid #ddd; border-radius:6px; font-size:15px; font-family:inherit; transition:border 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:#43a047; }
.contact-form button { padding:13px 30px; background:linear-gradient(135deg,#2e7d32,#43a047); color:white; border:none; border-radius:6px; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.3s; }
.contact-form button:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(67,160,71,0.4); }

/* ===========================
   Responsive
=========================== */
@media (max-width:1024px) {
    .mbanner-title { font-size:50px; }
    .mcard { width:320px; height:400px; }
}
@media (max-width:768px) {
    header .container { flex-direction:column; gap:12px; text-align:center; }
    nav { flex-wrap:wrap; justify-content:center; }
    .mosaic-banner { flex-direction:column; height:auto; min-height:100vh; padding-top:30px; }
    .mcard-stack { width:100%; height:360px; }
    .mcard { width:250px; height:300px; }
    .mbanner-content { width:100%; padding:30px 24px 90px; }
    .mbanner-title { font-size:38px; }
    .marrow-prev { left:24px; }
    .marrow-next { left:84px; }
    .mprogress-ring { left:150px; bottom:28px; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
    .mbanner-title { font-size:30px; }
    .mbanner-btns { flex-direction:column; gap:10px; }
    .services-grid { grid-template-columns:1fr; }
    .footer-content { grid-template-columns:1fr; }
    .gallery-grid { grid-template-columns:1fr; }
    .about-highlights { grid-template-columns:1fr; }
}