/* Add these styles for the custom arrow container */
/* removed imp */
.vc-video-carousel {
	padding: 2px;
	max-width: 1200px;
	margin: 0 auto;
}

.playing{
	transform: scale(2);
}

.vc-slide {
	padding: 0 10px;
	position: relative;
	aspect-ratio: 9 / 16;
}

/* Custom video styling */
.vc-slide video,
.vc-slide iframe {
	width: 100%;
	height: 80%;
	object-fit: cover;
	border-radius: 12px;
}

/* Hide default video controls */
.vc-slide video::-webkit-media-controls {
	display: none !important;
}

.vc-slide video::-webkit-media-controls-enclosure {
	display: none !important;
}

/* Custom play button */
.vc-play-button {
	position: absolute;
	top: 8%;
	left: 70%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background-color: #00a9a3;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* .vc-play-button::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #ffffff;
	margin-left: 4px;
} */

/* Caption styling */
.vc-caption {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #ff1493;
	color: white;
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 14px;
	text-align: center;
}

/* Slick slider customization */
.slick-slide {
	transition: opacity 0.3s ease;
}

/* Custom arrow styling */
.slick-prev,
.slick-next {
	color: black !important;
	width: 40px;
	height: 40px;
	background-color: #00a9a3 !important;
	border-radius: 100%;
	z-index: 10;
}

.slick-prev {
	left: -5px;
}

.slick-next {
	right: -5px;
}

.slick-prev:before,
.slick-next:before {
	font-size: 24px;
	opacity: 1;
	color: white;
}

/* Remove default slick dots */
.slick-dots {
	display: none !important;
}

.slick-current {
	opacity: 1;
}

/* Remove default slick dots */
.slick-dots {
	display: none !important;
}

.slick-arrow-container {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

/* Update arrow styling */
.slick-prev,
.slick-next {
	position: static !important; /* Override Slick's absolute positioning */
	transform: none !important; /* Remove Slick's transform */
	width: 40px;
	height: 40px;
	background-color: #ff1493 !important; /* Match the pink color from image */
	border-radius: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
}

.slick-prev:before,
.slick-next:before {
	font-size: 20px;
	opacity: 1;
	color: white;
}


.pc-arrows{
  position: relative;
  display: flex;
  min-width: 1350px;
  max-width: 1350px;
  justify-content: space-between;
  bottom: -240px;
  margin: 0 auto;
}
/* pc screen arrows */
#prev__pc,
#next__pc {
  z-index: 99999;
  background-color: transparent;
  border: none;
  font-size: 34px;
  transition: transform 200ms ease-in;
  color: #00a9a3;
  cursor: pointer;
}

#prev__pc:hover,
#next__pc:hover {
  transform: scale(1.3);
}



/* Mobile specific styles */
@media (max-width: 768px) {

  .pc-arrows{
    display: none;
  }
	.vc-slide video,
	.vc-slide iframe {
		width: 100%;
		min-width: 100px;
		height: 100%;
		max-height: 353px;
		object-fit: cover;
		border-radius: 12px;
		box-shadow: 2px 20px 10px 2pz rgba(0, 0, 0, 0.2);
	}

	.slick-next:before,
	.slick-prev:before {
		position: absolute;
		top: 100%;
	}

	.slick-next:before {
		right: 50%;
	}

	.slick-prev:before,
	.slick-next:before {
		font-size: 14px;
		opacity: 1;
		color: white;
	}

	.vc-slide {
		padding: 0 4px;
		min-height: 300px;
		max-height: 300px;
	}

	.vc-play-button {
		width: 30px;
		min-height: 30px; /*for fixing height issues*/
		top: 10%;
		left: 70%;
	}

	.vc-play-button::before {
		border-width: 8px 0 8px 12px;
	}
}

/* Mobile specific styles */
@media (max-width: 768px) {
	.slick-arrow-container {
		margin-top: 15px;
	}

	.slick-prev,
	.slick-next {
		width: 30px;
		height: 30px;
		color: white;
		background-color: transparent !important;
	}

	.slick-prev:before,
	.slick-next:before {
		font-size: 16px;
		background-color: #00a9a3;
		margin-left: -10px;
		border-radius: 50%;
	}
}

/* Custom arrow styling for desktop */
.slick-prev,
.slick-next {
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: #00a9a3 !important;
	border-radius: 100%;
	z-index: 10;
}

.slick-prev {
	left: -5px;
}

.slick-next {
	right: -5px;
}

.slick-prev:before,
.slick-next:before {
	font-size: 24px;
	opacity: 1;
	color: white;
}

/* Mobile arrow container - only visible on mobile */
.slick-arrow-container {
	display: none; /* Hidden by default for desktop */
}

/* Mobile specific styles */
@media (max-width: 768px) {
	/* Show arrow container on mobile */
	.slick-arrow-container {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 20px;
	}

	/* Adjust arrows for mobile */
	.slick-prev,
	.slick-next {
		position: static !important;
		transform: none !important;
		width: 30px;
		height: 30px;
		margin: 0 10px;
		display: none;
		background-color: transparent !important;
	}

	.slick-prev:before,
	.slick-next:before {
		font-size: 16px;
		margin: -30px;
	}
}



/* edit for test */
.vc-play-button:before {
	/* Use FontAwesome or other icon font for better performance */
	font-family: FontAwesome; /* Replace with your preferred icon font library */
	content: "\f04b"; /* Unicode for play symbol using FontAwesome */
	font-size: 32px;
	color: white;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  .vc-play-button.playing:before {
	content: "\f04c"; /* Unicode for pause symbol using FontAwesome */
  }
  
  .vc-slide:hover .vc-play-button {
	opacity: 1;
  }
  
  .vc-play-button:focus {
	outline: none;
  }