@media (max-width:768px){
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-decoration: none;
        font-family: 'Montserrat',sans-serif;
    }

    header{
        height: 10vh;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-decoration: none;
        font-family: 'Montserrat',sans-serif;
    }

    body{
        background-color: #0E0E0E;
    }

    header{
        height: 10vh;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding-left: 3rem;
    }

    #btn-voltar{
        height: 40px;
        width: 80px;
        font-size: 16px;
        margin-right: 2rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-weight: 700;
        font-size: 20px;
        border: none;
        background-color: transparent;
        color: #fff;
    }
    .bx-left-arrow-alt{
        font-size: 25px;
    }

    .content-info-reserva{
        height: 60px;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding-left: 10px;
        border-left: 5px solid #1e1e1e;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        font-weight: 600;
        font-size: 16px;
        border-left: 6px solid #800000;
    }

    .passos{
        color: #fff;
        font-size: 20px;
    }

    .tittle-reserva{
        font-size: 22px;
        color: #f1f1f1;
    }

    main{
        height: 155vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:10px;
        margin-top: 2rem;
    }

    h1{
        font-weight: 500;
        text-transform: uppercase;
        color: #ffffff;
        margin: 1rem;
        font-size: 27px;
    }

    form{
        height: 1500px;
        width: 100%;
        padding: 10px;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    div{
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    label{
        font-size: 18px;
        font-weight: 500;
        color: #ffff;
    }

    input,textarea{
        height: 47px;
        padding:10px;
        background-color: #F4F4F4;
        box-shadow: 0px 1px 4px #1e1e1e50;
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }
    input:focus{
        outline: none;
        background-color: #f4f4f459;
        color: #1e1e1e;
        font-size: 15px;
    }

    select{
        height: 47px;
        padding:10px;
        -moz-background-color: #c90000;
        box-shadow: 0px 1px 4px #1e1e1e50;
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        outline: none;
    }

    optgroup{
       
        color: #fff;
        font-size: 'Montserrat', sans-serif;
    }

    #btn-form{
        height: 57px;
        background-color: #800000;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        transition: all 0.3s ease-in-out;
    }
    #btn-form:hover{
        background-color: #500000;
        font-weight: 600;
    }

}
@media (min-width:768px) and (max-width:1025px) {
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-decoration: none;
        font-family: 'Montserrat',sans-serif;
    }

    body{
        background-color: #0E0E0E;
    }

    header{
        height: 10vh;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding-left: 3rem;
    }

    #btn-voltar{
        height: 40px;
        width: 80px;
        font-size: 16px;
        margin-right: 2rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-weight: 700;
        font-size: 20px;
        border: none;
        background-color: transparent;
        color: #fff;
    }
    .bx-left-arrow-alt{
        font-size: 25px;
    }

    .content-info-reserva{
        height: 60px;
        width: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        padding-left: 10px;
        border-left: 5px solid #1e1e1e;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        font-weight: 600;
        font-size: 16px;
        border-left: 6px solid #800000;
    }

    .passos{
        color: #fff;
        font-size: 20px;
    }

    .tittle-reserva{
        font-size: 22px;
        color: #f1f1f1;
    }

    main{
        height: 155vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:10px;
        margin-top: 2rem;
    }

    h1{
        font-weight: 500;
        text-transform: uppercase;
        color: #eeeeee;
        margin: 1rem;
        font-size: 32px;
    }

    form{
        height: 1500px;
        width: 100%;
        padding: 10px;
        gap: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 40px;
    }

    div{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 347px;
    }

    div:nth-child(1){
        width: 400px;
    }

    div:nth-child(10){
        gap: 20px;
    }

    div:nth-child(11){
        width: 500px;
       
    }


    label{
        font-size: 20px;
        font-weight: 500;
        color: #8d8d8d;
    }

    input, textarea{
        height: 57px;
        padding:10px;
        background-color: #F4F4F4;
        box-shadow: 0px 1px 4px #1e1e1e50;
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }
    input:focus{
        outline: none;
        background-color: #f4f4f459;
        color: #1e1e1e;
        font-size: 15px;
    }

    select{
        height: 47px;
        padding:10px;
        background-color: #F4F4F4;
        box-shadow: 0px 1px 4px #1e1e1e50;
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        outline: none;
    }

    optgroup{
        background-color: #1e1e1e;
        color: #fff;
    }

    #btn-form{
        height: 57px;
        width: 400px;
        background-color: #800000;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        transition: all 0.3s ease-in-out;
    }
    #btn-form:hover{
        background-color: #500000;
        font-weight: 600;
    }
}
@media (min-width:1200px){
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        text-decoration: none;
        font-family: 'Montserrat',sans-serif;
    }

    body{
        background-color: #0E0E0E;
    }

    header{
        height: 14vh;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    #btn-voltar {
        background-color: transparent;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
        height: 50px;
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-top: 1.25rem;
        font-size: 18px;
        font-family: 'Montserrat', sans-serif;
    }
    
    #btn-voltar:hover {
        background-color: #c62828;
    }
    
    .bx-left-arrow-alt{
        font-size: 25px;
    }

    .content-info-reserva{
        height: 60px;
        width: 150px;
        display: flex;
        flex-direction: column;
        padding-left: 1.25rem;
        gap: 10px;
        justify-content: flex-start;
        border-left: 5px solid #800000;
    }
    
    .passos{
        font-size: 15px;
        font-weight: 500;
        color: #9e9e9e;
    }
    
    .tittle-reserva{
        font-size: 20px;
        font-weight: 600;
        color: #ffffff;
    }
    

    main{
        height: 155vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:10px;
        margin-top: 2rem;
    }

    h1{
        font-weight: 500;
        text-transform: uppercase;
        color: #ffffff;
        margin: 1rem;
        font-size: 32px;
        text-align: center;
    }

    form{
        height: auto;
        width: 100%;
        padding: 10px;
        gap: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
    }

    div{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 447px;
    }

    label{
        font-size: 20px;
        font-weight: 500;
        color: #b1b1b1;
    }

    input, textarea{
        height: 57px;
        width:100%;
        padding:10px;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px #1e1e1e50;
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }
    input:focus{
        outline: none;
        background-color: #ffffff;
        color: #1e1e1e;
        font-size: 15px;
    }

    select{
        height: 47px;
        padding:10px;
        background-color: #F4F4F4;
        box-shadow: 0px 1px 4px #1e1e1e50;
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        outline: none;
    }

    optgroup{
        background-color: #1e1e1e;
        color: #fff;
    }

    #btn-form{
        height: 57px;
        width: 400px;
        background-color: #800000;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        transition: all 0.3s ease-in-out;
    }
    #btn-form:hover{
        background-color: #500000;
        font-weight: 600;
    }
}