/* *! RESPOSIVIDADE */
@media only screen and (max-device-width: 999px) {
    body {font-size: 10px;}

    .logo {
      font-size: 7vw;
    }
  
    h2 {
      font-size: 3.5vw;
      text-align: center;
      margin-top: 20vh;
      margin-bottom: 0;
    }
    
    h3{
      font-size: 2.5vw;
      margin-top: 0px;
      margin-bottom: 2vh;
    }
    
    p {
      margin: 0;
      font-size: 2vw;
      text-align: justify;
    }
    
    .bold {
      font-weight: 600;
    }
    
    button {
      font-family: 'Open Sans', sans-serif;
      font-size: 2.4vw;
      font-weight: bold;
      text-align: center;
      padding: 2% 20% 2% 20%;
      border: none;
      border-radius: 5px;
    }
  
    /* ! Cards bandeira */   
    .card {
        width: 35vw;
        padding: 2vh 2vw 2vh 2vw;
    }
    

    /* ! Sobre */
    .sobre h2 {
      margin: 10vh 0 0 0;
    }
    
    .line {
      width: 60%;
      height: 1px;
      margin-bottom: 5%;
    }
    
    /* Projeto */
    .div-projeto {
      width: 90%;
      margin: 5%;
      margin-top: 0;
    }
    
    .projetoh3 {
      margin-top: 0;
    }
    
    .p-img {
      display: flex;
      width: 90vw;
    }
    
    .p-projeto {
      width: 50%;
      margin: 0 5% 0 0;
      align-items: flex-start;
    }
    
    .img {
      width: 45%; 
    }
    
    img {
      width: 100%;
    }

    /* ! AJUDA */
    .dois-cards {
        width: 96%;
        margin: 0 2% 2% 2%;
    }
    
    .card-ajude {
        width: 45%;
        margin: 0 2vw 2vh 2vw;
    }

    /* ! Contatos */
    .contatos-grid {
        width: 90%;
        margin: 0 5% 0 5%;
    }
    
    .icons p {
        font-size: 2.5vw;
    }
    
    .icons img {
        width: 3vw;
        margin: 0;
    }

    /* ! Footer */
    .ul-footer {
        font-size: 1.5vw;
    }
    
    .ul-footer-ec {
        font-size: 1.5vw;
    }
}




@media only screen and (max-device-width: 865px) {
    body {font-size: 10px;}
  
    h2 {
      font-size: 4vw;
      text-align: center;
      margin-top: 10vh;
      margin-bottom: 0;
    }
    
    h3{
      font-size: 3.4vw;
      margin-top: 0px;
      margin-bottom: 2vh;
    }
    
    p {
      margin: 0;
      font-size: 2.5vw;
      text-align: justify;
    }
    
    .bold {
      font-weight: 600;
    }
    
    button {
      font-family: 'Open Sans', sans-serif;
      font-size: 2.4vw;
      font-weight: bold;
      text-align: center;
      padding: 2% 20% 2% 20%;
      border: none;
      border-radius: 5px;
    }
  
    /* ! Cards bandeira */   
    .card {
        width: 35vw;
        padding: 2vh 2vw 2vh 2vw;
    }
    

    /* ! Sobre */
    .sobre h2 {
      margin: 10vh 0 0 0;
    }
    
    .line {
      width: 60%;
      height: 1px;
      margin-bottom: 5%;
    }
    
    /* Projeto */
    .div-projeto {
      width: 90%;
      margin: 5%;
      margin-top: 0;
    }
    
    .projetoh3 {
      margin-top: 0;
      margin-left: 5%;
    }
    
    .p-img {
      display: flex;
      flex-direction: column;
      width: 90vw;
    }
    
    .p-projeto {
      width: 90%;
      margin: 0 5% 0 5%;
      align-items: flex-start;
    }

    .img-pro {
      margin-top: 2vh;
    }
    
    .img {
      width: 100%;
    }
    
    img {
      width: 90%;
      margin: 0 5% 0 5%;
    }

    .div-ong {
        width: 90%;
        margin: 5%;
        margin-top: 0;
    }
    
    .ongh3 {
        margin-top: 5vh;
        margin-right: 5%;
    }
    
    .p-img {
        width: 90vw;
        display: flex;
        flex-direction: column;
    }
    
    .p-ong {
        width: 90%;
        margin: 2vh 5% 0 5%;
        align-items: flex-start;
    }
    

    /* ! AJUDA */
    .card-ajude {
        width: 45%;
        margin: 0 2vw 2vh 2vw;
    }

    .dois-cards {
        flex-direction: column;
        width: 96%;
        margin: 0 2% 0 2%;
    }
      
    .um-card {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .div-cards-ajude {
        text-align: center;
    }
    
    .card-ajude {
        background-color: var(--card-bg);
        width: 65%;
        padding: 4%;
        border-radius: 1vh;
        box-shadow: 0 0 1vh var(--shadow);
    }

    .card-refugiada {
        margin: 0 5vw 5vh 5vw;
    }

    .card-anfitria {
        margin: 0 5vw 5vh 5vw;
    }
    
    .div-card-doacao {
        width: 96%;
        margin: 0 2% 0 2%;
    }

    .card-doacao {
        width: 65%;
        margin: 0 5vw 0 5vw;
    }


    /* ! Contatos */
    .contatos-grid {
        width: 90%;
        margin: 0 5% 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .quebra-txt-contatos {
        display: flex;
        margin-bottom: 1vh;
    }

    .icons {
        margin-top: 4vh;
    }

    .icons p {
        font-size: 2.5vw;
    }
    
    .icons img {
        width: 3vw;
        margin: 0;
    }

    

    /* ! Footer */
    footer {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10vh;
        margin-top: 10vh;
        background-color: var(--footer-bg);
        color: var(--colorW);
        text-align: center;
    }

    .ul-footer {
        font-size: 1.5vw;
    }
    
    .ul-footer-ec {
        font-size: 1.5vw;
    }
}