/* ── GLOBAL FONT: sans-serif everywhere ─────────────────── */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        font-family: sans-serif;
    }

    :root {
        --g-dark: #145a23;
        --g-mid: #1e7a35;
        --g-light: #28a745;
        --g-pale: #eaf5ec;
        --g-border: #b5d9be;
        --white: #ffffff;
        --gold: #bea65d;
        --text: #145a23;
    }

    body {
        background: var(--white);
        color: var(--text);
        font-family: sans-serif;
    }

    /* ════════════════════════════════════════════════════════
       NAVBAR
    ════════════════════════════════════════════════════════ */
    .navbar {
        background: var(--white) !important;
        border-bottom: 4px solid var(--g-mid);
        padding: 0.55rem 1rem;
    }

    /* -- Logo (left) -- */
    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        text-decoration: none;
        flex-shrink: 0;
    }

    .nav-link {
        color: var(--green-dark) !important;
        font-size: 0.90rem;
        font-weight: 700;
        
  
  
    }
    
    .nav-link:hover {
        color: var(--grey) !important;
    }

    .brand-svg {
        width: 52px;
        height: 52px;
    }

    .brand-text-block {
        line-height: 1.15;
    }

    .brand-name {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--g-dark);
        letter-spacing: -0.02em;
        display: block;
    }

    .brand-arabic {
        font-size: 2rem;
        color: var(--g-mid);
        direction: rtl;
        display: block;
    }

    /* -- Jumua centre block -- */
    .jumma-wrap {
        flex: 1;
        display: flex;
        justify-content: center;
        padding: 0 1rem;
    }

    .jumma-box {
        background-color: var(--g-pale);
        border: 1.5px solid var(--g-border);
        border-radius: 5px;
        text-align: center;
        width: fit-content;
    }
    

    .jumma-box .j-label {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--g-mid);
    }

    .jumma-box .j-times {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--g-dark);
    }

    /* -- Prayer table (right) -- */
    .prayer-tbl {
        font-size: 0.81rem;
        border-collapse: collapse;
        white-space: nowrap;
    }

    .prayer-tbl thead th {
        background: var(--g-dark);
        color: var(--white);
        padding: 4px 8px;
        font-weight: 700;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .prayer-tbl tbody td {
        padding: 3px 8px;
        color: var(--g-dark);
        border-bottom: 1px solid var(--g-pale);
    }

    .prayer-tbl tbody tr:nth-child(even) td {
        background: var(--g-pale);
    }

    .prayer-tbl tbody tr.active-prayer td {
        background: var(--gold);
        color: #fff;
        font-weight: 700;
    }

    
    

    /* Hamburger colour override */
    .navbar-toggler {
        border: 2px solid var(--g-mid) !important;
        border-radius: 6px;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231e7a35' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* On small screens: stack centre and right inside the collapse */
    @media (max-width: 991.98px) {
        .jumma-wrap {
            justify-content: flex-start;
            padding: 0.6rem 0;
        }

        .prayer-tbl-wrap {
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }
    }

    /* ════════════════════════════════════════════════════════
       HERO BANNER
    ════════════════════════════════════════════════════════ */
    .hero {
        background: var(--g-dark);
        color: var(--white);
        padding: 4rem 1.5rem 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            repeating-linear-gradient(45deg,
                rgba(255, 255, 255, 0.03) 0px,
                rgba(255, 255, 255, 0.03) 1px,
                transparent 1px,
                transparent 18px);
    }

    .hero-inner {
        position: relative;
    }

    .hero-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50px;
        padding: 0.25rem 1.1rem;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 1rem;
    }

    .hero h1 {
        font-size: clamp(2rem, 5vw, 3.4rem);
        font-weight: 900;
        letter-spacing: -0.03em;
        color: var(--white);
        margin-bottom: 0.3rem;
    }

    .hero .hero-arabic {
        font-size: clamp(1.2rem, 3vw, 1.7rem);
        color: rgba(255, 255, 255, 0.75);
        direction: rtl;
        margin-bottom: 0.8rem;
    }

    .hero-gold-bar {
        width: 70px;
        height: 3px;
        background: var(--gold);
        margin: 0 auto 1rem;
        border-radius: 2px;
    }

    .hero .hero-addr {
        font-size: 0.92rem;
        color: rgba(255, 255, 255, 0.75);
    }

    /* ════════════════════════════════════════════════════════
       SERVICES STRIP
    ════════════════════════════════════════════════════════ */
    .services-strip {
        background: var(--g-pale);
        border-top: 1px solid var(--g-border);
        border-bottom: 1px solid var(--g-border);
        padding: 1rem 1rem;
    }

    .svc-item {
        text-align: center;
        padding: 0.6rem;
    }

    .svc-item i {
        font-size: 1.8rem;
        color: var(--g-mid);
        display: block;
        margin-bottom: 0.4rem;
    }

    .svc-item span {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--g-dark);
    }

    /* ════════════════════════════════════════════════════════
       EVENTS SECTION
    ════════════════════════════════════════════════════════ */
    .events-section {
        background: var(--white);
        padding: 4rem 1rem;
    }

    .section-title {
        font-size: 1.85rem;
        font-weight: 900;
        color: var(--g-dark);
        letter-spacing: -0.03em;
        text-align: center;
        margin-bottom: 0.4rem;
    }

    .section-rule {
        width: 56px;
        height: 3px;
        background: var(--gold);
        margin: 0 auto 2.5rem;
        border-radius: 2px;
    }

    .event-card {
        background: var(--white);
        border: 2px solid var(--g-border);
        border-radius: 14px;
        padding: 1.6rem 1.4rem;
        height: 100%;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .event-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 40px rgba(20, 90, 35, 0.14);
        border-color: var(--g-mid);
    }

    .event-tag {
        display: inline-block;
        background: var(--g-dark);
        color: var(--white);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 50px;
        margin-bottom: 0.8rem;
    }

    .prayer-times {
            display: inline-block;
            color: var(--g-dark);       
    }

    .event-icon {
        font-size: 1.8rem;
        color: var(--g-light);
        display: block;
        margin-bottom: 0.6rem;
    }

    .event-card h5 {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--g-dark);
        margin-bottom: 0.5rem;
    }

    .event-card p {
        font-size: 0.84rem;
        color: var(--g-mid);
        line-height: 1.6;
        margin: 0;
    }

    /* ════════════════════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════════════════════ */
    footer {
        background: var(--g-dark);
        color: var(--white);
        padding: 3.5rem 1rem 1.5rem;
    }

    footer h5 {
        font-size: 1rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--gold);
        margin-bottom: 1.1rem;
    }

    footer p,
    footer li,
    footer a {
        font-size: 0.86rem;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        line-height: 1.7;
    }

    footer a:hover {
        color: var(--gold);
    }

    footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* Gallery of 3 mosque images */
    .gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .gal-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

    .gal-item svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .gal-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 0.68rem;
        font-weight: 600;
        padding: 3px 8px;
        letter-spacing: 0.04em;
    }

    .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        font-size: 1rem;
        margin-right: 0.4rem;
        transition: background 0.2s, color 0.2s;
        text-decoration: none;
    }

    .social-icons a:hover {
        background: var(--gold);
        color: var(--white);
    }

    .footer-hr {
        border-color: rgba(255, 255, 255, 0.12);
        margin: 2rem 0 1.2rem;
    }

    .footer-copy {
        text-align: center;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.45);
    }

    /* ════════════════════════════════════════════════════════
       SCROLL REVEAL
    ════════════════════════════════════════════════════════ */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    .reveal.in {
        opacity: 1;
        transform: none;
    }

  .sct-text-tiny {
    font-family: sans-serif;
    font-size: 12px !important;
  }

 
 /* ------------- CUSTOM --------- */
 .main-banner {
    background-color: var(--g-dark);
    font-size: 1.5rem;
    border-collapse: collapse;
    white-space: nowrap;
    color: white
 }
 .main-section {
     background: var(--white);
     padding: 4rem 1rem;
 }

 /* Custom Green Link Styles */
 .link-anchor-green {
     /* Dark Green (using Bootstrap's success-text-emphasis or custom hex) */
     color: #0a5131 !important;
     transition: color 0.15s ease-in-out;
 }

 .link-anchor-green:hover,
 .link-anchor-green:focus,
 .link-anchor-green:active {
     /* Light Green (using a brighter hex like #198754 or #2fb380) */
     color: #26865a !important;
 }
 
 .bg-prayer-green {
     background-color: #006400 !important;
     /* Dark Green */
     color: white !important;
 }

 .table thead th {
     vertical-align: middle;
     border-bottom: 2px solid #dee2e6;
 }

 .text-start-time {
     color: #6c757d;
     font-size: 0.9rem;
 }

 .fw-jammat {
     font-weight: 700;
     color: #000;
 }

 /* --- Main table --- */
 .prayer-tbl-main {
     font-size: 1.0rem;
     border-collapse: collapse;
     border-radius: 5px;
     white-space: nowrap;
 }

 .prayer-tbl-main thead th {
     background: var(--g-dark);
     color: white
 }


 .prayer-tbl-main tbody td {
     color: var(--g-dark);
 }


 .prayer-tbl-main tbody tr:nth-child(even) td {
     background: rgba(255, 255, 255, 0.12);
 }