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

/* VARIAVEIS CSS*/
:root {
   --branquinho: #f1f1f1;
   --roxoclaro: rgb(245, 55, 55);
   --roxomedio: #550909;
   --vermelhoescuro: #87100c;
   --gradient: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
   --gradient2: linear-gradient(rgba(61, 14, 14, 0.842));
}

.topo {
   position: relative;
   text-align: center;
   padding: 20px 0;
   margin-top: -20px;
}

.logo {
   position: absolute;
   top: 80px;
   left: -30px;
   transform: translateY(-50%);
   height: 100px;
}

header {
   background-color: var(--roxomedio);
   height: 180px;
   color: var(--branquinho);
   padding: 20px;
   justify-content: space-around;
}


header h1 {
   font-family: BBH Sans Bartle;
   font-size: 2.5rem;
   font-weight: 100;
   z-index: 2;
   text-align: center;
   color: #fff;
   justify-content: space-around;
   list-style: none;
   margin: 0;
}


.menu-header {
   list-style: none;
   text-wrap: wrap;
   display: flex;
   gap: 10%;
   justify-content: center;

}

.item-menu {
   font-family: Questrial;
   font-size: 18px;
   color: var(--branquinho);
   text-decoration: none;
   font-weight: 400;
   transition: color .5s;
   text-transform: uppercase;
   position: relative;
   display: inline-block;

}

.item-menu::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 2px;
   width: 0;
   background-color: var(--roxoclaro);
   transition: width 0.3s ease;
}

.item-menu:hover::after {
   width: 100%;
}

#login {
   font-family: Questrial;
   font-size: 18px;
   color: var(--branquinho);
   text-decoration: none;
   font-weight: 400;
   transition: color .5s;
   text-transform: uppercase;
   position: relative;
   display: inline-block;

}

#login::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 2px;
   width: 0;
   background-color: var(--roxoclaro);
   transition: width 0.3s ease;
}

#login:hover::after {
   width: 100%;
}



a:hover {
   color: var(--roxoclaro);
}


.banner {

   background-size: cover;
   background-position: center;
   height: 600px;
   position: relative;
   display: flex;
   align-items: flex-start;
   /* alinha o conteúdo ao topo */
   text-align: left;
   /* texto à esquerda */
}

.banner::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   /* sombra sobre a imagem */
   z-index: 1;
}

.banner-conteudo {
   margin-top: 10%;
   position: relative;
   z-index: 2;
   padding: 60px;
   /* afasta do topo e da esquerda */
   max-width: 600px;
}

.banner-titulo {
   font-family: Questrial;
   color: var(--branquinho);
   font-size: 3em;
   margin-bottom: 20px;
}


.banner-comprar:hover {
   transform: scale(1.015);
   box-shadow: 0 0 10px #000000;
}


.footer-container {

   display: flex;
   text-align: center;
   justify-content: space-around;
   max-width: 100%;

   color: var(--branquinho);
   padding: 20px;
   font-size: 14px;
   background: var(--vermelhoescuro);
}

.tituf {
   font-family: BBH Sans Bartle;
   text-align: center;



}

.direitos {
   font-family: Questrial;
   text-align: center;

}

@media (width < 910px){
   .logo{
      display: none;
   }
   .menu-header{
      font-size: 1rem;
   }
}