:root{ --brand:#2e7d32; --ink:#172b1a; --muted:#536a58; --bg:#f5faf6; --ring:#dcefe0; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1060px;margin:0 auto;padding:18px}

/* Header / nav */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--ring);z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{height:28px;width:auto;display:block}
.brand-text{font-weight:800;color:var(--brand)}
.nav-link{padding:8px 10px;margin:0 4px;border-radius:10px;color:#234029;text-decoration:none}
.nav-link:hover{background:#eef7f0}
.nav-link.active{background:#e8f6ea;border:1px solid var(--ring)}
@media (max-width:520px){ .brand-text{display:none} }

/* Typography */
h1,h2,h3{margin:10px 0 8px}
h2{font-size:28px}
.muted{color:var(--muted)}

/* Hero */
.hero{
    display:grid; gap:18px; grid-template-columns:1.1fr .9fr; align-items:center;
    background:linear-gradient(135deg,#e8f5e9 0%, #f3faf4 60%);
    border:1px solid var(--ring); border-radius:18px; padding:22px;
}
.hero .cta{display:flex;gap:10px;margin-top:12px}
.btn{display:inline-block;margin-top:20px;padding:10px 14px;border-radius:12px;border:1px solid var(--ring);background:#fff;color:#16381c;text-decoration:none}
.btn:hover{background:#f4faf5}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{filter:brightness(.95)}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.card{background:#fff;border:1px solid var(--ring);border-radius:14px;padding:14px;transition:transform .12s, box-shadow .12s}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.08)}

/* Chips */
.chip-grid{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;background:#fff;border:1px solid var(--ring);border-radius:50px;margin-right:4px;padding:8px 12px;font-size:14px}
.chip:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.06)}

/* Tabs (Services) */
.tabs{margin-top:18px}
.tab-list{display:flex;gap:8px;border-bottom:1px solid var(--ring);padding-bottom:6px}
.tab{background:#fff;border:1px solid var(--ring);border-bottom:none;border-radius:12px 12px 0 0;padding:8px 14px;cursor:pointer}
.tab:hover{background:#f1f8f2}
.tab.active{background:#e9f6eb;color:var(--brand)}
.tab-panel{background:#fff;border:1px solid var(--ring);border-top:none;border-radius:0 12px 12px 12px;padding:16px}
.tab-panel[hidden]{display:none}

/* About counters */
.about-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.stat{background:#fff;border:1px solid var(--ring);border-radius:14px;padding:12px;text-align:center}
.stat span{display:block;font-size:28px;font-weight:800;color:var(--brand)}
.stat small{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--ring);background:#fff;margin-top:18px}
.site-footer p{margin:0}

@media (max-width:880px){ .hero{grid-template-columns:1fr} .about-stats{grid-template-columns:repeat(2,1fr)} }


/* Feature rows (image + copy) */
.feature{
    display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:18px;
    background:#fff; border:1px solid var(--ring); border-radius:18px; padding:20px; margin-bottom:18px;
}
.feature--reverse{ grid-template-columns:.9fr 1.1fr; }
.feature--reverse .feature-copy{ order:2 } .feature--reverse .feature-img{ order:1 }

.feature-copy h3{ margin:8px 0 6px }
.feature-copy p{ color:#2b3f2d; margin:8px 0 12px }
.feature-img img{ width:100%; height:auto; display:block; border-radius:12px }

.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn.primary:hover{ filter:brightness(.95) }

@media (max-width: 900px){
    .feature, .feature--reverse{ grid-template-columns:1fr }
    .feature--reverse .feature-copy, .feature--reverse .feature-img{ order:unset }
}



/* Home: mini feature cards with same-size images */
.cards.mini-cards .mini-card{
    display:grid;
    grid-template-columns: 1fr 160px;   /* text | image */
    gap:12px; align-items:center;
}

.mini-copy h3{ margin:0 0 6px }
.mini-copy p{ margin:0; color:#2b3f2d }

.mini-img{
    width:160px; height:110px;               /* <-- সব কার্ডে একই সাইজ */
    border:1px solid var(--ring);
    border-radius:12px;
    background:#f6fbf7;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.mini-img img{
    max-width:100%; max-height:100%;
    object-fit:contain; display:block;
}

/* hover polish */
.mini-card:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.08) }

/* responsive */
@media (max-width: 880px){
    .cards.mini-cards .mini-card{ grid-template-columns:1fr }
    .mini-img{ width:100%; height:140px }
}

/* Split hero (Premier Partner) */
.split-card{
    display:grid;
    grid-template-columns: 1.05fr .95fr;   /* text | image */
    gap:18px; align-items:center;
    margin-bottom:16px;
}
.split-copy p{ color:#2b3f2d; margin:8px 0 0 }
.split-img{
    background:#f6fbf7; border:1px solid var(--ring); border-radius:16px;
    display:flex; align-items:center; justify-content:center; padding:10px;
}
.split-img img{ width:100%; height:auto; display:block; border-radius:12px }

/* responsive */
@media (max-width: 980px){
    .split-card{ grid-template-columns: 1fr }
}
/* --- Header: green bar with white chips --- */
.header-green{
    position: sticky; top: 0; z-index: 10;
    background: var(--brand);
    /* subtle sheen so it feels premium */
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,0));
    border-bottom: none;
}

/* Layout */
.header-green .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block: 10px;
}

/* Brand chip (white sub-background) */
.header-green .brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
    background:#fff; color:var(--brand);
    border:1px solid #e6f4ea;
    border-radius:16px; padding:8px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.header-green .brand:hover{
    background:#f0fbf2; border-color:#cfead4; transform: translateY(-1px);
}
.header-green .brand-logo{ height:38px; width:auto; display:block; }   /* bigger logo */
.header-green .brand-text{ font-weight:800; font-size:18px; color:var(--brand); }

/* Nav chips */
.header-green nav{ display:flex; gap:8px; flex-wrap:wrap }
.header-green .nav-link{
    display:inline-block;
    background:#fff; color:var(--brand);
    border:1px solid #e6f4ea;
    border-radius:999px;
    padding:8px 14px;
    text-decoration:none;
    font-weight:600;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.header-green .nav-link:hover{
    background:#e9f6eb; color:#145c2a; border-color:#cfead4; transform: translateY(-1px);
}

/* Active page looks different */
.header-green .nav-link.active,
.header-green .nav-link[aria-current="page"]{
    background:#dff3e3; color:#0b3d1a;
    border-color:#bfe0c5;
    box-shadow: 0 0 0 2px rgba(255,255,255,.7) inset, 0 8px 24px rgba(0,0,0,.08);
    position: relative;
}
.header-green .nav-link.active::after,
.header-green .nav-link[aria-current="page"]::after{
    content:"";
    position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
    width:22px; height:3px; border-radius:2px; background:#ffffffaa;   /* small bar under active */
}

/* Small screens: keep it tidy */
@media (max-width: 560px){
    .header-green .brand-text{ display:none; } /* logo-only on very small widths */
    .header-green .brand{ padding:8px 10px }
    .header-green .brand-logo{ height:34px }
}

/* === Floating green leaves background === */
:root{
    /* tweakable */
    --leaf-color: hsla(83, 88%, 46%, 0.18);   /* hue≈90° = olive-ish, soft */
    --leaf-shine: rgba(42, 255, 24, 0.45);
}

#bgLeaves{
    position: fixed; inset: 0;
    pointer-events: none;                 /* clicks pass through */
    z-index: 0;                           /* behind everything */
    overflow: hidden;
}

/* Every page content sits above the fx */
.header-green, main, .site-footer{ position: relative; z-index: 1; }

/* A single leaf */
#bgLeaves .leaf{
    position: absolute;
    width: var(--size,16px);
    height: calc(var(--size,16px) * .7);
    background:
            radial-gradient(60% 60% at 35% 35%, var(--leaf-shine), transparent 60%),
            var(--leaf-color);
    border-radius: 60% 60% 60% 60% / 70% 70% 30% 30%;
    box-shadow: 0 2px 6px rgba(46,125,50,.10);
    opacity: .9;

    /* motion defaults (paused by default) */
    animation: leaf-rise var(--dur, 10s) linear infinite;
    animation-play-state: paused;
    will-change: transform, opacity;
}

/* Run only when body has .fx-on (load/scroll/move) */
body.fx-on #bgLeaves .leaf{ animation-play-state: running; }

@keyframes leaf-rise{
    0%{
        transform: translate3d(var(--x, 0vw), calc(100vh + 40px), 0)
        rotate(var(--rot, 0deg));
        opacity: 0;
    }
    10%{ opacity: .75; }
    100%{
        transform: translate3d(
                calc(var(--x, 0vw) + var(--drift, 0px)),
                -50px, 0)
        rotate(calc(var(--rot, 0deg) + 60deg));
        opacity: 0;
    }
}

/* smoother, a little slower */
#bgLeaves .leaf{ transition: opacity 1.05s cubic-bezier(.22,.7,.2,1); }

/* Respect OS reduced motion */
@media (prefers-reduced-motion: reduce){
    #bgLeaves{ display:none; }
}






/* Header load-in (slower) */
.site-header { transition: transform 1s ease, opacity 1s ease; }
body:not(.loaded) .site-header { transform: translateY(-14px); opacity: 0; }

/* Slide in/out (robust timing) */
.slide{
    opacity: 0;
    will-change: transform, opacity;
    transition:
            transform 1.05s cubic-bezier(.22,.7,.2,1),
            opacity  1.05s cubic-bezier(.22,.7,.2,1);
}
.from-left  { transform: translateX(-36px); }
.from-right { transform: translateX( 36px); }
.slide.in   { transform: translateX(0); opacity: 1; }

/* exit to its own side */
.slide.out-left  { transform: translateX(-36px); opacity: 0; }
.slide.out-right { transform: translateX( 36px); opacity: 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    .slide,.site-header{ transition: none !important; }
}