/* Font unification: Poppins base (loaded via Google Fonts in layout head) */
body { font-family: 'Poppins', sans-serif; }
/* on-site tour search — header icon trigger + fullscreen overlay */
.search-toggle { background: none; border: 0; padding: 10px; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.search-toggle:hover { color: var(--second-color); }
.search-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, .97); z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.search-overlay.active { display: flex; }
.search-overlay-close { position: absolute; top: 24px; right: 32px; background: none; border: 0; font-size: 40px; line-height: 1; color: var(--main-color); cursor: pointer; }
.search-overlay-form { display: flex; align-items: center; gap: 10px; width: 90%; max-width: 600px; }
.search-overlay-form input[type="search"] { flex: 1; height: 54px; font-size: 18px; padding: 0 18px; border: 1px solid var(--second-color); border-radius: 10px; outline: none; }
.search-overlay-form input[type="search"]:focus { border-color: var(--main-color); }
.search-overlay-form .btn-effect { white-space: nowrap; }
@media (max-width: 575.98px) {
    .search-overlay-form { flex-direction: column; }
    .search-overlay-form input[type="search"], .search-overlay-form .btn-effect { width: 100%; }
    .search-overlay-close { top: 14px; right: 18px; }
}
/* results-page search box (tour/filter.blade.php), standalone/centered */
.header-search { gap: 10px; width: 90%; max-width: 600px; margin: 0 auto; }
.header-search .form-control { height: 50px; font-size: 17px; border: 1px solid var(--second-color); border-radius: 10px; }
.header-search .btn-effect { white-space: nowrap; }
/* secondary nav items: hidden on desktop (they live in the side drawer); shown in the mobile offcanvas as today */
@media (min-width: 992px) { .nav-menu .nav-secondary { display: none !important; } }
/* desktop burger trigger (styled like .search-toggle) — desktop only */
.menu-toggle { display: none; background: none; border: 0; padding: 10px; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.menu-toggle:hover { color: var(--second-color); }
@media (min-width: 992px) { .menu-toggle { display: inline-block; } }
/* right-side drawer for secondary nav */
.nav-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity .3s ease-in-out; }
.nav-drawer-backdrop.active { opacity: 1; visibility: visible; }
.nav-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 320px; max-width: 85%; background: var(--white-color); box-shadow: -4px 0 24px rgba(0,0,0,.15); z-index: 9999; transform: translateX(100%); transition: transform .3s ease-in-out; overflow-y: auto; padding: 24px; }
.nav-drawer.active { transform: translateX(0); }
.nav-drawer-close { position: absolute; top: 14px; right: 18px; background: none; border: 0; font-size: 34px; line-height: 1; color: var(--main-color); cursor: pointer; }
.nav-drawer-inner { margin-top: 36px; }
.nav-drawer-group { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid #eee; }
.nav-drawer-group:last-child { border-bottom: 0; }
.nav-drawer-heading { display: block; font-size: 17px; font-weight: 600; color: var(--main-color); margin-bottom: 8px; text-decoration: none; }
.nav-drawer-group ul { list-style: none; padding: 0; margin: 0; }
.nav-drawer-group ul li a { display: block; padding: 6px 0 6px 12px; color: var(--black-color); font-size: 15px; text-decoration: none; }
.nav-drawer-group ul li a:hover { color: var(--second-color); }
/* drawer + burger are desktop-only; mobile keeps the existing offcanvas with the full flat menu */
@media (max-width: 991.98px) { .nav-drawer, .nav-drawer-backdrop, .menu-toggle { display: none !important; } }
/* FIX: drawer links stack one per row (override theme's .nav-menu li{display:inline-block} leak) */
.nav-drawer-group ul li { display: block !important; width: 100%; float: none; margin: 0; }
.nav-drawer-group ul li a { display: block; }
/* FIX: right-align the desktop nav cluster (logo stays left); right-align dropdowns so the right-shifted items don't clip off-screen */
@media (min-width: 992px) {
    .nav-menu-bar .nav-menu { margin-left: auto !important; margin-right: 0 !important; }
    .nav-menu-bar .nav-menu .dropdown-li .dropdown-menu { right: 0; left: auto; }
}
@media (max-width:575.98px){.nav-bar .single-item.social a{padding:0 .3rem!important}.bg-gray .col-lg-6.col-sm-4.d-flex.justify-content-end.align-items-center{justify-content:flex-start}.blog-card-three.blog-list-card{margin-bottom:20px}.faq-accordion{padding:20px 0}.hero-section .hero-content .hero-details h1{width:100%;margin-bottom:20px;font-size:30px}.tour-heading h1{font-size:26px;line-height:1.4}.section-title p{width:100%!important}.home-about-section .about-content .section-title{text-align:center}.about-content .desc-link-content{height:auto!important;}.home-about-section .about-content .section-title p{margin:auto}.category-cover{height:350px!important;min-height:350px!important}.scroll-top{display:none;}.category-cover-Details{height:300px!important}.box-info-tour{flex-wrap:wrap!important}.tour-nav h3{padding:5px!important}.accordion-two .accordion-item .accordion-button:after{right:-10%!important}.mobile-about{display:block!important}}@media (max-width:768px){.faq-accordion,.faq-img{min-width:100%!important}.about-content .desc-link-content{height:auto!important;}.scroll-top{display:none;}.home-about-section .about-content .section-title,.news-btn{text-align:center}.nav-bar .single-item{padding:10px 3px}.dropdown-li .dropdown-menu li{padding:0 7px}.dropdown-li .dropdown-menu li .dropdown-item{overflow:hidden}.nav-bar .single-item a{gap:3px;padding:5px;}.travel-style .nav-item .nav-link{font-size:14px;padding:0;padding-right:5px;background:#fff;}.hero-cap h1,.section-title h2,.section-title-left h2{font-size:28px}.hero-section .hero-content{align-items:flex-start;margin-top:50px}.hero-section{height:calc(100vh - 200px)}.bg-gray .col-lg-6.col-sm-4.d-flex.justify-content-end.align-items-center{justify-content:flex-start!important}.blog-card-three.blog-list-card{margin-bottom:20px}.faq-accordion{padding:0 0 30px}.faq-box,.tour-details-info{flex-direction:column}.hero-section .hero-content .hero-details h1{margin-top:30px;width:100%;margin-bottom:20px;font-size:30px;line-height:1.25;font-weight:500}.box-info-tour,.exclude-title,.include-title,.map-box,.section-title p{width:100%!important}.tour-heading h1{font-size:26px;line-height:1.4}.home-about-section .about-content .section-title p{margin:auto}.category-cover{height:350px!important;min-height:350px!important}.category-cover-Details,.gallery-item img{height:300px!important}.tour-nav h3{padding:5px!important}.highlight-list,.tour-heading{flex-wrap:wrap}.beforeYouTravel-notes,.hightlight-notes{flex:1;min-width:50%!important}.tour-nav h3 a{font-size:14px!important;word-wrap:break-word}.box-info-tour .tour-info-group{margin-bottom:15px;padding:10px}.tour-info-group .info-item p{margin-right:5px!important}.map-box .tour-location iframe{height:400px!important}.box-info-tour{flex-wrap:wrap!important}.nav-bar .single-item:first-child{border:none}.footer .copyright{padding-bottom:100px}.travel-tab-btn{padding:5px;font-size:12px;word-break:break-word}.travel-tab{display:flex;flex-wrap:nowrap}.category-cover-img img{height:175px!important}.desc{max-height:200px}.highlight-box{margin-right:0}.footer .newsletter .form-control,.tour-overview-text{padding:0!important}.box-info-tour{margin:0!important}.block__hotel__view,.footer .newsletter{margin-bottom:30px}.map-box .tour-location{min-width:100%}.itinerary-door{right:0;font-size:12px!important;width:100px}.responstable td{display:table-cell!important}.accordion-two .accordion-item .accordion-button{width:95%}.accordion-two .accordion-item .accordion-button:after{right:-10%!important}.tour-heading h2{font-size:30px}.modal.fade.show{z-index:2000000}.modal.fade.show .modal-content{width:96%;position:absolute;top:5%;bottom:5%;left:2%;right:2%;overflow:scroll}.modal.fade.show .modal-body img{height:200px!important}.nav-bar .single-item p{font-size:13px;font-weight:600}.news-btn{top:75%!important;left:0;right:0!important;margin:0!important}.blog-head-img img{height:300px}.mobile-about{display:block!important}}
.tours-card .desc p {
    font-size: 16px;
}
.home-about-section p, .tab-section p{
    font-size: 16px;
}
.package-card {
    height: 680px;
}

/* ===================== Homepage hero redesign (left-aligned + badge) =====================
   Overlay: existing teal bottom-fade stays on .hero-section::before (app.min.css, UNCHANGED).
   New left-dark gradient is added on .hero-section::after (confirmed unused) -> purely additive.
   Loaded after app.min.css, so equal-specificity selectors below win. */

/* New left-dark overlay (desktop default: horizontal). z-index 3 = above <img>(2), below content(20). */
.hero-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(90deg,
        rgba(8,40,41,.82) 0%,
        rgba(8,40,41,.5) 35%,
        rgba(8,40,41,.12) 62%,
        rgba(8,40,41,0) 85%);
}

/* Left-align the column (all widths). The line-51 mobile rules don't set justify-content
   or text-align, so this composes with them rather than overriding them. */
.hero-section .hero-content{
    justify-content:flex-start;
    text-align:left;
}
.hero-section .hero-content .hero-details{
    max-width:750px;
}

/* Readability shadows (all widths) */
.hero-section .hero-content .hero-details h1{
    text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.hero-section .hero-content .hero-details span.mt-20{
    text-shadow:0 1px 10px rgba(0,0,0,.45);
}

/* Badge pill. Specificity (0,4,0) beats the generic `.hero-section .hero-content .hero-details span`
   (0,3,1), so the badge is NOT restyled by that rule. The amber dot is the ::before; the 8px gap
   spaces it from the text. */
.hero-section .hero-content .hero-details .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:7px 16px;
    border-radius:50px;
    margin-bottom:22px;
}
.hero-section .hero-content .hero-details .hero-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--second-color);
    flex:0 0 auto;
}

/* Desktop sizing only (>=769px) so the existing <=768 / <=575.98 mobile h1 rules
   (responsive.css line 51: width:100%; font-size:30px) stay intact. */
@media (min-width:769px){
    .hero-section .hero-content .hero-details h1{
        width:auto;
        margin:0;
        font-size:44px;
        line-height:1.3;
        font-weight:600;
    }
    .hero-section .hero-content .hero-details span.mt-20{
        font-size:20px;
        margin-top:18px;
    }
    /* Optional subtle hover lift — SAFE: transforms the <a>, while the existing fill
       animation transforms the inner <span>s (independent elements). The existing
       .btn-effect{transition:.5s} animates it. Scoped to the hero. Delete to drop. */
    .hero-section .cta-box .btn-effect:hover{
        transform:translateY(-2px);
    }
}

/* Mobile (<=768px): make the overlay vertical so the narrow left column stays readable,
   and let the details use full width. Does not touch the line-51 h1/align-items rules. */
@media (max-width:768px){
    .hero-section::after{
        background:linear-gradient(180deg,
            rgba(8,40,41,.40) 0%,
            rgba(8,40,41,.70) 60%,
            rgba(8,40,41,.85) 100%);
    }
    .hero-section .hero-content .hero-details{
        max-width:100%;
    }
}
/* =================== end homepage hero redesign =================== */

/* ===================== Nav + button tweaks (overrides) =====================
   Loaded after bootstrap.min.css + app.min.css; selectors match the originals'
   specificity so these win on the cascade. (.desc intentionally NOT touched.) */
.nav-menu-bar{ height:auto; }
.navbar-brand{ max-width:200px; }
.navbar-brand img{ height:auto; max-width:100%; }
.navbar-expand-lg .navbar-nav .nav-link{ padding-left:.75rem; padding-right:.75rem; }
.hero-section .cta-box .btn-effect{ padding:10px 20px; }
/* =================== end nav + button tweaks =================== */

/* ===================== Contact FAB (WhatsApp + Tawk chat) — DESKTOP ONLY =====================
   Hidden <769px so mobile keeps Tawk's native launcher (br) + the existing mobile bottom bar.
   Tawk's launcher is hidden on desktop only via Tawk_API (footer.blade.php) -> no double bubble. */
.edt-fab{ display:none; }
@media (min-width:769px){
    .edt-fab{ position:fixed; right:24px; bottom:24px; z-index:9990; display:block; }
    .edt-fab-toggle{ position:relative; width:60px; height:60px; border:0; border-radius:50%;
        background:var(--main-color); color:#fff; font-size:24px; cursor:pointer;
        box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .25s ease, background .25s ease; }
    .edt-fab-toggle:hover{ transform:scale(1.06); }
    .edt-fab.is-open .edt-fab-toggle{ background:var(--second-color); }
    .edt-fab-badge{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
        border-radius:10px; background:#e2452e; color:#fff; font-size:12px; font-weight:700;
        line-height:20px; text-align:center; }
    .edt-fab-options{ position:absolute; right:0; bottom:74px; display:flex; flex-direction:column;
        gap:12px; opacity:0; visibility:hidden; transform:translateY(10px);
        transition:opacity .25s ease, transform .25s ease, visibility .25s; }
    .edt-fab.is-open .edt-fab-options{ opacity:1; visibility:visible; transform:translateY(0); }
    .edt-fab-opt{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
        padding:10px 16px; border:0; border-radius:50px; background:#fff; color:var(--black-color);
        font-size:15px; font-weight:600; cursor:pointer; text-decoration:none;
        box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .2s ease, color .2s ease; }
    .edt-fab-opt:hover{ transform:translateX(-3px); color:var(--main-color); }
    .edt-fab-opt i{ font-size:20px; }
    .edt-fab-wa i{ color:#25d366; }
    .edt-fab-chat i{ color:var(--main-color); }
}
/* =================== end contact FAB =================== */

/* tailor-made H1 fix — keep .tailor-heading identical after the h2->h1 tag change
   (h1 element defaults differ: weight 700 vs 600, conflicting font-size, possible color). */
.tailor-heading{ font-size:40px; font-weight:600; color:inherit; }
/* end tailor-made H1 fix */

/* ===================== Category / Subcategory hero (.cat-hero) =====================
   Mirrors the homepage hero values (left white H1 + badge + dark-left overlay + teal
   bottom-fade), but a SEPARATE class so homepage/category heroes stay independent.
   Lives inside .container; keeps the original banner's rounded corners. */
.cat-hero{ position:relative; overflow:hidden; border-radius:15px; margin-bottom:40px; }
.cat-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* teal bottom-fade (same values as homepage .hero-section::before) */
.cat-hero::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:80%; z-index:2;
    pointer-events:none; background:linear-gradient(0deg,#128e8f 0,rgba(255,255,255,0) 70%); }
/* left-dark overlay (same values as homepage .hero-section::after) */
.cat-hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, rgba(8,40,41,.82) 0%, rgba(8,40,41,.5) 35%, rgba(8,40,41,.12) 62%, rgba(8,40,41,0) 85%); }
.cat-hero-content{ position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center;
    height:100%; max-width:750px; }
.cat-hero-content h1{ color:var(--white-color); margin:0; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.cat-hero-content .cat-hero-desc{ color:#fff; font-size:18px; line-height:1.3; font-weight:400; margin:5px 0 0; text-shadow:0 1px 10px rgba(0,0,0,.45); }
/* badge — same pill as the homepage .hero-badge (scoped to .cat-hero) */
.cat-hero-content .hero-badge{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:13px;
    font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:7px 16px; border-radius:50px; margin-bottom:18px; }
.cat-hero-content .hero-badge::before{ content:""; width:7px; height:7px; border-radius:50%;
    background:var(--second-color); flex:0 0 auto; }

@media (min-width:769px){
    .cat-hero{ height:470px; }
    .cat-hero-content{ padding:0 40px; }
    .cat-hero-content h1{ font-size:44px; line-height:1.3; font-weight:600; }
}
@media (max-width:768px){
    .cat-hero{ height:240px; margin-bottom:24px; }
    .cat-hero-content{ padding:0 20px; max-width:100%; }
    .cat-hero-content h1{ font-size:30px; line-height:1.25; font-weight:600; }
    .cat-hero-content .cat-hero-desc{ font-size:15px; margin-top:16px; }
    .cat-hero::after{ background:linear-gradient(180deg, rgba(8,40,41,.4) 0%, rgba(8,40,41,.7) 60%, rgba(8,40,41,.85) 100%); }
}
/* category-page section-title + .desc tweaks — SCOPED to .tours-page / .category-cards only (NOT global) */
.tours-page .section-title p,
.category-cards .section-title p{ color:#333; font-size:16px; line-height:1.5; font-weight:400; letter-spacing:0; }
.tours-page .section-title h2,
.category-cards .section-title h2{ color:var(--black-color); text-transform:capitalize; font-size:30px; font-weight:600; margin-bottom:0; line-height:1.3; }
.tours-page .desc,
.category-cards .desc{ max-height:110px; }
/* keep the read-more expand working under the scoped collapse above (0,3,0 > 0,2,0) */
.tours-page .desc.show,
.category-cards .desc.show{ max-height:1500px; }
/* =================== end category hero =================== */