@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. large desktop
	5. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/

@media (max-width:425px) {
	@media (max-width: 425px) {
		.form-area {
		  width: 100% !important;
		  max-width: 349px;
		  margin: 0 auto;
		  padding: 20px 10px;
		}
	  }
	.welcome-sec .two-col .col-right
	 {
			width: 100%;
			padding: 15px 0px;
			margin-right: 0;
			box-sizing: border-box;
		}
		.p-text {
			padding: 0px 15px;
		}
		.video-slider-sec {
			padding: 0px 0px 0px 0px !important;
		}
		figure.pro-21 img {
			padding-top: 0px;
		}
}

@media (max-width:640px) {
	.form-area {
		width: 100% !important;
	}
	.banner .two-col .col-right {
		width: 100%;
	}
	.video-sec iframe {
		width: 100%;
	}
	.banner {
		background: url(images/banner-bg2.jpg) no-repeat center center,
			radial-gradient(circle, rgba(100, 204, 226, 0.5) 0%, rgba(44, 78, 89, 0.5) 50%, rgba(21, 26, 32, 0.5) 100%);
		background-size: 1200px auto, cover !important;
		background-repeat: no-repeat, no-repeat;
		background-position: center center, center center;
	}
	.form-area:before {
	
		background: linear-gradient(180deg, rgba(37, 53, 81, 1) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 1) 68%);
		opacity: 0.7;
	}

	.video-slide {
		width: 93%;
	}
	.img-sectin-pro img {
		max-width: 100%;
		width: 90%;
	}
	.shop-cell {
		padding: 27px 0px;
	}
	  /* ----------------- */
	.trusted-box {
		min-height: 400px;
	  }
	  
	.service-info-box {
		margin-bottom: 25px;
	}
	figure.table-info-img.m-15 {
		margin-top: 20px;
	}
	.custom-arrow {
		margin-left: 49px;
	}
	.slick-next {
		right: 26px;
	}
	.testimonial-sec {
		padding: 60px 20px;
	}
	.sp-left {
		padding-left: 0px;
	}
	.sp-right {
		padding-left: 6px;
	}
	.video-slider-sec {
		padding: 40px 0px 10px;
	}
	.trusted-box {
		padding: 34px 30px;
	}
	section.video-sec {
		padding: 60px 0 60px 0;
	}
	.banner .two-col {
		flex-direction: column;
		display: flex;
	}
	.banner .big-title {
		font-size: 70px;
	}
	.banner h1 {
		font-size: 70px;
	}
	.banner .two-col .col-left {
		padding: 0px 0px 16px;
	}
	.form-area {
		width: 378px;
        margin: 0;
	}
	.testimonial-slider .item p {
		padding: 0px 22px;
	}
	.testimonial-slider .testimonial-inner p:before {
		left: 11px;
		top: 33px;
	}
	h2, .h2 {
		font-size: 32px;
		line-height: 45px;
		font-weight: 600;
	} 
	.two-col {
		display: flex;
		flex-direction: column;
	}
	.welcome-sec .two-col .col-left {
		width: 100%;
		margin: 0;
	}
	.welcome-sec .two-col .col-right {
		width: 100%;
		padding: 15px 0px 55px;
		margin-right: 0;
		box-sizing: border-box;
	}
	.services-gallery {
		display: flex;
		flex-direction: column;
		gap: 15px;
		justify-content: space-between;
	}
	.services-gallery .gallery-cell {
		text-align: center;
		display: block;
		width: 100%;
		height: 286px;
	}
	h3, .h3 {
		padding: 0px 20px;
	}
	figure.progaurd-img img {
		width: 100%;
	}
	.shop-cell-grp {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 0px 30px;
	}
	figure.DXB-2 img {
		width: 100%;
	}
	figure.DXB-img img {
		width: 100%;
	}										
	.trusted-slider {			
		margin: 14px !important;		
	}							
	figure.pro-21 img {			
		width: 100%;			
		padding-top: 0px;
	}						
	.two-col {			
		display: flex;			
		padding: 17px;			
		flex-direction: column;			
	}							
	.gray-two-col {			
		padding: 60px 0px 30px;			
	}							
	.col-reverse-1 {			
		display: flex;			
		flex-direction: column-reverse;			
	}									
	.banner {			
		padding: 10px 0 40px 0;			
	}							
	figure.progaurd-54 img {			
		width: 100%;			
	}					
					
	.banner-subtitle {				
		font-size: 21px;			
		line-height: 6px;			
		color: #fff;			
		text-transform: uppercase;			
	}								
	.banner .two-col .col-left p {
		font-size: 21px;
		line-height: 30px;
		color: #fff;
		font-weight: bold;
		margin-bottom: 0;
		padding: 0px 130px 0px 0px;
	}
	.table-inf {
		display: flex;
		flex-direction: column;
	}
	.welcome-sec h2 {
		display: block;
		padding: 10px;
		text-align: center;
		margin-bottom: -9px;
	}
	.services-sec {
		padding: 60px 20px 60px 20px;
	}
	.video-sec {
		text-align: center !important;
		padding: 10px;
	}
	.microbial-sec {
		padding: 60px 10px;
	}
	/* .testimonial-slider .testimonial-inner p:after {
		content: '';
		display: block;
		position: absolute;
		right: 36px;
		bottom: 40px;
		width: 23px;
		height: 17px;
		background: url(../images/right-quote.png) no-repeat;
		background-size: cover;
	} */
	.welcome-sec {
		padding: 60px 10px 0px 10px;
	}
	.microbial-sec {
		padding: 70px 20px;
	}
	.blue-two-col {
		padding: 60px 10px;
	}
	.qoute-p:after {
		right: 8%;

	}
	.services-sec p:after {
		right: 0px;

	}
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:768px) {
	
	.col-reverse-1 {
		display: flex;
		flex-direction: column-reverse !important;
	}
	.sp-right {
		padding-left: 0px;
	}
	.video-slide {
		width: 95%;
	}
	.form-area {
		width: 90%;
	}
	.banner {
		background: url(images/banner-bg2.jpg) no-repeat center center,
			radial-gradient(circle, rgba(100, 204, 226, 0.5) 0%, rgba(44, 78, 89, 0.5) 50%, rgba(21, 26, 32, 0.5) 100%);
		background-size: 1200px auto, cover !important;
		background-repeat: no-repeat, no-repeat;
		background-position: center center, center center;
	}
	.form-area:before {
	
		background: linear-gradient(180deg, rgba(37, 53, 81, 1) 0%, rgba(0, 0, 0, 1) 100%, rgba(0, 0, 0, 1) 68%);
		opacity: 0.7;
	}

	figure.progaurd-img img {
		width: 100%;
	}
	.banner .two-col {
		flex-direction: column;
		display: flex;
	}
	.banner .two-col .col-right {
		width: 100%;
		margin-right: 0;
		margin-top: 31px;
	}
	.banner .two-col .col-left {
		width: 486px;
		margin-left: 38px;
		padding-top: 35px;
	}
	.testimonial-slider .item p {
		font-size: 19px;
        padding: 10px 47px;
	}

	.welcome-sec .two-col .col-right {
		width: 100%;
		margin-top: 20px;
		padding-left: 0;
	}
	.welcome-sec .two-col .cn ol-left {
		width: 95%;
		margin-left: 0;
	}

	.welcome-sec .two-col {
        display: flex;
        flex-direction: column;
        margin-left: 27px;
    }
	.services-gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 7px;
		justify-content: center;
	}
	h2, .h2 {
		font-size: 32px;
		line-height: 40px;
		font-weight: 600;
	}
	.full-img.img-style figure img {
		justify-content: center;
		text-align: center;
		width: 96%;
		display: flex;
	}
	.shop-cell-grp {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.two-col {
		display: flex;
		flex-direction: column;
	}
	.sp-right {
		margin-top: 20px;
	}

	figure.pro-21 {
		margin-top: 40px;
	}
	.testimonial-sec {
		padding: 60px 20px;
	}
	.welcome-sec {
		padding: 90px 20px 70px 20px;
	}
	.microbial-sec {
		padding: 70px 20px;
	}
	figure.DXB-img img {
		width: 100%;
	}
	figure.DXB-2 img {
		width: 100%;
	}
	.shop-img figure img {
		width: 100%;
	}
	.gray-two-col {
		padding: 70px 20px;
	}
	.blue-two-col {
		padding: 70px 20px;
	}
	figure.pro-21 {
		margin-top: 40px;
	}
	.qoute-p:after {
		right: 16%;
	}
}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
	
	.col-reverse-1 {
		display: flex;
		flex-direction: column-reverse !important;
	}
	.video-slide {
		width: 94%;
	}
	.col-right.col-sm-p {
		padding-top: 50px;
	}
	.banner .big-title {
		font-size: 66px;
	}
	.services-sec p {
		padding: 0px 20px;
	}
	.banner h1 {
		font-size: 70px;
		line-height: 44px;
	}
	.banner {
		padding: 40px 20px 40px 20px;
	}
	.testimonial-slider .item p {
		padding: 0px 20px;
	}
	.services-gallery {
		padding: 10px;
		display: flex;
		flex-direction: row;
		gap: 4px;
		justify-content: space-between;
	}
	figure.table-info-img {
		padding: 22px;
	}
	.shop-cell-grp {
		gap: 26px;
		display: flex;
		flex-wrap: wrap;
	}
	.form-area {
		width: 380px;
	}
	.testimonial-sec {
		padding: 60px 20px;
	}
	.welcome-sec {
		padding: 90px 20px 70px 20px;
	}
	.microbial-sec {
		padding: 70px 20px;
	}
	figure.DXB-img img {
		width: 100%;
	}
	figure.DXB-2 img {
		width: 100%;
	}
	.shop-img figure img {
		width: 100%;
	}
	.gray-two-col {
		padding: 70px 20px;
	}
	.blue-two-col {
		padding: 70px 20px;
	}
	.two-col.new322 {
		display: flex;
		flex-direction: column;
	}
	.two-col.new222 {
		display: flex;
		flex-direction: column;
	}
	.qoute-p:before {
		left: -2px;
	}
	.qoute-p:after {
		right: 19%;
	}
}

/* 4. large desktop responsive css 1024px to 1199px
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1199px) {	
	.banner {
		padding: 40px 20px 40px 20px;
	}
	.testimonial-sec {
		padding: 60px 20px;
	}
	.welcome-sec {
		padding: 90px 20px 70px 20px;
	}
	.services-gallery {
		flex-wrap: wrap;
		gap: 51px;
		justify-content: center;
	}
	.microbial-sec {
		padding: 70px 20px;
	}
	.shop-area {
		padding: 70px 20px;
	}

	figure.DXB-img img {
		width: 100%;
	}
	figure.DXB-2 img {
		width: 100%;
	}
	.shop-img figure img {
		width: 100%;
	}
	.gray-two-col {
		padding: 70px 20px;
	}
	.blue-two-col {
		padding: 70px 20px;
	}
	.two-col.new08 {
		display: flex;
		flex-direction: column;
	}
}

/* 5. Other media-query
------------------------------------------------------------------------------*/