:root {
    --vf-primary: #075985;
    --vf-primary-2: #0e7490;
    --vf-accent: #f97316;
    --vf-green: #0f9f86;
    --vf-ink: #0f2744;
    --vf-muted: #62748a;
    --vf-soft: #f3f8fb;
    --vf-sand: #fff7ed;
    --vf-white: #fff;
    --vf-border: #dbe7ef;
    --vf-shadow: 0 16px 45px rgba(15, 39, 68, .10);
    --vf-radius: 24px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--vf-ink);
    background: #fff;
    line-height: 1.6;
    margin: 0
}

.vf-topbar {
    background: #082f49;
    color: #e0f2fe;
    font-size: 13px;
    padding: 8px 0
}

.vf-topbar strong {
    color: #fff
}

.vf-navbar {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(15, 39, 68, .07);
    position: sticky;
    top: 0;
    z-index: 1000
}

.vf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--vf-ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.4px
}

.vf-brand:hover {
    color: var(--vf-primary)
}

.vf-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--vf-primary), var(--vf-green));
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 18px rgba(7, 89, 133, .22)
}

.vf-brand b {
    color: var(--vf-accent)
}

.vf-nav-link {
    font-weight: 700;
    color: #334e68 !important;
    padding: 26px 12px !important
}

.vf-nav-link:hover,
.vf-nav-link.active {
    color: var(--vf-primary) !important
}

.vf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    padding: 12px 20px;
    font-weight: 800;
    text-decoration: none;
    border: 0;
    transition: .2s ease;
    cursor: pointer
}

.vf-btn-primary {
    background: var(--vf-accent);
    color: #fff;
    box-shadow: 0 10px 22px rgba(249, 115, 22, .24)
}

.vf-btn-primary:hover {
    background: #ea580c;
    color: #fff;
    transform: translateY(-1px)
}

.vf-btn-outline {
    border: 1px solid var(--vf-border);
    background: #fff;
    color: var(--vf-primary)
}

.vf-btn-outline:hover {
    border-color: var(--vf-primary);
    color: var(--vf-primary)
}

.vf-btn-dark {
    background: var(--vf-ink);
    color: #fff
}

.vf-btn-dark:hover {
    background: #173f67;
    color: #fff
}

.vf-hero {
    min-height: 650px;
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden
}

.vf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 38, 65, .88) 0%, rgba(5, 38, 65, .66) 42%, rgba(5, 38, 65, .18) 75%, rgba(5, 38, 65, .06) 100%)
}

.vf-hero .container {
    position: relative;
    z-index: 2
}

.vf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px
}

.vf-hero h1 {
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    color: #fff;
    letter-spacing: -2.3px;
    font-weight: 900;
    margin: 18px 0 16px;
    max-width: 780px
}

.vf-hero p {
    color: #e6f4ff;
    font-size: 19px;
    max-width: 650px
}

.vf-searchbox {
    background: #fff;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
    margin-top: 30px;
    max-width: 1040px
}

.vf-field label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #6a7c8f;
    margin-bottom: 5px
}

.vf-field input,
.vf-field select,
.vf-form-control {
    width: 100%;
    height: 48px;
    border: 1px solid var(--vf-border);
    border-radius: 12px;
    padding: 0 13px;
    color: var(--vf-ink);
    background: #fff;
    outline: none
}

.vf-field input:focus,
.vf-field select:focus,
.vf-form-control:focus {
    border-color: #67a9cf;
    box-shadow: 0 0 0 4px rgba(14, 116, 144, .09)
}

textarea.vf-form-control {
    height: auto;
    min-height: 130px;
    padding-top: 12px
}

.vf-section {
    padding: 86px 0
}

.vf-section-soft {
    background: var(--vf-soft)
}

.vf-section-sand {
    background: var(--vf-sand)
}

.vf-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px
}

.vf-section-head h2 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: -1.2px;
    margin: 4px 0;
    color: var(--vf-ink)
}

.vf-eyebrow {
    font-weight: 900;
    color: var(--vf-primary-2);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px
}

.vf-section-head p {
    color: var(--vf-muted);
    max-width: 620px;
    margin: 0
}

.vf-card {
    background: #fff;
    border: 1px solid var(--vf-border);
    border-radius: var(--vf-radius);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(15, 39, 68, .05);
    transition: .25s ease
}

.vf-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--vf-shadow)
}

.vf-card-img {
    height: 235px;
    width: 100%;
    object-fit: cover;
    display: block
}

.vf-card-body {
    padding: 20px
}

.vf-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #e7f7f3;
    color: #087f6b;
    font-weight: 900;
    font-size: 11px;
    padding: 6px 10px;
    text-transform: uppercase;
    letter-spacing: .4px
}

.vf-badge-orange {
    background: #fff0e6;
    color: #c2410c
}

.vf-stars {
    color: #f59e0b;
    letter-spacing: 1px;
    font-size: 13px
}

.vf-location {
    font-size: 13px;
    color: var(--vf-muted);
    font-weight: 700
}

.vf-card h3,
.vf-card h4 {
    font-weight: 900;
    letter-spacing: -.5px;
    margin: 7px 0 9px
}

.vf-card p {
    color: var(--vf-muted);
    font-size: 14px
}

.vf-amenities {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 14px 0
}

.vf-chip {
    font-size: 11px;
    font-weight: 800;
    background: #f3f7fa;
    color: #526b7e;
    border-radius: 999px;
    padding: 5px 9px
}

.vf-price small {
    display: block;
    color: var(--vf-muted);
    font-size: 11px
}

.vf-price strong {
    font-size: 22px;
    color: var(--vf-ink)
}

.vf-destination {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    min-height: 330px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    box-shadow: var(--vf-shadow)
}

.vf-destination::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 32, 56, .05) 20%, rgba(4, 32, 56, .88) 100%)
}

.vf-destination-content {
    position: relative;
    z-index: 1;
    padding: 26px
}

.vf-destination h3 {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 6px
}

.vf-destination p {
    color: #e7f6ff;
    font-size: 14px
}

.vf-offer {
    border-radius: 28px;
    padding: 34px;
    background: linear-gradient(135deg, #082f49, #0e7490);
    color: #fff;
    position: relative;
    overflow: hidden
}

.vf-offer:after {
    content: "";
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .08);
    position: absolute;
    border-radius: 50%;
    right: -70px;
    top: -90px
}

.vf-offer h3 {
    font-size: 31px;
    font-weight: 900;
    letter-spacing: -.7px
}

.vf-offer p {
    color: #d8f3ff
}

.vf-trust {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.vf-trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #eaf7fb;
    color: var(--vf-primary);
    display: grid;
    place-items: center;
    font-size: 21px;
    flex: 0 0 auto
}

.vf-trust h5 {
    font-weight: 900;
    margin: 2px 0
}

.vf-trust p {
    color: var(--vf-muted);
    font-size: 14px;
    margin: 0
}

.vf-footer {
    background: #061f33;
    color: #bdcedb;
    padding: 68px 0 28px
}

.vf-footer .vf-brand {
    color: #fff
}

.vf-footer h5 {
    color: #fff;
    font-weight: 900;
    margin-bottom: 15px
}

.vf-footer a {
    color: #bdcedb;
    text-decoration: none;
    display: block;
    margin: 7px 0
}

.vf-footer a:hover {
    color: #fff
}

.vf-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 35px;
    padding-top: 20px;
    font-size: 13px
}

.vf-page-hero {
    padding: 115px 0 92px;
    color: #fff;
    background-size: cover;
    background-position: center;
    position: relative
}

.vf-page-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 38, 65, .9), rgba(5, 38, 65, .48))
}

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

.vf-page-hero h1 {
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 900;
    letter-spacing: -1.8px;
    margin-bottom: 10px
}

.vf-page-hero p {
    max-width: 720px;
    font-size: 18px;
    color: #e1f2ff
}

.vf-breadcrumb {
    font-size: 13px;
    color: #d4eafa
}

.vf-breadcrumb a {
    color: #fff;
    text-decoration: none
}

.vf-panel {
    background: #fff;
    border: 1px solid var(--vf-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 12px 36px rgba(15, 39, 68, .06)
}

.vf-filter {
    position: sticky;
    top: 94px
}

.vf-summary {
    position: sticky;
    top: 94px
}

.vf-listing-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    overflow: hidden
}

.vf-listing-card img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover
}

.vf-listing-card .vf-card-body {
    padding: 24px
}

.vf-tour-hero {
    min-height: 520px;
    background-size: cover;
    background-position: center;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end
}

.vf-tour-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(4, 32, 56, .84))
}

.vf-tour-hero-content {
    position: relative;
    color: #fff;
    padding: 40px;
    z-index: 1
}

.vf-tour-hero h1 {
    font-size: 52px;
    font-weight: 900
}

.vf-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
    color: #3d566b
}

.vf-check:before {
    content: "✓";
    width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ddf7ef;
    color: #087f6b;
    font-weight: 900;
    flex: 0 0 auto
}

.vf-form-section h3 {
    font-weight: 900;
    font-size: 22px;
    margin: 0 0 18px
}

.vf-form-row {
    margin-bottom: 16px
}

.vf-form-row label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
    color: #62748a;
    letter-spacing: .5px;
    margin-bottom: 6px;
    display: block
}

.vf-error {
    font-size: 12px;
    color: #c2410c;
    margin-top: 4px;
    display: none
}

.is-invalid+.vf-error {
    display: block
}

.vf-form-control.is-invalid {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, .08)
}

.vf-payment-icons {
    display: flex;
    gap: 8px
}

.vf-payment-icon {
    border: 1px solid var(--vf-border);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    background: #fff
}

.vf-processing {
    position: fixed;
    inset: 0;
    background: rgba(5, 31, 51, .84);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.vf-processing.active {
    display: flex
}

.vf-processing-card {
    background: #fff;
    border-radius: 28px;
    padding: 42px;
    text-align: center;
    width: min(460px, 95vw);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .3)
}

.vf-spinner {
    width: 54px;
    height: 54px;
    border: 5px solid #dceaf2;
    border-top-color: var(--vf-primary);
    border-radius: 50%;
    margin: 0 auto 22px;
    animation: vfspin .8s linear infinite
}

@keyframes vfspin {
    to {
        transform: rotate(360deg)
    }
}

.vf-article {
    max-width: 880px;
    margin: 0 auto
}

.vf-article h2 {
    font-size: 32px;
    font-weight: 900;
    margin-top: 36px
}

.vf-article p,
.vf-article li {
    color: #526b7e
}

.vf-review {
    padding: 26px;
    background: #fff;
    border: 1px solid var(--vf-border);
    border-radius: 22px;
    height: 100%
}

.vf-review strong {
    display: block;
    margin-top: 18px
}

.vf-auth {
    min-height: 74vh;
    display: grid;
    place-items: center;
    padding: 65px 0;
    background: linear-gradient(135deg, #eef8fb, #fff7ed)
}

.vf-auth-card {
    background: #fff;
    border-radius: 28px;
    padding: 34px;
    box-shadow: var(--vf-shadow);
    width: min(500px, 92vw);
    border: 1px solid var(--vf-border)
}

.vf-auth-card h1 {
    font-size: 32px;
    font-weight: 900
}

.vf-sidebar-links a {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--vf-border);
    text-decoration: none;
    color: #39566d;
    font-weight: 800
}

.vf-sitemap a {
    display: block;
    padding: 10px 13px;
    background: #fff;
    border: 1px solid var(--vf-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--vf-primary);
    font-weight: 800;
    margin-bottom: 9px
}

.vf-favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .94);
    display: grid;
    place-items: center;
    color: #38566f;
    z-index: 2
}

.vf-favorite.active {
    background: #fff0e6;
    color: #ea580c
}

.vf-relative {
    position: relative
}

.vf-empty {
    padding: 55px;
    text-align: center;
    border: 1px dashed #bad1df;
    border-radius: 24px;
    background: #f9fcfe
}

.vf-cta {
    border-radius: 32px;
    background: linear-gradient(135deg, #ffedd5, #e0f2fe);
    padding: 48px
}

.vf-cta h2 {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -1px
}

.vf-small-note {
    font-size: 12px;
    color: #71859a
}

.vf-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px
}

.vf-tab {
    border: 1px solid var(--vf-border);
    background: #fff;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    color: #4c667a;
    text-decoration: none
}

.vf-tab:hover,
.vf-tab.active {
    background: var(--vf-ink);
    color: #fff;
    border-color: var(--vf-ink)
}

@media(max-width:991px) {
    .vf-hero {
        min-height: 720px
    }

    .vf-nav-link {
        padding: 10px 0 !important
    }

    .vf-listing-card {
        grid-template-columns: 1fr
    }

    .vf-listing-card img {
        height: 260px
    }

    .vf-filter,
    .vf-summary {
        position: static
    }

    .vf-tour-hero h1 {
        font-size: 40px
    }
}

@media(max-width:575px) {
    .vf-section {
        padding: 62px 0
    }

    .vf-hero h1 {
        font-size: 43px;
        letter-spacing: -1.4px
    }

    .vf-page-hero h1 {
        font-size: 40px
    }

    .vf-section-head {
        display: block
    }

    .vf-card-img {
        height: 210px
    }

    .vf-cta {
        padding: 30px
    }

    .vf-cta h2 {
        font-size: 32px
    }

    .vf-tour-hero {
        min-height: 430px
    }

    .vf-tour-hero-content {
        padding: 26px
    }

    .vf-tour-hero h1 {
        font-size: 36px
    }
}