@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Poppins',sans-serif;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
/*	background: #f7f7f7;*/
}
.topgif{
	width: 100%;
	max-width: 1500px;
	height: auto;
	background: #f7f7f7;
}
.topgif img{
	width: 100%;
	height: auto;
}
.text-center{
	color: #000;
	font-weight: 900;
	font-size: 23px;
	font-family: 'Poppins',sans-serif !important;
	padding: 20px 0;
}



/*account setting*/
 .acc{
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
/*	background: pink;*/
}
.account{
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 60px;
	right: 0;
	width: auto;
	width: 150px;
	height: 100px;
	background: #f7f7f7;
	border-radius: 10px;
	box-shadow: 0 0 10px 2px lightgray;
	align-items: left;
	padding: 5px 20px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
	font-family: 'Poppins',sans-serif;
	
}
.toggle-account{
	opacity: 1;
	visibility: visible;

}
.account:before{
	content: '▲';
	position: absolute;
	top: -22px;
	right: 28px;
	font-size: 20px;
	height: 0;
	color: #f7f7f7;
	text-shadow: 0px -3px 5px lightgray;
}
.account a{
	padding: 5px 0px;
	color: #000;
}
.account a:hover{
	text-decoration: underline;
}



.main-cont{
	width: 100%;
/*	height: 100vh;*/
	height: 100%;
	background: #f7f7f7;
	max-width: 1500px;

}

/*top navigation*/

.navigations{
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	z-index: 3;
	max-width: 1500px;
}
.hide-navigation{
	top: 100%;
	opacity: 0;
	transition: 0.3;
}
.topnav{
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 50px;
	border-bottom: 2px solid #f7f7f7;
	max-width: 1500px;
	background: #fff;

}
.social-icons{
	width: auto;
	height: auto;
/*	background: pink;*/
	cursor: pointer;
}
.social-icons i{
	margin: 0 5px;
	opacity: 0.8;
	cursor: pointer;
	transition: 0.3s;
	padding: 5px;
}
.social-icons a{
	opacity: 0.8;
	color: #000;
}
.social-icons i:hover{
	opacity: 1;
	transform: translateY(-5px);
}
.currency-lang{
	width: auto;
	height: auto;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;


}
select{
	width: 100px;
	padding: 5px;
	margin: 0 5px;
	border-radius: 5px;
	outline-color: #FF6600;
	border: 1px solid transparent;
	text-transform: uppercase;
}
option{
	border-radius: 0px;
	text-transform: uppercase;
}



/*logo and nav iocn*/
.logo-icon{	
	width: 100%;
	height:auto;
	padding: 0 70px;
	display: flex;
	align-items: center;
	flex-direction: column;
	max-width: 1500px;
	background: #fff;



}
.logo{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
/*	background: pink;*/
	padding-top: 10px;
	padding-bottom: 10px;
}
.logo h1{
	font-size: 30px;
	text-transform: uppercase;
	font-family: 'Poppins',sans-serif;
/*	font-weight: bolder;*/
	font-weight: 900;
/*	padding-top: 10px;*/
	letter-spacing: 2px;
	cursor: pointer;
	color: #000;
}
.logo a{
	text-decoration: none;
	color: #000;

}

.logo span{
	color: #FF6600;
	padding-left: 10px;
}
.icons{
	width: auto;
	height: auto;
	display: flex;
	position: relative;
}
.icons ion-icon{
	font-size: 25px;
	padding: 10px;
	margin: 0 16px;
	opacity: .8;
	border-radius: 5px;
	position: relative;
}
.icons ion-icon:hover{
	opacity: 1;
	color: #000;
	background: #f7f7f7;
}
.icons a{
	color: #000;
	position: relative;
}
.icons a:hover{
	color: #000;
}
.prud-search{
	width:50%;
/*	background: hotpink;*/
	height: 40px;
	border: 1px solid #c9c9c9;
	border-radius: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
	margin-left: 30px;

}
.search-icon{
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF6600;
	border-radius: 50%;
	position: absolute;
	right: 0;
	margin-right: 1px;
	color: #fff;
	opacity: 0.8;
}
.search-icon:hover{
	opacity: 1;
}
.search-icon ion-icon{
/*	padding-left: 5px;*/
/*	font-weight: bolder;*/
}
.prud-search input{
	width: 100%;
	height: 100%;
	padding-left: 25px;
	border: none;
	background: transparent;
	outline:none;
	font-family: 'Poppins',sans-serif;
	outline-color: none;
	font-size: 12px;
}
.prud-search ion-icon{
/*	color: #fff;*/
	font-size: 18px;
	font-weight: bolder;
}




/*navlinks*/
.navlinks{
	width: 100%;
	height: 50px;
	background:fff;
	display: flex;
/*	flex-direction: row;*/
	align-items: center;
	justify-content: center;
	border-top: 2px solid #f7f7f7;
	max-width: 1500px;

}
.navlinks ul{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.navlinks li{
	list-style: none;
	padding:13px 10px;
/*	background: pink;*/
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
/*	margin: 0 25px;*/
	margin-top: 15px;
}
.navlinks li:after{
	content: '';
	position: absolute;
	width: 0%;
	height: 2px;
	background: #000;
	bottom: 0;
	border-radius: 50px;
	transition: 0.3s;
/*	background: #fff;*/
}
.navlinks li:hover::after{
	width: 100%;
	
}
.navlinks a:hover{
	color: #FF6600;
}
.navlinks a{
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	width: 100%;
	height: 100%;
}
 li .active{
/*	color: #FF6600;*/
/*	font-weight: bolder;*/
}
.pop{
	width:auto;
	padding: 1px 7px;
	height: 13px;
	font-size: 10px;
	background: #FF6600;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 11px;
	font-weight: bolder;
	cursor: pointer;
}
.pop:after{
	content: '';
	position: absolute;
	top: 0;
	left: 5px;
	width: 0;
	height: 0;
	margin-top: 13px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #FF6600;
}



.mobile-nav-cont{
	width: 100%;
	height: 90px;
	background: transparent;
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	transition: 0.6s;
	opacity: 0;
	z-index: 5;
}
.mobilenav{
	width: 400px;
	height: 60px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	padding: 0 25px;
	box-shadow: 0 0 10px -1px lightgray;
	
}
.mobilenav a{
	color: #000;
/*	background: pink;*/
	display: flex;
	align-items: center;
	justify-content: center;
}
.mobilenav a:hover{
	color: #000;
}

.mobilenav ion-icon{
	font-size: 28px;
	padding: 10px;
	border-radius: 10px;
/*	transition: 0.5s;*/
	opacity: .6;
}
.mobilenav ion-icon:hover{
	background: #f7f7f7;
/*	transition: 0s;*/
	opacity: 1;
}

/*homecont*/

.home-cont{
	width: 100%;
	height: 100vh;
	background: #3533338a;
	position: fixed;
	top: 110px;
	left: -100%;
	z-index: -1;
	opacity: 0;
	transition: 0.4s;
}
/*toggle the home slide*/
.toggle-home{
	left: 0;
	opacity: 1;
	transition: 0.4s;

}

/*categroy content collapse*/

.home{
	width: 50%;
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
/*	align-items: center;*/
	padding-top: 10px;
	position: relative;
	overflow: hidden;

}


.home ul{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 5px;
}
.home li{
	list-style: none;
	display: flex;
	align-items: center;
	padding: 10px 20px;
	border-bottom: 2px solid #f7f7f7;
	justify-content: space-between;
	transition: 0.3s;
}

.home li:hover{
	padding-left: 25px;
	padding-right: 10px;
	color: #FF6600;
	opacity: 1;
/*	background: #FCDEC8;*/
	background: #f7f7f7;
	border-radius: 10px;
}
.home a{
	text-decoration: none;
	color: #000;
	transition: 0.3s;
	width: 100%;
	height: 100%;
/*	background: pink;*/
}
.home a:hover{
	color: #FF6600;
}
.home li .active{
	color: #FF6600;
}
.home ion-icon{
	opacity: .8;
}



/*dashboards cont*/
.dashboard-cont{
	width: 100%;
	height: 100vh;
	background: #3533338a;
	position: fixed;
	top: 110px;
	left: -100%;
	z-index: -1;
	opacity: 0;
	transition: 0.4s;
}
/*toggle the home slide*/
.toggle-dashboard{
	left: 0;
	opacity: 1;
	transition: 0.4s;

}

/*categroy content collapse*/

.dash-link{
	width: 50%;
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
/*	align-items: center;*/
	padding-top: 10px;
	position: relative;
	overflow: hidden;

}


.dash-link ul{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 5px;
}
.dash-link li{
	list-style: none;
	display: flex;
	align-items: center;
	padding: 10px 20px;
	border-bottom: 2px solid #f7f7f7;
	justify-content: space-between;
	transition: 0.3s;
}

.dash-link li:hover{
	padding-left: 25px;
	padding-right: 10px;
	color: #FF6600;
	opacity: 1;
	background: #f7f7f7;
	border-radius: 10px;
}
.dash-link a{
	text-decoration: none;
	color: #000;
	transition: 0.3s;
	width: 100%;
	height: 100%;
/*	background: pink;*/
}
.dash-link a:hover{
	color: #FF6600;
}
/*.dash-link li .active{
	color: #FF6600;
}*/
.dash-link ion-icon{
	opacity: .8;
}




/*hero top slider*/
.hero-slider{
	width: 100%;
	height:auto;
/*	background: pink;*/
	margin-top: 180px;
	padding: 0 30px;
}


/*radom slider second cont*/
.second-cont{
	width: 100%;
	height: 130px;
	background: pink;
	margin-top: 20px;
	position: relative;
}



/*cards-cont*/
.cards-conts{
	width: 100%;
	height: auto;
	padding: 25px;
	max-width: 1500px;
}
.cards-conts h1{
	padding-bottom: 20px;
	font-size: 24px;
	font-weight: bolder;
	font-family: 'Poppins',sans-serif;
}
/*cards-cont*/

/*cards style*/
.cards-items-cont{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.cards{
/*	width: 180px;*/
	width: 192px;
	height: 250px;
/*	border: 1px solid #000;*/
	margin: 5px;
	position: relative;
	transition: 0.4s;
	background: lightgrey;
	box-shadow: 0 0 10px 2px lightgray;
}
.cards:hover{
	transform: translateY(-5px);
}
.cards img{
	width: 100%;
	height: 100%;
	object-fit: cover;

}
.promo-tag{
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	right: 0;
}
.promo-tag img{
	width: 60px;
	height: 60px;
	object-fit: cover;
}
/*cards style end*/



/*Popup Cart cntainer*/

.wish-pop-cont{
	width: 100%;
	height: 100%;
	background: #000000a1;
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: 0.1s;
	padding: 15px;
}


.toggle-wish{
	opacity: 1;
	visibility: visible;
}
.wish-cont{
	width: 500px;
	height: auto;
/*	padding: 30px;*/
	background: #fff;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	padding: 0 20px;
	padding-bottom: 20px;
	font-family: 'Poppins',sans-serif;

}
.toggle-wish{
	opacity: 1;
	visibility: visible;
}


.cart-pop-cont{
	width: 100%;
	height: 100%;
	background: #000000a1;
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: 0.1s;
	padding: 15px;
}


.toggle-cart{
	opacity: 1;
	visibility: visible;
}
.cart-cont{
	width: 500px;
	height: auto;
/*	padding: 30px;*/
	background: #fff;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	padding: 0 20px;
	padding-bottom: 20px;
	font-family: 'Poppins',sans-serif;

}
.cart-header{
	width: 100%;
	height: 60px;
/*	background: pink;*/
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}
.left-cont{
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .8;
	cursor: pointer;

}
.left-cont ion-icon{
	font-size: 25px;
}
.left-cont h3{
	font-size: 20px;
	font-weight: bolder;
	margin-bottom: 0px;
	padding-left: 10px;
}
.cart-close{
	width: 35px;
	height: 35px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	opacity: .8;
	cursor: pointer;
}
.cart-close ion-icon{
	font-size: 30px;
}
.cart-close:hover{
	opacity: 1;
	background: #f7f7f7;
}

.cart-label{
	width: 100%;
	height: 60px;
	border-radius: 10px;
	background: #FCDEC8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	box-shadow: 0 0 10px -1px lightgray;
	font-weight: bolder;
}
.cart-label span{
	opacity: .8;
}
.cartmother{
	width: 100%;
	height: auto;
	max-height: 180px;
	overflow-y: scroll;
/*	overflow: hidden;*/
}

.carts-items{
	width: 100%;
	height: 90px;
/*	background: pink;*/
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	padding-right: 10px;
}
.cart-images{
/*	width: auto;*/
	height: 90px;
	width: 180px;
	display: flex;
}
.cart-images img{
	width: auto;
	height: 100%;
}
.pname{
	display: flex;
	flex-direction: column;
	margin-left: 10px;
	font-size: 13px;
}
.pname span{
	color: #FF6600;
	font-weight: bold;

}
.carts-items input{
	width: 40px;
	text-align: center;
	outline-color: #FF6600;
}
.pprice{
	font-size: 16px;
}
.carts-items ion-icon{
	font-size: 18px;
}
.carts-items ion-icon:hover{
	color: #FF6600;
}
.ctotal{
	width: 100%;
	height: auto;
	border-top: 2px solid #FF6600;
	margin: 20px 0;
	display: flex;
	align-items: right;
	padding-top: 10px;
	justify-content: space-between;

}
.c-total{
	font-size: 18px;
	font-weight: normal !important;
}
.ctotal span{
	font-weight: bolder;
}
.cart-btn{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
.cart-btn button{
	width: 150px;
	height: 45px;
	outline-color: none;
	border: none;
	background: #000;
	color: #fff;
	opacity: .8;
	border-radius: 10px;

}
.cart-btn button:hover{
	opacity: 1;
}
/*Popup Cart cntainer*/





/*------------------footer-------------*/
.footer{
	width: 100%;
	max-width: 1500px;
	margin: auto;
	height: auto;
	background: #f7f7f7;
	margin-top: 30px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 30px;
	justify-content: space-between;
	padding-bottom: 80px;
}
.foot-cont{
	width: auto;
	height: auto;
/*	background: grey;*/
	display: flex;
	flex-direction: column;
/*	padding-left: 30px;*/
	font-family: 'Poppins' ,sans-serif;
	margin: 10px;
}
.foot-cont label{
	padding-bottom: 10px;
	padding-top: 10px;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
}
.foot-cont a{
	padding-top: 10px;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	padding: 5px 0;
}
.foot-cont a:hover{
	color: #FF6600;
}
.pay-logo{
	display: flex;
}
.pay-logo span{
	background: #fff;
	width: 70px;
	height: 35px;
	display: flex;
/*	flex-direction: row;*/
	align-items: center;
	justify-content: center;
	margin: 5px;
	box-shadow: 0 0 10px 2px lightgray;
	cursor: pointer;
}
.brand{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.brand i{
	padding-right: 10px;
}
.download{
/*	background: pink;*/
	width: 220px;
	display: flex;
}
.download span{
	box-shadow: 0 0 10px 2px lightgray;
	cursor: pointer;
}
.apps{
	width: 125px;
}
.apps span{
	box-shadow: 0 0 10px 2px #f7f7f7;
	cursor: pointer;
}
.apps img{
	width: 100%;
/*	box-shadow: 0 0 10px 2px lightgray;*/
cursor: pointer;

}


/*related searches*/
.related-search{
	width: 100%;
	height: auto;
	padding: 30px;
	margin: auto;
    max-width: 1500px;
}
.related-search h1{
	color: #000;
	font-weight: 900;
	font-size: 25px;
	padding-bottom: 20px;
	font-family: Muli,Arial,Helvetica,sans-serif !important;
}
.searches{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.searches span{
	padding: 5px 10px;
	border: 1px solid lightgrey;
	border-radius: 50px;
	font-size: 13px;
	margin: 10px 10px 0 5px;
	color: grey;
	cursor: pointer;
}
.searches span:hover{
	border: 1px solid black;
}
/*-------------------------footer end-------------------------*/


@media only screen and (max-width:1000px){
	.topnav{
		padding: 20px;
	}
	.navlinks{
		padding: 10px;
	}
	.logo-icon{
		padding: 0 15px;
/*		height: 60px;*/
/*		height: auto;*/
	}
	.logo{
/*		padding:5px;*/
	}
}
@media only screen and (max-width:855px){
	.cards{
		width: 31%;
		height: auto;
	}
}

@media only screen and (max-width:800px){
	.icons{
		display: none;
	}
	.navlinks{
		display: none;
	}
	.mobile-nav-cont{
		visibility: visible;
		opacity: 1;
	}
	.hero-slider{
		margin-top: 120px;
		padding: 0 10px;
	}
	.topgif{
		display: none;
	}
}


@media only screen and (max-width:788px){
cards{
		width: 40%;
/*		max-width: 192px;*/
/*		width: 100%;*/
		height: auto;
	}
}

@media only screen and (max-width:615px){
	.logo h1{
		font-size: 20px;
		transition: 0.4s;
	}
	.logo-icon{
/*		display: flex;*/
		flex-direction: column;
		height: auto;
	}
	select{
		width: 95px;
		font-size: 11px;
	}
	.promo-tag{
		width: 40px;	
		height: 40px;
	}
	.promo-tag img{
	width: 40px;
	height: 40px;
	}
	.carousel-indicators button{
		display: none;
	}
}


@media only screen and (max-width:450px){
	.mobile-nav-cont{
		height: 75px;
	}
	.mobilenav{
		max-width: 400px;
		width: 100%;
		height: 100%;
/*		max-height: 60px;*/
		border-radius: 0px;
	}
	.topnav{
		display: none;
	}
	.logo-icon{
		width: 100%;
		padding-left: 5px;
		padding-bottom: 15px;
	}
	.logo{
/*		display: flex;*/
		flex-direction: column;
		justify-content: center;
/*		padding: 5px;*/
		text-align: center;
/*		border-bottom: 2px solid lightgrey;*/

	}
	.logo h1{
		padding-top: 10px;
		text-align: center;
		border-bottom: 2px solid lightgrey;

	}
	.prud-search{
		width: 100%;
		margin-top: 10px;
		margin-left: 0px;

	}
	.cards-conts{
		padding-left: 5px;
		padding-right: 5px;
	}
	.cards{
		width: 47%;
/*		max-width: 192px;*/
/*		width: 100%;*/
		height: auto;
	}
	.promo-tag{
		width: 43px;
		height: 43px;
	}
	.promo-tag img{
		width: 43px;
		height: 43px;
	}
	.cart-label{
		font-size: 12px;
	}

}

@media only screen and (max-width:368px){
	.cart-btn button{
		width: 125px;
	}
}


@media only screen and (max-width:320px){
	.cards{
		width: 43%;
	}
}