ul li
*{
	margin:0;
	padding:0;
	font-family:'Poppins',sans-serif;
		box-sizing: border-box;


	}
	.container{
		max-width:1536px;
		margin-left:auto;
		margin-right: auto;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.containersection{
		margin-top:5rem;
	}

/*@media(min-width:475px){


}
@media(min-width:640px){


}
@media(min-width:768px){

}
@media(min-width:1024px){

}

@media(min-width:1280px){


}
	@media(min-width: 1536px){
		.containersection{
		margin-top:10rem;
	}


	}
	*/
/*header contacts*/

	#header{
		position :fixed;
		top: 0;
		width:100%;
		z-index: 100;
		height:35px;
left:0;
bottom:10px;
background-color:

	}
	#header.header-tag{
flex:1;
justify-content: flex-start;
					display:fixed;
					background:rgba(255,255,255,0.5);
		
					}
					.header-tag ul li {
display:inline-block;	

			position:relative;
			align-items:left;
			justify-content: flex-start;
		padding: 0 20px 0 0;
		margin-bottom:0;
		font-size:16px;
					}
.header-tag ul li a{
		
		text-decoration:none;
		color:black;
	
		margin-top:20px;		
		
			
			font-size: 10px;
			font-weight: bolder;
		
		}


		
	.header{

		
		width:100%;
		background-position:center;
		background-size:cover;
		position:relative;
		}





@media all
 and (max-width:768px)(min-width:450px){
 
						

}

@media all and (max-width:1024px){
}

/*slider section*/
.slider{
    height:120vh;
  width: 100%;
    position: relative;
    margin-top:110px;
    top: 0;
    bottom-margin:0;

 
 

}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.slider .list .item::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    
}
.slider .list .item .content{
    position: absolute;
    left: 5%;
    top: 40%;
 
    width: 60%;
    max-width: 60%;
    z-index: 1;


}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 50px;
    font-style: italic;
    display: inline-block;
    background:rgba(255,255,255,0.5);
    font-weight: 700;
    overflow:hidden;
   
     color:black;
    text-shadow: 2px 2px #ffffff;
}
.slider .list .item .content h2{
    font-size: 30px;
    margin: 0;
    color: white;
   
}
.slider .list .item.active{
    opacity: 2;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3){
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
}
.arrows{
    position: absolute;
    top: 30%;
    right: 50px;
    z-index: 100;
}
.arrows button{
    background-color: #000000;
    border: none;
    font-family: monospace;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: x-large;
    color: #eee;
    transition: .5s;
}
.arrows button:hover{
    background-color: #eee;
    color: black;
}
.thumbnail{
    position: absolute;
    bottom: 50px;
    z-index: 11;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 250px;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: auto;
    justify-content: center;
    display:none;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    filter: brightness(.5);
    transition: .5s;
    flex-shrink: 0;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnail .item.active{
    filter: brightness(1.5);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
}

@media only screen and (min-width: 0px) and (max-width: 480px){

.slider{
    height: 35vh;
    top: -62px;
   
    position: relative;
}
.slider .list .item .content{
    position: absolute;
    left: 5%;
    top:40%;
 
    width: 70%;
    max-width: 70%;
    z-index: 1;
}
.slider .list .item img{
    width: 100%;
    height: 35vh;
    }


.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
   
     text-shadow: 1px 1px #ffffff;
    
}
.slider .list .item .content h2{
    font-size: 10px;
    margin: 0;
   
}
.arrows{
	display: none;
}}
@media only screen and (min-width: 480px) and (max-width: 768px){
    .thumbnail{
        justify-content: start;
    }
   
     #header{
    	background:rgba(255,255,255,0.7);
    	height:45px;
    }
    	
    .arrows{
        top: 10%;
    }
    .slider{
    height: 65vh;
    top: -62px;
   
    position: relative;
}
.slider .list .item .content{
    position: absolute;
    left: 5%;
    top:40%;
 
    width: 70%;
    max-width: 70%;
    z-index: 1;
}
.slider .list .item img{
    width: 100%;
    height: 65vh;
    }


.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
   
     text-shadow: 1px 1px #ffffff;
    
}
.slider .list .item .content h2{
    font-size: 12px;
    margin: 0;
   
}
.arrows{
	display: none;
}}


@media only screen and (min-width: 768px) and (max-width: 1024px){
	  .slider{
    height: 95vh;
    
}
.slider .list .item img{
    width: 100%;
    height: 95vh;
    }
    .slider .list .item .content{
    
    width: 100%;
    max-width: 80%;
  
}
    .slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
   
     text-shadow: 1px 1px #ffffff;
    
}
.slider .list .item .content h2{
    font-size: 16px;
  
   
}
}
@media only screen and (min-width: 1024px) and (max-width: 1200px){
	  .slider{
    height: 100vh;
    
}
.slider .list .item img{
    width: 100%;
    height: 100vh;
    }
    .slider .list .item .content{
    
    width: 100%;
    max-width: 80%;
  
}
    .slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
   
     text-shadow: 1px 1px #ffffff;
    
}
.slider .list .item .content h2{
    font-size: 18px;
  
   
}
}

@media only screen and (min-width:1200px){
	  .slider{
    height: 120vh;
    
}
#header{
    	background:rgba(255,255,255,0.7);
    	height:55px;
    }
.slider .list .item img{
    max-width: 100%;
    height:120vh;
    }
    .slider .list .item .content{
    
    width: 100%;
    max-width: 100%;
  
}
    .slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:40px;
   
     text-shadow: 1px 1px #ffffff;
    
}
.slider .list .item .content h2{
    font-size: 30px;
  
   
}
}
/*nav*/
		
		nav{
			display:flex;
			padding:2% 6%;
			justify-content:space-between;
			align-items:center;
			position: fixed;
			overflow:;
		background-color:white;
		width:100%;
		top:-30px;
		height:150px;
		
			
	
		z-index:9999;
		}
		
		nav img{
			margin-top:2px;
			width:90px;
			justify-content: flex-start;

		}
		.navlinks .imglogo{
			flex:1;
			text-align:left;
			margin-left: 0;
		
		}
		
		
		.nav-links{
			flex:1;
			text-align:center;
			color:black;
			font-weight: bolder;
			display: flex;
			
			padding:0;
		}
		.nav-links ul li{
			list-style: none;
			display:inline-block;
			padding:8px 4px;
			position:relative;
			display: fixed;
			flex-direction: column;
			color:black;
			
		}
		.nav-links ul li::after{
			content: '';
			width:0%;
			height:2px;
			background:black;
			display:block;
			margin:auto;
			transition:0.5s;

		}
		.nav-links ul li a{
			text-decoration: none;
			font-size: 10px;
			color:black;
			margin-top:40px;
		}
		.nav-links ul li a:hover{
			width:100%;
			color:#023e8a;
		}
		.nav-links ul li a:hover::after{
			width:100%;
			color:white;
			
		}
		nav .fa {
			display:none;

		}
		
		.fasf .fa{
		
			color:black;
			font-size:20px;
			
			display: block;
			''
			

		}





		@media only screen and (min-width: 0px) and (max-width: 768px){
			
		.nav-links ul li{
			display:block;
			
		}
		.nav-links ul li a{
			
			font-size: 10px;
			}
			.header-tag ul li a{		
		
			
			font-size: 10px;
}
		nav{
		    background:none;
		    top:-20px;
		    height:100px;
		    position: fixed;
		}
		nav img{
			width:50px;
			 height:50px;
			 object-fit: cover;
			 object-position: 50% 50%;
			 margin-top:2px;
	

		}
		.nav-links{
			position:fixed;
			padding:14px;
			height:60vh;
			width:200px;
			top:-20px;
			right:-200px;
			text-align:left;
			z-index:2;
			background:rgba(255,255,255,0.7);
			transition:1s;
		}
		.nav .fa {
			display:block;
			color:black;
			margin:10px;
			font-size:18px;
			cursor:pointer;
			top:-15px;
		}
		.nav .nav-links .fa {
			display:block;
			color:black;
			margin:10px;
			font-size:18px;
			cursor:pointer;
			top:-15px ;
		}
		.nav-links ul{
			padding:10px;
		}
		nav img{
			display:none;
	

		}
		.nav-links ul li a{
			text-decoration: none;
			font-size: 10px;
			color:black;
			margin-top:20px;
		
			}
		}

@media only screen and (min-width: 768px) and (max-width: 1024px){
.nav-links ul li a{
			
			font-size: 10px;
			}
			.header-tag ul li a{		
		
			
			font-size: 10px;
}
nav img{
	width:auto;
			 height:50px;
			 object-fit: cover;
}
	.fasf .fa{
		
		
			font-size:15px;
			
			display: block;
			''
			

		}


	
		}
@media only screen and (min-width: 1024px) and (max-width: 1200px){
.nav-links ul li a{
			
			font-size: 12px;
			}
			.header-tag ul li a{		
		
			
			font-size: 12px;
}}

@media all and (min-width:1200px){
	  .nav-links ul li a{
			
			font-size: 14px;
			}
			.header-tag ul li a{		
		
			
			font-size: 14px;
}}




		/*Hero
		*/
		.hero{
			width:100%;
			color:black;
			position:relative;
			top:-15px;
			left:0%;
			padding-bottom: 20px;
			
			text-align:center;
			
		
			
		}
		
		
		.hero h1{
			 padding-top:70px;
			font-size:24px;
			font-weight: bolder;
		}
		.hero p{
			margin:10px 0 20px;
			font-size:16px;
			color:black;
			
			
		}
		.btnhero{
			display:inline-block;
			text-decoration: none;
			color:black;
			border:1px solid #00b4d8;
			padding:4px 12px;
		
			font-size:12;
			background:white;
			position:relative;
			cursor:pointer;
			border-radius:10px;

		}
			.btnhero:hover{
			border:1px solid black;
			color:black;
			transform:1s;
			background:#00b4d8;

		}
		
		

		@media only screen and (min-width: 0px) and (max-width: 768px){
			.hero h1{
			font-size:18px;
			 padding-top:40px;
		}
		.hero{
			top:-45px;
		}
		.hero p{
		    font-size:12px;
		   
		}
		

		}
			/*------PROUCTS----*/
			/*new-featured products*/
            .products{
			width:100%;
			margin:auto;
			text-align:center;
			
 
			}
			.overview-f{
				width:100%;
				margin:auto;
				text-align:center;
				box-shadow:;
			
				position:relative;
				background-image:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url('images/fleet mgt.jpg');
				background-position:center;
						background-size:cover;
						background-repeat: no-repeat; 
			}
		
		.overview-f h2{
			text-align:center;
				margin:0 auto 10px;
			font-weight:600;
			font-size:22px;
				position:relative;
				line-height:40px;
				color:#023e8a;
			}
			.overview-f h2:after{
				content:'';
				background:red;
				width:80px;
				height:5px;
				border-radius:5px;
				position:absolute;
				bottom:0;
				left:50%;
				transform:translateX(-50%);
			}
			.overview-f .rowf{
				margin-top:1%;
				display:flex;
				justify-content:space-between;
		
			}
			.overview-colf{
				flex-basis:33.3%;
				background:rgba(255,255,255,0.7);
				border-radius:10px;
				margin-bottom:5%;
				padding:2px 12px;
				box-sizing:border-box;
				text-align:center;
				transition:0.5s;
				position: relative;
				color:black;
			}
			.overview-colf img{
	
					width:25%;
			height:auto;
			display:block;
			margin:auto;
			float:;
			border-radius:15px;
			 object-position: 40% 60%;
			
			
	
			
			}
		
			
			
			 .pos-cen{
				position: absolute;
				width: 70%;
				height: 30%;
				padding: 30px;
				top:20%;
				
			}
		.overview-colf h3{
			text-align:center;
			font-weight:600;
			margin:10px 10px;
			font-size:18px;
		}

		.overview-colf:hover{
			box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
		}
.overview-colf p{
			font-size:16px;
			font-weight:400;
			text-align: justify;
			width: 70%;
			float: cent;
			border-radius:5px;
			padding-left: 15%;
					
		}
			.bottom{
				position: absolute;
				
				bottom:10px;
				right:30%;

			}
			.bottom h4 a{
			font-size:14px;
				
			}
			.bottom .btnhero{
				width:100%;
				height:auto;
				 
			
			}
			
			
	@media only screen and (min-width: 0px) and (max-width: 768px){
			.overview-f.row{
				flex-direction:column;
			}

			
.overview-f h2{
font-size:16px;
}
.overview-colf p{
font-size:12px;
}
.overview-colf h3{
font-size:14px;
}
	

			.bottom{
				position: absolute;
				
				bottom:-10px;
				right:30%;

			}
			.bottom h4 a{
				font-size:10px;
				
			}
			.bottom .btnhero{
				width:100%;
				height:auto;
				 
			
			}
			.rowf {
				flex-direction:column;
			}
		}	

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

		}


		/*benefits*/
.overview-b{
				width:90%;
				margin:auto;
				text-align:center;
				
				box-shadow:;
			margin-bottom:;
				margin-bottom:5%;
				padding:20px 4px;
				position:relative;
				background-image:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url('images/sate 2 v1.jpg');
				background-position:center;
						background-size:cover;
						background-repeat: no-repeat;
						 
			}
		
		.overview-b h2{
			text-align:center;
				margin:10px auto 10px;
			font-weight:600;
				position:relative;
				line-height:40px;
				font-size:22px;
				color:#023e8a;
			}
			.overview-b h2:after{
				content:'';
				background:red;
				width:80px;
				height:5px;
				border-radius:5px;
				position:absolute;
				bottom:0;
				left:50%;
				transform:translateX(-50%);
			}

			.overview-b.rowb{
				margin-top:1%;
				display:flex;
				justify-content:space-between;
		
			}
			.overview-colb{
				flex-basis:16.6%;
				background:rgba(0,0,0,0.3);
				border-radius:10px;
				margin-bottom:5%;
				padding:4px 8px;
				box-sizing:border-box;
				text-align:center;
				transition:0.5s;
				position: relative;
				color:black;
			}
			.overview-colb img{
				width:50px;
			height:50px;
			display:block;
			margin:auto;
			border-radius:10px;
			 object-position: 50% 50%;
			
	
				border-radius: 50%;
			}
		.overview-colb p{
			font-size:16px;
			font-weight:300;
			margin:10px 10px;
		}
		.overview-colb:hover{
			box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
		}
		@media only screen and (min-width: 0px) and (max-width: 768px){
			.rowb{
				flex-direction:column;
			}
		.overview-b	h2{
				font-size:16px;
			}
			.overview-colb p{
				font-size:12px;
			}
		
		}



@media only screen and (min-width: 768px) and (max-width: 1024px){
	
		.rowb .overview-colb{
				flex-basis:16.6%;
				
			}
			
		.overview-colb p{
				font-size:14px;
			}
			

		}



/*Latest Products*/
             .row-pf{
				display:flex;
				align-items:center;
				flex-wrap:wrap;
				justify-content: space-around;
			}
			.products-cat-small-container{
				max-width:1080px;
				margin:auto;
				padding-left: 25px;
				padding-right: 25px;
				padding-top:10px;

			}
			.products-cat-small-container h2{
				font-size: 22px;
			}
			.products-col-featured{
				flex-basis:25%;
				padding-left:10px;
				min-width:200px;
				margin-bottom:50px;
				box-shadow:0 0 10px 0 #00b4d8;
				transition:transform 0.5s;
			}
			.products-col-featured:hover{
				transform:translateY(-5px);
			}
			.products-col-featured img{
			width:  180px;
			 height: 180px;
			 object-fit: cover;
			 border-radius:10px;

			}
			.products-col-featured h4{
				font-weight:normal;
				color:black;
			}
			.linked a {
				text-decoration: none;
			}
			.products-col-featured p{
			font-size:14px;	
			}
			.products-col-featured a h4{
			font-size:14px;	
			}
			.des p{
				font-size:10px;
				text-align: justify;
			}
			.rating .fa{
				color:#023e8a;
			}

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

             .row-pf{
             	flex-direction:column;
             }}

			/*------Overview-----*/		

			.overview{
				width:100%;
				margin:auto;
				text-align:center;
				padding-top:40px;
				box-shadow:
				margin-bottom:40px;
				position:relative;
				background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url('images/bg0pp.jpg');
				background-position:center;
						background-size:cover;
						background-repeat: no-repeat;
		}
		.overview h1{
			text-align:center;
				margin:0 auto 10px;
				position:relative;
				font-size:24px;
			color:#023e8a;
			font-weight:600;
			}
			.overview p{
				color:black;
				font-weight:300;
				font-size:16px;
			
				line-height:22px;
				padding:10px;
			}
			.rowc{
				margin-top:1%;
				display:flex;
				justify-content:space-between;
		
			}
			.overview-col{
				flex-basis:48%;
				background:transparent;
				border-radius:10px;
				margin-bottom:1%;
				padding:10px 12px;
				box-sizing:border-box;
				text-align:justify;
				transition:0.5s;
			}
		.overview-col h3{
			text-align:center;
			font-weight:600;
			margin:10px 0;
			font-size:18px;
		}

		.overview-col p{
		
			font-weight:300;
			font-size:16px;
			
		}
		.overview-col:hover{
			box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
		}
	@media only screen and (min-width: 0px) and (max-width: 768px){
			.rowc{
				flex-direction:column;
			}
			.overview h1{
				font-size:18px;
			}
			.overview p{
				font-size:12px;
			}
			.overview col h3{
				font-size:14px;
			} 
			.overview col p{
				font-size:12px;
			} 


		}

			.products{
			width:100%;
			margin:auto;
			text-align:center;
			
 
			}
			.
			.products-ca{
				margin:70px 0;
			}
			.products-col{
				flex-basis:31%;
				border-radius:10px;
				margin-bottom:5%;
				text-align:center;
				min-width: 250px;
				box-shadow:0 0 20px 0 #00b4d8;
			}
			.products-col img{
			width:  240px;
			 height: 240px;
			 object-fit: cover;
			 justify-content:center;
			 border-radius:10px;
			 padding-top:10px;
			 display: block-inline;
			}
			
			/*------featured products------*/
			
			.tittle-fproduct{
				text-align:center;
				margin:0 auto 60px;
				position:relative;
				line-height:40px;
				color:#023e8a;
			}
			.tittle-fproduct:after{
				content:'';
				background:red;
				width:80px;
				height:5px;
				border-radius:5px;
				position:absolute;
				bottom:0;
				left:50%;
				transform:translateX(-50%);
			}


			





			/*---offer-----*/
			.offer{
				
				background:#023e8a;
				margin-top:60px;
				padding:20px 0;
				width: 100%;
				text-align:center;

			}
			.head-offer{
				text-align:left;
				color:red;
			}
			.offer-p p{
				color:red;
				font-weight:bolder;
			}
			.offer-p .offer-img{
				width:  200px;
			 height: 200px;
			 object-fit: cover;

			}
			.offer-p h1{
				font-size: 24px
			}

			/*----shop-----*/
			.row-select{
				justify-content: space-between;
				margin:100px auto 50px;

			}
			.row-select select{
				border:1px solid black;
				padding:5px;
			}
			.row-select select:focus{
				outline:none;
			}
			.page-btn{
				margin:10px auto 80px;
			}
			.page-btn span{
				display: inline-block;
				border:1px solid black;
				margin-left:10px;
				width:40px;
				height:40px;
				line-height:40px;
				text-align:center;
				cursor:pointer;
			}
			.page-btn span:hover{
				background:#222222;
				color:#555555;
			}
			/*------detail product----*/
			.products-small-single-product{
				
							
				background-color:#fffdd0;
				margin-top:80px;
			}
			.products-small-single-product .products-col-featured-single img{
				padding:0;
			}
			.small-container-single-product .products-col-featured-single{
				padding:20px;
			}
			.products-col-featured-single{
			    flex-basis:25%;
				padding:10px;
				margin-bottom:50px;
				min-width: 250px;
				text-align:justify;

			}
			.products-col-featured-single h1{
				font-size:20px;

			}
			.products-col-featured-single .btnhero{
				width:100px;
				height:35px;
			}
			.products-col-featured-single p{
				text-align:justify;
			}
			.products-col-featured-single h3{
				margin:20px 0;
				font-size:14px;
			}
			.products-col-featured-single input{
				width:30px;
				height:40px;
				padding-left:10px;
				font-size:14px;
				margin-right:0px;
				border:1px solid black;

			}
			.pproducts-col-featured-single input:focus{
				outline:none;
			}
			.products-col-featured-single .fa{
				color:black;
				margin-left:10px;
			}
			.row-pf-single{
				display:flex;
				align-items:center;
				justify-content: center;
				

			}
			.row-pf-single .products-col-featured-single{
				padding-left:10px;
				height:300px;
				
				
			}
			.row-pf-related{
				margin-top:5%;
				display:flex;
				justify-content:space-between;
			}
			@media all
 and (max-width:768px){
				.row-pf-related{
				flex-direction:row;
			}
			.row-pf-single{
				flex-direction: column;
			}
			.row-pf-single .products-col-featured-single{
				padding-left:10px;
				}
		
			}
			
			
			.small-img-row{
				display: flex;
				justify-content: space-between;
			}
			.small-img-col{
				flex-basis:24%;
				cursor:pointer;
			}
			/*---related products*/
			.row-pf-related a{
				color:black;
				text-decoration: none;
			}

			/*---cart----*/
			.cart-page{
				margin:60px auto;
				
			}
			table{
				width:100%;
				border:collapse;
				

			}
			.cart-info{
				display:flex;
				flex-wrap: wrap;
			}
			th{
				text-align:left;
				padding:5px;
				color:black;
				font-weight:normal;
				background:#fffdd0;

			}
			td{
				padding:10px 5px;
			}
			td input{
				width:40px;
				height:30px;
				padding:5px;
			}
			td a{
				color:black;
				font-size:12px;
			}
			td img{
				width:80px;
				height:80px;
				margin-right:10px;
				margin-left:10px;
			}
			.total-price{
				display:flex;
				justify-content: flex-end;
			}
			.total-price table{
				border-top:3px solid red;
				width:100%;
				max-width:350px;

			}
			td:last-child{
				text-align:right;
			}
			th:last-child{
				text-align: right;
			}
			@media all
 and (max-width:768px){
				.cart-info p{
					display:none;

				}
			}
			
			
			

			
/*--OUR SOLUTIONS--*/
		.slides-h1{
			text-align:center;
				margin:0 auto 60px;
				position:relative;
				line-height:40px;
				color:#023e8a;
		}
		

			/*------Services----*/	




			.services-f{
				width:85%;
				margin:auto;
				text-align:center;
				
				box-shadow:;
			margin-bottom:;
				margin-bottom:5%;
				padding:20px 4px;
				position:relative;
				background-image:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url('images/sate 2 v1.jpg');
				background-position:center;
						background-size:cover;
						background-repeat: no-repeat;
						 
			}
			
		.services-f h2{
			text-align:center;
				margin:10px auto 10px;
			font-weight:600;
				position:relative;
				line-height:40px;
				font-size:22px;
				color:#023e8a;
			}
			.services-f h2:after{
				content:'';
				background:red;
				width:80px;
				height:5px;
				border-radius:5px;
				position:absolute;
				bottom:0;
				left:50%;
				transform:translateX(-50%);
			}
			.services-f h3{
			text-align:left;
				margin:10px auto 10px;
			font-weight:400;
				position:relative;
				line-height:40px;
				font-size:20px;
				
			}
			.services-f ol{

			}
			.services-f li{
				font-size: 22px;
				text-align: left;
				color:#023e8a;
				text-decoration-style:none;
			}
			.services-f li a{
		
				color:#023e8a;
				text-decoration:none;
			}


			.services-f.rowb{
				margin-top:1%;
				display:flex;
				justify-content:space-between;
		
			}
			.services-colf{
				flex-basis:16.6%;
				background:rgba(0,0,0,0.3);
				border-radius:10px;
				margin-bottom:5%;
				padding:4px 8px;
				box-sizing:border-box;
				text-align:center;
				transition:0.5s;
				position: relative;
				color:black;
			}
			.services-colf img{
				width:50px;
			height:50px;
			display:block;

			margin:auto;
			border-radius:10px;
			 object-position: 50% 50%;
			
	
				border-radius: 50%;
			}
		.services-colf p{
			font-size:16px;
			font-weight:300;
			margin:10px 10px;
			text-align:justify;
		}
		.services-colf:hover{
			box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
		}
		@media only screen and (min-width: 0px) and (max-width: 768px){
			.serices-col{
				flex-direction:column;
			}
		.services-f	h2{
				font-size:16px;
			}
			.services-f li{
				font-size: 16px;
				
			}
			.services-colf p{
				font-size:12px;
			}
			.services-colf h3{
				font-size:14px;
			}
		
		}



@media only screen and (min-width: 768px) and (max-width: 1024px){
	
		.rowb .overview-colb{
				flex-basis:16.6%;
				
			}
			
		.services-colf p{
				font-size:14px;
			}
			.services-colf h3{
				font-size:16px;
			}
			

		}
		
		.services{
			width:80%;
			margin:auto;
			text-align:center;
			padding-top:40px;
		
		}
		.services-col{
			flex-basis:32%;
			width: 50%;
			border-radius:10px;
			margin:0 auto;
			margin-bottom:40px;
			position:relative;
			overflow:hidden;
			text-align:center;
			box-shadow:0 0 20px 0 #00b4d8;
			float: center;
		}
		.services-col img{
			
			 width:  240px;
			 height: 240px;
			 float:center;
			 object-fit: cover;
			 justify-content:center;
			 border-radius:10px;
			 padding-top:50px;
			 display: block-inline;
		}
		.ser-left{
			float: center;
		}
		.services-text h3{
			background:;
			height:100%;
			color:black;
			width:100%;
			position:absolute;
			font-size:14px;
			top:0;
			left:0;
			text-shadow:6px 4px 6px #023e8a;
			font-weight: bold;
			

		}
		.services-text p{
			text-align:center;
			

		}



		
			.services-sf{
				width:60%;
				margin:auto;
				text-align:center;
				
				box-shadow:;
			margin-bottom:;
				margin-bottom:5%;
				padding:20px 4px;
				position:relative;
				background-image:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url('images/sate v1.jpg');
				background-position:center;
						background-size:cover;
						background-repeat: no-repeat;
						 
			}
			
		.services-sf h2{
			text-align:left;
				margin:10px auto 10px;
			font-weight:600;
				position:relative;
				line-height:40px;
				font-size:22px;
				color:#023e8a;
			}
			.services-sf h2:after{
				content:'';
				background:red;
				width:80px;
				height:5px;
				border-radius:5px;
				position:absolute;
				bottom:0;
				left:20%;
				transform:translateX(-50%);
			}
			.services-sf h3{
			text-align:left;
				margin:10px auto 10px;
			font-weight:400;
				position:relative;
				line-height:40px;
				font-size:20px;
				
			}

			.services-sf.rowb{
				margin-top:1%;
				display:flex;
				justify-content:space-between;
		
			}
			.services-colsf{
				flex-basis:16.6%;
				background:rgba(0,0,0,0.3);
				border-radius:10px;
				margin-bottom:5%;
				padding:4px 8px;
				box-sizing:border-box;
				text-align:center;
				transition:0.5s;
				position: relative;
				color:black;
			}
			.services-colsf img{
				width:50px;
			height:50px;
			display:block;

			margin:auto;
			border-radius:10px;
			 object-position: 50% 50%;
			
	
				border-radius: 50%;
			}
		.services-colsf p{
			font-size:16px;
			font-weight:300;
			margin:10px 10px;
			text-align:justify;
		}
		.services-colsf:hover{
			box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
		}
		@media only screen and (min-width: 0px) and (max-width: 768px){
			.serices-col{
				flex-direction:column;
			}
		.services-sf	h2{
				font-size:16px;
			}
			.services-colsf p{
				font-size:12px;
			}
			.services-colsf h3{
				font-size:14px;
			}
		
		}



@media only screen and (min-width: 768px) and (max-width: 1024px){
	
		.rowb .overview-colb{
				flex-basis:16.6%;
				
			}
			
		.services-colsf p{
				font-size:14px;
			}
			.services-colsf h3{
				font-size:16px;
			}
			

		}
		
		/*-------testimonials*/
		.testimonials{
			width:80%;
			margin:auto;
			text-align:center;
			padding-top:50px;
		}
		.testimonials-col{
			flex-basis:45%;
			border-radius:10px;
			margin-bottom:5%;
			text-align:left;
			background:white;
			padding:25px;
			cursor:pointer;
			display:flex;

		}
		.testimonials h1{
			text-align:center;
				margin:0 auto 60px;
				position:relative;
				line-height:40px;
				color:#023e8a;
			
			font-weight:600;
			}
		.testimonials-col img{

			 width:  40px;
			 height: 40px;
			 margin-left:5px;
			 margin-right:30px;
			 border-radius:50%;
			 background-color:#00b4d8;
			}
			.testimonials-col p{
				padding:0;
			}
			.testimonials-col h3{
				margin-top:15px;
				text-align:left;
			}
				@media all
 and (max-width:768px){
					.testimonials-col img{
			
			 margin-left:0px;
			 margin-right:15px;
			 background-color:#00b4d8;
			}}
			/*-------footer------*/

			.footer{
				width:100%;
				min-height: 100%;
				text-align:center;
				padding:10px 0;
					background-position:center;
					
		background-size:cover;
		position:sticky;	
		background-image:url("images/bgpp.jpg");
				
				
				
			}
			.footer h4{

			}
			.footer .socials{
					width:100%;
					display:flex;
					justify-content: center;
					margin-bottom:10px;
					
					}
					
			.socials a{
				text-decoration: none;
				color:black;
			}
				
				.social{
					color:red;
					width:30px;
					height:30px;
					display:flex;
					}
					.cnt p{
						padding:0;
						margin-top:5px;
						font-weight:bold;
					}
					
					/*-----about us----*/
					.sub-header{
						height:35vh;
						width:100%;
						background-image:url(images/bg0.jpg);
						background-position:center;
						background-size:cover;
						position:relative;
						text-align:center;
						color:rgba(255,255,255,0.5);
						

					}
					#sub-header h1{
						margin-top:10px;
						font-weight:bold;
						color:black;
						text-align: center;
						margin-bottom:10px;
						
					}
					
					/*----VISIONS---*/
					.about-us{
				width:80%;
				margin:auto;
				text-align:center;
				padding-top:40px;
		}
		
			.row-about{
				margin-top:5%;
				display:flex;
				justify-content:space-between;
				flex-direction:column;

		
			}
			.row-aboutcol{
				flex-basis:48%;
				background:transparent;
				border-radius:10px;
				margin-bottom:5%;
				padding:20px 12px;
				box-sizing:border-box;
				text-align:center;
				transition:0.5s;
				box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
				box-shadow:0 0 20px 0 #00b4d8;
			}

		.row-aboutcol:hover{
			box-shadow:0 0 20px 0 rgba(0,0,0,0.2);
		}
		/*-----TEAM---*/
		.team{
			width:80%;
			margin:auto;
			text-align:center;
			padding-top:40px;
		}
		.team-col{
			flex-basis:32%;
			border-radius:10px;
			margin-bottom:40px;
			position:relative;
			overflow:hidden;
			text-align:center;
			box-shadow:0 0 20px 0 #00b4d8;
		}
		.team-col img{			
			 width:  240px;
			 height: 240px;
			 object-fit: cover;
			 justify-content:center;
			 border-radius:10px;
			 padding-top:50px;
			 display: block-inline;
		}
		.team-col h3{
			height:100%;
			color:black;
			width:100%;
			position:absolute;
			top:0;
			left:0;
			text-shadow:6px 4px 6px #023e8a;
			font-weight: bold;
		}
		.clients{
			width:80%;
			margin:auto;
			text-align:center;
			padding-top:40px;
		}
		.clients-col{
			flex-basis:32%;
			border-radius:10px;
			margin-bottom:40px;
			position:relative;
			overflow:hidden;
			text-align:center;
			box-shadow:0 0 20px 0 #00b4d8;
		}
		.clients-col img{			
			 width:  100%;
			 height: auto;
			 object-fit: cover;
			 justify-content:center;
			 border-radius:10px;
			 padding-top:50px;
			 display: block-inline;
		}
		/*------contact us*/
		.location{
			width:80%;
			margin:auto;
			padding:60px 0;
		}
		.location iframe{
			width:100%;

		}
		.contact-us{
			width:80%;
			margin:auto;
			padding:60px 0;
		}
		.contactus-col{
			flex-basis:48%;
			margin-bottom:30px;

		}
		.contactus-col div{
			display:flex;
			align-items:center;
			margin-bottom:40px;
		}
		.contactus-col div img{
			object-fit: cover;
			width:40px;
			height:40px;
			font-size:28px;
			margin:10px;
			margin-right:30px;

		}
		.contactus-col div h5{
			font-size:18px;
			margin-bottom:5px;
			font-weight:400;
			color:black;
			padding-right:10px;

		}
		.contactus-col input, .contactus-col textarea{
			width:100%;
			padding:15px;
			margin-bottom:17px;
			outline:none;
			border:1px solid grey;
		}
		/*shop*/
		.shop-col{
			margin-bottom:30px;
			padding-top:15px;
			text-align:center;
			box-shadow:0 0 20px 0 #00b4d8;
			

		}
		.shop-col input{
			width:50%;
			text-align:center;
			padding:15px;
			margin-bottom:17px;
			outline:none;
			border:1px solid grey;
		}
		.shop-col textarea{
			width:50%;
			text-align:center;
			padding:15px;
			margin-bottom:17px;
			outline:none;
			border:1px solid grey;
		}
		.shop-col select{
			width:55%;
			text-align:center;
			padding:15px;
			margin-bottom:17px;
			outline:none;
			border:1px solid grey;
		}
		.shop-col button{
			width:50%;
			text-align:center;
			padding:15px;
			margin-bottom:17px;
			outline:none;
			border:1px solid grey;
		}
		@media all
 and (max-width:768px){
			.shop-col select{
			width:60%;
			}
				}

				/*------Blogs----*/
				
				.rowb{
				margin-top:5%;
				display:flex;
				justify-content:space-between;
				  position:relative;
				  z-index: 1;
				  overflow-x:hidden;
				  padding-top: 20px;
		
			}
			.blogs{
			width:90%;
			margin:auto;
			text-align:center;
			padding-top:40px;		
				}
				.blogs-col{
			margin-bottom:20px;
			position:relative;
			overflow:hidden;
			text-align:justify;

			width:70%;
			left:0;
			}
			.blogs-col1{
			margin-bottom:20px;
			position:relative;
			text-align:left;
			padding-left:20px;
			padding-right:20px;
			font-size:12px;
			width:40%;
			left:10px;
		overflow-wrap:normal;
			background:	#F9f6ee;
			overflow:visible;
			}
			.blog-tittle{
				flex-basis:25%;
				padding-left:10px;
				min-width:200px;
				margin-bottom:50px;
				box-shadow:0 0 10px 0 #00b4d8;
				transition:transform 0.5s;
			}
			.blog-tittle:hover{
				transform:translateY(-5px);
			}
			.blogs-tittle h1{
				font-size:24px;
				text-align:center;

			}
			.blogs-tittle h1 a{
				text-decoration:underline double black 3px;;
				font-size:42px;
				color:black;

			}
			.blogs-tittle img{
			width:80%;
			height:auto;
			display:block;
				border-radius:10px;
				align-items: left;
				text-align:left;

			}
			.blogs-tittle-content h5{
				padding-left:20px;
				

			}
			.blogs-tittle-content p{
				text-align:justify;
			

			}

			
			@media all
 and (max-width:768px){
				
				.rowb{
				display: block;

		}
		.blogs-col{
			width:100%;
			
			
			
		}
		.blogs-col1{
			width:100%;
			left:0;	
			font-size:12px;
			text-align:left;
			padding:10px;
			
		}
		.blogs-tittle-content p{
				font-size:14px;
			

			}
			.blogs-tittle h1 a{
				text-decoration:underline double black 3px;;
				font-size:24px;
				color:black;
}
		}


		/*----blog pages----*/
		

			.blogs-p{
			width:90%;
			margin:auto;
			text-align:center;
			padding-top:40px;		
				}	
				.rowb-p{
				margin-top:5%;
				display:flex;
				flex-direction:column;
				justify-content:space-between;
				 position:relative;
				 z-index: 1;
				 overflow-x: hidden;
				 padding-top: 20px;
				}
				.blogs-colp{
			margin-bottom:40px;
			position:relative;
			overflow:hidden;
			text-align:justify;
			right:0;
			font-size:14px;		
			width:70%;
			}
			.posters h5 a{
			text-decoration:none;
			text-align: center;
			display:inline;
			 padding-left:30px;
			  font-size:12px;
			}
			.posters h4{
			 padding-left:30px;
			 margin-top:15px;
			 font-size:18px;
			 text-align:center;
			 text-decoration:underline double red 3px;
			 
			}
			.posters img{
			width:240px;
			height:240px;
			display:block;
			margin:auto;
			border-radius:5px;
			}
			hr{
			    color:red;
			    padding-bottom:10px;
			   
			}
			.blogs-col1 h5 a {
			text-decoration:none;
			text-align: justify;
			display:inline;
			}
			.blogs-col1 ol li a {
			overflow:visible;
			text-decoration:none;
			color:#023e8a;
			}
			.blogs-col1 img{
			width:240px;
			height:240px;
			display:block;
			margin:auto;
			border-radius:5px;}
			
			.blogs-tittle-content h1{
				text-align:left;
				font-size:20px;
				color:#023e8a;

			}
			

			.blogs-tittle-content h2{
				text-align:left;
				font-size:32px;
				color:#023e8a;
				font-style:italic;

			}
			.blogs-tittle-content h3{
				text-align:left;
				text-decoration:none;
				color:#00b4d8;
				display:inline;
			font-size:14px;

			}
			.blogs-tittle-content h3{
			
				padding-bottom: -15px;
}
			
				.blogs-tittle-content ul li{
				text-align:justify;
				list-style-type:disc;
				padding-left:20px;
				text-decoration:none;
		
			}
			.blogs-tittle-content ol li h3{
				text-align:justify;
				list-style-type:disc;
				padding-left:20px;
				text-decoration:none;
				display:inline;
		
			}
			
			.blogs-tittle-content img{
				width:60%;
				height:auto;
				border-radius:5px;
				text-align: left;
				display:block;
				 margin:auto;
				
				

			}
			
			.sharethis-inline-share-buttons{
		 color:red;  
		 border-radius:50%;
		 padding-bottom:10px;
		  
		}
		@media all
 and (max-width:768px){
		  	.sharethis-inline-share-buttons{
		  	    
		  	}
		  	.blogs-tittle-content h2{
				text-align:left;
				font-size:18px;
				color:#023e8a;
				font-style:italic;

			}
		    
		}
		
		.video-container{
		    max-width:100%;
		    height:auto;
		}
		.video-container video{
		    width:100%;
		    height:auto;
		}
		
		

			@media all
 and (max-width: 768px) {
		.video-container video{
		    width:80%;
		}
		.youtube-video iframe{
			    	width:100%;
				height:auto;
				border-radius:5px;
				text-align: left;
				display:block;
				 margin:auto;
				
			}
		
		    
		}
			.row-nextbar{
				margin-top:5%;
				display:flex;
				justify-content:center;

			}
			@media all
 and (max-width:768px){
			.row-nextbar{
				flex-direction:row;

			}
		}
		.sharethis-inline-share-buttons{
		 color:red;  
		 border-radius:50%;
		  
		}
		@media all
 and (max-width:768px){
		  	.sharethis-inline-share-buttons{
		  	    
		  	}
		    
		}
			.next-bar{
			width:55%;
			margin:auto;
			text-align:center;
			padding-top:20px;
			margin-bottom:20px;
			background:gradient;
			height:;
			}
			.content h5 a{
				text-decoration: none;
				padding-left: 40px;
				font-size:20px;
				color: #222222;
				font-style:italic;
				
			}
			@media all
 and (max-width:768px){
			.content h5 a{
	
				font-size:14px;
				
				
			}
			.posters{
			 
			
			 
			}

				.blogs-tittle-content ul li{
					
				font-size:14px;
				text-decoration:none;
				}
				.blogs-colp{
					font-size:12px;
					width:100%;
					text-align:justify;
					padding-left:0;
				}
				.blogs-tittle-content img{
				width:100%;
				height:auto;
				border-radius:5px;
				text-align: left;
				display:block;
				 margin:auto;
				
		}
		.share{
		    display:flex;
		    flex-direction:column;
		     background:rgba(0,180,216,0.6);
		     padding:12px;
		}
		.share-text p{
		
			border-radius:10px;
			text-decoration-style:solid;
	
			position:relative;
			overflow:hidden;
			text-align:center;
			
		    
		}
		.share-text{
		  
		}
			/*----test shop---*/
			
			

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root{
    --after-content:'2';
}         
.cart-box{
    width:40% !important;
    position: absolute;
    left:50%;
    top:20%;
    /* border:solid 1px blue; */
    padding:10px 20px;
}
@media all
 and (max-width: 768px) {
	.cart-box{
		top:30%;
		  width:90% !important;
		   left:10%;
		
	}
}
.cart-wrapper{
    
  overflow-y: auto;
  
    max-height: 350px;
    width:34vw;
    
}
@media all
 and (max-width:768px){
	.cart-wrapper{
		max-height: 200px;
    
  
    width:70vw;
    }}



.subtotal{
    text-align: center;
    padding:5%;
}
.checkout, .view-cart{
    width:95%;
    text-align: center;
    cursor: pointer;
    background-color: #00b4d8;
    font-size: large;
    color: #fff;
    margin:10px auto;
    padding:10px 15px;
}
.view-cart{
    background-color: #00b4d8;
    border: 2px solid #00b4d8;
    color: #fff;
}
.cart-icon{
    text-align: right;
    font-size:30px;
}
@media all
 and (max-width:768px){
	.cart-icon{
    
    font-size:20px;
}
}
.cart-item{
  display:grid;
  grid-template-columns: 6fr 14fr 2fr;
  padding:5% 2%;
  border-bottom:solid 1px lightgray;  
}

.cart-item img{
    width:100%;
}


.cart-item .details{
    padding-left:10%;
    text-align:left;
    
}

.cart-item h4 {
  text-align: left; 
  margin-bottom:5%;
  font-weight: bold; 
}

.cart-item .price{
display: block;
text-align: left;
margin-top: 35%; 
  }
  
 .quantity{
     display: block;
     margin-top:5%;
     text-align: left;
 } 

 .fa-window-close{
    color: brown;
 }
 
 .cancel{

     text-align: right;
     color:red;
 }
 .cancel .fa-window-close{
color: brown;
 }
 
  .whole-cart-window{
     border: solid lightgray 1px;
     border-top:none;
     position: relative;
     top:12vh;
     background-color: #fff;
     margin-right:2%;
 }
 .whole-cart-window h2{
 	background-color:#00b4d8;
 	font-size:22px;
 }
 @media all
 and (max-width:768px)
{
	.whole-cart-window h2{
		font-size:16px;
	}
	.cart-item h4 {
		font-size:12px;
	}
	.cart-item .price{
		font-size:12px;
	}
	.quantity{
		font-size:12px;
	}
	.cart-item p{
		font-size:12px;
	}
}

 .hide{
     display: none;
 }
.non-empty::after{
  content: var(--after-content);
  font-size: 20px;
  width:20px;
  display: inline-block;
  text-align: center;
  position:  relative;
  top:-20px;
  right:20%;
  background-color: red;
  border-radius: 50%;
}
@media all
 and (max-width:768px){
	.non-empty::after{
		font-size: 15px;
  width:20px;
}}




.card-item .details{
    text-align: center;    
}
.card-item p,.card-item h4 {
    margin-top:10px;   
}
.card-item span{
    display: block;
    margin-top:10px;
}
.add-to-cart-btn{
    width: fit-content;
    margin:auto;
    /* margin-top:10px; */
    padding: 10px 15px;
    cursor: pointer;
    background-color:#00b4d8;
    border-radius: 10px;
    font-size: medium;
    color:#fff;
}
			
		

/*INDEX &ERVICE UPDAE*/


  div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

  div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}





.mySlides {
	width: 100%;
 height:35vh;
}

.mySlides img {
	width:100%;
				
				border-radius:5px;
				text-align: left;
				display:block;
				object-fit:cover;
				 margin:auto;
				 position: relative;
				
}

/* Slideshow container */
.slideshow-container {
  width: 100%;
 height: auto;
}

/* Caption text */
.text {
  color: red;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color:black;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 3s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media all
 and (max-width:768px){
  .text {font-size: 11px}
}