* {
    box-sizing:border-box
}

body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:#263246;
    background:#fff
}

.container {
    max-width:1200px;
    margin:auto;
    padding-left:24px;
    padding-right:24px
}

.topbar {
    background:#1f2b3d;
    color:#cbd4df;
    font-size:11px
}

.topbar-inner {
    height:34px;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.topbar a {
    color:#cbd4df;
    text-decoration:none;
    margin-left:25px
}

.header {
    height:76px;
    background:#fff;
    border-bottom:1px solid #e7e9ed;
    position:relative;
    z-index:10
}

.header-inner {
    height:100%;
    display:flex;
    align-items:center
}

.logo {
    display:flex;
    align-items:center;
    gap:8px;
    color:#263246;
    text-decoration:none;
    font-weight:900;
    font-size:21px;
    letter-spacing:.05em
}

.logo small {
    display:block;
    color:#db251f;
    font-size:9px;
    letter-spacing:.24em;
    margin-top:3px
}

.logo-symbol {
    font-size:31px;
    color:#db251f
}

.main-nav {
    margin-left:auto;
    display:flex;
    gap:30px
}

.main-nav a {
    font-size:14px;
    font-weight:700;
    color:#4c586a;
    text-decoration:none
}

.main-nav a:hover,
.main-nav a.active {
    color:#db251f
}

.hamburger {
    display:none;
    margin-left:auto;
    border:0;
    background:none;
    font-size:25px
}

.hero {
    height:480px;
    background:linear-gradient(90deg,#1f2b3ddd,#1f2b3d45),url('../assets/hero.png') center/cover
}

.hero-content {
    height:100%;
    display:flex;
    align-items:center;
    color:#fff
}

.hero-copy {
    max-width:500px
}

.kicker {
    font-size:11px;
    letter-spacing:.18em;
    color:#db251f;
    font-weight:900;
    margin:0 0 12px
}

.hero .kicker {
    color:#f58b87
}

.hero h1 {
    font-size:64px;
    line-height:1.02;
    margin:0 0 18px
}

.hero h1 strong {
    color:#f06b67
}

.hero p:last-child {
    font-size:19px
}

.booking-shell {
    margin-top:-78px;
    position:relative;
    z-index:3
}

.booking-box {
    background:#fff;
    box-shadow:0 15px 40px #1f2b3d25
}

.booking-tabs {
    display:flex;
    border-bottom:1px solid #e1e5ea
}

.booking-tabs button {
    padding:19px 27px;
    border:0;
    background:#fff;
    font-weight:800;
    color:#667386;
    cursor:pointer
}

.booking-tabs button.active {
    color:#db251f;
    border-bottom:3px solid #db251f
}

.booking-body {
    padding:24px
}

.booking-options {
    display:flex;
    gap:24px;
    align-items:center;
    font-size:13px;
    font-weight:700;
    margin-bottom:22px
}

.booking-options .passenger {
    margin-left:auto
}

.booking-options select {
    border:0;
    font-weight:700;
    margin-left:7px
}

.booking-fields {
    display:grid;
    grid-template-columns:1.1fr 30px 1.1fr 1fr 1fr 120px;
    gap:10px;
    align-items:end
}

.booking-fields label {
    display:grid;
    gap:7px
}

.booking-fields label span {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#6f7b8b;
    font-weight:900
}

.booking-fields input {
    padding:14px;
    border:1px solid #d6dce4;
    border-radius:2px;
    font:inherit
}

.swap {
    border:1px solid #d6dce4;
    background:#fff;
    border-radius:50%;
    width:30px;
    height:30px;
    cursor:pointer
}

.search-btn {
    height:48px;
    background:#db251f;
    border:0;
    color:#fff;
    font-weight:900;
    cursor:pointer
}

.quick-links {
    background:#f5f6f8;
    padding:25px 0
}

.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.quick-grid a {
    background:#fff;
    display:flex;
    align-items:center;
    gap:14px;
    padding:20px;
    text-decoration:none;
    color:#263246;
    box-shadow:0 4px 18px #1f2b3d0d
}

.quick-grid b {
    color:#db251f;
    font-size:25px
}

.quick-grid span {
    display:grid;
    gap:5px
}

.quick-grid small {
    color:#7a8593
}

.quick-grid i {
    margin-left:auto;
    color:#db251f;
    font-size:24px
}

.promo-section,
.dest-section {
    padding-top:70px;
    padding-bottom:70px
}

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

.section-head h2 {
    font-size:36px;
    margin:0
}

.section-head>a {
    color:#db251f;
    text-decoration:none;
    font-weight:800
}

.promo-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.promo-card {
    height:280px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden
}

.promo-card:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(transparent,#111c)
}

.promo-card div {
    position:absolute;
    bottom:22px;
    left:24px;
    color:#fff;
    z-index:1
}

.promo-card small {
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em
}

.promo-card h3 {
    font-size:25px;
    margin:8px 0
}

.promo-card a {
    color:#fff;
    font-weight:800;
    text-decoration:none
}

.promo-one {
    background-image:url('../assets/promo-one.png')
}

.promo-two {
    background-image:url('../assets/promo-two.png')
}

.promo-three {
    background-image:url('../assets/promo-three.png')
}

.feature-band {
    background:#1f2b3d;
    color:#fff
}

.feature-inner {
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.feature-inner h2 {
    font-size:42px;
    margin:0 0 12px
}

.feature-inner p:not(.kicker) {
    max-width:500px;
    color:#cbd4df;
    line-height:1.7
}

.outline-btn {
    display:inline-block;
    border:1px solid #f06b67;
    color:#f06b67;
    padding:13px 20px;
    text-decoration:none;
    font-weight:800;
    margin-top:12px
}

.feature-art {
    font-size:170px;
    color:#db251f;
    opacity:.85
}

.dest-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}

.dest-card {
    height:300px;
    background-size:cover;
    background-position:center;
    position:relative
}

.dest-card:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(transparent,#111b)
}

.dest-card div {
    position:absolute;
    bottom:20px;
    left:20px;
    color:#fff;
    z-index:1
}

.dest-card small {
    font-weight:900;
    letter-spacing:.16em
}

.dest-card h3 {
    font-size:28px;
    margin:6px 0
}

.dest-card p {
    margin:0
}

.dest-jakarta {
    background-image:url('../assets/jakarta.png')
}

.dest-bali {
    background-image:url('../assets/bali.png')
}

.dest-surabaya {
    background-image:url('../assets/surabaya.png')
}

.dest-singapore {
    background-image:url('../assets/singapore.png')
}

.news-section {
    background:#f5f6f8;
    padding:70px 0
}

.news-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.news-grid article {
    background:#fff;
    padding:28px;
    min-height:220px
}

.news-icon {
    color:#db251f;
    font-size:30px;
    margin-bottom:22px
}

.news-grid small {
    font-size:10px;
    letter-spacing:.12em;
    color:#db251f;
    font-weight:900
}

.news-grid h3 {
    font-size:20px;
    line-height:1.35
}

.news-grid a {
    color:#db251f;
    font-weight:800;
    text-decoration:none
}

footer {
    background:#1f2b3d;
    color:#cbd4df;
    padding:50px 0 20px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:30px
}

.logo.light {
    color:#fff
}

.footer-grid h4 {
    color:#fff;
    margin-top:0
}

.footer-grid>div>a:not(.logo) {
    display:block;
    color:#cbd4df;
    text-decoration:none;
    margin:12px 0;
    font-size:14px
}

.footer-grid p {
    font-size:13px
}

.footer-bottom {
    border-top:1px solid #445064;
    margin-top:40px;
    padding-top:18px;
    font-size:12px
}

.support-float {
    position:fixed;
    right:24px;
    bottom:24px;
    background:#db251f;
    color:#fff;
    text-decoration:none;
    padding:14px 20px;
    border-radius:28px;
    font-weight:800;
    z-index:50;
    box-shadow:0 8px 25px #0004
}

@media(max-width:900px) {

    .main-nav {
        display:none
    }

    .main-nav.open {
        display:flex;
        position:absolute;
        right:20px;
        top:65px;
        background:#fff;
        padding:20px;
        flex-direction:column;
        box-shadow:0 10px 25px #0002
    }

    .hamburger {
        display:block
    }

    .booking-fields {
        grid-template-columns:1fr 1fr
    }

    .swap {
        display:none
    }

    .search-btn {
        grid-column:1/-1
    }

    .quick-grid,
    .promo-grid,
    .news-grid {
        grid-template-columns:1fr 1fr
    }

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

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

}

@media(max-width:550px) {

    .hero h1 {
        font-size:45px
    }

    .booking-options {
        flex-wrap:wrap
    }

    .booking-options .passenger {
        margin-left:0
    }

    .quick-grid,
    .promo-grid,
    .news-grid,
    .dest-grid {
        grid-template-columns:1fr
    }

    .feature-inner {
        padding-top:50px;
        padding-bottom:50px
    }

    .feature-art {
        display:none
    }

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

    .support-float span {
        display:none
    }

}

.header-logo {
    height:42px;
    width:auto;
    max-width:180px;
    object-fit:contain
}