/* =========================================
CUSTOM THEME + LAYOUT (ON TOP OF BOOTSTRAP)
This file assumes Bootstrap 5 CSS is loaded first.
========================================= */
/* Typography is loaded via in public page heads for performance */
/* Global reset that plays nicely with Bootstrap */
*, *::before, *::after {
box-sizing: border-box;
}
/* ---------------------------
Design tokens & themes
---------------------------- */
:root {
/* Light theme */
--header-bg: #ffffff;
--header-text: #0f172a;
--header-border: rgba(15, 23, 42, 0.08);
--sub-bar-bg: #0b1120;
--sub-bar-text: #f9fafb;
--accent: #0b1120;
--accent-soft: rgba(15, 23, 42, 0.06);
--btn-auth-bg: #020617;
--btn-auth-bg-hover: #000000;
--btn-auth-text: #f9fafb;
--toggle-track-bg: rgba(148, 163, 184, 0.4);
--toggle-thumb-bg: #ffffff;
--phone-color: #ffffff;
--font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--header-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--header-display-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--transition-fast: 0.2s ease;
/* Brand primary */
--primary-color: #B8860B;
/* Premium accents */
--premium-gold: var(--primary-color);
--premium-gold-soft: rgba(184, 134, 11, 0.25);
--premium-ink: #0a0f1f;
--header-shell-shadow: 0 20px 60px rgba(2, 6, 23, 0.10);
/* Global surfaces */
--page-bg: #f4f6f9;
--page-bg-elevated: #ffffff;
--surface-1: #ffffff;
--surface-2: #f8fafc;
--surface-3: #eef2f7;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--line-soft: #e2e8f0;
--line-strong: #cbd5e1;
--focus-ring: rgba(15, 23, 42, 0.14);
--success-bg: #ecfdf5;
--success-text: #065f46;
--warning-bg: #fffbeb;
--warning-text: #92400e;
--danger-bg: #fef2f2;
--danger-text: #991b1b;
--primary-btn-bg: #0f172a;
--primary-btn-hover: #111827;
--primary-btn-text: #ffffff;
--secondary-btn-bg: #ffffff;
--secondary-btn-text: #0f172a;
--secondary-btn-border: #cbd5e1;
--card-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
/* Bootstrap bridge (light) */
--bs-body-bg: var(--page-bg);
--bs-body-color: var(--text-primary);
--bs-emphasis-color: var(--text-primary);
--bs-secondary-color: var(--text-muted);
--bs-tertiary-bg: var(--surface-2);
--bs-border-color: var(--line-soft);
--bs-card-bg: var(--surface-1);
--bs-card-border-color: var(--line-soft);
--bs-link-color: #1d4ed8;
--bs-link-hover-color: #1e3a8a;
}
/* Dark theme */
body.dark-theme {
--header-bg: #020617;
--header-text: #e5e7eb;
--header-border: rgba(15, 23, 42, 0.9);
--sub-bar-bg: #000000;
--sub-bar-text: #e5e7eb;
--accent: #f9fafb;
--accent-soft: rgba(148, 163, 184, 0.16);
--btn-auth-bg: #f9fafb;
--btn-auth-bg-hover: #e5e7eb;
--btn-auth-text: #020617;
--toggle-track-bg: rgba(15, 23, 42, 0.7);
--toggle-thumb-bg: #b8860b;
--phone-color: #ffffff;
/* Global surfaces - dark */
--page-bg: #0b1220;
--page-bg-elevated: #101827;
--surface-1: #111b2b;
--surface-2: #162235;
--surface-3: #1b2940;
--text-primary: #e5edf8;
--text-secondary: #c7d3e3;
--text-muted: #9db1c9;
--line-soft: #263348;
--line-strong: #34445e;
--focus-ring: rgba(148, 163, 184, 0.26);
--success-bg: rgba(16, 185, 129, 0.16);
--success-text: #86efac;
--warning-bg: rgba(184, 134, 11, 0.18);
--warning-text: #b8860b;
--danger-bg: rgba(239, 68, 68, 0.18);
--danger-text: #fca5a5;
--primary-btn-bg: #e2e8f0;
--primary-btn-hover: #f8fafc;
--primary-btn-text: #0f172a;
--secondary-btn-bg: transparent;
--secondary-btn-text: #e2e8f0;
--secondary-btn-border: #475569;
--card-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
/* Bootstrap bridge (dark) */
--bs-body-bg: var(--page-bg);
--bs-body-color: var(--text-primary);
--bs-emphasis-color: var(--text-primary);
--bs-secondary-color: var(--text-muted);
--bs-tertiary-bg: var(--surface-2);
--bs-border-color: var(--line-soft);
--bs-card-bg: var(--surface-1);
--bs-card-border-color: var(--line-soft);
--bs-link-color: #93c5fd;
--bs-link-hover-color: #bfdbfe;
}
/* Base body override (keeps Bootstrap typography but ensures no default margin) */
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background: var(--page-bg);
color: var(--text-primary);
transition: background-color .25s ease, color .25s ease;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
line-height: 1.3;
color: #000;
font-family: 'Poppins', sans-serif;
}
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.03rem; font-weight: 600; }
h4 { font-size: 1.375rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }
.section-heading {
text-align: center;
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.section-heading,
.section-heading * {
text-align: center !important;
}
.section-heading h2 {
font-size: 2rem;
font-weight: 600;
}
.section-heading p {
font-size: 1rem;
color: #666;
margin-top: 10px;
}
@media (max-width: 768px) {
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.03rem; }
}
/* -----------------------------------------
Global Light/Dark Theme Component Layer
------------------------------------------ */
main, section, article {
color: var(--text-primary);
}
h1, h2, h3, h4, h5, h6,
p,
label,
small,
span,
li,
td,
th,
dt,
dd {
color: inherit;
}
.text-dark,
.text-body,
.text-black,
.text-secondary,
.link-dark,
.link-body-emphasis {
color: var(--text-secondary) !important;
}
.text-body-emphasis,
.fw-semibold,
.fw-bold,
.fw-bolder {
color: var(--text-primary);
}
/* Default link color ONLY for anchors without a class attribute.
This avoids overriding component/button link styles. */
a:not([class]),
a:not([class]):visited {
color: #b8860b;
}
a:not([class]):hover {
color: #b8860b;
}
body.dark-theme,
body.dark-theme main,
body.dark-theme section,
body.dark-theme article {
color: var(--text-primary);
}
body.dark-theme .text-dark,
body.dark-theme .text-body,
body.dark-theme .text-black,
body.dark-theme .text-secondary,
body.dark-theme .link-dark,
body.dark-theme .link-body-emphasis,
body.dark-theme .text-body-emphasis {
color: var(--text-secondary) !important;
}
body.dark-theme .fw-semibold,
body.dark-theme .fw-bold,
body.dark-theme .fw-bolder,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
color: var(--text-primary);
}
.text-muted,
.small.text-muted,
.form-text {
color: var(--text-muted) !important;
}
.bg-light,
.bg-body-tertiary {
background-color: var(--surface-2) !important;
}
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.table,
.accordion-item {
background-color: var(--surface-1);
color: var(--text-primary);
border-color: var(--line-soft);
}
.navbar,
.offcanvas,
.popover,
.tooltip-inner,
.pagination .page-link,
.breadcrumb,
.toast,
.nav-pills .nav-link,
.nav-tabs .nav-link {
background-color: var(--surface-1);
color: var(--text-primary);
border-color: var(--line-soft);
}
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
background-color: var(--surface-3);
color: var(--text-primary);
border-color: var(--line-strong);
}
.dropdown-item,
.list-group-item-action,
.page-link {
color: var(--text-primary);
}
.dropdown-item:hover,
.list-group-item-action:hover,
.page-link:hover {
background-color: var(--surface-2);
color: var(--text-primary);
}
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
border-color: var(--line-soft) !important;
}
.bg-white,
.bg-body,
.bg-body-secondary,
.bg-body-tertiary {
background-color: var(--surface-1) !important;
}
body.dark-theme .bg-light,
body.dark-theme .bg-white,
body.dark-theme .bg-body,
body.dark-theme .bg-body-secondary,
body.dark-theme .bg-body-tertiary,
body.dark-theme .table-light {
background-color: var(--surface-2) !important;
}
body.dark-theme .modal-header,
body.dark-theme .modal-footer,
body.dark-theme .offcanvas-header,
body.dark-theme .offcanvas-body {
border-color: var(--line-soft);
}
body.dark-theme .btn-close {
filter: invert(1) grayscale(1) brightness(200%);
}
.card,
.modal-content,
.dropdown-menu {
box-shadow: var(--card-shadow);
}
.card-header,
.card-footer,
.table-light,
.accordion-button {
background-color: var(--surface-2) !important;
color: var(--text-primary) !important;
border-color: var(--line-soft) !important;
}
.accordion-button:not(.collapsed) {
background-color: var(--surface-3) !important;
color: var(--text-primary) !important;
}
.table,
.table > :not(caption) > * > * {
border-color: var(--line-soft) !important;
color: var(--text-primary);
}
.form-control,
.form-select,
.form-check-input,
.input-group-text {
background-color: var(--surface-1);
color: var(--text-primary);
border-color: var(--line-strong);
}
.form-control::placeholder,
.form-select::placeholder {
color: var(--text-muted);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
border-color: var(--line-strong);
box-shadow: 0 0 0 .25rem var(--focus-ring);
}
.btn-dark,
.btn.btn-dark,
.btn-primary {
background: var(--primary-btn-bg) !important;
border-color: var(--primary-btn-bg) !important;
color: var(--primary-btn-text) !important;
}
.btn-dark:hover,
.btn.btn-dark:hover,
.btn-primary:hover {
background: var(--primary-btn-hover) !important;
border-color: var(--primary-btn-hover) !important;
}
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-primary {
background: var(--secondary-btn-bg);
color: var(--secondary-btn-text);
border-color: var(--secondary-btn-border);
}
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:hover {
background: var(--surface-3);
color: var(--text-primary);
border-color: var(--line-strong);
}
.alert-success {
background: var(--success-bg);
color: var(--success-text);
border-color: rgba(16, 185, 129, 0.35);
}
.alert-warning {
background: var(--warning-bg);
color: var(--warning-text);
border-color: rgba(184, 134, 11, 0.35);
}
.alert-danger {
background: var(--danger-bg);
color: var(--danger-text);
border-color: rgba(239, 68, 68, 0.35);
}
.badge.text-bg-light {
background: var(--surface-2) !important;
color: var(--text-primary) !important;
border: 1px solid var(--line-soft);
}
/* Google Places Autocomplete dropdown should appear above overlays */
.pac-container {
z-index: 2147483647 !important;
}
/* Apply only to header tree */
.main-header,
.main-header * {
box-sizing: border-box;
font-family: var(--header-font);
}
/* ---------------------------
Header shell (edge-to-edge)
---------------------------- */
.main-header {
width: 100%;
background-color: var(--header-bg);
color: var(--header-text);
border-bottom: 1px solid var(--header-border);
position: sticky;
top: 0;
z-index: 1000;
overflow: visible;
}
/* Subtle glass + shadow once content scrolls under */
.main-header.is-scrolled {
box-shadow: var(--header-shell-shadow);
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px);
}
body.dark-theme .main-header.is-scrolled {
background: rgba(2, 6, 23, 0.78);
}
/* TOP ROW */
.header-inner {
width: 100%;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-inline: 24px;
/* Center the content for a more premium feel */
max-width: 1280px;
margin: 0 auto;
}
.header-logo img {
height: 36px;
width: auto;
display: block;
filter: drop-shadow(0 10px 22px rgba(2, 6, 23, 0.14));
max-width: 220px;
}
.header-logo {
flex: 0 0 auto;
margin-right: 28px;
}
/* Desktop Nav */
.header-nav {
flex: 1;
display: flex;
justify-content: center;
overflow: visible;
}
.nav-list {
display: flex;
gap: 18px;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
position: relative;
overflow: visible;
}
.nav-list a {
text-decoration: none;
color: var(--header-text);
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
opacity: 0.95;
padding: 8px 10px;
border-radius: 12px;
position: relative;
transition:
color var(--transition-fast),
opacity var(--transition-fast),
background-color var(--transition-fast),
transform var(--transition-fast);
}
/* Explicit menu text color by theme */
body:not(.dark-theme) .main-header .header-nav .nav-list > li > a,
body:not(.dark-theme) .main-header .header-nav .nav-list .nav-dropdown-toggle,
body:not(.dark-theme) .main-header .header-nav .nav-dropdown .nav-dropdown-item,
body:not(.dark-theme) .main-header .header-nav-mobile .nav-list-mobile a {
color: #000000 !important;
}
body.dark-theme .main-header .header-nav .nav-list > li > a,
body.dark-theme .main-header .header-nav .nav-list .nav-dropdown-toggle,
body.dark-theme .main-header .header-nav .nav-dropdown .nav-dropdown-item,
body.dark-theme .main-header .header-nav-mobile .nav-list-mobile a {
color: #ffffff !important;
}
.main-header .header-nav-mobile .nav-mobile-auth-wrap a.btn-auth--mobile,
body:not(.dark-theme) .main-header .header-nav-mobile .nav-mobile-auth-wrap a.btn-auth--mobile,
body.dark-theme .main-header .header-nav-mobile .nav-mobile-auth-wrap a.btn-auth--mobile {
color: #ffffff !important;
}
/* Keep account CTA readable regardless of menu color overrides */
.main-header .btn-auth,
body.dark-theme .main-header .btn-auth {
color: var(--btn-auth-text) !important;
}
/* If dark logo image is used, provide contrast in dark theme */
body.dark-theme .main-header .header-logo {
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(148, 163, 184, 0.35);
border-radius: 12px;
padding: 6px 10px;
}
.nav-list a::after {
display: none;
}
.nav-list a:hover {
opacity: 1;
color: var(--accent);
background: rgba(15, 23, 42, 0.05);
transform: translateY(-1px);
}
.nav-list a:hover::after {
opacity: 1;
}
body.dark-theme .nav-list a:hover {
background: rgba(148, 163, 184, 0.12);
}
.nav-list a:focus-visible {
outline: 2px solid var(--premium-gold);
outline-offset: 2px;
}
/* ---------------------------
Header dropdown (Our Services)
---------------------------- */
.nav-dropdown-parent {
position: relative;
z-index: 5;
padding-bottom: 12px;
margin-bottom: -12px;
}
/*
Hover bridge:
Dropdowns are visually offset below their toggles (see .nav-dropdown top).
That creates a small gap when moving the mouse from the toggle to the menu.
Extend the *parent* hit area into that gap (without changing placement).
Note: we do this on the parent (not the dropdown) so it also works for the
mega menu where the dropdown uses overflow clipping.
*/
.nav-dropdown-parent::after {
content: "";
position: absolute;
left: -24px;
right: -24px;
top: 100%;
height: 18px;
/* Only become interactive while the menu is active. */
pointer-events: none;
}
.nav-dropdown-parent:hover::after,
.nav-dropdown-parent:focus-within::after,
.nav-dropdown-parent.open::after {
pointer-events: auto;
}
.nav-dropdown-toggle {
cursor: pointer;
}
/* Small chevron indicator (desktop nav only; doesn't interfere with underline ::after) */
.nav-list .nav-dropdown-parent > .nav-dropdown-toggle {
position: relative;
padding-right: 14px;
}
.nav-list .nav-dropdown-parent > .nav-dropdown-toggle::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-55%) rotate(45deg);
opacity: 0.55;
transition:
transform var(--transition-fast),
opacity var(--transition-fast);
}
.nav-list .nav-dropdown-parent.open > .nav-dropdown-toggle::before {
transform: translateY(-45%) rotate(-135deg);
opacity: 0.8;
}
/* Premium menu caret + typography (match provided design) */
.main-header--premium .nav-list {
gap: 24px;
}
.main-header--premium .nav-list > li > a {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
padding: 0;
border-radius: 0;
opacity: 1;
position: relative;
white-space: nowrap;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0 2px;
background-position: 0 calc(100% + 8px);
transition:
background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1),
color var(--transition-fast),
opacity var(--transition-fast);
}
.main-header--premium .nav-list > li > a:hover {
text-decoration: none;
color: #0b1426;
background: transparent;
transform: none;
opacity: 1;
}
body.dark-theme .main-header--premium .nav-list > li > a:hover {
color: #ffffff;
}
.main-header--premium .nav-list > li > a:hover,
.main-header--premium .nav-list .nav-dropdown-parent.open > .nav-dropdown-toggle,
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle.is-current {
background-size: 100% 2px;
}
.main-header--premium .nav-list .nav-dropdown-parent.open > .nav-dropdown-toggle,
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle.is-current {
background-image: linear-gradient(var(--premium-gold), var(--premium-gold));
}
.main-header--premium .nav-list > li > a:focus-visible {
outline: 2px solid rgba(15, 23, 42, 0.20);
outline-offset: 6px;
color: var(--premium-gold);
}
.main-header--premium .nav-dropdown-parent.open > .nav-dropdown-toggle {
color: #0b1426;
}
.main-header--premium .nav-dropdown-parent > .nav-dropdown-toggle.is-current {
color: #0b1426;
}
.main-header--premium .nav-dropdown-parent:hover > .nav-dropdown-toggle,
.main-header--premium .nav-dropdown-parent:focus-within > .nav-dropdown-toggle {
color: #0b1426;
}
body.dark-theme .main-header--premium .nav-dropdown-parent.open > .nav-dropdown-toggle,
body.dark-theme .main-header--premium .nav-dropdown-parent:hover > .nav-dropdown-toggle,
body.dark-theme .main-header--premium .nav-dropdown-parent:focus-within > .nav-dropdown-toggle,
body.dark-theme .main-header--premium .nav-dropdown-parent > .nav-dropdown-toggle.is-current {
color: #ffffff;
}
body.dark-theme .main-header--premium .nav-list > li > a:focus-visible {
outline-color: rgba(229, 231, 235, 0.22);
}
/* Replace chevron with small down-caret */
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle::before {
display: none;
}
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle {
position: relative;
padding-right: 16px;
}
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle::after {
content: "";
position: absolute;
right: 0;
top: 50%;
display: block;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-55%) rotate(45deg);
opacity: 0.55;
transition:
transform var(--transition-fast),
opacity var(--transition-fast);
}
/* Rotate caret when dropdown is open */
.main-header--premium .nav-list .nav-dropdown-parent.open > .nav-dropdown-toggle::after {
transform: translateY(-45%) rotate(-135deg);
opacity: 0.85;
}
.nav-dropdown {
display: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 240px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 100%);
border: 1px solid var(--header-border);
border-radius: 14px;
padding: 10px;
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
z-index: 3000;
backdrop-filter: blur(10px);
transform: translateY(4px);
opacity: 0;
transition:
opacity var(--transition-fast),
transform var(--transition-fast);
}
body.dark-theme .nav-dropdown {
background:
linear-gradient(180deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.84) 100%);
}
body.dark-theme .nav-dropdown-item {
color: rgba(249, 250, 251, 0.94);
}
.nav-dropdown-parent:hover .nav-dropdown,
.nav-dropdown-parent:focus-within .nav-dropdown {
display: block;
opacity: 1;
transform: translateY(0);
}
.nav-dropdown-parent:hover > .nav-dropdown-toggle,
.nav-dropdown-parent:focus-within > .nav-dropdown-toggle {
color: var(--accent);
}
/* Support click-to-open (touch/JS) */
.nav-dropdown-parent.open .nav-dropdown {
display: block;
opacity: 1;
transform: translateY(0);
}
/* Premium header dropdown surface (match screenshot) */
.main-header--premium .nav-dropdown {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 34px 90px rgba(2, 6, 23, 0.18);
backdrop-filter: none;
}
body.dark-theme .main-header--premium .nav-dropdown {
background: #0b1120;
border-color: rgba(148, 163, 184, 0.22);
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.45);
}
/* Standard dropdown menus (Fleet/Business/Help/Auth) */
.main-header--premium .nav-dropdown--menu {
min-width: 220px;
padding: 10px;
border-radius: 16px;
}
.main-header--premium .nav-dropdown--menu .nav-dropdown-item {
padding: 12px 12px;
border-radius: 12px;
font-size: 0.90rem;
font-weight: 650;
letter-spacing: 0;
opacity: 1;
border: 1px solid transparent;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
}
/* Auth dropdown items (Create account / Login): smaller text + left icon */
.main-header--premium .nav-dropdown--right .nav-dropdown-item--auth {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.82rem;
font-weight: 700;
}
.main-header--premium .nav-dropdown--right .nav-dropdown-item--auth .nav-dropdown-item__icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.78;
flex: 0 0 18px;
}
.main-header--premium .nav-dropdown--right .nav-dropdown-item--auth .nav-dropdown-item__icon svg {
width: 18px;
height: 18px;
display: block;
}
.main-header--premium .nav-dropdown--right .nav-dropdown-item--auth .nav-dropdown-item__text {
line-height: 1.15;
}
.main-header--premium .nav-dropdown--menu .nav-dropdown-item:hover {
background: rgba(2, 6, 23, 0.035);
border-color: rgba(2, 6, 23, 0.10);
}
.main-header--premium .nav-dropdown--menu .nav-dropdown-item.is-current {
background: rgba(184, 134, 11, 0.14);
border-color: rgba(184, 134, 11, 0.42);
}
body.dark-theme .main-header--premium .nav-dropdown--menu .nav-dropdown-item:hover {
background: rgba(148, 163, 184, 0.10);
border-color: rgba(148, 163, 184, 0.18);
}
body.dark-theme .main-header--premium .nav-dropdown--menu .nav-dropdown-item.is-current {
background: rgba(184, 134, 11, 0.22);
border-color: rgba(184, 134, 11, 0.55);
}
.main-header--premium .nav-dropdown--menu .nav-dropdown-item:focus-visible {
outline: 2px solid rgba(184, 134, 11, 0.55);
outline-offset: 2px;
}
/* Mega menu (Our Services) */
.nav-dropdown--mega {
min-width: 360px;
width: min(380px, calc(100vw - 32px));
padding: 14px 14px 12px;
border-radius: 16px;
overflow: hidden;
}
.main-header--premium .nav-dropdown--mega {
border-color: rgba(15, 23, 42, 0.14);
box-shadow:
0 34px 90px rgba(2, 6, 23, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}
body.dark-theme .main-header--premium .nav-dropdown--mega {
box-shadow:
0 34px 90px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(148, 163, 184, 0.12) inset;
}
/* Center the mega menu under its toggle */
.nav-dropdown-parent--mega .nav-dropdown--mega {
left: 50%;
transform: translate(-50%, 4px);
}
.nav-dropdown-parent--mega:hover .nav-dropdown--mega,
.nav-dropdown-parent--mega:focus-within .nav-dropdown--mega,
.nav-dropdown-parent--mega.open .nav-dropdown--mega {
transform: translate(-50%, 0);
}
.nav-mega__top {
padding: 14px 16px 12px;
margin: -14px -14px 0;
background: linear-gradient(180deg, rgba(2, 6, 23, 0.03) 0%, rgba(2, 6, 23, 0.00) 100%);
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
.nav-mega__kicker {
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.55);
}
body.dark-theme .nav-mega__kicker {
color: rgba(229, 231, 235, 0.72);
}
.nav-mega__desc {
margin-top: 6px;
font-size: 0.92rem;
line-height: 1.35;
color: rgba(15, 23, 42, 0.62);
}
body.dark-theme .nav-mega__desc {
color: rgba(229, 231, 235, 0.78);
}
body.dark-theme .nav-mega__top {
background: linear-gradient(180deg, rgba(148, 163, 184, 0.10) 0%, rgba(148, 163, 184, 0.00) 100%);
border-bottom-color: rgba(148, 163, 184, 0.18);
}
.nav-mega__list {
padding: 10px 2px 12px;
border-top: 0;
border-bottom: 0;
}
body.dark-theme .nav-mega__list {
border-top-color: rgba(148, 163, 184, 0.18);
border-bottom-color: rgba(148, 163, 184, 0.18);
}
.nav-mega__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 12px;
border-radius: 14px;
text-decoration: none;
color: var(--header-text);
font-weight: 600;
font-size: 0.98rem;
position: relative;
border: 1px solid transparent;
min-height: 42px;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast),
color var(--transition-fast);
}
.nav-mega__item:hover {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.02) 100%);
border-color: rgba(15, 23, 42, 0.10);
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(2, 6, 23, 0.12);
}
.nav-mega__item.is-current {
background: linear-gradient(180deg, rgba(184, 134, 11, 0.12) 0%, rgba(184, 134, 11, 0.06) 100%);
border-color: rgba(184, 134, 11, 0.45);
box-shadow: 0 10px 22px rgba(184, 134, 11, 0.18);
}
body.dark-theme .nav-mega__item:hover {
background: linear-gradient(180deg, rgba(148, 163, 184, 0.16) 0%, rgba(148, 163, 184, 0.10) 100%);
border-color: rgba(148, 163, 184, 0.22);
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
body.dark-theme .nav-mega__item.is-current {
background: linear-gradient(180deg, rgba(184, 134, 11, 0.24) 0%, rgba(184, 134, 11, 0.14) 100%);
border-color: rgba(184, 134, 11, 0.58);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38);
}
.nav-mega__item:active {
transform: translateY(0);
box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
}
.nav-mega__item:focus-visible {
outline: 2px solid rgba(184, 134, 11, 0.55);
outline-offset: 2px;
}
/* Keep list clean (no arrow indicators) */
.nav-mega__badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: rgba(2, 6, 23, 0.03);
font-size: 0.72rem;
font-weight: 900;
color: rgba(15, 23, 42, 0.90);
box-shadow: 0 6px 14px rgba(2, 6, 23, 0.06);
}
.nav-mega__item:hover .nav-mega__badge {
background: rgba(2, 6, 23, 0.05);
border-color: rgba(15, 23, 42, 0.16);
}
body.dark-theme .nav-mega__badge {
border-color: rgba(148, 163, 184, 0.22);
background: rgba(148, 163, 184, 0.10);
color: rgba(249, 250, 251, 0.90);
}
body.dark-theme .nav-mega__bottom {
border-top-color: rgba(148, 163, 184, 0.18);
}
.nav-mega__bottom {
padding-top: 12px;
padding-bottom: 2px;
margin: 0 -14px -12px;
padding-inline: 14px;
padding-bottom: 14px;
border-top: 1px solid rgba(15, 23, 42, 0.10);
}
/* Override `.nav-list a { color: ... }` inside dropdowns by being more specific */
.nav-dropdown .nav-mega__cta {
display: inline-flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 12px 14px;
border-radius: 999px;
background: linear-gradient(180deg, #111827 0%, #0b1120 100%);
color: #ffffff;
text-decoration: none;
font-weight: 900;
font-size: 0.95rem;
border: 1px solid rgba(15, 23, 42, 0.18);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.22);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
filter var(--transition-fast),
background-color var(--transition-fast);
}
.nav-dropdown .nav-mega__cta:hover {
transform: translateY(-1px);
box-shadow: 0 22px 44px rgba(2, 6, 23, 0.26);
filter: brightness(1.06);
}
.nav-dropdown .nav-mega__cta:active {
transform: translateY(0);
filter: brightness(0.98);
}
.nav-dropdown .nav-mega__cta:focus-visible {
outline: 2px solid rgba(15, 23, 42, 0.22);
outline-offset: 3px;
}
body.dark-theme .nav-dropdown .nav-mega__cta {
border-color: rgba(148, 163, 184, 0.22);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
/* Make the mega list look like a clean menu list */
.nav-mega__label {
display: inline-block;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Slightly larger click target while keeping the list compact */
.nav-mega__label {
line-height: 1.15;
}
.nav-mega__item + .nav-mega__item {
margin-top: 2px;
}
/* Right-aligned dropdown (auth menu) */
.nav-dropdown--right {
left: auto;
right: 0;
}
/* Match auth dropdown width to the toggle button above */
.header-actions .nav-dropdown--menu.nav-dropdown--right {
min-width: 100%;
width: 100%;
box-sizing: border-box;
}
.nav-dropdown-item {
display: block;
padding: 10px 10px;
border-radius: 10px;
text-decoration: none;
color: var(--header-text);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
opacity: 0.95;
}
.nav-dropdown-item:hover {
background: rgba(184, 134, 11, 0.14);
opacity: 1;
}
.main-header--premium .nav-dropdown-item:hover {
background: rgba(15, 23, 42, 0.05);
}
body.dark-theme .main-header--premium .nav-dropdown-item:hover {
background: rgba(148, 163, 184, 0.12);
}
.nav-dropdown-item::after {
display: none !important;
}
/* Register / Login + quick actions */
.header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
.header-actions > * {
flex-shrink: 0;
}
.header-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.header-theme-toggle .toggle-track {
width: 46px;
height: 24px;
border-radius: 20px;
}
.header-theme-toggle .toggle-thumb {
width: 20px;
height: 20px;
}
.header-theme-toggle input:checked + .toggle-track .toggle-thumb {
transform: translateX(22px);
}
.header-book-btn {
height: 42px;
border-radius: 22px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
background: #0b1426;
color: #ffffff;
font-size: 14px;
font-weight: 600;
border: 1px solid rgba(11, 20, 38, 0.18);
white-space: nowrap;
flex-shrink: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.header-book-btn:hover {
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
background: #070f1e;
}
body.dark-theme .header-book-btn {
background: #f8fafc;
color: #0f172a;
border-color: rgba(148, 163, 184, 0.3);
}
body.dark-theme .header-book-btn:hover {
color: #020617;
background: #ffffff;
}
/* Screenshot-like actions styling */
.main-header--premium .header-icon-btn {
background: #f3f6fb;
border-color: #d8e0ea;
color: #0f172a;
}
body.dark-theme .main-header--premium .header-icon-btn {
background: rgba(148, 163, 184, 0.16);
border-color: rgba(148, 163, 184, 0.32);
color: #e2e8f0;
}
/* Premium nav links (match provided header) */
.main-header--premium .nav-list > li > a {
padding: 0;
border-radius: 0;
font-weight: 800;
background: transparent;
text-decoration: none;
}
.main-header--premium .nav-list > li > a:hover {
background: transparent;
transform: none;
text-decoration: none;
opacity: 0.92;
color: var(--premium-gold);
}
.main-header--premium .btn-auth {
height: 42px;
padding: 0 18px;
background: #0b1120;
color: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.12);
box-shadow: 0 16px 34px rgba(2, 6, 23, 0.18);
}
.main-header--premium .btn-auth__icon {
display: inline-flex;
}
.main-header--premium .btn-auth__caret {
display: inline-flex;
margin-left: 2px;
}
.main-header--premium .btn-auth:hover {
filter: brightness(1.04);
transform: translateY(-1px);
box-shadow: 0 20px 40px rgba(2, 6, 23, 0.22);
}
body.dark-theme .main-header--premium .btn-auth {
background: #f9fafb;
color: #0b1120;
border-color: rgba(148, 163, 184, 0.26);
}
.btn-auth {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 999px;
background:
radial-gradient(120% 120% at 20% 0%, rgba(184, 134, 11, 0.35) 0%, rgba(184, 134, 11, 0.00) 55%),
linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(2, 6, 23, 0.92) 100%);
color: var(--btn-auth-text);
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
text-transform: none;
letter-spacing: 0.02em;
border: none;
white-space: nowrap;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
border: 1px solid rgba(184, 134, 11, 0.22);
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}
body.dark-theme .btn-auth {
background:
radial-gradient(120% 120% at 20% 0%, rgba(184, 134, 11, 0.22) 0%, rgba(184, 134, 11, 0.00) 55%),
linear-gradient(180deg, rgba(249, 250, 251, 0.98) 0%, rgba(229, 231, 235, 0.98) 100%);
border: 1px solid rgba(184, 134, 11, 0.24);
}
.btn-auth__icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
}
.btn-auth__caret svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
fill: none;
opacity: 0.85;
}
.btn-auth:hover {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 14px 34px rgba(2, 6, 23, 0.28);
}
/* ---------------------------
Hamburger Icon (Mobile)
---------------------------- */
.header-burger {
display: none;
width: 44px;
height: 34px;
border-radius: 0;
border: 0;
background: transparent;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
gap: 4px;
}
.header-burger span {
display: block;
width: 18px;
height: 2px;
border-radius: 999px;
background-color: var(--header-text);
transition:
transform var(--transition-fast),
opacity var(--transition-fast);
}
.header-burger span + span {
margin-top: 0;
}
/* Hamburger Active */
.header-burger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.header-burger.active span:nth-child(2) {
opacity: 0;
}
.header-burger.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* ---------------------------
Mobile Nav
---------------------------- */
.header-nav-mobile {
width: 100%;
background-color: var(--header-bg);
max-height: 0;
overflow: hidden;
border-bottom: 0 solid var(--header-border);
transition:
max-height 0.25s ease,
border-bottom-width 0.25s ease;
}
.header-nav-mobile.open {
border-bottom-width: 1px;
max-height: 80vh;
}
.header-mobile-close {
display: none;
}
.nav-list-mobile {
list-style: none;
padding: 12px 18px 18px;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.nav-mobile-section-label {
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.24);
}
.nav-mobile-section-label:first-child {
margin-top: 0;
padding-top: 2px;
border-top: 0;
}
.nav-mobile-section-label span {
display: block;
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: rgba(71, 85, 105, 0.92);
}
.nav-list-mobile a {
display: block;
padding: 8px 10px;
margin-top: 3px;
border-radius: 10px;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.25;
color: var(--header-text);
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-list-mobile a.is-current {
color: #0b1426;
font-weight: 700;
background: rgba(184, 134, 11, 0.14);
}
body.dark-theme .nav-list-mobile a.is-current {
color: #ffffff;
background: rgba(184, 134, 11, 0.22);
}
.nav-list-mobile a:hover,
.nav-list-mobile a:focus-visible {
background: rgba(184, 134, 11, 0.1);
}
/* Mobile Auth */
.nav-mobile-auth-wrap {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(148, 163, 184, 0.24);
}
.btn-auth--mobile {
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
margin-top: 8px;
min-height: 44px;
padding: 10px 14px;
border-radius: 12px;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
border: 1px solid rgba(184, 134, 11, 0.3);
background: linear-gradient(180deg, rgba(2, 6, 23, 0.98) 0%, rgba(2, 6, 23, 0.9) 100%);
}
.nav-mobile-auth-wrap a.btn-auth--mobile {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 12px 16px;
}
body.mobile-menu-open {
overflow: hidden;
}
/* ---------------------------
Sub Bar
---------------------------- */
.sub-bar {
width: 100%;
background:
radial-gradient(1200px 80px at 20% 10%, rgba(184, 134, 11, 0.20) 0%, rgba(184, 134, 11, 0) 60%),
linear-gradient(90deg, #0b1426 0%, #0f1b33 55%, #0b1426 100%);
color: var(--sub-bar-text);
}
.sub-bar-inner {
width: 100%;
min-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-inline: 24px;
padding-block: 8px;
max-width: 1280px;
margin: 0 auto;
}
.sub-bar--premium .sub-bar-inner {
min-height: 40px;
padding-block: 8px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
}
.sub-bar-kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: rgba(230, 233, 239, 0.92);
white-space: nowrap;
}
.sub-bar-center {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.sub-bar-left {
display: flex;
align-items: center;
gap: 16px;
}
.sub-bar-right {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.sub-bar-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
color: var(--sub-bar-text);
text-decoration: none;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
transition:
transform var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
opacity var(--transition-fast);
}
.sub-bar-cta:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-1px);
}
.sub-bar-text {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
margin: 0;
opacity: 0.95;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-header--premium .sub-bar-text {
text-transform: none;
letter-spacing: 0.02em;
font-weight: 600;
opacity: 0.92;
text-align: center;
}
.sub-bar-sep {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.18);
}
.main-header--premium .sub-bar-phone {
letter-spacing: 0;
text-transform: none;
font-weight: 750;
}
/* Theme toggle in top bar (match screenshot) */
.sub-bar--premium .theme-toggle {
gap: 10px;
}
.sub-bar--premium .toggle-labels {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
}
.sub-bar--premium .toggle-label {
opacity: 0.6;
}
body:not(.dark-theme) .sub-bar--premium .toggle-label--light {
opacity: 1;
}
body.dark-theme .sub-bar--premium .toggle-label--dark {
opacity: 1;
}
/* CTA button like screenshot */
.sub-bar--premium .sub-bar-cta {
background: transparent;
border-color: rgba(255, 255, 255, 0.35);
color: #f8fafc;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
}
.sub-bar--premium .sub-bar-cta:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.48);
}
/* Top-bar action colors by theme */
body:not(.dark-theme) .sub-bar--premium .sub-bar-cta,
body.dark-theme .sub-bar--premium .sub-bar-cta {
color: #f8fafc !important;
}
body:not(.dark-theme) .sub-bar--premium .sub-bar-phone,
body.dark-theme .sub-bar--premium .sub-bar-phone {
color: #ffffff !important;
}
body:not(.dark-theme) .sub-bar--premium .sub-bar-phone:hover,
body.dark-theme .sub-bar--premium .sub-bar-phone:hover {
color: #e2e8f0 !important;
}
/* Responsive top bar layout */
@media (max-width: 960px) {
.sub-bar--premium .sub-bar-inner {
grid-template-columns: 1fr;
justify-items: start;
gap: 10px;
}
.sub-bar-center {
justify-content: flex-start;
}
}
.sub-bar-phone {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: 600;
color: var(--phone-color);
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.phone-icon svg {
width: 15px;
height: 15px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* ---------------------------
Theme Toggle
---------------------------- */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.theme-toggle input {
display: none;
}
.toggle-track {
width: 44px;
height: 22px;
border-radius: 999px;
background-color: var(--toggle-track-bg);
position: relative;
padding: 2px;
}
.toggle-thumb {
width: 18px;
height: 18px;
background-color: var(--toggle-thumb-bg);
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform var(--transition-fast);
}
.theme-toggle input:checked + .toggle-track .toggle-thumb {
transform: translateX(20px);
}
.toggle-labels {
display: inline-flex;
gap: 4px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.toggle-label {
opacity: 0.4;
}
body:not(.dark-theme) .toggle-label--light {
opacity: 1;
}
body.dark-theme .toggle-label--dark {
opacity: 1;
}
/* ---------------------------
Responsive - Header
---------------------------- */
/* Keep the menu from colliding on medium screens */
@media (max-width: 1200px) {
.header-inner {
padding-inline: 16px;
}
.header-logo {
margin-right: 18px;
}
.main-header--premium .nav-list {
gap: 20px;
}
.main-header--premium .nav-list > li > a {
font-size: 14px;
}
}
@media (max-width: 1320px) {
.header-quick-actions {
display: none;
}
}
@media (max-width: 1100px) {
.main-header--premium .nav-list {
gap: 14px;
}
.main-header--premium .nav-list > li > a {
font-size: 0.9rem;
}
/* Prioritize menu + auth; hide quick icons before mobile breakpoint */
.header-quick-actions {
display: none;
}
}
@media (max-width: 420px) {
.party-packages-v2__amount {
font-size: 1.45rem;
}
.party-packages-v2__per {
font-size: 0.95rem;
}
}
@media (max-width: 1020px) {
.header-logo img {
height: 34px;
}
.main-header--premium .btn-auth {
padding: 9px 14px;
font-size: 0.78rem;
}
}
/* Collapse main menu earlier on small laptops/tablets */
@media (max-width: 1040px) {
.header-nav {
display: none;
}
.header-actions {
display: flex;
}
.header-quick-actions {
display: none;
}
.header-actions .nav-dropdown-parent {
display: none;
}
.header-burger {
display: flex;
}
.header-inner,
.sub-bar-inner {
padding-inline: 16px;
}
.header-nav-mobile {
position: fixed;
top: 72px;
left: 0;
right: 0;
height: calc(100dvh - 72px);
max-height: none;
border-bottom-width: 0;
background:
radial-gradient(1200px 280px at 20% 0%, rgba(184, 134, 11, 0.08) 0%, rgba(184, 134, 11, 0) 60%),
linear-gradient(180deg, rgba(250, 252, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%);
box-shadow: 0 24px 40px rgba(2, 6, 23, 0.16);
transform: translateY(-10px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
}
body.dark-theme .header-nav-mobile {
background:
radial-gradient(1200px 280px at 20% 0%, rgba(184, 134, 11, 0.16) 0%, rgba(184, 134, 11, 0) 60%),
linear-gradient(180deg, rgba(5, 8, 14, 0.98) 0%, rgba(10, 16, 28, 0.98) 100%);
}
.header-nav-mobile.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.header-mobile-close {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 12px 16px 0 auto;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.22);
background: #ffffff;
color: #0f172a;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.header-mobile-close span {
font-size: 1rem;
line-height: 1;
}
body.dark-theme .header-mobile-close {
background: rgba(15, 23, 42, 0.75);
border-color: rgba(148, 163, 184, 0.4);
color: #f8fafc;
}
.nav-list-mobile {
height: 100%;
overflow-y: auto;
padding: 14px 16px 24px;
}
}
@media (max-width: 960px) {
.header-inner,
.nav-list-mobile,
.sub-bar-inner {
padding-inline: 16px;
}
.sub-bar-left,
.sub-bar-cta {
display: none;
}
.sub-bar--premium .sub-bar-inner {
grid-template-columns: 1fr auto;
justify-items: start;
}
.header-theme-toggle {
display: none;
}
.sub-bar-text {
white-space: normal;
font-size: 0.83rem;
}
}
@media (max-width: 600px) {
.header-inner,
.nav-list-mobile,
.sub-bar-inner {
padding-inline: 12px;
}
.sub-bar-text {
font-size: 0.8rem;
}
.sub-bar-phone {
font-size: 0.85rem;
}
.header-book-btn {
height: 38px;
padding: 0 14px;
font-size: 13px;
}
}
/* =========================================
Header Redesign (visual only)
Keep existing markup/menu logic unchanged
========================================= */
.main-header.main-header--premium {
border-bottom: 1px solid rgba(2, 6, 23, 0.06);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}
.main-header--premium .sub-bar.sub-bar--premium {
background: #05070A;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.main-header--premium .sub-bar--premium .sub-bar-inner {
width: min(1280px, 100%);
margin: 0 auto;
min-height: 40px;
padding: 0 24px;
grid-template-columns: auto 1fr auto;
gap: 18px;
}
.main-header--premium .sub-bar-kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
display: inline-flex;
align-items: center;
gap: 8px;
}
.main-header--premium .sub-bar-kicker::before {
content: "\f590";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #B8860B;
font-size: 11px;
}
.main-header--premium .sub-bar-text {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.68);
}
.main-header--premium .sub-bar-cta.sub-bar-cta--ghost {
border: 0;
background: transparent;
padding: 0;
border-radius: 0;
color: rgba(255, 255, 255, 0.76);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
}
.main-header--premium .sub-bar-cta.sub-bar-cta--ghost:hover {
color: #ffffff;
transform: none;
background: transparent;
}
.main-header--premium .sub-bar-phone {
font-size: 14px;
letter-spacing: 0;
color: #ffffff;
font-weight: 700;
}
.main-header--premium .sub-bar-phone .phone-icon {
color: #B8860B;
}
.main-header--premium .header-theme-toggle .toggle-track {
width: 36px;
height: 18px;
background: rgba(255, 255, 255, 0.20);
}
.main-header--premium .header-theme-toggle .toggle-thumb {
width: 14px;
height: 14px;
top: 2px;
left: 2px;
background: #ffffff;
}
.main-header--premium .header-theme-toggle input:checked + .toggle-track .toggle-thumb {
transform: translateX(18px);
}
.main-header--premium .header-inner {
height: 90px;
width: min(1280px, 100%);
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
gap: 28px;
}
.main-header--premium .header-logo {
margin-right: 8px;
}
.main-header--premium .header-logo img {
height: 42px;
max-width: 240px;
filter: none;
}
.main-header--premium .header-nav {
justify-content: center;
}
.main-header--premium .nav-list {
gap: 34px;
}
.main-header--premium .nav-list > li > a,
.main-header--premium .nav-list .nav-dropdown-toggle {
color: #475569;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 30px 0;
background-image: none;
}
.main-header--premium .nav-list > li > a:hover,
.main-header--premium .nav-list .nav-dropdown-parent:hover > .nav-dropdown-toggle,
.main-header--premium .nav-list .nav-dropdown-parent.open > .nav-dropdown-toggle {
color: #05070A;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
transform: none;
}
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle.is-current {
color: inherit;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0;
text-decoration-line: underline;
text-decoration-color: var(--premium-gold);
text-decoration-thickness: 2px;
text-underline-offset: 10px;
}
body.dark-theme .main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle.is-current {
color: inherit;
}
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle.is-current:hover,
.main-header--premium .nav-list .nav-dropdown-parent.open > .nav-dropdown-toggle.is-current,
.main-header--premium .nav-list .nav-dropdown-parent:focus-within > .nav-dropdown-toggle.is-current {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
.main-header--premium .nav-list a:hover,
.main-header--premium .nav-list a:focus,
.main-header--premium .nav-list a:active {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle {
padding-right: 16px;
}
.main-header--premium .nav-list .nav-dropdown-parent > .nav-dropdown-toggle::after {
width: 7px;
height: 7px;
border-width: 2px;
opacity: 0.45;
}
.main-header--premium .nav-dropdown {
border-radius: 20px;
border: 1px solid rgba(2, 6, 23, 0.10);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
padding: 12px;
}
.main-header--premium .nav-dropdown--mega {
width: 600px;
max-width: min(600px, calc(100vw - 36px));
padding: 22px;
border-radius: 20px;
}
.main-header--premium .nav-mega__top {
margin: 0 0 10px;
padding: 0 0 12px;
background: transparent;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.main-header--premium .nav-mega__kicker {
font-size: 11px;
letter-spacing: 0.1em;
color: #B8860B;
font-weight: 800;
}
.main-header--premium .nav-mega__desc {
font-size: 12px;
color: #64748b;
}
.main-header--premium .nav-mega__item {
border-radius: 12px;
padding: 12px;
font-size: 14px;
}
.main-header--premium .nav-mega__item:hover {
background: #f1f5f9;
border-color: transparent;
box-shadow: none;
transform: none;
}
.main-header--premium .header-actions {
gap: 14px;
}
.main-header--premium .btn-auth {
height: 46px;
border-radius: 14px;
padding: 0 22px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: #05070A;
color: #ffffff;
border: 1px solid transparent;
box-shadow: none;
}
.main-header--premium .btn-auth:hover {
background: #1a1e26;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
}
@media (max-width: 1200px) {
.main-header--premium .sub-bar--premium .sub-bar-inner,
.main-header--premium .header-inner {
padding-left: 16px;
padding-right: 16px;
}
.main-header--premium .nav-list {
gap: 24px;
}
}
@media (max-width: 1040px) {
.main-header--premium .sub-bar--premium {
display: none;
}
.main-header--premium .header-inner {
height: 78px;
padding-left: 24px;
padding-right: 24px;
}
.main-header--premium .header-logo img {
height: 38px;
}
.header-nav-mobile {
top: 78px;
height: calc(100dvh - 78px);
}
}
@media (max-width: 600px) {
.main-header--premium .header-inner {
padding-left: 16px;
padding-right: 16px;
height: 72px;
}
.main-header--premium .header-logo img {
height: 34px;
}
.header-nav-mobile {
top: 72px;
height: calc(100dvh - 72px);
}
}
/* =========================================
HERO BOOKING (Luxury Limo Design)
========================================= */
.hero-booking {
position: relative;
width: 100%;
min-height: 620px;
background-image: url("../images/limobackground.jpg");
background-size: cover;
background-position: center;
display: flex;
align-items: stretch;
color: #ffffff;
overflow: hidden;
}
/* Embedded (inline) booking form: no full-screen hero */
.hero-booking.hero-booking--embed {
height: auto;
min-height: 0;
background-image: none;
background-color: transparent;
color: inherit;
}
.hero-booking.hero-booking--embed .hero-booking__overlay {
display: none;
}
.hero-booking.hero-booking--embed .hero-booking__inner {
max-width: none;
margin: 0;
padding: 0;
justify-content: flex-start;
}
.hero-booking.hero-booking--embed .hero-booking__card {
flex: 1 1 auto;
max-width: 100%;
}
.hero-booking__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 22%, rgba(184, 134, 11, 0.24) 0%, rgba(184, 134, 11, 0) 44%),
linear-gradient(115deg, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.78) 36%, rgba(15, 23, 42, 0.38) 72%, rgba(15, 23, 42, 0.20) 100%);
}
/* Inner layout */
.hero-booking__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: clamp(34px, 5vw, 58px) 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(24px, 4vw, 62px);
}
/* Left side */
.hero-booking__left {
flex: 1.1;
max-width: 620px;
}
.hero-booking__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.24);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(248, 250, 252, 0.96);
font-weight: 700;
}
.hero-step {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(248, 250, 252, 0.94);
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 999px;
padding: 6px 10px;
box-shadow: 0 8px 22px rgba(2, 6, 23, 0.20);
}
.hero-step .dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #b8860b;
box-shadow: 0 0 10px rgba(184, 134, 11, 0.55);
}
.hero-booking__title {
margin: 18px 0 10px;
font-family: var(--header-display-font);
font-size: clamp(2rem, 5.1vw, 3.7rem);
line-height: 1.04;
font-weight: 700;
letter-spacing: -0.02em;
}
.hero-booking__title-main {
display: inline;
}
.hero-booking__title-highlight {
display: block;
color: #b8860b;
text-shadow: 0 0 20px rgba(184, 134, 11, 0.38);
}
.hero-booking__subtitle {
margin: 12px 0 24px;
font-size: clamp(0.97rem, 1.5vw, 1.08rem);
max-width: 500px;
color: rgba(226, 232, 240, 0.94);
line-height: 1.62;
}
.hero-booking__subtitle--below-card {
display: none;
}
/* Feature bullets */
.hero-booking__features {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
font-size: 0.9rem;
color: rgba(248, 250, 252, 0.92);
}
.feature-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.feature-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #b8860b;
}
/* Right side – Card */
.hero-booking__card {
flex: 0 0 min(560px, 100%);
max-width: 560px;
background: color-mix(in srgb, var(--surface-1) 94%, transparent);
color: var(--text-primary);
border: 1px solid color-mix(in srgb, var(--line-soft) 85%, transparent);
border-radius: 24px;
padding: 18px;
box-shadow:
0 28px 52px rgba(2, 6, 23, 0.30),
0 0 0 1px rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px);
}
body.dark-theme .hero-booking__card {
background: color-mix(in srgb, var(--surface-1) 88%, transparent);
border-color: rgba(148, 163, 184, 0.30);
}
/* Tabs */
.booking-tabs {
display: flex;
border-radius: 14px;
background-color: color-mix(in srgb, var(--surface-2) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--line-soft) 88%, transparent);
padding: 6px;
gap: 6px;
}
.booking-tab {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 10px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.booking-tab__icon svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 1.7;
fill: none;
}
.booking-tab.active {
background-color: #000000;
color: #ffffff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
transform: translateY(-1px);
}
body.dark-theme .booking-tab.active {
box-shadow: 0 10px 20px rgba(2, 6, 23, 0.45);
}
.booking-tabs__note {
margin-top: 10px;
font-size: 0.76rem;
color: var(--text-muted);
}
/* Forms */
.booking-forms {
margin-top: 14px;
}
.booking-form {
display: none;
animation: heroFormFade 0.25s ease-out;
}
.booking-form.active {
display: block;
}
@keyframes heroFormFade {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.booking-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.booking-field {
flex: 1;
margin-bottom: 10px;
}
.booking-field label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 700;
margin-bottom: 4px;
}
/* match Bootstrap form controls spacing but keep your style */
.booking-field input {
width: 100%;
padding: 11px 12px;
border-radius: 10px;
border: 1px solid var(--line-soft);
background-color: var(--surface-2);
color: var(--text-primary);
font-size: 0.9rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.booking-field input[type="date"],
.booking-field input[type="time"],
.party-form-field input[type="date"],
.party-form-field input[type="time"],
.quote-field input[type="date"],
.quote-field input[type="time"],
.form-card .form-control[type="date"],
.form-card .form-control[type="time"] {
color-scheme: dark;
}
.booking-field input[type="date"]::-webkit-calendar-picker-indicator,
.booking-field input[type="time"]::-webkit-calendar-picker-indicator,
.party-form-field input[type="date"]::-webkit-calendar-picker-indicator,
.party-form-field input[type="time"]::-webkit-calendar-picker-indicator,
.quote-field input[type="date"]::-webkit-calendar-picker-indicator,
.quote-field input[type="time"]::-webkit-calendar-picker-indicator,
.form-card .form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-card .form-control[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(62%) sepia(46%) saturate(780%) hue-rotate(8deg) brightness(95%) contrast(90%);
opacity: 1;
cursor: pointer;
}
.main-header--premium .header-burger {
border: 0;
background: transparent;
box-shadow: none;
}
.main-header--premium .header-burger.active {
background: transparent;
border: 0;
}
.main-header--premium .header-burger.active span {
background-color: #ffffff;
}
.booking-field input:focus,
.booking-field input:focus-visible,
.booking-field select:focus,
.booking-field select:focus-visible,
.booking-field textarea:focus,
.booking-field textarea:focus-visible {
outline: none;
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.20);
}
.passenger-stepper {
display: grid;
grid-template-columns: 42px 1fr 42px;
align-items: center;
border: 1px solid var(--line-soft);
border-radius: 10px;
background-color: var(--surface-2);
overflow: hidden;
}
.passenger-stepper:focus-within {
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.20);
}
.passenger-stepper .passenger-input {
border: 0;
border-left: 1px solid var(--line-soft);
border-right: 1px solid var(--line-soft);
border-radius: 0;
text-align: center;
font-weight: 700;
box-shadow: none;
appearance: textfield;
}
.passenger-stepper .passenger-input::-webkit-outer-spin-button,
.passenger-stepper .passenger-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stepper-btn {
border: 0;
height: 100%;
background: transparent;
color: var(--text-secondary);
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.stepper-btn:hover:not(:disabled) {
background-color: var(--surface-3);
color: var(--text-primary);
}
.stepper-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Submit */
.booking-submit {
width: 100%;
margin-top: 4px;
padding: 13px 0;
border-radius: 12px;
border: none;
background: linear-gradient(120deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.30);
transition:
background var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.booking-submit:hover {
background: linear-gradient(120deg, #111827 0%, #020617 100%);
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(15, 23, 42, 0.35);
}
body.dark-theme .booking-submit {
background: linear-gradient(120deg, #f8fafc 0%, #dbe4ee 100%);
color: #0f172a;
}
body.dark-theme .booking-submit:hover {
background: linear-gradient(120deg, #ffffff 0%, #e2e8f0 100%);
}
.booking-trustline {
margin-top: 10px;
font-size: 0.82rem;
font-weight: 700;
color: var(--text-secondary);
}
.booking-subhint {
margin-top: 4px;
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.45;
}
/* Horizontal homepage booking layout (admin controlled) */
.hero-booking.hero-booking--horizontal {
min-height: 430px;
align-items: flex-end;
}
.hero-booking.hero-booking--horizontal .hero-booking__overlay {
background: linear-gradient(180deg, rgba(2, 6, 23, 0.62) 0%, rgba(2, 6, 23, 0.72) 100%);
}
.hero-booking.hero-booking--horizontal .hero-booking__inner {
display: block;
max-width: 1320px;
padding-top: 72px;
padding-bottom: 40px;
}
.hero-booking.hero-booking--horizontal .hero-booking__left {
display: none;
}
.hero-booking.hero-booking--horizontal .hero-booking__card {
width: 100%;
max-width: 100%;
border-radius: 999px;
padding: 10px 12px 10px 18px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(6px);
}
.hero-booking.hero-booking--horizontal .booking-tabs {
width: fit-content;
margin-bottom: 10px;
}
.hero-booking.hero-booking--horizontal .booking-tabs__note {
display: none;
}
.hero-booking.hero-booking--horizontal .booking-forms {
margin-top: 0;
}
.hero-booking.hero-booking--horizontal .booking-form.active {
display: flex;
align-items: flex-end;
gap: 10px;
flex-wrap: nowrap;
}
.hero-booking.hero-booking--horizontal .booking-grid {
display: contents;
}
.hero-booking.hero-booking--horizontal .booking-field {
margin-bottom: 0;
flex: 1 1 180px;
}
.hero-booking.hero-booking--horizontal .booking-field label {
text-transform: none;
letter-spacing: 0;
font-size: 0.88rem;
margin-bottom: 6px;
color: #5b6472;
}
.hero-booking.hero-booking--horizontal .booking-field input,
.hero-booking.hero-booking--horizontal .passenger-stepper {
min-height: 56px;
border-radius: 999px;
background: #ffffff;
}
.hero-booking.hero-booking--horizontal .passenger-stepper {
grid-template-columns: 44px 70px 44px;
}
.hero-booking.hero-booking--horizontal .booking-submit {
width: auto;
min-width: 165px;
min-height: 56px;
margin-top: 0;
border-radius: 999px;
padding: 0 24px;
letter-spacing: 0;
text-transform: none;
font-size: 1.6rem;
font-weight: 500;
background: #000000;
box-shadow: none;
}
.hero-booking.hero-booking--horizontal .booking-submit:hover {
background: #111111;
transform: translateY(-1px);
box-shadow: none;
}
.hero-booking.hero-booking--horizontal .booking-trustline,
.hero-booking.hero-booking--horizontal .booking-subhint {
display: none;
}
.hero-booking.hero-booking--horizontal .flight-field {
flex: 1 1 200px;
}
/* Responsive – Hero */
@media (max-width: 1024px) {
.hero-booking__inner {
align-items: flex-start;
}
.hero-booking__title {
font-size: clamp(2rem, 6vw, 3.1rem);
}
.hero-booking__card {
flex: 0 0 440px;
max-width: 440px;
}
}
@media (max-width: 900px) {
.hero-booking {
height: auto;
min-height: 0;
}
.hero-booking__inner {
flex-direction: column;
align-items: stretch;
gap: 26px;
}
.hero-booking__left {
max-width: 100%;
}
.hero-booking__subtitle {
max-width: 100%;
}
.hero-booking__card {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 560px;
}
.hero-booking.hero-booking--horizontal {
min-height: 0;
}
.hero-booking.hero-booking--horizontal .hero-booking__inner {
padding-top: 42px;
padding-bottom: 28px;
}
.hero-booking.hero-booking--horizontal .hero-booking__card {
border-radius: 22px;
padding: 12px;
}
.hero-booking.hero-booking--horizontal .booking-form.active {
flex-wrap: wrap;
}
.hero-booking.hero-booking--horizontal .booking-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.hero-booking.hero-booking--horizontal .booking-field,
.hero-booking.hero-booking--horizontal .flight-field {
flex: 1 1 calc(50% - 10px);
}
.hero-booking.hero-booking--horizontal .booking-submit {
width: 100%;
font-size: 1.1rem;
}
}
@media (max-width: 640px) {
.hero-booking__inner {
padding-inline: 14px;
}
.hero-booking__title {
font-size: 1.95rem;
}
.hero-booking__badge,
.hero-step {
font-size: 0.68rem;
}
.booking-grid {
grid-template-columns: 1fr;
}
.booking-tab {
font-size: 0.72rem;
letter-spacing: 0.06em;
padding-inline: 6px;
}
.booking-tab__icon {
display: none;
}
.hero-booking__card {
border-radius: 18px;
padding: 14px;
}
.hero-booking.hero-booking--horizontal .booking-field,
.hero-booking.hero-booking--horizontal .flight-field {
flex: 1 1 100%;
}
.hero-booking.hero-booking--horizontal .booking-grid {
grid-template-columns: 1fr;
}
.hero-booking.hero-booking--horizontal .booking-field input,
.hero-booking.hero-booking--horizontal .passenger-stepper,
.hero-booking.hero-booking--horizontal .booking-submit {
min-height: 50px;
}
}
/* =======================================
SERVICE HIGHLIGHTS (HOME)
======================================= */
.service-highlights {
background: #efefef;
padding: 96px 24px 90px;
}
.service-highlights__inner {
max-width: 1400px;
margin: 0 auto;
}
.service-highlights__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 78px 62px;
}
.service-highlight-card {
text-align: center;
padding: 0 20px;
}
.service-highlight-card__icon {
width: 28px;
height: 28px;
margin: 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: #181818;
}
.service-highlight-card__icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
stroke-width: 1.8;
fill: none;
}
.service-highlight-card__title {
margin: 24px 0 0;
font-size: clamp(2rem, 2.35vw, 2.9rem);
line-height: 1.12;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: uppercase;
color: #0c1220;
}
.service-highlight-card__text {
margin: 18px auto 0;
max-width: 430px;
font-family: "Times New Roman", Times, serif;
font-size: 1.08rem;
line-height: 1.55;
color: #4f5f79;
}
.service-highlight-card__link {
margin-top: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #111111;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 0.88rem;
font-weight: 500;
border-bottom: 1px solid #111111;
}
.service-highlight-card__link::after {
content: "";
width: 0;
height: 0;
transition: transform 0.22s ease;
}
.service-highlight-card__link:hover::after {
transform: translateX(0);
}
@media (max-width: 992px) {
.service-highlights {
padding: 68px 20px 64px;
}
.service-highlights__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 44px 28px;
}
.service-highlight-card__text {
font-size: 1rem;
}
}
@media (max-width: 767px) {
.service-highlights {
padding: 52px 14px;
}
.service-highlights__grid {
grid-template-columns: 1fr;
gap: 34px;
}
.service-highlight-card {
padding: 0 8px;
}
.service-highlight-card__title {
font-size: 1.7rem;
margin-top: 16px;
}
.service-highlight-card__text {
font-size: 1rem;
max-width: 460px;
}
}
/* =======================================
COVERAGE EXPLORER (HOME)
======================================= */
.coverage-premium {
background: #f6f8fc;
padding: 100px 24px;
}
.coverage-premium__inner {
max-width: 1280px;
margin: 0 auto;
}
.coverage-premium__header {
margin-bottom: 34px;
}
.coverage-premium__eyebrow {
margin: 0;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #6b7280;
}
.coverage-premium__title {
margin: 10px 0 0;
font-size: clamp(2rem, 3.1vw, 2.625rem);
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.02em;
color: #0b1426;
}
.coverage-premium__subtitle {
margin: 12px 0 0;
max-width: 700px;
font-size: 17px;
line-height: 1.6;
color: #6b7280;
}
.coverage-premium__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
.coverage-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
color: #111827;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.coverage-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}
.coverage-card__media {
position: relative;
height: 150px;
overflow: hidden;
}
.coverage-card__badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
background: #0b1426;
color: #ffffff;
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
}
.coverage-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.coverage-card:hover .coverage-card__image {
transform: scale(1.05);
}
.coverage-card__body {
padding: 16px 18px 20px;
}
.coverage-card__title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
color: #111827;
}
.coverage-card__subtitle {
margin: 4px 0 0;
font-size: 13px;
color: #6b7280;
line-height: 1.45;
min-height: 36px;
}
.coverage-card__cta {
display: inline-block;
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: #0b1426;
}
.coverage-premium__footer {
margin-top: 26px;
}
.coverage-premium__all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #0b1426;
border-radius: 10px;
padding: 10px 18px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: #0b1426;
background: #ffffff;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.coverage-premium__all-btn:hover {
background: #0b1426;
color: #ffffff;
transform: translateY(-1px);
}
body.dark-theme .coverage-premium {
background: #0d1526;
}
body.dark-theme .coverage-premium__title,
body.dark-theme .coverage-card,
body.dark-theme .coverage-card__title,
body.dark-theme .coverage-card__cta {
color: #e5edf8;
}
body.dark-theme .coverage-premium__subtitle,
body.dark-theme .coverage-card__subtitle,
body.dark-theme .coverage-premium__eyebrow {
color: #9db1c9;
}
body.dark-theme .coverage-card {
background: #111b2b;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.34);
}
body.dark-theme .coverage-premium__all-btn {
border-color: #475569;
color: #dce5f1;
background: transparent;
}
body.dark-theme .coverage-premium__all-btn:hover {
background: #e2e8f0;
color: #0f172a;
}
@media (max-width: 1024px) {
.coverage-premium {
padding: 84px 20px;
}
.coverage-premium__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
}
@media (max-width: 767px) {
.coverage-premium {
padding: 68px 16px;
}
.coverage-premium__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.coverage-card__media {
height: 120px;
}
.coverage-card__body {
padding: 14px;
}
}
/* =======================================
FEATURED LUXURY FLEET SLIDER (BROWSE CARS)
======================================= */
.fleet-slider {
width: 100%;
background: var(--accent-soft);
padding: 40px 0 56px;
}
.fleet-slider__inner {
max-width: 1300px;
margin: 0 auto;
padding-inline: 24px;
}
.fleet-slider__header {
margin-bottom: 18px;
}
.fleet-slider__title {
margin: 0;
font-size: 2.4rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--header-text);
}
.fleet-slider__subtitle {
margin: 4px 0 0;
font-size: 0.95rem;
opacity: 0.7;
color: var(--header-text);
}
/* Dark mode enhancement hook */
body.dark-theme .fleet-slider,
.fleet-slider.fleet-slider--dark {
background: #020617;
}
/* Viewport and track */
.fleet-slider__viewport {
margin-top: 18px;
overflow: hidden;
}
.fleet-slider__track {
display: flex;
gap: 24px;
}
/* Car card */
.car-card {
flex: 0 0 340px;
max-width: 340px;
}
.car-card__inner {
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.6);
background: radial-gradient(circle at top left, #4b5563, #020617 55%, #020617 100%);
color: #ffffff;
display: flex;
flex-direction: column;
min-height: 380px;
}
.car-card__top {
padding: 18px 20px 10px;
}
.car-card__title {
margin: 0 0 4px;
font-size: 1.05rem;
font-weight: 700;
}
.car-card__subtitle {
margin: 0 0 12px;
font-size: 0.8rem;
opacity: 0.8;
display: flex;
align-items: center;
gap: 4px;
}
.car-card__info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
font-size: 0.6rem;
}
/* spec pills */
.car-card__specs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.spec-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.75);
font-size: 0.75rem;
}
.spec-icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
}
/* image */
.car-card__image {
flex: 1;
padding: 0 20px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.car-card__image img {
width: 100%;
max-width: 260px;
display: block;
}
/* bottom info with gradient overlay */
.car-card__bottom {
padding: 12px 18px 14px;
background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4));
}
.car-card__deal {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
color: #bbf7d0;
}
.deal-icon svg {
width: 16px;
height: 16px;
stroke: #22c55e;
stroke-width: 2;
fill: none;
}
.car-card__price {
margin-top: 8px;
font-size: 0.9rem;
}
.price-main {
font-size: 1.4rem;
font-weight: 800;
}
.car-card__footnote {
margin-top: 4px;
font-size: 0.76rem;
opacity: 0.75;
}
/* Controls: dots + arrows */
.fleet-slider__controls {
margin-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.fleet-slider__dots {
display: flex;
gap: 6px;
}
.fleet-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.25);
}
.fleet-dot.active {
width: 8px;
height: 8px;
background: var(--accent);
}
/* arrows */
.fleet-slider__arrows {
display: flex;
gap: 10px;
}
.fleet-arrow {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
background: #ffffff;
color: #020617;
font-size: 1.1rem;
line-height: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
opacity var(--transition-fast);
}
body.dark-theme .fleet-arrow {
background: #020617;
color: #e5e7eb;
}
.fleet-arrow:hover {
transform: translateY(-1px);
}
.fleet-arrow[disabled] {
opacity: 0.4;
cursor: default;
}
/* =======================================
FLEET SLIDER (ELEGANT CARD VARIANT)
Used on /party-bus (static cards)
======================================= */
.fleet-slider.fleet-slider--elegant {
background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}
.fleet-slider--elegant .fleet-slider__title {
letter-spacing: 0.02em;
}
.fleet-slider--elegant .fleet-slider__viewport {
/* Prevent card shadow from getting clipped */
padding-top: 44px;
padding-bottom: 52px;
}
.fleet-slider--elegant .fleet-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 26px;
align-items: stretch;
}
.fleet-slider--elegant .car-card {
flex: initial;
max-width: none;
}
.fleet-slider--elegant .car-card__inner {
border-radius: 24px;
overflow: hidden;
background: #ffffff;
color: #0f172a;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow:
0 14px 34px rgba(15, 23, 42, 0.10),
0 2px 10px rgba(15, 23, 42, 0.06);
min-height: 0;
}
.fleet-slider--elegant .car-card__image.car-card__image--elegant {
position: relative;
flex: 0 0 auto;
padding: 18px 18px 10px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f3f6fb 58%, #eef2f7 100%);
}
.fleet-slider--elegant .car-card__image.car-card__image--elegant img {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
height: 210px;
object-fit: contain;
display: block;
filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.18));
}
.fleet-slider--elegant .car-card__badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
padding: 8px 14px;
border-radius: 999px;
background: #0b1220;
color: #ffffff;
font-weight: 800;
letter-spacing: 0.06em;
font-size: 0.78rem;
text-transform: uppercase;
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
}
.fleet-slider--elegant .car-card__top {
padding: 16px 18px 8px;
}
.fleet-slider--elegant .car-card__title {
font-size: 1.18rem;
font-weight: 800;
margin-bottom: 8px;
}
.fleet-slider--elegant .car-card__price-row {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 12px;
}
.fleet-slider--elegant .car-card__price-main {
font-size: 2.15rem;
font-weight: 900;
letter-spacing: -0.02em;
}
.fleet-slider--elegant .car-card__price-unit {
font-size: 0.95rem;
color: rgba(15, 23, 42, 0.65);
font-weight: 700;
}
.fleet-slider--elegant .car-card__specs {
gap: 10px;
}
.fleet-slider--elegant .spec-pill {
background: #f1f5f9;
color: #0f172a;
border: 1px solid rgba(15, 23, 42, 0.06);
padding: 8px 12px;
font-size: 0.86rem;
gap: 8px;
}
.fleet-slider--elegant .spec-icon svg {
width: 16px;
height: 16px;
stroke-width: 1.8;
}
.fleet-slider--elegant .car-card__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 10px 18px 6px;
}
.fleet-slider--elegant .car-card__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
border-radius: 14px;
text-decoration: none;
font-weight: 800;
font-size: 0.98rem;
letter-spacing: 0.01em;
border: 1px solid transparent;
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}
/* Override global link colors for button-like anchors */
.fleet-slider--elegant a.car-card__btn--primary,
.fleet-slider--elegant a.car-card__btn--primary:visited {
color: #ffffff !important;
}
.fleet-slider--elegant a.car-card__btn--primary:hover,
.fleet-slider--elegant a.car-card__btn--primary:focus {
color: #ffffff !important;
}
.fleet-slider--elegant a.car-card__btn--ghost,
.fleet-slider--elegant a.car-card__btn--ghost:visited {
color: #0f172a !important;
}
.fleet-slider--elegant a.car-card__btn--ghost:hover,
.fleet-slider--elegant a.car-card__btn--ghost:focus {
color: #0b1220 !important;
}
.fleet-slider--elegant .car-card__btn--primary {
background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
color: #ffffff;
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
}
.fleet-slider--elegant .car-card__btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 14px 22px rgba(15, 23, 42, 0.22);
color: #ffffff;
}
.fleet-slider--elegant .car-card__btn--ghost {
background: #ffffff;
color: #0f172a;
border-color: rgba(15, 23, 42, 0.14);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.fleet-slider--elegant .car-card__btn--ghost:hover {
transform: translateY(-1px);
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.22);
color: #0b1220;
}
.fleet-slider--elegant .car-card__meta {
padding: 8px 18px 16px;
font-size: 0.92rem;
color: rgba(15, 23, 42, 0.70);
display: flex;
align-items: center;
gap: 8px;
}
.fleet-slider--elegant .car-card__meta-star {
color: #0f172a;
}
@media (max-width: 576px) {
.fleet-slider--elegant .car-card {
flex: 0 0 86vw;
max-width: 86vw;
}
.fleet-slider--elegant .car-card__actions {
grid-template-columns: 1fr;
}
}
/* Responsive – Fleet */
@media (max-width: 1100px) {
.car-card {
flex: 0 0 320px;
max-width: 320px;
}
}
@media (max-width: 768px) {
.fleet-slider__inner {
padding-inline: 16px;
}
.fleet-slider__title {
font-size: 2rem;
}
.car-card {
flex: 0 0 85%;
max-width: none;
}
}
/* ========================================
Popular Routes & Pricing Samples (Cards)
======================================== */
.routes-samples {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 60px 24px 70px;
}
.routes-samples__inner {
max-width: 1200px;
margin: 0 auto;
}
.routes-samples__header {
max-width: 640px;
margin-bottom: 28px;
}
.routes-samples__eyebrow {
margin: 0 0 6px;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.routes-samples__title {
margin: 0 0 6px;
font-size: 1.9rem;
}
.routes-samples__subtitle {
margin: 0;
font-size: 0.96rem;
opacity: 0.8;
}
/* Grid of cards */
.routes-samples__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
/* Card */
.route-card {
border-radius: 20px;
padding: 18px 18px 16px;
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.14),
rgba(15, 23, 42, 0.06)
);
border: 1px solid var(--header-border);
display: flex;
flex-direction: column;
gap: 14px;
}
.route-card__top {
display: flex;
flex-direction: column;
gap: 10px;
}
.route-card__label-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.route-card__badge {
display: inline-flex;
align-items: center;
padding: 4px 11px;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.route-card__badge--primary {
background: rgba(34, 197, 94, 0.15);
color: #16a34a;
}
.route-card__badge--business {
background: rgba(59, 130, 246, 0.16);
color: #2563eb;
}
.route-card__badge--evening {
background: rgba(184, 134, 11, 0.16);
color: #b8860b;
}
.route-card__badge--limo {
background: rgba(244, 63, 94, 0.16);
color: #e11d48;
}
.route-card__route {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.route-card__city {
display: inline-block;
}
.route-card__arrow {
display: inline-block;
margin: 0 8px;
opacity: 0.6;
}
/* Meta pills */
.route-card__meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.meta-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.05);
font-size: 0.8rem;
opacity: 0.9;
}
.meta-icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 1.6;
fill: none;
}
/* prices */
.route-card__prices {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.price-chip {
border-radius: 14px;
padding: 9px 10px;
background: rgba(15, 23, 42, 0.06);
border: 1px solid rgba(148, 163, 184, 0.45);
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.82rem;
}
.price-chip__label {
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.75;
}
.price-chip__value {
font-weight: 600;
}
/* footer */
.route-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 2px;
}
.route-card__note {
font-size: 0.78rem;
opacity: 0.78;
}
/* CTA */
.route-card__cta {
padding: 8px 16px;
border-radius: 999px;
border: none;
background: var(--accent);
color: var(--btn-auth-text);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
}
.route-card__cta:hover {
background: #000000;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.4);
}
/* Disclaimer */
.routes-samples__disclaimer {
margin-top: 14px;
font-size: 0.78rem;
opacity: 0.7;
}
/* Responsive – Routes */
@media (max-width: 900px) {
.routes-samples__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.routes-samples {
padding-inline: 16px;
}
.routes-samples__title {
font-size: 1.7rem;
}
.route-card__prices {
grid-template-columns: 1fr;
}
.route-card__footer {
flex-direction: column;
align-items: flex-start;
}
.route-card__cta {
align-self: stretch;
text-align: center;
justify-content: center;
}
}
/* =========================================
Instant Quote Calculator
========================================= */
.quote {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 64px 24px 74px;
}
.quote__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 36px;
align-items: center;
}
/* Left text area */
.quote__eyebrow {
margin: 0 0 6px;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.quote__title {
margin: 0 0 10px;
font-size: 2rem;
}
.quote__subtitle {
margin: 0 0 18px;
font-size: 0.98rem;
opacity: 0.8;
max-width: 450px;
}
.quote__bullets {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
font-size: 0.9rem;
opacity: 0.9;
}
.quote__bullets li::before {
content: "•";
margin-right: 6px;
}
/* Calculator card */
.quote__card {
border-radius: 20px;
padding: 18px 18px 16px;
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.12),
rgba(15, 23, 42, 0.03)
);
border: 1px solid var(--header-border);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}
/* Trip toggle */
.quote__trip-toggle {
display: flex;
background: var(--accent-soft);
border-radius: 999px;
padding: 4px;
gap: 6px;
margin-bottom: 16px;
}
.quote-trip-btn {
flex: 1;
border-radius: 999px;
border: none;
background: transparent;
color: var(--header-text);
padding: 8px 10px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}
.quote-trip-btn.active {
background: var(--accent);
color: var(--btn-auth-text);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.35);
transform: translateY(-1px);
}
/* Form fields */
.quote__form {
margin-bottom: 12px;
}
.quote__form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
.quote-field {
display: flex;
flex-direction: column;
gap: 4px;
grid-column: span 2;
}
.quote-field--half {
grid-column: span 1;
}
.quote-field label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.7;
}
.quote-field input,
.quote-field select {
padding: 10px 11px;
border-radius: 10px;
border: 1px solid var(--header-border);
background: var(--accent-soft);
color: var(--header-text);
font-size: 0.9rem;
}
.quote-field input:focus,
.quote-field select:focus {
outline: none;
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.20);
}
/* Result area */
.quote__result {
margin-top: 8px;
padding: 12px 12px 12px;
border-radius: 16px;
background: rgba(15, 23, 42, 0.9);
color: #f9fafb;
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
}
body.dark-theme .quote__result {
background: rgba(15, 23, 42, 0.95);
}
.quote-result__left {
min-width: 160px;
}
.quote-result__label {
margin: 0;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.8;
}
.quote-result__price {
margin: 2px 0 0;
font-size: 1.6rem;
font-weight: 800;
}
.quote-result__hint {
margin: 4px 0 0;
font-size: 0.8rem;
opacity: 0.8;
}
.quote-result__right {
display: flex;
flex-direction: column;
gap: 6px;
}
.quote-result__tagline {
margin: 0;
font-size: 0.78rem;
opacity: 0.8;
}
/* CTA */
.quote-result__cta {
align-self: flex-end;
padding: 8px 16px;
border-radius: 999px;
border: none;
background: #b8860b;
color: #111827;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
.quote-result__cta:hover {
background: #b8860b;
transform: translateY(-1px);
}
/* Responsive – Quote */
@media (max-width: 960px) {
.quote__inner {
grid-template-columns: 1fr;
align-items: flex-start;
}
.quote__subtitle {
max-width: none;
}
}
@media (max-width: 640px) {
.quote {
padding-inline: 16px;
}
.quote__form-grid {
grid-template-columns: 1fr;
}
.quote-field--half {
grid-column: span 1;
}
.quote__result {
flex-direction: column;
align-items: flex-start;
}
.quote-result__cta {
align-self: stretch;
text-align: center;
}
}
/* =========================================
Pricing Explorer (Routes + Instant Quote)
========================================= */
.pricing-explorer {
background: var(--surface-1);
padding: 100px 24px;
}
.pricing-explorer__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: 60px;
align-items: center;
}
.pricing-explorer__eyebrow {
margin: 0;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: #6b7280;
}
.pricing-explorer__title {
margin: 10px 0 0;
font-size: clamp(2rem, 3.1vw, 2.625rem);
line-height: 1.2;
color: #0b1426;
font-weight: 700;
letter-spacing: -0.02em;
}
.pricing-explorer__subtitle {
margin: 14px 0 0;
max-width: 520px;
font-size: 17px;
line-height: 1.6;
color: #6b7280;
}
.pricing-explorer__benefits {
margin: 20px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
font-size: 15px;
color: #1f2937;
}
.pricing-explorer__benefits li {
display: inline-flex;
align-items: center;
gap: 8px;
}
.pricing-explorer__benefits li span {
color: #0f766e;
font-weight: 700;
}
.pricing-routes-grid {
margin-top: 26px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.route-card--explorer {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 18px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}
.pricing-routes-empty {
grid-column: 1 / -1;
border: 1px solid #dbe2ea;
background: linear-gradient(145deg, #f8fafc, #f1f5f9);
border-radius: 16px;
padding: 22px;
}
.pricing-routes-empty h3 {
margin: 0;
font-size: 18px;
color: #0f172a;
}
.pricing-routes-empty p {
margin: 6px 0 0;
color: #64748b;
font-size: 14px;
}
.pricing-explorer__disclaimer {
margin: 14px 0 0;
font-size: 12px;
color: #6b7280;
}
.quote--explorer {
border: 0;
padding: 0;
background: transparent;
color: inherit;
}
.quote__card--explorer {
width: 100%;
border-radius: 20px;
padding: 26px;
border: 1px solid #e2e8f0;
background: #ffffff;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.quote--explorer .quote__trip-toggle {
background: #f3f5f8;
border-radius: 14px;
padding: 5px;
gap: 6px;
}
.quote--explorer .quote-trip-btn {
border-radius: 10px;
font-size: 12px;
letter-spacing: 0.08em;
color: #334155;
}
.quote--explorer .quote-trip-btn:not(.active):hover {
background: #e9edf4;
}
.quote--explorer .quote-trip-btn.active {
background: #0b1426;
color: #ffffff;
}
.quote--explorer .quote-field label {
color: #64748b;
opacity: 1;
}
.quote--explorer .quote-field input,
.quote--explorer .quote-field select {
height: 48px;
border-radius: 10px;
border: 1px solid #d1d5db;
padding: 0 14px;
font-size: 15px;
background: #f9fafb;
color: #0f172a;
}
.quote--explorer .quote-field input:focus,
.quote--explorer .quote-field select:focus {
outline: none;
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.20);
background: #ffffff;
}
.quote__result--explorer {
margin-top: 12px;
border-radius: 16px;
padding: 14px;
background: #0f172a;
}
.quote__result--explorer .quote-result__label {
font-size: 13px;
letter-spacing: 0.06em;
opacity: 0.82;
}
.quote__result--explorer .quote-result__price {
font-size: 34px;
line-height: 1.1;
}
.quote__result--explorer .quote-result__tagline {
font-size: 12px;
opacity: 0.9;
}
.quote--explorer .quote-result__cta {
height: 50px;
border-radius: 12px;
padding: 0 20px;
background: linear-gradient(135deg, #ff5a3c, #ff7a18);
color: #ffffff;
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.quote--explorer .quote-result__cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(255, 100, 50, 0.35);
}
.quote__trust {
margin-top: 12px;
display: grid;
gap: 4px;
font-size: 13px;
color: #475569;
font-weight: 600;
}
body.dark-theme .pricing-explorer {
background: #0b1220;
}
body.dark-theme .pricing-explorer__title,
body.dark-theme .pricing-explorer__benefits,
body.dark-theme .pricing-routes-empty h3,
body.dark-theme .quote--explorer .quote-trip-btn.active,
body.dark-theme .quote--explorer .quote-field input,
body.dark-theme .quote--explorer .quote-field select,
body.dark-theme .quote__trust {
color: #e5edf8;
}
body.dark-theme .pricing-explorer__subtitle,
body.dark-theme .pricing-explorer__eyebrow,
body.dark-theme .pricing-explorer__disclaimer,
body.dark-theme .pricing-routes-empty p {
color: #9db1c9;
}
body.dark-theme .route-card--explorer,
body.dark-theme .quote__card--explorer,
body.dark-theme .pricing-routes-empty {
background: #111b2b;
border-color: #2b3a53;
}
body.dark-theme .quote--explorer .quote__trip-toggle {
background: #0f172a;
}
body.dark-theme .quote--explorer .quote-trip-btn {
color: #c7d3e3;
}
body.dark-theme .quote--explorer .quote-trip-btn:not(.active):hover {
background: #162235;
}
body.dark-theme .quote--explorer .quote-field input,
body.dark-theme .quote--explorer .quote-field select {
background: #0f172a;
border-color: #334155;
}
body.dark-theme .quote--explorer .quote-field input:focus,
body.dark-theme .quote--explorer .quote-field select:focus {
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.20);
}
@media (max-width: 1120px) {
.pricing-explorer {
padding: 84px 20px;
}
.pricing-explorer__inner {
grid-template-columns: 1fr;
gap: 34px;
}
.pricing-explorer__right {
max-width: 520px;
width: 100%;
}
}
@media (max-width: 767px) {
.pricing-explorer {
padding: 68px 16px;
}
.pricing-routes-grid {
grid-template-columns: 1fr;
}
.quote__card--explorer {
padding: 18px;
}
}
/* =====================================
Service Area Section (Maryland & DC)
===================================== */
.service-area {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 60px 24px 70px;
}
.service-area__inner {
max-width: 1200px;
margin: 0 auto;
}
/* Top layout */
.service-area__left {
max-width: 460px;
margin-bottom: 26px;
}
.service-area__eyebrow {
margin: 0 0 6px;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.service-area__title {
margin: 0 0 8px;
font-size: 2rem;
}
.service-area__subtitle {
margin: 0 0 16px;
font-size: 0.96rem;
opacity: 0.82;
}
.service-area__highlights {
display: grid;
gap: 6px;
font-size: 0.88rem;
opacity: 0.9;
}
.sa-highlight {
display: inline-flex;
align-items: center;
gap: 8px;
}
.sa-highlight__dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #22c55e;
}
/* Right grid */
.service-area__right {
display: flex;
gap: 20px;
margin-top: 12px;
}
/* Cards */
.sa-card {
border-radius: 18px;
padding: 16px 16px 14px;
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.12),
rgba(15, 23, 42, 0.04)
);
border: 1px solid var(--header-border);
display: flex;
flex-direction: column;
gap: 8px;
}
.sa-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sa-card__title {
margin: 0;
font-size: 1.02rem;
font-weight: 600;
}
.sa-card__badge {
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
background: rgba(15, 23, 42, 0.08);
opacity: 0.9;
}
.sa-card__badge--primary {
background: rgba(59, 130, 246, 0.16);
color: #2563eb;
}
.sa-card__badge--accent {
background: rgba(184, 134, 11, 0.16);
color: #b8860b;
}
.sa-card__subtitle {
margin: 0;
font-size: 0.86rem;
opacity: 0.85;
}
/* Tags */
.sa-card__tags {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sa-tag {
padding: 4px 9px;
border-radius: 999px;
font-size: 0.76rem;
background: rgba(15, 23, 42, 0.06);
border: 1px solid rgba(148, 163, 184, 0.5);
white-space: nowrap;
}
/* CTA bar */
.service-area__cta {
margin-top: 26px;
padding: 12px 16px;
border-radius: 15px;
background: var(--accent-soft);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.service-area__cta-text {
margin: 0;
font-size: 0.9rem;
opacity: 0.9;
}
.service-area__cta-btn {
padding: 9px 18px;
border-radius: 999px;
border: none;
background: var(--accent);
color: var(--btn-auth-text);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
}
.service-area__cta-btn:hover {
background: #000000;
color: #fff;
transform: translateY(-1px);
}
/* Responsive – Service area */
@media (max-width: 900px) {
.service-area__right {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.service-area {
padding-inline: 16px;
}
.service-area__title {
font-size: 1.7rem;
}
.service-area__cta {
flex-direction: column;
align-items: flex-start;
}
.service-area__cta-btn {
align-self: stretch;
text-align: center;
}
}
/* ===========================
FAQ Section
=========================== */
.faq {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 60px 24px 70px;
}
.faq__inner {
max-width: 900px;
margin: 0 auto;
}
.faq__header {
margin-bottom: 24px;
}
.faq__eyebrow {
margin: 0 0 6px;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.faq__title {
margin: 0 0 6px;
font-size: 1.9rem;
}
.faq__subtitle {
margin: 0;
font-size: 0.94rem;
opacity: 0.8;
}
/* FAQ list */
.faq__list {
margin-top: 18px;
border-radius: 18px;
border: 1px solid var(--header-border);
background: var(--accent-soft);
overflow: hidden;
}
/* Item */
.faq-item {
border-top: 1px solid rgba(148, 163, 184, 0.3);
}
.faq-item:first-child {
border-top: none;
}
.faq-item__header {
width: 100%;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: background-color var(--transition-fast);
}
.faq-item__header:hover {
background: rgba(15, 23, 42, 0.04);
}
.faq-item__question {
font-size: 0.96rem;
font-weight: 500;
color: var(--header-text);
}
/* Icon (plus/minus) */
.faq-item__icon {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
.faq-line {
position: absolute;
background: var(--header-text);
transition:
transform var(--transition-fast),
opacity var(--transition-fast);
}
.faq-line--h {
width: 12px;
height: 2px;
}
.faq-line--v {
width: 2px;
height: 12px;
}
/* Body */
.faq-item__body {
max-height: 0;
overflow: hidden;
padding: 0 16px;
transition:
max-height 0.25s ease,
padding-bottom 0.25s ease;
}
.faq-item__body p {
font-size: 0.9rem;
opacity: 0.9;
margin: 0 0 12px;
}
/* Active state
(max-height is managed via JS to fit content) */
.faq-item.active .faq-item__body {
padding-top: 0;
padding-bottom: 10px;
}
.faq-item.active .faq-line--v {
transform: scaleY(0);
opacity: 0;
}
/* ===========================
Site Footer
=========================== */
.limoNewFooter {
background-color: #1b1b1b;
color: #ffffff;
}
.limoNewFooter a {
text-decoration: none;
}
.limoNewFooterLogo {
width: 130px;
margin-bottom: 15px;
}
.limoNewFooterLogo h2 {
font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 30px;
font-weight: 700;
display: flex;
width: 100%;
position: relative;
color: #ffffff;
margin-bottom: 0;
padding: 0;
line-height: 1.25em;
}
.limoNewFooterLogo h2 span {
color: #b8860b;
}
.limoNewFooterWidgetTitle {
font-size: 21px;
color: #ffffff;
margin-bottom: 15px;
font-weight: 700;
}
/* first footer */
.limoNewFooterFirst {
padding: 90px 0 0;
}
/* footer icon */
.limoNewFooterIcon {
width: 60px;
max-height: 60px;
min-height: 60px;
min-width: 60px;
background-color: #b8860b;
color: #1b1b1b;
font-size: 21px;
display: flex;
align-items: center;
border: 1px solid #b8860b;
border-radius: 100%;
}
.limoNewFooterIcon svg {
width: 24px;
height: 24px;
display: block;
margin: 0 auto;
}
/* contact links wrapper */
.limoNewFooterContactLinks {
background-color: transparent;
border: 1px solid #222222;
box-shadow: none;
margin-bottom: 30px;
padding: 20px;
display: flex;
justify-content: center;
border-radius: 20px;
}
.limoNewFooterContactLinksWrapper {
display: flex;
width: 100%;
max-width: 1032px;
justify-content: space-between;
}
.limoNewFooterContactLinksDivider {
width: 1px;
min-height: 100%;
margin-right: 20px;
margin-left: 20px;
background-color: #222222;
}
.limoNewFooterContactLinkWrapper {
display: flex;
align-items: center;
gap: 0;
}
a.limoNewFooterContactLinkWrapper {
cursor: pointer;
}
a.limoNewFooterContactLinkWrapper:hover p {
color: #b8860b;
}
.limoNewFooterContactLinkIcon {
margin-right: 15px;
}
.limoNewFooterContactLinkContent h6 {
color: #ffffff;
font-size: 14px;
margin-bottom: 0;
font-weight: 700;
}
.limoNewFooterContactLinkContent p {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-bottom: 0;
transition: color 0.25s ease;
}
/* second footer */
.limoNewFooterSecond {
border-bottom: 1px solid #222222;
}
.limoNewFooterSecond .widget-area .limoNewFooterWidget {
padding: 45px 0;
}
.limoNewFooterWidgetText p,
.limoNewFooterWidget > p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 20px;
}
/* useful links */
.limoNewFooterUsefulLinks ul {
margin: 0;
padding: 0;
list-style: none;
}
.limoNewFooterUsefulLinks ul li {
margin-bottom: 5px;
}
.limoNewFooterUsefulLinks ul li a {
color: rgba(255, 255, 255, 0.8);
position: relative;
padding-left: 15px;
text-decoration: none;
}
.limoNewFooterUsefulLinks ul li a:after {
width: 6px;
height: 6px;
content: "";
background: #b8860b;
border-radius: 50%;
display: block;
position: absolute;
left: 0;
top: 7px;
}
.limoNewFooterUsefulLinks ul li a:hover {
color: #b8860b;
}
/* bottom footer */
.limoNewFooter .copyright {
padding-top: 40px;
padding-bottom: 40px;
}
.limoNewFooter .copyright p {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
}
/* social icons */
.limoNewFooterSocialIcons ul {
margin: 0;
padding: 0;
}
.limoNewFooterSocialIcons li {
display: inline-block;
z-index: 1;
position: relative;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
background: transparent;
color: #ffffff;
font-weight: 300;
border: 1px solid #b8860b;
border-radius: 100%;
margin-right: 5px;
transition: all .4s;
}
.limoNewFooterSocialIcons li a {
color: #ffffff;
display: block;
}
.limoNewFooterSocialIcons li a svg {
width: 18px;
height: 18px;
display: block;
margin: 15px auto;
}
.limoNewFooterSocialIcons li:hover {
background: #b8860b;
color: #1b1b1b;
}
.limoNewFooterSocialIcons li:hover a {
color: #1b1b1b;
}
/* newsletter */
.limoNewFooterNewsletter {
position: relative;
}
.limoNewFooterNewsletter input {
height: 60px;
width: 100%;
border: 1px solid #b8860b;
background: transparent;
font-size: 14px;
color: #ffffff;
outline: none;
padding: 0 90px 0 20px;
border-radius: 30px;
}
.limoNewFooterNewsletter input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.limoNewFooterNewsletter button {
height: 50px;
width: 50px;
border: none;
background: #b8860b;
font-size: 14px;
font-weight: 700;
color: #1b1b1b;
padding: 0 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
border-radius: 100%;
line-height: 1;
transform: rotate(0);
transition: all 0.7s linear;
}
.limoNewFooterNewsletter button svg {
width: 18px;
height: 18px;
}
.limoNewFooterNewsletter:hover button {
background: #ffffff;
color: #1b1b1b;
transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
.limoNewFooterContactLinksWrapper {
flex-direction: column;
}
.limoNewFooterContactLinksDivider {
width: auto;
min-height: 1px;
margin: 20px 0;
}
}
/* =========================================
Premium Footer Redesign
========================================= */
.premiumFooter {
--pf-bg: #0b0f16;
--pf-surface: #121722;
--pf-border: rgba(184, 134, 11, 0.24);
--pf-border-soft: rgba(255, 255, 255, 0.08);
--pf-text: #ffffff;
--pf-muted: #b2bfd3;
--pf-kicker: rgba(184, 134, 11, 0.92);
--pf-primary: var(--primary-color);
background: var(--pf-bg);
color: #ffffff;
border-top: 1px solid rgba(184, 134, 11, 0.22);
padding-top: 64px;
}
.premiumFooterInner {
width: min(1280px, 94%);
margin: 0 auto;
}
.premiumFooterContactGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-bottom: 56px;
}
.premiumFooterContactCard {
display: flex;
align-items: center;
gap: 18px;
padding: 24px;
border-radius: 16px;
text-decoration: none;
color: inherit;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid var(--pf-border-soft);
transition: all .3s ease;
}
.premiumFooterContactCard:hover {
background: rgba(184, 134, 11, 0.05);
border-color: var(--pf-border);
color: inherit;
}
.premiumFooterContactIcon {
width: 48px;
height: 48px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 20px;
color: var(--pf-primary);
background: rgba(184, 134, 11, 0.10);
}
.premiumFooterContactLabel {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pf-kicker);
margin-bottom: 4px;
}
.premiumFooterContactValue {
display: block;
font-size: 1.12rem;
font-weight: 600;
color: #ffffff;
}
.premiumFooterMain {
display: grid;
grid-template-columns: 1.15fr .95fr 1fr;
gap: 42px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(184, 134, 11, 0.16);
}
.premiumFooterLogo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.premiumFooterLogoIcon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--pf-primary);
color: #0b0d11;
display: grid;
place-items: center;
font-size: 19px;
}
.premiumFooterLogo h2 {
margin: 0;
font-family: 'Poppins', sans-serif;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
}
.premiumFooterLogo h2 span {
color: var(--pf-primary);
}
.premiumFooterBrand p {
margin: 0 0 24px;
max-width: 360px;
color: var(--pf-muted);
font-size: .9rem;
line-height: 1.7;
}
.premiumFooterSocial {
display: flex;
gap: 10px;
}
.premiumFooterSocial a {
width: 36px;
height: 36px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--pf-muted);
background: rgba(255, 255, 255, 0.05);
transition: all .3s ease;
}
.premiumFooterSocial a:hover {
background: var(--pf-primary);
color: #0b0d11;
transform: translateY(-3px);
}
.premiumFooterSocial a svg {
width: 16px;
height: 16px;
}
.premiumFooterLinksWrap {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.premiumFooterLinksWrap h4,
.premiumFooterNewsletter h4 {
margin: 0 0 18px;
font-size: .78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #ffffff;
}
.premiumFooterLinksWrap ul {
list-style: none;
margin: 0;
padding: 0;
}
.premiumFooterLinksWrap li {
margin-bottom: 12px;
}
.premiumFooterLinksWrap a {
color: var(--pf-muted);
text-decoration: none;
font-size: .9rem;
transition: all .2s ease;
display: inline-block;
}
.premiumFooterLinksWrap a:visited {
color: var(--pf-muted);
}
.premiumFooterLinksWrap a:hover {
color: var(--pf-primary);
transform: translateX(4px);
}
.premiumFooterNewsletter p {
margin: 0 0 16px;
color: var(--pf-muted);
font-size: .9rem;
line-height: 1.6;
}
.premiumFooterNewsletter form {
position: relative;
}
.premiumFooterNewsletter input {
width: 100%;
height: 54px;
border-radius: 12px;
border: 1px solid rgba(184, 134, 11, 0.32);
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
font-size: .9rem;
padding: 0 114px 0 16px;
transition: all .25s ease;
}
.premiumFooterNewsletter input::placeholder {
color: var(--pf-muted);
}
.premiumFooterNewsletter input:focus {
border-color: var(--pf-primary);
outline: none;
background: rgba(184, 134, 11, 0.08);
}
.premiumFooterNewsletter button {
position: absolute;
right: 6px;
top: 6px;
bottom: 6px;
border: 0;
border-radius: 8px;
padding: 0 16px;
background: var(--pf-primary);
color: #0b0d11;
font-size: .7rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
transition: all .3s ease;
}
.premiumFooterNewsletter button:hover {
background: var(--pf-primary);
box-shadow: 0 0 20px rgba(184, 134, 11, 0.3);
}
.premiumFooterNewsletter small {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 10px;
color: var(--pf-muted);
font-size: 10px;
}
.premiumFooterBottom {
padding: 28px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.premiumFooterBottom p {
margin: 0;
color: var(--pf-muted);
font-size: 12px;
}
.premiumFooterBottomRight {
display: flex;
align-items: center;
gap: 16px;
color: var(--pf-muted);
font-size: 12px;
}
.premiumFooterCards {
display: inline-flex;
align-items: center;
gap: 8px;
opacity: .35;
}
.premiumFooterCards i {
font-size: 1.45rem;
}
@media (max-width: 1100px) {
.premiumFooterMain {
grid-template-columns: 1fr;
gap: 30px;
}
.premiumFooterLinksWrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.premiumFooterContactGrid {
grid-template-columns: 1fr;
}
.premiumFooterBottom {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 600px) {
.premiumFooter {
padding-top: 48px;
}
.premiumFooterInner {
width: min(1280px, 92%);
}
.premiumFooterLinksWrap {
grid-template-columns: 1fr;
gap: 20px;
}
.premiumFooterContactCard {
padding: 18px;
}
}
/* =========================================
PARTY BUS SERVICE INTERNAL PAGE
========================================= */
/* -------- HERO -------- */
.party-service-hero {
position: relative;
width: 100%;
min-height: 70vh;
background-image: url("https://kartracingsuits.com/website/assets/images/background.png");
background-size: cover;
background-position: center;
display: flex;
align-items: stretch;
color: #ffffff;
}
.party-service-hero__overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at top left, rgba(236, 72, 153, 0.3), transparent 50%),
linear-gradient(
120deg,
rgba(15, 23, 42, 0.95) 0%,
rgba(15, 23, 42, 0.80) 30%,
rgba(15, 23, 42, 0.50) 60%,
rgba(15, 23, 42, 0.20) 100%
);
}
.party-service-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 24px 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.party-service-hero__left {
flex: 1.1;
max-width: 560px;
}
.party-service-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(248, 250, 252, 0.25);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.96;
}
.party-service-hero__title {
margin: 20px 0 10px;
font-size: 3rem;
line-height: 1.07;
font-weight: 700;
}
.party-service-hero__title-highlight {
display: block;
color: #f97316; /* warm orange accent for party vibe */
text-shadow: 0 0 14px rgba(248, 113, 113, 0.5);
}
.party-service-hero__subtitle {
margin: 8px 0 22px;
font-size: 1.02rem;
max-width: 460px;
color: #e5e7eb;
opacity: 0.9;
}
/* Airport variant highlight (uses same layout, cooler accent) */
.airport-service-hero .party-service-hero__title-highlight {
color: #38bdf8;
text-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}
/* Highlights pills */
.party-service-hero__highlights {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-bottom: 14px;
}
.party-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.7);
font-size: 0.82rem;
color: #e5e7eb;
}
.party-pill__dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #f97316;
}
/* Meta chips */
.party-service-hero__meta {
margin-top: 4px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.party-meta-chip {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 11px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(248, 250, 252, 0.1);
font-size: 0.78rem;
color: #e5e7eb;
}
.party-meta-label {
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.party-meta-value {
font-weight: 500;
}
/* Right: card */
.party-service-hero__right {
flex: 0 0 480px;
max-width: 480px;
}
.party-service-card {
background-color: var(--header-bg);
color: var(--header-text);
border-radius: 22px;
padding: 20px 20px 18px;
box-shadow:
0 22px 45px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(15, 23, 42, 0.5);
backdrop-filter: blur(16px);
position: relative;
}
.party-service-card::before, .hero-booking__card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, #f97316, #ec4899, #6366f1);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.75;
pointer-events: none;
}
.party-service-card__header {
margin-bottom: 10px;
}
.party-service-card__title {
margin: 0;
font-size: 1.2rem;
font-weight: 700;
}
.party-service-card__note {
margin: 2px 0 0;
font-size: 0.8rem;
opacity: 0.7;
}
/* Form */
.party-service-form {
margin-top: 10px;
}
.party-form-grid {
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.party-form-field {
flex: 1;
margin-bottom: 8px;
}
.party-form-field label {
display: block;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 4px;
}
.party-form-field input,
.party-form-field select,
.party-form-field textarea {
width: 100%;
padding: 10px 11px;
border-radius: 11px;
border: 1px solid var(--header-border);
background-color: var(--accent-soft);
color: var(--header-text);
font-size: 0.9rem;
}
.party-form-field textarea {
resize: vertical;
min-height: 70px;
}
.party-form-field input:focus,
.party-form-field select:focus,
.party-form-field textarea:focus {
outline: none;
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.20);
}
/* Keep native select dropdown options readable on all themes */
.party-form-field select option,
.booking-field select option,
.quote-field select option,
.party-form-field select optgroup,
.booking-field select optgroup,
.quote-field select optgroup {
color: #0f172a;
background-color: #ffffff;
}
/* Submit */
.party-form-submit {
width: 100%;
margin-top: 4px;
padding: 11px 0;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #f97316, #ec4899);
color: #ffffff;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.65);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
filter var(--transition-fast);
}
.party-form-submit:hover {
transform: translateY(-1px);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.85);
filter: brightness(1.03);
}
.party-form-footnote {
margin: 6px 0 0;
font-size: 0.78rem;
opacity: 0.75;
}
/* Responsive – hero */
@media (max-width: 1024px) {
.party-service-hero__inner {
align-items: flex-start;
}
.party-service-hero__title {
font-size: 2.6rem;
}
.party-service-hero__right {
flex: 0 0 400px;
max-width: 400px;
}
}
@media (max-width: 900px) {
.party-service-hero {
min-height: auto;
}
.party-service-hero__inner {
flex-direction: column;
align-items: stretch;
gap: 28px;
padding-inline: 20px;
}
.party-service-hero__left {
max-width: 100%;
}
.party-service-hero__right {
max-width: 460px;
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.party-service-hero__inner {
padding-inline: 16px;
}
.party-service-hero__title {
font-size: 2.2rem;
}
.party-form-grid {
flex-direction: column;
}
}
/* -------- Generic section header for party page -------- */
.party-section-header {
margin-bottom: 20px;
}
.party-section-header--center {
text-align: center;
max-width: 720px;
margin-inline: auto;
}
.party-section-eyebrow {
margin: 0 0 6px;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.party-section-title {
margin: 0 0 6px;
font-size: 2rem;
color: var(--header-text);
}
.party-section-subtitle {
margin: 0;
font-size: 0.95rem;
opacity: 0.82;
}
/* -------- Benefits -------- */
.party-benefits {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 60px;
}
.party-benefits__inner {
max-width: 1200px;
margin: 0 auto;
}
.party-benefits-grid {
margin-top: 6px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.party-benefit-card {
border-radius: 18px;
padding: 14px 16px 14px;
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.10),
rgba(15, 23, 42, 0.03)
);
border: 1px solid var(--header-border);
font-size: 0.9rem;
}
.party-benefit-card h3 {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 600;
}
.party-benefit-card p {
margin: 0;
opacity: 0.9;
}
@media (max-width: 960px) {
.party-benefits-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.party-benefits {
padding-inline: 16px;
}
.party-benefits-grid {
grid-template-columns: 1fr;
}
}
/* -------- Events -------- */
.party-events {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 60px;
}
.party-events__inner {
max-width: 1200px;
margin: 0 auto;
}
.party-events-grid {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.party-event-card {
border-radius: 16px;
padding: 14px 14px 14px;
background: var(--accent-soft);
border: 1px solid var(--header-border);
font-size: 0.9rem;
}
.party-event-card h3 {
margin: 0 0 6px;
font-size: 1rem;
font-weight: 600;
}
.party-event-card p {
margin: 0;
opacity: 0.9;
}
@media (max-width: 960px) {
.party-events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.party-events {
padding-inline: 16px;
}
.party-events-grid {
grid-template-columns: 1fr;
}
}
/* -------- Interior -------- */
.party-interior {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 64px;
}
.party-interior__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 32px;
align-items: center;
}
.party-interior-list {
margin: 14px 0 0;
padding-left: 0;
list-style: none;
font-size: 0.9rem;
display: grid;
gap: 6px;
}
.party-interior-list li::before {
content: "•";
margin-right: 6px;
}
.party-interior__right {
position: relative;
min-height: 220px;
}
.party-interior-photo {
position: absolute;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.7);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.5);
background: #020617;
}
.party-interior-photo img {
display: block;
width: 100%;
height: auto;
}
.party-interior-photo--primary {
top: 0;
right: 0;
width: 72%;
}
.party-interior-photo--secondary {
left: 0;
bottom: 0;
width: 58%;
transform: translateY(18px);
}
@media (max-width: 960px) {
.party-interior__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.party-interior__right {
min-height: 260px;
}
}
@media (max-width: 640px) {
.party-interior {
padding-inline: 16px;
}
.party-interior-photo--primary,
.party-interior-photo--secondary {
position: relative;
width: 100%;
transform: none;
margin-bottom: 12px;
}
}
/* -------- Pricing -------- */
.party-pricing {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 64px;
}
.party-pricing__inner {
max-width: 1100px;
margin: 0 auto;
}
.party-pricing-grid {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.party-pricing-card {
border-radius: 18px;
padding: 16px 16px 14px;
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.10),
rgba(15, 23, 42, 0.03)
);
border: 1px solid var(--header-border);
font-size: 0.9rem;
}
.party-pricing-card--highlight {
background: radial-gradient(
circle at top left,
rgba(248, 113, 113, 0.22),
rgba(15, 23, 42, 0.06)
);
}
.party-pricing-card h3 {
margin: 0 0 6px;
font-size: 1.05rem;
font-weight: 600;
}
.party-pricing-range {
margin: 0 0 8px;
font-weight: 600;
}
.party-pricing-card ul {
margin: 0;
padding-left: 18px;
display: grid;
gap: 4px;
}
.party-pricing-footnote {
margin-top: 12px;
font-size: 0.8rem;
opacity: 0.8;
}
.party-pricing-cta {
margin-top: 16px;
display: flex;
justify-content: center;
}
.party-pricing-cta__btn {
padding: 10px 22px;
border-radius: 999px;
border: none;
background: var(--accent);
color: var(--btn-auth-text);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.3);
transition:
background-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.party-pricing-cta__btn:hover {
background: #000000;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.45);
}
@media (max-width: 960px) {
.party-pricing-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.party-pricing {
padding-inline: 16px;
}
.party-pricing-grid {
grid-template-columns: 1fr;
}
}
/* -------- Party Bus Packages (Static v2) -------- */
.party-packages-v2 {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 64px;
}
.party-packages-v2__inner {
max-width: 1200px;
margin: 0 auto;
}
.party-packages-v2__table {
margin-top: 18px;
background: var(--surface-1);
border: 1px solid var(--line-soft);
border-radius: 18px;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.party-packages-v2__row {
display: grid;
grid-template-columns: 2.2fr 1.1fr 1.5fr 1.15fr 2.4fr 1.35fr;
gap: 14px;
padding: 14px 16px;
align-items: start;
}
.party-packages-v2__row + .party-packages-v2__row {
border-top: 1px solid var(--line-soft);
}
.party-packages-v2__row--head {
background: var(--surface-2);
color: var(--text-muted);
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.party-packages-v2__row.is-featured {
background: linear-gradient(90deg, rgba(184, 134, 11, 0.16) 0%, rgba(184, 134, 11, 0) 26%), var(--surface-1);
}
.party-packages-v2__cell {
min-width: 0;
}
.party-packages-v2__label {
display: none;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
.party-packages-v2__package {
display: grid;
gap: 8px;
}
.party-packages-v2__badge {
display: inline-flex;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: #0b1220;
color: #ffffff;
font-weight: 800;
font-size: 0.70rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.party-packages-v2__title {
font-size: 1.02rem;
font-weight: 900;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.party-packages-v2__value {
color: var(--text-secondary);
font-size: 0.92rem;
line-height: 1.35;
}
.party-packages-v2__price {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.party-packages-v2__from {
flex: 0 0 100%;
font-size: 0.82rem;
color: var(--text-muted);
font-weight: 800;
line-height: 1.1;
}
.party-packages-v2__amount {
font-size: clamp(1.35rem, 2vw, 1.7rem);
font-weight: 950;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1;
white-space: nowrap;
}
.party-packages-v2__per {
font-size: 1.02rem;
color: var(--text-muted);
font-weight: 800;
white-space: nowrap;
}
.party-packages-v2__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 6px;
color: var(--text-secondary);
font-size: 0.90rem;
}
.party-packages-v2__list li {
position: relative;
padding-left: 14px;
}
.party-packages-v2__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 6px;
height: 6px;
border-radius: 999px;
transform: translateY(-50%);
background: rgba(15, 23, 42, 0.28);
}
.party-packages-v2__cell--action {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.party-packages-v2__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 14px;
border-radius: 14px;
text-decoration: none;
font-weight: 900;
font-size: 0.92rem;
border: 1px solid transparent;
background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);
white-space: nowrap;
min-width: 150px;
}
.party-packages-v2 a.party-packages-v2__btn,
.party-packages-v2 a.party-packages-v2__btn:visited,
.party-packages-v2 a.party-packages-v2__btn:hover,
.party-packages-v2 a.party-packages-v2__btn:focus {
color: #ffffff !important;
}
.party-packages-v2__btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 22px rgba(15, 23, 42, 0.18);
}
.party-packages-v2__footnote {
margin-top: 14px;
font-size: 0.82rem;
color: var(--text-muted);
}
@media (max-width: 1100px) {
.party-packages-v2__row {
grid-template-columns: 2.2fr 1.0fr 1.4fr 1.1fr 2.0fr 1.25fr;
}
}
@media (max-width: 960px) {
.party-packages-v2__row {
grid-template-columns: 1.8fr 1fr 1.3fr 1fr;
}
.party-packages-v2__row--head {
display: none;
}
.party-packages-v2__cell--action {
justify-content: flex-start;
}
.party-packages-v2__cell:nth-child(5) {
grid-column: 1 / -1;
}
.party-packages-v2__btn {
min-width: 0;
width: 100%;
}
}
@media (max-width: 640px) {
.party-packages-v2 {
padding-inline: 16px;
}
.party-packages-v2__row {
grid-template-columns: 1fr;
gap: 10px;
}
.party-packages-v2__label {
display: block;
}
.party-packages-v2__cell--action {
justify-content: flex-start;
}
.party-packages-v2__btn {
width: 100%;
}
}
/* -------- Process -------- */
/* -------- Party Bus Service Areas -------- */
.party-areas {
background: #ffffff;
color: var(--header-text);
border-top: 1px solid var(--line-soft);
padding: 56px 24px 64px;
}
.party-areas__inner {
max-width: 1120px;
margin: 0 auto;
}
.party-areas__header {
text-align: center;
margin-bottom: 26px;
}
.party-areas__eyebrow {
margin: 0 0 10px;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
}
.party-areas__title {
margin: 0;
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.party-areas__subtitle {
margin: 10px auto 0;
max-width: 680px;
font-size: 0.98rem;
color: var(--text-secondary);
}
.party-areas__divider {
height: 3px;
width: 56px;
background: var(--premium-gold);
margin: 16px auto 0;
border-radius: 999px;
}
.party-areas__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
.party-areas__card {
background: var(--surface-1);
border-radius: 14px;
border: 1px solid var(--line-soft);
overflow: hidden;
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
}
.party-areas__visual {
position: relative;
padding: 16px 16px;
color: #ffffff;
}
.party-areas__visual-title {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.party-areas__icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.party-areas__icon svg {
width: 34px;
height: 34px;
}
.party-areas__visual h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 850;
letter-spacing: -0.01em;
}
.party-areas__number {
position: absolute;
right: 10px;
bottom: -10px;
font-size: 3.2rem;
font-weight: 950;
opacity: 0.12;
font-style: italic;
letter-spacing: -0.04em;
}
.party-areas__content {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.party-areas__content p {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.45;
}
.party-areas__badge {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 800;
border: 1px solid rgba(15, 23, 42, 0.06);
}
.party-areas__badge-text {
display: inline-flex;
align-items: center;
gap: 8px;
}
.party-areas__check {
width: 18px;
height: 18px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.party-areas__badge-label {
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.7;
}
.party-areas__badge.badge-blue {
background: #f0f4f8;
color: #3e5c8a;
}
.party-areas__badge.badge-red {
background: #f9eaea;
color: #a6342e;
}
.party-areas__badge.badge-teal {
background: #f0f7f9;
color: #2f6f78;
}
.party-areas__badge.badge-gray {
background: #f5f5f5;
color: #334155;
}
/* Visual colorways */
.party-areas__visual.bg-baltimore { background: #0d2b52; }
.party-areas__visual.bg-annapolis { background: #8b1a24; }
.party-areas__visual.bg-ocean-city { background: #134e4a; }
.party-areas__visual.bg-silver-spring { background: #1f2937; }
.party-areas__visual.bg-frederick { background: #4a3728; }
.party-areas__visual.bg-rockville { background: #1e3a8a; }
.party-areas__cta {
margin-top: 26px;
background: var(--accent);
color: #ffffff;
border-radius: 18px;
padding: 26px 22px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 18px 48px rgba(2, 6, 23, 0.22);
}
.party-areas__cta h3 {
margin: 0 0 8px;
font-size: 1.4rem;
font-weight: 900;
}
.party-areas__cta p {
margin: 0 auto 16px;
max-width: 520px;
color: rgba(226, 232, 240, 0.85);
font-size: 0.95rem;
}
.party-areas__cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
border-radius: 999px;
background: #ffffff;
color: #0b1120;
text-decoration: none;
font-weight: 900;
letter-spacing: 0.02em;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 14px 30px rgba(2, 6, 23, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
transition:
transform var(--transition-fast),
filter var(--transition-fast),
background-color var(--transition-fast);
}
.party-areas a.party-areas__cta-btn,
.party-areas a.party-areas__cta-btn:visited,
.party-areas a.party-areas__cta-btn:hover,
.party-areas a.party-areas__cta-btn:focus {
color: #0b1120 !important;
}
.party-areas__cta-btn:hover {
transform: translateY(-1px);
background: #f1f5f9;
filter: none;
}
@media (max-width: 768px) {
.party-areas__title {
font-size: 1.65rem;
}
}
@media (max-width: 640px) {
.party-areas {
padding-inline: 16px;
}
}
.party-process {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 60px;
}
.party-process__inner {
max-width: 900px;
margin: 0 auto;
}
.party-process-steps {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.party-step {
border-radius: 16px;
padding: 14px 14px 14px;
background: var(--accent-soft);
border: 1px solid var(--header-border);
font-size: 0.9rem;
}
.party-step__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: var(--accent);
color: #ffffff;
font-size: 0.78rem;
font-weight: 700;
margin-bottom: 6px;
}
.party-step h3 {
margin: 0 0 6px;
font-size: 0.96rem;
font-weight: 600;
}
.party-step p {
margin: 0;
opacity: 0.9;
}
@media (max-width: 960px) {
.party-process-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.party-process {
padding-inline: 16px;
}
.party-process-steps {
grid-template-columns: 1fr;
}
}
/* -------- Testimonials -------- */
.party-testimonials {
background: var(--header-bg);
color: var(--header-text);
border-top: 1px solid var(--header-border);
padding: 56px 24px 64px;
--testimonial-gap: 18px;
--testimonial-per-view: 3;
}
.party-testimonials__inner {
max-width: 1100px;
margin: 0 auto;
}
.testimonials-slider {
margin-top: 16px;
}
.testimonials-slider__viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Extra space so card shadows don't get clipped */
padding: 16px 6px 26px;
scroll-padding-inline: 6px;
}
.testimonials-slider__viewport {
scrollbar-width: none;
}
.testimonials-slider__viewport::-webkit-scrollbar {
display: none;
}
.testimonials-slider__track {
display: flex;
gap: var(--testimonial-gap);
padding: 0;
}
.party-testimonial-card {
scroll-snap-align: start;
flex: 0 0 calc((100% - (var(--testimonial-gap) * (var(--testimonial-per-view) - 1))) / var(--testimonial-per-view));
min-width: 280px;
border-radius: 18px;
padding: 18px 18px 16px;
background: var(--surface-1);
border: 1px solid var(--line-soft);
box-shadow: var(--card-shadow);
font-size: 0.95rem;
position: relative;
}
@media (max-width: 640px) {
.testimonials-slider__viewport {
padding-inline: 2px;
scroll-padding-inline: 2px;
}
}
.party-testimonial-card::before {
content: "\201C";
position: absolute;
top: 10px;
right: 14px;
font-size: 2.2rem;
line-height: 1;
color: rgba(15, 23, 42, 0.18);
font-family: var(--header-display-font);
}
body.dark-theme .party-testimonial-card::before {
color: rgba(226, 232, 240, 0.16);
}
.party-testimonial-text {
margin: 0 0 8px;
color: var(--text-secondary);
line-height: 1.55;
}
.party-testimonial-name {
margin: 0;
font-size: 0.86rem;
color: var(--text-primary);
font-weight: 800;
}
.testimonials-slider__controls {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.testimonials-slider__dots {
display: flex;
gap: 6px;
}
.testimonials-slider__arrows {
display: flex;
gap: 10px;
}
.testimonials-slider__dots .fleet-dot {
background: rgba(15, 23, 42, 0.18);
}
.testimonials-slider__dots .fleet-dot.active {
background: var(--accent);
}
@media (max-width: 960px) {
.party-testimonials {
--testimonial-per-view: 2;
}
}
@media (max-width: 640px) {
.party-testimonials {
padding-inline: 16px;
--testimonial-per-view: 1;
}
}
/* Party Bus FAQ – modern, spacious variant */
.faq--party {
border-top: 1px solid var(--header-border);
}
.faq--party .faq__inner {
max-width: 1000px;
}
.faq--party .faq__header {
margin-bottom: 28px;
}
.faq--party .faq__title {
letter-spacing: -0.02em;
font-weight: 900;
}
.faq--party .faq__list {
background: var(--surface-1);
border-color: var(--line-soft);
box-shadow: var(--card-shadow);
}
.faq--party .faq-item {
border-top-color: var(--line-soft);
}
.faq--party .faq-item__header {
padding: 18px 18px;
}
.faq--party .faq-item__header:hover {
background: rgba(15, 23, 42, 0.03);
}
.faq--party .faq-item__header:focus-visible {
outline: none;
background: rgba(15, 23, 42, 0.03);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.10);
}
.faq--party .faq-item__question {
font-size: 1.02rem;
font-weight: 750;
color: var(--text-primary);
line-height: 1.3;
}
.faq--party .faq-item__icon {
width: 28px;
height: 28px;
background: var(--surface-2);
border-color: var(--line-soft);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
}
.faq--party .faq-line {
background: var(--text-primary);
}
.faq--party .faq-item.active .faq-item__icon {
background: var(--accent);
border-color: rgba(15, 23, 42, 0.18);
transform: translateY(-1px);
}
.faq--party .faq-item.active .faq-line {
background: #ffffff;
}
.faq--party .faq-item__body {
padding-inline: 18px;
}
.faq--party .faq-item__body p {
font-size: 0.95rem;
color: var(--text-secondary);
opacity: 1;
margin: 0 0 16px;
}
.faq--party .faq-item.active .faq-item__body {
padding-bottom: 16px;
}
@media (max-width: 640px) {
.faq--party {
padding-inline: 16px;
}
.faq--party .faq-item__header {
padding: 16px 14px;
}
.faq--party .faq-item__body {
padding-inline: 14px;
}
}
/* ===========================
Header – Quick Booking Icons
=========================== */
/* Container for the two icon buttons (desktop) */
.header-quick-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Icon button base */
.header-icon-btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid #d8e0ea;
background: #f3f6fb;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--header-text);
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast),
border-color var(--transition-fast);
}
/* Allow using the icon button as a