:root {
--clr-primary: #0077b6;
--clr-primary-dark: #005f8a;
--clr-primary-light: #00b4d8;
--clr-gold: #c9a227;
--clr-gold-dark: #9d7e1f;
--clr-gold-light: #e8c25a;
--clr-coral: #e05c2a;
--clr-coral-dark: #c14a1e;
--clr-dark: #0f2131;
--clr-dark-2: #16293c;
--clr-surface: #ffffff;
--clr-surface-alt: #f7f5f0;
--clr-text: #26313d;
--clr-text-muted: #647082;
--clr-border: #e7e2d8;
--clr-success: #1f9d55;
--clr-danger: #d1453b;
--clr-warning: #d4900d;
--shadow-sm: 0 2px 8px rgba(15,33,49,.08);
--shadow: 0 6px 24px rgba(15,33,49,.12);
--shadow-lg: 0 14px 44px rgba(15,33,49,.18);
--shadow-gold:0 10px 30px rgba(201,162,39,.32);
--r-sm: 8px;
--r: 14px;
--r-lg: 22px;
--r-xl: 32px;
--r-pill: 999px;
--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
--sp-9: 6rem;
--tr: all .28s cubic-bezier(.4,0,.2,1);
--tr-fast: all .16s ease;
--grad-primary: linear-gradient(135deg, #0077b6 0%, #005f8a 100%);
--grad-gold: linear-gradient(135deg, #c9a227 0%, #9d7e1f 100%);
--grad-dark: linear-gradient(160deg, #0f2131 0%, #16293c 100%);
--grad-overlay: linear-gradient(180deg, rgba(10,20,32,.15) 0%, rgba(10,20,32,.78) 100%);
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-head: 'Poppins', 'Inter', sans-serif;
}
[dir="rtl"] {
--font-body: 'Cairo', 'Tahoma', 'Arial', sans-serif;
--font-head: 'Cairo', 'Tahoma', 'Arial', sans-serif;
}
:root {
--bs-primary: var(--clr-primary);
--bs-primary-rgb: 0,119,182;
--bs-link-color: var(--clr-primary);
--bs-link-hover-color: var(--clr-gold);
--bs-border-radius: var(--r-sm);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.7;
color: var(--clr-text);
background: var(--clr-surface);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
max-width: 100vw;
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-head);
font-weight: 700;
color: var(--clr-dark);
line-height: 1.28;
text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
h3 { font-size: 1.3rem; }
a { color: var(--clr-primary); text-decoration: none; transition: var(--tr-fast); }
a:hover { color: var(--clr-gold); }
img { max-width: 100%; height: auto; }
.container { max-width: 1240px; }
::selection { background: var(--clr-gold); color: #fff; }
:focus-visible {
outline: 2px solid var(--clr-gold);
outline-offset: 2px;
}
.section { padding: var(--sp-8) 0; }
.section-sm { padding: var(--sp-7) 0; }
.section-alt { background: var(--clr-surface-alt); }
.section-title { text-align: center; max-width: 640px; margin: 0 auto var(--sp-7); }
.section-title .eyebrow {
display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--clr-gold-dark); margin-bottom: var(--sp-2);
}
.section-title h2 { margin-bottom: var(--sp-3); }
.section-title p { color: var(--clr-text-muted); margin: 0; }
.btn-brand,
.btn-brand-outline,
.btn-gold,
.btn-light-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: .5em;
font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
padding: .8em 1.7em; border-radius: var(--r-pill);
border: 1.5px solid transparent; cursor: pointer;
transition: var(--tr);
}
.btn-brand { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-brand:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; }
.btn-gold { background: var(--grad-gold); color: #fff; box-shadow: var(--shadow-gold); }
.btn-gold:hover { transform: translateY(-2px); color: #fff; filter: brightness(1.05); }
.btn-brand-outline { border-color: var(--clr-primary); color: var(--clr-primary); background: transparent; }
.btn-brand-outline:hover { background: var(--clr-primary); color: #fff; }
.btn-light-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(2px); }
.btn-light-ghost:hover { background: #fff; color: var(--clr-dark); }
.btn-sm { padding: .55em 1.3em; font-size: 13px; }
.topbar {
background: var(--clr-dark);
padding: 9px 0;
border-bottom: 1px solid rgba(255,255,255,.07);
font-size: 13px;
position: relative;
z-index: 1030;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.topbar-contacts { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.topbar-contacts a {
color: rgba(255,255,255,.8); display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.topbar-contacts a:hover { color: var(--clr-gold); background: rgba(201,162,39,.1); border-color: rgba(201,162,39,.25); }
.topbar-contacts i { color: var(--clr-gold); font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-socials { display: flex; align-items: center; gap: 6px; }
.topbar-socials a {
width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.88); font-size: 13.5px;
border: 1px solid rgba(255,255,255,.16); transition: var(--tr);
}
.topbar-socials a:hover { background: var(--clr-gold); border-color: var(--clr-gold); color: #fff; }
.fa-brands.fa-tripadvisor {
display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M280 264a24 24 0 1 0-48 0 24 24 0 0 0 48 0zm-136 0a24 24 0 1 0-48 0 24 24 0 0 0 48 0zM256 56C145 56 51 129 19 232H0l64 64 64-64H97c13-41 37-77 70-104a184 184 0 0 1 178 0c33 27 57 63 70 104h-31l64 64 64-64h-18C482 129 367 56 256 56zm0 332a148 148 0 1 1 0-296 148 148 0 0 1 0 296z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M280 264a24 24 0 1 0-48 0 24 24 0 0 0 48 0zm-136 0a24 24 0 1 0-48 0 24 24 0 0 0 48 0zM256 56C145 56 51 129 19 232H0l64 64 64-64H97c13-41 37-77 70-104a184 184 0 0 1 178 0c33 27 57 63 70 104h-31l64 64 64-64h-18C482 129 367 56 256 56zm0 332a148 148 0 1 1 0-296 148 148 0 0 1 0 296z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fa-brands.fa-tripadvisor::before { content: none; }
.pill-dropdown .dropdown-toggle {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255,255,255,.88) !important; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
padding: 5px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
cursor: pointer; transition: var(--tr);
}
.pill-dropdown .dropdown-toggle:hover,
.pill-dropdown .dropdown-toggle:focus { background: var(--clr-gold); border-color: var(--clr-gold); color: #fff !important; }
.pill-dropdown .dropdown-toggle::after { display: none; }
.pill-dropdown .dropdown-toggle .chevron { font-size: 10px; transition: transform .2s; }
.pill-dropdown.show .dropdown-toggle .chevron { transform: rotate(180deg); }
.pill-dropdown .dropdown-toggle .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.pill-dropdown .dropdown-menu {
border: none; border-radius: var(--r); box-shadow: var(--shadow-lg);
padding: 6px; margin-top: 10px !important; min-width: 130px;
border-top: 3px solid var(--clr-gold);
}
.pill-dropdown .dropdown-menu .dropdown-item {
border-radius: var(--r-sm); padding: 8px 12px; font-size: 13.5px;
display: flex; align-items: center; gap: 8px; color: var(--clr-text);
}
.pill-dropdown .dropdown-menu .dropdown-item:hover,
.pill-dropdown .dropdown-menu .dropdown-item.active { background: var(--clr-surface-alt); color: var(--clr-primary); }
.pill-dropdown .dropdown-menu .dropdown-item img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.site-navbar {
background: var(--clr-dark);
position: relative; z-index: 1020;
padding: 10px 0;
}
.site-navbar.is-sticky {
position: fixed; top: 0; inset-inline: 0; background: var(--clr-dark);
box-shadow: var(--shadow); padding: 10px 0;
}
@media (min-width: 992px) {
.site-navbar {
background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 70%, rgba(0,0,0,0) 100%);
position: absolute; inset-inline: 0; top: 42px;
transition: var(--tr);
padding: var(--sp-4) 0;
}
}
.site-navbar .navbar-brand img { height: 46px; width: auto; display: block; }
.site-nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.site-nav-links > li { position: relative; }
.site-nav-links > li > a {
display: block; padding: 10px 16px; color: rgba(255,255,255,.92);
font-weight: 500; font-size: 14.5px; border-radius: var(--r-sm);
}
.site-nav-links > li > a:hover,
.site-nav-links > li.active > a { color: var(--clr-gold); }
.site-nav-links > li > .dropdown-menu {
border: none; border-radius: var(--r); box-shadow: var(--shadow-lg);
padding: 8px; margin-top: 8px; min-width: 220px; border-top: 3px solid var(--clr-gold);
}
.site-nav-links .dropdown-item { border-radius: var(--r-sm); padding: 9px 14px; font-size: 14px; }
.site-nav-links .dropdown-item:hover { background: var(--clr-surface-alt); color: var(--clr-primary); }
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.navbar-toggler-brand {
width: 44px; height: 44px; border-radius: var(--r-sm);
border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-size: 18px;
}
.offcanvas-brand { background: var(--clr-dark); color: #fff; width: 300px; }
.offcanvas-brand .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.offcanvas-brand .btn-close { filter: invert(1); opacity: .8; }
.offcanvas-toolbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.offcanvas-socials { margin-inline-start: auto; }
.offcanvas-nav { list-style: none; margin: 0; padding: 0; }
.offcanvas-nav > li > a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 4px; color: #fff; font-weight: 500; font-size: 15px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.offcanvas-nav .submenu { list-style: none; padding-inline-start: 16px; margin: 0; display: none; }
.offcanvas-nav .submenu.show { display: block; }
.offcanvas-nav .submenu > li > a { display: block; padding: 10px 4px; color: rgba(255,255,255,.72); font-size: 14px; }
.offcanvas-nav .caret-btn { background: none; border: none; color: #fff; font-size: 13px; padding: 4px 8px; }
.hero { position: relative; overflow: hidden; }
.hero .carousel-item { height: min(78vh, 640px); min-height: 420px; }
.hero .slide-bg {
position: absolute; inset: 0; background-size: cover; background-position: center;
}
.hero .slide-bg::after { content:''; position: absolute; inset: 0; background: var(--grad-overlay); }
.hero .slide-content {
position: relative; z-index: 2; height: 100%; display: flex; align-items: center;
color: #fff; text-align: center;
}
.hero .slide-content .container { max-width: 780px; }
.hero h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); margin-bottom: var(--sp-2); }
.hero .slide-sub { color: rgba(255,255,255,.85); font-size: 1.05rem; margin-bottom: var(--sp-5); }
.hero .carousel-indicators [data-bs-target] { background: rgba(255,255,255,.5); width: 8px; height: 8px; border-radius: 50%; }
.hero .carousel-indicators .active { background: var(--clr-gold); }
.hero .carousel-control-prev,
.hero .carousel-control-next { width: 56px; opacity: 0; transition: var(--tr); }
.hero:hover .carousel-control-prev,
.hero:hover .carousel-control-next { opacity: .85; }
.page-banner {
position: relative; padding: var(--sp-9) 0 var(--sp-7);
background: var(--grad-dark); background-size: cover; background-position: center;
color: #fff; text-align: center;
}
.page-banner::after { content:''; position: absolute; inset: 0; background: var(--grad-overlay); z-index: 0; }
.page-banner .container { position: relative; z-index: 1; }
.page-banner h1 { color: #fff; margin-bottom: var(--sp-2); }
.breadcrumb-brand { justify-content: center; margin: 0; font-size: 13.5px; }
.breadcrumb-brand .breadcrumb-item,
.breadcrumb-brand .breadcrumb-item a { color: rgba(255,255,255,.72); }
.breadcrumb-brand .breadcrumb-item.active { color: var(--clr-gold); }
.breadcrumb-brand .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4); content: "\203A"; }
.tour-card, .package-card, .blog-card {
background: var(--clr-surface); border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow-sm); border: 1px solid var(--clr-border);
transition: var(--tr); height: 100%; display: flex; flex-direction: column;
}
.tour-card:hover, .package-card:hover, .blog-card:hover {
transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent;
}
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tour-card:hover .card-media img,
.package-card:hover .card-media img,
.blog-card:hover .card-media img { transform: scale(1.08); }
.card-badge {
position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
background: var(--grad-gold); color: #fff; font-size: 12px; font-weight: 700;
padding: 5px 12px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.card-date-badge {
position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 2;
background: rgba(15,33,49,.82); color: #fff; font-size: 12px; font-weight: 600;
padding: 5px 12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px;
}
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 17px; margin: 0; }
.card-body h3 a { color: var(--clr-dark); }
.card-body h3 a:hover { color: var(--clr-primary); }
.card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--clr-text-muted); }
.card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-meta i { color: var(--clr-gold); }
.card-footer-row {
margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--clr-border);
display: flex; align-items: center; justify-content: space-between;
}
.card-price { font-family: var(--font-head); font-weight: 700; color: var(--clr-primary); font-size: 17px; }
.card-price small { display: block; font-size: 11px; font-weight: 500; color: var(--clr-text-muted); }
.card-cta { font-size: 13.5px; font-weight: 600; color: var(--clr-coral); display: inline-flex; align-items: center; gap: 5px; }
.card-cta i { transition: transform .2s; }
.card-cta:hover i { transform: translateX(3px); }
[dir="rtl"] .card-cta:hover i { transform: translateX(-3px); }
.scroll-row {
display: flex; gap: var(--sp-4); overflow-x: auto; padding: 4px 4px 14px;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: var(--clr-gold) var(--clr-border);
}
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-track { background: var(--clr-border); border-radius: var(--r-pill); }
.scroll-row::-webkit-scrollbar-thumb { background: var(--clr-gold); border-radius: var(--r-pill); }
.scroll-item { scroll-snap-align: start; flex: 0 0 auto; width: min(82vw, 300px); }
.feature-item { text-align: center; padding: var(--sp-5); }
.feature-icon {
width: 72px; height: 72px; margin: 0 auto var(--sp-4); border-radius: 50%;
background: var(--grad-primary); color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 28px; box-shadow: var(--shadow);
}
.feature-item h4 { font-size: 16.5px; margin-bottom: 8px; }
.feature-item p { color: var(--clr-text-muted); font-size: 14px; margin: 0; }
.brand-tabs { border-bottom: 2px solid var(--clr-border); margin-bottom: var(--sp-6); flex-wrap: wrap; gap: 4px; }
.brand-tabs .nav-link {
color: var(--clr-text-muted); font-weight: 600; font-size: 14px;
padding: 11px 18px; border: none; border-bottom: 3px solid transparent;
border-radius: 0; margin-bottom: -2px;
}
.brand-tabs .nav-link:hover { color: var(--clr-primary); }
.brand-tabs .nav-link.active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); background: transparent; }
.include-list, .exclude-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.include-list li, .exclude-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.include-list li::before {
content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
color: #fff; background: var(--clr-success); width: 20px; height: 20px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 2px;
}
.exclude-list li::before {
content: '\f00d'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
color: #fff; background: var(--clr-danger); width: 20px; height: 20px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; margin-top: 2px;
}
.itinerary-list { position: relative; padding-inline-start: 0; list-style: none; margin: 0; }
.itinerary-list::before {
content: ''; position: absolute; inset-inline-start: 19px; top: 24px; bottom: 24px;
width: 2px; background: linear-gradient(to bottom, var(--clr-primary), var(--clr-gold));
}
.itinerary-step {
position: relative; padding: var(--sp-4) var(--sp-4) var(--sp-4) 60px;
margin-bottom: var(--sp-3); background: var(--clr-surface); border: 1px solid var(--clr-border);
border-radius: var(--r); box-shadow: var(--shadow-sm); transition: var(--tr-fast);
}
[dir="rtl"] .itinerary-step { padding: var(--sp-4) 60px var(--sp-4) var(--sp-4); }
.itinerary-step:hover { transform: translateX(4px); box-shadow: var(--shadow); }
[dir="rtl"] .itinerary-step:hover { transform: translateX(-4px); }
.itinerary-step .step-num {
position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border-radius: 50%; background: var(--grad-primary); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.itinerary-step h4 { font-size: 15px; margin: 0 0 2px; }
.itinerary-step p { font-size: 13.5px; color: var(--clr-text-muted); margin: 0; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.price-table th { background: var(--clr-surface-alt); font-weight: 700; padding: 12px 14px; text-align: start; color: var(--clr-dark); }
.price-table td { padding: 12px 14px; border-top: 1px solid var(--clr-border); }
.price-table tr:first-child th:first-child { border-start-start-radius: var(--r-sm); }
.price-table tr:first-child th:last-child { border-start-end-radius: var(--r-sm); }
.brand-accordion .accordion-item { border: 1px solid var(--clr-border); border-radius: var(--r) !important; margin-bottom: 12px; overflow: hidden; }
.brand-accordion .accordion-button {
font-weight: 600; font-size: 15px; color: var(--clr-dark); padding: 16px 20px;
box-shadow: none !important;
}
.brand-accordion .accordion-button:not(.collapsed) { background: var(--clr-surface-alt); color: var(--clr-primary); }
.brand-accordion .accordion-button::after { filter: none; }
.brand-accordion .accordion-body { padding: 16px 20px 20px; color: var(--clr-text-muted); font-size: 14.5px; }
.form-control, .form-select {
border-radius: var(--r-sm); border-color: var(--clr-border); font-size: 14.5px;
padding: .68rem .9rem;
}
.form-control:focus, .form-select:focus {
border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(0,119,182,.14);
}
.form-label { font-size: 13.5px; font-weight: 600; color: var(--clr-dark); margin-bottom: 6px; }
.form-floating > label { font-size: 14.5px; color: var(--clr-text-muted); }
textarea.form-control { min-height: 110px; }
.honeypot-field { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }
.booking-card {
background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--r-lg);
box-shadow: var(--shadow); padding: var(--sp-6);
}
.booking-card h3 { font-size: 18px; margin-bottom: 4px; }
.booking-card .booking-underline { width: 44px; height: 3px; background: var(--clr-gold); border-radius: var(--r-pill); margin-bottom: var(--sp-4); }
.booking-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--sp-4); }
.booking-price-row .amount { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--clr-primary); }
.booking-price-row .unit { font-size: 13px; color: var(--clr-text-muted); }
.price-live-panel { background: var(--clr-surface-alt); border-radius: var(--r); padding: var(--sp-4); margin-top: var(--sp-3); }
.price-live-panel .total { font-size: 20px; font-weight: 700; color: var(--clr-primary); font-family: var(--font-head); }
.payment-method-row { display: flex; gap: 14px; flex-wrap: wrap; }
.payment-method-row label {
display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--clr-border);
border-radius: var(--r-sm); padding: 10px 14px; font-size: 13.5px; cursor: pointer; transition: var(--tr-fast);
}
.payment-method-row input:checked + span,
.payment-method-row label:has(input:checked) { border-color: var(--clr-primary); background: rgba(0,119,182,.05); color: var(--clr-primary); }
.need-help-card { background: var(--grad-dark); color: #fff; border-radius: var(--r-lg); padding: var(--sp-6); }
.need-help-card p { color: rgba(255,255,255,.72); }
.need-help-card a.phone-link { color: var(--clr-gold); font-weight: 700; font-size: 16px; }
.gallery-main { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.gallery-main .carousel-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap: 8px; margin-top: 10px; }
.gallery-thumbs button {
padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden;
aspect-ratio: 1; cursor: pointer; background: none;
}
.gallery-thumbs button.active { border-color: var(--clr-gold); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-expand-btn {
position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2;
background: rgba(15,33,49,.72); color: #fff; border: none; border-radius: var(--r-pill);
padding: 8px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
.modal-gallery .modal-content { background: rgba(10,16,24,.97); border: none; }
.modal-gallery .btn-close { filter: invert(1); }
.modal-gallery .carousel-item img { max-height: 82vh; object-fit: contain; width: 100%; }
.review-item { border: 1px solid var(--clr-border); border-radius: var(--r); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); }
.review-item .review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.review-item .reviewer { font-weight: 700; font-size: 14.5px; color: var(--clr-dark); }
.review-item .review-date { font-size: 12.5px; color: var(--clr-text-muted); }
.review-item p { margin: 0; font-size: 14px; color: var(--clr-text); }
.site-footer { background: var(--clr-dark); color: rgba(255,255,255,.7); padding: var(--sp-8) 0 var(--sp-5); }
.site-footer h4 { color: #fff; font-size: 15.5px; margin-bottom: var(--sp-4); position: relative; padding-bottom: 10px; }
.site-footer h4::after { content:''; position: absolute; bottom: 0; inset-inline-start: 0; width: 34px; height: 2px; background: var(--clr-gold); }
.site-footer .footer-logo { height: 48px; margin-bottom: var(--sp-3); }
.site-footer p { font-size: 13.5px; line-height: 1.8; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.68); font-size: 13.5px; }
.footer-links a:hover { color: var(--clr-gold); padding-inline-start: 4px; }
.footer-contact-list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: 10px; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.72); }
.footer-contact-list i { color: var(--clr-gold); width: 16px; }
.footer-contact-list--light li { color: var(--clr-text); }
.footer-contact-list--light a { color: inherit; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: var(--sp-6); padding-top: var(--sp-4); font-size: 12.5px; text-align: center; color: rgba(255,255,255,.55); }
.whatsapp-fab {
position: fixed; bottom: 26px; inset-inline-start: 26px; z-index: 1040;
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg,#25d366,#1abe5b); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 26px;
box-shadow: 0 6px 22px rgba(37,211,102,.45); transition: var(--tr);
}
.whatsapp-fab:hover { transform: scale(1.1); color: #fff; }
.brand-toast-region { position: fixed; top: 20px; inset-inline-end: 20px; z-index: 1090; display: grid; gap: 10px; }
.brand-toast {
min-width: 260px; max-width: 340px; background: var(--clr-surface); border-radius: var(--r);
box-shadow: var(--shadow-lg); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start;
border-inline-start: 4px solid var(--clr-primary); animation: toast-in .25s ease;
}
.brand-toast.success { border-inline-start-color: var(--clr-success); }
.brand-toast.error { border-inline-start-color: var(--clr-danger); }
.brand-toast .t-title { font-weight: 700; font-size: 13.5px; color: var(--clr-dark); }
.brand-toast .t-msg { font-size: 13px; color: var(--clr-text-muted); }
@keyframes toast-in { from { opacity:0; transform: translateY(-8px);} to { opacity:1; transform: translateY(0);} }
.pagination { gap: 6px; }
.pagination .page-link {
border-radius: var(--r-sm) !important; border-color: var(--clr-border); color: var(--clr-text);
min-width: 40px; text-align: center;
}
.pagination .page-item.active .page-link { background: var(--clr-primary); border-color: var(--clr-primary); }
.cookie-banner {
position: fixed; bottom: 0; inset-inline: 0; z-index: 1080; background: var(--clr-dark); color: rgba(255,255,255,.85);
padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; font-size: 13.5px;
}
.cms-content { max-width: 820px; margin: 0 auto; font-size: 15.5px; line-height: 1.85; }
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.cms-content h1:first-child, .cms-content h2:first-child { margin-top: 0; }
.cms-content p { margin-bottom: var(--sp-4); color: var(--clr-text); }
.cms-content ul, .cms-content ol { margin-bottom: var(--sp-4); padding-inline-start: 1.4em; }
.cms-content li { margin-bottom: 6px; }
.cms-content a { text-decoration: underline; }
.cms-content blockquote { border-inline-start: 3px solid var(--clr-gold); padding-inline-start: var(--sp-4); color: var(--clr-text-muted); font-style: italic; margin: var(--sp-5) 0; }
.cms-content img { border-radius: var(--r); margin: var(--sp-4) 0; }
.cms-content table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.cms-content table th, .cms-content table td { padding: 10px 14px; border: 1px solid var(--clr-border); }
.stats-strip { background: var(--grad-dark); border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-5); color: #fff; }
.stat-item { text-align: center; }
.stat-item .num { font-family: var(--font-head); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; color: var(--clr-gold); }
.stat-item .label { font-size: 13px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 767.98px) {
.section { padding: var(--sp-7) 0; }
.hero .carousel-item { height: 72vh; min-height: 380px; }
.mobile-carousel {
display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; padding-bottom: 10px; margin: 0 -4px;
scrollbar-width: thin; scrollbar-color: var(--clr-gold) var(--clr-border);
}
.mobile-carousel::-webkit-scrollbar { height: 6px; }
.mobile-carousel::-webkit-scrollbar-track { background: var(--clr-border); border-radius: var(--r-pill); }
.mobile-carousel::-webkit-scrollbar-thumb { background: var(--clr-gold); border-radius: var(--r-pill); }
.mobile-carousel > [class*="col-"] {
flex: 0 0 80%; max-width: 80%; scroll-snap-align: start; padding: 0 4px;
}
}
.datepicker {
font-family: var(--font-body); border: none; border-radius: var(--r-lg);
box-shadow: var(--shadow-lg); padding: var(--sp-4); background: var(--clr-surface);
z-index: 1070;
}
.datepicker table { width: 100%; }
.datepicker table tr td, .datepicker table tr th { border: none; }
.datepicker th.datepicker-switch {
font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--clr-dark);
border-radius: var(--r-sm);
}
.datepicker th.prev, .datepicker th.next {
color: var(--clr-primary); font-size: 15px; border-radius: 50%; width: 32px;
}
.datepicker th.prev:hover, .datepicker th.next:hover,
.datepicker th.datepicker-switch:hover { background: var(--clr-surface-alt); cursor: pointer; }
.datepicker th.dow { color: var(--clr-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; padding-bottom: 6px; }
.datepicker td, .datepicker th { width: 34px; height: 34px; padding: 3px; }
.datepicker td.day {
border-radius: 50%; font-size: 13.5px; color: var(--clr-text); transition: var(--tr-fast);
}
.datepicker td.day:hover { background: var(--clr-surface-alt); cursor: pointer; }
.datepicker td.old, .datepicker td.new { color: var(--clr-border) !important; }
.datepicker td.today { background: rgba(201,162,39,.14) !important; color: var(--clr-gold-dark) !important; font-weight: 700; }
.datepicker td.today:hover { background: rgba(201,162,39,.24) !important; }
.datepicker td.active,
.datepicker td.active:hover {
background: var(--grad-primary) !important; color: #fff !important; font-weight: 700;
box-shadow: 0 4px 12px rgba(0,119,182,.35);
}
.datepicker td.disabled, .datepicker td.disabled:hover {
color: var(--clr-border) !important; background: none !important; cursor: not-allowed;
}
.datepicker .datepicker-months .month,
.datepicker .datepicker-years .year,
.datepicker .datepicker-decades .decade {
border-radius: var(--r-sm); transition: var(--tr-fast);
}
.datepicker .datepicker-months .month:hover,
.datepicker .datepicker-years .year:hover,
.datepicker .datepicker-decades .decade:hover { background: var(--clr-surface-alt); }
.datepicker .datepicker-months .focused,
.datepicker .datepicker-years .focused,
.datepicker .datepicker-decades .focused { background: var(--clr-surface-alt); }
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}