/* =====================================================
   IIRS 404 PAGE
    ===================================================== */

    .iirs-404 {

        position: relative;

        min-height: 70vh;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        padding: 90px 0;

        background:
            #f7f9f8;

    }


    /* Decorative background circles */

    .iirs-404::before {

        content: "";

        position: absolute;

        width: 520px;
        height: 520px;

        left: -260px;
        top: -180px;

        border-radius: 50%;

        background:
            rgba(0, 91, 57, .035);

    }


    .iirs-404::after {

        content: "";

        position: absolute;

        width: 420px;
        height: 420px;

        right: -220px;
        bottom: -180px;

        border-radius: 50%;

        background:
            rgba(201, 160, 67, .055);

    }


    .iirs-404-content {

        position: relative;

        z-index: 2;

        max-width: 760px;

        margin: 0 auto;

        text-align: center;

    }


    /* =====================================================
   404 NUMBER
    ===================================================== */

    .iirs-404-number {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        margin-bottom: 22px;

    }


    .iirs-404-number .four {

        font-size: clamp(110px,
                16vw,
                190px);

        line-height: .8;

        font-weight: 900;

        letter-spacing: -12px;

        color:
            var(--iirs-green);

        opacity: .95;

    }


    .iirs-404-number .zero {

        width: clamp(105px,
                14vw,
                165px);

        height: clamp(105px,
                14vw,
                165px);

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background:
            rgba(0, 91, 57, .08);

        border:
            12px solid rgba(0, 91, 57, .12);

        color:
            var(--iirs-gold);

    }


    .iirs-404-number .zero i {

        font-size: clamp(42px,
                6vw,
                65px);

    }


    /* =====================================================
   LABEL
    ===================================================== */

    .iirs-404-label {

        display: inline-block;

        margin-bottom: 12px;

        color:
            var(--iirs-green);

        font-size: 10px;

        font-weight: 800;

        letter-spacing: 2px;

    }


    /* =====================================================
   HEADING
    ===================================================== */

    .iirs-404 h1 {

        margin: 0 0 18px;

        color:
            var(--iirs-dark);

        font-size: clamp(30px,
                4vw,
                48px);

        line-height: 1.12;

        font-weight: 800;

    }


    .iirs-404-content>p {

        max-width: 580px;

        margin:
            0 auto 28px;

        color:
            #68736d;

        font-size: 14px;

        line-height: 1.8;

    }


    /* =====================================================
   ACTION BUTTONS
    ===================================================== */

    .iirs-404-actions {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 12px;

        flex-wrap: wrap;

        margin-bottom: 35px;

    }


    .iirs-404-primary,
    .iirs-404-secondary {

        min-height: 44px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        padding:
            0 20px;

        border-radius: 5px;

        font-size: 11px;

        font-weight: 700;

        text-decoration: none;

        transition:
            all .2s ease;

    }


    .iirs-404-primary {

        background:
            var(--iirs-green);

        color: white;

    }


    .iirs-404-primary:hover {

        background:
            var(--iirs-dark);

        color: white;

        transform:
            translateY(-2px);

    }


    .iirs-404-secondary {

        background: white;

        color:
            var(--iirs-green);

        border:
            1px solid #dce5e0;

    }


    .iirs-404-secondary:hover {

        background:
            #edf5f1;

        color:
            var(--iirs-green);

        transform:
            translateY(-2px);

    }


    /* =====================================================
   QUICK LINKS
    ===================================================== */

    .iirs-404-links {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-wrap: wrap;

        gap: 8px 18px;

        padding-top: 20px;

        border-top:
            1px solid #e2e9e5;

    }


    .iirs-404-links span {

        width: 100%;

        margin-bottom: 3px;

        color:
            #929b96;

        font-size: 10px;

    }


    .iirs-404-links a {

        color:
            #65716b;

        font-size: 10px;

        font-weight: 600;

        text-decoration: none;

    }


    .iirs-404-links a:hover {

        color:
            var(--iirs-green);

    }


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

    @media (max-width: 576px) {

        .iirs-404 {

            min-height: 65vh;

            padding:
                65px 15px;

        }


        .iirs-404-number {

            gap: 5px;

        }


        .iirs-404-number .four {

            font-size: 105px;

            letter-spacing: -7px;

        }


        .iirs-404-number .zero {

            width: 92px;
            height: 92px;

            border-width: 8px;

        }


        .iirs-404-number .zero i {

            font-size: 38px;

        }


        .iirs-404 h1 {

            font-size: 30px;

        }


        .iirs-404-content>p {

            font-size: 12px;

        }


        .iirs-404-actions {

            flex-direction: column;

        }


        .iirs-404-primary,
        .iirs-404-secondary {

            width: 100%;

        }


        .iirs-404-links {

            gap: 10px;

        }

    }