/* Self-hosted DM Sans (previously fetched from fonts.bunny.net on every
   page load, which we don't control the cache lifetime of). */
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dm-sans/dm-sans-400.a220a32881ae.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dm-sans/dm-sans-500.aa952242481d.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/dm-sans/dm-sans-700.9508ec8af518.woff2") format("woff2");
}

html,
body {
	width: 100%;
	height: 100%;
	display: block;
}

/* Match the "Get In Touch" hover treatment to the "Book Now" CTA hover across the site. */
.contact-submit-btn:hover {
	background-color: #d9ad45 !important;
	border-color: #d9ad45 !important;
	color: #fff !important;
}

/* Inline service links on the reservation page, colored to match the Book Now CTA hover. */
.reserve-inline-link,
.reserve-inline-link:focus,
.reserve-inline-link:visited {
	color: #d9ad45;
	text-decoration: none;
	display: inline-block;
	transition: font-size 0.2s ease;
}

.reserve-inline-link:hover {
	color: #d9ad45;
	text-decoration: underline;
	font-size: 1.1em;
}

/* Site-wide button hover color, matched to the About section's "18+ Years Experience" badge. */
.btn.btn-primary:hover,
.btn.btn-white-big:hover,
.btn.btn-border-black:hover {
	background-color: #d9ad45 !important;
	border-color: #d9ad45 !important;
	color: #fff !important;
}

.btn.btn-primary:hover svg,
.btn.btn-white-big:hover svg,
.btn.btn-border-black:hover svg {
	color: #fff !important;
}

.cardFleet {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
	border-radius: 8px;
	overflow: hidden;
}

.main {
	overflow-x: hidden;
}

.whatsapp-fab {
	position: fixed;
	bottom: 32px;
	right: 32px;
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background-color: #25d366;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	z-index: 1000;
	transition:
		transform 0.2s ease,
		background-color 0.2s ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus {
	background-color: #1ebe5d;
	transform: translateY(-2px);
}

.whatsapp-fab svg {
	width: 28px;
	height: 28px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (max-width: 767px) {
	.whatsapp-fab {
		bottom: 16px;
		right: 16px;
		width: 48px;
		height: 48px;
	}

	.whatsapp-fab svg {
		width: 24px;
		height: 24px;
	}

	/* Responsive Logo */
	.header-logo img {
		width: 120px !important;
		max-width: 90%;
		height: auto;
		object-fit: contain;
	}
}

@media (max-width: 480px) {
	/* Extra small devices */
	.header-logo img {
		width: 100px !important;
		max-width: 85%;
	}
}

/* The mobile nav panel reserves space for a top bar that this header
   doesn't render, so the fixed site header (higher z-index) was covering
   the first "Reservation" link when the menu opened. */
.mobile-header-wrapper-style {
	padding-top: 130px;
}

/* Desktop logo styling */
.header-logo img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.header-logo img:hover {
	transform: scale(1.05);
}

/* Footer Visibility */
footer {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative;
	z-index: 1;
	width: 100%;
	clear: both;
}

.footer {
	background-color: #1a1a1a;
	padding: 40px 0 !important;
	width: 100%;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 1;
	min-height: 300px;
	clear: both;
}

.footer-1,
.footer-2 {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100%;
}

.footer-bottom {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100%;
}

.footer .container-sub {
	width: 100% !important;
	display: block !important;
}

.box-footer-top {
	display: block !important;
	width: 100%;
}

.footer .row {
	width: 100%;
}

@media (min-width: 992px) {
	.footer .row {
		display: flex !important;
	}

	.footer .col-lg-4,
	.footer .col-lg-6,
	.footer .col-lg-8,
	.footer .col-md-6,
	.footer .col-md-12 {
		display: block !important;
		width: auto;
		flex: 1;
	}
}

/* Homepage About section */
.home-about-section {
	padding: 90px 0;
	background: #ffffff;
}

.home-about-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
}

.home-about-images {
	position: relative;
	max-width: 620px;
	min-height: 520px;
	margin: 0 auto;
}

.home-about-main-image img,
.home-about-small-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-about-main-image {
	position: relative;
	width: 72%;
	height: 450px;
	overflow: hidden;
	border-radius: 0;
	z-index: 1;
}

.home-about-small-image {
	position: absolute;
	right: 0;
	bottom: 35px;
	width: 54%;
	height: 280px;
	overflow: hidden;
	border-radius: 0 0 28px 0;
	box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
	background: #ffffff;
	z-index: 2;
}

.home-about-badge {
	position: absolute;
	top: 40px;
	right: 20px;
	width: 120px;
	height: 120px;
	background: #d9ad45;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 0 0 28px 0;
	text-align: center;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
	z-index: 3;
}

.home-about-badge strong {
	font-size: 36px;
	line-height: 1;
	font-weight: 700;
}

.home-about-badge span {
	font-size: 15px;
	line-height: 1.25;
	margin-top: 6px;
}

.home-about-content .section-label {
	display: inline-block;
	color: #d9ad45;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.home-about-content h2 {
	font-size: 44px;
	line-height: 1.18;
	font-weight: 700;
	color: #111111;
	margin-bottom: 24px;
}

.home-about-content p {
	font-size: 17px;
	line-height: 1.8;
	color: #666666;
	margin-bottom: 18px;
}

.home-about-content .btn {
	margin-top: 22px;
}

@media (max-width: 991px) {
	.home-about-wrapper {
		grid-template-columns: 1fr;
		gap: 45px;
	}

	.home-about-images {
		max-width: 600px;
		min-height: 500px;
	}

	.home-about-main-image {
		height: 430px;
	}

	.home-about-small-image {
		bottom: 30px;
		height: 260px;
	}

	.home-about-content h2 {
		font-size: 34px;
	}
}

@media (max-width: 575px) {
	.home-about-section {
		padding: 60px 0;
	}

	.home-about-images {
		max-width: 100%;
		min-height: 380px;
	}

	.home-about-main-image {
		width: 84%;
		height: 340px;
	}

	.home-about-small-image {
		width: 62%;
		height: 190px;
		bottom: -25px;
	}

	.home-about-badge {
		top: 15px;
		right: 10px;
		width: 86px;
		height: 86px;
	}

	.home-about-badge strong {
		font-size: 26px;
	}

	.home-about-badge span {
		font-size: 12px;
	}

	.home-about-content h2 {
		font-size: 30px;
	}

	.home-about-content p {
		font-size: 16px;
	}
}

/* Homepage FAQ section */
.home-faq-section {
	padding: 90px 0;
	background: #f8f8f8;
}

.home-faq-section .section-title {
	max-width: 760px;
	margin: 0 auto 45px;
}

.home-faq-section .section-label {
	display: inline-block;
	color: #d9ad45;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.home-faq-section h2 {
	font-size: 42px;
	line-height: 1.2;
	color: #111111;
	margin: 0;
}

.faq-list {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	gap: 18px;
}

.faq-item {
	background: #ffffff;
	padding: 26px 30px;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.faq-item h3 {
	font-size: 20px;
	line-height: 1.35;
	margin: 0 0 12px;
	color: #111111;
}

.faq-item p {
	font-size: 16px;
	line-height: 1.75;
	color: #666666;
	margin: 12px 0 0;
}

/* Accordion behavior (native <details>/<summary>, no JS required) */
.faq-item {
	padding: 0;
	overflow: hidden;
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 30px;
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item h3 {
	margin: 0;
}

.faq-item .faq-icon {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
}

.faq-item .faq-icon::before,
.faq-item .faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #d9ad45;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.faq-item .faq-icon::before {
	width: 14px;
	height: 2px;
}

.faq-item .faq-icon::after {
	width: 2px;
	height: 14px;
}

.faq-item[open] .faq-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.faq-item p {
	padding: 0 30px 26px;
}

/* Links inside FAQ answers: slightly bold, gold on hover (matches the Reserve button) */
.faq-item p a {
	font-weight: 600;
	color: #111111;
	text-decoration: none;
	transition: color 0.2s ease;
}

.faq-item p a:hover,
.faq-item p a:focus-visible {
	color: #d9ad45;
}

@media (max-width: 767px) {
	.home-faq-section {
		padding: 60px 0;
	}

	.home-faq-section h2 {
		font-size: 32px;
	}

	.faq-item summary {
		padding: 22px 20px;
	}

	.faq-item p {
		padding: 0 20px 22px;
	}

	.faq-item h3 {
		font-size: 18px;
	}
}

/* Service area list (About page) - 4 per row, wraps to a final short row */
.list-service-areas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
	row-gap: 0;
}

.list-service-areas li {
	padding-right: 10px;
}

@media (max-width: 991px) {
	.list-service-areas {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.list-service-areas {
		grid-template-columns: 1fr;
	}
}

/* "Reserve Your Ride" on a black CTA section needs its own visible fill,
   since .btn-primary's default black background is invisible on bg-primary. */
.cta-reserve-btn {
	background-color: #d9ad45 !important;
	border-color: #d9ad45 !important;
	color: #fff !important;
}

.cta-reserve-btn:hover {
	background-color: #b68c26 !important;
	border-color: #b68c26 !important;
}

/* Homepage hero: real <img> LCP element filling the banner as a background would. */
.banner-home8 .box-cover-image picture {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 0;
}

.banner-home8 .box-cover-image .hero-bg-img {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	z-index: 0;
}

/* Reduce main-thread work on mobile: WOW.js's scroll-triggered reveal
   animations cause repeated layout reads (forced reflow) and are the
   cheapest thing to cut on small screens without changing the final
   visual design (elements simply render in their end-state immediately). */
@media (max-width: 767px) {
	.wow {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}
}

/* "How It Works" booking-flow screenshot: the theme's .box-main-slider is
   normally position:absolute, pinned to the far right edge of the section
   and scaled to 52% of the column width - sized for a tall phone-app
   screenshot bleeding off the edge. This image is a wide 4:3 dashboard
   screenshot, so that positioning made it float disconnected from the text
   and, at some widths, tall enough to overflow the section. Put it back in
   normal flow inside its own column instead, centered, so it sits where a
   reader expects it and can never overlap anything else. */
.bg-how-it-works .box-main-slider {
	position: static;
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
}

.bg-how-it-works .detail-gallery {
	min-height: 0;
}

/* The step list ("Request Information" / "Choose Vehicle" / "Confirm") was
   only ever styled once Slick wrapped it in .slick-list > .slick-track at
   runtime. Slick no longer runs on this page (the gallery it used to sync
   with is now a single static image), so the circles, connecting lines, and
   even the heading/paragraph text color were silently never applying.
   Re-create the same look without depending on Slick's markup. */
.list-how.slider-nav-thumbnails li {
	padding-bottom: 60px;
	padding-left: 50px;
	position: relative;
}

.list-how.slider-nav-thumbnails li:last-child {
	padding-bottom: 0;
}

.list-how.slider-nav-thumbnails li::before {
	content: "";
	height: 20px;
	width: 20px;
	border: 1px solid #fff;
	border-radius: 50%;
	opacity: 1;
	position: absolute;
	top: 6px;
	left: 0px;
}

.list-how.slider-nav-thumbnails li::after {
	content: "";
	width: 3px;
	opacity: 0.4;
	position: absolute;
	top: 36px;
	bottom: 4px;
	background-color: #ffffff;
	left: 8px;
	border-radius: 60px;
}

.list-how.slider-nav-thumbnails li:last-child::after {
	display: none;
}

.list-how.slider-nav-thumbnails li h4,
.list-how.slider-nav-thumbnails li p {
	color: #fff;
	opacity: 1;
}

/* Homepage: Airports We Serve (static cards, no JS) */
.home-airports-section {
	padding: 90px 0;
	background: #ffffff;
}

.home-airports-section .section-title {
	max-width: 820px;
	margin: 0 auto 45px;
}

.home-airports-section .section-label {
	display: inline-block;
	color: #d9ad45;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.home-airports-section h2 {
	font-size: 42px;
	line-height: 1.2;
	color: #111111;
	margin: 0 0 18px;
}

.home-airports-section .section-title p {
	font-size: 17px;
	line-height: 1.8;
	color: #666666;
	margin: 0;
}

.airport-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.airport-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.airport-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.airport-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
}

.airport-card h3 {
	font-size: 20px;
	line-height: 1.3;
	color: #111111;
	margin: 0 0 12px;
}

.airport-card p {
	font-size: 15px;
	line-height: 1.7;
	color: #666666;
	margin: 0 0 22px;
}

.airport-card .btn {
	margin-top: auto;
}

/* Outline button: black on white; hover (gold fill) comes from .reserve-book-btn:hover in style.css */
.airport-card .airport-card-btn {
	background-color: #ffffff;
	border: 1px solid #111111;
	color: #111111;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 1199px) {
	.airport-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.home-airports-section {
		padding: 60px 0;
	}

	.home-airports-section h2 {
		font-size: 32px;
	}

	.airport-grid {
		grid-template-columns: 1fr;
	}
}