@charset "utf-8";

/* CSS Document */
/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1101px) and (max-width: 1200px) {  
.header-top ul li {font-size: 14px; margin-right:6px}
.search-input{padding:6px 20px;}
.search-button{width:39px; height:39px;}
.header-item-left{flex:0 0 22%}
.header-item-center{flex:0 0 78%}
.header .menu>ul>li{margin:0px 8px;}
.header .menu>ul>li>a{font-size:14px;}
}

/* width: 991px; */
@media screen and (max-width: 61.938em) {
    .about-us-sec .text-sec{margin-bottom: 30px;}
    .about-us-sec{padding:30px 15px;}
.vision-mission-first .text-sec p:last-child {margin-bottom: 30px;}
.catalogue-container{padding:30px 15px;}
.it-infra-img-section .infra-card-text{height: auto;}
.it-infra-img-section .infra-card-main{margin-bottom: 30px;}
.it-infra-img-section{margin-bottom: 20px;}
.quality-section .quality-image{margin-bottom:30px;}
.quality-section{padding:30px 0px;}
.industry-sub .img-div{margin-bottom:30px;}
.sustain-card h5{font-size: 18px; padding:12px 12px 18px 52px; line-height:28px;}
.header-item-right{margin:15px 0px;}
.fact-card {margin-bottom: 50px;}
.fact-card:last-child { margin-bottom: 0;}
.light-cards .light-card:nth-child(2){margin-left:0px;}
.light-card{width:100% !important;}
.clients-logo .marquee-track img{.clients-logo .marquee-track img {height: 180px;width: auto;}}
}

@media screen and (max-width: 1100px) {
.footer .footer-first{display: block;}
.footer .footer-first .footer-links{width: 100%;
     /* display: block; */
    }
.footer .footer-first .footer-links .quick-links-1{display: block; width: 100%; margin-bottom: 30px;}
.footer .footer-first .footer-links .quick-links{width: 100%; margin-bottom: 30px;}
.footer .footer-first .footer-links .quick-links-1 ul li{display: block; width: 100%; font-size: 14px;}
.footer .footer-first .map{width: 100%;}
.footer .footer-first .footer-links .quick-links ul li{font-size: 14px;}
.footer .footer-second p{font-size: 13px;}
.footer .footer-third p{font-size: 9px;}

.blog-details .detail-content .date-admin-cart{display: block;}
.iws-home .iws-pane:before {content: ''; width: 100%; height: 151px; background: url(../images/iws-bg.jpg) repeat center top; position: absolute; top: 0; left: 0; right: 0;}
.home-who-we-are .content {position: relative; margin-bottom: 30px;}


.search-box{display: block !important;}
.header-top{display: none;}
.search-container{padding: 4px 15px !important;}


.breadcrumb-section .breadcrumb ul{display:block;}

.header-item-right { display: flex !important; align-items: center; justify-content: flex-end; gap: 0; right: 4px; }
.header-item-right ul { display: flex; align-items: center; justify-content: space-between;  margin: 0; padding: 0; list-style: none; width: 100%; }
.header-item-right ul li { position: relative; display: flex; align-items: center;  justify-content: center; }
.header-item-right ul li .fa-shopping-basket { color: #2b2970; font-size: 30px; }
.header-item-right ul li .badge { position: absolute; top: -8px; right: -10px; background-color: #2b2970; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 5px; border-radius: 10px; }
.search-box { position: relative; display: flex; align-items: center; border: 1px solid #e0e0e0; border-radius: 50px; background-color: #fff; max-width: 280px; width: 100%; }
.search-input { border: none; outline: none; font-size: 14px; flex: 1; padding: 10px 30px; border-radius: 30px; width: 100%; }
.search-button { width: 42px; height: 42px; border: none; border-radius: 50%; background-color: #2b2970; color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; }
.search-button .fasearch { font-size: 16px; }
.menu-mobile-trigger { background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.menu-mobile-trigger span { display: block; width: 22px; height: 2px; background-color: #000; }

.suggestions{width:100%}
.home-blog-section{padding: 30px 0px 30px 0px;}

}

/*============	Media 768Px Start ============ */

@media (min-width: 768px) and (max-width: 1200px) {

.header-item-right ul{gap:20px;}
.home-blog-section .blog-pane{height: auto; padding:16px}
.home-blog-section .blog-pane a{margin-top:10px;}

.filter .filter-content{max-height:fit-content;}
.filter .filter-content .filter-form { grid-template-columns: repeat(3, 1fr); gap: 15px; }
.ms-options-wrap > .ms-options{position: absolute !important; z-index:9999 !important}

}

@media (min-width: 576px) and (max-width: 990px) {
.footer .footer-first {flex-wrap: wrap;}
.footer .footer-first .footer-links {width: 100%; flex-wrap: wrap; display: flex; column-gap: 0; row-gap: 30px;}
.footer .footer-first .footer-links .quick-links-1 {width: 50%;}
.footer .footer-first .footer-links .quick-links {width: 50%;}
.footer .footer-first .map {width: 100%; margin-top: 30px;}
}


/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */

@media (min-width: 320px) and (max-width: 768px) {

.home-blog-section .blog-pane{height: auto;}
.header-item-right ul{gap:10px;}
.filter .filter-content{max-height:fit-content;}
.filter .filter-content .filter-form { grid-template-columns: repeat(1, 1fr); gap: 15px; }
.ms-options-wrap > .ms-options{position: absolute !important; z-index:9999 !important}

.home-newsletter .form-row{display: block; text-align: center;}
.home-newsletter .form-control{margin-bottom: 30px;}
.wishlist-contactus-form .contact-page-form .form-row>.col, .form-row>[class*=col-]{width:100%}
}

@media (min-width: 320px) and (max-width: 450px) {
.header .wrapper{display:block;}
.header-item-right{justify-content: center;}



}



/*============ Media 300Px Star ============ */

@media (max-width: 576px) {

.footer .footer-first {display:block;}
.footer .footer-first .footer-links{width:100%; display:block;}

}

/*============ Media 320Px Start ============ */

/* @media (min-width: 992px)and (max-width:1100px) {
.header .menu-mobile-trigger{position: relative; bottom: 0px !important;}
} */





@media only screen and (min-width:993px)
{ 
 .header .menu>ul>li.menu-item-has-children:hover .menu-subs { margin-top: .5rem; opacity: 1; visibility: visible}
}
.menu-mobile-header,
.menu-mobile-trigger { display: none}
@media only screen and (max-width:1100px) 
{ 
.header-item-center { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3}
.header-item-left, .header-item-right { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto}
.wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between}
.header .menu-mobile-trigger {bottom: 0px; position: relative; right: 0; display: block; cursor: pointer; width: 1.75rem; height: 1rem; border: none; outline: none; margin-right: 0; background: 0 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .35s ease-in-out; -o-transition: .35s ease-in-out; transition: .35s ease-in-out}
.header .menu-mobile-trigger span { display: block; position: absolute; width: 100%; height: 2px; left: 0; border: none; outline: none; opacity: 1; border-radius: .25rem; background: #000000; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out}
.header .menu-mobile-trigger span:nth-child(1) { top: 0}
.header .menu-mobile-trigger span:nth-child(2), .header .menu-mobile-trigger span:nth-child(3) { top: .5rem}
.header .menu-mobile-trigger span:nth-child(4) { top: 1rem}
.header-item-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    right: 4px;}
.header .menu { position: fixed; top: 0; left: 0; width: 20rem; height: 100%; z-index: 10005; overflow: hidden; background: #fafafa; -webkit-transform: translate(-100%); -ms-transform: translate(-100%); transform: translate(-100%); -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out}
.header .menu.active { -webkit-transform: translate(0%); -ms-transform: translate(0%); transform: translate(0%)}
.header .menu>ul>li { display: block; line-height: 1; margin: 0}
.header .menu>ul>li>a { display: block; line-height: 3.125rem; height: 3.125rem; padding: 0 3.125rem 0 1rem; border-bottom: 1px solid rgba(0, 0, 0, .1); text-align: left; color:#000000;}
.header .menu>ul>li>a i.ion { position: absolute; font-size: 1.25rem; line-height: 3.125rem; top: 0; right: 0; width: 3.125rem; height: 3.125rem; text-align: center; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg)}
.header .menu .menu-mobile-header { position: relative; position: -webkit-sticky; position: sticky; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: 3.125rem; z-index: 501; border-bottom: 1px solid rgba(0, 0, 0, .1); background: #fafafa}
.header .menu .menu-mobile-header .menu-mobile-arrow { display: none; font-size: 1.25rem; line-height: 3.125rem; width: 3.125rem; height: 3.125rem; cursor: pointer; border: 1px solid rgba(0, 0, 0, .1); color: #ffffff; text-align: center; background: #000000; }
.header .menu .menu-mobile-header.active .menu-mobile-arrow { display: block}
.header .menu .menu-mobile-header .menu-mobile-title { font-family: inherit; font-size: 1rem; font-weight: 500; line-height: inherit; color: #121212; text-transform: capitalize; text-rendering: optimizeLegibility}
.header .menu .menu-mobile-header .menu-mobile-close { font-size: 2.25rem; line-height: 3.125rem; cursor: pointer; width: 3.125rem; height: 3.125rem; border: 1px solid rgba(0, 0, 0, .1); color: #ffffff; text-align: center; background: #000000; }
.header .menu .menu-section { height: 100%; overflow-y: auto; overflow-x: hidden}
.header .menu>ul>li .menu-subs { position: absolute; display: none; top: 0; left: 0; max-width: none; min-width: auto; width: 100%; height: 100%; margin: 0; padding: 1rem; padding-top: 4rem; opacity: 1; overflow-y: auto; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-box-shadow: none; box-shadow: none}
.header .menu>ul>li .menu-subs.menu-mega { position: absolute; display: none; top: 0; left: 0; max-width: none; min-width: auto; width: 100%; height: 100%; margin: 0; padding: 1rem; padding-top: 4rem; opacity: 1; overflow-y: auto; visibility: visible; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-box-shadow: none; box-shadow: none}
.header .menu>ul>li .menu-subs.active { display: block}
.header .menu>ul>li .menu-subs.menu-column-4>.list-item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 0}
.header .menu>ul>li .menu-subs.menu-column-4>.list-item img.responsive { margin-top: 0}
.header .menu>ul>li .menu-subs.menu-column-4>.list-item.text-center .title { margin-bottom: 1.25rem}
.header .menu>ul>li .menu-subs.menu-column-4>.list-item.text-center:last-child .title { margin-bottom: 0}
.header .menu>ul>li .menu-subs>ul>li>a { display: block}
.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul { margin-bottom: 1rem}
.header .menu>ul>li .menu-subs.menu-mega>.list-item>ul>li>a { display: block}
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1098; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, .55); -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out}
.overlay.active { opacity: 1; visibility: visible}
}

.main { display: block; width: 100%; min-height: 100vh; background-image: url(https://source.unsplash.com/pkhBlvTLyog/1920x1280); background-size: cover; background-position: center right; background-repeat: no-repeat}

.thankyou-section{height: 100%;}
.thankyou-section .banner-wrapper .content-wrap p{font-size: 16px; line-height: 26px;}
