/* =====================================================
   OFFICE LOCATION PAGE
    ===================================================== */

    .office-hero {

        position: relative;

        background:
            linear-gradient(120deg,
                rgba(0, 58, 38, .97),
                rgba(0, 91, 57, .90));

        padding: 85px 0;

        overflow: hidden;

    }

    .office-hero::after {

        content: "";

        position: absolute;

        width: 360px;
        height: 360px;

        right: -100px;
        top: -140px;

        border-radius: 50%;

        border:
            1px solid rgba(255, 255, 255, .08);

    }

    .office-hero-content {

        max-width: 720px;

        position: relative;

        z-index: 2;

    }

    .office-eyebrow {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        color: var(--iirs-gold);

        font-size: 11px;

        font-weight: 800;

        letter-spacing: 1.5px;

        margin-bottom: 15px;

    }

    .office-hero h1 {

        color: white;

        font-size: clamp(40px,
                5vw,
                64px);

        line-height: 1.05;

        font-weight: 800;

        margin-bottom: 20px;

    }

    .office-hero p {

        max-width: 600px;

        color:
            rgba(255, 255, 255, .75);

        font-size: 15px;

        line-height: 1.8;

    }


    /* =====================================================
   MAIN SECTION
    ===================================================== */

    .office-section {

        padding: 75px 0;

        background:
            #f7f9f8;

    }


    .office-search-card {

        display: flex;

        align-items: end;

        justify-content: space-between;

        gap: 40px;

        margin-bottom: 35px;

    }


    .section-label {

        display: block;

        color: var(--iirs-green);

        font-size: 10px;

        font-weight: 800;

        letter-spacing: 1.4px;

        margin-bottom: 8px;

    }


    .office-search-card h2 {

        font-size: 30px;

        color: var(--iirs-dark);

        margin-bottom: 8px;

    }


    .office-search-card p {

        color: #68736d;

        font-size: 13px;

    }


    .office-search {

        min-width: 350px;

    }


    .office-search-input {

        height: 50px;

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 0 15px;

        background: white;

        border: 1px solid #dce4df;

        border-radius: 7px;

        box-shadow:
            0 4px 18px rgba(0, 40, 20, .04);

    }


    .office-search-input i {

        color: var(--iirs-green);

    }


    .office-search-input input {

        width: 100%;

        border: none;

        outline: none;

        background: transparent;

        font-size: 13px;

    }


    /* =====================================================
   SUMMARY
    ===================================================== */

    .office-summary {

        display: flex;

        gap: 15px;

        margin-bottom: 30px;

    }


    .office-summary-item {

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 15px 20px;

        background: white;

        border: 1px solid #e1e8e4;

        border-radius: 8px;

    }


    .office-summary-icon {

        width: 40px;
        height: 40px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 7px;

        background:
            #e9f4ef;

        color:
            var(--iirs-green);

    }


    .office-summary strong {

        display: block;

        color: var(--iirs-dark);

        font-size: 18px;

    }


    .office-summary span {

        display: block;

        color: #7a847f;

        font-size: 10px;

    }


    /* =====================================================
   OFFICE GRID
    ===================================================== */

    .office-grid {

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 20px;

    }


    .office-card {

       /*  background: white;

        border:
            1px solid #e2e8e4;

        border-radius: 9px;

        overflow: hidden;

        transition:
            transform .2s ease,
            box-shadow .2s ease; */
        position: relative;

    background-color: #ffffff;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.91),
            rgba(255, 255, 255, 0.91)
        ),
        url('../images/imo-map.png');

    background-size: cover;

    background-position: center;

    border:
        1px solid #e2e8e4;

    border-radius: 9px;

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

    }


    .office-card:hover {

        transform:
            translateY(-4px);

        box-shadow:
            0 15px 35px rgba(0, 50, 30, .09);

    }


    .office-card-top {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 20px 20px 0;

    }


    .office-location-icon {

        width: 44px;
        height: 44px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 7px;

        background:
            #edf6f1;

        color:
            var(--iirs-green);

        font-size: 19px;

    }


    .office-status {

        display: inline-flex;

        align-items: center;

        gap: 6px;

        padding: 5px 8px;

        border-radius: 20px;

        font-size: 9px;

        font-weight: 700;

    }


    .office-status>span {

        width: 6px;
        height: 6px;

        border-radius: 50%;

    }


    .office-status.is-open {

        background: #eaf7ef;

        color: #237541;

    }


    .office-status.is-open>span {

        background: #2e9b55;

    }


    .office-status.is-closed {

        background: #f8eeee;

        color: #a33c3c;

    }


    .office-status.is-closed>span {

        background: #c85050;

    }


    .office-card-body {

        padding: 18px 20px 20px;

    }


    .office-lga {

        color:
            var(--iirs-green);

        font-size: 10px;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: .8px;

    }


    .office-card h3 {

        color:
            var(--iirs-dark);

        font-size: 16px;

        margin:
            6px 0 18px;

    }


    .office-detail {

        display: flex;

        align-items: flex-start;

        gap: 9px;

        color: #67736c;

        font-size: 11px;

        line-height: 1.6;

        margin-bottom: 10px;

    }


    .office-detail i {

        color:
            var(--iirs-green);

        font-size: 13px;

        margin-top: 2px;

    }


    .office-detail small {

        display: block;

        color: #9aa39e;

        font-size: 9px;

        margin-top: 2px;

    }


    .office-card-footer {

        padding: 14px 20px;

        border-top:
            1px solid #edf1ef;

    }


    .office-map-btn {

        width: 100%;

        height: 38px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        border-radius: 5px;

        background:
            var(--iirs-green);

        color: white;

        font-size: 10px;

        font-weight: 700;

        text-decoration: none;

    }


    .office-map-btn:hover {

        background:
            var(--iirs-dark);

        color: white;

    }


    .office-map-btn.disabled {

        background: #eef1ef;

        color: #909a94;

        border: none;

    }


    /* =====================================================
   EMPTY STATE
    ==================================================== */

    .office-empty,
    .office-no-results {

        grid-column:
            1 / -1;

        text-align: center;

        padding: 70px 20px;

    }


    .office-empty i,
    .office-no-results i {

        font-size: 38px;

        color: #a7b2ac;

    }


    .office-empty h3,
    .office-no-results h3 {

        color:
            var(--iirs-dark);

        font-size: 18px;

        margin:
            15px 0 5px;

    }


    .office-empty p,
    .office-no-results p {

        color: #7c8781;

        font-size: 12px;

    }


    /* =====================================================
   HELP
    ==================================================== */

    .office-help {

        padding: 55px 0;

        background:
            var(--iirs-dark);

    }


    .office-help-inner {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 30px;

    }


    .office-help h2 {

        color: white;

        font-size: 25px;

        margin-bottom: 8px;

    }


    .office-help p {

        color:
            rgba(255, 255, 255, .65);

        font-size: 12px;

    }


    .office-help-btn {

        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 12px 18px;

        background:
            var(--iirs-gold);

        color:
            #17221b;

        border-radius: 5px;

        font-size: 11px;

        font-weight: 800;

        text-decoration: none;

    }


    /* =====================================================
   RESPONSIVE
    ==================================================== */

    @media (max-width: 992px) {

        .office-grid {

            grid-template-columns:
                repeat(2, 1fr);

        }

    }


    @media (max-width: 768px) {

        .office-hero {

            padding: 65px 0;

        }

        .office-search-card {

            display: block;

        }

        .office-search {

            min-width: 0;

            margin-top: 20px;

        }

        .office-grid {

            grid-template-columns:
                1fr;

        }

        .office-summary {

            flex-direction: column;

        }

        .office-help-inner {

            display: block;

        }

        .office-help-btn {

            margin-top: 20px;

        }

    }


    @media (max-width: 576px) {

        .office-section {

            padding: 50px 0;

        }

        .office-hero h1 {

            font-size: 38px;

        }

        .office-hero p {

            font-size: 13px;

        }

    }