/* Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS externo */

/* Definir as cores tema dark */
/* raiz */
:root,
:root[data-theme='dark'] {
 --cor-fundo: #000000;
 --cor-texto: rgb(216, 101, 141);
 --menu-link: #ffffff;
 --cor-borda: #ffbccb;
--cor--hover-icone: #e86c91;
--cor-p: #ffc2d7;




} 
:root[data-theme='light'] {
  --cor-fundo: #ffd7e9;
  --cor-texto: rgb(189, 18, 78);
   --menu-link: #000000;
   --cor-borda: #a91c46;
   --cor--hover-icone: #eb246a;
   --cor-p: #f52c72;

}

  /* Inverter Cor LOGO = Filtro */
html[data-theme='light'] .logo {
    filter: invert(1);
}

/* Reset CSS = Padronizar */
/* Seletor Universal */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body {
  background: var(--cor-fundo) ; /* cor fundo */
  color: var(--cor-texto);
  font-family: "Verdana, Geneva, Tahoma, sans-serif" /* cor TEXTOS */
}

 a {
  color: var(--menu-link) ;
  text-decoration: none;
}

ul {
  list-style: none; /* Estilo de Lista */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: rgb(250, 10, 110);
  border-bottom: 5px solid var(--cor-borda);
  position: fixed;
  z-index: 9999;

}

 .menu-desktop {
  background: rgb(250, 10, 110);;
  display: none;  
 } 

/* NAV. UL*/
.menu {
  display: flex;
  gap: 1rem; /* 16px */
  align-items: center;
  
}

/* LI - listas */
.menu-item {
width: 100%;
  
}

.menu-link {
  display: flex;
  align-items: center;
}
.menu-text {
color: var(--menu-link);
font-size: 1.2rem;
text-transform: uppercase;
}

/* Menu Hamburger// tres tracinhos */

#menuHamburger {
  margin-left: 1rem;
 }

.btn-menu-mobile {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--cor-texto);
  display: flex;
  font-size: 1.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
 }
 .menu-mobile { /* NAV */
 position: fixed;
 top: 0;
 right: 0;
 background: var(--cor-fundo);
 width: 75%;
 height: 100vh; /* viewPort Altura */
 border-left: 1px solid var(--cor-borda);
 max-width: 320px;
 display: flex;
 flex-direction: column;
 padding-top: 4rem;
 transition: .3s ease-in-out; /* voltar aqui*/
 transform: translateX(100%);
}
/* Ativar o Menu Mobile */
.menu-mobile.active {
  transform: translateX(0%);

}

.menu-mobile /* NAV */ 
.menu-list /* UL */ {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
padding: 1rem 1rem 2rem;
}

.menu-mobile .menu-item {
width: 100%;
} 

.menu-mobile .menu-link {
  padding: 0.5rem 0;
  display: inline-block;
  font-size: 1rem;
}

.logo {
  width: 3rem ; /* comprimento */ 
  height: 4.25rem ; /* altura */
}

.header-toggle {
display: flex;
justify-content: flex-end;
align-items: center;
}

.header-toggle i {
  font-size: 2rem;
  color: #000000;
  cursor: pointer;
}

#home {
    padding: 4.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; 
  }
.main-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
 }

 .main-content p {
  font-size: 2rem;
  color: var(--cor-p);
 }

 h1 {
    font-size: 3rem;
    color: rgb(219, 89, 134);
 }

 h2 {
 font-family:  "Alan Sans, sans-serif";
 font-size: 3rem;
 text-align: center;
 font-weight: bold;
 color: rgb(255, 73, 137);
 }

 h3 {
  font-size: 1.55rem;
  font-family: "Josefin Sans, sans-serif";
  font-style: italic;
    color: rgb(182, 0, 64);
 }

 .video iframe {
  aspect-ratio: 16/9;
 }

 #home,  
 .produtos, 
 .sobre, 
 .contato {
 padding: 2.5rem 1rem;
 }

 .descricao-video {
  display: flex;
  flex-direction: column;
  background: rgb(189, 18, 78);
  padding: 6.25rem 1rem 2rem;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  margin-top: -7.2rem;
   text-transform: uppercase;
 }

 .descricao-video h2{
  font-size: 2rem;
  text-transform: uppercase;
  margin-top: -2rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(228, 137, 255);
 /* letter spacing */
 }

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

 .produtos-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
 }

 .img-card{
  width: 100%;
  border-radius: 0.5rem;
 }

 .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
 }

 .card-title {
  color: rgb(255, 167, 201); /* Cor texto */
 font-size: 1.5rem; /* tamanho texto */
  font-weight: 1.5rem; /* Largura do texto */
  font-family: "Gill sans, 'Gill Sans MT, Calibri, 'Trebuchet MS, sans-serif" /* Estilo das fontes */
 }

 .card-descricao {
  font-size: 2rem;
  font-family: "Josefin sans, sans-serif";
  color: var(--cor-texto);
  font-weight: 8rem;
 }

 .card-item {
  color: #a91c46;
  font-size: 1.5rem;
  font-weight: 0.5rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
}
 
.card-item i {
 margin-right: 8px;
}

.card-item i:hover {
  color: var(--cor--hover-icone);
  transition: 0.5s ease-in-out;
}

.redes-sociais i {
  font-size: 1.5rem;
}


 
 @media (max-width: 768px) {
  #home {
    padding-top: 3rem;
  }
 }

 .col1 {
 background:#e86c91;
 }

 .col2 {
 background:aqua;                                                              
 }

 .col3 {
  background: #e86c91;
 }

/* Medidas Responsivas */
 @media (min-width: 768px) {


  .menu-desktop {
  display: flex; 
  min-width: 30%;
  }

 .btn-menu-mobile {
  display: none;
 }
 .header-toggle {
  min-width: 30%;
 }
 header {
        padding: 1rem 6rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    .descricao-video,
    .produtos,
    .sobre {
      padding: 10rem 15rem 4rem;
    }

    #home, 
    .produtos, 
    .sobre {
        padding: 8rem 6rem 4rem 6rem;
    }
  
    .main-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
      }
 } /* Fim min 768 */

 @media (min-width: 992px) {
   .produtos-card {
    flex-direction: row;
   }
   .img-card {
    width: 55%;
   }
   .reverse-card {
   flex-direction: row-reverse;
   justify-content: space-between;
   }
  }
 
 @media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
 }


 @media(min-width:1400px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
 font-size: 3.5rem;
  }
  h3 {
    font-size: 2.5rem;
  }
 }

 .video {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
 }

 .video .img-card {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
 }

 @media (min-width: 768px) {
    
    .video .img-card {
        width: 85%;
        max-width: 1200px;
    }
 }