/* ---------- TELAS 768px e 1200px ---------- */
@media (max-width: 1200px) {

    main section {
        padding: 60px 40px;
    }

    section.hero {
        height: auto;
        flex-direction: row;
        gap: 20px;
    }

    section.hero .direita img {
        width: 350px;
    }

    main section.momentos_incriveis .texto_principal_secao {
        font-size: 2.8rem;
        left: 4%;
        top: 0px;
        z-index: 100;
    }
    
    main section.momentos_incriveis .container_imgs {
        gap: 20px;
    }

    main section.momentos_incriveis .container_imgs .container_img.cachoeira .texto_secundario_secao {
        font-size: 1.4rem;
        left: -100px;
        bottom: 95px
    }

    main section.momentos_incriveis .container_img img {
        width: 100%;
    }
}

/* ---------- TELAS 768px ---------- */
 @media (max-width: 768px) {

    /* MENU */
    header nav.menu {
        flex-direction: column;
        gap: 20px;
        height: auto;
    }

    header nav.menu a.logo img {
        width: 110px;
    }

    header nav.menu ul.buttons {
        gap: 15px;
    }

    header nav.menu ul.buttons li a {
        padding: 10px;
        font-size: 10pt;
    }


    /* MAIN */
    main section {
        padding: 40px 20px;
    }

    /* HERO */
    main section.hero {
        flex-direction: column;
        text-align: center;
        height: auto;
        gap: 20px;
        padding-top: 90px;
    }

    main section.hero .esquerda .cta_button {
        margin: 0 auto;
    }

    main section.hero .esquerda h1 {
        font-weight: 500;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    main section.hero .esquerda > p {
        font-weight: 400;
        font-size: 1rem;
        margin-bottom: 40px;
    }

    section.hero .direita img {
        width: 85%;
        margin-left: -50px;
    }

    /* MOMENTOS INCRÍVEIS */
    main section.momentos_incriveis .texto_principal_secao {
        font-size: 1.8rem;
        background-color: #ffffff;
        top: 0px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    main section.momentos_incriveis .container_imgs {
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

    main section.momentos_incriveis .container_imgs .container_img.cachoeira .texto_secundario_secao {
        font-size: 1rem;
        left: -40px;
        bottom: 168px
    }

    .momentos_incriveis .cta_button {
        position: relative !important;
        right: 0 !important;
        bottom: 0 !important;
        margin-top: 10px;
    }

    main section.momentos_incriveis p.info_text {
        font-size: 12pt;
    }


    /* SOBRE */
    main section.sobre {
        display: flex;
        flex-direction: column;
    }

    main section.sobre .container_info {
        height: auto;
        padding: 25px;
        border-radius: 20px;
    }

    main section.sobre .container_info .texto h2 {
        margin-bottom: 30px;
    }

    main section.sobre .container_info .texto p {
        font-size: 11pt;
    }

    main section.sobre .container_dados {
        gap: 15px;
    }

    main section.sobre .container_dados .dado {
        height: auto;
        padding: 20px;
    }

    main section.sobre .container_dados .cta_button {
        width: 100%;
    }

    /* REGIÕES */
    main section.regioes .container_regioes {
        grid-template-columns: 1fr;
        height: auto;
    }

    main section.regioes .cta_and_article {
        flex-direction: column;
    }

    main section.regioes .cta_and_article .cta_button {
        width: 100%;
    }

    /* NOVA EXPERIÊNCIA */
    main section.nova_experiencia {
        padding: 0 20px 50px;
    }

    main section.nova_experiencia .container {
        height: auto;
        padding: 20px;
        text-align: center;
        gap: 20px;
    }

    main section.nova_experiencia .down {
        flex-direction: column;
        gap: 20px;
    }

    main section.nova_experiencia .cta_button {
        width: 100%;
        justify-content: center;
    }

    /* FOOTER */
    footer {
        grid-template-areas:
            "logo"
            "menu"
            "redes_sociais"
            "contatos"
            "developed_by";
        text-align: center;
    }

    footer .contatos {
        align-items: center;
        padding: 20px;
    }

    footer .contatos p {
        text-align: center;
        width: 100%;
    }
}

/* ---------- TELAS 480px ---------- */
@media (max-width: 480px) {

    header nav.menu ul.buttons li a {
        font-size: 8pt;
    }
     
    main section.momentos_incriveis .container_imgs .container_img {
        background-color: rgb(215, 215, 215);
        overflow: hidden;
        width: 100%;
        height: 300px;
        background-image: url('../img/momentos_incriveis/praia-bg.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
    }

    main section.momentos_incriveis .texto_principal_secao {
        top: 100px;
        border-radius: 20px;
        padding: 10px 30px;
        left: -20px;
        height: auto;
        margin-right: 20px;
    } 

    main section.momentos_incriveis .container_imgs .container_img.cachoeira {
        background-image: url('../img/momentos_incriveis/cachoeira-bg.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    main section.momentos_incriveis .container_imgs .container_img.cachoeira .texto_secundario_secao {
        position: static;
        background-color: #ffffff;
        padding: 10px 20px;
    }
    
    main section.momentos_incriveis .container_imgs .container_img img {
        display: none;
    }

    main section.hero h1 {
        font-size: 1.6rem;
    }

    main section.momentos_incriveis .texto_principal_secao {
        font-size: 1.8rem;
    }

    main section.sobre .container_info .texto h2 {
        font-size: 1.4rem;
    }

    main section.regioes h2 {
        font-size: 1.4rem;
    }

    main section.nova_experiencia .top h2 {
        font-size: 1.7rem;
    }

    main section.nova_experiencia .down p {
        color: black;
        font-weight: 500;
    }

    footer .contatos {
        padding: 20px;
    }
}