@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    background-color: #80808029;
    font-family: 'Raleway', sans-serif;
    overflow-x: hidden;
}

/*Estilização do header*/

#header-logo {
    width: 100vw;
    height: 55px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#div-logo {
    width: 100%;
    height: 100%;
    max-width: 1020px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#div-logo img {
    width: 32px;
    height: 32px;
}

#div-logo p {
    font-size: 24px;
    color: #5d15d1;
    margin-left: 10px;
    font-weight: bold;
}

/*Section do formulário*/

.section-form {
    width: 100%;
    background-color: #fff;
    background-image: url(../imagens/bahia.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* shorthand: */
    background: #fff url(../imagens/bahia.jpg) no-repeat cover;
    padding: 50px 0;
}

.full-form {
    width: 100%;
    max-width: 1024px;
    background-color: #fff;
    margin: 50px auto;
}

.text-form {
    width: 100%;
    height: 35px;
    background-color: #5d15d1;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.text-form img {
    width: 20px;
    transform: rotate(-45deg);
}

.text-form h1 {
    font-size: 14px;
    color: #fff;
    margin-right: 5px;
}

.main-form {
    padding: 30px 25px 20px;
    display: flex;
    flex-direction: column;
}

.main-form h2 {
    font-size: 22px;
    margin-bottom: 24px;
}

.main-form label {
    font-size: 16px;
}

.main-form input, .main-form select {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    margin: 10px 0;
    padding: 0 5px;
}

.main-form .form-data, .form-origem-destino {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.form-data-ida, .form-data-volta, .form-origem-destino div {
    width: calc(50% - 10px);
}

.form-origem-destino select {
    width: 100%;
    padding: 0 3px;
}

.infantil, .preferencias {
    width: 100%;
}

.campos-de-selecao, .campos-de-selecao div {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.campos-de-selecao div {
    width: 120px;
}

.campos-de-selecao div input {
    width: 15px;
}

.campos-de-selecao div label {
    margin-left: 8px;
}

.form-button {
    background-color: #5d15d1;
    color: #fff;
    width: 160px;
    height: 32px;
    margin-top: 12px;
    font-size: 16px;
    border: none;
}

/*Ofertas */

.section-ofertas, .section-anuncios {
    width: 100%;
    max-width: 1024px;
    margin: 54px auto 0;
    display: flex;
    flex-direction: column;
}

.section-ofertas h2, .section-anuncios h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.section-ofertas h3, .section-anuncios h3 {
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 15px;
}

/*figures*/

.full-figures {
    width: 100%;
    height: 375px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.full-figures img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.full-figures figcaption {
    box-sizing: border-box;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 17px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px 10px;
}

.big-figure {
    position: relative;
    width: calc(50% - 10px);
    height: 100%;
}

.normal-figures {
    width: calc(50% - 10px);
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;

}

.normal-figures figure {
    position: relative;
    width: calc(50% - 10px);
    height: calc(50% - 10px);
    margin: 6px 0;
}

.normal-figures figcaption {
    width: calc(50% -10px);
}

/*Section de anúncios*/

.cards-anuncios {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.card-anuncio {
    width: calc(50% - 10px);
    height: 100%;
}

.card-anuncio img {
    width: 100%;
    object-fit: cover;
}

.card-anuncio .card-caption {
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px;
}

.card-caption h2 {
    font-size: 16px;
}

.card-caption p {
    margin-top: 15px;
    color: gray;
}

/*footer*/

footer {
    width: 100%;
    margin-top: 32px;
    background-color: #5d15d1;
}

.footer-div {
    max-width: 1024px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.footer-content {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
}

.footer-content h2 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #fff;
}

.footer-content div {
    margin: 5px 0;
    display: flex;
    flex-direction: row;
}

.footer-content div img {
    width: 18px;
}

.footer-content div span {
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
}

/*Media Queries*/

/*até 540px*/
@media (max-width: 540px) {
    .form-data, .form-origem-destino, .campos-de-selecao {
        flex-flow: column wrap;
        align-items: start;
    }
    
    .form-data div, .form-origem-destino div, .campos-de-selecao div {
        width: 100%;
    }
}

/*até 768px*/
@media (max-width: 768px) {
    .form-button {
        width: 100%;
    }

    .full-figures {
        height: 100%;
        flex-direction: column;
    }

    .normal-figures {
        width: 100%;
        flex-direction: column;
    }

    .full-figures figure {
        width: 100%;
        height: 225px;
        margin-top: 15px;
    }

    .cards-anuncios {
        flex-direction: column;
    }

    .card-anuncio {
        margin-top: 15px;
        width: 100%;
    }

    .footer-div {
        flex-direction: column;
        align-items: center;
    }

    .footer-content {
        width: 250px;
    }
}

/*até 1100px*/
@media (max-width: 1100px) {
    #div-logo, .full-form, .section-ofertas, .section-anuncios, .footer-div {
        width: 90%;
    }
}









/*animações hehe*/

.full-figures figure {
    transition: 0.3s;
}

.full-figures figure:hover {
    transform: scale(105%);
    transition: 0.3s;
}

.card-anuncio {
    transition: 0.5s;
}

.card-anuncio:hover {
    transform: scale(105%);
    transition: 0.5s;    
}