/* ==============================
   MOBILE NAVBAR - LEFT TO RIGHT
================================= */

@media (max-width: 991px) {

    #header .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;

        width: 300px;
        max-width: 85%;
        height: 100vh;

        background: #fff;

        padding: 80px 25px 30px;

        overflow-y: auto;

        /* Start outside the screen */
        transform: translateX(-100%);

        transition: transform 0.4s ease-in-out;

        /* Remove Bootstrap collapse sizing */
        display: block !important;

        visibility: hidden;

        z-index: 9999;

        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    }


    /* When Bootstrap adds .show */
    #header .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
    }


    /* Navbar menu */
    #header .navbar-nav {
        width: 100%;
        gap: 0;
        margin: 0 !important;
    }


    #header .navbar-nav .nav-item {
        width: 100%;
        border-bottom: 1px solid #eee;
    }


    #header .navbar-nav .nav-link {
        display: block;
        padding: 15px 5px;
    }


    /* Dropdown on mobile */
    #header .dropdown-menu {
        position: static !important;

        width: 100%;

        margin: 0 0 10px;

        border: none;

        background: #f7f8f9;

        box-shadow: none;
    }


    #header .dropdown-menu .dropdown-item {
        padding: 10px 15px;
        font-size: 15px;
    }


    /* Get In Touch */
    #header form {
        margin-top: 25px;
    }


    /* Hamburger */
    #header .navbar-toggler {
        border: none;
        outline: none;
        box-shadow: none;
        font-size: 25px;
        color: var(--primary);
    }
 
.breadcrumb {
    margin-bottom: 0 !important;
    backdrop-filter: blur(2px);
}

}

@media (max-width:767px) {
      #breadcrumb h1 {
    font-size: 34px;
}
    
}

@media (max-width:575px) {
    .specification li {
    padding: 8px 0px;
}
    .client-item i{
        font-size: 12px;
    }
    .client-item{
            font-size: 14px;
            padding:9px 5px;
            gap:8px;
    }
    .company-glance .glance-title h2{
        font-size: 20px !important;
    }
    .company-glance .glance-title span {
    width: 20px;
}
#product-details ul li{
    padding:10px 0;
}

    
}

@media (max-width:500px) {
      #breadcrumb{
            padding-top: 240px;
    padding-bottom: 100px;
    }
        #breadcrumb h1 {
    font-size: 20px;
}

    
}

@media (max-width:375px) {
    .company-glance {
    padding: 35px 0px;
}
 .company-glance .glance-title h2{
        font-size: 18px !important;
    }
    
}