* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* sobreposição semi-transparente preta */
  z-index: 1; /* Garante que a sobreposição fique entre o vídeo e o conteúdo do cabeçalho */
}

html {
  scroll-behavior: smooth; /* Adiciona rolagem suave para todo o documento */
}

:root {
  --color-primary: #6c63ff;
  --color-success: #00bf8e;
  --color-warning: #f7c94b;
  --color-danger: #f75842;
  --color-danger-variant: rgba(247, 88, 66, 0.4);
  --color-white: #fff;
  --color-light: rgba(255, 255, 255, 0.7);
  --color-black: #000;
  --color-bg: #1f2641;
  --color-bg1: #2e3267;
  --color-bg2: #424890;

  --container-width-lg: 80%;
  --container-width-md: 90%;
  --container-width-sm: 94%;

  --transition: all 400ms ease;
}

@font-face {
  font-family: 'Jaapokki';
  src: url('fonts/Jaapokki-Regular.otf') format('opentype');
}

body {
  font-family: 'Jaapokki', sans-serif;
  line-height: 1.7;
  color: var(--color-white);
  background: #101010;
}

.container {
  width: var(--container-width-lg);
  margin: 0 auto;
}

section {
  padding: 6rem 0;
}

section h2 {
  text-align: center;
  margin-bottom: 4rem;
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.2;
}

h1 {
  font-size: 2.4rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.6rem;
}
h4 {
  font-size: 1.3rem;
}

a {
  color: var(--color-white);
}

/*--- navbar ------ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(44, 44, 44, 0.5); /* Inicial */
  transition: background-color 0.3s; /* Suaviza a transição */
}

.nav-scrolled {
  background: #101010 !important; /* Cor mais escura ao rolar */
}

nav button {
  display: none;
}

.nav__container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.nav__menu a {
  font-size: 0.9rem;
  transition: all 400ms ease;
  color: white;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.nav__menu a:hover {
  color: #90ee90;
}

.nav__menu.active {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #101010;
  padding: 1rem;
  position: absolute;
  top: 5rem;
  right: 0;
  width: 100%;
  z-index: 999;
}

#open-menu-btn,
#close-menu-btn {
  display: none;
}

.header-container {
  position: relative;
  overflow: hidden;
  height: 100vh; /* Ajustando para ocupar toda a altura da tela */
  z-index: 1000;
}

.header__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
  height: 100%;
  position: relative;
  z-index: 2;
}

.TextoUm {
  font-family: "";
  font-size: 3rem; /* Ajuste o tamanho do texto conforme necessário */
  text-align: center; /* Garante que o texto seja centralizado dentro do flex container */
  margin: 0; /* Removemos a margem para evitar qualquer deslocamento */
}

.header__left {
  display: flex; /* Alteramos para flexbox */
  justify-content: center; /* Isso centraliza horizontalmente */
  align-items: center; /* Isso centraliza verticalmente */
  height: 100%; /* Adicionamos uma altura para que o alinhamento funcione corretamente */
}

.header-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(128, 128, 128, 0.01) 0%,
    #101010 100%
  );
  z-index: 1;
}

#headerVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Garantindo que o vídeo cubra totalmente o header-container */
  object-fit: cover;
  z-index: -1;
}

/* HEADER */

.sobreposicao-texto {
  position: absolute; /* Posicionamento fixo em relação ao viewport */
  top: 86%; /* Posiciona no meio vertical da tela */
  left: 2%; /* Margem esquerda para não colar totalmente na borda */
  transform: translateY(-50%); /* Centraliza verticalmente o elemento */
  color: #ffffff; /* Cor do texto */
  font-size: 3.5rem; /* Tamanho do texto */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* Sombra para melhorar a legibilidade contra fundos claros e escuros */
  z-index: 1000; /* Assegura que o texto fique sobre os vídeos e imagens */
  padding: 10px 20px; /* Espaçamento interno para formatação do texto */
}

.folhas-decorativas {
  position: absolute;
  top: 100%; /* Ajuste conforme necessário para alinhar corretamente */
  left: 0;
  transform: translateY(-40%) rotate(15deg); /* Ajusta para que metade da imagem fique visível */
  margin-left: -150px;
  z-index: 1000; /* Garante que a imagem fique sobre o vídeo e a seção */
  width: 390px; /* Ajuste conforme o tamanho desejado */
  height: auto;
}

/* O que fazemos------------------------------------------------------------------------------------ */

.titulo {
  font-size: 3.5rem; /* Mantém o tamanho grande para destaque */
  color: #ffffff; /* Cor branca para contraste */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para melhorar a legibilidade */
  text-align: left; /* Alinha o texto à esquerda para ajuste fino com padding */
  padding-left: 900px; /* Aumenta o padding à esquerda para mover o título para a direita */
  margin-top: -180px; /* Move o título um pouco para cima */
  transition: opacity 1s ease, transform 1s ease; /* Suaviza as transições de opacidade e transformação */
  opacity: 1; /* Inicialmente visível */
  transform: translateY(0); /* Nenhuma transformação adicional necessária */
}
.titulo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%; /* Centraliza verticalmente no meio do título */
  height: 4px; /* Espessura da linha */
  background: linear-gradient(135deg, #003236 0%, #00a7b5 100%);
  z-index: -1; /* Garante que a linha fique atrás do texto caso sobreponha */
}

.section.what-we-do {
  position: relative;
  overflow: hidden;
  padding-top: 290px; /* Aumenta o espaço acima da seção */
}

.full-section {
  width: 90%; /* Ocupa 90% da largura */
  height: 54vh;
  display: flex;
  position: relative;
  overflow: hidden;
  align-items: center;
  cursor: pointer;
  transition: background-color 1s ease;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 40px 10px; /* 40px de margem no topo e embaixo, 10px nas laterais */
}

/* Específico para a seção verde */
/* Seção verde */
.full-section.green {
  margin-left: 10%; /* Deixa 10% de espaço à direita */
  background: linear-gradient(135deg, #00c851 0%, #00e676 50%, #66ff99 100%);
}

/* Seção amarela */
.full-section.yellow {
  margin-right: 10%; /* Deixa 10% de espaço à esquerda */
  background: linear-gradient(135deg, #ffeb3b 0%, #ffeb3b 50%, #ffca28 100%);
}

/* Seção azul */
.full-section.blue {
  margin-left: 10%; /* Deixa 10% de espaço à direita novamente */
  background: linear-gradient(135deg, #2196f3 0%, #42a5f5 50%, #64b5f6 100%);
}

.section-image {
  width: 50%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  transition: all 1s ease;
  opacity: 1;
  z-index: 1;
  border-radius: 15px 0 0 15px; /* Arredondamento apenas nos cantos esquerdos */
}

.content {
  width: 50%;
  text-align: center;
  position: absolute;
  right: 0;
  transition: all 1s ease;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0); /* Inicialmente transparente */
  border-radius: 0 15px 15px 0; /* Arredondamento apenas nos cantos direitos */
}

.full-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
  transition: background-color 1s ease;
  border-radius: 15px; /* Borda arredondada em todo o overlay */
}

.full-section:hover .section-image {
  left: 50%; /* Move a imagem para a direita */
  opacity: 0.5; /* Reduz a opacidade da imagem ao passar o mouse */
}

.full-section:hover .content {
  right: 50%; /* Move o texto para a esquerda */
  opacity: 1; /* Mantém a opacidade do texto */
  background-color: rgba(
    0,
    0,
    0,
    0.7
  ); /* Torna o overlay mais visível ao passar o mouse */
}

/* Nossos Projetos */
/* Nossos Projetos */
/* Nossos Projetos */
.nossos-projetos {
  background: url("images/aerial-view-vibrant-green-trees-forest.jpg") no-repeat center center/cover;
  padding: 40px 20px;
  text-align: center;
}

.titulo-secao {
  color: #fff;
  margin-bottom: 2rem;
}

.projeto-card-img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out;
}

.projeto-card-img:hover {
  transform: scale(1.05);
}

/* Customiza os botões de navegação do Bootstrap Carousel */
.carousel-control-prev,
.carousel-control-next {
  background-color: #003236;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #fff;
  border-radius: 50%;
  padding: 10px;
}

/* =============================Botao portfolio==================================== */
button {
  margin-top: 120px;
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
  cursor: pointer;
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

.icon-2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-3 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-4 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

button:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

button:hover .icon-1 {
  top: -250%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-2 {
  position: absolute;
  top: -200%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 75px;
  height: auto;
  animation: inIcon2 1s ease .45s forwards;
}

@keyframes inIcon2 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(10deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(4deg);
  }

  80% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-3 {
  position: absolute;
  top: -130%;
  left: 20%;
  transform: translate(-50%, 0);
  width: 60px;
  height: auto;
  animation: inIcon3 1s ease .45s forwards;
}

@keyframes inIcon3 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-2deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-4 {
  position: absolute;
  top: -300%;
  left: 10%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon4 1s ease .45s forwards;
}

@keyframes inIcon4 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  40% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-5 {
  position: absolute;
  top: -350%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon5 1s ease .45s forwards;
}

@keyframes inIcon5 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7b9b3a;
}

.fil-leaf-2 {
  fill: #556729;
  fill-rule: nonzero;
}

.fil-leaf-3 {
  fill: #556729;
}

.fil-leaf-4 {
  fill: #3c4819;
}

.fil-leaf-5 {
  fill: #3c4819;
}

/* Seção de Contato */
.contact-section {
  margin-top: 150px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-attachment: fixed; /* Efeito parallax */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #101010; /* Adiciona a cor de fundo */
}

.contact-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.43); /* Adiciona uma sobreposição com opacidade de 43% */
  z-index: 0;
}

#background-image {
  display: none; /* Esconde a imagem de fundo anterior */
}

.contact-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  z-index: 1;
}

.contact-card.info {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  margin: 10px;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 30%; /* Ajuste a largura do card de informações */
}

.contact-card.details,
.contact-card.map {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  margin: 10px;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-card-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 65%; /* Ajuste a largura do wrapper de detalhes e mapa */
}

iframe {
  width: 100%;
  height: 300px;
  border-radius: 10px;
}

.logo {
  width: 150px;
  margin-bottom: 10px;
}

a {
  color: white;
  margin-right: 10px;
}

/* Estilo dos ícones sociais */
.social-icons {
  margin-top: 20px;
  display: flex;
  gap: 20px;
}

/* Estilo dos contêineres sociais */
.socialContainer {
  width: 52px;
  height: 52px;
  border-radius: 5px;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: 0.3s;
}

.containerOne:hover {
  background-color: #d62976;
  transition-duration: 0.3s;
}

.containerThree:hover {
  background-color: #0072b1;
  transition-duration: 0.3s;
}

.containerFour:hover {
  background-color: green;
  transition-duration: 0.3s;
}

.socialContainer:active {
  transform: scale(0.9);
  transition-duration: 0.3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Rodapé */
.site-footer {
  text-align: center;
  padding: 20px 10px;
  background-color: black;
  color: #fff;
  font-size: 14px;
}

.site-footer p {
  margin: 0;
}

/* Estilos para telas menores (dispositivos móveis) */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }

  .container {
    width: var(--container-width-sm);
  }

  section {
    padding: 4rem 0;
  }

  .nav__menu {
    flex-direction: column;
    gap: 1rem;
  }

  .header__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .TextoUm {
    font-size: 2rem;
  }

  .sobreposicao-texto {
    font-size: 2rem;
    top: 70%;
  }

  .titulo {
    font-size: 2.5rem;
    padding-left: 0;
    text-align: center;
  }

  .full-section {
    flex-direction: column;
    height: auto;
  }

  .section-image {
    width: 100%;
    height: 200px;
    display: none; /* Adiciona esta linha para esconder a imagem nas telas menores */
  }

  .content {
    width: 100%;
    position: relative;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo preto transparente */
    opacity: 1;
  }

  .projeto-card-img {
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 30px;
    height: 30px;
  }

  button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .contact-container {
    flex-direction: column;
  }

  .contact-card.info,
  .contact-card.details,
  .contact-card.map {
    max-width: 100%;
  }

  iframe {
    height: 200px;
  }

  .social-icons {
    gap: 10px;
  }
}

.menu-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 1001; /* Adiciona z-index para garantir que o botão fique por cima */
}

#open-menu-btn {
  display: block;
}

#close-menu-btn {
  display: none;
}

@media (max-width: 768px) {
  nav {
    background: black;
  }
  .nav__menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: black;
    position: absolute;
    top: 5rem;
    left: 0;
    z-index: 999;
  }

  .nav__menu a {
    margin: 1rem 0;
  }

  .menu-btn {
    display: block;
    font-size: 1.5rem; /* Ajustar o tamanho do ícone */
    margin-top: 1rem;
  }

  .nav__container {
    justify-content: space-between;
  }

  .nav__menu.active {
    display: flex;
  }

  #open-menu-btn.active {
    display: none;
  }

  #close-menu-btn.active {
    display: block;
  }
}

@media (min-width: 769px) {
  .nav__container {
    justify-content: space-between;
  }

  .menu-btn {
    display: none; /* Esconde o botão de menu em telas maiores */
  }

  #open-menu-btn,
  #close-menu-btn {
    display: none; /* Garante que ambos os botões estejam escondidos em telas maiores */
  }

  .nav__menu.active {
    display: flex;
  }
}

/* Outros estilos existentes */

/* HEADER */

.header-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
  z-index: 1000;
}

.header__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
  height: 100%;
  position: relative;
  z-index: 2;
}

.TextoUm {
  font-family: '';
  font-size: 3rem;
  text-align: center;
  margin: 0;
}

.header__left {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.header-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(128, 128, 128, 0.01) 0%, #101010 100%);
  z-index: 1;
}

#headerVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}