body, html {
margin: 0;
padding: 0;
font-family: "Questrial", sans-serif;
background: #fff;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.trek-brand-header,
.trek-card-title,
.offcanvas-title {
font-family: 'Playfair Display', serif;
}
/* ==========================================================================
1. GLOBAL HEADER & NAVBAR LAYOUT
========================================================================== */
.explor-global-header {
position: absolute;
top: 0;
width: 100%;
z-index: 1030;
background: transparent;
}
.explor-global-header .navbar {
background-color: transparent;
padding: 0;
}
.explor-global-header .navbar-container {
position: relative; /* Anchors absolute dropdown panels */
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Container Media Queries (Replicating Bootstrap .container) */
@media (min-width: 576px) { .explor-global-header .navbar-container { max-width: 540px; } }
@media (min-width: 768px) { .explor-global-header .navbar-container { max-width: 720px; } }
@media (min-width: 992px) { .explor-global-header .navbar-container { max-width: 960px; } }
@media (min-width: 1200px) { .explor-global-header .navbar-container { max-width: 1140px; } }
@media (min-width: 1400px) { .explor-global-header .navbar-container { max-width: 1320px; } }
/* ==========================================================================
2. BRAND LOGO & NAV TOGGLER
========================================================================== */
.explor-global-header .navbar-brand {
color: #ffffff;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 0.05em;
text-decoration: none;
}
.explor-global-header .navbar-brand img {
width: 100px;
border-radius: 16px;
display: block;
}
.explor-global-header .navbar-toggler {
border: 0;
box-shadow: none;
padding-left: 0;
padding-right: 0;
background: transparent;
cursor: pointer;
}
/* ==========================================================================
3. DESKTOP NAVIGATION LINKS & DROPDOWNS
========================================================================== */
.explor-global-header .central-links {
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
gap: 2rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.8rem;
font-weight: 500;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.explor-global-header .central-links .nav-link {
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s ease;
padding: 1.5rem 0;
display: block;
}
.explor-global-header .central-links .nav-link:hover,
.explor-global-header .central-links .nav-link.active {
color: #ffffff !important;
}
/* Standard Dropdown Logic */
.explor-global-header .dropdown-wrapper {
position: relative;
}
.explor-global-header .dropdown-toggle::after {
margin-left: 0.35rem;
font-size: 0.7rem;
border: none;
vertical-align: middle;
}
.explor-global-header .custom-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: var(--dark-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
min-width: 200px;
padding: 0.5rem 0;
list-style: none;
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
border-radius: 4px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.explor-global-header .dropdown-wrapper:hover .custom-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.explor-global-header .custom-dropdown a {
color: rgba(0, 0, 0, 0.7);
text-decoration: none;
padding: 0.6rem 1.2rem;
display: block;
font-size: 0.8rem;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: var(--transition-fast);
}
.explor-global-header .custom-dropdown a:hover {
background-color: rgba(255, 255, 255, 0.05);
color: #000000;
}
/* ==========================================================================
4. DESKTOP MEGA MENU PANEL
========================================================================== */
.explor-global-header .mega-dropdown-wrapper {
position: initial;
}
.explor-global-header .mega-menu-panel {
position: absolute;
top: 100%;
left: 15px;
right: 15px;
width: calc(100% - 30px);
background-color: var(--light-bg);
padding: 2.5rem;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 0.25s ease-in-out;
}
.explor-global-header .mega-dropdown-wrapper:hover .mega-menu-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.explor-global-header .mega-menu-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1.5fr 1.5fr;
align-items: start;
gap: 1.5rem;
}
.explor-global-header .mega-menu-title {
font-size: 2.25rem;
font-weight: 700;
color: var(--dark-bg);
margin: 0;
}
.explor-global-header .mega-menu-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.explor-global-header .mega-menu-links a {
color: #555555;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: color 0.2s ease;
}
.explor-global-header .mega-menu-links a:hover {
color: #000000;
}
.explor-global-header .mega-menu-links .view-all {
margin-top: 0.5rem;
}
.explor-global-header .mega-menu-links .view-all a {
color: var(--primary-color);
font-weight: 600;
}
.explor-global-header .mega-menu-links .view-all a:hover {
text-decoration: underline;
}
.explor-global-header .mega-menu-image {
width: 100%;
height: 300px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.explor-global-header .mega-menu-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.explor-global-header .dynamic-mega-target {
transition: opacity 0.25s ease-in-out;
opacity: 1;
}
.explor-global-header .dynamic-mega-target.image-faded {
opacity: 0.3;
}
/* ==========================================================================
5. DESKTOP CTA & LANGUAGE SELECTOR
========================================================================== */
.explor-global-header .desktop-cta {
display: flex;
align-items: center;
gap: 2rem;
}
.explor-global-header .lang-selector-dropdown {
position: relative;
display: inline-block;
}
/* Stripped-back Trigger Button */
.explor-global-header .lang-trigger-btn {
background: transparent;
border: none;
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.65);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em; /* Wide editorial letter-spacing */
transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Elegant, razor-thin vertical line replacing the generic chevron arrow */
.explor-global-header .lang-trigger-btn::after {
content: '';
width: 1px;
height: 10px;
background-color: rgba(255, 255, 255, 0.3);
margin-left: 0.4rem;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s;
}
/* Hover effect on trigger */
.explor-global-header .lang-trigger-btn:hover {
color: #ffffff;
}
.explor-global-header .lang-trigger-btn:hover::after {
background-color: #ff5a36; /* Changes to your brand color on hover */
transform: scaleY(1.5); /* Elongates subtly instead of rotating */
}
/* Flag: Square, tiny, and intentionally raw (like a print magazine layout) */
.explor-global-header .lang-flag {
width: 14px;
height: 14px;
object-fit: cover;
border-radius: 0px; /* Sharp corners for an intentional, structured look */
filter: grayscale(100%); /* Keeps it monochromatic until hovered */
opacity: 0.7;
transition: all 0.3s ease;
}
.explor-global-header .lang-trigger-btn:hover .lang-flag {
filter: grayscale(0%);
opacity: 1;
}
/* Monolithic, Stark Dropdown Menu */
.explor-global-header .lang-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background-color: #fff; /* Pure black wrapper */
border-top: 2px solid #383838; /* Heavy top accent border */
min-width: 150px;
padding: 0;
margin: 0;
list-style: none !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
z-index: 1050;
}
/* Safe bridge zone */
.explor-global-header .lang-dropdown-menu::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
.explor-global-header .lang-selector-dropdown:hover .lang-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Stark Dropdown Rows */
.explor-global-header .lang-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding:10px 20px;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: all 0.25s ease;
}
/* Typography Shift Hover */
.explor-global-header .lang-option:hover {
color: #000000;
}
.explor-global-header .lang-option:hover .lang-flag {
filter: grayscale(0%);
opacity: 1;
}
/* Active State: Minimalist dot indicator instead of blocks or colors */
.explor-global-header .lang-option.active {
color: #000000;
font-weight: 700;
position: relative;
}
/* ==========================================================================
6. BOOKING CTA REUSABLE BUTTON
========================================================================== */
.explor-btn-book {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
border: 1px solid rgb(248 119 2 / 40%);
color: #ffffff;
background: #f87702;
font-size: 1rem;
padding: 0.65rem 1.6rem;
border-radius: 50px;
letter-spacing: 0.12em;
font-weight: 500;
transition: var(--transition-smooth), border-color 0.3s ease, color 0.3s ease;
}
.explor-btn-book:hover {
background-color: #ffffff;
color: #000000 !important;
border-color: #ffffff;
}
/* ==========================================================================
7. MOBILE OFFCANVAS DRAWER MENU
========================================================================== */
.explor-global-header .offcanvas {
max-width: 300px;
background-color: #fff !important;
color: #000;
}
.explor-global-header .offcanvas-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid rgba(108, 117, 125, 0.2);
}
.explor-global-header .offcanvas-title {
font-weight: 700;
}
.explor-global-header .btn-close {
/* filter: invert(1) grayscale(1) brightness(2); */
box-shadow: none;
/* color:#000; */
/* background: transparent; */
border: 0;
cursor: pointer;
}
.explor-global-header .offcanvas-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.explor-global-header .mobile-links {
display: flex;
flex-direction: column;
list-style: none;
padding-left: 0;
margin-bottom: 2rem;
gap: 1rem;
text-transform: uppercase;
letter-spacing: 0.025em;
font-size: 1.25rem;
}
.explor-global-header .nav-item-heading {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 0.25rem;
}
.explor-global-header .mobile-links .nav-link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
display: block;
padding: 0.4rem 0;
font-size: 1.1rem;
text-transform: uppercase;
}
.explor-global-header .mobile-links .nav-link.active,
.explor-global-header .mobile-links .nav-link:hover {
color: #ffffff;
}
.explor-global-header .mobile-links .sub-link {
padding-left: 0.75rem;
}
.explor-global-header .mobile-links .sub-link .nav-link {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.5);
}
/* Mobile CTA Wrappers */
.explor-global-header .mobile-cta {
margin-top: auto;
padding-top: 1.5rem;
}
.explor-global-header .mobile-lang-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.explor-global-header .mobile-lang-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.explor-global-header .mobile-lang-row .lang-trigger-btn {
color: #ffffff;
}
.explor-global-header .mobile-cta .explor-btn-book {
display: block;
width: 100%;
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Banner Slider Base Setup */
.explor-hero-slider {
position: relative;
width: 100%;
height: 100vh;
background-color: #000000;
}
.swiper-slide {
overflow: hidden;
}
/* Shrunk Background Frame Layer */
.explor-bg-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
transform-origin: center center;
transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1),
height 700ms cubic-bezier(0.4, 0, 0.2, 1),
top 700ms cubic-bezier(0.4, 0, 0.2, 1),
left 700ms cubic-bezier(0.4, 0, 0.2, 1),
border-radius 700ms ease;
}
.explor-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.explor-bg-img::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
/* --- State: Active Shrink Transform Timeline --- */
.explor-hero-slider.is-shrinking .swiper-slide-active .explor-bg-box,
.explor-hero-slider.is-shrinking .swiper-slide-next .explor-bg-box,
.explor-hero-slider.is-shrinking .swiper-slide-prev .explor-bg-box {
width: 65%;
height: 65%;
top: 17.5%;
left: 17.5%;
border-radius: 16px;
}
.explor-hero-slider.is-shrinking .swiper-slide-active .explor-bg-img,
.explor-hero-slider.is-shrinking .swiper-slide-next .explor-bg-img,
.explor-hero-slider.is-shrinking .swiper-slide-prev .explor-bg-img {
transform: scale(1.25);
}
/* Typography Content Engine */
.explor-main-title {
font-family: 'Playfair Display', serif;
font-size: calc(2.4rem + 4.5vw);
line-height: 1.1;
letter-spacing: 0.14em;
transform: translateY(40px);
opacity: 0;
transition: opacity 600ms ease, transform 600ms ease;
}
.explor-sub-title {
font-size: calc(1.1rem + 1.8vw);
font-weight: 300;
letter-spacing: 0.05em;
transform: translateY(30px);
opacity: 0;
transition: opacity 600ms ease 100ms, transform 600ms ease 100ms;
}
.explor-desc, .explor-price-tag {
transform: translateY(20px);
opacity: 0;
transition: opacity 500ms ease 200ms, transform 500ms ease 200ms;
}
.swiper-slide-active .explor-main-title,
.swiper-slide-active .explor-sub-title,
.swiper-slide-active .explor-desc,
.swiper-slide-active .explor-price-tag {
opacity: 1;
transform: translateY(0);
}
.explor-hero-slider.is-shrinking .swiper-slide .explor-main-title,
.explor-hero-slider.is-shrinking .swiper-slide .explor-sub-title,
.explor-hero-slider.is-shrinking .swiper-slide .explor-desc,
.explor-hero-slider.is-shrinking .swiper-slide .explor-price-tag {
opacity: 0;
transform: translateY(-30px);
transition: opacity 300ms ease, transform 300ms ease;
}
/* Event handling layout helpers for containers overlaying absolute wrappers */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
/* Action Circle Button Shape */
.explor-btn-circle {
border: 1px solid rgba(255, 255, 255, 0.35);
width: 140px;
height: 140px;
border-radius: 50%;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.explor-btn-text {
font-size: 0.75rem;
letter-spacing: 0.15em;
font-weight: 500;
}
.explor-btn-circle:hover {
border-color: #ffffff;
background-color: rgba(255, 255, 255, 0.08);
transform: scale(1.05);
}
@media (max-width: 768px) {
.explor-btn-circle {
width: 110px;
height: 110px;
}
.nav-link:focus, .nav-link:hover {
color:#000;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
color:#000;
}
.navbar-toggler-icon{
filter: brightness(1) contrast(0);
}
.nav-link{
color:#000;
}
.explor-btn-book {
border: 1px solid rgb(0 0 0 / 40%);
color: #000000;
}
.explor-hero-slider.is-shrinking .swiper-slide-active .explor-bg-box {
width: 85%;
height: 55%;
top: 22.5%;
left: 7.5%;
}
}
/* ==========================================================================
Shared Component Base Containers
========================================================================== */
.hero-container, .abt-container, .glance-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) { .hero-container, .abt-container, .glance-container { max-width: 540px; } }
@media (min-width: 768px) { .hero-container, .abt-container, .glance-container { max-width: 720px; } }
@media (min-width: 992px) { .hero-container, .abt-container, .glance-container { max-width: 960px; } }
@media (min-width: 1200px) { .hero-container, .abt-container, .glance-container { max-width: 1140px; } }
@media (min-width: 1400px) { .hero-container, .abt-container, .glance-container { max-width: 1320px; } }
/* ==========================================================================
2. HERO BANNER SLIDER SECTION
========================================================================== */
.explor-hero-slider {
position: relative;
overflow: hidden;
}
.explor-hero-slider .swiper-slide {
position: relative;
height: 100vh; /* Replaces h-100 on absolute screen tracks */
min-height: 600px;
}
.explor-hero-slider .explor-bg-box,
.explor-hero-slider .explor-bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.explor-hero-slider .hero-container {
position: relative;
height: 100%;
z-index: 2;
}
.explor-hero-slider .hero-row {
display: flex;
align-items: center;
height: 100%;
}
.explor-hero-slider .hero-content {
width: 100%;
color: #ffffff;
}
/* Responsive Column System Replaced manually via Content box max widths */
@media (min-width: 576px) { .explor-hero-slider .hero-content { max-width: 100%; } }
@media (min-width: 768px) { .explor-hero-slider .hero-content { max-width: 83.333333%; } }
@media (min-width: 992px) { .explor-hero-slider .hero-content { max-width: 66.666667%; } }
.explor-hero-slider .explor-main-title {
text-transform: uppercase;
font-size: calc(1.625rem + 4.5vw);
font-weight: 800;
line-height: 1.1;
}
.explor-hero-slider .explor-sub-title {
margin-bottom: 1.5rem;
font-weight: 400;
opacity: 0.9;
}
.explor-hero-slider .explor-desc {
color: rgba(255, 255, 255, 0.884);
margin-bottom: 1.5rem;
font-size: 1.1rem;
line-height: 1.6;
}
.explor-hero-slider .explor-price-tag .price-lbl {
display: block;
color: rgba(255, 255, 255, 0.76);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.explor-hero-slider .explor-price-tag .price-val {
font-size: 1.5rem;
font-weight: 500;
}
/* ==========================================================================
ABOUT US SECTION
========================================================================== */
.exp-abt-section .abt-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
/* Asymmetric Image Adjustments & Layout Grids */
.exp-abt-section .exp-abt-img-col-left,
.exp-abt-section .exp-abt-img-col-right {
position: relative;
width: 100%;
}
.exp-abt-section .exp-abt-content-col {
width: 100%;
text-align: center;
margin-top: 3rem;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.exp-abt-section .exp-abt-img-col-left { width: 25%; order: 1; }
.exp-abt-section .exp-abt-content-col { width: 50%; order: 2; margin-top: 0; margin-bottom: 0; padding: 0 2rem; }
.exp-abt-section .exp-abt-img-col-right { width: 25%; order: 3; }
}
.exp-abt-section .exp-abt-title {
text-transform: capitalize;
margin-bottom: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.exp-abt-section .exp-abt-content-col p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.25rem;
color: #555555;
}
.exp-abt-section .exp-abt-btn {
display: inline-block;
text-transform: uppercase;
text-decoration: none;
padding: 0.75rem 2rem;
/* border: 1px solid #000; */
color: #000;
font-weight: 500;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
.exp-abt-section .exp-abt-btn:hover {
background-color: #000;
color: #fff;
}
/* Image Wraps & Shadows Handling */
.exp-abt-section img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.exp-abt-section .exp-abt-img-tall,
.exp-abt-section .exp-abt-img-overlap-high,
.exp-abt-section .exp-abt-img-square {
border-radius: 4px;
overflow: hidden;
}
.exp-abt-section .exp-abt-img-tall {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.exp-abt-section .exp-abt-img-overlap-high {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
margin-bottom: 1.5rem;
}
.exp-abt-section .exp-abt-img-square {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
@media (min-width: 768px) {
.exp-abt-section .exp-abt-img-wrap-right {
position: relative;
}
/* Creates intentional asymmetrical offset overlays on desktop views */
.exp-abt-section .exp-abt-img-overlap-high {
transform: translateY(-20px);
}
}
/* ==========================================================================
GLANCE / STATS SECTION
========================================================================== */
.resort-glance-section {
padding-top: 3rem;
padding-bottom: 3rem;
}
.resort-glance-section .glance-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.resort-glance-section .resort-glance-line {
display: inline-block;
height: 1px;
width: 40px;
background-color: #dee2e6;
}
.resort-glance-section .resort-glance-sub {
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.875rem;
font-weight: 600;
}
/* Border Wrap Flex Grid Layout replacing row g-0 */
.resort-glance-section .glance-grid {
display: flex;
flex-wrap: wrap;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #dedede;
padding-top: 2rem;
padding-bottom: 2rem;
}
.resort-glance-section .resort-glance-col {
width: 50%; /* Default mobile behavior: 2 items per row */
}
@media (min-width: 768px) {
.resort-glance-section .resort-glance-col {
width: 25%; /* Desktop behavior: 4 items inline */
}
}
.resort-glance-section .glance-item-box {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.resort-glance-section .glance-item-box {
margin-bottom: 0;
}
}
/* ==========================================
Header & Core Navbar Layout
========================================== */
.explor-global-header {
position: absolute;
top: 0;
width: 100%;
z-index: 1030;
}
.explor-global-header .navbar {
background-color: transparent;
padding: 0;
}
.explor-global-header .navbar-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ==========================================
Desktop Menu & Hover Dropdowns
========================================== */
.explor-global-header .central-links {
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
gap: 2rem; /* Comfortable spacing restored now that menu is compact */
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.85rem;
font-weight: 500;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.explor-global-header .central-links .nav-link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.15s ease-in-out;
padding: 1.5rem 0;
display: block;
}
.explor-global-header .central-links .nav-link:hover,
.explor-global-header .central-links .nav-link.active {
color: #fff;
}
/* Dropdown Container Logic */
.explor-global-header .dropdown-wrapper {
position: relative;
}
.explor-global-header .dropdown-toggle::after {
/* content: '▾'; */
margin-left: 0.35rem;
font-size: 0.7rem;
border: none;
vertical-align: middle;
}
.explor-global-header .custom-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
min-width: 200px;
padding: 0.5rem 0;
list-style: none;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease-in-out;
border-radius: 4px;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
/* Show Dropdown on Hover */
.explor-global-header .dropdown-wrapper:hover .custom-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.explor-global-header .custom-dropdown a {
color: rgba(0, 0, 0, 0.7);
text-decoration: none;
padding: 0.6rem 1.2rem;
display: block;
font-size: 0.95rem;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: all 0.15s ease;
}
.explor-global-header .custom-dropdown a:hover {
background-color: rgba(255, 255, 255, 0.05);
color: #000000;
}
/* ==========================================
Mobile Offcanvas Clean Layout
========================================== */
.explor-global-header .offcanvas {
background-color: #000000;
color: #ffffff;
}
.explor-global-header .offcanvas-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.explor-global-header .mobile-links {
display: flex;
flex-direction: column;
list-style: none;
padding-left: 0;
margin-bottom: 2rem;
}
/* Section titles within the mobile tray drawer */
.explor-global-header .nav-item-heading {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 0.25rem;
}
.explor-global-header .mobile-links .nav-link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
display: block;
padding: 0.4rem 0;
font-size: 1.1rem;
text-transform: uppercase;
}
.explor-global-header .mobile-links .sub-link {
padding-left: 0.75rem; /* Clear indent showing hierarchy on mobile */
}
/* ==========================================
Desktop Mega Menu Positioning
========================================== */
/* ==========================================
Mega Menu - Container & Layout Setup
========================================== */
.explor-global-header .navbar-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
display: flex;
align-items: center;
justify-content: space-between;
/* Anchors the absolute dropdown panel to the container width */
position: relative;
}
.explor-global-header .mega-dropdown-wrapper {
/* Disables regular list item absolute constraints */
position: initial;
}
/* ==========================================
Mega Menu Floating Panel Card
========================================== */
.explor-global-header .mega-menu-panel {
position: absolute;
top: 100%;
left: 15px; /* Aligns with container left padding */
right: 15px; /* Aligns with container right padding */
width: calc(100% - 30px); /* Snaps width cleanly between container margins */
background-color: #f7f5f0; /* Soft off-white */
padding: 2.5rem;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
/* Animation and Visibility Hidden State */
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 0.25s ease-in-out;
}
/* Hover State Trigger */
.explor-global-header .mega-dropdown-wrapper:hover .mega-menu-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ==========================================
Desktop Right CTA Container Layout Alignment
========================================== */
.explor-global-header .desktop-cta {
display: flex;
align-items: center;
gap: 1.5rem; /* Space between language control and book button */
}
/* ==========================================
Language Selector Component Dropdown
========================================== */
.explor-global-header .lang-selector-dropdown {
position: relative;
display: inline-block;
}
.explor-global-header .lang-trigger-btn {
background: transparent;
border: none;
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
font-size:1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.2s ease;
}
.explor-global-header .lang-trigger-btn::after {
/* content: '▾'; */
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
}
.explor-global-header .lang-trigger-btn:hover {
color: #ffffff;
}
/* Base Flag Layout Configurations (Using high fidelity clean SVGs) */
.explor-global-header .lang-flag {
width: 30px;
height: 30px;
object-fit: contain;
border-radius: 10px; /* Smooth round flag style matching premium layouts */
display: block;
}
/* ==========================================
Language Dropdown List Panel Panel
========================================== */
/* Reveal language selection items list cleanly on hover */
.explor-global-header .lang-selector-dropdown:hover .lang-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.explor-global-header .lang-option.active {
color: #ff5a36; /* Your brand primary accent color highlight indication */
font-weight: 600;
}
/* ==========================================
Mobile UI Drawer Spacing Overrides
========================================== */
.explor-global-header .mobile-lang-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.explor-global-header .mobile-lang-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.explor-global-header .mobile-lang-row .lang-trigger-btn {
color: #ffffff;
}
/* ==========================================
Interior Asymmetric Grid columns
========================================== */
.explor-global-header .mega-menu-container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1.5fr 1.5fr; /* 3 unequal columns matching design layout */
align-items: start;
gap: 1.5rem;
}
/* Column 1: Component Title */
.explor-global-header .mega-menu-title {
font-size: 2.25rem;
font-weight: 700;
color: #111111;
margin: 0;
}
/* Column 2: Region Links Menu */
.explor-global-header .mega-menu-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.explor-global-header .mega-menu-links a {
color: #555555;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: color 0.2s ease;
}
.explor-global-header .mega-menu-links a:hover {
color: #000000;
}
/* Orange Custom Accent Link Style */
.explor-global-header .mega-menu-links .view-all {
margin-top: 0.5rem;
}
.explor-global-header .mega-menu-links .view-all a {
color: #ff5a36;
font-weight: 600;
}
.explor-global-header .mega-menu-links .view-all a:hover {
text-decoration: underline;
}
/* Column 3: The Interactive Preview Window */
.explor-global-header .mega-menu-image {
width: 100%;
height: 300px;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.explor-global-header .mega-menu-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ==========================================
Image Fade Animation States (JavaScript Hooks)
========================================== */
.explor-global-header .dynamic-mega-target {
transition: opacity 0.25s ease-in-out;
opacity: 1;
}
.explor-global-header .dynamic-mega-target.image-faded {
opacity: 0.3;
}
.explor-global-header .mobile-links .sub-link .nav-link {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.5);
}
.explor-global-header .mobile-links .nav-link.active,
.explor-global-header .mobile-links .nav-link:hover {
color: #fff;
}
.explor-global-header .mobile-cta {
margin-top: auto;
padding-top: 1.5rem;
}
/* Core Panel Architecture */
.trek-nav-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: #f6f4ee; /* Clean ivory canvas cream background */
border-radius: 8px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
overflow: hidden;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(10px); /* Subtle slide down effect */
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 3. Reveal the panel instantly when the user hovers over the parent wrapper */
.mega-dropdown-wrapper:hover .trek-nav-panel {
opacity: 1;
visibility: visible;
transform: translateY(0); /* Slides perfectly into position */
}
.trek-nav-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr 2fr;
min-height: 420px;
}
/* Left Label Area */
.trek-nav-branding {
padding: 45px;
display: flex;
align-items: flex-start;
}
.trek-brand-header {
font-size: 2.2rem;
font-weight: 800;
text-transform: uppercase;
color: #1a1a1a;
letter-spacing: -0.5px;
margin: 0;
}
/* Middle Navigation Links List */
.trek-nav-selection {
padding: 35px 10px;
border-right: 1px solid rgba(0, 0, 0, 0.04);
}
.trek-destination-list {
list-style: none;
padding: 0;
margin: 0;
}
.trek-destination-list li {
margin-bottom: 2px;
}
.trek-destination-item {
display: block;
padding: 10px 12px;
color: #3a3a3a;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.3px;
border-radius: 4px;
transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Active Highlight Box Design Matching Image State */
.trek-destination-item:hover,
.trek-destination-item.trek-item-active {
background-color: #ebe7dc;
color: #000;
}
/* .trek-destination-item::before {
content: '>';
font-weight: 700;
opacity: 0;
margin-right: -6px;
transition: all 0.2s ease;
} */
.trek-destination-item:hover::before,
.trek-destination-item.trek-item-active::before {
opacity: 1;
margin-right: 8px;
}
/* Bottom Actions Separator */
.trek-global-link {
margin-top: 15px;
padding-top: 15px;
padding-left: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.trek-global-link a {
color: #c45e2e; /* Warm Earth Tone Accent */
text-transform: uppercase;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.8px;
text-decoration: none;
}
/* Right Side Image Viewport Layout */
.trek-nav-showcase {
display: grid;
grid-template-columns: 1fr;
background-color: #000;
}
.trek-image-viewport {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.trek-dynamic-image {
width: 100%;
height: 450px;
object-fit: cover;
transition: filter 0.3s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Floating Component Card Context styling */
.trek-floating-card {
position: absolute;
bottom: 20px;
right: 20px;
width: 320px;
background: rgba(0, 0, 0, 0.315);
backdrop-filter: blur(10px);
padding: 22px;
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.trek-card-label {
font-size: 12px;
text-transform: uppercase;
color: #cacaca;
font-weight: 700;
letter-spacing: 0.5px;
}
.trek-card-title {
font-size: 1rem;
margin: 6px 0;
font-weight: 800;
color: #e0e0e0;
line-height: 1.35;
}
.trek-card-specs {
font-size: 12px;
color: #ffffff;
margin-bottom: 14px;
}
.trek-card-action {
font-size: 14px;
font-weight: 700;
color: #ffffff;
text-decoration: none;
}
/* About */
/* Container Canvas Base Settings */
.exp-abt-section {
background-color: #faf8f5; /* Warm off-white canvas backdrop matched from image_7004e8.jpg */
padding: 70px 0;
/* overflow: hidden; */
}
/* Typography Elements */
.exp-abt-title {
font-family: 'Playfair Display', serif;
color: #1a1a1a;
font-size: 2.35rem;
font-weight: 400;
line-height: 1.3;
margin-bottom: 1.8rem;
}
.exp-abt-content-col p {
color: #555555;
font-size: 0.95rem;
line-height: 1.75;
font-weight: 300;
padding: 10px 40px;
padding-right: 0;
}
/* Terra Cotta CTA Button Look */
.exp-abt-btn {
background-color: #d3735e; /* Exact tone-match from image_7004e8.jpg */
color: #ffffff !important;
font-size: 0.78rem;
font-weight: 500;
padding: 0.75rem 2.2rem;
border-radius: 50px;
letter-spacing: 0.08em;
border: 1px solid transparent;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.exp-abt-btn:hover {
background-color: #be5f4b;
transform: translateY(-1px);
}
/* Common Image Properties */
.exp-abt-img-tall,
.exp-abt-img-overlap-low,
.exp-abt-img-overlap-high,
.exp-abt-img-square {
/* overflow: hidden; */
background-color: #e5e5e5;
}
.exp-abt-img-tall img,
.exp-abt-img-overlap-low img,
.exp-abt-img-overlap-high img,
.exp-abt-img-square img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.explor-global-header .dynamic-mega-target {
transition: opacity 0.25s ease-in-out;
opacity: 1;
}
/* This temporary utility is activated by JavaScript when changing pictures */
.explor-global-header .dynamic-mega-target.image-faded {
opacity: 0.3;
}
/* ==========================================================================
Left Side Staggered Layout Architecture
========================================================================== */
.exp-abt-img-wrap-left {
position: relative;
height: 485px;
max-width: 400px;
margin-right: auto;
}
.exp-abt-img-tall {
/* width: 350px;
height: 500px; */
position: absolute;
top: 0;
left: 0;
}
.exp-abt-img-overlap-low {
width: 300px;
height: 0px;
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
}
/* ==========================================================================
Right Side Staggered Layout Architecture
========================================================================== */
.exp-abt-img-wrap-right {
position: relative;
height: 380px;
max-width: 320px;
margin-left: auto;
}
.exp-abt-img-overlap-high {
width: 160px;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.exp-abt-img-square {
width: 230px;
height: 230px;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
}
/* ==========================================================================
Responsive Adaptations
========================================================================== */
@media (max-width: 767.98px) {
.exp-abt-section {
padding: 60px 0;
}
.exp-abt-title {
font-size: 1.85rem;
}
.exp-abt-img-wrap-left,
.exp-abt-img-wrap-right {
margin: 0 auto;
height: 280px;
max-width: 290px;
}
/* Left Group Shrink for Mobile viewports */
.exp-abt-img-tall {
width: 150px;
height: 220px;
}
.exp-abt-img-overlap-low {
width: 130px;
height: 140px;
}
/* Right Group Shrink for Mobile viewports */
.exp-abt-img-overlap-high {
width: 120px;
height: 150px;
}
.exp-abt-img-square {
width: 170px;
height: 170px;
}
}
/* Counter */
/* ==========================================================================
Glance Counter Section Light Theme Styles
========================================================================== */
.resort-glance-section {
background: linear-gradient(360deg, rgb(0 32 57 / 10%) 20%, rgb(250 248 245) 68%); /* Clean, minimal light backdrop matching your About layout */
font-family: 'Playfair Display', sans-serif;
color: #1a1a1a;
padding: 0px 0 70px;
}
/* Thin horizontal line accents flanking the subtitle */
.resort-glance-line {
display: inline-block;
width: 40px;
margin-bottom: 30px;
height: 1px;
background-color: rgba(0, 0, 0, 0.15);
}
.resort-glance-sub {
font-size:14px;
color: #777777;
font-weight: 500;
letter-spacing: 0.25em;
margin-bottom: 30px;
}
.resort-glance-heading {
font-family: 'Playfair Display', sans-serif;
font-size: calc(1.3rem + 1vw);
font-weight: 400;
letter-spacing: 0.05em;
color: #111111;
max-width: 850px;
margin-left: auto;
margin-right: auto;
}
/* Asymmetric Columns Separators matching image_7a056d.png */
.resort-glance-col {
position: relative;
padding: 1.5rem 0;
}
/* Vertical grid dividers for desktop screens */
@media (min-width: 768px) {
.resort-glance-col:not(:last-child)::after {
content: '';
position: absolute;
top: 20%;
right: 0;
height: 60%;
width: 1px;
background-color: rgba(0, 0, 0, 0.08);
}
}
/* Massive background-style elegant counter digits */
.resort-glance-num {
font-family: 'Playfair Display', sans-serif;
font-size:100px;
font-weight: 300;
line-height: 1;
color: rgb(248 119 2 / 40%);
letter-spacing: -0.04em;
transition: color 0.4s ease;
}
/* Highlight active item colors on hover */
.resort-glance-col:hover .resort-glance-num {
color: rgba(211, 115, 94, 0.35);
}
.resort-glance-lbl {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.3;
color: #444444;
margin-left: -30px; /* Pulls the label slightly over the huge light digit */
z-index: 2;
}
/* Mobile responsive fixes */
@media (max-width: 767.98px) {
.resort-glance-col {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.resort-glance-col:nth-child(even) {
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.resort-glance-lbl {
margin-left: -5px;
}
}
/* Activities */
/* ==========================================================================
GLOBAL SETUP
========================================================================== */
.adv-facilities-section {
position: relative;
width: 100%;
background-color: #000;
overflow: hidden;
}
.adv-z-index {
z-index: 5;
}
/* ==========================================================================
DESKTOP LAYOUT (Min-width: 992px)
========================================================================== */
@media (min-width: 992px) {
.adv-facilities-section {
height: 100vh;
min-height: 600px;
}
.adv-desktop-bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: background-image 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s ease;
transform: scale(1);
z-index: 1;
}
.adv-facilities-section:hover .adv-desktop-bg-layer {
transform: scale(1.02);
}
.adv-desktop-overlay-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.65) 100%);
z-index: 2;
}
.adv-desktop-master-title-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
}
.adv-desktop-master-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 8.5vw, 8rem);
color: #ffffff;
letter-spacing: 6px;
font-weight: 400;
text-transform: uppercase;
margin: 0;
text-align: center;
}
#advDesktopMasterTitle {
display: inline-block;
transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
transform: translateY(0) scale(1);
opacity: 1;
}
#advDesktopMasterTitle.is-switching {
opacity: 0;
transform: translateY(15px) scale(0.97);
}
.adv-facilities-section .row {
flex-wrap: nowrap;
height: 100%;
}
.adv-facility-col {
position: relative;
height: 100%;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px 25px;
transition: background-color 0.4s ease;
}
.adv-facility-col:hover {
background-color: rgba(255, 255, 255, 0.04);
}
.adv-col-border-line {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: rgba(255, 255, 255, 0.15);
z-index: 3;
}
.adv-facility-col:first-of-type .adv-col-border-line {
display: none;
}
}
/* Global Grid Labels Components */
.adv-content-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 4;
}
.adv-item-label {
position: absolute;
bottom: 0;
font-family: 'Playfair Display', serif;
font-size: clamp(0.85rem, 2vw, 2.05rem);
color: rgba(255, 255, 255, 0.75);
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
margin: 0;
text-align: center;
transition: all 0.3s ease;
}
@media (min-width: 992px) {
.adv-facility-col:hover .adv-item-label {
color: #ffffff;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}
}
/* ==========================================================================
MOBILE SPECIFIC SCROLL LAYOUT & STRICT OBSERVER STATE (Max-width: 991.98px)
========================================================================== */
@media (max-width: 991.98px) {
.adv-facilities-section {
height: auto;
}
.adv-facility-col {
position: relative;
height: 30vh;
min-height: 420px;
background-image: var(--mobile-bg);
background-size: cover;
background-position: center;
padding: 30px 20px;
overflow: hidden;
}
.adv-mobile-card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
transition: background-color 0.4s ease;
z-index: 2;
}
.adv-col-border-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.15);
z-index: 3;
}
.adv-facility-col:first-of-type .adv-col-border-line {
display: none;
}
/* Mobile Title styles - Initial Hidden state */
.adv-mobile-scrolled-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 6.5vw, 3.5rem);
color: #ffffff;
letter-spacing: 4px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
margin: auto 0;
opacity: 0;
transform: translateY(20px) scale(0.95);
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* STRICT SINGLE-ACTIVE CLASS STATE */
.adv-facility-col.adv-mobile-active .adv-mobile-scrolled-title {
opacity: 1;
transform: translateY(0) scale(1);
}
.adv-facility-col.adv-mobile-active .adv-mobile-card-overlay {
background-color: rgba(0, 0, 0, 0.2);
}
}
/* Regions */
/* ==========================================================================
GLOBAL STRUCTURE & SECTION TYPOGRAPHY
========================================================================== */
.vibes-discover-section {
background-color: #ffffff;
width: 100%;
overflow: hidden;
}
.vib-badge-text {
font-size: 1.1rem;
font-weight: 700;
color: #55b659;
}
.vib-display-title {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 800;
color: #012b55;
letter-spacing: -0.5px;
}
.vib-sub-description {
color: #728294;
font-size: 1.1rem;
font-weight: 400;
}
/* ==========================================================================
THE MASKED COMPONENT BLOCK SPECIFICATION
========================================================================== */
.vibes-block-one {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: transparent;
height: 100%;
padding: 10px 0;
}
/* Header Text Options */
.vibes-block-one .title-text {
z-index: 3;
position: absolute;
top: 10px;
left: 5px;
transform: rotate(-10deg);
}
.vib-meta-line {
width: 32px;
height: 2.5px;
border-radius: 2px;
}
.vibes-block-one .title-text h3 {
margin: 0;
font-size: clamp(1.3rem, 1.5vw, 1.55rem);
font-weight: 800;
}
.vibes-block-one .title-text h3 a {
color: #012b55;
text-decoration: none;
}
/* Exact Container Box Boundaries */
.vibes-block-one .image-box {
position: relative;
width: 100%;
height: 400px;
margin: 0 auto;
}
/* The Native Asset Image Mask Wrapper */
.vibes-block-one .image-box .image {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
z-index: 1;
display: block;
position: relative;
overflow: hidden;
/* Using your download.png as the structural shape mask */
mask-image: url('../images/download.png');
-webkit-mask-image: url('../images/download.png');
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.vib-masked-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Subtle Zoom Hover Action */
.vibes-block-one:hover .vib-masked-img {
transform: scale(1.06);
}
/* Action Hover Overlay Link Icon */
.vibes-block-one .image-box .link {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(15px);
z-index: 2;
opacity: 0;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.vibes-block-one .image-box .link a {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: #7bc143;
color: #ffffff;
border-radius: 50%;
text-decoration: none;
font-weight: bold;
box-shadow: 0 8px 20px rgba(123, 193, 67, 0.35);
}
.vibes-block-one:hover .image-box .link {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Footer Destination Counter Labels */
.vibes-block-one .text {
margin-top: 15px;
font-size: 1rem;
color: #8191a3;
font-weight: 500;
position: absolute;
bottom: 10px;
right: 75px;
transform: rotate(-10deg);
}
/* ==========================================================================
SCROLL INTERSECTION ENTRIES (FADING & SLIDING ON SCROLL)
========================================================================== */
.vibe-fade-element {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
/* Clean staggered slide delays for the row grid */
.row .vibe-fade-element:nth-child(1) { transition-delay: 0.0s; }
.row .vibe-fade-element:nth-child(2) { transition-delay: 0.1s; }
.row .vibe-fade-element:nth-child(3) { transition-delay: 0.2s; }
.row .vibe-fade-element:nth-child(4) { transition-delay: 0.3s; }
/* Trigger class used by scroll runtime */
.vibe-fade-element.vibe-activated {
opacity: 1;
transform: translateY(0);
}
/* Container Wrapper */
.nepal-trek-gallery-wrapper {
display: flex;
width: 100%;
height: 700px;
gap: 12px;
margin: 0px auto;
}
/* Base Card Styles */
.nt-gallery-card {
position: relative;
flex: 1;
height: 100%;
border-radius: 20px;
background-size: cover;
background-position: center;
cursor: pointer;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Linear dark mask overlay for readability */
.nt-gallery-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.75) 100%);
z-index: 1;
}
/* Flex Expansion Trigger */
.nt-gallery-card:hover,
.nt-gallery-card.active {
flex: 5;
}
/* --- BADGES --- */
/* Left White Badge (Visible when collapsed, hides when active/hovered) */
.nt-badge-top-left {
position: absolute;
top: 15px;
left: 5px;
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 4px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.75rem;
z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
opacity: 1;
transition: opacity 0.3s ease;
}
.nt-gallery-card:hover .nt-badge-top-left,
.nt-gallery-card.active .nt-badge-top-left {
opacity: 0;
pointer-events: none;
}
/* Center Green Badge (Hidden when collapsed, shows when active/hovered) */
.nt-badge-top-center {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
background-color: #f87702;
color: #fff;
padding: 4px 14px;
border-radius: 20px;
font-weight: 500;
font-size: 0.8rem;
font-style: italic;
white-space: nowrap;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
}
.nt-gallery-card:hover .nt-badge-top-center,
.nt-gallery-card.active .nt-badge-top-center {
opacity: 1;
transition-delay: 0.2s;
}
/* --- COLLAPSED VERTICAL TEXT --- */
.nt-collapsed-title {
position: absolute;
bottom: 45px;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
transform-origin: center;
color: #ffffff;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 1px;
white-space: nowrap;
z-index: 2;
opacity: 1;
transition: opacity 0.3s ease;
}
.nt-gallery-card:hover .nt-collapsed-title,
.nt-gallery-card.active .nt-collapsed-title {
opacity: 0;
pointer-events: none;
}
/* --- EXPANDED BOTTOM CONTENT --- */
.nt-expanded-content {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
text-align: center;
padding: 0 20px;
z-index: 2;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.nt-gallery-card:hover .nt-expanded-content,
.nt-gallery-card.active .nt-expanded-content {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
}
.nt-main-title {
color: #ffffff;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 4px;
}
.nt-price-tag {
color: #f87702;
font-weight: 600;
font-size: 1rem;
margin: 0;
}
/* --- RESPONSIVE MEDIA BREAKPOINTS --- */
@media (max-width: 992px) {
.nepal-trek-gallery-wrapper {
height: 450px;
}
.nt-main-title {
font-size: 1.4rem;
}
}
@media (max-width: 576px) {
.nepal-trek-gallery-wrapper {
flex-direction: column;
height: auto;
gap: 15px;
}
.nt-gallery-card {
height: 150px;
flex: none !important;
width: 100%;
}
.nt-gallery-card:hover,
.nt-gallery-card.active {
height: 220px;
}
.nt-collapsed-title {
transform: translateX(-50%) rotate(0deg);
bottom: 15px;
}
.nt-badge-top-left {
opacity: 1 !important;
}
}
.region-section{
padding: 30px 0 70px;
background: #FAF8F5;
background: linear-gradient(180deg, rgb(0 32 57 / 10%) 20%, rgb(255, 255, 255) 68%);
}
.nt-section-title {
font-size: 3.8rem;
font-weight: 400;
color: #1A1A1A;
line-height: 1.15;
margin-bottom: 50px;
letter-spacing: -0.5px;
}
.nt-section-title span {
color: #f87702; /* Highlights 'Exclusive' with matching theme green */
font-style: italic;
}
.nt-section-desc {
max-width: 600px;
font-size:16px;
line-height: 1.3;
}
.nt-section-header{
margin-bottom: 70px;
}
.ets-tours-section {
padding: 80px 0;
}
.ets-section-title {
font-family: 'Playfair Display', serif;
font-size: 2.75rem;
font-weight: 500;
margin-bottom: 15px;
}
.ets-section-subtitle {
color: #666666;
font-size: 1.05rem;
max-width: 480px;
line-height: 1.6;
}
/* --- HEADER NAVIGATION BUTTONS (Replacing the view button) --- */
.ets-header-nav-container {
display: inline-flex;
gap: 12px;
}
.ets-header-nav-btn {
position: static !important; /* Overriding default swiper placement */
width: 50px !important;
height: 50px !important;
background-color: #ffffff;
color: #1C1C1C !important;
border: 1px solid #EAEAEA;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
cursor: pointer;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.02);
margin: 0 !important;
}
.ets-header-nav-btn::after {
font-size: 16px !important;
font-weight: bold;
}
.ets-header-nav-btn:hover {
background-color: #f87702;
color: #ffffff !important;
border-color: #f87702;
}
/* Disabled state styling for swiper buttons */
.swiper-button-disabled {
opacity: 0.4;
cursor: not-allowed;
background-color: #f5f5f5;
color: #999999 !important;
border-color: #EAEAEA;
}
/* --- THE SLIDER WRAPPER --- */
.ets-slider-wrapper-full {
position: relative;
width: 100%;
margin-top: 2rem;
}
/* --- FADED EDGE OVERLAY EFFECT --- */
.ets-slider-wrapper-full::after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 15%;
background: linear-gradient(to right, rgba(250, 248, 245, 0) 0%, rgba(250, 248, 245, 0.95) 100%);
z-index: 15;
pointer-events: none;
}
/* --- TOUR CARDS LAYOUT --- */
.ets-tour-card {
background: #ffffff;
border: 1px solid #EAEAEA;
border-radius: 12px;
padding: 24px;
display: block;
height: auto;
}
.ets-card-title {
font-family: 'Playfair Display', serif;
font-size: 1.45rem;
color: #1C1C1C;
margin-bottom: 0px;
}
.ets-arrow-diagonal {
color: #f87702;
font-size: 1.25rem;
font-weight: bold;
text-decoration: none;
}
.ets-card-desc {
font-size: 0.88rem;
color: #666666;
line-height: 1.5;
margin-top: 12px;
margin-bottom: 20px;
min-height: 44px;
}
.ets-card-meta {
padding-bottom: 20px;
font-size: 0.85rem;
border-bottom: 1px solid #F0F0F0;
margin-bottom: 20px;
}
.ets-meta-item {
font-family: 'Playfair Display', serif;
font-style: italic;
color: #1C1C1C;
font-weight: 500;
}
.ets-icon {
margin-right: 4px;
font-style: normal;
}
/* --- CARD IMAGES --- */
.ets-card-img-wrapper {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1.25 / 1;
}
.ets-card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1200px) {
.ets-slider-wrapper-full::after {
display: none;
}
}
@media (max-width: 768px) {
.ets-section-title {
font-size: 2.2rem;
}
}
.hos-offer-section {
position: relative;
padding: 100px 0;
/* True Parallax Effect Background Setup */
background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('../images/highlight-bg.jpg');
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
overflow: hidden;
}
/* Content Styling from Image 2 */
.hos-tagline {
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.hos-tagline span {
color: #f87702; /* Special 'Nature' text color */
font-weight: 700;
}
.hos-main-title {
font-size: 3.8rem;
font-weight: 700;
margin-bottom: 25px;
line-height: 1.1;
}
.hos-description {
font-size: 1.05rem;
color: #E5E7EB;
line-height: 1.6;
max-width: 580px;
margin-bottom: 30px;
}
/* Price Segment Style from Image 2 */
.hos-price-row {
display: flex;
align-items: baseline;
gap: 15px;
margin-bottom: 25px;
}
.hos-price-old {
font-size: 1.5rem;
text-decoration: line-line-through;
text-decoration: line-through;
color: #9CA3AF;
}
.hos-price-new {
font-size: 2.8rem;
font-weight: 700;
color: #ffffff;
}
/* Countdown Tiles Layout from Image 1 */
.hos-countdown-container {
display: flex;
gap: 14px;
margin-bottom: 35px;
}
.hos-countdown-box {
background-color: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 12px;
width: 72px;
height: 76px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hos-countdown-num {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
}
.hos-countdown-label {
font-size: 0.72rem;
color: #9CA3AF;
}
/* Action elements footer alignment */
.hos-action-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.hos-btn-buy {
background-color: #f87702;
color: #ffffff !important;
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
padding: 14px 32px;
border-radius: 50px;
transition: transform 0.2s ease, background-color 0.2s ease;
border: none;
}
.hos-btn-buy:hover {
transform: translateY(-2px);
background-color: #cb4b37;
}
.hos-meta-chip {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50px;
padding: 12px 24px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.5px;
color: #ffffff;
text-transform: uppercase;
}
/* Right Hand Image Stacking Visual Structure from Image 1 */
.hos-video-frame-stack {
position: relative;
}
.hos-video-frame-stack::before {
content: '';
position: absolute;
top: 15px;
left: -15px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
z-index: 1;
}
.hos-video-frame-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.hos-media-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
}
.hos-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hos-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 46px;
background-color: #E50914;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
border: none;
}
.hos-play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
background-color: #ff121f;
}
.hos-play-icon {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 16px solid white;
border-bottom: 10px solid transparent;
margin-left: 4px;
}
.hos-vertical-ribbon {
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
white-space: nowrap;
}
/* --- RESPONSIVENESS --- */
@media (max-width: 991px) {
.hos-main-title { font-size: 3rem; }
.hos-offer-section {
background-attachment: scroll; /* Smooth scrolling performance on touchscreens */
padding: 70px 0;
}
.hos-vertical-ribbon { display: none; }
}
@media (max-width: 576px) {
.hos-main-title { font-size: 2.3rem; }
.hos-countdown-container { gap: 8px; }
.hos-countdown-box { width: 60px; height: 64px; }
.hos-countdown-num { font-size: 1.3rem; }
.hos-price-new { font-size: 2.2rem; }
}
.ets-btn-view-more {
display: inline-block;
background-color: #f87702;
color: #ffffff !important;
text-decoration: none;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 1px;
padding: 14px 28px;
border-radius: 50px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.ets-btn-view-more:hover {
transform: translateY(-2px);
opacity: 0.9;
}
/* --- HERO SECTION STYLING --- */
.exact-hero-section {
padding: 70px 0 0 0;
background-color: #FAF8F5;
text-align: center;
position: relative;
}
.exact-hero-title {
font-family: 'Playfair Display', serif;
font-size: 3.8rem;
font-weight: 400;
color: #1A1A1A;
line-height: 1.15;
margin-bottom: 50px;
letter-spacing: -0.5px;
}
.exact-hero-title em {
font-family: 'Playfair Display', serif;
font-style: italic;
}
.exact-btn-group {
display: inline-flex;
align-items: center;
gap: 25px;
margin-bottom: 50px;
}
.exact-btn-book {
background-color: #f87702;
color: #ffffff !important;
text-decoration: none;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 1.5px;
padding: 14px 28px;
border-radius: 50px;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(206, 109, 82, 0.15);
}
.exact-link-learn {
color: #1A1A1A;
text-decoration: none;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Dotted Path Map Background Elements */
.exact-map-svg-left {
position: absolute;
top: 20px;
left: 0;
width: 320px;
pointer-events: none;
}
.exact-map-svg-right {
position: absolute;
top: -20px;
right: 0;
width: 350px;
pointer-events: none;
}
/* --- FLUID CONTAINER-WIDE FAN GALLERY WRAPPER --- */
.exact-gallery-container {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
max-width: 100%; /* Spans the full fluid width of the layout */
margin: 0 auto;
padding: 0 4%;
position: relative;
z-index: 10;
/* Pushes down directly over the green background boundary line */
margin-bottom: -150px;
}
.exact-img-card {
position: relative;
flex: 1; /* Allows each card to scale fluidly with the fluid row layout */
max-width: 350px; /* Upper layout cap per image card to prevent look fragmentation */
aspect-ratio: 0.8 / 1.05; /* Keeps precise design frame proportions */
border-radius: 10px;
height: 350px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
background-color: #2B4236;
/* Negative percentage margin dynamically creates the tight overlaps */
margin: 0 -1.5%;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}
.exact-img-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Fluid configuration offsets and rotation matrices matching your photo */
.exact-card-1 { transform: translateY(75px) rotate(-8deg); z-index: 1; }
.exact-card-2 { transform: translateY(25px) rotate(-4deg); z-index: 3; }
.exact-card-3 { transform: translateY(-25px) rotate(0deg); z-index: 5; max-width: 350px; border-radius: 8px;} /* Straight vertical center card */
.exact-card-4 { transform: translateY(25px) rotate(4deg); z-index: 4; }
.exact-card-5 { transform: translateY(75px) rotate(8deg); z-index: 2; }
.exact-img-card:hover {
z-index: 20;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
/* --- WHY CHOOSE US SECTION --- */
.exact-why-section {
background-color: #002039;
color: #ffffff;
padding: 240px 0 110px 0; /* Deep top padding to safely clear the larger dynamic card spillover */
position: relative;
z-index: 2;
}
.exact-section-header {
margin-bottom: 70px;
}
.exact-tagline {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.6);
display: block;
margin-top: 40px;
}
.exact-main-heading {
font-family: 'Playfair Display', serif;
font-size: 3.4rem;
font-weight: 400;
line-height: 1.15;
text-align: right;
letter-spacing: -0.5px;
}
/* --- FEATURES GRID STYLING --- */
.exact-feature-card {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 40px 30px;
height: 100%;
}
.exact-icon-box {
color: #ffffff;
margin-bottom: 24px;
}
.exact-icon-box svg {
width: 32px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-width: 1.25;
}
.exact-card-title {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.45rem;
font-weight: 400;
margin-bottom: 14px;
letter-spacing: -0.2px;
}
.exact-card-desc {
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
margin: 0;
}
/* --- RESPONSIVE MEDIA BREAKPOINTS --- */
@media (max-width: 1199px) {
.exact-hero-title { font-size: 3.2rem; }
.exact-main-heading { font-size: 2.8rem; }
.exact-gallery-container { margin-bottom: -110px; }
.exact-why-section { padding-top: 190px; }
}
@media (max-width: 991px) {
.exact-main-heading { font-size: 2.3rem; }
.exact-gallery-container { margin-bottom: -80px; padding: 0 2%; }
.exact-img-card { margin: 0 -2%; }
.exact-card-1 { transform: translateY(45px) rotate(-7deg); }
.exact-card-2 { transform: translateY(15px) rotate(-3.5deg); }
.exact-card-3 { transform: translateY(-15px) rotate(0deg); }
.exact-card-4 { transform: translateY(15px) rotate(3.5deg); }
.exact-card-5 { transform: translateY(45px) rotate(7deg); }
.exact-why-section { padding-top: 150px; }
}
@media (max-width: 767px) {
.exact-hero-title { font-size: 2.2rem; }
.exact-main-heading { font-size: 1.9rem; text-align: left; }
.exact-tagline { margin-top: 10px; margin-bottom: 15px; }
.exact-map-svg-left, .exact-map-svg-right { display: none; }
/* Fluid multi-row stack grid configuration for small screens */
.exact-gallery-container {
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-bottom: -30px;
padding: 0 15px;
}
.exact-img-card {
flex: none;
width: calc(50% - 16px);
max-width: 100%;
margin: 0 !important;
transform: none !important;
}
.exact-card-3 {
width: calc(50% - 16px);
}
.exact-why-section { padding-top: 90px; }
}
@media (max-width: 767px) {
.exact-hero-title { font-size: 2.1rem; margin-bottom: 40px; }
.exact-main-heading { font-size: 1.9rem; text-align: left; }
.exact-tagline { margin-top: 10px; margin-bottom: 15px; }
.exact-map-svg-left, .exact-map-svg-right { display: none; }
/* Keeps layout inline as a continuous overlapping horizontal fan row */
.exact-gallery-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: flex-end !important;
padding: 0 !important;
width: 100vw;
margin-bottom: -110px;
}
/* Sizes the images precisely so 3 are mostly visible while outer ones cascade out of boundary */
.exact-img-card {
flex: none !important;
width: 32vw !important;
height: 42vw !important;
margin: 0 -3.5% !important; /* Forces tighter card overlaps on narrow viewports */
border-radius: 8px;
}
/* Adjusts heights and offsets slightly so it hugs the screen layout naturally */
.exact-card-1 { transform: translateY(40px) rotate(-8deg) !important; }
.exact-card-2 { transform: translateY(10px) rotate(-4deg) !important; }
.exact-card-3 { transform: translateY(-15px) rotate(0deg) !important; width: 35vw !important; height: 46vw !important; z-index: 5; }
.exact-card-4 { transform: translateY(10px) rotate(4deg) !important; }
.exact-card-5 { transform: translateY(40px) rotate(8deg) !important; }
.exact-why-section { padding-top: 160px; }
}
.tm-section-wrapper {
background-color: #FAF8F5; /* Exact off-white background color */
padding: 70px 0 0;
font-family: 'Playfair Display', serif;
overflow: hidden;
}
.tm-section-title {
font-weight: 400;
font-size: 2.5rem;
color: #1a1a1a;
margin-bottom: 50px;
}
.tm-section-title em {
font-style: italic;
font-family: 'Playfair Display', serif;
}
/* Slider Container Constraints */
.tm-slider-container {
position: relative;
padding: 40px 0;
max-width: 1400px;
margin: 0 auto;
}
/* Base Card Styling */
.tm-testimonial-card {
background: #ffffff;
border: 1px solid #EFEBE4;
border-radius: 8px;
padding: 35px 30px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.4s ease-in-out;
opacity: 0.6; /* Side cards are slightly faded */
transform: scale(0.9); /* Side cards are smaller */
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
/* ACTIVE / CENTER CARD EFFECT */
/* Swiper automatically adds .swiper-slide-active to the center card when centeredSlides: true */
.swiper-slide-active .tm-testimonial-card {
opacity: 1;
transform: scale(1.06); /* Center card is prominently bigger */
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
border-color: #E2DCD2;
}
/* Card Content Elements */
.tm-stars {
color: #FFB800;
font-size: 1.1rem;
margin-bottom: 20px;
letter-spacing: 2px;
}
.tm-comment {
font-family: 'Playfair Display', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: #4A4A4A;
margin-bottom: 30px;
}
.tm-user-profile {
display: flex;
align-items: center;
gap: 15px;
}
.tm-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.tm-user-name {
font-size: 1rem;
font-weight: bold;
color: #222222;
margin-bottom: 2px;
}
.tm-user-designation {
font-size: 0.75rem;
color: #8C8C8C;
letter-spacing: 1px;
text-transform: uppercase;
}
/* CUSTOM NAVIGATION BUTTONS */
.tm-nav-btn {
width: 45px;
height: 45px;
background-color: #ffffff;
border: 1px solid #DCD6CD;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.tm-nav-btn:hover {
background-color: #1a1a1a;
border-color: #1a1a1a;
}
.tm-nav-btn:hover svg {
stroke: #ffffff;
}
/* Position buttons relative to the layout grid */
.tm-prev {
left: calc(33.333% - 22.5px); /* Perfectly aligns between card 1 and 2 */
}
.tm-next {
right: calc(33.333% - 22.5px); /* Perfectly aligns between card 2 and 3 */
}
/* Hide default swiper navigation icons */
.tm-nav-btn::after {
display: none;
}
/* Mobile Responsive tweaks */
@media (max-width: 991px) {
.tm-prev { left: 15px; }
.tm-next { right: 15px; }
.swiper-slide-active .tm-testimonial-card {
transform: scale(1); /* Reset scale on mobile for standard grid space */
}
.tm-testimonial-card {
opacity: 1;
transform: scale(1);
}
}
.adv-hero-section {
position: relative;
width: 100%;
min-height: 450px;
background-image: url('../images/Travel.webp');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
display: flex;
align-items: center;
padding: 80px 0;
overflow: hidden;
}
/* Top vignette/fade effect to match the image gradient transition */
.adv-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 250px;
background: linear-gradient(to bottom, #faf8f5 0%, rgb(250 248 245 / 80%) 40%, rgba(255, 255, 255, 0) 100%);
z-index: 1;
pointer-events: none;
}
/* Inner layout container ensuring content sits above background effects */
.adv-content-container {
position: relative;
z-index: 2;
width: 100%;
}
/* Left Side Script Text Styling */
.adv-script-heading {
font-size: clamp(2.5rem, 5vw, 4.2rem);
color: #ffffff;
line-height: 1.2;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4),
-1px -1px 0 rgba(0,0,0,0.2),
1px -1px 0 rgba(0,0,0,0.2);
padding-left: 10%;
margin-top: 60px;
}
/* Right Side Dark Green Container Block */
.adv-callout-block {
background-color: #334D3D; /* Exact dark forest green */
border-radius: 12px;
padding: 55px 45px;
max-width: 480px;
margin-left: auto; /* Aligns container to the right */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* Typography inside the Block */
.adv-callout-title {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.3rem);
color: #ffffff;
line-height: 1.3;
margin-bottom: 0;
}
.adv-callout-title em {
font-style: italic;
font-family: 'Playfair Display', serif;
}
/* Responsive Mobile Overrides */
@media (max-width: 991px) {
.adv-hero-section {
padding: 60px 0;
background-position: 65% bottom; /* Keeps mountain focal point optimized on tablet */
}
.adv-script-heading {
padding-left: 0;
text-align: center;
margin-bottom: 40px;
margin-top: 20px;
}
.adv-callout-block {
margin: 0 auto; /* Centers the green block on smaller screens */
padding: 40px 30px;
}
}
.trk-blog-section {
background-color: #ffffff;
padding: 70px 0;
}
.trk-main-title {
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 700;
color: #0c1c24;
line-height: 1.15;
letter-spacing: -0.03em;
}
.trk-sub-title {
font-size: 0.95rem;
color: #5a666e;
line-height: 1.6;
max-width: 440px;
margin-top: 25px;
margin-bottom: 50px;
}
/* --- CARD STYLE ARCHITECTURE --- */
.trk-adventure-card {
background: #faf8f5;
border: none;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
height: 100%;
display: flex;
flex-direction: column;
}
/* Wrapper to safely contain image zoom effects */
.trk-img-wrapper {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 12px; /* Top corner rounding matching image block */
}
.trk-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* Elegant image expansion effect when hovering anywhere on the card */
.trk-adventure-card:hover .trk-card-img {
transform: scale(1.04);
}
/* Meta Details Container Split Layout */
.trk-card-body {
padding: 20px;
display: flex;
gap: 20px;
}
/* Date Split Column Details */
.trk-date-box {
min-width: 75px;
flex-shrink: 0;
}
.trk-day {
font-size: 1.4rem;
font-weight: 700;
color: #0c1c24;
line-height: 1;
}
.trk-month {
font-size: 0.85rem;
color: #7a868e;
margin-top: 5px;
display: block;
}
/* Main Content Right Side Column */
.trk-content-box {
border-left: 1px solid #e5ecef;
padding-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.trk-card-text {
font-size: 0.95rem;
font-weight: 500;
color: #0c1c24;
line-height: 1.5;
margin-bottom: 12px;
}
/* Action Links */
.trk-read-more {
font-size: 0.85rem;
font-weight: 600;
color: #0c1c24;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s ease;
}
.trk-read-more:hover {
color: #1b4d3e; /* Deep green accent color for trekking focus */
}
.trk-read-more svg {
transition: transform 0.2s ease;
}
.trk-adventure-card:hover .trk-read-more svg {
transform: translate(2px, -2px);
}
/* Container providing physical scroll space for the width expand interpolation */
.cta-scroll-trigger {
position: relative;
width: 100%;
}
/* The expanding pill element */
.cta-capsule-card {
position: relative;
width: 70%; /* Starts narrow and centered like a pill */
max-width: 1200px;
margin: 0 auto;
height: 550px; /* FIXED height so it never stretches to 100vh */
overflow: hidden;
/* Perfect pill-shaped arcs on the edges initially */
border-radius: 275px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* GPU optimization for smooth dynamic scaling */
will-change: width, border-radius, max-width;
}
.cta-content-wrapper {
position: relative;
width: 100%;
height: 100%;
}
/* Background image processing */
.cta-media-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(0.65);
z-index: 1;
}
.tracking-wider {
letter-spacing: 2px;
font-size: 0.8rem;
}
/* Responsive breakdowns to keep the radius proportional */
@media (max-width: 992px) {
.cta-capsule-card {
width: 85%;
height: 450px;
border-radius: 225px;
}
}
@media (max-width: 576px) {
.cta-capsule-card {
width: 92%;
height: 380px;
border-radius: 100px; /* Softer pill transition for smaller screens */
}
.cta-content-wrapper h2 {
font-size: 2rem;
}
}
/* --- EXPRESS TRAVEL FOOTER CUSTOM STYLES --- */
/* Theme Colors & Font Configurations */
.et-ft-wrapper {
background-color: #002039; /* Dark Forest Green Background */
color: #ffffff;
padding: 60px 0 20px 0;
overflow: hidden;
}
.et-ft-container {
max-width: 1400px;
padding: 0 40px;
}
/* Horizontal Dividers */
.et-ft-divider {
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 0;
opacity: 1;
}
/* 1. Top Navigation Row Styles */
.et-ft-logo {
display: inline-flex;
flex-direction: column;
line-height: 1;
}
.et-ft-logo img{
width:140px;
}
.et-ft-logo-main {
font-size: 1.8rem;
font-style: italic;
font-weight: bold;
}
.et-ft-logo-sub {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
text-align: right;
}
.et-ft-nav-links {gap: 25px;}
.et-ft-nav-links li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 1px;
transition: color 0.3s ease;
padding: 5px 15px;
}
.et-ft-nav-links li a:hover {
color: #f87702; /* Subtle coral accent on hover */
}
/* 2. Main Middle Row Typography & Layout */
.et-ft-main-heading {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 5vw, 4.2rem);
font-style: italic;
font-weight: 400;
letter-spacing: 2px;
line-height: 1.1;
margin: 0;
}
.et-ft-inline-img-box {
width: 110px;
height: 55px;
border-radius: 50px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.et-ft-inline-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.et-ft-description {
max-width: 520px;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
/* 3. Circular Spinning Contact Button */
.et-ft-contact-circle-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
text-decoration: none;
}
.et-ft-contact-circle-btn svg {
animation: etCircleRotate 12s linear infinite;
border-radius: 50%;
}
.et-ft-circle-text {
font-size: 10.5px;
fill: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: bold;
}
.et-ft-circle-arrow {
position: absolute;
font-size: 1.5rem;
color: #ffffff;
transition: transform 0.3s ease;
}
.et-ft-contact-circle-btn:hover .et-ft-circle-arrow {
transform: scale(1.15) translate(2px, -2px);
}
@keyframes etCircleRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 4. Instagram Feed & Social Icon Blocks */
.et-ft-follow-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: normal;
}
.et-ft-insta-item {
position: relative;
width: 65px;
height: 65px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
.et-ft-insta-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.et-ft-insta-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(209, 122, 93, 0.7); /* Translucent coral overlay */
display: flex;
align-items: center;
justify-content: center;
opacity: 1; /* Keeping it consistently active like screenshot */
font-size: 1.1rem;
color: white;
transition: background 0.3s;
}
.et-ft-insta-item:hover .et-ft-insta-overlay {
background: rgba(209, 122, 93, 0.9);
}
/* Individual Social Box Strip */
.et-ft-social-icon {
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 0.9rem;
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.et-ft-social-icon:hover {
background-color: #ffffff;
color: #2e4a3b;
}
/* 5. Bottom Copyright / Meta Section */
.et-ft-copyright, .et-ft-credits {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
.et-ft-copyright a, .et-ft-credits strong {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}
.et-ft-copyright a:hover {
text-decoration: underline;
}
/* --- Responsive Adaptations --- */
@media (max-width: 991.98px) {
.et-ft-wrapper { padding: 40px 0 20px 0; }
.et-ft-main-heading { text-align: center; }
.et-ft-description { text-align: center; margin-bottom: 25px; }
.nt-section-title {
font-size: 2.1rem;
margin-bottom: 40px;
}
.exp-abt-content-col p{
padding:0;
}
}
@media (max-width: 575.98px) {
.et-ft-container { padding: 0 20px; }
.et-ft-nav-links { gap: 10px; }
.et-ft-nav-links li { width: 50%; text-align: center; }
}