:root {
    --brand-red: #d3212d;
    --brand-dark: #1a1a1a;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #222;
    background: #fff;
}

a { color: var(--brand-red); }
a:hover { color: #a51a24; }

.btn-danger {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}
.btn-danger:hover {
    background-color: #a51a24;
    border-color: #a51a24;
}

.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    color: var(--brand-red) !important;
}

/* Hero */
.hero-carousel {
    position: relative;
    height: 70vh;
    min-height: 500px;
    overflow: hidden;
}
.hero-carousel .carousel-item {
    height: 70vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-carousel .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
}
.hero-caption {
    position: absolute;
    bottom: 15%;
    left: 0; right: 0;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
}
.hero-caption h1 {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hero-caption p {
    font-size: 1.15rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Search bar */
.search-bar {
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    padding: 0.5rem;
    max-width: 900px;
    margin: -40px auto 0;
    position: relative;
    z-index: 5;
}
.search-bar .form-control,
.search-bar .form-select {
    border: none;
    box-shadow: none !important;
}

/* Tour cards */
.tour-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
    height: 100%;
}
.tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.tour-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}
.tour-card .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 0.75rem;
    padding: 0.4rem 0.65rem;
}
.tour-card .price {
    font-weight: 700;
    color: var(--brand-red);
}

/* Destination cards */
.destination-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    color: #fff;
    text-decoration: none;
    aspect-ratio: 3 / 4;
}
.destination-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.destination-card:hover img { transform: scale(1.05); }
.destination-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75));
}
.destination-card .name {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 2;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Section headings */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.section-subtitle {
    color: #666;
    margin-bottom: 2rem;
}

/* Promo banner */
.promo-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
}
.promo-banner .promo-image {
    background-size: cover;
    background-position: center;
    min-height: 320px;
}
.promo-banner .promo-content {
    background: var(--brand-red);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Benefits */
.benefit-item {
    text-align: center;
    padding: 1rem;
}
.benefit-item i {
    font-size: 2rem;
    color: var(--brand-red);
    display: block;
    margin-bottom: 0.75rem;
}



/* ============================================================
   Mega menu — Destinations dropdown
   ============================================================ */

.site-header .navbar-nav > .dropdown.position-static {
    position: static !important;
}

.mega-menu {
    left: 0;
    right: 0;
    margin-top: 0;
    border-radius: 0;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.mega-menu .dropdown-item {
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: 4px;
}

.mega-menu .dropdown-item:hover {
    background-color: #f5f5f5;
    color: var(--brand-red) !important;
}

.mega-menu h6 {
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

@media (max-width: 991.98px) {
    .mega-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 1rem 1rem 1rem !important;
        max-height: none;
        overflow: visible;
    }
    .mega-menu .row {
        display: block;
    }
    .mega-menu .col-6,
    .mega-menu .col-md-3 {
        width: 100%;
        margin-bottom: 1rem;
    }
    .mega-menu h6 {
        margin-top: 0.5rem;
    }
}

@media (min-width: 992px) {
    .mega-menu {
        animation: megaFadeIn 0.15s ease-in-out;
    }
    @keyframes megaFadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}


/* Footer */
.site-footer a { color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; }





/* ============================================================
   Sticky footer — keeps footer at viewport bottom on short pages
   ============================================================ */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Content wrapper grows to fill space, pushing footer down */
body > main,
body > .container,
body > .container-fluid {
    flex: 1 0 auto;
}

/* Footer pinned to bottom of flex container */
footer.site-footer {
    margin-top: auto;
    flex-shrink: 0;
}
/* Travel editorial refresh: clean, image-led adventure travel aesthetic */
:root { --brand-red:#d9252a; --brand-dark:#17221e; --brand-ink:#202522; --brand-muted:#68736d; --brand-cream:#f7f5ef; --brand-line:#e7e8e3; }
body { color:var(--brand-ink); line-height:1.6; }
.site-header { position:relative; z-index:50; }
.site-header .navbar { padding:.8rem 0; border-bottom:1px solid var(--brand-line)!important; }
.navbar-brand { letter-spacing:-.04em; font-size:1.45rem; }
.site-header .nav-link { color:#202522; font-weight:600; padding:.65rem .8rem!important; }
.site-header .nav-link:hover { color:var(--brand-red); }
.btn { border-radius:999px; font-weight:700; padding:.7rem 1.2rem; }
.btn-danger { background:var(--brand-red); border-color:var(--brand-red); }
.btn-danger:hover { background:#b71f25; border-color:#b71f25; transform:translateY(-1px); }
.btn-outline-danger { color:var(--brand-red); border-color:var(--brand-red); }
.hero-carousel,.hero-carousel .carousel-item { min-height:560px; height:min(76vh,760px); }
.hero-carousel .carousel-item::before { background:linear-gradient(90deg,rgba(9,22,17,.72) 0%,rgba(9,22,17,.30) 55%,rgba(9,22,17,.04) 100%); }
.hero-caption { left:max(5%,calc((100vw - 1240px)/2)); right:auto; bottom:15%; max-width:720px; text-align:left; }
.hero-caption h1 { max-width:700px; font-size:clamp(2.5rem,5vw,4.8rem); line-height:1.04; letter-spacing:-.045em; text-shadow:none; }
.hero-caption p { max-width:580px; font-size:clamp(1rem,1.7vw,1.3rem); text-shadow:none; }
.search-bar { border:1px solid rgba(20,35,28,.08); border-radius:18px; box-shadow:0 16px 45px rgba(21,32,25,.15); padding:1rem; }
.search-bar .form-control,.search-bar .form-select { min-height:50px; }
.section-title { color:#202722; font-weight:800; letter-spacing:-.035em; font-size:clamp(1.7rem,3vw,2.5rem); }
.section-subtitle { color:var(--brand-muted); }
.tour-card { border:1px solid var(--brand-line); border-radius:16px; box-shadow:0 3px 12px rgba(20,30,25,.035); }
.tour-card:hover { box-shadow:0 18px 40px rgba(20,30,25,.12); transform:translateY(-5px); }
.tour-card img { aspect-ratio:4/3; }
.destination-card { display:block; position:relative; overflow:hidden; border-radius:14px; }
.destination-card img { transition:transform .35s ease; }
.destination-card:hover img { transform:scale(1.06); }
.benefit-item { padding:1.4rem 1rem; height:100%; border:1px solid var(--brand-line); border-radius:16px; background:#fff; }
.benefit-item i { color:var(--brand-red); font-size:1.8rem; margin-bottom:.8rem; display:inline-block; }
.promo-banner { border-radius:22px; overflow:hidden; }
footer { margin-top:auto; }
footer a { text-decoration:none; }
.form-control,.form-select { border-color:#dfe3de; border-radius:10px; padding:.7rem .85rem; }
.form-control:focus,.form-select:focus { border-color:#bdc9bf; box-shadow:0 0 0 .2rem rgba(42,88,58,.1); }
@media (max-width:767.98px) { .hero-carousel,.hero-carousel .carousel-item { height:66vh; min-height:470px; } .hero-caption { left:1.25rem; right:1.25rem; bottom:13%; } .hero-caption h1 { font-size:clamp(2.1rem,10vw,3.2rem); } .search-bar { border-radius:16px; margin-top:-24px; } .section-title { font-size:1.8rem; } }
