@media (max-width: 1366px) {
    .product-body h6 { font-size: 18px;}
    .price { font-size: 20px;}
    .inventory-left h2 { font-size: 35px;}
}
@media (max-width: 1150px) {
.navbar-nav .nav-link { font-size: 15px;}
.navbar-brand{width: 35%;}
}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
   
}
/* =====================================
   BOOTSTRAP 5 MOBILE NAV FIX (FINAL)
===================================== */
@media (max-width: 991px) {

    /* Navbar collapse box */
    .navbar-collapse {
        /* background: #000; */
        /* margin-top: 12px; */
        /* padding: 12px; */
        /* border-radius: 8px; */
    }

    /* Menu list */
    .navbar-nav {
        position: absolute;
        z-index: 9;
        right: 0%;
        width: 200px;
        background: #545454;
    }

    .navbar-nav .nav-item {
        width: 100%;
        margin-left: 0;
    }

    /* Links */
    .navbar-nav .nav-link {
        margin: 0;
        padding: 6px 16px;
        font-size: 16px;
        border-radius: 0;
        border-bottom: 1px solid #6a6a6a;
    }

    /* REMOVE desktop underline animation */
    .navbar-nav .nav-link::after {
        display: none !important;
    }

    /* Dropdown menu � RESET absolute positioning */
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        width: 100%;
        background: #111;
        border: none;
        box-shadow: none;
        margin: 6px 0 10px;
        padding: 6px 0;
        border-radius: 6px;
        display: none;
    }

    /* Bootstrap adds .show class on click */
    .dropdown-menu.show {
        display: block;
    }

    /* Dropdown items */
    .dropdown-item {
        color: #fff;
        padding: 12px 22px;
        font-size: 15px;
    }

    .dropdown-item:hover {
        background: #0d6efd;
    }

    /* Toggler clean */
    .navbar-toggler {
        border: none;padding: 0;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }


 .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none;
        position: static !important;
        background: #111;
        box-shadow: none;
        border: none;
        margin: 6px 0 10px;
        padding: 6px 0;
        border-radius: 6px;
    }

    /* Bootstrap toggles this */
    .dropdown-menu.show {
        display: block;
    }

    /* Dropdown text FIX */
    .dropdown-menu .dropdown-item {
        color: #fff !important;
        font-size: 15px;
        font-weight: 500;
        padding: 6px 16px;
    }

    .dropdown-menu .dropdown-item:hover {
        background: #0d6efd;
        color: #fff;
    }

.carousel-caption { right: 5%; left: 5%;}
.slider-text { font-size: 16px;}
.overlay-box { padding: 5px 15px; border-radius: 6px; width: 100%;}
h2 {font-size: 40px;}
.product-body h6 { font-size: 18px;}
.price { font-size: 20px;}
.inventory-left {     margin-bottom: 0;    }
.product-panel {height: auto;min-height: auto;}
.dropdown-icon.show { right: 8px; top: 5%; }
.dropdown-icon {right: 8px;padding: 0px 10px 0px 40px;}
.navbar-brand {width: 76%;}
.hero-content h1 {font-size: 22px;padding: 5px 42px;}
h2 {font-size: 25px;}
#filterCategory .filter-body,
#filterYear .filter-body{ width: 100%; width: 100%;}
#filterCategory .filter-body, #filterYear .filter-body {    width: 100%;    max-width: 100%;}
.filter-header { padding: 6px 15px;}
.filter-card { margin-bottom: 5px;  margin-top: 5px;}
}



@media (max-width: 767px) {
.footer-links li {margin-right: 22px; margin-left: 22px;}
.footer-links a { font-size: 15px;}
.footer-links { margin-bottom: 25px; }
.footer-links { margin-bottom: 25px;}
.footer-links li {margin-right: 22px;margin-left: 22px;width: 100%;border-bottom: 1px dotted #ffffff;
padding: 5px 0px 5px 0px;}
h2 { font-size: 25px; margin-bottom: 20px;}
.product-card {  height: auto;}
.product-img { height: auto;}
.product-body h6 {  height: auto;}
.inventory-card figure { height: auto;}
.custom-caption a {font-size: 14px;}
.overlay-box h1 {  font-size: 20px;     margin-bottom: 0;}

}


@media (max-width: 568px) {
.hero-content h1 {  font-size: 18px; padding: 6px 10px;}
.pagination li a { padding: 1px 8px; font-size: 14px;}
h2 {font-size: 30px;}
.overlay-box h1 { font-size: 25px; margin-bottom: 0px; padding-bottom: 0px;}
.contact-info p {  font-size: 15px;  line-height: 22px;}
.contact-box { padding: 10px !important;}
.tab-content {  padding: 10px;}
  .overlay-box h1 {    font-size: 16px;}

.custom-caption a {  font-size: 12px;}
}