/* =========================================================
   SHIVA TOURS & TRAVELS
   TRANSPORTATION PAGE
   PREMIUM FINAL VERSION
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

.shiva-transportation-page {

	--transport-dark: #082a22;
	--transport-deep: #051c17;

	--transport-cream: #f4f0e7;
	--transport-paper: #faf8f2;

	--transport-gold: #d8b35c;
	--transport-gold-soft: rgba(216,179,92,.14);

	--transport-text: #263731;
	--transport-muted: #68736d;

	--transport-border: rgba(8,42,34,.12);

	--transport-shadow:
		0 22px 65px rgba(8,42,34,.10);

	--transport-container: 1380px;

	background: var(--transport-cream);
	color: var(--transport-text);

	overflow: hidden;
}


.shiva-transportation-page *,
.shiva-transportation-page *::before,
.shiva-transportation-page *::after {

	box-sizing: border-box;
}


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

.transportation-container {

	width:
		min(
			calc(100% - 80px),
			var(--transport-container)
		);

	margin: 0 auto;
}


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

.transportation-hero {

	position: relative;

	height: 620px;
	min-height: 620px;

	display: flex;
	align-items: center;

	overflow: hidden;

	background:
		var(--transport-dark);
}


/*
   Background
*/

.transportation-hero-bg {

	position: absolute;

	inset: 0;

	overflow: hidden;
}


.transportation-hero-bg img {

	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;
	object-position: center center;

	transform:
		scale(1.06);

	animation:
		transportationHeroImage
		16s
		cubic-bezier(.2,.65,.2,1)
		forwards;

	will-change: transform;
}


@keyframes transportationHeroImage {

	from {

		transform:
			scale(1.08);

	}

	to {

		transform:
			scale(1);

	}

}


/*
   Premium layered overlay
*/

.transportation-hero-overlay {

	position: absolute;

	inset: 0;

	background:

		linear-gradient(
			90deg,
			rgba(4,24,19,.94) 0%,
			rgba(4,24,19,.78) 30%,
			rgba(4,24,19,.42) 58%,
			rgba(4,24,19,.10) 100%
		),

		linear-gradient(
			180deg,
			rgba(4,24,19,.16),
			rgba(4,24,19,.42)
		);
}


/*
   Subtle cinematic glow
*/

.transportation-hero::after {

	content: "";

	position: absolute;

	inset: 0;

	background:
		radial-gradient(
			circle at 72% 35%,
			rgba(216,179,92,.09),
			transparent 34%
		);

	pointer-events: none;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.transportation-hero-content {

	position: relative;

	z-index: 3;

	width:
		min(
			680px,
			calc(100% - 80px)
		);

	margin-left:
		max(
			40px,
			calc((100vw - var(--transport-container)) / 2)
		);

	padding:
		55px 0 70px;

	color: #fff;

	animation:
		transportationHeroReveal
		1s
		cubic-bezier(.2,.8,.2,1)
		both;
}


@keyframes transportationHeroReveal {

	from {

		opacity: 0;

		transform:
			translateY(32px);

	}

	to {

		opacity: 1;

		transform:
			translateY(0);

	}

}


/* =========================================================
   HERO EYEBROW
========================================================= */

.transportation-eyebrow {

	display: flex;

	align-items: center;

	gap: 13px;

	margin-bottom: 22px;

	color:
		var(--transport-gold);

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 3px;

	line-height: 1;

	text-transform: uppercase;
}


.transportation-eyebrow span {

	width: 34px;

	height: 1px;

	background:
		var(--transport-gold);

	transform-origin: left;

	animation:
		transportationLineReveal
		1s
		.25s
		ease
		both;
}


@keyframes transportationLineReveal {

	from {

		transform:
			scaleX(0);

		opacity: 0;

	}

	to {

		transform:
			scaleX(1);

		opacity: 1;

	}

}


/* =========================================================
   HERO TITLE
========================================================= */

.transportation-hero h1 {

	max-width: 700px;

	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			52px,
			5.6vw,
			88px
		);

	font-weight: 400;

	line-height: .91;

	letter-spacing:
		-.045em;

	color: #fff;
}


.transportation-hero h1 em {

	color:
		var(--transport-gold);

	font-style: italic;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.transportation-hero p {

	max-width: 520px;

	margin:
		28px 0 0;

	font-size: 16px;

	line-height: 1.7;

	color:
		rgba(255,255,255,.76);
}


/* =========================================================
   HERO BUTTON
========================================================= */

.transportation-hero-button {

	position: relative;

	display: inline-flex;

	align-items: center;

	gap: 18px;

	margin-top: 31px;

	padding:
		12px 12px 12px 19px;

	border:
		1px solid
		rgba(216,179,92,.58);

	color: #fff;

	text-decoration: none;

	font-size: 9px;

	font-weight: 800;

	letter-spacing: 1.8px;

	overflow: hidden;

	transition:
		color .35s ease,
		background .35s ease,
		border-color .35s ease,
		transform .35s ease;
}


.transportation-hero-button::before {

	content: "";

	position: absolute;

	inset: 0;

	background:
		var(--transport-gold);

	transform:
		translateX(-102%);

	transition:
		transform .45s
		cubic-bezier(.2,.7,.2,1);

	z-index: -1;
}


.transportation-hero-button span {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 32px;
	height: 32px;

	border:
		1px solid
		rgba(255,255,255,.45);

	border-radius: 50%;

	transition:
		transform .35s ease,
		background .35s ease;
}


.transportation-hero-button:hover {

	color:
		var(--transport-dark);

	border-color:
		var(--transport-gold);

	transform:
		translateY(-3px);
}


.transportation-hero-button:hover::before {

	transform:
		translateX(0);
}


.transportation-hero-button:hover span {

	transform:
		translateX(5px);

	background:
		rgba(255,255,255,.15);
}


/* =========================================================
   HERO BOTTOM META
========================================================= */

.transportation-hero-bottom {

	position: absolute;

	z-index: 4;

	left:
		max(
			40px,
			calc((100vw - var(--transport-container)) / 2)
		);

	bottom: 25px;

	display: flex;

	align-items: center;

	gap: 14px;

	color:
		rgba(255,255,255,.56);

	font-size: 8px;

	font-weight: 800;

	letter-spacing: 2.4px;

	text-transform: uppercase;
}


.transportation-hero-bottom i {

	width: 5px;

	height: 5px;

	border-radius: 50%;

	background:
		var(--transport-gold);

	box-shadow:
		0 0 0 5px
		rgba(216,179,92,.10);

	animation:
		transportationPulse
		2.4s
		infinite;
}


@keyframes transportationPulse {

	0%,
	100% {

		box-shadow:
			0 0 0 4px
			rgba(216,179,92,.08);

	}

	50% {

		box-shadow:
			0 0 0 8px
			rgba(216,179,92,0);

	}

}


/* =========================================================
   INTRODUCTION
========================================================= */

.transportation-intro {

	padding:
		115px 0 75px;

	background:
		var(--transport-cream);
}


.transportation-section-label {

	margin-bottom: 27px;

	color:
		var(--transport-gold);

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 3px;

	line-height: 1;

	text-transform: uppercase;
}


.transportation-intro-grid {

	display: grid;

	grid-template-columns:
		minmax(0,1.05fr)
		minmax(280px,.95fr);

	gap: 90px;

	align-items: start;
}


.transportation-intro-heading h2 {

	max-width: 720px;

	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			45px,
			4.8vw,
			72px
		);

	font-weight: 400;

	line-height: .98;

	letter-spacing:
		-.045em;

	color:
		var(--transport-dark);
}


.transportation-intro-heading h2 em {

	color:
		var(--transport-gold);

	font-style: italic;
}


.transportation-intro-text {

	max-width: 600px;

	padding-top: 5px;
}


.transportation-intro-text p {

	margin:
		0 0 22px;

	font-size: 16px;

	line-height: 1.82;

	color:
		var(--transport-muted);
}


.transportation-intro-text .transportation-lead {

	font-size: 19px;

	line-height: 1.65;

	color:
		var(--transport-text);
}


/* =========================================================
   FLEET
========================================================= */

.transportation-fleet {

	position: relative;

	padding:
		35px 0 135px;

	background:
		var(--transport-cream);
}


.transportation-fleet::before {

	content: "";

	position: absolute;

	width: 420px;
	height: 420px;

	top: -220px;
	right: -190px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(216,179,92,.10),
			transparent 70%
		);

	pointer-events: none;
}


.transportation-fleet-grid {

	position: relative;

	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0,1fr)
		);

	gap: 28px;
}


/* =========================================================
   VEHICLE CARD
========================================================= */

.vehicle-card {

	position: relative;

	background:
		#fff;

	border:
		1px solid
		var(--transport-border);

	overflow: hidden;

	box-shadow:
		0 0 0 rgba(8,42,34,0);

	opacity: 0;

	transform:
		translateY(35px);

	animation:
		vehicleCardReveal
		.8s
		cubic-bezier(.2,.7,.2,1)
		forwards;

	transition:
		transform .55s
		cubic-bezier(.2,.7,.2,1),
		box-shadow .55s ease,
		border-color .4s ease;
}


/*
   Stagger the fleet
*/

.vehicle-card:nth-child(1) {
	animation-delay: .08s;
}

.vehicle-card:nth-child(2) {
	animation-delay: .16s;
}

.vehicle-card:nth-child(3) {
	animation-delay: .24s;
}

.vehicle-card:nth-child(4) {
	animation-delay: .32s;
}

.vehicle-card:nth-child(5) {
	animation-delay: .40s;
}

.vehicle-card:nth-child(6) {
	animation-delay: .48s;
}


@keyframes vehicleCardReveal {

	to {

		opacity: 1;

		transform:
			translateY(0);

	}

}


.vehicle-card:hover {

	transform:
		translateY(-8px);

	box-shadow:
		var(--transport-shadow);

	border-color:
		rgba(216,179,92,.32);
}


/* =========================================================
   VEHICLE IMAGE
========================================================= */

.vehicle-image {

	position: relative;

	height: 340px;

	overflow: hidden;

	background:
		#e9e5dc;
}


.vehicle-image::after {

	content: "";

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			transparent 50%,
			rgba(5,30,24,.12)
		);

	pointer-events: none;
}


.vehicle-image img {

	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transition:
		transform .9s
		cubic-bezier(.2,.7,.2,1),
		filter .7s ease;
}


.vehicle-card:hover
.vehicle-image img {

	transform:
		scale(1.055);

	filter:
		saturate(1.04)
		contrast(1.02);
}


/* =========================================================
   VEHICLE NUMBER
========================================================= */

.vehicle-number {

	position: absolute;

	z-index: 3;

	top: 20px;
	left: 20px;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 38px;
	height: 38px;

	border:
		1px solid
		rgba(255,255,255,.65);

	border-radius: 50%;

	background:
		rgba(8,42,34,.68);

	backdrop-filter:
		blur(9px);

	-webkit-backdrop-filter:
		blur(9px);

	color: #fff;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: 1px;

	transition:
		transform .35s ease,
		background .35s ease;
}


.vehicle-card:hover
.vehicle-number {

	transform:
		rotate(8deg);

	background:
		rgba(216,179,92,.92);

	color:
		var(--transport-dark);
}


/* =========================================================
   FEATURED TAG
========================================================= */

.vehicle-featured-tag {

	position: absolute;

	z-index: 3;

	top: 20px;
	right: 20px;

	padding:
		9px 11px;

	background:
		var(--transport-gold);

	color:
		var(--transport-dark);

	font-size: 8px;

	font-weight: 900;

	letter-spacing: 1.6px;

	text-transform: uppercase;
}


/* =========================================================
   VEHICLE CONTENT
========================================================= */

.vehicle-content {

	padding:
		29px 31px 28px;
}


.vehicle-meta {

	display: flex;

	flex-wrap: wrap;

	gap: 10px;

	margin-bottom: 13px;

	color:
		var(--transport-gold);

	font-size: 8px;

	font-weight: 900;

	letter-spacing: 1.6px;

	text-transform: uppercase;
}


.vehicle-meta span + span::before {

	content: "·";

	margin-right: 10px;

	color:
		var(--transport-muted);
}


.vehicle-content h3 {

	margin:
		0 0 11px;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			31px,
			2.8vw,
			40px
		);

	font-weight: 400;

	line-height: 1;

	letter-spacing:
		-.035em;

	color:
		var(--transport-dark);
}


.vehicle-content p {

	max-width: 500px;

	margin: 0;

	font-size: 14px;

	line-height: 1.75;

	color:
		var(--transport-muted);
}


/* =========================================================
   VEHICLE BOTTOM
========================================================= */

.vehicle-bottom {

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 20px;

	margin-top: 27px;

	padding-top: 21px;

	border-top:
		1px solid
		var(--transport-border);
}


/* =========================================================
   PRICE
========================================================= */

.vehicle-price small {

	display: block;

	margin-bottom: 5px;

	color:
		var(--transport-muted);

	font-size: 8px;

	font-weight: 900;

	letter-spacing: 1.7px;

	text-transform: uppercase;
}


.vehicle-price strong {

	display: block;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 23px;

	font-weight: 400;

	line-height: 1;

	color:
		var(--transport-dark);
}


.vehicle-price strong span {

	margin-left: 3px;

	font-family:
		Arial,
		sans-serif;

	font-size: 9px;

	color:
		var(--transport-muted);
}


.vehicle-price-custom strong {

	font-family:
		Arial,
		sans-serif;

	font-size: 13px;

	font-weight: 800;

	letter-spacing: .8px;
}


/* =========================================================
   VEHICLE ENQUIRE
========================================================= */

.vehicle-enquire {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	color:
		var(--transport-dark);

	text-decoration: none;

	font-size: 8px;

	font-weight: 900;

	letter-spacing: 1.6px;

	white-space: nowrap;

	transition:
		color .3s ease;
}


.vehicle-enquire span {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 34px;
	height: 34px;

	border:
		1px solid
		var(--transport-border);

	border-radius: 50%;

	transition:
		transform .35s ease,
		background .35s ease,
		color .35s ease,
		border-color .35s ease;
}


.vehicle-enquire:hover {

	color:
		#9a7937;
}


.vehicle-enquire:hover span {

	background:
		var(--transport-dark);

	color: #fff;

	border-color:
		var(--transport-dark);

	transform:
		translateX(5px);
}


/* =========================================================
   WHY SHIVA
========================================================= */

.transportation-why {

	position: relative;

	padding:
		125px 0 130px;

	background:
		var(--transport-dark);

	color: #fff;

	overflow: hidden;
}


.transportation-why::before {

	content: "";

	position: absolute;

	width: 600px;
	height: 600px;

	right: -300px;
	top: -260px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(216,179,92,.09),
			transparent 68%
		);

	pointer-events: none;
}


.transportation-why-heading {

	position: relative;

	z-index: 1;
}


.transportation-why-heading h2 {

	max-width: 930px;

	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			45px,
			5vw,
			76px
		);

	font-weight: 400;

	line-height: .98;

	letter-spacing:
		-.045em;
}


.transportation-why-heading em {

	color:
		var(--transport-gold);

	font-style: italic;
}


/* =========================================================
   BENEFITS
========================================================= */

.transportation-benefits {

	position: relative;

	z-index: 1;

	display: grid;

	grid-template-columns:
		repeat(2,1fr);

	margin-top: 82px;

	border-top:
		1px solid
		rgba(255,255,255,.13);
}


.transportation-benefit {

	display: grid;

	grid-template-columns:
		48px 1fr;

	gap: 22px;

	padding:
		38px 40px 38px 0;

	border-bottom:
		1px solid
		rgba(255,255,255,.13);

	opacity: 0;

	transform:
		translateY(25px);

	animation:
		transportBenefitReveal
		.75s
		ease
		forwards;
}


.transportation-benefit:nth-child(1) {
	animation-delay: .12s;
}

.transportation-benefit:nth-child(2) {
	animation-delay: .20s;
}

.transportation-benefit:nth-child(3) {
	animation-delay: .28s;
}

.transportation-benefit:nth-child(4) {
	animation-delay: .36s;
}


@keyframes transportBenefitReveal {

	to {

		opacity: 1;

		transform:
			translateY(0);

	}

}


.transportation-benefit:nth-child(odd) {

	border-right:
		1px solid
		rgba(255,255,255,.13);

	padding-right: 50px;
}


.transportation-benefit:nth-child(even) {

	padding-left: 50px;
}


.benefit-number {

	color:
		var(--transport-gold);

	font-size: 9px;

	font-weight: 800;

	letter-spacing: 1px;
}


.transportation-benefit h3 {

	margin:
		0 0 9px;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 23px;

	font-weight: 400;

	line-height: 1.15;
}


.transportation-benefit p {

	max-width: 430px;

	margin: 0;

	font-size: 13px;

	line-height: 1.8;

	color:
		rgba(255,255,255,.59);
}


/* =========================================================
   CUSTOM TRANSPORT
========================================================= */

.transportation-custom {

	position: relative;

	min-height: 430px;

	display: flex;

	align-items: center;

	overflow: hidden;

	background:
		var(--transport-dark);

}


.transportation-custom::before {

	content: "";

	position: absolute;

	inset: 0;

	background:
		url("../images/transportation-hero.png")
		center / cover no-repeat;

	transform:
		scale(1.04);

	transition:
		transform 1.2s
		cubic-bezier(.2,.7,.2,1);
}


.transportation-custom:hover::before {

	transform:
		scale(1.08);
}


.transportation-custom-overlay {

	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(5,31,25,.94),
			rgba(5,31,25,.72),
			rgba(5,31,25,.42)
		);
}


.transportation-custom-content {

	position: relative;

	z-index: 2;

	max-width: 700px;

	padding:
		90px 0;

	color: #fff;
}


.transportation-custom-content
.transportation-section-label {

	margin-bottom: 25px;
}


.transportation-custom-content h2 {

	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			44px,
			4.7vw,
			72px
		);

	font-weight: 400;

	line-height: .97;

	letter-spacing:
		-.045em;
}


.transportation-custom-content h2 em {

	color:
		var(--transport-gold);

	font-style: italic;
}


.transportation-custom-content p {

	max-width: 550px;

	margin:
		23px 0 0;

	font-size: 15px;

	line-height: 1.8;

	color:
		rgba(255,255,255,.69);
}


/* =========================================================
   CUSTOM BUTTON
========================================================= */

.transportation-custom-button,
.transportation-final-button {

	display: inline-flex;

	align-items: center;

	gap: 18px;

	margin-top: 29px;

	padding:
		11px 11px 11px 18px;

	text-decoration: none;

	font-size: 9px;

	font-weight: 900;

	letter-spacing: 1.8px;

	transition:
		background .35s ease,
		color .35s ease,
		transform .35s ease,
		border-color .35s ease;
}


.transportation-custom-button {

	border:
		1px solid
		rgba(216,179,92,.65);

	color: #fff;
}


.transportation-custom-button span,
.transportation-final-button span {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 31px;
	height: 31px;

	border:
		1px solid
		currentColor;

	border-radius: 50%;

	transition:
		transform .35s ease;
}


.transportation-custom-button:hover {

	background:
		var(--transport-gold);

	color:
		var(--transport-dark);

	transform:
		translateY(-3px);
}


.transportation-custom-button:hover span {

	transform:
		translateX(5px);
}


/* =========================================================
   FINAL CTA
========================================================= */

.transportation-final-cta {

	position: relative;

	padding:
		120px 0 130px;

	background:
		var(--transport-paper);

	overflow: hidden;
}


.transportation-final-cta::before {

	content: "";

	position: absolute;

	width: 500px;
	height: 500px;

	left: -250px;
	bottom: -280px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(216,179,92,.10),
			transparent 70%
		);

	pointer-events: none;
}


.transportation-final-inner {

	position: relative;

	z-index: 1;

	text-align: center;
}


.transportation-final-inner
.transportation-section-label {

	margin-bottom: 24px;
}


.transportation-final-inner h2 {

	margin: 0;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			48px,
			6.2vw,
			92px
		);

	font-weight: 400;

	line-height: .93;

	letter-spacing:
		-.05em;

	color:
		var(--transport-dark);
}


.transportation-final-inner h2 em {

	color:
		var(--transport-gold);

	font-style: italic;
}


.transportation-final-inner p {

	max-width: 520px;

	margin:
		25px auto 0;

	font-size: 15px;

	line-height: 1.8;

	color:
		var(--transport-muted);
}


.transportation-final-button {

	background:
		var(--transport-dark);

	color: #fff;
}


.transportation-final-button:hover {

	background:
		var(--transport-gold);

	color:
		var(--transport-dark);

	transform:
		translateY(-3px);
}


.transportation-final-button:hover span {

	transform:
		translateX(5px);
}


/* =========================================================
   GENERAL REVEAL
========================================================= */

.reveal {

	opacity: 0;

	transform:
		translateY(30px);

	animation:
		transportationReveal
		.85s
		cubic-bezier(.2,.7,.2,1)
		forwards;
}


@keyframes transportationReveal {

	to {

		opacity: 1;

		transform:
			translateY(0);

	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.transportation-container {

		width:
			min(
				calc(100% - 60px),
				1100px
			);
	}


	.transportation-hero {

		height: 580px;
		min-height: 580px;
	}


	.transportation-hero-content {

		margin-left: 30px;

		width:
			calc(100% - 60px);
	}


	.transportation-hero-bottom {

		left: 30px;
	}


	.transportation-intro-grid {

		gap: 55px;
	}


	.vehicle-image {

		height: 310px;
	}


	.transportation-fleet-grid {

		gap: 22px;
	}

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 800px) {

	.transportation-container {

		width:
			calc(100% - 40px);
	}


	.transportation-hero {

		height: 600px;
		min-height: 600px;
	}


	.transportation-hero-content {

		width:
			calc(100% - 40px);

		margin-left: 20px;

		padding:
			80px 0 100px;
	}


	.transportation-hero h1 {

		font-size:
			clamp(
				48px,
				13vw,
				70px
			);

		letter-spacing:
			-.05em;
	}


	.transportation-hero p {

		max-width: 470px;

		font-size: 15px;
	}


	.transportation-hero-bottom {

		left: 20px;

		bottom: 22px;

		font-size: 7px;

		letter-spacing: 1.8px;
	}


	.transportation-intro {

		padding:
			90px 0 55px;
	}


	.transportation-intro-grid {

		grid-template-columns:
			1fr;

		gap: 38px;
	}


	.transportation-intro-heading h2 {

		font-size:
			52px;
	}


	.transportation-fleet {

		padding:
			20px 0 90px;
	}


	.transportation-fleet-grid {

		grid-template-columns:
			1fr;
	}


	.vehicle-image {

		height:
			350px;
	}


	.transportation-why {

		padding:
			90px 0;
	}


	.transportation-why-heading h2 {

		font-size:
			52px;
	}


	.transportation-benefits {

		grid-template-columns:
			1fr;

		margin-top:
			60px;
	}


	.transportation-benefit,
	.transportation-benefit:nth-child(odd),
	.transportation-benefit:nth-child(even) {

		padding:
			30px 0;

		border-right:
			0;
	}


	.transportation-custom {

		min-height:
			480px;
	}


	.transportation-custom-content {

		padding:
			80px 0;
	}


	.transportation-custom-content h2 {

		font-size:
			50px;
	}


	.transportation-final-cta {

		padding:
			90px 0 100px;
	}


	.transportation-final-inner h2 {

		font-size:
			62px;

		letter-spacing:
			-.045em;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

	.transportation-container {

		width:
			calc(100% - 30px);
	}


	.transportation-hero {

		height:
			560px;

		min-height:
			560px;
	}


	.transportation-hero-content {

		width:
			calc(100% - 30px);

		margin-left:
			15px;

		padding:
			65px 0 85px;
	}


	.transportation-eyebrow {

		margin-bottom:
			18px;

		font-size:
			8px;

		letter-spacing:
			2.2px;
	}


	.transportation-hero h1 {

		font-size:
			47px;

		line-height:
			.91;
	}


	.transportation-hero p {

		margin-top:
			21px;

		font-size:
			13px;

		line-height:
			1.65;
	}


	.transportation-hero-button {

		margin-top:
			24px;

		padding:
			9px 9px 9px 15px;

		font-size:
			8px;
	}


	.transportation-hero-button span {

		width:
			28px;

		height:
			28px;
	}


	.transportation-hero-bottom {

		display:
			none;
	}


	.transportation-intro {

		padding:
			75px 0 45px;
	}


	.transportation-section-label {

		margin-bottom:
			21px;

		font-size:
			8px;

		letter-spacing:
			2.2px;
	}


	.transportation-intro-heading h2 {

		font-size:
			43px;
	}


	.transportation-intro-text p {

		font-size:
			14px;
	}


	.transportation-intro-text
	.transportation-lead {

		font-size:
			17px;
	}


	.transportation-fleet {

		padding:
			15px 0 75px;
	}


	.vehicle-image {

		height:
			280px;
	}


	.vehicle-content {

		padding:
			25px 23px 24px;
	}


	.vehicle-content h3 {

		font-size:
			34px;
	}


	.vehicle-content p {

		font-size:
			13px;
	}


	.vehicle-bottom {

		align-items:
			flex-start;

		flex-direction:
			column;

		gap:
			18px;
	}


	.vehicle-enquire {

		width:
			100%;

		justify-content:
			space-between;
	}


	.transportation-why {

		padding:
			78px 0;
	}


	.transportation-why-heading h2 {

		font-size:
			43px;
	}


	.transportation-benefits {

		margin-top:
			50px;
	}


	.transportation-benefit {

		grid-template-columns:
			35px 1fr;

		gap:
			15px;
	}


	.transportation-benefit h3 {

		font-size:
			21px;
	}


	.transportation-benefit p {

		font-size:
			13px;
	}


	.transportation-custom {

		min-height:
			430px;
	}


	.transportation-custom-content {

		padding:
			70px 0;
	}


	.transportation-custom-content h2 {

		font-size:
			42px;
	}


	.transportation-custom-content p {

		font-size:
			14px;
	}


	.transportation-final-cta {

		padding:
			80px 0 90px;
	}


	.transportation-final-inner h2 {

		font-size:
			48px;
	}


	.transportation-final-inner p {

		font-size:
			14px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.transportation-hero-bg img,
	.transportation-hero-content,
	.transportation-eyebrow span,
	.transportation-hero-bottom i,
	.vehicle-card,
	.vehicle-image img,
	.transportation-benefit,
	.reveal {

		animation:
			none !important;

		transition:
			none !important;

		transform:
			none !important;

		opacity:
			1 !important;
	}

}