:root {
--banana: #D4AF37; --banana-dark: #B8860B; --black: #0c0c0c;
--charcoal: #1a1a1a;
--gray: #888888;
--light: #FAFAF7;
--white: #ffffff;
--accent: #FF4D00;
--radius: 18px;
--shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: var(--black);
color: var(--white);
min-height: 100vh;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 70% 20%, rgba(255, 214, 0, 0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 10% 80%, rgba(255, 77, 0, 0.08) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
header {
position: relative;
z-index: 10;
border-bottom: 1px solid rgba(255, 214, 0, 0.15);
padding: 15px 0;
}
.header-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 28px;
}
.logo-wrap {
display: flex;
justify-content: center;
}
.header-nav ul,
.mobile-landing-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.header-nav ul {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.header-nav-left ul {
justify-content: flex-end;
}
.header-nav-right ul {
justify-content: flex-start;
}
.header-nav a,
.mobile-landing-menu a {
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.header-nav a {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 999px;
}
.header-nav a:hover,
.header-nav .current-menu-item a,
.mobile-landing-menu a:hover,
.mobile-landing-menu .current-menu-item a {
color: var(--banana);
}
.header-nav a:hover,
.header-nav .current-menu-item a {
background: rgba(255, 214, 0, 0.08);
border-color: rgba(255, 214, 0, 0.2);
}
.mobile-menu-checkbox,
.mobile-menu-toggle,
.mobile-landing-menu {
display: none;
}
.custom-logo {
height: 86px;
object-fit: contain;
width: auto;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.logo-icon {
width: 46px;
height: 46px;
background: var(--banana);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 4px 16px rgba(255, 214, 0, 0.4);
animation: pulse-logo 3s ease-in-out infinite;
}
@keyframes pulse-logo {
0%,
100% {
box-shadow: 0 4px 16px rgba(255, 214, 0, 0.4);
}
50% {
box-shadow: 0 4px 28px rgba(255, 214, 0, 0.7);
}
}
.logo-text {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 28px;
letter-spacing: 1px;
color: var(--white);
line-height: 1;
}
.logo-text span {
color: var(--banana);
}
@media (max-width: 1100px) {
.header-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}
.header-nav {
display: none;
}
.logo-wrap {
justify-content: flex-start;
}
.custom-logo {
height: 58px;
}
.mobile-menu-toggle {
width: 42px;
height: 42px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid rgba(255, 214, 0, 0.35);
border-radius: 8px;
background: rgba(255, 214, 0, 0.08);
cursor: pointer;
}
.mobile-menu-toggle span {
width: 20px;
height: 2px;
display: block;
border-radius: 999px;
background: var(--banana);
}
.mobile-landing-menu {
flex-basis: 100%;
width: 100%;
padding-top: 8px;
}
.mobile-menu-checkbox:checked ~ .mobile-landing-menu {
display: block;
}
.mobile-landing-menu ul {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 0 4px;
border-top: 1px solid rgba(255, 214, 0, 0.16);
}
.mobile-landing-menu a {
display: block;
padding: 12px 4px;
font-size: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-contact {
padding: 10px;
font-size: 12px;
}
}
@media (max-width: 600px) {
header {
padding: 10px 0;
}
.header-container {
padding: 0 16px;
}
.custom-logo {
height: 42px;
}
}
.header-contact {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 214, 0, 0.1);
border: 1px solid rgba(255, 214, 0, 0.3);
padding: 10px 20px;
border-radius: 40px;
font-weight: 700;
font-size: 15px;
color: var(--banana);
text-decoration: none;
transition: all 0.2s;
}
.header-contact:hover {
background: var(--banana);
color: var(--black);
}
@media (max-width: 1100px) {
.header-contact {
padding: 10px;
font-size: 12px;
}
}
.hero {
position: relative;
z-index: 5;
text-align: center;
padding: 60px 24px 30px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 214, 0, 0.15);
border: 1px solid rgba(255, 214, 0, 0.4);
padding: 6px 18px;
border-radius: 40px;
font-size: 13px;
font-weight: 700;
color: var(--banana);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
}
.hero h1 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: clamp(40px, 6vw, 60px); letter-spacing: 2px;
line-height: 1.05;
color: var(--white);
margin-bottom: 20px;
text-transform: uppercase;
}
.hero h1 em {
font-style: normal;
color: var(--banana);
display: block; margin: 10px 0;
}
.hero p {
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
max-width: 500px;
margin: 0 auto 40px;
font-weight: 600;
line-height: 1.5;
}
.booking-wrapper {
position: relative;
z-index: 5;
max-width: 900px;
margin: 0 auto;
padding: 0 20px 80px;
}
.booking-card {
background: var(--charcoal);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 20px;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes card-in {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.field-group {
margin-bottom: 10px;
}
.field-label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 8px;
}
.field-input,
div.wpcf7 input[type="text"],
div.wpcf7 input[type="tel"],
div.wpcf7 input[type="email"],
div.wpcf7 input[type="date"],
div.wpcf7 input[type="time"],
div.wpcf7 textarea,
div.wpcf7 select {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 14px 18px;
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 600;
outline: none;
transition: all 0.2s;
}
.field-input:focus,
div.wpcf7 input:focus,
div.wpcf7 textarea:focus,
div.wpcf7 select:focus {
border-color: var(--banana);
background: rgba(255, 214, 0, 0.05);
box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.1);
}
.field-input::placeholder {
color: rgba(255, 255, 255, 0.25);
} .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.field-input-icon {
position: relative;
width: 100%;
}
.field-input-icon {
position: relative;
}
.field-input-icon input,
.field-input-icon .field-input {
padding-left: 48px !important;
padding-right: 48px !important;
}
.field-input-icon .icon-left,
.field-input-icon .icon-right {
position: absolute;
top: 22px;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
color: rgba(255, 255, 255, 0.7);
fill: currentColor;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
z-index: 2;
}
.field-input-icon .icon-left {
left: 16px;
}
.field-input-icon .icon-right {
right: 16px;
pointer-events: all;
cursor: pointer;
}
.field-input-icon .icon-right:hover {
color: var(--banana);
}
.field-input-icon .icon-right.is-clear {
color: var(--accent);
font-weight: 900;
font-size: 18px;
opacity: 0.8;
transition: all 0.2s;
}
.field-input-icon .icon-right.is-clear:hover {
opacity: 1;
transform: translateY(-50%) scale(1.2);
color: #ff0000;
}
.route-row {
display: grid;
grid-template-columns: 1fr 30px 1fr;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.swap-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--charcoal);
border: 1.5px solid var(--banana);
color: var(--banana);
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.swap-btn:hover {
background: var(--banana);
color: var(--black);
transform: rotate(180deg) scale(1.1);
}
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 10px;
}
.field-select {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 14px 18px;
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 600;
outline: none;
appearance: none;
cursor: pointer;
transition: all 0.2s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 42px;
}
.field-select:focus {
border-color: var(--banana);
background-color: rgba(255, 214, 0, 0.05);
box-shadow: 0 0 0 4px rgba(255, 214, 0, 0.1);
}
.field-select option {
background: var(--charcoal);
}
.autocomplete-wrapper {
position: relative;
}
.autocomplete-list {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #2a2a2a;
border: 1px solid rgba(255, 214, 0, 0.25);
border-radius: 12px;
overflow: hidden;
z-index: 100;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.autocomplete-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.15s;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item:hover {
background: rgba(255, 214, 0, 0.08);
color: var(--banana);
}
.autocomplete-item .ac-icon {
font-size: 16px;
flex-shrink: 0;
opacity: 0.6;
}
.divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 5px 0 15px;
}
.submit-btn {
width: 100%;
background: var(--banana);
color: var(--black);
border: none;
border-radius: 14px;
padding: 18px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
.submit-btn:hover {
background: var(--banana-dark);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(255, 214, 0, 0.5);
}
.submit-btn:active {
transform: translateY(0);
} .wpcf7-spinner {
position: absolute;
right: 20px;
bottom: 20px;
}
div.wpcf7 .ajax-loader {
display: none;
}
.trust-row {
display: flex;
justify-content: center;
gap: 32px;
margin-top: 48px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
font-weight: 700;
}
.trust-item span {
font-size: 24px;
}
.car-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 8px;
}
.car-grid.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.car-grid.cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.car-info-single {
background: rgba(255, 214, 0, 0.08);
border: 1px solid rgba(255, 214, 0, 0.3);
padding: 12px 18px;
border-radius: 10px;
font-size: 15px;
color: var(--white);
}
.car-info-single .label {
color: var(--banana);
font-weight: 700;
margin-right: 5px;
}
body.light-mode .car-info-single {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.1);
color: #1a1a1a;
}
body.light-mode .car-info-single .label {
color: var(--banana-dark);
}
.car-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px;
border-radius: 10px;
border: 1.5px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
cursor: pointer;
transition: all 0.2s;
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.75);
}
.car-chip:hover,
.car-chip.selected {
border-color: var(--banana);
background: rgba(255, 214, 0, 0.08);
color: var(--banana);
}
footer {
position: relative;
z-index: 5;
text-align: center;
padding: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.25);
font-size: 13px;
}
footer a {
color: var(--banana);
text-decoration: none;
} .wpcf7-form-control-wrap {
display: block;
}
.wpcf7-not-valid-tip {
font-size: 13px;
color: var(--accent);
margin-top: 5px;
}
.wpcf7-response-output {
margin: 20px 0 0 !important;
border-radius: 12px !important;
border: 1px solid var(--banana) !important;
color: var(--banana) !important;
font-size: 14px;
text-align: center;
}
@media (max-width: 600px) {
header {
padding: 16px 0;
}
.booking-card {
padding: 24px 20px;
}
.route-row {
grid-template-columns: 1fr;
}
.route-row .swap-btn {
justify-self: center;
margin: -4px 0;
}
.two-col {
grid-template-columns: 1fr;
}
.car-grid {
grid-template-columns: repeat(2, 1fr);
}
.trust-row {
gap: 16px;
}
} .contact-section {
position: relative;
z-index: 5;
max-width: 1200px;
margin: 0 auto 80px;
padding: 0 24px;
}
.contact-heading {
text-align: center;
margin-bottom: 48px;
}
.contact-heading h2 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: clamp(32px, 5vw, 52px);
letter-spacing: 1px;
color: var(--white);
line-height: 1.1;
margin-bottom: 12px;
text-transform: uppercase;
}
.contact-heading h2 span {
color: var(--banana);
}
.contact-heading p {
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
font-weight: 600;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 32px;
align-items: stretch;
}
.contact-grid.no-map {
grid-template-columns: 1fr;
max-width: 700px;
margin: 0 auto;
} .contact-info-card {
background: var(--charcoal);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.contact-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.contact-item-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(255, 214, 0, 0.25); border: 1.5px solid rgba(255, 214, 0, 0.6); display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
transition: all 0.3s;
box-shadow: 0 0 15px rgba(255, 214, 0, 0.05); }
.contact-item:hover .contact-item-icon {
background: var(--banana);
border-color: var(--banana);
color: var(--black);
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 214, 0, 0.3);
}
.contact-item-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
margin-bottom: 6px;
}
.contact-item-value {
font-size: 18px;
font-weight: 700;
color: var(--white);
line-height: 1.5;
}
.contact-item-value a {
color: var(--white);
text-decoration: none;
transition: color 0.2s;
}
.contact-item-value a:hover {
color: var(--banana);
}
.contact-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
} .social-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.social-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border-radius: 12px;
border: 1.5px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: all 0.3s;
}
.social-btn:hover {
border-color: var(--banana);
color: var(--banana);
background: rgba(255, 214, 0, 0.07);
transform: translateY(-3px);
}
.social-btn .s-icon {
font-size: 18px;
} .contact-map-card {
background: var(--charcoal);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
min-height: 450px;
position: relative;
}
.contact-map-card iframe {
width: 100%;
height: 100%;
min-height: 450px;
border: none;
display: block;
}
.map-overlay-badge {
position: absolute;
top: 24px;
left: 24px;
background: var(--banana);
color: var(--black);
font-size: 13px;
font-weight: 900;
padding: 8px 18px;
border-radius: 40px;
letter-spacing: 0.5px;
pointer-events: none;
z-index: 2;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
@media (max-width: 900px) {
.contact-section {
padding: 0 20px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.contact-map-card {
min-height: 350px;
}
.contact-map-card iframe {
min-height: 350px;
}
.contact-info-card {
padding: 32px 24px;
}
}
@media (max-width: 600px) {
.contact-section {
padding: 0 16px;
margin-bottom: 60px;
}
.contact-info-card {
padding: 24px 16px;
gap: 24px;
}
.contact-item {
gap: 16px;
}
.contact-item-icon {
width: 44px;
height: 44px;
font-size: 20px;
}
.contact-item-value {
font-size: 16px;
}
} #pwa-install-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(26, 26, 26, 0.9);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-top: 1px solid rgba(255, 214, 0, 0.2);
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(100%);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
#pwa-install-banner * {
font-family: roboto;
}
#pwa-install-banner.show {
transform: translateY(0);
}
.pwa-content {
display: flex;
align-items: center;
gap: 20px;
max-width: 600px;
width: 100%;
}
.pwa-icon {
width: 64px;
height: 64px;
border-radius: 14px;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.pwa-text {
flex: 1;
}
.pwa-text h4 {
margin: 0 0 4px;
font-size: 17px;
font-weight: 800;
color: var(--white);
}
.pwa-text p {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.4;
}
.pwa-btns {
display: flex;
flex-direction: column;
gap: 8px;
}
.btn-pwa-install {
background: var(--banana);
color: var(--black);
border: none;
padding: 10px 24px;
border-radius: 10px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}
.btn-pwa-dismiss {
background: transparent;
color: rgba(255, 255, 255, 0.4);
border: none;
font-size: 12px;
font-weight: 700;
cursor: pointer;
} .pwa-ios-hint {
display: none;
text-align: center;
padding: 12px;
background: rgba(255, 255, 77, 0.05);
border-radius: 12px;
margin-top: 15px;
font-size: 12px;
color: var(--banana);
border: 1px dashed rgba(255, 214, 0, 0.3);
}
@media (max-width: 600px) {
#pwa-install-banner {
padding: 20px 16px;
}
.pwa-content {
flex-wrap: wrap;
gap: 16px;
}
.pwa-btns {
width: 100%;
flex-direction: row;
}
.btn-pwa-install,
.btn-pwa-dismiss {
flex: 1;
}
} .nb-sticky-sidebar {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 999;
}
.nb-sticky-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
background-color: var(--card-bg);
color: var(--text-color);
padding: 8px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
border: none;
outline: none;
white-space: nowrap;
flex-flow: column;
}
.nb-sticky-btn.nb-sticky-call {
background: linear-gradient(135deg, #FFD600 0%, #D4AF37 100%);
color: crimson;
}
.nb-sticky-btn.nb-sticky-zalo {
background-color: #0068ff;
color: #fff;
}
.nb-sticky-btn.nb-sticky-book {
background-color: #2b2b2b;
}
.nb-sticky-btn.nb-sticky-app {
background-color: #1a1a1a;  }
.nb-sticky-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(255, 214, 0, 0.3);
}
.nb-sticky-btn .nb-icon-phone,
.nb-sticky-btn .nb-icon-taxi,
.nb-sticky-btn .nb-icon-app {
font-size: 1.2rem;
line-height: 1;
display: inline-block;
}
.nb-sticky-btn .nb-icon-phone { } @keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-15deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(15deg);
}
100% {
transform: rotate(0deg);
}
}
.wiggle {
display: inline-block;
animation: wiggle 0.6s infinite ease-in-out;
}
@media (max-width: 480px) {
.nb-sticky-sidebar {
bottom: 10px;
right: 10px;
gap: 10px;
}
.nb-sticky-btn {
padding: 8px 11px;
font-size: 0.85rem;
}
.nb-sticky-btn .nb-icon-phone,
.nb-sticky-btn .nb-icon-taxi,
.nb-sticky-btn .nb-icon-app {
font-size: 1.1rem;
}
} .theme-toggle {
display: inline-flex;
gap: 8px;
background: var(--charcoal);
padding: 6px;
border-radius: 20px;
margin-top: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.theme-btn {
background: transparent;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
color: var(--white);
font-family: inherit;
}
.theme-btn:hover {
background: rgba(255, 214, 0, 0.1);
color: var(--banana);
}
.theme-btn.active { background: var(--banana);
color: var(--black);
box-shadow: 0 4px 12px rgba(255, 214, 0, 0.4);
} body.light-mode {
--black: #f0f0f5;
--charcoal: #ffffff;
--white: #1a1a1a;
color: var(--white);
}
body.light-mode header {
background: rgba(255, 255, 255, 0.92);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .header-nav a,
body.light-mode .mobile-landing-menu a {
color: #1f2937;
}
body.light-mode .header-nav a {
border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .header-nav a:hover,
body.light-mode .header-nav .current-menu-item a,
body.light-mode .mobile-landing-menu a:hover,
body.light-mode .mobile-landing-menu .current-menu-item a {
color: var(--banana-dark);
background: rgba(184, 134, 11, 0.12);
border-color: rgba(184, 134, 11, 0.28);
}
body.light-mode .mobile-menu-toggle {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(184, 134, 11, 0.42);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
body.light-mode .mobile-menu-toggle span {
background: var(--banana-dark);
}
body.light-mode .mobile-landing-menu ul {
border-top-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .mobile-landing-menu a {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .hero h1 {
color: #1a1a1a;
}
body.light-mode .hero p,
body.light-mode .contact-heading p,
body.light-mode .trust-item,
body.light-mode footer {
color: #444444;
}
body.light-mode .booking-card,
body.light-mode .contact-info-card,
body.light-mode .contact-map-card {
border-color: rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
body.light-mode .field-input,
body.light-mode div.wpcf7 input[type="text"],
body.light-mode div.wpcf7 input[type="tel"],
body.light-mode div.wpcf7 textarea,
body.light-mode div.wpcf7 select,
body.light-mode .field-select,
body.light-mode .autocomplete-list {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light-mode .autocomplete-item {
color: rgba(0, 0, 0, 0.8);
border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .autocomplete-item:hover {
background: rgba(184, 134, 11, 0.08);
color: var(--banana-dark);
}
body.light-mode .field-input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
body.light-mode .field-input-icon .icon-left,
body.light-mode .field-input-icon .icon-right {
color: #1a1a1a;
fill: currentColor;
}
body.light-mode .car-chip {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
}
body.light-mode .car-chip:hover,
body.light-mode .car-chip.selected {
border-color: var(--banana-dark);
background: rgba(184, 134, 11, 0.1);
color: var(--banana-dark);
}
body.light-mode .contact-item-label,
body.light-mode .field-label {
color: rgba(0, 0, 0, 0.5);
}
body.light-mode .contact-divider,
body.light-mode .divider,
body.light-mode footer {
border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .theme-toggle {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .theme-btn {
color: var(--white);
}
body.light-mode .nb-sticky-btn.nb-sticky-book,
body.light-mode .nb-sticky-btn.nb-sticky-app {
background-color: #ffffff;
color: #1a1a1a;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
body.light-mode .contact-info-card .contact-item-icon {
background: rgba(212, 175, 55, 0.15); border-color: rgba(212, 175, 55, 0.4);
}
body.light-mode #pwa-install-banner {
background: rgba(255, 255, 255, 0.95);
border-top: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
}
body.light-mode .pwa-text p {
color: rgba(0, 0, 0, 0.6);
}
body.light-mode .btn-pwa-dismiss {
color: rgba(0, 0, 0, 0.5);
}
body.light-mode .pwa-ios-hint {
background: rgba(0, 0, 0, 0.05);
color: #1a1a1a;
} .faq-section {
max-width: 900px;
margin: 0 auto 100px;
padding: 0 24px;
position: relative;
z-index: 5;
}
.faq-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: var(--charcoal);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.active {
border-color: rgba(212, 175, 55, 0.4);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.faq-question {
width: 100%;
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
background: none;
border: none;
text-align: left;
color: var(--white);
font-size: 16px;
font-weight: 700;
transition: all 0.2s;
font-family: inherit;
}
.faq-question:hover {
color: var(--banana);
}
.faq-chevron {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--banana);
}
.faq-item.active .faq-chevron {
transform: rotate(180deg);
}
.faq-answer-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.active .faq-answer-wrapper {
grid-template-rows: 1fr;
}
.faq-answer-content {
overflow: hidden;
}
.faq-answer {
padding: 0 24px 20px;
color: rgba(255, 255, 255, 0.6);
font-size: 15px;
line-height: 1.6;
} body.light-mode .faq-item {
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
body.light-mode .faq-item.active {
border-color: var(--banana-dark);
}
body.light-mode .faq-answer {
color: #444;
} .seo-content-section {
position: relative;
z-index: 5;
max-width: 1120px;
margin: 0 auto 100px;
padding: 0 24px;
}
.seo-copy {
max-width: 880px;
margin: 0 auto 42px;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.75;
font-weight: 500;
text-align: left;
}
.seo-copy h2 {
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: clamp(28px, 4vw, 42px);
font-weight: 900;
letter-spacing: 0;
line-height: 1.15;
margin: 0 0 18px;
text-align: center;
}
.seo-copy p {
margin: 0 0 14px;
}
.seo-copy a,
.nb-service-page a {
color: var(--banana);
font-weight: 800;
text-decoration: underline;
text-decoration-color: rgba(212, 175, 55, 0.45);
text-underline-offset: 3px;
transition: color 0.2s, text-decoration-color 0.2s;
}
.seo-copy a:hover,
.nb-service-page a:hover {
color: #f5d977;
text-decoration-color: currentColor;
}
.seo-copy ul,
.seo-copy ol {
width: fit-content;
max-width: min(760px, 100%);
margin: 16px auto 24px;
padding-left: 1.35rem;
list-style-position: outside;
text-align: left;
}
.seo-copy li {
margin-bottom: 10px;
padding-left: 0.25rem;
line-height: 1.7;
}
.seo-copy li::marker {
color: var(--banana);
font-weight: 900;
}
.seo-copy-home {
max-width: 900px;
padding: 24px;
border: 1px solid rgba(255, 214, 0, 0.16);
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
}
.seo-copy-home h2 {
margin-top: 0;
}
.seo-copy-advantages.has-advantage-cards {
max-width: 1080px;
}
.advantage-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 26px;
}
.advantage-card {
min-height: 150px;
padding: 20px;
border: 1px solid rgba(255, 214, 0, 0.18);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255, 214, 0, 0.08), rgba(255, 255, 255, 0.025));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.advantage-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 14px;
border-radius: 999px;
background: var(--banana);
color: var(--black);
font-size: 13px;
font-weight: 900;
}
.advantage-card p {
margin: 0;
color: rgba(255, 255, 255, 0.76);
font-size: 15px;
line-height: 1.65;
}
.route-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 36px 0 52px;
}
.route-card {
display: block;
min-height: 190px;
padding: 22px;
border: 1px solid rgba(255, 214, 0, 0.14);
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
color: var(--white);
text-decoration: none;
transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.route-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 214, 0, 0.45);
background: rgba(255, 214, 0, 0.07);
}
.route-card-kicker {
display: block;
margin-bottom: 12px;
color: var(--banana);
font-size: 12px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
}
.route-card h3 {
margin: 0 0 10px;
color: inherit;
font-size: 20px;
font-weight: 900;
line-height: 1.25;
}
.route-card p {
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 14px;
line-height: 1.6;
}
body.light-mode .seo-copy,
body.light-mode .route-card p {
color: #444444;
}
body.light-mode .seo-copy h2,
body.light-mode .route-card {
color: #1a1a1a;
}
body.light-mode .seo-copy-home,
body.light-mode .advantage-card {
border-color: rgba(212, 175, 55, 0.28);
background: rgba(255, 255, 255, 0.72);
}
body.light-mode .advantage-card p {
color: #444444;
}
body.light-mode .route-card {
border-color: rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}
body.light-mode .route-card:hover {
border-color: rgba(212, 175, 55, 0.55);
background: rgba(212, 175, 55, 0.12);
}
@media (max-width: 900px) {
.route-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advantage-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.seo-content-section {
margin-bottom: 70px;
padding: 0 16px;
}
.route-grid {
grid-template-columns: 1fr;
}
.advantage-grid {
grid-template-columns: 1fr;
}
.route-card {
min-height: 0;
}
} .nb-service-page {
max-width: 980px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.72);
font-size: 16px;
line-height: 1.75;
text-align: left;
}
.nb-service-page h1,
.nb-service-page h2 {
color: var(--white);
font-family: 'Roboto', sans-serif;
font-weight: 900;
letter-spacing: 0;
line-height: 1.15;
}
.nb-service-page h1 {
margin: 0 0 18px;
font-size: clamp(34px, 5vw, 54px);
text-align: center;
}
.nb-service-page h2 {
margin: 44px 0 16px;
font-size: clamp(24px, 3vw, 34px);
text-align: center;
}
.nb-service-page p {
margin: 0 0 14px;
}
.nb-service-image {
max-width: 760px;
margin: 22px auto 30px;
}
.nb-service-image img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid rgba(255, 214, 0, 0.18);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.nb-service-image figcaption {
margin-top: 8px;
color: rgba(255, 255, 255, 0.52);
font-size: 13px;
line-height: 1.5;
text-align: center;
}
.nb-service-page ul,
.nb-service-page ol {
width: fit-content;
max-width: min(760px, 100%);
margin: 16px auto 24px;
padding-left: 1.35rem;
list-style-position: outside;
text-align: left;
}
.nb-service-page li {
margin-bottom: 10px;
padding-left: 0.25rem;
line-height: 1.7;
}
.nb-service-page li::marker {
color: var(--banana);
font-weight: 900;
}
.nb-service-page table {
width: 100%;
margin: 20px 0 28px;
border-collapse: collapse;
overflow: hidden;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
}
.nb-service-page th,
.nb-service-page td {
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
text-align: left;
vertical-align: top;
}
.nb-service-page th {
color: var(--banana);
font-weight: 900;
}
.nb-service-page .faq-container {
max-width: 820px;
margin: 18px auto 34px;
}
.nb-service-page .faq-item > p:empty {
display: none;
}
.nb-service-page .faq-question {
font-size: 16px;
}
.nb-service-page .faq-answer {
text-align: left;
}
.nb-service-cta {
margin-top: 36px;
padding: 24px;
border: 1px solid rgba(255, 214, 0, 0.24);
border-radius: 8px;
background: rgba(255, 214, 0, 0.08);
}
.nb-service-cta a {
color: var(--banana);
font-weight: 900;
}
body.light-mode .nb-service-page {
color: #444444;
}
body.light-mode .nb-service-page h1,
body.light-mode .nb-service-page h2 {
color: #1a1a1a;
}
body.light-mode .nb-service-page table {
background: rgba(255, 255, 255, 0.72);
}
body.light-mode .nb-service-image img {
border-color: rgba(212, 175, 55, 0.35);
}
body.light-mode .nb-service-image figcaption {
color: rgba(0, 0, 0, 0.58);
}
body.light-mode .nb-service-page th,
body.light-mode .nb-service-page td {
border-color: rgba(0, 0, 0, 0.08);
}
@media (max-width: 600px) {
.nb-service-page table,
.nb-service-page tbody,
.nb-service-page tr,
.nb-service-page th,
.nb-service-page td {
display: block;
}
.nb-service-page tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
.grecaptcha-badge {
right: -1000px !important;
}