/*
-----------------------------------------------------------------------
------------------------- Charter page  CSS ---------------------------
-----------------------------------------------------------------------
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    height: 100vh;
    font-size: 1.6rem;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    background: #fff;
}
a,
a:hover {
    text-decoration: none;
}

p {
    margin: 0;
}
ul,
li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}
.text-brand {
    color: #019cb6;
}
.mb-50 {
    margin-bottom: 5rem;
}
.header-section {
    width: 100%;
    padding: 5rem;
}
.header-wrapper {
    padding: 1.2rem 1.4rem;
    border-radius: 4.9rem;
    background: #fff;
    box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.06);
}
.header-section .logo img {
    max-width: 16.7rem;
    width: 100%;
    object-fit: cover;
}
.header-section nav ul li {
    margin-left: 4.4rem;
}
.header-section nav ul li a {
    color: #3a3b3b;
    font-family: Poppins;
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 500;
}
.header-section nav ul li a:hover {
    color: #d02027;
    font-weight: 600;
}
.header-section .bars-icon {
    font-size: 2rem;
    color: #3a3b3b;
    cursor: pointer;
}
#booking-request {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    background: red;
    background: linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.45) 100%
        ),
        url("../images/hero/hero-bg.jpg"), lightgray 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}
#booking-request .container-bg {
    max-width: 142rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 2rem;
    background: rgba(255, 255, 255, 0.85);
}
.booking-header {
    padding: 5rem 0;
}
.booking-header .logo img {
    max-width: 24.9rem;
    width: 100%;
    object-fit: cover;
}

.booking-details {
    margin-top: 0rem;
}
.booking-input-left,
.booking-input-right {
    width: 45%;
}
.booking-details .card {
    width: 100%;
    border-radius: 2.5rem !important;
    background: #fff !important;
    padding: 3.2rem 4rem;
    box-shadow: 0 0.3rem 1.4rem 0 rgba(0, 0, 0, 0.1) !important;
}
.booking-details label {
    color: #6b6b6b;
    font-family: Poppins;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
}
.booking-details input,
.booking-details select {
    max-width: 40.7rem;
    width: 100%;
    color: #3a3b3b;
    font-family: Poppins;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    padding: 1.4rem 1.8rem;
    background-color: #f6f6f6;
    border-radius: 1.6rem !important;
    border: 0;
}
.booking-details .note label {
    margin-right: 6rem;
}
.booking-details .pickup .form-select {
    margin-left: 8.1rem !important;
}
.margin-left-8-1-rem {
    margin-left: 8.1rem !important;
}

.margin-left-7-rem {
    margin-left: 7rem !important;
}
.booking-details .date-time {
    margin-left: 4rem !important;
}
.booking-details .date-time {
    width: 72%;
}
.booking-details .drop-off .date-time {
    max-width: 44.5rem;
    margin-left: 5.3rem !important;
}
.booking-details .drop-off .select-category {
    margin-left: 4rem !important;
}
.booking-details .booking-input-left .select-area {
    margin-left: 4.5rem !important;
}
.booking-details .select-category {
    margin-left: 6.3rem !important;
}
.booking-details .select-vehicle {
    margin-left: 3rem !important;
}
.booking-details select {
    appearance: none;
}
.booking-details select {
    margin-bottom: 2.5rem;
}
.booking-details .booking-input-left .select-area {
    margin-bottom: 0;
}
.journey-info {
    color: #3a3b3b;
    font-family: Poppins;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 2.5rem;
}
.return-info {
    color: #3a3b3b;
    font-family: Poppins;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 2.5rem;
}
.journey-details label {
    color: #6b6b6b;
    font-family: Poppins;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    width: 13rem !important;
}

input::placeholder {
    color: #b8b8b8;
    font-weight: 400;
}
input:focus {
    border: 0;
    outline: 0;
}
/* Chrome, Safari, Edge, Opera */
input[name="phone"]::-webkit-outer-spin-button,
input[name="phone"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[name="phone"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.customer-info {
    color: #3a3b3b;
    font-family: Poppins;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 2.5rem;
}
.checkbox-button {
    margin-bottom: 2rem;
}
.checkbox-button input {
    width: initial !important;
}

/*
-----------------------------------------------------------------------
------------------------ Customer Details view CSS --------------------
-----------------------------------------------------------------------
*/
.customer-details-view .label-custom {
    color: #6b6b6b;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 21px */
    letter-spacing: 0.2px;
    margin-bottom: 1px;
}
.customer-details-view h2 {
    color: #3a3b3b;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.2px;
}
/*
-----------------------------------------------------------------------
---------------------------- Tabs Menu CSS ----------------------------
-----------------------------------------------------------------------
*/

.switches {
    background-color: #fff;
    border-radius: 1.4rem;
    max-width: 38.6rem;
    width: 100%;
    height: 4.6rem;
    display: flex;
    justify-content: space-between;
}
.tabs-btn {
    border: none;
    outline: none;
    background-color: transparent;
}
.activeTabsItem {
    background-color: #019cb6;
    color: #fff;
    font-weight: 500;
    border-radius: 1.4rem;
}
button.submit-btn {
    border-radius: 1.5rem;
    background: #019cb6;
    padding: 1rem 2rem;
    box-shadow: 0 0.2rem 1.5rem 0 rgba(208, 32, 39, 0.2);
}
button.submit-btn a {
    color: #fdfdfd;
    font-family: Poppins;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 500;
}
button.submit-btn:hover {
    background: #02859c;
    box-shadow: 0 0.2rem 1.5rem 0 rgba(58, 59, 59, 0.2);
}

/* #dropoff_address,
#return_dropoff_address,
#return_pickup_address {
    margin-left: 7rem !important;
} */

.preview-btn {
    border-radius: 1.5rem;
    background: #3c3932;
    padding: 1rem 2rem;
    box-shadow: 0 0.2rem 1.5rem 0 rgba(208, 32, 39, 0.2);
    color: #fff;
}
.preview-btn:hover {
    background: #2d2d29;
    box-shadow: 0 0.2rem 1.5rem 0 rgba(0, 0, 0, 0.2);
}

.danger-btn {
    border-radius: 9999px;
    background: #d50100;
    padding: 0.5rem 1rem;
    border: none;
    color: #fff;
    font-size: 12px;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.danger-btn:hover {
    background-color: #b40000;
}

/*
-----------------------------------------------------------------------
---------------------------- Responsive CSS ----------------------------
-----------------------------------------------------------------------
*/
/*extra extra large device*/
@media all and (max-width: 1399px) {
    .booking-details form .date-time {
        width: 67%;
    }
}
/*extra large device*/
@media all and (max-width: 1199px) {
    #booking-request {
        height: auto;
    }
    .booking-input-left,
    .booking-input-right {
        width: 100%;
    }
    .booking-details form input,
    .booking-details form select {
        max-width: 100%;
        width: 100% !important;
    }
    .checkbox-button input[type="checkbox"] {
        width: auto !important;
    }
    .booking-details form .date-time,
    .booking-details form .drop-off .date-time,
    .booking-details form .drop-off .date-time,
    .booking-details form .drop-off .date-time {
        width: 100%;
    }
    .booking-details form .drop-off .date-time {
        max-width: 100%;
        margin-left: 0 !important;
    }
    .booking-details form .pickup .form-select,
    .booking-details form .drop-off .select-category,
    .booking-details form .select-category,
    .booking-details form .date-time,
    .booking-details form .select-vehicle,
    .booking-details form .booking-input-left .select-area {
        margin-left: 0 !important;
    }
}
/*large device*/
@media all and (max-width: 991px) {
    .header-section {
        padding: 1rem 1rem 3rem;
    }
    .header-wrapper {
        background: transparent;
        box-shadow: none;
    }
    .booking-details form input,
    .booking-details form select {
        padding: 1.2rem 1.8rem;
    }
    .booking-input-right {
        display: flex;
        gap: 2rem;
    }
    .booking-input-right div {
        width: 48%;
    }
    .booking-input-right div {
        width: 100%;
    }
    .booking-input-left {
        margin-top: 2rem;
    }
}
/*medium device*/
@media all and (max-width: 767px) {
    .booking-details form select {
        margin-bottom: 1.6rem;
    }
    #booking-request .container-bg {
        border-radius: 0;
    }
    .booking-details .card {
        padding: 2.2rem;
    }
}
/*small device*/
@media all and (max-width: 575px) {
    html {
        font-size: 55%;
    }
    .header-section .logo img {
        max-width: 9rem;
        width: 100%;
        object-fit: cover;
    }
    .booking-stepper .steps li::before {
        width: 3.6rem;
        height: 3.6rem;
    }
    .booking-stepper .steps li::after {
        left: 1rem;
        top: 1.5rem;
        display: block;
        height: 0.6rem;
    }
    .booking-stepper .steps li span {
        top: -3.2rem;
        left: 1.5rem;
        font-size: 1.4rem;
    }
    .booking-stepper .steps li {
        font-size: 1.2rem;
        line-height: 10rem;
        width: 100%;
    }
    #booking-request .container-bg {
        padding: 0 1.5rem;
    }
    .booking-input-right {
        display: initial;
        gap: 0;
    }
    .booking-input-right div {
        width: 100%;
    }
    #pickup_address,
    #dropoff_address,
    #return_dropoff_address,
    #return_pickup_address {
        margin-left: 0 !important;
    }

    .booking-details .date-time {
        margin: 0 !important;
        width: 100% !important;
    }
}
/*extra small device*/
@media all and (max-width: 400px) {
    html {
        font-size: 50%;
    }
    .booking-details .card {
        max-width: 44.5rem;
        width: 100%;
        margin: 3rem auto;
        padding: 2.6rem;
    }
}