@keyframes star {
     to {transform: rotate(0deg);}
     from {transform: rotate(360deg);}
}


.sobre {padding: 73px 0 0;}
.sobre .conteudo {display: flex; gap: 25px; justify-content: space-between;}
.sobre .conteudo .info {flex: 0 0 526px;}
.sobre .conteudo .img {width: 566px; overflow: hidden; border-radius: 20px;}
.sobre .conteudo .img img {width: 100%; height: 100%; object-fit: cover;}
.sobre .conteudo .sub-titulo {display: block; color: var(--verde-seg); margin-bottom: 19px; letter-spacing: 8.0702px; font: 600 18.22px montserrat; text-transform: uppercase;}
.sobre .conteudo .titulo {font: 800 36px / 46.09px montserrat; color: var(--preto); margin: 0 0 30px; text-transform: uppercase;}
.sobre .conteudo .descricao {font: 400 15px / 30.42px montserrat; color: var(--cinza); hyphens: auto; margin-bottom: 42px;}
.sobre .btns {display: flex; justify-content: flex-start; align-items: center; gap: 22px;}
.sobre .btn-saiba {padding: 15px 17px 11px; border-radius: 8px; background: var(--preto); text-align: center; font: 500 12.55px montserrat; color: var(--branco); width: 112px; transition: 0.4s;}
.sobre .btn-saiba:hover {background-color: var(--cinza);}
.sobre .btn-whats {margin: 0;}




.experiencia {padding: 72px 0 39px;}
.experiencia .conteudo {display: grid; grid-template-areas: 'b b a a'; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; gap: 3.33333%;}

.experiencia .conteudo .info {grid-area: a; margin-left: 43px;}
.experiencia .conteudo .sub-titulo {display: block; color: var(--verde-seg); margin-bottom: 19px; letter-spacing: 8.0702px; font: 600 18.22px montserrat; text-transform: uppercase;}
.experiencia .conteudo .titulo {font: 800 36px / 46.09px montserrat; color: var(--preto); margin: 0 0 31px; text-transform: uppercase;}
.experiencia .conteudo .descricao {font: 400 15px / 30.42px montserrat; color: var(--cinza); hyphens: auto;}

.experiencia .conteudo .img {max-width: 562px; width: 100%; height: auto; display: flex; border-radius: 20px; overflow: hidden; grid-area: b;}
.experiencia .conteudo .img img {width: 100%; height: 100%; object-fit: cover;}

.projetos .cards {display: grid; grid-template-areas: 'a b c c'; gap: 3.33333%; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto;}
.projetos .card {display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 20px; flex-direction: column;}
.projetos .card .icone {width: 26px; height: 26px; animation: star infinite linear 5s;}
.projetos .card .icone svg {width: 100%; height: 100%;}
.projetos .card .titulo {font: 600 18.22px / 25.44px montserrat; color: var(--branco); text-align: center;}
.projetos div.card {background-color: var(--verde); padding: 14%;}
.projetos picture.card {overflow: hidden;}
.projetos .card img {width: 100%; height: 100%; object-fit: cover;}




.produtos {padding: 76px 0 134px;}

.produtos .conteudo .sub-titulo {display: block; color: var(--verde-seg); margin-bottom: 12px; letter-spacing: 8.0702px; font: 600 18.22px montserrat; text-transform: uppercase; text-align: center;}
.produtos .conteudo > .titulo {font: 800 36px / 46.08px montserrat; color: var(--preto); margin: 0 0 38px; text-transform: uppercase; text-align: center;}

.produtos .cards {display: grid; grid-template-areas: 'a b' 'c d' 'e f';  gap: 46px 38px;}

.produtos .cards .card:hover .btn .titulo {background-color: var(--preto);}
.produtos .cards .card .img {width: 100%; height: auto; overflow: hidden; border-radius: 20px; margin: 0 0 20px; display: flex;}
.produtos .cards .card .img img {width: 100%; height: 100%; object-fit: cover;}
.produtos .cards .card .btn {display: flex; gap: 20px; transition: 0.4s;}
.produtos .cards .card .titulo {border-radius: 10px; background: var(--verde); padding: 19px 21px 17px; width: 100%; transition: 0.4s;}
.produtos .cards .card .titulo h2 {text-transform: uppercase; font: 600 19px / 24px montserrat; color: var(--branco);}
.produtos .cards .card .btn .icone {min-width: 60.65px; height: auto; border-radius: 10px; background-color: var(--preto); display: grid; place-content: center; place-items: center;}
.produtos .cards .card .btn .icone svg {width: 27px; height: 20px;}



/* .portfolio {background: url(../../../../img/bg.webp.webp) no-repeat left center / contain #000; position: relative;} */
.portfolio {background: url(../../../../img/bg.webp.webp) no-repeat left center / contain #000; position: relative;}
.portfolio .conteudo {padding: 84px 0 76px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; position: relative;}
.portfolio .filtro {background: linear-gradient(90deg, #ffffff00, #00000015, #00000078, #000000ad, #000000fc, #000000e6, #000000); width: 100%; height: 100%; position: absolute; top: 0; right: 0;}

.portfolio .sub-titulo {display: block; color: var(--verde); margin-bottom: 19px; letter-spacing: 8.0702px; font: 600 18.22px montserrat; text-transform: uppercase;}
.portfolio .titulo {font: 800 36px / 46.09px montserrat; color: var(--branco); margin: 0 0 28px; text-transform: uppercase;}
.portfolio .descricao {font: 400 15px / 30.42px montserrat; color: var(--branco); hyphens: auto; margin: 0 0 42px;}

.portfolio .btn-ver {background-color: var(--verde); padding: 13px 18px 12px; border-radius: 8px; text-align: center; font: 500 12.55px montserrat; color: var(--branco); cursor: pointer; transition: 0.4s;}
.portfolio .btn-ver:hover {background: var(--cinza);}


@media (max-width:1200px){
     .experiencia .conteudo .info {margin-left: 23px;}
     .produtos .cards { grid-template-areas:
               'a'
               'b'
               'c'
               'd'
               'e'
               'f';
          max-width: 650px;
          margin: 0 auto;
     }
     .portfolio {background-size: cover;}
}

@media (max-width:990px){

     .sobre .conteudo .sub-titulo, .experiencia .conteudo .sub-titulo, .produtos .conteudo .sub-titulo, .portfolio .sub-titulo {font-size: 14px; line-height: 18px; letter-spacing: 6.25px; margin-bottom: 6px; text-align: center;}
     .sobre .conteudo .titulo, .experiencia .conteudo .titulo, .produtos .conteudo > .titulo, .portfolio .titulo {font-size: 24px; line-height: 32px; margin-bottom: 15px; text-align: center;}

     .sobre .btns {gap: 12px;}

     .sobre .conteudo .descricao {margin-bottom: 15px;}

     .sobre .conteudo .descricao, .experiencia .conteudo .descricao {text-align: justify; hyphens: auto;}
     
     .sobre {padding: 25px 0 0;}
     .experiencia {padding: 25px 0;}
     .produtos {padding: 25px 0;}
     .portfolio .conteudo {padding: 35px 0;}

     .sobre .conteudo .img {width: 100%; max-width: 566px;}
     .sobre .conteudo, .experiencia .conteudo {flex-direction: column-reverse; justify-content: center; align-items: center; display: flex; gap: 20px;}
     .sobre .conteudo .info {flex: 0 0 auto;}

     .experiencia .conteudo .info {margin-left: 0;}
     .projetos .cards {grid-template-areas: 'a c'  'b b'; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; max-width: 650px; margin: 0 auto;}

     .portfolio .conteudo {align-items: center;}
     .projetos div.card {padding: 12%;}

     .produtos .cards {gap: 20px;}

     .produtos .cards .card:hover .btn {background: var(--preto);}
     .produtos .cards .card .btn .icone {background: none;}
     .produtos .cards .card .btn {background: var(--verde); border-radius: 10px;}
     .portfolio .descricao {margin: 0 0 20px;}

     .portfolio .filtro {background: linear-gradient(90deg, #000000ad, #000000d1, #000000ed, #000000d9);}
}

@media (max-width:600px){
     .produtos .cards .card .titulo {min-height: 70px; display: flex; align-items: center; padding: 12px 10px 12px 20px;}
}

@media (max-width:500px){
     .sobre .btns {flex-direction: column;}
     .sobre .btn-whats, .sobre .btn-whats p {width: 100%; text-align: center;}
     .sobre .btn-whats p {padding: 13px 19px 12px 36px;}
     .sobre .btn-saiba {width: 100%;}

     .projetos div.card {padding: 6%;}

     .portfolio .descricao br {display: none;}
     .portfolio .titulo {text-align: center;}

     .portfolio .descricao {text-align: justify; hyphens: auto;}
     .portfolio .btn-ver {width: 100%;}
}



@media (max-width:400px){
     .projetos .cards {grid-template-areas: 'a' 'c' 'b'; grid-template-columns: auto; grid-template-rows: 190px 190px 190px;}
}