/* ============================================================
   ZakaClean — Custom Styles
   ============================================================ */

/* ── Hero: Two-Word Animated Text Fix ─────────────────────── */

/*
 * Problem: stock-text h2 elements are `position:absolute` in style.css,
 * meaning they escape normal flow and stack at the nearest positioned
 * ancestor. With two words we need each .stock-text to BE that ancestor
 * (position:relative + defined height) so the two h2 copies
 * (outline + fill-animated) are contained per word.
 *
 * Problem 2: .hero-details has margin-left:125px and p has padding-top:132px
 * (designed for a single-line offset). With two stacked words both values
 * must be reset — the word blocks now provide their own height in flow.
 */

/* 1 — Make each word container a positioned box in normal flow */
.slider-area .hero__caption .zk-stock {
    position: relative !important;  /* contain absolutely-positioned h2 pair */
    display: block;
    height: 118px;                  /* matches 120px font-size × line-height 1 */
    overflow: visible;
}

/* Responsive heights to match font-size breakpoints in _h1-hero.scss */
@media (min-width: 1400px) {
    .slider-area .hero__caption .zk-stock { height: 105px; } /* big_screen: 102px */
}
@media (max-width: 1199px) {
    .slider-area .hero__caption .zk-stock { height: 114px; } /* lg: 110px */
}
@media (max-width: 991px) {
    .slider-area .hero__caption .zk-stock { height: 64px; }  /* md: 60px */
}
@media (max-width: 767px) {
    .slider-area .hero__caption .zk-stock { height: 56px; }  /* sm: 52px */
}
@media (max-width: 575px) {
    .slider-area .hero__caption .zk-stock { height: 44px; }  /* xs: 39px */
}

/* 2 — Offset the second word's fill animation by 2 s for a staggered effect */
.slider-area .hero__caption .zk-stock--secondary h2:nth-child(2) {
    -webkit-animation-delay: 2s !important;
    animation-delay: 2s !important;
}

/* 3 — Reset the original hard-coded offsets that were designed for one word */
.slider-area .hero__caption .hero-details {
    margin-left: 0 !important;
}

/*
 * The original p had padding-top:132px to push it below one absolutely-
 * positioned word. Now the two .zk-stock blocks ARE in the flow, so we
 * need only a small gap above the paragraph.
 */
.slider-area .hero__caption .hero-details > p {
    padding-top: 16px !important;
    margin-bottom: 28px;
}

/* ── Hero Buttons ──────────────────────────────────────────── */

/*
 * Problem: .hero__btn inherits no flex context so buttons wrap
 * unpredictably; the WhatsApp button gets .btn's border/padding
 * but the colour override was incomplete.
 */
.zk-hero-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Base shared reset for both hero buttons */
.zk-hero-btn .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;                   /* increased: 8px gap → 12px for optical breathing room */
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    text-transform: none !important;  /* kill uppercase from original .btn */
}

/* "Scopri i Servizi" — outlined white style */
.zk-hero-btn .zk-btn-outline {
    background: transparent;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.75);
}
.zk-hero-btn .zk-btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    transform: translateY(-2px);
}

/* "Prenota su WhatsApp" — solid green */
.zk-hero-btn .zk-btn-whatsapp {
    background: #25D366;
    color: #fff !important;
    border: 2px solid #25D366;
}
.zk-hero-btn .zk-btn-whatsapp:hover {
    background: #1ebe5d;
    border-color: #1ebe5d;
    transform: translateY(-2px);
}

/*
 * Icon fix:
 *   1. font-size: 20px with !important — beats inherited 14px and any FA override
 *   2. margin-right: 4px — belt-and-suspenders extra clearance beyond gap
 *   3. letter-spacing: 0 — icon glyph should never inherit letter-spacing; the
 *      0.5px kerning on a circular icon glyph shifts its visual right-edge
 *      into the first letter of the following word
 *   4. flex-shrink: 0 — prevents the icon from compressing under tight widths
 */
.zk-hero-btn .zk-btn-whatsapp i.fab {
    font-size: 20px !important;
    line-height: 1;
    letter-spacing: 0 !important;
    margin-right: 4px;
    flex-shrink: 0;
    display: inline-block;
    left: 0;
}

@media (max-width: 575px) {
    .zk-hero-btn {
        flex-direction: column;
        align-items: flex-start;
    }
    .zk-hero-btn .btn { width: 100%; justify-content: center; }
}

/* ── Pricing Cards ─────────────────────────────────────────── */

/*
 * Improvements:
 *  - border-radius + elevated shadow
 *  - tighter, proportional padding
 *  - smooth hover lift
 *  - feature list uses flex rows with icon
 *  - featured card has accent top-border + badge
 */
/* Equal-height cards: make each Bootstrap col a flex container so cards stretch */
.pricing-card-area .row {
    align-items: stretch;
}
.pricing-card-area .row > [class*="col"] {
    display: flex;
    flex-direction: column;
}

.pricing-card-area .single-card {
    border-radius: 12px !important;
    border: 1px solid #e8e8f0 !important;
    padding: 0 !important;           /* reset the 70px 0 padding; use inner blocks */
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    background: #fff !important;
    display: flex;
    flex-direction: column;
    overflow: visible;
    height: 100%;                    /* fill the flex column to match tallest card */
}

.pricing-card-area .single-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
}

/* Top section */
.pricing-card-area .single-card .card-top {
    padding: 32px 28px 20px !important;
    border-bottom: none;
}

.pricing-card-area .single-card .card-top img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 12px !important;
}

.pricing-card-area .single-card .card-top h4 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #1a1a2e;
}

.pricing-card-area .single-card .card-top p {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Mid section — price + duration */
.pricing-card-area .single-card .card-mid {
    padding: 16px 28px !important;
    background: #f8f9fb;
    border-top: 1px solid #f0f0f5;
    border-bottom: 1px solid #f0f0f5 !important;
    margin-bottom: 0 !important;
}

.pricing-card-area .single-card .card-mid h4 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #007AFF !important;
    margin-bottom: 0 !important;
    line-height: 1.1;
}

/* Bottom section — features + CTA */
.pricing-card-area .single-card .card-bottom {
    padding: 20px 28px 28px !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pricing-card-area .single-card .card-bottom ul {
    flex: 1;
    margin-bottom: 24px;
}

.pricing-card-area .single-card .card-bottom ul li {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    color: #555 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 5px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #f5f5f5;
    line-height: 1.5;
}

.pricing-card-area .single-card .card-bottom ul li:last-child {
    border-bottom: none;
    margin-bottom: 0 !important;
}

/* CTA button */
.pricing-card-area .single-card .card-bottom .borders-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    text-transform: none !important;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    width: 100%;
}

.pricing-card-area .single-card:hover .card-bottom .borders-btn {
    transform: translateY(-1px);
}

/* Check icon inside feature list */
.zk-check {
    color: #25D366;
    font-size: 11px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Level badge */
.zk-level-badge {
    display: inline-block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}

/* Card subtitle */
.zk-subtitle {
    font-size: 12px;
    color: #aaa;
    font-style: italic;
    margin-top: 2px;
    margin-bottom: 0;
}

/* Duration under price */
.zk-duration {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.zk-duration i { margin-right: 4px; }

/* Featured card */
.zk-card-featured {
    border-color: #25D366 !important;
    border-width: 2px !important;
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(37,211,102,0.18) !important;
    position: relative;
}

.zk-card-featured:hover {
    transform: translateY(-14px) !important;
}

.zk-card-featured::before {
    content: "Più Richiesto";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #25D366;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 1;
}

/* ── Extra Services Section ────────────────────────────────── */
.zk-extras-area { background: #f8f9fb; }

.zk-extra-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 28px 24px;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    transition: box-shadow 0.2s, transform 0.2s;
}

.zk-extra-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.zk-extra-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.zk-extra-header i {
    font-size: 20px;
    color: #25D366;
    width: 40px;
    height: 40px;
    background: #f0faf0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zk-extra-header h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #1a1a2e;
}

.zk-extra-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zk-extra-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.zk-extra-list li:last-child { border-bottom: none; }

.zk-extra-name {
    font-size: 13px;
    color: #444;
    font-weight: 500;
    grid-column: 1;
    grid-row: 1;
}

.zk-extra-price {
    font-size: 14px;
    font-weight: 700;
    color: #007AFF;
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
}

.zk-extra-list li small {
    font-size: 11px;
    color: #bbb;
    grid-column: 1 / -1;
    grid-row: 2;
    font-style: italic;
}

/* ── Footer CTA Banner ─────────────────────────────────────── */
.zk-footer-cta {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.zk-footer-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(37,211,102,0.08);
    border-radius: 50%;
    pointer-events: none;
}

.zk-footer-cta .zk-cta-badge {
    display: inline-block;
    background: #25D366;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.zk-footer-cta h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.zk-footer-cta p {
    color: rgba(255,255,255,0.65);
    margin: 0;
    font-size: 14px;
}

.zk-wa-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: #fff !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}

.zk-wa-cta-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(37,211,102,0.4);
}

.zk-wa-cta-btn i { font-size: 20px; }

/* ── Footer Main ───────────────────────────────────────────── */
.zk-footer { font-family: inherit; }

.zk-footer-wrapper {
    background-color: #080c12;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Dark overlay over bg image */
.zk-footer-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(6,9,18,0.96);
    pointer-events: none;
    z-index: 0;
}

/* Ambient glow — large soft green orb upper-right */
.zk-footer-wrapper::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -180px;
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(37,211,102,0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Thin gradient top accent line */
.zk-footer-main::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(37,211,102,0.5) 30%, rgba(11,198,255,0.4) 60%, transparent 100%);
    margin-bottom: 64px;
}

.zk-footer-main {
    position: relative;
    z-index: 2;
    padding: 0 0 50px;
}

/* Vertical column separators on xl */
@media (min-width: 1200px) {
    .zk-footer-main .col-xl-4 {
        padding-right: 48px;
        border-right: 1px solid rgba(255,255,255,0.05);
    }
    .zk-footer-main .col-xl-2,
    .zk-footer-main .col-xl-3:not(:last-child) {
        padding-left: 36px;
        padding-right: 36px;
        border-right: 1px solid rgba(255,255,255,0.05);
    }
    .zk-footer-main .col-xl-3:last-child {
        padding-left: 36px;
    }
}

/* ─ Logo ─ */
.zk-footer-logo { display: inline-block; }

/* ─ Brand tagline ─ */
.zk-footer-tagline {
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    line-height: 1.75;
    margin: 14px 0 0;
    max-width: 280px;
}

/* ─ Contact rows ─ */
.zk-footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.zk-footer-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    font-size: 13px;
    transition: color 0.2s;
    padding: 6px 0;
}

.zk-footer-contact-row:hover { color: #25D366 !important; }

.zk-fc-icon {
    width: 36px;
    height: 36px;
    background: rgba(37,211,102,0.08);
    border: 1px solid rgba(37,211,102,0.15);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    color: #25D366;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.zk-footer-contact-row:hover .zk-fc-icon {
    background: rgba(37,211,102,0.18);
    border-color: rgba(37,211,102,0.4);
    box-shadow: 0 0 12px rgba(37,211,102,0.2);
}

/* ─ Section headings ─ */
.zk-footer-heading {
    position: relative;
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Gradient underline accent */
.zk-footer-heading::after {
    content: '';
    display: block;
    margin-top: 8px;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #25D366, #0BC6FF);
    border-radius: 2px;
}

/* ─ Hours list ─ */
.zk-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zk-footer-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.zk-footer-list li:last-child { border-bottom: none; }

.zk-footer-day { color: rgba(255,255,255,0.45); }

.zk-footer-time {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 12px;
    text-align: right;
}

.zk-footer-time.zk-closed {
    color: #e74c3c;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.zk-footer-h24-note {
    font-size: 11px !important;
    color: #25D366 !important;
    justify-content: flex-start !important;
    gap: 6px;
    border-bottom: none !important;
    padding-top: 12px !important;
    letter-spacing: 0.3px;
}
.zk-footer-h24-note i {
    font-size: 10px;
    color: #25D366 !important;
    -webkit-text-fill-color: #25D366 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* ─ Nav / Service links ─ */
.zk-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zk-footer-links li a {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.035);
}

.zk-footer-links li:last-child a { border-bottom: none; }

/* Arrow pip */
.zk-footer-links li a::before {
    content: '›';
    font-size: 15px;
    color: #25D366;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s, transform 0.18s;
    flex-shrink: 0;
}

.zk-footer-links li a:hover {
    color: #fff;
    padding-left: 4px;
}

.zk-footer-links li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ─ Social icons ─ */
.zk-footer-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.zk-footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.zk-footer-social a i,
.zk-footer-social a i::before {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

.zk-footer-social a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.zk-social-facebook  { background: #1877F2; }
.zk-social-whatsapp  { background: #25D366; }

/* ── Footer Bottom ─────────────────────────────────────────── */
.zk-footer-bottom {
    position: relative;
    z-index: 2;
    padding: 20px 0;
}

/* Gradient top divider */
.zk-footer-bottom::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent 100%);
    margin-bottom: 20px;
}

.zk-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.zk-footer-copy {
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    margin: 0;
}

.zk-footer-copy strong { color: rgba(255,255,255,0.6); }

.zk-footer-vat {
    color: rgba(255,255,255,0.2);
    font-size: 11px;
    margin: 0;
    letter-spacing: 0.3px;
}

/* ── Inner Page Hero (about, services, contact, blog…) ────── */

/*
 * The inner-page banner uses .slider-area2 + .slider-height2 + .hero-overly.
 * We scope every rule to .zk-inner-hero so nothing bleeds into the
 * homepage hero (.slider-area).
 *
 * Improvements over the raw template:
 *   - Directional overlay (heavier at bottom, lighter at top) for depth
 *   - Space Grotesk 800 with gradient text matching brand palette
 *   - Tight tracking (-2px) at display size
 *   - Breadcrumb nav for orientation
 *   - Green→cyan accent underline bar
 */

/* Overlay — uniform dark, slightly heavier at bottom */
.zk-inner-hero .hero-overly::before {
    background: linear-gradient(
        175deg,
        rgba(5, 8, 22, 0.55) 0%,
        rgba(5, 8, 22, 0.82) 100%
    ) !important;
}

/* Increase banner height slightly for visual impact */
.zk-inner-hero .slider-height2 {
    min-height: 300px;
    height: 300px;
}

/* Caption container */
.zk-inner-caption {
    position: relative;
}

/* Breadcrumb */
.zk-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    list-style: none;
    padding: 0;
}

.zk-breadcrumb a {
    color: rgba(255, 255, 255, 0.48);
    text-decoration: none;
    transition: color 0.2s;
}

.zk-breadcrumb a:hover { color: #25D366; }

.zk-bc-sep {
    color: rgba(255, 255, 255, 0.22);
    font-size: 8px;       /* small chevron */
    line-height: 1;
}

.zk-bc-current {
    color: rgba(255, 255, 255, 0.85);
}

/*
 * Page title h1:
 *   - Space Grotesk 800 (loaded in head.html — already imported for homepage h1)
 *   - Gradient: white → light mint, same brand pattern as homepage
 *   - letter-spacing -2px at 64px looks tight and premium; at smaller
 *     breakpoints we back it off so glyphs don't touch
 */
.zk-inner-caption h1 {
    font-family: 'Space Grotesk', 'Work Sans', sans-serif !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    text-transform: none !important;
    /* gradient text */
    background: linear-gradient(110deg, #ffffff 0%, #ffffff 55%, #9df5c4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Accent underline — green fading to brand blue */
.zk-inner-accent-bar {
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, #25D366 0%, #0BC6FF 100%);
    border-radius: 3px;
    margin-top: 18px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1199px) {
    .zk-inner-caption h1 { font-size: 54px !important; }
}

@media (max-width: 991px) {
    .zk-inner-hero .slider-height2 { min-height: 240px; height: 240px; }
    .zk-inner-caption h1 {
        font-size: 44px !important;
        letter-spacing: -1px !important;
    }
}

@media (max-width: 767px) {
    .zk-inner-hero .slider-height2 { min-height: 200px; height: 200px; }
    .zk-inner-caption h1 {
        font-size: 34px !important;
        letter-spacing: -0.5px !important;
    }
    .zk-inner-accent-bar { margin-top: 12px; }
}

@media (max-width: 575px) {
    .zk-inner-hero .slider-height2 { min-height: 170px; height: 170px; }
    .zk-inner-caption h1 {
        font-size: 28px !important;
        letter-spacing: 0 !important;
    }
    .zk-breadcrumb { margin-bottom: 10px; }
    .zk-inner-accent-bar { width: 32px; height: 3px; }
}

/* ── Contact Page ──────────────────────────────────────────── */
.zk-contact-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 36px 24px;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.zk-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.zk-contact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4CAF50, #25D366);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 24px;
    color: #fff;
}

/* Force icon glyph visibility — overrides any inherited -webkit-text-fill-color
   from the template's gradient-text animations (stock-text, blog_area etc.) */
.zk-contact-icon i,
.zk-contact-icon i::before {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

.zk-fc-icon i,
.zk-fc-icon i::before {
    color: #25D366 !important;
    -webkit-text-fill-color: #25D366 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

.zk-contact-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a2e;
}

.zk-contact-card p a {
    color: #444;
    text-decoration: none;
}

.zk-contact-sub { font-size: 12px; color: #aaa; }

.zk-form-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 40px;
}

/* ── About page ────────────────────────────────────────────── */
.zk-about-content p {
    margin-bottom: 16px;
    color: #555;
    line-height: 1.8;
}

/* ── Spacing helpers ───────────────────────────────────────── */
.mt-20 { margin-top: 20px; }
.mt-60 { margin-top: 60px; }
.mb-60 { margin-bottom: 60px; }
.mb-40 { margin-bottom: 40px; }
.mb-30 { margin-bottom: 30px !important; }
.mb-25 { margin-bottom: 25px; }
.mt-25 { margin-top: 25px; }

/* ── Active nav item ──────────────────────────────────────────
 * Hugo adds class="active" to the current page's menu link.
 * The template's style.css has no rule for this state, so we add one.
 * Using brand green + a subtle underline to distinguish from hover (blue).
 * ─────────────────────────────────────────────────────────────── */
.main-header .main-menu ul li > a.active {
    color: #25D366 !important;
    position: relative;
}

.main-header .main-menu ul li > a.active::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 23px;
    right: 23px;
    height: 2px;
    background: #25D366;
    border-radius: 2px;
}

/* ── Accessibility ─────────────────────────────────────────── */
.skip-link.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Logo Sizing ───────────────────────────────────────────────
 *
 * New logos are high-res (1259×400 for wordmark, 406×400 for icon).
 * We constrain them purely via CSS — no image resizing needed.
 *
 * Header  : white/light bg → show as-is, cap height so it fits the bar
 * Footer  : near-black bg  → invert to white silhouette via CSS filter
 * Preloader: near-square icon inside 100×100 spinner ring
 * ─────────────────────────────────────────────────────────────── */

/* ─ Header logo ─ */
.header-area .logo img {
    max-height: 42px;
    width: auto;
    display: block;
}

@media (max-width: 1199px) {
    .header-area .logo img { max-height: 38px; }
}

@media (max-width: 991px) {
    .header-area .logo img { max-height: 34px; }
}

/* ─ Footer logo ─
 * brightness(0)   → collapse every pixel to black
 * invert(1)       → flip black → white
 * Result: crisp white wordmark + icon, no white background box on dark footer
 */
.zk-footer-logo img {
    max-height: 44px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.92;
    transition: opacity 0.2s;
}

.zk-footer-logo:hover img { opacity: 1; }

/* ─ Preloader icon ─
 * Template constrains to max-width:55px; we bump to 64px to better fill
 * the 100×100 spinner ring. height:auto preserves the ~1:1 aspect ratio.
 */
.preloader .preloader-img img {
    max-width: 64px !important;
    width: 64px !important;
    height: auto !important;
}

.skip-link.sr-only:focus {
    position: fixed;
    top: 10px; left: 10px;
    width: auto; height: auto;
    padding: 8px 16px;
    clip: auto;
    background: #25D366;
    color: #fff;
    z-index: 9999;
    border-radius: 4px;
}