/* =================================================================
CLEAN HTML BUILDER — STARTER STYLESHEET
Base reset + typography + utilities + header + footer.
Append page-specific sections below, grouped with comment headers.
================================================================= */
/* === 0. Westgate palette === */
:root {
--c-primary: #0e2545;
/* Primary/500 — navy headings & nav text base */
--c-accent: #d95d31;
/* Tertiary/800 — orange CTAs / search button */
--c-blue: #0693e3;
/* Secondary/800 — outline CTAs */
--c-gray: #6d6d6d;
/* Neutral Gray/600 — placeholder text */
--c-white: #ffffff;
}
/* === 1. Base === */
* {
box-sizing: border-box;
}
html {
overflow-x: clip;
}
html,
body {
min-height: 100%;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.8;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color: var(--c-primary);
font-weight: 400;
}
.main-wrapper {
position: relative;
overflow-x: hidden;
padding-top: 60px
}
a {
color: #32463B;
text-decoration: none;
transition: all 0.3s;
}
a:hover {
text-decoration: none;
color: #32463B;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid #B32135;
outline-offset: 2px;
}
img {
max-width: 100%;
display: block;
height: auto;
}
/* === 2. Typography === */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: #0e2545;
margin-bottom: 12px;
font-family: 'Poppins', sans-serif;
}
h1,
.h1 {
font-size: 55px;
line-height: 115%;
}
h2,
.h2 {
font-size: 50px;
line-height: 115%;
}
h3,
.h3 {
font-size: 40px;
line-height: 115%;
}
h4,
.h4 {
font-size: 30px;
line-height: 120%;
}
h5,
.h5 {
font-size: 24px;
line-height: 115%;
}
h6,
.h6 {
font-size: 20px;
line-height: 115%;
}
p {
margin: 0 0 20px;
}
p:last-child {
margin: 0
}
p a,
li a {
color: #057fc5;
text-decoration: none;
}
p a:hover,
p a:focus {
color: var(--c-accent);
text-decoration: underline;
}
/* === 3. Sections + containers === */
.section,
section {
padding: 70px 0;
}
.container {
max-width: 1200px;
}
.container.wide {
max-width: 1320px;
}
.container.long {
max-width: 1420px;
}
.container.smalls {
max-width: 1080px;
}
.container.ultra {
max-width: 1600px;
}
.sm_btn,
.lg_btn {
text-transform: capitalize
}
.sm_btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
padding: 8px 22px;
border: 2px solid transparent;
border-radius: 30px;
transition: all 0.4s
}
.lg_btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
padding: 16px 30px;
border: 2px solid transparent;
border-radius: 30px;
transition: all 0.4s
}
.sm_btn em,
.lg_btn em {
margin-left: 10px;
}
.btn_dark_border {
border-color: #0E2545;
color: #0E2545
}
.btn_dark_border:hover {
border-color: #0E2545;
background: #0E2545;
color: #fff;
}
.btn_dark {
border-color: #0E2545;
background: #0E2545;
color: #fff;
}
.btn_dark:hover {
background: #c14f27;
border-color: #c14f27;
color: #fff;
}
.btn_accent {
background: var(--c-accent);
color: #fff;
}
.btn_border_blue {
border-color: var(--c-blue);
color: var(--c-blue);
}
.btn_border_blue:hover {
background: var(--c-blue);
color: #fff
}
.btn_accent:hover {
background: #c54b1f;
color: #fff
}
/* === 4. Utility modifiers === */
.relative {
position: relative;
z-index: 1;
}
.z_99 {
position: relative;
z-index: 99;
}
.text_upper {
text-transform: uppercase;
}
.text_italic {
font-style: italic;
}
.clr_red {
color: #B32135;
}
.clr_blue {
color: #080F1D;
}
.clr_gray {
color: rgba(255, 255, 255, 0.7);
}
.bg_blue_dark {
background: #070D1A;
}
.bg_blue {
background: #080F1D;
}
.bg_gray {
background: #F6F6F6;
}
.bg_gray_light {
background: #F2F2F2;
}
.fw_700 {
font-weight: 700;
}
.fw_900 {
font-weight: 900;
}
.ls_2 {
letter-spacing: 2.8px;
}
/* === 5. Buttons === */
.cta-btn {
display: inline-flex;
padding: 12px 30px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
border: 1px solid transparent;
font-family: 'Inter 18pt', sans-serif;
justify-content: center;
align-items: center;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.cta-btn.btn_red {
background: #B32135;
color: #fff;
border-color: #B32135;
}
.cta-btn.btn_red:hover {
background: #931324;
color: #fff;
border-color: #931324;
}
.cta-btn.btn_blue {
background: #093163;
color: #fff;
border-color: #093163;
}
.cta-btn.btn_blue:hover {
background: #B32135;
color: #fff;
border-color: #B32135;
}
/* === 6. Shared component bases === */
.section-heading {
font-size: 50px;
font-weight: 900;
}
.site-heading {
margin-bottom: 40px;
}
/* === 7. Skip link === */
.skip-link {
position: absolute;
left: -9999px;
z-index: 9999;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
padding: 0.5rem 1rem;
background: #fff;
color: #B32135;
border: 2px solid #B32135;
}
/* =================================================================
=== Header ===
================================================================= */
.header-area {
background: var(--c-white);
}
.header-inn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: 72px;
padding: 8px 0px;
}
.header-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.header-logo img {
width: 258px;
height: 47px;
object-fit: contain;
}
.mainmenu {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.mainmenu > ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 28px;
}
.mainmenu ul li {
position: relative;
}
.menu-login-item {
display: none;
}
.mainmenu ul li > a {
display: inline-flex;
align-items: center;
color: var(--c-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
}
.mainmenu ul li > a:hover,
.mainmenu ul li > a:focus {
color: var(--c-accent);
}
/* Desktop nav dropdowns */
.mainmenu .menu-caret {
margin-left: 6px;
font-size: 11px;
transition: transform .25s ease;
}
.mainmenu .nav-dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 220px;
margin: 0;
padding: 8px 0;
list-style: none;
background: var(--c-white);
border: 1px solid #e7eaef;
border-radius: 12px;
box-shadow: 0 18px 40px rgba(14, 37, 69, .14);
/* hidden state */
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
/* open on hover (mouse) and focus-within (keyboard) */
.mainmenu .has-dropdown:hover .nav-dropdown,
.mainmenu .has-dropdown:focus-within .nav-dropdown,
.mainmenu .has-dropdown .nav-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mainmenu .has-dropdown:hover .menu-caret,
.mainmenu .has-dropdown:focus-within .menu-caret,
.mainmenu .menu-link[aria-expanded="true"] .menu-caret {
transform: rotate(180deg);
}
.mainmenu .nav-dropdown li {
position: static;
}
.mainmenu .nav-dropdown li > a {
display: block;
padding: 9px 20px;
font-size: 14px;
line-height: 1.4;
color: var(--c-primary);
white-space: nowrap;
}
.mainmenu .nav-dropdown li > a:hover,
.mainmenu .nav-dropdown li > a:focus {
color: var(--c-accent);
background: #f4f7fb;
}
/* Right-side actions: cart, owner login, language */
.header-actions {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.header-cart {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--c-primary);
font-size: 20px;
line-height: 1;
}
.header-cart:hover {
color: var(--c-accent);
}
.header-login {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-primary);
color: #fff;
font-size: 14px;
font-weight: 500;
padding: 10px 22px;
border-radius: 24px;
white-space: nowrap;
transition: background 0.3s;
}
.header-login:hover,
.header-login:focus {
background: #c14d24;
color: #fff;
}
.header-lang {
position: relative;
}
.header-lang-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--c-primary);
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 500;
padding: 10px 16px;
border: 0;
border-radius: 24px;
cursor: pointer;
transition: background 0.3s;
}
.header-lang-toggle:hover {
background: #c14d24;
color: #fff;
}
.header-lang-toggle .lang-caret {
font-size: 11px;
opacity: 0.8;
transition: transform 0.2s;
}
.header-lang-toggle[aria-expanded="true"] .lang-caret {
transform: rotate(180deg);
}
.header-lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 150px;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
z-index: 30;
}
.header-lang-menu li {
padding: 9px 14px;
font-size: 14px;
color: var(--c-primary);
border-radius: 8px;
cursor: pointer;
}
.header-lang-menu li:hover,
.header-lang-menu li[aria-selected="true"] {
background: #f1f3f6;
}
#menu-toggle {
display: none;
width: 40px;
height: 40px;
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
}
#menu-toggle span {
display: block;
width: 100%;
height: 2px;
background: var(--c-primary);
margin: 5px 0;
transition: all 0.3s;
}
#menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
#menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* =================================================================
=== Mobile Menu (Figma redesign) ===
================================================================= */
.mobile-menu {
position: absolute;
top: 100%;
right: 0;
width: 100%;
height: calc(100vh - 70px);
max-height: calc(100vh - 70px);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #1f4f96 0%, #143a76 32%, #0e2a58 64%, #0a1f3f 100%);
transform: translateX(100%);
transition: transform 0.32s ease;
z-index: 1100;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: none
}
body.mobile-menu-open .mobile-menu {
transform: translateX(0);
}
/* Top bar */
.mobile-menu-top {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: var(--c-white);
}
.mobile-menu-logo {
display: inline-flex;
line-height: 0;
}
.mobile-menu-logo img {
width: auto;
height: 36px;
}
.mobile-menu-top-actions {
display: flex;
align-items: center;
gap: 14px;
}
.mobile-menu-phone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--c-blue);
font-size: 20px;
text-decoration: none;
}
.mobile-menu-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: var(--c-primary);
font-size: 24px;
line-height: 1;
cursor: pointer;
border-radius: 8px;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
background: rgba(14, 37, 69, 0.08);
}
/* Body */
.mobile-menu-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
padding: 8px 0 28px;
}
/* Primary nav with icons */
.mobile-menu-nav {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu-nav li + li {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-menu-nav a {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 24px;
color: var(--c-white);
font-family: var(--ff-heading, inherit);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus {
background: rgba(255, 255, 255, 0.08);
}
.mobile-menu-nav a em {
flex: 0 0 24px;
width: 24px;
font-size: 19px;
text-align: center;
color: var(--c-white);
}
/* Mobile submenu (tap accordion) — toggle mirrors .mobile-menu-nav a */
.mobile-submenu-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 24px;
background: none;
border: 0;
color: var(--c-white);
font-family: var(--ff-heading, inherit);
font-size: 16px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background 0.2s ease;
}
.mobile-submenu-toggle:hover,
.mobile-submenu-toggle:focus-visible {
background: rgba(255, 255, 255, 0.08);
}
.mobile-submenu-toggle > em:first-child {
flex: 0 0 24px;
width: 24px;
font-size: 19px;
text-align: center;
color: var(--c-white);
}
.mobile-submenu-caret {
margin-left: auto;
font-size: 14px;
transition: transform 0.3s ease;
}
.mobile-submenu-toggle[aria-expanded="true"] .mobile-submenu-caret {
transform: rotate(180deg);
}
.mobile-submenu {
list-style: none;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.18);
}
.mobile-submenu[hidden] {
display: none;
}
.mobile-submenu li + li {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-submenu a {
display: block;
padding: 14px 24px 14px 64px;
color: rgba(255, 255, 255, 0.85);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.mobile-submenu a:hover,
.mobile-submenu a:focus {
background: rgba(255, 255, 255, 0.08);
color: var(--c-white);
}
/* Secondary pill links */
.mobile-menu-pills {
list-style: none;
margin: 20px 0 0;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.mobile-menu-pills a {
display: block;
padding: 16px 20px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
color: var(--c-white);
font-size: 17px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease;
}
.mobile-menu-pills a:hover,
.mobile-menu-pills a:focus {
background: rgba(255, 255, 255, 0.16);
}
/* Chat CTA */
.mobile-menu-chat {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 28px 24px 0;
padding: 16px 24px;
border-radius: 999px;
background: var(--c-white);
color: var(--c-primary);
font-size: 17px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mobile-menu-chat em {
color: var(--c-blue);
font-size: 16px;
}
.mobile-menu-chat:hover,
.mobile-menu-chat:focus {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
/* Help footer */
.mobile-menu-help {
margin-top: 28px;
padding: 0 24px;
text-align: center;
}
.mobile-menu-help-label {
margin: 0 0 8px;
color: rgba(255, 255, 255, 0.85);
font-size: 16px;
}
.mobile-menu-help-phone {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--c-white);
font-size: 24px;
font-weight: 700;
text-decoration: none;
}
.mobile-menu-help-phone em {
font-size: 20px;
}
/* Hidden state for no-JS / aria */
.mobile-menu[hidden],
.mobile-menu-overlay[hidden] {
display: none;
}
body.mobile-menu-open {
overflow: hidden;
}
/* =================================================================
=== Footer ===
================================================================= */
.footer-area {
background: #E6E6E6;
padding: 50px 0 0;
}
.footer-heading {
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 22px;
}
.footer-links {
list-style: none;
margin: 0;
padding: 0;
}
.footer-links li {
margin-bottom: 7px;
}
.footer-links li:last-child {
margin-bottom: 0;
}
.footer-links a {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #4f6685;
transition: color 0.2s;
}
.footer-links a:hover,
.footer-links a:focus {
color: var(--c-accent);
}
/* Footer connect area (white) — extra links + social icons */
.footer-connect {
background: #0E2545;
padding: 50px 0 36px;
text-align: center;
}
.footer-bottom-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
margin-bottom: 22px;
}
.footer-bottom-links a {
color: #fff;
font-size: 15px;
transition: color 0.2s;
}
.footer-bottom-links a:hover,
.footer-bottom-links a:focus {
color: var(--c-accent);
}
.footer-bottom-links span {
color: #c2c8d0;
font-size: 14px;
}
.footer-social {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
transition: color 0.3s;
}
.footer-social a:hover,
.footer-social a:focus {
color: var(--c-accent);
}
/* Footer legal band (navy) — copyright + trademark lines */
.footer-bottom {
background: var(--c-primary);
padding: 0 0 34px;
text-align: center;
}
.footer-copyright {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.5;
color: #fff;
}
.footer-legal {
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}
.footer-legal p {
margin: 0 0 8px;
}
.footer-legal p:last-child {
margin-bottom: 0;
margin-top: 12px;
}
/* =================================================================
=== [APPEND PAGE SECTIONS BELOW IN ORDER OF APPEARANCE] ===
================================================================= */
/* === Hero === */
.hero-area {
position: relative;
padding: 0 0 40px;
z-index: 11
}
.hero-banner {
position: relative;
height: 603px;
border-bottom-left-radius: 240px;
border-bottom-right-radius: 240px;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 50px;
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-bottom-left-radius: 240px;
border-bottom-right-radius: 240px;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.3%, rgba(0, 0, 0, 0.55) 100%);
border-bottom-left-radius: 240px;
border-bottom-right-radius: 240px;
}
.hero-heading {
position: relative;
z-index: 1;
width: 100%;
max-width: 1120px;
margin: 0;
padding: 0 24px;
text-align: center;
color: #fff;
font-size: 40px;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
margin: 0 auto
}
/* Booking widget — sits inside the banner near the bottom */
.booking-widget {
width: 938px;
max-width: calc(100% - 80px);
height: 75px;
display: flex;
align-items: center;
background: #fff;
border-radius: 50px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
padding: 0 10px 0 38px;
z-index: 5;
margin: 30px auto 0;
position: relative;
z-index: 55;
}
.booking-field {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 0;
position: relative;
}
/* Destination field is wider, like the reference */
.booking-field label,
.booking-field-label {
font-size: 16px;
font-weight: 500;
line-height: 1.4;
color: var(--c-primary);
margin: 0 0 2px;
cursor: pointer;
}
/* Highlight the field currently being edited in the date picker */
.booking-field.is-active .booking-field-label {
color: var(--c-accent);
}
.booking-field input {
border: 0;
padding: 0;
background: transparent;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.4;
width: 100%;
}
.booking-field input::placeholder {
color: var(--c-gray);
opacity: 1;
}
.booking-field input:focus {
outline: none;
}
/* Date trigger buttons */
.booking-date-trigger,
.booking-where-trigger {
-webkit-appearance: none;
appearance: none;
border: 0;
padding: 0;
background: transparent;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: left;
width: 100%;
cursor: pointer;
color: inherit;
}
.booking-date-trigger .placeholder,
.booking-where-trigger .placeholder {
background-color: transparent !important;
cursor: pointer
}
.booking-date-trigger .value,
.booking-where-trigger .value {
color: var(--c-primary);
}
.booking-date-trigger:focus-visible,
.booking-where-trigger:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Destination popup */
.destination-popup {
position: absolute;
top: calc(100% + 18px);
left: 0;
width: 340px;
max-width: calc(100vw - 40px);
background: #fff;
border-radius: 18px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
padding: 14px;
z-index: 30;
}
.destination-popup-search {
position: relative;
margin-bottom: 10px;
}
.destination-popup-search em {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--c-gray);
font-size: 14px;
}
.destination-popup-search input {
width: 100%;
border: 1px solid #e2e6ec;
border-radius: 12px;
padding: 11px 14px 11px 38px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
color: var(--c-primary);
}
.destination-popup-search input::placeholder {
color: var(--c-gray);
}
.destination-popup-search input:focus {
outline: none;
border-color: var(--c-accent);
}
.destination-popup-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 260px;
overflow-y: auto;
}
.destination-popup-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
font-size: 15px;
color: var(--c-primary);
border-radius: 10px;
cursor: pointer;
}
.destination-popup-list li::before {
content: "\f3c5";
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: var(--c-accent);
font-size: 13px;
}
.destination-popup-list li:hover,
.destination-popup-list li[aria-selected="true"] {
background: #f1f3f6;
}
.destination-popup-empty {
margin: 0;
padding: 16px 14px;
text-align: center;
font-size: 14px;
color: var(--c-gray);
}
/* Dual-month date range calendar */
.date-calendar {
position: absolute;
top: calc(100% + 14px);
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
background: #fff;
border-radius: 20px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
padding: 28px 32px 32px;
z-index: 20;
}
.cal-nav {
position: absolute;
top: 30px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--c-primary);
font-size: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.cal-nav:hover {
background: #f1f3f6;
}
.cal-prev {
left: 28px;
}
.cal-next {
right: 28px;
}
.cal-months {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.cal-month-title {
text-align: center;
font-size: 20px;
font-weight: 600;
color: var(--c-primary);
margin-bottom: 18px;
}
.cal-dow {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-bottom: 1px solid #e6e8ec;
padding-bottom: 12px;
margin-bottom: 8px;
}
.cal-dow span {
text-align: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--c-gray);
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px 0;
}
.cal-day {
aspect-ratio: 1 / 1;
border: 0;
background: transparent;
font-family: 'Poppins', sans-serif;
font-size: 15px;
color: var(--c-primary);
cursor: pointer;
border-radius: 50%;
transition: background 0.15s, color 0.15s;
}
.cal-day:hover:not(:disabled):not(.cal-day-muted) {
background: #f1f3f6;
}
.cal-day-muted,
.cal-day-disabled {
color: #c5cad2;
cursor: default;
}
.cal-day-inrange {
background: rgba(217, 93, 49, 0.12);
border-radius: 0;
}
.cal-day-start,
.cal-day-end {
background: var(--c-accent);
color: #fff;
font-weight: 600;
}
.cal-day-start {
border-radius: 50% 0 0 50%;
}
.cal-day-end {
border-radius: 0 50% 50% 0;
}
.cal-day-start.cal-day-end {
border-radius: 50%;
}
.booking-search {
flex-shrink: 0;
width: 60px;
height: 60px;
border: 0;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s;
}
.booking-search:hover,
.booking-search:focus {
background: #c14f27;
outline: none;
}
.booking-search-text {
display: none;
}
/* === Vacation Deals (cards) === */
.deal-area {
padding: 30px 0 70px;
}
.deal-card {
height: 100%;
background: #fff;
border-radius: 20px;
box-shadow: 4px 4px 7.7px rgba(0, 0, 0, 0.3);
padding: 22px;
overflow: hidden;
}
.deal-card:hover .btn_border_blue {
background: var(--c-blue);
color: #fff;
}
.deal-card:hover .btn_accent {
background: #c54b1f;
color: #fff;
}
.deal-card > .row {
height: 100%;
}
.deal-content {
padding-right: 16px;
}
.deal-title {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 14px;
}
.deal-text {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--c-primary);
margin: 0 0 22px;
}
.deal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-accent);
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
padding: 8px 22px;
border: 2px solid var(--c-accent);
border-radius: 20px;
transition: background 0.3s, color 0.3s;
}
.deal-btn:hover,
.deal-btn:focus {
background: #c14f27;
border-color: #c14f27;
color: #fff;
}
.deal-btn-outline {
background: #fff;
border-color: var(--c-blue);
color: var(--c-blue);
}
.deal-btn-outline:hover,
.deal-btn-outline:focus {
background: var(--c-blue);
border-color: var(--c-blue);
color: #fff;
}
.deal-media {
overflow: hidden;
border-radius: 20px;
}
.deal-media img {
width: 100%;
height: 209px;
object-fit: cover;
display: block;
transition: all 0.4s
}
.deal-card:hover .deal-media img {
transform: scale(1.1)
}
/* === Popular Destinations (slider) === */
.destinations-area {
padding: 50px 0 80px;
}
.section-head {
text-align: center;
max-width: 760px;
margin: 0 auto 40px;
}
.section-heading {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 12px;
}
.section-sub {
font-size: 16px;
line-height: 1.6;
color: var(--c-gray);
margin: 0;
}
.destinations-slider {
display: flex;
justify-content: center;
margin-left: -12px;
margin-right: -12px
}
.destinations-slider .item {
padding: 0 12px;
flex: 0 0 20%;
max-width: 20%;
}
.destination-card {
border-radius: 20px;
}
.destination-card-link {
position: relative;
display: block;
height: 422px;
border-radius: 20px;
}
.destination-card-link img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
border-radius: 20px;
}
/* Dark gradient rising from the bottom of the card */
.dest-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0) 49%);
border-radius: 20px;
transition: background 0.35s ease;
}
.destination-card-link:hover .dest-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0.1) 60%);
}
/* Featured card orange badge (top-right) */
.dest-badge {
position: absolute;
top: 14px;
right: -8px;
display: inline-flex;
align-items: baseline;
gap: 4px;
background: var(--c-accent);
color: #fff;
font-size: 10px;
line-height: 1.2;
padding: 3px 9px;
border-radius: 10px 10px 0px 10px;
z-index: 2;
}
.dest-badge::after {
position: absolute;
content: "";
bottom: -10px;
right: 0px;
width: 9px;
height: 10px;
background: url('data:image/svg+xml,') no-repeat scroll 0 0/cover;
z-index: -1;
}
.dest-badge strong {
font-size: 14px;
font-weight: 700;
}
/* Bottom-left info block */
.dest-info {
position: absolute;
left: 14px;
right: 14px;
bottom: 18px;
color: #fff;
z-index: 2;
transition: transform 0.35s ease;
}
.destination-card-link:hover .dest-info {
transform: translateY(-6px);
}
.dest-nights {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 4px;
transition: color 0.3s ease;
}
.dest-from {
display: block;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
}
.dest-price {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
transition: color 0.3s ease;
}
.dest-price em {
font-size: 16px;
transition: transform 0.3s ease;
}
/* Hover: text reacts — price + arrow turn orange, arrow nudges */
.destination-card-link:hover .dest-price em {
transform: translateX(5px);
}
.dest-city {
position: absolute;
left: 0;
bottom: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: #fff;
transition: color 0.3s ease;
}
.is-feature .dest-info {
bottom: 14px;
}
/* Slick controls */
.destinations-slider .slick-dots {
position: static;
margin-top: 34px;
display: flex !important;
justify-content: center;
gap: 10px;
padding: 0;
list-style: none;
}
.destinations-slider .slick-dots li {
width: auto;
height: auto;
margin: 0;
}
.destinations-slider .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
border-radius: 50%;
background: #d3d8df;
border: 0;
text-indent: -9999px;
transition: background 0.3s, width 0.3s;
}
.destinations-slider .slick-dots li button:before {
content: none;
}
.destinations-slider .slick-dots li.slick-active button {
width: 28px;
border-radius: 6px;
background: var(--c-accent);
}
.destinations-slider .slick-prev,
.destinations-slider .slick-next {
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
color: var(--c-primary);
z-index: 2;
}
.destinations-slider .slick-prev:hover,
.destinations-slider .slick-next:hover {
background: var(--c-accent);
color: #fff;
}
.destinations-slider .slick-prev:before,
.destinations-slider .slick-next:before {
content: none;
}
.destinations-slider .slick-prev {
left: -10px;
}
.destinations-slider .slick-next {
right: -10px;
}
/* === Westgate Vacations for Everyone === */
.vacations-area {
padding: 30px 0 80px;
}
.vacations-media img {
width: 100%;
height: 507px;
object-fit: cover;
border-radius: 30px;
display: block;
}
.vacations-content {
padding-left: 16px;
}
.vacations-content p a:hover,
.vacations-content li a:hover,
.content-text p a:hover,
.content-text li a:hover {
text-decoration: underline;
color: var(--c-accent);
}
.vacations-title,
.section-title {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 18px;
}
.vacations-text {
font-size: 16px;
font-weight: 400;
line-height: 1.8;
color: var(--c-primary);
margin: 0 0 28px;
}
.vacations-text strong {
font-weight: 700;
}
.vacations-btn {
display: inline-flex;
align-items: center;
gap: 14px;
background: #fff;
color: var(--c-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
padding: 17px 38px;
border: 2px solid var(--c-primary);
border-radius: 40px;
transition: background 0.3s, color 0.3s;
}
.bg_gray .vacations-btn {
background: transparent
}
.vacations-btn em {
font-size: 16px;
transition: transform 0.3s;
}
.vacations-btn:hover,
.vacations-btn:focus {
background: var(--c-primary);
color: #fff;
}
.vacations-btn:hover em {
transform: translateX(4px);
}
/* === Westgate Resorts === */
.resorts-area {
padding: 30px 0 60px;
}
.resorts-media img {
width: 100%;
height: 390px;
object-fit: cover;
border-radius: 30px;
display: block;
}
.resorts-content {
padding-right: 16px;
}
.resorts-text {
font-size: 16px;
font-weight: 400;
line-height: 1.8;
color: var(--c-primary);
margin: 0 0 24px;
}
.resorts-statement {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: var(--c-primary);
margin: 0 0 24px;
}
/* === Westgate Resorts Difference === */
.difference-area {
padding: 20px 0 80px;
}
.difference-area .vacations-media img {
height: 518px;
}
.difference-title {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 18px;
}
/* === Customize Vacation Package (banner) === */
.customize-area {
position: relative;
background: var(--c-primary);
min-height: 162px;
display: flex;
align-items: center;
overflow: hidden;
}
.customize-palm {
position: absolute;
bottom: -156px;
right: 5%;
opacity: 1;
width: 26%;
}
.customize-palm img {
width: 300px;
height: auto;
display: block;
}
.customize-inner {
position: relative;
z-index: 1;
padding: 0;
color: #fff;
}
.customize-title {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0 0 8px;
}
.customize-call {
font-size: 25px;
font-weight: 300;
line-height: 1.2;
color: #fff;
margin: 0;
}
.customize-phone {
font-weight: 700;
color: #fff;
margin-left: 8px;
white-space: nowrap;
}
.customize-phone:hover,
.customize-phone:focus {
color: var(--c-accent);
text-decoration: underline;
}
/* =================================================================
=== Custom CSS ===
================================================================= */
.container-fluid {
padding: 0 4%;
max-width: 1920px;
}
.deal-card {
display: block;
border: 2px solid rgba(14, 37, 69, 0.00)
}
.destination-card {
position: relative;
top: 0;
transition: all 0.3s
}
.destination-card:hover {
transform: translateY(-12px)
}
.destinations-area .top-heading {
color: #0E2545
}
.dest-price .icon {
margin-left: 15px;
display: block
}
.dest-price {
margin-top: 10px
}
.destinations-slider .slick-dots {
display: none !important
}
.slick-dotted.slick-slider {
margin-bottom: 0
}
.vacation-banner-box {
padding: 30px;
border: 2px solid var(--Soft-Blue-Gradient, rgba(14, 37, 69, 0.60));
box-shadow: -5px -5px 250px 0 rgba(255, 255, 255, 0.02) inset;
border-radius: 30px
}
.vacation-banner-box .call-text a:hover {
text-decoration: underline;
color: #c14f27
}
.vacation-banner-left .heading {
font-size: 26px;
font-weight: 700;
margin-bottom: 0;
color: #0E2545;
}
.vacation-banner-left .divider {
width: 100%;
height: 1px;
background: #0E2545;
margin: 20px 0
}
.vacation-banner-left .lg_btn {
margin-top: 20px;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
outline-offset: 2px;
}
.vacations-area .top-heading {
margin-bottom: 40px;
color: #0E2545
}
.footer-card {
padding: 30px 0;
position: relative;
z-index: 1
}
.footer-card::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(186, 208, 221, 0) 0%, rgba(186, 208, 221, 1) 100%);
z-index: -1;
}
.footer-card img {
width: 100%
}
.footer-link {
padding-bottom: 50px
}
.footer-card .action {
transition: all 0.3s;
}
.footer-card:hover .action {
text-decoration: underline;
color: var(--c-accent);
}
.footer-card {
position: relative;
z-index: 1;
}
.footer-card .bg_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
z-index: -1
}
.footer-banner-text {
font-size: 24px;
font-weight: 500;
line-height: 120%
}
.footer-banner-text p {
margin: 0
}
.footer-banner-text .heading {
font-size: 34px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 5px;
}
.footer-banner-text .action {
color: #305393;
font-weight: 600
}
.footer-card .link_pos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0
}
/* =================================================================
=== Responsive overrides ===
================================================================= */
@media (max-width: 1199.98px) {
h1,
.h1 {
font-size: 44px;
}
h2,
.h2 {
font-size: 40px;
}
h3,
.h3 {
font-size: 32px;
}
.hero-banner {
border-bottom-left-radius: 160px;
border-bottom-right-radius: 160px;
}
.hero-heading {
font-size: 34px;
}
}
@media (max-width: 991.98px) {
#menu-toggle {
display: block;
}
.mainmenu {
display: none;
}
.mainmenu ul li > a {
font-size: 16px;
padding: 12px 0;
}
.header-actions {
gap: 12px;
}
.header-login {
padding: 9px 16px;
}
.header-lang-toggle {
padding: 9px 12px;
}
.hero-banner {
height: 520px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.hero-bg {
object-position: 28% 42%;
transform: scale(1);
transform-origin: 28% 42%;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px
}
.hero-overlay {
top: 68px;
background: linear-gradient(180deg, rgba(54, 57, 60, 0) 0%, rgba(43, 46, 50, 0.75) 100%);
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.hero-heading {
top: auto;
bottom: 150px;
transform: none;
font-size: 28px;
line-height: 1.25;
text-align: left;
left: 0;
padding: 0 28px;
max-width: 100%;
}
.booking-widget {
position: relative;
left: auto;
top: auto;
bottom: auto;
transform: none;
margin: 20px auto 0;
width: calc(100% - 32px);
max-width: 460px;
height: auto;
flex-wrap: wrap;
background: #f4f4f4;
border-radius: 24px;
padding: 24px;
gap: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.hero-banner {
padding-bottom: 30px
}
.booking-field {
flex: 1 1 100%;
padding: 14px 18px;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 12px;
}
.booking-field:first-child {
flex: 1 1 100%;
border-color: var(--c-blue);
}
.booking-field + .booking-field {
padding-left: 18px;
}
.booking-field + .booking-field::before {
display: none;
}
.booking-field-label,
.booking-field label {
font-size: 16px;
font-weight: 600;
}
/* Check in / Check out share a row */
.booking-field:nth-child(2),
.booking-field:nth-child(3) {
flex: 1 1 calc(50% - 7px);
}
.booking-search {
flex: 1 1 100%;
width: 100%;
height: 56px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
gap: 10px;
}
.booking-search-text {
display: inline;
}
}
@media (max-width: 767.98px) {
.section,
section {
padding: 45px 0;
}
h1,
.h1 {
font-size: 36px;
}
h2,
.h2 {
font-size: 32px;
}
h3,
.h3 {
font-size: 26px;
}
h4,
.h4 {
font-size: 22px;
}
.section-heading {
font-size: 28px;
}
.cta-btn {
padding: 12px 24px;
font-size: 13px;
}
.hero-banner {
height: 520px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.hero-overlay {
top: 68px;
background: linear-gradient(180deg, rgba(54, 57, 60, 0) 0%, rgba(43, 46, 50, 0.75) 100%);
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.hero-heading {
font-size: 27px;
bottom: 150px;
}
.date-calendar {
padding: 22px 18px 24px;
border-radius: 16px;
}
.cal-months {
grid-template-columns: 1fr;
gap: 28px;
}
.cal-month[data-month-index="1"] {
display: none;
}
.cal-next {
right: 18px;
}
.cal-prev {
left: 18px;
}
.vacation-banner-left {
text-align: center;
margin-bottom: 20px
}
.vacation-btn.mobile {
display: block !important;
background: #0E2545;
color: #fff;
font-weight: 700;
border-radius: 30px;
margin-top: 20px;
width: 100%;
text-align: center;
padding: 16px 60px
}
.vacation-banner-left .divider {
display: none
}
.vacations-area .top-heading p {
display: none
}
.vacations-btn {
font-size: 16px;
padding: 14px 30px;
width: 100%;
text-align: center;
display: block;
}
.hero-heading {
font-size: 24px;
bottom: auto;
text-align: center;
}
}
@media (max-width: 575.98px) {
.header-inn {
padding: 8px 0;
gap: 12px;
}
.header-logo img {
width: 170px;
height: auto;
}
.header-actions {
gap: 10px;
}
.header-login {
display: none;
}
.header-lang-toggle .lang-caret {
display: none;
}
.header-lang-toggle {
padding: 8px 10px;
gap: 5px;
}
.header-cart {
font-size: 16px;
}
.menu-login-item {
display: block;
}
.deal-area {
padding: 24px 0 40px;
}
.deal-card {
padding: 18px;
}
.deal-title {
font-size: 20px;
}
.destinations-area {
padding: 36px 0 50px;
}
.section-heading {
font-size: 26px;
}
.vacations-area {
padding: 20px 0 50px;
}
.vacations-media img {
height: 320px;
border-radius: 20px;
}
.vacations-content {
padding-left: 0;
}
.vacations-text {
font-size: 16px;
}
.vacations-btn {
font-size: 16px;
padding: 14px 30px;
}
.difference-area {
padding: 10px 0 50px;
}
.difference-title {
font-size: 26px;
}
.resorts-area {
padding: 20px 0 40px;
}
.resorts-media img {
height: 280px;
border-radius: 20px;
}
.resorts-content {
padding-right: 0;
}
.resorts-text {
font-size: 16px;
}
.resorts-statement {
font-size: 20px;
}
.customize-title {
font-size: 24px;
}
.customize-call {
font-size: 16px;
}
.customize-phone {
display: inline-block;
margin-left: 6px;
}
.customize-palm img {
width: 180px;
}
}
/*Custom CSS*/
.hero-area {
padding: 0
}
.three-col-slider .slide {
padding: 15px
}
.three-col-slider .slick-list {
margin-left: -15px;
margin-right: -15px
}
.pt_50 {
padding-top: 50px
}
.deal-media img {
object-position: top
}
.deal-wrapper {
padding: 3px;
background: linear-gradient(126deg, rgba(20, 172, 249, 0.58) 0%, rgba(20, 172, 249, 0) 100%);
overflow: hidden;
border-radius: 24px;
box-shadow: 4px 4px 7.7px rgba(0, 0, 0, 0.3)
}
.destinations-area .top-heading {
margin-bottom: 40px
}
.content-img img {
width: 100%;
border-radius: 30px
}
.header-phone {
display: none
}
.slick-dots {
position: inherit;
bottom: auto;
margin-top: 10px
}
.slick-dots li {
width: auto;
height: auto;
margin: 0 4px
}
.slick-dots li button:before {
display: none
}
.slick-dots li button {
padding: 0;
width: 10px;
height: 5px;
border-radius: 5px;
background: var(--c-accent);
opacity: 0.5;
transition: all 0.4s
}
.slick-dots li.slick-active button {
width: 18px;
opacity: 1
}
.booking-field {
position: relative;
padding-right: 50px;
}
.booking-field::after {
position: absolute;
content: "";
top: 0;
right: 50px;
width: 1px;
height: 100%;
background: #000;
opacity: 0.2
}
.booking-field:last-child::after {
display: none
}
.booking-widget .fields-wrapper {
flex: 1;
width: 100%;
display: flex
}
@media(max-width:1400px) {
.destinations-slider .item {
padding: 6px;
}
.destinations-slider {
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}
.destinations-slider .item {
flex: 20%;
max-width: 20%;
}
.destination-card-link {
height: 290px;
border-radius: 16px;
}
.destinations-slider .item.all-location-cta {
flex: 100%;
max-width: 100%
}
.container-fluid {
padding: 0 2%;
}
.mobile-menu {
display: block
}
.header-area {
position: relative
}
a.header-phone {
display: block;
width: 22px;
}
.header-cart,
.header-login,
.header-lang {
display: none
}
.mainmenu {
display: none;
}
#menu-toggle {
display: block
}
.section-heading {
font-size: 30px;
}
.destinations-area .top-heading,
.vacations-area .top-heading {
font-size: 16px;
}
.resorts-statement {
font-size: 16px;
}
body {
font-size: 16px
}
.difference-title {
font-size: 26px;
}
.customize-title {
font-size: 28px;
margin: 0 0 12px;
}
.customize-call {
font-size: 22px;
}
.footer-heading {
font-size: 16px;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
font-size: 15px;
}
.mobile-menu {
width: 360px;
}
}
@media(max-width:991px) {
.destinations-slider .item {
flex: 50%;
max-width: 50%;
}
.destination-card-link {
height: 220px;
border-radius: 16px;
}
.footer-links a {
font-size: 16px
}
.footer-links li {
margin-bottom: 6px;
}
.footer-heading {
font-size: 16px;
margin: 0 0 12px;
}
.footer-bottom-links a {
font-size: 12px
}
.footer-legal {
font-size: 12px
}
.footer-copyright {
font-size: 12px
}
.customize-palm {
bottom: -60px;
right: -50px;
width: 250px;
}
.resorts-statement {
font-size: 16px;
}
body {
font-size: 16px
}
.customize-title {
font-size: 26px;
}
.customize-call {
font-size: 20px;
}
.difference-title {
font-size: 24px;
}
.resorts-text {
font-size: 16px
}
.three-col-slider .slick-list {
padding-right: 120px;
}
.header-logo img {
width: 250px;
height: auto;
}
.hero-heading {
top: auto;
bottom: auto;
font-size: 36px;
text-align: center;
max-width: 100%;
}
.booking-widget {
max-width: 100%
}
.vacation-banner-left .heading {
font-size: 22px;
}
.section-heading {
font-size: 28px;
}
.vacations-area .top-heading {
font-size: 16px;
}
.vacations-title {
font-size: 22px;
}
}
@media(max-width:767px) {
.footer-heading {
font-size: 12px;
margin: 0 0 12px;
}
.footer-links a {
font-size: 12px
}
.vacations-text {
font-size: 14px;
}
.vacations-btn {
font-size: 15px;
padding: 14px 20px;
}
.dest-price {
font-size: 20px
}
.destinations-area .top-heading {
font-size: 15px;
}
.deal-title {
font-size: 16px;
}
.deal-btn {
padding: 8px 15px;
white-space: nowrap
}
.destinations-slider .item {
padding: 6px;
}
.destinations-slider {
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}
.destinations-slider .item {
flex: 50%;
;
max-width: 50%;
}
.destination-card-link {
height: 220px;
border-radius: 16px;
}
.destinations-slider .item.all-location-cta {
flex: 100%;
max-width: 100%
}
.destinations-slider .item.all-location-cta .destination-card-link {
height: 120px
}
.vacation-banner-left .heading {
font-size: 24px;
margin-bottom: 15px;
}
.customize-call a {
display: block;
font-size: 28px;
margin-top: 10px
}
.customize-call {
margin-top: 30px
}
.customize-inner {
padding: 0
}
.three-col-slider .slick-list {
padding-right: 60;
}
.pt_50 {
padding-top: 20px;
}
.vacations-title {
font-size: 24px;
}
.booking-widget {
max-width: 100%
}
.hero-heading {
font-size: 24px
}
}
@media(max-width:575px) {
.three-col-slider .slick-list {
padding-right: 0;
}
.difference-title {
font-size: 20px;
}
.content-img {
margin-bottom: 30px
}
.resorts-statement {
font-size: 16px;
}
.vacation-banner-left .heading {
font-size: 22px;
margin-bottom: 20px;
}
.hero-banner {
height: 600px
}
}
/* =================================================================
=== Blog Page (Figma redesign) ===
================================================================= */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.blog-section-heading {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 40px;
}
.categories-area .blog-section-heading {
margin-bottom: 30px
}
/* === Page intro (WHITE background) === */
.blog-intro-area {
padding: 36px 0 30px;
}
.blog-breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 0 0 28px;
padding: 0;
}
.blog-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: #0e2545;
text-transform: uppercase
}
.blog-breadcrumb li:last-child {
padding-right: 0
}
.blog-breadcrumb a {
display: inline-flex;
align-items: center;
color: #0e2545;
font-size: 12px;
}
.blog-breadcrumb a:hover {
color: var(--c-accent);
}
.blog-breadcrumb li:not(:last-child)::before {
content: "/";
font-weight: 900;
font-size: 11px;
color: #0e2545;
margin-right: 2px;
position: absolute;
right: 0;
}
.blog-intro-title {
font-size: 38px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 16px;
max-width: 1320px;
}
.blog-intro-text {
font-size: 20px;
line-height: 1.4;
color: #0e2545;
margin: 0;
max-width: 1320px;
}
/* === Featured area + blue band behind cards === */
.featured-area {
position: relative;
padding: 30px 0 80px;
}
/* Light-blue band sits BEHIND the featured cards row only */
.featured-band {
position: absolute;
left: 0;
right: 0;
top: 185px;
bottom: 80px;
background: #d7e5f7;
z-index: 0;
}
.featured-area .container-fluid {
position: relative;
z-index: 1;
}
/* === Shared blog card === */
.blog-card,
.featured-card {
display: flex;
flex-direction: column;
height: 100%;
background: #f9f9f9;
border-radius: 35px;
box-shadow: 2px 4px 14.5px 3px rgba(0, 0, 0, 0.2);
padding: 0 26px;
transition: transform 0.3s, box-shadow 0.3s;
margin-top: 30px;
position: relative
}
.blog-cat-filter {
margin-bottom: 40px
}
.blog-card:hover,
.featured-card:hover {
transform: translateY(-6px);
box-shadow: 2px 8px 22px 3px rgba(0, 0, 0, 0.25);
}
/* Image inset inside the card with rounded TOP corners */
.blog-card-media {
position: relative;
display: block;
border-radius: 35px 35px 0 0;
overflow: hidden;
margin-top: -32px
}
.blog-card-media img {
width: 100%;
height: 268px;
object-fit: cover;
display: block;
}
.blog-card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 37, 69, 0.5) 0%, rgba(255, 255, 255, 0) 50%);
pointer-events: none;
}
.blog-card-tags {
position: absolute;
top: 16px;
left: 17px;
right: 17px;
z-index: 2;
display: flex;
/* single row that scrolls/swipes horizontally instead of wrapping */
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* stops a horizontal swipe from also scrolling the page */
touch-action: pan-x;
}
/* hide the scrollbar (WebKit) — swipe/trackpad/drag still scrolls */
.blog-card-tags::-webkit-scrollbar {
display: none;
}
/* mouse drag-to-scroll affordance (added by JS only when it overflows) */
.blog-card-tags.is-draggable {
cursor: grab;
}
.blog-card-tags.is-dragging {
cursor: grabbing;
user-select: none;
scroll-behavior: auto;
}
.blog-card-tags-stack {
align-items: flex-start;
}
.blog-card-tag {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 123px;
padding: 6px 16px;
background: #fff;
border: 1.5px solid #fff;
border-radius: 35px;
font-size: 14px;
font-weight: 500;
color: #0e2545;
text-align: center;
line-height: 1.2;
}
.blog-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 22px 0 30px;
}
.blog-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 14px;
margin-bottom: 16px;
line-height: normal
}
.blog-card-author {
text-align: right;
}
.blog-card-title {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 14px;
}
.blog-card-title a {
color: inherit;
}
.blog-card-title a:hover {
color: var(--c-accent);
}
.blog-card-text {
font-size: 16px;
line-height: 1.4;
margin: 0 0 22px;
flex: 1 1 auto;
}
.blog-read-more {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 700;
color: #0e2545;
margin-top: auto;
}
.blog-read-more:hover {
color: var(--c-accent);
gap: 18px;
}
/* === Featured row (Bootstrap columns) === */
.featured-card-wide .blog-card-media img {
height: 268px;
}
.featured-card-title {
font-size: 28px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 16px;
}
.featured-card-title a {
color: inherit;
}
.featured-card-title a:hover {
color: var(--c-accent);
}
.featured-card-text {
font-size: 16px;
line-height: 1.5;
margin: 0 0 22px;
flex: 1 1 auto;
}
.featured-read-more {
font-size: 20px;
}
/* === Blog categories (tabbed) === */
.categories-area {
padding: 50px 0 100px;
}
.category-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin-bottom: 32px;
}
.category-tab {
display: inline-flex;
align-items: center;
gap: 14px;
background: none;
border: 0;
padding: 0 28px 0 0;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 400;
cursor: pointer;
transition: color 0.2s;
}
.category-tab:hover {
color: var(--c-accent);
}
.category-tab.is-active {
font-weight: 600;
color: #0e2545;
}
.category-tab em {
font-size: 16px;
color: #0e2545;
transition: transform 0.2s;
}
.category-tab.is-active em {
transform: rotate(180deg);
}
.category-tab-divider {
width: 1.5px;
align-self: stretch;
min-height: 28px;
background: #0e2545;
margin-right: 28px;
}
.blog-pills {
display: flex;
flex-wrap: wrap;
gap: 16px 22px;
list-style: none;
margin: 0;
padding: 0;
}
.blog-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 207px;
padding: 13px 34px;
border: 2px solid #0e2545;
border-radius: 35px;
font-size: 16px;
color: #000;
line-height: 1.2;
text-align: center;
transition: all 0.25s;
}
.blog-pill:hover,
.blog-pill.is-active {
background: #0e2545;
color: #fff;
}
/* === Newsletter === */
.newsletter-area {
position: relative;
background: #0e2545;
padding: 42px 0 48px;
overflow: hidden;
}
.newsletter-palm,
.join-cta-palm {
position: absolute;
right: -40px;
height: auto;
opacity: 1;
top: auto;
transform: translateY(0);
bottom: 0;
width: 600px;
pointer-events: none;
z-index: 0;
}
.newsletter-palm {}
.newsletter-inner {
position: relative;
z-index: 1;
}
.newsletter-title {
font-size: 32px;
font-weight: 700;
color: #fdfdfd;
margin: 0 0 22px;
text-shadow: 0 1px 6.7px rgba(0, 0, 0, 0.4);
}
.newsletter-fields {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 18px;
}
.newsletter-field input {
width: 270px;
max-width: 100%;
height: 50px;
padding: 0 18px;
background: #f8f8f8;
border: 0;
border-radius: 24px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #333;
}
.newsletter-field input::placeholder {
color: #878787;
}
.newsletter-btn {
min-width: 270px;
height: 50px;
background: transparent;
border: 2px solid #fdfdfd;
border-radius: 24px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 700;
color: #fdfdfd;
cursor: pointer;
transition: all 0.25s;
text-shadow: 0 2px 8.7px rgba(0, 0, 0, 0.44);
}
.newsletter-btn:hover {
background: #fdfdfd;
color: #0e2545;
text-shadow: none;
}
/* === Blog grid (Bootstrap columns) === */
.blog-grid-area {
padding: 56px 0;
}
/* === Book banner (text+button LEFT, image RIGHT) === */
.book-banner-area {
padding: 30px 0;
padding-bottom: 60px
}
.book-vac-wrapper {
padding: 2px;
background: linear-gradient(126deg, rgba(20, 172, 249, 0.18) 0%, rgba(20, 172, 249, 0) 100%);
border-radius: 20px;
box-shadow: 0 5px 5.05px rgba(0, 0, 0, 0.15);
margin-right: 40px;
}
.book-banner {
background: #fff;
border-radius: 20px;
padding: 22px 32px;
}
.book-banner-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.book-banner-title {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0;
}
.book-banner-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 4px 32px;
background: #d95d31;
border-radius: 24px;
font-size: 16px;
font-weight: 700;
color: #fff;
white-space: nowrap;
transition: background 0.25s;
}
.book-banner-btn:hover {
background: #c14d24;
color: #fff;
}
.book-banner-media {
width: 100%;
max-width: calc(100% + 70px);
min-width: calc(100% + 70px);
}
.book-banner-media img {
width: 100%;
height: 135px;
object-fit: cover;
border-radius: 20px;
}
/* === Join CTA === */
.join-cta-area {
position: relative;
background: #0e2545;
padding: 56px 0;
overflow: hidden;
}
.join-cta-inner {
position: relative;
z-index: 1;
}
.join-cta-title {
font-size: 34px;
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0 0 5px;
max-width: 1040px;
}
.join-cta-text {
font-size: 20px;
color: #fff;
margin: 0 0 22px;
max-width: 970px;
}
.join-cta-phone {
display: inline-block;
font-size: 32px;
font-weight: 700;
color: #fff;
line-height: normal;
}
.join-cta-phone:hover {
color: var(--c-accent);
text-decoration: underline;
}
/* === Pagination === */
.pagination-area {
padding: 40px 0 70px;
}
.blog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 100px
}
.page-num,
.page-control {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 32px;
background: #fff;
border: 1px solid #f1f1f1;
font-size: 13px;
font-weight: 600;
color: #333;
transition: all 0.2s;
}
.page-control {
font-size: 12px;
}
.page-num:hover,
.page-control:hover {
background: #e8f3fb;
color: #0e2545;
}
.page-num.is-active {
background: #0693e3;
border-color: #0693e3;
color: #fff;
}
.page-ellipsis {
padding: 0 4px;
font-size: 13px;
font-weight: 600;
color: #333;
}
/* === Blog page responsive === */
@media (max-width: 1199.98px) {
.blog-pill {
min-width: 0;
}
.featured-card-wide .blog-card-media img {
height: 300px;
}
}
@media (max-width: 991.98px) {
.blog-intro-title {
font-size: 32px;
}
.blog-intro-text {
font-size: 20px;
}
.featured-card-wide .blog-card-media img {
height: 248px;
}
.book-banner-title {
font-size: 22px;
}
.book-banner-media img {
height: 200px;
}
.join-cta-title {
font-size: 30px;
}
.featured-band {
top: 80px;
bottom: 40px;
}
}
@media (max-width: 767.98px) {
.blog-intro-area {
padding: 28px 0 24px;
}
.blog-intro-title {
font-size: 26px;
}
.blog-section-heading {
font-size: 26px;
}
.featured-card-title {
font-size: 24px;
}
.featured-card-text {
font-size: 16px;
}
.featured-read-more {
font-size: 20px;
}
.category-tab {
font-size: 16px;
padding-right: 16px;
}
.category-tab-divider {
margin-right: 16px;
min-height: 22px;
}
.blog-pill {
font-size: 16px;
padding: 11px 24px;
}
.book-banner {
padding: 16px;
}
.book-banner-body {
align-items: stretch;
text-align: center;
}
.book-banner-btn {
width: 100%;
}
.book-banner-media img {
height: 180px;
}
.newsletter-palm,
.join-cta-palm {
width: 360px;
opacity: 0.5;
}
.join-cta-title {
font-size: 24px;
}
.join-cta-text {
font-size: 16px;
}
.join-cta-phone {
font-size: 28px;
}
.blog-card,
.featured-card {
margin-top: 24px;
}
}
@media (max-width: 575.98px) {
.blog-intro-title {
font-size: 24px;
}
.blog-breadcrumb li,
.blog-breadcrumb a {
font-size: 16px;
}
.newsletter-field {
flex: 1 1 100%;
}
.newsletter-field input {
width: 100%;
}
.newsletter-fields {
flex-direction: column;
width: 100%;
}
.newsletter-btn {
width: 100%;
}
.category-tabs {
flex-wrap: wrap;
row-gap: 12px;
}
.category-tab {
font-size: 16px;
}
.blog-pagination {
gap: 4px;
flex-wrap: wrap;
}
}
/*Custom CSS*/
.gy_70 {
--bs-gutter-y: 60px;
}
.hero-area {
padding: 0
}
.three-col-slider .slide {
padding: 15px
}
.three-col-slider .slick-list {
margin-left: -15px;
margin-right: -15px
}
.pt_50 {
padding-top: 50px
}
.deal-media img {
object-position: top
}
.deal-wrapper {
padding: 3px;
background: linear-gradient(126deg, rgba(20, 172, 249, 0.58) 0%, rgba(20, 172, 249, 0) 100%);
overflow: hidden;
border-radius: 24px;
box-shadow: 4px 4px 7.7px rgba(0, 0, 0, 0.3)
}
.destinations-area .top-heading {
margin-bottom: 40px
}
.content-img img {
width: 100%;
}
.header-phone {
display: none
}
.slick-dots {
position: inherit;
bottom: auto;
margin-top: 10px
}
.slick-dots li {
width: auto;
height: auto;
margin: 0 4px
}
.slick-dots li button:before {
display: none
}
.slick-dots li button {
padding: 0;
width: 10px;
height: 5px;
border-radius: 5px;
background: var(--c-accent);
opacity: 0.5;
transition: all 0.4s
}
.slick-dots li.slick-active button {
width: 18px;
opacity: 1
}
.pb_100 {
padding-bottom: 100px
}
@media(max-width:1400px) {
.destinations-slider .item {
padding: 6px;
}
.destinations-slider {
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}
.destinations-slider .item {
flex: 20%;
max-width: 20%;
}
.destination-card-link {
height: 290px;
border-radius: 16px;
}
.destinations-slider .item.all-location-cta {
flex: 100%;
max-width: 100%
}
.container-fluid {
padding: 0 2%;
}
.mobile-menu {
display: block
}
.header-area {
position: relative
}
a.header-phone {
display: block;
width: 22px;
}
.header-cart,
.header-login,
.header-lang {
display: none
}
.mainmenu {
display: none;
}
#menu-toggle {
display: block
}
.section-heading {
font-size: 30px;
}
.destinations-area .top-heading,
.vacations-area .top-heading {
font-size: 16px;
}
.resorts-statement {
font-size: 16px;
}
body {
font-size: 16px
}
.difference-title {
font-size: 26px;
}
.customize-title {
font-size: 28px;
margin: 0 0 12px;
}
.customize-call {
font-size: 22px;
}
.footer-heading {
font-size: 16px;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
font-size: 15px;
}
}
@media(max-width:991px) {
.destinations-slider .item {
flex: 50%;
max-width: 50%;
}
.destination-card-link {
height: 220px;
border-radius: 16px;
}
.footer-links a {
font-size: 16px
}
.footer-links li {
margin-bottom: 6px;
}
.footer-heading {
font-size: 16px;
margin: 0 0 12px;
}
.footer-bottom-links a {
font-size: 12px
}
.footer-legal {
font-size: 12px
}
.footer-copyright {
font-size: 12px
}
.customize-palm {
bottom: -60px;
right: -50px;
width: 250px;
}
.resorts-statement {
font-size: 16px;
}
body {
font-size: 16px
}
.customize-title {
font-size: 26px;
}
.customize-call {
font-size: 20px;
}
.difference-title {
font-size: 24px;
}
.resorts-text {
font-size: 16px
}
.three-col-slider .slick-list {
padding-right: 120px;
}
.header-logo img {
width: 250px;
height: auto;
}
.hero-heading {
top: auto;
bottom: auto;
font-size: 36px;
text-align: center;
max-width: 100%;
}
.booking-widget {
max-width: 100%
}
.vacation-banner-left .heading {
font-size: 22px;
}
.section-heading {
font-size: 28px;
}
.vacations-area .top-heading {
font-size: 16px;
}
.vacations-title {
font-size: 22px;
}
}
@media(max-width:767px) {
.footer-heading {
margin: 0 0 12px;
}
.vacations-text {
font-size: 14px;
}
.vacations-btn {
font-size: 15px;
padding: 14px 20px;
}
.dest-price {
font-size: 20px
}
.destinations-area .top-heading {
font-size: 15px;
}
.deal-title {
font-size: 16px;
}
.deal-btn {
padding: 8px 15px;
white-space: nowrap
}
.destinations-slider .item {
padding: 6px;
}
.destinations-slider {
flex-wrap: wrap;
margin-left: -6px;
margin-right: -6px;
}
.destinations-slider .item {
flex: 50%;
;
max-width: 50%;
}
.destination-card-link {
height: 220px;
border-radius: 16px;
}
.destinations-slider .item.all-location-cta {
flex: 100%;
max-width: 100%
}
.destinations-slider .item.all-location-cta .destination-card-link {
height: 120px
}
.vacation-banner-left .heading {
font-size: 24px;
margin-bottom: 15px;
}
.customize-call a {
display: block;
font-size: 28px;
margin-top: 10px
}
.customize-call {
margin-top: 30px
}
.customize-inner {
padding: 0
}
.three-col-slider .slick-list {
padding-right: 60;
}
.pt_50 {
padding-top: 20px;
}
.vacations-title {
font-size: 24px;
}
.booking-widget {
max-width: 100%
}
.hero-heading {
font-size: 28px
}
.vacations-title,
.section-title {
font-size: 22px;
}
}
@media(max-width:575px) {
.three-col-slider .slick-list {
padding-right: 0;
}
.difference-title {
font-size: 20px;
}
.content-img {
margin-bottom: 30px
}
.resorts-statement {
font-size: 16px;
}
.vacation-banner-left .heading {
font-size: 22px;
margin-bottom: 20px;
}
.hero-banner {
height: 600px
}
}
/*Custom CSS*/
.inner-things {
margin-bottom: 70px;
}
.header-shadow {
background: #FFF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.25);
}
/* =================================================================
=== Blog Single / Article Page ===
================================================================= */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Article header (centered) --- */
.single-head-area {
padding: 28px 0 22px;
}
.blog-breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0 0 26px;
padding: 0;
}
.blog-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 400;
color: #0e2545;
padding-right: 16px;
position: relative;
}
.blog-breadcrumb li:last-child {
padding-right: 0
}
.blog-breadcrumb a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #0e2545;
font-weight: 700
}
.blog-breadcrumb a:hover {
color: var(--c-accent, #d95d31);
}
.single-title {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 auto 16px;
text-align: center;
}
.single-meta {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px 48px;
font-size: 20px;
color: #0e2545;
margin: 0;
text-align: center;
}
.single-meta span {
display: inline-flex;
align-items: center;
gap: 10px;
}
.single-meta em {
font-size: 20px;
color: #0e2545;
}
/* --- Featured image with overlaid badges + share --- */
.single-hero-area {
padding: 0 0 10px;
}
.single-hero {
position: relative;
border-radius: 35px;
overflow: hidden;
aspect-ratio: 16/9
}
.single-hero img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.single-hero-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
background: linear-gradient(180deg, rgba(14, 37, 69, 0.35) 0%, rgba(14, 37, 69, 0) 100%);
pointer-events: none;
}
.single-hero-tags {
position: absolute;
top: 26px;
left: 26px;
right: 26px;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.single-hero-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
background: #fff;
border-radius: 35px;
font-size: 16px;
font-weight: 400;
color: #0e2545;
line-height: 1.2;
}
/* Social share (top-right of hero) */
.share-sticky {
position: absolute;
top: 0;
right: 40px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 12px;
background: #fff;
border-radius: 0 0 12px 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.share-sticky a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #0e2545;
color: #fff;
font-size: 16px;
transition: background 0.2s, transform 0.2s;
}
.share-sticky a:hover {
background: #d95d31;
color: #fff;
transform: translateY(-2px);
}
/* --- Article body (full container-fluid width) --- */
.article-area {
padding: 44px 0 20px;
}
.article-h2 {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 18px;
}
.article-body > p,
.article-content {
font-size: 16px;
line-height: 1.6;
color: #0e2545;
}
/* --- 6 Things to Do --- */
.things-area {
padding: 10px 0 20px;
}
.things-sub {
display: flex;
align-items: center;
gap: 14px;
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 36px 0 14px;
}
.things-sub em {
font-size: 28px;
color: #0e2545;
}
.td-item {
margin-bottom: 28px;
}
.td-thumb {
position: relative;
aspect-ratio: 16 / 9
}
.td-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 30px;
}
/* Orange price ribbon (top-left) */
.td-price {
position: absolute;
top: -2px;
left: 24px;
z-index: 2;
width: 53px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
background: #d95d31;
color: #fff;
font-size: 22px;
font-weight: 700;
border-radius: 5px 5px 0 0;
box-shadow: -1px 2px 2.6px rgba(0, 0, 0, 0.2);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.td-title {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 12px;
}
.td-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 25px;
}
.things-sub img {
width: 40px
}
.things-head {
font-size: 16px;
margin-bottom: 40px
}
.td-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: #6D6D6D;
line-height: 1.2;
border: 1px solid #6D6D6D;
padding: 8px 15px;
border-radius: 30px
}
.td-tag em {
font-size: 15px;
color: #0e2545;
}
.td-desc {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
/* --- Itineraries --- */
.itinerary-area {
padding: 20px 0;
padding-bottom: 60px
}
.itin-day {
margin-top: 26px;
}
.itin-day-title {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 22px;
}
.itin-timeline {
position: relative;
padding-left: 26px;
border-left: 2px dashed #c1d8f3;
}
.itin-slot {
margin-bottom: 8px;
}
.itin-slot-label {
display: inline-block;
font-size: 24px;
font-weight: 700;
color: #0e2545;
margin: 6px 0 14px;
}
.itin-item {
display: flex;
gap: 30px;
align-items: center;
margin-bottom: 22px;
}
.itin-thumb {
flex: 0 0 auto;
width: 200px;
aspect-ratio: 16 / 9
}
.itin-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
display: block;
}
.itin-body {
flex: 1 1 auto;
padding-top: 4px;
}
.itin-name {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 8px;
}
.itin-addr {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
line-height: 1.4;
margin: 0 0 10px;
}
.itin-addr em {
color: #0e2545;
font-size: 16px;
margin-top: 3px;
}
.itin-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.itin-tag {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
color: #6D6D6D;
line-height: 1.2;
border: 1px solid #6D6D6D;
padding: 8px 15px;
border-radius: 30px;
}
.itin-tag em {
font-size: 14px;
}
.itin-map {
position: sticky;
top: 90px;
height: 100%;
}
.itin-map img {
width: 100%;
height: 100%;
min-height: 400px;
object-fit: cover;
border-radius: 30px;
}
/* === Itinerary Mobile Map Card === */
.itin-mobile {
margin-top: 4px;
}
.itin-mobile-map {
position: relative;
width: 100%;
height: 580px;
max-height: 82vh;
border-radius: 30px;
overflow: hidden;
background: rgba(14, 37, 69, 0.07);
}
.itin-mobile-map-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.itin-mobile-map::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(14, 37, 69, 0) 55%, rgba(14, 37, 69, 0.7) 100%);
pointer-events: none;
}
.itin-mobile-pin {
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
width: 29px;
height: 29px;
z-index: 2;
}
.itin-mobile-pin img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.itin-mobile-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 0 0 18px;
}
.itin-mobile-cards {
padding: 0 13px;
}
.itin-mobile-cards.slick-initialized {
padding: 0;
}
.itin-mobile-cards .slick-list {
padding-left: 13px !important;
overflow: visible;
}
.itin-mobile-cards .slick-track {
display: flex;
}
.itin-mcard {
display: flex !important;
align-items: center;
gap: 12px;
width: 268px;
height: 134px;
margin-right: 15px;
padding: 14px;
background: #fff;
border-radius: 20px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.11);
position: relative;
box-sizing: border-box;
}
.itin-mcard-thumb {
flex: 0 0 90px;
width: 90px;
height: 90px;
border-radius: 15px;
overflow: hidden;
}
.itin-mcard-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.itin-mcard-body {
flex: 1 1 auto;
min-width: 0;
padding-right: 14px;
}
.itin-mcard-name {
font-size: 14px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 6px;
}
.itin-mcard-addr {
display: flex;
align-items: flex-start;
gap: 5px;
font-size: 12px;
line-height: 1.4;
color: #000;
margin: 0;
}
.itin-mcard-addr img {
width: 11px;
height: auto;
margin-top: 2px;
flex: 0 0 auto;
}
.itin-mcard-link {
position: absolute;
top: 14px;
right: 14px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0e2545;
font-size: 12px;
text-decoration: none;
}
.itin-mobile-slot {
margin: 14px 19px 0;
font-size: 16px;
font-weight: 700;
color: #fff;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
padding-top: 12px;
border-top: 1px dashed rgba(255, 255, 255, 0.85);
}
/* --- Ticket CTA --- */
.ticket-cta-area {
padding: 20px 0 30px;
padding-bottom: 70px
}
.ticket-row {
margin-top: 14px;
}
.ticket-card {
height: 100%;
background: #fff;
border-radius: 50px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
padding: 60px 32px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 2px solid #0e254526
}
.ticket-logo {
min-height: 110px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.ticket-logo img {
max-width: 100%;
max-height: 140px;
width: auto;
height: auto;
}
.ticket-name {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 50px 0;
}
.ticket-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80%;
height: 56px;
background: #d95d31;
color: #fff;
font-size: 16px;
font-weight: 700;
border-radius: 40px;
transition: background 0.25s;
margin-bottom: 20px
}
.ticket-btn:hover {
background: #c14d24;
color: #fff;
}
.ticket-dining {
font-size: 15px;
color: #444;
margin: 18px 0 0;
}
.ticket-more {
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 1.3;
color: #0e2545;
margin: 60px 0 0;
}
.ticket-more .ticket-more-reg {
font-weight: 400;
}
.ticket-more-underline {
position: relative;
white-space: nowrap;
z-index: 0;
}
.ticket-more-underline::after {
content: "";
position: absolute;
left: -4px;
right: -4px;
bottom: -2px;
height: 6px;
background: #f5d2cb;
z-index: -1;
transition: all 0.4s;
transform-origin: left;
transform: scaleX(1)
}
.ticket-more-underline:hover::after {
transform: scaleX(0);
}
.ticket-more-underline:hover {
color: var(--c-accent)
}
/* --- Comparison table (flex rows, NOT css grid) --- */
.compare-area {
padding: 20px 0 30px;
}
.cmp-table {
margin-top: 26px;
}
.cmp-row {
display: flex;
align-items: stretch;
}
/* horizontal divider between rows */
.cmp-row + .cmp-row {
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.cmp-head {
background: linear-gradient(180deg, #d7e5f7 0%, #eef4fc 100%);
border-radius: 8px 8px 0 0;
}
.cmp-head .cmp-cell {
font-size: 20px;
font-weight: 700;
color: #0e2545;
padding: 24px 22px;
}
.cmp-head .cmp-cell:first-child {
flex: 0 0 214px;
}
.cmp-cell {
flex: 1 1 0;
padding: 24px 22px;
font-size: 16px;
line-height: 1.5;
}
/* vertical dividers between the text columns (not after the resort image col) */
.cmp-row .cmp-cell + .cmp-cell + .cmp-cell {
border-left: 1px solid rgba(0, 0, 0, 0.15);
}
.cmp-head .cmp-cell + .cmp-cell + .cmp-cell {
border-left: 0;
}
.cmp-cell-resort {
padding: 1px;
aspect-ratio: 16/9;
}
.cmp-resort {
position: relative;
height: 100%;
overflow: hidden;
aspect-ratio: 16 / 9;
width: 100%;
}
.cmp-resort img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cmp-resort-name {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 12px 14px;
background: linear-gradient(180deg, rgba(14, 37, 69, 0) 0%, rgba(14, 37, 69, 0.85) 100%);
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
/* Accordion toggle — mobile only (hidden on desktop) */
.cmp-toggle {
display: none;
}
.cmp-cell-tech {
display: flex;
gap: 14px;
}
.cmp-tech-icons {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 22px;
color: #0e2545;
}
.cmp-foot {
margin-top: 24px;
font-size: 16px;
margin-top: 40px
}
.cmp-foot a {
color: #0693e3;
font-weight: 400;
}
.cmp-foot a:hover {
color: var(--c-accent);
text-decoration: underline;
}
/* --- FAQ accordion --- */
.faq-area {
padding: 20px 0 36px;
}
.faq-list {
margin-top: 34px;
}
.faq-item {
border: 1.5px solid #c1d8f3;
border-radius: 16px;
margin-bottom: 18px;
background: #fff;
overflow: hidden;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 28px;
background: none;
border: 0;
text-align: left;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 700;
color: #0e2545;
cursor: pointer;
}
.faq-icon {
flex: 0 0 auto;
font-size: 16px;
color: #0e2545;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item-holder.is-open .faq-answer {
max-height: 500px;
}
.faq-answer p {
margin: 0;
padding: 0 28px 24px;
font-size: 16px;
line-height: 1.7;
}
/* --- You Might Also Like --- */
/* === Blog author box (single post) === */
.author-section {
padding: 20px 0 10px;
}
.author-box {
display: flex;
align-items: flex-start;
gap: 28px;
padding: 32px 36px;
background: var(--c-white);
border: 1px solid #e7eaef;
border-radius: 20px;
box-shadow: 0 18px 40px rgba(14, 37, 69, .08);
}
.author-box-avatar {
flex: 0 0 88px;
width: 88px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary), #16375f);
color: var(--c-white);
font-size: 32px;
font-weight: 800;
letter-spacing: 1px;
box-shadow: 0 10px 24px rgba(14, 37, 69, .28);
}
.author-box-content {
flex: 1 1 auto;
min-width: 0;
}
.author-box-eyebrow {
margin: 0 0 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--c-accent);
}
.author-box-name {
margin: 0 0 12px;
font-size: 24px;
font-weight: 800;
line-height: 1.2;
color: var(--c-primary);
}
.author-box-bio {
margin: 0 0 18px;
font-size: 16px;
line-height: 1.7;
color: var(--c-gray);
}
.author-box-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.author-box-more {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--c-blue);
text-decoration: none;
transition: color .25s ease, gap .25s ease;
}
.author-box-more:hover {
color: var(--c-accent);
gap: 12px;
}
.author-box-social {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.author-box-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #f4f7fb;
color: var(--c-primary);
font-size: 15px;
transition: background .25s ease, color .25s ease;
}
.author-box-social a:hover {
background: var(--c-accent);
color: var(--c-white);
}
.author-box-social a:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
@media (max-width: 575.98px) {
.author-box {
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 28px 20px;
}
.author-box-avatar {
flex-basis: 76px;
width: 76px;
height: 76px;
font-size: 28px;
}
.author-box-foot {
justify-content: center;
}
}
.related-area {
padding: 30px 0 40px;
}
.related-heading {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 30px;
}
.related-card {
display: flex;
align-items: center;
gap: 16px;
height: 100%;
background: #f9f9f9;
border: 1.5px solid rgba(14, 37, 69, 0.24);
border-radius: 20px;
box-shadow: 4px 3px 3.05px rgba(0, 0, 0, 0.25);
padding: 16px;
margin-right: 40px
}
.related-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
}
.related-title {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #0e2545;
margin: 0 0 12px;
}
.related-title a {
color: inherit;
}
.related-title a:hover {
color: #d95d31;
}
.related-date {
margin-top: auto;
font-size: 14px;
color: #0e2545;
}
.related-media {
flex: 0 0 auto;
width: 210px;
margin-right: -40px;
aspect-ratio: 16/9
}
.related-media img {
width: 100%;
height: 100%;
min-height: 130px;
object-fit: cover;
border-radius: 16px;
display: block;
}
/* slider */
.related-slider {
margin: 0 -12px;
}
.related-slider:not(.slick-initialized) {
display: flex;
overflow: hidden;
}
.related-slider:not(.slick-initialized) .related-slide {
flex: 0 0 25%;
}
.related-slide {
padding: 8px 12px;
height: inherit;
}
.related-slider .slick-track {
display: flex;
}
.related-slider .slick-slide {
height: auto;
}
.related-slider .slick-slide > div {
height: 100%;
}
.related-slider .slick-dots {
position: static;
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.related-slider .slick-dots li {
width: auto;
height: auto;
margin: 0;
}
.related-slider .slick-dots li button {
width: 10px;
height: 10px;
padding: 0;
border-radius: 50%;
background: #c8d3e2 !important;
opacity: 1;
transition: all 0.25s;
}
.related-slider .slick-dots li button::before {
display: none;
}
.related-slider .slick-dots li.slick-active button {
width: 30px;
border-radius: 8px;
background: #0693e3 !important;
}
/* --- Share This Blog --- */
.share-blog-area {
padding: 20px 0 50px;
text-align: center;
}
.share-blog-title {
font-size: 24px;
font-weight: 700;
color: #0e2545;
margin: 0 0 22px;
}
.share-blog-social {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.share-blog-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #0e2545;
color: #fff;
font-size: 16px;
transition: background 0.25s, transform 0.2s;
}
.share-blog-social a:hover {
background: #d95d31;
color: #fff;
transform: translateY(-3px);
}
/* --- Water Park carousel (layered stack) --- */
.wp-carousel-area {
padding: 24px 0 40px;
}
.wp-stack {
position: relative;
height: 480px;
max-width: 100%;
margin: 0 auto;
outline: none;
}
.wp-stack-track {
position: relative;
width: 100%;
height: 100%;
}
.wp-card {
position: absolute;
top: 0;
left: 50%;
width: 56%;
height: 100%;
border-radius: 75px;
overflow: hidden;
background: #fff;
cursor: pointer;
transform: translateX(-50%) scale(1);
transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
will-change: transform, opacity;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.wp-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.wp-card.is-center {
z-index: 5;
opacity: 1;
transform: translateX(-50%) scale(1);
width: 65%;
}
.wp-card.is-left {
z-index: 4;
transform: translateX(-76%) scale(0.9);
filter: brightness(0.96);
}
.wp-card.is-right {
z-index: 4;
transform: translateX(-24%) scale(0.9);
filter: brightness(0.96);
}
.wp-card.is-far-left {
z-index: 3;
transform: translateX(-92%) scale(0.8);
filter: brightness(0.9) opacity(0.5);
}
.wp-card.is-far-right {
z-index: 3;
transform: translateX(-8%) scale(0.8);
filter: brightness(0.9) opacity(0.5);
}
.wp-card.is-hidden {
z-index: 1;
opacity: 0;
transform: translateX(-50%) scale(0.7);
}
/* Navigation: arrows + dots */
.wp-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 22px;
}
.wp-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: none;
border: 0;
color: #999;
font-size: 16px;
cursor: pointer;
transition: color 0.2s, transform 0.2s;
}
.wp-arrow:hover {
color: #0693e3;
transform: scale(1.15);
}
/* Side-mounted prev/next arrows (resort-single) — arrows lift out of the
bottom nav to the left/right edges; the dots stay centered below. */
.wp-carousel-side {
position: relative;
}
.wp-carousel-side .wp-arrow {
position: absolute;
top: 24px;
bottom: 92px;
margin: auto 0;
width: 46px;
height: 46px;
z-index: 6;
background: var(--c-white);
border: 1px solid #e7eaef;
border-radius: 50%;
color: var(--c-primary);
font-size: 16px;
box-shadow: 0 8px 20px rgba(14, 37, 69, .16);
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.wp-carousel-side .wp-arrow:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-white);
transform: none;
}
.wp-carousel-side .wp-prev {
left: 0px;
right: auto;
}
.wp-carousel-side .wp-next {
right: 0px;
left: auto;
}
@media (max-width: 767.98px) {
.wp-carousel-side .wp-arrow {
top: 0;
bottom: 52px;
width: 40px;
height: 40px;
}
.wp-carousel-side .wp-prev {
left: 4px;
}
.wp-carousel-side .wp-next {
right: 4px;
}
}
.wp-dots {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.wp-dots button {
display: block;
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: #c8d3e2;
cursor: pointer;
transition: all 0.25s;
}
.wp-dots button:hover {
background: #9fb2cb;
}
.wp-dots .is-active button {
background: #0693e3;
transform: scale(1.15);
}
/* --- Blog single responsive --- */
@media (max-width: 1199.98px) {
.single-hero-tag {
font-size: 16px;
padding: 9px 24px;
}
}
@media (max-width: 991.98px) {
.single-title {
font-size: 32px;
}
.things-sub {
font-size: 26px;
}
.things-sub em {
font-size: 22px;
}
.td-title {
font-size: 24px;
}
.td-desc {
font-size: 16px;
}
.itin-day-title {
font-size: 26px;
}
.itin-slot-label {
font-size: 20px;
}
.itin-name {
font-size: 20px;
}
.itin-addr {
font-size: 16px;
}
.itin-map {
position: static;
margin-top: 8px;
}
.itin-map img {
min-height: 0;
height: 320px;
}
.ticket-name {
font-size: 26px;
}
.ticket-more {
font-size: 28px;
}
.faq-question {
font-size: 19px;
}
.related-heading {
font-size: 28px;
}
/* Comparison table -> image-tile accordion (Figma mobile) */
.cmp-table {
border-radius: 30px;
box-shadow: 0 10px 30px rgba(14, 37, 69, 0.12);
}
.cmp-head {
display: none;
}
.cmp-row {
flex-direction: column;
overflow: hidden;
}
.cmp-row + .cmp-row {
border-top: 0;
}
/* Resort image tile = accordion header */
.cmp-cell-resort {
flex: 0 0 auto;
padding: 0;
aspect-ratio: auto;
cursor: pointer;
position: relative;
}
.cmp-resort {
border-radius: 0;
height: 145px;
aspect-ratio: auto;
}
.cmp-head + .cmp-row .cmp-resort {
border-radius: 30px 30px 0 0;
}
.cmp-row:last-child:not(.is-open) .cmp-resort {
border-radius: 0 0 30px 30px;
}
.cmp-resort img {
border-radius: inherit;
}
.cmp-resort-name {
top: 0;
bottom: 0;
display: flex;
align-items: flex-end;
padding: 20px;
padding-right: 60px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
font-size: 16px;
font-weight: 600;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.55);
}
/* Chevron toggle */
.cmp-toggle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 15px;
right: 16px;
z-index: 2;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.cmp-toggle-icon {
transition: transform 0.3s ease;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}
.cmp-row.is-open .cmp-toggle-icon {
transform: rotate(180deg);
}
/* Divider under each tile */
.cmp-cell-resort::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #e6e6e6;
z-index: 3;
}
/* Collapsible body = the data cells */
.cmp-row .cmp-cell:not(.cmp-cell-resort) {
display: none;
border: 0;
border-left: 0 !important;
padding: 16px 20px;
font-size: 16px;
line-height: 1.5;
background: #fff;
}
.cmp-row .cmp-cell:not(.cmp-cell-resort) + .cmp-cell {
border-top: 1px solid rgba(14, 37, 69, 0.12);
}
.cmp-row.is-open .cmp-cell:not(.cmp-cell-resort) {
display: block;
}
.cmp-row.is-open .cmp-cell.cmp-cell-tech {
display: flex;
}
.cmp-cell[data-label]::before {
content: attr(data-label);
display: block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #0693e3;
margin-bottom: 6px;
}
.single-meta {
font-size: 16px;
gap: 10px 28px;
}
.single-meta em {
font-size: 16px;
}
.article-h2 {
font-size: 28px;
}
.wp-stack {
height: 380px;
}
.wp-card {
width: 66%;
}
.wp-card.is-left {
transform: translateX(-78%) scale(0.88);
}
.wp-card.is-right {
transform: translateX(-22%) scale(0.88);
}
.wp-card.is-far-left {
transform: translateX(-100%) scale(0.78);
}
.wp-card.is-far-right {
transform: translateX(0%) scale(0.78);
}
}
@media (max-width: 767.98px) {
.single-head-area {
padding: 22px 0 18px;
}
.things-sub {
font-size: 22px;
}
.td-title {
font-size: 22px;
}
.td-desc {
font-size: 16px;
}
.td-thumb img {
height: 100%;
}
.itin-day-title {
font-size: 22px;
}
.itin-slot-label {
font-size: 16px;
}
.itin-item {
gap: 14px;
}
.itin-thumb {
width: 110px;
}
.itin-thumb img {
width: 110px;
height: 88px;
border-radius: 14px;
}
.itin-name {
font-size: 16px;
}
.ticket-card {
padding: 32px 24px;
}
.ticket-name {
font-size: 24px;
}
.ticket-more {
font-size: 22px;
}
.faq-question {
font-size: 17px;
padding: 18px 20px;
}
.faq-answer p {
padding: 0 20px 20px;
font-size: 16px;
}
.cmp-foot {
font-size: 16px;
}
.related-heading {
font-size: 24px;
}
.single-title {
font-size: 26px;
}
.article-body > p {
font-size: 16px;
}
.article-h2 {
font-size: 24px;
}
.single-hero {
border-radius: 20px;
}
.single-hero-tags {
top: 14px;
left: 14px;
right: 14px;
gap: 10px;
}
.single-hero-tag {
font-size: 14px;
padding: 7px 18px;
}
.share-sticky {
right: 16px;
gap: 8px;
padding: 10px 8px;
}
.share-sticky a {
width: 28px;
height: 28px;
font-size: 13px;
}
.wp-stack {
height: 300px;
}
.wp-card {
width: 88%;
border-radius: 24px;
}
.wp-card.is-left,
.wp-card.is-far-left {
transform: translateX(-100%) scale(0.8);
opacity: 0.5;
}
.wp-card.is-right,
.wp-card.is-far-right {
transform: translateX(0%) scale(0.8);
opacity: 0.5;
}
.wp-card.is-far-left,
.wp-card.is-far-right {
opacity: 0;
}
}
@media (max-width: 575.98px) {
.blog-breadcrumb li,
.blog-breadcrumb a {
font-size: 15px;
}
}
.itinerary-inner {
margin: 60px 0
}
.faq-item-holder {
padding: 2px;
background: linear-gradient(0, rgba(20, 172, 249, 0.28) 0%, rgba(14, 37, 69, 0.30) 100%);
border-radius: 30px;
margin-bottom: 18px;
overflow: hidden
}
.faq-item-holder .faq-item {
border: none;
margin: 0;
border-radius: 29px;
}
.faq-item-holder.is-open {
box-shadow: 4px 4px 7.7px 0 rgba(14, 37, 69, 0.30);
backdrop-filter: blur(21px);
}
.related-slider .slick-list {
padding-right: 200px;
margin-right: -20%
}
/* === Package Hero (Product Header) === */
.package-hero {
position: relative;
padding: 60px 0;
overflow: hidden;
background: #13314f;
padding-top: 20px;
}
.package-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.package-hero::after {
/* dark overlay so white text stays legible over photo */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(126deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.69) 65%, rgba(0, 0, 0, 0.58) 100%);
z-index: 0;
}
.package-hero .container-fluid {
position: relative;
z-index: 1;
}
.package-hero-grid {
display: flex;
align-items: flex-start;
gap: 80px;
color: #fff;
justify-content: space-between
}
.package-hero-intro {
flex: 0 0 auto;
width: 616px;
max-width: 50%;
}
.package-hero .container {
position: relative;
z-index: 1
}
.package-hero-title {
color: #fff;
font-size: 48px;
line-height: 1.2;
font-weight: 700;
margin: 0 0 16px;
}
.package-hero-subtitle {
color: #fff;
font-size: 24px;
line-height: 1.4;
font-weight: 700;
margin: 0 0 16px;
}
.package-hero-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.package-call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #46a24a;
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 14px 32px;
border-radius: 50px;
transition: background .3s;
}
.package-call-btn:hover {
background: #3a8a3e;
color: #fff;
}
.package-hero-callout {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
margin-left: 10px;
}
/* Middle price block */
.package-hero-price {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 4px;
color: #fff;
}
.package-price-figure {
position: relative;
display: inline-flex;
align-items: flex-start;
}
.package-price-amount {
font-size: 48px;
line-height: 1.2;
font-weight: 700;
color: #fff;
}
.package-price-save {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 6px;
min-width: 56px;
padding: 4px 6px;
background: #d95d31;
color: #fff;
font-family: Roboto, 'Poppins', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1.1;
border-radius: 4px;
margin-left: 25px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative;
z-index: 1;
flex-direction: column
}
.package-price-save span {
display: block
}
.package-price-save::before {
position: absolute;
content: "";
top: 6px;
left: -14px;
width: 27px;
height: 27px;
background: #d95d31;
z-index: -1;
transform: rotate(-45deg);
}
.package-price-standard {
font-size: 16px;
font-weight: 600;
color: #fff;
margin: 0;
text-decoration: line-through
}
.package-price-standard s {
color: #fff;
opacity: .85;
}
.package-price-review .package-stars {
display: inline-flex;
gap: 4px;
font-size: 16px;
color: #fff;
}
/* Right feature list */
.package-hero-features {
flex: 0 0 auto;
list-style: none;
margin: 0;
padding: 8px 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.package-hero-features li {
display: flex;
align-items: center;
gap: 12px;
}
.package-feature-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
font-size: 24px;
color: #fff;
}
.package-feature-text {
font-size: 16px;
font-weight: 600;
color: #fff;
}
/* === Flash Sale Timer Banner === */
.flash-sale-banner {
padding: 20px 0;
background: #d95d31;
}
.flash-sale-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.flash-sale-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 50px;
line-height: 1;
color: #fff;
}
.flash-sale-text {
margin: 0;
color: #fff;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
text-align: center;
letter-spacing: .5px;
}
.flash-sale-countdown {
display: inline;
}
.flash-sale-countdown span {
margin-left: 8px;
}
/* === Package Hero / Timer — responsive === */
@media (max-width: 1199.98px) {
.package-hero-grid {
gap: 40px;
flex-wrap: wrap;
}
.package-hero-intro {
width: 100%;
max-width: 100%;
}
.flash-sale-text {
font-size: 30px;
}
.flash-sale-icon {
font-size: 40px;
}
}
@media (max-width: 767.98px) {
.package-hero {
padding: 40px 0;
}
.package-hero-grid {
gap: 28px;
}
.package-hero-title {
font-size: 34px;
}
.package-hero-subtitle {
font-size: 20px;
}
.package-hero-actions {
gap: 12px;
}
.package-call-btn {
width: 100%;
}
.package-hero-callout {
white-space: normal;
}
.flash-sale-inner {
gap: 10px;
}
.flash-sale-text {
font-size: 20px;
}
.flash-sale-icon {
font-size: 30px;
}
}
/* === Package Main (details + form) === */
.package-main {
padding: 30px 0 60px;
background: linear-gradient(180deg, rgba(6, 147, 227, 0.40) 0%, rgba(255, 255, 255, 0.40) 80%), #FFF;
}
/* Breadcrumb */
.package-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 24px;
padding: 0;
font-size: 14px;
;
align-items: center
}
.package-breadcrumb li {
display: flex;
font-weight: 700;
color: #0E2545;
font-size: 18px
}
.package-breadcrumb li .text {
font-size: 18px
}
.package-breadcrumb li .map-pin {
width: 30px
}
.package-breadcrumb li:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: #0E2545;
}
.package-breadcrumb a {
color: #0e2545;
}
.package-breadcrumb a:hover {
color: #d95d31;
}
/* Section title */
.package-section-title {
margin-bottom: 32px;
}
.package-tagline {
font-size: 16px;
font-weight: 600;
color: #d95d31;
margin: 0 0 12px;
}
.package-section-heading {
font-size: 48px;
line-height: 1.2;
font-weight: 700;
color: #0e2545;
margin: 0 0 16px;
}
.package-section-lead {
font-size: 16px;
color: #444;
margin: 0;
}
/* Two-column content */
.package-content {
align-items: flex-start;
margin-top: 50px
}
.package-col-a {
padding-right: 0;
}
@media (min-width: 992px) {
.package-col-a {
padding-right: 80px;
}
}
.package-promo-headline {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 0;
margin: 0 0 20px;
border-top: 1px solid #0e2545;
border-bottom: 1px solid #0e2545;
font-size: 24px;
font-weight: 700;
color: #0e2545;
justify-content: center;
}
.package-promo-headline em {
color: #d95d31;
font-size: 22px;
}
/* Gallery */
.package-gallery {
margin-bottom: 20px;
}
.package-gallery-main img {
width: 100%;
object-fit: cover;
border-radius: 16px;
}
.package-gallery-img {
position: relative;
border-radius: 16px;
overflow: hidden
}
.package-gallery-img::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, var(--500, #0E2545) 100%)
}
.package-gallery .slick-prev,
.package-gallery .slick-next {
width: 40px;
height: 40px;
z-index: 2;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.package-gallery .slick-prev {
left: 16px;
}
.package-gallery .slick-next {
right: 16px;
}
.package-gallery .slick-prev::before,
.package-gallery .slick-next::before {
color: #0e2545;
font-size: 16px;
opacity: 1;
}
.package-gallery .slick-dots {
bottom: 14px;
position: absolute
}
.package-gallery .slick-dots li button {
width: 18px;
opacity: 1;
height: 18px;
border-radius: 50%;
background: #fff;
opacity: 0.5;
}
.package-gallery .slick-dots li.slick-active button {
opacity: 1;
}
/* Resort thumbnail grid */
.package-resort-gallery {
margin-bottom: 20px;
}
.package-thumb {
width: 100%;
height: 156px;
object-fit: cover;
border-radius: 16px;
}
.package-thumb.tall {
height: 100%;
min-height: 335px;
}
/* Why $99 */
.package-why {
margin-bottom: 20px;
}
.package-why-title {
font-size: 24px;
font-weight: 700;
color: #0e2545;
margin: 0 0 12px;
}
.package-price-note {
color: #d95d31;
}
.package-why-text {
font-size: 16px;
line-height: 1.7;
color: #444;
margin: 0;
}
/* Icon highlights */
.package-highlights {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.package-highlights > li {
display: flex;
gap: 24px;
align-items: center;
}
.package-highlight-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
font-size: 26px;
}
.package-highlight-icon img {
width: 100%;
height: 100%;
object-fit: contain
}
.package-highlight-body h4 {
font-size: 20px;
font-weight: 700;
color: #0e2545;
margin: 0 0 6px;
}
.package-highlight-body p {
font-size: 16px;
line-height: 1.6;
color: #444;
margin: 0;
}
.package-get-list {
margin: 4px 0 0;
padding-left: 18px;
}
.package-get-list li {
font-size: 16px;
line-height: 1.6;
color: #444;
margin-bottom: 4px;
}
/* Accordion */
.package-accordion {
border-top: 1px solid #0e2545;
}
.package-acc-item {
border-bottom: 1px solid #0e2545;
}
.package-acc-head {
margin: 0;
}
.package-acc-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 20px 0;
background: none;
border: 0;
cursor: pointer;
font-size: 24px;
font-weight: 700;
color: #0e2545;
text-align: left;
font-family: 'Poppins', sans-serif;
}
.package-acc-lead-icon {
color: #d95d31;
font-size: 20px;
flex: 0 0 auto;
}
.package-acc-toggle span {
flex: 1 1 auto;
}
.package-acc-caret {
font-size: 16px;
color: #0e2545;
transition: transform .3s;
}
.package-acc-panel {
padding: 0 0 24px;
font-size: 16px;
line-height: 1.7;
color: #444;
}
.package-acc-panel p {
margin: 0;
}
.package-acc-list {
padding-left: 20px
}
.package-acc-list li {
position: relative;
margin-bottom: 8px;
}
/* === Booking Form (right column) === */
.package-col-b {
margin-top: 56px;
}
@media (min-width: 992px) {
.package-col-b {
margin-top: 0;
position: sticky;
top: 24px;
}
}
.booking-form {
position: relative;
background: #fff;
border: 1px solid #bcdcef;
border-radius: 16px;
padding: 32px;
box-shadow: 0 10px 35px rgba(14, 37, 69, .06);
}
.booking-price-title {
width: 80%
}
/* Circular pricing badge — absolute overlay on the card's top-right corner */
.vacation-pricing-badge {
position: absolute;
top: -46px;
right: -30px;
width: 144px;
height: auto;
z-index: 3;
pointer-events: none;
}
/* Circular price badge overlapping top-right */
.booking-badge {
position: absolute;
top: -34px;
right: -18px;
width: 132px;
height: 132px;
border-radius: 50%;
background: #fff;
border: 5px solid #d95d31;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
color: #0e2545;
box-shadow: 0 6px 18px rgba(14, 37, 69, .12);
z-index: 3;
}
.booking-badge-top {
font-size: 13px;
font-weight: 700;
}
.booking-badge-only {
display: inline-block;
background: #d95d31;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: 3px;
margin: 3px 0;
}
.booking-badge-price {
font-size: 34px;
font-weight: 700;
}
.booking-badge-total {
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}
.booking-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 70%;
background: #d95d31;
color: #fff;
font-size: 14px;
font-weight: 600;
padding: 10px 18px;
border-radius: 8px;
margin: 0 0 20px;
}
.booking-eyebrow-time {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.booking-price-title h3 {
font-size: 32px;
font-weight: 700;
color: #0e2545;
margin: 0 0 8px;
}
.booking-standard {
font-size: 16px;
font-weight: 600;
color: #d95d31;
text-decoration: line-through;
margin: 0 0 4px;
}
.booking-standard span {
color: #d95d31;
}
.booking-save {
font-size: 16px;
font-weight: 700;
color: #0e2545;
margin: 0;
}
.booking-divider {
border: 0;
border-top: 1px solid #242c3a;
margin: 24px 0;
}
.package-content .booking-field {
padding: 0
}
.package-content .booking-field input {
padding: 12px 14px
}
.package-content .booking-field::after {
display: none
}
.package-content .booking-submit {
padding: 14px 24px;
font-size: 16px;
}
/* Dates toggle */
.booking-dates-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.booking-dates-toggle > span {
font-size: 15px;
font-weight: 600;
color: #0e2545;
}
.booking-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.booking-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.booking-switch-track {
width: 46px;
height: 26px;
border-radius: 999px;
background: #c4c9d2;
position: relative;
transition: background .25s;
}
.booking-switch-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
transition: transform .25s;
}
.booking-switch input:checked + .booking-switch-track {
background: #2da9e1;
}
.booking-switch input:checked + .booking-switch-track::after {
transform: translateX(20px);
}
/* Calendar */
.booking-calendar {
background: #f3f5f6;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.booking-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.booking-cal-month {
font-size: 16px;
font-weight: 700;
color: #6d6d6d;
}
.booking-cal-nav {
width: 30px;
height: 30px;
border: 0;
background: none;
color: #0e2545;
cursor: pointer;
font-size: 16px;
}
.booking-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px 0;
text-align: center;
}
.booking-cal-dow {
font-size: 11px;
font-weight: 700;
color: #6d6d6d;
text-transform: uppercase;
padding: 6px 0;
}
.booking-cal-day {
aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #0e2545;
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.booking-cal-day.is-muted {
color: #c4c9d2;
cursor: default;
}
.booking-cal-day.is-selected,
.booking-cal-day.is-range {
background: #2da9e1;
color: #fff;
font-weight: 700;
border-radius: 50%;
}
/* Check-in / out */
.booking-checkinout {
display: flex;
gap: 16px;
text-align: center;
}
.booking-checkinout > div {
flex: 1 1 0;
}
.booking-cio-label {
display: block;
font-size: 16px;
font-weight: 700;
color: #0e2545;
margin-bottom: 4px;
}
.booking-cio-date {
display: block;
font-size: 14px;
color: #6d6d6d;
}
/* Fields */
.booking-fields {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.booking-field {
flex: 1 1 calc(50% - 8px);
min-width: 0;
display: flex;
flex-direction: column;
}
.booking-field-full {
flex: 1 1 100%;
}
.booking-field label {
font-size: 14px;
font-weight: 600;
color: #0e2545;
margin-bottom: 6px;
}
.booking-field input,
.booking-field select {
width: 100%;
padding: 12px 14px;
border: 1px solid #c4c9d2;
border-radius: 8px;
font-size: 15px;
font-family: 'Poppins', sans-serif;
color: #0e2545;
background: #fff;
}
booking-field select {
padding-left: 36px
}
.booking-field input::placeholder {
color: #9aa1ad;
}
/* Consent */
.booking-consent {
display: flex;
gap: 10px;
margin: 20px 0;
}
.booking-consent input {
flex: 0 0 auto;
margin-top: 3px;
width: 18px;
height: 18px;
}
.booking-consent label {
font-size: 16px;
line-height: 1.5;
color: #6d6d6d;
}
/* Submit + foot */
.booking-submit {
width: 100%;
background: #46a24a;
color: #fff;
border: 0;
border-radius: 36px;
padding: 18px 24px;
font-size: 20px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
cursor: pointer;
transition: background .3s;
}
.booking-submit:hover {
background: #3a8a3e;
}
.booking-foot {
text-align: center;
margin-top: 16px;
}
.booking-call {
font-size: 16px;
font-weight: 700;
color: #0e2545;
}
.booking-call:hover {
color: #d95d31;
text-decoration: underline;
}
.booking-note {
font-size: 13px;
color: #6d6d6d;
margin: 4px 0 0;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* === Package Main — responsive === */
@media (max-width: 767.98px) {
.vacation-pricing-badge {
width: 116px;
top: -28px;
right: -8px;
}
.package-section-heading {
font-size: 30px;
}
.package-promo-headline,
.package-acc-toggle,
.package-why-title {
font-size: 20px;
}
.booking-form {
padding: 24px;
}
.package-highlights > li {
gap: 16px;
}
.package-highlight-icon {
width: 52px;
height: 52px;
font-size: 22px;
}
}
/* === Image Gallery === */
.gallery-section {
padding: 30px 0 60px;
background: #fff;
}
.gallery-head {
margin-bottom: 48px;
}
.gallery-title {
font-size: 48px;
line-height: 1.2;
font-weight: 700;
color: #0e2545;
margin: 0 0 16px;
}
.gallery-lead {
font-size: 16px;
color: #444;
margin: 0;
}
.gallery-slider {
margin: 0 -16px;
}
.gallery-slider .slick-slide {
padding: 0 16px;
}
.gallery-slider img {
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 16px;
}
.gallery-slider .slick-dots {
width: auto;
bottom: -44px;
left: 0;
text-align: left;
padding-left: 16px;
}
.gallery-slider .slick-dots li {
width: 8px;
height: 8px;
margin: 0 4px;
}
.gallery-slider .slick-dots li button {
width: 8px;
height: 8px;
padding: 0;
background: #000;
opacity: 0.4
}
.gallery-slider .slick-dots li button::before {
width: 8px;
height: 8px;
font-size: 8px;
line-height: 8px;
color: #c4c9d2;
opacity: 1;
}
.gallery-slider .slick-dots li.slick-active button::before {
color: #0e2545;
}
.gallery-slider .slick-prev,
.gallery-slider .slick-next {
top: auto;
bottom: -52px;
width: 48px;
height: 48px;
border: 1px solid #c4c9d2;
border-radius: 50%;
background: #fff;
transform: none;
z-index: 1
}
.gallery-slider .slick-prev:hover,
.gallery-slider .slick-next:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: #fff
}
.gallery-slider .slick-prev:hover::before,
.gallery-slider .slick-next:hover::before {
color: #fff
}
.gallery-slider .slick-prev {
left: auto;
right: 79px;
}
.gallery-slider .slick-next {
right: 16px;
}
.gallery-slider .slick-prev::before,
.gallery-slider .slick-next::before {
color: #0e2545;
font-size: 16px;
opacity: 1;
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
.gallery-slider .slick-prev::before {
content: "\f060";
}
.gallery-slider .slick-next::before {
content: "\f061";
}
/* === FAQ === */
.faq-section {
padding: 30px 0 60px;
background: #fff;
}
.faq-head {
margin-bottom: 20px;
}
.faq-title {
font-size: 48px;
line-height: 1.2;
font-weight: 700;
color: #0e2545;
margin: 0 0 16px;
}
.faq-lead {
font-size: 16px;
color: #444;
margin: 0;
max-width: 768px;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 48px;
}
.faq-item {
border: 1px solid #bcdcef;
border-radius: 30px;
background: #fff;
overflow: hidden;
}
.faq-q {
margin: 0;
}
.faq-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 32px;
background: none;
border: 0;
cursor: pointer;
font-size: 20px;
font-weight: 700;
color: #0e2545;
text-align: left;
font-family: 'Poppins', sans-serif;
}
.faq-icon {
flex: 0 0 auto;
font-size: 16px;
color: #0e2545;
}
.faq-a {
padding: 0 32px 28px;
font-size: 16px;
line-height: 1.7;
color: #444;
}
.faq-a p {
margin: 0;
max-width: 1222px;
}
/* FAQ CTA */
.faq-cta-title {
font-size: 32px;
font-weight: 700;
color: #0e2545;
margin: 0 0 12px;
}
.faq-cta-text {
font-size: 16px;
color: #444;
margin: 0 0 16px;
}
.faq-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border: 1px solid #0e2545;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
color: #0e2545;
transition: all .3s;
}
.faq-cta-btn:hover {
background: #0e2545;
color: #fff;
}
/* === Guest Reviews === */
.reviews-section {
padding: 30px 0 60px;
background: #fff;
}
.reviews-head {
margin-bottom: 24px;
}
.reviews-title {
font-size: 32px;
line-height: 1.2;
font-weight: 700;
color: #0e2545;
margin: 0 0 16px;
}
.reviews-lead {
font-size: 16px;
color: #444;
margin: 0;
}
.review-card {
height: 100%;
display: flex;
flex-direction: column;
gap: 32px;
background: #fff;
border: 1px solid #bcdcef;
border-radius: 30px;
padding: 32px;
}
.review-stars {
display: inline-flex;
gap: 4px;
color: #d95d31;
font-size: 16px;
}
.review-quote {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #0e2545;
flex: 1 1 auto;
}
.review-author {
display: flex;
align-items: center;
gap: 16px;
}
.review-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.review-name {
font-size: 16px;
font-weight: 600;
color: #0e2545;
margin: 0;
}
.review-role {
font-size: 16px;
color: #6d6d6d;
margin: 0;
line-height: 1.2
}
/* === Gallery / FAQ / Reviews — responsive === */
@media (max-width: 767.98px) {
.gallery-title,
.faq-title {
font-size: 30px;
}
.reviews-title {
font-size: 26px;
}
.faq-toggle {
font-size: 16px;
padding: 18px 22px;
}
.faq-a {
padding: 0 22px 22px;
}
.faq-cta-title {
font-size: 26px;
}
}
/* =================================================================
ORLANDO VACATION PACKAGES — vacation-packages.html
(Page hero band + Popular Vacation Package Deals)
================================================================= */
/* === Page Hero Band === */
.vacpac-hero {
background: var(--c-primary);
color: #fff;
border-bottom-right-radius: 50px;
overflow: hidden;
padding: 40px 0;
padding-top: 20px;
}
.vacpac-hero-inn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.vacpac-hero-content {
flex: 1 1 420px;
min-width: 0;
}
.vacpac-hero-title {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0 0 8px;
}
.vacpac-hero-text {
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
margin: 0;
max-width: 640px;
}
.vacpac-hero-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
padding: 12px 24px;
border-radius: 30px;
transition: background 0.3s, color 0.3s;
}
.vacpac-hero-cta:hover,
.vacpac-hero-cta:focus {
background: #fff;
color: var(--c-primary);
}
/* === Section shell === */
.vacpac-deals {
background: #fff;
padding: 40px 0 70px;
}
.vacpac-deals-head {
margin-bottom: 28px;
}
.vacpac-deals-title {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0;
}
/* === Breadcrumb === */
.vacpac-breadcrumb {
margin-bottom: 16px;
}
.vacpac-breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.vacpac-breadcrumb li {
display: inline-flex;
align-items: center;
color: var(--c-primary);
font-size: 16px;
}
.vacpac-breadcrumb a {
color: var(--c-primary);
display: inline-flex;
align-items: center;
}
.vacpac-breadcrumb a:hover {
color: var(--c-blue);
}
.vacpac-breadcrumb em {
font-size: 14px;
opacity: 0.7;
}
.vacpac-breadcrumb-current {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* === Shared: tags, stars, price, buttons === */
.vacpac-tag {
display: inline-block;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: #fff;
padding: 4px 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0;
}
.vacpac-tag-blue {
background: var(--c-blue);
}
.vacpac-tag-orange {
background: var(--c-accent);
}
.vacpac-stars {
margin: 0;
color: #D95D31;
font-size: 15px;
line-height: 1;
letter-spacing: 2px;
white-space: nowrap;
margin-bottom: 10px
}
.save-badge {
background: var(--c-accent);
color: #fff;
font-weight: 700;
text-transform: uppercase;
line-height: normal;
font-size: 14px;
line-height: 14px;
padding: 8px 20px;
position: relative;
margin-left: 30px;
z-index: 1
}
.save-badge span {
display: block;
line-height: normal
}
.save-badge::before {
position: absolute;
content: "";
top: 8px;
left: -18px;
height: 36px;
width: 36px;
background: var(--c-accent);
transform: rotate(45deg);
z-index: -1;
}
.vacpac-price {
margin: 0;
display: flex;
flex-direction: column;
color: var(--c-primary);
}
.vacpac-price-amount {
font-size: 48px;
font-weight: 700;
line-height: 1.1;
}
.vacpac-price-label {
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.vacpac-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 12px 20px;
border-radius: 30px;
border: 2px solid transparent;
transition: background 0.3s, border-color 0.3s, color 0.3s;
white-space: nowrap;
}
.vacpac-btn-green {
background: #46a24a;
color: #fbfbfb;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.vacpac-btn-green:hover,
.vacpac-btn-green:focus {
background: #327234;
color: #fff;
}
.vacpac-btn-featured {
background: #46a24a;
color: #fff;
border-color: rgba(255, 255, 255, 0.7);
font-size: 16px;
padding: 12px 28px;
border-radius: 35px;
box-shadow: 0 -7px 8px rgba(255, 255, 255, 0.14), 0 3px 6px rgba(255, 255, 255, 0.23);
}
.vacpac-btn-featured:hover,
.vacpac-btn-featured:focus {
background: #327234;
color: #fff;
}
/* === Image gallery (Slick carousel) === */
.vacpac-gallery .vacpac-gallery-slide img {
width: 100%;
object-fit: cover;
display: block;
height: 100%;
position: relative
}
.vacpac-gallery div {
height: 100%
}
.vacpac-gallery .vacpac-gallery-slide {
position: relative
}
.vacpac-gallery .vacpac-gallery-slide::before {
position: absolute;
content: "";
width: 100%;
height: 50%;
left: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, var(--Bg-primary-surface, #0E2545) 100%);
z-index: 1;
opacity: 1
}
.vacpac-gallery:not(.slick-initialized) .vacpac-gallery-slide {
display: none;
}
.vacpac-gallery .slick-dots {
position: absolute;
}
.vacpac-gallery .slick-dots li button {
width: 8px;
opacity: 1;
height: 8px;
border-radius: 50%;
background: #fff;
opacity: 0.5
}
.slick-dots li.slick-active button {
opacity: 1
}
.vacpac-gallery:not(.slick-initialized) .vacpac-gallery-slide:first-child {
display: block;
}
.vacpac-gallery .slick-dots {
bottom: 16px;
}
.vacpac-gallery .slick-dots li button:before {
color: #fff;
opacity: 0.5;
font-size: 10px;
}
.vacpac-gallery .slick-dots li.slick-active button:before {
color: #fff;
opacity: 1;
}
.vacpac-gallery .slick-prev,
.vacpac-gallery .slick-next {
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
z-index: 2;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.vacpac-gallery .slick-prev {
left: 14px;
}
.vacpac-gallery .slick-next {
right: 14px;
}
.vacpac-gallery .slick-prev:hover,
.vacpac-gallery .slick-next:hover,
.vacpac-gallery .slick-prev:focus,
.vacpac-gallery .slick-next:focus {
background: var(--c-accent);
}
.vacpac-gallery .slick-prev:before,
.vacpac-gallery .slick-next:before {
color: var(--c-primary);
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 16px;
opacity: 1;
}
.vacpac-gallery .slick-prev:before {
content: "\f060";
}
.vacpac-gallery .slick-next:before {
content: "\f061";
}
.vacpac-gallery .slick-prev:hover:before,
.vacpac-gallery .slick-next:hover:before {
color: #fff
}
/* === Featured card === */
.vacpac-featured {
display: flex;
align-items: stretch;
border-radius: 30px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
}
.vacpac-featured-media {
flex: 1 1 50%;
min-width: 0;
}
.vacpac-featured-media .vacpac-gallery,
.vacpac-featured-media .vacpac-gallery-slide img {
height: 100%;
}
.vacpac-featured-media .vacpac-gallery-slide img {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
display: block;
}
.vacpac-featured-content {
flex: 1 1 50%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: 48px;
color: #fff;
background: linear-gradient(100deg, var(--c-primary) 37.5%, #235cab 100%);
}
.vacpac-featured-top {
display: grid;
gap: 16px;
}
.vacpac-featured-top .vacpac-tag {
justify-self: start;
}
.vacpac-featured-name {
font-size: 32px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 0;
}
.vacpac-featured-sub {
font-size: 16px;
line-height: 1.5;
color: #fff;
margin: 0;
}
.vacpac-featured-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.vacpac-featured-cta .vacpac-price {
color: #fff;
}
/* === Filter tabs === */
.vacpac-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-bottom: 30px;
}
.vacpac-tab {
border: 0;
background: transparent;
color: var(--c-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
transition: background 0.25s, color 0.25s;
}
.vacpac-tab:hover {
color: var(--c-blue);
}
.vacpac-tab.is-active {
background: var(--c-blue);
color: #fff;
font-weight: 600;
}
/* === Card grid === */
.vacpac-grid {
margin-bottom: 30px;
}
.vacpac-item.is-hidden {
display: none;
}
.vacpac-card {
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--c-blue);
border-radius: 30px;
overflow: hidden;
}
.vacpac-card-media .vacpac-gallery-slide img {
height: 300px;
}
.vacpac-card-body {
display: block;
padding: 24px;
}
.vacpac-card-title {
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: var(--c-primary);
margin: 15px 0
}
.vacpac-card-cta {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 15px
}
/* === Highlighted package band === */
.vacpac-highlight {
background: linear-gradient(100deg, rgba(6, 147, 227, 0.7) 0%, rgba(255, 255, 255, 0.7) 80%);
border: 1px solid rgba(14, 37, 69, 0.6);
border-radius: 30px;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
padding: 48px 40px;
}
.vacpac-highlight-title {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 16px;
}
.vacpac-highlight-sub {
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: var(--c-primary);
margin: 0;
}
.vacpac-highlight-list-title {
font-size: 20px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 12px;
}
.vacpac-highlight-list ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.vacpac-highlight-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
line-height: 1.5;
color: var(--c-primary);
}
.vacpac-highlight-list li img {
max-width: 27px;
}
.vacpac-highlight-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.vacpac-highlight-amount {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.vacpac-highlight-amount img {
width: 93px;
height: 68px;
object-fit: contain;
}
.vacpac-highlight-standard {
font-size: 16px;
color: var(--c-primary);
margin: 0;
}
/* === Footer subscribe (page-specific column) === */
.footer-subscribe-text {
font-size: 14px;
line-height: 1.5;
color: #0E2545;
margin: 0 0 16px;
}
.footer-subscribe-form {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 12px;
}
.footer-subscribe-form input {
width: 100%;
padding: 12px;
border: 1px solid #d5d5d5;
background: #fff;
color: var(--c-primary);
font-size: 16px;
}
.footer-subscribe-form .vacpac-btn {
width: 100%;
}
.footer-subscribe-fine {
font-size: 12px;
line-height: 1.5;
color: #0E2545;
margin: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === Orlando Vacation Packages — responsive === */
@media (max-width: 1199.98px) {
.vacpac-deals-title {
font-size: 44px;
}
.vacpac-highlight-title {
font-size: 38px;
}
}
@media (max-width: 991.98px) {
.vacpac-featured {
flex-direction: column;
}
.vacpac-featured-media,
.vacpac-featured-content {
flex: 1 1 100%;
}
.vacpac-featured-media .vacpac-gallery-slide img {
height: 300px;
}
.vacpac-featured-content {
padding: 32px;
}
.vacpac-featured-name {
font-size: 28px;
}
.vacpac-highlight {
padding: 36px 28px;
}
}
@media (max-width: 767.98px) {
.vacpac-hero-inn {
padding: 32px 0;
}
.vacpac-hero-title {
font-size: 30px;
}
.vacpac-hero-cta {
width: 100%;
}
.vacpac-deals {
padding: 30px 0 50px;
}
.vacpac-deals-title {
font-size: 34px;
}
.vacpac-highlight-title {
font-size: 30px;
}
.vacpac-highlight-sub {
font-size: 20px;
}
.vacpac-tabs {
gap: 2px;
}
.vacpac-tab {
padding: 8px 12px;
font-size: 14px;
}
}
@media (max-width: 575.98px) {
.vacpac-deals-title {
font-size: 28px;
}
.vacpac-price-amount {
font-size: 40px;
}
.vacpac-featured-cta,
.vacpac-card-cta {
align-items: stretch;
}
.vacpac-featured-cta .vacpac-btn,
.vacpac-card-cta .vacpac-btn {
width: 100%;
}
.vacpac-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.vacpac-tab {
white-space: nowrap;
}
}
/* === Discover CTA band === */
.vacpac-cta {
position: relative;
overflow: hidden;
padding: 112px 0;
isolation: isolate;
}
.vacpac-cta-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
}
.vacpac-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, rgba(1, 2, 4, 0.6) 52.67%, rgba(0, 0, 0, 0.12) 100%);
opacity: 0.3
}
.vacpac-cta-inner {
max-width: 768px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.vacpac-cta-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0;
}
.vacpac-cta-text {
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: #fff;
margin: 0;
}
.vacpac-cta-actions {
display: flex;
gap: 16px;
padding-top: 16px;
flex-wrap: wrap;
justify-content: center;
}
.vacpac-cta-actions .vacpac-btn {
font-size: 16px;
padding: 12px 24px;
text-transform: none;
letter-spacing: 0;
}
.vacpac-btn-outline-light {
background: transparent;
color: #fff;
border-color: #fff;
}
.vacpac-btn-outline-light:hover,
.vacpac-btn-outline-light:focus {
background: #fff;
color: var(--c-primary);
}
/* === Discover CTA — responsive === */
@media (max-width: 991.98px) {
.vacpac-cta {
padding: 80px 0;
}
.vacpac-cta-title {
font-size: 38px;
}
}
@media (max-width: 767.98px) {
.vacpac-cta {
padding: 60px 0;
}
.vacpac-cta-title {
font-size: 30px;
}
}
@media (max-width: 575.98px) {
.vacpac-cta-actions {
width: 100%;
flex-direction: column;
}
.vacpac-cta-actions .vacpac-btn {
width: 100%;
}
}
/* =================================================================
RESORT LISTING HERO — resort-listing.html
Reuses base .hero-area / .booking-widget; adds resort title,
subline, info bar, price, breadcrumb + tab nav.
================================================================= */
.resort-hero .inner,
.city-hero .inner {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.resort-hero-head {
text-align: center;
margin-bottom: 18px;
}
.resort-hero-title {
margin: 0 0 6px;
}
.resort-hero-sub {
margin: 0;
color: #fff;
font-size: 24px;
font-weight: 400;
line-height: 1.2;
text-align: center;
text-shadow: 0 4px 8.3px rgba(0, 0, 0, 0.6);
}
.resort-hero-sub span {
color: #FF8F68;
font-weight: 700
}
/* Dark info bar that sits on top of the booking widget */
.resort-hero-info {
width: 672px;
max-width: calc(100% - 80px);
background: rgba(14, 37, 69, 0.75);
border-top-left-radius: 35px;
border-top-right-radius: 35px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 18px 24px 50px;
margin: 0 auto -30px;
position: relative;
z-index: 4;
color: #fff;
}
.hero-area.resort-hero .hero-overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20.3%, rgba(0, 0, 0, 0.70) 100%)
}
.city-hero .hero-overlay {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.70) 100%)
}
/* Best Price Guarantee badge — pinned to the top-right of the hero image */
.hero-guarantee {
margin: 0;
background: rgba(14, 37, 69, .75);
border-radius: 10px;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
color: var(--c-white);
text-shadow: 0 4px 4px rgba(0, 0, 0, .35);
display: inline-block;
padding: 15px 20px;
}
.hero-guarantee-icon {
text-shadow: none;
}
.city-hero > .container {
position: absolute;
top: 0px;
right: 0;
z-index: 1;
left: 50%;
transform: translateX(-50%);
text-align: right;
padding-top: 40px
}
/* Figma specifies desktop only; keep the badge clear of the hero copy below lg */
@media (max-width: 991.98px) {
.hero-guarantee {
font-size: 17px;
}
}
@media (max-width: 575.98px) {
.hero-guarantee {
font-size: 14px;
}
.city-hero .container {
text-align: center
}
}
.resort-hero-info-left {
display: flex;
flex-direction: column;
gap: 4px;
}
.resort-hero-address {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 16px;
line-height: 1.2;
color: #fff;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}
.resort-hero-phone {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}
.resort-hero-phone a {
color: #fff;
padding-left: 20px;
}
.resort-hero-phone a:hover,
.resort-hero-phone a:focus {
color: var(--c-accent);
text-decoration: underline;
}
.resort-hero-price {
margin: 0;
font-size: 16px;
line-height: 1.2;
color: #fff;
text-align: right;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
white-space: nowrap;
}
.resort-hero-price strong {
font-size: 30px;
font-weight: 700;
}
/* Booking widget on this page is narrower (672px) to match the info bar */
.resort-booking-widget {
width: 672px;
margin-top: 0;
padding-left: 38px;
}
/* === Resort sub-navigation (breadcrumb + tabs) === */
.resort-subnav {
background: #fff;
padding: 24px 0 0;
position: sticky;
top: 60px;
z-index: 1;
transition: box-shadow 0.25s ease;
}
.resort-subnav.is-stuck {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
z-index: 11
}
.resort-breadcrumb {
margin-bottom: 18px;
}
.resort-breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.resort-breadcrumb li {
display: inline-flex;
align-items: center;
font-size: 16px;
}
.resort-breadcrumb a {
display: inline-flex;
align-items: center;
}
.resort-breadcrumb a:hover {
color: var(--c-blue);
}
.resort-breadcrumb em {
font-size: 14px;
opacity: 0.7;
}
.resort-breadcrumb-current {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 20px;
}
.resort-tabs {
position: relative;
}
.resort-tabs-toggle {
display: none;
}
.resort-tabs ul {
display: flex;
flex-wrap: wrap;
gap: 8px 28px;
list-style: none;
margin: 0;
padding: 0;
justify-content: center
}
.resort-tabs a {
display: inline-block;
padding: 10px 2px;
font-size: 16px;
line-height: 1.2;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
color: #000
}
.resort-tabs a:hover {
color: var(--c-blue);
}
.resort-tabs a.is-active {
font-weight: 700;
border-bottom-color: var(--c-primary);
}
/* === Resort hero — responsive === */
@media (max-width: 991.98px) {
.resort-hero-title {
font-size: 32px;
}
.resort-hero-sub {
font-size: 20px;
}
.resort-tabs a {
font-size: 17px;
}
}
@media (max-width: 767.98px) {
.resort-hero-info {
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-radius: 18px;
margin-bottom: 16px;
}
.resort-hero-price {
text-align: left;
}
.resort-booking-widget {
flex-wrap: wrap;
height: auto;
border-radius: 24px;
padding: 16px;
gap: 12px;
}
.resort-hero-title {
font-size: 26px;
}
.resort-tabs ul {
gap: 4px 18px;
}
.resort-tabs a {
font-size: 15px;
padding: 8px 2px;
}
}
@media (max-width: 575.98px) {
.resort-breadcrumb li,
.resort-breadcrumb-current {
font-size: 16px;
}
.resort-tabs-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 16px;
background: #fff;
border: none;
border-bottom: 3px solid var(--c-primary);
font-size: 20px;
font-weight: 700;
color: #000;
cursor: pointer;
}
.resort-tabs-toggle em {
font-size: 14px;
transition: transform 0.25s ease;
}
.resort-tabs-toggle[aria-expanded="true"] em {
transform: rotate(180deg);
}
.resort-tabs ul {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
background: #fff;
border: 1px solid #e5e5e5;
border-top: none;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
max-height: 60vh;
overflow-y: auto;
display: none;
}
.resort-tabs.is-open ul {
display: flex;
}
.resort-tabs ul li {
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.resort-tabs ul li:last-child {
border-bottom: none;
}
.resort-tabs a {
display: block;
width: 100%;
white-space: nowrap;
padding: 14px 18px;
border-bottom: none;
margin-bottom: 0;
text-align: center;
}
.resort-tabs a.is-active {
border-bottom: none;
background: #f7f7f7;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === Resort intro (overview paragraph) === */
.resort-intro {
background: #fff;
padding: 40px 0 10px;
}
.resort-intro-text {
margin: 0;
color: var(--c-primary);
font-size: 16px;
line-height: 1.8;
}
.resort-intro-text strong {
font-weight: 700;
}
@media (max-width: 767.98px) {
.resort-intro {
padding: 28px 0 6px;
}
.resort-intro-text {
font-size: 16px;
}
}
/* === Shared: centered section title (resort page) === */
.section-title-center {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
text-align: center;
margin: 0 0 40px;
}
/* === Shared: outline link button with arrow (View Water Park / Dining / etc.) === */
.resort-link-btn {
display: inline-flex;
align-items: center;
gap: 12px;
border: 2px solid var(--c-primary);
border-radius: 40px;
padding: 18px 40px;
font-size: 21px;
font-weight: 600;
line-height: 1.2;
color: var(--c-primary);
transition: background 0.3s, color 0.3s;
}
.resort-link-btn em {
font-size: 16px;
transition: transform 0.3s;
}
.resort-link-btn:hover,
.resort-link-btn:focus {
background: var(--c-primary);
color: #fff;
}
.resort-link-btn:hover em,
.resort-link-btn:focus em {
transform: translateX(4px);
}
/* === Shipwreck Island Water Park === */
.waterpark-section {
background: #fff;
padding: 70px 0;
}
.waterpark-row {
margin-bottom: 70px;
}
.waterpark-row:last-child {
margin-bottom: 0;
}
.waterpark-img {
width: 100%;
height: 337px;
object-fit: cover;
border-radius: 30px;
display: block;
}
.waterpark-subhead {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 16px;
}
.waterpark-text {
font-size: 16px;
line-height: 1.8;
color: var(--c-primary);
margin: 0 0 16px;
}
.waterpark-text:last-of-type {
margin-bottom: 24px;
}
.waterpark-copy .resort-link-btn {
margin-top: 8px;
}
/* On mobile, image should come before text in the reversed row */
@media (max-width: 991.98px) {
.waterpark-section {
padding: 50px 0;
}
.waterpark-row {
margin-bottom: 50px;
}
.waterpark-row-reverse {
flex-direction: column-reverse;
}
}
@media (max-width: 767.98px) {
.section-title-center {
font-size: 28px;
margin-bottom: 28px;
}
.waterpark-img {
height: 240px;
}
.waterpark-text {
font-size: 16px;
}
.resort-link-btn {
width: 100%;
justify-content: center;
padding: 16px 24px;
font-size: 16px;
}
}
/* === All the Comforts of Home (accommodations carousel) === */
.comforts-section {
background: #fff;
padding: 70px 0;
overflow: hidden;
}
.comforts-carousel {
margin: 0 0 24px;
}
/* Pre-init: show first slide only, no flash of stacked images */
.comforts-carousel:not(.slick-initialized) {
display: flex;
justify-content: center;
}
.comforts-carousel:not(.slick-initialized) .comforts-slide {
flex: 0 0 70%;
}
.comforts-carousel:not(.slick-initialized) .comforts-slide:not(:first-child) {
display: none;
}
.comforts-slide {
padding: 0 12px;
}
.comforts-slide img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 40px;
display: block;
}
/* Side (non-center) slides: shorter, pushed behind, partly under the center slide */
.comforts-carousel .slick-slide {
position: relative;
z-index: 1;
transition: transform 0.45s ease, opacity 0.45s ease;
opacity: 1;
}
.comforts-carousel .slick-slide img {
height: 250px;
transition: height 0.45s ease;
}
/* Center slide: bigger, on top, overlapping its neighbors */
.comforts-carousel .slick-center {
z-index: 3;
}
.comforts-carousel .slick-center img {
height: 360px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
/* Pull the immediate neighbors slightly under the raised center slide */
.comforts-carousel .slick-center + .slick-slide,
.comforts-carousel .slick-slide:has(+ .slick-center) {
z-index: 2;
}
/* Nav row: arrows + dots together, centered, below the carousel */
.comforts-nav,
.photos-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
}
.comforts-arrow {
flex: 0 0 auto;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--c-primary);
font-size: 16px;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}
.comforts-arrow:hover,
.comforts-arrow:focus {
background: #f0f2f5;
}
.comforts-nav .slick-dots,
.photos-nav .slick-dots {
position: static;
width: auto;
display: flex;
align-items: center;
gap: 4px;
margin: 0;
}
.comforts-nav .slick-dots li,
.photos-nav .slick-dots li {
margin: 0;
width: auto;
height: auto;
}
.comforts-nav .slick-dots li button,
.photos-nav .slick-dots li button {
width: 12px;
height: 12px;
padding: 0;
}
.comforts-nav .slick-dots li button:before,
.photos-nav .slick-dots li button:before {
font-size: 10px;
line-height: 12px;
width: 12px;
height: 12px;
color: var(--c-gray);
opacity: 0.5;
}
.comforts-nav .slick-dots li.slick-active button:before,
.photos-nav .slick-dots li.slick-active button:before {
color: var(--c-blue);
opacity: 1;
}
.comforts-text {
font-size: 16px;
line-height: 1.8;
color: var(--c-primary);
margin: 0 auto 24px;
}
.comforts-actions {
display: flex;
justify-content: center;
}
@media (max-width: 1199.98px) {
.comforts-carousel .slick-center img {
height: 320px;
}
.comforts-carousel .slick-slide img {
height: 220px;
}
}
@media (max-width: 991.98px) {
.comforts-section {
padding: 50px 0;
}
.comforts-carousel .slick-center img {
height: 280px;
}
.comforts-carousel .slick-slide img {
height: 200px;
}
}
@media (max-width: 575.98px) {
.comforts-slide {
padding: 0 8px;
}
.comforts-carousel .slick-slide img,
.comforts-carousel .slick-center img {
height: 240px;
border-radius: 24px;
}
.comforts-text {
font-size: 16px;
}
}
/* === Fantastic Amenities & Activities === */
.amenities-section {
background: #fff;
padding: 70px 0;
}
.amenities-stars {
margin: 0;
color: #D95D31;
font-size: 16px;
line-height: 1;
letter-spacing: 3px;
}
/* Resort at a Glance card */
.glance-card {
border: 2px solid var(--c-blue);
border-radius: 30px;
box-shadow: 2px 4px 7.3px rgba(0, 0, 0, 0.25);
padding: 30px 48px;
margin-bottom: 40px;
}
.glance-heading {
font-size: 26px;
font-weight: 400;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 14px;
}
.glance-fact {
font-size: 16px;
line-height: 1.5;
color: var(--c-primary);
margin: 0 0 6px;
}
.glance-fact:last-child {
margin-bottom: 0;
}
.glance-fact strong {
font-weight: 700;
}
.glance-fact.glance-link {
display: flex;
align-items: center
}
.glance-fact.glance-link img {
margin-right: 10px
}
.glance-link a {
color: var(--c-primary);
display: inline-flex;
align-items: center;
gap: 6px;
}
.glance-link a:hover,
.glance-link a:focus {
color: var(--c-blue);
}
/* Amenity category columns */
.amenities-grid {
margin-bottom: 50px;
}
.amenity-group-wide {
margin-bottom: 32px;
}
/* Activities list spreads across up to three columns in the full-width row */
.amenity-list-cols {
display: block;
column-count: 3;
column-gap: 24px;
}
.amenity-list-cols li {
margin-bottom: 8px;
break-inside: avoid;
}
@media (max-width: 767.98px) {
.amenity-list-cols {
column-count: 2;
}
}
@media (max-width: 479.98px) {
.amenity-list-cols {
column-count: 1;
}
}
.amenity-cat {
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 16px;
}
.amenity-cat em {
font-size: 20px;
color: var(--c-primary);
}
.amenity-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.amenity-list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 16px;
line-height: 1.5;
color: var(--c-primary);
}
.amenity-list li em {
flex: 0 0 auto;
margin-top: 3px;
font-size: 14px;
color: var(--c-primary);
}
/* Resort Information + Local Attractions */
.amenity-info-block {
margin-bottom: 50px;
}
.amenity-cat-plain {
margin-bottom: 12px;
}
.amenity-link-list {
list-style: disc;
margin: 0;
padding-left: 22px;
display: grid;
gap: 8px;
}
.amenity-link-list li {
color: var(--c-blue);
font-size: 16px;
line-height: 1.4;
}
.amenity-link-list a {
color: #057fc5;
}
.amenity-link-list.blue li {
color: #0E2545
}
.amenity-link-list.blue a {
color: #0E2545
}
.amenity-link-list a:hover,
.amenity-link-list a:focus {
color: var(--c-accent);
text-decoration: underline;
}
.amenities-actions {
display: flex;
justify-content: center;
margin-top: 12px;
}
@media (max-width: 991.98px) {
.amenities-section {
padding: 50px 0;
}
.glance-card {
padding: 26px 28px;
}
.glance-heading {
font-size: 26px;
}
.glance-fact {
font-size: 16px;
}
.amenity-link-list li {
font-size: 16px;
}
}
@media (max-width: 575.98px) {
.glance-card {
padding: 22px 20px;
}
.glance-heading {
font-size: 24px;
}
.amenity-cat {
font-size: 22px;
}
.amenity-link-list li {
font-size: 16px;
}
}
/* === Numerous Food and Drink Options === */
.dining-section {
background: #fff;
padding: 70px 0;
}
.dining-intro {
font-size: 16px;
line-height: 1.8;
color: var(--c-primary);
margin: 0 auto 36px;
}
/* Dining photo slider */
.dining-photos {
margin: 0 0 40px;
position: relative;
}
/* Side prev/next arrows for the dining photo strip */
.dining-photos .dining-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #e7eaef;
border-radius: 50%;
background: var(--c-white);
color: var(--c-primary);
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: 0 8px 20px rgba(14, 37, 69, .16);
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.dining-photos .dining-arrow:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: var(--c-white);
}
.dining-photos .dining-arrow:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.dining-photos .dining-prev {
left: 16px;
}
.dining-photos .dining-next {
right: 16px;
}
@media (max-width: 767.98px) {
.dining-photos .dining-arrow {
width: 40px;
height: 40px;
}
.dining-photos .dining-prev {
left: 6px;
}
.dining-photos .dining-next {
right: 6px;
}
}
.dining-photos.slick-initialized .slick-list {
padding: 70px 0 !important;
}
/* Pre-init: avoid stacked flash */
.dining-photos:not(.slick-initialized) {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
overflow: hidden;
}
.dining-photos:not(.slick-initialized) .dining-photo-slide:nth-child(n+6) {
display: none;
}
/* Slides share a common vertical center axis; tiers scale down from the middle */
.dining-photos .slick-track {
display: flex;
align-items: center;
}
.dining-photos .slick-slide {
height: auto;
transition: transform 0.45s ease;
transform: scale(0.872);
/* default = outer/smallest tier */
transform-origin: center center;
}
.dining-photo-slide {
padding: 0 6px;
}
.dining-photo-slide img {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
border-radius: 28px;
display: block;
}
/* Immediate neighbors of the center */
.dining-photos .slick-slide.dining-adjacent {
transform: scale(1.073);
position: relative;
z-index: 1;
}
/* Center tile — largest, sits above neighbors */
.dining-photos .slick-center {
transform: scale(1.344);
position: relative;
z-index: 2;
}
/* Dining table (flex rows, not CSS grid) */
.dining-table {
margin-bottom: 36px;
}
.dining-row {
display: flex;
align-items: center;
gap: 24px;
padding: 20px 0;
border-bottom: 2px solid #e6e6e6;
}
.dining-head {
border-bottom: none;
padding-bottom: 8px;
}
.dining-name {
flex: 1 1 auto;
min-width: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
}
.dining-cuisine {
flex: 0 0 220px;
text-align: center;
font-size: 20px;
line-height: 1.4;
color: var(--c-primary);
}
.dining-price {
flex: 0 0 120px;
text-align: center;
font-size: 32px;
font-weight: 500;
line-height: 1.2;
color: var(--c-primary);
}
.dining-head .dining-cuisine,
.dining-head .dining-price {
font-size: 20px;
font-weight: 600;
color: var(--c-accent);
white-space: nowrap
}
.dining-actions {
display: flex;
justify-content: center;
}
@media (min-width: 768px) and (max-width: 991.98px) {
/* 3 slides in view: keep the center-scaling arc */
.dining-photos.slick-initialized .slick-list {
padding: 50px 0 !important;
}
.dining-photos .slick-slide {
transform: scale(0.85);
}
.dining-photos .slick-slide.dining-adjacent {
transform: scale(0.85);
}
.dining-photos .slick-center {
transform: scale(1.15);
}
}
@media (max-width: 991.98px) {
.dining-section {
padding: 50px 0;
}
.dining-name {
font-size: 20px;
}
.dining-cuisine {
flex-basis: 160px;
font-size: 16px;
}
.dining-price {
flex-basis: 90px;
font-size: 26px;
}
}
@media (max-width: 767.98px) {
.section-title-center {}
.dining-intro {
font-size: 16px;
}
/* Single slide with peeking neighbors: no scaling arc */
.dining-photos.slick-initialized .slick-list {
padding: 0 !important;
}
.dining-photos .slick-slide,
.dining-photos .slick-slide.dining-adjacent,
.dining-photos .slick-center {
transform: none;
}
/* Stack each dining row into a label/value card on small screens */
.dining-head {
display: none;
}
.dining-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 14px 0;
}
.dining-name {
font-size: 16px;
}
.dining-cuisine,
.dining-price {
flex: 0 0 auto;
text-align: left;
}
.dining-cuisine {
font-size: 16px;
}
.dining-cuisine::before {
content: "Cuisine: ";
font-weight: 700;
}
.dining-price {
font-size: 16px;
font-weight: 700;
}
.dining-price::before {
content: "Price: ";
font-weight: 700;
}
}
/* === Vacation Specials === */
.specials-section {
background: #fff;
padding: 70px 0;
}
.specials-intro {
font-size: 16px;
line-height: 1.8;
color: var(--c-primary);
text-align: center;
margin: -20px 0 36px;
}
.specials-intro em {
font-style: italic;
}
.special-card {
display: flex;
align-items: stretch;
border: 2px solid #d5d5d5;
border-radius: 30px;
overflow: hidden;
margin-top: 30px
}
.special-card-media {
position: relative;
flex: 1 1 50%;
min-width: 0;
}
.special-card-media img {
width: 100%;
height: 100%;
min-height: 371px;
object-fit: cover;
display: block;
}
/* Scarcity badge pinned to the top-left of the deal image */
.special-badge {
position: absolute;
z-index: 2;
top: 24px;
left: 21px;
display: inline-flex;
align-items: center;
gap: 8px;
height: 50px;
max-width: calc(100% - 42px);
margin: 0;
padding: 0 16px;
background: var(--c-white);
border-radius: 15px;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: var(--c-primary);
white-space: nowrap;
}
.special-badge em {
flex: 0 0 auto;
font-size: 23px;
color: var(--c-accent);
}
.special-badge span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.special-badge strong {
font-weight: 700;
}
.special-badge-count {
color: var(--c-accent);
}
.special-card-content {
flex: 1 1 50%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
padding: 33px 48px;
}
.special-card-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--c-primary);
margin: 0 0 8px;
}
.special-card-location {
font-size: 16px;
line-height: 1.4;
color: var(--c-primary);
margin: 0 0 16px;
padding-bottom: 16px;
border-bottom: 1px solid #d5d5d5;
}
.special-card-features {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.special-card-features li {
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
line-height: 1.4;
color: var(--c-primary);
}
.special-card-features li em {
flex: 0 0 auto;
width: 18px;
text-align: center;
font-size: 14px;
color: var(--c-primary);
}
.special-card-cta {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.special-card-price {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 12px;
color: var(--c-primary);
}
.special-card-from {
font-size: 16px;
font-weight: 700;
flex: 1 0 100%;
}
.special-card-amount {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: var(--c-accent);
}
.special-card-nights {
font-size: 16px;
font-weight: 700;
}
.special-card-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-accent);
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
padding: 12px 60px;
border-radius: 35px;
transition: background 0.3s;
}
.special-card-btn:hover,
.special-card-btn:focus {
background: #c14f27;
color: #fff;
}
@media (max-width: 991.98px) {
.specials-section {
padding: 50px 0;
}
.special-card {
flex-direction: column;
}
.special-card-media,
.special-card-content {
flex: 1 1 100%;
}
.special-card-media img {
min-height: 260px;
}
.special-card-content {
padding: 28px;
}
.special-badge {
top: 14px;
left: 12px;
gap: 6px;
height: 40px;
max-width: calc(100% - 24px);
padding: 0 12px;
border-radius: 12px;
font-size: 13px;
}
.special-badge em {
font-size: 18px;
}
.special-card-title {
font-size: 26px;
}
}
@media (max-width: 575.98px) {
.specials-intro {
font-size: 16px;
}
.special-card-cta {
align-items: stretch;
}
.special-card-btn {
width: 100%;
}
}
/* === Stay on the doorstep to Disney World (location) === */
.location-section {
background: #fff;
padding: 70px 0;
}
.location-intro {
font-size: 16px;
line-height: 1.8;
color: var(--c-primary);
margin: -20px 0 40px;
}
.location-into-text {
margin-top: 30px
}
.location-into-text .title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px
}
.location-into-text {
font-size: 16px;
margin-bottom: 50px
}
.location-grid {
margin-bottom: 40px;
}
.location-coming-title {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 20px;
}
/* Directions accordions */
.directions-list {
display: grid;
gap: 16px;
}
.directions-item {
background: #fff;
border: 1px solid rgba(14, 37, 69, 0.6);
border-radius: 30px;
box-shadow: 4px 4px 3.85px rgba(14, 37, 69, 0.3);
overflow: hidden;
}
.directions-question {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
background: transparent;
border: 0;
padding: 20px 24px;
cursor: pointer;
text-align: left;
}
.directions-lead-icon {
flex: 0 0 auto;
font-size: 22px;
color: var(--c-primary);
}
.directions-q-text {
flex: 1 1 auto;
min-width: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
}
.directions-icon {
flex: 0 0 auto;
font-size: 24px;
color: var(--c-primary);
transition: transform 0.3s;
}
.directions-answer {
display: none;
padding: 0 24px 24px;
}
.directions-item.is-open .directions-answer {
display: block;
}
.directions-distance {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 10px;
}
.directions-text {
font-size: 16px;
line-height: 1.6;
color: var(--c-primary);
margin: 0;
}
/* Map */
.location-map {
height: 100%;
}
.location-map img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
border-radius: 30px;
display: block;
}
/* Centered address block */
.location-address {
text-align: center;
}
.location-address-name {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 6px;
}
.location-address-line {
font-size: 20px;
line-height: 1.8;
color: var(--c-primary);
margin: 0;
}
@media (max-width: 991.98px) {
.location-section {
padding: 50px 0;
}
.location-coming-title {
font-size: 26px;
}
.directions-q-text {
font-size: 20px;
}
.location-map img {
min-height: 320px;
}
}
@media (max-width: 575.98px) {
.location-intro {
font-size: 16px;
}
.directions-question {
padding: 16px 18px;
gap: 12px;
}
.directions-q-text {
font-size: 16px;
}
.location-address-name {
font-size: 20px;
}
.location-address-line {
font-size: 17px;
}
}
/* === Sign up for special offers and discounts === */
.signup-section {
background: #fff;
padding: 30px 0 70px;
}
.signup-card {
border: 2px solid rgba(14, 37, 69, 0.10);
border-radius: 30px;
box-shadow: 0 5px 10.1px 0 rgba(0, 0, 0, 0.15);
padding: 32px 40px;
display: flex;
flex-direction: column;
gap: 24px;
}
.signup-title {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0;
}
.signup-form {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.signup-field {
flex: 1 1 240px;
min-width: 0;
}
.signup-field input {
width: 100%;
border: 1.5px solid #bcd3e6;
border-radius: 50px;
padding: 14px 22px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
line-height: 1.4;
color: var(--c-primary);
background: #fff;
}
.signup-field input::placeholder {
color: #878787;
}
.signup-field input:focus {
outline: none;
border-color: var(--c-accent);
}
.signup-btn {
flex: 0 0 auto;
margin-left: auto;
border: 0;
background: var(--c-accent);
color: #fdfdfd;
font-size: 22px;
font-weight: 500;
line-height: 1.2;
padding: 14px 60px;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s;
margin-left: 50px
}
.signup-btn:hover,
.signup-btn:focus {
background: #c14f27;
color: #fff;
}
@media (max-width: 991.98px) {
.signup-card {
padding: 28px;
gap: 20px;
}
.signup-title {
font-size: 26px;
}
}
@media (max-width: 575.98px) {
.signup-section {
padding: 20px 0 50px;
}
.signup-card {
padding: 24px 20px;
}
.signup-title {
font-size: 22px;
}
.signup-form {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.signup-field {
flex-basis: auto;
}
.signup-btn {
width: 100%;
margin-left: 0;
font-size: 20px;
}
}
/* === Resort Listing Intro === */
.resort-intro {
padding: 40px 0 24px;
}
.resort-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 24px;
padding: 0;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .3px;
}
.resort-breadcrumb li {
color: #6d6d6d;
}
.resort-breadcrumb li:not(:last-child)::after {
content: "/";
margin-left: 8px;
color: #b9b9b9;
}
.resort-breadcrumb a {
color: var(--c-primary);
}
.resort-breadcrumb a:hover {
color: var(--c-accent);
}
.resort-intro-title {
font-size: 24px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 20px;
}
.resort-filters {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.resort-pill {
border: 2px solid #0E2545;
border-radius: 35px;
padding: 8px 28px;
font-size: 16px;
font-weight: 400;
cursor: pointer;
transition: all .25s;
font-family: 'Poppins', sans-serif;
}
.resort-pill:hover {
background: var(--c-primary);
color: #fff
}
.resort-pill.is-active {
background: var(--c-primary);
border-color: var(--c-primary);
color: #fff;
}
/* === Resort Listing Grid === */
.resort-listing {
padding: 24px 0 60px;
}
/* Featured card (image left, content right) */
.resort-featured {
background: #fff;
border-radius: 30px;
overflow: hidden;
margin-bottom: 32px;
border: 2px solid #D5D5D5;
}
.resort-featured-media {
height: auto;
aspect-ratio: 16/9;
}
.resort-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.resort-featured-body {
padding: 40px 48px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.resort-featured-title {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 12px;
}
.resort-stars,
.wgb-stars {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--c-accent);
font-size: 16px;
margin-bottom: 8px;
}
.resort-rating-text {
margin-left: 6px;
font-size: 14px;
}
.resort-location {
font-size: 16px;
color: var(--c-primary);
margin: 0 0 12px;
margin-left: 10px !important
}
.resort-desc {
font-size: 16px;
line-height: 1.6;
color: var(--c-primary);
margin: 0 0 24px;
}
.resort-readmore {
font-weight: 700;
color: var(--c-primary);
}
.resort-readmore:hover {
color: var(--c-accent);
}
.resort-featured-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
/* Price block */
.resort-price {
margin: 0;
display: flex;
flex-direction: column;
line-height: 1.1;
}
.resort-price-from {
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
}
.resort-price-amount {
font-size: 48px;
font-weight: 700;
color: var(--c-primary);
}
.resort-price-unit {
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
}
.resort-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--c-accent);
color: #fff;
font-size: 16px;
font-weight: 700;
padding: 12px 40px;
border-radius: 35px;
transition: background .3s;
}
.resort-btn:hover {
background: #c24e26;
color: #fff;
}
/* Deal cards */
.resort-cards {
margin-bottom: 8px;
}
.resort-card {
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 30px;
overflow: hidden;
border: 1px solid #D5D5D5
}
.resort-card-media {
aspect-ratio: 16/9;
position: relative;
}
.resort-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.resort-card-body {
padding: 28px 24px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.resort-card-title {
font-size: 26px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 8px;
}
.resort-card-desc {
font-size: 16px;
line-height: 1.6;
margin: 12px 0;
flex: 1 1 auto;
}
.resort-card .resort-location {
margin-bottom: 20px;
}
.resort-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: auto;
}
.resort-card-foot .resort-price {
margin: 0;
}
.resort-card-foot.alt {
margin-top: 20px
}
.resort-card-price {
margin: 0;
display: flex;
flex-direction: column;
line-height: 1.05;
}
.resort-card-body .resort-location {
margin-bottom: 0;
margin-left: 10px
}
.resort-card .resort-btn {
padding: 12px 32px;
font-size: 16px;
white-space: nowrap;
}
/* === Resort SEO Content === */
.resort-content {
padding: 40px 0;
}
.resort-content-title {
font-size: 40px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 16px;
}
.resort-content h3 {
font-size: 30px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 16px;
}
.resort-content-text {
color: var(--c-primary);
margin: 0 0 40px;
}
.resort-content ul {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.resort-content ul {
column-count: 2;
list-style: none
}
.resort-content ul li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
font-size: 16px;
color: var(--c-primary);
}
.resort-content ul li::before {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #057fc5;
}
.resort-content ul li a:hover {
color: var(--c-accent);
text-decoration: underline;
}
/* === Vacation CTA Banner === */
.resort-cta {
padding: 30px 0 70px;
}
.resort-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
background: var(--c-primary);
border-radius: 30px;
padding: 48px 56px;
}
.resort-cta-title {
font-size: 32px;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
}
.resort-cta-text {
font-size: 16px;
color: rgba(255, 255, 255, .85);
margin: 0;
}
.resort-cta-phone {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--c-accent);
color: #fff;
font-size: 24px;
font-weight: 700;
padding: 16px 36px;
border-radius: 35px;
white-space: nowrap;
transition: background .3s;
}
.resort-cta-phone:hover {
background: #c24e26;
color: #fff;
}
/* === Resort page — responsive === */
@media (max-width: 991.98px) {
.resort-featured-body {
padding: 28px 28px 32px;
}
.resort-featured-media img {
min-height: 240px;
border-radius: 30px 30px 0 0;
}
}
@media (max-width: 767.98px) {
.resort-intro-title {
font-size: 22px;
}
.resort-pill {
font-size: 16px;
padding: 10px 22px;
}
.resort-featured-title {
font-size: 26px;
}
.resort-content-title {
font-size: 28px;
}
.resort-content-text {
font-size: 16px;
}
.resort-cta-inner {
padding: 32px 28px;
}
.resort-cta-title {
font-size: 26px;
}
.resort-cta-phone {
font-size: 20px;
width: 100%;
justify-content: center;
}
}
/* === Search Summary === */
.search-summary {
padding: 40px 0 24px;
}
.search-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.search-summary-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ss-control {
position: relative;
margin-right: 15px
}
.ss-trigger {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid transparent;
background: none;
border-radius: 12px;
padding: 0;
font-size: 20px;
font-weight: 700;
color: var(--c-primary);
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: background .2s, border-color .2s;
}
.ss-control.is-open .ss-trigger {
border-color: #d6dbe2;
background: #fff;
}
.ss-trigger > em:first-child {
font-size: 16px;
}
.ss-caret {
font-size: 13px;
transition: transform .2s;
}
.ss-control.is-open .ss-caret {
transform: rotate(180deg);
}
/* Popover shell */
.ss-pop {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 30;
min-width: 280px;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 16px;
padding: 20px;
box-shadow: 0 16px 40px rgba(14, 37, 69, .14);
}
.ss-pop-title {
font-size: 14px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 12px;
}
/* Location list */
.ss-loc-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 260px;
overflow-y: auto;
}
.ss-loc-list li {
padding: 10px 12px;
border-radius: 10px;
font-size: 16px;
color: var(--c-primary);
cursor: pointer;
}
.ss-loc-list li:hover,
.ss-loc-list li:focus {
background: #f3f5f6;
outline: none;
}
.ss-loc-list li[aria-selected="true"] {
background: var(--c-primary);
color: #fff;
}
/* Calendar popover */
.ss-pop-cal {
min-width: 320px;
}
.ss-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.ss-cal-month {
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
}
.ss-cal-nav {
width: 32px;
height: 32px;
border: 0;
background: none;
color: var(--c-primary);
cursor: pointer;
font-size: 14px;
border-radius: 50%;
}
.ss-cal-nav:hover {
background: #f3f5f6;
}
.ss-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px 0;
text-align: center;
}
.ss-cal-dow {
font-size: 11px;
font-weight: 700;
color: #6d6d6d;
text-transform: uppercase;
padding: 6px 0;
}
.ss-cal-day {
aspect-ratio: 1 / 1;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--c-primary);
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.ss-cal-day:hover {
background: #f3f5f6;
}
.ss-cal-day.is-muted {
color: #c4c9d2;
cursor: default;
}
.ss-cal-day.is-muted:hover {
background: none;
}
.ss-cal-day.is-selected,
.ss-cal-day.is-range {
background: var(--c-accent);
color: #fff;
font-weight: 700;
}
.ss-cal-day.is-range {
background: #f6d8cb;
color: var(--c-primary);
border-radius: 0;
}
/* Guest stepper popover */
.ss-pop-guests {
min-width: 300px;
}
.ss-stepper-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 12px 0;
}
.ss-stepper-row + .ss-stepper-row {
border-top: 1px solid #eef0f3;
}
.ss-stepper-name {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--c-primary);
}
.ss-stepper-sub {
display: block;
font-size: 13px;
color: #6d6d6d;
}
.ss-stepper {
display: inline-flex;
align-items: center;
gap: 16px;
}
.ss-step {
width: 34px;
height: 34px;
border: 1px solid var(--c-primary);
background: #fff;
color: var(--c-primary);
border-radius: 50%;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s;
}
.ss-step:hover {
background: var(--c-primary);
color: #fff;
}
.ss-step:disabled {
border-color: #d6dbe2;
color: #d6dbe2;
cursor: not-allowed;
}
.ss-step:disabled:hover {
background: #fff;
color: #d6dbe2;
}
.ss-step-count {
min-width: 20px;
text-align: center;
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
}
.search-modify-btn {
border: 1px solid var(--c-primary);
background: #fff;
border-radius: 30px;
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
color: var(--c-primary);
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: all .25s;
}
.search-modify-btn:hover {
background: var(--c-primary);
color: #fff;
}
/* === Awards Strip === */
.awards-strip {
padding: 0px 0 70px;
}
.awards-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 48px;
}
.awards-item {
flex: 0 0 auto;
}
.awards-item img {
height: 96px;
width: auto;
filter: grayscale(1);
opacity: .65;
transition: opacity .25s, filter .25s;
}
.awards-item img:hover {
filter: grayscale(0);
opacity: 1;
}
/* Booking widget */
.search-widget {
display: flex;
align-items: center;
gap: 0;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 50px;
padding: 14px 14px 14px 32px;
max-width: 938px;
box-shadow: 0 6px 24px rgba(14, 37, 69, .06);
}
.search-field {
display: flex;
flex-direction: column;
padding: 0 24px;
flex: 1 1 auto;
}
.search-field-where {
flex: 1.4 1 auto;
}
.search-field label {
font-size: 16px;
font-weight: 600;
margin-bottom: 2px;
}
.search-field input {
border: 0;
padding: 0;
font-size: 16px;
color: var(--c-primary);
background: transparent;
font-family: 'Poppins', sans-serif;
}
.search-field input::placeholder {
color: #6d6d6d;
}
.search-field input:focus {
outline: none;
}
.search-divider {
width: 1px;
height: 44px;
background: #e4e4e4;
flex: 0 0 auto;
}
.search-submit {
flex: 0 0 auto;
width: 60px;
height: 60px;
border: 0;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
font-size: 22px;
cursor: pointer;
margin-left: 16px;
transition: background .3s;
}
.search-submit:hover {
background: #c24e26;
}
/* === Search Results === */
.search-results {
padding: 16px 0 40px;
}
/* Resort result block */
.result-resort {
margin-bottom: 24px;
border-radius: 30px;
position: relative;
z-index: 1
}
.result-resort::after {
position: absolute;
content: "";
top: 110px;
left: 0;
width: 100%;
height: calc(100% - 110px);
background: var(--c-primary);
z-index: -1;
border-radius: 30px;
opacity: 0;
transition: all 0.4s;
visibility: hidden;
}
.result-resort.is-open::after {
visibility: visible;
opacity: 1
}
.result-resort.is-open {
padding: 12px;
}
.result-head {
background: #fff;
border-radius: 30px;
overflow: hidden;
box-shadow: 2px 3px 7.3px rgba(0, 0, 0, 0.23);
}
.result-head-media {
height: 100%;
}
.result-head-media img {
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
}
.result-head-body {
padding: 36px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.result-resort-title {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 6px;
}
.result-info {
align-self: flex-start;
border: 0;
background: none;
padding: 0;
margin: 0 0 20px;
font-size: 16px;
color: var(--c-primary);
cursor: pointer;
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center
}
.result-info img {
margin-right: 5px;
width: 16px;
}
.result-from {
display: flex;
align-items: baseline;
flex-wrap: wrap;
margin: 0;
max-width: 60%;
}
.result-from > span:first-child {
width: 100%;
font-size: 16px;
color: var(--c-primary);
line-height: normal;
}
.result-from-price {
font-size: 36px;
font-weight: 700;
color: var(--c-primary);
margin-right: 5px;
line-height: normal;
}
.result-from-unit {
font-size: 16px;
color: var(--c-primary);
}
/* View / Hide Rates toggle */
.result-rates-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--c-accent);
background: #fff;
color: var(--c-accent);
border-radius: 35px;
padding: 10px 25px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: all .25s;
}
.result-rates-view {
background: var(--c-accent);
color: #fff;
}
.result-rates-toggle:hover {
background: var(--c-accent);
color: #fff;
}
.result-rates-caret {
font-size: 14px;
transition: transform .25s;
}
/* Rooms (expanded) */
.result-rooms {
padding: 15px;
}
.room-row {
position: relative;
background: #fff;
border-radius: 24px;
margin-bottom: 12px;
}
.result-rooms .room-row:last-child {
margin-bottom: 0;
}
.room-row-media {
aspect-ratio: 16/9
}
.room-row-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Body holds the title/phone header (with divider) then the details + rate columns */
.room-row-info {
padding: 30px;
padding-left: 0;
}
/* Title + phone on one line, divider below */
.room-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #e6e9ee;
margin-bottom: 20px
}
.room-row-headline {
display: flex;
align-items: center;
gap: 12px;
}
.room-row-title {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
margin: 0;
}
.room-row-sleeps {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 16px;
color: var(--c-primary);
margin: 0;
}
.room-row-phone {
margin: 0;
font-size: 16px;
white-space: nowrap;
}
.room-row-phone a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--c-accent);
}
/* Lower zone: details (left) + two rate columns (right) */
.room-row-lower {
display: flex;
align-items: flex-end;
gap: 0;
}
.room-row-details {
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-width: 0;
}
.room-row-details li {
position: relative;
padding-left: 18px;
margin-bottom: 8px;
font-size: 16px;
color: var(--c-primary);
}
.room-row-details li::before {
content: "\2022";
position: absolute;
left: 0;
color: var(--c-primary);
}
/* Rate columns — fixed width, top-aligned, shared baselines */
.room-row-rate {
padding: 0 12px;
flex: 1;
}
.rate-label {
font-size: 16px;
color: var(--c-primary);
margin: 0;
order: 2;
}
.rate-save {
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
margin: 0;
order: 1;
}
.rate-amount {
margin: 5px 0;
line-height: normal
}
.rate-price {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
}
.rate-price-accent {
color: var(--c-accent);
}
.rate-unit {
font-size: 16px;
color: var(--c-primary);
margin-left: 6px;
}
.rate-btn {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 12px 24px;
border-radius: 35px;
font-size: 16px;
font-weight: 700;
transition: all .25s;
order: 4;
margin-top: auto;
width: 100%;
}
.rate-btn-outline {
border: 1px solid var(--c-accent);
color: var(--c-accent);
background: #fff;
}
.rate-btn-outline:hover {
background: var(--c-accent);
color: #fff;
}
.rate-btn-fill {
background: var(--c-accent);
color: #fff;
}
.rate-btn-fill:hover {
background: #c24e26;
color: #fff;
}
/* === Search Results — responsive === */
@media (max-width: 991.98px) {
.result-head-media img {
min-height: 220px;
border-radius: 30px 30px 0 0;
}
.result-head-body {
padding: 28px;
}
.result-rates-toggle {
position: static;
margin-top: 20px;
align-self: flex-start;
}
.room-row {
flex-wrap: wrap;
}
.room-row-head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.room-row-phone {
margin: 0;
}
.room-row-lower {
flex-wrap: wrap;
gap: 20px;
}
.room-row-media {
flex: 1 1 100%;
max-width: 100%;
}
.room-row-media img {
min-height: 200px;
}
.room-row-info {
flex: 1 1 100%;
}
.room-row-details {
flex: 1 1 100%;
}
.room-row-rate {
flex: 1 1 calc(50% - 12px);
align-items: flex-start;
text-align: left;
padding: 16px 0 0;
border-top: 1px solid #e6e9ee;
}
.rate-btn {
margin-top: 16px;
}
}
@media (max-width: 767.98px) {
.search-widget {
flex-direction: column;
align-items: stretch;
border-radius: 24px;
padding: 16px;
gap: 12px;
}
.search-divider {
display: none;
}
.search-field {
padding: 8px 12px;
border: 1px solid #e4e4e4;
border-radius: 12px;
}
.search-submit {
width: 100%;
border-radius: 30px;
margin-left: 0;
}
.ss-trigger {
font-size: 16px;
padding: 6px 10px;
}
.ss-pop {
left: auto;
right: 0;
}
.awards-list {
gap: 32px;
}
.awards-item img {
height: 72px;
}
.result-resort-title {
font-size: 26px;
}
.room-row-title {
font-size: 24px;
}
.room-row-rate {
flex: 1 1 100%;
}
.rate-btn {
width: 100%;
}
}
/* === Cart Page === */
.cart-section {
padding: 32px 0 60px;
}
/* Added to cart confirmation banner */
.cart-confirm {
display: flex;
align-items: center;
gap: 20px;
margin: 20px 0 40px;
}
.cart-confirm-icon {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.cart-confirm-title {
font-size: 28px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 3px;
}
.cart-confirm-sub {
font-size: 16px;
color: var(--c-primary);
margin: 0;
}
.cart-layout {
align-items: flex-start;
}
.cart-details-title {
font-size: 24px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 16px;
}
/* Cart item card */
.cart-item {
display: flex;
align-items: center;
gap: 24px;
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 30px rgba(14, 37, 69, .08);
}
.cart-item-media {
flex: 0 0 300px;
max-width: 300px;
}
.cart-item-media img {
width: 100%;
height: 192px;
object-fit: cover;
border-radius: 12px;
}
.cart-item-body {
flex: 1 1 auto;
min-width: 0;
}
.cart-item-loc {
font-size: 20px;
font-weight: 700;
color: #057fc5;
margin: 0 0 8px;
}
.cart-item-room {
font-size: 16px;
font-weight: 700;
color: #222;
margin: 0 0 14px;
}
.cart-item-date {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
color: var(--c-primary);
margin: 0 0 8px;
}
.cart-item-date:last-child {
margin-bottom: 0;
}
.cart-item-date em {
color: #057fc5;
font-size: 14px;
}
.cart-item-date-label {
font-weight: 400;
}
.cart-item-date-value {
font-weight: 600;
}
/* Order summary card */
.order-summary {
background: #fff;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 30px rgba(14, 37, 69, .08);
}
.order-summary-title {
font-size: 20px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 20px;
padding-bottom: 16px;
border-bottom: 1px solid #0E2545;
}
.order-summary-lines {
margin: 0 0 20px;
}
.order-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
.order-summary-row:last-child {
margin-bottom: 0;
}
.order-summary-row dt {
font-size: 16px;
color: var(--c-primary);
margin: 0;
}
.order-summary-row dd {
font-size: 16px;
font-weight: 600;
color: var(--c-primary);
margin: 0;
}
/* Promo code */
.order-promo {
margin-bottom: 20px;
}
.order-promo-label {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--c-primary);
margin-bottom: 8px;
}
.order-promo-row {
display: flex;
gap: 12px;
}
.order-promo-row input {
flex: 1 1 auto;
min-width: 0;
background: #f8f8f8;
border: 1px solid #e4e4e4;
border-radius: 8px;
padding: 12px 14px;
font-size: 15px;
font-family: 'Poppins', sans-serif;
color: var(--c-primary);
}
.order-promo-row input::placeholder {
color: #9aa1ad;
}
.order-promo-apply {
flex: 0 0 auto;
border: 0;
background: var(--c-primary);
color: #fff;
border-radius: 60px;
padding: 12px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: background .25s;
}
.order-promo-apply:hover {
background: #c14d24;
color: #fff;
}
/* Total + saved */
.order-summary-total {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid #e6e9ee;
}
.order-summary-total-label {
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
}
.order-summary-total-value {
font-size: 28px;
font-weight: 700;
color: var(--c-primary);
}
.order-summary-saved {
display: flex;
align-items: center;
justify-content: space-between;
margin: 8px 0 20px;
font-size: 14px;
font-weight: 700;
color: #057fc5;
}
.order-checkout-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #46a24a;
color: #fff;
border-radius: 60px;
padding: 16px 24px;
font-size: 16px;
font-weight: 700;
transition: background .3s;
}
.order-checkout-btn:hover {
background: #3a8a3e;
color: #fff;
}
/* === Cart Page — responsive === */
@media (max-width: 991.98px) {
.order-summary {
margin-top: 24px;
}
}
@media (max-width: 767.98px) {
.cart-confirm-title {
font-size: 24px;
}
.cart-item {
flex-direction: column;
align-items: stretch;
}
.cart-item-media {
flex: 1 1 100%;
max-width: 100%;
}
.cart-item-media img {
height: 220px;
}
}
/* === Checkout Progress Stepper === */
.checkout-progress {
background: #f8f8f8;
padding: 16px 0;
border-bottom: 1px solid #D5D5D5
}
.checkout-steps {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 800px;
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
}
.checkout-steps::before {
content: "";
position: absolute;
top: 16px;
left: 16px;
right: 16px;
height: 2px;
background: #0E2545;
z-index: 0;
}
.checkout-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: #f8f8f8;
padding: 0 8px;
}
.checkout-step-dot {
width: 32px;
height: 32px;
border-radius: 50%;
background: #909090;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
}
.checkout-step.is-done .checkout-step-dot {
background: #3D8C40;
}
.checkout-step-label {
font-size: 14px;
font-weight: 700;
color: #909090;
white-space: nowrap;
}
.checkout-step.is-done .checkout-step-label {
color: var(--c-primary);
}
/* === Checkout Form === */
.checkout-section {
padding: 32px 0 60px;
}
.checkout-title {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 24px;
}
.checkout-layout {
align-items: flex-start;
}
.checkout-card {
background: #fff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 8px 30px rgba(14, 37, 69, .08);
margin-bottom: 24px;
}
/* === Order complete page === */
.oc-section {
padding: 30px 0 50px;
}
/* success banner + print row */
.oc-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px 24px;
margin: 22px 0 28px;
}
.oc-head .cart-confirm {
flex: 1 1 auto;
margin: 0;
}
.oc-callout {
margin: 10px 0 0;
font-size: 15px;
font-weight: 600;
color: var(--c-primary);
}
.oc-callout a {
color: var(--c-blue);
text-decoration: none;
}
.oc-callout a:hover {
text-decoration: underline;
}
.oc-print {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-top: 6px;
padding: 10px 22px;
background: none;
border: 1px solid #cfd6df;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
color: var(--c-primary);
cursor: pointer;
transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.oc-print:hover {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-white);
}
/* detail blocks inside the card */
.oc-card {
margin-bottom: 0;
}
.oc-block {
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #eef1f5;
}
.oc-block-last {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.oc-col-support {
margin-top: 4px;
}
.oc-block-title {
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 2px solid #eef1f5;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--c-primary);
}
.oc-field {
margin-bottom: 18px;
}
.oc-field:last-child {
margin-bottom: 0;
}
.oc-label {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--c-primary);
}
.oc-value {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--c-gray);
}
.oc-value a {
color: var(--c-blue);
text-decoration: none;
}
.oc-value a:hover {
text-decoration: underline;
}
.oc-summary {
margin: 0;
padding: 0;
}
.oc-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 10px;
font-size: 15px;
color: var(--c-gray);
}
.oc-summary-row dd {
margin: 0;
font-weight: 600;
color: var(--c-primary);
}
.oc-summary-total {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid #cfd6df;
font-weight: 700;
}
.oc-summary-total dt {
color: var(--c-primary);
}
.oc-summary-total dd {
font-size: 17px;
}
.oc-support {
padding: 26px 34px;
background: #f4f7fb;
border: 1px solid #e7eaef;
border-radius: 16px;
margin-top: 30px;
}
.oc-support-title {
margin: 0 0 8px;
font-size: 16px;
font-weight: 700;
color: var(--c-primary);
}
.oc-support-phone {
margin: 0;
font-size: 22px;
font-weight: 800;
}
.oc-support-phone a {
color: var(--c-accent);
text-decoration: none;
}
.oc-support-phone a:hover {
text-decoration: underline;
}
.oc-support-note {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--c-gray);
}
.oc-hours {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--c-gray);
}
.oc-hours strong {
color: var(--c-primary);
}
/* === Need Tickets === */
.oc-tickets {
padding: 20px 0 70px;
}
.oc-tickets-head {
margin-bottom: 34px;
}
.oc-tickets-title {
margin: 0 0 10px;
font-size: 30px;
font-weight: 800;
color: var(--c-primary);
}
.oc-tickets-sub {
margin: 0;
font-size: 16px;
color: var(--c-gray);
}
.oc-ticket-card {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 3 / 2;
}
.oc-ticket-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.oc-ticket-card:hover img {
transform: scale(1.05);
}
.oc-ticket-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 37, 69, .15) 0%, rgba(14, 37, 69, .55) 100%);
}
.oc-ticket-content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 20px;
text-align: center;
}
.oc-ticket-name {
margin: 0;
font-size: 18px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--c-white);
text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.oc-ticket-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 26px;
border: 2px solid var(--c-white);
border-radius: 0;
background: rgba(255, 255, 255, .06);
font-size: 15px;
font-weight: 600;
color: var(--c-white);
text-decoration: none;
transition: background .25s ease, color .25s ease;
}
.oc-ticket-btn:hover {
background: var(--c-white);
color: var(--c-primary);
}
@media (max-width: 767.98px) {
.oc-title {
font-size: 28px;
}
.oc-card {
padding: 24px 18px;
}
.oc-block-title-end {
text-align: left;
}
.oc-support {
text-align: center;
}
}
/* print-only elements are hidden on screen */
.print-only {
display: none;
}
/* === Order complete — print layout (clean boxed receipt) === */
@media print {
@page {
margin: 14mm;
}
/* hide everything that isn't the receipt */
.confirmation-page .header-area,
.confirmation-page #mobile-menu,
.confirmation-page #mobile-menu-overlay,
.confirmation-page .cart-section,
.confirmation-page .checkout-progress,
.confirmation-page .oc-print,
.confirmation-page .oc-tickets,
.confirmation-page .footer-area,
.confirmation-page .skip-link,
.confirmation-page .checkout-summary-item {
display: none !important;
}
html,
body.confirmation-page {
background: #fff !important;
}
.confirmation-page .main-wrapper {
padding-top: 0 !important;
overflow: visible !important;
}
.confirmation-page .oc-section {
padding: 0 !important;
}
.confirmation-page .oc-section .container {
max-width: 100% !important;
padding: 0 !important;
}
/* --- receipt header (logo left, label right) --- */
.confirmation-page .print-only {
display: block;
}
.confirmation-page .print-receipt-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 2px solid var(--c-primary);
}
.print-receipt-head img {
height: 32px;
width: auto;
}
.print-receipt-label {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-gray);
}
/* --- compact confirmation line --- */
.confirmation-page .oc-head {
margin: 0 0 14px;
}
.confirmation-page .cart-confirm {
gap: 12px;
margin: 0;
}
.confirmation-page .cart-confirm-icon {
width: 36px;
height: 36px;
font-size: 15px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.confirmation-page .cart-confirm-title {
font-size: 19px;
margin-bottom: 2px;
}
.confirmation-page .cart-confirm-sub {
font-size: 11.5px;
line-height: 1.5;
margin-bottom: 2px;
}
.confirmation-page .oc-callout {
font-size: 11.5px;
margin-top: 2px;
}
/* --- flatten gradient frames --- */
.confirmation-page .cart-border-wrapper,
.confirmation-page .checkout-border-wrapper,
.confirmation-page .order-summary-border {
background: none !important;
padding: 0 !important;
}
/* --- reflow: details full width (row 1), support + summary side by side (row 2) --- */
.confirmation-page .oc-layout {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 0;
align-items: stretch;
}
.confirmation-page .oc-layout > [class*="col-"] {
padding: 0;
margin: 0;
}
.confirmation-page .oc-col-details {
flex: 0 0 100%;
max-width: 100%;
order: 1 !important;
}
.confirmation-page .oc-col-support {
flex: 0 0 calc(55% - 7px);
max-width: calc(55% - 7px);
margin: 0 !important;
order: 2 !important;
}
.confirmation-page .oc-col-summary {
flex: 0 0 calc(45% - 7px);
max-width: calc(45% - 7px);
order: 3 !important;
}
/* --- details card → single bordered box --- */
.confirmation-page .checkout-card {
box-shadow: none !important;
border: 1px solid #cfd6df !important;
border-radius: 8px;
padding: 14px 18px !important;
margin: 0;
}
/* two-column detail grid, aligned */
.confirmation-page .oc-block .row > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
width: 50%;
}
.confirmation-page .oc-block {
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid #e4e8ee;
}
.confirmation-page .oc-block-last {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.confirmation-page .oc-block-title {
margin-bottom: 9px;
padding-bottom: 5px;
border-bottom-width: 1px;
font-size: 11px;
letter-spacing: 1.2px;
}
.confirmation-page .oc-field {
margin-bottom: 8px;
}
.confirmation-page .oc-label {
margin-bottom: 1px;
font-size: 10.5px;
}
.confirmation-page .oc-value {
font-size: 11.5px;
line-height: 1.4;
color: #333333;
}
.confirmation-page .oc-value a {
color: var(--c-primary);
}
/* support box */
.confirmation-page .oc-support {
height: 100%;
margin: 0;
padding: 12px 16px !important;
background: #f7f9fc !important;
border: 1px solid #cfd6df !important;
border-radius: 8px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.confirmation-page .oc-support .row > [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
width: 50%;
}
.confirmation-page .oc-support-title {
margin-bottom: 3px;
font-size: 11px;
}
.confirmation-page .oc-support-phone {
font-size: 15px;
}
.confirmation-page .oc-support-note {
margin-top: 4px;
font-size: 9.5px;
line-height: 1.4;
}
.confirmation-page .oc-hours {
font-size: 10px;
line-height: 1.5;
}
/* order summary box */
.confirmation-page .order-summary {
box-shadow: none !important;
height: 100%;
margin: 0;
padding: 12px 16px !important;
background: #f5f8fb !important;
border: 1px solid #cfd6df !important;
border-radius: 8px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.confirmation-page .order-summary-title {
margin-bottom: 10px;
padding-bottom: 7px;
font-size: 13px;
}
.confirmation-page .order-summary-row,
.confirmation-page .order-summary-saved {
margin-bottom: 5px;
font-size: 12px;
}
.confirmation-page .order-summary-total {
margin-top: 4px;
padding-top: 8px;
font-size: 12.5px;
}
.confirmation-page .order-summary-total-value {
font-size: 16px;
}
/* keep atomic units together */
.confirmation-page .cart-confirm,
.confirmation-page .oc-field,
.confirmation-page .oc-block,
.confirmation-page .order-summary,
.confirmation-page .oc-support,
.confirmation-page .order-summary-row,
.confirmation-page .order-summary-total {
break-inside: avoid;
}
.confirmation-page .oc-block-title,
.confirmation-page .order-summary-title {
break-after: avoid;
}
}
.checkout-field {
display: flex;
flex-direction: column;
}
.checkout-field label {
font-size: 14px;
font-weight: 600;
color: var(--c-primary);
margin-bottom: 6px;
}
.checkout-field input {
width: 100%;
padding: 12px 14px;
border: 1px solid #c4c9d2;
border-radius: 8px;
font-size: 15px;
font-family: 'Poppins', sans-serif;
color: var(--c-primary);
background: #F8F8F8;
}
.checkout-field input::placeholder {
color: #9aa1ad;
}
.checkout-field input:focus {
outline: none;
border-color: var(--c-accent);
}
/* Selects share the text-input look on the checkout/payment forms */
.checkout-field select {
width: 100%;
padding: 12px 14px;
border: 1px solid #c4c9d2;
border-radius: 8px;
font-size: 15px;
font-family: 'Poppins', sans-serif;
color: var(--c-primary);
background: #F8F8F8;
}
.checkout-field select:focus {
outline: none;
border-color: var(--c-accent);
}
/* Tokenizer card-entry widget mount point */
.checkout-card-element {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid #c4c9d2;
border-radius: 8px;
background: #F8F8F8;
display: flex;
align-items: center;
color: #9aa1ad;
font-size: 15px;
}
.checkout-secure-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 10px 0 0;
font-size: 13px;
line-height: 1.6;
color: #46a24a;
}
.checkout-secure-note em {
margin-top: 3px;
}
/* Inline step-form error banner */
.checkout-form-error {
margin-bottom: 16px;
padding: 12px 16px;
border: 1px solid #e2b4b4;
border-radius: 8px;
background: #fbeaea;
color: #b02a37;
font-size: 14px;
}
/* Phone with country prefix */
.checkout-phone {
display: flex;
align-items: stretch;
border: 1px solid #c4c9d2;
border-radius: 8px;
overflow: hidden;
}
.checkout-phone-prefix {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0 14px;
background: #f8f8f8;
border-right: 1px solid #c4c9d2;
font-size: 15px;
color: var(--c-primary);
white-space: nowrap;
}
.checkout-phone input {
border: 0;
border-radius: 0;
flex: 1 1 auto;
}
/* Consent checkboxes */
.checkout-consent {
display: flex;
gap: 12px;
margin-top: 20px;
}
.checkout-consent input {
flex: 0 0 auto;
margin-top: 3px;
width: 18px;
height: 18px;
}
.checkout-consent label {
font-size: 13px;
line-height: 1.6;
color: #6d6d6d;
}
.checkout-consent a {
color: #057fc5;
font-weight: 600;
}
.checkout-consent a:hover {
text-decoration: underline;
color: var(--c-accent);
}
/* Continue button */
.checkout-continue-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #46a24a;
color: #fff;
border: 0;
border-radius: 60px;
padding: 16px 48px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
font-family: 'Poppins', sans-serif;
transition: background .3s;
margin-top: 30px
}
.checkout-continue-btn:hover {
background: #3a8a3e;
}
/* Order summary cart item (checkout variant) */
.checkout-summary-item {
display: flex;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #e6e9ee;
}
.checkout-summary-media {
flex: 0 0 110px;
max-width: 110px;
}
.checkout-summary-media img {
width: 100%;
height: 110px;
object-fit: cover;
border-radius: 12px;
}
.checkout-summary-body {
flex: 1 1 auto;
min-width: 0;
}
.checkout-summary-body .cart-item-loc {
font-size: 16px;
margin-bottom: 4px;
}
.checkout-summary-body .cart-item-room {
font-size: 14px;
margin-bottom: 10px;
}
.checkout-summary-body .cart-item-date {
font-size: 13px;
margin-bottom: 4px;
}
/* === Checkout — responsive === */
@media (max-width: 991.98px) {
.order-summary {
margin-top: 24px;
}
}
@media (max-width: 767.98px) {
.checkout-title {
font-size: 26px;
}
.checkout-card {
padding: 24px;
}
.checkout-continue-btn {
width: 100%;
}
.checkout-step-label {
font-size: 12px;
}
}
/* === Payment — active stepper state === */
.checkout-step.is-active .checkout-step-dot {
background: var(--c-primary);
}
.checkout-step.is-active .checkout-step-label {
color: var(--c-primary);
}
/* === Promotion qualifications banner === */
.qualify-banner {
background: var(--c-primary);
color: #fff;
border-radius: 20px;
padding: 28px 32px;
margin: 8px 0 32px;
}
.qualify-banner-title {
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0 0 16px;
}
.qualify-list {
list-style: none;
margin: 0;
padding: 0;
}
.qualify-list li {
display: block;
padding-left: 30px;
position: relative;
font-size: 15px;
color: #fff;
margin-bottom: 8px;
}
.qualify-list li:last-child {
margin-bottom: 0;
}
.qualify-list li em {
flex: 0 0 auto;
margin-top: 3px;
font-size: 13px;
color: #46a24a;
}
.qualify-banner-note {
font-size: 14px;
color: rgba(255, 255, 255, .75);
margin: 16px 0 0;
}
@media (max-width: 767.98px) {
.qualify-banner {
padding: 24px;
}
}
/* === Payment — input icon, tooltip, validation, submit === */
.checkout-input-icon {
position: relative;
}
.checkout-input-icon-left {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9aa1ad;
font-size: 16px;
pointer-events: none;
}
.checkout-input-icon input {
padding-left: 42px;
}
/* CVV tooltip */
.checkout-tooltip {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 6px;
color: #9aa1ad;
cursor: help;
font-size: 13px;
}
.checkout-tooltip-bubble {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 240px;
background: var(--c-primary);
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
padding: 10px 12px;
border-radius: 8px;
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
z-index: 20;
box-shadow: 0 8px 20px rgba(14, 37, 69, .2);
}
.checkout-tooltip-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--c-primary);
}
.checkout-tooltip:hover .checkout-tooltip-bubble,
.checkout-tooltip:focus .checkout-tooltip-bubble,
.checkout-tooltip:focus-within .checkout-tooltip-bubble {
opacity: 1;
visibility: visible;
}
/* Validation error state */
.checkout-field-error {
display: block;
margin-top: 6px;
font-size: 13px;
color: #d9534f;
}
.checkout-field input.is-invalid,
.checkout-input-icon input.is-invalid {
border-color: #d9534f;
}
.checkout-field input.is-valid,
.checkout-input-icon input.is-valid {
border-color: #46a24a;
}
/* Submit button inside the card */
.checkout-submit-btn {
width: 100%;
margin-top: 24px;
}
/*Custom CSS*/
.blog-breadcrumb li img {
height: 15px;
}
.category-tab img {
display: none
}
.book-banner-mobile {
display: none
}
.single-hero-area .share-toggle {
display: none;
}
.single-hero-area .share-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.cart-layout {
padding: 0 40px
}
.cart-details-title {
margin-bottom: 0
}
.cart-border-wrapper {
padding: 1px;
background: linear-gradient(-190deg, rgba(20, 172, 249, 0.58) 0%, rgb(0 0 0 / 16%) 100%);
border-radius: 16px;
}
.checkout-border-wrapper {
padding: 1px;
background: linear-gradient(0deg, rgba(20, 172, 249, 0.58) 0%, rgb(0 0 0 / 16%) 100%);
border-radius: 16px;
}
.checkout-border-wrapper .checkout-card {
margin-bottom: 0
}
.consent-wrapper {
margin-top: 50px;
margin-bottom: 30px
}
.booking-field input {
padding-left: 35px
}
.qualify-list {
column-count: 2;
margin-bottom: 10px;
padding-left: 15px;
}
.qualify-list li::before {
position: absolute;
content: "";
top: 8px;
left: 0;
width: 15px;
height: 12px;
background: url('data:image/svg+xml,') no-repeat scroll 0 0/cover;
}
.default-section-heading {
margin-bottom: 40px
}
.bg_gray {
background: #f8f8f8
}
.gallery-box {
overflow: hidden;
border-radius: 12px;
}
.gallery-box img {
width: 100%;
display: block;
transition: transform .4s ease;
}
.gallery-box:hover img {
transform: scale(1.05);
}
.content-video-box {
position: relative;
z-index: 1
}
.play_btn,
.play_btn_video_gallery {
position: absolute;
content: "";
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-primary);
color: #fff;
font-size: 22px
}
.play_btn:hover,
.play_btn_video_gallery:hover {
background: var(--c-accent);
color: #fff
}
.play_btn_video_gallery {
width: 60px;
height: 60px
}
.glightbox_video {
position: relative;
z-index: 1
}
.related-links li {
margin-right: 10px;
margin-top: 15px;
display: inline-block
}
.related-links li a {
color: #0e2545;
display: block
}
.related-links ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center
}
.header-area {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background: #fff;
transition: all 0.4s
}
.header-area.is-scrolled {
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.25)
}
.footer-subscribe form input {
width: 100%;
padding: 12px 20px;
border: 1px solid #d5d5d5;
background: #fff;
color: var(--c-primary);
font-size: 16px;
border-radius: 30px
}
.footer-subscribe form button {
border: 0;
background: var(--c-accent);
color: #fdfdfd;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
padding: 14px 30px;
border-radius: 50px;
cursor: pointer;
transition: background 0.3s;
width: 100%;
margin-top: 15px
}
.footer-subscribe form button:hover {
background: #c54b1f;
color: #fff;
}
.section-action {
margin-top: 30px
}
/* === Newsletter modal (Join our mailing list) — brand redesign === */
.newsletter-modal {
border: 0;
border-radius: 20px;
overflow: hidden;
background: var(--c-white);
box-shadow: 0 30px 70px rgba(14, 37, 69, .35);
position: relative;
}
/* brand accent bar across the top */
.newsletter-modal::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-blue) 55%, var(--c-accent) 100%);
z-index: 2;
}
.newsletter-modal .modal-body {
padding: 46px 40px 40px;
text-align: center;
}
.newsletter-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
width: 34px;
height: 34px;
border-radius: 50%;
opacity: 1;
background-color: rgba(14, 37, 69, .06);
background-size: 12px;
transition: background-color .25s ease;
}
.newsletter-close:hover,
.newsletter-close:focus {
background-color: rgba(217, 93, 49, .16);
}
/* circular navy icon badge */
.newsletter-icon {
width: 76px;
height: 76px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary), #16375f);
box-shadow: 0 12px 26px rgba(14, 37, 69, .28);
}
.newsletter-icon i,
.newsletter-icon em {
font-size: 32px;
color: var(--c-white);
}
.newsletter-modal .section-title {
font-size: 26px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .4px;
color: var(--c-primary);
text-transform: uppercase;
margin: 0 0 10px;
}
.newsletter-modal .subtitle {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
color: var(--c-accent);
text-transform: uppercase;
}
.newsletter-modal .section-sub-title {
font-size: 22px;
font-weight: 800;
line-height: 1.25;
color: var(--c-primary);
margin: 0 0 28px;
text-transform: uppercase;
}
.newsletter-modal .form-label {
display: block;
font-size: 12px;
letter-spacing: 2px;
margin-bottom: 8px;
font-weight: 700;
text-transform: uppercase;
color: var(--c-primary);
text-align: left;
}
.newsletter-modal .form-control {
height: 56px;
border: 1px solid #dfe4ea;
border-radius: 10px;
padding: 0 18px;
font-size: 16px;
color: var(--c-primary);
box-shadow: none;
transition: border-color .25s ease, box-shadow .25s ease;
}
.newsletter-modal .form-control::placeholder {
color: #9aa2ae;
}
.newsletter-modal .form-control:focus {
border-color: var(--c-blue);
box-shadow: 0 0 0 3px rgba(6, 147, 227, .15);
}
.subscribe-btn {
width: 100%;
height: 58px;
margin-top: 4px;
background: var(--c-accent);
color: #fff;
border: 0;
font-size: 16px;
font-weight: 700;
letter-spacing: .3px;
border-radius: 10px;
transition: background .3s ease, box-shadow .3s ease;
}
.subscribe-btn:hover,
.subscribe-btn:focus {
background: #c04d24;
color: #fff;
box-shadow: 0 12px 26px rgba(217, 93, 49, .32);
}
.page-banner {
color: #fff;
background: var(--c-primary);
padding-top: 20px
}
.page-banner .heading {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
color: #fff
}
.page-banner .blog-breadcrumb {
padding-bottom: 20px
}
.page-banner .blog-breadcrumb li {
color: #fff
}
.page-banner .blog-breadcrumb li:not(:last-child)::before {
content: "/";
font-weight: 900;
font-size: 11px;
color: #fff;
margin-right: 2px;
position: absolute;
right: 0;
}
.page-banner .blog-breadcrumb li a {
color: #fff
}
.page-banner .blog-breadcrumb li img {
filter: invert(1)
}
.stats-box {
padding: 30px;
background: var(--c-primary);
color: #fff;
border-radius: 20px
}
.stats-box .stats-num {
color: #fff;
margin: 5px 0;
font-weight: 700;
font-size: 30px
}
.stats-box .icon {
width: 75px;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff0f;
font-size: 22px;
margin: 0 auto 20px;
transition: all 0.4s
}
.stats-box:hover .icon {
background: var(--c-accent)
}
.icon-teaser.style1 {
padding: 30px;
background: var(--c-primary);
color: #fff;
border-radius: 20px;
height: 100%;
font-size: 14px
}
.icon-teaser.style1 .icon {
font-size: 30px;
margin: 0 0 20px;
}
.icon-teaser.style1 .title {
color: #fff;
font-weight: 700;
font-size: 22px;
}
.testimonial-slider .slide {
padding: 0 15px
}
.testimonial-slider .slick-list {
margin-left: -15px;
margin-right: -15px
}
.custom-arrow {
display: flex;
align-items: center;
justify-content: flex-end
}
.custom-arrow .custom_arrow {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
border-radius: 50%;
border: 1px solid var(--c-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: 15px;
transition: all 0.3s
}
.custom-arrow .custom_arrow:first-child {
margin-left: 0
}
.custom-arrow .custom_arrow:hover {
background: var(--c-primary);
color: #fff
}
.custom-arrow.center {
justify-content: center;
margin-top: 30px
}
.review-card.video-review {
gap: 18px;
padding: 25px
}
.review-card.video-review .glightbox_video {
overflow: hidden;
border-radius: 20px;
}
.icon-teaser.style2 {
display: flex;
align-items: center;
justify-content: center
}
.icon-teaser.style2 .icon {
font-size: 28px;
margin-right: 22px
}
.icon-teaser.style2 .title {
font-size: 16px;
margin: 0;
font-weight: 700;
margin-bottom: 1px;
transition: all 0.4s
}
.icon-teaser.style2 .text {
text-align: left;
font-size: 15px;
line-height: normal
}
.icon-teaser-border-wrapper {
padding: 30px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.icon-teaser-border-wrapper .col-sm-4:not(:last-child) {
border-right: 1px solid #ccc;
}
.icon-teaser.style2:hover {
color: var(--c-accent)
}
.icon-teaser.style2:hover .title {
color: var(--c-accent)
}
.half-call-to-action {
position: relative;
background: var(--c-primary);
color: #fff;
z-index: 1
}
.half-call-to-action .half_bg {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.half-call-to-action .half_bg img {
width: 100%;
height: 100%;
object-fit: cover
}
.half-call-to-action .half_bg::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(14, 37, 69, 0) 0%, rgba(14, 37, 69, 1) 100%)
}
.resort-card.alt {
border-radius: 15px
}
.resort-card.alt .resort-card-body {
padding: 15px
}
.resort-card.alt .resort-card-title {
font-size: 18px;
margin: 0;
}
.resort-card.alt img {
transition: all 0.4s;
border-radius: 0
}
.resort-card.alt:hover img {
transform: scale(1.1)
}
.resort-card.alt .resort-card-media {
overflow: hidden
}
.resort-card.style2 .resort-card-title {
font-size: 18px
}
.icon-teaser.style2.no-hover {
padding: 0 50px
}
.icon-teaser.style2.no-hover:hover {
color: inherit
}
.icon-teaser.style2.no-hover .icon {
color: var(--c-blue)
}
.process-box {
padding: 0 40px;
position: relative;
z-index: 1
}
.process-box::after {
position: absolute;
content: "";
top: 30px;
right: -50%;
width: 100%;
height: 2px;
background: var(--c-primary);
z-index: -1;
}
.col-sm-4:last-child .process-box::after {
display: none
}
.process-box .title {
font-size: 24px;
font-weight: 700
}
.process-box .number {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 auto 20px;
background: var(--c-primary);
color: #fff;
font-size: 22px;
font-weight: 700;
}
.c_form {
padding: 40px;
border-radius: 25px;
background: var(--c-primary);
}
.c_form .form_heading {
color: #fff;
font-size: 26px;
font-weight: 700;
text-align: center;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #ffffff52;
text-transform: capitalize
}
.c_form ul {
list-style: none;
margin: 0;
padding: 0
}
.c_form ul li {
margin-bottom: 15px
}
.c_form label {
color: #fff;
display: block;
margin-bottom: 5px
}
.c_form input {
width: 100%;
height: 60px;
border: none;
background: transparent;
padding: 10px 20px;
background: #fff;
border-radius: 50px
}
.c_form .form-concent label {
display: inline
}
.form-concent {
display: flex;
font-size: 12px;
line-height: normal;
}
.form-concent input {
padding: 0;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin-right: 10px;
position: relative;
top: 5px;
}
.c_form .lg_btn {
width: 100%
}
/* === Itinerary block Google Map === */
.itin-map .itin-gmap {
width: 100%;
height: 100%;
min-height: 820px;
border-radius: 30px;
}
.itin-mobile-map .itin-gmap {
position: absolute;
inset: 0;
height: 100%;
min-height: 0;
border-radius: 0;
}
/* === Blog pagination (wp_paginate markup styled like the design) === */
.paginations {
margin-top: 100px;
}
.paginations ul {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.paginations ul li a.page,
.paginations ul li span.current,
.paginations ul li a.prev,
.paginations ul li a.next {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 32px;
background: #fff;
border: 1px solid #f1f1f1;
font-size: 13px;
font-weight: 600;
color: #333;
transition: all 0.2s;
}
.paginations ul li a.prev,
.paginations ul li a.next {
font-size: 12px;
}
.paginations ul li a.page:hover,
.paginations ul li a.prev:hover,
.paginations ul li a.next:hover {
background: #e8f3fb;
color: #0e2545;
}
.paginations ul li span.current {
background: #0693e3;
border-color: #0693e3;
color: #fff;
}
.paginations ul li span.gap {
padding: 0 4px;
font-size: 13px;
font-weight: 600;
color: #333;
}
@media (max-width: 767.98px) {
.paginations {
margin-top: 50px;
}
.paginations ul {
gap: 4px;
flex-wrap: wrap;
}
}
/* === Blog categories post filter === */
.blog-pill.is-active {
background: #0e2545;
border-color: #0e2545;
color: #fff
}
.categories-area .blog-cat-more {
margin-top: 44px;
}
.blog-load-more {
font-family: inherit;
cursor: pointer;
}
/* === Blog newsletter Gravity Form === */
.newsletter-form .gform_wrapper .gform_required_legend {
display: none
}
.newsletter-form .gform_wrapper .gform_fields {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 18px;
padding: 0;
list-style: none
}
.newsletter-form .gform_wrapper .gfield_label {
display: none
}
.newsletter-form .gform_wrapper input[type="text"],
.newsletter-form .gform_wrapper input[type="email"],
.newsletter-form .gform_wrapper input[type="tel"] {
width: 270px;
max-width: 100%;
height: 50px;
padding: 0 18px;
background: #f8f8f8;
border: 0;
border-radius: 24px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #333
}
.newsletter-form .gform_wrapper input[type="text"]::placeholder,
.newsletter-form .gform_wrapper input[type="email"]::placeholder,
.newsletter-form .gform_wrapper input[type="tel"]::placeholder {
color: #878787
}
.newsletter-form .gform_wrapper .gfield_validation_message,
.newsletter-form .gform_wrapper .validation_message {
color: #ffb4a2;
font-size: 12px;
margin-top: 5px
}
.newsletter-form .gform_wrapper .gform_footer button,
.newsletter-form .gform_wrapper .gform_footer input[type="submit"] {
min-width: 270px;
height: 50px;
background: transparent;
border: 2px solid #fdfdfd;
border-radius: 24px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 700;
color: #fdfdfd;
cursor: pointer;
text-transform: capitalize;
text-shadow: 0 2px 8.7px rgba(0, 0, 0, 0.44);
transition: all 0.25s
}
.newsletter-form .gform_wrapper .gform_footer button:hover,
.newsletter-form .gform_wrapper .gform_footer input[type="submit"]:hover {
background: #fdfdfd;
color: #0e2545;
text-shadow: none
}
/* === Gravity Form block === */
.c_form .gform_wrapper .gform_required_legend {
display: none
}
.c_form .gform_wrapper .gform_fields {
margin: 0;
padding: 0;
list-style: none
}
.c_form .gform_wrapper .gfield {
margin-bottom: 15px
}
.c_form .gform_wrapper .gfield_label {
color: #fff;
display: block;
margin-bottom: 5px;
font-size: inherit;
font-weight: 400
}
.c_form .gform_wrapper .gfield_required {
display: none
}
.c_form .gform_wrapper input[type="text"],
.c_form .gform_wrapper input[type="tel"],
.c_form .gform_wrapper input[type="email"] {
width: 100%;
height: 60px;
border: none;
padding: 10px 20px;
background: #fff;
border-radius: 50px
}
.c_form .gform_wrapper .gfield--type-checkbox .gfield_label {
display: none
}
.c_form .gform_wrapper .ginput_container_checkbox .gchoice {
display: flex;
font-size: 12px;
line-height: normal
}
.c_form .gform_wrapper .ginput_container_checkbox input[type="checkbox"] {
padding: 0;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin-right: 10px;
position: relative;
top: 5px
}
.c_form .gform_wrapper .ginput_container_checkbox label {
display: inline;
color: #fff;
margin: 0
}
.c_form .gform_wrapper .gfield_validation_message,
.c_form .gform_wrapper .validation_message {
color: #ffb4a2;
font-size: 12px;
margin-top: 5px
}
.c_form .gform_wrapper .gform_footer {
margin-top: 20px
}
.c_form .gform_wrapper .gform_footer button,
.c_form .gform_wrapper .gform_footer input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
padding: 16px 30px;
border: 2px solid transparent;
border-radius: 30px;
background: var(--c-accent);
color: #fff;
cursor: pointer;
text-transform: capitalize;
letter-spacing: normal;
transition: all 0.4s
}
.c_form .gform_wrapper .gform_footer button:hover,
.c_form .gform_wrapper .gform_footer input[type="submit"]:hover {
background: #c54b1f;
color: #fff
}
/* =================================================================
=== Contact Page ===
================================================================= */
/* === Contact intro === */
.contact-intro-area {
padding: 36px 0 30px;
}
.contact-intro-inner {
max-width: 820px;
}
.contact-eyebrow {
font-size: 14px;
font-weight: 700;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--c-accent);
margin: 0 0 10px;
}
.contact-intro-title {
font-size: 44px;
font-weight: 700;
line-height: 1.15;
color: var(--c-primary);
margin: 0 0 16px;
}
.contact-intro-text {
font-size: 20px;
line-height: 1.5;
color: #46546b;
margin: 0;
}
/* === Contact channel cards === */
.contact-channels-area {
padding: 10px 0 0;
}
.contact-card {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
background: #fff;
border: 1px solid #e4e8ef;
border-radius: 16px;
padding: 32px 28px;
box-shadow: 0 8px 30px rgba(14, 37, 69, .06);
transition: transform .3s, box-shadow .3s, border-color .3s;
}
.contact-card:hover {
transform: translateY(-4px);
border-color: #d7e5f7;
box-shadow: 0 18px 44px rgba(14, 37, 69, .12);
}
.contact-card_featured {
border-color: var(--c-accent);
}
.contact-card-tag {
position: absolute;
top: -13px;
left: 28px;
display: inline-block;
padding: 4px 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: .6px;
text-transform: uppercase;
color: #fff;
background: var(--c-accent);
border-radius: 30px;
}
.contact-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: 20px;
border-radius: 50%;
background: #eaf1fa;
color: var(--c-primary);
font-size: 22px;
}
.contact-card_featured .contact-card-icon {
background: rgba(217, 93, 49, .12);
color: var(--c-accent);
}
.contact-card-label {
font-size: 18px;
font-weight: 600;
color: #6d6d6d;
margin: 0 0 6px;
}
.contact-card-phone {
display: inline-block;
font-size: 28px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin-bottom: 12px;
white-space: nowrap;
}
.contact-card-phone:hover,
.contact-card-phone:focus {
color: var(--c-accent);
}
.contact-card-note {
font-size: 15px;
line-height: 1.6;
color: #6d6d6d;
margin: 0 0 24px;
}
.contact-card .contact-chat {
margin-top: auto;
cursor: pointer;
background: transparent;
}
.contact-card .contact-chat em {
margin: 0 8px 0 0;
font-size: 14px;
}
.contact-card .contact-chat:hover {
color: #fff;
background: var(--c-primary);
}
/* === International strip === */
.contact-intl {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 24px;
margin-top: 16px;
padding: 28px 36px;
border-radius: 16px;
background: var(--c-primary);
color: #fff;
}
.contact-intl-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
font-size: 22px;
}
.contact-intl-text {
flex: 1 1 320px;
}
.contact-intl-title {
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 4px;
}
.contact-intl-sub {
font-size: 15px;
line-height: 1.5;
color: rgba(255, 255, 255, .72);
margin: 0;
}
.contact-intl-phone {
flex: 0 0 auto;
display: inline-flex;
flex-direction: column;
padding: 12px 26px;
border-radius: 12px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
color: #fff;
}
.contact-intl-phone:hover,
.contact-intl-phone:focus {
background: var(--c-accent);
border-color: var(--c-accent);
color: #fff;
}
.contact-intl-phone-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, .7);
}
.contact-intl-phone:hover .contact-intl-phone-label {
color: rgba(255, 255, 255, .85);
}
.contact-intl-phone-number {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
}
/* === Hours of operation === */
.contact-hours-area {
padding: 70px 0 40px;
}
.contact-hours {
background: #fff;
border: 1px solid #e4e8ef;
border-radius: 16px;
padding: 40px;
box-shadow: 0 8px 30px rgba(14, 37, 69, .06);
}
.contact-hours-head {
text-align: center;
max-width: 640px;
margin: 0 auto 32px;
padding-bottom: 24px;
border-bottom: 1px solid #e4e8ef;
}
.contact-hours-title {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 6px;
}
.contact-hours-sub {
font-size: 15px;
color: #6d6d6d;
margin: 0;
}
.contact-hours-col {
height: 100%;
padding: 0 28px;
border-right: 1px solid #e4e8ef;
}
.contact-hours-col_last {
border-right: 0;
}
.contact-hours-col-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 18px;
}
.contact-hours-col-title em {
color: var(--c-accent);
font-size: 16px;
}
.contact-hours-list {
margin: 0;
}
.contact-hours-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px dashed #e9edf3;
}
.contact-hours-row:last-child {
border-bottom: 0;
}
.contact-hours-row dt {
font-size: 15px;
font-weight: 600;
color: var(--c-primary);
}
.contact-hours-row dd {
margin: 0;
font-size: 15px;
color: #46546b;
text-align: right;
white-space: nowrap;
}
.contact-hours-row dd.is-closed {
color: #b0331c;
font-weight: 600;
}
/* === Contact form + aside === */
.contact-form-area {
padding: 40px 0 80px;
}
.contact-form-card {
background: #fff;
border: 1px solid #e4e8ef;
border-radius: 16px;
padding: 40px;
box-shadow: 0 8px 30px rgba(14, 37, 69, .06);
}
.contact-form-title {
font-size: 32px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 8px;
}
.contact-form-sub {
font-size: 16px;
line-height: 1.6;
color: #6d6d6d;
margin: 0 0 28px;
}
.contact-field {
display: flex;
flex-direction: column;
}
.contact-field label {
font-size: 14px;
font-weight: 600;
color: var(--c-primary);
margin-bottom: 6px;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #c4c9d2;
border-radius: 8px;
font-size: 15px;
font-family: 'Poppins', sans-serif;
color: var(--c-primary);
background: #f8f8f8;
}
.contact-field textarea {
resize: vertical;
min-height: 130px;
line-height: 1.6;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: #9aa1ad;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
outline: none;
border-color: var(--c-accent);
}
.contact-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 6px 0 6px;
}
.contact-consent input {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 3px;
accent-color: var(--c-accent);
}
.contact-consent label {
font-size: 14px;
line-height: 1.6;
color: #46546b;
margin: 0;
}
.contact-submit {
cursor: pointer;
width: 100%;
max-width: 260px;
}
.contact-submit em {
font-size: 13px;
}
/* Aside */
.contact-aside {
position: relative;
overflow: hidden;
height: 100%;
background: #eaf1fa;
border-radius: 16px;
padding: 40px 36px;
}
.contact-aside-shape {
position: absolute;
right: -70px;
bottom: -110px;
width: 240px;
opacity: .25;
pointer-events: none;
}
.contact-aside-title {
position: relative;
z-index: 1;
font-size: 26px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 26px;
}
.contact-aside-list {
position: relative;
z-index: 1;
list-style: none;
margin: 0 0 32px;
padding: 0;
}
.contact-aside-list li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 0 0 22px;
margin-bottom: 22px;
border-bottom: 1px solid #d5e0ee;
}
.contact-aside-list li:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.contact-aside-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
color: var(--c-accent);
font-size: 17px;
}
.contact-aside-item-title {
font-size: 17px;
font-weight: 600;
color: var(--c-primary);
margin: 0 0 4px;
}
.contact-aside-list p {
font-size: 14px;
line-height: 1.6;
color: #46546b;
margin: 0 0 8px;
}
.contact-aside-link {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: var(--c-blue);
}
.contact-aside-link em {
font-size: 11px;
transition: transform .3s;
}
.contact-aside-link:hover,
.contact-aside-link:focus {
color: var(--c-accent);
}
.contact-aside-link:hover em {
transform: translateX(3px);
}
.contact-aside-call {
position: relative;
z-index: 1;
padding: 22px 26px;
border-radius: 12px;
background: var(--c-primary);
}
.contact-aside-call-label {
font-size: 14px;
color: rgba(255, 255, 255, .7);
margin: 0 0 4px;
}
.contact-aside-call-phone {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 24px;
font-weight: 700;
color: #fff;
}
.contact-aside-call-phone em {
font-size: 16px;
color: var(--c-accent);
}
.contact-aside-call-phone span {
transition: all 0.4s;
}
.contact-aside-call-phone:hover span {
color: var(--c-accent);
text-decoration: underline;
}
/* === Contact page responsive === */
@media (max-width: 1199px) {
.contact-hours-col {
padding: 0 18px;
}
.contact-card-phone {
font-size: 25px;
}
}
@media (max-width: 991px) {
.contact-intro-title {
font-size: 36px;
}
.contact-intro-text {
font-size: 18px;
}
.contact-hours {
padding: 32px 24px;
}
.contact-hours-col,
.contact-hours-col_last {
padding: 0;
border-right: 0;
border-bottom: 1px solid #e4e8ef;
padding-bottom: 20px;
}
.contact-hours-col_last {
border-bottom: 0;
padding-bottom: 0;
}
.contact-form-card,
.contact-aside {
padding: 32px 24px;
}
.contact-hours-area {
padding: 50px 0 30px;
}
.contact-form-area {
padding: 30px 0 60px;
}
}
@media (max-width: 767px) {
.contact-intro-area {
padding: 24px 0 20px;
}
.contact-intro-title {
font-size: 30px;
}
.contact-card {
padding: 28px 22px;
}
.contact-intl {
padding: 24px;
gap: 18px;
}
.contact-intl-phone {
width: 100%;
align-items: center;
text-align: center;
}
.contact-hours-title {
font-size: 26px;
}
.contact-form-title {
font-size: 26px;
}
.contact-submit {
max-width: 100%;
}
}
@media (max-width: 575px) {
.contact-card-phone {
font-size: 24px;
}
.contact-card .contact-chat {
width: 100%;
}
.contact-hours-row {
flex-wrap: wrap;
gap: 2px;
}
.contact-hours-row dd {
text-align: left;
}
.contact-aside-call-phone {
font-size: 21px;
}
}
/* --- Listing shell --- */
.tickets-listing {
padding: 44px 0 56px;
}
/* --- Destination filter --- */
.tickets-filter {
margin-bottom: 28px;
}
.tickets-filter-label {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--c-gray);
margin: 0 0 12px;
}
.tickets-filter-btns {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tickets-filter-btn {
border: 1px solid #d3d8e0;
background: #fff;
color: var(--c-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
padding: 9px 20px;
border-radius: 30px;
cursor: pointer;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.tickets-filter-btn:hover {
border-color: var(--c-blue);
color: var(--c-blue);
}
.tickets-filter-btn.is-active {
background: var(--c-blue);
border-color: var(--c-blue);
color: #fff;
}
/* --- Group --- */
.tickets-group {
margin-bottom: 40px;
}
.tickets-group:last-child {
margin-bottom: 0;
}
.tickets-group.is-hidden {
display: none;
}
.tickets-group-title {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid #e2e6ec;
}
/* --- List rows --- */
.tickets-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.ticket-row {
display: flex;
align-items: center;
gap: 22px;
background: #fff;
border: 1px solid #e2e6ec;
border-radius: 14px;
padding: 18px 22px;
transition: box-shadow 0.25s, border-color 0.25s;
}
.ticket-row:hover {
box-shadow: 0 6px 18px rgba(14, 37, 69, 0.08);
border-color: #d3d8e0;
}
/* Bundle rows get a highlighted accent */
.ticket-row-bundle {
border-color: var(--c-blue);
border-width: 1.5px;
background: #f7fbff;
}
.ticket-row-logo,
.ticket-row-media {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.ticket-row-logo {
width: 140px;
height: 82px;
background: #f7f9fc;
border: 1px solid #eef1f5;
border-radius: 8px;
}
.ticket-row-logo img {
width: auto;
max-width: 84%;
max-height: 60px;
object-fit: contain;
}
.ticket-row-media {
width: 140px;
height: 112px;
border-radius: 8px;
overflow: hidden;
}
.ticket-row-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ticket-row-body {
flex: 1 1 auto;
min-width: 0;
}
.ticket-row-title {
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: var(--c-primary);
margin: 0 0 4px;
}
.ticket-row-sub {
font-size: 14px;
line-height: 1.5;
color: var(--c-gray);
margin: 0 0 8px;
}
.ticket-row-features {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.ticket-row-features li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 14px;
line-height: 1.45;
color: var(--c-primary);
}
.ticket-row-features em {
color: var(--c-blue);
font-size: 14px;
margin-top: 3px;
flex: 0 0 auto;
}
.ticket-row-meta {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 4px;
}
.ticket-row-qty {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--c-primary);
}
.ticket-price {
font-size: 24px;
font-weight: 700;
line-height: 1;
color: var(--c-accent);
}
.ticket-price-unit {
font-size: 14px;
font-weight: 400;
color: var(--c-gray);
}
.ticket-row-links {
font-size: 13px;
line-height: 1.4;
color: var(--c-gray);
margin: 0;
}
.ticket-row-links a {
color: var(--c-blue);
font-weight: 500;
}
.ticket-row-links a:hover {
text-decoration: underline;
}
.ticket-row-links span[aria-hidden="true"] {
color: #c1c7d0;
margin: 0 4px;
}
/* "Preview Rate" — plain, non-interactive label */
.ticket-row-preview {
color: var(--c-gray);
font-weight: 500;
}
/* "Details" — text button that opens the preview modal */
.ticket-row-details {
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--c-blue);
font-weight: 500;
cursor: pointer;
}
.ticket-row-details:hover {
text-decoration: underline;
}
.ticket-row-details:focus-visible {
outline: 2px solid var(--c-blue);
outline-offset: 2px;
border-radius: 2px;
}
/* === Resort Preview Rate modal === */
.preview-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.preview-modal[hidden] {
display: none;
}
body.preview-modal-open {
overflow: hidden;
}
.preview-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(14, 37, 69, 0.55);
backdrop-filter: blur(2px);
animation: preview-fade 0.2s ease;
}
.preview-modal-dialog {
position: relative;
width: 100%;
max-width: 560px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: var(--c-white);
border-radius: 14px;
padding: 40px 44px 36px;
box-shadow: 0 24px 60px rgba(14, 37, 69, 0.25);
animation: preview-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.preview-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e6ec;
border-radius: 8px;
background: var(--c-white);
color: var(--c-gray);
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.preview-modal-close:hover {
color: var(--c-accent);
border-color: var(--c-accent);
}
.preview-modal-close:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.preview-modal-title {
margin: 0 0 6px;
padding-right: 30px;
font-size: 22px;
line-height: 1.3;
color: var(--c-primary);
}
.preview-modal-meta {
margin: 0 0 18px;
font-size: 15px;
font-weight: 600;
color: var(--c-accent);
}
.preview-modal-meta[hidden] {
display: none;
}
.preview-modal-text {
margin: 0;
font-size: 16px;
line-height: 1.7;
color: var(--c-gray);
}
.preview-modal-text[hidden] {
display: none;
}
.preview-modal-note {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid #e9edf2;
font-size: 13.5px;
line-height: 1.6;
color: #8a929e;
}
.preview-modal-actions {
margin-top: 28px;
display: flex;
justify-content: center;
}
.preview-modal-dismiss {
min-width: 140px;
}
@keyframes preview-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes preview-pop {
from {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 575.98px) {
.preview-modal-dialog {
padding: 34px 22px 26px;
}
.preview-modal-title {
font-size: 19px;
}
.preview-modal-text {
font-size: 15px;
}
}
/* Row action */
.ticket-row-action {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.ticket-row-action .sm_btn {
min-width: 160px;
}
.ticket-row-unavailable {
background: #e2e6ec;
color: #9aa2ae;
cursor: not-allowed;
pointer-events: none;
}
/* --- Intro copy + assist + related --- */
.tickets-intro {
padding: 50px 0 60px;
background: #fff;
}
.tickets-intro .article-body {
max-width: 900px;
}
.tickets-intro-subhead {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--c-primary);
margin: 28px 0 12px;
}
.tickets-intro .article-body a {
color: var(--c-blue);
font-weight: 600;
}
.tickets-intro .article-body a:hover {
text-decoration: underline;
}
.tickets-assist {
text-align: center;
border: 1px solid #e2e6ec;
border-radius: 12px;
padding: 40px 24px;
margin: 40px 0;
}
.tickets-assist-title {
font-size: 30px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 8px;
}
.tickets-assist-text {
font-size: 16px;
line-height: 1.5;
color: var(--c-gray);
margin: 0 0 22px;
}
.tickets-assist-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: #8a6d5a;
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
padding: 12px 28px;
border-radius: 6px;
transition: background 0.3s;
}
.tickets-assist-btn:hover,
.tickets-assist-btn:focus {
background: #6f5544;
color: #fff;
}
.tickets-related-title {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
margin: 0 0 14px;
}
.tickets-related-links {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 40px;
}
.tickets-related-links li {
margin-bottom: 8px;
break-inside: avoid;
}
.tickets-related-links a {
color: var(--c-blue);
font-size: 15px;
font-weight: 500;
}
.tickets-related-links a:hover {
text-decoration: underline;
}
/* --- Responsive --- */
@media (max-width: 767px) {
.page-banner .heading {
font-size: 28px;
}
.tickets-group-title {
font-size: 22px;
}
.ticket-row {
flex-wrap: wrap;
gap: 14px;
padding: 16px;
}
.ticket-row-logo,
.ticket-row-media {
width: 96px;
height: 78px;
}
.ticket-row-logo img {
max-height: 52px;
}
.ticket-row-body {
flex: 1 1 60%;
}
.ticket-row-action {
flex: 1 1 100%;
}
.ticket-row-action .sm_btn {
width: 100%;
}
.ticket-row-title {
font-size: 16px;
}
.tickets-assist-title {
font-size: 24px;
}
.tickets-related-links {
columns: 1;
}
}
.eg-group-title {
font-size: 18px;
text-transform: uppercase;
letter-spacing: .1em;
color: #fff;
background: var(--c-primary);
display: block;
padding: 19px 16px;
border-radius: 0;
font-weight: 700;
margin: 0 0 8px;
}
/* === Tabs Block — shared === */
.tabs-block {
--tb-line: #e7eaef;
--tb-soft: #f4f7fb;
}
.tabs-block .tabs-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 14px;
}
.tabs-block .tabs-eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--c-accent);
}
/* === Tabs Block — pill nav (Bootstrap nav-tabs) === */
.tabs-block .tabs-nav {
display: inline-flex;
gap: 4px;
margin: 0 auto 44px;
padding: 6px;
background: var(--tb-soft);
border: 1px solid var(--tb-line);
border-radius: 60px;
}
.tabs-block .tabs-nav .nav-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border: 0;
background: transparent;
color: var(--c-primary);
font-size: 15px;
font-weight: 600;
border-radius: 50px;
white-space: nowrap;
transition: color .35s ease, background .35s ease, box-shadow .35s ease;
}
.tabs-block .tabs-nav .nav-link em {
font-size: 15px;
opacity: .55;
transition: opacity .35s ease;
}
.tabs-block .tabs-nav .nav-link:hover {
color: var(--c-accent);
}
.tabs-block .tabs-nav .nav-link.active {
color: #fff;
background: linear-gradient(120deg, var(--c-primary), #16375f);
box-shadow: 0 10px 24px rgba(14, 37, 69, .28);
}
.tabs-block .tabs-nav .nav-link.active em {
opacity: 1;
}
.tabs-block .tab-pane.show {
animation: tbFade .5s ease both;
}
@keyframes tbFade {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === Tabs Block — feature cards === */
.tabs-block .feature-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--tb-line);
border-radius: 24px;
overflow: hidden;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.tabs-block .feature-card:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 22px 50px rgba(14, 37, 69, .14);
}
.tabs-block .feature-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.tabs-block .feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.tabs-block .feature-card:hover .feature-media img {
transform: scale(1.06);
}
.tabs-block .feature-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 37, 69, 0) 45%, rgba(14, 37, 69, .55) 100%);
}
.tabs-block .feature-chip {
position: absolute;
z-index: 2;
top: 16px;
left: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(255, 255, 255, .92);
border-radius: 40px;
font-size: 13px;
font-weight: 700;
color: var(--c-primary);
}
.tabs-block .feature-chip .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-accent);
}
.tabs-block .feature-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 26px 28px 30px;
}
.tabs-block .feature-body h3 {
font-size: 22px;
font-weight: 900;
color: var(--c-primary);
margin: 0 0 12px;
}
.tabs-block .feature-body p {
color: var(--c-gray);
font-size: 15px;
line-height: 1.7;
margin: 0 0 18px;
}
.tabs-block .feature-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.tabs-block .feature-tags span {
font-size: 12.5px;
font-weight: 600;
color: var(--c-primary);
background: var(--tb-soft);
border: 1px solid var(--tb-line);
padding: 6px 14px;
border-radius: 40px;
}
/* === Tabs Block — about the resort === */
.tabs-block .about-gallery-main {
display: block;
position: relative;
border-radius: 24px;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 18px 40px rgba(14, 37, 69, .12);
}
.tabs-block .about-gallery-main img {
width: 100%;
aspect-ratio: 16 / 11;
object-fit: cover;
display: block;
transition: transform .7s ease;
}
.tabs-block .about-gallery-main:hover img {
transform: scale(1.04);
}
.tabs-block .about-thumb {
position: relative;
border-radius: 16px;
overflow: hidden;
display: block;
}
.tabs-block .about-thumb img {
width: 100%;
height: 100px;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.tabs-block .about-thumb:hover img {
transform: scale(1.08);
}
/* Thumbnail carousel (replaces the old Bootstrap col-4 row).
Unscoped so both .tabs-block and .gallery-img-wrapper galleries share it. */
.about-thumbs {
position: relative;
}
.about-thumbs .slick-list {
margin: 0 -6px;
}
.about-thumb-slide {
padding: 0 6px;
}
.about-thumbs-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--tb-line, #e7eaef);
border-radius: 50%;
background: rgba(255, 255, 255, .96);
color: var(--c-primary);
font-size: 13px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(14, 37, 69, .16);
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.about-thumbs-arrow:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: #fff;
}
.about-thumbs-prev {
left: 2px;
}
.about-thumbs-next {
right: 2px;
}
.tabs-block .zoom-badge {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .92);
border-radius: 12px;
color: var(--c-primary);
font-size: 14px;
transition: background .3s, color .3s;
}
.tabs-block .zoom-badge:hover {
background: var(--c-accent);
color: #fff;
}
.tabs-block .about-content h3 {
font-size: 30px;
font-weight: 900;
color: var(--c-primary);
margin: 0 0 16px;
}
.tabs-block .about-content p {
color: var(--c-gray);
font-size: 16px;
line-height: 1.8;
margin: 0 0 24px;
}
.tabs-block .about-meta {
padding: 10px 24px;
background: var(--tb-soft);
border: 1px solid var(--tb-line);
border-left: 4px solid var(--c-accent);
border-radius: 14px;
margin-bottom: 30px;
}
.tabs-block .about-meta li {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
color: var(--c-primary);
font-size: 15px;
}
.tabs-block .about-meta li + li {
border-top: 1px dashed var(--tb-line);
}
.tabs-block .about-meta em {
color: var(--c-accent);
width: 18px;
text-align: center;
}
.tabs-block .about-meta span {
font-weight: 700;
}
.tabs-block .amenity {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
padding: 14px 16px;
border: 1px solid var(--tb-line);
border-radius: 14px;
color: var(--c-primary);
font-size: 14px;
font-weight: 600;
transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tabs-block .amenity:hover {
transform: translateY(-3px);
border-color: transparent;
box-shadow: 0 12px 26px rgba(14, 37, 69, .1);
}
.tabs-block .amenity em {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--tb-soft);
border-radius: 12px;
color: var(--c-primary);
font-size: 16px;
}
@media (max-width: 575px) {
.tabs-block .tabs-nav {
flex-direction: column;
width: 100%;
border-radius: 20px;
gap: 6px;
}
.tabs-block .tabs-nav .nav-link {
width: 100%;
justify-content: center;
}
}
.map-holder iframe {
width: 100%
}
.gallery-img-wrapper .about-gallery-main {
display: block;
position: relative;
border-radius: 24px;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 18px 40px rgba(14, 37, 69, .12);
}
.gallery-img-wrapper .zoom-badge {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .92);
border-radius: 12px;
color: var(--c-primary);
font-size: 14px;
transition: background .3s, color .3s;
}
.gallery-img-wrapper img {
transition: all 0.4s
}
.gallery-img-wrapper .about-gallery-main:hover img {
transform: scale(1.04);
}
.gallery-img-wrapper .zoom-badge:hover {
background: var(--c-accent);
color: #fff;
}
.gallery-img-wrapper .about-thumb {
position: relative;
border-radius: 16px;
overflow: hidden;
display: block;
}
.gallery-img-wrapper .about-thumb img {
width: 100%;
height: 100px;
object-fit: cover;
display: block;
}
.gallery-img-wrapper .about-thumb:hover img {
transform: scale(1.08);
}
.bg_dark {
background: var(--c-primary)
}
.stats-box.alt {
padding: 0
}
.stats-bar-area {
padding: 20px 0
}
.stats-bar-area .stats-box.alt .stats-num {
font-size: 40px
}
.gallery-text-accordion {
margin-top: 20px
}
.gallery-text-accordion .faq-question {
padding: 15px 25px;
font-size: 16px;
}
.pricing-row {
margin-top: 40px;
}
.dark_bg {
background: var(--c-primary)
}
.icon-teaser.style5 {
color: #fff;
display: flex;
align-items: center;
font-size: 15px;
line-height: 120%;
justify-content: center
}
.icon-teaser.style5:hover {
color: var(--c-accent)
}
.icon-teaser.style5 .title {
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 120%;
margin: 0 0 5px;
text-transform: uppercase
}
.icon-teaser.style5 .icon {
min-width: 30px;
width: 30px;
margin-right: 20px;
}
.city-hero-bar {
padding: 20px 0
}
.icon-teaser-border .col-sm-4:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.4);
}
/*Custom Responsive*/
@media(max-width:1200px) {
.ticket-logo {
min-height: inherit
}
.ticket-logo img {
max-height: 90px;
}
.ticket-card {
padding: 35px 20px;
}
.ticket-name {
font-size: 22px;
margin: 30px 0;
}
.related-media {
flex: 0 0 auto;
width: 150px;
margin-right: -40px;
}
.related-card {
margin-right: 20px
}
.related-title {
font-size: 16px;
}
.td-title {
font-size: 24px;
}
.itin-name {
font-size: 20px;
}
.cmp-head .cmp-cell {
font-size: 16px;
}
.cmp-head .cmp-cell:first-child {
flex: 0 0 162px;
}
.result-resort-title {
font-size: 24px;
}
.result-head-body {
padding: 20px
}
.result-from-price {
font-size: 26px;
}
.result-rates-toggle {
padding: 10px 15px;
font-size: 15px;
}
.room-row-media {
aspect-ratio: inherit;
height: 100%;
}
.rate-price {
font-size: 24px
}
.rate-unit {
font-size: 13px
}
.rate-label {
font-size: 13px
}
.room-row-info {
padding: 16px
}
.resort-featured-body {
padding: 25px
}
.resort-featured-title {
font-size: 24px;
}
.resort-price-amount {
font-size: 36px;
}
.resort-price-unit {
margin-left: 10px
}
.resort-featured-media {
height: 100%;
aspect-ratio: inherit;
}
.resort-card-title {
font-size: 16px;
}
.resort-card .resort-price-unit {
margin-left: 0
}
.resort-listing {
padding-bottom: 0
}
.vacpac-deals-title {
font-size: 32px;
}
.vacpac-card-media .vacpac-gallery-slide img {
height: 100%
}
.vacpac-gallery .vacpac-gallery-slide {
aspect-ratio: 16/9
}
.vacpac-card-title {
font-size: 20px
}
.vacpac-price-amount {
font-size: 28px;
}
.vacpac-highlight-title {
font-size: 28px;
}
.package-hero-intro {
width: 400px;
max-width: 50%;
}
.package-hero-title {
font-size: 38px;
}
.booking-price-title h3 {
font-size: 26px;
}
.package-promo-headline {
font-size: 20px
}
.footer-banner-text .heading {
font-size: 26px;
}
.footer-banner-text {
font-size: 18px
}
.footer-banner-text .action {
display: block;
margin-top: 15px
}
.lg_btn {
padding: 12px 20px;
font-size: 16px
}
.page-banner .heading {
font-size: 34px;
font-weight: 700;
line-height: 1.2;
color: #fff;
}
.process-box {
padding: 0 20px
}
.process-box .title {
font-size: 20px;
}
}
@media(max-width:991px) {
.page-banner .heading {
font-size: 30px;
}
.resort-featured-media {
height: auto;
aspect-ratio: 16/9;
}
.booking-field-label,
.booking-field label {
font-size: 14px
}
.blog-grid-area.pb_100 {
padding-bottom: 50px;
}
.blog-intro-text {
font-size: 16px;
}
.blog-card,
.featured-card {
padding: 0 15px;
}
.featured-card-wide .blog-card-media img {
height: 240px;
}
.blog-card-media img {
height: 240px;
}
.blog-card-meta {
font-size: 13px;
line-height: normal;
}
.featured-area {
padding: 30px 0 50px;
}
.featured-band {
top: 150px;
bottom: 85px;
}
.categories-area {
padding: 50px 0
}
.gy_70 {
--bs-gutter-y: 30px;
}
.blog-grid-area {
padding-bottom: 30px;
}
.book-banner-media {
width: 100%;
max-width: calc(100% + 70px);
min-width: calc(100% + 70px);
}
.blog-pagination {
margin-top: 50px;
}
br {
display: none
}
.blog-section-heading {
font-size: 24px;
}
.featured-card-title,
.blog-card-title {
font-size: 20px;
}
.featured-card-text,
.blog-card-text {
font-size: 14px
}
.featured-read-more,
.blog-read-more {
font-size: 15px;
}
.blog-pills {
gap: 10px 5px;
}
.blog-pill {
font-size: 14px;
padding: 9px 20px;
}
.blog-card,
.featured-card {
height: calc(100% - 24px);
}
.mobile-menu {
width: 360px;
}
.cart-layout {
padding: 0
}
.cart-item {
gap: 15px
}
.cart-details-title {
display: none
}
.cart-item-media {
flex: 0 0 35%;
max-width: 35%;
}
.cart-item-body {
flex: auto;
min-width: inherit;
}
.cart-item-loc {
font-size: 12px;
line-height: normal;
margin: 0;
}
.cart-item-date {
font-size: 12px;
line-height: normal;
}
.cart-item-media img {
height: auto;
aspect-ratio: 1;
}
.order-summary {
margin-top: 0;
padding: 20px;
}
.order-promo-apply {
padding: 10px 20px;
font-size: 13px;
}
.order-summary-total-value {
font-size: 20px;
}
.order-checkout-btn {
padding: 13px 16px;
font-size: 14px;
text-align: center;
line-height: normal;
}
.consent-wrapper {
margin-top: 30px;
margin-bottom: 0;
}
.booking-field {
padding-right: 0
}
.booking-widget .fields-wrapper {
flex-wrap: wrap;
gap: 12px
}
.booking-field::after {
display: none
}
.hero-area.resort-hero .booking-field {
flex: 1 1 calc(50% - 8px);
}
.special-card-title {
font-size: 20px;
}
.special-card-content {
padding: 20px;
}
.glance-fact {
font-size: 15px;
}
.signup-title {
text-align: center
}
.signup-form {
justify-content: center
}
.amenity-cat {
font-size: 20px
}
.dining-name {
font-size: 16px;
}
.special-card {
flex-direction: row;
}
.td-title {
font-size: 20px;
}
.related-media {
flex: 0 0 auto;
width: 150px;
margin-right: -30px;
}
.related-card {
margin-right: 15px;
}
.related-title {
font-size: 16px;
}
.ss-trigger {
font-size: 16px
}
.search-summary {
padding-bottom: 0
}
.result-resort-title {
font-size: 24px;
}
.result-from-price {
font-size: 22px;
}
.result-rates-toggle {
margin-top: 0;
align-self: flex-start;
font-size: 15px;
padding: 10px 15px;
white-space: nowrap;
}
.result-rooms {
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.room-row {
flex-wrap: wrap;
flex: 0 0 calc(50% - 8px);
max-width: calc(50% - 8px);
}
.result-head {
background: #0E2545;
color: #fff;
}
.result-resort-title {
color: #fff
}
.result-info {
color: #fff
}
.result-info img {
filter: invert(1) grayscale(1);
}
.result-from > span:first-child {
color: #fff
}
.result-from-price,
.result-from-unit {
color: #fff
}
.result-rates-toggle {
margin: 0;
background: #D95D31;
color: #fff;
font-size: 14px;
padding: 10px 15px;
line-height: normal
}
.result-from-price {
font-size: 23px;
}
.result-head-body {
padding: 20px;
}
.result-from {
max-width: 100%
}
.result-head-media {
height: auto;
aspect-ratio: 16/9;
}
.result-head-media img {
min-height: inherit
}
.result-resort.is-open {
padding: 0;
}
.result-resort.is-open .result-head {
box-shadow: none
}
.room-row-media img {
min-height: inherit;
border-radius: 20px;
border-bottom-left-radius: 0
}
.room-row-info {
padding: 20px
}
.room-row-rate {
border: none
}
.room-row-lower {
flex-wrap: nowrap;
gap: 15px;
}
.rate-label {
font-size: 14px;
line-height: 20px
}
.rate-price {
font-size: 22px;
}
.rate-unit {
font-size: 13px;
display: block;
margin: 0
}
.rate-btn {
padding: 8px 15px;
font-size: 14px;
}
.room-row-details li {
margin-bottom: 0px;
font-size: 15px;
}
.search-summary-controls {
gap: 4px
}
.ss-trigger {
font-size: 14px;
padding: 0;
}
.search-summary {
padding-bottom: 0
}
.result-from-unit {
font-size: 14px;
}
.awards-strip {
padding: 0px 0 50px;
}
.search-summary-row {
justify-content: center
}
.room-row-title {
font-size: 26px;
font-weight: 700;
color: var(--c-primary);
margin: 0;
}
.result-head-media img {
border-radius: 30px 0 0
}
.awards-list {
gap: 30px
}
.awards-item img {
height: 70px;
opacity: 1;
}
.resort-filter-wrapper {
overflow-x: scroll
}
.resort-filters {
flex-wrap: nowrap;
gap: 6px
}
.resort-pill {
font-size: 14px;
padding: 7px 15px;
white-space: nowrap
}
.resort-featured-media img,
.resort-card-media img {
min-height: inherit;
border-radius: 30px 30px 30px 0;
}
.resort-featured-title {
font-size: 22px;
}
.resort-featured-body {
padding: 20px
}
.resort-card-title {
font-size: 22px;
}
.resort-listing {
padding-bottom: 0
}
.resort-content-title {
font-size: 24px;
}
.resort-content h3 {
font-size: 20px;
}
.resort-property-list li {
padding-left: 18px;
margin-bottom: 4px;
font-size: 16px;
}
.resort-price,
.resort-card-price {
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1;
width: 100%;
}
.resort-price-amount {
font-size: 32px;
font-weight: 700;
color: #D95D31;
margin-right: 8px;
display: inline-block;
}
.resort-featured-foot,
.resort-card-foot {
display: block
}
.resort-btn {
font-size: 15px;
padding: 12px 30px;
flex: 1;
width: 100%;
margin-top: 15px
}
.resort-price-from {
flex: 1
}
.resort-featured {
margin: 0
}
.vacpac-hero-title {
font-size: 30px;
}
.vacpac-deals-title {
font-size: 26px;
}
.vacpac-featured {
flex-direction: row;
}
.vacpac-featured-name {
font-size: 24px;
}
.vacpac-price-amount {
font-size: 28px;
}
.vacpac-featured-media .vacpac-gallery-slide img {
height: 100%
}
.vacpac-card-title {
font-size: 20px;
}
.vacpac-highlight-title {
font-size: 28px;
}
.package-content .booking-field {
border: none
}
.booking-consent label {
font-size: 13px;
}
.package-hero-title {
font-size: 34px;
}
.package-hero-subtitle {
font-size: 18px
}
.package-hero-intro {
text-align: center
}
.flash-sale-text {
font-size: 24px;
}
.package-promo-headline {
font-size: 18px
}
.package-col-a {
padding-right: 15px;
}
.booking-price-title h3 {
font-size: 24px;
}
.vacation-pricing-badge {
top: -55px;
right: -10px;
width: 120px;
}
.package-highlight-body h4 {
font-size: 16px;
}
.package-highlight-icon {
width: 45px;
height: 45px;
}
.package-acc-toggle {
padding: 15px 0;
font-size: 16px;
}
.package-col-b {
padding-left: 15px
}
.three-col-slider .slick-list {
padding-right: 0;
}
.deal-title {
font-size: 20px;
}
.footer-banner-text .heading {
font-size: 24px;
}
.footer-banner-text {
font-size: 16px;
line-height: normal
}
.stats-box {
padding: 20px
}
.stats-box .stats-num {
font-size: 26px;
}
.stats-box .icon {
width: 60px;
height: 60px;
font-size: 18px;
}
.icon-teaser.style1 {
padding: 20px
}
.icon-teaser.style1 .title {
font-size: 20px
}
.process-box {
padding: 0
}
.process-box .title {
font-size: 18px;
}
.c_form input {
height: 50px;
}
.c_form .form_heading {
font-size: 22px;
}
.contact-card-phone {
font-size: 20px;
}
.contact-hours-title {
font-size: 24px;
}
.contact-form-title,
.contact-aside-title {
font-size: 22px;
}
.contact-aside-call-phone {
font-size: 18px
}
.ticket-row-media img {
object-fit: contain
}
.resort-filters {
flex-wrap: wrap
}
.stats-bar-area .stats-box.alt .stats-num {
font-size: 32px
}
}
@media(max-width:767px) {
.c_form {
padding: 25px
}
.newsletter-modal .modal-body {
padding: 30px 20px;
}
.newsletter-modal h2 {
font-size: 20px;
}
.newsletter-modal h3 {
font-size: 16px;
}
.subscribe-btn {
height: 55px;
}
.newsletter-modal .section-sub-title {
font-size: 18px
}
.package-hero-intro {
text-align: left
}
.search-modify-btn {
padding: 10px 28px;
font-size: 15px;
width: 100%
}
.room-row-head {
flex-direction: row
}
.special-card {
flex-direction: column;
}
.mobile-menu {
width: 100%;
}
.single-hero-area .share-sticky {
position: absolute;
right: 0px;
bottom: 0;
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 10px;
z-index: 20;
background: transparent;
width: 100%;
flex-direction: row-reverse;
align-items: flex-end;
justify-content: flex-start;
}
.single-hero-area .share-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: 0;
border-radius: 50%;
background: #E86F2D;
color: #fff;
cursor: pointer;
font-size: 22px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
min-width: 50px;
min-height: 50px;
}
.single-hero-area .share-links {
display: block
}
.single-hero-area .share-links {
display: flex;
flex-direction: column;
}
/* Hide icons initially */
.single-hero-area .share-links {
display: flex;
flex-direction: row;
gap: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: .3s ease;
pointer-events: none;
}
.single-hero-area .share-links a {
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
color: #333;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.share-sticky.active .share-links {
opacity: 1;
visibility: visible;
transform: translateY(0px);
pointer-events: auto;
}
.cart-item {
flex-direction: row;
align-items: center;
padding: 15px
}
.order-summary-total-value {
font-size: 24px;
}
.consent-wrapper {
margin-top: 30px;
margin-bottom: 0;
}
.checkout-continue-btn {
padding: 13px 20px;
font-size: 14px;
margin-top: 30px;
}
.resort-hero-info {
padding-bottom: 16px
}
.resort-hero-address {
font-size: 16px
}
.resort-hero-phone {
font-size: 16px
}
.resort-hero-price {
text-align: right;
display: block;
width: 100%;
}
.resort-hero .inner {
padding: 20px;
padding-bottom: 0
}
.resort-hero-sub {
font-size: 16px;
}
.resort-hero-info {
padding-bottom: 16px;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding-bottom: 60px
}
.resort-booking-widget {
margin-top: -50px;
}
.default-section-heading {
margin-bottom: 20px;
}
.special-card-amount {
font-size: 34px;
}
.location-into-text {
font-size: 16px;
}
.location-map.alt {
height: auto;
margin-bottom: 30px
}
.td-thumb img {
height: 100%
}
.related-slider .slick-list {
padding-right: 50px;
margin-right: -15px;
}
.related-media {
flex: 0 0 auto;
width: 140px;
margin-right: -30px;
}
.related-title {
font-size: 16px;
}
.related-card {
margin-right: 20px;
}
.share-blog-title {
font-size: 16px;
line-height: normal
}
.faq-question {
font-size: 15px;
padding: 14px 20px;
line-height: normal;
}
.awards-item {
flex: 1;
}
.awards-item img {
height: auto;
opacity: 1;
}
.awards-list {
gap: 20px;
flex-wrap: nowrap;
}
.result-resort-title {
font-size: 24px;
}
.search-summary-row {
justify-content: center
}
.search-summary {
padding-bottom: 0
}
.room-row-head {
flex-direction: column;
}
.room-row-headline {
display: block
}
.vacpac-hero-inn {
padding: 0
}
.vacpac-hero-cta {
width: auto;
}
.vacpac-featured-content {
padding: 22px
}
.vacpac-featured-name {
font-size: 22px;
}
.vacpac-btn-featured {
font-size: 16px
}
.vacpac-card-title {
font-size: 20px;
}
.vacpac-highlight-title {
font-size: 26px;
}
.vacpac-featured {
flex-direction: row
}
.vacpac-featured-media .vacpac-gallery-slide img {
height: 100%;
}
.vacpac-gallery .vacpac-gallery-slide {
position: relative;
aspect-ratio: 16 / 9;
}
.vacpac-gallery .vacpac-gallery-slide img {
height: 100%
}
.vacpac-price-amount {
font-size: 36px;
}
.package-hero-title {
font-size: 28px;
}
.package-hero-subtitle {
font-size: 16px;
}
.package-price-amount {
font-size: 38px;
}
.package-feature-icon {
width: 33px;
height: 33px;
}
.package-highlight-body h4 {
font-size: 16px;
}
.package-highlight-icon {
width: 30px;
height: 30px;
}
.package-accordion {
margin-top: 30px
}
.package-acc-toggle {
padding: 15px 0;
font-size: 18px
}
.package-acc-list {
margin: 0
}
.gallery-slider .slick-list {
padding-right: 60px;
margin-left: 10px
}
.gallery-slider .slick-slide {
padding: 0 8px
}
.gallery-section .slick-arrow {
bottom: -80px
}
.gallery-section {
padding-top: 0;
padding-bottom: 30px
}
.gallery-slider .slick-dots {
bottom: 0
}
.review-card {
padding: 22px
}
.package-hero-intro {
width: 50%;
max-width: 50%;
}
.package-hero-price {
flex: 0 0 38%;
}
.package-col-a {
padding-right: 15px
}
.package-col-b {
padding-left: 15px;
margin-top: 0
}
.booking-price-title h3 {
font-size: 16px;
}
.vacation-pricing-badge {
width: 95px;
top: -47px;
right: -11px;
}
.package-acc-list {
margin: 0
}
.booking-call {
font-size: 15px
}
.footer-banner-text {
font-size: 16px;
line-height: normal;
}
.footer-banner-text .heading {
font-size: 24px;
}
.footer-banner-text .action {
margin-top: 15px;
display: block;
}
.footer-subscribe form input {
font-size: 16px
}
.footer-subscribe form button {
font-size: 16px
}
.three-col-slider .slick-list {
padding-right: 60px
}
.icon-teaser.style2 .text p {
display: none
}
.icon-teaser.style2 .text {
text-align: center
}
.icon-teaser.style2 .icon {
margin-right: 0;
margin-bottom: 10px
}
.icon-teaser.style2 {
flex-direction: column
}
.process-box .title {
font-size: 18px;
}
.blog-breadcrumb ol {
display: block
}
.blog-breadcrumb ol li {
display: inline;
font-size: 12px;
line-height: normal
}
.page-banner .blog-breadcrumb li:not(:last-child)::before {
top: 0
}
.tabs-block .about-content h3 {
font-size: 22px;
}
.stats-bar-area .stats-box.alt .stats-num {
font-size: 30px
}
.city-hero .resort-booking-widget {
margin-top: 0;
}
.city-hero .hero-bg {
object-position: 65% 54%;
transform-origin: 65% 54%;
}
.resort-hero .inner,
.city-hero .inner {
padding: 0 15px
}
.city-hero .booking-widget .fields-wrapper {
flex-wrap: nowrap;
}
.city-hero .booking-field:first-child {
flex: 1 1 50%
}
.icon-teaser.style5 {
display: block;
text-align: center
}
.icon-teaser.style5 .icon {
min-width: 32px;
width: 32px;
margin-right: 0;
margin: 0 auto 15px;
}
.topdeal-tabs {
flex-wrap: nowrap;
justify-content: flex-start;
}
.tabs-wrapper {
overflow-x: scroll;
}
.tabs-fade {
position: relative;
z-index: 1
}
.tabs-fade::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 60px;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
}
@media(max-width:575px) {
.process-box {
padding: 0
}
.three-col-slider .slick-list {
padding-right: 0
}
.package-hero-intro {
width: 100%;
max-width: 100%;
}
.vacpac-deals-title {
font-size: 25px;
}
.result-rooms {
display: block;
}
.room-row {
max-width: 100%;
}
.room-row-head {
flex-direction: column
}
.comforts-text {
margin-top: 40px
}
.featured-band {
top: 140px;
bottom: 85px;
}
.featured-article-slider .slide {
padding: 20px 10px
}
.featured-article-slider .slick-list {
margin-left: -10px;
margin-right: -10px;
padding-right: 50px
}
.blog-card-media {
aspect-ratio: 16 / 9;
}
.blog-card-media img {
width: 100%;
height: 100%;
}
.blog-section-heading {
margin-bottom: 20px
}
.blog-card-title {
font-size: 20px;
}
.featured-area {
padding: 30px 0 30px;
}
.category-tab img {
width: 80px;
display: block;
height: 80px;
border-radius: 50%;
margin: 0 auto 15px;
}
.category-tab em {
display: none
}
.category-tab {
display: block;
text-align: center;
padding: 0 8px;
flex: 1;
line-height: normal
}
.category-tabs {
flex-wrap: nowrap;
align-items: flex-start
}
.blog-card .blog-card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.featured-area .blog-card {
height: 100%
}
.blog-card {
height: auto;
padding: 0 20px
}
.featured-article-slider .blog-card-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
.categories-area {
padding: 50px 0;
}
.newsletter-title {
font-size: 26px;
text-align: center;
}
.newsletter-palm,
.join-cta-palm {
width: 100%;
}
.gy_70 {
--bs-gutter-y: 30px;
}
.book-vac-wrapper {
margin: 0
}
.book-vac-wrapper {
margin: 0;
background: #0e2545;
color: #fff
}
.book-banner {
padding: 0;
background: transparent
}
.book-banner-media {
display: none
}
.book-banner-title {
text-align: left;
color: #fff;
font-size: 28px;
padding: 30px;
margin: 0;
padding-bottom: 0;
position: relative;
z-index: 11;
}
.book-banner-mobile {
display: block
}
.book-banner-body {
position: relative
}
.book-banner-body .book-banner-btn {
position: absolute;
bottom: 30px;
z-index: 1111;
width: calc(100% - 60px);
left: 50%;
transform: translateX(-50%);
}
.book-banner {
overflow: hidden
}
.book-banner-mobile {
position: relative;
z-index: 1;
margin-top: -40px;
}
.book-banner-mobile::after {
position: absolute;
content: "";
top: -1px;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(0deg, rgba(14, 37, 69, 0) 0%, rgba(14, 37, 69, 1) 100%);
}
.book-banner-mobile img {
width: 100%
}
.book-banner-area {
padding-top: 0
}
.book-banner-body .book-banner-btn {
background: #0e2545
}
.pb_100 {
padding-bottom: 50px;
}
.blog-pagination {
margin-top: 50px;
}
.footer-links a {
font-size: 14px;
}
.footer-heading {
font-size: 14px;
margin: 0 0 12px;
}
.blog-read-more {
font-size: 14px;
}
.blog-card-text {
font-size: 14px
}
.blog-card-title {
font-size: 16px;
}
.blog-breadcrumb li,
.blog-breadcrumb a {
font-size: 14px;
line-height: 1;
}
.single-hero-tags {
display: none
}
.single-hero {
margin-bottom: 20px
}
.single-head-area .blog-breadcrumb ol {
margin-bottom: 0
}
.single-title {
text-align: left
}
.single-cat-wrapper {
overflow-y: auto;
padding-bottom: 7px;
margin-bottom: 5px;
}
.single-cat-wrapper .single-hero-tags {
display: flex;
position: inherit;
top: auto;
right: auto;
left: auto;
flex-wrap: nowrap;
}
.single-cat-wrapper .single-hero-tag {
border: 1px solid var(--c-primary);
white-space: nowrap
}
.single-meta {
font-size: 16px;
gap: 10px 28px;
justify-content: flex-start;
}
.blog-single .article-area {
padding: 20px 0;
}
.wp-card.is-center {
width: 85%;
}
.wp-stack {
height: auto;
aspect-ratio: 1 / 1;
}
.wp-carousel-area {
padding: 0;
}
.inner-things {
position: relative;
z-index: 1;
margin: 0;
padding: 30px 0
}
.inner-things::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: calc(100% + 100px);
height: 100%;
background: #ECF3FB;
z-index: -1;
left: -50px;
}
.things-sub {
margin: 0 0 20px
}
.inner-things:nth-child(even)::after {
background: #fff
}
.things-head {
font-size: 16px;
margin-bottom: 40px;
}
.td-thumb {
margin-bottom: 20px
}
.td-price {
left: auto;
right: 15px;
}
.things-head {
margin-bottom: 20px;
}
.itinerary-area {
padding-bottom: 30px;
}
.ticket-logo img {
max-height: 100px;
}
.ticket-more {
font-size: 16px
}
.ticket-cta-area {
padding-bottom: 30px
}
.cart-confirm {
display: block;
text-align: center;
margin-bottom: 0
}
.cart-confirm-icon {
margin-bottom: 20px
}
.qualify-list {
column-count: 1
}
.glance-heading {
font-size: 20px;
}
.amenity-cat {
font-size: 20px;
}
.amenity-info-block {
margin-bottom: 30px;
}
.special-card-price {
flex-wrap: nowrap;
width: 100%;
justify-content: space-around;
}
.special-card-from {
flex: auto
}
.special-card-price > div {
width: 100%;
text-align: right
}
.specials-section {
padding-bottom: 0
}
.wp-carousel-area .wp-nav {
margin-bottom: 20px
}
.signup-title {
text-align: center
}
.vacpac-featured {
display: block
}
.vacpac-featured-media {
height: 260px
}
.vacpac-price-amount {
font-size: 32px;
}
.package-hero-grid {
display: block
}
.package-hero-actions {
justify-content: center;
margin-top: 20px
}
.flash-sale-countdown {
display: block
}
.vacation-pricing-badge {
width: 170px;
top: -90px;
right: auto;
left: 50%;
transform: translateX(-50%);
}
.booking-price-title {
width: 100%;
text-align: center;
padding-top: 70px;
}
.booking-price-title h3 {
font-size: 22px;
}
h3.package-promo-headline {
display: block;
text-align: center;
margin-top: 20px;
}
.package-col-b {
padding-left: 0;
margin-top: 70px;
}
.package-col-a {
padding-right: 0
}
.related-links {
text-align: center
}
.footer-card {
background: #bad0dd;
}
.footer-card .card-img {
margin-bottom: 20px
}
.footer-card .bg_image {
display: none
}
.footer-banner-text {
text-align: center
}
.process-box::after {
display: none
}
.tickets-filter-btn {
font-size: 12px;
padding: 7px 11px;
}
.ticket-row {
align-items: flex-start
}
}
/* === Pricing Block === */
.pricing-block {
--pb-line: #e7eaef;
--pb-soft: #f4f7fb;
}
.pricing-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--c-white);
border: 1px solid var(--pb-line);
border-radius: 20px;
overflow: hidden;
transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.pricing-card:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 22px 50px rgba(14, 37, 69, .14);
}
.pricing-card-head {
padding: 26px 24px;
text-align: center;
background: var(--pb-soft);
border-bottom: 1px solid var(--pb-line);
}
.pricing-card-title {
margin: 0;
font-size: 20px;
font-weight: 900;
line-height: 1.3;
color: var(--c-primary);
}
.pricing-badge {
margin: 10px 0 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-white);
}
.pricing-card-price {
padding: 30px 24px 24px;
text-align: center;
}
.pricing-amount {
margin: 0 0 8px;
font-size: 54px;
font-weight: 900;
line-height: 1;
color: var(--c-accent);
}
.pricing-caption {
margin: 0;
font-size: 14px;
color: var(--c-gray);
}
.pricing-features {
margin: 0;
padding: 0;
}
.pricing-features li {
padding: 14px 24px;
text-align: center;
font-size: 15px;
line-height: 1.6;
color: var(--c-primary);
border-top: 1px solid var(--pb-line);
}
.pricing-features li:nth-child(odd) {
background: var(--pb-soft);
}
.pricing-feature-accent {
font-weight: 700;
color: var(--c-accent);
}
.pricing-card-foot {
margin-top: auto;
padding: 24px;
text-align: center;
border-top: 1px solid var(--pb-line);
}
.pricing-call {
margin: 0 0 4px;
font-size: 14px;
color: var(--c-gray);
}
.pricing-phone {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 12px;
font-size: 18px;
font-weight: 700;
color: var(--c-primary);
text-decoration: none;
transition: color .3s ease;
}
.pricing-phone:hover {
color: var(--c-accent);
}
.pricing-phone:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
}
/* Featured (center) card */
.pricing-card-featured {
border-color: transparent;
box-shadow: 0 26px 60px rgba(14, 37, 69, .22);
}
.pricing-card-featured .pricing-card-head {
background: linear-gradient(120deg, var(--c-primary), #16375f);
border-bottom-color: transparent;
}
.pricing-card-featured .pricing-card-title {
font-size: 24px;
color: var(--c-white);
}
/* Lift the featured card above its neighbours on desktop only */
@media (min-width: 992px) {
.pricing-card-featured {
position: relative;
z-index: 2;
margin-top: -36px;
margin-bottom: -36px;
height: calc(100% + 72px);
}
}
@media (max-width: 767.98px) {
.pricing-amount {
font-size: 44px;
}
.pricing-card-featured .pricing-card-title {
font-size: 21px;
}
}
/* === Top Deals (city page) === */
.topdeal-head {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px 24px;
margin-bottom: 12px;
}
.topdeal-heading {
margin: 0;
font-size: 40px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
}
.topdeal-rating {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 32px;
font-weight: 400;
line-height: 1.2;
color: var(--c-primary);
}
.topdeal-rating em {
font-size: 30px;
color: var(--c-accent);
}
.topdeal-score {
font-weight: 700;
}
/* Filter tabs (Bootstrap tabs) */
.topdeal-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 26px 0 45px;
}
.topdeal-tabs .nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
height: 39px;
/* Figma draws these pills at fixed widths (164/143/158/158/158); a min-width
plus even padding matches that without hard-coding a width per label. */
min-width: 158px;
padding: 0 18px;
background: transparent;
border: 1px solid var(--c-primary);
border-radius: 35px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #000;
transition: background .3s ease, color .3s ease;
}
.topdeal-tabs .nav-link:hover {
background: rgba(14, 37, 69, .06);
}
.topdeal-tabs .nav-link.active {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-white);
}
.topdeal-tabs .nav-link:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.topdeal-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
/* card box matches the Figma frame exactly (422x238) */
height: 100%;
margin-inline: auto;
padding: 20px 18px 20px 22px;
background: var(--c-white);
border: 2px solid transparent;
border-radius: 20px;
box-shadow: 4px 4px 7.7px 0 rgba(0, 0, 0, .3);
/* Figma uses a soft-blue gradient stroke that fades out to the right */
background-image: linear-gradient(var(--c-white), var(--c-white)),
linear-gradient(105deg, #83d4fc 0%, rgba(131, 212, 252, 0) 65%);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.topdeal-body {
flex: 1 1 auto;
min-width: 0;
}
.topdeal-title {
margin: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--c-primary);
}
.topdeal-was {
margin-left: 6px;
font-size: 16px;
font-weight: 700;
color: var(--c-accent);
text-decoration: line-through;
white-space: nowrap;
}
.toptopdeal-was-unit {
font-size: 14px;
font-weight: 400;
}
.topdeal-resort {
margin: 2px 0 0;
padding-bottom: 8px;
border-bottom: 1px solid #e7eaef;
font-size: 16px;
line-height: 1.5;
color: var(--c-primary);
}
.topdeal-distance {
display: flex;
align-items: center;
gap: 7px;
margin: 8px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--c-primary);
}
.topdeal-distance em {
font-size: 14px;
color: var(--c-primary);
}
.topdeal-price {
display: flex;
align-items: baseline;
gap: 8px;
margin: 10px 0 8px;
}
.topdeal-from {
font-size: 14px;
font-weight: 700;
color: var(--c-primary);
}
.topdeal-now {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--c-accent);
}
.topdeal-unit {
font-size: 14px;
font-weight: 700;
color: var(--c-primary);
}
.topdeal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 169px;
max-width: 100%;
height: 35px;
background: var(--c-accent);
border-radius: 20px;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: var(--c-white);
text-decoration: none;
transition: background .3s ease;
}
.topdeal-btn:hover {
background: #c04d24;
color: var(--c-white);
}
.topdeal-btn:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
}
.topdeal-media {
flex: 0 0 161px;
width: 161px;
}
.topdeal-media img {
width: 161px;
height: 197px;
border-radius: 20px;
object-fit: cover;
/* matches the Figma crop offset on the source photo */
object-position: 46% center;
display: block;
}
/* "Best Value" ribbon — folded tab pinned to the card's top-right */
.topdeal-ribbon {
position: absolute;
z-index: 2;
top: 12px;
right: -10px;
margin: 0;
min-width: 101px;
padding: 4px 10px;
background: var(--c-accent);
border-radius: 10px 5px 0 10px;
box-shadow: 3px 4px 2.8px -2px rgba(0, 0, 0, .4);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
color: var(--c-white);
text-align: center;
}
.topdeal-ribbon::after {
content: "";
position: absolute;
top: 100%;
right: 0;
border-top: 8px solid #a63f1c;
border-right: 10px solid transparent;
}
/* --- Shared mobile slider nav (arrows + dots): Top Deals, Specials, Resorts --- */
.slider-nav {
display: none;
}
@media (max-width: 991.98px) {
/* A Bootstrap .row driven by slick: .row is display:flex, but slick needs a
block container for its track. */
.topdeal-row.slick-initialized,
.resort-cards.slick-initialized {
display: block;
margin-left: 0;
margin-right: 0;
margin-top: 30px;
}
/* slick moves the cols into .slick-track, so Bootstrap's `.row > *` gutter
no longer matches them — restore it here, which also gives the Top Deals
ribbon's right-hand overhang room inside the list's overflow:hidden. */
.topdeal-row.slick-initialized .slick-slide,
.resort-cards.slick-initialized .slick-slide {
padding: 0 12px;
margin-top: 0;
height: auto;
}
/* room for the Top Deals card shadow above/below */
.topdeal-row.slick-initialized .slick-list {
padding: 4px 0 10px;
}
.slider-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 6px;
}
/* slick only adds .slick-arrow to custom arrow markup (not .slick-prev /
.slick-next), so order off our own classes to get: prev | dots | next */
.slider-nav .slider-prev {
order: 1;
}
.slider-nav .slick-dots {
order: 2;
}
.slider-nav .slider-next {
order: 3;
}
/* slick-theme zeroes the font and hides colour — restore for our own icons */
.slider-nav .slick-arrow {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
background: none;
color: #9aa2ae;
font-size: 18px;
line-height: 1;
transform: none;
cursor: pointer;
transition: color .3s ease;
}
.slider-nav .slick-arrow::before {
content: none;
}
.slider-nav .slick-arrow:hover {
color: var(--c-primary);
}
.slider-nav .slick-arrow.slick-disabled {
opacity: .35;
cursor: default;
}
.slider-nav .slick-arrow:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
border-radius: 50%;
}
.slider-nav .slick-dots {
position: static;
display: flex;
align-items: center;
gap: 8px;
width: auto;
margin: 0;
padding: 0;
}
.slider-nav .slick-dots li {
width: 9px;
height: 9px;
margin: 0;
}
.slider-nav .slick-dots li button {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: #cfd6df;
transition: background .3s ease;
}
.slider-nav .slick-dots li button::before {
content: none;
}
.slider-nav .slick-dots li.slick-active button {
background: var(--c-blue);
}
/* Orlando Deals cards slide one-up; the stacking margin would offset the track */
.specials-slider.slick-initialized .special-card {
margin-top: 0;
}
.specials-slider.slick-initialized .slick-slide {
height: auto;
}
.specials-slider.slick-initialized .slick-list {
padding-bottom: 4px;
}
}
@media (max-width: 1199.98px) {
.topdeal-card {
height: auto;
min-height: 238px;
}
}
/* Figma only specifies desktop; scale the heading down on small screens */
@media (max-width: 767.98px) {
.topdeal-heading {
font-size: 28px;
}
.topdeal-rating {
font-size: 20px;
}
.topdeal-rating em {
font-size: 18px;
}
.topdeal-tabs {
margin-bottom: 30px;
}
}
@media (max-width: 575.98px) {
.topdeal-card {
gap: 10px;
padding: 18px 14px;
}
.topdeal-title {
font-size: 19px;
}
.topdeal-media {
flex-basis: 120px;
width: 120px;
}
.topdeal-media img {
width: 120px;
height: 168px;
}
.topdeal-btn {
width: 100%;
}
}
/* === Why Families Choose Us (city page) === */
.why-families .section-heading {
font-size: 36px;
line-height: 1.2;
}
.why-panel {
max-width: 1070px;
margin: 0 auto;
padding: 33px 51px 34px;
border: 2px solid transparent;
border-radius: 30px;
box-shadow: 2px 4px 7.3px 0 rgba(0, 0, 0, .25);
/* Figma "Soft Blue Gradient" stroke — light blue at the top, fading out downward */
background-image: linear-gradient(var(--c-white), var(--c-white)),
linear-gradient(180deg, #82c9f1 0%, rgba(130, 201, 241, 0) 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.why-item {
text-align: center;
}
.why-icon {
width: 65px;
height: 65px;
margin: 0 auto 14px;
display: block;
}
.why-title {
margin: 0 0 4px;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--c-primary);
}
.why-text {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--c-primary);
}
@media (max-width: 991.98px) {
.why-panel {
padding: 30px 24px;
}
}
@media (max-width: 767.98px) {
.why-families .section-heading {
font-size: 26px;
}
.why-panel {
padding: 24px 16px;
border-radius: 20px;
}
.why-icon {
width: 52px;
height: 52px;
margin-bottom: 10px;
}
.why-title {
font-size: 17px;
}
.why-text {
font-size: 14px;
}
}
/* === Related Links — Link Columns (Style 3) === */
.rl-panel {
padding: 40px;
background: #f4f7fb;
border: 1px solid #e7eaef;
border-radius: 20px;
}
.rl-heading {
margin: 0 0 28px;
font-size: 30px;
font-weight: 900;
line-height: 1.2;
color: var(--c-primary);
}
.rl-col-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-size: 16px;
font-weight: 800;
line-height: 1.3;
color: var(--c-primary);
}
.rl-col-title em {
font-size: 14px;
color: var(--c-accent);
}
.rl-list {
margin: 0;
padding: 0;
}
.rl-list a {
display: inline-flex;
align-items: flex-start;
gap: 7px;
padding: 8px 0;
font-size: 15px;
line-height: 1.5;
color: var(--c-primary);
text-decoration: none;
transition: color .3s ease;
}
.rl-list em {
margin-top: 4px;
font-size: 11px;
color: var(--c-gray);
transition: transform .3s ease, color .3s ease;
}
.rl-list a:hover {
color: var(--c-accent);
}
.rl-list a:hover em {
color: var(--c-accent);
transform: translateX(3px);
}
.rl-list a:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
}
.rl-foot {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid #e7eaef;
}
.rl-all {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--c-blue);
text-decoration: none;
transition: color .3s ease;
}
.rl-all:hover {
color: var(--c-accent);
text-decoration: underline;
}
.rl-all:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
}
/* Touch targets need the full 44px where taps are likely */
@media (max-width: 991.98px) {
.rl-list a {
min-height: 44px;
align-items: center;
}
.rl-list em {
margin-top: 0;
}
}
@media (max-width: 767.98px) {
.rl-panel {
padding: 26px 20px;
}
.rl-heading {
font-size: 24px;
}
}
@media(max-width:991px) {
.city-hero .booking-field:first-child {
flex: 1 1 50%;
}
.city-hero .booking-widget .fields-wrapper {
flex-wrap: nowrap;
}
.topdeal-rating {
font-size: 22px;
display: block
}
.topdeal-row.slick-initialized .slick-list {
padding-right: 80px
}
.icon-teaser.style5 .title {
font-size: 16px;
}
.icon-teaser.style5 {
font-size: 15px
}
.icon-teaser.style5 .icon {
min-width: 33px;
width: 33px;
}
.package-hero-intro {
text-align: left;
}
}
@media(max-width:767px) {
.blog-breadcrumb ol {
display: flex;
align-items: flex-start;
}
.blog-breadcrumb li,
.blog-breadcrumb a {
font-size: 11px;
line-height: normal;
}
.blog-breadcrumb ol {
gap: 0 6px
}
.package-hero {
padding-top: 20px;
}
.blog-breadcrumb ol li,
.blog-breadcrumb ol li a {
font-size: 10px;
}
}
@media(max-width:575px) {
.topdeal-row.slick-initialized .slick-list {
padding-right: 0px
}
.icon-teaser.style5 .title {
font-size: 12px
}
.icon-teaser.style5 {
font-size: 12px;
}
.icon-teaser.style5 .icon {
min-width: 22px;
width: 22px;
}
.tabs-wrapper {
margin-bottom: 40px
}
.topdeal-tabs {
flex-wrap: nowrap;
justify-content: flex-start;
margin-bottom: 5px
}
.topdeal-tabs .nav-link {
white-space: nowrap
}
}
.city-hero .hero-banner,
.resort-hero .hero-banner {
justify-content: space-between;
flex-direction: column;
padding-top: 20px;
}
.city-hero .hero-banner .blog-breadcrumb,
.resort-hero .blog-breadcrumb,
.vacpac-hero .blog-breadcrumb {
position: relative;
z-index: 1;
}
.city-hero .blog-breadcrumb a,
.city-hero .blog-breadcrumb li,
.resort-hero .blog-breadcrumb a,
.resort-hero .blog-breadcrumb li,
.package-hero .blog-breadcrumb a,
.package-hero .blog-breadcrumb li,
.vacpac-hero .blog-breadcrumb li,
.vacpac-hero .blog-breadcrumb a {
color: #fff;
}
.city-hero .blog-breadcrumb li:not(:last-child)::before,
.resort-hero .blog-breadcrumb li:not(:last-child)::before,
.package-hero .blog-breadcrumb li:not(:last-child)::before,
.vacpac-hero .blog-breadcrumb li:not(:last-child)::before {
color: #fff;
}
.city-hero .blog-breadcrumb a:hover,
.resort-hero .blog-breadcrumb a:hover,
.package-hero .blog-breadcrumb a:hover,
.vacpac-hero .blog-breadcrumb a:hover {
text-decoration: underline;
color: #FF8F68;
}
.resort-hero::after,
.city-hero::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 20.3%, rgba(0, 0, 0, 0.70) 100%)
}
.package-hero .blog-breadcrumb ol {
margin-bottom: 50px;
}
.resort-card,
.resort-featured,
.ticket-card {
transition: all 0.4s;
}
.resort-card:hover,
.resort-featured:hover {
transform: translateY(-6px);
box-shadow: 2px 8px 22px 3px rgba(0, 0, 0, 0.25);
}
.ticket-card:hover {
transform: translateY(-6px);
box-shadow: 2px 2px 20px 3px rgba(0, 0, 0, 0.25);
}
.related-card .related-media {
overflow: hidden;
border-radius: 16px;
}
.related-card .related-media img,
.topdeal-card .topdeal-media img {
transition: all 0.4s;
transform: scale(1);
}
.related-card:hover .related-media img,
.topdeal-card:hover .topdeal-media img {
transform: scale(1.1);
}
.topdeal-card .topdeal-media {
overflow: hidden;
border-radius: 20px;
}
.topdeal-card {
transition: all 0.4s;
}
.topdeal-card:hover {
transform: translateY(-6px);
}
.special-card .special-card-media,
.resort-card-media {
overflow: hidden;
}
.special-card-media img,
.resort-card-media img,
.blog-card-media img {
transition: all 0.4s;
}
.special-card:hover .special-card-media img,
.resort-card:hover .resort-card-media img {
transform: scale(1.05);
}
.blog-card:hover .blog-card-media img {
transform: scale(1.1);
}
.vacpac-card:hover {
transform: translateY(-6px);
}
.amenities-section .divider {
margin: 50px 0;
}
.city-hero .inner{
padding-top: 100px
}
.city-hero .hero-banner{
height: auto
}
.city-hero .hero-bg, .city-hero .hero-overlay {
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
/* === Hero Search: Searching Modal (submit interstitial) === */
.searching-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.searching-modal[hidden] {
display: none;
}
body.searching-modal-open {
overflow: hidden;
}
.searching-modal-overlay {
position: absolute;
inset: 0;
background: rgba(14, 37, 69, 0.55);
}
.searching-modal-card {
position: relative;
background: var(--c-white);
border-radius: 16px;
padding: 28px 32px;
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(14, 37, 69, 0.35);
}
.searching-modal-status {
font-size: 22px;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 18px;
}
.searching-modal-status em {
color: var(--c-blue);
margin-right: 6px;
}
.searching-modal-label {
font-weight: 600;
color: var(--c-primary);
margin: 0 0 2px;
}
.searching-modal-destination {
font-size: 34px;
line-height: 1.1;
font-weight: 700;
color: var(--c-primary);
margin: 0 0 20px;
}
.searching-modal-dates {
border: 1px solid #dee2e6;
border-radius: 10px;
overflow: hidden;
margin-bottom: 28px;
}
.searching-modal-date-row {
display: flex;
}
.searching-modal-date-row + .searching-modal-date-row {
border-top: 1px solid #dee2e6;
}
.searching-modal-date-row .date-key {
flex: 0 0 34%;
padding: 12px 16px;
font-weight: 700;
color: var(--c-primary);
border-right: 2px solid #dee2e6;
}
.searching-modal-date-row .date-val {
flex: 1;
padding: 12px 16px;
font-weight: 700;
color: var(--c-primary);
}
.searching-modal-trust {
background: #d2dfee;
border-radius: 10px;
padding: 8px 14px 6px;
margin-top: 34px;
text-align: center;
}
.searching-modal-shield {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--c-primary);
color: var(--c-white);
font-size: 22px;
margin-top: -34px;
box-shadow: 0 4px 12px rgba(14, 37, 69, 0.25);
}
.searching-modal-trust-heading {
font-size: 18px;
font-weight: 700;
color: var(--c-primary);
margin: 10px 0 14px;
}
.searching-modal-trust-list {
list-style: none;
display: flex;
gap: 8px;
margin: 0;
padding: 0 0 10px;
}
.searching-modal-trust-list li {
flex: 1;
font-weight: 700;
color: var(--c-primary);
font-size: 14px;
}
.searching-modal-trust-list .trust-check {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--c-white);
color: var(--c-primary);
margin: 0 auto 8px;
}
@media (max-width: 575px) {
.searching-modal-card {
padding: 22px 18px;
}
.searching-modal-destination {
font-size: 26px;
}
.searching-modal-trust-list {
flex-direction: column;
}
.searching-modal-trust-list li {
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}
.searching-modal-trust-list .trust-check {
margin: 0;
flex: 0 0 36px;
}
}
/* === Search summary: resort filter popup === */
.ss-pop-resort {
min-width: 280px;
max-height: 320px;
overflow-y: auto;
padding: 6px;
}
.ss-resort-list {
list-style: none;
margin: 0;
padding: 0;
}
.ss-resort-option {
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
color: var(--c-primary);
font-weight: 500;
}
.ss-resort-option:hover {
background: #f0f4f9;
}
.ss-resort-option[aria-selected="true"] {
background: #e6eef7;
font-weight: 700;
}
/* === Search summary: expanded Modify Search panel (live parity) === */
.modify-search-panel {
background: var(--c-primary);
border-radius: 12px;
padding: 28px;
margin-top: 18px;
}
.modify-search-form {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
}
.msf-field {
flex: 1 1 190px;
min-width: 0;
}
.msf-field label {
display: block;
color: var(--c-white);
font-weight: 600;
margin-bottom: 8px;
}
.msf-input {
display: flex;
align-items: center;
gap: 10px;
background: var(--c-white);
border-radius: 8px;
height: 54px;
padding: 0 14px;
color: var(--c-gray);
}
.msf-input em {
flex: 0 0 auto;
color: var(--c-primary);
}
.msf-input select,
.msf-input input {
border: 0;
outline: 0;
background: transparent;
width: 100%;
height: 100%;
font-family: inherit;
font-size: 16px;
font-weight: 600;
color: var(--c-primary);
cursor: pointer;
}
.msf-search-btn {
flex: 1 1 170px;
height: 54px;
border: 0;
border-radius: 8px;
background: var(--c-accent);
color: var(--c-white);
font-family: inherit;
font-size: 17px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: filter .15s;
}
.msf-search-btn:hover {
filter: brightness(1.08);
}
@media (max-width: 767px) {
.modify-search-panel {
padding: 18px;
}
.msf-field,
.msf-search-btn {
flex-basis: 100%;
}
}
/* === Summary calendar: season coloring + legend (live parity) === */
.ss-cal-day.is-season-value { background: #d9efdb; }
.ss-cal-day.is-season-average { background: #ffffff; box-shadow: inset 0 0 0 1px #e6e6e6; }
.ss-cal-day.is-season-peak { background: #fdeec8; }
.ss-cal-day.is-season-holiday { background: #f8d7dd; }
.ss-cal-day.is-selected.is-season-value,
.ss-cal-day.is-selected.is-season-average,
.ss-cal-day.is-selected.is-season-peak,
.ss-cal-day.is-selected.is-season-holiday { background: var(--c-accent); }
.ss-cal-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 4px 2px;
}
.ss-legend {
font-size: 12px;
font-weight: 600;
color: var(--c-primary);
border-radius: 6px;
padding: 4px 10px;
border: 1px solid #e6e6e6;
}
.ss-legend-value { background: #d9efdb; }
.ss-legend-average { background: #ffffff; }
.ss-legend-peak { background: #fdeec8; }
.ss-legend-holiday { background: #f8d7dd; }
/* === Search results: AJAX loading state === */
section.search-results.is-loading {
position: relative;
opacity: .45;
pointer-events: none;
}
section.search-results.is-loading::after {
content: "";
position: absolute;
top: 80px;
left: 50%;
width: 44px;
height: 44px;
margin-left: -22px;
border: 4px solid rgba(14, 37, 69, .2);
border-top-color: var(--c-accent);
border-radius: 50%;
animation: wgb-spin .8s linear infinite;
}
@keyframes wgb-spin {
to { transform: rotate(360deg); }
}
/* === Modify panel: shared range calendar === */
.msf-field-date {
position: relative;
}
.msf-date-trigger {
width: 100%;
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 16px;
font-weight: 600;
color: var(--c-primary);
}
.msf-cal {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 40;
background: var(--c-white);
border-radius: 12px;
box-shadow: 0 14px 40px rgba(14, 37, 69, .22);
padding: 16px;
min-width: 340px;
}
.msf-cal[hidden] {
display: none;
}
@media (max-width: 767px) {
.msf-cal {
left: 0;
right: auto;
min-width: 300px;
}
}
/* === Cart block (billing-details) === */
.order-promo-message {
margin: 8px 0 0;
font-size: 13px;
font-weight: 600;
display: none;
}
.order-promo-message.is-valid {
display: block;
color: #46a24a;
}
.order-promo-message.is-invalid {
display: block;
color: #d63638;
}
.cart-empty {
padding: 48px 0 64px;
}
.cart-empty-text {
margin: 8px 0 24px;
color: #5c6770;
}
.cart-empty .cart-empty-btn {
display: inline-flex;
width: auto;
padding: 14px 40px;
}
/* === Search results: Photos / Info links + overview popup (live parity) === */
.result-media-links {
display: flex;
align-items: center;
gap: 22px;
margin: 0 0 20px;
}
.result-media-links .result-info {
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.result-media-links .result-info em {
font-size: 15px;
}
.result-media-links .result-info:hover {
color: var(--c-accent);
}
.result-head-media img[data-wgb-photos],
.room-row-media img[data-wgb-photos] {
cursor: pointer;
}
body.wgb-modal-open {
overflow: hidden;
}
.wgb-modal {
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(20, 20, 20, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.wgb-modal[hidden] {
display: none;
}
.wgb-modal-dialog {
position: relative;
background: #fff;
width: 100%;
max-width: 640px;
max-height: 85vh;
overflow-y: auto;
padding: 30px 34px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.wgb-modal-close {
position: absolute;
top: 12px;
right: 14px;
border: 1px solid var(--c-accent);
background: #fff;
color: var(--c-accent);
width: 32px;
height: 32px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.wgb-modal-close:hover {
background: var(--c-accent);
color: #fff;
}
.wgb-modal-title {
font-size: 22px;
font-weight: 700;
margin: 0 30px 14px 0;
}
.wgb-modal-summary {
margin: 0 0 18px;
line-height: 1.6;
}
.wgb-modal-subtitle {
font-size: 18px;
font-weight: 700;
margin: 0 0 10px;
}
.wgb-modal-amenities {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 30px;
}
.wgb-modal-amenities li {
padding: 3px 0;
break-inside: avoid;
}
.wgb-modal-actions {
text-align: center;
margin-top: 22px;
}
.wgb-modal-btn {
border: 1px solid var(--c-accent);
background: #fff;
color: var(--c-accent);
padding: 10px 36px;
border-radius: 35px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.wgb-modal-btn:hover {
background: var(--c-accent);
color: #fff;
}
@media (max-width: 575.98px) {
.wgb-modal-dialog {
padding: 24px 20px;
}
.wgb-modal-amenities {
columns: 1;
}
}
/* === Search results: room details Load More toggle === */
.room-details-toggle {
border: 0;
background: none;
padding: 0;
margin: 4px 0 0;
font-size: 14px;
font-weight: 700;
color: var(--c-accent);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.room-details-toggle em {
font-size: 12px;
transition: transform 0.2s ease;
}
.room-details-toggle[aria-expanded="true"] em {
transform: rotate(180deg);
}
/* === Search results: room photo crop fix ===
The static comps shipped pre-cropped room images; real synced photos come in
arbitrary sizes. Pin the img inside the media box so its natural size never
drives the row height — the design's crop always holds. */
.room-row-media {
position: relative;
overflow: hidden;
}
.room-row-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
min-height: 0;
}
@media (max-width: 991.98px) {
/* Stacked layout: the box needs its own ratio again (the <=1200px rule
switches it to height:100%, which is 0 once the columns stack). */
.room-row-media {
aspect-ratio: 16/9;
height: auto;
}
}
/* === Cart: multiple items, remove control, header count badge === */
.cart-border-wrapper .cart-item-border + .cart-item-border {
margin-top: 16px;
}
.cart-item-body {
position: relative;
}
.cart-item-remove {
position: absolute;
top: 0;
right: 0;
border: 0;
background: none;
padding: 0;
font-size: 14px;
color: #8c8f94;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
}
.cart-item-remove:hover {
color: var(--c-accent);
}
.cart-item-total {
margin: 8px 0 0;
font-size: 15px;
}
.cart-item-total strong {
color: var(--c-primary);
}
.header-cart {
position: relative;
}
.header-cart-count {
position: absolute;
top: -8px;
right: -10px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--c-accent);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.header-cart-count[hidden] {
display: none;
}
/* === Calendars: past days are white and not selectable === */
.cal-day-disabled,
.cal-day-disabled:hover,
.booking-cal-day.is-past,
.booking-cal-day.is-past:hover,
.ss-cal-day.is-past,
.ss-cal-day.is-past:hover {
background: #fff;
color: #c6c8cc;
cursor: not-allowed;
pointer-events: none;
}
/* === Calendars: past days are white and not selectable === */
.cal-day-disabled,
.cal-day-disabled:hover,
.booking-cal-day.is-past,
.booking-cal-day.is-past:hover,
.ss-cal-day.is-past,
.ss-cal-day.is-past:hover {
background: #fff;
color: #c6c8cc;
cursor: not-allowed;
pointer-events: none;
}
/* === Vacation Upgrades (add-ons funnel step) === */
.upgrade-item-desc {
margin: 4px 0 10px;
font-size: 14px;
color: #6d6d6d;
}
.upgrade-item-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.upgrade-item-price {
margin: 0;
font-size: 16px;
}
.upgrade-item-price strong {
color: var(--c-primary);
}
.upgrade-item-qty {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.upgrade-item-qty input {
width: 64px;
padding: 6px 8px;
border: 1px solid #dcdcde;
border-radius: 6px;
text-align: center;
}
.upgrades-skip {
display: block;
margin-top: 12px;
text-align: center;
font-size: 14px;
color: #6d6d6d;
text-decoration: underline;
}
/* === Topbar notice (promo / affiliate strips) === */
.site-topbar {
background: var(--c-primary);
color: #fff;
font-size: 14px;
padding: 8px 0;
text-align: center;
}
.site-topbar.topbar-affiliate {
background: var(--c-accent);
}
.site-topbar a {
color: #fff;
text-decoration: underline;
}
.site-topbar p {
margin: 0;
}
/* === Contact form notices === */
.contact-form-notice {
padding: 12px 16px;
border-radius: 8px;
margin: 0 0 16px;
font-size: 15px;
}
.contact-form-notice-success {
background: #e7f6ec;
color: #1a7f37;
border: 1px solid #9fd6b0;
}
.contact-form-notice-error {
background: #fdeaea;
color: #b32d2e;
border: 1px solid #f0b3b4;
}