*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
header{
    /* border:solid 2px black; cria uma  linha para contornar a tag*/
    display: flex;
    justify-content:space-between; /*meche com a posição das tags*/
    align-items: center;
}/* Barra de fale conosco e logo */
#inLogoCabecalho{
    display: flex;
    flex-direction: row;
    align-items:center ;
    justify-content:center;
    background-color:  #2DB769;
    width:18vw;
    height:6vh;  
    margin-top: 5vh;
    margin-bottom: 10vh;
}
nav{
    display:flex; /*Habilita */
    justify-content:space-between;
    width: 101%;     
}    
.botoes{      /*text-decorataion ---> tira a linha embaixo da tag a*/
    width: 25%;  
    display: flex;
    justify-content: center; /*alinha os botóes no centro*/
    font-size: 1.75vmax;
    font-family: "Inter", sans-serif;
    padding-bottom: 3vh;
    text-decoration: none;
    color: black;
}     

#inicio:hover {
    color: #D92E8A;
}

#ass:hover {
    color: #2DB769;
}

#cursos:hover {
    color: #52AFFD;
}

#apoiadores:hover {
    color: #FEAF46;
}

#wpp{
    width:4.5vh ;
    height:vh;
}
#insta{
    width:4.5vh;
    height:vh;
}
#faleConosco{
    color:white;
}
.inLogo {
    margin: 2vh;
    height: 10vh;
    width: auto;
    padding-bottom: 1vh; /*espaço em baixo do elemento*/
}
.inImg {
    height: 100px;
    width: 10px;
    box-shadow: 30vh 20% 0 0 #2DB769;
}
#inBarra{
    height: 25px;
    width: 101%; 
    display: flex;
    justify-content: space-between;
}
#inRosa {
    height: 25px;
    width: 25%;
    background-color: #D92E8A;
} /* Barra Rosa */
#inVerde {
    height: 25px;
    width: 25%;
    background-color: #2DB769;
} /* Barra Verde */
#inAzul {
    height: 25px;
    width: 25%;
    background-color: #52AFFD;
}
 /* Barra Azul */
#inAmarelo {
    height: 25px;
    width: 25%;
    background-color: #FEAF46;
    display: flex;
    flex: 1;
} 
/* Barra Amarela */
#inTitulo {
    display: flex;  
    justify-content: center; /*Alinha na horizontal*/
    align-items:center;   /*Alinha na vertical*/
    height: 6vw;
    width: 38%;
    margin-top: 8%;
    margin-left: 8%;
    padding-left: 15px;
    padding-top: 15px;
    background-color: #2DB769;
    font-family: "Chivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 650;
    font-style: normal;
    font-size: 2.25vmax;
    color: rgb(255, 255, 255);
}
 /* Titulo  */
#inMain{
    display: flex;
    flex-direction: column; 
}
.inDi{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content :space-between;
}
p{ /*tam. do textos do projeto */
    font-size: 1.30vmax;
    font-family: "Chivo", sans-serif;
}
h2{ /*tamanho do titulo dos projetos */
    font-size: 1.60vmax;
    font-family: "Chivo", sans-serif;
}
.inEsq{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}
.inImgD{
    width: 30% ; /* largura */
    height: 40%; /* altura */
    margin-right: 11%;
    margin-top: 2vw;
    box-shadow: #2DB769 4vmax 2vmax 0 0;
}
.inImgE{ /*img esquerda */
    width: 30%;
    height: 40%;
    margin: 3vw;
    margin-left: 11%;
    box-shadow: #2DB769 -4vmax 2vmax 0 0;
}
.inDivDireita{ /*textos esquerdo */
    width: 38%;
    margin-left: 9%; /* distancia do texto até a tela */
    margin-left: 8%;
    text-align: justify;
    padding-top: 3%;
    margin-top: 2vw;
}
.inDivEsquerda{ /*texto direito */
    width: 38%;
    margin-right: 8%;
    text-align: justify;
}
   
footer{
    margin-top:30vh;
}
#section1{
    margin-bottom: 5vh;
}
#section2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 10vh;
    background-color: #2DB769;
    font-family: "Chivo", sans-serif;
}
#imgRodape{
    width: 8vw;
    height: 9vh;
    margin-top: 1vmax;
    margin-left: 45vmax;
}
.brrVerde{
    text-align: center;
    color: white;
    font-family: "Chivo", sans-serif;
}
.textNegrito{
    font-weight: bold;
}
#divRodape1{
    display:flex;
    flex-direction:row;
    justify-content: center;
}
#divRodape2{
    display:flex;
    flex-direction:row;
    justify-content: center;
}


@media screen and (max-width: 600px) {
    @media screen and (max-width: 600px) {
        /* Ajuste do logo e header */
        #inLogoCabecalho {
            width: 42vw; 
            height: 5vh; 
            margin-top: 3vh; /* Ajuste da margem superior */
            margin-bottom: 8vh; /* Ajuste da margem inferior */
        }
        
        /* Ajuste nos ícones (WhatsApp e Instagram) */
        #wpp, #insta {
            width: 4vh; 
            height: 4vh;
        }
        .botoes {
            width: 100%; /* Os botões ocupam toda a largura da tela */
            font-size: 1.5vmax; 
            padding-bottom: 2vh; /* espaçamento interno */
            margin-right: 16px; /* texto dos botões */
        }
    
        /* Serviço socio. */
        #inTitulo {
            height: 10vw; 
            width: 60vw;  
            font-size: 2.2vmax;
            margin-top: 4vh; 
            margin-bottom: 3vh;
            padding: 10px;
        }
        
        /* Ajuste nas barras coloridas */
        #inRosa, #inVerde, #inAzul, #inAmarelo {
            height: 3vw; 
            width: 24vw; 
        }
        .inLogo{
            width: 24vw;
            height: auto;
            margin-bottom: 30px;
        }
        p{ /*tam. do textos do projeto */
            font-size: 1.80vmax;
        }
        h2{ /*tamanho do titulo dos projetos */
            font-size: 2vmax;
            padding-bottom: 2vh;
            font-weight: bold;
        }
        .inDi, .inEsq {
            display: flex;
            flex-direction: column; /* Coloca o texto em cima e a imagem embaixo */
            align-items: center;
            justify-content: center;
        }

        /* Ajuste nos textos e imagens dentro das seções */
        .inDivDireita, .inDivEsquerda {
            width: 85%; /* O texto ocupa 85% da largura da tela */
            margin: 0 auto; 
            padding: 10px; 
            text-align: justify; 
            margin-bottom: 5vw;
        }
        
        .inImgD, .inImgE {
            width: 70vw; /* A imagem ocupa 90% da largura da tela */
            height: auto; /* Mantém a proporção da imagem */
            margin: center; /* Adiciona margem e centraliza a imagem */
            margin-bottom: 9%;
            box-shadow: 15vh;
            display: flex;
            flex-direction: column-reverse;
        }
    
        
        /* Ajuste do footer */
        footer {
            margin-top: 15vh; /* Diminui o espaçamento superior */
        }
        #section1{
            margin-bottom: 2vh;
        }
        #section2{
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 7vh;
        }
        .brrVerde{
            text-align: center;
            color: white;
            font-size: 1.47vmax;
            font-weight: bold;
        }
        .textNegrito{
            font-weight: bold;
        }
        #divRodape1, #divRodape2 {
            flex-direction: column; /* Empilha os elementos do rodapé */
            align-items: center;
            margin-right: 15px;
            margin-left: 20px;
        }
        /*logo rodape*/
        #imgRodape { 
            width: 20vw; /* Ajusta a largura da imagem no rodapé */
            height: auto; /* Mantém a proporção da imagem */
            margin-top: 2vmax;
            margin-left: 21.75vmax;
        }
    }
}