/* ============================================================
   RAEES IMPORT & EXPORT
   FINAL MOBILE MENU
   ------------------------------------------------------------
   File:
   /public_html/assets/css/layout/mobile-menu.css

   Works with:
   /public_html/includes/navbar.php

   JS States:
   #mobileMenuToggle.is-active
   #navbarMenu.is-open
   #mobileMenuOverlay.is-open
   body.mobile-menu-open
   ============================================================ */


/* ============================================================
   01. DESKTOP DEFAULT
   ============================================================ */

.mobile-menu-overlay {
    display: none;
}

.mobile-menu-footer {
    display: none;
}


/* ============================================================
   02. MOBILE + TABLET
   ============================================================ */

@media (max-width: 991.98px) {


    /* ========================================================
       BODY SCROLL LOCK
       ======================================================== */

    html:has(body.mobile-menu-open),
    body.mobile-menu-open {
        overflow: hidden !important;
    }


    /* ========================================================
       NAVBAR STACKING
       ======================================================== */

    .main-navbar {
        position: relative;
        z-index: 1000;
    }

    .navbar-inner {
        position: relative;
        z-index: 2;
    }


    /* ========================================================
       MOBILE TOGGLE
       ======================================================== */

    #mobileMenuToggle.mobile-menu-toggle {
        position: relative;

        display: inline-flex !important;

        align-items: center;
        justify-content: center;
        flex-direction: column;

        width: 46px;
        height: 46px;

        min-width: 46px;
        min-height: 46px;

        flex: 0 0 46px;

        gap: 5px;

        margin: 0;
        padding: 0;

        border:
            1px solid rgba(23, 19, 15, 0.28);

        border-radius: 11px;

        background: #ffffff;

        color: #17130f;

        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.04);

        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;

        -webkit-tap-highlight-color: transparent;

        z-index: 10006;

        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
    }


    /* ========================================================
       HAMBURGER LINES
       Your navbar.php contains three direct spans
       ======================================================== */

    #mobileMenuToggle.mobile-menu-toggle > span {
        display: block !important;

        width: 21px;
        height: 2px;

        min-height: 2px;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 20px;

        background: currentColor !important;

        opacity: 1;

        transform-origin: center;

        pointer-events: none;

        transition:
            transform 0.3s ease,
            opacity 0.2s ease;
    }


    /* ========================================================
       TOGGLE ACTIVE
       ======================================================== */

    #mobileMenuToggle.mobile-menu-toggle.is-active,
    #mobileMenuToggle.mobile-menu-toggle[aria-expanded="true"] {
        background: #17130f !important;

        border-color: #17130f;

        color: #ffffff;

        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.18);
    }


    /* first line */

    #mobileMenuToggle.is-active > span:nth-child(1),
    #mobileMenuToggle[aria-expanded="true"] > span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    /* middle line */

    #mobileMenuToggle.is-active > span:nth-child(2),
    #mobileMenuToggle[aria-expanded="true"] > span:nth-child(2) {
        opacity: 0;

        transform: scaleX(0);
    }


    /* last line */

    #mobileMenuToggle.is-active > span:nth-child(3),
    #mobileMenuToggle[aria-expanded="true"] > span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* ========================================================
       OVERLAY
       ======================================================== */

    #mobileMenuOverlay.mobile-menu-overlay {
        position: fixed !important;

        inset: 0 !important;

        display: block !important;

        width: 100vw;
        height: 100vh;
        height: 100dvh;

        margin: 0;
        padding: 0;

        background:
            rgba(12, 10, 8, 0.58);

        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        z-index: 10002;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }


    /* ========================================================
       OVERLAY OPEN
       ======================================================== */

    #mobileMenuOverlay.mobile-menu-overlay.is-open {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* ========================================================
       ACTUAL MOBILE PANEL
       #navbarMenu is the SAME menu used on desktop
       ======================================================== */

    #navbarMenu.navbar-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        width: min(88vw, 390px) !important;

        max-width: 390px !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100vh;

        margin: 0 !important;

        /*
         * Top padding leaves space for the fixed X button.
         */

        padding:
            90px
            24px
            26px !important;

        background:
            radial-gradient(
                circle at top right,
                rgba(201, 150, 74, 0.11),
                transparent 34%
            ),
            #ffffff !important;

        border: 0 !important;

        border-left:
            1px solid rgba(23, 19, 15, 0.08) !important;

        border-radius: 0 !important;

        box-shadow:
            -24px 0 65px rgba(0, 0, 0, 0.16) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;

        opacity: 0 !important;

        visibility: hidden !important;

        pointer-events: none !important;

        transform:
            translate3d(105%, 0, 0) !important;

        z-index: 10004 !important;

        transition:
            transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.25s ease,
            visibility 0.38s ease !important;
    }


    /* ========================================================
       MOBILE PANEL OPEN
       JS adds .is-open
       ======================================================== */

    #navbarMenu.navbar-menu.is-open {
        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform:
            translate3d(0, 0, 0) !important;
    }


    /* ========================================================
       KEEP X BUTTON ABOVE PANEL
       ======================================================== */

    body.mobile-menu-open
    #mobileMenuToggle.mobile-menu-toggle {
        position: fixed !important;

        top: 18px !important;
        right: 18px !important;

        margin: 0 !important;

        z-index: 10007 !important;
    }


    /* ========================================================
       NAV LIST
       ======================================================== */

    #navbarMenu .navbar-nav {
        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        flex-wrap: nowrap !important;

        width: 100% !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    /* ========================================================
       NAV ITEM
       ======================================================== */

    #navbarMenu .navbar-nav > .nav-item {
        position: relative;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom:
            1px solid rgba(23, 19, 15, 0.08);
    }


    /* ========================================================
       NAV LINKS
       ======================================================== */

    #navbarMenu .navbar-nav > .nav-item > .nav-link {
        position: relative;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        height: auto !important;
        min-height: 57px;

        gap: 12px;

        margin: 0 !important;

        padding:
            15px
            3px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        color: #29241f !important;

        font-family:
            "DM Sans",
            Arial,
            sans-serif !important;

        font-size: 15px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;

        text-align: left !important;

        text-decoration: none !important;

        white-space: normal !important;

        cursor: pointer;

        box-shadow: none !important;
    }


    /* ========================================================
       REMOVE DESKTOP ACTIVE UNDERLINE
       ======================================================== */

    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link::after {
        display: none !important;

        content: none !important;
    }


    /* ========================================================
       LINK HOVER / ACTIVE
       ======================================================== */

    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link:hover,

    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link.active {
        color: #a66f22 !important;

        background: transparent !important;
    }


    /* active indicator */

    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link.active::before {
        content: "";

        position: absolute;

        left: -11px;
        top: 50%;

        width: 4px;
        height: 18px;

        border-radius: 10px;

        background: #c9964a;

        transform: translateY(-50%);
    }


    /* ========================================================
       PRODUCTS BUTTON
       ======================================================== */

    #navbarMenu .nav-dropdown-toggle {
        appearance: none !important;
        -webkit-appearance: none !important;

        font-family:
            "DM Sans",
            Arial,
            sans-serif !important;
    }


    /* ========================================================
       PRODUCTS ARROW
       ======================================================== */

    #navbarMenu .nav-dropdown-toggle i {
        flex: 0 0 auto;

        margin-left: auto;

        color: #82786d;

        font-size: 11px;

        transition:
            color 0.25s ease,
            transform 0.3s ease;
    }


    #navbarMenu
    .nav-dropdown.is-active
    > .nav-dropdown-toggle i,

    #navbarMenu
    .nav-dropdown-toggle[aria-expanded="true"] i {
        color: #b47b2a;

        transform: rotate(180deg);
    }


    /* ========================================================
       DISABLE DESKTOP HOVER DROPDOWN ON MOBILE
       ======================================================== */

    #navbarMenu
    .nav-dropdown:hover
    .nav-dropdown-menu,

    #navbarMenu
    .nav-dropdown:focus-within
    .nav-dropdown-menu {
        /*
         * Actual opening below is controlled by .is-open /
         * .is-active, not desktop hover.
         */
    }


    /* ========================================================
       PRODUCTS DROPDOWN
       CLOSED
       ======================================================== */

    #navbarMenu .nav-dropdown-menu {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            0
            0
            14px
            8px !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        transition: none !important;
    }


    /* remove desktop bridge */

    #navbarMenu .nav-dropdown-menu::before {
        display: none !important;

        content: none !important;
    }


    /* ========================================================
       PRODUCTS DROPDOWN OPEN
       ======================================================== */

    #navbarMenu
    .nav-dropdown-menu.is-open,

    #navbarMenu
    .nav-dropdown.is-active
    > .nav-dropdown-menu {
        display: block !important;
    }


    /* ========================================================
       DROPDOWN LINKS
       ======================================================== */

    #navbarMenu .nav-dropdown-link {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 57px;

        gap: 11px;

        margin: 0 0 7px !important;

        padding:
            9px
            10px !important;

        border:
            1px solid rgba(23, 19, 15, 0.07) !important;

        border-radius: 10px !important;

        background:
            #faf8f4 !important;

        color: #29241f !important;

        text-decoration: none !important;

        transform: none !important;

        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease !important;
    }


    #navbarMenu .nav-dropdown-link:hover {
        background: #f8f1e5 !important;

        border-color:
            rgba(201, 150, 74, 0.25) !important;

        color: #9d681e !important;

        transform: none !important;
    }


    /* ========================================================
       DROPDOWN ICON
       ======================================================== */

    #navbarMenu .dropdown-icon {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        border-radius: 9px;

        background: #f3e7d4 !important;

        color: #ad7627 !important;

        font-size: 13px;
    }


    /* ========================================================
       DROPDOWN TEXT
       ======================================================== */

    #navbarMenu .dropdown-content {
        display: flex !important;

        flex: 1 1 auto;

        flex-direction: column;

        min-width: 0;

        gap: 2px;
    }

    #navbarMenu .dropdown-content strong {
        color: inherit;

        font-size: 13px;
        font-weight: 700;

        line-height: 1.3;
    }

    #navbarMenu .dropdown-content small {
        color: #817970;

        font-size: 10.5px;

        line-height: 1.4;
    }


    /* ========================================================
       MOBILE MENU FOOTER
       This exists inside your navbar.php
       ======================================================== */

    #navbarMenu .mobile-menu-footer {
        display: flex !important;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 12px;

        margin-top: auto;

        padding:
            28px
            0
            0 !important;

        border-top:
            1px solid rgba(23, 19, 15, 0.08);

        background: transparent;
    }


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

    #navbarMenu .mobile-menu-label {
        display: block;

        margin: 0;

        color: #8a8178;

        font-size: 10px;
        font-weight: 700;

        line-height: 1;

        letter-spacing: 0.14em;

        text-transform: uppercase;
    }


    /* ========================================================
       PHONE
       ======================================================== */

    #navbarMenu .mobile-menu-contact {
        display: flex;

        align-items: center;

        width: 100%;

        gap: 10px;

        padding:
            3px
            0;

        color: #29241f;

        font-size: 14px;
        font-weight: 600;

        line-height: 1.4;

        text-decoration: none;
    }

    #navbarMenu .mobile-menu-contact i {
        color: #b47b2a;

        font-size: 13px;
    }

    #navbarMenu .mobile-menu-contact:hover {
        color: #a66f22;
    }


    /* ========================================================
       MOBILE ENQUIRE NOW
       Rectangular
       ======================================================== */

    #navbarMenu .mobile-menu-enquiry {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        width: 100% !important;

        min-height: 50px;

        gap: 10px;

        margin: 2px 0 0 !important;

        padding:
            13px
            18px !important;

        border:
            1px solid #17130f !important;

        border-radius: 6px !important;

        background: #17130f !important;

        color: #ffffff !important;

        font-family:
            "DM Sans",
            Arial,
            sans-serif;

        font-size: 13px;
        font-weight: 700;

        line-height: 1;

        text-align: center;

        text-decoration: none !important;

        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.10);

        transition:
            background-color 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease;
    }

    #navbarMenu .mobile-menu-enquiry:hover {
        background: #b47b2a !important;

        border-color: #b47b2a !important;

        color: #ffffff !important;

        transform: translateY(-2px);
    }


    /* ========================================================
       PANEL SCROLLBAR
       ======================================================== */

    #navbarMenu.navbar-menu {
        scrollbar-width: thin;

        scrollbar-color:
            rgba(180, 123, 42, 0.35)
            transparent;
    }

    #navbarMenu.navbar-menu::-webkit-scrollbar {
        width: 4px;
    }

    #navbarMenu.navbar-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    #navbarMenu.navbar-menu::-webkit-scrollbar-thumb {
        background:
            rgba(180, 123, 42, 0.35);

        border-radius: 20px;
    }

}


/* ============================================================
   03. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    #navbarMenu.navbar-menu {
        width:
            min(90vw, 360px) !important;

        max-width: 360px !important;

        padding:
            84px
            20px
            24px !important;
    }


    body.mobile-menu-open
    #mobileMenuToggle.mobile-menu-toggle {
        top: 14px !important;
        right: 15px !important;
    }


    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link {
        min-height: 54px;

        font-size: 14px !important;
    }

}


/* ============================================================
   04. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    #navbarMenu.navbar-menu {
        width: 92vw !important;

        max-width: 350px !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }

}


/* ============================================================
   05. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    #navbarMenu.navbar-menu {
        width: 94vw !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }

}


/* ============================================================
   06. DESKTOP SAFETY RESET
   ============================================================ */

@media (min-width: 992px) {

    /*
     * Prevent mobile state from affecting desktop if browser
     * is resized while menu is open.
     */

    #navbarMenu.navbar-menu {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform: none;
    }

    #mobileMenuOverlay.mobile-menu-overlay {
        display: none !important;
    }

    .mobile-menu-footer {
        display: none !important;
    }

}


/* ============================================================
   07. ACCESSIBILITY
   ============================================================ */

#mobileMenuToggle:focus-visible {
    outline:
        3px solid rgba(180, 123, 42, 0.28);

    outline-offset: 3px;
}

#navbarMenu a:focus-visible,
#navbarMenu button:focus-visible {
    outline:
        2px solid #b47b2a;

    outline-offset: 2px;
}


/* ============================================================
   08. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    #navbarMenu.navbar-menu,
    #mobileMenuOverlay.mobile-menu-overlay,
    #mobileMenuToggle.mobile-menu-toggle,
    #mobileMenuToggle.mobile-menu-toggle > span,
    #navbarMenu .nav-dropdown-toggle i {
        transition: none !important;
    }

}

/* ============================================================
   RAEES IMPORT & EXPORT
   MOBILE MENU FINAL FIX
   Paste at END of mobile-menu.css
   ============================================================ */

@media (max-width: 991.98px) {

    /* Header must stay above page overlay */
    #siteHeader,
    .site-header,
    .main-navbar {
        position: relative !important;
        z-index: 10010 !important;
    }

    /* Navbar itself */
    .navbar-inner {
        position: relative !important;
        z-index: 10012 !important;
    }

    /* --------------------------------------------------------
       DARK PAGE OVERLAY
       Must remain BEHIND menu + header
       -------------------------------------------------------- */

    #mobileMenuOverlay.mobile-menu-overlay {
        position: fixed !important;
        inset: 0 !important;

        display: block !important;

        width: 100% !important;
        height: 100dvh !important;

        background: rgba(15, 12, 9, 0.55) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        z-index: 9990 !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;
    }

    #mobileMenuOverlay.mobile-menu-overlay.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* --------------------------------------------------------
       MOBILE MENU PANEL
       -------------------------------------------------------- */

    #navbarMenu.navbar-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: min(88vw, 360px) !important;
        max-width: 360px !important;

        height: 100dvh !important;

        display: flex !important;
        flex-direction: column !important;

        padding:
            90px
            24px
            24px !important;

        margin: 0 !important;

        background: #ffffff !important;

        border: 0 !important;
        border-left:
            1px solid rgba(0, 0, 0, 0.08) !important;

        border-radius: 0 !important;

        box-shadow:
            -20px 0 60px rgba(0, 0, 0, 0.18) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateX(105%) !important;

        z-index: 10020 !important;

        transition:
            transform 0.32s ease,
            opacity 0.22s ease,
            visibility 0.32s ease !important;
    }


    /* OPEN */
    #navbarMenu.navbar-menu.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateX(0) !important;
    }


    /* --------------------------------------------------------
       HAMBURGER / CLOSE BUTTON
       -------------------------------------------------------- */

    #mobileMenuToggle.mobile-menu-toggle {
        position: relative !important;

        display: inline-flex !important;

        width: 46px !important;
        height: 46px !important;

        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;

        gap: 5px !important;

        background: #ffffff !important;
        color: #17130f !important;

        border:
            1px solid rgba(23, 19, 15, 0.22) !important;

        border-radius: 11px !important;

        z-index: 10030 !important;
    }


    #mobileMenuToggle.mobile-menu-toggle > span {
        display: block !important;

        width: 21px !important;
        height: 2px !important;

        background: currentColor !important;

        border-radius: 20px !important;

        opacity: 1;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease !important;
    }


    /* X button when open */
    body.mobile-menu-open
    #mobileMenuToggle.mobile-menu-toggle {
        position: fixed !important;

        top: 16px !important;
        right: 16px !important;

        background: #17130f !important;
        color: #ffffff !important;

        border-color: #17130f !important;

        z-index: 10030 !important;
    }


    #mobileMenuToggle.is-active > span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg) !important;
    }

    #mobileMenuToggle.is-active > span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    #mobileMenuToggle.is-active > span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg) !important;
    }


    /* --------------------------------------------------------
       MENU LIST
       -------------------------------------------------------- */

    #navbarMenu .navbar-nav {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        list-style: none !important;
    }


    #navbarMenu .navbar-nav > .nav-item {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        border-bottom:
            1px solid rgba(23, 19, 15, 0.09) !important;
    }


    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link {

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        min-height: 55px !important;

        margin: 0 !important;

        padding: 15px 4px !important;

        background: transparent !important;

        border: 0 !important;

        color: #17130f !important;

        font-size: 15px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;

        text-decoration: none !important;
        text-align: left !important;
    }


    #navbarMenu
    .navbar-nav
    > .nav-item
    > .nav-link.active {

        color: #b47b2a !important;
    }


    /* --------------------------------------------------------
       PRODUCTS DROPDOWN
       -------------------------------------------------------- */

    #navbarMenu .nav-dropdown-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            0
            0
            12px
            6px !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
    }


    #navbarMenu .nav-dropdown-menu.is-open,
    #navbarMenu
    .nav-dropdown.is-active
    > .nav-dropdown-menu {

        display: block !important;
    }


    #navbarMenu .nav-dropdown-link {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        margin: 6px 0 !important;

        padding: 10px !important;

        background: #faf8f4 !important;

        border:
            1px solid rgba(23, 19, 15, 0.08) !important;

        border-radius: 8px !important;

        color: #29241f !important;

        text-decoration: none !important;
    }


    /* --------------------------------------------------------
       MOBILE MENU FOOTER
       -------------------------------------------------------- */

    #navbarMenu .mobile-menu-footer {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 12px !important;

        margin-top: auto !important;

        padding-top: 22px !important;

        border-top:
            1px solid rgba(23, 19, 15, 0.08) !important;
    }


    #navbarMenu .mobile-menu-enquiry {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        min-height: 50px !important;

        padding: 13px 18px !important;

        background: #17130f !important;

        border:
            1px solid #17130f !important;

        border-radius: 6px !important;

        color: #ffffff !important;

        font-weight: 700 !important;

        text-decoration: none !important;
    }


    /* --------------------------------------------------------
       BODY
       -------------------------------------------------------- */

    body.mobile-menu-open {
        overflow: hidden !important;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    #navbarMenu.navbar-menu {

        width: 86vw !important;
        max-width: 340px !important;

        padding:
            82px
            20px
            22px !important;
    }

}