/* ============================================================
   Landscapes.co.ke — Shared Stylesheet
   Fonts   : Montserrat (headings) + Open Sans (body)
   Palette : brand-green #15803d | brand-light #dcfce7
             brand-dark  #052e16 | brand-accent #a36629
   ============================================================ */

/* ---------- Mobile nav menu ---------- */
#mobile-menu {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
#mobile-menu.open {
    max-height: 400px;
}

/* ---------- Service card icon hover ---------- */
.service-card:hover .icon-box {
    background-color: #15803d;
    color: white;
    transform: scale(1.1);
}

/* ---------- Hero — home (parallax) ---------- */
.hero-home {
    background-color: #052e16;
    background-image: linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)),
                      url('hero.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---------- Page-hero base (inner pages) ---------- */
.page-hero {
    background-color: #052e16;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-hero-about    { background-image: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('hero_about.jpeg'); }
.page-hero-services { background-image: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('garden.jpeg'); }
.page-hero-projects { background-image: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('hero.jpeg'); }
.page-hero-contact  { background-image: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('modern_garden.jpeg'); }

/* ---------- Gallery image zoom ---------- */
.img-zoom { overflow: hidden; }
.img-zoom img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.img-zoom:hover img { transform: scale(1.10); }

/* ---------- Lightbox ---------- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.93);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.lightbox.open { display: flex; }

/* ---------- Projects filter buttons ---------- */
.filter-btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.filter-btn.active { background-color: #15803d; color: white; border-color: #15803d; }

/* ---------- WhatsApp floating button ---------- */
.wa-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: #22c55e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.wa-float:hover { background: #16a34a; transform: scale(1.08); }

/* ---------- Scroll-reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.15s; }
.reveal-d2 { transition-delay: 0.30s; }
.reveal-d3 { transition-delay: 0.45s; }