body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(160deg, #ffc062, #FDDDAD, #6ae4ff, #00D1FF, #394cff) no-repeat;
    /* visualização */

}

* {
    font-family: 'Montserrat', sans-serif;
}

.topoProjetos {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.mascoteBaia{
width: 1300px;
overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mascoteBaia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.topoProjetosAgrupado {
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.topoProjetosAgrupado h1 {
    color: #060434;
    font-weight: 400;
    font-size: 80px;
}

.topoProjetosAgrupado h2 {
    color: #060434;
    font-weight: 400;
    font-size: 40px;
}

.topoProjetosAgrupado h3 {
    color: #060434;
    font-weight: 600;
    font-size: 35px;
    margin-bottom: 10px;
}

.topoProjetosAgrupado p {
    color: #E04700;
    font-size: 30px;
}

.strongO {
    color: #E04700;
    font-weight: 800;
}

/* contexto */

.contexto {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.contextoAgrupado {
    padding: 2em;
    display: flex;
    justify-content: left;
    flex-direction: column;
}

.contexto h1 {
    color: #E04700;
    font-weight: 800;
    font-size: 65px;
}

.contexto p {
    color: #060434;
    font-weight: 500;
    font-size: 30px;
    flex-wrap: wrap;
}

.gifInterface {
    width: 250px;
    height: auto;
}

/* conceito */

.conceito {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conceitoAgrupado {
    padding: 2em;
    display: flex;
    justify-content: right;
    flex-direction: column;
}

.conceito h1 {
    text-align: right;
    color: #E04700;
    font-weight: 800;
    font-size: 65px;
}

.conceito p {
    text-align: right;
    color: #060434;
    font-weight: 500;
    font-size: 30px;
}

/* atuacao */

.atuacao {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.atuacaoAgrupado {
    padding: 2em;
    display: flex;
    justify-content: left;
    flex-direction: column;
}

.atuacao h1 {
    text-align: left;
    color: #E04700;
    font-weight: 800;
    font-size: 65px;
}

.atuacao p {
    text-align: left;
    color: #060434;
    font-weight: 500;
    font-size: 30px;
}

/* responsavel */

.responsavel {
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.responsavelAgrupado {
    padding: 2em;
    display: flex;
    justify-content: right;
}

.responsavel h1 {
    text-align: center;
    color: #E04700;
    font-weight: 800;
    font-size: 65px;
    margin-bottom: 20px;
}

.gifBaiaResponsavel {
    border: solid 5px #E04700;
    width: 500px;
    height: 450px;
    border-radius: 20px;
}

.responsavel ul {
    text-align: left;
    color: #060434;
    font-weight: 500;
    font-size: 30px;
    flex-wrap: wrap;
   
}

.responsavel ul li {
    margin-bottom: 30px;
   
}

.gifTextoAgrupado{
    display: flex;
text-align: center;
}

/* abordagem */
.abordagem {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abordagemAgrupado {
    padding: 2em;
    display: flex;
    justify-content: left;
    flex-direction: column;

}

.abordagemAgrupado h1 {
    margin-bottom: 20px;
    text-align: left;
    color: #E04700;
    font-weight: 800;
    font-size: 65px;

}

.abordagemAgrupado p {
    text-align: left;
    color: #060434;
    font-weight: 500;
    font-size: 30px;
}

.abordagem img {
    border: solid 5px #E04700;
    width: 800px;
    height: auto;
    border-radius: 10px;
}


/* resultado */

.resultado {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.topoResultadoAgrupado {
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.topoResultadoAgrupado h1 {
    color: #E04700;
    font-weight: 800;
    font-size: 80px;
}

.topoResultadoAgrupado p {
    text-align: center;
    color: #060434;
    font-weight: 500;
    font-size: 30px;
}

.resultado img {
    width: 500px;
    height: auto;
}

/* BOTOES */
.botoes {
    padding: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap: 1.5em;
     transition: 1s;

}

.botoes a {

    padding: 1em 1em;
    font-size: 25px;
    font-weight: 600;
    border-radius: 5px;
    background: linear-gradient(90deg, #ffffff, #ffb74a);
    color: #060434;
    text-align: center;
    text-decoration: none;
    width: 400px;
    height: auto;
    transition: 0.5s;
}

.botoes a:hover {
    color: #E04700;
    transform: scale(1.05);
box-shadow: 0 0px 0px 2px #E04700;
}

@media screen and (max-width: 1024px){

    /* topo */
.mascoteBaia {
    width: 1000px;
}


/* conceito */
.conceito{
    padding: 4em;
}

/* atuação */
.atuação{
    padding: 4em;
}

/* abordagem */
.abordagem{
    padding: 4em;
}

.abordagemAgrupado h1 {
    font-size: 50px;
}

.abordagem img{
     width: 550px;
     height: auto;
}

/* responsavel */
.responsavel{
    padding: 4em;
}

.gifBaiaResponsavel{
     width: 400px;
     height: 350px;
}


.responsavel h1 {
    font-size: 50px;
    flex-wrap: wrap;
}

.responsavel ul{
    font-size: 25px;
     text-align: left;
}

/* resultado */
.resultado img{
    width: 400px;
    height: auto;
}

}

@media screen and (max-width: 768px){
   
    /* topo */
.mascoteBaia{
    width: 750px;
}


/* conceito */
.conceito{
    padding: 4em;
}

/* atuação */
.atuação{
    padding: 4em;
}

/* abordagem */
.abordagem{
    display: flex;
    text-align: center;
    align-items: center;
    padding: 4em;
    flex-direction: column;
}

.abordagemAgrupado h1 {
    font-size: 50px;
    text-align: center;
}

.abordagem img{
     width: 550px;
     height: auto;
}

/* responsavel */
.responsavel{
    padding: 4em;
}

.gifBaiaResponsavel{
     width: 400px;
     height: 350px;
     
}
.gifTextoAgrupado{
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
}


.responsavel h1 {
    font-size: 50px;
        margin-bottom: 10px;
}

.responsavel ul{
    margin-bottom: 10px;
    font-size: 25px;
     text-align: center;
     flex-wrap: wrap;
}

/* resultado */
.resultado img{
    width: 400px;
    height: auto;
}

}

@media screen and (max-width: 480px){
   
    /* topo */
.mascoteBaia{
    width: 480px;
}

.topoProjetosAgrupado h1 {
    font-size: 50px;
}
.topoProjetosAgrupado h2 {
    font-size: 30px;
}
.topoProjetosAgrupado h3 {
    font-size: 20px;
}
.topoProjetosAgrupado p {
    font-size: 15px;
}


/* contexto */
.contexto{
    padding: 1em;
}

.contexto h1{
    font-size: 40px;
}

.contexto p{
    font-size: 23px;
}

.gifInterface {
    width: 180px;
    height: auto;
}

/* conceito */

.conceito{
    padding: 1em;
}

.conceito h1{
    font-size: 40px;
}

.conceito p{
    font-size: 23px;
}

/* atuação */
.atuacao{
    padding: 1em;
}
.atuacao h1{
    font-size: 40px;
}

.atuacao p{
    font-size: 23px;
}

/* responsavel */
.responsavel{
    padding: 2em;
}

.responsavel h1 {
    font-size: 40px;
    margin-bottom: 10px;
}

.gifBaiaResponsavel{
     width: 300px;
     height: 250px;
     
}
.gifTextoAgrupado{
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.responsavel ul{
    margin-bottom: 10px;
    font-size: 25px;
     text-align: center;
     flex-wrap: wrap;
}


/* abordagem */
.abordagem{

    display: flex;
    text-align: center;
    align-items: center;
    padding: 2em;
    flex-direction: column;
}

.abordagemAgrupado h1 {
    font-size: 50px;
    text-align: center;
}

.abordagemAgrupado p {
    text-align: center;
}

.abordagem img{
     width: 400px;
     height: auto;
}

/* resultado */

.topoResultadoAgrupado h1{
    font-size: 55px;
    margin-bottom: 10px;
}

.topoResultadoAgrupado p{
    font-size: 25px;
}



.resultado {
    padding: 2em;
}

.resultado img{
    width: 300px;
    height: auto;
}

/* BOTOES */
.botoes a{
     width: 330px;
     font-size: 23px;
}

}


@media screen and (max-width: 420px){
    
    /* topo */
.mascoteBaia{
    width: 350px;
}

.topoProjetosAgrupado h1 {
    font-size: 50px;
}
.topoProjetosAgrupado h2 {
    font-size: 30px;
}
.topoProjetosAgrupado h3 {
    font-size: 20px;
}
.topoProjetosAgrupado p {
    font-size: 15px;
}


/* contexto */
.contexto{
    padding: 1em;
}

.contexto h1{
    font-size: 30px;
}

.contexto p{
    font-size: 15px;
}

.gifInterface {
    width: 120px;
    height: auto;
}

/* conceito */

.conceito{
    padding: 1em;
}

.conceito h1{
    font-size: 30px;
}

.conceito p{
    font-size: 15px;
}

/* atuação */
.atuacao{
    padding: 1em;
}
.atuacao h1{
    font-size: 30px;
}

.atuacao p{
    font-size: 15px;
}

/* responsavel */
.responsavel{
    padding: 2em;
}

.responsavel h1 {
    font-size: 30px;
    margin-bottom: 10px;
}

.gifBaiaResponsavel{
     width: 300px;
     height: 250px;
     
}
.gifTextoAgrupado{
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.responsavel ul{
    margin-bottom: 10px;
    font-size: 15px;
     text-align: center;
     flex-wrap: wrap;
}


/* abordagem */
.abordagem{

    display: flex;
    text-align: center;
    align-items: center;
    padding: 2em;
    flex-direction: column;
}

.abordagemAgrupado h1 {
    font-size: 30px;
    text-align: center;
}

.abordagemAgrupado p {
    text-align: center;
    font-size: 15px;
}

.abordagem img{
     width: 300px;
     height: auto;
}

/* resultado */

.topoResultadoAgrupado h1{
    font-size: 40px;
    margin-bottom: 10px;
}

.topoResultadoAgrupado p{
    font-size: 20px;
}



.resultado {
    padding: 2em;
}

.resultado img{
    width: 230px;
    height: auto;
}

/* BOTOES */
.botoes a{
     width: 250px;
     font-size: 18px;
}

@media screen and (max-width: 320px){
    /* topo */
.mascoteBaia {
    width: 320px;
}

.topoProjetosAgrupado h1 {
    font-size: 40px;
}
.topoProjetosAgrupado h2 {
    font-size: 20px;
}
.topoProjetosAgrupado h3 {
    font-size: 18px;
}
.topoProjetosAgrupado p {
    font-size: 15px;
}


/* contexto */
.contexto{
    padding: 1em;
}

.contexto h1{
    font-size:30px;
}

.contexto p{
    font-size: 15px;
}

.gifInterface {
    width: 80px;
    height: auto;
}

/* conceito */

.conceito{
    padding: 1em;
}

.conceito h1{
    font-size: 30px;
}

.conceito p{
    font-size: 15px;
}

/* atuação */
.atuacao{
    padding: 1em;
}
.atuacao h1{
    font-size: 30px;
}

.atuacao p{
    font-size: 15px;
}

/* responsavel */
.responsavel{
    padding: 2em;
}

.responsavel h1 {
    font-size: 30px;
}

.gifBaiaResponsavel{
     width: 250px;
     height: 230px;
     
}
.gifTextoAgrupado{
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.responsavel ul{
    font-size: 15px;
     text-align: center;
     flex-wrap: wrap;
}


/* abordagem */
.abordagem{

    display: flex;
    text-align: center;
    align-items: center;
    padding: 1em;
    flex-direction: column;
}

.abordagemAgrupado h1 {
    font-size: 30px;
    text-align: center;
}

.abordagemAgrupado p {
    text-align: center;
    font-size: 18px;
}

.abordagem img{
     width: 280px;
     height: auto;
}

/* resultado */

.topoResultadoAgrupado h1{
    font-size: 40px;
    margin-bottom: 10px;
}

.topoResultadoAgrupado p{
    font-size: 20px;
}



.resultado {
    padding: 2em;
}

.resultado img{
    width: 200px;
    height: auto;
}

/* BOTOES */
.botoes a{
     width: 200px;
     font-size: 15px;
}

}

}