@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');


@font-face {
  font-family: 'Herokid';
  font-style: normal;
  font-weight: 700;
  src: url('/site/midia/arquivos/herokid-bold-narrow.otf') format('opentype');
  font-display: swap;
}

html {box-sizing: border-box;font-family:"Roboto", sans-serif;}
*, *:before, *:after {box-sizing: inherit;}

body {
  font-family:"Roboto", sans-serif !important;
}



@keyframes slideInFromBottom {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.from-bottom {
  opacity: 0;
  transform: translateY(80px);
  animation: slideInFromBottom 1s ease-out forwards;
  animation-delay: 0.4s;
}

 
.hero-subtitle{
color: #FF6432;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: 'Inter';
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0px !important;
}

.hero-title{
  color: var(--text_gray, #252525);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  margin: 0px !important;
  
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text_gray, #252525);
  font-family: 'Herokid';
  font-size: 96px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 76.8px */
  text-transform: uppercase;
}
.hero-description{
color: #252525;
text-align: center;
leading-trim: both;
text-edge: cap;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 32px */
}
.hero-title > .orange{
  color: #FF6432;
  leading-trim: both;
  text-edge: cap;
  
  font-family: 'Herokid';

  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  text-transform: uppercase;
}

section.hero{
  overflow: hidden;
  min-height: 96vh;
  position: relative;
  padding-bottom: 100px;
  background: #FEFAF5;
}

.hero-grid-frame{
  width: 100%;
}
.hero-grid-frame > svg{
  position: absolute;
  width: 100%;
  height: auto;

}
.absolute-hero{

  width: 100%;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  min-height: 96vh;
}

.flex{
  display:flex;
}
.flex-col{
  flex-direction: column;
}

.gap-40{
  gap:40px;
}

.gap-16{
  gap:16px
}
.items-center{
  align-items:center;
}
.justify-center{
  justify-content: center; 
}


.counter{
  display: flex;
  padding: 32px;
  justify-content: space-around;
  align-items: center;
  border: 2px solid #252525;
  background: #FDF7F1;
  box-shadow: 4px 4px 0px 0px rgba(31, 31, 31, 0.90);
  min-width: 600px;
    
}
.counter-number{
  color: rgba(37, 37, 37, 0.80);
  leading-trim: both;
  text-edge: cap;
  font-family: 'Herokid';
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
    margin-bottom: 0px !important;
}
.counter-line{
  width: 2px;
  height: 52px;
  background: rgba(255, 100, 50, 0.50);
  margin-inline: 16px;
}
.counter-description{
  color: var(--text_gray, #252525);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
    margin-bottom: 0px !important;
  
  /* body-iw */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
}




/* -------------------------TABLET----------------------- */
@media (min-width: 577px) and (max-width: 768px) {
  .hero-title{
     font-size: 48px;
  }
  
  .hero-subtitle{
     font-size: 20px;
  }
  .counter-description{
    font-size: 18px;
  }
  .counter{
    min-width: 400px;
    padding: 24px;
  }
  .counter-number{
    font-size:32px;
  }
  .hero-description{
    line-height: 120%;

  }
  .gap-40{
    gap: 32px;
  }
  .hero-grid-frame > svg{
    width: auto;

  }
  section.hero{
    padding-bottom: 50px;
    padding-top: 50px;
  }
  
}


/* -------------------------CELULAR----------------------- */
@media (max-width: 576px) {

  .hero-title{
     font-size: 42px;
  }
  .hero-subtitle{
     font-size: 16px;
  }
  .counter-description{
    font-size: 16px;
  }
  .counter{
    width: 100%;
    flex-wrap: wrap;
    min-width: 0px;
    padding: 20px;
  }
  .counter-number{
    font-size:24px;
  }
  .counter-description {
    font-size:14px;
  }
  .counter-line{
    margin-inline: 8px;
  }
  .hero-description{
    font-size: 18px;
    line-height: 120%;

  }
  .hero-grid-frame > svg {
    bottom: -184px;
  }
  .gap-40{
    gap: 24px;
  }
  .hero-grid-frame > svg{
    width: auto;

  }
  section.hero{
    padding-bottom: 25px;
    padding-top: 25px;
  }
}