/* =========================================================
   Delmont Holidays — Brand overrides & shared components
   Green + Gold identity, loaded after main.css on every page
   ========================================================= */
:root {
    --dm-green: #1f7a44;
    --dm-green-dark: #14532d;
    --dm-green-soft: #e8f3ec;
    --dm-gold: #f2a71b;
    --dm-gold-dark: #d98e0a;
    --dm-ink: #14261b;
    --dm-muted: #5b6b60;
}

/* logo styles live in the LOGO block near the end of this file */

/* ---- Hide the (non-functional) mini-cart on the static site ---- */
.tg-header-cart { display: none !important; }

/* ---- Header call-to-action button ---- */
.tg-btn-header {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--dm-green); color: #fff !important;
    padding: 12px 24px; border-radius: 50px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(31, 122, 68, 0.28); transition: all .3s ease;
}
.tg-btn-header:hover { background: var(--dm-gold); color: #1a2332 !important; transform: translateY(-2px); }
.tg-btn-header svg path { fill: currentColor; }

/* ---- Navigation active/hover in brand green ---- */


/* ---- Header contact number accent ---- */
.tg-header-contact-icon { color: var(--dm-green); }
.tg-header-contact-number a:hover { color: var(--dm-green); }

/* ---- About-section brand logo ---- */
.tg-about-logo img { max-width: 190px; height: auto; }

/* ---- Footer logo: white chip so the dark wordmark reads on dark footer ---- */
.footer-logo-img {
    max-width: 190px; height: auto; filter: none !important;
    background: #ffffff; padding: 12px 16px; border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ---- WhatsApp float + scroll-top brand tint ---- */
.scroll__top { background: var(--dm-green) !important; }
.scroll__top:hover { background: var(--dm-gold) !important; }

/* =========================================================
   Shared brand components (used by new pages: home stats,
   destinations, activities, gallery, package listing)
   ========================================================= */

/* Section heading helpers */
.dm-section { padding: 90px 0; }
.dm-section-head { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.dm-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--dm-green-soft); color: var(--dm-green);
    padding: 7px 18px; border-radius: 50px; font-size: 13px;
    font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 16px;
}
.dm-title { font-size: 40px; font-weight: 800; color: var(--dm-ink); line-height: 1.2; margin: 0 0 14px; }
.dm-title span { color: var(--dm-green); }
.dm-sub { color: var(--dm-muted); font-size: 16px; line-height: 1.75; margin: 0; }
@media (max-width: 767px) { .dm-title { font-size: 28px; } .dm-section { padding: 60px 0; } }

/* Trust / stats strip */
.dm-stats { background: var(--dm-green); }
.dm-stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 54px 0; }
.dm-stat { text-align: center; color: #fff; }
.dm-stat-num { font-size: 44px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.dm-stat-num span { color: var(--dm-gold); }
.dm-stat-label { font-size: 15px; color: rgba(255, 255, 255, .85); font-weight: 500; }
@media (max-width: 767px) { .dm-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 30px; } .dm-stat-num { font-size: 34px; } }

/* Generic card grid */
.dm-grid { display: grid; gap: 26px; }
.dm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dm-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .dm-grid-3, .dm-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dm-grid-3, .dm-grid-4 { grid-template-columns: 1fr; } }

/* Activity / feature card */
.dm-card {
    background: #fff; border: 1px solid #eef2ee; border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 60, 40, .06); transition: all .38s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column;
}
.dm-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(20, 60, 40, .14); }
.dm-card-thumb { position: relative; overflow: hidden; height: 220px; }
.dm-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.dm-card:hover .dm-card-thumb img { transform: scale(1.08); }
.dm-card-tag {
    position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255, 255, 255, .92);
    color: var(--dm-green-dark); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 30px;
}
.dm-card-price {
    position: absolute; bottom: 14px; right: 14px; z-index: 2; background: var(--dm-green);
    color: #fff; font-size: 14px; font-weight: 700; padding: 7px 15px; border-radius: 30px;
}
.dm-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.dm-card-title { font-size: 20px; font-weight: 700; color: var(--dm-ink); margin: 0 0 8px; }
.dm-card-title a { color: inherit; }
.dm-card-title a:hover { color: var(--dm-green); }
.dm-card-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--dm-muted); font-size: 13.5px; margin-bottom: 12px; }
.dm-card-meta i { color: var(--dm-green); margin-right: 5px; }
.dm-card-text { color: var(--dm-muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 18px; flex-grow: 1; }
.dm-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.dm-link {
    display: inline-flex; align-items: center; gap: 7px; color: var(--dm-green); font-weight: 700; font-size: 14.5px;
}
.dm-link i { transition: transform .3s ease; }
.dm-link:hover { color: var(--dm-gold-dark); }
.dm-link:hover i { transform: translateX(4px); }

/* Buttons */
.dm-btn {
    display: inline-flex; align-items: center; gap: 9px; background: var(--dm-green); color: #fff !important;
    padding: 14px 30px; border-radius: 50px; font-weight: 700; font-size: 15px; border: none; cursor: pointer;
    box-shadow: 0 8px 22px rgba(31, 122, 68, .28); transition: all .3s ease;
}
.dm-btn:hover { background: var(--dm-green-dark); transform: translateY(-2px); }
.dm-btn-gold { background: var(--dm-gold); color: #1a2332 !important; box-shadow: 0 8px 22px rgba(242, 167, 27, .3); }
.dm-btn-gold:hover { background: var(--dm-gold-dark); color: #fff !important; }
.dm-btn-ghost { background: transparent; color: var(--dm-green) !important; border: 2px solid var(--dm-green); box-shadow: none; }
.dm-btn-ghost:hover { background: var(--dm-green); color: #fff !important; }

/* Destination tile */
.dm-dest { position: relative; border-radius: 20px; overflow: hidden; height: 300px; box-shadow: 0 10px 30px rgba(20, 60, 40, .08); }
.dm-dest img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.dm-dest:hover img { transform: scale(1.09); }
.dm-dest-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
    background: linear-gradient(to top, rgba(10, 30, 18, .85) 0%, rgba(10, 30, 18, .25) 55%, transparent 100%);
}
.dm-dest-overlay h3 { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.dm-dest-overlay p { color: rgba(255, 255, 255, .82); font-size: 13.5px; margin: 0; }
.dm-dest-badge {
    position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, .9); color: var(--dm-green-dark);
    font-size: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: 30px; display: flex; align-items: center; gap: 5px;
}
.dm-dest-badge i { color: var(--dm-gold); }

/* Gallery masonry */
.dm-gallery { columns: 4 220px; column-gap: 16px; }
.dm-gallery a { display: block; margin-bottom: 16px; border-radius: 16px; overflow: hidden; position: relative; break-inside: avoid; }
.dm-gallery img { width: 100%; display: block; transition: transform .5s ease; }
.dm-gallery a::after {
    content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px;
    background: rgba(20, 83, 45, .55); opacity: 0; transition: opacity .35s ease;
}
.dm-gallery a:hover::after { opacity: 1; }
.dm-gallery a:hover img { transform: scale(1.08); }

/* Breadcrumb title accent */
.tg-breadcrumb-title { color: #fff; }

/* Page CTA band reuse */
.dm-cta-band { background: #1a2332; color: #fff; }

/* =========================================================
   UNIFIED BUTTONS — one style everywhere, no shadows,
   green base with a warm gold colour hover
   ========================================================= */
.tg-btn, .dm-btn, .tg-btn-header, .book-btn, .submit-btn, .Banner-button,
.bk-search-button, .tg-cta-btn-primary, .btn-modern-submit, .about-btn,
.dm-search-btn, .tg-btn-two, .read-more, .theme-btn, .header-btn a,
.tg-blog-read-more, .banner-btn a {
    background: var(--dm-green) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 50px !important;
    transition: background .3s ease, color .3s ease, transform .3s ease !important;
}
.tg-btn:hover, .dm-btn:hover, .tg-btn-header:hover, .book-btn:hover, .submit-btn:hover,
.Banner-button:hover, .bk-search-button:hover, .tg-cta-btn-primary:hover,
.btn-modern-submit:hover, .about-btn:hover, .dm-search-btn:hover, .tg-btn-two:hover {
    background: var(--dm-gold) !important;
    color: #14261b !important;
    transform: translateY(-2px);
}
.tg-btn:hover svg path, .dm-btn:hover svg path { stroke: #14261b !important; fill: #14261b; }
.tg-btn-header:hover svg path { fill: #14261b !important; }

/* Ghost / outline buttons: transparent, fill with gold on hover */
.tg-btn-transparent, .dm-btn-ghost {
    background: transparent !important;
    border: 2px solid currentColor !important;
    box-shadow: none !important;
    border-radius: 50px !important;
}
.tg-btn-transparent:hover, .dm-btn-ghost:hover {
    background: var(--dm-gold) !important;
    border-color: var(--dm-gold) !important;
    color: #14261b !important;
}
.tg-btn-transparent:hover svg path { stroke: #14261b !important; }

/* keep gold-variant buttons distinct: gold base -> green hover */
.dm-btn-gold { background: var(--dm-gold) !important; color: #14261b !important; }
.dm-btn-gold:hover { background: var(--dm-green) !important; color: #fff !important; }

/* Filter chips */
.dm-filter { box-shadow: none !important; }
.dm-filter.active { background: var(--dm-green) !important; border-color: var(--dm-green) !important; color:#fff !important; }

/* =========================================================
   LIQUID GLASS utilities + component glass
   ========================================================= */
.dm-glass {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 8px 40px rgba(10, 25, 15, 0.18);
}
.dm-glass-solid {           /* readable frosted panel (works even without blur support) */
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.dm-glass-dark {
    background: rgba(16, 28, 20, 0.42);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Make the floating header glass a touch stronger + keep nav readable over the hero */
.tg-header__area.tg-transparent #main-nav.navigation > li > a { color: #ffffff; }
.tg-header__area.sticky #main-nav.navigation > li > a { color: #14261b; }
.tg-header__area.tg-transparent .tg-header-contact-number span,
.tg-header__area.tg-transparent .tg-header-contact-number a { color: #ffffff; }
.tg-header__area.sticky .tg-header-contact-number a { color: #14261b; }

/* Booking form -> liquid glass panel (homepage) */
.tg-booking-form-wrap {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 60px rgba(10, 25, 15, 0.18) !important;
}

/* Testimonial + review cards: subtle glass sheen */
.tg-review-card { backdrop-filter: blur(6px); }

/* =========================================================
   ROUND 2 FIXES — visibility, logo, flat theme, buttons
   ========================================================= */

/* Never let WOW.js / animate.css leave content hidden or mid-fade (fixes "text not visible") */
.wow, .animated, [class*="fadeIn"], [class*="fadeInUp"] {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}

/* logo styles live in the LOGO block near the end of this file */

/* Flat brand fills (no gradients anywhere) */
.dm-stats { background: var(--dm-green) !important; }
.tg-cta-final, .dm-cta-band { background: #14261b !important; }
.tg-chose-section-title .tg-section-subtitle,
.testimonial-badge,
.tg-review-avatar { background: var(--dm-green) !important; }

/* Buttons: guarantee identical flat green everywhere + gold flat hover, no gradients, no shadow */
.tg-btn, .dm-btn, .tg-btn-header, .book-btn, .submit-btn, .Banner-button,
.bk-search-button, .tg-cta-btn-primary, .btn-modern-submit, .about-btn,
.dm-search-btn, .tg-btn-two, .tg-chose-btn .tg-btn, .tp-about-btn-wrap .tg-btn,
.tg-banner-btn .Banner-button, .dm-hero .dm-btn {
    background: var(--dm-green) !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}
.tg-btn:hover, .dm-btn:hover, .tg-btn-header:hover, .book-btn:hover, .submit-btn:hover,
.Banner-button:hover, .bk-search-button:hover, .tg-cta-btn-primary:hover,
.btn-modern-submit:hover, .about-btn:hover, .dm-search-btn:hover, .tg-btn-two:hover,
.tg-chose-btn .tg-btn:hover {
    background: var(--dm-gold) !important;
    background-image: none !important;
    color: #14261b !important;
}

/* 12+ years badge (about) flat */
.about-experience-badge, .experience-badge, .years-badge { background: var(--dm-green) !important; background-image: none !important; }

/* =========================================================
   UNIFIED HEADER (homepage floating glass header) — shared
   so every page renders the same header, plus a clean LOGO
   ========================================================= */
.tg-header__area {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    transition: all 0.3s ease;
    border-radius: 79px;
    width: min(1320px, calc(100% - 40px));
    margin: 28px auto 0;
    padding-left: 12px;
    padding-right: 12px;
}
.tg-header__area.sticky {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
}
.tgmenu__nav.ml-45 { margin-left: 22px !important; }
#main-nav.navigation { display: flex; flex-wrap: nowrap; align-items: center; }
#main-nav.navigation > li { white-space: nowrap; }
#main-nav.navigation > li > a { padding-left: 14px; padding-right: 14px; }

/* nav readable: white over the transparent header (hero/breadcrumb image), dark when sticky */
.tg-header__area.tg-transparent #main-nav.navigation > li > a { color: #ffffff; }
.tg-header__area.tg-transparent #main-nav.navigation > li.active > a { color: var(--dm-gold); }
.tg-header__area.sticky #main-nav.navigation > li > a { color: #14261b; }
.tg-header__area.sticky #main-nav.navigation > li.active > a { color: var(--dm-green); }
.tg-header__area.tg-transparent .tg-header-contact-number span,
.tg-header__area.tg-transparent .tg-header-contact-number a { color: #ffffff; }
.tg-header__area.sticky .tg-header-contact-number a { color: #14261b; }
.tg-header__area.tg-transparent .tg-header-contact-icon { color: #fff; }

/* ============ HEADER LOGO (clean, good width) ============ */
.tgmenu__wrap .logo { display: block; }
.tgmenu__wrap .logo a.logo-1 { display: inline-block; background: #ffffff; padding: 8px 16px; border-radius: 14px; line-height: 1; }
.tgmenu__wrap .logo a.logo-1 img {max-width: 75px; }
.logo-2 { display: none !important; }
.tgmobile__menu .nav-logo img, .offCanvas__logo img { width: 160px; height: auto; }

/* Breadcrumb clears the absolute (overlaying) header on all sizes */
.tg-breadcrumb-area.tg-breadcrumb-spacing-5 { padding-top: 155px !important; padding-bottom: 90px !important; }
@media (max-width: 991px) { .tg-breadcrumb-area.tg-breadcrumb-spacing-5 { padding-top: 120px !important; padding-bottom: 60px !important; } }

/* =========================================================
   ROUND 3 — single logo when sticky, uniform social, hero form
   ========================================================= */
.header-sticky .logo-1, .tg-header__area.sticky .logo-1 { display: inline-block !important; }

/* uniform footer social icons (override the old per-brand colours) */
.tg-footer-dark .social-pill { background: transparent !important; padding: 0 !important; gap: 14px !important; }
.tg-footer-dark .social-icon,
.tg-footer-dark .social-icon.fb, .tg-footer-dark .social-icon.insta,
.tg-footer-dark .social-icon.yt, .tg-footer-dark .social-icon.tw, .tg-footer-dark .social-icon.li {
    width: 46px !important; height: 46px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important; font-size: 17px !important;
}
.tg-footer-dark .social-icon:hover { background: var(--dm-green) !important; border-color: var(--dm-green) !important; transform: translateY(-3px); }

/* hero enquiry form (replaces the search bar) */
.dm-hero-form { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 60px; background: #fff; box-shadow: 0 20px 50px rgba(9, 20, 13, .22); }
.dm-hero-field { display: flex; align-items: center; gap: 10px; flex: 1; padding: 8px 16px; border-right: 1px solid rgba(20, 60, 40, .12); }
.dm-hero-field:last-of-type { border-right: none; }
.dm-hero-field i { color: var(--dm-green); font-size: 15px; }
.dm-hero-field input { border: none; background: transparent; outline: none; font-size: 14px; color: #14261b; width: 100%; }
.dm-hero-field input::placeholder { color: #8a978f; }
.dm-hero-form-btn { flex: 0 0 auto; white-space: nowrap; padding: 15px 26px !important; }
@media (max-width: 991px) {
    .dm-hero-form { flex-wrap: wrap; border-radius: 22px; gap: 8px; }
    .dm-hero-field { flex: 1 1 46%; border-right: none; background: #f4f8f5; border-radius: 12px; }
    .dm-hero-form-btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 575px) { .dm-hero-field { flex: 1 1 100%; } }

/* package-detail sticky tab nav: wrap instead of horizontal scrollbar */
.modern-tour-detail .sticky-top-nav { overflow: visible !important; }
.modern-tour-detail .sticky-top-nav .nav-items { flex-wrap: wrap !important; overflow-x: visible !important; row-gap: 6px; }
.modern-tour-detail .sticky-top-nav .nav-items::-webkit-scrollbar { display: none; }

/* =========================================================
   MOBILE fixes — header width, logo, hero form stacking
   (override the JS header-resize hack + absolute form)
   ========================================================= */
@media (max-width: 767px) { .dm-hero { display: block !important; } }
@media (max-width: 767px) {
    .tg-header__area,
    .tg-header__area.tg-transparent {
        width: auto !important;
        left: 10px !important;
        right: 10px !important;
        margin: 14px 0 0 !important;
        border-radius: 40px !important;
        padding: 6px 10px !important;
    }
    .tgmenu__wrap .logo a.logo-1 { padding: 5px 11px; }
    .tgmenu__wrap .logo img { width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
    .tg-menu-right-action { justify-content: flex-end !important; }

    /* Hero: let content breathe and drop the form into normal flow */
    .dm-hero { padding: 118px 0 44px !important; min-height: 0 !important; }
    .dm-hero-search { position: relative !important; z-index: 5 !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 26px !important; }
    .dm-hero-search .container { padding-left: 16px; padding-right: 16px; }
    .dm-hero-form { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; border-radius: 18px !important; gap: 10px !important; padding: 14px !important; }
    .dm-hero-field { flex: 1 1 100% !important; width: 100% !important; border-right: none !important; background: #f4f8f5; border-radius: 12px; padding: 12px 14px; }
    .dm-hero-form-btn { width: 100% !important; justify-content: center; }
    .dm-hero-title { font-size: 34px !important; }
}
@media (min-width: 415px) and (max-width: 575px) {
    .tg-header__area, .tg-header__area.tg-transparent { width: calc(100% - 20px) !important; margin-right: auto !important; }
}

/* =========================================================
   Nav hover/active — highly visible (gold over images, green on white)
   more specific than the blanket rule, so these win
   ========================================================= */
.tg-header__area.tg-transparent #main-nav.navigation > li > a:hover,
.tg-header__area.tg-transparent #main-nav.navigation > li.active > a { color: var(--dm-gold) !important; }
.tg-header__area.sticky #main-nav.navigation > li > a:hover,
.tg-header__area.sticky #main-nav.navigation > li.active > a { color: var(--dm-green) !important; }

/* =========================================================
   STICKY header — main.js toggles the class ".header-sticky"
   (NOT ".sticky"). Make it solid white with readable dark nav.
   ========================================================= */
.tg-header__area.header-sticky {
    background: rgba(255, 255, 255, 0.97) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
}
.tg-header__area.header-sticky #main-nav.navigation > li > a { color: #14261b !important; }
.tg-header__area.header-sticky #main-nav.navigation > li > a:hover,
.tg-header__area.header-sticky #main-nav.navigation > li.active > a { color: var(--dm-green) !important; }
.tg-header__area.header-sticky .tg-header-contact-number span,
.tg-header__area.header-sticky .tg-header-contact-number a { color: #14261b !important; }
.tg-header__area.header-sticky .tg-header-contact-icon { color: var(--dm-green) !important; }

/* =========================================================
   PLAN YOUR TRIP — Typeform-style multi-step modal
   ========================================================= */
.dm-plan-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(9,20,13,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; }
.dm-plan-overlay.open { display: flex; }
.dm-plan-modal { background: #fff; border-radius: 24px; width: min(680px, 100%); max-height: 94vh; overflow-y: auto; position: relative; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.dm-plan-bar { position: sticky; top: 0; height: 5px; background: #eef2ee; border-radius: 24px 24px 0 0; overflow: hidden; }
.dm-plan-bar-fill { height: 100%; background: var(--dm-green); width: 20%; transition: width .45s cubic-bezier(.4,0,.2,1); }
.dm-plan-close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border-radius: 50%; background: #f4f7f5; border: none; font-size: 18px; color: #5b6b60; cursor: pointer; z-index: 3; line-height: 1; }
.dm-plan-close:hover { background: #e6efe9; color: var(--dm-ink); }
.dm-plan-body { padding: 60px 52px 44px; }
.dm-plan-step { display: none; }
.dm-plan-step.active { display: block; animation: dmPlanIn .45s cubic-bezier(.4,0,.2,1); }
@keyframes dmPlanIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.dm-plan-num { color: var(--dm-green); font-weight: 700; font-size: 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.dm-plan-num i { font-size: 12px; }
.dm-plan-q { font-size: 30px; font-weight: 800; color: var(--dm-ink); margin: 0 0 8px; line-height: 1.25; }
.dm-plan-sub { color: var(--dm-muted); font-size: 15px; margin: 0 0 26px; }
.dm-plan-input { width: 100%; border: none; border-bottom: 2px solid #dfe7e1; font-size: 22px; padding: 10px 2px; outline: none; color: var(--dm-ink); background: transparent; }
.dm-plan-input:focus { border-color: var(--dm-green); }
.dm-plan-input::placeholder { color: #b6c1ba; }
.dm-plan-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-plan-choice { text-align: left; border: 2px solid #e2ece6; background: #fff; border-radius: 14px; padding: 16px 18px; font-size: 16px; font-weight: 600; color: var(--dm-ink); cursor: pointer; transition: all .2s; }
.dm-plan-choice:hover, .dm-plan-choice.sel { border-color: var(--dm-green); background: var(--dm-green-soft); color: var(--dm-green-dark); }
.dm-plan-err { color: #dc2626; font-size: 13px; margin-top: 12px; min-height: 16px; }
.dm-plan-foot { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.dm-plan-next { display: inline-flex; align-items: center; gap: 8px; background: var(--dm-green); color: #fff; border: none; border-radius: 50px; padding: 13px 32px; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .25s; }
.dm-plan-next:hover { background: var(--dm-green-dark); }
.dm-plan-back { background: none; border: none; color: var(--dm-muted); font-weight: 600; cursor: pointer; font-size: 14px; }
.dm-plan-back:hover { color: var(--dm-ink); }
.dm-plan-hint { margin-left: auto; color: #9aa5a0; font-size: 12.5px; }
.dm-plan-thanks { text-align: center; padding: 16px 0 8px; }
.dm-plan-thanks .ic { width: 84px; height: 84px; border-radius: 50%; background: var(--dm-green-soft); color: var(--dm-green); display: flex; align-items: center; justify-content: center; font-size: 38px; margin: 0 auto 24px; }
.dm-plan-thanks h3 { font-size: 28px; font-weight: 800; color: var(--dm-ink); margin: 0 0 12px; }
.dm-plan-thanks p { color: var(--dm-muted); font-size: 15.5px; line-height: 1.7; margin: 0 auto 26px; max-width: 460px; }
.dm-plan-thanks .dm-plan-wa { display: inline-flex; align-items: center; gap: 9px; background: #25D366; color: #fff; border-radius: 50px; padding: 14px 28px; font-weight: 700; text-decoration: none; }
.dm-plan-thanks .dm-plan-wa:hover { background: #1eb856; }
.dm-plan-thanks .dm-plan-done { display: block; margin: 16px auto 0; background: none; border: none; color: var(--dm-muted); font-weight: 600; cursor: pointer; }
@media (max-width: 575px) { .dm-plan-body { padding: 46px 24px 30px; } .dm-plan-q { font-size: 23px; } .dm-plan-choices { grid-template-columns: 1fr; } .dm-plan-input { font-size: 19px; } }

/* footer compact important-menu row */
.footer-menu-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding: 6px 0 28px; }
.footer-menu-row a { color: #aeb9b2; font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s; }
.footer-menu-row a:hover { color: #fff; }

/* Plan-trip number stepper (plus / minus) */
.dm-plan-stepper { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #dfe7e1; padding: 4px 2px 8px; }
.dm-plan-stepper:focus-within { border-color: var(--dm-green); }
.dm-plan-stepper input { border: none !important; border-bottom: none !important; text-align: center; font-size: 28px; font-weight: 800; color: var(--dm-ink); width: 100%; padding: 6px 0; -moz-appearance: textfield; }
.dm-plan-stepper input::-webkit-outer-spin-button, .dm-plan-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dm-plan-step-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--dm-green); background: #fff; color: var(--dm-green); font-size: 24px; line-height: 1; font-weight: 700; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.dm-plan-step-btn:hover { background: var(--dm-green); color: #fff; }

/* package tab nav — keep on ONE line (compact, hidden-scroll if it must overflow) */
.modern-tour-detail .sticky-top-nav { overflow: hidden !important; }
.modern-tour-detail .sticky-top-nav .nav-items {
    flex-wrap: nowrap !important; overflow-x: auto !important; row-gap: 0 !important; gap: 2px;
    scrollbar-width: none; -ms-overflow-style: none; justify-content: space-between;
}
.modern-tour-detail .sticky-top-nav .nav-items::-webkit-scrollbar { display: none; height: 0; }
.modern-tour-detail .sticky-top-nav .nav-item { flex: 0 0 auto; white-space: nowrap; padding-left: 13px !important; padding-right: 13px !important; }
.modern-tour-detail .sticky-top-nav .nav-item span { font-size: 14px !important; }

/* home "Why Choose Us" travel-line icons */
.tg-chose-list-icon i { font-size: 27px; color: var(--dm-green); line-height: 1; }

/* ---- Read More link (blog cards) ---- */
.blog-read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--dm-green) !important; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: color .25s ease; }
.blog-read-more svg, .blog-read-more i { transition: transform .25s ease; }
.blog-read-more:hover { color: var(--dm-gold-dark) !important; }
.blog-read-more:hover svg, .blog-read-more:hover i { transform: translateX(4px); }

/* =========================================================
   SHINY TEXT on nav menus (reactbits ShinyText) — over images
   ========================================================= */
@keyframes dmShine { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
.tg-header__area.tg-transparent #main-nav.navigation > li > a {
    background: linear-gradient(110deg, rgba(255,255,255,.5) 38%, #ffffff 50%, rgba(255,255,255,.5) 62%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: dmShine 4.5s linear infinite;
}
.tg-header__area.tg-transparent #main-nav.navigation > li.active > a,
.tg-header__area.tg-transparent #main-nav.navigation > li > a:hover {
    background: none !important; -webkit-text-fill-color: var(--dm-gold) !important; color: var(--dm-gold) !important; animation: none !important;
}
.tg-header__area.header-sticky #main-nav.navigation > li > a {
    background: none !important; -webkit-text-fill-color: #14261b !important; color: #14261b !important; animation: none !important;
}
.tg-header__area.header-sticky #main-nav.navigation > li.active > a,
.tg-header__area.header-sticky #main-nav.navigation > li > a:hover {
    -webkit-text-fill-color: var(--dm-green) !important; color: var(--dm-green) !important;
}

/* about — custom SVG service icons */
.service-icon svg { width: 30px; height: 30px; }

/* homepage blog — show only ONE row (3 posts) */
.tg-blog-area .row.g-4 > *:nth-child(n+4) { display: none !important; }

/* =========================================================
   PLAN-TRIP modal — modern polish + effects
   ========================================================= */
.dm-plan-overlay { background: radial-gradient(120% 120% at 50% 0%, rgba(31,122,68,.35), rgba(9,20,13,.72)); }
.dm-plan-modal { border-radius: 28px; box-shadow: 0 40px 120px rgba(0,0,0,.5); animation: dmModalIn .5s cubic-bezier(.16,1,.3,1); background: linear-gradient(180deg,#ffffff 0%, #f6faf7 100%); }
@keyframes dmModalIn { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
.dm-plan-bar { height: 6px; background: #e7efe9; }
.dm-plan-bar-fill { background: linear-gradient(90deg, var(--dm-green), #33b06a); box-shadow: 0 0 12px rgba(31,122,68,.5); }
.dm-plan-body { padding: 62px 56px 46px; }
.dm-plan-num { letter-spacing: .5px; text-transform: uppercase; font-size: 12.5px; }
.dm-plan-q { font-size: 33px; letter-spacing: -.5px; }
.dm-plan-input { font-size: 24px; border-bottom-width: 2.5px; transition: border-color .3s, box-shadow .3s; padding: 12px 4px; }
.dm-plan-input:focus { box-shadow: 0 12px 0 -10px rgba(31,122,68,.4); }
.dm-plan-choice { border-radius: 16px; padding: 18px 20px; transition: transform .18s ease, border-color .2s, background .2s, box-shadow .2s; }
.dm-plan-choice:hover, .dm-plan-choice.sel { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(31,122,68,.14); }
.dm-plan-next { padding: 14px 34px; box-shadow: 0 12px 26px rgba(31,122,68,.32); transition: transform .2s ease, box-shadow .2s, background .25s; }
.dm-plan-next:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31,122,68,.42); }
.dm-plan-step.active { animation: dmPlanIn .5s cubic-bezier(.16,1,.3,1); }
.dm-plan-thanks .ic { animation: dmPop .6s cubic-bezier(.16,1.4,.3,1); box-shadow: 0 12px 30px rgba(31,122,68,.25); }
@keyframes dmPop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.dm-plan-step-btn { transition: transform .18s ease, background .2s, color .2s; }
.dm-plan-step-btn:hover { transform: scale(1.08); }

/* =========================================================
   ROUND 4 — Mobile drawer menu fix + modern social icons
   main.js clones the desktop <ul id="main-nav"> into the mobile
   drawer, so the desktop rule `#main-nav.navigation{display:flex}`
   (line ~321) forced the mobile links into one horizontal, no-wrap
   row that overflowed the panel. Reset it to a clean vertical list,
   and restyle the mobile + offcanvas social icons to the same
   modern round look as the footer (adapted for a light background).
   ========================================================= */

/* --- 1. Mobile drawer nav: undo the desktop horizontal flex --- */
.tgmobile__menu #main-nav.navigation,
.tgmobile__menu .navigation {
    display: block !important;
    flex-wrap: wrap;
    width: 100%;
}
.tgmobile__menu #main-nav.navigation > li,
.tgmobile__menu .navigation > li {
    display: block;
    float: none;
    white-space: normal;
}
.tgmobile__menu #main-nav.navigation > li > a {
    display: block;
    padding: 13px 25px !important;
    color: #14261b !important;
}
.tgmobile__menu #main-nav.navigation > li.active > a,
.tgmobile__menu #main-nav.navigation > li > a:hover {
    color: var(--dm-green) !important;
}

/* --- 2. Modern social icons — mobile drawer + offcanvas panel --- */
.tgmobile__menu .social-links ul li a,
.offCanvas__social-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    line-height: 1;
    font-size: 16px;
    border-radius: 50% !important;
    border: 1px solid rgba(20, 60, 40, 0.16) !important;
    background: rgba(20, 60, 40, 0.05) !important;
    color: var(--dm-green) !important;
    transition: all 0.3s ease;
}
.tgmobile__menu .social-links ul li a:hover,
.offCanvas__social-icon a:hover {
    background: var(--dm-green) !important;
    border-color: var(--dm-green) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
}
.offCanvas__social-icon a { margin-right: 8px; }

/* =========================================================
   Desktop header — mild compaction so the 6-item nav + single
   phone number + CTA sit comfortably on ~1366 laptops.
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
    .tgmenu__nav.ml-45 { margin-left: 10px !important; }
    #main-nav.navigation > li > a { padding-left: 10px !important; padding-right: 10px !important; }
}

/* =========================================================
   ROUND 6 — centered nav, blog "Read More" link fix,
   equal-height package cards, car-rental cards
   ========================================================= */

/* 1. Center the primary nav between the logo and the header actions */
@media (min-width: 1200px) {
    .tgmenu__wrap { width: 100%; }
    .tgmenu__wrap .tgmenu__nav { flex: 1 1 auto; }
    #main-nav.navigation { justify-content: center; }
}

/* 2. Blog "Read More" is a text link, NOT a filled button
   (undo the global button background it was swept into) */
.tg-blog-read-more,
.tg-blog-read-more:hover {
    background: transparent !important;
    color: var(--dm-green) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.tg-blog-read-more:hover { color: var(--dm-gold-dark) !important; transform: none !important; }
.tg-blog-read-more:hover i { transform: translateX(4px); }

/* 3. Equal-height cards in "Explore Our Best Kashmir Tours" (incl. car rentals) */
.project-active-two .tg-listing-card-item { height: 100%; display: flex; flex-direction: column; }
.project-active-two .tg-listing-card-thumb.fix { height: 240px; }
.project-active-two .tg-listing-card-thumb.fix img.tg-card-border { width: 100%; height: 100%; object-fit: cover; }
.project-active-two .tg-listing-main-content { display: flex; flex-direction: column; flex-grow: 1; }
.project-active-two .tg-listing-card-title { min-height: 52px; margin-bottom: 8px; }
.project-active-two .tg-listing-card-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-active-two .tg-listing-card-price { margin-top: auto; }