.youtube-video-container {
	position: relative;
	width: 100%;
	/* Default fallback for 16:9 aspect ratio if aspect-ratio is not supported */
	padding-bottom: 56.25%;
}

/* .video class might not be necessary if you are applying the aspect ratio on the container */
.youtube-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.youtube-video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	right: 0; /* Ensures it stretches to the full width of the container */
	bottom: 0; /* Ensures it stretches to the full height defined by padding-bottom */
	background-size: cover;
	background-position: center;
	cursor: pointer;
	/* Display the play button in the center of the placeholder */
	display: flex;
	align-items: center;
	justify-content: center;
}

.youtube-video-play-btn {
	/* Positioning removed since the play button will align using flex handling by the placeholder */
	background-size: contain;
	border: none;
	width: 68px; /* Width of your icon image */
	height: 48px; /* Height of your icon image */
	cursor: pointer;
}

/* Remove aspect ratio property from the .video class */
.youtube-video-container .video {
	/* aspect-ratio property not necessary here */
}

/* Use @supports rule for modern browsers */
@supports (aspect-ratio: 16 / 9) {
	.youtube-video-container {
	/* Apply aspect-ratio property to the container */
	aspect-ratio: 16 / 9;
	padding-bottom: 0; /* Remove padding if aspect-ratio is supported */
	}
}

.youtube-video-play-btn {
	border: 4px solid #043c6f; /* Prepare for border color change */
	background-color: #fff; /* primary color for background */
	border-radius: 50%; /* circular shape */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px; /* space around the SVG */
	cursor: pointer;
	transition: all 0.3s ease; /* smooth transition for hover state */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* subtle shadow for depth */
	width: 68px; /* fixed width */
	height: 68px; /* fixed height to make it circular */
	outline: none; /* removes outline on focus for better aesthetics */
}

.youtube-video-play-btn:hover,
.youtube-video-play-btn:focus {
	background-color: #fff; /* secondary color on hover/focus */
	border-color: #00c8ff; /* a vivid color for the border on hover/focus */
	transform: scale(1.05) translateX(10px); /* subtle grow effect */
	box-shadow: 0 4px 8px rgba(255, 146, 80, 0.5); /* glowing effect on hover/focus */
}

.youtube-video-play-btn svg,
.youtube-video-play-btn svg path {
	fill: #043c6f; /* SVG color is white */
	transition: fill 0.3s ease, transform 0.3s ease; /* transition for SVG color and transform */
}

.youtube-video-play-btn:hover svg,
.youtube-video-play-btn:focus svg,
.youtube-video-play-btn:hover svg path,
.youtube-video-play-btn:focus svg path {
	fill: #00c8ff; /* a vivid color for SVG on hover/focus */
}

/* General styles for the video container */
.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* Default fallback for 16:9 aspect ratio */
}

/* Styling iframe to fit the container */
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Adjustments to the video placeholder, which shows the video's thumbnail */
.video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;  /* Ensures central alignment for the play button */
}

/* Styling for the video play button */
.video-play-btn {
	border: none;
	background: none;
	cursor: pointer;
	width: 68px;
	height: 68px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	padding: 10px;
	background-color: #fff;
	border: 4px solid #043c6f;
}

/* Hover and focus states for the play button */
.video-play-btn:hover,
.video-play-btn:focus {
	background-color: #fff;
	border-color: #00c8ff;
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(255, 146, 80, 0.5);
}

/* Styling the SVG inside the play button */
.video-play-btn svg {
	fill: #043c6f;
}

.video-play-btn:hover svg,
.video-play-btn:focus svg {
	fill: #00c8ff;
}

/* Modern browsers support for aspect ratio */
@supports (aspect-ratio: 16 / 9) {
	.video-container {
	aspect-ratio: 16 / 9;
	padding-bottom: 0; /* Remove padding if aspect-ratio is supported */
	}
}