/* Video Section Styles */
#videoSection {
	padding: var(--spacing-3xl, 4rem) var(--spacing-lg, 1.5rem);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-camo-ink);
	background-image: var(--camo-pattern);
	background-size: 180% 180%;
	background-position: center;
	position: relative;
	overflow: hidden;
}

#videoSection::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 16, 10, 0.52) 0%, rgba(12, 16, 10, 0.22) 70%, rgba(12, 16, 10, 0.12) 100%);
	pointer-events: none;
}

#videoSection::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(var(--color-primary-rgb), 0.08), rgba(74, 55, 40, 0.12));
	mix-blend-mode: soft-light;
	pointer-events: none;
}

#video-container {
	width: 100%;
	max-width: 1000px;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

#iframe-video {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

@media (min-width: 992px) {
	#video-container {
		min-height: 500px;
	}
}

@media (min-width: 1200px) {
	#video-container {
		max-width: 1100px;
		min-height: 580px;
	}
}

@media (max-width: 768px) {
	#videoSection {
		padding: 2rem 1rem;
	}
	
	#video-container {
		border-radius: 12px;
	}
}

/* Timeline Carousel */
#carouselExampleFade {
	max-width: 1400px;
	width: calc(100% - 48px);
	margin: 48px auto 72px;
	padding: 0;
}

#carouselExampleFade .carousel-inner {
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(12, 16, 10, 0.35);
}

#carouselExampleFade .carousel-item {
	transition: opacity 0.9s ease-in-out;
}

#carouselExampleFade .carousel-item img {
	display: block;
	width: 100%;
	height: min(78vh, 820px);
	min-height: 420px;
	object-fit: cover;
}

#carouselExampleFade .carousel-control-prev,
#carouselExampleFade .carousel-control-next {
	width: 72px;
	height: 72px;
	top: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(120deg, rgba(var(--color-primary-rgb), 0.9), rgba(47, 59, 47, 0.9));
	border-radius: 50%;
	border: 1px solid rgba(var(--color-primary-rgb), 0.6);
	box-shadow: 0 10px 24px rgba(12, 16, 10, 0.25);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	opacity: 1;
	left: -36px;
}

#carouselExampleFade .carousel-control-prev:hover,
#carouselExampleFade .carousel-control-next:hover {
	background: linear-gradient(120deg, rgba(var(--color-primary-rgb), 1), rgba(47, 59, 47, 1));
	transform: translate(-50%, -50%) scale(1.06);
	box-shadow: 0 14px 32px rgba(12, 16, 10, 0.3);
}

#carouselExampleFade .carousel-control-next {
	left: auto;
	right: -36px;
	transform: translate(50%, -50%);
}

#carouselExampleFade .carousel-control-next:hover {
	transform: translate(50%, -50%) scale(1.06);
}

#carouselExampleFade .carousel-control-prev-icon,
#carouselExampleFade .carousel-control-next-icon {
	width: 26px;
	height: 26px;
	background-size: 26px 26px;
	filter: none;
}

#carouselExampleFade .carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2318283a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}

#carouselExampleFade .carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2318283a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (max-width: 992px) {
	#carouselExampleFade {
		width: calc(100% - 32px);
		margin: 32px auto 56px;
	}

	#carouselExampleFade .carousel-control-prev,
	#carouselExampleFade .carousel-control-next {
		width: 64px;
		height: 64px;
        left: -28px;
	}

    #carouselExampleFade .carousel-control-next {
        left: auto;
        right: -28px;
    }

	#carouselExampleFade .carousel-item img {
		height: min(62vh, 620px);
		min-height: 360px;
	}
}

@media (max-width: 768px) {
	#carouselExampleFade {
		margin: 24px auto 40px;
	}

	#carouselExampleFade .carousel-control-prev,
	#carouselExampleFade .carousel-control-next {
		width: 56px;
		height: 56px;
        left: 8px;
        right: auto;
        transform: translateY(-50%);
	}

    #carouselExampleFade .carousel-control-next {
        left: auto;
        right: 8px;
        transform: translateY(-50%);
    }

	#carouselExampleFade .carousel-item img {
		height: 55vh;
		min-height: 300px;
	}
}

.timeline-carousel-section {
	background-color: var(--color-camo-ink);
	background-image: var(--camo-pattern);
	background-size: 190% 190%;
	background-position: center;
	padding: var(--spacing-3xl) var(--spacing-md) var(--spacing-3xl);
	position: relative;
}

.timeline-divider {
	height: 4px;
	max-width: 1400px;
	margin: 0 auto var(--spacing-2xl);
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	box-shadow: 0 10px 24px rgba(var(--color-primary-rgb), 0.22);
	border-radius: 999px;
}