@media only screen and (min-width: 1400px) and (max-width: 1680px) {

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

        aspect-ratio: 1 / 0.46;

    }

}



@media (min-width: 1200px) {

    .navbar .nav-item:hover > .dropdown-menu {

        display: block;

        animation: slideDown 0.3s ease forwards;

    }



    .navbar .dropdown-menu {

        display: none;

    }



    @keyframes slideDown {

        0% {

            opacity: 0;

            transform: translateY(10px);

        }



        100% {

            opacity: 1;

            transform: translateY(0);

        }

    }



    .dropdown-menu > .dropdown .dropdown-menu{

        position: absolute;

        top: 0;

        left: 100%;

        opacity: 0;

        overflow: hidden;

        display: none;

    }

    .dropdown-menu > .dropdown:hover .dropdown-menu{

        display: block;

        opacity: 1;

        overflow: visible;

        animation: slideDown 0.3s ease forwards;

        padding-left: 0;

    }

    /* .dropdown-menu > .dropdown .dropdown-arrow{

        position: absolute;

        right: 15px;

        transform: rotate(-90deg);

        top: 9px;

    } */

    .navbar-nav .dropdown-menu > .dropdown::before {

        position: absolute;

        content: '';

        top: 15px;

        right: 10px;

        background-image: url(../images/icon/down-angle-arrow.png);

        transform: rotate(-90deg);

        filter: brightness(0);

        background-repeat: no-repeat;

        background-size: contain;

        width: 10px;

        height: 10px;

        transition: all 0.5s ease;

    }

    .dropdown-toggle-icon {

        display: none;

        cursor: pointer;

        margin-left: 8px;

        font-weight: bold;

    }

    .navbar-nav >.dropdown .nav-link::after {

        position: absolute;

        content: '';

        top: 37px;

        left: 100%;

        width: 10px;

        height: 10px;

        background-image: url(../images/icon/down-angle-arrow.png);

        /* filter: brightness(0); */

        background-size: contain;

        background-repeat: no-repeat;

        background-color: transparent;

    }

}



@media only screen and (min-width: 1200px) and (max-width: 1399px) {

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

        aspect-ratio: 1 / 0.385;

    }

    .banner-caption .main-title{

        font-size: 60px;

    }

}



@media (max-width: 1199px) {

    .dropdown-menu {

        display: none;

        position: static;

        float: none;

    }



    .dropdown-menu.show {

        display: block;

        animation: slideDown 0.3s ease forwards;

    }

}



@media only screen and (min-width: 992px) and (max-width: 1199px) {

    section{

        padding: 55px 0;

    }

    .clientele-logo-box {

        padding: 15px;

    }

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

            aspect-ratio: 1 / 0.45;

    }

    .banner-caption .main-title{

        font-size: 50px;

    }

    .industry-we-serve-wrapper ul li{

        width: 33.33%;

        padding: 10px;

    }

    .navbar-expand-lg .navbar-nav .dropdown-menu{

        position: absolute;

        right: 5%;

    }

    .dropdown-menu > .dropdown .dropdown-menu {

        position: absolute;

        top: 0;

        left: 100%;

    }
    .inner-banner-section{
        padding: 70px 0;
    }
    .inner-banner-section .page-title{
        margin-bottom: 5px;
        font-size: 35px;
    }
}



@media (min-width: 992px) {

    .navbar-expand-lg .navbar-nav .dropdown-menu{

        min-width: 250px;

        border: none;

        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;

    }

    .navbar-expand-lg .navbar-nav .dropdown-menu li{

        padding: 7px 15px;

    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item{

        font-size: 16px;

        transition: all 0.4s ease;

    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover,

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:focus{

        background-color: transparent;

        color: #E18226;

    }

    .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:focus{

        color: #2f3032;

    }

    /* Remove right border from last column in each row */

    .clientele-col:nth-child(6n) {

    border-right: none;

    }



    /* Remove bottom border from last row */

    .clientele-col:nth-last-child(-n + 6) {

    border-bottom: none;

    }

    .nav-item.dropdown > .dropdown-toggle-icon{

        position: absolute;

        left: 100%;

        top: 26px;

        font-size: 20px;

    }

    .nav-item.dropdown .dropdown-menu .dropdown-toggle-icon{

        position: absolute;

        top: 0;

        right: 10px;

        font-size: 20px;

    }

}



@media only screen and (min-width: 768px) and (max-width: 991px) {

    .clientele-col:nth-child(4n){

        border-right: none;

    }

    .clientele-col:nth-last-child(-n + 4) {

        border-bottom: none !important;

    }

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

            aspect-ratio: 1 / 0.45;

    }

    .banner-caption .main-title{

        font-size: 45px;

    }

    .industry-we-serve-wrapper ul li{

        width: 33.33%;

        padding: 10px;

    }
    .inner-banner-section{
        padding: 50px 0;
    }
    .inner-banner-section .page-title{
        margin-bottom: 5px;
        font-size: 35px;
    }
    .contact-form-wrapper{
        padding: 30px !important;
    }
}



@media (max-width: 991px) {

    section{

        padding: 45px 0;

    }

    /* Offcanvas Menu */

    .navbar-collapse {

        position: fixed;

        top: 0;

        right: 0;                       /* fixed position on right */

        width: 315px;

        height: 100vh;

        background: #023465;

        padding: 1rem;

        overflow-y: auto;

        z-index: 1001;

        transform: translateX(100%);

        opacity: 0;

        transition: transform 0.4s ease-in-out,

                    opacity 0.4s ease-in-out;

    }

    .navbar-collapse.show {

        transform: translateX(0); 

        opacity: 1;

    }



    .offcanvas-overlay {

        position: fixed;

        inset: 0;

        background: rgba(0, 0, 0, 0.82);

        z-index: 1000;

        transform: translateX(100%);

        opacity: 0;

        visibility: hidden;

        transition: transform 0.4s ease-in-out,

                    opacity 0.4s ease-in-out;

    }

    .offcanvas-overlay.active {

        transform: translateX(0);

        opacity: 1;

        visibility: visible;

    }

    .navbar-collapse.collapse {

        display: block !important;

    }



    .close-collapse-icon{

        position: absolute;

        top: 10px;

        right: 10px;

    }

    .close-collapse-icon a{

        width: 30px;

        height: 30px;

        border: 1px solid #E18226;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .close-collapse-icon a img{

        width: 12px;

        height: 12px;

        object-fit: contain;

    }



    /* Dropdown inside offcanvas */

    .dropdown-menu {

        display: none;

        position: static;

        padding-left: 10px;

    }



    .dropdown-menu.show {

        display: block;

        animation: dropdownSlide 0.3s ease forwards;

        padding: 10px;

    }



    @keyframes dropdownSlide {

        from {

            opacity: 0;

            transform: translateY(-50px);

        }



        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    .header-section .nav-link{

        padding: 20px 5px;

        color: #CFCFCF;

    }

    .dropdown-arrow{

        position: absolute;

        right: 0

    }

    .dropdown-arrow img{

        filter: brightness(0) invert(0.8);

    }

    .header-section .nav-link::before{

        top: unset;

        left: 0;

        transform: none;

        bottom: 0;

        height: 2px;

    }

    .footer-widget{

        margin-bottom: 25px;

    }

    .clientele-logo-box{

        padding: 15px;

    }

    .clientele-logo-box {

        padding: 15px;

    }

    .theme-title-wrap .theme-main-title{

        font-size: 35px;

    }

    .navbar-toggler{

        border: none;

    }

    .nav-item.dropdown .dropdown-toggle-icon {

        position: absolute;

        right: 2px;

        font-size: 25px;

        filter: brightness(0) invert(0.7);

    }

    .dropdown-menu li{

        padding: 7px 0;

    }

    .header-section .nav-item{

        margin-right: 0;

    }

    .nav-item.dropdown > .dropdown-toggle-icon{

        top: 14px;

    }

    .nav-item.dropdown .dropdown-menu li .dropdown-toggle-icon{

        top: 0px;

        filter: brightness(0);

    }

    .nav-item.dropdown .dropdown-menu li .dropdown-menu{

        background-color: #0234650f;

        border: none;

        border-left: 1px solid;

        border-radius: 0;

        margin-top: 10px;

    }

     .industry-we-serve-box .industry-we-serve-title h2{

        font-size: 20px;

    }
     .contact-form-wrapper{
        padding: 30px !important;
    }
     .contact-form-wrapper .theme-main-title,
     .contactus-detail-wrap .theme-main-title{
        font-size: 25px;
    }
}



@media (max-width: 767px) {

    .sidebar-contact .scroll{

        padding-bottom: 50px;

    }
    .blog-detail-desc h1, .blog-detail-desc h2, .blog-detail-desc h3, .blog-detail-desc h4, .blog-detail-desc h5, .blog-detail-desc h6{
        font-size: 20px;
    }

}



@media only screen and (min-width: 576px) and (max-width: 767px) {

    section{

        padding: 40px 0;

    }

    .clientele-col:nth-child(3n){

        border-right: none;

    }

    .clientele-col:nth-last-child(-n + 3) {

        border-bottom: none !important;

    }

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

            aspect-ratio: 1 / 0.5;

    }

    .banner-caption .main-title{

        font-size: 35px;

    }

    .industry-we-serve-wrapper ul li{

        width: 50%;

    }

    .topbar-header ul,

    .header-topbar-right{

        justify-content: center !important;

    }

    .header-topbar-right{

        margin: 6px 0;

    }

    .industry-we-serve-wrapper ul li{

        padding: 10px 10px;

    }

     .sidebar-contact {

        width: 60%;

        height: 100%;

        right: -60%;

        top: 0;

        transform: none;

        border-radius: 0;

    }



    .sidebar-contact.active {

        right: 0;

    }
    .inner-banner-section{
        padding: 40px 0;
    }
    .inner-banner-section .page-title{
        margin-bottom: 5px;
        font-size: 35px;
    }

}



@media (max-width: 575px) {

    section{

        padding: 40px 0;

    }

    .navbar-brand img{

        max-width: 150px;

    }

    .industry-we-serve-wrapper ul li{

        width: 50%;

        padding: 10px 10px;

    }

     .header-topbar-right{

        justify-content: center !important;

        margin: 5px 0;

    }

    .topbar-header ul{

        justify-content: center;

    }

    .sidebar-contact {

        width: 85%;

        height: 100%;

        right: -85%;

        top: 0;

        transform: none;

        border-radius: 0;

    }



    .sidebar-contact.active {

        right: 0;

    }



    .sidebar-toggle-btn {

        /* left: auto; */

        right: 0;

        height: 180px;

        border-radius: 10px 0 0 10px;

    }

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

            aspect-ratio: 1 / 0.5;

    }

    .banner-caption .main-title{

        font-size: 33px;

    }

    .our-brand-section .ot-brand-img img{

        width: 100px;

        height: 55px;

    }
    .sticky-whatsaaps-icon{
        padding-left: 10px;
        padding-bottom: 10px;
    }
    
    .inner-banner-section{
        padding: 40px 0;
    }
    .inner-banner-section .page-title{
        margin-bottom: 5px;
        font-size: 35px;
    }
    .specification-wrapper .accordion-button h2{
        font-size: 16px;
    }
    .contact-form-wrapper{
        padding: 25px !important;
    }
    .contact-form-wrapper .theme-main-title,
    .contactus-detail-wrap .theme-main-title{
        font-size: 20px;
    }
}



@media (max-width: 480px) {

    section{

        padding: 35px 0;

    }

    .theme-title-wrap .theme-main-title{

        font-size: 30px;

    }

    .industry-we-serve-wrapper ul li{

        width: 100%;

        padding: 10px 0;

    }

    .counter-wrap-box{

        text-align: center;

    }

    .header-topbar-right{

        justify-content: center !important;

        margin: 5px 0;

    }

    .clientele-col:nth-child(2n){

        border-right: none;

    }

    .clientele-col:nth-last-child(-n + 2) {

        border-bottom: none !important;

    }

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

            aspect-ratio: 1 / 0.6;

    }

    .banner-caption .main-title{

        font-size: 30px;

    }

    .sidebar-contact{

        width: 100%;

        right: 100%;

    }

    .navbar-collapse{

        width: 95%;

    }

    .industry-we-serve-box .industry-we-serve-title h2{

        font-size: 18px;

    }
    .inner-banner-section{
        padding: 35px 0;
    }
    .inner-banner-section .page-title{
        margin-bottom: 5px;
        font-size: 33px;
    }
    .blog-detail-title{
        font-size: 25px;
    }
    .contact-form-wrapper{
        padding: 20px !important;
    }
}



@media (max-width: 375px) {

    section{

        padding: 30px 0;

    }

    .theme-title-wrap .theme-main-title{

        font-size: 25px;

    }

    .home-slider .carousel-item>video, .home-slider .carousel-item>img{

            aspect-ratio: 1 / 0.65;

    }

    .banner-caption .main-title{

        font-size: 26px;

    }
    .inner-banner-section{
        padding: 30px 0;
    }
    .inner-banner-section .page-title{
        font-size: 30px;
    }
}