/* ============================================
   MOIF NAVBAR - RTL/LTR RESPONSIVE DESIGN
   Color Scheme & Typography Applied
   ============================================ */

:root {
    --moif-blue-dark: #0D1B3E!important ;
    --moif-blue: #1A2B4A!important ;
    --moif-gold: #C9A227!important ;
    --moif-gold-bright: #F4D03F!important ;
    --moif-white: #FFFFFF!important ;
    --moif-light-bg: #F8F9FA!important ;
    --moif-border: #E9ECEF!important ;
    --moif-text: #495057!important ;
    --moif-text-light: #6C757D!important ;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
    font-family: 'Arial', sans-serif!important ;
    font-size: 15px!important ;
    line-height: 1.6!important ;
}

[lang="ar"],
[dir="rtl"] {
    font-family: "Tajawal", "Open Sans", sans-serif !important;
 }

/* ============================================
   NAVBAR AREA - BASE
   ============================================ */
.navbar-area {
    position: relative!important ;
    background-color: var(--moif-white)!important ;
    transition: all 0.3s ease!important ;
}

.navbar-area .navbar-brand {
    margin-right: 0!important ;
    padding: 0!important ;
}

[dir="ltr"] .navbar-area .navbar-brand {
    margin-left: 0!important ;
}

.navbar-area.is-sticky {
    top: 0!important ;
    left: 0!important ;
    width: 100%!important ;
    z-index: 999!important ;
    position: fixed!important ;
    background-color: var(--moif-white) !important ;
    box-shadow: 0 4px 20px rgba(13, 27, 62, 0.1)!important ;
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown!important ;
}

/* ============================================
   DESKTOP NAVIGATION
   ============================================ */
.desktop-nav {
    background-color: var(--moif-white)!important ;
    padding-top: 0!important ;
    padding-bottom: 0!important ;
    border-bottom: 1px solid var(--moif-border)!important ;
}

.desktop-nav .navbar {
    transition: all ease 0.5s!important ;
    z-index: 2!important ;
    padding: 0!important ;
}

.desktop-nav .navbar ul {
    padding-left: 0!important ;
    margin-bottom: 0!important ;
    list-style-type: none!important ;
}

[dir="ltr"] .desktop-nav .navbar ul {
    padding-right: 0!important ;
}

.desktop-nav .navbar .navbar-nav {
    margin: 0 auto !important;
}

.desktop-nav .navbar .navbar-nav .nav-item {
    position: relative!important ;
    padding: 35px 0!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item a {
    font-weight: 700!important ;
    font-size: 15px!important ;
    color: var(--moif-text)!important ;
    line-height: 1!important ;
    padding: 0!important ;
    margin: 0 20px!important ;
    transition: all 0.3s ease!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item a:hover,
.desktop-nav .navbar .navbar-nav .nav-item a:focus,
.desktop-nav .navbar .navbar-nav .nav-item a.active {
    color: var(--moif-gold)!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item a i {
    font-size: 14px!important ;
    line-height: 0!important ;
    position: relative!important ;
    top: 2px!important ;
}

[dir="rtl"] .desktop-nav .navbar .navbar-nav .nav-item a i {
    margin-left: 5px!important ;
}

[dir="ltr"] .desktop-nav .navbar .navbar-nav .nav-item a i {
    margin-right: 5px!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item:last-child a {
    margin-right: 0!important ;
}

[dir="ltr"] .desktop-nav .navbar .navbar-nav .nav-item:last-child a {
    margin-left: 0!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item:first-child a {
    margin-left: 0!important ;
}

[dir="ltr"] .desktop-nav .navbar .navbar-nav .nav-item:first-child a {
    margin-right: 0!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover a,
.desktop-nav .navbar .navbar-nav .nav-item:focus a,
.desktop-nav .navbar .navbar-nav .nav-item.active a {
    color: var(--moif-gold)!important ;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
    box-shadow: 0 4px 20px rgba(13, 27, 62, 0.15)!important ;
    transition: all 0.3s ease-in-out!important ;
    background: var(--moif-white)!important ;
    position: absolute!important ;
    visibility: hidden!important ;
    border-radius: 0!important ;
    display: block!important ;
    width: 250px!important ;
    border: none!important ;
    z-index: 99!important ;
    opacity: 0!important ;
    top: 80px!important ;
    padding: 0!important ;
}

[dir="rtl"] .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
    right: 0!important ;
    left: auto!important ;
}

[dir="ltr"] .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
    left: 0!important ;
    right: auto!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
    padding: 0!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
    color: var(--moif-blue-dark)!important ;
    padding: 15px 20px!important ;
    border-bottom: 1px dashed var(--moif-border)!important ;
    margin: 0!important ;
    font-size: 14px!important ;
    font-weight: 600!important ;
    line-height: 1.4!important ;
    display: block!important ;
    transition: all 0.3s ease!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a i {
    font-size: 14px!important ;
    top: 0!important ;
}

[dir="rtl"] .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a i {
    float: left!important ;
}

[dir="ltr"] .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a i {
    float: right!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover,
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus,
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
    color: var(--moif-gold)!important ;
    background-color: rgba(201, 162, 39, 0.05)!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child a {
    border-bottom: none!important ;
}

/* Nested Dropdowns */
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
    top: 0!important ;
    opacity: 0!important ;
    visibility: hidden!important ;
}

[dir="rtl"] .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
    right: 250px!important ;
    left: auto!important ;
}

[dir="ltr"] .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
    left: 250px!important ;
    right: auto!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
    opacity: 1!important ;
    visibility: visible!important ;
    top: 0!important ;
}

.desktop-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
    top: 80%!important ;
    opacity: 1!important ;
    margin-top: 0!important ;
    visibility: visible!important ;
}

/* ============================================
   OTHERS OPTIONS - BUTTONS & ACTIONS
   ============================================ */
.desktop-nav .navbar .others-options {
    border-left: 1px solid var(--moif-border)!important ;
    padding-left: 30px!important ;
}

[dir="rtl"] .desktop-nav .navbar .others-options {
    border-left: none!important ;
    border-right: 1px solid var(--moif-border)!important ;
    padding-left: 0!important ;
    padding-right: 30px!important ;
    margin-right: 30px!important ;
    margin-left: 0!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options {
    margin-left: 30px!important ;
}

.desktop-nav .navbar .others-options ul {
    padding: 0!important ;
    margin: 0!important ;
    list-style-type: none!important ;
    line-height: 1!important ;
}

.desktop-nav .navbar .others-options ul li {
    display: inline-block!important ;
    margin-right: 25px!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options ul li {
    margin-left: 25px!important ;
    margin-right: 0!important ;
}

.desktop-nav .navbar .others-options ul li:last-child {
    margin-right: 0!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options ul li:last-child {
    margin-left: 0!important ;
}

/* Phone Number */
.desktop-nav .navbar .others-options ul li .call {
    font-family: 'Tajawal', Arial, sans-serif!important ;
    font-size: 16px!important ;
    font-weight: 600!important ;
    color: var(--moif-blue-dark)!important ;
    position: relative!important ;
    top: -6px!important ;
}

.desktop-nav .navbar .others-options ul li .call i {
    position: relative!important ;
    font-size: 20px!important ;
    top: 4px!important ;
    color: var(--moif-gold)!important ;
}

[dir="rtl"] .desktop-nav .navbar .others-options ul li .call i {
    margin-left: 5px!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options ul li .call i {
    margin-right: 5px!important ;
}

/* Search Button */
.desktop-nav .navbar .others-options ul li .option-item {
    color: var(--moif-text)!important ;
    display: inline-block!important ;
    line-height: 1!important ;
    position: relative!important ;
    top: 0!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-btn {
    cursor: pointer!important ;
    transition: all ease 0.3s!important ;
    color: var(--moif-blue-dark)!important ;
    text-align: center!important ;
    font-size: 22px!important ;
    display: inline-block!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-btn:hover {
    color: var(--moif-gold)!important ;
    transform: translateY(-2px)!important ;
}

/* Search Popup */
.desktop-nav .navbar .others-options ul li .option-item .search-overlay {
    display: none!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup {
    position: absolute!important ;
    top: 100%!important ;
    width: 320px!important ;
    background: var(--moif-white)!important ;
    z-index: 2!important ;
    padding: 20px!important ;
    box-shadow: 0 4px 20px rgba(13, 27, 62, 0.15)!important ;
    margin-top: 18px!important ;
    border-radius: 8px!important ;
}

[dir="rtl"] .desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup {
    left: 0!important ;
    right: auto!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup {
    right: 0!important ;
    left: auto!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form {
    position: relative!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-input {
    display: block!important ;
    width: 100%!important ;
    height: 50px!important ;
    line-height: initial!important ;
    border: 2px solid var(--moif-border)!important ;
    color: var(--moif-blue-dark)!important ;
    outline: 0!important ;
    transition: all ease 0.3s!important ;
    font-size: 15px!important ;
    padding: 4px 60px 4px 15px!important ;
    border-radius: 6px!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-input {
    padding: 4px 15px 4px 60px!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-input:focus {
    border-color: var(--moif-gold)!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-button {
    position: absolute!important ;
    top: 0!important ;
    height: 50px!important ;
    background: var(--moif-gold)!important ;
    border: none!important ;
    width: 50px!important ;
    outline: 0!important ;
    color: var(--moif-white)!important ;
    transition: all ease 0.3s!important ;
    padding: 0!important ;
    border-radius: 0 6px 6px 0!important ;
    cursor: pointer!important ;
}

[dir="rtl"] .desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-button {
    left: 0!important ;
    right: auto!important ;
    border-radius: 6px 0 0 6px!important ;
}

[dir="ltr"] .desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-button {
    right: 0!important ;
    left: auto!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .search-overlay.search-popup .search-form .search-button:hover {
    background-color: var(--moif-gold-bright)!important ;
    transform: translateY(-2px)!important ;
}

/* Close Button */
.desktop-nav .navbar .others-options ul li .option-item .close-btn {
    cursor: pointer!important ;
    transition: all ease 0.3s!important ;
    color: var(--moif-blue-dark)!important ;
    text-align: center!important ;
    display: none!important ;
    font-size: 22px!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .close-btn:hover {
    color: var(--moif-gold)!important ;
    transform: rotate(90deg)!important ;
}

.desktop-nav .navbar .others-options ul li .option-item .close-btn.active {
    display: block!important ;
    color: var(--moif-gold)!important ;
}

/* ============================================
   MOBILE RESPONSIVE NAVIGATION
   ============================================ */
.mobile-responsive-nav {
    display: none!important ;
}

/* ============================================
   OTHERS OPTIONS FOR RESPONSIVE
   ============================================ */
.others-option-for-responsive {
    display: none!important ;
}

.others-option-for-responsive .dot-menu {
    padding: 0 10px!important ;
    height: 30px!important ;
    cursor: pointer!important ;
    z-index: 9991!important ;
    position: absolute!important ;
    top: -31px!important ;
}

[dir="rtl"] .others-option-for-responsive .dot-menu {
    left: 90px!important ;
    right: auto!important ;
    margin:-27px;
}

[dir="ltr"] .others-option-for-responsive .dot-menu {
    right: 90px !important;
    left: auto !important;
    margin: -27px;
}

.others-option-for-responsive .dot-menu .inner {
    display: flex!important ;
    align-items: center!important ;
    height: 30px!important ;
}

.others-option-for-responsive .dot-menu .inner .circle {
    height: 5px!important ;
    width: 5px!important ;
    border-radius: 100%!important ;
    margin: 0 2px!important ;
    transition: all ease 0.3s!important ;
    background-color: var(--moif-gold)!important ;
}

.others-option-for-responsive .dot-menu:hover .inner .circle {
    background-color: var(--moif-gold-bright)!important ;
}

.others-option-for-responsive .container .container {
    position: absolute!important ;
    top: 10px!important ;
    max-width: 320px!important ;
    opacity: 0!important ;
    visibility: hidden!important ;
    transition: all ease 0.3s!important ;
    transform: scaleY(0)!important ;
    z-index: 2!important ;
    padding: 0 15px!important ;
}

[dir="rtl"] .others-option-for-responsive .container .container {
    left: -2px!important ;
    right: auto!important ;
    margin-right: auto!important ;
}

[dir="ltr"] .others-option-for-responsive .container .container {
    right: -2px!important ;
    left: auto!important ;
    margin-left: auto!important ;
}

.others-option-for-responsive .container .container.active {
    opacity: 1!important ;
    visibility: visible!important ;
    transform: scaleY(1)!important ;
}

.others-option-for-responsive .others-option {
    background-color: var(--moif-white)!important ;
    padding: 20px!important ;
    border-radius: 8px!important ;
    box-shadow: 0 4px 20px rgba(13, 27, 62, 0.15)!important ;
}

/* ============================================
   BUTTONS STYLING
   ============================================ */
.default-btn {
    display: inline-block!important ;
    padding: 14px 32px!important ;
    font-size: 16px!important ;
    font-weight: 700!important ;
    background: var(--moif-gold)!important ;
    color: var(--moif-blue-dark)!important ;
    border: 2px solid var(--moif-gold)!important ;
    border-radius: 6px!important ;
    transition: all 0.3s ease!important ;
    text-decoration: none!important ;
    cursor: pointer!important ;
}

.default-btn:hover {
    background: var(--moif-gold-bright)!important ;
    border-color: var(--moif-gold-bright)!important ;
    transform: translateY(-3px)!important ;
    box-shadow: 0 5px 15px rgba(201, 162, 39, 0.4)!important ;
}

.default-btn-secondary {
    background: transparent!important ;
    color: var(--moif-white)!important ;
    border: 2px solid var(--moif-white)!important ;
}

.default-btn-secondary:hover {
    background: var(--moif-white)!important ;
    color: var(--moif-blue-dark)!important ;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInDown {
    0% {
        opacity: 0!important ;
        transform: translateY(-20px)!important ;
    }
    100% {
        opacity: 1!important ;
        transform: translateY(0)!important ;
    }
}

/* ============================================
   RESPONSIVE - MOBILE & TABLET (< 992px)
   ============================================ */
@media only screen and (max-width: 991px) {
    .navbar-area {
        background-color: var(--moif-white)!important ;
        padding: 15px 0!important ;
        z-index: 999!important ;
    }

    .navbar-area.is-sticky {
        padding: 15px 0!important ;
    }

    .mobile-responsive-nav {
        display: block!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu {
        position: relative!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav {
        margin-top: 50px!important ;
        background-color: var(--moif-white)!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul {
        font-size: 15px!important ;
        border: none !important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a {
        color: var(--moif-blue-dark)!important ;
        border-top-color: var(--moif-border)!important ;
        text-transform: capitalize!important ;
        padding: 12px 15px!important ;
        font-weight: 600!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a i {
        display: none!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a.mean-expand {
        width: 100%!important ;
        height: 28px!important ;
        padding: 11px !important ;
        background: transparent!important ;
        border-left: none!important ;
        border-bottom: none!important ;
    }

    [dir="rtl"] .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a.mean-expand {
        text-align: left!important ;
    }

    [dir="ltr"] .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a.mean-expand {
        text-align: right!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a.active,
    .mobile-responsive-nav .mobile-responsive-menu.mean-container .mean-nav ul li a:hover {
        color: var(--moif-gold)!important ;
        background-color: rgba(201, 162, 39, 0.05)!important ;
    }

    .mobile-responsive-nav .mobile-responsive-menu.mean-container .navbar-nav {
        max-height: 400px!important ;
        overflow-y: auto!important ;
        box-shadow: 0 4px 20px rgba(13, 27, 62, 0.1)!important ;
    }

    .mobile-responsive-nav .mean-container a.meanmenu-reveal {
        top: 0!important ;
        padding: 7px 0 0!important ;
        width: 35px!important ;
        height: 30px!important ;
        color: var(--moif-gold)!important ;
    }

    [dir="rtl"] .mobile-responsive-nav .mean-container a.meanmenu-reveal {
        left: 0!important ;
        right: auto!important ;
    }

    [dir="ltr"] .mobile-responsive-nav .mean-container a.meanmenu-reveal {
        right: 0!important ;
        left: auto!important ;
    }

    .mobile-responsive-nav .mean-container a.meanmenu-reveal span {
        background: var(--moif-gold)!important ;
        height: 4px!important ;
        margin-top: -6px!important ;
        border-radius: 3px!important ;
        position: relative!important ;
        top: 8px!important ;
    }

    .mobile-responsive-nav .mean-container .mean-bar {
        background: transparent!important ;
        position: absolute!important ;
        z-index: 999!important ;
        padding: 0!important ;
        margin:9px;
    }

    .mobile-responsive-nav .others-options {
        display: none!important ;
    }

    .mobile-responsive-nav .logo {
        position: relative!important ;
        width: 140px!important ;
        z-index: 999!important ;
    }

    .desktop-nav {
        display: none!important ;
    }

    .others-option-for-responsive {
        display: block!important ;
    }

    .others-option-for-responsive .others-option ul {
        line-height: 1!important ;
        top: -1px!important ;
        position: relative!important ;
    }

    .others-option-for-responsive .others-option ul li .default-btn {
        padding: 12px 28px!important ;
        font-size: 15px!important ;
    }

    .others-option-for-responsive .others-option ul li .option-item .search-overlay.search-popup {
        width: 280px!important ;
    }

    [dir="rtl"] .others-option-for-responsive .others-option ul li .option-item .search-overlay.search-popup {
        right: auto!important ;
        left: -75px!important ;
    }

    [dir="ltr"] .others-option-for-responsive .others-option ul li .option-item .search-overlay.search-popup {
        left: auto!important ;
        right: -75px!important ;
    }

    .others-option-for-responsive .container .container {
        max-width: 280px!important ;
    }
}

/* ============================================
   RESPONSIVE - TABLET (768px - 991px)
   ============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mobile-responsive-nav .logo {
        width: 160px!important ;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE (< 576px)
   ============================================ */
@media only screen and (max-width: 575px) {
    .mobile-responsive-nav .logo {
        width: 120px!important ;
    }

    .others-option-for-responsive .container .container {
        max-width: 260px!important ;
    }

    .default-btn {
        padding: 12px 24px!important ;
        font-size: 15px!important ;
    }
}

/* ============================================
   CUSTOM CONTAINER WIDTHS
   ============================================ */
@media only screen and (min-width: 1300px) {
    .container {
        max-width: 1300px!important ;
    }
}

@media only screen and (min-width: 1400px) {
    .container {
        max-width: 1320px!important ;
    }
}

@media only screen and (min-width: 1500px) {
    .container {
        max-width: 1600px!important ;
    }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms!important ;
        animation-iteration-count: 1!important ;
        transition-duration: 0.01ms!important ;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .navbar-area,
    .mobile-responsive-nav,
    .others-option-for-responsive {
        display: none!important ;
    }
}
.others-option-for-responsive {
    display: none !important;
}


@media only screen and (max-width: 991px) {
    .others-option-for-responsive {
        display: block !important;
        position: relative;
    }

        .others-option-for-responsive .dot-menu {
            position: relative;
            z-index: 10001;
        }

        /* Make dot-menu focusable */
        .others-option-for-responsive .dot-menu {
            outline: none;
        }

            /* Show menu when dot-menu is focused */
            .others-option-for-responsive:focus-within .container .container,
            .others-option-for-responsive .dot-menu:focus + .container .container {
                display: block !important;
            }

        /* Make sure the menu stays visible when hovering over it */
        .others-option-for-responsive .container .container:hover {
            display: block !important;
        }
}
[dir="rtl"] .mean-nav ul li a {
    text-align: right !important;
    direction: rtl !important;
}
 
 


/*add*/
/* ============================================
   ENHANCED RESPONSIVE NAVBAR - FIT TO SCREEN
   ============================================ */

/* 1. FLEXIBLE NAVBAR CONTAINER */
.navbar-area .container {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* 2. MAIN NAVBAR FLEX CONTAINER */
.desktop-nav .navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

    /* 3. NAVIGATION MENU - AUTO ADJUST */
    .desktop-nav .navbar .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important; /* Allows shrinking */
        overflow: visible !important;
        padding: 0 10px !important;
    }

        /* 4. NAV ITEMS - DYNAMIC SIZING */
        .desktop-nav .navbar .navbar-nav .nav-item {
            padding: 20px 0 !important;
            flex: 0 0 auto !important;
            position: relative !important;
        }

            .desktop-nav .navbar .navbar-nav .nav-item a {
                margin: 0 !important;
                padding: 0 8px !important; /* Using padding instead of margin */
                font-size: 14px !important;
                display: inline-block !important;
                white-space: nowrap !important;
                line-height: 1.2 !important;
               /* text-align: center !important;*/
            }

/* 5. LOGO SIZE CONTROL */
.navbar-brand.logo {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

    .navbar-brand.logo img {
        max-height: 50px !important;
        width: auto !important;
        max-width: 160px !important;
    }

/* 6. OTHERS OPTIONS - MINIMAL WIDTH */
.desktop-nav .navbar .others-options {
    flex: 0 0 auto !important;
    min-width: fit-content !important;
    padding-left: 15px !important;
    padding-right: 0 !important;
    border-left: 1px solid var(--moif-border) !important;
}

[dir="rtl"] .desktop-nav .navbar .others-options {
    padding-left: 0 !important;
    padding-right: 15px !important;
    border-left: none !important;
    border-right: 1px solid var(--moif-border) !important;
}

.desktop-nav .navbar .others-options ul li {
    margin: 0 !important;
}

    .desktop-nav .navbar .others-options ul li .call {
        font-size: 14px !important;
        white-space: nowrap !important;
        padding: 0 5px !important;
    }

/* 7. DYNAMIC FONT SIZING - SCALE WITH SCREEN */
@media only screen and (min-width: 1400px) {
    .desktop-nav .navbar .navbar-nav .nav-item a {
        font-size: 15px !important;
        padding: 0 10px !important;
    }

    .navbar-brand.logo img {
        max-height: 55px !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .desktop-nav .navbar .navbar-nav .nav-item a {
        font-size: 14.5px !important;
        padding: 0 9px !important;
    }

    .navbar-brand.logo img {
        max-height: 50px !important;
        max-width: 140px !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .desktop-nav .navbar .navbar-nav .nav-item a {
        font-size: 13.5px !important;
        padding: 0 8px !important;
    }

    .desktop-nav .navbar .navbar-nav .nav-item {
        padding: 15px 0 !important;
    }

    .navbar-brand.logo img {
        max-height: 45px !important;
        max-width: 120px !important;
    }

    .desktop-nav .navbar .others-options ul li .call {
        font-size: 13px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .desktop-nav .navbar .navbar-nav .nav-item a {
        font-size: 13px !important;
        padding: 0 7px !important;
    }

    .navbar-brand.logo img {
        max-height: 40px !important;
        max-width: 100px !important;
    }

    .desktop-nav .navbar .others-options ul li .call {
        font-size: 12.5px !important;
    }

    .desktop-nav .navbar .others-options {
        padding-left: 10px !important;
    }

    [dir="rtl"] .desktop-nav .navbar .others-options {
        padding-right: 10px !important;
    }
}

/* 8. EXTREME COMPACT MODE FOR VERY SMALL DESKTOPS */
@media only screen and (max-width: 1100px) and (min-width: 768px) {
    .desktop-nav .navbar .navbar-nav {
        padding: 0 5px !important;
    }

        .desktop-nav .navbar .navbar-nav .nav-item a {
            font-size: 12.5px !important;
            padding: 0 6px !important;
            letter-spacing: -0.2px !important;
        }

    .navbar-brand.logo img {
        max-height: 35px !important;
        max-width: 90px !important;
    }

    .desktop-nav .navbar .others-options ul li .call {
        font-size: 12px !important;
        padding: 0 3px !important;
    }

        .desktop-nav .navbar .others-options ul li .call i {
            font-size: 16px !important;
            margin: 0 2px !important;
        }
}

/* 9. MINIMAL MODE - ULTRA COMPACT */
@media only screen and (max-width: 900px) and (min-width: 768px) {
    .desktop-nav .navbar .navbar-nav .nav-item a {
        font-size: 12px !important;
        padding: 0 5px !important;
        letter-spacing: -0.3px !important;
    }

    .navbar-brand.logo img {
        max-height: 30px !important;
        max-width: 80px !important;
    }

    .desktop-nav .navbar .navbar-nav .nav-item {
        padding: 12px 0 !important;
    }

    .desktop-nav .navbar .others-options ul li .call {
        font-size: 11.5px !important;
    }

        .desktop-nav .navbar .others-options ul li .call i {
            font-size: 14px !important;
            margin: 0 1px !important;
        }
}

/* 10. TABLET BREAKPOINT - SWITCH TO MOBILE */
@media only screen and (max-width: 767px) {
    .desktop-nav {
        display: none !important;
    }

    .mobile-responsive-nav {
        display: block !important;
    }
}

/* 11. DROPDOWNS - COMPACT DESIGN */
@media only screen and (max-width: 1300px) {
    .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
        width: 240px !important;
        max-width: 240px !important;
    }

        .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
            font-size: 13px !important;
            padding: 12px 15px !important;
        }
}

@media only screen and (max-width: 1100px) {
    .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
        width: 220px !important;
        max-width: 220px !important;
    }

        .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
            font-size: 12.5px !important;
            padding: 10px 12px !important;
        }
}

/* 12. UTILITY CLASSES FOR TEXT COMPRESSION */
.text-tight {
    letter-spacing: -0.2px !important;
}

.text-tighter {
    letter-spacing: -0.3px !important;
}

.text-tightest {
    letter-spacing: -0.4px !important;
}

/* 13. STICKY NAVBAR OPTIMIZATION */
.navbar-area.is-sticky {
    padding: 0 !important;
}

    .navbar-area.is-sticky .desktop-nav .navbar .navbar-nav .nav-item {
        padding: 12px 0 !important;
    }

    .navbar-area.is-sticky .navbar-brand.logo img {
        max-height: 40px !important;
        max-width: 120px !important;
    }

    .navbar-area.is-sticky .desktop-nav .navbar .navbar-nav .nav-item a {
        font-size: 13px !important;
        padding: 0 7px !important;
    }

/* 14. FIX FOR RTL SPECIFIC COMPRESSION */
[dir="rtl"] .desktop-nav .navbar .navbar-nav .nav-item a {
    letter-spacing: 0 !important; /* Arabic doesn't need letter-spacing */
}

/* 15. BODY OVERFLOW PROTECTION */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* 16. NAVBAR MINIMUM HEIGHT */
.navbar-area {
    min-height: 60px !important;
}