:root{
    --pri-color: #bff2e1;
    --pri-dark: #20c997;
    --white: #f6f6f6;
    --black: #1a1a1a;
    --open-sans-font: "Open Sans", sans-serif;
    --poppins: "Poppins", sans-serif;
    --border-color: rgb(211, 211, 211);
    --border-color2: rgb(138, 138, 138);
    --text-color: #6c6c6c;
    --marquee: rgb(242, 242, 242);
    --footer: #f4f4f4;
}

.booking-hero{
    background-image: linear-gradient(to right, var(--pri-dark) 5%, var(--pri-color) 95%);
    height: calc(70vh - 3.5rem);
}

.booking-inner{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.booking-hero h1{
    text-transform: capitalize;
}

.booking-hero p{
    width: 70%;
    max-width: 32rem;
    text-align: center;
    font-weight: 600;
}

/* form */
.req{
    color: red;
}

.booking-form form > p{
    word-spacing: 0.15rem;
}

.booking-form form{
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* background-color: white; */
}

.horizontal{
    display: flex;
    flex-direction: column;
}

.contact-info > div,
.service_address > div,
.cleaning_options > div,
.timing > div,
.street_address,
.square_footage,
.cleaning_freq,
.additional_notes{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.booking-form label{
    text-transform: capitalize;
}

.contact-info label,
.street_address label,
.service_address label,
.cleaning_choice > p,
.freq label,
.timing label,
.square_footage label,
.cleaning_freq label,
.additional_notes label{
    font-size: 0.9rem;
    font-weight: 600;
}

.contact-info,
.service_address,
.cleaning_options,
.timing{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cleaning_choice,
.freq{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cleaning_choice label{
    font-size: 0.8rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cleaning_choice p{
    margin: 0;
}

.cleaning_choice > div{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.contact-info > div,
.service_address > div{
    width: 100%;
}

.contact-info input,
.service_address input{
    border: 1.2px solid var(--border-color);
    outline: none;
    height: 3rem;
    border-radius: 10px;
    padding: 0.5rem 1rem;
}

.booking-form label{
    font-family: var(--poppins);
}

.booking-form input,
.booking-form textarea,
.booking-form select{
    font-family: var(--open-sans-font);
}

.freq select,
.date input,
.time select,
.size select{
    border: 1.2px solid var(--border-color);
    outline: none;
    height: 3rem;
    border-radius: 10px;
    padding: 0.5rem;
}

.street_address textarea,
.square_footage textarea,
.cleaning_freq textarea,
.additional_notes textarea{
    border: 1.2px solid var(--border-color);
    outline: none;
    height: 7rem;
    border-radius: 10px;
    padding: 0.5rem 1rem;
}

.booking-form input[type="checkbox"]{
    accent-color: var(--pri-dark);
    width: 1rem;
    height: 0.9rem;
}

.booking-form button{
    border: 1px solid var(--border-color);
    background-color: var(--pri-dark);
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    border-radius: 10px;
    transition: filter 0.3s ease-in-out;
}

.booking-form button:hover{
    filter: brightness(0.92);
}

.contact-info input:focus,
.street_address textarea:focus,
.service_address input:focus,
.freq select:focus,
.timing input:focus,
.timing section:focus,
.square_footage textarea:focus,
.cleaning_freq textarea:focus,
.additional_notes textarea:focus{
    border-color: var(--pri-dark);
}

.contact-info label::after,
.street_address label::after,
.service_address label::after,
.cleaning_choice > p::after,
.freq label::after,
.timing label::after{
    content: "*";
    padding-left: 0.4rem;
    color: red;
}

.timing > div {
    width: 100%;
}


@media (min-width: 360px){
    
}

@media (min-width: 768px){
    .booking-form form{
        padding: 2.5rem 2rem;
    }

    .horizontal{
        flex-direction: row;
    }

    .contact-info,
    .service_address,
    .cleaning_options,
    .timing{
        flex-direction: row;
    }

    .cleaning_choice{
        width: 70%;
    }

    .freq{
        width: 30%;
    }

    .timing > div:nth-child(1),
    .timing > div:nth-child(2){
        width: 30%;
    }

    .timing > div:nth-child(3){
        width: calc(40% - 4rem);
    }

    .contact-info > div,
    .service_address > div{
        width: calc(100% / 3);
    }


}

@media (min-width: 1000px){
    .booking-hero{
        height: calc(55vh - 4.5rem);
    }

    .booking-form button{
        font-size: 1.1rem;
    }
}