/* ARCH.AZ PREMIUM MOBILE NAVIGATION */

.arch-mobile-nav {
    display: none;
}

@media screen and (max-width: 960px) {

    body .arch-mobile-nav {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns:
            1fr 1fr 1.35fr 1fr 1fr 1fr !important;
        grid-template-rows: 76px !important;
        align-items: center !important;
        gap: 2px !important;

        padding: 5px 8px
            calc(7px + env(safe-area-inset-bottom, 0px))
            !important;

        background: #1b1714 !important;
        border-top: 1px solid #76583e !important;
        overflow: visible !important;
        z-index: 99999 !important;
        box-shadow: 0 -8px 30px #0004 !important;
    }

    body .arch-mobile-nav > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 4px 0 !important;

        border-radius: 10px !important;
        background: transparent !important;
        color: #d9cabc !important;

        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        gap: 5px !important;
        box-sizing: border-box !important;
    }

    body .arch-mobile-nav > a svg {
        width: 21px !important;
        height: 21px !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    /* Portfolio */
    body .arch-mobile-nav > a:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* Xidmetler */
    body .arch-mobile-nav > a:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* Haqqimizda */
    body .arch-mobile-nav > a:nth-child(4) {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    /* Elaqe */
    body .arch-mobile-nav > a:nth-child(5) {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }

    /* Onlayn odenis */
    body .arch-mobile-nav > a:nth-child(6) {
        grid-column: 6 !important;
        grid-row: 1 !important;
    }

    /* MERKEZDE ANA SEHIFE */
    body .arch-mobile-nav > a:first-child {
        grid-column: 3 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-height: 84px !important;
        justify-self: center !important;
        align-self: center !important;

        transform: translateY(-17px) !important;
        background: transparent !important;
        color: #e9bd8c !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        gap: 3px !important;
        z-index: 2 !important;
    }

    body .arch-mobile-nav > a:first-child svg {
        width: 27px !important;
        height: 27px !important;
        padding: 15px !important;
        box-sizing: content-box !important;

        background: #b78a59 !important;
        border: 5px solid #1b1714 !important;
        border-radius: 50% !important;
        color: #fff !important;

        box-shadow:
            0 4px 16px #0007,
            0 0 0 1px #d6ab7b55 !important;
    }

    body .arch-mobile-nav > a[aria-current="page"]:not(:first-child) {
        background: #b78a5925 !important;
        color: #edc49a !important;
    }

    body:has(.arch-mobile-nav) {
        padding-bottom:
            calc(105px + env(safe-area-inset-bottom, 0px))
            !important;
    }
}

/* CENTERED FIVE ITEM NAVIGATION */
@media (max-width: 960px) {
    body .arch-mobile-nav {
        grid-template-columns:
            1fr 1fr 1.4fr 1fr 1fr !important;
        grid-template-rows: 76px !important;
        gap: 4px !important;
    }

    body .arch-mobile-nav > a:first-child {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    body .arch-mobile-nav > a:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body .arch-mobile-nav > a:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body .arch-mobile-nav > a:nth-child(4) {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    body .arch-mobile-nav > a:nth-child(5) {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }
}