@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Poppins:wght@300&family=Roboto:ital,wght@0,700;1,500&display=swap');

@font-face {
  font-family: 'EBGaramond-Medium';
  src: url(/assets/fonts/ebgaramond/EBGaramond-Medium.ttf);
  
}

@font-face {
  font-family: 'EBGaramond-Medium-italic';
  src: url(/assets/fonts/ebgaramond/EBGaramond-MediumItalic.ttf);
  
}

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}


:root {
  --font-family-primary: 'Noto Sans JP', sans-serif;
  --font-family-secondary: 'Poppins', sans-serif;
  --font-family-tercery:'Roboto', sans-serif;
  --color-header: #010001;
  --color-primary:#FFFFFF;
  --cor-secundary:#28282A;
  ---color-titleBrinde:#FF0000;
  --color-hover-menu:rgb(99, 90, 90);

  --color-terceary:#9F6861;
  ---font-family-EBGaramound:'EBGaramond-Medium', sans-serif,
  ---font-family-EBGaramoundItalic:'EBGaramond-Medium-italic';
}


html {
  scroll-behavior: smooth;
 
}



#nav.active {
  display: block;
  /* ou qualquer outro estilo que você deseje aplicar para exibir o menu */
}


.menu-hidden {
  display: none;
}


body,
ul {
  margin: 0px;
  padding: 0px;
  
}

a {
  color: var(--color-primary);
  text-decoration: none;
  font-family: sans-serif;
}

li:hover {
  background:var(--color-hover-menu) ;
}

.logo-B{
  
  width: 100%;

}

#header {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(0, 0, 0);
  width: 100%;
  position: sticky;
  top: 0;
  transition: background-color 0.3s ease;
}





#menu {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  font-family: var(--font-family-tercery);
}

#menu a:hover {
  color: red;
}


.conatiner-section{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.0rem;
  justify-content: center;
}

h1, p{
  align-items: center;
  margin-bottom: 1.6rem;
  text-align: center;
  
}

.title-produtos{
  margin-right: 1.5rem;
 font-family: var(---font-family-EBGaramound);
}

.p-masculinos{
  font-size: 2.0rem;
  margin-left: -2.0rem;
  font-family: var(--font-family-primary);
}

.article-fragrancias{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fragrancias-olfativas{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.subtitulo-h2{
 text-align: center;
 font-family: var(---font-family-EBGaramound);
 margin:1.0rem auto;
 font-size: 1.5rem;
 margin-bottom: 1.0rem;
}

.brindes{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20.0rem;
  background-color: var(--cor-secundary);
  margin-bottom: 2.1rem;
}
#feminino{
  width: 100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#imagens-container-2 {
  width: 100%;
  
  
}

.promocao{
  width: 500px;
height: 150px;
margin-top: -10px;
background-color: #A6A6A6;
}





.title-feminino{
  font-size: 2.0rem;
  margin-left: -2.0rem;
  font-family: var(--font-family-primary);
  text-align: center;
}

.p-presença{
  font-size: 1.1rem;
  font-family: var(--font-family-primary);
  color: var(--color-header);
  text-align: center;
  padding: auto;
 }


.subtitle-brinde{
  font-size: 2.4rem;
  color: var(---color-titleBrinde);
  font-family: var(--font-family-tercery);
  font-weight: 1.0rem;
  letter-spacing: 0.1rem;
  margin-bottom: 1.0rem;
}

.p-perfume{
  color: var(--color-primary);
  font-family: var(--font-family-tercery);
  text-align: center;
}

.img-feminina{
 margin-bottom: 3.0rem;
}

.luxo{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 3.6rem;
 
}

.fragarncias-importadas{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color:#020202;
  margin-bottom: 0.1rem;
}

.luxo-img{
  height: 4.5rem;
}


.p-luxo{
  color: var(--color-primary);
  font-family: var(---font-family-EBGaramound);
 margin-left:auto;
}
 .h3{
  text-align: center;
  font-family: var(---font-family-EBGaramound);
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1.8rem;
 }

.cartoes{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: var(--color-terceary);
  margin-bottom: 5.0rem;
  font-family: var(--font-family-tercery);
}

.domicilio{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 1.8rem;
}

.p-mark{
  margin-top: 5.0rem;
 font-size: 1.4rem;
 
 text-align: center;
}

.p-mark2{
  font-size: 1.4rem;
  margin-top: -1.0rem;
}

mark{
 background-color: #010001;
 color: white;
 }

 .img-decorativa{
  margin-top: 2.0rem;
 }

 .entrega{
  width: 100%;
  
}
 .p-mark3{
  margin-top: 5.0rem;
  font-size: 1.4rem;
  text-align: center;
 }

 .icon-caminhao{
  margin-bottom: 4.3rem;
  width:50%;
  
 }

 .h3-parcela{
  color: var(--color-primary);
  margin-top: -2.0rem;
 }

 .juros{
  color: var(---color-titleBrinde);
  font-size: 1.5rem;
  margin-bottom: 5.0rem;
 }
 
 .taxa{
  margin-bottom: 4.5rem;
 }

.video {
  width: 100%;
 background-color: #42231F;
  margin-top: -5.0rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
}

.container-video{
  width: 100%;
  display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
margin-bottom: 2.0rem;
}


.h-excelencia {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
  color: var(--color-primary);
  font-family: var(---font-family-EBGaramound);
  line-height: 1.5;
  font-size: 1.4rem;
}

.whatsapp{
  width: 4.6rem;
}

#menu a {
  display: block;
  padding: 0.5rem;
}

#btn-mobile {
  display: none;
}

.fake-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f2f2f2;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #333;
  border-radius: 1.5rem;
  transition: background-color 0.3s, color 0.3s;
  margin-bottom: 1.5rem;
}

.fake-button:hover {
  background-color: #333;
  color: #f2f2f2;
}


.fragrância-glamur{
  margin-bottom: 2.5rem;
}



.pdf{
  color: var(--color-primary);
  font-family: var(--font-family-tercery);
  font-size: 1.4rem;
}

.pagamento-section{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-terceary);
  margin-top: -3.3rem;
  
}

.finalizar-compra{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.8rem;
}

.h1-compra{
  font-family: var(--font-family-tercery);
  color: var(--color-primary);
  margin-top: 3.0rem;
  font-size: 2.0rem;
  text-align: center;
}

.p-escolha{
  font-family: var(--font-family-tercery);
  margin-top: 3.0rem;
  margin-bottom: 3.5rem;
  font-size: 1.4rem;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}

.redes-sociais{
  margin-top: -1.0rem;
}

.pagamento-button{
  display: inline-block;
  padding: 10px 20px;
  background-color: #0cda3f;
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #333;
  border-radius: 1.5rem;
  transition: background-color 0.3s, color 0.3s;
  margin-bottom: 1.5rem;
}


.cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: #165018;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}

.cart-button i {
  margin-right: 5px;
}

.cart-button:hover{
  background-color: var(--color-terceary);
}

footer{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
 background-color: #42231F;
 color: var(--color-primary);
  font-family: var(--font-family-tercery);
  font-size: 1.4rem;
  text-align: center;
}

.h-footer{
  font-size: 1.4rem;
  margin:2.0rem auto;
}


@media (max-width: 700px) {
  @media (max-width: 773px) {
    #menu {
      display: block;
      position: absolute;
      width: 100%;
      top: 70px;
      right: 0px;
      background: black;
      transition: 0.6s;
      z-index: 1000;
      height: 0px;
      visibility: hidden;
      overflow-y: hidden;
    }
    
    #nav.active #menu {
      height: calc(100vh - 70px);
      visibility: visible;
      overflow-y: auto;
    }
  }
    #menu a {
      padding: 1rem 0;
      margin: 0 1rem;
      border-bottom: 2px solid rgba(182, 179, 179, 0.925);
    }
    #btn-mobile {
      display: flex;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      border: none;
      background: none;
      cursor: pointer;
      gap: 0.5rem;
      color: white;
    }
    #hamburger {
      border-top: 2px solid;
      width: 20px;
    }
    #hamburger::after,
    #hamburger::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: currentColor;
      margin-top: 5px;
      transition: 0.3s;
      position: relative;
    }
    #nav.active #hamburger {
      border-top-color: white;
    }
    #nav.active #hamburger::before {
      transform: rotate(135deg);
    }
    #nav.active #hamburger::after {
      transform: rotate(-135deg);
      top: -7px;
    }
  }