@font-face {
  font-family: 'focobold_italic';
  src: url('../fonts/foco_bdit-webfont.woff2') format('woff2'),
    url('../fonts/foco_bdit-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'focolight';
  src: url('../fonts/foco_lt-webfont.woff2') format('woff2'),
    url('../fonts/foco_lt-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'focoregular';
  src: url('../fonts/foco.woff2') format('woff2'),
    url('../fonts/foco.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'focobold';
  src: url('../fonts/foco-bold-webfont.woff2') format('woff2'),
    url('../fonts/foco-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'focoitalic';
  src: url('../fonts/foco_it-webfont.woff2') format('woff2'),
    url('../fonts/foco_it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.header {
  background-color: #e20613;
  padding: 5px 15px;
}

.header_container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  max-width: 1170px;
  margin: 0 auto;
  width: 100%;
}

.header_link {
    color: #ffffff;
    font-family: "focoitalic";
    font-size: 1rem;
    text-decoration: none;
}
  .header_link:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
  }

  .svg-inline--fa {
    display: var(--fa-display,inline-block);
    height: 1rem;
    overflow: visible;
    vertical-align: -0.125em;
  }

.header-section-desktop {
  margin: 0px;
}


.header-subtitle {
  font-family: 'focoregular';
  font-size: 3.25rem;
  color: #4d4f52;
  line-height: 44px;
}

.header-text {
  font-family: 'focoregular';
  font-size: 1.75rem;
  color: #4d4f52;
}


.footer {
  background-color: #e20613;
  padding: 1.5rem;
}

.footer_container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  max-width: 1170px;
  margin: 0 auto;
  width: 100%;
}

.footer_logo {
  align-items: center;
  color: #fff;
  display: flex;
  font-family: "focobold";
  gap: 1rem;
}

.footer_logo p {
  margin: 0;
  padding: 0;
}

.footer_social {
  align-items: center;
  display: flex;
  gap: 1rem;
}
  .footer_social a {
    color: #ffffff;
  }

/* .footer_link {
    color: #ffffff;
    font-family: "focoitalic";
    font-size: 1rem;
    text-decoration: none;
}
  .footer_link:hover {
    color: #ffffff;
    text-decoration: underline;
  } */



.info-carvao-ativado {
  margin: 0px;
  background-image: url("../images/bg_info_carvao_ativado.png");
  background-repeat: no-repeat;
  background-position: top ;
  background-size:cover;
}

  @media (min-width:1200px) {
    .info-carvao-ativado {
      height:440px;
      background-size: auto;
    }
  }

.info-title {
  font-family: 'focolight';
  font-size: 3.8rem;
  color: #ad6fe8;
}

.info-text {
  font-family: 'focolight';
  font-size: 1.75rem;
}

.info-instagram {
  margin: 0px;
  font-family: 'focolight';
  font-size: 3rem;
  background-image: url("../images/bg_info_instagram.png");
  background-repeat: no-repeat;
  background-position: top;
  min-height: 647px;
}

  @media (max-width:991px) {
    .info-instagram {
      background-size:cover;
      padding-bottom:30px;
    }
  }

.info-instagram-button, .info-instagram-button:hover{
  padding: 10px 55px;
  font-family: 'focoregular';
  font-size: 1.8rem;
  color: #ffffff;
  background-color: #5e3c7e;
  border-radius: 50px;
  text-decoration: none;
}

/* Produtos específicos */
.product-1 {
  margin: 0px;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: right;
}

@media (min-width:992px) {
  .product-1 {
    background-image: url("../images/bg_escova_banho_desmontavel.png");
  }
}

.product-2 {
  margin: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
  min-height: 1020px;
}

@media (min-width:992px) {
  .product-2 {
    background-image: url("../images/bg_mascara_olhos_gel.png");
  }
}

.product-3 {
  margin: 0px;
  background-repeat: no-repeat;
  background-size: auto ;
  background-position: left top;
  background-color: transparent;
  min-height: 392px;
}

.product-4-5 {
  margin: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  position: relative;

}

.product-4-5 > div {
  z-index: 2;
}
.product-4-5 > img:first-child {
  display: none;
}
.product-4-5 > img:last-child {
  display: none;
}

@media (min-width:1200px) {
  .product-4-5 {
    min-height: 1080px;
    background-image: url("../images/bg_esponja_sintetica_luva_esfoliante.png");
  }
  .product-4-5 > img:first-child {
    position: absolute;
    left: 0;
    bottom: -410px;
    width: calc(30% + 1vw);
    display: block;
  }
  .product-4-5 > img:last-child {
    position: absolute;
    top: -230px;
    right: 0;
    width: calc(30% + 1vw);
    display: block;
  }
}


.product-6-7 {
  margin: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
  position: relative;
  background-color: transparent;
}

/* Glider Carousel */
.glider-dot {
  width: 1.5rem;
  height: 1.5rem;
  color: #ffffff;
  border-style: solid;
  border-width: 0.05rem;
  border-color: #5e3c7e;
  border-radius: 999px;
  background-color: #ffffff;
  outline: #5e3c7e solid 0.05rem;
}

.glider-dot.active {
  width: 1.5rem;
  height: 1.5rem;
  color: #5e3c7e;
  border-style: solid;
  border-width: 0.2rem;
  border-color: #ffffff;
  border-radius: 999px;
  background-color: #5e3c7e;
  outline: #5e3c7e solid 0.15rem !important;
}

/* Cards dicas */
.dica {
  width: 288px;
  color: #65686c;
  border: 1px solid #ad6fe8;
}

.dica-button, .dica-button:hover {
    padding: 10px 25px;
    font-family: 'focoregular';
    font-size: 1.1rem;
    color: #ffffff;
    background-color: #ad6fe8;
    border-radius: 50px;
    text-decoration: none;
}

@media (max-width: 1200px) and (min-width: 576px) {




  /* p.info-title {
    font-size: calc(1rem + 3vw);
  }

  p.info-text {
    font-size: calc(1rem + 1.5vw);
  } */

}