/* ALL NECESSARY CSS RULES FOR mob-header.php */

/* Responsive Display Control: */
/* Default for screens 400px and wider: Desktop view visible, Mobile view hidden */
.desktop-view {
    display: block;
}
.mobile-view {
    display: none;
}



/* Width for the desktop menu GIF when 'small-size' class is added by JavaScript */
.mob_menu_icon.small-size {
    width: 30%; /* This is the reduced size when the desktop menu is active */
}

/* Mobile Menu GIF (.mob_menu_icon) Styles: */
/* Initial width for the mobile menu GIF. */
.mob_menu_icon {
    width: 75%; /* Your required initial width for the mobile GIF */
    transition: width 0.3s ease-in-out; /* Smooth transition for width */
}

/* Width for the mobile menu GIF when its parent navbar-toggler is expanded */
.navbar-toggler[aria-expanded="true"] .mob_menu_icon {
    width: 30%;
}

/* Mobile Navbar Background Transition: */
/* Adds a smooth transition to the navbar's background color */
.mob_navbar {
    transition: background-color 0.3s ease-in-out;
}

/* Class to apply white background to the mobile navbar when its menu is open */
.mob_navbar.bg-white-on-open {
    background-color: white !important; /* Ensures it overrides Bootstrap's default */
}

/* Your Existing Accordion and Dropdown Styles (from your provided code - NO CHANGES HERE): */
.mob-dropdown-menu { /* This class is on the <ul> in mobile view, not a generic accordion */
    min-width: 250px;
}
.dropdown-accordion .accordion-button { /* This selector targets the button inside the dropdown accordion */
    padding: .5rem 1rem;
    text-align: left;
    width: 100%;
    border: none;
    background-color: transparent;
    color: var(--bs-dropdown-link-color);
}
.dropdown-accordion .accordion-button:not(.collapsed) {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-accordion .accordion-body {
    padding: 0 1rem 0.5rem 1rem;
}
.dropdown-accordion .list-group-item {
    border: none;
    padding: .25rem 1rem;
}

/* Media query for screens BELOW 400px: Mobile view visible, Desktop view hidden */
@media (max-width: 399.98px) {
    .desktop-view {
        display: none;
    }
    .mobile-view {
        display: block;
    }
    .enquiry{
     width:auto !important;   
    }
}