/* =========================================================
   FIRSTMYTRIP BOOK CAR
========================================================= */

#fmt-book-car,
#fmt-book-car *,
#fmt-book-car *::before,
#fmt-book-car *::after {
    box-sizing: border-box;
}

#fmt-book-car {
    width: 100%;
    overflow-x: hidden;
    color: #0b2844;
    background: #fff;
}

.fmt-car-container {
    width: min(1380px, calc(100% - 50px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.fmt-car-hero {
    position: relative;

    min-height: 710px;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,25,47,.97) 0%,
            rgba(4,36,64,.88) 28%,
            rgba(5,46,76,.54) 47%,
            rgba(7,65,98,.06) 70%
        ),
        var(--fmt-car-hero);

    background-size: cover;

    background-position:
        center center;

    background-repeat:
        no-repeat;
}


.fmt-car-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 30% 40%,
            rgba(20,151,235,.12),
            transparent 36%
        ),

        linear-gradient(
            180deg,
            transparent 70%,
            rgba(3,29,51,.22)
        );
}


.fmt-car-hero-inner {
    position: relative;

    z-index: 5;

    width:
        min(
            1540px,
            calc(100% - 70px)
        );

    min-height: 625px;

    margin:
        0
        auto;

    display: flex;

    align-items: center;
}


.fmt-car-copy {
    width: 100%;
    max-width: 780px;

    padding:
        50px
        0
        38px;
}


.fmt-car-kicker {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    padding:
        9px
        15px;

    border:
        1px solid
        rgba(47,190,255,.43);

    border-radius:
        999px;

    color: #fff;

    background:
        rgba(4,40,67,.46);

    backdrop-filter:
        blur(10px);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;
}


.fmt-car-copy h1 {
    max-width: 760px;

    margin:
        0
        0
        18px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            58px,
            4.5vw,
            80px
        );

    font-weight: 700;

    line-height: .98;

    letter-spacing:
        -3px;
}


.fmt-car-copy h1 span {
    color: #1ab9ff;

    text-shadow:
        0 14px 35px
        rgba(3,151,245,.22);
}


.fmt-car-lead {
    max-width: 680px;

    margin:
        0
        0
        22px;

    color:
        rgba(255,255,255,.91);

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   TRIP TABS
========================================================= */

.fmt-car-trip-tabs {
    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 6px;
}


.fmt-car-trip-tab {
    padding:
        8px
        13px;

    border:
        1px solid
        rgba(74,190,252,.3);

    border-radius:
        999px;

    cursor: pointer;

    color:
        rgba(255,255,255,.82);

    background:
        rgba(5,42,69,.55);

    font-size: 11px;

    font-weight: 800;

    transition: .2s ease;
}


.fmt-car-trip-tab.is-active {
    color:
        #073456;

    border-color:
        #fff;

    background:
        #fff;
}


/* =========================================================
   SEARCH BAR
========================================================= */

.fmt-car-search {
    position: relative;

    width: min(1040px, 88vw);

    min-height: 82px;

    display: grid;

    grid-template-columns:
        minmax(180px,1.3fr)
        1px
        minmax(180px,1.3fr)
        1px
        minmax(135px,.8fr)
        1px
        minmax(110px,.65fr)
        auto;

    align-items: center;

    padding:
        8px;

    border-radius:
        19px;

    background:
        #fff;

    box-shadow:
        0
        22px
        55px
        rgba(0,18,40,.27);
}


.fmt-car-field {
    position: relative;

    min-width: 0;

    padding:
        0
        13px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.fmt-car-field-icon {
    flex:
        0 0
        auto;

    color:
        #0d99ec;

    font-size:
        20px;
}


.fmt-car-field > div:not(.fmt-car-suggestions) {
    flex: 1;

    min-width: 0;
}


.fmt-car-field label {
    display: block;

    margin-bottom:
        4px;

    color:
        #73879a;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .65px;

    text-transform:
        uppercase;
}


.fmt-car-field input {
    width:
        100%;

    min-width: 0;

    padding: 0;

    border: 0;

    outline: 0;

    color:
        #112e49;

    background:
        transparent;

    font-size:
        12px;

    font-weight:
        700;
}


.fmt-car-divider {
    width:
        1px;

    height:
        43px;

    background:
        #dce8f1;
}


.fmt-car-search-button {
    height:
        64px;

    min-width:
        145px;

    padding:
        0
        20px;

    border:
        0;

    border-radius:
        14px;

    cursor:
        pointer;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    white-space:
        nowrap;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #12a9ff,
            #0878e9
        );

    box-shadow:
        0
        10px
        27px
        rgba(4,130,240,.26);

    font-size:
        13px;

    font-weight:
        800;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.fmt-car-search-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0
        15px
        30px
        rgba(4,130,240,.36);
}


/* =========================================================
   AUTOCOMPLETE
========================================================= */

.fmt-car-location-field {
    position: relative;
}


.fmt-car-suggestions {
    position:
        absolute;

    left:
        0;

    top:
        calc(100% + 27px);

    z-index:
        100;

    width:
        270px;

    overflow:
        hidden;

    border:
        1px solid
        #dce9f3;

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        0
        20px
        50px
        rgba(0,25,55,.18);
}


.fmt-car-suggestion {
    width:
        100%;

    padding:
        12px
        15px;

    border:
        0;

    border-bottom:
        1px solid
        #edf3f7;

    cursor:
        pointer;

    text-align:
        left;

    color:
        #17344e;

    background:
        #fff;

    font-size:
        12px;
}


.fmt-car-suggestion:hover {
    background:
        #f2f9ff;
}


/* =========================================================
   POPULAR
========================================================= */

.fmt-car-popular {
    max-width:
        900px;

    margin-top:
        14px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.fmt-car-popular > strong {
    color:
        #fff;

    font-size:
        11px;
}


.fmt-car-popular button {
    padding:
        7px
        11px;

    border:
        1px solid
        rgba(57,185,250,.32);

    border-radius:
        999px;

    cursor:
        pointer;

    color:
        #fff;

    background:
        rgba(3,39,66,.68);

    backdrop-filter:
        blur(8px);

    font-size:
        11px;

    font-weight:
        700;
}


/* =========================================================
   BENEFITS
========================================================= */

.fmt-car-benefits {
    position:
        relative;

    z-index:
        6;

    width:
        min(
            1540px,
            calc(100% - 70px)
        );

    min-height:
        74px;

    margin:
        0
        auto;

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    align-items:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(47,179,241,.28);

    border-radius:
        18px
        18px
        0
        0;

    background:
        rgba(4,35,59,.87);

    backdrop-filter:
        blur(16px);
}


.fmt-car-benefits > div {
    min-height:
        74px;

    padding:
        0
        24px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border-right:
        1px solid
        rgba(91,180,230,.18);
}


.fmt-car-benefits > div:last-child {
    border-right:
        0;
}


.fmt-car-benefits > div > span {
    width:
        36px;

    height:
        36px;

    flex:
        0 0
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        rgba(14,157,236,.19);

    font-weight:
        900;
}


.fmt-car-benefits p {
    margin: 0;

    color:
        rgba(224,240,250,.72);

    font-size:
        10px;

    line-height:
        1.45;
}


.fmt-car-benefits strong {
    display:
        block;

    color:
        #fff;

    font-size:
        12px;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.fmt-car-section {
    padding:
        78px
        0;
}


.fmt-car-section-head {
    margin-bottom:
        30px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;
}


.fmt-car-section-head span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #078fe8;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.1px;
}


.fmt-car-section-head h2 {
    margin:
        0
        0
        8px;

    color:
        #092944;

    font-size:
        36px;
}


.fmt-car-section-head p {
    margin:
        0;

    color:
        #718599;

    font-size:
        14px;
}


/* =========================================================
   SERVICES
========================================================= */

.fmt-car-service-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        15px;
}


.fmt-car-service-card {
    position:
        relative;

    min-height:
        178px;

    padding:
        23px;

    border:
        1px solid
        #deebf4;

    border-radius:
        20px;

    cursor:
        pointer;

    text-align:
        left;

    background:
        #fff;

    box-shadow:
        0
        10px
        30px
        rgba(22,76,115,.06);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.fmt-car-service-card:hover {
    transform:
        translateY(-5px);

    border-color:
        #8ad1ff;

    box-shadow:
        0
        18px
        40px
        rgba(16,91,142,.11);
}


.fmt-car-service-icon {
    width:
        50px;

    height:
        50px;

    margin-bottom:
        15px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        #eaf7ff;

    font-size:
        25px;
}


.fmt-car-service-card strong {
    display:
        block;

    margin-bottom:
        6px;

    color:
        #102f4a;

    font-size:
        15px;
}


.fmt-car-service-card small {
    display:
        block;

    padding-right:
        20px;

    color:
        #75899c;

    font-size:
        11px;

    line-height:
        1.5;
}


.fmt-car-service-card i {
    position:
        absolute;

    right:
        20px;

    bottom:
        20px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #078ee7;

    background:
        #eef8ff;

    font-style:
        normal;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.fmt-car-how {
    padding:
        75px
        0
        85px;

    background:
        #f6faff;
}


.fmt-car-centered {
    justify-content:
        center;

    text-align:
        center;
}


.fmt-car-steps {
    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        18px;
}


.fmt-car-steps > div {
    position:
        relative;

    min-height:
        210px;

    padding:
        30px;

    border:
        1px solid
        #dceaf3;

    border-radius:
        20px;

    text-align:
        center;

    background:
        #fff;
}


.fmt-car-steps > div > span {
    position:
        absolute;

    left:
        20px;

    top:
        18px;

    color:
        #c5d7e5;

    font-size:
        22px;

    font-weight:
        900;
}


.fmt-car-step-icon {
    width:
        62px;

    height:
        62px;

    margin:
        0
        auto
        16px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        18px;

    color:
        #087ecf;

    background:
        #e9f6ff;

    font-size:
        28px;
}


.fmt-car-steps h3 {
    margin:
        0
        0
        8px;

    color:
        #0f304c;

    font-size:
        17px;
}


.fmt-car-steps p {
    max-width:
        260px;

    margin:
        0
        auto;

    color:
        #758a9d;

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   GLOBAL CTA
========================================================= */

.fmt-car-global {
    padding:
        85px
        0;
}


.fmt-car-global-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        50px;

    display:
        grid;

    grid-template-columns:
        1.25fr
        .75fr;

    align-items:
        center;

    gap:
        40px;

    border-radius:
        26px;

    color:
        #fff;

    background:

        radial-gradient(
            circle at 88% 30%,
            rgba(26,186,255,.25),
            transparent 31%
        ),

        linear-gradient(
            135deg,
            #052540,
            #07517d
        );
}


.fmt-car-global-copy > span {
    color:
        #5bd0ff;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.fmt-car-global-copy h2 {
    margin:
        9px
        0
        14px;

    font-size:
        39px;

    line-height:
        1.1;
}


.fmt-car-global-copy p {
    max-width:
        650px;

    margin-bottom:
        20px;

    color:
        rgba(231,246,255,.78);

    font-size:
        14px;

    line-height:
        1.7;
}


.fmt-car-global-copy button {
    padding:
        12px
        17px;

    border:
        0;

    border-radius:
        11px;

    cursor:
        pointer;

    color:
        #073552;

    background:
        #fff;

    font-weight:
        800;
}


.fmt-car-global-stats {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        11px;
}


.fmt-car-global-stats > div {
    padding:
        23px
        12px;

    border:
        1px solid
        rgba(103,203,255,.2);

    border-radius:
        16px;

    text-align:
        center;

    background:
        rgba(255,255,255,.055);
}


.fmt-car-global-stats strong {
    display:
        block;

    margin-bottom:
        5px;

    font-size:
        20px;
}


.fmt-car-global-stats span {
    color:
        rgba(232,246,255,.7);

    font-size:
        10px;
}


/* =========================================================
   MODAL
========================================================= */

.fmt-car-modal-backdrop {
    position:
        fixed;

    inset:
        0;

    z-index:
        99990;

    opacity:
        0;

    background:
        rgba(3,20,35,.5);

    transition:
        opacity .25s ease;
}


.fmt-car-modal-backdrop.is-visible {
    opacity:
        1;
}


.fmt-car-modal {
    position:
        fixed;

    z-index:
        99999;

    left:
        50%;

    top:
        50%;

    width:
        min(
            500px,
            calc(100% - 30px)
        );

    max-height:
        90vh;

    overflow-y:
        auto;

    padding:
        38px;

    border-radius:
        22px;

    background:
        #fff;

    box-shadow:
        0
        25px
        70px
        rgba(0,25,50,.25);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(-50%,-46%)
        scale(.95);

    transition:
        .25s ease;
}


.fmt-car-modal.is-open {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%,-50%)
        scale(1);
}


.fmt-car-modal-close {
    position:
        absolute;

    right:
        17px;

    top:
        17px;

    width:
        38px;

    height:
        38px;

    border:
        0;

    border-radius:
        50%;

    cursor:
        pointer;

    background:
        #eef6fb;

    color:
        #15334c;

    font-size:
        25px;
}


.fmt-car-modal-kicker {
    color:
        #078ee8;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1px;
}


.fmt-car-modal h3 {
    margin:
        8px
        0
        12px;

    color:
        #102f49;

    font-size:
        27px;
}


.fmt-car-modal > p {
    color:
        #74899c;

    line-height:
        1.65;
}


.fmt-car-modal-summary {
    margin-top:
        18px;

    padding:
        17px;

    border-radius:
        14px;

    color:
        #173650;

    background:
        #f2f9ff;

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {

    .fmt-car-search {
        width:
            min(
                900px,
                94vw
            );

        grid-template-columns:
            1fr
            1px
            1fr
            1px
            .7fr
            1px
            .6fr;
    }


    .fmt-car-search-button {
        grid-column:
            1 / -1;

        width:
            100%;

        margin-top:
            4px;
    }


    .fmt-car-service-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {

    .fmt-car-hero {
        min-height:
            auto;

        background-position:
            67%
            center;
    }


    .fmt-car-hero-inner {
        width:
            calc(100% - 28px);

        min-height:
            auto;

        padding:
            38px
            0
            20px;
    }


    .fmt-car-copy {
        max-width:
            none;

        padding:
            0;
    }


    .fmt-car-copy h1 {
        font-size:
            clamp(
                45px,
                13vw,
                62px
            );
    }


    .fmt-car-lead {
        font-size:
            15px;
    }


    .fmt-car-search {
        width:
            100%;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        padding:
            10px;
    }


    .fmt-car-field {
        min-height:
            60px;

        padding:
            8px
            12px;
    }


    .fmt-car-divider {
        width:
            100%;

        height:
            1px;
    }


    .fmt-car-search-button {
        width:
            100%;
    }


    .fmt-car-benefits {
        width:
            calc(100% - 28px);

        margin-top:
            20px;

        grid-template-columns:
            1fr
            1fr;

        border-radius:
            16px;
    }


    .fmt-car-benefits > div {
        padding:
            12px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(91,180,230,.15);
    }


    .fmt-car-service-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            10px;
    }


    .fmt-car-service-card {
        min-height:
            165px;

        padding:
            18px;
    }


    .fmt-car-steps {
        grid-template-columns:
            1fr;
    }


    .fmt-car-global-card {
        padding:
            32px
            23px;

        grid-template-columns:
            1fr;
    }


    .fmt-car-global-copy h2 {
        font-size:
            32px;
    }


    .fmt-car-global-stats {
        grid-template-columns:
            1fr
            1fr;
    }

}


@media (max-width: 520px) {

    .fmt-car-service-grid {
        grid-template-columns:
            1fr;
    }

}