/* Gerando responsividade */ 
@media (max-width: 600px) /* para celular */ {
    .barraSuperior{
        visibility: hidden;
    }

    .header2{
        position: fixed;
        top: 0;
        z-index: 1001 /* maior número maior prioridade */;
        
    }

    .div-banner-img{
        height: 200px;
        position: relative;
        top: -30px;
        
    }

    #btn-mobile {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1100;
        background: none;
        border: none;
        cursor: pointer;
    }
    #menu{
        display: block;     
        position: absolute;
        width: 100%;
        top: 70px;
        right: 0px;
        background-color: rgb(255, 254, 254);
        height: 100vh;
        transition: .6s; /* transição de forma animada no 
        z-index: 1000; /* para aparecer a frente de tudo que tiver na tela */
        height: 0px;
        visibility: hidden;
        overflow-y: hidden;

    }
/*  */
    #menu li {
        display: block; /* Faz com que os itens sejam exibidos em coluna no mobile */
        width: 100%;
    }
/*  */
    #nav.active #menu{
        
            height: 100vh;
            visibility: visible;
            overflow-y: auto;
    }

    #menu a{
        padding: 1.5rem 0;
        margin: 0 1rem;
        border-bottom: 2px solid rgba(0, 0, 0, .05);/* Linha para separar */ 
        /* text-align: center; */


        /* padding: 1.5rem 1rem; */ /* Ajuste o preenchimento conforme necessário */
        /* margin: 0; */ /* Remove as margens adicionais */
        
    }
    .dropdown img{
        visibility: hidden;
    }

    /* teste */
    .dropdown:hover .dropdown-menu {
        display: contents;
    }

    
    .dropdown-menu > li{
        border-bottom: 0px;
    }
    .dropdown-menu > li > a{
        color:#c52626;
    }

    .dropdown-menu {
        display: contents;
        position: absolute;
        width: 95%;
        /* border-top: 1px solid rgba(0, 0, 0, .05); */
        /* margin-left: 2%; */
        
    }

    #menu>.redeSociais-mobile {
        visibility: visible;
        position: relative;
        top: 0;
        display: flex;
        justify-content: space-around;
        border-bottom: none;
    }

    #menu .redeSociais-mobile >a {
        border-bottom: none;
    }

    #menu >.link-album-mobile {
        visibility: visible;
        position: relative;
        top: 0;
        display: flex;
        justify-content:flex-start;
        border-bottom: none;
        font-size: 14px;
    }

    #menu .link-album-mobile>a {
        border-bottom: none;
    }
    

/* ainda aqui */
    /* fim teste */

    #menu .mexer {
        padding: 1.5rem 0;
        margin: 0 1rem;
        border-bottom: 2px solid rgba(0, 0, 0, .05);
    }

    #hamburguer{
        display: block;
        border-top: 2px solid;
        width: 20px;
        color: black; /* Ajuste para outra cor, se necessário */
    }
    #hamburguer::after, #hamburguer::before{
        content:'';
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor; /* variável que tem o valor da cor de #hamburguer */
        margin-top: 5px;
        transition: .3s;
        position: relative;
    }

    #nav.active #hamburguer{
        border-top-color: transparent;
    }

    #nav.active #hamburguer::before{
        transform: rotate(135deg);
    }

    #nav.active #hamburguer::after{
        transform: rotate(-135deg);
        top: -7px; /* Só funciona se tiver um position */
    }

    .section-about{
        z-index: 0 /* 2° prioridade na tela */;
        padding: 0;
        margin: 0;
        /* display: flex; */
        flex-direction: column;
        max-width: 100%;
        
    }

    .about-us{
        padding: 0;
        margin: 0;
        max-width: 90%;
        
    }

    .about-us h1 {
        font-size: 26px;
        display: flex;
        justify-content: center;
        
    }
    .about-us h2 {
        font-size: 20px;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .about-us p {
        font-size: 16px;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .linha-container{
        top: 0;
        margin: 0;
        padding: 0;
        left: 0;
        max-width: 100%;
        height: 55px;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .btn-saiba-mais {
        width: 150px;
        height: 40px;
        text-align:center;
        margin: 0;

    }
    .img-container{
        max-width: 90%;
        width: auto;
        height: auto;
    }
    .img-sobre{
        width: 700px;
        height: 371px;
        align-items: center;
    }



    /* ---------------------------------------- */
    /* Por que escolher a Flex Major?  */
    /* ---------------------------------------- */

    .section-diferenciais h1{
        display: flex;
        justify-content: center;
        padding: 20px 0 0 0;
        font-size: 26px;
        color: #B41819;
        align-items: center;
    }
    .section-diferenciais div img{
        display: flex;
        justify-content: center;
        align-items: center;
        /* Centralizou por conta do margin auto no css original */
    
    }

    /* -------------------------------------------------------- */
    /* FAQ */
    /* -------------------------------------------------------- */
    .container-title{
        margin: 0;

    }

    /* -------------------------------------------------------- */
    /* COMECE AGORA */
    /* -------------------------------------------------------- */

    .container-comece img{
        padding: 0;
    }

    .div-container-txt{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .div-container-txt h1{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div-container-txt h2{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .div-container-txt p{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .div-container-txt button{
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }


}

/* Responsivo - Joga para baixo no celular */
@media (max-width: 768px) {
    .label-banner {
        position: static;
        transform: none;
        margin: 20px 0;
        width: 86%;
    }

    .input-group {
        flex-direction: column;
    }

}

@media (min-width: 601px) and (max-width: 1024px)  /* Regra para telas médias */{
.section-about {
    flex-direction: column;
    padding: 0;
}
.about-us h1 {
    font-size: 30px;
    padding: 15px 10px;
    display: flex;
    justify-content: center;
}
.about-us h2 {
    font-size: 20px;
    padding: 0px 10px 10px 10px;
    display: flex;
    justify-content: center;
}
.about-us p {
    font-size: 18px;
    margin-left: 8px;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
}
.img-container{
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
}
.img-sobre{
    width: 700px;
    height: 500px;
}
.linha-container{
    top: 0;
    margin: 0;
    padding: 0;
    left: 0;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
}
.btn-saiba-mais {
    padding: 8px 16px;
    margin: 0;
    font-size: 16px;
    width: 115px;
    height: 40px;
    border-radius: 8px;
}


}

@media (min-width: 1024px) and (max-width: 1160px){
    .section-about{
        padding-left: 7px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: auto;
        max-width: 100%;
    }


    .linha-container{
        left: 5%;
        width: 86%;
        right: 0;
    }
}


@media (min-width: 1160px) and (max-width: 1360px){
    .section-about{
        padding-left: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: auto;
        max-width: 100%;
    }


    .linha-container{
        left: 11%;
        width: 82%;
        right: 0;
    }
}

@media (min-width: 1360px) and (max-width: 1600px){
    .section-about{
        max-width: 100%;
    }


    .linha-container {
        width: 960px;
        left: 11%;
    
    }
}

@media (min-width: 1500px) and (max-width: 1600px){
    .section-about{
        max-width: 100%;
    }


    .linha-container {
        width: 960px;
        left: 14%;
    
    }
}