@import url("https://fonts.bunny.net/css?family=bebas-neue:400");
@import url("https://use.typekit.net/vjh6fuy.css");

:root {
	/* Colors */
	--orange: #ff6600;
	--dark-bg: #111111;
	--white: #ffffff;
	--black: #000000;
	--light-gray: #f0f0f0;

	/* Layout */
	--content-width: 465px;
	--gap: 24px;
	--padding: 48px;

	/* Typography */
	--font-bebas: "Bebas Neue", sans-serif;
	--font-proxima: "Proxima Nova", sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-proxima);
	min-height: 100vh;
	background-color: var(--dark-bg);
}

/* Main layout - responsive flexbox */
.layout {
	display: flex;
	min-height: 100vh;
	flex-direction: row; /* Desktop: side-by-side */
}

.hero-section {
	background-image: url("/images/hero-bg-1.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	order: 2;
}

.content-section {
	background-color: var(--dark-bg);
	color: var(--white);
	width: var(--content-width);
	flex-shrink: 0;
	order: 1; /* Desktop: content on left */
}

.content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 40px var(--padding);
	gap: var(--gap);
}

/* Typography */
.orange-title {
	font-family: var(--font-bebas);
	font-size: 96px;
	line-height: 80px;
	color: var(--orange);
	font-weight: normal;
	text-transform: lowercase;
}

.white-subtitle {
	font-family: var(--font-bebas);
	font-size: 40px;
	line-height: 40px;
	color: var(--white);
	font-weight: normal;
}

.main-heading {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.orange-divider {
	background-color: var(--orange);
	height: 2px;
	width: 100%;
}

.text-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-title {
	font-family: var(--font-proxima);
	font-size: 24px;
	line-height: 32px;
	font-weight: bold;
}

.description {
	font-family: var(--font-proxima);
	font-size: 18px;
	line-height: 26px;
	font-weight: normal;
}

.description p {
	margin-bottom: 16px;
}

.description p:last-child {
	margin-bottom: 0;
}

.cta-button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	background-color: var(--white);
	color: var(--black);
	border: none;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--font-bebas);
	font-size: 24px;
	line-height: 32px;
	text-transform: lowercase;
	width: 100%;
	transition: background-color 0.2s ease;
}

.cta-button:hover {
	background-color: var(--orange);
}

.arrow {
	font-size: 16px;
}

/* Large desktop adjustments */
@media (max-width: 1600px) {
	.orange-title {
		font-size: 88px;
	}
}

/* Tablet layout */
@media (max-width: 1024px) {
	.layout {
		flex-direction: column; /* Tablet: stacked */
	}

	.hero-section {
		padding-bottom: 66.67%;
		order: 1; /* Tablet: hero on top */
	}

	.content-section {
		width: 100%;
		order: 2; /* Tablet: content on bottom */
	}

	.content-wrapper {
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

	.orange-title {
		font-size: 88px;
	}
}

/* Mobile adjustments */
@media (max-width: 480px) {
	.content-wrapper {
		padding: 32px 24px;
	}

	.orange-title {
		font-size: 64px;
		line-height: 56px;
	}

	.white-subtitle {
		font-size: 32px;
		line-height: 36px;
	}

	.section-title {
		font-size: 20px;
		line-height: 28px;
	}

	.description {
		font-size: 16px;
		line-height: 24px;
	}

	.cta-button {
		font-size: 20px;
		padding: 12px 24px;
	}
}