/* ============================================================
   FULL PROJECT RESPONSIVE STYLESHEET
   Loaded AFTER style.css — overrides existing media queries.

   Target breakpoints:
   - Desktop large : 1920×1080  (min-width: 1600px)
   - Laptop        : 1366×768   (1101px – 1440px)
   - Tablet land.  : 1024×768   (901px  – 1100px)
   - Tablet port.  : 768×1024   (481px  – 900px)
   - Mobile        : 375×667    (max-width: 480px)
   ============================================================ */


/* ============================================================
   GLOBAL — navbar must always span full viewport width.
   (Prevents .container max-width caps from breaking the nav.)
   ============================================================ */
.navbar .container {
    max-width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* ============================================================
   GLOBAL — events page: ensure page-header layout never wraps
   weirdly when title and breadcrumb overflow at small widths.
   ============================================================ */
.page-header .container {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}
.page-header h1 {
    min-width: 0 !important;
    word-break: break-word !important;
}
.page-header .breadcrumb {
    flex-shrink: 0 !important;
}

/* ============================================================
   EVENTS PAGE — enforce grid + image height (cache-proof)
   ============================================================ */
/* Section padding — extra top space so "Upcoming Events" badge
   has breathing room below the compact page-header */
.events-listing-section { padding: 70px 0 50px !important; }

/* Always grid, always 3 cols on desktop, image ALWAYS clipped */
.events-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px !important;
}
.event-list-card {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(15,23,42,0.08) !important;
    position: relative !important;
}
.event-list-img {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    display: block !important;
}
.event-list-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.event-list-info { padding: 18px !important; }

/* ============================================================
   HOMEPAGE event slider — "Tickets & Details" CTA pinned to
   TOP-RIGHT corner of the active card's info panel.
   ============================================================ */
.event-card-info { position: relative !important; padding-right: 20px !important; }
/* DESKTOP/TABLET ONLY — homepage event-card-info panel scaled down ~50%.
   Image and badge keep their original sizes. */
@media (min-width: 601px) {
    .event-card-info {
        margin: -25px 80px 0 !important;
        padding: 10px 12px 9px !important;
        border-radius: 10px !important;
    }
    .event-card-info h3 {
        max-width: 60% !important;
        padding-right: 0 !important;
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        min-height: calc(0.88rem * 1.3 * 2) !important;
        word-break: break-word !important;
    }
    .event-card-info .event-price {
        font-size: 0.72rem !important;
        margin: 0 0 8px !important;
    }
    .event-card-info .event-meta {
        gap: 5px !important;
        margin: 0 !important;
        padding-top: 7px !important;
    }
    .event-card-info .event-meta-item {
        font-size: 0.72rem !important;
        gap: 6px !important;
    }
    .event-card-info .event-meta-item i {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
    }
}

.event-card-info .btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    align-self: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(220,38,38,0.22) !important;
    text-transform: none !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    z-index: 4 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.event-card-info .btn:hover {
    background: #b91c1c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(220,38,38,0.38) !important;
}
.event-card.active .event-card-info .btn { opacity: 1 !important; visibility: visible !important; }

/* ============================================================
   HOMEPAGE EVENT SLIDER — polished mobile/tablet design
   Single card per view · floating date badge · clean info area
   · full-width CTA · minimalist swipe arrows
   ============================================================ */
@media (max-width: 1024px) {
    /* Carousel wrap — clip overflow so only active card shows */
    .events-section .events-carousel-wrap {
        padding: 4px 0 8px !important;
        overflow: hidden !important;
    }
    .events-section .events-carousel { gap: 14px !important; }

    /* ≤2 events: JS adds .events-single and hides arrows.
       Stack the cards vertically so both fit on mobile. */
    .events-section .events-carousel-wrap.events-single { overflow: visible !important; }
    .events-section .events-carousel-wrap.events-single .events-carousel {
        flex-direction: column !important;
        gap: 18px !important;
        transform: none !important;
    }

    /* Each card: full white surface, one per viewport, soft elevation */
    body .events-section .event-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Image — top of card, preserves poster top via object-position */
    body .events-section .event-card-img {
        position: relative !important;
        width: 100% !important;
        height: 240px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
    body .events-section .event-card-img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }

    /* Floating date badge — polished glass chip, top-left */
    body .events-section .event-date-badge {
        top: 12px !important;
        left: 12px !important;
        width: 54px !important;
        border-radius: 10px !important;
        padding: 0 !important;
        background: rgba(255,255,255,0.96) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.20) !important;
        border: 1px solid rgba(255,255,255,0.7) !important;
        overflow: hidden !important;
    }
    body .events-section .event-date-badge .event-day {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        padding: 7px 0 3px !important;
        display: block !important;
        color: #0f172a !important;
    }
    body .events-section .event-date-badge .event-month {
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        padding: 4px 0 6px !important;
        background: var(--primary) !important;
        color: #ffffff !important;
        display: block !important;
    }

    /* Info area — clean block below image (no overlap, no extra shadow) */
    body .events-section .event-card-info,
    body .events-section .event-card.active .event-card-info {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 12px 14px 14px !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        max-width: none !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Price — pill chip above title for instant scan */
    body .events-section .event-card-info .event-price {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: var(--primary) !important;
        background: rgba(220,38,38,0.08) !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        align-self: flex-start !important;
        margin: 0 0 6px !important;
        letter-spacing: 0.2px !important;
        order: 1 !important;
    }

    /* Title — bold, 2-line clamp */
    body .events-section .event-card-info h3 {
        font-size: 0.98rem !important;
        line-height: 1.3 !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        max-width: 100% !important;
        min-height: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        order: 2 !important;
    }

    /* Meta list — divider line above, icons in soft red circles */
    body .events-section .event-card-info .event-meta {
        gap: 4px !important;
        margin: 0 0 8px !important;
        padding-top: 6px !important;
        border-top: 1px solid #f1f5f9 !important;
        display: flex !important;
        flex-direction: column !important;
        order: 3 !important;
    }
    body .events-section .event-card-info .event-meta-item {
        font-size: 0.76rem !important;
        gap: 8px !important;
        color: #475569 !important;
        font-weight: 500 !important;
        align-items: center !important;
        display: flex !important;
    }
    body .events-section .event-card-info .event-meta-item i {
        width: 22px !important;
        height: 22px !important;
        font-size: 0.65rem !important;
        background: rgba(220,38,38,0.08) !important;
        color: var(--primary) !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* CTA — full-width, prominent, properly rounded */
    body .events-section .event-card-info .btn {
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin: 2px 0 0 !important;
        padding: 9px 16px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        align-self: stretch !important;
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        border-radius: 8px !important;
        text-transform: none !important;
        letter-spacing: 0.2px !important;
        background: var(--primary) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(220,38,38,0.25) !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        line-height: 1 !important;
        order: 4 !important;
    }
    body .events-section .event-card-info .btn:hover,
    body .events-section .event-card-info .btn:active {
        background: #b91c1c !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 18px rgba(220,38,38,0.36) !important;
    }

    /* Arrows — red pills floating over image only */
    .events-section .events-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.82rem !important;
        background: var(--primary) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(220,38,38,0.35) !important;
        top: 120px !important;
        transform: translateY(-50%) !important;
    }
    .events-section .events-arrow:hover {
        background: #b91c1c !important;
        transform: translateY(-50%) scale(1.05) !important;
        box-shadow: 0 6px 18px rgba(220,38,38,0.45) !important;
    }
    .events-section .events-arrow-left  { left: 10px !important; }
    .events-section .events-arrow-right { right: 10px !important; }
}

/* Mobile ≤480 — slightly tighter image, smaller badge */
@media (max-width: 480px) {
    body .events-section .event-card-img { height: 200px !important; }
    .events-section .events-arrow {
        top: 100px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.76rem !important;
    }
    body .events-section .event-card-info { padding: 10px 12px 12px !important; }
    body .events-section .event-card-info h3 { font-size: 0.92rem !important; margin-bottom: 6px !important; }
    body .events-section .event-card-info .event-meta { margin-bottom: 6px !important; padding-top: 6px !important; }
    body .events-section .event-card-info .btn { padding: 8px 14px !important; font-size: 0.78rem !important; }
    body .events-section .event-date-badge {
        top: 8px !important;
        left: 8px !important;
        width: 44px !important;
    }
    body .events-section .event-date-badge .event-day { font-size: 0.95rem !important; padding: 5px 0 2px !important; }
    body .events-section .event-date-badge .event-month { font-size: 0.5rem !important; padding: 2px 0 4px !important; }
}

/* Tablet landscape — 2 cols */
@media (max-width: 1100px) {
    .events-listing-section { padding: 56px 0 40px !important; }
    .events-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .event-list-img { height: 200px !important; }
}

/* Tablet portrait + mobile — 1 col, slightly taller image */
@media (max-width: 768px) {
    .events-listing-section { padding: 28px 0 20px !important; }
    .events-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .event-list-img { height: 220px !important; }
    .event-list-info { padding: 14px !important; }
    .event-list-info h3 { font-size: 1rem !important; line-height: 1.35 !important; }
}

@media (max-width: 480px) {
    .events-listing-section { padding: 20px 0 14px !important; }
    .event-list-img { height: 180px !important; }
    .event-list-info { padding: 12px !important; }
    .event-list-info h3 { font-size: 0.95rem !important; margin-bottom: 5px !important; }
    .event-list-info .event-price { font-size: 0.85rem !important; margin-bottom: 8px !important; }
    .event-list-info .event-meta { gap: 6px !important; flex-wrap: wrap !important; }
    .event-meta-item { font-size: 0.78rem !important; }
}

/* ============================================================
   GLOBAL — calc range slider with dynamic teal fill
   --fill-pct is set by main.js as the user drags / value changes.
   Works on ALL screen sizes (desktop / tablet / mobile).
   ============================================================ */
/* ============================================================
   CUSTOM SLIDER — built by main.js. Native range input is kept
   inside .range-slider but is fully transparent; visual track,
   fill, and thumb are independent DOM elements.
   ============================================================ */
.range-slider {
    position: relative;
    width: 100%;
    height: 22px;
    margin-top: 10px;
}
/* Track background — always full width, behind everything */
.range-slider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    background: #e5e7eb;
    border-radius: 6px;
    transform: translateY(-50%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
/* Fill — left:0, width = exact value-percentage */
.range-slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 8px;
    width: 0;
    background: linear-gradient(90deg, #0d9488 0%, #5eead4 100%);
    border-radius: 6px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: width 0.05s linear;
}
/* Thumb — left = exact value-percentage, centered via transform */
.range-slider-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #0d9488;
    transform: translate(-50%, -50%);   /* centre on (left, top) */
    box-shadow: 0 0 10px rgba(13,148,136,0.30), 0 0 0 3px rgba(13,148,136,0.08);
    pointer-events: none;
    transition: transform 0.15s ease;
    z-index: 2;
}
.range-slider:hover .range-slider-thumb,
.range-slider:active .range-slider-thumb {
    transform: translate(-50%, -50%) scale(1.1);
}
/* Native input — invisible but covers the whole wrapper, so it still
   handles mouse / touch / keyboard / accessibility. */
.range-slider-native {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 3 !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
.range-slider-native::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: transparent;
    cursor: pointer;
    border: none;
}
.range-slider-native::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: transparent;
    cursor: pointer;
    border: none;
}
.range-slider-native::-moz-range-track { background: transparent; border: none; }


/* ============================================================
   1) DESKTOP LARGE — 1920×1080
   ============================================================ */
@media (min-width: 1600px) {
    /* Page content container only — NOT navbar (handled above) */
    .section > .container,
    .page-header .container,
    .footer .container { max-width: 1440px !important; padding-left: 32px !important; padding-right: 32px !important; }

    .navbar .container { padding-left: 48px !important; padding-right: 48px !important; }

    /* Headings */
    h1 { font-size: 3.6rem !important; }
    h2 { font-size: 2.6rem !important; }
    h3 { font-size: 1.6rem !important; }

    /* Sections */
    .section { padding: 110px 0 !important; }
    .section-header h2 { font-size: 2.6rem !important; }
    .section-header p  { font-size: 1.1rem !important; }

    /* Page header */
    .page-header { padding: 18px 0 12px !important; }
    .page-header h1 { font-size: 1.7rem !important; }

    /* Navbar links — keep gap reasonable so Login fits */
    .nav-links a { font-size: 0.95rem !important; padding: 22px 14px !important; }
    .nav-cta { gap: 12px !important; margin-left: 12px !important; }
    .nav-cta .btn-primary { padding: 11px 22px !important; font-size: 0.82rem !important; }

    /* Hero slider */
    .hero-slider { min-height: 640px !important; }
    .hero-content h1 { font-size: 3.8rem !important; line-height: 1.15 !important; }
    .hero-content p  { font-size: 1.2rem !important; max-width: 620px !important; }

    /* About hero */
    .about-hero { gap: 80px !important; }
    .big-num { font-size: 16rem !important; }
    .big-num-text span { font-size: 1rem !important; letter-spacing: 4px !important; }
    .about-clients-slider { max-width: 720px !important; }
    .about-client-photo img { width: 300px !important; height: 360px !important; }
    .about-hero-img img { height: 520px !important; }

    /* Grids — give cards more breathing room */
    .why-list, .services-grid, .plans-grid { gap: 32px !important; }
    .calc-grid { gap: 28px !important; }

    /* Footer */
    .footer-grid { gap: 60px !important; }
    .footer-about p { font-size: 0.98rem !important; }

    /* Buttons */
    .btn { font-size: 1rem !important; padding: 14px 30px !important; }
}


/* ============================================================
   2) LAPTOP — 1366×768  (covers 1101px–1440px)
   ============================================================ */
@media (min-width: 1101px) and (max-width: 1440px) {
    /* Content containers — keep navbar full-width */
    .section > .container,
    .page-header .container,
    .footer .container { max-width: 1200px !important; padding-left: 24px !important; padding-right: 24px !important; }

    .navbar .container { padding-left: 32px !important; padding-right: 32px !important; }

    h1 { font-size: 2.8rem !important; }
    h2 { font-size: 2.1rem !important; }

    .section { padding: 35px 0 !important; }
    .section-header h2 { font-size: 2.1rem !important; }

    .page-header { padding: 14px 0 10px !important; }
    .page-header h1 { font-size: 1.4rem !important; }

    /* Navbar — tighter spacing so Login fits at 1366px */
    .nav-links a { font-size: 0.88rem !important; padding: 22px 12px !important; }
    .nav-cta { gap: 10px !important; margin-left: 10px !important; }
    .nav-cta .btn-primary { padding: 10px 20px !important; font-size: 0.78rem !important; }
    .navbar-logo .logo-text { font-size: 1.15rem !important; }
    .navbar-logo .logo-img { height: 48px !important; }

    /* Hero */
    .hero-slider { min-height: 520px !important; }
    .hero-content h1 { font-size: 2.8rem !important; }
    .hero-content p  { font-size: 1.05rem !important; }

    /* About hero */
    .about-hero { gap: 50px !important; }
    .big-num { font-size: 11rem !important; letter-spacing: -6px !important; }
    .big-num-text span { font-size: 0.78rem !important; letter-spacing: 2.5px !important; }
    .about-clients-slider { max-width: 560px !important; }
    .about-client-photo img { width: 230px !important; height: 275px !important; }
    .about-hero-img img { height: 380px !important; }

    /* Grids */
    .why-list, .services-grid, .plans-grid { gap: 24px !important; }
    .calc-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
    .events-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Footer */
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; gap: 40px !important; }
}


/* ============================================================
   3) TABLET LANDSCAPE — 1024×768  (901px–1100px)
   ============================================================ */
@media (min-width: 901px) and (max-width: 1100px) {
    /* Content containers — navbar full-width preserved */
    .section > .container,
    .page-header .container,
    .footer .container { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; }

    .navbar .container { padding-left: 24px !important; padding-right: 24px !important; }

    h1 { font-size: 2.4rem !important; }
    h2 { font-size: 1.85rem !important; }

    .section { padding: 64px 0 !important; }
    .section-header h2 { font-size: 1.85rem !important; }

    .page-header { padding: 12px 0 8px !important; }
    .page-header h1 { font-size: 1.25rem !important; }

    /* Hero */
    .hero-slider { min-height: 460px !important; }
    .hero-content h1 { font-size: 2.4rem !important; }
    .hero-content p  { font-size: 1rem !important; }

    /* About hero — stays 2 col but tighter */
    .about-hero { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
    .big-num { font-size: 9rem !important; letter-spacing: -4px !important; }
    .big-num-text span { font-size: 0.7rem !important; letter-spacing: 2px !important; }
    .about-clients-slider { max-width: 480px !important; }
    .about-client-photo img { width: 200px !important; height: 240px !important; }
    .about-hero-img img { height: 320px !important; }

    /* Grids */
    .why-list { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    .services-grid, .plans-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
    .calc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    .events-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
    .lead-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
    .contact-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

    /* Sticky card */
    .sticky-card { padding: 24px !important; }
    .sticky-card-content h3 { font-size: 1.3rem !important; }

    /* Footer */
    .footer-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 28px !important; }
    .footer-about p { font-size: 0.9rem !important; }
}


/* ============================================================
   4) TABLET PORTRAIT — 768×1024  (481px–900px)
   Hamburger menu kicks in at 1100px — handled separately.
   ============================================================ */
@media (min-width: 481px) and (max-width: 900px) {
    .container { padding-left: 20px !important; padding-right: 20px !important; }

    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.65rem !important; }
    h3 { font-size: 1.2rem !important; }

    .section { padding: 22px 0 !important; }
    .section-header { margin-bottom: 14px !important; }
    .section-header h2 { font-size: 1.65rem !important; }
    .section-header p  { font-size: 0.95rem !important; }

    .page-header { padding: 8px 0 6px !important; }
    .page-header h1 { font-size: 1.15rem !important; }
    .breadcrumb { font-size: 0.85rem !important; }

    /* Hero slider */
    .hero-slider { min-height: 340px !important; }
    .hero-content { text-align: center !important; padding: 0 16px !important; }
    .hero-content h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    .hero-content p  { font-size: 0.95rem !important; max-width: 100% !important; }
    .hero-cta { justify-content: center !important; flex-wrap: wrap !important; gap: 12px !important; }

    /* About hero — single column, centered */
    .about-hero { grid-template-columns: 1fr !important; gap: 22px !important; }
    .about-hero-left { text-align: center !important; align-items: center !important; }
    .about-hero-left .about-label { display: block !important; width: 100% !important; text-align: center !important; }
    .about-big-number { justify-content: center !important; align-items: center !important; gap: 8px !important; }
    .big-num { font-size: 9.5rem !important; letter-spacing: -4px !important; line-height: 0.85 !important; }
    .big-num-text span { font-size: 0.72rem !important; letter-spacing: 2px !important; }
    .about-label { font-size: 0.85rem !important; letter-spacing: 3px !important; }
    .about-clients-block { align-items: center !important; width: 100% !important; }
    .about-clients-info { text-align: center !important; align-items: center !important; }
    .about-clients-slider { margin: 0 auto !important; max-width: 600px !important; }
    .about-client-photo img { width: 220px !important; height: 265px !important; }
    .about-client-name { font-size: 0.88rem !important; max-width: 220px !important; }
    .about-description { font-size: 1rem !important; line-height: 1.75 !important; text-align: center !important; }
    .about-cta-link { display: inline-flex !important; justify-content: center !important; }
    .about-hero-right { text-align: center !important; }
    .about-hero-img img { height: 320px !important; }

    /* Grids — 2 col except where 1 col makes more sense */
    .why-list { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .services-grid, .plans-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .calc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .events-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
    .lead-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .contact-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

    /* Event details */
    .event-detail-grid { display: block !important; }
    .event-detail-main, .event-detail-sticky { width: 100% !important; max-width: 100% !important; }
    .sticky-card { position: static !important; margin-top: 16px !important; }

    /* Calculator page */
    .calc-page-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .calc-inputs, .calc-result { width: 100% !important; }

    /* Contact */
    .contact-info-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

    /* Stats / Ribbon */
    .stat-item { padding: 12px !important; }
    .stat-value { font-size: 1.6rem !important; }

    /* Footer — 2/2 layout */
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
    .footer-about { grid-column: 1 / -1 !important; }
    .footer-grid h4 { font-size: 1rem !important; }
    .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }

    /* Buttons — touch friendly */
    .btn { padding: 12px 22px !important; font-size: 0.92rem !important; min-height: 44px !important; }

    /* Forms */
    .form-row { grid-template-columns: 1fr !important; gap: 14px !important; }
    input, textarea, select { font-size: 16px !important; /* prevent iOS zoom */ }
}


/* ============================================================
   5) MOBILE — 375×667  (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .container { padding-left: 16px !important; padding-right: 16px !important; }

    h1 { font-size: 1.65rem !important; line-height: 1.25 !important; }
    h2 { font-size: 1.4rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.1rem !important; }
    h4 { font-size: 1rem !important; }
    p  { font-size: 0.92rem !important; line-height: 1.65 !important; }

    .section { padding: 16px 0 !important; }
    .section-header { margin-bottom: 10px !important; }
    .section-header h2 { font-size: 1.4rem !important; }
    .section-header p  { font-size: 0.88rem !important; }

    .page-header { padding: 6px 0 4px !important; }
    .page-header h1 { font-size: 1rem !important; }
    .breadcrumb { font-size: 0.78rem !important; }

    /* Hero slider */
    .hero-slider { min-height: 280px !important; }

    /* Hero CTA buttons — 81% width, centered */
    .hero-cta {
        align-items: center !important;
    }
    .hero-cta .btn {
        width: 81% !important;
        max-width: 81% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .hero-content { text-align: center !important; padding: 0 12px !important; }
    .hero-content h1 { font-size: 1.6rem !important; line-height: 1.25 !important; }
    .hero-content p  { font-size: 0.88rem !important; line-height: 1.55 !important; }
    .hero-cta { justify-content: center !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; }
    .hero-cta .btn { width: 100% !important; justify-content: center !important; }

    /* About hero */
    .about-hero { grid-template-columns: 1fr !important; gap: 16px !important; }
    .about-hero-left { text-align: center !important; align-items: center !important; }
    .about-hero-left .about-label { display: block !important; width: 100% !important; text-align: center !important; font-size: 0.72rem !important; letter-spacing: 2px !important; }
    .about-big-number { justify-content: center !important; align-items: center !important; gap: 6px !important; margin-bottom: 10px !important; }
    .big-num { font-size: 5.5rem !important; letter-spacing: -2.5px !important; line-height: 0.85 !important; }
    .big-num-text { padding-top: 4px !important; }
    .big-num-text span { font-size: 0.55rem !important; letter-spacing: 1.5px !important; }
    .about-clients-block { align-items: center !important; width: 100% !important; gap: 10px !important; }
    .about-clients-info { text-align: center !important; align-items: center !important; }
    .about-clients-info strong { font-size: 0.75rem !important; letter-spacing: 0.5px !important; }
    .about-clients-info span { font-size: 0.62rem !important; letter-spacing: 1px !important; }
    .about-clients-slider { margin: 0 auto !important; max-width: 100% !important; }
    .about-client-photo img { width: 170px !important; height: 200px !important; border-radius: 14px !important; }
    .about-client-name { font-size: 0.78rem !important; max-width: 170px !important; margin-top: 8px !important; }
    .about-clients-track { gap: 12px !important; }
    .about-description { font-size: 0.88rem !important; line-height: 1.7 !important; text-align: center !important; }
    .about-cta-link { font-size: 0.88rem !important; display: inline-flex !important; justify-content: center !important; }
    .about-hero-right { text-align: center !important; }
    .about-hero-img img { height: 220px !important; border-radius: 12px !important; }

    /* Grids — single column */
    .why-list { grid-template-columns: 1fr !important; gap: 10px !important; }
    .services-grid, .plans-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .calc-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .events-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .lead-grid, .contact-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .contact-info-cards { grid-template-columns: 1fr !important; gap: 10px !important; }

    /* Cards */
    .why-item, .service-card, .plan-card, .event-card { padding: 14px !important; border-radius: 12px !important; }
    .why-item-icon { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; }

    /* Event details */
    .event-detail-grid { display: block !important; }
    .event-detail-main, .event-detail-sticky { width: 100% !important; max-width: 100% !important; }
    .sticky-card { position: static !important; padding: 14px !important; margin-top: 14px !important; border-radius: 12px !important; }
    .sticky-card-content h3 { font-size: 1.15rem !important; }

    /* ============================================================
       Calculator — polished mobile design
       ============================================================ */
    .calc-page-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .calc-inputs, .calc-result { padding: 14px !important; }

    /* Mobile — custom slider stays the same size; only thumb shadow tweaks */
    .range-slider-thumb {
        box-shadow: 0 0 12px rgba(13,148,136,0.35), 0 0 0 3px rgba(13,148,136,0.08) !important;
    }

    /* Results — card-style rows with depth */
    .calc-page-results {
        margin-top: 16px !important;
        padding: 4px !important;
        background: #f8fafc !important;
        border-radius: 14px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
    }
    .calc-result-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 13px 14px !important;
        background: #ffffff !important;
        border-radius: 10px !important;
        margin-bottom: 4px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    }
    .calc-result-item:last-child { margin-bottom: 0 !important; }
    .calc-result-item:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 10px rgba(15,23,42,0.08) !important;
    }
    .calc-result-label {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        line-height: 1.35 !important;
    }
    .calc-result-value {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        text-align: right !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        letter-spacing: -0.3px !important;
    }
    .calc-result-value.highlight {
        color: #dc2626 !important;
        font-size: 1.18rem !important;
    }

    /* Subtle accent bar on the highlighted row */
    .calc-result-item:has(.calc-result-value.highlight) {
        background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
        border-left: 3px solid #dc2626 !important;
    }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .stat-item { padding: 10px !important; }
    .stat-value { font-size: 1.4rem !important; }
    .stat-label { font-size: 0.72rem !important; }

    /* Header ribbon */
    .header-ribbon { padding: 6px 0 !important; }
    .ribbon-item { font-size: 0.72rem !important; padding: 0 12px !important; }

    /* Footer */
    .footer { padding: 22px 0 14px !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 16px 14px !important; text-align: center !important; }
    .footer-about { grid-column: 1 / -1 !important; text-align: center !important; }
    .footer-col:last-child { grid-column: 1 / -1 !important; text-align: center !important; }
    .footer-col { text-align: center !important; }
    .footer-grid h4 { font-size: 0.95rem !important; margin-bottom: 8px !important; }
    .footer-grid ul li { margin-bottom: 4px !important; }
    .footer-grid a { font-size: 0.88rem !important; }
    .footer-social { justify-content: center !important; }
    .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; padding-top: 12px !important; font-size: 0.78rem !important; }

    /* Buttons */
    .btn { padding: 11px 18px !important; font-size: 0.88rem !important; min-height: 44px !important; }

    /* Forms */
    .form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
    .form-group label { font-size: 0.85rem !important; }
    input, textarea, select { font-size: 16px !important; padding: 11px 14px !important; }

    /* Auth pages */
    .auth-card { padding: 22px !important; border-radius: 14px !important; }
    .auth-card h2 { font-size: 1.4rem !important; }

    /* Dashboard */
    .dashboard-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .dashboard-card { padding: 12px !important; }

    /* Tables — horizontal scroll for small screens */
    .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    table { font-size: 0.82rem !important; }
}


/* ============================================================
   6) ULTRA SMALL — 360px and below (Galaxy S small, etc.)
   ============================================================ */
@media (max-width: 360px) {
    .container { padding-left: 12px !important; padding-right: 12px !important; }
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    .hero-content h1 { font-size: 1.45rem !important; }
    .big-num { font-size: 4.8rem !important; }
    .about-client-photo img { width: 150px !important; height: 180px !important; }
    .about-client-name { max-width: 150px !important; font-size: 0.74rem !important; }

    /* Ultra-compact spacing */
    .section { padding: 18px 0 !important; }
    .section-header { margin-bottom: 12px !important; }
    .footer { padding: 18px 0 12px !important; }
    .events-listing-section { padding: 16px 0 12px !important; }
}


/* ============================================================
   FOUNDER SECTION — show floating trust badges on mobile
   (style.css hides them at ≤480; override + resize so they fit)
   ============================================================ */
@media (max-width: 768px) {
    .founder-visual { padding: 14px !important; }
    .founder-float-card {
        display: flex !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    }
    .founder-float-card strong { font-size: 0.78rem !important; line-height: 1.2 !important; }
    .founder-float-card span  { font-size: 0.66rem !important; line-height: 1.2 !important; }
    .founder-float-card .float-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.78rem !important;
    }
    .founder-float-card .float-icon-ring {
        width: 36px !important;
        height: 36px !important;
        border-width: 2px !important;
    }
    .founder-float-card .float-icon-ring span { font-size: 0.72rem !important; }
    .founder-float-card .float-stars { font-size: 0.6rem !important; margin-bottom: 2px !important; }
    .founder-float-rating strong { font-size: 0.68rem !important; }

    /* Reposition so they hug the corners of the smaller image */
    .founder-float-sebi {
        top: 8px !important;
        right: 4px !important;
    }
    .founder-float-exp {
        bottom: 60px !important;
        left: 4px !important;
    }
    .founder-float-rating {
        bottom: 8px !important;
        right: 4px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {
    /* Force-show on tiny screens (style.css ≤480 sets display:none) */
    .founder-float-card { display: flex !important; }
    .founder-img-main img { height: 360px !important; }

    /* Even tighter sizing */
    .founder-float-card {
        padding: 6px 10px !important;
        gap: 6px !important;
        border-radius: 9px !important;
    }
    .founder-float-card strong { font-size: 0.7rem !important; }
    .founder-float-card span  { font-size: 0.6rem !important; }
    .founder-float-card .float-icon { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
    .founder-float-card .float-icon-ring { width: 32px !important; height: 32px !important; }
    .founder-float-card .float-icon-ring span { font-size: 0.64rem !important; }
    .founder-float-rating strong { font-size: 0.62rem !important; }
    .founder-float-rating { padding: 6px 10px !important; }

    .founder-float-sebi  { top: 6px !important; right: 4px !important; }
    .founder-float-exp   { bottom: 50px !important; left: 4px !important; }
    .founder-float-rating { bottom: 6px !important; right: 4px !important; }
}


/* ============================================================
   FOUNDER CONTENT SIDE — mobile alignment & polish
   (centered eyebrow + heading, tight quote, clean pillar cards)
   ============================================================ */
@media (max-width: 768px) {
    .founder-content {
        text-align: center !important;
    }

    /* Eyebrow — keep its inline accent line but center the whole unit */
    .founder-eyebrow {
        display: inline-block !important;
        padding-left: 32px !important;
        margin-bottom: 12px !important;
        font-size: 0.72rem !important;
        letter-spacing: 2.5px !important;
    }
    .founder-eyebrow::before {
        width: 22px !important;
        height: 2px !important;
    }

    /* Headline — tighter on mobile, both lines centered */
    .founder-headline {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }
    .founder-headline span { display: block !important; }

    /* Quote — keep left-aligned text inside for readability,
       but center the block as a card */
    .founder-quote {
        padding: 14px 16px !important;
        margin: 0 auto 22px !important;
        text-align: left !important;
        gap: 12px !important;
        max-width: 100% !important;
    }
    .founder-quote p {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
        margin: 0 !important;
    }

    /* Pillars — single column, content left-aligned inside */
    .founder-pillars {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
        text-align: left !important;
    }
    .pillar-item {
        padding: 14px 16px !important;
        background: #ffffff !important;
        border: 1px solid #eef0f3 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    }
    .pillar-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
        background: rgba(220,38,38,0.08) !important;
        color: var(--primary) !important;
    }
    .pillar-item h4 {
        font-size: 0.95rem !important;
        margin: 0 0 4px !important;
        font-weight: 700 !important;
        color: var(--dark) !important;
    }
    .pillar-item p {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        color: #64748b !important;
        margin: 0 !important;
    }

    /* CTA — centered, full-width buttons */
    .founder-cta {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 6px !important;
    }
    .founder-cta .btn {
        width: 100% !important;
        max-width: 320px !important;
    }
}

@media (max-width: 480px) {
    .founder-eyebrow {
        font-size: 0.68rem !important;
        letter-spacing: 2px !important;
        padding-left: 26px !important;
    }
    .founder-eyebrow::before { width: 18px !important; }

    .founder-headline {
        font-size: 1.35rem !important;
        line-height: 1.28 !important;
        margin-bottom: 14px !important;
    }

    .founder-quote { padding: 12px 14px !important; margin-bottom: 18px !important; }
    .founder-quote p { font-size: 0.85rem !important; line-height: 1.6 !important; }

    .founder-pillars { gap: 8px !important; margin-bottom: 16px !important; }
    .pillar-item { padding: 12px 14px !important; }
    .pillar-icon { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; }
    .pillar-item h4 { font-size: 0.9rem !important; }
    .pillar-item p { font-size: 0.78rem !important; }
}


/* ============================================================
   OUR SERVICES — mobile horizontal list cards
   (compact image-left + content-right rows; much less scroll
   than full-bleed image cards, and the sticky stack is killed
   because layering looks broken on small screens)
   ============================================================ */
@media (max-width: 768px) {
    /* Kill sticky behavior, normal vertical flow */
    .sticky-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .sticky-card {
        position: relative !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        z-index: auto !important;
    }

    /* Row card: image on LEFT, content on RIGHT */
    .sticky-card-inner,
    .sticky-card-inner.stk-row {
        display: grid !important;
        grid-template-columns: 110px 1fr !important;
        grid-auto-flow: column !important;
        min-height: 0 !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        border: 1px solid #eef0f3 !important;
        box-shadow: 0 2px 6px rgba(15,23,42,0.04) !important;
        overflow: hidden !important;
        align-items: stretch !important;
    }

    /* Image — square thumbnail on the left */
    .sticky-card-inner.stk-row > .sticky-card-img,
    .sticky-card-img {
        position: relative !important;
        width: 110px !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .sticky-card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Content — title + short description + arrow */
    .sticky-card-content {
        padding: 12px 14px !important;
        gap: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }
    .sticky-card-content h3 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .sticky-card-content p {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        color: #64748b !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Learn More — inline arrow text, no extra padding */
    .sticky-card-content .card-link {
        align-self: flex-start !important;
        margin-top: 6px !important;
        padding: 0 !important;
        background: transparent !important;
        color: var(--primary) !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        text-decoration: none !important;
        transition: gap 0.2s ease !important;
    }
    .sticky-card-content .card-link i { font-size: 0.65rem !important; transition: transform 0.2s ease !important; }
    .sticky-card-content .card-link:hover,
    .sticky-card-content .card-link:active { gap: 8px !important; }
    .sticky-card-content .card-link:hover i { transform: translateX(2px) !important; }

    /* "View More" footer link */
    .section-view-more {
        margin-top: 16px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .sticky-cards { gap: 5px !important; }
    .sticky-card-inner,
    .sticky-card-inner.stk-row {
        grid-template-columns: 96px 1fr !important;
        border-radius: 12px !important;
    }
    .sticky-card-inner.stk-row > .sticky-card-img,
    .sticky-card-img { width: 96px !important; }
    .sticky-card-content { padding: 10px 12px !important; }
    .sticky-card-content h3 { font-size: 0.9rem !important; }
    .sticky-card-content p { font-size: 0.74rem !important; line-height: 1.4 !important; }
    .sticky-card-content .card-link { font-size: 0.72rem !important; margin-top: 4px !important; }
}


/* ============================================================
   WHY CHOOSE US — mobile design
   Keep desktop's layered look: white outer card, red icon top,
   grey inner card with title + description below.
   2-col grid on tablet/mobile, 1-col on tiny screens.
   ============================================================ */
@media (max-width: 768px) {
    /* 2-column grid like the design reference */
    .why-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Outer white card */
    .why-item {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 18px !important;
        padding: 14px !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.04) !important;
        overflow: hidden !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    /* Icon — large, red, transparent background, top-left */
    .why-item-icon {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        background: transparent !important;
        color: var(--primary) !important;
        font-size: 1.8rem !important;
        line-height: 1 !important;
        padding: 4px 0 !important;
        margin: 0 0 18px !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }

    /* Grey inner sub-card with title + description */
    .why-item > div:last-child {
        background: #ececec !important;
        border-radius: 14px !important;
        padding: 14px 14px 16px !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .why-item h4 {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 0 0 10px !important;
        line-height: 1.3 !important;
    }
    .why-item p {
        font-size: 0.8rem !important;
        line-height: 1.55 !important;
        color: #64748b !important;
        margin: 0 !important;
    }

    /* Keep white card on dark section bg */
    .section-dark .why-item { background: #ffffff !important; }
}

@media (max-width: 480px) {
    /* Stay 2-col but tighter spacing/sizing */
    .why-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .why-item { padding: 12px !important; border-radius: 16px !important; }
    .why-item-icon { font-size: 1.55rem !important; margin-bottom: 14px !important; }
    .why-item > div:last-child { padding: 12px !important; border-radius: 12px !important; }
    .why-item h4 { font-size: 0.86rem !important; margin-bottom: 6px !important; }
    .why-item p { font-size: 0.74rem !important; line-height: 1.5 !important; }
}

/* Ultra small screens — fall back to 1 column */
@media (max-width: 360px) {
    .why-list { grid-template-columns: 1fr !important; }
}


/* ============================================================
   FLOATING BUTTONS — solid red on mobile (footer/scroll-top)
   ============================================================ */
@media (max-width: 768px) {
    .float-btn.scroll-top {
        background: var(--primary) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(220,38,38,0.35) !important;
    }
    .float-btn.scroll-top:hover,
    .float-btn.scroll-top:active {
        background: #b91c1c !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 6px 18px rgba(220,38,38,0.45) !important;
    }
}


/* ============================================================
   FOOTER — replace gold accents with red on mobile
   (link arrows, hover color, privacy/terms links)
   ============================================================ */
@media (max-width: 768px) {
    /* Center the link list as a block (max-content width + auto margins),
       left-align items inside so every '›' arrow lines up in one column.
       Must stay a block so it doesn't sit beside the h4 heading. */
    .footer-col ul {
        display: block !important;
        width: -moz-max-content !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: left !important;
    }
    .footer-col ul li {
        text-align: left !important;
    }

    /* Arrow marker — match link's font/line so it sits on baseline */
    .footer-col ul li a {
        line-height: 1.4 !important;
    }
    .footer-col ul li a::before {
        color: var(--primary) !important;
        font-size: 0.95rem !important;
        line-height: 1 !important;
        display: inline-block !important;
        width: 12px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }
    /* Link hover color */
    .footer-col ul li a:hover {
        color: var(--primary) !important;
    }
    /* Copyright/All Rights Reserved text — soft light-gray on mobile.
       (No !important so the inline-styled "Design by …" span keeps
       its own lighter rgba color via the inline style cascade.) */
    .footer-bottom { color: rgba(255,255,255,0.70); }
    .footer-bottom p { color: rgba(255,255,255,0.70); }

    /* Privacy Policy / Terms of Service links — same soft gray */
    .footer-bottom a {
        color: rgba(255,255,255,0.70) !important;
    }
    .footer-bottom a:hover {
        color: #ffffff !important;
        opacity: 1 !important;
    }
    /* Keep the InfiniteOption design credit link white */
    .footer-bottom a[href*="infiniteoption"] {
        color: #ffffff !important;
    }
    .footer-bottom a[href*="infiniteoption"]:hover {
        color: #ffffff !important;
        opacity: 0.85 !important;
    }
    /* Underline accent on section headings (QUICK LINKS / SERVICES / etc.) */
    .footer-col h4::after {
        background: var(--primary) !important;
    }

    /* ────────────────────────────────────────────────────────
       Social icons — show each brand colour by default on mobile
       (touch devices can't hover) and invert on tap.
       ──────────────────────────────────────────────────────── */
    .footer-socials a {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.10) !important;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    }
    .footer-socials a i { transition: color 0.2s ease !important; }

    /* Default icon colour = brand colour */
    .footer-socials a:nth-of-type(1) i,
    .footer-socials a:has(.fa-facebook-f) i,
    .footer-socials a:has(.fa-facebook) i  { color: #1877F2 !important; }

    .footer-socials a:nth-of-type(2) i,
    .footer-socials a:has(.fa-instagram) i { color: #E4405F !important; }

    .footer-socials a:nth-of-type(3) i,
    .footer-socials a:has(.fa-twitter) i,
    .footer-socials a:has(.fa-x-twitter) i { color: #1DA1F2 !important; }

    .footer-socials a:nth-of-type(4) i,
    .footer-socials a:has(.fa-linkedin-in) i,
    .footer-socials a:has(.fa-linkedin) i  { color: #0A66C2 !important; }

    .footer-socials a:nth-of-type(5) i,
    .footer-socials a:has(.fa-youtube) i   { color: #FF0000 !important; }

    /* Tap/active state — fill the circle with the brand colour,
       turn the icon white (mirrors the desktop :hover effect) */
    .footer-socials a:active i,
    .footer-socials a:hover  i { color: #ffffff !important; }

    .footer-socials a:nth-of-type(1):active,
    .footer-socials a:has(.fa-facebook-f):active,
    .footer-socials a:has(.fa-facebook):active,
    .footer-socials a:nth-of-type(1):hover,
    .footer-socials a:has(.fa-facebook-f):hover,
    .footer-socials a:has(.fa-facebook):hover { background: #1877F2 !important; border-color: #1877F2 !important; }

    .footer-socials a:nth-of-type(2):active,
    .footer-socials a:has(.fa-instagram):active,
    .footer-socials a:nth-of-type(2):hover,
    .footer-socials a:has(.fa-instagram):hover {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
        border-color: transparent !important;
    }

    .footer-socials a:nth-of-type(3):active,
    .footer-socials a:has(.fa-twitter):active,
    .footer-socials a:has(.fa-x-twitter):active,
    .footer-socials a:nth-of-type(3):hover,
    .footer-socials a:has(.fa-twitter):hover,
    .footer-socials a:has(.fa-x-twitter):hover { background: #1DA1F2 !important; border-color: #1DA1F2 !important; }

    .footer-socials a:nth-of-type(4):active,
    .footer-socials a:has(.fa-linkedin-in):active,
    .footer-socials a:has(.fa-linkedin):active,
    .footer-socials a:nth-of-type(4):hover,
    .footer-socials a:has(.fa-linkedin-in):hover,
    .footer-socials a:has(.fa-linkedin):hover { background: #0A66C2 !important; border-color: #0A66C2 !important; }

    .footer-socials a:nth-of-type(5):active,
    .footer-socials a:has(.fa-youtube):active,
    .footer-socials a:nth-of-type(5):hover,
    .footer-socials a:has(.fa-youtube):hover { background: #FF0000 !important; border-color: #FF0000 !important; }
}


/* ============================================================
   ABOUT PAGE — "Our Journey" timeline
   Alternating zig-zag on ALL viewports: odd items RIGHT, even
   items LEFT of the centre line.
   ============================================================ */
.timeline {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    position: relative !important;
}
/* Vertical line on the centre axis */
.timeline::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.timeline-item {
    width: 50% !important;
    margin-bottom: 32px !important;
    padding-top: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Odd (1st, 3rd, 5th…) → RIGHT side of line */
.timeline-item:nth-child(odd) {
    margin-left: 50% !important;
    margin-right: 0 !important;
    padding-left: 28px !important;
    padding-right: 0 !important;
    text-align: left !important;
}
.timeline-item:nth-child(odd)::before {
    left: -7px !important;
    right: auto !important;
    top: 4px !important;
    transform: none !important;
}

/* Even (2nd, 4th, 6th…) → LEFT side of line */
.timeline-item:nth-child(even) {
    margin-left: 0 !important;
    margin-right: 50% !important;
    padding-right: 28px !important;
    padding-left: 0 !important;
    text-align: right !important;
}
.timeline-item:nth-child(even)::before {
    left: auto !important;
    right: -7px !important;
    top: 4px !important;
    transform: none !important;
}

.timeline-item .year {
    display: inline-block !important;
    margin: 0 0 8px !important;
}
.timeline-item h4,
.timeline-item p {
    text-align: inherit !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── Mobile tightening — narrow padding + smaller text ── */
@media (max-width: 768px) {
    .timeline { max-width: 100% !important; padding: 0 4px !important; }
    .timeline-item { margin-bottom: 22px !important; }
    .timeline-item:nth-child(odd) { padding-left: 18px !important; }
    .timeline-item:nth-child(even) { padding-right: 18px !important; }
    .timeline-item::before {
        width: 11px !important;
        height: 11px !important;
        border-width: 2px !important;
    }
    .timeline-item:nth-child(odd)::before { left: -6px !important; }
    .timeline-item:nth-child(even)::before { right: -6px !important; }
    .timeline-item .year {
        font-size: 0.7rem !important;
        padding: 3px 10px !important;
        margin-bottom: 6px !important;
    }
    .timeline-item h4 {
        font-size: 0.88rem !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
    }
    .timeline-item p {
        font-size: 0.76rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .timeline-item:nth-child(odd) { padding-left: 14px !important; }
    .timeline-item:nth-child(even) { padding-right: 14px !important; }
    .timeline-item .year { font-size: 0.66rem !important; padding: 2px 9px !important; }
    .timeline-item h4 { font-size: 0.82rem !important; }
    .timeline-item p { font-size: 0.72rem !important; line-height: 1.45 !important; }
}