/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 01 2026 | 10:41:38 */
.video-gallery-section {
	--vg-fade: 500ms;
	--vg-gutter: 1.5rem;

	display: grid;
	grid-template-columns: 1fr;
	background: var(--gray-light-3-dyn-3);
	transition: background 0.4s ease;
	padding: 0 var(--adjustive-padding);

	@media screen and (min-width: 1200px) {
		padding: unset;
		grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: stretch;
		background: none;

		&::before {
			content: "";
			grid-column: 1;
			grid-row: 1 / span 2;
			background: var(--gray-light-3-dyn-3);
			transition: background 0.4s ease;
		}
	}

	.left-column {
		display: contents;

		@media screen and (min-width: 1200px) {
			display: flex;
			flex-direction: column;
			justify-content: center;
			grid-column: 1;
			grid-row: 1;
			gap: 2rem;
			padding: 3rem 2rem;
			padding-left: var(--adjustive-padding);
		}
	}

	.video-gallery-heading {
		order: 1;
		margin: 0;
		padding: 2rem 0;
		color: var(--green-dark-1-dyn-1);
		transition: color 0.4s ease;

		@media screen and (min-width: 1200px) {
			padding: 0;
		}
	}

	.right-column {
		order: 2;
		position: relative;
		min-width: 0;

		@media screen and (min-width: 1200px) {
			grid-column: 2;
			grid-row: 1;
			background-color: var(--gray-light-2-dyn-3);
		}
	}

	.right-column-bottom {
		order: 3;
		min-width: 0;

		@media screen and (min-width: 1200px) {
			grid-column: 2;
			grid-row: 2;
			background-color: var(--gray-light-2-dyn-3);
		}
	}

	.video-nav {
		order: 4;
		min-width: 0;
		padding: var(--vg-gutter) 0;

		@media screen and (min-width: 1200px) {
			display: flex;
			align-items: stretch;
			gap: 1rem;
			padding: 0;
		}
	}

	.video-progress-bar {
		display: none;

		@media screen and (min-width: 1200px) {
			display: block;
			position: relative;
			flex: 0 0 2px;
			width: 2px;
			background: var(--light-blue);

			.progress-circle {
				position: absolute;
				top: 0;
				left: 50%;
				width: 1rem;
				height: 1rem;
				margin: 0;
				border-radius: 50%;
				background: var(--green-light-1);
				transform: translate(-50%, -50%);
				transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
				will-change: transform;
			}
		}
	}

	.video-titles {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		gap: 0.75rem;
		overflow: auto;
		padding-bottom: 0.3rem;
		overscroll-behavior-x: contain;
		scroll-padding: 0 var(--vg-gutter);

		&::-webkit-scrollbar {
			height: 5px;
		}

		&::-webkit-scrollbar-track {
			background: var(--gray-light-1);
		}

		&::-webkit-scrollbar-thumb {
			background: var(--green-light-1);
		}

		@supports not selector(::-webkit-scrollbar) {
			scrollbar-width: thin;
			scrollbar-color: var(--green-light-1) var(--gray-light-1);
		}

		@media screen and (min-width: 1200px) {
			flex: 1 1 auto;
			flex-direction: column;
			gap: 1.5rem;
			overflow: unset;
			padding-bottom: 0;
		}
	}

	.video-name {
		flex: 0 0 auto;
		margin: 0;
		padding: 0.5rem 1rem;
		font-size: 1rem;
		white-space: nowrap;
		text-align: left;
		cursor: pointer;
		border: 1px solid var(--gray-light-1-dyn-1);
		background-color: var(--white);
		color: var(--green-dark-1);
		transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;

		&:hover,
		&:focus-visible,
		&.is-active {
			border-color: var(--green-light-1);
			background-color: var(--green-light-1);
			color: var(--green-dark-1);
		}
		
		@media screen and (min-width: 991px) { 
			font-size: 1.125rem;
			padding: 0.75rem 1.25rem;
		}

		@media screen and (min-width: 1200px) {
			padding: 0;
			border: 0;
			font-size: 1.5rem;
			white-space: normal;
			background-color: unset;
			color: var(--green-dark-1-dyn-1);

			&:hover,
			&:focus-visible,
			&.is-active {
				background: none;
				color: var(--green-dark-1-dyn-1);
				font-weight: 700;
			}
		}
	}

	.video-panel {
		opacity: 0;
		transition: opacity var(--vg-fade) ease;

		&.is-active { opacity: 1; }
		&[hidden] { display: none; }

		.video-panel__video {
			position: relative;
			overflow: hidden;
			background: var(--gray-light-3);
			aspect-ratio: 16 / 9;

			.wp-video,
			.wp-video-shortcode,
			.mejs-container,
			.mejs-inner,
			.mejs-mediaelement,
			.mejs-layers,
			.mejs-overlay,
			.mejs-poster,
			video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100% !important;
				height: 100% !important;
				max-width: none;
				background: transparent;
			}

			video {
				object-fit: cover;
			}

			.mejs-poster img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.mejs-overlay-button {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin: 0;
			}

			.mejs-controls {
				z-index: 3;
			}
		}

		.video-embed,
		.video-embed iframe {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border: 0;
		}
	}

	.video-panel__text {
		padding-top: 1.5rem;
		transition: opacity var(--vg-fade) ease, background-color 0.4s ease;

		& > :first-child { margin-top: 0; }
		& > :last-child { margin-bottom: 0; }

		@media screen and (min-width: 1200px) {
			padding: 1.5rem 2rem;
		}
		
		.video-panel__text--inner {
			max-height: 300px;
			overflow-y: auto;
			overscroll-behavior-x: contain;
			scroll-padding: 0 var(--vg-gutter);

			&::-webkit-scrollbar {
				width: 5px;
			}

			&::-webkit-scrollbar-track {
				background: var(--gray-light-1);
			}

			&::-webkit-scrollbar-thumb {
				background: var(--green-light-1);
			}

			@supports not selector(::-webkit-scrollbar) {
				scrollbar-width: thin;
				scrollbar-color: var(--green-light-1) var(--gray-light-1);
			}
		}
	}
	
	.video-panel__gallery {
		height: 100%;
		--swiper-theme-color: var(--green-light-2);
		--swiper-navigation-sides-offset: 2rem;
    	--swiper-navigation-size: 3rem;
		
		.swiper-button {
			background-color: transparent;
			border: none;
		}
		
		.swiper-slide {
			display: flex;
			justify-content: center;
			
			img {
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}

	&.is-videoless {
		.right-column {
			display: none;
		}

		.video-panel__text {
			display: flow-root;

			&::before {
				content: "";
				float: left;
				width: 0;
				padding-top: 58.75%;
			}
			
			.video-panel__text--inner {
				max-height: unset;
			}
		}

		@media screen and (min-width: 1200px) {
			.left-column,
			.right-column-bottom {
				grid-row: 1 / span 2;
			}

			.video-panel__text {
				min-height: 100%;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.video-gallery-section .progress-circle,
	.video-gallery-section .video-panel,
	.video-gallery-section .video-name {
		transition-duration: 1ms !important;
	}
}