/*Google Fonts*/
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700&display=swap");

* {
  font-family: "Barlow", sans-serif;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  scroll-padding-top: 2rem;
  scroll-behavior: smooth;
}

/*VARIAVEIS*/
:root {
 
  --navbar-color: #5fb9b3;
  --mainbg-color: #f9fffd;
  --2ndmainbg-color: #693d85;
  --casosbox-color: #3d1357;
  --2ndbg-color: #1C646D; 
  --2ndbglight-color: #4ca1acc0;
  --1sttext-color: #fffffe;
  --2ndtext-color: #c2bfbf;
  --2ndstrong-color: #919090;
  --3rdtext-color: black;
  --purple-color: #38184C;
  --btn-color: #47949e;
  --2ndbtn-color: #76c6d1;
  --lightblue-color:#e6edeb9a;
  
  --2ndbgop-color: #1c636d5e; 

  --h1-font: 5.2rem;
  --h2-font: 3.5rem;
  --p-font: 1.1rem;
}


/*fazer uma barra de scroll personalizada*/
html::-webkit-scrollbar {
  width: 0.5rem;
  background: var(--bg-color);
}
html::-webkit-scrollbar-thumb {
  background: var(--btn-color);
  border-radius: 5rem;
}
body {
  background: var(--mainbg-color);
  color: var(--1sttext-color);
  background-image: url('imagens/flower2.png');
  background-repeat: no-repeat;
}

section{
  padding: 160px 16% 90px;
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 100px;
  transition: 0.5s;
  background-color: var(--navbar-color);
}

li {
  list-style: none;
  }
  
.logo {
  font-size: 2rem;
  font-weight: 500;
  color: var(--1sttext-color);
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.logos {
  width: 7rem;
}

.navbar {
  column-gap: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar li {
  position: relative;
}

.navbar a {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--1sttext-color);
}

/* DROPDOWN MENU */
.drop {
  background-color: var(--2ndbg-color);
  padding: 1em 0;
  position: absolute; 
  display: none;
  border-radius: 8px;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
}

.drop li + li {
  margin-top: 10px;
}

.drop li {
  padding: 0.5em 1em;
  width: 8em;
  text-align: center;
  border: 2px solid var(--2ndmainbg-color);
  color: var(--1sttext-color);
}

.drop li:hover {
  background-color: var(--2ndmainbg-color);
  color: var(--1sttext-color);
}

.navbar li:hover .drop,
.drop:hover {
  display: block;
  position: absolute;
}

.drop li {
  border-color: var(--2ndbg-color);
  background-color: var(--2ndbg-color);
  color: var(--1sttext-color);
}

.drop li:hover {
  background-color: var(--2ndbglight-color);
}

  


.navbar a::after { /*pra fazer a barrinha em baixo*/
  content: "";
  width: 0;
  height: 2px;
  background: var(--btn-color);
  position: absolute;
  bottom: -4px;
  left: 0;
  transition: 0.4s all linear;
}

.navbar a:hover::after,
.navbar .home-active::after { /*pro home fizer sempre selecionado*/
  width: 100%;
}
#menu-icon {
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1000001;
  display: none;
}


.btn {
  padding: 0.7rem 1.4rem;
  background: var(--btn-color);
  color: var(--1sttext-color);
  font-weight: 400;
  border-radius: 0.5rem;
  box-shadow: 4px 3px 10px 2px #0f1e1d6c;
}

.btn:hover {
  background: var(--2ndbtn-color);
  box-shadow: 9px 9px 10px 4px #0f1e1d72;
}










 /*PERFIL*/
 .perfil{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 10% 0;
  

  
   /*pra essa secao ficar dessa cor*/
}

.perfil-container{
  max-width: 900px;
  max-height: 900px;
  
  /*fazer tipo um quadradinho*/
}

.nomefoto {
  width: 515.1px;
  height: 263.5px;
  object-fit: cover;
}

.perfil-container h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--purple-color);
}

.perfil-container p {
  font-size: 16px;
  margin: 10px 0 0px;
  font-weight: 500;
  
  color: var(--purple-color);
}

.perfil-imagem{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 700px;
  height: 700px;
  background-color: var(--2ndbtn-color);
  border: 26px solid grey;
  border-radius: 50%;
  
}

.imagem img{ 
  width: 570px;
  height: 100%;
  padding-left: 80px;
  object-fit: cover; 
}
.quadradoinclinado {
  
  margin-top: 900px;
  width: 700px;
  padding-bottom: 300px;
  height: 400px;
  background-color: grey;
  transform: rotate(-40deg);
  
}











/*PROJETOS*/

.projetos {
  width: 100%;
  height: 100vh;
  align-items: center;
  
  
}

.projetoborda{
   
   padding-left: 180px;
   padding-right: 180px;
   padding-bottom: 50px;
   padding-top: 50px;
   border: 4px dashed var(--2ndbgop-color);
}

.cabecatexto{
  text-align: center;
}

.cabecatexto h2{
  color: var(--2ndbg-color);
  font-size: var(--h2-font);
  margin-bottom: 10px;

}

.cabecatexto h4 {
  color: var(--2ndbglight-color);
  font-size: 24px;
  font-weight: 600;
}

.boxes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
align-items: center;
text-align: center;
gap: 2rem;
margin-top: 5rem; 
}

.box{
  padding: 45px;
  background-color: var(--lightblue-color);
  border-top: 5px solid transparent;
  transition: all .40s ease;
  border-radius: 0.5rem;
  cursor: pointer;
      /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 4px 3px #1818182b; 
}
.box img{
height:auto;
  width: 100%;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;

}
.textos-box{
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.box h3{
color: var(--btn-color);
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0;
  transition: all .40s ease;
}

.box p{
  color: var(--2ndbtn-color);  
  font-size: var(--p-font);
  line-height: 30px;
}

.box:hover{                                   /*aparecer a borda quando bota o mouse em cima*/
  transform: scale(1.01) translateY(-5px);
  border-top: 5px solid var(--2ndbtn-color);
}

.box:hover h3{
color: var(--2ndbtn-color);
}










/*CASOS*/


.casos {
    /*cor dessa secao pode ser tbm1stbg*/
  width: 100%;
  background-image: url('imagens/lupas.png');
  background-repeat: no-repeat; 
}

.casos-container {       /*copiado de .boxes*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, auto));
  align-items: center;
  gap: 2rem;
  margin-top: 5rem;

}

.linha img{
  height:auto;
  width: 100%;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
.linha{
  padding: 25px;
  border-radius: 0.5rem;
  background-color: var(--lightblue-color);
  transition: all .40s ease;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 4px 3px #1818182b; 
}

.linha-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.linha h3{
  color: var(--btn-color);
  font-size: 24px;
  font-weight: 700;
}

.linha h6{
  color: var(--2ndbtn-color);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.linha-icon i{
  font-size: 21px;
}

.linha:hover {
  transform: scale(1.01) translateY(-5px);
  cursor: pointer;
}










/*SOBRE*/


.sobre{
  width: 100%;
    height: 50vh;
    align-items: center;
}


.sobres-container {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.sobres {
  width: 30%;

}

.sobres-img{
  width: 100%;
  height: 400px;
  transition: 1500ms;
  position: relative;
  transform-style: preserve-3d;
  perspective: 100px;

}
.sobres-img:hover{
  cursor: pointer;
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  backface-visibility: hidden;
}

.back{
  transform: rotateY(180deg);
}

.sobres .sobres-img img {
  width: 100%;
  margin-top: 70px;
  object-fit: cover;
  border-radius: 10px;
  background-color: brown;
  /* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 4px 3px #1818182b;  
}

.sobre .cabecatexto h4 {
  color: var(--2ndbg-color);
}










  
  /*footer*/
  .footer {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    gap: 3rem;
  }
  .contato-esquerda .logo {
    margin-bottom: 2rem;
  
  }
  .contato-esquerda .logo i {
    color: var(--btn-color);
  }
  .contato-esquerda h4 {
    margin:15px 0;
    color: var(--2ndbg-color);
    font-size: 20px;
    font-weight: 600;
  }
  .contato-esquerda h2 {
    font-size: var(--h2-font);
    color: var(--2ndtext-color);
  }
  .contato-esquerda p{
    color: var(--2ndtext-color);
    font-size: var(--p-font);
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 2px;
  }
  .contato-esquerda {
    margin-bottom: 2rem;
    color: var(--1sttext-color);
    font-size: 16px;
    line-height: 30px;
  }
  
  .lista-contato{
    margin-bottom:3rem;
  }
  
  .lista-contato li {
    margin-bottom: 10px;
    display: block;
  }
  
  .lista-contato li a{
    display: block;
    color: var(--2ndtext-color);
    font-size: 16px;
    font-weight: 700;
    transition: all .40s ease;
  }
  
  .lista-contato li a:hover{
    transform: scale(1.01) translateY(-5px);
    color: var(--2ndstrong-color) ;
  }
  
  .redes-icon i{
    height: 40px;
    width: 40px;
    background-color: var(--2ndbg-color) ;
    border-radius: 1rem;
    color: var(--btn-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 10px;
    transition: all .40s ease;
  }
  
  .redes-icon i:hover{
    transform: scale(1.01) translateY(-5px);
    color:  var(--2ndbtn-color);
  }
  
  .contatar form {
    position: relative ;
  }
  .contatar form input, form textarea{
    border: none;
    outline: none;
    width: 100%;
    padding: 18px;
    background-color: var(--2ndbg-color);
    color: var(--1sttext-color);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border-radius: 1rem;
  }
  
  .contatar texarea{
    resize: none;
    height: 220px;
  }
  
  .contatar form .enviar {
    display: inline-block;
    font-size: 17px;
    font-weight: 500;
    background-color: var(--btn-color);
    color: var(--1stbg-color);
    transition: all .40s ease;
    cursor: pointer;
  }
  .contatar form .enviar:hover {
    background-color:  var(--2ndbtn-color);
  }
  
  /*final da pg*/
  .copyright p {
    text-align: center;
    padding: 15px;
    color: var(--2ndtext-color);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  .comeco{
    position: fixed; /*vai ficar no mesmo lugar na tela mesmo quando mexe*/
    bottom: 2.1rem;
    right: 2.1rem;
  
  }
  
  .comeco i {
    color: var(--1sttext-color);
    background-color: var(--btn-color);
    box-shadow: 4px 3px 10px #0000003c;
    font-size: 20px;
    padding: 10px;
    border-radius: 0.5rem;
  }

  @media (max-width: 1914px) {
    .boxes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, auto));
      align-items: center;
      text-align: center;
      gap: 2rem;
      margin-top: 5rem; 
      }
      .projetoborda{
   
        padding-left: 135px;
        padding-right: 135px;
        padding-bottom: 50px;
        padding-top: 50px;
        border: 4px dashed var(--2ndbgop-color);
     }

      .box h3{
        
          font-size: 23px;
          font-weight: 600;
          margin: 10px 0;
          transition: all .40s ease;
        }
        
        .box p{
         
          line-height: 22px;
        }

        #academia h3{
          font-size: 17.4px;
        }
        #academia p{
          line-height: 24px;
        }

  }
  
  @media (max-width: 1385px) {
    .casos {
      
    width: 100%;
    background-image: none;
  }
  .boxes {
    display: grid;
    height:auto;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-top: 3rem; 
    }
    .box img{
      height:auto;
      width: 100%;
      border-radius: 0.5rem;
      margin-bottom: 1.5rem;
      }
      .projetos {
        width: 100%;
        height: 80vh;
        align-items: center;
         
      }
      .projetoborda{

        padding-left: 90px;
        padding-right: 90px;
        padding-bottom: 10px;
        padding-top: 10px;
        border: 4px dashed var(--2ndbgop-color);
     }
  }
  @media (max-width: 1330px) {
   
      header {
        padding: 18px 4%;
      }
      section {
        padding: 50px 4%;
      }
      .home-text {
        padding: 400px 30%;
      }
      .home-text h1 {
        font-size: 3rem;
      }
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        align-items: center;
        text-align: center;
        gap: 2rem;
        margin-top: 5rem; 
        }
        .box img{
          height:auto;
            width: 80%;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
          
          }
          .sobres {
            width: 40%;
             /* ajuste conforme necessário */
          }
          .sobres .sobres-img img {
            width: 90%;
            margin-top: 70px;
            object-fit: cover;
            border-radius: 10px;
            background-color: brown;
          }
    }
    
    @media (max-width: 927px) {
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-top: 3rem; 
        }
        .box img{
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          }
          .projetos {
            width: 100%;
            height: 100vh;
            align-items: center;
             
          }
          .projetoborda{
    
            padding-left: 90px;
            padding-right: 90px;
            padding-bottom: 10px;
            padding-top: 10px;
            border: 4px dashed var(--2ndbgop-color);
         }
    }
    
    @media (max-width: 891px) {
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-top: 3rem; 
        }
        .box img{
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          }
          .projetos {
            width: 100%;
            height: 110vh;
            align-items: center;
             
          }
          .projetoborda{
    
            padding-left: 60px;
            padding-right: 60px;
            padding-bottom: 10px;
            padding-top: 10px;
            border: 4px dashed var(--2ndbgop-color);
         }
    }
    
    @media (max-width: 827px) {
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-top: 3rem; 
        }
        .box img{
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          }
          .projetos {
            width: 100%;
            height: 110vh;
            align-items: center;
             
          }
          .projetoborda{
    
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 10px;
            padding-top: 10px;
            border: 4px dashed var(--2ndbgop-color);
         }
    }
   
    @media (max-width: 774px) {
      header {
        padding: 12px 4%;
      }
      #menu-icon {
        display: initial;
        color: var(--bg-color);
      }
      header.shadow #menu-icon {
        color: var(--btn-color);
      }
      .navbar {
        position: absolute;
        top: -570px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        background: var(--bg-color);
        row-gap: 1.4rem;
        padding: 20px;
        box-shadow: 4px 4px 0 4px rgb(14, 55, 54 / 15%);
        transition: 0.2s all linear;
        text-align: center;
      }
      .navbar a {
        width: 100%;
        color: var(--text-color);
      }
      .navbar a:hover {
        color: var(--btn-color);
        border-bottom: 2px solid var(--btn-color);
      }
      .navbar a::after {
        display: none;
      }
      .navbar.active {
        top: 100%;
      }
      .home-text h1 {
        font-size: 2.4rem;
      }
      .btn {
        padding: 0.6rem 1.2rem;
      }
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-top: 3rem; 
        }
        .box img{
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          }
          .projetos {
            width: 100%;
            height: 180vh;
            align-items: center;
             
          }
          .sobre{
            width: 100%;
            height: 180vh;
            
            
          }
          .sobres-container {
            width: auto;
            max-width: 2000px; /* ajuste conforme necessário */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem ;
          }
          .sobres {
            width: 100%;
          }
          .sobres-img{
                width: 100%;
                height: 50vh;
                  
          }
          .sobres .sobres-img img {
            width: 100%;
            margin-top: 40px;
            object-fit: cover;
            border-radius: 10px;
            background-color: brown;
          }
     
    }
    @media (max-width: 610px) {
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-top: 3rem; 
        }
        .box img{
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          }
          .projetos {
            width: 100%;
            height: 150vh;
            align-items: center;
             
          }
          .projetoborda{
   
            padding-left: 90px;
            padding-right: 90px;
            padding-bottom: 10px;
            padding-top: 10px;
            border: 4px dashed var(--2ndbgop-color);
         }
        }
    @media (max-width: 472px) {
      .casos-container {       /*copiado de .boxes*/
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, auto));
        align-items: center;
        gap: 1rem;
        margin-top: 5rem; 
      }
      .footer {
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
      }

      .sobre{
        width: 100%;
        height: 90vh;

      }
      .projetos {
        width: 100%;
        height: 180vh;
        align-items: center;
        
      }
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
      
        text-align: center;
        gap: 1rem;
        margin-top: 3rem; 
        }
        .box img{
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;
          }
      .projetoborda{
        padding-left: 0;
           padding-right: 0;
        border: 4px dashed var(--2ndbgop-color);
     }
      .sobres-container {
        width: auto;
        max-width: 2000px; /* ajuste conforme necessário */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem ;
      }
      .sobre{
        width: 100%;
        height: 120vh;
      }
      .sobres {
        width: 100%;
      }
      .sobres-img{
            width: 100%;
            height: 30vh;
              
      }
      .sobres .sobres-img img {
        width: 100%;
        margin-top: 40px;
        object-fit: cover;
        border-radius: 10px;
        background-color: brown;
      }
    }

    @media (max-width: 420px) {
      header {
        padding: 6px 4%;
      }
      .home-text {
        padding: 400px 30%;
      }
      .home-text h1 {
        font-size: 1.7rem;
      }
      .play {
        right: 2rem;
        bottom: 8%;
      }
      .play .bx {
        padding: 7px;
      }
      .boxes {
        display: grid;
        height:auto;
        grid-template-columns: repeat(auto-fit, minmax(200px, auto));
        align-items: center;
        text-align: center;
        gap: 1rem;
        margin-top: 5rem; 
        }
        .box {
          height:auto;
          width: 100%;
          border-radius: 0.5rem;
          margin-bottom: 1.5rem;

          }
          .projetos {
            width: 100%;
            height: 220vh;
            align-items: center;
            
          }
          .projetoborda{
 
            padding-left: 0;
            padding-right: 0;
            border: 4px dashed var(--2ndbgop-color);
         }
          .casos-container {       /*copiado de .boxes*/
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, auto));
            align-items: center;
            gap: 1rem;
            margin-top: 5rem; 
          }
          .sobre{
            width: 100%;
            height: 130vh;
          }
          .sobres-container {
            width: auto;
            max-width: 2000px; /* ajuste conforme necessário */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem ;
          }
          .sobres {
            width: 100%;
          }
          .sobres-img{
                width: 100%;
                height: 30vh;
                  
          }
          .sobres .sobres-img img {
            width: 100%;
            margin-top: 40px;
            object-fit: cover;
            border-radius: 10px;
            background-color: brown;
          }
          
    }
    @media (max-width: 376px) {
      .projetos {
        width: 100%;
        height: 200vh;
        align-items: center;
         
      }
      .projetoborda{
        padding-left: 0;
           padding-right: 0;
        border: 4px dashed var(--2ndbgop-color);
     }
      .sobre{
        width: 100%;
        height: 120vh;

      }
      .sobres-container {
        width: auto;
        max-width: 2000px; /* ajuste conforme necessário */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem ;
      }
      .sobres {
        width: 100%;
      }
      .sobres-img{
            width: 100%;
            height: 30vh;
              
      }
      .sobres .sobres-img img {
        width: 100%;
        margin-top: 40px;
        object-fit: cover;
        border-radius: 10px;
        background-color: brown;
      }
    }
    
    @media (max-width: 335px) {
        .home-text {
            margin-top: 250px;
            padding: 10px 20%;
          }
          .boxes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, auto));
            align-items: center;
            text-align: center;
            gap: 2rem;
            margin-top: 5rem; 
            }
          .box .box-img {
            height: 400px;
          }
          .projetoborda{
           padding-left: 0;
           padding-right: 0;
            border: 4px dashed var(--2ndbgop-color);
         }
          .casos-container {       /*copiado de .boxes*/
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, auto));
            align-items: center;
            gap: 1rem;
            margin-top: 5rem; 
          }
          .sobre{
            width: 100%;
            height: 90vh;
    
          }
          .sobres-container {
            width: auto;
            max-width: 2000px; /* ajuste conforme necessário */
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem ;
          }
          .sobres {
            width: 100%;
          }
          .sobres-img{
                width: 100%;
                height: 20vh;
                  
          }
          .sobres .sobres-img img {
            width: 100%;
            margin-top: 40px;
            object-fit: cover;
            border-radius: 10px;
            background-color: brown;
          }
    }
    @media (max-width: 282px) {
      .home-text {
          margin-top: 250px;
          padding: 10px 20%;
        }
        .boxes {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, auto));
          align-items: center;
          text-align: center;
          gap: 2rem;
          margin-top: 5rem; 
          }
        .box .box-img {
          height: 400px;
        }
        .projetos {
          width: 100%;
          height: 300vh;
          align-items: center;
         
        }
        .projetoborda{
          
          border: 4px dashed var(--2ndbgop-color);
       }
        .casos-container {       /*copiado de .boxes*/
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, auto));
          align-items: center;
          gap: 1rem;
          margin-top: 5rem; 
        }
        .sobre{
          width: 100%;
          height: 110vh;
  
        }
        .sobres-container {
          width: auto;
          max-width: 2000px; /* ajuste conforme necessário */
          margin: 0 auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1rem ;
        }
        .sobres {
          width: 100%;
        }
        .sobres-img{
              width: 100%;
              height: 30vh;
                
        }
        .sobres .sobres-img img {
          width: 100%;
          margin-top: 40px;
          object-fit: cover;
          border-radius: 10px;
          background-color: brown;
        }
  }