/* =========================================================
   Sundarban Delta Safari - Togo Theme Custom Enhancements
   ========================================================= */

:root {
    --togo-primary: #5271FF;
    --togo-dark: #111111;
    --togo-green: #0a4c3a;
    --togo-gold: #e69500;
    --togo-ff-body: 'DM Sans', sans-serif !important;
    --togo-ff-heading: 'DM Sans', sans-serif !important;
    --togo-ff-p: 'DM Sans', sans-serif !important;
    --togo-ff-outfit: 'DM Sans', sans-serif !important;
    --togo-ff-marcellus: 'DM Sans', sans-serif !important;
    --togo-ff-jost: 'DM Sans', sans-serif !important;
    --togo-ff-playfair: 'DM Sans', sans-serif !important;
    --togo-ff-otomanopee: 'DM Sans', sans-serif !important;
    --bs-body-font-family: 'DM Sans', sans-serif !important;
    --bs-font-sans-serif: 'DM Sans', sans-serif !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* =========================================================
   Global Typography Override - DM Sans for Whole Website
   ========================================================= */
html,
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, ul, ol,
label, input, button, select, textarea,
table, th, td, tr, thead, tbody, tfoot,
div, section, article, nav, header, footer, aside, main,
strong, b, em, small, blockquote, form,
.togo-title, .togo-subtitle, .togo-section-title, .togo-section-subtitle,
.ff-jost, .ff-outfit, .ff-playfair, .ff-marcellus, .ff-otomanopee,
[class*="togo-"] {
    font-family: 'DM Sans', sans-serif !important;
}

/* Universal selector fallback while strictly preserving icon fonts */
*:not([class*="fa"]):not([class*="fa-"]):not([class*="swiper"]):not([class*="icon"]):not([class*="glyph"]):not([data-icon]):not(i[class]):not(span[class*="fa"]):not(span[class*="icon"]) {
    font-family: 'DM Sans', sans-serif !important;
}

/* Preserve Font Awesome icons glyph rendering */
.fa, .fas, .fa-solid,
.fa::before, .fas::before, .fa-solid::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
    font-weight: 900 !important;
}

.far, .fa-regular,
.far::before, .fa-regular::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
    font-weight: 400 !important;
}

.fal, .fa-light,
.fal::before, .fa-light::before {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
    font-weight: 300 !important;
}

.fad, .fa-duotone,
.fad::before, .fa-duotone::before,
.fad::after, .fa-duotone::after {
    font-family: "Font Awesome 6 Duotone", "Font Awesome 5 Duotone" !important;
    font-weight: 900 !important;
}

/* Fallback for general FA selectors without overriding brands */
[class^="fa-"]:not(.fa-brands):not(.fab):not([class*="whatsapp"]):not([class*="facebook"]):not([class*="instagram"]):not([class*="youtube"]):not([class*="twitter"]):not([class*="linkedin"]):not([class*="pinterest"]):not([class*="telegram"]):not([class*="tiktok"]),
[class*=" fa-"]:not(.fa-brands):not(.fab):not([class*="whatsapp"]):not([class*="facebook"]):not([class*="instagram"]):not([class*="youtube"]):not([class*="twitter"]):not([class*="linkedin"]):not([class*="pinterest"]):not([class*="telegram"]):not([class*="tiktok"]),
i[class*="fa"]:not(.fa-brands):not(.fab):not([class*="whatsapp"]):not([class*="facebook"]):not([class*="instagram"]):not([class*="youtube"]):not([class*="twitter"]):not([class*="linkedin"]):not([class*="pinterest"]):not([class*="telegram"]):not([class*="tiktok"]),
span[class*="fa"]:not(.fa-brands):not(.fab):not([class*="whatsapp"]):not([class*="facebook"]):not([class*="instagram"]):not([class*="youtube"]):not([class*="twitter"]):not([class*="linkedin"]):not([class*="pinterest"]):not([class*="telegram"]):not([class*="tiktok"]) {
    font-family: var(--fa-style-family, "Font Awesome 6 Pro") !important;
}

/* =========================================================
   Font Awesome Brand Icons Fix (WhatsApp, Facebook, Instagram, YouTube)
   ========================================================= */
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/fa-brands-400.woff2') format('woff2'),
         url('../fonts/fa-brands-400.ttf') format('truetype');
}

.fa-brands, .fab,
[class*="fa-brands"],
i.fa-brands, i.fab,
span.fa-brands, span.fab,
.fa-brands::before, .fab::before,
[class*="fa-brands"]::before,
.fa-whatsapp, .fa-whatsapp::before,
.fa-facebook, .fa-facebook::before,
.fa-facebook-f, .fa-facebook-f::before,
.fa-instagram, .fa-instagram::before,
.fa-youtube, .fa-youtube::before,
.fa-twitter, .fa-twitter::before,
.fa-x-twitter, .fa-x-twitter::before,
.fa-linkedin, .fa-linkedin::before,
.fa-linkedin-in, .fa-linkedin-in::before,
.fa-pinterest, .fa-pinterest::before,
.fa-telegram, .fa-telegram::before,
.fa-tiktok, .fa-tiktok::before {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Explicit brand icon glyph contents */
.fa-whatsapp::before, .fa-whatsapp:before { content: "\f232" !important; }
.fa-whatsapp-square::before, .fa-whatsapp-square:before { content: "\f40c" !important; }
.fa-facebook-f::before, .fa-facebook-f:before { content: "\f39e" !important; }
.fa-facebook::before, .fa-facebook:before { content: "\f09a" !important; }
.fa-instagram::before, .fa-instagram:before { content: "\f16d" !important; }
.fa-youtube::before, .fa-youtube:before { content: "\f167" !important; }

/* FA 6.1+ Icon Aliases for FA 6.0 compatibility */
.fa-shield-halved::before,
.fa-shield-halved:before {
    content: "\f3ed" !important;
}

.fa-fish-fins::before,
.fa-fish-fins:before {
    content: "\f578" !important;
}

.fa-hands-holding-child::before,
.fa-hands-holding-child:before {
    content: "\f4c2" !important;
}

/* Preserve Swiper icon navigation glyphs */
.swiper-button-next::after,
.swiper-button-prev::after,
[class^="swiper-button-"]::after,
[class*=" swiper-button-"]::after {
    font-family: swiper-icons !important;
}

/* Delta Safari Logo */
.brand-logo-img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

.brand-badge {
    background: #5271FF;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    vertical-align: middle;
}

/* Header Base & Visibility - Sticky Header */
header,
.togo-header-area {
    display: block !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background: #ffffff !important;
    transition: all 0.3s ease;
}

/* Header Top Bar Adjustments */
.togo-header-2-top {
    display: block !important;
    position: relative !important;
    z-index: 1000 !important;
    background-color: #0c1813 !important;
    padding: 10px 0;
    font-size: 13px;
    color: #a0aec0;
}

.togo-header-2-top a {
    color: #e2e8f0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.togo-header-2-top a:hover {
    color: #5271FF;
}

.togo-header-2-top-info a {
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Header Wrapper */
.togo-header-wrapper {
    display: block !important;
    position: relative !important;
    z-index: 1050 !important;
    background: #ffffff !important;
    padding: 5px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}

.togo-header-area.togo-header-sticky-active .togo-header-wrapper {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.09) !important;
    padding: 4px 24px !important;
}

@media (max-width: 991px) {
    .togo-header-wrapper {
        padding: 5px 16px !important;
    }
    .togo-header-area.togo-header-sticky-active .togo-header-wrapper {
        padding: 4px 16px !important;
    }
}

/* Hide Scroll to Top Button on right bottom */
.togo-back-wrapper,
.togo-back-btn,
#back-btn-top,
.togo-back-wrapper.togo-back-btn-show,
.scroll-top,
.scroll-top-btn,
.scroll-to-target,
.back-to-top,
.togo-scroll-top,
.scroll-to-top,
.progress-wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Header Navigation Menu - Slightly Larger & Crisp */
.togo-header-menu {
    white-space: nowrap !important;
}

.togo-header-menu > nav > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
}

.togo-header-menu > nav > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    white-space: nowrap !important;
}

.togo-header-menu ul li a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a202c;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.togo-header-menu ul li a i {
    font-size: 14px !important;
    color: #64748b;
    transition: all 0.2s ease;
}

.togo-header-menu ul li.active > a,
.togo-header-menu ul li a:hover {
    color: #5271FF !important;
    background: rgba(82, 113, 255, 0.07);
}

.togo-header-menu ul li.active > a i,
.togo-header-menu ul li a:hover i {
    color: #5271FF !important;
    transform: scale(1.1);
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .togo-header-menu > nav > ul {
        gap: 3px !important;
    }
    .togo-header-menu ul li a {
        font-size: 13.5px !important;
        padding: 7px 9px !important;
        gap: 5px !important;
    }
    .togo-header-menu ul li a i {
        font-size: 12.5px !important;
    }
}

/* Package Details Header Text - Small & Crisp */
.togo-tour-details-top-title {
    font-size: clamp(20px, 2.2vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.togo-tour-details-top {
    font-size: 13px;
}

/* Package Gallery Swiper Styles */
.togo-package-gallery-swiper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #0c1813;
}

.togo-package-gallery-swiper .package-gallery-slide {
    height: 440px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 767px) {
    .togo-package-gallery-swiper .package-gallery-slide {
        height: 270px !important;
    }
}

.togo-package-gallery-swiper .package-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.togo-package-gallery-swiper .package-gallery-slide:hover img {
    transform: scale(1.03);
}

.togo-gallery-next,
.togo-gallery-prev {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(17, 21, 28, 0.65) !important;
    color: #ffffff !important;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.togo-gallery-next::after,
.togo-gallery-prev::after {
    font-size: 16px !important;
    font-weight: 900 !important;
}

.togo-gallery-next:hover,
.togo-gallery-prev:hover {
    background: #5271FF !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

.togo-gallery-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ffffff !important;
    opacity: 0.6;
    margin: 0 4px;
    transition: all 0.3s ease;
}

.togo-gallery-pagination .swiper-pagination-bullet-active {
    background: #5271FF !important;
    opacity: 1;
    width: 26px;
    border-radius: 6px;
}

/* User dropdown */
.togo-header-user-submenu {
    min-width: 220px;
}

/* Flash alerts in Togo theme */
.togo-flash-alert {
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.togo-flash-alert.success {
    background: #e8f8f0;
    color: #0b7a42;
    border-left: 4px solid #0b7a42;
}

.togo-flash-alert.danger {
    background: #fdeeee;
    color: #d32f2f;
    border-left: 4px solid #d32f2f;
}

/* Floating Action Stack (Sticky Right Bottom Corner) */
.togo-floating-stack {
    position: fixed !important;
    bottom: 28px !important;
    right: 25px !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    pointer-events: auto !important;
}

.togo-float-whatsapp,
.togo-floating-whatsapp {
    width: 52px;
    height: 52px;
    background: #25D366;
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.togo-float-whatsapp:hover,
.togo-floating-whatsapp:hover {
    color: #ffffff !important;
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.6);
}

.togo-float-custom,
.togo-floating-custom-pkg {
    background: linear-gradient(135deg, #5271FF 0%, #3858F9 100%) !important;
    color: #ffffff !important;
    padding: 13px 22px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 25px rgba(82, 113, 255, 0.48) !important;
    text-decoration: none !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.togo-float-custom:hover,
.togo-floating-custom-pkg:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3858F9 0%, #2944d1 100%) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 12px 30px rgba(82, 113, 255, 0.55) !important;
}

.togo-float-custom .togo-badge-plan,
.togo-floating-custom-pkg .badge-pill-hot {
    background: #ffffff !important;
    color: #5271FF !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Tour Card Enhancements */
.togo-tour-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.togo-tour-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.togo-tour-2-card-thumb {
    height: 230px;
    overflow: hidden;
    position: relative;
}

.togo-tour-2-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.togo-tour-card:hover .togo-tour-2-card-thumb img {
    transform: scale(1.06);
}

.togo-tour-badge-top {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    background: rgba(17, 17, 17, 0.85);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.togo-tour-badge-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    background: #5271FF;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.togo-tour-2-card-content {
    padding: 22px;
}

.togo-tour-2-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.togo-tour-2-card-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.togo-tour-2-card-title a:hover {
    color: #5271FF;
}

.togo-tour-card-meta-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.togo-tour-card-meta {
    font-size: 13px;
    color: #666666;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
}

.togo-tour-card-meta i, .togo-tour-card-meta svg {
    color: #5271FF;
}

.togo-tour-card-price-regular {
    font-size: 20px;
    font-weight: 800;
    color: #5271FF;
}

.togo-tour-card-price-original {
    font-size: 14px;
    color: #999999;
    text-decoration: line-through;
    margin-left: 6px;
}

/* Quick Booking Form Card on Hero */
.togo-quick-search-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.togo-form-group {
    margin-bottom: 16px;
}

.togo-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
}

.togo-form-control {
    width: 100%;
    height: 48px;
    padding: 10px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #111111;
    background-color: #f8fafc;
    transition: border-color 0.3s ease;
}

.togo-form-control:focus {
    outline: none;
    border-color: #5271FF;
    background-color: #ffffff;
}

/* Itinerary accordion */
.itinerary-step-box {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.itinerary-step-box:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.itinerary-step-badge {
    background: #5271FF;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
}

/* Sticky Booking Sidebar */
@media (min-width: 992px) {
    .package-sidebar-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 85px !important;
        align-self: flex-start !important;
        z-index: 30 !important;
    }
}

.sticky-tour-booking-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07) !important;
    transition: box-shadow 0.25s ease !important;
}

.sticky-tour-booking-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1) !important;
}

.ds-booking-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: none !important;
}

.sticky-tour-booking-card hr,
.ds-booking-header + hr,
.ds-booking-header hr {
    display: none !important;
}

.ds-booking-price-val {
    font-size: 23px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px !important;
}

.ds-booking-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 4px !important;
}

.ds-booking-label-sub {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ds-booking-input {
    height: 36px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.ds-booking-input:focus {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    outline: none !important;
}

/* Stepper input group for adults & children */
.ds-qty-input-group {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    height: 36px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.ds-qty-input-group:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.ds-qty-btn {
    width: 32px !important;
    height: 100% !important;
    border: none !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ds-qty-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.ds-qty-btn:active {
    background: #cbd5e1 !important;
    transform: scale(0.92) !important;
}

.ds-qty-input-group input.ds-booking-input {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 4px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
}

.ds-qty-input-group input.ds-booking-input::-webkit-outer-spin-button,
.ds-qty-input-group input.ds-booking-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.ds-booking-summary {
    background: #f8fafc !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 9px !important;
    padding: 7px 11px !important;
}

/* High-Converting Modern Book Button */
.ds-booking-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.ds-booking-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.75s ease !important;
}

.ds-booking-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

.ds-booking-btn:hover::before {
    left: 150% !important;
}

.ds-booking-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.ds-booking-btn .ds-btn-arrow {
    transition: transform 0.25s ease !important;
}

.ds-booking-btn:hover .ds-btn-arrow {
    transform: translateX(4px) !important;
}

/* Compact WhatsApp Secondary Action */
.ds-whatsapp-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 33px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ds-whatsapp-pill:hover {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #86efac !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15) !important;
}

/* Compact Trust Strip */
.ds-booking-trust {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 10.5px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    padding-top: 7px !important;
    border-top: 1px dashed #e2e8f0 !important;
    line-height: 1.2 !important;
}

/* Ensure smooth wrapper bypass elements remain purely static with normal overflow */
#page-wrapper,
#page-wrapper-wrap,
#page-no-smooth,
#page-no-smooth-wrap {
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
}

/* Wildlife & Destination cards */
.wildlife-grid-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 260px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.wildlife-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wildlife-grid-item:hover img {
    transform: scale(1.08);
}

.wildlife-grid-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 24, 18, 0.92) 100%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
}

.wildlife-grid-overlay h5 {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.wildlife-grid-overlay p {
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 0;
    line-height: 1.4;
}

/* =========================================================
   Banner & Hero Overlay Optimization (Clean, Bright, Legible)
   ========================================================= */
.togo-hero-2-pos {
    z-index: 0 !important;
}

.togo-hero-2-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.togo-hero-2-bg::before {
    background: linear-gradient(180deg, rgba(10, 20, 15, 0.22) 0%, rgba(10, 20, 15, 0.42) 100%) !important;
    z-index: 1 !important;
}

.togo-hero-2-heading {
    position: relative;
    z-index: 5 !important;
}
/* =========================================================
   Home Page Hero Banner Layout & Slide Text Animations
   ========================================================= */
.togo-hero-2-ptb {
    min-height: 58vh !important;
    display: flex !important;
    align-items: center !important;
    padding: 36px 0 95px !important;
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
}

.togo-hero-2-item {
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
}

.togo-hero-2-heading {
    position: relative !important;
    z-index: 55 !important;
    overflow: visible !important;
}

.togo-hero-2-search-wrap {
    position: relative !important;
    z-index: 60 !important;
    overflow: visible !important;
}

@media (max-width: 991px) {
    .togo-hero-2-ptb {
        min-height: 55vh !important;
        padding: 30px 0 85px !important;
    }
    .togo-hero-2-item {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }
}

@media (max-width: 575px) {
    .togo-hero-2-ptb {
        min-height: 52vh !important;
        padding: 24px 0 75px !important;
    }
    .togo-hero-2-item {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }
}

/* =========================================================
   Compact & Balanced Section Spacing Across Home Page
   ========================================================= */
.togo-chose-2-ptb {
    padding-top: 40px !important;
    padding-bottom: 15px !important;
}

.togo-tour-ptb {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
}

.togo-offer-ptb {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
}

.togo-destination-ptb {
    padding-top: 50px !important;
    padding-bottom: 35px !important;
}

.togo-guide-ptb {
    padding-top: 50px !important;
    padding-bottom: 35px !important;
}

.togo-testimonial-2-ptb {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
}

.togo-faq-ptb {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Compact section header gaps to prevent void between title & content */
.togo-section-title-wrapper.mb-50,
.togo-section-title-wrap.mb-50,
.text-center.mb-50 {
    margin-bottom: 30px !important;
}

.row.align-items-end.mb-40 {
    margin-bottom: 28px !important;
}

/* Slides Content Container */
.togo-hero-slides-content {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
}

/* Animated Slide Text */
.hero-slide-text {
    display: none;
    opacity: 0;
}

.hero-slide-text.active {
    display: block !important;
    opacity: 1;
}

/* Entrance Animations when slide changes */
.hero-slide-text.active .hero-anim-badge {
    animation: heroBadgeSlideDown 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
}

.hero-slide-text.active .hero-anim-title {
    animation: heroTitleSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.22s;
}

.hero-slide-text.active .hero-anim-desc {
    animation: heroDescSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.35s;
}

@keyframes heroBadgeSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-24px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroTitleSlideUp {
    0% {
        opacity: 0;
        transform: translateY(32px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroDescSlideUp {
    0% {
        opacity: 0;
        transform: translateY(22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Narrow Breadcrumb Banners (All pages except Home) */
.togo-breadcrumb-style-2-ptb {
    padding: 48px 0 36px !important;
    min-height: auto !important;
}

@media (max-width: 767px) {
    .togo-breadcrumb-style-2-ptb {
        padding: 35px 0 25px !important;
    }
}

.togo-breadcrumb-bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

.togo-breadcrumb-bg::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(10, 20, 15, 0.32) 0%, rgba(10, 20, 15, 0.52) 100%) !important;
    z-index: 1;
}

.togo-breadcrumb-heading {
    position: relative;
    z-index: 5 !important;
}

.togo-breadcrumb-title {
    font-size: clamp(22px, 3.2vw, 34px) !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.togo-breadcrumb-text p {
    font-size: 14px !important;
    max-width: 650px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   Header Login Button & User Dropdown
   ========================================================= */
.togo-header-login-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #fff6f3 100%);
    color: #1e293b !important;
    border: 1.5px solid rgba(82, 113, 255, 0.35);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 3px 12px rgba(82, 113, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.togo-header-login-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -80%;
    width: 50%;
    height: 200%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    transition: all 0.75s ease;
    pointer-events: none;
}

.togo-header-login-btn:hover::before {
    left: 130%;
}

.togo-header-login-btn .login-btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(82, 113, 255, 0.12) 0%, rgba(82, 113, 255, 0.22) 100%);
    color: #5271FF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.togo-header-login-btn:hover {
    background: linear-gradient(135deg, #5271FF 0%, #3858F9 100%);
    color: #ffffff !important;
    border-color: #5271FF;
    box-shadow: 0 6px 20px rgba(82, 113, 255, 0.42), 0 2px 6px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px) scale(1.03);
}

.togo-header-login-btn:hover .login-btn-icon {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: rotate(15deg) scale(1.15);
}

.togo-header-login-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Animated Auth Submit Button (Login & Register) */
.btn-auth-submit {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #5271FF 0%, #6C88FF 50%, #3858F9 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #ffffff !important;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 20px rgba(82, 113, 255, 0.35);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.btn-auth-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-auth-submit:hover::before {
    left: 100%;
}

.btn-auth-submit:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(82, 113, 255, 0.48);
}

.btn-auth-submit:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(82, 113, 255, 0.3);
}

.btn-auth-submit i {
    transition: transform 0.3s ease;
}

.btn-auth-submit:hover i {
    transform: translateX(4px);
}

/* =========================================================
   Traveler Login & Authentication Page Enhancements
   ========================================================= */
.login-page-section {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding: 70px 0 90px;
    position: relative;
}

.login-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card-header {
    text-align: center;
    padding: 35px 35px 20px;
}

.login-card-body {
    padding: 0 35px 35px;
}

/* Google Sign-in Button */
.btn-google-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 48px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    color: #1e293b;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-google-login:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: #0f172a;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 22px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}

.auth-divider span {
    padding: 0 14px;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form inputs & icons */
.auth-input-group {
    position: relative;
    margin-bottom: 18px;
}

.auth-input-group .auth-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.auth-input-group input {
    width: 100%;
    height: 50px;
    padding: 0 45px 0 44px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14.5px;
    color: #0f172a;
    transition: all 0.2s ease;
}

.auth-input-group input:focus {
    outline: none;
    border-color: #5271FF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(82, 113, 255, 0.12);
}

.auth-input-group input:focus ~ .auth-input-icon {
    color: #5271FF;
}

.password-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

.password-toggle-btn:hover {
    color: #475569;
}

/* Create Account Secondary Button */
.btn-create-account-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    background: rgba(82, 113, 255, 0.08);
    color: #5271FF;
    border: 1.5px solid rgba(82, 113, 255, 0.2);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.btn-create-account-card:hover {
    background: #5271FF;
    color: #ffffff !important;
    border-color: #5271FF;
    box-shadow: 0 4px 14px rgba(82, 113, 255, 0.3);
}

/* =========================================================
   Delta Safari - Centered Favicon Preloader
   ========================================================= */
.togo-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.togo-loader.loader-hidden,
.togo-loader[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -100 !important;
}

.ds-loader-container {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-loader-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(82, 113, 255, 0.15);
    border-top: 3px solid #5271FF;
    border-right: 3px solid #5271FF;
    box-sizing: border-box;
    animation: ds-spin 0.9s linear infinite;
}

.ds-loader-spinner-outer {
    position: absolute;
    top: -8px;
    left: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border-radius: 50%;
    border: 2px dashed rgba(10, 76, 58, 0.25);
    box-sizing: border-box;
    animation: ds-spin-reverse 6s linear infinite;
}

.ds-loader-icon-wrap {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 78px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    animation: ds-pulse 2s ease-in-out infinite;
}

.ds-loader-icon-wrap img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

@keyframes ds-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ds-spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes ds-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* =========================================================
   Sundarban Delta Safari - Modern UI & App-Like Enhancements
   ========================================================= */

/* Global Smoothness & Typography Rendering */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =========================================================
   1. Mobile App Bottom Navigation Dock (App-Like Feel)
   ========================================================= */

/* Desktop view: Hide bottom nav dock completely */
@media (min-width: 992px) {
    .mobile-app-bottom-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Mobile & Tablet view: Sticky App Bottom Bar */
@media (max-width: 991px) {
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hide desktop floating stack so it never clashes with bottom bar */
    .togo-floating-stack {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-app-bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 62px !important;
        z-index: 99999 !important;
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 3px rgba(0, 0, 0, 0.04) !important;
        padding-top: 6px !important;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
        transition: transform 0.3s ease, background 0.3s ease !important;
        pointer-events: auto !important;
    }

    .mobile-bottom-nav-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        width: 100% !important;
        padding: 0 10px !important;
        position: relative !important;
    }

    .bottom-nav-item {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #64748b !important;
        background: none !important;
        border: none !important;
        padding: 4px 2px !important;
        position: relative !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color 0.2s ease, transform 0.15s ease !important;
    }

    .bottom-nav-item:active {
        transform: scale(0.92) !important;
    }

    .bottom-nav-item.active,
    .bottom-nav-item:hover {
        color: #5271FF !important;
    }

    .bottom-nav-icon {
        font-size: 19px !important;
        line-height: 1 !important;
        margin-bottom: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        position: relative !important;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .bottom-nav-item.active .bottom-nav-icon {
        transform: translateY(-2px) !important;
    }

    .bottom-nav-label {
        font-size: 10.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        transition: color 0.2s ease !important;
    }

    .bottom-nav-active-pill {
        position: absolute !important;
        top: -6px !important;
        width: 20px !important;
        height: 3px !important;
        background: linear-gradient(90deg, #5271FF 0%, #6C88FF 100%) !important;
        border-radius: 4px !important;
        box-shadow: 0 1px 6px rgba(82, 113, 255, 0.5) !important;
    }

    /* Elevated Center Floating Action Button (Plan Tour) */
    .bottom-nav-action-center {
        position: relative !important;
        margin-top: -24px !important;
        overflow: visible !important;
        z-index: 10 !important;
    }

    .bottom-nav-center-circle {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #5271FF 0%, #6C88FF 100%) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        box-shadow: 0 8px 22px rgba(82, 113, 255, 0.45) !important;
        border: 3.5px solid #ffffff !important;
        position: relative !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .bottom-nav-action-center:active .bottom-nav-center-circle {
        transform: scale(0.92) translateY(2px) !important;
        box-shadow: 0 4px 12px rgba(82, 113, 255, 0.4) !important;
    }

    .bottom-nav-pulse-ring {
        position: absolute !important;
        inset: -5px !important;
        border-radius: 50% !important;
        border: 2px solid rgba(82, 113, 255, 0.55) !important;
        animation: dsPulseRing 2.2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
        pointer-events: none !important;
    }

    .bottom-nav-center-label {
        color: #5271FF !important;
        font-weight: 700 !important;
        margin-top: 3px !important;
    }

    /* WhatsApp Tab */
    .text-whatsapp {
        color: #25D366 !important;
    }

    .bottom-nav-live-dot {
        position: absolute !important;
        top: -1px !important;
        right: -2px !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #22c55e !important;
        border: 1.5px solid #ffffff !important;
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.8) !important;
        animation: dsPulseLive 1.8s ease-in-out infinite !important;
    }

    /* User Avatar circle in Bottom Bar */
    .bottom-nav-user-avatar {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        background: #5271FF !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        box-shadow: 0 2px 6px rgba(82, 113, 255, 0.35) !important;
    }
}

/* =========================================================
   2. Mobile Offcanvas Menu (Native Mobile App Drawer)
   ========================================================= */
.offcanvas-wrapper {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 767px) {
    .offcanvas-wrapper {
        width: 88vw !important;
        max-width: 370px !important;
        border-radius: 24px 0 0 24px !important;
        padding: 24px 20px !important;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.18) !important;
    }
}

.offcanvas-close-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.offcanvas-close-btn:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

/* Quick 3-action buttons in mobile drawer */
.mobile-app-quick-actions .mobile-quick-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 6px !important;
    border-radius: 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    width: 100% !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.mobile-app-quick-actions .call-btn {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.mobile-app-quick-actions .wa-btn {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.mobile-app-quick-actions .plan-btn {
    background: #fff7ed !important;
    color: #ea580c !important;
    border: 1px solid #fed7aa !important;
}

.mobile-app-quick-actions .mobile-quick-btn:active {
    transform: scale(0.95) !important;
}

/* App list navigation items inside mobile menu */
.togo-mobilemenu-content nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.togo-mobilemenu-content nav ul li {
    margin: 0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
}

.togo-mobilemenu-content nav ul li a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 14px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.togo-mobilemenu-content nav ul li a i {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(82, 113, 255, 0.08) !important;
    color: #5271FF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease !important;
}

.togo-mobilemenu-content nav ul li.active,
.togo-mobilemenu-content nav ul li:hover {
    background: rgba(82, 113, 255, 0.06) !important;
    border-color: rgba(82, 113, 255, 0.25) !important;
}

.togo-mobilemenu-content nav ul li.active a,
.togo-mobilemenu-content nav ul li:hover a {
    color: #5271FF !important;
}

.togo-mobilemenu-content nav ul li.active a i,
.togo-mobilemenu-content nav ul li:hover a i {
    background: #5271FF !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

/* =========================================================
   3. Modern Sticky Header Blur & Active Micro-Indicators
   ========================================================= */
.togo-header-area.togo-header-sticky-active .togo-header-wrapper {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
}

@media (max-width: 767px) {
    .brand-logo-img {
        height: 46px !important;
        max-height: 46px !important;
    }
}

.togo-offcanvas-hamburger-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1e293b !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.togo-offcanvas-hamburger-btn:hover,
.togo-offcanvas-hamburger-btn:active {
    background: rgba(82, 113, 255, 0.1) !important;
    color: #5271FF !important;
    border-color: #5271FF !important;
}

/* =========================================================
   4. Elevated Tour Package Cards (Travel App Cards)
   ========================================================= */
.togo-tour-card.style-9 {
    border-radius: 20px !important;
    border: 1px solid #eef2f6 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    position: relative !important;
}

.togo-tour-card.style-9:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(82, 113, 255, 0.22) !important;
}

.togo-tour-card.style-9 .togo-tour-2-card-thumb {
    height: 245px !important;
    overflow: hidden !important;
    position: relative !important;
}

.togo-tour-card.style-9 .togo-tour-2-card-thumb img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.togo-tour-card.style-9:hover .togo-tour-2-card-thumb img {
    transform: scale(1.08) !important;
}

/* Duration Glass Pill on Photo */
.togo-tour-card.style-9 .togo-tour-2-card-thumb span[style*="background: rgba(17, 21, 28"] {
    background: rgba(12, 24, 19, 0.72) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* Popular Badge Pill */
.togo-tour-card.style-9 .togo-tour-card-sell span {
    background: linear-gradient(135deg, #5271FF 0%, #6C88FF 100%) !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(82, 113, 255, 0.4) !important;
    letter-spacing: 0.5px !important;
}

/* Tour Card Content Layout */
.togo-tour-card.style-9 .togo-tour-2-card-content {
    padding: 22px !important;
}

.togo-tour-card.style-9 .togo-tour-2-card-title a {
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    transition: color 0.2s ease !important;
}

.togo-tour-card.style-9 .togo-tour-2-card-title a:hover {
    color: #5271FF !important;
}

.togo-tour-card.style-9 .togo-tour-card-price-regular {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #5271FF !important;
    letter-spacing: -0.5px !important;
}

/* Book Now CTA Button inside Cards */
.togo-tour-card.style-9 .togo-btn-primary {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 12px rgba(82, 113, 255, 0.25) !important;
}

.togo-tour-card.style-9 .togo-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(82, 113, 255, 0.4) !important;
}

.togo-tour-card.style-9 .togo-btn-primary:active {
    transform: translateY(0) scale(0.97) !important;
}

/* =========================================================
   5. Modern Travel Search Widget (Hero Search Box)
   ========================================================= */
.togo-hero-search-box {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    padding: 14px 20px !important;
    transition: box-shadow 0.3s ease !important;
    position: relative !important;
    z-index: 70 !important;
    overflow: visible !important;
}

@media (max-width: 767px) {
    .togo-hero-search-box {
        padding: 12px 14px !important;
        border-radius: 14px !important;
    }
}

.togo-hero-search-box input,
.togo-hero-search-box select {
    height: 44px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 0 12px !important;
    transition: all 0.25s ease !important;
}

.togo-hero-search-box input:focus,
.togo-hero-search-box select:focus {
    background-color: #ffffff !important;
    border-color: #5271FF !important;
    box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.12) !important;
    outline: none !important;
}

/* Home Banner Nice Select Dropdown Enhancements */
.togo-hero-search-box .nice-select,
.togo-hero-search-box .nice-select.form-select {
    height: 44px !important;
    line-height: 42px !important;
    background-color: #f8fafc !important;
    background-image: none !important; /* Removes duplicate Bootstrap form-select SVG arrow */
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 0 36px 0 12px !important;
    position: relative !important;
    width: 100% !important;
    transition: all 0.25s ease !important;
}

.togo-hero-search-box .nice-select:hover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

.togo-hero-search-box .nice-select:focus,
.togo-hero-search-box .nice-select.open {
    background-color: #ffffff !important;
    border-color: #5271FF !important;
    box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.15) !important;
    z-index: 99999 !important;
}

.togo-hero-search-box .nice-select .current {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 42px !important;
}

/* Single crisp, modern chevron arrow */
.togo-hero-search-box .nice-select::after {
    content: "\f107" !important;
    font-family: var(--togo-ff-fontawesome, "Font Awesome 6 Pro"), "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    color: #64748b !important;
    border: none !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    transform-origin: center center !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
    pointer-events: none !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.togo-hero-search-box .nice-select:hover::after,
.togo-hero-search-box .nice-select:focus::after {
    color: var(--togo-primary, #5271FF) !important;
}

.togo-hero-search-box .nice-select.open::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: var(--togo-primary, #5271FF) !important;
}

/* Fallback if select is not initialized by niceSelect */
.togo-hero-search-box select.form-select:not(.nice-select) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235271FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 10px !important;
}

.togo-hero-search-box .nice-select .list {
    width: 100% !important;
    min-width: 220px !important;
    max-height: 270px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25) !important;
    z-index: 999999 !important;
    margin-top: 6px !important;
    padding: 6px !important;
}

.togo-hero-search-box .nice-select .option {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    min-height: 38px !important;
    line-height: 22px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
}

.togo-hero-search-box .nice-select .option:hover,
.togo-hero-search-box .nice-select .option.focus {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

.togo-hero-search-box .nice-select .option.selected {
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

.togo-hero-search-box button[type="submit"] {
    height: 44px !important;
    background: linear-gradient(135deg, #5271FF 0%, #6C88FF 100%) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    box-shadow: 0 6px 18px rgba(82, 113, 255, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.togo-hero-search-box button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(82, 113, 255, 0.5) !important;
}

.togo-hero-search-box button[type="submit"]:active {
    transform: translateY(0) scale(0.97) !important;
}

/* Ensure next section cards sit below the hero dropdown */
.togo-chose-2-ptb {
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================================
   6. Trust Pillars & Feature Cards
   ========================================================= */
.togo-chose-item.chose-style-2 {
    border-radius: 20px !important;
    border: 1px solid #eef2f6 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.togo-chose-item.chose-style-2:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(82, 113, 255, 0.2) !important;
}

.togo-chose-item-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.togo-chose-item.chose-style-2:hover .togo-chose-item-icon {
    transform: scale(1.12) rotate(4deg) !important;
}

/* =========================================================
   7. Testimonials & FAQs Modern Style
   ========================================================= */
.togo-testimonial-2-item {
    border-radius: 20px !important;
    border: 1px solid #eef2f6 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;
    transition: all 0.3s ease !important;
}

.togo-testimonial-2-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 30px -5px rgba(15, 23, 42, 0.09) !important;
}

/* Modern FAQ Accordion Cards */
#homeFaqAccordion .card {
    border-radius: 16px !important;
    border: 1px solid #eef2f6 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
}

#homeFaqAccordion .card:hover {
    border-color: rgba(82, 113, 255, 0.3) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

#homeFaqAccordion .card-header button {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    padding: 6px 0 !important;
}

#homeFaqAccordion .card-header button:not(.collapsed) {
    color: #5271FF !important;
}

#homeFaqAccordion .card-header button i {
    transition: transform 0.3s ease !important;
}

#homeFaqAccordion .card-header button:not(.collapsed) i {
    transform: rotate(180deg) !important;
    color: #5271FF !important;
}

/* =========================================================
   8. Keyframe Animations & Micro-Interactions
   ========================================================= */
@keyframes dsPulseRing {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.22);
        opacity: 0;
    }
    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

@keyframes dsPulseLive {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.25);
        opacity: 0.8;
    }
}

@keyframes dsBtnShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 120%;
    }
}

/* Primary Button Global Polish */
.togo-btn-primary {
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    letter-spacing: 0.2px !important;
}

.togo-btn-primary:active {
    transform: scale(0.97) !important;
}

/* Form Controls Global Modernization */
.form-control, .form-select {
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus, .form-select:focus {
    border-color: #5271FF !important;
    box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.12) !important;
}

/* Custom Package Lead Modal Mobile Polish */
@media (max-width: 767px) {
    #customPackageModal .modal-dialog {
        margin: 12px !important;
    }
    #customPackageModal .modal-content {
        border-radius: 18px !important;
    }
    #customPackageModal .modal-header {
        padding: 16px 18px !important;
    }
    #customPackageModal .modal-body {
        padding: 18px 16px !important;
        max-height: 82vh !important;
        overflow-y: auto !important;
    }
}

/* Wildlife and destination card hover enhancements */
.wildlife-grid-item {
    border-radius: 18px !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}
.wildlife-grid-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Breadcrumbs Banner Responsive Polish */
.togo-breadcrumb-style-2-ptb {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Touch Optimization for fast responsiveness without 300ms tap delay */
a, button, input, select, textarea {
    touch-action: manipulation;
}

/* =========================================================
   Enhanced Modern Package Card Styles (Delta Safari High-Detail)
   ========================================================= */
.ds-package-card {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.ds-package-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1) !important;
    border-color: #cbd5e1 !important;
}

.ds-package-media {
    height: 230px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0f172a !important;
}

.ds-package-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ds-package-card:hover .ds-package-img {
    transform: scale(1.06) !important;
}

.ds-badge-top-left {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 3 !important;
}

.ds-badge-top-right {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 3 !important;
}

.ds-badge {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    letter-spacing: 0.3px !important;
}

.ds-badge-route {
    background: rgba(15, 23, 42, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.ds-badge-discount {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.ds-badge-type {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.ds-media-overlay-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 10px 14px !important;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.45) 70%, transparent 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    z-index: 3 !important;
}

.ds-package-body {
    padding: 20px 22px 18px !important;
}

.ds-package-title {
    font-size: 17.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    min-height: 46px !important;
}

.ds-package-title a {
    color: #0f172a !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ds-package-title a:hover {
    color: var(--togo-primary, #5271FF) !important;
}

.ds-package-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #64748b !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.ds-inclusion-chip {
    background: #f8fafc !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 4px 9px !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.2 !important;
}

.ds-inclusion-chip i {
    font-size: 10.5px !important;
}

.ds-price-mrp {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-right: 4px !important;
}

.ds-price-val {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--togo-primary, #5271FF) !important;
    line-height: 1 !important;
}

/* =========================================================
   Delta Safari Testimonial Swiper & Review Cards (Next.js Match)
   ========================================================= */
.testimonial-card.three {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
    cursor: pointer !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.testimonial-card.three:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09) !important;
    border-color: #cbd5e1 !important;
}

.testimonial-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    height: 100% !important;
}

.testimonial-card.three .author-img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.testimonial-card.three .author-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.testimonial-card.three .author-info h5 {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
}

.testimonial-card.three .author-info span {
    font-size: 12px !important;
    color: #64748b !important;
}

.testimonial-card.three .rating-area {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    list-style: none !important;
}

.testimonial-card.three .rating-area svg,
.testimonial-card.three .rating-area i {
    color: #f59e0b !important;
    fill: #f59e0b !important;
}

.testimonial-card.three h5.review-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}

.testimonial-card.three p.review-body {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
}

.ds-google-btn {
    text-decoration: none !important;
    font-weight: 600 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #4285F4 !important;
    color: #1a73e8 !important;
    transition: all 0.25s ease !important;
}

.ds-google-btn:hover {
    background-color: #f1f5f9 !important;
    color: #1558b0 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.25) !important;
}

.ds-slider-nav-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.ds-slider-nav-btn:hover {
    background: var(--togo-primary, #5271FF) !important;
    color: #ffffff !important;
    border-color: var(--togo-primary, #5271FF) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================
   FAQ Section View All Button
   ========================================================= */
.ds-btn-view-faq {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 32px !important;
    border-radius: 50px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--togo-primary, #5271FF) !important;
    background: #ffffff !important;
    border: 2px solid var(--togo-primary, #5271FF) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(82, 113, 255, 0.12) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    letter-spacing: 0.3px !important;
}

.ds-btn-view-faq:hover {
    background: linear-gradient(135deg, #5271FF 0%, #6C88FF 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(82, 113, 255, 0.32) !important;
}

.ds-btn-view-faq i {
    font-size: 13px !important;
    transition: transform 0.25s ease !important;
}

.ds-btn-view-faq:hover i {
    transform: translateX(4px) !important;
}

/* Fallback for togo-tour-btn line-border */
.togo-tour-btn.line-border {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 24px !important;
    border-radius: 30px !important;
    border: 1.5px solid var(--togo-primary, #5271FF) !important;
    color: var(--togo-primary, #5271FF) !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 3px 10px rgba(82, 113, 255, 0.1) !important;
}

.togo-tour-btn.line-border:hover {
    background: var(--togo-primary, #5271FF) !important;
    color: #ffffff !important;
    border-color: var(--togo-primary, #5271FF) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(82, 113, 255, 0.25) !important;
}

/* =========================================================
   Mobile Optimization: Header, Offcanvas Drawer & Package Cards
   ========================================================= */

/* 1. Hide Login / Traveler Account button on mobile (< 992px) as requested */
@media (max-width: 991.98px) {
    .togo-header-user {
        display: none !important;
    }
}

/* 2. Mobile Package Card Action Buttons Overflow Fix */
.ds-tour-card-bottom {
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.ds-tour-card-btn-group a {
    white-space: nowrap !important;
    text-align: center !important;
}

@media (max-width: 575.98px) {
    .togo-tour-card.style-9 .togo-tour-2-card-content {
        padding: 14px 16px !important;
    }

    .ds-tour-card-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .ds-tour-card-price {
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .ds-tour-card-btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1.15fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .ds-tour-card-btn-group a {
        width: 100% !important;
        padding: 8px 6px !important;
        font-size: 12px !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* 3. Offcanvas Sidebar Visibility & Z-Index Above Sticky Header */
.offcanvas-wrapper {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    z-index: 100000 !important;
    background: #ffffff !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.offcanvas-area.opened .offcanvas-wrapper {
    -webkit-transform: translateX(0) !important;
    -moz-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    -o-transform: translateX(0) !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.body-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99990 !important;
    pointer-events: none;
}

.body-overlay.opened {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (max-width: 767.98px) {
    .offcanvas-wrapper {
        width: 100% !important;
        padding: 16px 18px 30px !important;
    }
}

.offcanvas-top {
    position: relative !important;
    z-index: 100001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
}

.offcanvas-close-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.offcanvas-close-btn:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
    transform: rotate(90deg) !important;
}

/* 4. Hamburger Icon Active State (Toggles to Close X) */
.togo-offcanvas-hamburger-btn {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.togo-offcanvas-hamburger-btn * {
    pointer-events: none !important;
}

.togo-offcanvas-hamburger-btn.active .ds-nav-icon-open {
    display: none !important;
}

.togo-offcanvas-hamburger-btn.active .ds-nav-icon-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   Home Page Core Trust Pillars Swiper
   ========================================================================== */
.ds-pillars-swiper {
    position: relative;
    width: 100%;
    padding-top: 6px;
    padding-bottom: 24px;
    overflow: hidden;
}

.ds-pillars-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.ds-pillars-swiper .togo-chose-item {
    width: 100%;
    margin-bottom: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ds-pillars-swiper .togo-chose-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}

@media (min-width: 1200px) {
    .ds-pillars-pagination {
        display: none !important;
    }
    .ds-pillars-swiper {
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   Home Page Featured Packages: Mobile Swiper & Desktop 3-Col Grid
   ========================================================================== */
.ds-home-packages-swiper {
    position: relative;
    width: 100%;
}

@media (max-width: 991.98px) {
    .ds-home-packages-swiper {
        overflow: hidden;
        padding-top: 4px;
        padding-bottom: 20px;
    }
    .ds-home-packages-swiper .swiper-slide {
        height: auto;
        display: flex;
    }
    .ds-home-packages-swiper .ds-package-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important;
    }
}

@media (min-width: 992px) {
    .ds-home-packages-swiper {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .ds-home-packages-swiper > .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        transform: none !important;
        width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        box-sizing: border-box !important;
    }
    .ds-home-packages-swiper > .swiper-wrapper > .swiper-slide {
        width: calc(33.333333% - 24px) !important;
        flex: 0 0 calc(33.333333% - 24px) !important;
        max-width: calc(33.333333% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-bottom: 30px !important;
        transform: none !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    .ds-home-packages-pagination {
        display: none !important;
    }
}

/* ==========================================================================
   Custom Modern Swiper Pagination Dots (Trust Pillars, Packages, Watchtowers, Wildlife)
   ========================================================================== */
.ds-pillars-pagination,
.ds-home-packages-pagination,
.ds-watchtowers-pagination,
.ds-wildlife-pagination {
    position: relative !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 18px auto 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 10;
}

.ds-pillars-pagination .swiper-pagination-bullet,
.ds-home-packages-pagination .swiper-pagination-bullet,
.ds-watchtowers-pagination .swiper-pagination-bullet,
.ds-wildlife-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #94a3b8 !important;
    opacity: 0.45;
    margin: 0 5px !important;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;
}

.ds-pillars-pagination .swiper-pagination-bullet-active,
.ds-home-packages-pagination .swiper-pagination-bullet-active,
.ds-watchtowers-pagination .swiper-pagination-bullet-active,
.ds-wildlife-pagination .swiper-pagination-bullet-active {
    background: var(--togo-primary, #5271FF) !important;
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   Home Page Watchtowers & Wildlife: Mobile Swiper & Desktop 4-Col Grid
   ========================================================================== */
.ds-watchtowers-swiper,
.ds-wildlife-swiper {
    position: relative;
    width: 100%;
}

@media (max-width: 991.98px) {
    .ds-watchtowers-swiper,
    .ds-wildlife-swiper {
        overflow: hidden;
        padding-top: 4px;
        padding-bottom: 12px;
    }
    .ds-watchtowers-swiper .swiper-slide,
    .ds-wildlife-swiper .swiper-slide {
        height: auto;
        display: flex;
    }
    .ds-watchtowers-swiper .togo-tour-card,
    .ds-wildlife-swiper .ds-wildlife-card {
        width: 100%;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .ds-watchtowers-swiper,
    .ds-wildlife-swiper {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    .ds-watchtowers-swiper > .swiper-wrapper,
    .ds-wildlife-swiper > .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        transform: none !important;
        width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        box-sizing: border-box !important;
    }
    .ds-watchtowers-swiper > .swiper-wrapper > .swiper-slide,
    .ds-wildlife-swiper > .swiper-wrapper > .swiper-slide {
        width: calc(25% - 24px) !important;
        flex: 0 0 calc(25% - 24px) !important;
        max-width: calc(25% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        transform: none !important;
        height: auto !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    .ds-watchtowers-swiper .togo-tour-card,
    .ds-wildlife-swiper .ds-wildlife-card {
        width: 100%;
        margin-bottom: 0 !important;
    }
    .ds-watchtowers-pagination,
    .ds-wildlife-pagination {
        display: none !important;
    }
}

.ds-watchtowers-swiper .togo-tour-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ds-watchtowers-swiper .togo-tour-card img {
    pointer-events: none;
    user-select: none;
}
.ds-watchtowers-swiper .togo-tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12) !important;
}

.ds-wildlife-swiper .ds-wildlife-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ds-wildlife-swiper .ds-wildlife-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(82, 113, 255, 0.25) !important;
}