*{
    padding: 0;
    margin: 0;

}

/* =========================
   Light Mode
========================= */

body {
    background-color: #ffffff;
    color: #111111;
    transition: 0.3s ease;
}

.navbar {
    background: #f4f4f4;
    backdrop-filter: blur(12px);
    border: 1px solid #0000000d;
    border-radius: 0px;
    position: relative;
    z-index: 1001;
    overflow: visible;
}

header {
    position: relative;
    z-index: 20;
}

.nav-link,
.navbar-brand,
footer a,
.theme-toggle-btn,
.bi,
input,
.form-control,
i {
    color: #111111 !important;
    transition: 0.3s ease;
}

button,
.btn {
    background-color: transparent;
    color: #111111;
    transition: 0.3s ease;
}

.bi-search,
.bi-search:hover {
    color: #ffffff !important;
}

footer {
    border-top: 1px solid #0000000d;
    
}

.footer-shell {
    padding-bottom: clamp(120px, 24vw, 300px);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.6rem;
}

.footer-links a {
    white-space: nowrap;
    font-size: 0.95rem;
}

.footer-wordmark {
    bottom: clamp(-48px, -8vw, -110px);
    font-size: clamp(160px, 42vw, 300px);
    font-weight: 700;
    white-space: nowrap;
    opacity: 0.08;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .hero-section {
        min-height: calc(100svh + 3rem);
        --hero-offset: 4.5rem;
        margin-top: calc(-1 * var(--hero-offset));
        padding-top: var(--hero-offset);
        margin-left: 0;
        margin-right: 0;
        z-index: 0;
    }

    .navbar-collapse {
        position: relative;
        z-index: 1002;
    }

    .hero-section .hero-bg img {
        object-position: center top;
    }

    .hero-section .container {
        padding-top: 1.5rem !important;
    }

    .home-hero-title {
        font-size: clamp(3rem, 18vw, 4.25rem);
        line-height: 0.95;
        margin-bottom: 1rem;
    }

    .home-hero-lead {
        font-size: 1rem;
        line-height: 1.55 !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
        padding-inline: 0.5rem;
    }

    .home-search-shell {
        padding: 1rem !important;
    }

    .home-search-shell .border {
        padding: 0.9rem 1rem !important;
    }

    .home-search-shell .row {
        --bs-gutter-y: 0.75rem;
    }

    .home-search-shell button[type="submit"] {
        width: 100%;
        height: 56px !important;
        border-radius: 999px !important;
    }

    .home-search-shell .col-12.col-md-auto {
        width: 100%;
    }

    .footer-shell {
        overflow: visible;
        padding-bottom: clamp(72px, 20vw, 120px);
    }

    .footer-links {
        justify-content: center;
    }

    .footer-links a {
        font-size: 0.9rem;
    }

    .footer-wordmark {
        bottom: -14px;
        font-size: clamp(92px, 30vw, 160px);
        line-height: 0.9;
    }
}

i:hover,
.nav-link:hover,
footer a:hover,
.theme-toggle-btn:hover {
    color: #11111180 !important;
}



.no-hover:hover,
.no-hover i:hover,
.no-hover span:hover {
    color: inherit !important;
}




.hero-bg {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: -1;
    pointer-events: none;

}


.hero-section {
    position: relative;
    min-height: calc(100svh + 5rem);
    width: 100vw;
    max-width: 100vw;
    --hero-offset: clamp(5.5rem, 8vw, 8rem);
    margin-top: calc(-1 * var(--hero-offset));
    padding-top: var(--hero-offset);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* remove extra bottom margin so following sections sit closer */
    margin-bottom: 0;
}


.hero-section .container {
    position: relative;
    z-index: 1;
}


.hero-bg img {

    width: 100%;
    height: 100%;
    border-radius: 0px 0px 50px 50px;
    object-fit: cover;
    object-position: center;

}


/* OVERLAY */

.hero-bg::after {

    content: "";
    border-radius: 0px 0px 50px 50px;
    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;

}




.text-light::placeholder {
    color: #ffffff80 !important;
}


.dash {
    color: #11111127;
}

.vm-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
}

.vm-quote {
    position: absolute;
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(4.5rem, 15vw, 12rem);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.vm-quote-start {
    top: -0.34em;
    left: 0.18em;
}

.vm-quote-end {
    right: 0.22em;
    bottom: -0.36em;
    transform: rotate(180deg);
}

.vm-text {
    position: relative;
    z-index: 1;
    padding-top: 0.35rem;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.anim-vm-card {
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 760ms cubic-bezier(.2,.8,.2,1) 0.15s both;
    will-change: transform, opacity;
}

.anim-vm-text {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 820ms cubic-bezier(.2,.8,.2,1) 0.35s both;
    will-change: transform, opacity;
}

@media (max-width: 767.98px) {
    .vm-card {
        min-height: auto;
    }

    .vm-quote {
        font-size: clamp(3.2rem, 12vw, 5.8rem);
    }

    .vm-quote-start {
        top: -0.26em;
        left: 0.14em;
    }

    .vm-quote-end {
        right: 0.18em;
        bottom: -0.28em;
    }

    .vm-text {
        padding-top: 0.45rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim-vm-card,
    .anim-vm-text {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.text-dark:hover {
    color: #00000080 !important;
}

.featured-cities-header {
    /* reduce space between hero and featured section */
    padding-top: clamp(0.75rem, 2.5vw, 1.5rem);
    margin-top: 0;
}



/* =========================
   Dark Mode
========================= */

body.dark {
    background-color: #121212;
    color: #f5f5f5;
}


/* Navbar */

body.dark .navbar {
    background: #1a1a1a;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.05);
}

body.dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Nav pills active state */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #C8A97E !important;
    color: #111111 !important;
}

/* Primary buttons */
.btn-dark,
.btn-dark:focus {
    background-color: #C8A97E !important;
    border-color: #C8A97E !important;
    color: #111111 !important;
}

.btn-dark:hover {
    background-color: #b8976a !important;
    border-color: #b8976a !important;
    color: #111111 !important;
}

.btn-outline-dark {
    border-color: #C8A97E !important;
    color: #C8A97E !important;
}

.btn-outline-dark:hover {
    background-color: #C8A97E !important;
    border-color: #C8A97E !important;
    color: #111111 !important;
}
/* Links */

body.dark .nav-link,
body.dark .navbar-brand,
body.dark footer a,
body.dark .theme-toggle-btn,
body.dark .bi,
body.dark input,
body.dark .form-control,
body.dark i,
body.dark .bi-search {
    color: #f5f5f5 !important;
}

body.dark button,
body.dark .btn,
body.dark #profile .list-group-item,
body.dark .list-group-item-action {
    background-color: transparent;
    border: 1px solid #f5f5f5;
    color: white;
}


body.dark .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Hover */

body.dark .nav-link:hover,
body.dark footer a:hover,
body.dark .theme-toggle-btn:hover,
body.dark .bi:hover,
body.dark input:hover,
body.dark .form-control:hover,
body.dark i:hover {
    color: #ffffff80 !important;
}



/* Footer */

body.dark footer {
    border-color: rgba(255,255,255,0.08) !important;
}


/* Giant Background Logo */

body.dark footer p {
    color: rgba(255, 255, 255, 0.808) !important;
}


/* Cards / Containers */

body.dark .card,
body.dark .container-fluid {
    background-color: #1a1a1a;
    color: #f5f5f5;
}


/* Inputs */

body.dark input,
body.dark textarea,
body.dark select {
    background-color: #18181b;
    border: 1px solid rgba(255,255,255,0.08);
    color: white;
}

body.dark input::placeholder,
body.dark textarea::placeholder,
body.dark select::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body.dark input#datePicker{
    color: white;
}

body.dark button,
body.dark .btn {
    background-color: black;    
    color: white;
}

body.dark button:hover,
body.dark .btn:hover {
    background-color: #000000;
    color: #000000;
}

body.dark .text-transparent {
    color: white !important;
}



body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    background-color: #18181b;
    color: white;
    box-shadow: none;
    border-color: #ffffff80;
}





/* Scrollbar */

body.dark::-webkit-scrollbar {
    width: 10px;
}

body.dark::-webkit-scrollbar-track {
    background: #111;
}

body.dark::-webkit-scrollbar-thumb {
    background: #2d2d31;
    border-radius: 10px;
}

body.dark .btn-dark,
body.dark .btn-dark:focus {
    background-color: #C8A97E !important;
    border-color: #C8A97E !important;
    color: #111111 !important;
}

body.dark .btn-dark:hover {
    background-color: #b8976a !important;
    border-color: #b8976a !important;
    color: #111111 !important;
}

body.dark .btn-outline-dark {
    border-color: #C8A97E !important;
    color: #C8A97E !important;
}

body.dark .btn-outline-dark:hover {
    background-color: #C8A97E !important;
    border-color: #C8A97E !important;
    color: #111111 !important;
}

body.dark .dash {
    color: #ffffff1f;
}

body.dark .text-dark {
    color: #ffffff !important;
}

body.dark .text-dark:hover {
    color: #ffffff80 !important;
}

/* =========================
   Logo Animation
========================= */

@keyframes logoFadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes logoPulse {
    0%, 100% {
        text-shadow: 0 0 0 rgba(200, 169, 126, 0);
    }
    50% {
        text-shadow: 0 0 15px rgba(200, 169, 126, 0.6);
    }
}

@keyframes logoHoverGlow {
    0% {
        text-shadow: 0 0 5px rgba(200, 169, 126, 0.3);
    }
    100% {
        text-shadow: 0 0 20px rgba(200, 169, 126, 0.8);
    }
}

.navbar-brand {
    animation: logoFadeInScale 0.6s ease-in-out, logoPulse 3s ease-in-out infinite;
}

/* =========================
   Hero Title / Lead Animations
   - Fade + slide up for title
   - Slight delay and slower timing for lead
   - Respects prefers-reduced-motion
========================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.995);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.anim-hero-title {
    opacity: 0;
    animation: fadeUp 700ms cubic-bezier(.2,.8,.2,1) 0.15s both;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

.anim-hero-lead {
    opacity: 0;
    animation: fadeUp 900ms cubic-bezier(.2,.8,.2,1) 0.45s both;
    animation-fill-mode: both;
    will-change: transform, opacity;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .anim-hero-title,
    .anim-hero-lead,
    .navbar-brand {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================
   Section Title Animations (Featured Cities)
   Keep text color unchanged; only animate transform/opacity
========================= */

.anim-section-title {
    opacity: 0;
    animation: fadeUp 650ms cubic-bezier(.2,.8,.2,1) 0.15s both;
    will-change: transform, opacity;
}

.anim-section-lead {
    opacity: 0;
    animation: fadeUp 750ms cubic-bezier(.2,.8,.2,1) 0.35s both;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .anim-section-title,
    .anim-section-lead {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Hero sub-section animations (Sleep Smarter / Travel Better) */
.anim-section-hero .anim-title-line {
    opacity: 0;
    transform: translateY(10px);
    display: block;
    animation: fadeUp 620ms cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i) * 0.08s + 0.1s);
    will-change: transform, opacity;
}

.anim-section-hero-lead {
    opacity: 0;
    animation: fadeUp 820ms cubic-bezier(.2,.8,.2,1) 0.28s both;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .anim-section-hero .anim-title-line,
    .anim-section-hero-lead {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================
   City Card Animations
   - Staggered entrance using --i (set from template)
   - Only animates transform/opacity; color unchanged
========================= */

.anim-city-card {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 640ms cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i) * 0.08s);
    will-change: transform, opacity;
}

/* Slightly delay cards that are in later rows for better rhythm */
.row.g-4 > .col-6:nth-child(n+5) .anim-city-card {
    animation-delay: calc(var(--i) * 0.08s + 0.12s);
}

@media (prefers-reduced-motion: reduce) {
    .anim-city-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Promo card (image card) title and lead animations */
.anim-promo-title {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 620ms cubic-bezier(.2,.8,.2,1) 0.12s both;
    will-change: transform, opacity;
}

.anim-promo-lead {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 760ms cubic-bezier(.2,.8,.2,1) 0.28s both;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .anim-promo-title,
    .anim-promo-lead {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Stats row animation (+12 / 24/7 / 4.9★) */
@keyframes statReveal {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes statGlow {
    0%, 100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 0 0 24px rgba(255, 255, 255, 0.08);
    }
}

.anim-stats-row .anim-stat-card {
    opacity: 0;
    animation: statReveal 700ms cubic-bezier(.2,.8,.2,1) both, statGlow 3.2s ease-in-out infinite;
    will-change: transform, opacity, box-shadow;
}

.anim-stats-row .col-md-4:nth-child(1) .anim-stat-card {
    animation-delay: 0.15s, 0.15s;
}

.anim-stats-row .col-md-4:nth-child(2) .anim-stat-card {
    animation-delay: 0.28s, 0.28s;
}

.anim-stats-row .col-md-4:nth-child(3) .anim-stat-card {
    animation-delay: 0.41s, 0.41s;
}

.anim-stats-row .col-md-3:nth-child(4) .anim-stat-card {
    animation-delay: 0.54s, 0.54s;
}

.anim-stats-row .anim-stat-value {
    display: inline-block;
    animation: fadeUp 700ms cubic-bezier(.2,.8,.2,1) both;
}

.anim-stats-row .col-md-4:nth-child(1) .anim-stat-value {
    animation-delay: 0.22s;
}

.anim-stats-row .col-md-4:nth-child(2) .anim-stat-value {
    animation-delay: 0.35s;
}

.anim-stats-row .col-md-4:nth-child(3) .anim-stat-value {
    animation-delay: 0.48s;
}

.anim-stats-row .col-md-3:nth-child(4) .anim-stat-value {
    animation-delay: 0.61s;
}

@media (prefers-reduced-motion: reduce) {
    .anim-stats-row .anim-stat-card,
    .anim-stats-row .anim-stat-value {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none !important;
    }
}

.navbar-brand:hover {
    animation: logoHoverGlow 0.4s ease-in-out forwards;
}

body.dark .navbar-brand:hover {
    animation: logoHoverGlow 0.4s ease-in-out forwards;
}