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

:root{
	--main-color:#008080;
	--black:#13131a;
	--bg:#010103;
	--border:.1rem solid rgba(255,255,255,.3);
}

*{
	font-family: 'Roboto', sans-serif;
	margin:0;
	padding:0;
	box-sizing:border-box;
	outline:none;
	border:none;
	text-decoration:none;
	text-transform:capitalize;
	transition:.2s linear;
}

html{
	font-size:62.5%;
	overflow-x:hidden;
	scroll-padding-top:9rem;
	scroll-behavior:smooth;
}

html::-webkit-Scrollbar{
	width:.8rem;
}

html::-webkit-Scrollbar-track{
	background:transparent;
}

html::-webkit-Scrollbar-thumb{
	background:#fff;
	border-radius:5rem;
}

body{
	background:var(--bg);
}

section{
	padding:2rem;
}

.section-p1{
	padding: 40px 80px;
}

button.normal{
	font-size: 14px;
	font-weight: 600;
	padding: 15px 30px;
	color: #000;
	background-color: #fff;
	border-radius: 4px;
	cursor: pointer;
	border: none;
	outline: none;
	transition: 0.2s;
}

.btn{
	margin-top:1rem;
	display:inline-block;
	padding:.9rem 3rem;
	font-size:1.7rem;
	color:#fff;
	background:var(--main-color);
	cursor:pointer;
}

.bton{
	margin-top:1rem;
	display:inline-block;
	padding:.6rem 2rem;
	font-size:1.6rem;
	color:#fff;
	background:var(--main-color);
	cursor:pointer;
	border-radius:5px;
}

.bttn{
	margin-top:1rem;
	display:inline-black;
	padding:.6rem 2rem;
	font-size:1.6rem;
	color:#fff;
	background:var(--main-color);
	cursor:pointer;
	border-radius:5px;
}

.btn:hover{
	letter-spacing:.2rem;
}

.bton:hover{
	letter-spacing:.2rem;
}


/*header section - styles - starts*/
.header{
	background:var(--bg);
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1.5rem 7%;
	border-bottom:var(--border);
	position:fixed;
	top:0; left:0; right:0;
	z-index:1000;
}

.header .logo img{
	height:6rem;
}

.header .navbar a{
	margin:0 1rem;
	font-size:1.6rem;
	color:#fff;
}

.header .navbar a:hover{
	color:var(--main-color);
	border-bottom:.1rem solid var(--main-color);
	padding-bottom:.5rem;
}

.header .navbar a:hover,
.header .navbar a.active{
	color:var(--main-color);
}

.header .icons div{
	color:#fff;
	cursor:pointer;
	font-size:2.5rem;
	margin-left:2rem;
}

.header .icons div:hover{
	color:var(--main-color);
}

#menu-btn{
	display:none;
}

.header .search-form{
	position:absolute;
	top:115%; right:7%;
	background:#fff;
	width:50rem;
	height:5rem;
	display:flex;
	align-items:center;
	transform:scaleY(0);
	transform-origin:top;
}

.header .search-form.active{
	transform:scaleY(1);
}

.header .search-form input{
	height:100%;
	width:100%;
	font-size:1.6rem;
	color:var(--black);
	padding:1rem;
	text-transform:none;
}

.header .search-form label{
	cursor:pointer;
	font-size:2.2rem;
	margin-right:1.5rem;
	color:var(--black);
}

.header .search-form label:hover{
	color:var(--main-color);
}

.header .cart-items-container{
	position:absolute;
	top:100%; 
	right:-100%;
	height:calc(150vh -7.5rem);
	width:35rem;
	background:#fff;
	padding:0 1.5rem;
}

.header .cart-items-container.active{
	right:0;
}

.header .cart-items-container .cart-items{
	position:relative;
	margin:2rem 0;
	display:flex;
	align-items:center;
	gap:1.5rem;
}

.header .cart-items-container .cart-items .fa-times{
	position:absolute;
	top:1rem;
	right:1rem;
	font-size:2rem;
	cursor:pointer;
	color:var(--black);
}

.header .cart-items-container .cart-items .fa-times:hover{
	color:var(--main-color);
}

.header .cart-items-container .cart-items img{
	height:7rem;
}

.header .cart-items-container .cart-items .content h3{
	font-size:2rem;
	color:var(--black);
	padding-bottom:.5rem;
}

.header .cart-items-container .cart-items .content .price{
	font-size:1.5rem;
	color:var(--main-color);
}

 .header .cart-items-container btn{
	 width:100%;
	 text-align:center;
}
/*header section - styles - ends*/


/*home section - styles - starts*/
.home{
	min-height:100vh;
	display:flex;
	align-items:center;
	background-image:url(images/home.webp);
	background-size:cover;
	background-position:center;
}

.home .content{
	max-width:60rem;
	
}

.home .content h3{
	font-size:6rem;
	text-transform:uppercase;
	color:#fff;
}

.home .content p{
	font-size:2rem;
	font-weight:700;
	line-height:1.8;
	padding:1rem 0;
	color:#eee;
}
/*home section - styles - ends*/


/*footer section - styles - starts*/
footer{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	color:#fff;
}

footer .col{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 20px;
}
footer .row img{
	width: 150px;
	height: 50px;
}

footer .logo{
	margin-bottom: 30px;
}

footer h4{
	font-size: 14px;
	padding-bottom: 20px;
}

footer p{
	font-size: 13px;
	margin: 0 0 8px 0;
}

footer a{
	color:#fff;
	font-size: 13px;
	text-decoration: none;
	margin: 10px;
}

footer .follow{
	margin-top: 20px;
}

footer .follow i{
	color:var(--main-color);
	padding-right: 4px;
	cursor: pointer;
	font-size:12px;
}

footer .install .row img{
	border: 1px solid #088178;
	border-radius: 6px;
}

footer .install img{
	margin: 10px 0 15px 0;
}

footer .follow i:hover{
	color:#fff;
}	

footer a:hover{
	color:var(--main-color);
}

footer .copyright{
	width: 100%;
	text-align: center;
}
/*footer section - styles - ends*/


/*about page - styles - starts*/
.about h1{
	margin-top:100px;
    margin-bottom:50px;
	color:#fff;
	font-size:30px;
	text-align: center;
}

.about h1 span{
	color:var(--main-color);
}

.about .row{
	display:flex;
	align-items:center;
	background:var(--black);
	flex-wrap:wrap;
}

.about .row .image{
	flex:1 1 45rem;
}

.about .row .image img{
	width:100%;
}

.about .row .content{
	flex:1 1 45rem;
	padding:2rem;
}

.about .row .content h3{
	font-size:3rem;
	color:#fff;
}

.about .row .content p{
	font-size:1.6rem;
	color:#ccc;
	padding:1rem 0;
	line-height:1.8;
}

.about .row .content p span{
	color:var(--main-color);
}
/*about page - styles - ends*/


/*Products page - styles - starts*/
.product h1{
	margin-top:100px;
    margin-bottom:50px;
	color:#fff;
	font-size:30px;
	text-align: center;
}

.product h1 span{
	color:var(--main-color);
}

#product1{
	text-align: center;
	padding-top:50px;
}
#product1 .pro-container{
	display: flex;
	justify-content: space-between;
	padding-top: 20px;
	flex-wrap: wrap;
}
#product1 .pro{
	width: 23%;
	min-width: 250px;
	padding: 10px 12px;
	border: 1px solid #cce7d0;
	border-radius: 25px;
	/*cursor: pointer;*/
	box-shadow: 20px 20px 30px rgb(0,0,0,0.02);
	margin: 15px 0;
	transition: 0.2s ease;
	position: relative;
}
#product1 .pro:hover{
	box-shadow: 20px 20px 30px rgb(0,0,0,0.08);
}
#product1 .pro img{
	width: 100%;
	border-radius: 20px;
}
#product1 .pro .des{
	text-align: start;
	padding: 10px 0;
}
#product1 .pro .des span{
	color: #fff;
	font-size: 12px;
}
#product1 .pro .des h5{
	padding-top: 7px;
	color: #fff;
	font-size: 14px;
}
#product1 .pro .star i{
	font-size: 14px;
	color: rgb(243, 181, 25);
}
#product1 .pro .des h4{
	padding-top: 7px;
	font-size: 15px;
	font-weight: 700;
	color: #088178;
}
#product1 .pro i{
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50px;
	background-color: #e8f6ea;
	font-weight: 700;
	font-size: 15px;
	color: #088178;
	border: 2px solid #cce7d0;
	position: absolute;
	bottom: 20px;
	right: 10px;
}
#product1 .pro button img{
	width:25px;
	padding-top: 5px;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 2px;
	align-items: center;
}
/*Products page - styles - ends*/


/*Contact page - styles - starts*/
.contact{
	background-image:url(images/back1.jpg);
	width:100%;
}
.contact .row{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}

.contact .row form{
	flex:1 1 45rem;
	padding:5rem 2rem;
	text-align:center;
}

.contact .row form h3{
	text-transform:uppercase;
	font-size:3.5rem;
	color:#fff;
}
.contact .row form h3 span{
	text-transform:uppercase;
	font-size:3.5rem;
	color:var(--main-color);
}

.contact .row form .inputBox{
	display:flex;
	align-items:center;
	margin-top:2rem;
	margin-bottom:2rem;
	padding-right:50rem;
	padding-left:50rem;
}

.contact .row form .inputBox span{
	color:#fff;
	font-size:2rem;
	padding-left:2rem;
}

.contact .row form .inputBox input{
	width:100%;
	padding:2rem;
	font-size:1.7rem;
	color:#fff;
	text-transform:none;
	background:none;
	border:none;
}

/*Contact page - styles - ends*/


/*Checkout page - styles - starts*/
.checkout{
	background-image:url("images/black1.jpg");
}
.checkout h1{
	color:#fff;
	font-size:40px;
	padding-left:62rem;
	padding-bottom:20px;
}
.checkout h1 span{
	color:var(--main-color);
}

.checkout .pay {
	align-items:center;
	margin-top:2rem;
	margin-bottom:2rem;
	padding-right:70rem;
	padding-left:55rem;
}
.checkout .pay input{
	border-radius:0.2rem;
	padding:0.5rem;
	margin-bottom:1rem;
	width:30rem;
	
}
.checkout .pay label{
	color:#fff;
	font-size:14px;
}
.checkout .pay button{
	padding:0.3rem;
	width:10rem;
	background-color:var(--main-color);
}

/*Checkout page - styles - ends*/


/*Buy page - styles - starts*/
#buy{
	display:flex;
	margin-top:20px;
}
 
#buy .single-pro-image{
	width:40%;
	margin-right:50px;
}
#buy{
	display:flex;
	margin-top:20px;
}
 
#buy .single-pro-details{
	width:50%;
	padding-top:5%;
}

#buy .single-pro-details input[type="text"]{
	height:35px;
	font-size:13px;
    margin:10px auto;
	padding-top:2px;
	width:150px;
}

#buy .single-pro-details h4{
	font-size:20px;
	color:#fff;
	color:var(--main-color);
}
#buy .single-pro-details h6{
	padding-bottom:10px;
	color:#fff;
	font-size:35px;
}
#buy .single-pro-details select{
	display: block;
	padding: 10px 10px;
	margin-bottom:10px;
}
#buy .single-pro-details input{
	width:50px;
	height:47px;
	padding-left:10px;
	font-size:16px;
	margin-right:10px;
}
#buy .single-pro-details input:focus{
	outline:none;
}
#buy .single-pro-details button{
	background:var(--main-color);
	color:#fff;
}
#buy .single-pro-details span{
	line-height:25px;
}
/*Buy page - styles - ends*/


/*login page - styles - starts*/
.loginP{
	  text-align: center;
}

.loginP h1{
      margin-top:70px;
      margin-bottom:50px;
	  color:#fff;
	  font-size:30px;
	  text-align:center;
}

.loginP h1 span{
	color:var(--main-color);
}

.loginP form{
      margin-top: 50px;
      display: inline-block;
      text-align: left;
}

.loginP input[type="text"], input[type="password"] {
      display:block;
      margin:10px auto;
      padding:5px;
      width: 250px;
      border-radius:5px;
      border:1px solid #ccc;
}

.loginP input[type="submit"]{
      background-color:var(--main-color);
      border:none;
      color:white;
      padding:10px;
      text-align:center;
      text-decoration:none;
      display:inline-block;
      font-size:16px;
      margin:10px 2px;
      cursor:pointer;
      border-radius:5px;
}

.loginP label{
	color:#fff;
	font-size:16px;
}

.loginP h4{
	color:#fff;
	font-size:13px;
}

.loginP h4 a{
	color:var(--main-color);
}
/*login page - styles - ends*/


/*Sign-Up page - styles - starts*/
.signup h1{
	text-align:center;
	margin-top:70px;
	margin-bottom:50px;
	color:#fff;
	font-size:30px;
}

.signup h1 span{
	color:var(--main-color);
}

.signup form{
	width:400px;
	margin:50px auto;
	background-color:transparent;
	border-radius:5px;
	padding:20px;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
}

.signup label{
	display:block;
	margin-bottom:10px;
	font-weight:bold;
}

.signup input[type="text"], input[type="email"], input[type="password"]{
	width:100%;
	padding:10px;
	border-radius:5px;
	border:1px solid #ccc;
	margin-bottom:20px;
	box-sizing:border-box;
}

.signup input[type="submit"]{
	background-color:var(--main-color);
	color:#fff;
	padding:10px 20px;
	border:none;
	border-radius:5px;
	cursor:pointer;
	font-size:16px;
	margin-top:20px;
}

.signup input[type="submit"]:hover{
	background-color:#006F8F;
}

.signup label{
	color:#fff;
	font-size:16px;
}
/*Sign-Up page - styles - ends*/






































/*media quaries*/
 @media (max-width:991px){
	html{
		font-size:55%;
    }
	
	.header{
		padding:1.5rem 2rem;
	}
	
	section{
		padding:2rem;
    }
}

@media (max-width:768px){
	#menu-btn{
		display:inline-block;
    }
	
	.bton{
		position:absolute;
		top:100%;
		right:-100%;
	}
	
	.header .navbar{
		position:absolute;
		top:100%;
		right:-100%;
		background:#fff;
		width:20rem;
		height:calc(100vh);
	}
	
	.header .navbar.active{
		right:0;
	}
	
	.header .navbar a{
		color:var(--black);
		display:block;
		margin:1.5rem;
		padding:.5rem;
		font-size:2rem;
	}
	
	.header .search-form{
		width:90%;
		right:2rem;
	}
	
	.home{
		background-position:left;
		justify-content:center;
		text-align:center;
	}
	
	.home .content h3{
		font-size:4.5rem;
	}
	
	.home .content p{
		font-size:2rem;
	}	
	
	footer .logo{
	   margin-bottom: 10px;
    }
	
	footer{
	   margin-right:10px;
	   color:#fff;
    }
	
	footer .install .row img{
	   border: 1px solid #088178;
	   border-radius: 6px;
    }
	
	footer .row img{
	   width: 100px;
	   height: 30px;
    }
	
	footer .follow i:hover{
	   color:#fff;
    }	
    footer a:hover{
	   color:var(--main-color);
    }
}

 @media (max-width:450px){
	html{
		font-size:50%;
    }
}