/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 29 2026 | 20:46:58 */
/* ========================================= Video Subtitles ========================================= */
.video-subtitles-section {
	position: relative;
	width: 100%;
	z-index: 2;
	max-height: 90vh;
	aspect-ratio: 16 / 9;
	
	.video-element {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		inset: 0;
	}
	
	.sound-button {
		position: absolute;
		z-index: 10;
		top: 0.5rem;
		right: 0.5rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
		border-radius: 50%;
		border: 0;
		cursor: pointer;
		background: var(--green-light-2);
		
		@media screen and (min-width: 768px) {
			top: 1.5rem;
			right: 1.5rem;
		}
		
		svg {
			width: 1.1rem;
			height: auto;
			
			@media screen and (min-width: 768px) {
				width: 1.8rem;
			}
		}
		
		.sound-button-icon-muted {
			display: flex;
		}
		
		.sound-button-icon-unmuted {
			display: none;
		}
		
		&.is-active {
			.sound-button-icon-muted {
				display: none;
			}
			
			.sound-button-icon-unmuted {
				display: flex;
			}
		}
	}
	
	.subtitles-wrapper {
		position: absolute;
		inset: 0;
		z-index: 5;
		padding: 2rem var(--adjustive-padding);
		background-color: var(--black-transparent);
		
		--grid-gap: 1rem;
		display: grid;
		grid-template-columns: repeat(2, calc(50% - var(--grid-gap)));
		grid-template-rows: repeat(3, calc(33.333% - var(--grid-gap)));
		grid-column-gap: var(--grid-gap);
		grid-row-gap: var(--grid-gap);
		
		.subtitle {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity 1s ease, visibility 1s ease;
			display: flex;
			align-items: center;
			font-size: 0.7rem;
			font-weight: 700;
			line-height: 1.3;
			
			@media screen and (min-width: 576px) {
				font-size: 0.9rem;
			}
			
			@media screen and (min-width: 768px) {
				font-size: 1.25rem;
			}
			
			@media screen and (min-width: 1200px) {
				font-size: 1.5rem;
			}
			
			&.is-visible {
				opacity: 1;
				visibility: visible;
			}
			
			* {
				color: #fff;
			}
			
			p:last-of-type {
				margin-bottom: 0;
			}
			
			&.position-1 {
				grid-row: 1;
				grid-column: 1;
			}

			&.position-2 {
				grid-row: 1;
				grid-column: 2;
			}

			&.position-3 {
				grid-row: 2;
				grid-column: 1;
			}

			&.position-4 {
				grid-row: 2;
				grid-column: 2;
			}

			&.position-5 {
				grid-row: 3;
				grid-column: 1;
			}

			&.position-6 {
				grid-row: 3;
				grid-column: 2;
			}
		}
	}
}