.product {
  	position: absolute;
  	overflow: hidden;
  	padding: 60px;
  	width:350px;
	display: flex;
	top:25px;
	border-radius: 20px;
	scroll-snap-type: x mandatory;
}

.product-container {
  	padding: 0;
 	display: flex;
 	overflow-x: auto;
	scroll-snap-type: x mandatory;
 	scroll-behavior: smooth;
	width:250px;	
	border-radius: 20px;
}

.product-container::-webkit-scrollbar {
  	display: none;
}

.product-card {
  	flex: 0 0 auto;
 	width: 230px;
  	height: 230px;
  	margin-right: 0px;
	padding: 0px;
	scroll-snap-type: x mandatory;
}

.product-image{
 	position: relative;
  	width: 100%;
  	overflow: hidden;
	transition: all .3s ease-in-out;
	border-radius: 20px;
}
.product-image img{
	transition: all .3s ease-in-out;
}
.product-image img:hover{
	overflow: hidden;
	transform: scale(1.5);
	transition: all .3s ease-in-out;
	transform-origin:center;
	cursor:pointer;
	border-radius: 20px;
}

.product-thumb {
  	width: 100%;
 	height: 100%;
 	object-fit: cover;
}
.pre-btn{
	border: none;
	width: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 8;
	background: none;
	font-size: 40px;
	line-height: 40px;
	color: #fe6f27;
}
.nxt-btn {
	border: none;
	width: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 8;
	background: none;
	font-size: 40px;
	line-height: 40px;
	color: #fe6f27;
}
.pre-btn {
  left: 10px;

}
.nxt-btn {
  right: 10px;
}
.pre-btn:hover,
.nxt-btn:hover{
  color: #23196d;
}
@media screen and (min-width: 768px){
.product {
  	position: absolute;
  	overflow: hidden;
  	padding: 0px;
  	width:280px;
	display: flex;
	top:20px;
	border-radius: 20px;
}

.product-container {
  	padding: 0px;
 	display: flex;
 	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	width:280px;	
}

.product-container::-webkit-scrollbar {
  	display: none;
}

.product-card {
  	flex: 0 0 auto;
 	width: 280px;
  	height: 280px;
  	margin-right: 0px;
	padding: 0px;
}

.product-image{
 	position: relative;
  	width: 100%;
  	overflow: hidden;
	border-radius: 20px;
	transition: all .3s ease-in-out;
}
.product-image img{
	transition: all .3s ease-in-out;
}
.product-image img:hover{
	overflow: hidden;
	transform: scale(1.5);
	transition: all .3s ease-in-out;
	transform-origin:center;
	cursor:pointer;
}

.product-thumb {
  	width: 100%;
 	height: 100%;
 	object-fit: cover;
}
.pre-btn{
	border: none;
	width: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 100;
	background: none;
	font-size: 40px;
	line-height: 40px;
	color: #fe6f27;
}
.nxt-btn {
	border: none;
	width: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 100;
	background: none;
	font-size: 40px;
	line-height: 40px;
	color: #fe6f27;
}
.pre-btn {
  left: 20px;

}
.nxt-btn {
  right: 20px;
}
.pre-btn:hover,
.nxt-btn:hover{
  color: #23196d;
}
}