/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================================
   GLOBAL TYPOGRAPHY SETTINGS
========================================================= */
body {
    font-family: 'Satoshi', sans-serif;
    color: #222;
    background-color: #FFFEF0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #69AA48;
}

/* =========================================================
   HEADING STYLES
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Satoshi', sans-serif;
    font-weight: 600;
    margin-bottom: 15px;
    color: #111;
}

h1 {
    font-size: 55px;
    line-height: 1.2;
}

h2 {
    font-size: 48px;
    line-height: 1.3;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
    font-weight: 500;
}

/* =========================================================
   PARAGRAPH STYLING
========================================================= */
p {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 15px;
    font-weight: 500;
    color: #114349;

}

/* =========================================================
   ANCHOR TAG STYLING
========================================================= */
a {
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    color: #000;
    transition: all 0.3s ease;
}

a:hover {
    /* color: #146937; */
    text-decoration: none;
}

/* For header nav links override if needed */
.nav-link {
    font-size: 15px;
    font-weight: 500;
}

/* =========================================================
   LIST STYLING
========================================================= */
ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

ul li {
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1.6;
    color: #444;
}

/* Remove bullets for navigation */
ul.list-unstyled {
    list-style: none;
    padding-left: 0;
}

ul.list-inline {
    list-style: none;
    padding-left: 0;
}

ul.list-inline li {
    display: inline-block;
    margin-right: 15px;
}




/* ================= HEADER BACKGROUND SECTION ================= */
.main-header .nav-item {
    margin-bottom: 0;
}

.dest-sidebar-sticky.sticky-top {
    z-index: 2;
}


.main-header {
    z-index: 999;
    padding: 0;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

/* Global scroll settings */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 0;
}

/* Header is fixed — no body offset needed; sections handle their own top spacing */
body {
    padding-top: 0;
}

/* Universal page section */
.page-section {
    position: relative;
    overflow: hidden;
}

/* Home page sections */
.home-section {}

/* ================= LOGO SECTION ================= */
.logo-wrapper {
    background: #fff;
    padding: 8px 0px;
    border-radius: 50px;
    text-align: center;
    max-width: max-content;
}

.logo-wrapper img,
.main-header .logo-wrapper img {
    height: 65px;
    width: auto;
    display: block;
}

.mobile-logo img,
.main-header .mobile-logo img {
    height: 65px;
    width: auto;
    display: block;
}

/* ================= NAVIGATION SECTION ================= */
.nav-pill {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.header-nav .nav-link {
    color: #1a7c45;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 20px;
    margin: 0 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background-image 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    border-radius: 8px;
}

.header-nav .nav-link::after {
    display: none;
}

.header-nav .nav-link:hover,
.header-nav .nav-link:focus {
    background-image:
        radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.22) 0%, transparent 65%),
        linear-gradient(90deg, #ff7a00, #fdb913);
    color: #fff;
    box-shadow: 0 6px 20px rgba(255, 122, 0, 0.35);
}

.header-nav .nav-link:hover::after,
.header-nav .nav-link.active::after {
    display: none;
}

.header-nav .nav-link.active {
    font-weight: 600;
    color: #146937;
}

/* ================= MEGA MENU HORIZONTAL BAR ================= */
.mega-menu-bar {
    background: transparent;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 10px);
    padding-top: 10px;
    z-index: 99;
    display: none;
}

.mega-menu-bar.mega-active {
    display: flex;
    justify-content: center;
}

.mega-menu-bar .container {
    display: flex;
    justify-content: center;
    padding-top: 6px;
    padding-bottom: 0;
    line-height: 0;
    font-size: 0;
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    background: #1a7c45;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
    width: max-content;
}

.mega-menu-list li {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    margin-bottom: 0;
}

.mega-menu-list li:last-child {
    border-right: none;
}

.mega-menu-list li a {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 28px;
    text-decoration: none;
    background: transparent;
    transition: background 0.18s ease;
    white-space: nowrap;
    border: none;
}

.mega-menu-list li a:hover,
.mega-menu-list li a.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ================= CONTACT BUTTON SECTION ================= */
.contact-btn {
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 4px 18px 5px 5px;
    display: flex;
    transition: 0.3s all ease;
    align-items: center;
    font-size: 13px;
}

.contact-btn .icon img {
    width: 14px;
    height: 14px;
}

.rqst-icon img {
    width: 10px;
    height: 10px;
}

.contact-btn:hover {}

.contact-btn .icon {
    margin-right: 6px;
    background-color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.rqst-icon {
    margin-right: 6px;
    background-color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

/* ================= RIGHT QUOTE BUTTON SECTION ================= */
.quote-btn,
.cta-primary-btn {
    background: #1a7c45;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 5px 22px 5px 5px;
    border: 1px solid #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.cta-primary-btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.quote-btn:hover,
.cta-primary-btn:hover {}






/* =========================================================
   HERO BANNER MAIN WRAPPER
========================================================= */
.hero-banner {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    z-index: 3;
    height: 100vh;
    min-height: 100vh;
}

.banner-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-banner .container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.explore-section {
    margin-top: 0px;
}


/* =========================================================
   CONTENT POSITIONING
========================================================= */
.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

@media (min-width: 992px) {
    .hero-banner .hero-content.col-lg-6 {
        flex: 0 0 auto;
        width: 100%;
    }
}

.hero-content h1 {
    font-size: 65px;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
}

.hero-content p {
    margin-top: 28px;
    color: #fff;
}

/* Higher-specificity overrides — beat responsive.min.css media stack */
.hero-banner .hero-content .top-banner-content h1 {
    font-size: 65px;
    line-height: 1;
    letter-spacing: -1px;
}

.hero-banner .hero-content .top-banner-content p {
    margin-top: 28px;
    max-width: 517px;
}

@media (max-width: 1199px) {
    .hero-banner .hero-content .top-banner-content h1 {
        font-size: 48px;
    }

}

@media (max-width: 991px) {
    .hero-banner .hero-content .top-banner-content h1 {
        font-size: 56px;
    }

}

@media (max-width: 575px) {
    .hero-banner .hero-content .top-banner-content h1 {
        font-size: 40px;
    }

}

/* =========================================================
   BUTTON STYLES
========================================================= */
.btn-view-packages {
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    color: #fff;
    padding: 5px 18px 5px 5px;
    border-radius: 50px;
    margin-top: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    border: 2px solid #fff;
    text-transform: uppercase;
    font-size: 13px;
}

.hero-banner .btn-view-packages {
    border: 1px solid #fff;
    background: #1a7c45;
}

.mice-section .btn-view-packages {
    border: 0px solid #fff;
    margin-top: 30px;
    display: inline-flex;
}

.btn-view-packages:hover {
    /* border: 2px solid #fff; */
}

.bannerPackage {
    margin-right: 6px;
    background-color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    transition: 0.3s all ease;
    justify-content: center;
    border-radius: 50px;
}

.vide-icon {
    margin-right: 6px;
    background-color: #1a7c45;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    transition: 0.3s all ease;
    justify-content: center;
    border-radius: 50px;
}

.bottom-banner-content {
    margin-top: 100px;
    margin-bottom: 50px;
}

.btn-view-all {
    background: transparent;
    border: 1px solid #ffffff3d;
    color: #fff;
    padding: 6px 22px 6px 6px;
    border-radius: 50px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
}

.btn-view-all:hover {
    border: 1px solid #ffffff3d;
}

/* =========================================================
   TOUR CARDS SECTION
========================================================= */
.tour-cards {
    position: relative;
    z-index: 2;
    margin-top: 60px;
}

.tour-card {
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    text-align: center;
    padding-bottom: 0px;
    transition: 0.3s ease;
}

.tour-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}



.explore-section h5 {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 0;
}

.explore-section p {
    margin-top: 16px;
    max-width: 250px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 26px;
    line-height: 1.6;
}

/* =========================================
   MAIN SLIDER BOX (VISIBLE AREA ONLY)
========================================= */
.heroSLiderBox {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 1150px;
    overflow: hidden;
    z-index: 5;
    padding: 50px 0 50px 0;
    /* ✅ Just add these two lines */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16px, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 16px, black 100%);
}


/* ================= SLIDER TRACK ================= */
.hero-tour-slider {
    display: flex;
    padding-left: 13px;
    /* padding-right: 50px; */
    gap: 40px;
    align-items: end;
    will-change: transform;
    transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.hero-tour-slider .swiper-wrapper {
    align-items: end;
}

/* ================= CARD BASE (fixed size) ================= */
.hero-tour-slider .tour-card {
    width: 284px;
    height: 371px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    transition: height 400ms ease, opacity 300ms ease;
    border: 2px solid #fff;
}

/* image */
.hero-tour-slider .tour-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s all ease;
}

.hero-tour-slider .tour-card.active img {
    width: 100%;
    border-radius: 0;
    height: 290px;
    object-fit: cover;
}

.tour-card h6 {
    margin-top: 10px;
    font-weight: bold;
    color: #fff;
    font-size: 24px;
    text-align: start;
    margin-bottom: 6px;
}

.hero-tour-slider .tour-card.active h6 {
    margin-top: 10px;
    color: #000;
}


/* ================= ACTIVE CARD (no width/height change) ================= */
.hero-tour-slider .tour-card.active {
    height: 420px;
    opacity: 1;
    padding: 10px;
    background-color: #fff;
}

.hero-tour-slider .tour-card.active .tour-overlay {
    position: unset;
    background: transparent;
    padding: 0px 0px 0px;
}

/* ================= OVERLAY ================= */
.hero-tour-slider .tour-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0px 18px 16px;
    background: #003D00;
    background: linear-gradient(0deg, rgba(0, 61, 0, 1) 0%, rgb(0 61 0 / 9%) 100%);
    color: #fff;
}

.tour-padding {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 1.5rem;
}

.hero-tour-slider .tour-overlay p {
    text-align: start;
    font-weight: 500;
    margin-bottom: 0;
    display: none;
    opacity: 0;
    max-width: 260px;
}

.hero-tour-slider .tour-card.active .tour-overlay p {
    text-align: start;
    font-weight: 500;
    margin-bottom: 0;
    display: block;
    opacity: 1;
    line-height: 26px;
}

.hero-slider-nav button.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* =========================================================
   NAVIGATION BUTTONS
========================================================= */
.hero-slider-nav {
    position: absolute;
    right: 99px;
    bottom: 433px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hero-slider-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.hero-slider-nav button:hover {
    background: #fff;
    color: #000;
}


/* =========================================================
   TRUSTED USERS WRAPPER
========================================================= */


/* =========================================================
   INNER FLEX LAYOUT
========================================================= */
.trusted-users-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 43px;
}

/* =========================================================
   AVATAR GROUP
========================================================= */
.trusted-avatars {
    display: flex;
    align-items: center;
}



.trusted-avatars img {
    width: 89px;
    height: auto;
}

/* =========================================================
   TEXT STYLING
========================================================= */
.trusted-text h5 {
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

.trusted-text h2 {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 5px 0 0 0;
    line-height: 1.1;
}

.section {
    padding: 100px 0;
    position: relative;
}


/* =========================================
   MICE BANNER SECTION
========================================= */
.mice-banner-section {
    position: relative;
    background-image: url("../img/micebanner.webp");
    background-size: cover;
    background-position: center;
    height: 670px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding-bottom: 60px;
}

.mice-banner-overlay {
    display: none;
}

.mice-banner-section h2 {
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.mice-banner-section p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 36px;
}

.mice-cta {
    border-color: #fff !important;
}

/* =========================================
   FEATURED ITINERARIES SECTION
========================================= */
.featured-itineraries-section {
    background-color: #FFFEF0;
}

.fi-heading {
    font-size: 48px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 0;
}

.fi-heading span {
    color: #69AA48;
}

.fi-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
    position: relative;
}

.fi-card:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.22);
}

.fi-card-img {
    position: relative;
    overflow: hidden;
}

.fi-card-img img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.fi-card:hover .fi-card-img img {
    transform: scale(1.06);
}

/* Default label — always visible at bottom of image */
.fi-card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 18px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, transparent 100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fi-card-label h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

/* Hide label on hover */
.fi-card:hover .fi-card-label {
    opacity: 0;
    transform: translateY(8px);
}

/* Floating overlay — rolls up from bottom */
.fi-card-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(10, 30, 20, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    transform: translateY(calc(100% + 20px));
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.fi-card:hover .fi-card-overlay {
    transform: translateY(0);
    opacity: 1;
}

.fi-card-overlay h5 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}

.fi-card-overlay p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.fi-btn {
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    color: #fff;
    padding: 5px 14px 5px 5px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: 35%;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.fi-btn:hover {
    opacity: 0.9;
}

.fi-btn span {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fi-btn span img {
    width: 12px;
    height: 12px;
}

/* Hide old card body */
.fi-card-body {
    display: none;
}

.fi-card-body h5 {
    font-size: 17px;
    font-weight: 700;
    color: #114349;
    margin: 0;
}

/* =========================================
   SERVICES SECTION
========================================= */

.service-bgImg img {
    opacity: 10%;
    position: absolute;
    bottom: -200px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


/* =========================================
   HEADING
========================================= */
.services-heading {
    text-align: center;
    margin-bottom: 70px;
}

.section-heading h2 {
    color: #114349;
    margin-bottom: 20px;
    line-height: 1;
}

.section-heading {
    margin-bottom: 20px;
}


.section-heading p {
    color: #114349;
    font-size: 18px;
    font-weight: 500;
}


/* =========================================
   CARD BASE
========================================= */
.service-card {
    background: #fff;
    padding: 25px 30px;
    border-radius: 20px;
    border: 1px solid #D1F8BD;
    cursor: pointer;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0px 6px 20px 0 #00000012;
    position: relative;
    /* ✅ needed for ::before */
    overflow: hidden;
    /* ✅ clips the pseudo-element */
    transition: border 0.4s ease, box-shadow 0.4s ease;
}

/* ✅ Gradient lives here, fades in on hover */
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px;
    z-index: 0;
}

.service-card:hover::before {
    opacity: 1;
    /* ✅ smoothly fades in */
}

/* ✅ Push all inner content above the pseudo-element */
.service-card>* {
    position: relative;
    z-index: 1;
}

/* Icon */
.service-icon {
    font-size: 42px;
    color: #1B7F42;
    margin-bottom: 20px;
    background-color: #fff;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon svg {
    width: 45px;
    height: 45px;
}

/* Title */
.service-card h4 {
    font-size: 24px;
    font-weight: bold;
    color: #114349;
    margin: 0;
    transition: color 0.4s ease;
    /* ✅ smooth color change */
}

.services-row {
    --bs-gutter-x: 4.5rem;
    --bs-gutter-y: 4.5rem;
}

/* =========================================
   HOVER EFFECT
========================================= */
.service-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #F57C1B;
}

.service-card:hover .service-icon svg path {
    fill: #F57F1B;
    transition: fill 0.4s ease;
    /* ✅ smooth icon color */
}

.service-card:hover h4 {
    color: #fff;
}

/* =========================================
   ABOUT STATS SECTION
========================================= */

/* =========================================
   HEADING
========================================= */
.about-heading {
    font-size: 44px;
    font-weight: 700;
    color: #1C4C4C;
    line-height: 1.2;
}

.about-heading span {
    color: #4F8F3E;
}

.about-subtext {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* =========================================
   BUTTON
========================================= */
.about-btn {
    color: #114349;
    padding: 5px 18px 5px 5px;
    border-radius: 50px;
    margin-bottom: 55px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    border: 2px solid rgb(168 168 168 / 20%);
    gap: 10px;
    text-transform: uppercase;
    font-size: 13px;
}

.about-btn img {
    width: 20px;
    height: 20px;
}


.about-stats-section .section-heading {
    margin-bottom: 30px;
}

/* =========================================
   STATS CARD
========================================= */

.create-path img {
    position: absolute;
    left: -750px;
    top: -501px;
    z-index: 1;
}

.stats-card {
    background: #FFFEF0;
    border: 1px solid #D1F8BD;
    border-radius: 20px;
    padding: 30px 25px;
    text-align: left;
    transition: 0.3s ease;
    height: 100%;
    position: relative;
}

/* Plus styling */
.stat-number .plus {
    font-size: 39px;
    font-weight: 600;
    margin-left: 0;
    margin-top: 0;
    line-height: 1;
    background: linear-gradient(90deg, rgba(16, 113, 58, 1) 0%, rgba(0, 140, 61, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Top divider line */
.stats-card::before {
    content: "";
    position: absolute;
    top: 66px;
    right: 0;
    width: 71%;
    height: 1px;
    background: #D1F8BD;
}

/* Icon */
.stats-icon {
    font-size: 40px;
    color: #F57F1B;
    margin-bottom: 20px;
}

.stats-icon img {
    z-index: 1;
    position: relative;
}

/* Number */
.stats-card h3 span.odometer {
    font-size: 40px;
    font-weight: 700;
    /* color: #000; */
    background: linear-gradient(90deg, rgba(16, 113, 58, 1) 0%, rgba(0, 140, 61, 1) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
    margin-top: 0px;
    line-height: 1;
    font-family: 'Satoshi', sans-serif;
}

.stats-card h3 {
    margin-bottom: 5px;
}

.stats-card h3 span+text {
    font-size: 32px;
}

/* Apply gradient to inner moving digits */
.stats-card .odometer-inside,
.stats-card .odometer-digit,
.stats-card .odometer-value {
    background: linear-gradient(90deg,
            rgba(16, 113, 58, 1) 0%,
            rgba(0, 140, 61, 1) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 4s linear infinite;
}

.stats-space {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Label */
.stats-card p {
    font-size: 16px;
    color: #000;
    margin: 0;
    font-weight: 500;
}

/* Hover */
.stats-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.about-stats-section .section-heading h2 {
    max-width: none;
    color: #114349 !important;
}

.about-stats-section .section-heading h2 .word .char-inner {
    color: #114349 !important;
}

.about-stats-section .section-heading h2 .highlight-text .word .char-inner {
    color: #69AA48 !important;
}

.about-stats-section .section-heading p {
    max-width: none;
}

.journey-bg {
    /* background-image: url(../img/journey-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 2; */
    padding-bottom: 136px;
}



.about-stats-section .section-heading p {
    max-width: none;
    margin-bottom: 0;
    text-align: center;
}

/* ===========================
   MICE SECTION
=========================== */
.mice-section {
    position: relative;
    isolation: isolate;
    padding: 100px 0;
    background: transparent;
    border-radius: 30px;
    overflow: hidden;
}

/* bg image layer — sits above the curve-line */
/* .mice-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/micebg.webp) center center / cover no-repeat;
    z-index: 1;
    border-radius: inherit;
} */

.mice-section .container {
    position: relative;
    z-index: 3;
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    display: flex;
    align-items: flex-start;
}

/* ================= HEADING ================= */


.mice-section h2 span {
    color: #69AA48;
}

.mice-section .section-heading h2 {
    color: #114349;
    text-align: center;
}

.mice-section .section-heading {
    margin-bottom: 20px;
}

.mice-page-desc {
    text-align: center;
}

/* .mice-images-wrapper img {
    margin-top: -35px;
    width: 100%;
} */


.mice-images-wrapper {
    position: relative;
    margin-top: -35px;
}

.mice-images-wrapper .curve-line {
    margin-top: -35px;
    width: 100%;
    position: relative;
    z-index: 0;
}

/* ✅ Base floating image style */
.mice-float-img {
    position: absolute;
    z-index: 2;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* .mice-float-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} */

/* ✅ Position each image along the curve */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

.mice-float-1 {
    top: 30px;
    left: 6%;
    rotate: 341deg;
    animation: float 4s ease-in-out infinite;
}

.mice-float-2 {
    top: 150px;
    left: 28%;
    rotate: 3deg;
    animation: float 4.5s ease-in-out infinite;
}

.mice-float-3 {
    top: 150px;
    left: 57%;
    rotate: -4deg;
    animation: float 5s ease-in-out infinite;
}

.mice-float-4 {
    top: 15px;
    right: 6%;
    rotate: -17deg;
    animation: float 3.8s ease-in-out infinite;
}

/* ================= BUTTON ================= */
.btn-quote {
    background: linear-gradient(90deg, #F57F1B, #FFB800);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    transition: 0.3s ease;
}

.btn-quote:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(245, 127, 27, 0.4);
    color: #fff;
}



/* ===========================
   FAQ SECTION
=========================== */


/* ================= LEFT CARD ================= */
.faq-left-card {
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    border-radius: 20px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.faq-left-content h3 {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
}

.btn-contact {
    background: #0B7A3E;
    color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s ease;
}

.btn-contact:hover {
    background: #075a2d;
    color: #fff;
}

.faq-left-image img {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 320px;
}

/* ================= ACCORDION ================= */
.custom-accordion .accordion-item {
    border: none;
    background: transparent;
    border-bottom: 1px solid #ddd;
    padding: 30px 30px;
    border-left: 1px solid #dddddd00;
    border-top: 1px solid #dddddd00;
    border-right: 1px solid #dddddd00;
}

.custom-accordion .accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.custom-accordion .accordion-button {
    background: transparent;
    box-shadow: none;
    font-weight: 600;
    font-size: 22px;
    padding: 0px;
    color: #000;
}

.custom-accordion .accordion-button::after {
    content: "+";
    background-image: none;
    font-size: 25px;
    transform: none;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
    content: "−";
}

.custom-accordion .accordion-body {
    color: #000;
    font-size: 16px;
    padding: 23px 0px 0px 0px;
    max-width: 610px;
}

.custom-accordion .accordion-item.active {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    margin-top: 25px;
    border: 1px solid #DADADA;
}

.faq-left-content {
    background-color: rgb(255 255 255 / 20%);
    padding: 20px;
    border-radius: 20px;
}

.faq-left-content .quote-btn {
    border: 0px solid #fff;
}


.faq-spaice {
    --bs-gutter-x: 6rem;
}


/* ================= NEWSLETTER SECTION ================= */
.newsletter-inner {
    padding: 0;
    background: transparent;
    width: 100%;
    margin-top: 0;
}

.newsletter-section h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: left;
}

.newsletter-section p {
    color: rgba(255, 255, 255, 0.88);
    line-height: 30px;
    margin-bottom: 0px;
    text-align: left;
}

.newsletter-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
    margin: 0;
}

.newsletter-form input {
    width: 100%;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 14px 22px;
    outline: none;
    color: #fff;
    font-size: 15px;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.newsletter-submit-btn {
    width: 100%;
    justify-content: center;
    padding: 6px 20px 6px 6px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
}

/* ================= FOOTER ================= */

.main-footer {
    position: relative;
    padding: 60px 0 24px;
    color: #114349;
    margin: 13px;
    border-radius: 20px;
    background: #FFFEF0;
}

.main-footer.contact-footer {
    padding: 160px 0 24px;
}

/* ================= LEFT CONTACT BOX ================= */

.footer-contact-box {
    padding: 30px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(2px);
    background-color: #ffffff00;
    height: 100%;
}

.footer-contact-box h2 {
    font-weight: 600;
}

.footer-contact-box h2 span {
    color: #5DFF00;
}

.footer-email,
.footer-phone {
    margin-bottom: 26px;
    font-weight: bold;
    color: #fff;
}

.footer-social a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: #fff;
    transition: 0.3s ease;
    border: 2px solid #d1f8bd45;
}

.footer-contact-box .section-heading h2 {
    color: #fff;
}

.footer-contact-box .section-heading h2 span {
    color: #56FF00;
}

/* ================= NEWSLETTER ================= */

/* ================= NEWSLETTER WRAPPER ================= */

.newsletter-wrapper {
    width: 100%;
    margin-top: 38px;
}

/* ================= NEWSLETTER FORM ================= */

.newsletter-form {
    position: relative;
    display: flex;
    align-items: center;
    /* padding: 0px 25px; */
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ================= INPUT ================= */

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #ffffff;
    padding-right: 80px;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* ================= BUTTON ================= */

.newsletterTitle {
    font-size: 16px;
    color: #56FF00;
    font-weight: bold;
    margin-bottom: 20px;
}

.newsletter-btn {
    position: absolute;
    right: 9px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #5DFF00;
    color: #003f32;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

/* ================= LINKS BOX ================= */

.footer-links-box {
    background: #F1F1E8;
    padding: 25px 33px;
    border-radius: 20px;
    color: #000;
}

.footer-links-box h5 {
    font-weight: 700;
    color: #114349;
    margin-bottom: 20px;
}

.footer-links-box ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.footer-links-box ul li {
    margin-bottom: 12px;
}

.footer-links-box ul li:last-child {
    margin-bottom: 0px;
}

.footer-links-box ul li a {
    text-decoration: none;
    color: #124349b8;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

.footer-links-box ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: #124349b8;
    transform: scaleX(0);
    transform-origin: right;
    /* exit: collapses from left → right */
    transition: transform 0.3s ease;
}

.footer-links-box ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    /* enter: expands from left → right */
}

.footer-links-box ul li a:hover {
    color: #0F5132;
}

/* ================= MAP SECTION ================= */

.footer-map-box {
    background: #D9FFC3;
    padding: 22px 22px;
    border-radius: 20px;
}

.footer-map-box h5 {
    margin-bottom: 20px;
    font-weight: 700;
    color: #114349;
}

.map-placeholder img {
    border-radius: 0px;
}

.map-placeholder iframe {
    border-radius: 20px;
    border: 2px dashed #114349 !important;
    height: 175px;
}

.padding-left {
    padding-left: 60px;
}

.padding-left-1 {
    padding-left: 0;
}

.tourism-badge {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #00DF61;
    height: 175px;
    display: flex;
    align-items: center;
}

.tourism-badge img {
    width: 100%;
    /* margin-top: 10px; */
}

/* ================= BOTTOM ================= */

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px dashed rgba(17, 67, 73, 0.25);
    font-size: 14px;
    font-weight: 500;
    color: #114349;
}

/* ================= FOOTER BRAND (logo + map + badge) ================= */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-right: 60px;
}

/* Green card — logo centered + map */
.footer-map-card {
    background: #D9FFC3;
    border: none;
    border-radius: 16px;
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-logo-wrap {
    display: flex;
    justify-content: center;
}

.footer-brand-desc {
    font-size: 14px;
    color: rgba(17, 67, 73, 1);
    font-weight: 600;
    line-height: 1.7;
    margin: 12px 0 16px;
    text-align: center;
}

.footer-logo {
    height: 50px;
    display: block;
}

.footer-map-inner {
    width: 100%;
    border: 2px dashed #114349;
    border-radius: 12px;
    overflow: hidden;
}

.footer-map-inner iframe {
    width: 100%;
    height: 104px;
    border: 0 !important;
    display: block;
}

/* Badge card — light green bg, solid #00DF61 border, pulled up */
.footer-badge-wrap {
    border: 2px solid #00DF61;
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.footer-badge-wrap img {
    width: 100%;
    max-width: 220px;
}

/* ================= FOOTER NAV COLUMNS ================= */
.footer-nav {
    padding-top: 20px;
}

.footer-nav h5 {
    font-weight: 700;
    color: #114349;
    font-size: 16px;
    margin-bottom: 20px;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav ul li {
    margin-bottom: 14px;
}

.footer-readmore-link {
    display: inline-block;
    margin-top: 6px;
    color: #114349;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-readmore-link:hover {
    color: #ff7a00;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
    max-width: 140px;
    justify-content: center;
    margin: 0 auto;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(17, 67, 73, 0.30);
    color: #114349;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.footer-socials a:hover {
    background: #ff7a00;
    border-color: #ff7a00;
    color: #fff;
    transform: translateY(-3px);
}

.footer-socials a.footer-social-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.footer-social-max img {
    display: block;
    transition: filter 0.25s ease;
}

.footer-social-max:hover img {
    filter: brightness(0) invert(1);
}

.footer-nav ul li a {
    text-decoration: none;
    color: rgba(17, 67, 73, 0.65);
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s ease;
    position: relative;
    display: inline-block;
}

.footer-nav ul li a:hover {
    color: #114349;
}

/* ================= FOOTER CONTACT COLUMN ================= */
.footer-contact-col h5 {
    font-weight: 700;
    color: #114349;
    font-size: 16px;
    margin-bottom: 16px;
}

.footer-contact-col .footer-phone,
.footer-contact-col .footer-email {
    font-weight: 700;
    color: #114349;
    font-size: 15px;
    margin-bottom: 10px;
}

.footer-address {
    color: rgba(17, 67, 73, 0.65);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
    font-weight: 400;
}

.footer-address a {
    color: rgba(17, 67, 73, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-address a:hover {
    color: #ff7a00;
}


/* ================= TESTIMONIAL SECTION ================= */

.testimonial-section {
    padding: 100px 0;
    background: url("../img/testimonial-bg.webp") center center / cover no-repeat;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin: 13px;
}

.testiImg img {
    position: absolute;
    top: -120px;
    width: 100%;
    left: 60px;
    right: 0;
}

.testimonial-section .container {
    position: relative;
    z-index: 2;
}

/* ================= SWIPER ================= */

.testimonialSwiper {
    padding: 0px 0;
}

.tourSwiper {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0px;
}

.custom-margin {
    margin-left: 230px;
}

/* Slide opacity control */
.testimonialSwiper .swiper-slide {
    opacity: 0.3;
    transition: 0.3s all ease;
    transform: scale(0.7) !important;
}

.testimonialSwiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1) !important;
}

/* ================= CARD ================= */

.testimonial-card {
    max-width: 900px;
    margin: auto;
}

.testimonial-card h3 {
    font-size: 36px;
    font-weight: 700;
    color: #114349;
    text-align: center;
    line-height: 1.4;
    margin-top: 30px;
}

.testimonial-card .author {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 700;
    color: #69AA48;
    text-align: center;
}

/* ================= AVATARS ================= */

.testimonial-avatars {
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar {
    border-radius: 50%;
    border: 4px solid #6BFF00;
    object-fit: cover;
}

.avatar.small {
    width: 70px;
    height: 70px;
    margin: 0 -15px;
    opacity: 0.8;
}

.avatar.large {
    width: 110px;
    height: 110px;
    margin: 0 -10px;
    z-index: 2;
}


/* ================= SECTION ================= */

.tour-package-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin: 13px;
    margin-top: -46px;
    z-index: 3;
}

.tour-nav {
    display: flex;
    align-items: center;
    justify-content: end;
}

/* ================= HEADING ================= */

.tour-heading {
    color: #114349;
    line-height: 1.15;
    letter-spacing: -0.5px;
}


.tour-heading .word .char-inner {
    color: #114349 !important;
}

.tour-heading .highlight-text .word .char-inner {
    color: #56FF00 !important;
}

.tour-subtext {
    color: #114349;
    margin-top: 15px;
}

/* ================= CARD ================= */

.tour-package-section .tour-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 5px;
}

.tour-package-section .tour-img {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.tour-package-section .tour-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}

.tour-package-section .tour-card h5 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
    font-size: 20px;
    color: #114349;
    padding-left: 13px;
}

.tour-package-section .tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff8c00;
    color: #fff;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    line-height: 1;
}

/* ================= NAV ================= */

.tour-nav button.tour-next,
.tour-nav button.tour-prev {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #D1F8BD;
    background: transparent;
    color: #D1F8BD;
    margin-left: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.tour-nav button.tour-prev.swiper-button-disabled,
.tour-nav button.tour-next.swiper-button-disabled {
    opacity: 0.5;
}

.tour-nav button:hover {
    background: transparent;
    color: #D1F8BD;
}

/* ================= PROGRESS ================= */

.tour-progress {
    height: 4px;
    background: #00272C;
    margin-top: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #5DFF00;
    transition: width 0.4s ease;

}


/* =========================================================
   EXPANDING DESTINATION CARDS
========================================================= */
.expand-cards-wrap {
    display: flex;
    gap: 10px;
    height: 560px;
}

/* Dynamically scale the collapse ratio based on card count */
.expand-card {
    flex: 1;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s ease,
        border-color 0.3s ease;
    background-size: cover;
    background-position: center;
    min-width: 52px;
    /* border: 2px solid rgba(255, 255, 255, 0.45); */
}

.expand-card:hover {
    flex: 5;
    /* box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.6),
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(255, 140, 30, 0.35); */
    border-color: rgba(255, 255, 255, 0.75);
    z-index: 2;
}

.expand-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 70%) 35%, rgb(0 0 0 / 0%) 69%, rgb(0 0 0 / 0%) 99%);
    z-index: 1;
    opacity: 0.65;
    transition: opacity 0.4s ease;
}

.expand-card:hover::before {
    opacity: 1;
}

.expand-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 22px 18px;
    z-index: 2;
    color: #fff;
}

.expand-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.3s ease;
}

.expand-card:hover .expand-card-title {
    font-size: 26px;
    white-space: normal;
}

.expand-card-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.7;
    color: rgb(255 255 255);
    transition: opacity 0.35s ease 0.18s, max-height 0.4s ease 0.12s, margin-top 0.3s ease 0.12s;
}

.expand-card:hover .expand-card-desc {
    opacity: 1;
    max-height: 160px;
    margin-top: 10px;
}

@media (max-width: 767px) {
    .expand-cards-wrap {
        flex-direction: column;
        height: auto;
    }

    .expand-card {
        height: 200px;
        flex: none;
    }

    .expand-card-title {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* ======================================== */
/* INNER PAGE FULL WIDTH BANNER CSS START */
/* ======================================== */

.inner-banner-section {
    position: relative;
    width: auto;
    background-color: #042846;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: end;
    overflow: hidden;
    height: 700px;
    min-height: 700px;
    padding-top: 90px;
    padding-bottom: 60px;
}

/* Banner Height Control */
.banner-height {
    height: 100%;
}

/* Dark Blue Gradient Overlay */
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(4, 40, 70, 0.85) 0%,
            rgba(4, 40, 70, 0.7) 40%,
            rgba(4, 40, 70, 0.3) 70%,
            rgba(4, 40, 70, 0) 100%);
    z-index: 1;
}

/* Content Styling */
.banner-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.banner-subtitle {
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff;
    line-height: 1;
}

.banner-title {
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff;
    line-height: 1;
}

.banner-description {
    font-weight: 500;
    max-width: 780px;
    color: #ffffff;
    /* margin-top: 28px; */
}

.experiencebanner .banner-description {
    max-width: 540px;
}


/* ======================================== */
/* INNER PAGE FULL WIDTH BANNER CSS END */
/* ======================================== */


/* ===================================== */
/* STATIC RUSSIA MAP CSS START */
/* ===================================== */

/* Static Russia map wrapper — full-width centering shell */
.static-russia-map {
    width: 100%;
    overflow: visible;
    text-align: center;
    margin-top: 40px;
}

/* Inner wrapper sized exactly to the map image; cards/markers are relative to this */
.russia-map-inner {
    display: inline-block;
    position: relative;
    overflow: visible;
}

.russia-map-marker {
    position: absolute;
    width: 20px;
    height: auto;
    transform: translate(-50%, -100%);
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* Background map image — block so the inline-block inner wrapper hugs it exactly */
.russia-bg-img {
    display: block;
    width: auto;
    max-width: min(88vw, 1040px);
    max-height: calc(100vh - 280px);
    height: auto;
}

/* Overlay SVG for pins and leader lines */
.russia-overlay-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* ---- Russia map city cards ---- */
.smap-card {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px 12px;
    box-shadow: 0 4px 24px rgba(17, 115, 59, 0.14), 0 2px 8px rgba(0, 0, 0, 0.07);
    border: 2px solid #D1F8BD;
    min-width: 160px;
    max-width: 220px;
    z-index: 30;
    pointer-events: auto;
    text-align: left;
    overflow: visible;
}

.smap-card h5 {
    font-size: 13px;
    font-weight: 800;
    color: #114349;
    margin-bottom: 6px;
    text-align: left;
}

.smap-card span.no-badge {
    display: inline-block;
    background: #E6F3EC;
    border-radius: 30px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #10723A;
    margin-bottom: 8px;
}

.smap-card .city-address {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #4a4a4a;
    font-weight: 500;
}

.smap-card .city-address i {
    color: #E8640A;
    font-size: 15px;
    line-height: 1.25;
    flex-shrink: 0;
    margin-top: 1px;
}

/* GET DIRECTION button — sits on the bottom border (Russia map cards) */
.smap-card .pin-dir-btn {
    position: absolute !important;
    bottom: -12px;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    color: #fff;
    padding: 3px 12px 3px 4px;
    border-radius: 50px;
    font-weight: 600;
    display: flex !important;
    align-items: center;
    border: 2px solid #fff;
    text-transform: uppercase;
    font-size: 10.5px;
    width: max-content;
    margin: 0 auto;
    gap: 6px;
    line-height: 1.2;
}

.smap-card .pin-dir-btn:hover {
    opacity: 0.88;
    color: #fff;
}

.smap-card .pin-dir-btn .bannerPackage {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.smap-card .pin-dir-btn .bannerPackage::before {
    width: 15px;
    height: 15px;
}

.smap-card .pin-dir-btn .bannerPackage img {
    width: 10px;
    height: 10px;
}

.pin-dir-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: #fff;
    border-radius: 50%;
}

.pin-dir-btn .btn-icon i {
    color: #E8640A;
    font-size: 13px;
    line-height: 1;
}

/* ===================================== */
/* STATIC RUSSIA MAP CSS END */
/* ===================================== */

/* ===================================== */
/* GLOBAL NETWORK TAB CSS START */
/* ===================================== */

/* Two-panel wrapper — separate sections with a gap */
.gn-wrap {
    display: flex;
    gap: 18px;
    align-items: stretch;
    min-height: 560px;
    margin-top: 32px;
}

/* ============================================================
   LEFT PANEL — scrollable city list (white bg)
   ============================================================ */
.gn-list-panel {
    width: 280px;
    min-width: 280px;
    height: 620px;
    max-height: 620px;
    background: linear-gradient(155deg, #fdb913 0%, #E8640A 50%, #c84800 100%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(232, 100, 10, 0.32);
    align-self: flex-start;
    padding: 0;
}

/* Panel title */
.gn-panel-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    padding: 16px 22px 16px;
    margin: 0;
    flex-shrink: 0;
}

/* Divider below title */
.gn-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 22px 6px;
    flex-shrink: 0;
}

/* Scrollable region list */
.gn-region-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.gn-region-list::-webkit-scrollbar {
    width: 4px;
}

.gn-region-list::-webkit-scrollbar-track {
    background: transparent;
}

.gn-region-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.gn-region-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.gn-region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: background 0.2s;
    user-select: none;
}

.gn-region-header:hover {
    background: rgba(0, 0, 0, 0.1);
}

.gn-region-item.active .gn-region-header {
    background: rgba(0, 0, 0, 0.1);
}

.gn-region-arrow {
    font-size: 20px;
    opacity: 0.9;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.gn-region-item.gn-has-sub.active .gn-region-arrow {
    transform: rotate(90deg);
}

/* Sub-region list — hidden by default, shown when Africa accordion is active */
.gn-subregion-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 6px;
    background: rgba(0, 0, 0, 0.18);
    display: none;
}

.gn-region-item.active .gn-subregion-list {
    display: block;
}

.gn-subregion-item {
    padding: 9px 22px 9px 28px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.15s, color 0.15s;
}

.gn-subregion-item:last-child {
    border-bottom: none;
}

.gn-subregion-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.gn-subregion-item.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
}

/* Russia tab — active city highlighted in orange */
#rn-office-list .gn-subregion-item.active {
    background: rgba(232, 100, 10, 0.18);
    color: #fdb45f;
    font-weight: 700;
    border-left: 3px solid #E8640A;
    padding-left: 25px;
}

#rn-office-list .gn-subregion-item:hover {
    color: #fdb45f;
}

/* JS-injected divider between city items */
/* .rn-city-divider {
    list-style: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 18px;
} */


.gn-list-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    padding: 22px 20px 13px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Scrollable list */
.gn-city-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1;
}

.gn-city-list::-webkit-scrollbar {
    width: 6px;
}

.gn-city-list::-webkit-scrollbar-track {
    background: #dbdbdb17;
}

.gn-city-list::-webkit-scrollbar-thumb {
    background: #001509;
    border-radius: 4px;
}

.gn-city-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.gn-city-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px 12px 16px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.18s, border-color 0.18s;
    position: relative;
}

.gn-city-item:hover {
    background: rgba(255, 255, 255, 0.07);
}

.gn-city-item.active {
    /* background: rgba(232, 100, 10, 0.14);
    border-left-color: #E8640A; */
}

.gn-dot {
    width: 11px;
    height: 11px;
    min-width: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.18s, box-shadow 0.18s;
    flex-shrink: 0;
}

.gn-city-item.active .gn-dot,
.gn-city-item:hover .gn-dot {
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    /* box-shadow: 0 0 7px rgba(232, 100, 10, 0.55); */
    border: 2px solid #fff;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.gn-city-name {
    font-size: 16px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    transition: color 0.18s;
    flex: 1;
}

.gn-city-item:hover .gn-city-name {
    color: #fff;
}

.gn-city-item.active .gn-city-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
}

.gn-arrow {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.18);
    transition: color 0.18s, transform 0.18s;
    flex-shrink: 0;
}

.gn-city-item.active .gn-arrow {
    color: #E8640A;
    transform: translateX(2px);
}

/* ============================================================
   RIGHT PANEL — world map
   ============================================================ */
.gn-map-panel {
    flex: 1;
    position: relative;
    background: transparent;
    border-radius: 16px;
    overflow: visible;
    min-height: 560px;
    box-shadow: none;
}

#gn-world-map {
    width: 100%;
    height: 100%;
    min-height: 560px;
    border-radius: 16px;
    overflow: hidden;
}

#rn-russia-map {
    width: 100%;
    height: 100%;
    min-height: 560px;
    border-radius: 16px;
    overflow: hidden;
    background: #1e3a28;
    cursor: default;
    border: none;
    box-shadow: none;
}

/* Pulse rings use SVG SMIL <animate> — no CSS animation needed */
.rn-pulse-g {
    pointer-events: none;
}

#rn-russia-map:active {
    cursor: default;
}

/* Disable region hover so drag feels clean */
#rn-russia-map path.jvm-region {
    pointer-events: none !important;
}

/* Map popup card — floats above the city pin */
.rn-map-popup {
    position: absolute;
    z-index: 20;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(17, 67, 73, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1.5px solid #d4e8dc;
    min-width: 240px;
    max-width: 280px;
    transform: translateX(-50%) translateY(calc(-100% - 14px));
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

.rn-map-popup-inner {
    padding: 16px 18px;
}

/* Downward-pointing arrow at the bottom of the popup */
.rn-map-popup-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
}

/* Get Directions button inside popup */
.rn-popup-actions {
    padding: 10px 18px 14px;
    border-top: 1px solid #f0f5f2;
}

.rn-dir-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #ffffff;
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    border-radius: 7px;
    padding: 9px 14px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.rn-dir-btn:hover {
    opacity: 0.85;
    color: #ffffff;
    text-decoration: none;
}

.rn-dir-btn i {
    font-size: 14px;
}

/* Russia map popup card */
.rn-popup .leaflet-popup-content-wrapper {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(17, 67, 73, 0.22);
    padding: 0;
    border: 1.5px solid #d4e8dc;
    min-width: 250px;
}

.rn-popup .leaflet-popup-tip-container {
    display: none;
}

.rn-popup .leaflet-popup-close-button {
    display: none;
}

.rn-popup .leaflet-popup-content {
    margin: 0;
}

.rn-popup-inner {
    padding: 18px 20px;
}

.rn-popup-city {
    font-size: 20px;
    font-weight: 800;
    color: #114349;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.rn-popup-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 9px;
    border-radius: 20px;
}

.rn-popup-badge.branch {
    background: #e8f6ed;
    color: #236E3B;
}

.rn-popup-badge.sales {
    background: #fff4e6;
    color: #E8640A;
}

.rn-popup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 500;
    color: #114349;
    line-height: 1.55;
    margin-bottom: 8px;
}

.rn-popup-row:last-child {
    margin-bottom: 0;
}

.rn-popup-row i {
    color: #69AA48;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ============================================================
   RUSSIA TAB — flat city list (replaces accordion)
   ============================================================ */
.rn-country-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #114349;
    padding: 2px 4px 10px;
    border-bottom: 1.5px solid #e8f5ee;
    margin-bottom: 8px;
}

.rn-country-header i {
    font-size: 16px;
    color: #236E3B;
}

.rn-city-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rn-city-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #236E3B;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.2s;
    user-select: none;
}

.rn-city-item::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #236E3B;
    flex-shrink: 0;
    transition: background 0.2s;
}

.rn-city-item:hover {
    background: #f0f7f2;
}

.rn-city-item.active {
    background: #fff4ec;
    color: #E8640A;
    font-weight: 600;
}

.rn-city-item.active::before {
    background: #E8640A;
}

/* Active marker override (CSS fills SVG fill via presentation attribute) */
#rn-russia-map .jvm-marker.rn-active-marker {
    fill: #E8640A !important;
}

/* ============================================================
   TOOLTIP CARD — image + description layout (Global Network)
   ============================================================ */
/* Tooltip enter keyframe — spring overshoot feel */
@keyframes gnTtEnter {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.88);
    }

    55% {
        opacity: 1;
    }

    72% {
        transform: translateY(-5px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger: image slides in from top */
@keyframes gnTtImgIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger: text & button fade up */
@keyframes gnTtFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SVG country fill transition */
.jvectormap-container path,
path.jvm-region {
    transition: fill 0.35s ease !important;
}

.gn-tooltip {
    position: absolute;
    background: #ffffff;
    border-radius: 20px;
    border: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08);
    width: 300px;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(22px) scale(0.88);
    padding: 15px;
    border: 1px solid #D1F8BD;
}

/* Exit state — fades up and shrinks */
.gn-tooltip.gn-tt-exit {
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.93) !important;
    transition: opacity 0.17s ease-in, transform 0.17s ease-in !important;
    pointer-events: none !important;
}

/* Enter state — spring animation */
.gn-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: gnTtEnter 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger inner elements on enter */
.gn-tooltip.visible .gn-tt-img {
    animation: gnTtImgIn 0.32s 0.06s ease both;
}

.gn-tooltip.visible .gn-tt-body h5 {
    animation: gnTtFadeUp 0.30s 0.14s ease both;
}

.gn-tooltip.visible #gn-tt-desc {
    animation: gnTtFadeUp 0.30s 0.20s ease both;
}

.gn-tooltip.visible .gn-tt-btn {
    animation: gnTtFadeUp 0.30s 0.27s ease both;
}

/* Dark image placeholder at top — background-image set by JS for photo */
.gn-tt-img {
    width: 100%;
    height: 132px;
    background: linear-gradient(135deg, #0a1e1e 0%, #0f3028 60%, #1a4a35 100%);
    background-size: cover;
    background-position: center;
    display: block;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
}

/* Content body */
.gn-tt-body {
    padding: 14px 0px 0px;
}

.gn-tooltip h5 {
    font-size: 18px;
    font-weight: 700;
    color: #0F743B;
    margin-bottom: 6px;
    white-space: nowrap;
}

#gn-tt-desc {
    font-size: 14px;
    color: #000;
    line-height: 1.55;
    margin-bottom: 0px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Full-width button inside tooltip */
.gn-tt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 8px; */
    /* background: linear-gradient(to right, #E8640A, #F5880A); */
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    /* letter-spacing: 0.6px; */
    /* padding: 10px 14px; */
    /* border-radius: 30px; */
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    box-sizing: border-box;
}

.gn-tt-btn:hover {
    opacity: 0.88;
    color: #fff;
}

.gn-tt-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: #fff;
    border-radius: 50%;
}

.gn-tt-btn .btn-icon i {
    color: #E8640A;
    font-size: 13px;
    line-height: 1;
}

/* ===================================== */
/* GLOBAL NETWORK TAB CSS END */
/* ===================================== */

/* ===================================== */
/* ABOUT SECTION CSS START */
/* ===================================== */

.about-section {
    padding: 100px 0;
    display: flex;
    align-items: center;
}

/* Large editorial statement */
.about-statement {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #114349;
    margin-bottom: 0;
}

.about-statement-highlight {
    color: #69AA48;
}

/* Section eyebrow label above the editorial statement */
.about-eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #1a7c45;
    border: 1px solid rgba(26, 124, 69, 0.35);
    border-radius: 50px;
    padding: 5px 16px;
    margin-bottom: 14px;
}

/* Body continuation — same scale as statement */
.about-body {
    font-size: 42px;
    font-weight: 400;
    line-height: 1.2;
    color: #555;
    margin-bottom: 0;
}

/* Left Column */
.about-left {
    padding-top: 0px;
}

.about-badge {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid #56ff0036;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #6aa84f;
    font-weight: 700;
    margin-bottom: 26px;
}

.two-section-bg {
    position: relative;
}

.about-bg-img img {
    position: absolute;
    left: -125px;
    top: 0;
    bottom: 0;
    z-index: -1;
}


/* Heading */
.about-heading-about {
    font-weight: 700;
    color: #114349;
    line-height: 1;
    margin-bottom: 20px;
}

.mision-card-padding {
    --bs-gutter-x: 2rem;
}

.about-heading-about span {
    color: #69AA48;
}

/* Description */
.about-text {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 2.2;
    text-align: left;
    margin-bottom: 0;
}

@keyframes float-a {
    0% {
        transform: translateY(0px) rotate(-0.4deg);
    }

    50% {
        transform: translateY(-14px) rotate(0.4deg);
    }

    100% {
        transform: translateY(0px) rotate(-0.4deg);
    }
}

@keyframes float-b {
    0% {
        transform: translateY(-8px) rotate(0.3deg);
    }

    55% {
        transform: translateY(10px) rotate(-0.5deg);
    }

    100% {
        transform: translateY(-8px) rotate(0.3deg);
    }
}

/* Vision Card */
.vision-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    animation: float-a 4.2s ease-in-out infinite;
    border-radius: 30px;
    padding: 35px;
    height: 100%;
}

.vision-content h4 {
    font-size: 20px;
    color: #12434A;
    font-weight: 400;
    line-height: 1.6;
    max-width: none;
    margin-bottom: 0;
}

/* Card top image */
.about-card-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    margin-bottom: 20px;
}

/* Label box inside cards */
.card-label-box {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.vision-card .card-label-box {
    background: linear-gradient(90deg, #ff7a00, #fdb913);
}

.mission-card .card-label-box {
    background: #1a7c45;
}

/* Mission Card */
.mission-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    padding: 35px;
    height: 100%;
    animation: float-b 5.7s ease-in-out infinite;
}

.mission-img {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 20px;
}

.mission-text {
    margin-bottom: 0;
}

/* ===================================== */
/* ABOUT SECTION CSS END */
/* ===================================== */


/* ===================================== */
/* HOW TO BOOK SECTION CSS START */
/* ===================================== */


/* Section Title */
.section-title {

    font-weight: 600;
    color: #114349;
}



/* Left Image */
.book-image img {
    width: 100%;
    border-radius: 15px;
}

/* Badge */
.work-badge {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid #56ff0036;
    border-radius: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #6aa84f;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Steps Title */
.steps-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #114349;
}



.steps-container {
    position: relative;
}

/* Smooth transitions */
.step-item {
    transition: all 0.4s ease;
}


/* Vertical Dotted Line */
.steps-container::before {
    content: "";
    position: absolute;
    left: 50px;
    top: 30px;
    bottom: 54px;
    border-left: 1px dotted #cfdcc2;
}

.step-item {
    position: relative;
    margin-bottom: 18px;
    gap: 20px;
    display: flex;
    padding: 20px 26px 20px;
    border-radius: 13px;
    border: 1px solid #d1f8bd00;

    /* ✅ Add these */
    transition: 0.3s all ease;
}


.step-content h4 {
    font-size: 20px;
    font-weight: bold;
    color: #114349;
    margin-bottom: 10px;

    /* ✅ Add this */
    transition: color 0.4s ease;
}

.step-content p {
    font-size: 16px;
    color: #000;
    margin: 0;
}

/* Active Step Box */
.step-item.active {
    background: #FFFEF0;
    border-radius: 13px;
    border: 1px solid #D1F8BD;
}

.step-item.active h4 {
    color: #69AA48;
}

/* Active Number */


.step-item.active .step-number {
    border: none;
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #fff;
    transform: scale(1);
}

.step-number::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    /* ✅ changed from -1 to 0 */
}

.step-number {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #D1F8BD;
    background: #FFFEF0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 600;
    color: #E8ECDF;
    transition: 0.3s all ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    flex-shrink: 0;
}

/* ===================================== */
/* HOW TO BOOK SECTION CSS END */
/* ===================================== */


/* ===================================== */
/* OUR NETWORK SECTION CSS START */
/* ===================================== */

.network-section .section-heading {
    margin-bottom: 34px;
}

.network-section .container {
    position: relative;
    z-index: 2;
}

.network-section {
    padding: 100px 0 140px 0;
    background-image: url('../img/mapbg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #FFFEF0;
}

.network-section .section-heading h2 {
    color: #114349;
}

.network-section .section-heading h2 span {
    color: #114349;
}

.network-section .section-heading p {
    max-width: 1040px;
}

.network-tabs li {
    margin-bottom: 0;
}

/* Tabs */
.network-tabs {
    margin-top: 25px;
}

.network-tabs button {
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
    background: #e7eadf;
    color: #10723A;
    font-weight: bold;
}

.network-tabs button.active {
    background: #1c7c3e;
    color: #fff;
}



/* Card */
.city-card {
    background: #fff;
    padding: 23px 20px 49px;
    border-radius: 20px;
    position: relative;
    border: 1px solid #D1F8BD;
    text-align: center;
    box-shadow: 0px 8px 8px 7px #0000000a;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.city-card h4 {
    font-size: 24px;
    color: #114349;
    margin-bottom: 15px;
    text-align: center;
    font-weight: bold;
}

.network-cards {
    position: relative;
}

.phone {
    display: inline-block;
    background: #F3F8F5;
    padding: 14px 18px;
    border-radius: 50px;
    font-size: 13px;
    color: #10723A;
    font-weight: bold;
    margin-bottom: 0;
    line-height: 1;
}

/* Direction Button */
.direction-btn {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 22px 5px 5px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #10713A;
    font-size: 13px;
    font-weight: 700;
    color: #10723A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
    transition: 0.3s all ease;
}

.direction-btn:hover {
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    border: 1px solid #fff;
    font-weight: 700;
    color: #fff;
}

.direction-btn:hover .icon {
    background: #fff;
}

.direction-btn:hover .icon svg path {
    fill: #F57F1B;
}

.direction-btn .icon {
    width: 30px;
    height: 30px;
    background: #10713A;
    background: linear-gradient(90deg, rgba(16, 113, 58, 1) 0%, rgba(0, 140, 61, 1) 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: 0.3s all ease;
}

.location-map {
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    margin: 0 auto;
    text-align: center;
}

.location-map img {
    width: 100%;
    height: 550px;
    object-fit: contain;
}

.network-tabs {
    margin-top: 0;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.network-tabs .nav-link {
    border: none;
    background: #e8e8dd;
    padding: 7px 18px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 12px;
    color: #1d3f2e;
    transition: 0.3s ease;
}

.network-tabs .nav-link.active {
    background: #1f7a3a;
    color: #fff;
}

.network-tabs .nav-link:hover {
    background: #1f7a3a;
    color: #fff;
}

.network-tabs .nav-link:focus {
    box-shadow: none;
}

/* ===================================== */
/* OUR NETWORK SECTION CSS END */
/* ===================================== */


/* --- Achievement Section Wrapper --- */
.achievement-section {
    padding: 100px 0;
}

/* --- Gradient Background Container --- */
.achievement-wrapper {
    background: #F57C1B;
    background: linear-gradient(270deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    border-radius: 20px 20px 0px 0px;
    padding: 25px 50px 30px;
}

/* --- Section Title --- */
.achievement-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 18px;
}

/* --- Individual Achievement Card --- */
.achievement-card {
    background: #FFFFFF;
    border-radius: 30px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    transition: all 0.3s ease;
    border: 1px solid #D1F8BD;
}

/* --- Award Logo --- */
.achievement-card img {
    /* max-width: 100%;
    max-height: 120px; */
    object-fit: cover;
}

/* --- Hover Effect --- */
.achievement-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}


/* ======================================
        RUSSIA EXPLORE SECTION STYLING
====================================== */
/* --- Section Padding --- */
.russia-explore-section {
    padding: 100px 0;
    background-image: url(../img/explloring-banner.webp);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin: 13px;
}

.russia-explore-section .btn-view-packages {
    border: 0;
}

/* --- Background Container --- */


/* --- Left Content --- */
.russia-explore-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.russia-explore-content h2 {
    font-size: 48px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 12px;
}

.russia-explore-content p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 670px;
    margin-bottom: 12px;
    color: #fff;
    font-weight: 500;
}

/* --- Yellow Button --- */
.btn-yellow {
    background: #f5a623;
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.btn-yellow:hover {
    background: #e5941f;
    color: #fff;
}

/* --- Arrow Circle (Yellow) --- */
.circle-arrow {
    width: 26px;
    height: 26px;
    background: #ffffff;
    color: #f5a623;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

/* --- Right Service Card --- */
.service-info-card {
    position: absolute;
    z-index: 2;
    background: #fff;
    padding: 20px;
    border-radius: 30px;
    max-width: 390px;
    margin-left: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    right: 70px;
    top: 120px;
    /* bottom: 0; */
}

/* --- Card Image --- */
.service-card-img {
    border-radius: 25px;
    margin-bottom: 15px;
}

/* --- Card Text --- */
.service-info-card h5 {
    font-weight: 700;
    color: #114349;
    font-size: 24px;
    margin-bottom: 10px;
}

.service-info-card p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #000;
    max-width: 310px;
}

/* --- Green Button --- */
.rqst-btn {

    font-size: 16px;
    background: #10713A;
    background: linear-gradient(90deg, rgba(16, 113, 58, 1) 0%, rgba(0, 140, 61, 1) 100%);
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 6px 22px 6px 6px;
    border: 1px solid #fff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* --- Arrow Circle (Green) --- */
.circle-arrow-green {
    width: 35px;
    height: 35px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
}



/* --- Section Padding --- */
.why-choose-section {
    padding: 100px 0 100px;
}

/* ============================================================
   SERVICES PAGE — about-card style grid
   ============================================================ */
.srv-section {
    padding: 100px 0;
}

.srv-row {
    --bs-gutter-x: 1.75rem;
    --bs-gutter-y: 1.75rem;
    margin-bottom: 28px;
    align-items: stretch;
}

.srv-row-last {
    margin-bottom: 0px;
}

.srv-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 28px;
    padding: 26px;
    height: 100%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.srv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11);
}

.srv-card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    margin-bottom: 18px;
}

.srv-card-label {
    display: inline-block;
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.srv-card-desc {
    margin: 0;
}

.why-choose-section.exp-wcu {
    padding: 100px 0 100px;
}

/* --- Header Styling --- */
.section-header h2 {
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 15px;
}

.highlight-text {
    color: #6aa04c;
}

.section-header p {
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 14px;
    color: #444;
}

/* --- Image Card --- */
.image-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 460px;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Gradient Overlay ON image-card --- */
/* .image-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: #00272C;
    background: linear-gradient(0deg, rgba(0, 39, 44, 1) 0%, rgb(0 39 44 / 73%) 49%, rgba(0, 39, 44, 0) 100%);
    z-index: 1;
transition: opacity 0.5s ease-in;
}

.image-card:hover::after {
    background: #10713A;
    background: linear-gradient(0deg, rgb(16 113 58) 0%, rgb(8 126 59 / 82%) 49%, rgba(0, 140, 61, 0) 100%);
} */

/* Default Gradient */
.image-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: linear-gradient(0deg,
            rgba(0, 39, 44, 1) 0%,
            rgba(0, 39, 44, 0.73) 49%,
            rgba(0, 39, 44, 0) 100%);
    z-index: 1;
    transition: opacity 0.1s ease-in;
}

/* Hover Gradient Layer */
.image-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70%;
    background: linear-gradient(0deg, rgb(16 113 58 / 84%) 0%, rgb(8 126 59 / 69%) 49%, rgba(0, 140, 61, 0) 100%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

/* On Hover */
.image-card:hover::before {
    opacity: 1;
}

/* --- Text Overlay --- */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    color: #fff;
    z-index: 2;
}

.card-overlay h5 {
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 24px;
    color: #fff;
}

.card-overlay p {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    color: #fff;
}


.cta-card h4 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 30px;
    color: #fff;
}

.cta-card p {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
    max-width: 250px;
}


.location-padding {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem;
}

/* --- CTA Button --- */
.btn-explore {
    background: #1a7c45;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 5px 22px 5px 5px;
    text-transform: uppercase;
    border: 1px solid #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    z-index: 1;
    position: relative;
}

.btn-explore:hover {
    background: #166a3f;
    color: #fff;
}

.circle-arrownew {
    margin-right: 6px;
    background-color: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.wcu-padding {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
}



/* --- Decorative CTA Image --- */
.cta-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 280px;
}

/* --- Section Wrapper --- */
.team-slider-section {
    background: #EBFFD9;
    padding: 100px 0px;
    border-radius: 25px;
    margin: 13px;
}

/* --- Header --- */
.team-header h2 {
    color: #114349;
    font-weight: bold;
}

.team-header h2 span {
    color: #69AA48;
}

.team-header p {
    margin-top: 8px;
    color: #000;
    margin-bottom: 0;
}

/* --- Custom Arrows --- */
.team-arrows {
    display: flex;
    gap: 15px;
}

.custom-prev,
.custom-next {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #8fbf75;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Light arrow */
.custom-prev {
    border-color: #a7c89a;
    color: #7da86b;
}

/* Dark active arrow */
.active-arrow {
    border-color: #2e6f3e;
    color: #2e6f3e;
}

/* Arrow Icon */
.arrow-icon {
    font-size: 18px;
    font-weight: 600;
}

/* Hover Effect */
.custom-prev:hover,
.custom-next:hover {
    background: #2e6f3e;
    color: #fff;
    border-color: #2e6f3e;
}

/* --- Swiper Slide --- */
.teamSwiper {
    margin-top: 40px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

/* --- Team Card --- */
.team-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    width: 100%;
    overflow: hidden;
    border: 1px solid #D1F8BD;
}

.team-card img {
    width: 100%;
    margin-top: 20px;
    border-radius: 15px;
    height: 400px;
    object-fit: cover;
    padding-top: 0;
}


.team-info {
    position: relative;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hover-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-info h5 {
    font-weight: bold;
    color: #163c3a;
    font-size: 24px;
    margin-bottom: 8px;
}

.team-info span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #69AA48;
    margin-top: 4px;
}

.linkedin-icon {
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-weight: 400;
    text-decoration: none;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

/* ===============================
        TEAM HOVER OVERLAY
================================ */

.team-hover-card {
    position: absolute;
    inset: 0;
    padding: 20px;
    background: #003940;
    background: radial-gradient(circle, rgb(0 57 64 / 94%) 0%, rgb(0 57 64 / 98%) 52%, rgb(0 57 64 / 90%) 100%);
    color: #fff;
    opacity: 0;
    /* transform: translateY(20px); */
    transition: all 0.4s ease;
    border-radius: 20px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.team-hover-card h3 {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px;
}

.team-hover-card span {
    color: #56FF00;
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 0px;
}

.hover-description {
    margin-top: 40px;
}

.hover-description p {
    font-size: 16px;
    color: #fff;
    line-height: 1.9;
    margin-bottom: 0;
    max-width: 360px;
}

.linkedin-hover {
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #fff !important;
    padding: 10px;
    border-radius: 10px;
    font-weight: 400;
    text-decoration: none;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

/* SHOW ON HOVER */
.team-card:hover .team-hover-card {
    opacity: 1;
    /* transform: translateY(0); */
}

/* --- Progress Bar --- */
.swiper-progress {
    margin-top: 40px;
    height: 6px;
    background: #C8F29D;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: #69AA48;
    transition: width 0.3s ease;
    border-radius: 50px;
}

.topnav {
    text-align: right;
}

.padding-left {
    padding-left: 12px;
}

.hamburger-menu i {
    color: #fff;
    font-size: 22px;
    width: 40px;
    height: 40px;
    padding: 10px 16px;
    display: flex;
    border-radius: 2px;
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}



.offcanvas.offcanvas-end.mobile-menu button.btn-close {
    color: #fff;
    font-size: 22px;
    width: 40px;
    height: 40px;
    padding: initial;
    display: flex;
    border-radius: 2px;
    background-color: #f26a21;
    position: relative;
    overflow: hidden;
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    opacity: 1;
    border-radius: 2px;
    margin-right: 0;
}

.offcanvas.offcanvas-end.mobile-menu {
    width: 100%;
    background-color: #D9FFC3;
    background-clip: unset;
}

.mobile-menu .offcanvas-header {
    background: #ffffff;
    border-bottom: 1px solid #e8eceb;
    padding: 14px 0;
}

.mobile-menu .mobile-logo img {
    height: 52px;
    width: auto;
}

.mobile-menu .btn-close {
    background: #E8640A;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-left: auto;
    border: none;
}

.mobile-menu .btn-close i {
    font-size: 18px;
    color: #fff;
}

.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0px 0 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mobile-menu-list li a {
    width: 100%;
    background: none;
    text-decoration: none;
    border: none;
    padding: 18px 0 18px 0;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(0, 139, 60, 1) 0%, rgba(0, 37, 16, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 18px;
    border-bottom: 1px solid #0000001c;
}

.mobile-menu-list li a.btn.quote-btn.customize-nav-btn {
    color: #fff !important;
}

.mobile-menu-list li a.quote-btn {
    padding: 6px 6px 6px 24px !important;
    font-size: 14px !important;
    margin-top: 25px;
    width: max-content;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    background-image: radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
    background-color: #1a7c45;
}

.mobile-menu-list li {
    margin-bottom: 0;
}

.mobile-sub-menu {
    list-style: none;
    padding: 0 0 15px 0;
    margin: -10px 0 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #0000001c;
}

.mobile-sub-menu li {
    margin-bottom: 0;
}

.mobile-sub-menu li a {
    background: #1a7c45;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    text-transform: none;
    border: none;
    margin: 0;
    width: auto;
    line-height: 1.2;
    -webkit-background-clip: initial;
    background-clip: initial;
}


.slider-navigation {
    position: unset;
    display: flex;
    gap: 12px;
    justify-content: center;
    z-index: 10;
    margin-top: 27px;
}


.hero-prev,
.hero-next {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.hero-prev:hover,
.hero-next:hover {
    background: #000;
    color: #fff;
}

.hero-prev i,
.hero-next i {
    font-size: 18px;
}

/* ================= CARD BASE (fixed size) ================= */
.hero-tour-slider-mobile .tour-card {
    width: 100%;
    height: 330px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    transition: 0.5s all ease;
    border: 2px solid #fff;
}

.hero-tour-slider-mobile .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: end;
}

/* image */
.hero-tour-slider-mobile .tour-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-tour-slider-mobile .tour-card.active img {
    width: 100%;
    border-radius: 20px;
    height: auto;
    object-fit: cover;
}

.hero-tour-slider-mobile .swiper-slide-active .tour-card img {
    width: 100%;
    border-radius: 20px;
    height: auto;
    object-fit: cover;
    height: 270px;
}

.hero-tour-slider-mobile .tour-card h6 {
    margin-top: 10px;
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    text-align: start;
    margin-bottom: 6px;
}

.hero-tour-slider-mobile .tour-card.active h6 {
    margin-top: 10px;
    color: #000;
}



/* ================= ACTIVE CARD (no width/height change) ================= */
.hero-tour-slider-mobile .tour-card.active {
    height: auto;
    opacity: 1;
    padding: 10px;
    background-color: #fff;
}



.hero-tour-slider-mobile .tour-card.active .tour-overlay {
    position: unset;
    background: transparent;
    padding: 0px 0px 0px;
}



/* ================= OVERLAY ================= */
.hero-tour-slider-mobile .tour-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0px 18px 16px;
    background: #003D00;
    background: linear-gradient(0deg, rgba(0, 61, 0, 1) 0%, rgb(0 61 0 / 9%) 100%);
    color: #fff;
}

.hero-tour-slider-mobile {
    display: flex;
    align-items: end;
    padding: 0 15px;
}

.hero-tour-slider-mobile .swiper-wrapper {
    display: flex;
    align-items: end;
    height: 400px;
    padding-bottom: 20px;
}


.hero-tour-slider-mobile .tour-overlay p {
    text-align: start;
    font-weight: 500;
    margin-bottom: 0;
    display: none;
    opacity: 0;
    max-width: 260px;
}

.hero-tour-slider-mobile .tour-card.active .tour-overlay p {
    text-align: start;
    font-weight: 500;
    margin-bottom: 0;
    display: block;
    opacity: 1;
    line-height: 26px;
}

.hero-tour-slider-mobile .swiper-slide-active .tour-card .tour-overlay p {
    text-align: start;
    font-weight: 500;
    margin-bottom: 0;
    display: block;
    opacity: 1;
    line-height: 21px;
    font-size: 14px;
}

.hero-tour-slider-mobile .swiper-slide-active .tour-card .tour-overlay {
    position: unset;
    background: transparent;
    padding: 0px 0px 0px;
}

.hero-tour-slider-mobile .swiper-slide-active .tour-card {
    height: auto;
    opacity: 1;
    padding: 10px;
    background-color: #fff;
}


.hero-tour-slider-mobile .swiper-slide-active .tour-card {
    height: auto;
    opacity: 1;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0px 5px 17px 0 #0000001c;
}

.hero-tour-slider-mobile .swiper-slide-active .tour-card h6 {
    margin-top: 10px;
    color: #000;
}




/* =============================
   SECTION: Popular Packages - Section Wrapper
============================== */
.popular-packages-section {}

/* =============================
   COMPONENT: Package Card - Outer Shell
============================== */
.pkg-card {
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    /* Subtle green-tinted border matching the screenshot */
    border: 1px solid #D1F8BD;
    /* Soft layered shadow for depth */
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.package-card-padding {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

.pkg-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.07),
        0 24px 48px rgba(0, 0, 0, 0.12);
}


/* =============================
   COMPONENT: Package Card - Image Block
============================== */
.pkg-card__img-wrap {
    position: relative;
    width: 100%;
    height: 272px;
    overflow: hidden;
    /* Inner image has its own rounded corners */
    margin: 10px 10px 16px 10px;
    width: calc(100% - 20px);
    border-radius: 14px;
}

.pkg-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}


/* =============================
   COMPONENT: Package Card - Most Popular Badge
============================== */
.pkg-card__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #10713A;
    background: linear-gradient(90deg, rgba(16, 113, 58, 1) 0%, rgba(0, 140, 61, 1) 100%);
    color: #ffffff;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 50px;

}


/* =============================
   COMPONENT: Package Card - Body Block
============================== */
.pkg-card__body {
    padding: 0px 18px 20px 18px;
}


/* =============================
   COMPONENT: Package Card - Title
============================== */
.pkg-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #114349;
    margin-bottom: 8px;
    line-height: 1.3;
}


/* =============================
   COMPONENT: Package Card - Description
============================== */
.pkg-card__desc {
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
}

/* =============================
   COMPONENT: Package Card - Footer (Price + Button Row)
============================== */
.pkg-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


/* =============================
   COMPONENT: Package Card - Price
============================== */
.pkg-card__price {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

/* Dollar amount */
.pkg-card__price-amount {
    font-size: 1.125rem;
    font-weight: 800;
    color: #114349;
    line-height: 1;
}

/* Slash separator */
.pkg-card__price-sep {
    font-size: 1rem;
    font-weight: 400;
    color: #114349;
    margin: 0 2px;
}

/* "PER PERSON" label */
.pkg-card__price-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #4caf50;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}


/* =============================
   COMPONENT: Package Card - Book Now Button
============================== */
.pkg-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 9px 5px 5px;
    border-radius: 50px;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.pkg-card__btn:hover {
    background-color: #e09418;
    color: #ffffff;
    transform: scale(1.03);
}

/* Arrow icon circle inside the button */
.pkg-card__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    color: #f5a623;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.pkg-card__btn:hover .pkg-card__btn-icon {
    color: #e09418;
}

/* =============================
   SECTION: Contact Section
============================== */
.contact-section {
    width: 100%;
    background: #FFFBC3;
    background: linear-gradient(180deg, rgba(255, 251, 195, 1) 0%, rgb(255 254 240) 100%);
}

.contact-section-exp {
    background-color: transparent;
    background: none;
    margin: 13px;
    border-radius: 20px;
}

.contact-section-exp .detail-value {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.4;
}

.contact-section-exp .detail-small {
    font-size: 1rem;
}

.contact-section-exp .main-contact-details {
    margin-bottom: 45px;
}

/* =============================
   COMPONENT: Contact Card (Dark Rounded Wrapper)
============================== */
.contact-card {
    border-radius: 20px;
    overflow: hidden;
    background-image: url('../img/contact-bg.webp');
    background-size: cover;
    background-position: center;
}


/* =============================
   LEFT COLUMN: Info Panel
============================== */
.info-panel {
    padding: 36px 0px 36px 48px;
    color: #fff;
    height: 100%;
}

/* ---- Info: Heading ---- */
.info-heading {
    font-weight: 600;
    color: #fff;
    margin-bottom: 32px;
    line-height: 1;
}

/* ---- Info: Feature List ---- */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

/* Feature List Item */
.feature-item {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.5;
}

/* Orange Circle Check Icon */
.check-icon svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: -4px;
}


.ctc-pointer {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 1.25rem;
    width: 100%;
    color: #fff;
    line-height: 1;
}

.feature-item:last-child .ctc-pointer {
    border-bottom: 0px solid rgba(255, 255, 255, 0.10);
}

/* ---- Info: Contact Details ---- */
.contact-detail {
    margin-bottom: 24px;
}

.contact-section-exp .contact-detail {
    margin-bottom: 45px;
}

/* Detail Label */
.detail-label {
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

/* Detail Value */
.detail-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.4;
}

/* Small Variant — Address */
.detail-small {
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
}


/* =============================
   RIGHT COLUMN: Form Panel
============================== */
.form-panel {
    padding: 36px 36px 36px 0px;
    display: flex;
    align-items: center;
    height: 100%;
}

.customonisation-card .form-panel {
    padding: 36px 36px 36px 36px;
    display: flex;
    align-items: center;
    height: 100%;
}

/* ---- White Form Card ---- */
.form-card {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    height: 100%;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}


/* =============================
   COMPONENT: Form Fields
============================== */

/* Field Label */
.field-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 6px;
}

@media (max-width: 767px) {
    .field-label {
        display: none;
    }
}

/* Required asterisk */
.req {
    color: #000;
    margin-left: 1px;
}

/* Input & Textarea */
.field-input {
    display: block;
    width: 100%;
    background-color: #F6F6F6;
    border: none;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 0.87rem;
    color: #333;
    outline: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:focus {
    background-color: #e9ebe7;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
}

/* Textarea */
.field-textarea {
    resize: none;
    min-height: 118px;
}

/* Email verification (Contact + Customise Your Request forms) */
.email-verify-wrap {
    position: relative;
}

.email-verify-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* Idle state (just the "Verify email" button, no message yet) sits inside
   the input itself; once a message or the code step appears there's not
   enough room, so it drops back below (see renderIdle/renderCodeStep). */
.email-verify-wrap input.field-input:has(+ .email-verify-status.ev-inline) {
    padding-right: 120px;
}

.email-verify-status.ev-inline {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    margin-top: 0;
}

.ev-verify-btn,
.ev-confirm-btn {
    border: none;
    background-color: #2e7d32;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ev-verify-btn:hover,
.ev-confirm-btn:hover {
    background-color: #256428;
}

.ev-verify-btn:disabled,
.ev-confirm-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ev-code-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.ev-code-input {
    max-width: 140px;
}

.ev-msg {
    font-size: 0.78rem;
    color: #2e7d32;
}

.ev-msg.ev-error {
    color: #c62828;
}

.ev-verified {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2e7d32;
}

/* Select dropdown */
select.field-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

select.field-input option[value=""] {
    color: #999;
}

/* Date input */
input[type="date"].field-input {
    color: #666;
    cursor: pointer;
}

input[type="date"].field-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}


/* =============================
   COMPONENT: Custom Checkbox — Terms & Conditions
============================== */

/* Hide native checkbox */
.custom-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Outer label — flex row */
.custom-check-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

/* Visible checkbox box */
.custom-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #E5E5E5;
    border-radius: 4px;
    background-color: #F6F6F6;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* SVG tick — hidden by default */
.custom-check-tick {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
    color: #fff;
}

/* Checked state — green fill + show tick */
.custom-check-input:checked+.custom-check-box {
    background-color: #2e7d32;
    border-color: #2e7d32;
}

.custom-check-input:checked+.custom-check-box .custom-check-tick {
    opacity: 1;
    transform: scale(1);
}



/* Focus ring (accessibility) */
.custom-check-input:focus-visible+.custom-check-box {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.28);
}

/* Label text */
.custom-check-text {
    font-size: 0.875rem;
    color: #0000003b;
    font-weight: bold;
    line-height: 1.4;
}


/* =============================
   COMPONENT: Submit Button
============================== */
.submit-btn {
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 5px 22px 5px 5px;
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    border: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* White circle icon inside button */
.submit-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    flex-shrink: 0;
}

/* =============================
   SECTION: Our Presence - Wrapper
============================== */
.presence-section {}

.presence-padding {
    --bs-gutter-x: 3.5rem;
}

/* =============================
   SECTION: CTA - Outer Section
   (just spacing, neutral bg)
============================== */
.cta-section {
    width: 100%;
    margin-bottom: -80px;
    z-index: 1;
    position: relative;
}


/* =============================
   COMPONENT: CTA Card
   Orange gradient bg, shapes & content all live here
   sits inside .container > .row > .col-12
============================== */
.cta-card-1 {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 80px 40px;
    text-align: center;
    background-image: url(../img/contact-cta-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/* =============================
   COMPONENT: CTA Heading
============================== */
.cta-heading {
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}


/* =============================
   COMPONENT: CTA Subtitle
============================== */
.cta-subtitle {
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.78;
    margin: 0 auto 36px auto;
    position: relative;
    z-index: 1;
    font-size: 1.125rem;
}


/* =============================
   COMPONENT: CTA Button
============================== */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    background-color: #1a5c20;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 14px 30px;
    border-radius: 50px;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.cta-btn:hover {
    background-color: #124018;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Icon: White circle with arrow */
.cta-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    flex-shrink: 0;
    color: #ffffff;
    transition: background-color 0.2s ease;
}

.cta-btn:hover .cta-btn__icon {
    background-color: rgba(255, 255, 255, 0.32);
}


/* =============================
   SECTION: Blog Section Wrapper
============================== */
.blog-section {
    width: 100%;
}


/* =============================
   COMPONENT: Bootstrap Nav Tabs — Custom Style
============================== */

/* Tab pill container */
.blog-tabs-sticky {
    padding: 16px 0;
    margin-bottom: 12px;
}

.blog-tabs {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border-radius: 60px;
    padding: 8px 10px;
    gap: 12px;
    border: none;
    flex-wrap: nowrap;
    z-index: 2;
    margin-bottom: 16px;
}

/* Override Bootstrap nav-item spacing */
.blog-tabs .nav-item {
    margin: 0;
}

/* Individual tab button */
.blog-tab-link {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #097c3b57;
    background-color: transparent;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 28px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    outline: none !important;
    box-shadow: none !important;
}

/* Hover state */


/* Active tab */
.blog-tab-link.active {
    color: #097C3B !important;
    font-weight: bold;
}

.blog-tab-link:hover {
    color: #097C3B !important;
}

/* Remove Bootstrap's default focus/active styles */
.blog-tab-link:focus,
.blog-tab-link:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

/* =============================
   COMPONENT: Blog Tab Panes — Visibility Control
============================== */

/* All blog tab panes hidden by default */
.blog-tab-pane {
    display: none;
    opacity: 0;
}

/* Active blog tab pane — visible */
.blog-tab-pane.blog-tab-pane--active {
    display: block;
    opacity: 1;
}

/* =============================
   ANIMATION: Blog Tab Enter — fade in + slide up
============================== */
@keyframes blogTabEnter {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.blog-tab-pane.blog-tab-pane--entering {
    animation: blogTabEnter 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* =============================
   ANIMATION: Blog Tab Exit — fade out + slide up slightly
============================== */
@keyframes blogTabExit {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Keep visible during exit animation */
.blog-tab-pane.blog-tab-pane--leaving {
    display: block;
    animation: blogTabExit 0.25s ease forwards;
}

/* =============================
   COMPONENT: Blog Card — Outer Shell
============================== */
.blog-card {
    width: 100%;
    max-width: 340px;
    background-color: #ffffff;
    border-radius: 20px;
    /* Soft green-tinted border — matches screenshot */
    border: 1px solid #D1F8BD;
    /* Layered soft shadow */
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.07);

    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.07),
        0 18px 40px rgba(0, 0, 0, 0.11);
}


/* =============================
   COMPONENT: Blog Card — Image Block
   Image has its own inset margin + border-radius
============================== */
.blog-card__img-wrap {
    margin: 12px 12px 0 12px;
    border-radius: 14px;
    overflow: hidden;
    height: 160px;
}

.blog-padding {
    --bs-gutter-x: 2.8rem;
    --bs-gutter-y: 2.8rem;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.32s ease;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.04);
}


/* =============================
   COMPONENT: Blog Card — Body
============================== */
.blog-card__body {
    padding: 14px 18px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}


/* =============================
   COMPONENT: Blog Card — Title
============================== */
.blog-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #114349;
    line-height: 1.4;
    margin: 0;
}


/* =============================
   COMPONENT: Blog Card — Excerpt
============================== */
.blog-card__excerpt {
    font-size: 0.82rem;
    color: #4a6a6a;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================
   SECTION: Newsletter — Outer Wrapper
============================== */
.footer-snap-wrap {
    display: flex;
    flex-direction: column;
}

.newsletter-section {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 44px 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    background-image: url('../img/newsimg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-snap-wrap .main-footer {
    margin: 0 13px 0 13px;
    border-radius: 20px 20px 0 0;
    padding: 28px 0 2px;
    display: flex;
    flex-direction: column;
}

.footer-snap-wrap .main-footer>.container {
    display: flex;
    flex-direction: column;
}

.footer-snap-wrap .main-footer .footer-bottom {
    margin-top: 0;
    padding: 16px 0 0px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-watermark {
    font-size: clamp(48px, 8vw, 110px);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(17, 67, 73, 0.18);
    text-stroke: 1.5px rgba(17, 67, 73, 0.18);
    line-height: 1;
    text-align: center;
    pointer-events: none;
    user-select: none;
    padding: 6px 0 10px;
    flex-shrink: 0;
}


.newsletter-section .container {
    z-index: 1;
}

/* =============================
   LEFT COLUMN: Newsletter Info
============================== */
.newsletter-info {
    padding-right: 20px;
}

.newsletter-heading {
    color: #ffffff;
    margin-bottom: 16px;
    font-size: 2.25rem;
}

.newsletter-subtitle {
    color: #ffffff;
    margin-bottom: 0;
}


/* =============================
   COMPONENT: Newsletter Form Block
============================== */
.nl-form-block {
    width: 100%;
}

/* =============================
   COMPONENT: Stay Informed Label
============================== */
.nl-label {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

/* =============================
   COMPONENT: Email Input
   Standalone pill — cream/off-white bg
============================== */
.nl-input {
    display: block;
    width: 100%;
    background-color: #f8f8ee;
    border: none;
    border-radius: 50px;
    padding: 15px 20px;
    font-size: 1rem;
    color: #555;
    outline: none;
    transition: box-shadow 0.2s ease;
}

.nl-input::placeholder {
    color: #95B190;
    font-size: 1rem;
}

.nl-input:focus {
    box-shadow: 0 0 0 1px #69AA48;
}

/* =============================
   COMPONENT: Subscribe Button
   Orange gradient, full-height pill
============================== */
.nl-btn {
    display: block;
    width: 100%;
    background: #F57C1B;
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.nl-btn:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

/* =============================
   COMPONENT: Privacy Note
============================== */
.nl-privacy {
    font-size: 0.90rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
}

/* Privacy Policy underlined link */
.nl-privacy-link {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.nl-privacy-link:hover {
    opacity: 0.80;
    color: #ffffff;
}


/* =============================
   SECTION: Gallery — Wrapper
============================== */
.gallery-section {
    background-color: transparent;
    overflow: hidden;
    margin: 13px;
    border-radius: 20px;
}


/* =============================
   SECTION: Gallery — Heading
============================== */

/* =============================
   COMPONENT: Swiper Wrapper
   Full-width so slides bleed past page edges
============================== */
.gallery-swiper-wrap {
    width: 100%;
    overflow: hidden;
    padding: 20px 0 0px;
}

/* Swiper container */
.gallerySwiper {
    width: 100%;
    overflow: visible;
    padding: 10px 0;
}

/* =============================
   COMPONENT: Gallery Card
============================== */
.gallery-card {
    background-color: #ffffff;
    border-radius: 20px;
    border: 2px solid #CFE2CC;
    /* Non-active slides scale down */
    transform: scale(0.83);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    overflow: hidden;
}

/* Active center slide — full scale + stronger shadow */
.swiper-slide-active .gallery-card {
    transform: scale(1.05);
    box-shadow: 0px 12px 15px 3px #00000014;
}

.gallery-section.section .section-desc {
    margin-bottom: 0;
}

.gallery-section.section .section-title {
    color: #114349;
}


/* =============================
   COMPONENT: Gallery Card — Image
   Inset 12px margin with own border-radius
============================== */
.gallery-card__img-wrap {
    margin: 12px 12px 0 12px;
    border-radius: 14px;
    overflow: hidden;
}

.gallery-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.swiper-slide-active .gallery-card__img {
    transform: scale(1.03);
}


/* =============================
   COMPONENT: Gallery Card — Body
============================== */
.gallery-card__body {
    padding: 20px 20px 24px;
}

.gallery-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #114349;
    margin-bottom: 8px;
    line-height: 1.4;
}

.gallery-card__desc {
    font-size: 1rem;
    color: #000;
    margin: 0;
    line-height: 1.55;
}


/* =============================
   SECTION: Blogger Reviews — Wrapper
============================== */
.blogger-section {}


/* =============================
   SECTION: Blogger Reviews — Heading
============================== */

/* Two-tone title */
.blogger-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

/* "Blogger" — dark green */
.title-dark {
    color: #1b3a28;
}

/* "Reviews" — light green */
.title-green {
    color: #4caf50;
}

/* Subtitle */
.blogger-subtitle {
    font-size: 0.94rem;
    color: #555;
    max-width: 740px;
    margin: 0 auto;
    line-height: 1.75;
}


/* =============================
   COMPONENT: Blogger Card — Outer Shell
============================== */
.blogger-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 6px;
    /* Soft green-tinted border */
    border: 1px solid #CFE2CC;

    /* Layered soft shadow */
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(0, 0, 0, 0.07);

    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.blogger-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.07),
        0 20px 48px rgba(0, 0, 0, 0.11);
}


/* =============================
   COMPONENT: Blogger Card — Image
   Inset 10px margin + own border-radius
============================== */
.blogger-card__img-wrap {
    border-radius: 15px;
    overflow: hidden;
    height: 380px;
}

.blogger-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.32s ease;
}

.blogger-card:hover .blogger-card__img {
    transform: scale(1.04);
}


/* =============================
   COMPONENT: Blogger Card — Body
============================== */
.blogger-card__body {
    padding: 18px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blogger-review-padding {
    --bs-gutter-x: 2.8rem;
}

.blogger-section.section .section-title {
    color: #114349;
}

/* =============================
   COMPONENT: Blogger Card — Name
============================== */
.blogger-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1b3a28;
    margin: 0;
    line-height: 1.3;
}


/* =============================
   COMPONENT: Blogger Card — Role / Title
============================== */
.blogger-card__role {
    font-size: 0.75rem;
    font-weight: 700;
    color: #69AA48;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
}

.main-footer.media-footer {
    padding-top: 100px;
}

.main-footer.media-footer .cta-section {
    width: 100%;
    margin-bottom: 70px;
    z-index: 1;
    position: relative;
}

.cta-card {
    position: relative;
    height: 460px;
    border-radius: 20px;
    padding: 30px;
    color: #fff;
    background: linear-gradient(135deg, #f7b500, #ff7a00);
    overflow: hidden;
}


/* ── Section ── */
.dreams-section.page-section {
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ── Dream Card ── */
.dream-card-wrapper {
    position: relative;
}

.dream-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 380px;
    background: #F8C522;
    background: linear-gradient(318deg, rgb(255 194 0) 20%, rgba(16, 113, 58, 1) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    cursor: pointer;
}

.dream-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
}

/* Background landmark image with low opacity */
.dream-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/dream-card-bg.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    z-index: 1;
}

/* ── Card Content ── */
.dream-card-content {
    position: relative;
    z-index: 2;
    padding: 18px 20px 18px 20px;
}

.dream-padding {
    --bs-gutter-x: 7.5rem;
    --bs-gutter-y: 7.5rem;
}

/* Higher specificity — wins over responsive.min.css */
.dreams-section .dream-padding {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.25rem;
}

.dreams-section .dream-card {
    height: 355px;
}

.placeholder-people img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.placeholder-people.dream-1 img {
    position: absolute;
    right: 0;
    width: 100%;
    left: 0;
    bottom: -18px;
}

.placeholder-people.dream-3 img {
    position: absolute;
    right: 0;
    width: 88%;
    left: 20px;
    bottom: 0px;
    z-index: 1;
}

.dream-card-content h3 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dream-card-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dream-person {
    position: absolute;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
}

.dream-person img {
    display: block;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

.dream-card-wrapper.family .dream-person {
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
}

.dream-card-wrapper.family .dream-person img {
    width: 340px;
    max-width: 100%;
}

.dream-card-wrapper.couple .dream-person {
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
}

.dream-card-wrapper.couple .dream-person img {
    width: 300px;
    max-width: 95%;
}

.dream-card-wrapper.shopping .dream-person {
    right: 5%;
    bottom: -10px;
}

.dream-card-wrapper.shopping .dream-person img {
    width: 260px;
    max-width: 90%;
}




/* ──  Do's & Don'ts Section ── */
.dos-donts-section {
    position: relative;
    padding-bottom: 80px !important;
}

/* ── Bootstrap Nav Tabs Override ── */
.custom-tabs {
    border: none;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.custom-tabs .nav-item {
    margin: 0;
}

.custom-tabs .nav-link {
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #F3F7E7;
    color: #10723A;
    border: 0;
}

.custom-tabs .nav-link:hover {
    color: #10723A;
    background-color: #F3F7E7;
}

.custom-tabs .nav-link.active {
    background-color: #10723A !important;
    color: #fff !important;
}

/* ── Tab Content ── */
.tab-content {
    padding: 0;
}

/* ── Cards ── */
.dos-card,
.donts-card {
    border-radius: 20px;
    padding: 30px 30px 10px 30px;
    height: 100%;
}

.dos-card {
    background-color: #D9FFC3;
    border: 1px solid #00F369;
}

.donts-card {
    background-color: #FFF0E0;
    border: 1px solid #F5880A;
}

/* ── Badge ── */
.badge-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.dont--padding {
    --bs-gutter-x: 3.5rem;
}

.badge-label.do-badge {
    background-color: #10723A;
}

.badge-label.dont-badge {
    background-color: #E07010;
}



.badge-label i {
    font-size: 0.85rem;
}

/* ── List Items ── */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    padding: 12px 0;
    font-size: 1rem;
    color: #114349;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.dos-card .info-list li {
    border-bottom-color: rgb(0 0 0 / 19%);
}

.donts-card .info-list li {
    border-bottom-color: rgb(0 0 0 / 19%);
}

.info-list li:last-child {
    border-bottom: none;
}

/* ═══════════ Experience Section ═══════════ */
.experience-section {
    padding: 100px 0;
    /* background: url(../img/home2nd.webp) center center / cover no-repeat; */
    background: transparent;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
}

/* ══════════════════════════════════
   TAB NAVIGATION BAR
   ══════════════════════════════════ */
.experience-tabs {
    /* background-color: #00000024; */
    border: none;
    padding: 3px 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-radius: 100px;
}



.experience-tabs .nav-item {
    margin: 0 4px;
    flex: 1 1 0;
    text-align: center;
}

.experience-tabs .nav-link {
    padding: 11px 18px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff9e;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: color 0.3s ease;
    position: relative;
    cursor: pointer;
    width: 100%;
    border-radius: 999px;
    border: 1.5px solid #e8e8e8;
    background: #fff;
    color: #555;
}

.experience-tabs .nav-link:hover {
    color: #114349;
    /* background: transparent; */
}

.experience-tabs .nav-link.active {
    background-color: #1a7c45;
    border: none !important;
    color: #fff;
    border: 1.5px solid #1a7c45;

}

/* ══════════════════════════════════
   TAB CONTENT — CUSTOM TRANSITIONS
   ══════════════════════════════════ */
.experience-tab-content {
    padding: 0;
}

.experience-tab-content .tab-pane {
    opacity: 0;
    transform: scale(0.97) translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-tab-content .tab-pane.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ══════════════════════════════════
   SWIPER — EXPERIENCE SLIDER BLOCK
   ══════════════════════════════════ */
.experience-slider-wrap {
    position: relative;
    margin: 25px 0px 0;
}

.experience-swiper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgb(255, 255, 255);
}

.experience-slide {
    position: relative;
    min-height: 590px;
    overflow: hidden;
}

/* ── Full Background Image ── */
/* .slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */
.swiper-slide-active .slide-bg {
    transform: scale(1.04);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Dark overlay */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(13, 59, 59, 0.45) 100%);
    z-index: 2;
}

/* ══════════════════════════════════
   TESTIMONIAL CARD
   ══════════════════════════════════ */
.testimonial-card-1 {
    position: absolute;
    bottom: -90px;
    right: 23px;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255, 255, 245, 0.93);
    backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 20px;
    /* max-width: 442px; */
    width: 33%;
    /* display: flex; */
    /* flex-direction: column; */
    left: unset;
    height: 237px;
    top: unset;
}

/* Card content transition per slide */
.swiper-slide-active .testimonial-card-1 {
    animation: cardSlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.feat-exp {
    height: 590px;
    width: 100%;
}


.testimonial-desc p {
    /* font-size: 1rem; */
    color: #114349;
    line-height: 1.55;
    margin-bottom: 0;
}

.testimonial-author {
    font-size: 0.938rem;
    font-weight: 700;
    color: #114349;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.testimonial-role {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #69AA48;
}

.testimonial-desc {
    margin-bottom: 16px;

}

/* ══════════════════════════════════
   CUSTOM SWIPER ARROWS
   ══════════════════════════════════ */
.custom-nav-arrows {
    position: absolute;
    right: 18px;
    border-radius: 100px;
    top: 4%;
    /* transform: translateY(-49%); */
    display: flex;
    flex-direction: column;
    z-index: 5;
    background-color: #F0EDC4;
}

.custom-arrow {
    width: 55px;
    height: 105px;
    border: none;
    color: #00000047;
    font-size: 27px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background-color: transparent;
}

.custom-arrow.swiper-next-btn {
    border-bottom: 1px solid #fff;
}

.custom-arrow.swiper-prev-btn {
    border-top: 1px solid #fff;
}

.custom-arrow:hover {
    color: #000;
}



/* ===== GSAP TEXT ANIMATION ===== */
.gsap-title .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.gsap-title .word .char-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    color: inherit;
}

/* Preserve span color inside headings */
.gsap-title span .word .char-inner {
    color: inherit;
}

.mice-images-wrapper img {
    width: 100%;
}

/* ============================================================
   RUSSIA FEDERATION DESTINATION SECTION  (explore.html)
   ============================================================ */

.rf-section {
    padding: 70px 0 80px;
    background: #fff;
}

/* ── Hero image ── */
.rf-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 50px;
    height: 420px;
}

.rf-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.rf-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3, 30, 30, 0.75) 0%, rgba(3, 30, 30, 0.18) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 36px;
}

.rf-hero-title {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
    line-height: 1.2;
}

.rf-hero-title span {
    color: #69AA48;
}

.rf-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rf-keywords span {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 6px 14px;
    border-radius: 30px;
    text-transform: uppercase;
}

/* ── Map ── */
.rf-map-wrap {
    position: relative;
    margin-bottom: 60px;
}

.rf-map-heading {
    font-size: 24px;
    font-weight: 800;
    color: #114349;
    margin-bottom: 6px;
}

.rf-map-subtext {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}

.rf-map-container {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

.rf-map-container .russia-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

.rf-map-container .russia-overlay-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* City dot labels on map */
.rf-map-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translate(-50%, -100%);
    cursor: pointer;
    z-index: 10;
}

.rf-map-label .dot {
    width: 11px;
    height: 11px;
    background: #69AA48;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(105, 170, 72, 0.35);
    transition: transform 0.2s;
}

.rf-map-label:hover .dot {
    transform: scale(1.5);
    box-shadow: 0 0 0 5px rgba(105, 170, 72, 0.3);
}

.rf-map-label .city-label {
    background: #2e7d3e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── City cards grid ── */
.rf-cities-heading {
    font-size: 24px;
    font-weight: 800;
    color: #114349;
    margin-bottom: 6px;
}

.rf-cities-subtext {
    font-size: 14px;
    color: #666;
    margin-bottom: 28px;
}

.rf-city-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(3, 60, 67, 0.09);
    border: 1px solid #e8ede8;
    margin-bottom: 28px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.rf-city-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(3, 60, 67, 0.15);
}

.rf-city-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.rf-city-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rf-city-card:hover .rf-city-img img {
    transform: scale(1.06);
}

.rf-city-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: #114349;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 30px;
}

.rf-city-body {
    padding: 18px 20px 20px;
}

.rf-city-desc {
    font-size: 13.5px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 14px;
}

.rf-excursion-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #E8640A;
    margin-bottom: 8px;
}

.rf-excursion-placeholder {
    background: #f7f9f7;
    border: 1.5px dashed #c8ddc8;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 12.5px;
    color: #8aaa8a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rf-excursion-placeholder i {
    font-size: 16px;
    color: #aacaaa;
    flex-shrink: 0;
}

/* ============================================================
   ASSOCIATION PAGE
   ============================================================ */

.association-page-section {
    padding: 70px 0 90px;
}

.association-page-heading {
    margin-bottom: 24px;
}

.association-page-heading h2 {
    font-weight: 600;
    color: #114349;
    margin-bottom: 8px;
}


.association-page-heading p {
    margin: 0;
}

/* Grid of logo cards */
.association-grid {
    display: grid;
    flex-wrap: wrap;
    gap: 24px;
    grid-template-columns: 1fr 1fr 1fr;
}

.team-photo-slider .teamPhotoSwiper {
    padding: 15px;
}

/* Each logo card */
.association-card {
    background: #fff;
    border: 1.5px solid #e5e5e5;
    border-radius: 16px;
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    cursor: default;
}

.association-card:hover {
    box-shadow: 0 8px 28px rgba(3, 60, 67, 0.12);
    transform: translateY(-3px);
    border-color: #b8d9b0;
}

.association-card img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* Placeholder when no logo yet */
.assoc-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #aab8b8;
}

.assoc-placeholder i {
    font-size: 28px;
    color: #c0d0d0;
}

.assoc-placeholder span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    line-height: 1.3;
}

/* ============================================================
   OUR BRAND PAGE
   ============================================================ */

.brand-page-section {
    padding: 70px 0 90px;
}

.brand-page-heading {
    margin-bottom: 24px;
}

.brand-page-heading h2 {
    font-weight: 600;
    color: #114349;
    margin-bottom: 8px;
}


.brand-page-heading p {
    margin: 0;
}

/* Slider wrapper */
.brand-slider-wrap {
    position: relative;
}

/* Smooth continuous slide — no easing steps */
.brandSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Each brand card */
.brand-card {
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    padding: 24px;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
}

.brand-card:hover {
    box-shadow: 0 8px 28px rgba(3, 60, 67, 0.13);
    transform: translateY(-3px);
    border-color: #b8d9b0;
}

.brand-card img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(30%);
    opacity: 0.85;
    transition: filter 0.22s ease, opacity 0.22s ease;
}

.brand-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Placeholder when no image yet */
.brand-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #b0c4c4;
}

.brand-card-placeholder i {
    font-size: 32px;
}

.brand-card-placeholder span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Brand name block (shown until real logo is added) */
.brand-name-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.brand-icon {
    font-size: 30px;
    margin-bottom: 2px;
}

.brand-logo-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
}

.brand-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.65;
}

/* Per-brand colour accents */
.brand-t3 {
    color: #E8640A;
}

.brand-t3 .brand-tagline {
    color: #555;
}

.brand-tw {
    color: #114349;
}

.brand-tw .brand-icon {
    color: #69AA48;
}

.brand-sdmc {
    color: #114349;
}

.brand-sdmc .brand-icon {
    color: #E8640A;
}

.brand-stmc {
    color: #0d3a5c;
}

.brand-stmc .brand-icon {
    color: #2a7fc1;
}

.brand-odmc {
    color: #3a1f6e;
}

.brand-odmc .brand-icon {
    color: #7c4dcc;
}

/* Progress bar */
.brand-progress {
    margin-top: 28px;
    height: 5px;
    background: #d9edd4;
    border-radius: 10px;
    overflow: hidden;
}

.brand-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #69AA48, #114349);
    border-radius: 10px;
    width: 0%;
    transition: width 0.3s ease;
}

/* Nav arrows */
.brand-arrows {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: center;
}

.brand-prev,
.brand-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #a7c89a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7da86b;
    font-size: 20px;
    background: #fff;
    transition: all 0.25s ease;
}

.brand-next {
    border-color: #114349;
    color: #114349;
}

.brand-prev:hover {
    background: #114349;
    border-color: #114349;
    color: #fff;
}

.brand-next:hover {
    background: #69AA48;
    border-color: #69AA48;
    color: #fff;
}

/* ============================================================
   MEET OUR TEAM PAGE
   ============================================================ */

.team-page-section {
    padding: 70px 0 90px;
}

.team-page-heading {
    margin-bottom: 30px;
}

.team-page-heading h2 {
    color: #114349;
    margin-bottom: 8px;
}


.team-page-heading p {
    margin: 0;
}

/* Slider wrapper */
.team-photo-slider {
    position: relative;
}

/* Each photo slide */
.team-photo-card {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgb(0 0 0 / 3%);
    aspect-ratio: 3 / 3.2;
}

.team-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

.team-photo-card:hover img {
    transform: scale(1.04);
}

/* Progress bar */
.team-photo-progress {
    margin-top: 28px;
    height: 5px;
    background: #d9edd4;
    border-radius: 10px;
    overflow: hidden;
}

.team-photo-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #69AA48, #114349);
    border-radius: 10px;
    width: 0%;
    transition: width 0.3s ease;
}

/* Custom nav arrows for team page */
.team-page-arrows {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    justify-content: center;
}

.team-page-prev,
.team-page-next {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #8fbf75;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7da86b;
    font-size: 20px;
    transition: all 0.25s ease;
    background: #fff;
}

.team-page-next {
    border-color: #114349;
    color: #114349;
    background: #fff;
}

.team-page-prev:hover {
    background: #114349;
    border-color: #114349;
    color: #fff;
}

.team-page-next:hover {
    background: #69AA48;
    border-color: #69AA48;
    color: #fff;
}

/* ── Team Member Profile Card (meet-our-team.html) ── */
.team-member-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.team-member-card:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.13);
    transform: translateY(-5px);
}

.team-member-photo {
    width: 100%;
    aspect-ratio: 4 / 3.6;
    overflow: hidden;
    flex-shrink: 0;
}

.team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

.team-member-card:hover .team-member-photo img {
    transform: scale(1.04);
}

.team-member-body {
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.team-member-name {
    font-size: 22px;
    font-weight: 700;
    color: #114349;
    letter-spacing: 0;
    margin-bottom: 4px;
    line-height: 1.35;
}

.team-member-role {
    display: block;
    font-size: 18px;
    color: #114349;
    font-weight: 500;
    margin-bottom: 12px;
}

.team-member-desc {
    font-size: 16px;
    flex: 1;
    margin-bottom: 0;
}

.team-member-socials {
    display: flex;
    gap: 10px;
    align-items: center;
}

.team-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 15px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.team-social-btn:hover {
    border-color: #69AA48;
    color: #69AA48;
    background: rgba(105, 170, 72, 0.06);
}

/* ============================================================
   WHY CHOOSE US PAGE
   ============================================================ */

.wcu-page-section {
    padding: 90px 0 80px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background-image: url('../img/wcubg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #FFFEF0;
}

.wcu-page-section>.container {
    width: 100%;
}

.wcu-intro-text {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    line-height: 1.85;
    margin-bottom: 12px;
}

h2.wcu-intro-text {
    font-size: 42px;
    font-weight: 700;
    color: #114349;
    line-height: 1.25;
    margin-bottom: 16px;
}

.wcu-highlight {
    color: #69AA48;
}

.wcu-cards-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Individual feature card */
.wcu-feature-card {
    background: #fffdf6;
    border-radius: 14px;
    padding: 20px 22px 22px;
    border: 1.5px solid #e8dfc4;
    box-shadow: 0 2px 10px rgba(180, 150, 80, 0.07);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.wcu-feature-card:hover {
    box-shadow: 0 6px 24px rgba(180, 150, 80, 0.14);
    transform: translateY(-2px);
}

/* Header row: icon + title bar */
.wcu-feature-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

/* Orange rounded square icon */
.wcu-feature-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: linear-gradient(145deg, #f9a825 0%, #e8640a 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wcu-feature-icon i {
    font-size: 22px;
    color: #fff;
}

/* Solid green title bar */
.wcu-feature-title-pill {
    flex: 1;
    background: #2e7d3e;
    border-radius: 10px;
    padding: 13px 24px;
}

.wcu-feature-title-pill h4 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

/* Description text — no indent, full width */
.wcu-feature-desc {
    font-size: 16px;
    color: #000000;
    line-height: 1.75;
    margin: 0;
    padding-left: 0;
    font-weight: 400;
}

/* ============================================================
   WHY CHOOSE US — Tabbed feature panel
   ============================================================ */

.wcu-tabs-wrap {
    margin-top: 32px;
}

/* 30 / 70 split on large screens */
@media (min-width: 992px) {
    .wcu-tabs-wrap>.row>.col-lg-5 {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .wcu-tabs-wrap>.row>.col-lg-7 {
        flex: 0 0 70%;
        max-width: 70%;
    }
}

/* Tab list (left column) */
.wcu-tab-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: space-between;
}

.wcu-tab-list>.wcu-tab {
    flex: 1 1 0;
}

.wcu-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fffdf6;
    border: 1.5px solid #e8dfc4;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.wcu-tab:hover {
    border-color: #2e7d3e;
    box-shadow: 0 4px 16px rgba(46, 125, 62, 0.10);
    transform: translateX(2px);
}

.wcu-tab.active {
    background: #2e7d3e;
    border-color: #2e7d3e;
    box-shadow: 0 6px 22px rgba(46, 125, 62, 0.22);
}

.wcu-tab-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: linear-gradient(145deg, #f9a825 0%, #e8640a 100%);
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wcu-tab-icon i {
    font-size: 20px;
    color: #fff;
}

.wcu-tab-title {
    font-size: 17px;
    font-weight: 700;
    color: #114349;
    line-height: 1.3;
    transition: color 0.25s ease;
}

.wcu-tab.active .wcu-tab-title {
    color: #ffffff;
}

/* Animated progress strip on the active tab */
.wcu-tab-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
    pointer-events: none;
    opacity: 0;
}

.wcu-tab.active .wcu-tab-progress {
    opacity: 1;
}

.wcu-tab-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: #f9a825;
}

.wcu-tab.active.is-running .wcu-tab-progress-fill {
    width: 100%;
    transition: width var(--wcu-autoplay, 5000ms) linear;
}

/* Display card (right column) — styled like about page vision/mission cards */
.wcu-display-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    padding: 35px;
    height: 100%;
    min-height: 100%;
}

.wcu-display-pane {
    position: absolute;
    inset: 35px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
    pointer-events: none;
}

.wcu-display-pane.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
    pointer-events: auto;
    position: relative;
    inset: auto;
}

.wcu-display-card .about-card-img.wcu-display-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    margin-bottom: 18px;
}

.wcu-display-label.card-label-box {
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    margin-bottom: 14px;
}

.wcu-display-pane[data-pane="1"] .wcu-display-label.card-label-box {
    background: #1a7c45;
}

.wcu-display-pane[data-pane="3"] .wcu-display-label.card-label-box {
    background: #1a7c45;
}

.wcu-display-body {
    padding: 0;
}

.wcu-display-title {
    font-size: 22px;
    font-weight: 600;
    color: #12434A;
    margin: 0 0 10px;
    line-height: 1.35;
}

.wcu-display-desc {
    font-size: 16px;
    color: #12434A;
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
}

@media (max-width: 991.98px) {
    .wcu-display-card {
        height: auto;
        padding: 24px;
    }

    .wcu-display-pane {
        inset: 24px;
    }

    .wcu-tab-title {
        font-size: 15.5px;
    }

    .wcu-display-title {
        font-size: 20px;
    }

    .wcu-display-card .about-card-img.wcu-display-img {
        height: 220px;
    }
}

/* ============================================================
   TRAVEL TIPS PAGE — Info Card Text Styles
   ============================================================ */

.tt-info-card {
    height: 100%;
}

.tt-info-text {
    margin-bottom: 14px;
}

.tt-info-text:last-child {
    margin-bottom: 20px;
}

.tt-link {
    color: #2e7d3e;
    font-weight: 600;
    word-break: break-all;
    text-decoration: none;
}

.tt-link:hover {
    color: #69AA48;
}

.tt-enjoy {
    font-weight: 700;
    color: #2e7d3e;
    font-size: 15px;
}

.tt-enjoy i {
    margin-right: 6px;
}

.badge-label i {
    margin-right: 6px;
    font-size: 16px;
}


/* ============================================================
   CUSTOMISE YOUR REQUEST - Query Form
   ============================================================ */

.customise-section {
    background: #f9f9f6;
    padding: 80px 0 100px;
}

.cq-field-wrap {
    position: relative;
    margin-bottom: 16px;
}

.cq-input,
.cq-select,
.cq-textarea {
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 13px 16px;
    font-size: 14px;
    color: #333;
    background: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.cq-input:focus,
.cq-select:focus,
.cq-textarea:focus {
    border-color: #69AA48;
}

.cq-input::placeholder,
.cq-textarea::placeholder {
    color: #aaa;
}

.cq-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
    color: #aaa;
}

.cq-select option:not([value=""]) {
    color: #333;
}

.cq-date {
    color: #aaa;
}

.cq-date::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

.cq-textarea {
    resize: vertical;
    min-height: 120px;
}

.cq-submit-wrap {
    margin-top: 10px;
    margin-bottom: 20px;
}

.cq-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: #2e7d3e;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}

.cq-submit-btn:hover {
    color: #69AA48;
}

.cq-submit-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #2e7d3e;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    transition: background 0.2s;
}

.cq-submit-btn:hover .cq-submit-arrow {
    background: #69AA48;
}

.cq-note {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-top: 6px;
}

.cq-note a {
    color: #2e7d3e;
    text-decoration: underline;
    font-weight: 500;
}

.cq-note a:hover {
    color: #69AA48;
}

/* ============================================================
   EXPLORE PAGE — RUSSIA DESTINATION MAP
   ============================================================ */

/* Override gn-wrap for Russia map layout */
.gn-wrap.rf-dest-wrap {
    align-items: flex-start;
}

/* Override map panel — height driven by Russia SVG aspect ratio */
.rf-map-panel-russia {
    min-height: auto !important;
    position: relative;
}

/* Russia SVG map container */
.rf-russia-map-wrap {
    position: relative;
    width: 100%;
    line-height: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #eef4ec;
}

.rf-russia-map-wrap .russia-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Destination dot markers */
.rf-dest-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #E8640A;
    border: 2.5px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 6;
    padding: 0;
    outline: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
}

.rf-dest-marker:hover {
    background: #114349;
    transform: translate(-50%, -50%) scale(1.45);
    box-shadow: 0 0 0 5px rgba(17, 67, 73, 0.20);
}

.rf-dest-marker.active {
    background: #114349;
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 0 5px rgba(17, 67, 73, 0.22);
}

/* Pulsing ring on active marker */
.rf-dest-marker.active::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid #114349;
    animation: rfMarkerPulse 1.5s ease-out infinite;
}

@keyframes rfMarkerPulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.4);
    }
}

/* Tooltip positioned inside the Russia map wrap */
.rf-russia-map-wrap .gn-tooltip {
    width: 240px;
}

.rf-russia-map-wrap .gn-tooltip .gn-tt-body {
    padding: 12px 14px 14px;
}

/* Russia SVG map container */
#rf-russia-map {
    width: 100%;
    height: 560px;
    min-height: 560px;
    border-radius: 16px;
    overflow: hidden;
    /* background: #edf4ee; */
}

#rf-russia-map svg {
    display: block;
    width: 100%;
    height: 100%;
}

#rf-russia-map path[data-region] {
    fill: #d4e6d8;
    stroke: #b8d0bc;
    stroke-width: 0.5px;
    cursor: pointer;
    transition: fill 0.15s;
}

#rf-russia-map path[data-region]:hover {
    fill: #c5dbc9;
}

#rf-russia-map path[data-region].rf-selected {
    fill: #E8640A;
    fill-opacity: 0.72;
}

#rf-russia-map circle[data-dest] {
    fill: #114349;
    stroke: #ffffff;
    stroke-width: 1.5px;
    cursor: pointer;
    transition: fill 0.15s;
}

#rf-russia-map circle[data-dest]:hover {
    fill: #E8640A;
}

#rf-russia-map circle[data-dest].rf-active {
    fill: #E8640A;
}

/* ── end Russia destination map ── */

.swiper.gallerySwiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    padding-top: 30px;
    padding-bottom: 51px;
}

/* ========================================================
   DESTINATION DETAIL PAGES
======================================================== */

/* ---- HERO ---- */
.dest-hero {
    height: 72vh;
    min-height: 520px;
}

.dest-tour-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #ff7a00, #fdb913);
    border: 1.5px solid rgba(232, 100, 10, 0.55);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.dest-hero-title {
    font-size: 65px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    margin-bottom: 0px;
}

.dest-hero-pills {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.dest-hero-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.dest-hero-pill i {
    color: #E8640A;
    font-size: 16px;
}

/* ---- STATS BAR ---- */
.dest-stats-bar {
    background: #114349;
    padding: 0;
}

.dest-stats-inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.dest-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex: 1;
    min-width: 160px;
}

.dest-stat-item:last-child {
    border-right: none;
}

.dest-stat-icon {
    width: 42px;
    height: 42px;
    background: rgba(232, 100, 10, 0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E8640A;
    font-size: 19px;
    flex-shrink: 0;
}

.dest-stat-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 3px;
    line-height: 1;
}

.dest-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1;
}

/* ---- BREADCRUMB ---- */
.dest-breadcrumb {
    padding: 13px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    align-items: center;
    gap: 0;
}

.dest-breadcrumb a {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.dest-breadcrumb a:hover {
    color: #1a7c45;
}

.dest-breadcrumb .bc-sep {
    margin: 0 8px;
    color: #ccc;
    font-size: 13px;
}

.dest-breadcrumb .bc-current {
    font-size: 13px;
    color: #114349;
    font-weight: 600;
}

/* ---- MAIN SECTION ---- */
.dest-detail-section {
    padding: 48px 0 90px;
    overflow: visible !important;
    position: relative;
}


/* Ensure no parent ancestor breaks sticky with overflow:hidden */
.dest-detail-section .container,
.dest-detail-section .row,
.dest-detail-section .col-xl-3,
.dest-detail-section .col-lg-4 {
    overflow: visible !important;
}

.dest-sidebar-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(17, 67, 73, 0.11);
    border: 1px solid rgba(17, 67, 73, 0.08);
}

.sidebar-card-header {
    background: linear-gradient(135deg, #114349 0%, #0d3538 100%);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-card-header i {
    color: #E8640A;
    font-size: 18px;
}

.sidebar-card-header h6 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

.sidebar-itinerary {
    padding: 6px 0;
}

.sidebar-day-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.2s, border-left-color 0.2s;
    text-decoration: none !important;
    color: inherit !important;
}

/* .sidebar-day-item:hover {
    background: rgba(17, 67, 73, 0.04);
    border-left-color: rgba(232, 100, 10, 0.35);
} */


.sidebar-day-num {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid #D1F8BD;
    background: #FFFEF0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 600;
    color: #E8ECDF;
    transition: 0.3s all ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    flex-shrink: 0;
}

.sidebar-day-item.active .sidebar-day-num {
    background: linear-gradient(90deg, rgba(245, 124, 27, 1) 0%, rgba(248, 197, 34, 1) 100%);
    color: #fff;
    border: 1px solid #D1F8BD;

}

.sidebar-day-num.icon-num {
    border-color: #114349;
    color: #114349;
}

.sidebar-day-num.icon-num-green {
    border-color: #1a7c45;
    color: #1a7c45;
}

.sidebar-day-item.active .sidebar-day-num.icon-num,
.sidebar-day-item.active .sidebar-day-num.icon-num-green {
    background: transparent;
    color: #E8640A;
    border-color: #E8640A;
}

.sidebar-day-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-day-label {
    font-size: 10.5px;
    color: #aaa;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 1;
}

.sidebar-day-city {
    font-size: 16px;
    font-weight: 600;
    color: #114349;
    line-height: 1.2;
}

.sidebar-day-item.active .sidebar-day-label {
    color: #E8640A;
}

.sidebar-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0 24px;
}

.sidebar-cta {
    padding: 18px 24px 14px;
}

.sidebar-cta a.quote-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    padding: 13px 20px;
    border-radius: 50px;
    letter-spacing: 0.4px;
    width: 100%;
}

.sidebar-contact {
    padding: 0 24px 22px;
}

.sidebar-contact-note {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}

.sidebar-contact a.contact-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding: 10px 16px;
    border-radius: 50px;
    width: 100%;
}

/* ---- DAY BLOCKS ---- */
.dest-day-block {
    margin-bottom: 52px;
    padding-bottom: 52px;
    border-bottom: 1px solid rgba(17, 67, 73, 0.1);
    scroll-margin-top: 98px;
}

.dest-day-block:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dest-day-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #E8640A;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.dest-day-heading {
    font-size: 36px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 14px;
    line-height: 1.15;
}

.dest-day-rule {
    height: 2px;
    background: linear-gradient(90deg, #E8640A 0%, rgba(232, 100, 10, 0.08) 80%);
    border: none;
    margin-bottom: 22px;
    border-radius: 2px;
}

.dest-day-content p {
    margin-bottom: 12px;
}

.dest-time-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #114349;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 50px;
    margin-right: 6px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    line-height: 1;
}




.dest-highlight-card {
    background: linear-gradient(135deg, rgba(17, 67, 73, 0.07) 0%, rgba(17, 67, 73, 0.03) 100%);
    border-left: 4px solid #E8640A;
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    margin: 16px 0;
}

.dest-highlight-card p {
    margin: 0;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.dest-highlight-card p i {
    color: #E8640A;
    margin-right: 8px;
}

/* ---- GALLERY ---- */
.dest-gallery-section {
    margin-bottom: 52px;
    scroll-margin-top: 98px;
}

.dest-section-heading {
    font-size: 24px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(17, 67, 73, 0.1);
    position: relative;
}

.dest-section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: #E8640A;
    border-radius: 2px;
}

.dest-gallery-swiper {
    border-radius: 16px;
    overflow: hidden;
}

.dest-gallery-swiper .swiper-slide img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    display: block;
}

.dest-gallery-swiper .swiper-button-next,
.dest-gallery-swiper .swiper-button-prev {
    color: #fff;
    background: rgba(17, 67, 73, 0.65);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: background 0.2s;
}

.dest-gallery-swiper .swiper-button-next:hover,
.dest-gallery-swiper .swiper-button-prev:hover {
    background: #E8640A;
}

.dest-gallery-swiper .swiper-button-next::after,
.dest-gallery-swiper .swiper-button-prev::after {
    font-size: 14px;
    font-weight: 800;
}

.dest-gallery-swiper .swiper-pagination-bullet-active {
    background: #E8640A;
}

/* ---- PRICING TABLE ---- */
.dest-pricing-section {
    margin-bottom: 52px;
    scroll-margin-top: 98px;
}

.dest-table-wrap {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
}

.dest-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.dest-table thead tr {
    background: #E8640A;
}

.dest-table thead th {
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 15px 22px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.dest-table tbody tr:nth-child(odd) {
    background: #fff;
}

.dest-table tbody tr:nth-child(even) {
    background: #fff;
}

.dest-table tbody tr:hover {
    background: rgba(232, 100, 10, 0.05);
}

.dest-table tbody td {
    padding: 15px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 18px;
    line-height: 32px;
    font-weight: 500;
    color: #114349;
}

.dest-table tbody td:last-child {
    font-weight: 700;
    color: #114349;
    font-size: 15.5px;
}

/* ---- INCLUSIONS ---- */
.dest-inclusions-section {
    margin-bottom: 0;
    scroll-margin-top: 98px;
}

.dest-inclusions-card {
    background: linear-gradient(135deg, rgba(17, 67, 73, 0.04) 0%, rgba(26, 124, 69, 0.06) 100%);
    border: 1px solid rgba(17, 67, 73, 0.12);
    border-radius: 16px;
    padding: 30px 32px;
}

.inclusions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inclusions-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px dashed rgba(17, 67, 73, 0.14);
    font-size: 18px;
    color: #114349;
    font-weight: 500;
    line-height: 1.65;
}

.inclusions-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.inclusions-list li:first-child {
    padding-top: 0;
}

.incl-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #E8640A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.incl-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E8640A;
}

/* ---- CTA BANNER ---- */
.dest-cta-banner {
    background: linear-gradient(135deg, #114349 0%, #1a7c45 100%);
    border-radius: 20px;
    padding: 44px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dest-cta-banner::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.dest-cta-banner::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -30px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.dest-cta-banner h3 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.dest-cta-banner p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.dest-cta-banner .contact-btn {
    font-size: 14px;
    font-weight: 700;
    padding: 14px 36px;
    border-radius: 50px;
    position: relative;
    z-index: 1;
    letter-spacing: 0.4px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {
    .dest-hero-title {
        font-size: 48px;
    }

    .dest-hero {
        height: 60vh;
        min-height: 420px;
    }

    .dest-stat-item {
        padding: 14px 18px;
        min-width: 130px;
    }

    .dest-sidebar-sticky {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .dest-hero-title {
        font-size: 38px;
    }

    .dest-day-heading {
        font-size: 28px;
    }

    .dest-cta-banner {
        padding: 30px 22px;
    }

    .dest-cta-banner h3 {
        font-size: 22px;
    }

    .dest-inclusions-card {
        padding: 22px 18px;
    }
}

/* =========================================================
   HOMEPAGE — FULLSCREEN SECTIONS, PARALLAX & TRANSITIONS
========================================================= */
.home-main {
    margin-top: -82px;
    /* pull banner up so it starts at top of viewport, header overlays it */
}

.home-main .home-section {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}

.home-main .home-section>.container,
.home-main .home-section>.container-fluid {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Parallax layer (bg image sits behind content) */
.home-main .parallax-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Hero banner: fill the full section, no parallax offset */
.home-main .hero-banner .banner-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-main .hero-banner .container {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    bottom: auto;
}

/* Tour package — bg now lives on the parallax layer */
.home-main .tour-package-section {
    background: transparent;
    margin: 0;
    padding: 80px 0;
    border-radius: 0;
    overflow: hidden;
    height: auto;
    min-height: unset;
}

.home-main .tour-package-section .section-parallax-bg {
    /* background: url(../img/green-bg-home.webp) center center / cover no-repeat; */
    opacity: 1;
}

/* MICE banner — video background */
.home-main .mice-banner-section {
    background-image: none;
    background-color: #000;
    align-items: center;
    height: 70vh;
    min-height: 420px;
}

.mice-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.mice-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Section transition — soft fade boundary between adjacent sections */
.home-main .home-section+.home-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%); */
    z-index: 1;
    pointer-events: none;
}

/* Reveal target — JS sets initial hidden state via GSAP, this is fallback */
.home-main .reveal {
    will-change: transform, opacity;
}

/* Reduced-motion: kill parallax & reveal offsets */
@media (prefers-reduced-motion: reduce) {
    .home-main .parallax-layer {
        transform: none !important;
    }

    .home-main .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Mobile — relax 100vh to avoid cramped layouts on tall content */
@media (max-width: 767px) {
    /* .home-main .home-section {
        min-height: 53svh;
    } */

    .home-main .tour-package-section {
        padding: 60px 0;
    }

    .home-main .mice-banner-section {
        padding: 60px 0;
    }
}

/* =========================================================
   BUTTON STYLE REFRESH — matches reference exactly
   Framed outer ring · light-center gradient · right-side
   white tile with colored circle + arrow inside.
========================================================= */

/* ── Default tokens (orange brand) ── */
.btn-view-packages,
.contact-btn,
.fi-btn,
.mice-cta {
    --btn-circle: #e06000;
    --btn-glow: rgba(224, 96, 0, 0.40);
}

/* ── Green brand tokens ── */
.hero-banner .btn-view-packages,
.quote-btn,
.cta-primary-btn {
    --btn-circle: #155f35;
    --btn-glow: rgba(26, 124, 69, 0.38);
}

.about-btn {
    --btn-circle: #114349;
    --btn-glow: rgba(0, 0, 0, 0.12);
}

.quote-btn {
    width: max-content;
    margin: 0 auto;
}

/* ── Shared button shell ── */
.btn-view-packages,
.contact-btn,
.quote-btn,
.cta-primary-btn,
.fi-btn,
.about-btn,
.mice-cta {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 6px 6px 6px 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* outer dark ring that creates the 3-D frame */
    border: 2.5px solid rgba(0, 0, 0, 0.22);
    /* inner white highlight + drop shadow */
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.40),
        0 12px 28px var(--btn-glow, rgba(0, 0, 0, 0.18));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: visible;
    justify-content: space-between;
}

/* ── Stacked gradients: radial light overlay on top of brand gradient ── */
.btn-view-packages,
.contact-btn,
.fi-btn,
.mice-cta {
    background-image:
        radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.22) 0%, transparent 65%),
        linear-gradient(90deg, #ff7a00, #fdb913);
}

.hero-banner .btn-view-packages,
.quote-btn {
    background-image:
        radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
    background-color: #1a7c45;
}

/* Orange gradient buttons: keep gradient, suppress Bootstrap bg change */
.btn-view-packages:hover,
.contact-btn:hover,
.fi-btn:hover,
.mice-cta:hover {
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.50),
        0 18px 36px var(--btn-glow, rgba(0, 0, 0, 0.22));
    color: #fff !important;
    background-color: transparent;
}

/* Green buttons: keep their solid green on hover */
.hero-banner .btn-view-packages:hover,
.quote-btn:hover,
.about-btn:hover {
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1a7c45;
    --bs-btn-hover-border-color: transparent;
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.50),
        0 18px 36px var(--btn-glow, rgba(0, 0, 0, 0.22));
    color: #fff !important;
    background-color: #1a7c45;
}

.btn-view-packages:active,
.contact-btn:active,
.quote-btn:active,
.fi-btn:active,
.about-btn:active,
.mice-cta:active {
    transform: translateY(0);
}

/* ── Right-side white tile ── */
.bannerPackage,
.contact-btn .icon,
.rqst-icon,
.fi-btn span {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    overflow: visible;
}

/* ── Colored circle inside the tile ── */
.bannerPackage::before,
.contact-btn .icon::before,
.rqst-icon::before,
.fi-btn span::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--btn-circle, #e06000);
    z-index: 0;
}

/* ── Arrow/icon sits above the circle ── */
.bannerPackage img,
.contact-btn .icon img,
.rqst-icon img,
.fi-btn span img {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;

    filter: brightness(0) invert(1);
}

/* ── about-btn: light ghost style ── */
.about-btn {
    background-color: #fff;
    color: #114349;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
        0 6px 16px var(--btn-glow);
    background-image: none;
}

/* ── fi-btn: compact variant ── */
.fi-btn {
    width: auto;
    padding: 5px 5px 5px 18px;
    font-size: 12px;
    gap: 10px;
}

.fi-btn .bannerPackage,
.fi-btn span {
    width: 36px;
    height: 36px;
}

.fi-btn span::before {
    width: 24px;
    height: 24px;
}

/* ── Adjust green brand buttons — border not too dark ── */
.hero-banner .btn-view-packages,
.quote-btn {
    border-color: rgba(255, 255, 255, 0.35);
}

/* ── Mobile ── */
@media (max-width: 575px) {

    .btn-view-packages,
    .contact-btn,
    .quote-btn,
    .fi-btn,
    .about-btn,
    .mice-cta {
        padding: 5px 5px 5px 18px;
        font-size: 13px;
        gap: 10px;
    }

    .bannerPackage,
    .contact-btn .icon,
    .rqst-icon {
        width: 38px;
        height: 38px;
    }

    .bannerPackage::before,
    .contact-btn .icon::before,
    .rqst-icon::before {
        width: 26px;
        height: 26px;
    }
}

/* ── end destination detail pages ── */

/* Parallax layer for inner page banners — extends 20% above/below so translateY(±12%)
   never exposes the section background during scroll transitions */
.inner-banner-section .parallax-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Green bottom overlay on all inner banners — all screen sizes */


/* Remove explicit z-index from banner swiper so pagination escapes its stacking context */
.inner-banner-section .swiper {
    z-index: auto !important;
}

/* Now pagination participates at banner level and sits above the ::after overlay */
.inner-banner-section .swiper-pagination {
    z-index: 10 !important;
}

/* =========================================================
   EXPLORE OUR TOURS — destination cards (explore.html)
========================================================= */
.explore-tours-section {
    padding: 90px 0;
}

.tour-explore-grid {
    --bs-gutter-x: 1.75rem;
    --bs-gutter-y: 1.75rem;
}

@media (min-width: 768px) and (max-width: 1199px) {
    #itinGrid.tour-explore-grid {
        justify-content: center;
    }

    #itinGrid.tour-explore-grid>[class*="col-"] {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}

.tour-explore-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: unset;
    height: 380px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(17, 67, 73, 0.10);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.tour-explore-card:hover {
    box-shadow: 0 18px 38px rgba(17, 67, 73, 0.22);
}

.tour-explore-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.tour-explore-card:hover .tour-explore-card__img {
    transform: scale(1.06);
}

.tour-explore-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 67, 73, 0) 35%, rgba(17, 67, 73, 0.78) 100%);
    pointer-events: none;
}

.tour-explore-card__title {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tour-explore-card__arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #114349;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.tour-explore-card:hover .tour-explore-card__arrow {
    background: linear-gradient(135deg, #F57C1B 0%, #F8C522 100%);
    color: #fff;
    transform: rotate(-12deg);
}

@media (max-width: 767px) {
    .explore-tours-section {
        padding: 60px 0;
    }

    .tour-explore-card__title {
        font-size: 1.15rem;
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .tour-explore-card__arrow {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* =========================================================
   EXCURSION CARDS — destination detail pages (golden-ring etc.)
========================================================= */
.dest-excursions-section {
    padding: 80px 0 100px;
    background: #FFFEF0;
}

.excursion-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.excursion-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(17, 67, 73, 0.09);
    transition: box-shadow 0.35s ease;
}

.excursion-card:hover {
    box-shadow: 0 14px 40px rgba(17, 67, 73, 0.17);
}

.excursion-card__img-col {
    min-height: 280px;
}

.excursion-card__img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    overflow: hidden;
}

.excursion-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.excursion-card:hover .excursion-card__img img {
    transform: scale(1.05);
}

.excursion-card__body {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.excursion-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #114349;
    margin-bottom: 18px;
    line-height: 1.4;
}

.excursion-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0e8;
}

.excursion-meta li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: #333;
    margin-bottom: 0;
    line-height: 1;
}

.excursion-meta li i {
    color: #69AA48;
    font-size: 16px;
    flex-shrink: 0;
}

.excursion-meta__label {
    color: #888;
    font-weight: 400;
    margin-right: 2px;
}

.excursion-card__desc {
    font-size: 15.5px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 28px;
}

/* ---- Other Destinations strip at the bottom ---- */
.dest-other-section {
    padding: 80px 0 90px;
    background: #fff;
}

.dest-other-section .section-heading h2 {
    font-size: 38px;
}

@media (max-width: 991px) {
    .excursion-card__img-col {
        min-height: 240px;
    }

    .excursion-card__img {
        min-height: 240px;
    }

    .excursion-card__body {
        padding: 28px;
    }

    .excursion-card__title {
        font-size: 1.2rem;
    }

    .excursion-card__desc {
        font-size: 15px;
    }
}

/* ============================================================
   NEWSLETTER — SLEEK HORIZONTAL REDESIGN
============================================================ */
.newsletter-section {
    padding: 44px 0;
}

.nl-content-title {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
}

.nl-content-sub {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin: 0;
}

.nl-inline-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    padding: 5px 5px 5px 20px;
}

.nl-inline-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    outline: none;
    min-width: 0;
    padding: 0;
}

.nl-inline-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.nl-inline-form button {
    display: flex;
    flex-direction: row-reverse;
    background-image: radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.22) 0%, transparent 65%), linear-gradient(90deg, #ff7a00, #fdb913);
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 6px 6px 6px 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2.5px solid rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.40), 0 12px 28px var(--btn-glow, rgba(0, 0, 0, 0.18));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: visible;
    color: #fff;
}

.nl-inline-form button .nl-btn-icon {
    background-color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 8px;
}

.nl-inline-form button img {
    width: 8px;
    height: 8px;
}

@media (max-width: 575px) {
    .nl-inline-form {
        flex-direction: column;
        border-radius: 12px;
        padding: 14px;
        gap: 10px;
    }

    .nl-inline-form input {
        width: 100%;
    }

    .nl-inline-form button {
        width: max-content;
        justify-content: center;
    }
}

/* ============================================================
   FOOTER CONTACT ITEMS WITH ICONS
============================================================ */
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.footer-contact-item i {
    color: #69AA48;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.footer-contact-item span {
    font-size: 15px;
    font-weight: 500;
    color: #114349;
    line-height: 1.4;
}

/* ============================================================
   FOOTER CITY ADDRESS CARDS WITH SKYLINES
============================================================ */
/* Green tray wrapping city cards + copyright */
.footer-cards-section {
    margin-top: 20px;
    background: #114349;
    border-radius: 20px 20px 0 0;
    padding: 16px;
}

.footer-address-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 20px;
}

@media (max-width: 1399px) {
    .main-footer .row.align-items-start .col-lg-4.text-center {
        order: -1;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .main-footer .row.align-items-start .col-lg-4:not(.text-center) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

@media (max-width: 991px) {
    .footer-address-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-address-cards .footer-city-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc(50% - 12px);
        margin: 0 auto;
        width: 100%;
    }

    .main-footer .row.align-items-start .col-lg-4:not(.text-center) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .footer-address-cards {
        grid-template-columns: 1fr;
    }

    .footer-address-cards .footer-city-card:last-child {
        grid-column: auto;
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
}

@media (max-width: 500px) {
    .main-footer .row.align-items-start .col-lg-4:not(.text-center) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .main-footer .row.align-items-start .col-lg-4 .row>div {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

.footer-city-card {
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    border: none;
    display: flex;
    flex-direction: column;
}

.footer-city-info {
    padding: 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.footer-city-name {
    font-size: 15px;
    font-weight: 800;
    color: #114349;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.footer-city-addr {
    font-size: 15px;
    color: #4a6a70;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.footer-directions-btn {
    margin-top: 10px;
    align-self: center;
    text-decoration: none;
}

/* ============================================================
   FOOTER LAYOUT FIXES
============================================================ */

/* Fix space-between pushing city cards to bottom */
.footer-snap-wrap .main-footer>.container {
    justify-content: flex-start;
    gap: 16px;
}

/* Center-align all footer nav columns */
.footer-nav {
    text-align: center;
}

.footer-nav h5 {
    text-align: center;
}

.footer-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-contact-col {
    text-align: center;
}

.footer-contact-item {
    justify-content: center;
}

.footer-brand--center {
    align-items: center;
}

.footer-socials {
    justify-content: center;
}

@media (max-width: 575px) {
    .excursion-card__body {
        padding: 22px 20px;
    }

    .excursion-meta {
        gap: 10px 16px;
    }
}

/* =========================================================
   DESTINATION PAGE — GRID CARD LAYOUT
========================================================= */

/* ---- Hero with bottom nameplate ---- */
.dest-hero-nameplate {
    height: 700px;
    min-height: 700px;
    position: relative;
    overflow: hidden;
}

.dest-hero-nameplate .parallax-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.dest-nameplate {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #fdb913 0%, #E8640A 55%, #c84800 100%);
    padding: 18px 0;
    z-index: 3;
}

.dest-nameplate__title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
}

.dest-nameplate__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    white-space: nowrap;
}

/* ---- Excursion grid section ---- */
.excursion-grid-section {
    padding: 50px 0 60px;
    background: #FFFEF0;
}

.excursion-grid-row {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2.5rem;
}

/* ---- Vertical card — flip container ---- */
.excursion-grid-card {
    perspective: 1200px;
    height: 100%;
    min-height: 540px;
    border-radius: 16px;
}

/* 3D rotator */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

.excursion-grid-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* FRONT face */
.flip-card-front {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

.flip-card-front:hover {
    box-shadow: 0 8px 28px rgba(17, 67, 73, 0.14);
}

/* BACK face */
.flip-card-back {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    background: linear-gradient(155deg, #fdb913 0%, #E8640A 55%, #c84800 100%);
    display: flex;
    flex-direction: column;
    padding: 28px 24px 22px;
    color: #fff;
    overflow: hidden;
}

.flip-back__desc {
    color: #ffffff;
    font-size: 17px;
    line-height: 30px;
    margin: 0 0 16px;
}

.flip-back__title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.35;
}

.flip-back__list {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flip-back__list li {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.flip-back__list li::before {
    content: "›";
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    margin-top: -1px;
}

/* "Request A Quote" button on orange flip-card back */
.flip-back__cta {
    margin-top: 18px;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.flip-back__cta:hover {
    background: rgba(255, 255, 255, 0.30) !important;
    transform: translateY(-2px);
}

.flip-back__cta .icon {
    background: rgba(255, 255, 255, 0.25) !important;
}

.flip-card-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 9px 18px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    align-self: flex-start;
}

.flip-card-back-btn:hover {
    background: rgba(255, 255, 255, 0.32);
}

.excursion-grid-card__img {
    width: 100%;
    height: 240px;
    overflow: hidden;
    flex-shrink: 0;
}

.excursion-grid-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.flip-card-front:hover .excursion-grid-card__img img {
    transform: scale(1.05);
}

.excursion-grid-card__body {
    padding: 18px 20px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.excursion-grid-card__title {
    font-size: 22px;
    font-weight: 700;
    color: #114349;
    letter-spacing: 0;
    margin-bottom: 4px;
    line-height: 1.35;
}

.excursion-grid-card__location {
    font-size: 16px;
    color: #888;
    margin-bottom: 14px;
    font-weight: 400;
}

.excursion-grid-card__meta {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    flex: 1;
}

.excursion-grid-card__meta tr td {
    font-size: 16px;
    color: #555;
    padding: 3.5px 0;
    line-height: 1.5;
    border: none;
    background: transparent;
    vertical-align: top;
}

.excursion-grid-card__meta tr td:first-child {
    width: 120px;
    color: #444;
    font-weight: 500;
    flex-shrink: 0;
}

.excursion-grid-card__btn {
    margin: 16px 20px 20px;
    align-self: flex-start;
}

/* ---- Recommendations section ---- */
.dest-rec-section {
    padding: 0px 0 80px;
    background: #FFFEF0;
}

.dest-rec-label {
    font-size: 13px;
    font-weight: 700;
    color: #E8640A;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}



.dest-rec-heading {
    font-size: 28px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 30px;
}

.dest-rec-grid {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.dest-rec-card {
    display: block;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.dest-rec-card:hover {
    box-shadow: 0 8px 24px rgba(17, 67, 73, 0.15);
    transform: translateY(-4px);
}

.dest-rec-card__img {
    width: 100%;
    height: 170px;
    overflow: hidden;
}

.dest-rec-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.dest-rec-card:hover .dest-rec-card__img img {
    transform: scale(1.05);
}

.dest-rec-card__title {
    font-size: 15px;
    font-weight: 600;
    color: #114349;
    padding: 12px 14px;
    margin: 0;
    background: #fff;
}

@media (max-width: 767px) {
    .dest-hero-nameplate {
        height: 40vh;
        min-height: 260px;
    }

    .dest-nameplate__title {
        font-size: 22px;
    }

    .excursion-grid-card__img {
        height: 180px;
    }

    .dest-rec-card__img {
        height: 140px;
    }
}

/* ===== SECTION INDICATOR ===== */
.section-indicator {
    display: none;
    position: fixed;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none;
}

.si-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.35;
    transition: opacity 0.4s ease;
}

.si-item.si-active {
    opacity: 1;
}

.si-num {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    width: 20px;
    line-height: 1;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.si-line {
    height: 1px;
    background: #fff;
    width: 18px;
    transition: width 0.4s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.si-item.si-active .si-line {
    width: 56px;
}

.si-label {
    font-size: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.4s ease;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.si-item.si-active .si-label {
    opacity: 1;
}

/* Light-background sections: switch indicator to dark green */
.section-indicator.si-on-light .si-num,
.section-indicator.si-on-light .si-label {
    color: #114349;
    text-shadow: none;
}

.section-indicator.si-on-light .si-line {
    background: #114349;
    box-shadow: none;
}

/* ================= QUOTE REQUEST MODAL ================= */
.quote-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 30, 28, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.quote-modal-overlay.qm-open {
    opacity: 1;
    pointer-events: all;
}

.quote-modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 48px 44px 40px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

.quote-modal-overlay.qm-open .quote-modal-box {
    transform: translateY(0) scale(1);
}

.quote-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.quote-modal-close:hover {
    color: #114349;
}

.quote-modal-title {
    font-size: 26px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 6px;
}

.quote-modal-subtitle {
    font-size: 14px;
    color: #7a8c8a;
    margin-bottom: 28px;
}

.qm-field {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qm-field label {
    font-size: 13px;
    font-weight: 600;
    color: #114349;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.qm-field input,
.qm-field select,
.qm-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #d8e4e2;
    border-radius: 10px;
    font-size: 15px;
    color: #1a2e2c;
    background: #f8fbfb;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    resize: none;
}

.qm-field input:focus,
.qm-field select:focus,
.qm-field textarea:focus {
    border-color: #114349;
    background: #fff;
}

.qm-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23114349' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.qm-submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 576px) {
    .quote-modal-box {
        padding: 36px 22px 28px;
        border-radius: 14px;
        max-width: calc(100vw - 32px);
    }

    .quote-modal-title {
        font-size: 22px;
    }
}

/* ============================================================
   CUSTOMISE REQUEST MODAL
============================================================ */
.customise-modal-box {
    max-width: 860px;
    padding: 48px 44px 40px;
}

.customise-modal-form .field-input {
    width: 100%;
}

@media (max-width: 576px) {
    .customise-modal-box {
        padding: 36px 18px 28px;
        max-width: calc(100vw - 24px);
    }
}

/* ============================================================
   ABOUT PAGE — SIX PILLARS SECTION
============================================================ */
.pillars-section {
    padding: 80px 0;
    background: #f4f7f6;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }
}

.pillar-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pillar-card:hover {
    box-shadow: 0 8px 32px rgba(17, 67, 73, 0.12);
    transform: translateY(-4px);
}

.pillar-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #e2f0ec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pillar-icon i {
    font-size: 24px;
    color: #114349;
}

.pillar-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 10px;
}

.pillar-card p {
    font-size: 14px;
    color: #6b7c82;
    line-height: 1.65;
    margin: 0;
}

/* ============================================================
   ABOUT PAGE — STATISTICS SECTION
============================================================ */
.about-stats-section {
    padding: 70px 0;
    background: #114349;
}

.stat-card {
    text-align: center;
    padding: 24px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.stat-card--last,
.stat-card:last-child {
    border-right: none;
}

.stat-number {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-number span {
    font-size: 36px;
    color: #fdb913;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .stat-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 28px 10px;
    }

    .stat-card--last {
        border-bottom: none;
    }

    .stat-number {
        font-size: 40px;
    }
}

/* ============================================================
   ABOUT PAGE — LEGACY & GLOBAL REACH TWO-COLUMN LAYOUT
============================================================ */
.about-legacy-heading {
    color: #114349;
    line-height: 1.15;
    margin-bottom: 20px;
    margin-top: 12px;
}

.about-legacy-sub {
    margin: 0;
}



/* ============================================================
   ABOUT PAGE — EXCELLENCE SECTION
============================================================ */
.about-excellence-section {
    padding: 90px 0;
}

.excellence-padding {
    --bs-gutter-x: 3.5rem;
}

.about-excellence-text {
    color: #1e3a3e;
    line-height: 1.85;
    margin-bottom: 18px;
}

.about-excellence-text:last-child {
    margin-bottom: 0;
}

.about-excellence-img-wrap {
    border-radius: 20px;
    overflow: hidden;
    height: 480px;
    margin: 0 auto;
    box-shadow: 0 12px 40px rgba(17, 67, 73, 0.12);
}

.about-excellence-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .about-excellence-img-wrap {
        height: 340px;
    }
}

/* ============================================================
   ABOUT PAGE — WHY CHOOSE US CARDS
============================================================ */
.about-wcu-section {
    padding: 100px 0;
}

.about-wcu-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 28px;
    height: 100%;
    box-shadow: 0 8px 32px rgba(17, 67, 73, 0.12);
}

.about-wcu-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #e2f0ec;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.about-wcu-icon i {
    font-size: 26px;
    color: #114349;
}

.about-wcu-card h5 {
    font-size: 22px;
    font-weight: 700;
    color: #114349;
    margin-bottom: 12px;
}

.about-wcu-card p {
    margin: 0;
}

.about-srv-section {
    padding-top: 100px;
}

.about-srv-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    display: block;
}


/* ============================================================
   16. FEATURED PROJECTS
   ============================================================ */


/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */
:root {
    --nav-height: 80px;
    --bar-height: 44px;
    /* announcement bar */

    /* --- Brand Maroon --- */
    --color-maroon: #7A1F2B;
    --color-maroon-deep: #4A0F15;
    --color-maroon-dark: #2E0008;
    --color-maroon-light: #A8323F;
    --color-maroon-tint: #F6EAEC;
    --color-maroon-tint-2: #FBF5F6;
    --color-maroon-line: #E8CDD0;

    /* --- Neutrals --- */
    --color-black: #0A0A0A;
    --color-ink: #1A1A1A;
    --color-ink-2: #3A3A3A;
    --color-muted: #6B6B6B;
    --color-line: #E6E1E2;
    --color-line-soft: #F0EBEC;
    --color-white: #FFFFFF;
    --color-bg: #F7F4F4;
    --color-paper: #FCFAFA;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px rgba(10, 10, 10, .04);
    --shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(122, 31, 43, .06);
    --shadow-lg: 0 4px 8px rgba(10, 10, 10, .06), 0 20px 48px rgba(122, 31, 43, .10);
    --shadow-dark: 0 8px 20px rgba(46, 0, 8, .30);

    /* --- Typography --- */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* --- Type scale --- */
    --text-hero: 60px;
    --text-h2: 40px;
    --text-h3: clamp(18px, 2vw, 24px);
    --text-body: 16px;
    --text-body-sm: 14.5px;
    --text-sm: 13px;
    --text-xs: 11px;
    --text-2xs: 10px;

    /* --- Line heights --- */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-loose: 1.75;

    /* --- Spacing scale --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10: 72px;
    --sp-11: 96px;
    --sp-12: 120px;

    /* --- Layout --- */
    --container-max: 1800px;
    --container-wide: 1600px;
    --container-pad: clamp(20px, 4vw, 80px);

    /* --- Transitions --- */
    --transition-fast: 0.15s ease;
    --transition-mid: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* --- Border radius --- */
    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 10px;
}

.projects-section {
    background: var(--color-paper);
}

.container--projects {
    max-width: 1400px;
}

.projects-section__subtext {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-ink-2);
    max-width: 560px;
    margin-top: var(--sp-4);
}

/* Scroll-stacking rows */
.projects-list {
    position: relative;
    margin-top: var(--sp-9);
}

.project-row {
    position: sticky;
    top: calc(var(--nav-height) + var(--bar-height) + 16px);
    /* display: grid;
    grid-template-columns: 70% 30%; */
    /* min-height: 600px; */
    border-radius: 20px;
    /* overflow: hidden; */
    margin-bottom: 28px;
    transform-origin: top center;
    /* background: var(--color-maroon-dark); */
    /* border: 1px solid rgba(168, 50, 63, 0.35); */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-row:nth-child(1) {
    z-index: 1;
}

.project-row:nth-child(2) {
    z-index: 2;
}

.project-row:nth-child(3) {
    z-index: 3;
}

.project-row:nth-child(4) {
    z-index: 4;
}

.project-row:nth-child(5) {
    z-index: 5;
}

.project-row:nth-child(6) {
    z-index: 6;
}

.project-row__img {
    position: relative;
    background-size: cover;
    background-position: center;
}

.project-row__img--1 {
    background-color: #2a0a12;
    background-image: url('../images/projects/itc-hotel.jpg');
}

.project-row__img--2 {
    background-color: #0a141a;
    background-image: url('../images/projects/max-healthcare.jpg');
}

.project-row__img--3 {
    background-color: #0a0a14;
    background-image: url('../images/projects/wework-bkc.jpg');
}

.project-row__img--4 {
    background-color: #080d06;
    background-image: url('../images/projects/shiv-nadar.jpg');
}

.project-row__img--5 {
    background-color: #12100a;
    background-image: url('../images/projects/dlf-mall.jpg');
}

.project-row__tag {
    position: absolute;
    top: var(--sp-5);
    left: var(--sp-5);
    background: var(--color-maroon);
    color: var(--color-white);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}

.project-row__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sp-9) var(--sp-10);
    background: var(--color-maroon-dark);
}

.project-row__num {
    display: block;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--color-maroon-light);
    margin-bottom: var(--sp-4);
}

.project-row__title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 600;
    color: #ffffff;
    line-height: var(--leading-snug);
    margin-bottom: var(--sp-3);
    letter-spacing: -0.02em;
}

.project-row__meta {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-maroon-light);
    margin-bottom: var(--sp-5);
}

.project-row__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: rgba(255, 255, 255, 0.60);
    max-width: 560px;
    margin-bottom: var(--sp-7);
}

.project-row__cta {
    align-self: flex-start;
    border-color: rgba(255, 255, 255, 0.30);
    color: #ffffff;
}

.project-row__cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.70);
    color: #ffffff;
}

/* ============================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   All changes per "satguru dmc responsive.docx"
============================================================ */
@media (max-width: 767px) {

    /* ── 1. Global: keep desktop font sizes on mobile ── */
    h1 {
        font-size: inherit;
    }

    h2 {
        font-size: inherit;
    }

    h3 {
        font-size: inherit;
    }

    h4 {
        font-size: inherit;
    }

    .banner-title {
        font-size: clamp(26px, 7vw, 42px);
    }



    /* ── 2. Home — Top Destination section ── */


    /* Card title & desc bigger on mobile */
    .expand-card-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .expand-card-desc {
        display: block !important;
        opacity: 1 !important;
        max-height: none !important;
        line-height: 25px;
    }

    /* Each card taller so text is readable */
    .expand-card {
        height: 450px;
    }

    /* ── 3. Home — Newsletter / Subscribe ── */
    .nl-inline-form {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .nl-inline-form input {
        width: 100%;
        border-radius: 10px !important;
    }

    .nl-inline-form button {
        width: 100%;
        justify-content: space-between;
        border-radius: 10px !important;
    }

    /* ── 4. Hamburger close — white bar in mobile menu header ── */
    .mobile-menu .offcanvas-header {
        background: #ffffff;
        border-bottom: 1px solid #e8eceb;
        padding: 14px 0;
    }

    .mobile-menu .mobile-logo img {
        height: 52px;
        width: auto;
    }

    .mobile-menu .btn-close {
        background: #E8640A;
        color: #fff;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        margin-left: auto;
        border: none;
    }

    .mobile-menu .btn-close i {
        font-size: 18px;
        color: #fff;
    }

    /* ── 5. Travel Themes — center align, wrap tabs (no horizontal scroll) ── */
    /* .wf-tabs {
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow-x: hidden !important;
        gap: 8px !important;
    } */

    .wf-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── 6. Featured Experiences — filter tabs scrollable row ── */
    .nav.nav-tabs.experience-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .nav.nav-tabs.experience-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav.nav-tabs.experience-tabs .nav-item {
        flex-shrink: 0;
    }

    /* ── 7. Media page — blog tabs scrollable ── */
    .nav.blog-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }

    .nav.blog-tabs::-webkit-scrollbar {
        display: none;
    }

    .blog-tab-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── 8. Blogger Reviews — center align text ── */
    .blogger-section .section-title,
    .blogger-section .section-subtitle {
        text-align: center;
    }

    .blogger-section p.blogger-card__role {
        text-align: start;
    }

    .blogger-card {
        flex-direction: column;
    }

    .blogger-card__img-wrap {
        width: 100%;
        height: 440px;
    }

    /* ── 9. Contact & Quote forms — compact ── */
    .contact-form-wrap,
    .quote-form-wrap {
        padding: 20px 16px !important;
    }

    .contact-form-wrap .form-group,
    .quote-form-wrap .form-group,
    .contact-form-wrap .mb-3,
    .quote-form-wrap .mb-3 {
        margin-bottom: 10px !important;
    }

    .contact-form-wrap .form-control,
    .quote-form-wrap .form-control {
        padding: 8px 12px !important;
        font-size: 13.5px !important;
    }

    /* ── 10. MICE — stack cards (image + content vertical) ── */
    .mice-stack-card {
        flex-direction: column !important;
    }

    .mice-stack-img {
        width: 100% !important;
        height: 200px !important;
    }

    .mice-stack-content {
        padding: 20px 16px !important;
    }

    /* ── 11. Popular Itineraries — one card at a time ── */
    .packages-swiper .swiper-slide {
        width: 100% !important;
    }

    /* ── 12. Newsletter section layout ── */
    .newsletter-section .col-lg-5,
    .newsletter-section .col-lg-7 {
        text-align: center;
    }

    .newsletter-section h2,
    .nl-content-title {
        text-align: center;
    }

    .newsletter-section p,
    .nl-content-sub {
        text-align: center;
    }

    .newsletter-section br {
        display: none;
    }
}