/* responsive */
@media (-webkit-min-device-pixel-ratio: 1.5) {
    .container {
      width: 100%;
      max-width: 1140px;
    }
    header .dropdown-item {padding: 5px 20px; font-size: 14px;}
    header .navbar .navbar-nav .nav-link,header.fixed .navbar .navbar-nav .nav-link {padding: 35px 10px;}
}

@media only screen and (min-width:992px) and (max-width: 1380px) {
	.container {width: 100%; max-width: 1140px;}
    header .navbar-brand{max-width: 90px;}
    header .navbar .navbar-nav .nav-link,header.fixed .navbar .navbar-nav .nav-link {padding: 45px 10px; font-size: 15px;}
    .btn-custom{padding: 16px;}
    header .btn-custom{margin-left: 15px;}

}

@media only screen and (min-width:1366px) and (max-width:1440px){
 
}



@media only screen and (min-width:992px) and (max-width:1280px) {
    #wrapper {width: 100%; position: relative; z-index: 1; overflow: hidden;}
    #banner .banner-slider,#banner .banner-slider .item{height: 700px;}
    #banner,.shape01{height: calc(700px + var(--padding));}
    
}

@media only screen and (min-width:768px) and (max-width:1002px) {
    #wrapper {width: 100%; position: relative; z-index: 1; overflow: hidden;}
    
    
}

@media only screen and (min-width:768px) and (max-width:992px){
    #wrapper {width: 100%; position: relative; z-index: 1; overflow: hidden;}
    #home header,header{box-shadow: 0px 4px 50px rgb(0 0 0 / 10%); background-color: rgba(var(--color_black),0.7); -webkit-backdrop-filter: blur(15px);  backdrop-filter: blur(15px);} 
    header .navbar .navbar-nav .nav-link,header.fixed .navbar .navbar-nav .nav-link{padding: 20px 0;}
    #inner-banner{height: 450px;}
    #inner-banner .inner-content{max-width: 360px;}
    header .navbar-brand,header.fixed .navbar-brand{max-width: 70px;}
    .navbar-toggler{background-color: rgb(var(--primary2));}
    #banner .banner-slider,#banner .banner-slider .item{height: 550px;}
    #banner,.shape01{height: calc(550px + var(--padding));}
    .shape01{height: 550px;}
    #banner .banner-text p{max-width: 300px;}
    #quality .card{padding: calc(var(--padding)/2);}
    h2.title br, #quality .card h3 br, .right-column h3 br{display: none;}
    #report .report-content { max-width: 270px;}
    #report{height: 550px;}
    .shape03{height: 300px;}
    #industry,#vision-mission{height: 550px;}
    .shape02.large{height: calc(500px + calc(var(--padding)/2));}
    #inner-banner .shape03{height: calc(330px + var(--padding));}
    .frm{margin-top: 30px;}
    header .btn-custom{margin-left: 0;}
}

@media only screen and (min-width:320px) and (max-width:767px)
{
    #wrapper {width: 100%; position: relative; z-index: 1; overflow: hidden;}
    #home header,header{box-shadow: 0px 4px 50px rgb(0 0 0 / 10%); background-color: rgba(var(--color_black),0.7); -webkit-backdrop-filter: blur(15px);  backdrop-filter: blur(15px);} 
    header .navbar .navbar-nav .nav-link,header.fixed .navbar .navbar-nav .nav-link{padding: 20px 0;}
    header .navbar-brand,header.fixed .navbar-brand{max-width: 70px;}
    .navbar-toggler{background-color: rgb(var(--primary2));}
    header .dropdown-menu{width: auto;}
    header .btn-custom{margin-left: 0;}

    #banner{height: auto;}
    #banner .banner-slider{margin-left: 0; height: 290px;}
    #banner .banner-slider .item{height: 290px;}
    #banner .container{position: relative !important; width: 100%;}
    #banner .banner-text{max-width: 100%; padding: 15px;}
    #banner .banner-slider .owl-nav{left: 0; right: 0; margin: 0 auto; bottom: 0; width: 110px;}
    #banner .banner-slider .owl-nav button{width: 50px; height: 50px;}
    
    
    #industry,#vision-mission{height: auto; background-image: none !important;}
    #industry h2.title,#vision-mission h2.title{padding: calc(var(--padding) / 2) 0;}
    .shape01,.shape02,.shape03{display: none;}
    #industry::after,#vision-mission::after{display: none;}
    
    #products #counter{bottom: calc(var(--padding));}
    #products .slider .owl-nav button{width: 45px; height: 45px;}
    
    #home #quality{padding-top: 0;}
    #quality .card{padding: calc(var(--padding)/2);}
    #quality .card .btn-custom{width: 52px; height: 52px; margin-top: 0 !important;}
    
    #report{height: auto; background-image: none !important;}
    #report h2.title{padding: calc(var(--padding) / 2) 0;}
    #report::after{display: none;}
    #home #brochure{padding-top: var(--padding);}

    .contact-info{margin-bottom: 30px;}
    .contact-info a{margin-right: 15px;}
    #footer .bottom{text-align: center;}
    #footer .bottom .copyright{margin-bottom: 10px;}

    #inner-banner{height: auto; background-image: none !important;}
    #inner-banner .inner-content{height: auto; padding: calc(var(--padding)/2) 0 0; max-width: 100%;}
    #inner-banner .shape03{display: none;}
    #inner-banner::after{display: none;}

    .content p, .content ul, .content ol,#footer .top .address,.btn-custom, #footer .top ul li a{font-size: 14px;}
    
    #partner-block,#achievements,#focus-area,#product,#product-inner,#our-quality,#rd-block,#manufacturing,#career,#investors,#contact,#director-message, #inquiry{padding-top: 0;}
    .margin-bottom{margin-bottom: calc(var(--padding)/2);}
    #award-tab a{margin-left: 0; margin-right: 24px;}
    .source-link{display: inline-block; padding: 18px 0;}
    #product{padding-bottom: 0;}
    #inner-banner .inner-content.only-title{padding-bottom: 0;}
    .product-details li{flex-direction: column;}
    .product-details li .label{margin-bottom: 10px;}
    .product-details li .value{text-align: left; margin-left: 0;}
    #product-inner hr.spl{display: none;}
    .frm{margin-top: 30px;}

    h1 br, h2.title br, #quality .card h3 br, .right-column h3 br{display: none;}

    .file-list li a{padding: 18px 18px 18px 0; display: block !important;}
    .file-list li a .dwn-icon{position: relative; top: 0; margin-top: 15px; display: block;}
    .sidebar {margin-top: 4rem;}
}

@media only screen and (max-width:767px) and (orientation: landscape) {
    
     .navbar-collapse{ overflow: hidden; overflow-y: scroll; height: 75vh;}
     #banner .banner-slider, #banner .banner-slider .item{height: 450px;}
}

@media only screen and (min-width:320px) and (max-width:480px) { 
    #banner .banner-slider,#banner .banner-slider .item{height: 250px;}
    form .form-floating .input-group{flex-direction: column;}
    form .form-floating .input-group .form-control{width: 100%;}
}