/* Google Fonts */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

/* Variaveis de Fonts */
:root {
  --fonte-menu: "Google Sans Flex", sans-serif;
  --fonte-padrao: "Google Sans Flex", sans-serif;
  --fonte-titulo: "Cinzel", serif;
  --fonte-subtitulo: "Spectral", serif;
}

/* Variaveis de Cores */
/* Tema Dark */
:root,
:root[data-theme="dark"] {
  --cor-fundo: #1d1d1d;
  --cor-fundo-secundaria: #343434;

  --cor-txt-menu: #8383838b;
  --cor-destaque: #fff;

  --icone-tema: #f19217;

  --cor-titulo: #fff;
  --cor-subtitulo: #15c0f4;
  --cor-textos: #fff;

  --cor-icones: #7a8185;
  --destaque-icones: #fff;

  --cor-borda: #7a8185c9;
  --icone-menu-mobile: #fff;
}

/* Tema Claro */
:root[data-theme="light"] {
  --cor-fundo: #fff;
  --cor-fundo-secundaria: #aaa;

  --cor-txt-menu: #9595957f;
  --cor-destaque: #111;

  --icone-tema: #179eec;

  --cor-titulo: #000;
  --cor-subtitulo: #1c1c1c;
  --cor-textos: #131313;

  --cor-icones: #8a9194;
  --destaque-icones: #000;

  --cor-borda: #232525c9;

  --icone-menu-mobile: #000;

}

/* Filtro Cor do Logo */
html[data-theme="dark"] .logo {
  filter: invert(1);
  /* para img preto */
}

/* Fontes Utilizadas */

/* converter REM em PX */

html {
  font-size: 62.5%;
}

/* Reset CSS 
= Padronizar os Navegadores */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: transparent;
}

/* TODA ESTRUTURA DO SITE ou HTML */
body {
  background-color: var(--cor-fundo);
  font-size: 16px;
}

/* Cabeçalho */
header {
  /* Cor fundo = Background */
  background-color: var(--cor-fundo);
  width: 100%; /* largura */ /* Responsivas */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 200;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--cor-borda);
}

.menu-desktop {
  display: none;
  justify-content: center;
  align-items: center;
}

/* .menu = UL */
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 16px;
}

/* A Href = menu - link */

.menu-link {
  text-decoration: none;
}

.menu-texto {
  color: var(--cor-txt-menu);
  text-transform: capitalize;
  font-size: 1.8rem; /* 18px */
  font-family: var(--fonte-menu);
  font-weight: 600;
}

/* Herança */
.menu-link.active .menu-texto,
.menu-link:hover .menu-texto {
  color: var(--cor-destaque);
}

/* Menu Mobile */

/* Icone Hamburger */
.btn-menu-mobile {
  background: transparent;
  color: var(--icone-menu-mobile);
  border: none;
  font-size: 2.2rem;
  padding: 1rem;
  margin-left: 1rem;
}

/* menu mobile (estilo e animação) */
.menu-mobile {
  /* NAV */
  position: fixed;
  top: 0;
  right: 0;
  background: var(--cor-fundo-secundaria);
  z-index: 100;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  
}


.menu-mobile.active {
  transform: translateX(0%);
}




.logo img {
  width: 5.2rem; /* 52 PX L  */
  height: 5rem; /*  50 PX A */
}

.header-toggle {
  cursor: pointer;
  font-size: 1.8rem;
  color: var(--icone-tema);
}

/* Hero = HOME */

h1 {
  color: var(--cor-titulo); /* cor texto */
  /* Tamanho do texto */
  font-size: 2.5rem;
  font-family: var(--fonte-titulo);
  font-weight: 100;
  letter-spacing: 2px;
}

strong {
  /* color: #179eec; */
  font-weight: 800;
}

p {
  color: var(--cor-textos);
  font-size: 1.8rem;
  font-family: var(--fonte-padrao);
}

/* Redes sociais */

.menu-social {
  /* UL */
  display: flex;
  list-style: none;
  gap: 1.2rem;
  padding: 0;
}

.menu-social .social-icon {
  color: var(--cor-icones);
  font-size: 3.5rem;
}

.menu-social .social-icon:hover {
  color: var(--destaque-icones);
  transition: ease-out 0.7s;
}

/* Carousel */

/* Estrutura dos 3 slides */

/* Altura do Hero em Tela Cheia */
.carousel .carousel-item {
  height: 40vh; /* ViewPort Hight */
  min-height: 400px;
}

/* tamanho das imagens */
.carousel .carousel-item img,
.carousel .carousel-item .ratio {
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Bloquear açoes Click Direito Mouse */
  pointer-events: none;
}

/* Filtro ou Overlay escuro Sutil acima dos slides */

/* Pseudo-Elemento */
.carousel .carousel-item::before {
  content: "";
  background: #000000a4;
  position: absolute;
  inset: 0;
}

.carousel .carousel-caption {
  position: absolute;
  inset: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.carousel h5 {
  font-size: 5rem;
  font-weight: 800;
}

.carousel p {
  font-size: 2.2rem;
  color: #fff;
}

.carousel h5,
.carousel p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.725);
}

/* Centralizar Objeto */
.video {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video iframe {
  aspect-ratio: 16/9;
  width: 95%;
  box-shadow: 0 15px 15px -2px #ffffff89;
}

.complemento {
  display: flex;
  background: var(--cor-fundo);
  padding: 6rem 1rem 2rem;
  margin-top: -5rem;
  justify-content: center;
}

.complemento h2 {
  font-size: 2rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-family: var(--fonte-padrao);
  color: var(--cor-titulo);
  margin-top: 20px;
}

/* Seção Geral */
/* Vamos ir atualizando essa parte */

#home,
.projetos,
.contato {
  padding: 4rem 2rem;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  /* Empurra o video */
  margin-bottom: 5rem;
}

/* Projetos */
.projetos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Voltar */
  scroll-margin-top: 50px;
}

.projetos h2 {
  text-align: center;
  font-size: 2.5rem;
  font-family: var(--fonte-subtitulo);
  color: var(--cor-titulo);
  font-weight: 400;
  text-transform: uppercase;
}

.projeto-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Articles dos projetos */
.projeto-card {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Classes das IMGs */
.card-cover {
  width: 100%;
  object-fit: cover;
  border-radius: 5rem 5rem;
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
  text-align: justify;
}
.card-reverse .card-body {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: end;
  margin-top: 10px;
  gap: 2rem;
}

/* titulo do produto */
.card-body .card-title {
  color: var(--cor-subtitulo);
  font-size: 3rem;
  font-family: var(--fonte-subtitulo);
  font-weight: 700;
}

/* Paragrafo sobre o produto */
.card-body .card-description {
  color: var(--cor-textos);
  font-size: 1.8rem;
  font-family: var(--fonte-padrao);
  letter-spacing: 1px;
}

.card-lista {
  list-style: none;
  padding-left: 0;
}

.card-item {
  color: var(--cor-textos);
  font-size: 1.8rem;
  font-family: var(--fonte-padrao);
  margin-bottom: 10px;
}

/* icone da lista */
.card-item i {
  color: var(--cor-textos);
  font-size: 2.2rem;
  margin-right: 10px;
}

.card-item i:hover {
  color: var(--icone-tema);
  transition: ease-in-out 0.3s;
}
/* Final da sec Projetos  */

/* Sobre */

/* Contato */

.contato {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
  scroll-margin-top: 3.5rem;
}

.contato h2 {
  color: var(--cor-titulo);
  font-size: 3rem;
  font-weight: 600;
  font-family: var(--fonte-subtitulo);
  text-transform: uppercase;
}

.contato .menu-social li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}

.contato span {
  color: var(--cor-icones);
  font-size: 2.2rem;
  margin-left: 5px;
  font-family: var(--fonte-padrao);
}

/* Grid CSS */
.contato-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 2rem;
  width: 100%;
  margin-top: 5rem;
}

.contato-formulario,
.contato-mapa {
  width: 100%;
}

.contato-mapa iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 5px 5px 15px -2px #ffffff89;
}

.form-contato {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Inputs */
.form-contato input,
.form-contato textarea {
  width: 100%;
  /* Cor fundo secundaria */
  background-color: var(--cor-fundo-secundaria);
  font-size: 1.8rem;
  /* aumenta a distancia interna */
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  color: var(--cor-textos);
}

/* Pseudo elemento */
.form-contato input::placeholder,
.form-contato textarea::placeholder {
  /* Cor com Transparencia */
  color: #8686867b;
  font-size: 1.8rem;
}


.form-contato button {
  border: 0;
  background-color: var(--cor-fundo-secundaria);
  align-items: center;
  /* Adapta ao Conteudo */
  align-self: flex-start;
  gap: 2rem;
  display: flex;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  box-shadow: 5px 5px 5px #b3b3b36b;
}

.form-contato button i, 
.form-contato button span {
  color: var(--cor-titulo);
} 

.form-contato button:hover {
  filter: brightness(1.5);
  transition: ease-in-out 0.3s;
  background-color: #7a81858f;
  transform: scale(1.03);
}

.form-contato button i {
  font-size: 2rem;
}


/* Footer // Roda Pé */



/* Responsivo */

/* Largura até */
@media (max-width: 1199px) {
  .contato-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .carousel .carousel-inner {
    margin-top: -2rem;
  }

  #home {
    padding-top: 6rem;
  }

  /* .contato-grid {
    grid-template-columns: 1fr;
  } */
}

/* A partir de Telas Grandes */
@media (min-width: 768px) {
  header {
    padding: 1rem 10rem;
    justify-content: flex-start;
    gap: 2rem;
  }

  .menu-desktop {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .logo {
    margin-right: auto;
  }

  .carousel .carousel-inner {
    margin-top: -4.2rem;
    padding-top: 7rem;
  }

  /* Voltar Aqui */
  #home,
  .projetos,
  .contato {
    padding: 4rem 10rem;
  }

  .main-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  h1 {
    font-size: 5rem;
  }

  .projetos h2,
  .contato h2 {
    font-size: 3.5rem;
  }
}

/* Telas a partir de 992 */
@media (min-width: 992px) {
  .projeto-card {
    flex-direction: row;
  }

  .card-cover {
    width: 55%;
  }

  .card-reverse {
    /* Reverso / modo Espelho */
    flex-direction: row-reverse;
  }
}

/* Telas maiores que 1200 */
@media (min-width: 1200px) {
  .projetos h2,
  .contato h2 {
    font-size: 4rem;
  }
}

/* Telas maiores que 1400px */
@media (min-width: 1400px) {
  h1 {
    font-size: 8.5rem;
  }

  .complemento {
    padding: 5rem 7rem 4rem;
    margin-top: -7rem;
  }

  /* Voltar Aqui */
  .projetos {
    padding: 10rem 12rem 4rem;
  }

  .complemento h2 {
    font-size: 4.5rem;
  }

  .projetos h2,
  .contato h2 {
    font-size: 6rem;
  }

  .projetos .card-title {
    font-size: 3.5rem;
  }
}