

/* Start Mobile Css Menu Code 30 Aug 2026 */
@media (max-width: 767px) {
    .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured {
        display: none !important;
    }
}


/* Mobile Menu */
/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu,
.mobile-menu-overlay {
    display: none;
}


/* =========================================================
   MOBILE ONLY
   ========================================================= */

@media (max-width: 991px) {

    /* Hide desktop navigation */
    .navbar .navbar-collapse {
        display: none !important;
    }

    /* Hide desktop mega menu featured area */
    .navbar .nav-block-featured {
        display: none !important;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .sticky-navbar {
        position: relative;
        z-index: 9999;
        background: #ffffff;
        min-height: 82px;
    }

    .sticky-navbar .container-fluid {
        height: 82px;
        display: flex;
        align-items: center;
        padding: 0 15px;
    }

    .sticky-navbar .navbar-brand {
        margin: 0;
    }

    .sticky-navbar .logo-dark {
        width: 145px;
        height: auto;
    }

    /* Hide second logo on mobile if required */
    .sticky-navbar .sylablogo {
        display: none;
    }


    /* -----------------------------------------------------
       MOBILE SEARCH ICON
       ----------------------------------------------------- */

    .sticky-navbar:after {
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;

        position: absolute;
        right: 63px;
        top: 29px;

        font-size: 19px;
        color: #182b68;

        cursor: pointer;
    }


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    .sticky-navbar .navbar-toggler {
        display: flex !important;

        position: absolute;
        right: 15px;
        top: 22px;

        width: 36px;
        height: 36px;

        padding: 0;
        margin: 0;

        border: 0;
        outline: none;
        background: transparent;

        align-items: center;
        justify-content: center;

        z-index: 10000;
    }

    .menu-lines,
    .menu-lines:before,
    .menu-lines:after,
    .menu-lines span {
        width: 27px;
        height: 2px;
        background: #182b68;
        display: block;
        position: absolute;
        content: "";
    }

    .menu-lines {
        position: relative;
        background: #182b68;
    }

    .menu-lines:before {
        top: -8px;
    }

    .menu-lines:after {
        top: 8px;
    }


    /* =====================================================
       DARK OVERLAY
       ===================================================== */

    .mobile-menu-overlay {
        position: fixed;
        inset: 0;

        background: rgba(10, 19, 49, .52);

        z-index: 99990;

        opacity: 0;
        visibility: hidden;

        transition: all .3s ease;
    }


    /* =====================================================
       MOBILE DRAWER
       ===================================================== */

    .mobile-menu {

        display: block;

        position: fixed;

        top: 0;
        right: 0;

        width: min(390px, 88vw);
        height: 100vh;

        background: #fff;

        z-index: 100000;

        overflow-y: auto;
        overflow-x: hidden;

        transform: translateX(105%);

        transition: transform .35s ease;

        box-shadow: -8px 0 35px rgba(0,0,0,.15);
    }


    /* OPEN STATE */

    body.mobile-menu-open {
        overflow: hidden;
    }

    body.mobile-menu-open .mobile-menu {
        transform: translateX(0);
    }

    body.mobile-menu-open .mobile-menu-overlay {
        opacity: 1;
        visibility: visible;
    }


    /* =====================================================
       MOBILE MENU HEADER
       ===================================================== */

    .mobile-menu-header {

        height: 84px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 8px 15px;

        border-bottom: 1px solid #eeeeee;

        background: #fff;
    }

    .mobile-menu-logo img {

        width: 137px;
        height: auto;

        display: block;
    }

    .mobile-menu-close {

        width: 40px;
        height: 40px;

        border: 0;
        background: transparent;

        color: #182b68;

        font-size: 20px;

        cursor: pointer;
    }


    /* =====================================================
       SEARCH
       ===================================================== */

    .mobile-search {

        display: flex;

        margin: 16px 14px;

        height: 48px;

        border: 1px solid #dddddd;

        background: #fff;
    }

    
    .mobile-search button {

        width: 53px;

        border: 0;

        background: #182b68;

        color: #fff;

        font-size: 17px;

        cursor: pointer;
    }


    /* =====================================================
       NAVIGATION LINKS
       ===================================================== */

    .mobile-nav {

        border-top: 1px solid #eeeeee;
    }

    .mobile-nav-link {

        width: 100%;

        min-height: 58px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0 18px;

        border: 0;
        border-bottom: 1px solid #eeeeee;

        background: #fff;

        color: #172b68;

        text-decoration: none;

        font-size: 13px;

        font-weight: 600;

        text-transform: uppercase;

        cursor: pointer;

        text-align: left;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link:focus {

        color: #172b68;
        background: #f7f8fb;
        text-decoration: none;
    }

    .mobile-nav-link > span {

        display: flex;
        align-items: center;
        gap: 15px;
    }

    .mobile-nav-link > span i {

        width: 19px;

        color: #172b68;

        font-size: 16px;

        text-align: center;
    }

    .mobile-nav-link > i {

        font-size: 11px;
        color: #172b68;
    }


    /* =====================================================
       PRODUCTS SUBMENU
       ===================================================== */

    .mobile-submenu {

        display: none;

        background: #fafafa;

        border-bottom: 1px solid #eeeeee;
    }

    .mobile-nav-group.active .mobile-submenu {
        display: block;
    }

    .mobile-nav-group.active
    .mobile-dropdown-toggle {

        color: #e51b2d;
        background: #f8f9fc;
    }

    .mobile-nav-group.active
    .mobile-dropdown-toggle .arrow {

        transform: rotate(180deg);
        color: #e51b2d;
    }

    .mobile-dropdown-toggle .arrow {

        transition: transform .25s ease;
    }

    .mobile-submenu a {

        display: block;

        padding: 13px 22px 13px 52px;

        border-bottom: 1px solid #eeeeee;

        color: #343a4a;

        font-size: 12px;

        line-height: 1.5;

        text-decoration: none;
    }

    .mobile-submenu a:hover {

        color: #e51b2d;
        background: #fff;
    }


    /* =====================================================
       CTA BUTTONS
       ===================================================== */

    .mobile-menu-cta {

        padding: 18px 16px 10px;
    }

    .mobile-quote-btn,
    .mobile-whatsapp-btn {

        width: 100%;

        min-height: 46px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        border-radius: 4px;

        text-decoration: none;

        text-transform: uppercase;

        font-size: 12px;

        font-weight: 700;

        letter-spacing: .2px;
    }

    .mobile-quote-btn {

        color: #fff;

        background: #e51b2d;

        margin-bottom: 14px;
    }

    .mobile-quote-btn:hover {

        color: #fff;
        background: #c91427;
        text-decoration: none;
    }

    .mobile-whatsapp-btn {

        color: #25a95a;

        background: #fff;

        border: 1px solid #25a95a;
    }

    .mobile-whatsapp-btn i {

        font-size: 18px;
    }

    .mobile-whatsapp-btn:hover {

        color: #fff;
        background: #25a95a;
        text-decoration: none;
    }


    /* =====================================================
       CONTACT DETAILS
       ===================================================== */

    .mobile-contact {

        padding: 16px 20px 10px;
    }

    .mobile-contact > a,
    .mobile-contact > div {

        display: flex;

        align-items: flex-start;

        gap: 14px;

        margin-bottom: 18px;

        color: #303644;

        font-size: 12px;

        line-height: 1.65;

        text-decoration: none;
    }

    .mobile-contact i {

        width: 17px;

        flex: 0 0 17px;

        color: #172b68;

        font-size: 15px;

        text-align: center;

        margin-top: 3px;
    }


    /* =====================================================
       SOCIAL
       ===================================================== */

    .mobile-social {

        display: flex;

        gap: 12px;

        padding: 12px 20px 35px;
        margin-bottom:30px;
    }

    .mobile-social a {

        width: 37px;
        height: 37px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #172b68;

        color: #fff;

        font-size: 14px;

        text-decoration: none;
    }


    /* =====================================================
       MOBILE BOTTOM BAR
       ===================================================== */

    .mobile-bottom-bar {

        display: flex !important;

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        height: 55px;

        z-index: 99980;

        background: #172b68;
    }

    .mobile-bottom-bar a {

        flex: 1;

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 7px;

        color: #fff;

        text-decoration: none;

        font-size: 11px;

        font-weight: 700;

        text-transform: uppercase;
    }

    .mobile-bottom-bar a:first-child {

        background: #172b68;
    }

    .mobile-bottom-bar a:last-child {

        background: #e51b2d;
    }

    .mobile-bottom-bar i {

        font-size: 15px;
    }
    
    .whatsapp-float {
        display:none;
    }
    
    
    
 
    

}


/* =========================================================
   DESKTOP - DON'T DISPLAY MOBILE ELEMENTS
   ========================================================= */

@media (min-width: 992px) {

    .mobile-menu,
    .mobile-menu-overlay,
    .mobile-bottom-bar {

        display: none !important;
    }

}
/* Mobile Css Menu Ends 30 Aug */