/* ===== Facilities page - unique section styles ===== */
    .fac-card {
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .fac-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
    .fac-card .fac-top {
        height: 118px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 44px;
        position: relative;
        overflow: hidden;
    }
    .fac-card .fac-top::before {
        content: "";
        position: absolute;
        width: 120px; height: 120px;
        border: 16px solid rgba(255,255,255,0.12);
        border-radius: 50%;
        right: -30px; top: -30px;
    }
    .fac-top.g1 { background: linear-gradient(135deg, var(--navy), var(--blue)); }
    .fac-top.g2 { background: linear-gradient(135deg, var(--gold), var(--red)); }
    .fac-top.g3 { background: linear-gradient(135deg, var(--red-dark), var(--red)); }
    .fac-top.g4 { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); }
    .fac-card .fac-body { padding: 26px 24px; flex: 1; }
    .fac-card .fac-body h4 { font-size: 19px; margin-bottom: 10px; }
    .fac-card .fac-body p { color: var(--muted); font-size: 14.6px; text-align: justify; margin: 0; }

    .fac-intro {
        background: var(--white);
        border-radius: 22px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: 40px 44px;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 34px;
    }
    .fac-intro .fi-icon-big {
        flex: 0 0 92px;
        width: 92px; height: 92px;
        border-radius: 24px;
        background: var(--gradient);
        color: var(--gold-light);
        font-size: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        box-shadow: 0 16px 34px rgba(12,44,88,0.3);
    }
    .fac-intro p { color: var(--text); font-size: 16.5px; text-align: justify; margin: 0; }

    .house-card {
        border-radius: 20px;
        padding: 32px 26px;
        color: #fff;
        position: relative;
        overflow: hidden;
        height: 100%;
        box-shadow: var(--shadow);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .house-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: var(--shadow-lg); }
    .house-card::before {
        content: "";
        position: absolute;
        width: 150px; height: 150px;
        border: 20px solid rgba(255,255,255,0.14);
        border-radius: 50%;
        top: -60px; right: -50px;
    }
    .house-card::after {
        content: "";
        position: absolute;
        width: 70px; height: 70px;
        border: 12px dashed rgba(255,255,255,0.12);
        border-radius: 50%;
        bottom: -24px; left: -20px;
        animation: spin 30s linear infinite;
    }
    .house-card.h-red { background: linear-gradient(135deg, #8f0f18, #c1121f); }
    .house-card.h-green { background: linear-gradient(135deg, #14532d, #1a7f37); }
    .house-card.h-blue { background: linear-gradient(135deg, #0a1f3b, #1c4c96); }
    .house-card.h-yellow { background: linear-gradient(135deg, #8f7e1a, #f6b400); }
    .house-card .hc-icon {
        width: 64px; height: 64px;
        border-radius: 16px;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.35);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 28px; margin-bottom: 18px; position: relative; z-index: 2;
    }
    .house-card h4 { color: #fff; font-size: 22px; margin-bottom: 6px; position: relative; z-index: 2; }
    .house-card .hc-sub { font-size: 13.5px; font-weight: 600; opacity: 0.9; margin-bottom: 10px; position: relative; z-index: 2; }
    .house-card .hc-incharge {
        display: inline-flex; align-items: center; gap: 8px;
        background: rgba(255,255,255,0.2);
        border-radius: 40px;
        padding: 7px 16px;
        font-size: 13.5px; font-weight: 600;
        position: relative; z-index: 2;
    }

    .cc-card {
        background: var(--white);
        border-radius: 18px;
        border: 1px solid var(--border);
        box-shadow: 0 8px 22px rgba(12,44,88,0.07);
        padding: 26px 22px;
        height: 100%;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .cc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
    .cc-card .cc-icon {
        width: 58px; height: 58px;
        margin: 0 auto 16px;
        border-radius: 16px;
        background: var(--off-white);
        border: 1px solid var(--border);
        color: var(--red);
        font-size: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        transition: all 0.3s ease;
    }
    .cc-card:hover .cc-icon { background: var(--gradient-red); color: #fff; transform: rotate(-8deg) scale(1.08); }
    .cc-card h5 { font-size: 17px; margin-bottom: 8px; }
    .cc-card p { color: var(--muted); font-size: 14px; text-align: justify; margin: 0; }

    .event-pill {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 14px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 6px 16px rgba(12,44,88,0.06);
        height: 100%;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .event-pill:hover { transform: translateX(6px); border-color: var(--gold); }
    .event-pill i {
        width: 32px; height: 32px; flex: 0 0 32px;
        border-radius: 50%;
        background: var(--gradient-red);
        color: #fff; font-size: 13px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .event-pill span { font-weight: 600; color: var(--navy); font-size: 15px; }

    @media (max-width: 767.98px) {
        .fac-intro { flex-direction: column; text-align: center; padding: 34px 24px; }
        .fac-intro .fi-icon-big { margin: 0 auto; }
    }