@media screen and (min-width: 360px) and (max-width: 1023px){
 /* ===== GERAL ===== */
.box-txt{
    width: 36rem;
    padding-inline: 2rem;  
}
.txt-paragraph{
    font-size: 1.8rem;
}
.subtitle{
    font-size: 4.2rem;
}  
.wrapper{
    width: min(36rem, 100vw);
    padding-top: 4.5rem;
}
.navContent{
    padding: 0;
}
/* ===== ANTES DO MENU EXPANDED ===== */

#btnOpen{
    display: initial; 
}
.logo{
    width: 4rem;
    padding-block: .5rem;
}
/* .banner{
    display: none;
} */
#btnTopo{
   opacity:0;
   visibility: hidden;
}
#navMenu{
    opacity: 0;
    visibility: hidden;
}
/* ===== MENU EXPANDED ===== */
body.menuExpanded #btnTopo{
    opacity:1;
    visibility: visible;
    margin-top: 4rem;
}
body.menuExpanded #navMenu{
     opacity: 1;
     visibility: visible;
     margin-top: 4rem;
}
body.menuExpanded{
    overflow: hidden;
}
body.menuExpanded #navigation{
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;

background-color: var(--green-hover);
}
body.menuExpanded .navContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.menuExpanded .nav-menu{
    display: flex;
    flex-direction: column; 
}
body.menuExpanded .nav-menu a{
    
    font-size: 2.4rem;
    font-weight: 400;
    color: white;
    opacity: .8;
}
body.menuExpanded .nav-menu a:hover{
    font-weight: 700;
    opacity: 1;
}
body.menuExpanded .btn-doacao-topo{
  width: 27.4rem;
  height: 5.5rem;
  background-color: var(--orange-btn);
  box-shadow: var(--box-shadow-btn);
}
body.menuExpanded .btn-doacao-topo:hover{
    background-color: var(--green-secundary);
  }
.logoExpanded{
    display: flex;
    width: 100vw;
    padding-inline: 2rem;
    justify-content: flex-start;
    align-items: center;
}
.btn-menu{
    position: absolute;
    right: 2rem;
    top: 1rem;
}

.nav-menu a::after{
 background-color: white;
}
body.menuExpanded #btnClose{
    position: absolute;
    right: 0rem;
    top: 0;
}
body.menuExpanded #btnOpen{
    display: none;
}

/* ===== HOME ===== */


.info-belagua{
    grid-template-columns: 2fr;
    grid-template-areas: 'B' 'A';

    height: 100%;
    text-align: center;

    padding-top: 40vh;
  
}
.info-belagua h3{
    font-size: 3.6rem;
}
.info-belagua p{
    padding-top: 4rem;
}
/* ===== FAÇA PARTE ===== */

.section-facaParte .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }
 .card{
    width: 80%;
    height: 40rem;
    margin: 3rem 1rem 2rem 1rem;
    background-color:#364F75;
    border: none;
    border-radius: 2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;

    padding: 2.6rem;  

    box-shadow: 0rem 0rem 1rem;
    margin-bottom: 1rem;
}
/* ===== PROJETOS ===== */

.box-projetos{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
 }
 .card-projeto{
    width: 90%;
    height: 100%;
    margin: 1rem;
    padding: 2rem 1.5rem;
}
.box-arrecadacao{
    padding: 1rem;
    width: 100%;
}
.box-arrecadacao h2{
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.box-arrecadacao h3{
    font-size: 1.4rem;
}
.box2, .box3{
    padding-left: .5rem;   
}
/* ===== VOLUNTARIOS ===== */


.box-voluntarios{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
    
    padding-left: 2rem;
}
.card-voluntario{
    width: 100%;

}
.img-voluntario{
    width: 60%;
}
.txt-voluntario{    
    padding-block: 2rem;
    padding-inline: 3rem;
    text-align: left;
   

}
.txt-voluntario h2{
    font-size: 2rem;
}
.txt-voluntario h3{
    font-size: 1.4rem;
}
.social-links{
    padding-top: 2rem;
}
.social-links img{
   width: 3rem;
}
/* ===== GALERIA ===== */

.min{
    width: 15rem;
}
/* ===== FOOTER ===== */

#footer{
    height: 64.5rem;
    background-color: #393939;
}
footer .wrapper{
    background-color: #393939;
    
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    
   
}

.box-logo{
   height: 15rem;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:flex-start;
    gap: 3rem;
}
.endereco,
.contatos,
.apoio{
    width: 20rem;
}


}