/* ===== CSS Variables ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --primary: #0B3B4A;
    --primary-dark: #062A35;
    --accent: #F15A24;
    --accent2: #14b8a6;
    --text: #1E2A32;
    --muted: #4F5F6F;
    --bg: #ffffff;
    --soft: #F8FAFD;
    --border: #E2E8F0;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    --shadow2: 0 20px 40px rgba(0, 0, 0, 0.12);
    --radius: 24px;
    --radius-sm: 16px;
    --headerH: 0px;
}

html {
    scroll-behavior: smooth
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px
}

section {
    padding: 72px 0
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 850;
    margin-bottom: 16px;
    letter-spacing: -0.01em
}

h3 {
    font-size: 1.4rem;
    font-weight: 800
}

p {
    color: var(--muted);
    font-size: 1.05rem
}

a {
    color: inherit;
    text-decoration: none
}

.small {
    font-size: .92rem;
    color: #6d7b8a
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 850;
    border: 0;
    cursor: pointer;
    transition: .2s ease;
    font-size: 1rem;
    line-height: 1;
}

.btn:active {
    transform: translateY(1px)
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 12px 28px rgba(241, 90, 36, 0.25);
}

.btn-primary:hover {
    background: #D94D1A;
    transform: translateY(-2px)
}

.btn-dark {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 28px rgba(11, 59, 74, 0.25);
}

.btn-dark:hover {
    background: var(--primary-dark);
    transform: translateY(-2px)
}

.full {
    width: 100%
}

/* ===== Hero Section ===== */
.hero {
    /*
   * Increase the bottom padding so that the enquiry form inside the hero section
   * has enough vertical space to be fully visible on both desktop and mobile devices.
   * The top padding remains responsive via clamp(), but the bottom padding is
   * increased from 60px to 100px. This avoids the form being cut off by the
   * subsequent section border, especially on taller forms or when viewing on
   * smaller screens.
   */
    padding: clamp(80px, 12vw, 120px) 0 120px;
    background: radial-gradient(1400px 700px at 10% 30%, rgba(20, 184, 166, 0.15), transparent 60%),
        radial-gradient(1000px 500px at 90% 40%, rgba(241, 90, 36, 0.15), transparent 60%),
        linear-gradient(135deg, #0B3B4A 0%, #155A6B 100%);
    color: #fff;
    border-bottom: 6px solid var(--accent);
    overflow: visible;
    /* Do not enforce a fixed height; allow the hero section to grow naturally
     to accommodate both the content column and the lead form. */
    min-height: auto;
}

.hero .container {
    position: relative
}

.hero-inner {
    display: grid;
    /* On desktop, allocate more space to the left content (1.2fr) and slightly
     less to the right form (0.8fr). This ratio keeps the focus on the
     packages explanation while ensuring the lead form remains prominent. */
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    /*
   * Stretch grid items vertically so that the taller column determines the row height.
   * This ensures the right-hand lead form does not get clipped or overlap the next
   * section by matching the height of the content column on larger screens.
   */
    align-items: stretch;
}

.hero h1 {
    color: #fff;
    max-width: 800px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
}

.hero-subhead {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, rgba(241, 90, 36, 0.95), rgba(20, 184, 166, 0.95));
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 850;
    font-size: 1.1rem;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    width: fit-content;
    backdrop-filter: blur(4px);
    margin: 20px 0 16px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 750;
    font-size: .95rem;
    backdrop-filter: blur(8px);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0 16px
}

.countdown {
    margin: 20px 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

/* ===== Lead Form Card ===== */
.hero-right {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    overflow: visible;
    border: 1px solid var(--border);
}

.hero-right-top {
    background: linear-gradient(120deg, #FFF8F0, #FFFFFF);
    padding: 28px 28px 20px;
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.hero-right-top .mini-title {
    font-size: 1.8rem;
    font-weight: 950;
    color: var(--primary);
    line-height: 1.2;
}

.hero-right-top .mini-sub {
    color: var(--muted);
    margin: 8px 0 20px;
    font-size: 1rem
}

.quick-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.quick {
    background: var(--soft);
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--border);
}

.quick strong {
    display: block;
    color: var(--primary);
    font-size: 1.05rem
}

.quick span {
    font-size: .9rem;
    color: var(--muted)
}

.hero-right-body {
    padding: 24px 28px 28px
}

.hero-form {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.input,
select,
textarea {
    width: 100%;
    padding: 15px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    outline: none;
    transition: .2s ease;
    background: #fff;
    font-family: inherit;
}

.input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(241, 90, 36, 0.12);
}

textarea {
    resize: vertical;
    min-height: 100px
}

.note {
    font-size: .85rem;
    color: #6b7a88;
    margin-top: 8px
}

.alert {
    padding: 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    margin-top: 8px
}

.ok {
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC
}

.err {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5
}

/* ===== Section Header ===== */
.section-head {
    text-align: center;
    margin-bottom: 40px
}

.section-head p {
    max-width: 760px;
    margin: 12px auto 0;
    font-size: 1.1rem
}

/* ===== Tour Cards ===== */
.cards {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 32px
}

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: stretch;
    transition: .25s ease;
}

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

.card-media {
    position: relative;
    background: #0B3B4A;
    min-height: 280px;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.ribbon {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 950;
    font-size: .85rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.card-body {
    padding: 24px
}

.card-title h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 6px
}

.route {
    color: var(--muted);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px
}

.meta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--soft);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .9rem;
    color: var(--primary);
}

.price-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #FFF3E7;
    border: 1px solid rgba(241, 90, 36, 0.25);
    font-weight: 950;
    color: var(--accent);
    white-space: nowrap;
}

.bullets {
    list-style: none;
    margin: 16px 0 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bullets li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .95rem;
    color: var(--text)
}

.card-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    margin: 16px 0 20px
}

.card-cta .btn {
    min-width: 180px
}

.mini-help {
    color: #6b7a88;
    font-size: .9rem;
    font-weight: 650
}

/* ===== Accordions ===== */
.acc {
    margin-top: 16px;
    border-top: 2px dashed var(--border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.acc-item {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: #fff
}

.acc-btn {
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 850;
    color: var(--primary);
    font-size: 1rem;
    transition: .15s ease;
}

.acc-btn:hover {
    background: var(--soft)
}

.acc-btn:focus {
    outline: 3px solid rgba(241, 90, 36, 0.2);
    outline-offset: -3px
}

.acc-left {
    display: flex;
    align-items: center;
    gap: 10px
}

.acc-arrow {
    color: var(--accent);
    font-size: 1rem;
    transition: transform .2s ease
}

.acc-btn[aria-expanded="true"] .acc-arrow {
    transform: rotate(180deg)
}

.acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #FCFDFF
}

.acc-inner {
    padding: 0 18px 18px;
    color: var(--text)
}

.acc-inner ul {
    padding-left: 20px
}

.acc-inner li {
    margin: 8px 0
}

/* ===== Rate Table ===== */
.rate-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: .95rem
}

.rate-table td {
    padding: 8px 0;
    border-bottom: 1px dashed var(--border)
}

.rate-table td:last-child {
    text-align: right;
    font-weight: 950;
    color: var(--accent)
}

.rate-note {
    margin-top: 12px;
    color: #6b7a88;
    font-size: .9rem;
    background: var(--soft);
    padding: 12px;
    border-radius: 12px
}

/* ===== Info & FAQ Sections ===== */
.info-wrap {
    max-width: 900px;
    margin: 0 auto
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.strip {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    margin: 40px 0
}

.feature {
    background: var(--soft);
    border-radius: 28px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.03)
}

.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 40px 0
}

.tcard {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04);
    border-left: 5px solid var(--accent);
    position: relative
}

.tcard::before {
    content: '“';
    position: absolute;
    top: 8px;
    right: 20px;
    font-size: 4rem;
    color: var(--border);
    font-family: serif
}

.stars {
    color: #F59E0B;
    font-weight: 950;
    margin-top: 16px;
    letter-spacing: 2px
}

.faq-wrap {
    max-width: 900px;
    margin: 32px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden
}

.faq-q {
    width: 100%;
    text-align: left;
    border: 0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--primary);
    transition: .15s ease
}

.faq-q:hover {
    background: var(--soft)
}

.faq-q:focus {
    outline: 3px solid rgba(241, 90, 36, 0.2);
    outline-offset: -3px
}

.faq-arrow {
    font-size: 1.1rem;
    color: var(--accent);
    transition: transform .2s ease
}

.faq-q[aria-expanded="true"] .faq-arrow {
    transform: rotate(180deg)
}

.faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff
}

.faq-inner {
    padding: 0 24px 24px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.6
}

/* ===== Exit Popup ===== */
.exit-popup {
    position: fixed;
    bottom: -110%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 999;
    transition: bottom .45s;
    text-align: center
}

.exit-popup .box {
    max-width: 600px;
    margin: 0 auto;
    position: relative
}

.exit-popup .close {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 2rem;
    cursor: pointer;
    color: #999
}

/* ===== Responsive Fixes ===== */
@media(max-width:900px) {
    .hero-inner {
        grid-template-columns: 1fr
    }

    /*
   * On tablets and small desktops, provide extra bottom padding within the hero.
   * This ensures the right-hand lead form fits comfortably and does not overlap
   * with the section that follows. The top padding remains generous while the
   * bottom padding is increased from 60px to 80px.
   */
    .hero {
        padding: 100px 0 100px
    }

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

    .card-media {
        min-height: 240px
    }

    .card-media img {
        aspect-ratio: 16/9
    }

    .bullets {
        grid-template-columns: 1fr
    }

    .two {
        grid-template-columns: 1fr
    }

    h1 {
        font-size: clamp(1.8rem, 6vw, 2.5rem)
    }

    h2 {
        font-size: clamp(1.5rem, 5vw, 2rem)
    }

    section {
        padding: 48px 0
    }

    .hero-right {
        margin-top: 20px
    }

    .badge {
        padding: 8px 14px;
        font-size: .85rem
    }

    .btn {
        padding: 14px 24px
    }
}

@media(max-width:480px) {
    .container {
        padding: 0 16px
    }

    /*
   * On very small devices, increase the bottom padding slightly to give the
   * lead form breathing room. Previously 40px bottom padding left the form
   * cramped; changing it to 60px helps the form stay fully visible when the
   * screen height is limited.
   */
    .hero {
        padding: 90px 0 80px
    }

    .hero-cta {
        flex-direction: column
    }

    .hero-cta .btn {
        width: 100%
    }

    .quick-row {
        grid-template-columns: 1fr
    }

    .badge {
        width: 100%
    }

    .card-body {
        padding: 18px
    }

    .meta-row {
        flex-direction: column;
        align-items: flex-start
    }

    .price-pill {
        align-self: flex-start
    }

    .faq-q {
        padding: 16px;
        font-size: 1rem
    }

    .faq-inner {
        padding: 0 16px 16px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}