/* Travel Business Core - front-end styles for the tbc shortcodes.
   Loaded in the <head> of every front-end page (the file is small).
   To restyle the whole site, change the variables in the :root block below. */

:root {
	--tbc-primary: var(--e-global-color-primary, #0E5A66);
	--tbc-secondary: var(--e-global-color-secondary, #F28C28);
	--tbc-dark: var(--e-global-color-text, #1B1B1B);
	--tbc-light: var(--e-global-color-accent, #F7F4EE);
	--tbc-white: var(--e-global-color-ttwhite, #FFFFFF);
	--tbc-radius: 12px;
	--tbc-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	--tbc-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.14);
	--tbc-gap: 24px;
}

/* ---------- Shared ---------- */

.tbc-grid {
	--tbc-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--tbc-cols), minmax(0, 1fr));
	gap: var(--tbc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: inherit;
	color: var(--tbc-dark);
}

@media (min-width: 768px) {
	.tbc-grid {
		--tbc-cols: 2;
	}
}

@media (min-width: 1025px) {
	.tbc-grid {
		--tbc-cols: 3;
	}
}

/* Vehicles and packages: when the last row is not full (or there are fewer
   cards than columns) the cards are centered. A full row looks exactly the
   same as before. --tbc-cols is the number of columns at each screen size. */
.tbc-grid--vehicles,
.tbc-grid--packages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tbc-grid--vehicles > .tbc-card,
.tbc-grid--packages > .tbc-card {
	flex: 0 0 calc((100% - (var(--tbc-cols) - 1) * var(--tbc-gap)) / var(--tbc-cols));
	min-width: 0;
	max-width: 100%;
}

.tbc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--tbc-white);
	border-radius: var(--tbc-radius);
	box-shadow: var(--tbc-shadow);
	overflow: hidden;
	color: var(--tbc-dark);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tbc-card:hover {
		transform: translateY(-6px);
		box-shadow: var(--tbc-shadow-hover);
	}
}

.tbc-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--tbc-light);
	overflow: hidden;
}

.tbc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tbc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
}

.tbc-card__title {
	margin: 0;
	color: var(--tbc-primary);
	font-size: 1.25rem;
	line-height: 1.3;
}

.tbc-card__meta {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.85;
}

.tbc-card__rate {
	margin: 0;
	color: var(--tbc-primary);
	font-size: 1.1rem;
	font-weight: 700;
}

.tbc-card__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

.tbc-card__actions {
	margin-top: auto;
	padding-top: 8px;
}

.tbc-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--tbc-primary);
	color: var(--tbc-white);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.tbc-card__media .tbc-badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

.tbc-badge--ribbon {
	background: var(--tbc-secondary);
	color: var(--tbc-dark);
	top: 12px;
	left: auto;
	right: 12px;
}

.tbc-card__media .tbc-badge--ribbon {
	left: auto;
	right: 12px;
}

.tbc-ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
}

.tbc-ticks li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 26px;
	line-height: 1.5;
}

.tbc-ticks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--tbc-primary);
	font-weight: 700;
}

/* Buttons */

.tbc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--tbc-secondary);
	border-radius: 999px;
	background: var(--tbc-secondary);
	color: var(--tbc-dark);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tbc-btn:hover {
	background: var(--tbc-primary);
	border-color: var(--tbc-primary);
	color: var(--tbc-white);
	text-decoration: none;
}

.tbc-btn--block {
	width: 100%;
}

.tbc-btn:focus-visible,
.tbc-details__summary:focus-visible,
.tbc-slider__btn:focus-visible,
.tbc-slider__track:focus-visible,
.tbc-contact-buttons__btn:focus-visible {
	outline: 3px solid var(--tbc-primary);
	outline-offset: 3px;
}

/* Home page fleet section (class tbc-fleet on the Elementor container):
   4 cards in a row on wide screens, 2 on tablet and small laptops, 1 on mobile.
   Scoped to .tbc-fleet so other [tbc_vehicles] uses keep the default grid. */

@media (min-width: 1025px) {
	.tbc-fleet .tbc-grid--vehicles {
		--tbc-cols: 2;
	}
}

@media (min-width: 1200px) {
	.tbc-fleet .tbc-grid--vehicles {
		--tbc-cols: 4;
	}
}

/* Softer text: add the CSS class tbc-muted to any Elementor widget. */

.tbc-muted {
	opacity: 0.78;
}

/* Notice shown to logged-in admins only */

.tbc-notice {
	margin: 0;
	padding: 14px 18px;
	border: 1px dashed var(--tbc-primary);
	border-radius: var(--tbc-radius);
	background: var(--tbc-light);
	color: var(--tbc-dark);
	font-size: 0.95rem;
}

/* ---------- Packages ---------- */

.tbc-price {
	margin: 0;
	color: var(--tbc-dark);
	font-size: 0.95rem;
}

.tbc-price__amount {
	color: var(--tbc-primary);
	font-size: 1.35rem;
	font-weight: 700;
}

.tbc-price__note {
	display: block;
	font-size: 0.85rem;
	opacity: 0.8;
}

.tbc-details {
	border-top: 1px solid var(--tbc-light);
	padding-top: 4px;
}

.tbc-details__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	color: var(--tbc-primary);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.tbc-details__summary::-webkit-details-marker {
	display: none;
}

.tbc-details__summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
}

.tbc-details[open] > .tbc-details__summary::after {
	content: "\2212";
}

.tbc-details__body {
	padding: 8px 0 12px;
}

.tbc-details__heading {
	margin: 12px 0 8px;
	color: var(--tbc-dark);
	font-size: 1rem;
}

.tbc-itinerary {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
}

.tbc-itinerary li {
	margin: 0 0 8px;
	line-height: 1.5;
}

.tbc-itinerary__day {
	display: block;
	color: var(--tbc-primary);
	font-weight: 700;
}

/* ---------- Reviews ---------- */

.tbc-review__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tbc-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tbc-primary);
	color: var(--tbc-white);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
}

.tbc-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tbc-review__name {
	margin: 0;
	color: var(--tbc-dark);
	font-size: 1.05rem;
	line-height: 1.3;
}

.tbc-review__city {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

.tbc-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--tbc-secondary);
	font-size: 1.2rem;
	line-height: 1;
}

.tbc-stars__off {
	color: var(--tbc-light);
	text-shadow: 0 0 1px var(--tbc-dark);
}

.tbc-review__text {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.65;
}

.tbc-review__trip {
	margin: 0;
	color: var(--tbc-primary);
	font-size: 0.9rem;
	font-weight: 700;
}

/* Slider (CSS scroll-snap, tiny JS only for the buttons) */

.tbc-slider {
	position: relative;
}

.tbc-slider__track {
	display: flex;
	gap: var(--tbc-gap);
	margin: 0;
	padding: 6px 4px 18px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 4px;
	-webkit-overflow-scrolling: touch;
}

.tbc-slider__track > .tbc-card {
	flex: 0 0 88%;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.tbc-slider__track > .tbc-card {
		flex-basis: calc(50% - (var(--tbc-gap) / 2));
	}
}

@media (min-width: 1025px) {
	.tbc-slider__track > .tbc-card {
		flex-basis: calc(33.333% - (var(--tbc-gap) * 2 / 3));
	}
}

.tbc-slider__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.tbc-slider__nav[hidden] {
	display: none;
}

.tbc-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--tbc-primary);
	border-radius: 50%;
	background: var(--tbc-white);
	color: var(--tbc-primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tbc-slider__btn:hover:not(:disabled) {
	background: var(--tbc-primary);
	color: var(--tbc-white);
}

.tbc-slider__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
	.tbc-slider__track {
		scroll-behavior: smooth;
	}
}

/* ---------- Contact buttons [tbc_contact_buttons] ---------- */

.tbc-contact-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.tbc-contact-buttons__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--tbc-primary);
	border-radius: 999px;
	background-color: var(--tbc-primary);
	color: var(--tbc-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tbc-contact-buttons__btn:hover {
	background-color: var(--tbc-secondary);
	border-color: var(--tbc-secondary);
	color: var(--tbc-dark);
	text-decoration: none;
}

.tbc-contact-buttons__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: currentColor;
}

/* Hero variant: compact outline buttons for dark backgrounds. */
.tbc-contact-buttons--hero .tbc-contact-buttons__btn {
	padding: 0 18px;
	background-color: transparent;
	border-color: var(--tbc-white);
	color: var(--tbc-white);
}

.tbc-contact-buttons--hero .tbc-contact-buttons__btn:hover,
.tbc-contact-buttons--hero .tbc-contact-buttons__btn:focus-visible {
	background-color: var(--tbc-white);
	border-color: var(--tbc-white);
	color: var(--tbc-primary);
}

.tbc-contact-buttons--hero .tbc-contact-buttons__btn--email {
	width: 48px;
	padding: 0;
}

.tbc-contact-buttons--hero .tbc-contact-buttons__btn--email .tbc-contact-buttons__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* =====================================================================
   HOME PAGE: HOW IT WORKS (class tbc-steps on the Elementor container)
   Dotted connector line that runs only from the centre of circle 1 to the
   centre of circle 3. The three steps are made equal width, so the line can
   be calculated exactly from the row width and the gap set in Elementor.
   Shown on tablet and desktop, hidden on mobile.
   Delete this whole block to remove the line.
   ===================================================================== */

.tbc-steps .tbc-steps-row {
	position: relative;
}

.tbc-steps .tbc-step-num {
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.tbc-steps .tbc-steps-row > .tbc-step {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Elementor already uses ::before on every container for its overlay, so
	   every overlay property is reset here. */
	.tbc-steps .tbc-steps-row::before {
		content: "";
		position: absolute;
		top: 30.5px; /* circle is 64px high, so the 3px line sits on its middle */
		left: calc((100% - 2 * var(--column-gap, 24px)) / 6);
		right: auto;
		bottom: auto;
		width: calc((200% + 2 * var(--column-gap, 24px)) / 3);
		height: 0;
		border: 0;
		border-top: 3px dotted var(--tbc-primary);
		border-radius: 0;
		background: none;
		opacity: 0.35;
		mix-blend-mode: normal;
		pointer-events: none;
		transition: none;
	}
}

/* =====================================================================
   HOME PAGE: WHY CHOOSE US image (class tbc-why-img on the Image widget)
   Fills its column, 4:5 on desktop, 3:2 on tablet and mobile, cropped to fit.
   ===================================================================== */

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

@media (min-width: 1025px) {
	.tbc-why-img img {
		aspect-ratio: 4 / 5;
	}
}

/* ==========================================================================
   HOME PAGE: FAQ (class tbc-faq on the Elementor container)
   White rounded cards with a soft shadow around each accordion item.
   Radius, shadow and white come from the :root variables at the top.
   ========================================================================== */

.tbc-faq .e-n-accordion-item {
	background: var(--tbc-white);
	border-radius: var(--tbc-radius);
	box-shadow: var(--tbc-shadow);
	overflow: hidden;
}

.tbc-faq .e-n-accordion-item-title {
	background: transparent;
}

.tbc-faq .e-n-accordion-item-title:focus-visible {
	outline: 3px solid var(--tbc-primary);
	outline-offset: -3px;
}

.tbc-faq .tbc-faq-answer p:last-child {
	margin-bottom: 0;
}

/* Centre the contact buttons in the FAQ and final call to action sections. */
.tbc-faq .tbc-contact-buttons,
.tbc-cta .tbc-contact-buttons {
	justify-content: center;
}

/* ---------- Package cards: [tbc_packages columns="1-4"] ---------- */
/* Desktop uses the columns number, tablet is 2 (or 1), mobile is 1. */

@media (min-width: 768px) and (max-width: 1024px) {
	.tbc-grid--cols-1 {
		--tbc-cols: 1;
	}
}

@media (min-width: 1025px) {
	.tbc-grid--cols-1 {
		--tbc-cols: 1;
	}

	.tbc-grid--cols-2 {
		--tbc-cols: 2;
	}

	.tbc-grid--cols-3 {
		--tbc-cols: 3;
	}

	.tbc-grid--cols-4 {
		--tbc-cols: 4;
	}
}

/* ---------- Package card without a photo: gradient header ---------- */
/* Same height as the photo area (it is the same .tbc-card__media box). */

.tbc-card__media--placeholder {
	background: linear-gradient(135deg, var(--tbc-primary), var(--tbc-dark));
	color: var(--tbc-white);
}

.tbc-card__ph {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
}

.tbc-card__ph-icon {
	display: block;
	width: 64px;
	height: 64px;
	fill: currentColor;
	opacity: 0.85;
}

.tbc-card__ph-text {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

/* =====================================================================
   TOUR PACKAGES PAGE (classes on the Elementor containers)
   tbc-banner, tbc-package-list, tbc-pkg-info, tbc-custom use the same
   alignment rule as the rest of the site: the outer container carries the
   full-width background and the side gutter, the inner container is exactly
   the content width. tbc-cta is already covered in site-chrome.css.
   ===================================================================== */

body .elementor .e-con.tbc-banner,
body .elementor .e-con.tbc-package-list,
body .elementor .e-con.tbc-pkg-info,
body .elementor .e-con.tbc-custom {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: var(--tbc-gutter, 24px);
	padding-right: var(--tbc-gutter, 24px);
}

body .elementor .e-con.tbc-banner-inner,
body .elementor .e-con.tbc-package-list-inner,
body .elementor .e-con.tbc-pkg-info-inner,
body .elementor .e-con.tbc-custom-inner {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: 0;
	padding-right: 0;
}

/* What packages include: 4 boxes on desktop, 2 on tablet, 1 on mobile. */
body .elementor .e-con.tbc-pkg-info-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tbc-gap, 24px);
	width: 100%;
}

@media (max-width: 1024px) {
	body .elementor .e-con.tbc-pkg-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body .elementor .e-con.tbc-pkg-info-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

body .elementor .e-con.tbc-pkg-info-item {
	border-radius: var(--tbc-radius, 12px);
}

/* Custom trip band: buttons stay on one side on desktop, stacked on mobile. */
.tbc-custom .tbc-contact-buttons {
	justify-content: flex-start;
}
/* =====================================================================
   ABOUT US PAGE (classes on the Elementor containers)
   Same alignment rule as the rest of the site: the outer container carries
   the full-width background and the side gutter, the inner container is
   exactly the content width. tbc-banner and tbc-cta are covered elsewhere.
   Delete this whole block to go back to the Elementor values.
   ===================================================================== */
body .elementor .e-con.tbc-story,
body .elementor .e-con.tbc-services,
body .elementor .e-con.tbc-promise,
body .elementor .e-con.tbc-owner,
body .elementor .e-con.tbc-visit {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: var(--tbc-gutter, 24px);
	padding-right: var(--tbc-gutter, 24px);
}

body .elementor .e-con.tbc-story-inner,
body .elementor .e-con.tbc-services-inner,
body .elementor .e-con.tbc-promise-inner,
body .elementor .e-con.tbc-owner-inner,
body .elementor .e-con.tbc-visit-inner {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: 0;
	padding-right: 0;
}

/* Icon box grids: services 3 / 2 / 1 columns, promise 4 / 2 / 1 columns. */
body .elementor .e-con.tbc-about-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

body .elementor .e-con.tbc-about-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	body .elementor .e-con.tbc-about-grid,
	body .elementor .e-con.tbc-about-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body .elementor .e-con.tbc-about-grid,
	body .elementor .e-con.tbc-about-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tbc-about-card {
	min-width: 0;
}

/* Story text: Astra adds 1.75em under every paragraph, on top of the container
   gap. Remove it so paragraphs sit exactly one gap (16px) apart. */
body .elementor .tbc-story-p p {
	margin: 0;
}

body .elementor .e-con.tbc-story-text,
body .elementor .e-con.tbc-story-media {
	min-width: 0;
}

/* Story photo: same pattern as the Home hero. Fills its 45% column, about
   square (1:1) on desktop, 4:3 when the columns stack (tablet and mobile). */
body .elementor .tbc-story-img {
	width: 100%;
}

.tbc-story-img img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.tbc-story-img img {
		aspect-ratio: 4 / 3;
	}
}

/* Owner card: max width, hairline, round initial or round photo. */
body .elementor .e-con.tbc-owner-card {
	width: 100%;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid color-mix(in srgb, var(--tbc-dark) 8%, transparent);
}

body .elementor .e-con .elementor-widget.tbc-owner-initial,
body .elementor .e-con .elementor-widget.tbc-owner-photo {
	flex: 0 0 auto;
	width: 96px;
	max-width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
}

body .elementor .e-con .elementor-widget.tbc-owner-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tbc-primary);
}

.tbc-owner-initial .elementor-heading-title {
	margin: 0;
	color: var(--tbc-white);
	text-align: center;
}

.tbc-owner-photo img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
}

.tbc-visit .tbc-contact-buttons {
	justify-content: center;
}

@media (max-width: 767px) {
	.tbc-owner .tbc-contact-buttons {
		justify-content: center;
	}
}

/* ABOUT US PAGE (end) */
/* =====================================================================
   CONTACT US PAGE (classes on the Elementor containers)
   Same alignment rule as the rest of the site: the outer container carries
   the full-width background and the side gutter, the inner container is
   exactly the content width. tbc-banner and tbc-cta are covered elsewhere.
   Delete this whole block to go back to the Elementor values.
   ===================================================================== */
body .elementor .e-con.tbc-contact-main,
body .elementor .e-con.tbc-contact-map {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: var(--tbc-gutter, 24px);
	padding-right: var(--tbc-gutter, 24px);
}

body .elementor .e-con.tbc-contact-main-inner,
body .elementor .e-con.tbc-contact-map-inner {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: 0;
	padding-right: 0;
}

/* Form (left, 58%) and contact details (right, 42%). Both columns stretch to the same height. */
body .elementor .e-con.tbc-contact-split {
	align-items: stretch;
}

body .elementor .e-con.tbc-contact-form-col {
	flex: 58 1 0;
	min-width: 0;
}

body .elementor .e-con.tbc-contact-details-col {
	flex: 42 1 0;
	min-width: 0;
}

body .elementor .e-con.tbc-contact-form-card {
	flex: 1 1 auto;
	box-shadow: var(--tbc-shadow);
}

@media (max-width: 1024px) {
	body .elementor .e-con.tbc-contact-split {
		flex-direction: column;
	}

	body .elementor .e-con.tbc-contact-form-col,
	body .elementor .e-con.tbc-contact-details-col {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
}

/* Four stacked detail rows, equally spaced. */
body .elementor .e-con.tbc-contact-rows {
	flex: 1 1 auto;
}

body .elementor .e-con.tbc-contact-row {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--tbc-radius, 12px);
	box-shadow: var(--tbc-shadow);
}

body .elementor .tbc-contact-row-body {
	min-width: 0;
}

body .elementor .tbc-contact-row .elementor-heading-title {
	margin: 0;
}

body .elementor .tbc-contact-row .elementor-widget-container p {
	margin: 0;
}

body .elementor .tbc-contact-row-value,
body .elementor .tbc-contact-row-value p {
	color: var(--tbc-dark);
	font-size: 16px;
	line-height: 1.5;
}

/* Links in the rows (phone, e-mail). The WhatsApp button is excluded on purpose. */
body .elementor .tbc-contact-row a:not(.tbc-contact-buttons__btn) {
	color: var(--tbc-primary);
	font-weight: 600;
	text-decoration: none;
}

body .elementor .tbc-contact-row a:not(.tbc-contact-buttons__btn):hover {
	color: var(--tbc-secondary);
}

/* E-mail stays on one line; the size shrinks a little on very small screens instead of breaking the word. */
body .elementor .tbc-contact-email,
body .elementor .tbc-contact-email a {
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
	font-size: clamp(13px, 3.9vw, 16px);
}

@media (min-width: 768px) {
	body .elementor .tbc-contact-email,
	body .elementor .tbc-contact-email a {
		font-size: 16px;
	}
}

/* WhatsApp button inside a row: white text on Primary, 44px high. */
body .elementor .tbc-contact-row .tbc-contact-buttons {
	justify-content: flex-start;
	margin-top: 8px;
}

body .elementor .tbc-contact-row .tbc-contact-buttons__btn {
	min-height: 44px;
	background-color: var(--tbc-primary);
	border-color: var(--tbc-primary);
	color: var(--tbc-white);
}

body .elementor .tbc-contact-row .tbc-contact-buttons__btn:hover,
body .elementor .tbc-contact-row .tbc-contact-buttons__btn:focus-visible {
	background-color: var(--tbc-secondary);
	border-color: var(--tbc-secondary);
	color: var(--tbc-dark);
}

@media (max-width: 767px) {
	body .elementor .e-con.tbc-contact-row {
		padding: 16px;
	}
}

/* Map section: the embed fills the inner container, rounded. */
body .elementor .tbc-contact-map-embed {
	border-radius: 16px;
	overflow: hidden;
}

.tbc-contact-map-embed iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 16px;
}

/* Get Directions button [tbc_directions_button] */
.tbc-directions-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--tbc-primary);
	border-radius: 999px;
	background-color: var(--tbc-primary);
	color: var(--tbc-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tbc-directions-btn:hover,
.tbc-directions-btn:focus-visible {
	background-color: var(--tbc-secondary);
	border-color: var(--tbc-secondary);
	color: var(--tbc-dark);
	text-decoration: none;
}

.tbc-directions-btn:focus-visible {
	outline: 3px solid var(--tbc-primary);
	outline-offset: 3px;
}

.tbc-directions-btn__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: currentColor;
}

.tbc-contact-directions {
	display: flex;
	justify-content: center;
}

/* Safety net: Astra and Elementor must not recolour the button text. */
body .elementor a.tbc-directions-btn {
	color: var(--tbc-white);
}

body .elementor a.tbc-directions-btn:hover,
body .elementor a.tbc-directions-btn:focus-visible {
	color: var(--tbc-dark);
}

/* CONTACT US PAGE (end) */

/* =====================================================================
   GALLERY PAGE (start)
   Classes on the Elementor containers: tbc-banner and tbc-cta are covered
   elsewhere. tbc-gallery-vehicles and tbc-gallery-trips follow the same
   alignment rule as the rest of the site: the outer container carries the
   full-width background and the side gutter, the inner container is exactly
   the content width.
   Class tbc-gallery goes on every Elementor Basic Gallery widget: all photos
   get the same 4:3 box, cover crop, rounded corners, soft shadow and a
   gentle zoom on hover. Columns and gap stay editable in the widget panel.
   Delete this whole block to go back to the Elementor values.
   ===================================================================== */
body .elementor .e-con.tbc-gallery-vehicles,
body .elementor .e-con.tbc-gallery-trips {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: var(--tbc-gutter, 24px);
	padding-right: var(--tbc-gutter, 24px);
}

body .elementor .e-con.tbc-gallery-vehicles-inner,
body .elementor .e-con.tbc-gallery-trips-inner {
	--content-width: var(--tbc-content-width, 1200px);
	padding-left: 0;
	padding-right: 0;
}

body .elementor .tbc-gallery {
	width: 100%;
	min-width: 0;
}

/* Rows are a flex wrap, so gaps and equal tile heights do not depend on spaces in the markup.
   Desktop columns come from the widget panel (Columns). Elementor only switches columns at
   480px and 768px, so tablet and mobile are set here: 4 or more columns become 2 on tablet,
   and every gallery is 2 columns on mobile. */
body .elementor .tbc-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
}

body .elementor .tbc-gallery .gallery-item {
	min-width: 0;
	flex: 0 0 auto;
}

@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor .tbc-gallery .gallery[class*="gallery-columns-"]:is(.gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-columns-7, .gallery-columns-8, .gallery-columns-9, .gallery-columns-10) .gallery-item {
		max-width: 50%;
	}
}

@media (max-width: 767px) {
	body .elementor .tbc-gallery .gallery[class*="gallery-columns-"] .gallery-item {
		max-width: 50%;
	}
}

body .elementor .tbc-gallery .gallery-icon {
	margin: 0;
	line-height: 0;
	overflow: hidden;
	border-radius: var(--tbc-radius, 12px);
	box-shadow: var(--tbc-shadow, 0 4px 18px rgba(0, 0, 0, 0.08));
}

body .elementor .tbc-gallery .gallery-icon a {
	display: block;
}

body .elementor .tbc-gallery .gallery-icon img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	transition: transform 0.35s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body .elementor .tbc-gallery .gallery-icon:hover img {
		transform: scale(1.05);
	}
}

/* GALLERY PAGE (end) */

/* =====================================================================
   RESPONSIVE FIXES  (start)
   Tablet and mobile fixes from the responsive audit: header layout, open
   menu panel, Home hero badge, button rows, tap targets, long text, and an
   overflow safety net at the very end.
   Everything below sits in @media (max-width) blocks, so the desktop layout
   (above 1024px) is untouched. Colours come from the :root variables at the
   top of this file. Selectors start with "html body" so they win over
   site-chrome.css, which loads after this file.
   Delete this whole block to go back to the previous behaviour.
   ===================================================================== */

/* ---------- R1. Header, tablet and mobile (up to 1024px) ---------- */
/* One row: logo on the left, then Book Now, then the menu toggle at the far right. */

@media (max-width: 1024px) {
	html body .elementor .e-con.tbc-main-header {
		position: relative; /* the open menu panel is positioned against this full-width bar */
	}

	html body .elementor .e-con.tbc-main-header > .e-con-inner {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	/* The logo's auto right margin pushes Book Now and the toggle to the right gutter. */
	html body .elementor .e-con.tbc-main-header > .e-con-inner > .tbc-brand {
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
		margin: 0 auto 0 0;
	}

	html body .elementor .e-con.tbc-main-header > .e-con-inner > .tbc-book-btn {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		margin: 0;
	}

	/* The menu widget is only the 44px toggle here; the panel is positioned against the header. */
	html body .elementor .e-con.tbc-main-header > .e-con-inner > .tbc-header-nav {
		order: 3;
		position: static;
		flex: 0 0 44px;
		width: 44px;
		min-width: 44px;
		max-width: 44px;
		margin: 0;
	}

	html body .elementor .tbc-main-header .hfe-site-logo .hfe-site-logo-container img.hfe-site-logo-img {
		height: 48px;
		width: auto;
		max-width: 100%;
	}

	/* Book Now: compact, one line, still a 44px tap target. */
	html body .elementor .tbc-main-header .tbc-book-btn .elementor-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 16px;
		font-size: 14px;
		line-height: 1.2;
		white-space: nowrap;
	}

	/* Menu toggle: 44 x 44, icon on the right edge so it lines up with the page gutter. */
	html body .elementor .tbc-main-header .tbc-header-nav .hfe-nav-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 44px;
		height: 44px;
		min-width: 44px;
		margin: 0;
		padding: 0;
	}

	html body .elementor .tbc-main-header .tbc-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		line-height: 1;
	}

	html body .elementor .tbc-main-header .tbc-header-nav .hfe-nav-menu__toggle .hfe-nav-menu-icon svg {
		width: 26px;
		height: 26px;
	}

	html body .elementor .tbc-main-header .tbc-header-nav .hfe-nav-menu__toggle:focus-visible {
		outline: 3px solid var(--tbc-primary);
		outline-offset: 2px;
	}
}

@media (max-width: 767px) {
	html body .elementor .tbc-main-header .hfe-site-logo .hfe-site-logo-container img.hfe-site-logo-img {
		height: 44px;
	}
}

/* ---------- R2. Open menu: full-width vertical panel under the header ---------- */
/* The panel is absolutely positioned inside the header, so it never shifts the page,
   follows the sticky header and sits correctly under the WordPress admin bar.
   Header Footer Elementor writes inline left / width / z-index on the panel, hence !important. */

@media (max-width: 1024px) {
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav .elementor-widget-container,
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav .hfe-nav-menu-layout {
		position: static;
	}

	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal {
		position: absolute;
		top: 100%;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none;
		max-height: 80vh;
		max-height: 80dvh;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--tbc-white);
		box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
		z-index: 1000 !important;
	}

	/* Items stacked in one column. */
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item {
		width: 100%;
		margin: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--tbc-dark) 12%, transparent);
	}

	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item:last-child {
		border-bottom: 0;
	}

	/* Each item is a full-width row, at least 48px high, text on the left. */
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 48px;
		margin: 0;
		padding: 12px var(--tbc-gutter, 16px);
		box-sizing: border-box;
		text-align: left;
		font-size: 16px;
		line-height: 1.3;
		white-space: normal;
	}

	/* Hover, keyboard focus and the current page use the Secondary colour. */
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item:hover,
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item:focus-visible,
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item {
		color: var(--tbc-secondary);
	}

	html body .elementor .e-con.tbc-main-header .elementor-widget-navigation-menu.tbc-header-nav nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item:focus-visible {
		outline: 3px solid var(--tbc-primary);
		outline-offset: -3px;
	}
}

/* ---------- Hero responsive (Home hero, class tbc-hero) ---------- */
/* Tablet and mobile only (up to 1024px); desktop above 1024px is untouched.
   Causes fixed here: Elementor gives the badge left/bottom 16px and no width, the image
   container did not clip anything, and the image had no fixed ratio, so on 300-360px phones
   the badge ran past the right edge of the picture. Text stays first, image second. */

@media (max-width: 1024px) {
	/* Space between the text block and the image: 32px */
	html body .elementor .e-con.tbc-hero-inner > .e-con-inner {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
		row-gap: 32px;
	}

	html body .elementor .e-con.tbc-hero-inner .e-con.tbc-hero-text {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	/* 1. Wrapper of image + badge: sits exactly on the page gutters, clips the badge, rounded. */
	html body .elementor .e-con.tbc-hero-inner .e-con.tbc-hero-media {
		position: relative;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 20px;
		/* the shadow moves from the image to this wrapper, so overflow:hidden does not cut it */
		box-shadow: 0 20px 50px color-mix(in srgb, var(--tbc-dark) 30%, transparent);
	}

	/* 2. Badge: inside the image, bottom left, never wider than the image */
	html body .elementor .e-con.tbc-hero-media > .e-con.tbc-hero-badge {
		position: absolute;
		top: auto;
		right: auto;
		bottom: 12px;
		left: 12px;
		width: auto;
		min-width: 0;
		max-width: calc(100% - 24px);
		margin: 0;
		padding: 8px 14px;
		box-sizing: border-box;
		border-radius: 12px;
		background-color: var(--tbc-white);
		box-shadow: 0 6px 18px color-mix(in srgb, var(--tbc-dark) 20%, transparent);
		transform: none;
	}

	html body .elementor .e-con.tbc-hero-media > .e-con.tbc-hero-badge .elementor-widget-heading {
		width: auto;
		max-width: 100%;
	}

	html body .elementor .e-con.tbc-hero-media > .e-con.tbc-hero-badge .elementor-widget-heading:first-child .elementor-heading-title {
		font-size: 12px;
		line-height: 1.2;
		color: var(--tbc-primary);
		overflow-wrap: anywhere;
	}

	html body .elementor .e-con.tbc-hero-media > .e-con.tbc-hero-badge .elementor-widget-heading:last-child .elementor-heading-title {
		font-size: 20px;
		line-height: 1.15;
		color: var(--tbc-primary);
		overflow-wrap: anywhere;
	}

	/* 3. Image widget: fills the wrapper, fixed ratio, cropped not stretched */
	html body .elementor .e-con.tbc-hero-media .elementor-widget-image.tbc-hero-img {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	html body .elementor .e-con.tbc-hero-media .tbc-hero-img img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (max-width: 767px) {
	html body .elementor .e-con.tbc-hero-media .tbc-hero-img img {
		aspect-ratio: 4 / 3;
	}

	/* 5. Heading and the three check items must never run past the gutters */
	html body .elementor .e-con.tbc-hero .tbc-hero-title .elementor-heading-title {
		overflow-wrap: break-word;
	}

	html body .elementor .e-con.tbc-hero .tbc-hero-points .elementor-icon-list-items.elementor-inline-items {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 18px;
		margin-inline: 0;
	}

	html body .elementor .e-con.tbc-hero .tbc-hero-points .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: 0;
		min-width: 0;
	}
}

/* ---------- R4. Fleet "What is included": two columns must stack on tablet too ---------- */

@media (max-width: 1024px) {
	html body .elementor .e-con.tbc-included-inner {
		--flex-direction: column;
	}

	html body .elementor .e-con.tbc-included-inner > .e-con-inner {
		flex-direction: column;
	}

	html body .elementor .e-con.tbc-included-text,
	html body .elementor .e-con.tbc-included-card {
		--width: 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* ---------- R5. Button rows: neat wrapping, equal heights, full width on phones ---------- */

@media (max-width: 767px) {
	html body .elementor .e-con:is(.tbc-hero-actions, .tbc-cta-actions, .tbc-steps-cta, .tbc-pricing-actions, .tbc-story-actions) {
		width: 100%;
		align-items: stretch;
		flex-wrap: wrap;
	}

	html body .elementor .e-con:is(.tbc-hero-actions, .tbc-cta-actions, .tbc-steps-cta, .tbc-pricing-actions, .tbc-story-actions) > .elementor-widget-button,
	html body .elementor .e-con:is(.tbc-hero-actions, .tbc-cta-actions, .tbc-steps-cta, .tbc-pricing-actions, .tbc-story-actions) > .elementor-widget-shortcode {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	html body .elementor .e-con:is(.tbc-hero-actions, .tbc-cta-actions, .tbc-steps-cta, .tbc-pricing-actions, .tbc-story-actions) .elementor-widget-button .elementor-button {
		width: 100%;
		min-height: 48px;
		justify-content: center;
		text-align: center;
	}

	html body .elementor .tbc-contact-buttons {
		width: 100%;
	}
}

/* On small phones every contact button is its own full-width row, same height. */
@media (max-width: 480px) {
	html body .elementor .tbc-contact-buttons .tbc-contact-buttons__btn {
		flex: 1 1 100%;
		width: 100%;
		min-height: 48px;
	}

	html body .elementor .tbc-contact-buttons--hero .tbc-contact-buttons__btn--email {
		padding: 0 18px;
	}

	/* The hero e-mail button is icon-only on wide screens; show its label when it gets a full row. */
	html body .elementor .tbc-contact-buttons--hero .tbc-contact-buttons__btn--email .tbc-contact-buttons__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

/* ---------- R6. Long text, accordion titles, forms, map and iframes ---------- */

body .elementor .elementor-heading-title,
body .elementor .elementor-widget-text-editor,
body .elementor .elementor-icon-list-text {
	overflow-wrap: break-word;
}

/* E-mail address may break anywhere instead of running out of its card. */
html body .elementor .tbc-contact-email,
html body .elementor .tbc-contact-email a {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: normal;
}

body .elementor .tbc-faq .e-n-accordion-item-title-header,
body .elementor .tbc-faq .e-n-accordion-item-title-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fluentform .ff-el-form-control,
.frm-fluent-form {
	max-width: 100%;
	box-sizing: border-box;
}

body .elementor iframe,
body .elementor .elementor-widget-google_maps iframe {
	max-width: 100%;
}

body .elementor .elementor-widget-google_maps iframe {
	width: 100%;
}

/* ---------- R7. Tap targets of at least 44px (tablet and mobile) ---------- */

@media (max-width: 1024px) {
	html body .tbc-topbar a.tbc-topbar__item {
		min-height: 44px;
	}

	html body .elementor .tbc-footer .elementor-icon-list-item > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	html body .elementor .tbc-footer .elementor-social-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	html body .elementor .tbc-faq .e-n-accordion-item-title {
		min-height: 48px;
	}

	/* Phone, e-mail and address links in the Contact page cards. */
	html body .elementor .tbc-contact-row a:not(.tbc-contact-buttons__btn) {
		display: inline-block;
		padding: 10px 0;
		margin: -10px 0;
	}
}

/* ---------- R8. Safety net: no sideways scroll ---------- */
/* Added AFTER the real causes above were fixed (wide hidden menu in the header, badge
   sticking out of the hero image, non-wrapping e-mail address). "clip" and not "hidden",
   so the sticky header keeps working. Astra sets body { overflow-x: hidden }, which
   is replaced by clip here. */

@supports (overflow: clip) {
	html,
	html body {
		overflow-x: clip;
	}
}

/* Trust strip responsive */
/* Home trust strip (.tbc-trust): mobile = 1 column with thin dividers; tablet 2x2 and desktop 4 in a row stay as set in Elementor. */

@media (max-width: 767px) {
	html body .elementor .tbc-trust.e-con {
		flex-direction: column;
		flex-wrap: nowrap;
		--flex-direction: column;
		--flex-wrap: nowrap;
		--gap: 0px;
		--row-gap: 0px;
		--column-gap: 0px;
		gap: 0;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .tbc-trust > .tbc-trust-item.e-con {
		--width: 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		padding-top: 20px;
		padding-bottom: 20px;
		border: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--tbc-dark) 12%, transparent);
	}

	html body .elementor .tbc-trust > .tbc-trust-item.e-con:last-child {
		border-bottom: 0;
	}

	/* No vertical dividers on mobile. */
	html body .elementor .tbc-trust > .tbc-trust-item.e-con::before,
	html body .elementor .tbc-trust > .tbc-trust-item.e-con::after {
		display: none;
		content: none;
	}
}

/* Trust strip responsive (end) */
/* ---------- Home responsive part 1 (start): fleet, size-help band, packages, custom-trip band ---------- */
/* Tablet and mobile only (up to 1024px); desktop above 1024px is untouched.
   Side gutters already come from --tbc-gutter in site-chrome.css (24px tablet, 16px mobile).
   This block sets the vertical padding (64px tablet, 48px mobile), the card ratio and padding,
   the button rows and the stacked layout of the two bands. Delete the block to go back. */

@media (max-width: 1024px) {
	/* 1. Sections: vertical padding, never wider than the screen */
	html body .elementor .e-con:is(.tbc-fleet, .tbc-fleet-help, .tbc-packages, .tbc-packages-custom) {
		box-sizing: border-box;
		max-width: 100%;
		padding-top: 64px;
		padding-bottom: 64px;
	}

	/* Section head: label, H2, intro text centred, full width */
	html body .elementor .e-con:is(.tbc-fleet-head, .tbc-packages-head) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		align-items: center;
		text-align: center;
	}

	html body .elementor .e-con:is(.tbc-fleet-head, .tbc-packages-head) > .elementor-widget {
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .elementor-widget:is(.tbc-fleet-title, .tbc-packages-title) .elementor-heading-title {
		font-size: 34px;
		line-height: 1.2;
		text-align: center;
		overflow-wrap: break-word;
	}

	html body .elementor .elementor-widget:is(.tbc-fleet-sub, .tbc-packages-sub) {
		width: 100%;
		max-width: 640px;
		text-align: center;
	}

	/* 2. Cards: 2 columns on tablet, 16:10 photo, 16px padding */
	html body .elementor .elementor-widget:is(.tbc-fleet-cards, .tbc-packages-cards) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .tbc-fleet .tbc-grid--vehicles,
	html body .tbc-packages .tbc-grid--packages {
		--tbc-cols: 2;
		width: 100%;
		max-width: 100%;
	}

	html body .tbc-fleet .tbc-card,
	html body .tbc-packages .tbc-card {
		min-width: 0;
		max-width: 100%;
	}

	html body .tbc-fleet .tbc-card__media,
	html body .tbc-packages .tbc-card__media {
		aspect-ratio: 16 / 10;
	}

	html body .tbc-fleet .tbc-card__img,
	html body .tbc-packages .tbc-card__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	html body .tbc-fleet .tbc-card__body,
	html body .tbc-packages .tbc-card__body {
		min-width: 0;
		padding: 16px;
	}

	/* Badges stay inside the photo */
	html body .tbc-fleet .tbc-card__media .tbc-badge,
	html body .tbc-packages .tbc-card__media .tbc-badge {
		box-sizing: border-box;
		max-width: calc(100% - 24px);
		overflow-wrap: anywhere;
	}

	/* Long words wrap instead of pushing the card wider */
	html body .tbc-fleet :is(.tbc-card__title, .tbc-card__meta, .tbc-card__rate, .tbc-card__desc),
	html body .tbc-packages :is(.tbc-card__title, .tbc-card__meta, .tbc-card__rate, .tbc-card__desc, .tbc-price),
	html body .tbc-packages :is(.tbc-details__heading, .tbc-ticks li, .tbc-itinerary li) {
		overflow-wrap: anywhere;
	}

	/* Book Now: full width, at least 44px (48px) high */
	html body .tbc-fleet .tbc-card__actions .tbc-btn,
	html body .tbc-packages .tbc-card__actions .tbc-btn {
		width: 100%;
		min-height: 48px;
		box-sizing: border-box;
		padding: 0 16px;
	}

	/* Package "View Details": 44px tap target, opened list wraps inside the card */
	html body .tbc-packages .tbc-details,
	html body .tbc-packages .tbc-details__body {
		min-width: 0;
		max-width: 100%;
	}

	html body .tbc-packages .tbc-details__summary {
		min-height: 44px;
	}

	/* 4. View Full Fleet / View All Packages: centred, at least 44px high */
	html body .elementor .elementor-widget-button:is(.tbc-fleet-btn, .tbc-packages-btn) .elementor-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 44px;
		max-width: 100%;
		text-align: center;
		white-space: normal;
	}

	/* 3. The two bands: stacked (heading, text, buttons) on tablet too */
	html body .elementor .e-con:is(.tbc-fleet-help-inner, .tbc-packages-custom-inner) > .e-con-inner {
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		row-gap: 20px;
		padding-left: 0;
		padding-right: 0;
	}

	html body .elementor .e-con:is(.tbc-fleet-help-copy, .tbc-packages-custom-copy) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .elementor-widget:is(.tbc-fleet-help-actions, .tbc-packages-custom-actions) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) :is(.elementor-heading-title, .elementor-widget-text-editor) {
		overflow-wrap: anywhere;
	}

	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		max-width: 100%;
	}

	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons .tbc-contact-buttons__btn {
		box-sizing: border-box;
		min-height: 48px;
	}
}

@media (max-width: 767px) {
	/* Sections: 48px vertical padding */
	html body .elementor .e-con:is(.tbc-fleet, .tbc-fleet-help, .tbc-packages, .tbc-packages-custom) {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	html body .elementor .elementor-widget:is(.tbc-fleet-label, .tbc-packages-label) {
		max-width: 100%;
	}

	html body .elementor .elementor-widget:is(.tbc-fleet-label, .tbc-packages-label) .elementor-heading-title {
		font-size: 13px;
		letter-spacing: 1.5px;
		overflow-wrap: anywhere;
	}

	html body .elementor .elementor-widget:is(.tbc-fleet-title, .tbc-packages-title) .elementor-heading-title {
		font-size: 28px;
	}

	/* Cards: 1 column, full width */
	html body .tbc-fleet .tbc-grid--vehicles,
	html body .tbc-packages .tbc-grid--packages {
		--tbc-cols: 1;
	}

	html body .tbc-packages .tbc-card__ph {
		padding: 16px;
		gap: 10px;
	}

	html body .tbc-packages .tbc-card__ph-icon {
		width: 56px;
		height: 56px;
	}

	/* View Full Fleet / View All Packages: full width up to 320px, centred */
	html body .elementor .elementor-widget-button:is(.tbc-fleet-btn, .tbc-packages-btn) .elementor-button {
		width: 100%;
		max-width: 320px;
	}

	html body .elementor .elementor-widget-button:is(.tbc-fleet-btn, .tbc-packages-btn) {
		text-align: center;
	}

	/* Bands: Call Now / WhatsApp / Email as 3 equal buttons in one row (481-767px) */
	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons {
		flex-wrap: nowrap;
		gap: 10px;
	}

	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons .tbc-contact-buttons__btn {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding: 0 10px;
	}

	/* The icon-only Email button gets its label, so all three look the same */
	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons--hero .tbc-contact-buttons__btn--email .tbc-contact-buttons__label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	/* Small phones: each button is its own full-width row, same height */
	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons {
		flex-direction: column;
	}

	html body .elementor .e-con:is(.tbc-fleet-help, .tbc-packages-custom) .tbc-contact-buttons .tbc-contact-buttons__btn {
		flex: 0 0 auto;
		padding: 0 16px;
	}
}
/* ---------- Home responsive part 1 (end) ---------- */
/* ---------- Home responsive part 2 (start): why us, how it works, FAQ, final CTA, footer ---------- */
/* Tablet and mobile only (up to 1024px); desktop above 1024px is untouched.
   Side gutters come from --tbc-gutter in site-chrome.css (24px tablet, 16px mobile).
   This block sets the vertical padding (64px tablet, 48px mobile), the stacked layouts,
   the button rows and the tap sizes. Delete the block to go back. */

@media (max-width: 1024px) {
	/* 1. Sections: vertical padding, gutters, never wider than the screen */
	html body .elementor .e-con:is(.tbc-why, .tbc-steps, .tbc-faq, .tbc-cta) {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-top: 64px;
		padding-bottom: 64px;
		padding-left: var(--tbc-gutter, 24px);
		padding-right: var(--tbc-gutter, 24px);
	}

	/* Section heads: label, H2, intro text centred, full width */
	html body .elementor .e-con:is(.tbc-steps-head, .tbc-faq-head, .tbc-cta-head) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		align-items: center;
		text-align: center;
	}

	html body .elementor .e-con:is(.tbc-steps-head, .tbc-faq-head, .tbc-cta-head) > .elementor-widget {
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .elementor-widget:is(.tbc-why-label, .tbc-why-title, .tbc-why-sub) {
		text-align: center;
	}

	html body .elementor .elementor-widget:is(.tbc-why-title, .tbc-steps-title, .tbc-faq-title, .tbc-cta-title) .elementor-heading-title,
	html body .elementor .elementor-widget.tbc-why-label .elementor-heading-title {
		line-height: 1.2;
		text-align: center;
		overflow-wrap: break-word;
	}

	html body .elementor .elementor-widget:is(.tbc-why-sub, .tbc-steps-sub, .tbc-faq-sub, .tbc-cta-sub) {
		width: 100%;
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* 2. Why Us: one column, IMAGE FIRST (it is first in the page), full width, rounded 20px */
	html body .elementor .e-con.tbc-why-inner > .e-con-inner {
		flex-direction: column;
		align-items: stretch;
	}

	html body .elementor .e-con:is(.tbc-why-media, .tbc-why-content) {
		--width: 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .elementor-widget.tbc-why-img {
		width: 100%;
		max-width: 100%;
	}

	html body .elementor .tbc-why-img img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: 20px;
	}

	/* The 6 icon boxes: 2 columns on tablet, equal 16px padding */
	html body .elementor .e-con.tbc-why-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
	}

	html body .elementor .e-con.tbc-why-card {
		--width: 100%;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 16px;
	}

	/* Icon on the left, text beside it, nothing cut off */
	html body .elementor .tbc-why-item .elementor-icon-box-wrapper {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		text-align: left;
	}

	html body .elementor .tbc-why-item .elementor-icon-box-icon {
		flex: 0 0 auto;
		margin: 0;
	}

	html body .elementor .tbc-why-item .elementor-icon-box-content {
		flex: 1 1 0;
		min-width: 0;
		overflow-wrap: break-word;
	}

	/* 3. How It Works: the dotted line is only for 768px and wider (see the Steps block above) */
	html body .elementor .e-con.tbc-steps-row {
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .e-con.tbc-step {
		min-width: 0;
		max-width: 100%;
	}

	html body .elementor .tbc-steps .tbc-step-num {
		align-self: center;
		flex: 0 0 auto;
	}

	html body .elementor .e-con:is(.tbc-steps-cta, .tbc-cta-actions) {
		max-width: 100%;
		min-width: 0;
	}

	/* 4. FAQ: full width accordion, comfortable titles and answers */
	html body .elementor .e-con.tbc-faq-list {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .elementor-widget.tbc-faq-accordion {
		--width: 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .tbc-faq .e-n-accordion-item-title {
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
	}

	html body .elementor .tbc-faq .e-n-accordion-item-title-header {
		flex: 1 1 0;
		min-width: 0;
	}

	html body .elementor .tbc-faq .e-n-accordion-item-title-text {
		margin: 0;
		min-width: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* The +/- icon keeps its size, stays on the right and never overlaps the text */
	html body .elementor .tbc-faq .e-n-accordion-item-title-icon {
		flex: 0 0 auto;
		margin-left: auto;
	}

	html body .elementor .tbc-faq .e-n-accordion-item > .e-con {
		min-width: 0;
		max-width: 100%;
	}

	html body .elementor .tbc-faq .tbc-faq-answer {
		line-height: 1.7;
		overflow-wrap: break-word;
	}

	html body .elementor .tbc-faq .tbc-faq-answer p {
		line-height: 1.7;
	}

	html body .elementor .e-con.tbc-faq-more {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .tbc-faq-more .tbc-faq-more-text {
		text-align: center;
	}

	/* 5. Final CTA: centred, 3 check items wrap into a centred column */
	html body .elementor .e-con.tbc-cta-checks {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	html body .elementor .e-con .elementor-widget.tbc-cta-checks-list .elementor-icon-list-items.elementor-inline-items {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-left: 0;
		margin-right: 0;
	}

	html body .elementor .e-con .elementor-widget.tbc-cta-checks-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
		justify-content: center;
		text-align: center;
	}

	html body .elementor .tbc-cta-checks-list .elementor-icon-list-text {
		overflow-wrap: break-word;
	}

	/* 6. Footer */
	html body .elementor .e-con.tbc-footer > .e-con-inner {
		box-sizing: border-box;
		width: 100%;
		max-width: var(--tbc-content-width, 1200px);
		padding-left: 0;
		padding-right: 0;
	}

	html body .elementor .e-con.tbc-footer-col {
		min-width: 0;
		max-width: 100%;
	}

	html body .elementor .tbc-footer .elementor-icon-list-text {
		overflow-wrap: anywhere;
	}

	html body .elementor .tbc-footer .elementor-icon-list-item > a {
		min-height: 44px;
	}

	html body .elementor .tbc-footer-contact .elementor-shortcode {
		overflow-wrap: anywhere;
		word-break: normal;
	}

	html body .elementor .tbc-footer-contact .elementor-shortcode a[href^="tel:"],
	html body .elementor .tbc-footer-contact .elementor-shortcode a[href^="mailto:"] {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	html body .elementor .tbc-footer .hfe-site-logo .hfe-site-logo-container {
		max-width: 100%;
	}
}

/* Tablet only (768px to 1024px): footer in 2 columns */
@media (min-width: 768px) and (max-width: 1024px) {
	html body .elementor .e-con.tbc-footer > .e-con-inner {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 32px;
	}

	html body .elementor .e-con.tbc-footer-col {
		--width: calc((100% - 32px) / 2);
		width: calc((100% - 32px) / 2);
		flex: 0 0 calc((100% - 32px) / 2);
	}
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
	html body .elementor .e-con:is(.tbc-why, .tbc-steps, .tbc-faq, .tbc-cta) {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	html body .elementor .elementor-widget:is(.tbc-why-title, .tbc-steps-title, .tbc-faq-title, .tbc-cta-title) .elementor-heading-title {
		font-size: 28px;
	}

	/* Why Us: image 16:10, icon boxes in one column */
	html body .elementor .tbc-why-img img {
		aspect-ratio: 16 / 10;
	}

	html body .elementor .e-con.tbc-why-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* How It Works: 1 column, 28px between steps, no dotted line */
	html body .elementor .e-con.tbc-steps-row {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	html body .elementor .tbc-steps .tbc-steps-row::before {
		display: none;
		content: none;
	}

	html body .elementor .e-con.tbc-step {
		--width: 100%;
		width: 100%;
		align-items: center;
		text-align: center;
	}

	/* Button rows: full width, stacked, at least 44px high */
	html body .elementor .e-con:is(.tbc-steps-cta, .tbc-cta-actions, .tbc-faq-more) .tbc-contact-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 16px;
	}

	html body .elementor .e-con:is(.tbc-steps-cta, .tbc-cta-actions, .tbc-faq-more) .tbc-contact-buttons .tbc-contact-buttons__btn {
		flex: 0 0 auto;
		width: 100%;
		min-height: 48px;
		white-space: normal;
		text-align: center;
	}

	/* FAQ "Still have a question?" and the final CTA buttons: max 320px, centred */
	html body .elementor .e-con:is(.tbc-faq-more, .tbc-cta-actions) {
		align-self: center;
		width: 100%;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}

	html body .elementor .e-con.tbc-faq-more > .elementor-widget-shortcode,
	html body .elementor .e-con.tbc-cta-actions > .elementor-widget {
		width: 100%;
		max-width: 100%;
	}

	/* Footer: 1 column, left aligned, 32px between the groups */
	html body .elementor .e-con.tbc-footer > .e-con-inner {
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 32px;
	}

	html body .elementor .e-con.tbc-footer-col {
		--width: 100%;
		width: 100%;
		flex: 0 0 auto;
		align-items: flex-start;
		text-align: left;
	}

	html body .elementor .tbc-footer .hfe-site-logo .hfe-site-logo-container img.hfe-site-logo-img {
		max-height: 60px;
	}

	html body .elementor .tbc-footer a.tbc-contact-buttons__btn {
		min-height: 44px;
		max-width: 100%;
		white-space: normal;
	}

	/* Copyright line: centred, wraps, keeps the page gutters */
	html body .elementor .e-con.tbc-footer-bottom > .e-con-inner {
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
	}

	html body .elementor .tbc-footer-bottom .elementor-widget-copyright {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}

	html body .elementor .tbc-footer-bottom .hfe-copyright-wrapper {
		text-align: center;
		overflow-wrap: anywhere;
		line-height: 1.6;
	}
}
/* ---------- Home responsive part 2 (end) ---------- */
/* RESPONSIVE FIXES  (end) */

/* ---------- Top bar on tablet (768px to 1100px): hide the city text so the row never wraps (start) ---------- */
@media (min-width: 768px) and (max-width: 1100px) {
	body .elementor .tbc-topbar-wrap .tbc-topbar-city {
		display: none;
	}

	body .tbc-topbar {
		flex-wrap: nowrap;
		min-width: 0;
	}
}
/* ---------- Top bar on tablet (end) ---------- */