/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 10 2026 | 11:36:25 */
/* ========================================= VERTICAL GALLERY ========================================= */
.vertical-gallery-section {
	position: relative;
	overflow: hidden;
	z-index: 2;
	background-color: var(--white-dyn-1);
	transition: all 0.4s;
	
	.wave-element {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		aspect-ratio: 960 / 281;
		transform: translateY(-50%);
		z-index: -1;
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		background-color: var(--gray-light-2-dyn-2);
		transition: all 0.4s;
	}
	
	.section-wrapper {
		display: flex;
		flex-direction: column;
		column-gap: 3rem;
		padding-left: var(--adjustive-padding);
		padding-right: var(--adjustive-padding);
		
		@media screen and (min-width: 991px) {
			flex-direction: row;
			align-items: center;
		}
		
		.content-wrapper, .gallery-wrapper {
			flex: 1;
		}
		
		.content-wrapper {
			margin: 3rem 0;
			
			@media screen and (min-width: 991px) {
				margin: 0;
			}
			
			*:not(h2) {
				color: var(--gray-dark-2-dyn-1);
				transition: all 0.4s;
				font-size: 1.25rem;
				
				@media screen and (min-width: 991px) {
					font-size: 1.5rem;
				}
			}
		}
		
		.gallery-wrapper {
			.desktop-gallery-marquee {
				display: none;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 1.5rem;
				height: 100vh;
				
				@media screen and (min-width: 991px) {
					display: grid;
				}
				
				.desktop-gallery-column {
					.desktop-gallery-track {
						display: flex;
						flex-direction: column;
						animation: vertical-gallery-marquee-y 70s linear infinite;
						will-change: transform;
					}
					
					&:nth-child(2) {
						.desktop-gallery-track {
							animation-direction: reverse;
						}
					}
				}
				
				.desktop-gallery-group {
					display: flex;
					flex-direction: column;
					gap: 1.5rem;
					padding-bottom: 1.5rem;
					
					.desktop-gallery-item {
						flex: 0 0 auto;
						aspect-ratio: 2 / 3;
						
						.vertical-gallery-image {
							width: 100%;
							object-position: center;
						}
					}
				}
			}
			
			.mobile-gallery-marquee {
				height: clamp(350px, 50vh, 500px);
				margin-bottom: 3rem;
				
				@media screen and (min-width: 991px) {
					display: none;
				}
				
				.mobile-gallery-track {
					height: 100%;
					display: flex;
					animation: vertical-gallery-marquee-x 70s linear infinite;
					will-change: transform;
					width: max-content;
				}
				
				.mobile-gallery-group {
					display: flex;
					gap: 1.5rem;
					padding-right: 1.5rem;
					flex: 0 0 auto;
					
					.mobile-gallery-item {
						flex: 0 0 auto;
						display: flex;
						align-items: center;
						
						.vertical-gallery-image {
							height: 100%;
							aspect-ratio: 2 / 3;
							object-fit: cover;
							object-position: center;
						}
						
						&:nth-child(even) {
							.vertical-gallery-image {
								height: 75%;
							}
						}
					}
				}
			}
		}
	}
}