/* ========================================
   LANDING PAGE - SPECIFIC STYLES
   ======================================== */

/* ========================================
   PAGE CONTAINER
   ======================================== */

.landing-page {
	background-color: #ffffff;
	width: 100%;
	position: relative;
}

/* ========================================
   HERO SECTION
   ======================================== */

.hero {
	position: relative;
	width: 100%;
	min-height: 706px;
	border-radius: 0px 0px 25px 25px;
	overflow: hidden;
	margin-bottom: 58px;
}

.hero__background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(/assets/images/frame-1321317548.jpg);
	background-size: cover;
	background-position: 50% 50%;
}

.hero__content {
	position: absolute;
	top: 320px;
	left: 89px;
	display: flex;
	flex-direction: column;
	width: 844px;
	align-items: flex-start;
	gap: 24px;
}

.hero__title {
	font-family: 'Trim-Bold', Helvetica;
	font-weight: 700;
	color: #ffffff;
	font-size: 50px;
	letter-spacing: -1px;
	line-height: normal;
	margin: 0;
}

.hero__actions {
	display: flex;
	gap: 24px;
}

/* ========================================
   FEATURED PRODUCTS SECTION
   ======================================== */

.featured-products {
	position: relative;
	margin-bottom: 94px;
	padding: 0 94px;
}

.featured-products__title {
	font-family: 'Inter', Helvetica;
	font-weight: 600;
	color: #000000;
	font-size: 48px;
	letter-spacing: -0.96px;
	line-height: normal;
	margin: 0 0 39px 0;
}

.featured-products__grid {
	display: flex;
	gap: 26px;
}

.featured-product {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	width: 405px;
}

.featured-product__image {
	width: 100%;
	height: 405px;
	border-radius: 8px;
	background-size: cover;
	background-position: 50% 50%;
}

.featured-product__colors {
	display: flex;
	gap: 6.5px;
	height: 22px;
}

.featured-product__name {
	font-family: 'Trim-Bold', Helvetica;
	font-weight: 700;
	color: #000000;
	font-size: 24px;
	line-height: 36px;
	margin: 0;
}

.featured-product__description {
	font-family: 'Inter', Helvetica;
	font-weight: 400;
	color: #828282;
	font-size: 20px;
	line-height: 30px;
	margin: 0;
}

/* ========================================
   TECHNICAL FEATURES SECTION
   ======================================== */

.technical-features {
	position: relative;
	margin-bottom: 99px;
	padding: 0 94px;
}

.technical-features__grid {
	display: flex;
	gap: 39px;
}

.feature-card {
	display: flex;
	flex-direction: column;
	width: 50%;
	min-height: 622px;
	justify-content: flex-end;
	padding: 10px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
}

.feature-card__background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
}

.feature-card__background--tiger {
	background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%), url(/assets/images/image-2.jpg);
}

.feature-card__background--tex {
	background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%), url(/assets/images/image-3.jpg);
}

.feature-card__content {
	position: relative;
	z-index: 1;
	padding: 25px;
}

.feature-card__info {
	margin-bottom: 16px;
}

.feature-card__title {
	font-family: 'Trim-Bold', Helvetica;
	font-weight: 700;
	color: #ffffff;
	font-size: 24px;
	line-height: 36px;
	margin: 0 0 16px 0;
}

.feature-card__description {
	font-family: 'Inter', Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 20px;
	line-height: 30px;
	margin: 0;
}

/* ========================================
   ADVENTURE SECTION
   ======================================== */

.adventure {
	width: 100%;
	margin: 0 0 125px 0;
	overflow: visible;
}

.adventure__title {
	text-align: center;
	font-family: 'Trim-Bold', Helvetica;
	font-weight: 700;
	color: #939040;
	font-size: 60px;
	line-height: 90px;
	margin: 0 0 76px 0;
}

.adventure__content {
	width: 100%;
	height: 560px;
	background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/assets/images/explore-every-adventure.jpg);
	background-size: cover;
	background-position: 50% 50%;
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 83px;
	overflow: visible;
}

.adventure__container {
	display: flex;
	align-items: center;
	gap: 58px;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.adventure__hero {
	position: relative;
	width: 600px;
	height: 513px;
	flex-shrink: 0;
}

.adventure__image {
	position: absolute;
	width: 600px;
	height: 465px;
	top: 0;
	left: 0;
	object-fit: cover;
}

.adventure__btn {
	position: absolute;
	top: 462px;
	left: 220px;
}

.adventure__side-content {
	position: relative;
	flex: 1;
	max-width: 550px;
	height: 710px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	margin: -75px 0;
	z-index: 10;
}

.adventure__side-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.adventure__play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 124px;
	height: 124px;
	object-fit: cover;
}

/* ========================================
   PRODUCT SHOWCASE SECTION
   ======================================== */

.product-showcase {
	position: relative;
	margin-bottom: 125px;
	padding: 0 94px;
}

.product-showcase__title {
	font-family: 'Inter', Helvetica;
	font-weight: 600;
	color: #000000;
	font-size: 48px;
	letter-spacing: -0.96px;
	line-height: normal;
	margin: 0 0 35px 0;
}

.product-showcase__grid {
	display: flex;
	gap: 21px;
}

.showcase-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 622px;
	justify-content: flex-end;
	padding: 10px;
	border-radius: 8px;
	overflow: hidden;
	background-size: cover;
	background-position: 50% 50%;
	text-decoration: none;
}

.showcase-card--1 {
	background-image: url(/assets/images/card-1.jpg);
}

.showcase-card--2 {
	background-image: url(/assets/images/card-2.jpg);
}

.showcase-card--3 {
	background-image: url(/assets/images/card-3.jpg);
}

.showcase-card__content {
	padding: 25px;
}

/* ========================================
   PARTNERSHIP SECTION
   ======================================== */

.partnerships {
	display: flex;
	width: 100%;
}

.partnership {
	display: flex;
	flex-direction: column;
	width: 50%;
	min-height: 481px;
	justify-content: flex-end;
	padding: 35px;
	background-size: cover;
	background-position: 50% 50%;
	position: relative;
}

.partnership--soudal {
	background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%), url(/assets/images/image.jpg);
}

.partnership--works {
	background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%), url(/assets/images/image-1.jpg);
}

.partnership__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.partnership__logo {
	width: 141px;
	height: auto;
	margin-bottom: 10px;
}

.partnership__info {
	max-width: 381px;
}

.partnership__title {
	font-family: 'Open Sans', Helvetica;
	font-weight: 700;
	color: #ffffff;
	font-size: 20px;
	line-height: 30px;
	margin: 0 0 10px 0;
}

.partnership__description {
	font-family: 'Open Sans', Helvetica;
	font-weight: 400;
	color: #ffffff;
	font-size: 16px;
	line-height: 24px;
	margin: 0;
}

/* ========================================
   CAROUSEL HEADER AND ARROWS
   ======================================== */

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 39px;
}

.product-showcase .section-header {
	margin-bottom: 35px;
}

.carousel-arrows {
	display: none;
	gap: 8px;
}

.carousel-arrow {
	background: #b0b0b0;
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-arrow:not(:disabled) {
	background: #333;
}

.carousel-arrow:hover:not(:disabled) {
	background: #000;
}

.carousel-arrow:disabled {
	cursor: not-allowed;
}

.carousel-arrow svg {
	width: 20px;
	height: 20px;
	color: #fff;
}

/* ========================================
   VIDEO MODAL
   ======================================== */

.video-modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	animation: fadeIn 0.3s ease;
}

.video-modal__content {
	position: relative;
	margin: 5% auto;
	width: 90%;
	max-width: 1200px;
}

.video-modal__close {
	position: absolute;
	right: -40px;
	top: -40px;
	color: #ffffff;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.video-modal__close:hover {
	opacity: 0.7;
}

.video-modal__iframe-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}

.video-modal__iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Extra large screens */
@media (max-width: 1400px) and (min-width: 1201px) {
	.adventure__container {
		max-width: 1200px;
	}

	.adventure__side-content {
		max-width: 500px;
		height: 660px;
		margin: -50px 0;
	}

	.hero__content {
		left: 60px;
		width: 700px;
	}
}

/* Medium screens (tablets and small laptops) */
@media (max-width: 1200px) and (min-width: 769px) {
	.hero__content {
		left: 40px;
		width: 600px;
	}

	.hero__title {
		font-size: 42px;
	}

	.adventure__content {
		padding: 0 40px;
	}

	.adventure__container {
		gap: 40px;
	}

	.adventure__hero {
		width: 450px;
		height: 385px;
	}

	.adventure__image {
		width: 450px;
		height: 350px;
	}

	.adventure__side-content {
		height: 600px;
		margin: -50px 0;
	}

	.adventure__btn {
		left: 165px;
		top: 347px;
	}

	/* Adjust sections padding */
	.featured-products,
	.technical-features,
	.product-showcase {
		padding: 0 60px;
	}

	/* Adjust product cards */
	.featured-product {
		width: 330px;
	}

	.featured-product__image {
		height: 330px;
	}
}

/* Small laptops */
@media (max-width: 1024px) and (min-width: 769px) {
	.hero__content {
		left: 30px;
		width: 500px;
	}

	.hero__title {
		font-size: 36px;
	}

	.adventure__content {
		height: 480px;
	}

	.adventure__container {
		gap: 30px;
	}

	.adventure__hero {
		width: 400px;
		height: 342px;
	}

	.adventure__image {
		width: 400px;
		height: 310px;
	}

	.adventure__side-content {
		height: 540px;
		margin: -30px 0;
	}

	.adventure__btn {
		left: 147px;
		top: 309px;
	}

	.adventure__play-btn {
		width: 100px;
		height: 100px;
	}

	/* Adjust sections padding */
	.featured-products,
	.technical-features,
	.product-showcase {
		padding: 0 40px;
	}

	/* Adjust product cards */
	.featured-product {
		width: 300px;
	}

	.featured-product__image {
		height: 300px;
	}

	/* Technical features */
	.technical-features__grid {
		gap: 20px;
	}

	/* Showcase cards */
	.showcase-card {
		min-height: 500px;
	}
}

/* Smaller screens approaching tablet size */
@media (max-width: 900px) and (min-width: 769px) {
	.adventure__title {
		font-size: 48px;
		line-height: 72px;
		margin-bottom: 50px;
	}

	.adventure__content {
		height: 440px;
		padding: 0 30px;
	}

	.adventure__container {
		gap: 20px;
	}

	.adventure__hero {
		width: 350px;
		height: 300px;
	}

	.adventure__image {
		width: 350px;
		height: 270px;
	}

	.adventure__side-content {
		height: 480px;
		margin: -20px 0;
	}

	.adventure__btn {
		left: 125px;
		top: 269px;
		padding: 15px 25px;
	}

	.adventure__btn .btn-text {
		font-size: 14px;
	}

	.adventure__play-btn {
		width: 80px;
		height: 80px;
	}

	/* Adjust other sections for consistency */
	.featured-products,
	.technical-features,
	.product-showcase {
		padding: 0 30px;
	}

	.section-title,
	.featured-products__title,
	.product-showcase__title {
		font-size: 40px;
	}

	/* Partnership section adjustments */
	.partnership {
		padding: 25px;
		min-height: 400px;
	}

	.partnership__logo {
		width: 120px;
	}

	.partnership__info {
		max-width: 100%;
	}

	.partnership__title {
		font-size: 18px;
		line-height: 27px;
	}

	.partnership__description {
		font-size: 14px;
		line-height: 21px;
	}
}

/* Mobile styles */
@media (max-width: 768px) {
	.hero__content {
		top: 200px;
		left: 20px;
		width: calc(100% - 40px);
	}

	.hero__title {
		font-size: 36px;
	}

	.featured-products,
	.technical-features,
	.product-showcase {
		padding: 0 20px;
	}

	.featured-products__title,
	.product-showcase__title {
		font-size: 27px;
	}

	/* Carousel styles for mobile */
	.carousel-arrows {
		display: flex;
	}

	.section-header {
		margin-bottom: 20px;
	}

	.featured-products__grid,
	.product-showcase__grid {
		display: flex;
		flex-direction: row;
		gap: 20px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Improve scrolling performance */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	.featured-products__grid::-webkit-scrollbar,
	.product-showcase__grid::-webkit-scrollbar {
		display: none;
	}

	/* 2.5 products visible for featured products */
	.featured-product {
		flex: 0 0 calc(40% - 8px);
		width: calc(40% - 8px);
		max-width: none;
		margin: 0;
	}

	.showcase-card {
		flex: 0 0 calc(90% - 10px);
		width: calc(90% - 10px);
		max-width: none;
		margin: 0;
	}

	/* Adjust heights for mobile */
	.featured-product__image {
		height: 200px;
	}

	/* Adjust font sizes for smaller cards */
	.featured-product__name {
		font-size: 18px;
		line-height: 24px;
	}

	.featured-product__description {
		font-size: 14px;
		line-height: 20px;
	}

	/* Make color dots smaller on mobile - with higher specificity */
	.featured-products .featured-product__colors {
		gap: 4px;
		height: 16px;
	}

	.featured-products .featured-product .color-dot {
		width: 16px !important;
		height: 16px !important;
		border-radius: 8px;
	}

	.featured-products .featured-product .color-dot.active {
		border-width: 2px;
	}

	/* Keep technical features as column */
	.technical-features__grid {
		flex-direction: column;
	}

	.feature-card {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}

	.partnerships {
		flex-direction: column;
	}

	.partnership {
		width: 100%;
	}

	.partnership__info {
		width: 100%;
	}

	.adventure {
		margin: 60px 0 80px 0;
	}

	.adventure__title {
		font-size: 27px;
		line-height: 30px;
		margin-bottom: 40px;
		text-align: left;
		padding: 0 20px;
	}

	.adventure__content {
		padding: 0 20px;
		height: auto;
		min-height: auto;
		overflow: visible;
		background-image: none !important;
		background-color: #ffffff;
	}

	.adventure__container {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	.adventure__hero {
		width: 100%;
		height: auto;
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40px;
	}

	.adventure__image {
		position: static;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.adventure__btn {
		position: static;
		margin: 0;
		justify-content: center;
		background-color: #939040;
	}

	.adventure__btn .btn-text {
		color: #ffffff;
	}

	.adventure__side-content {
		width: 100%;
		max-width: 100%;
		height: 500px;
		margin: 0;
		border-radius: 12px;
		box-shadow: none;
	}

	/* Video modal responsive adjustments */
	.video-modal__content {
		width: 95%;
		margin: 10% auto;
	}

	.video-modal__close {
		right: 10px;
		top: -50px;
		font-size: 30px;
	}
}