@font-face {
    font-family: 'BebasNeue';
    src: url(../fonts/BebasNeue-Regular.ttf);   /* DEIXAR EM ../ PARA SUBIR PARA WEB */
}
@font-face {
    font-family: 'BebasNeue Pro';
    src: url(../fonts/BebasNeuePro-Regular.ttf);   /* DEIXAR EM ../ PARA SUBIR PARA WEB */
}
@font-face {
    font-family: 'BebasNeue Pro Light';
    src: url(../fonts/BebasNeuePro-Light.ttf);   /* DEIXAR EM ../ PARA SUBIR PARA WEB */
}
@font-face {
    font-family: 'Inter Regular';
    src: url(../fonts/Inter/Inter-Regular.ttf);   /* DEIXAR EM ../ PARA SUBIR PARA WEB */
}
@font-face {
    font-family: 'Inter Medium';
    src: url(../fonts/Inter/Inter-Medium.ttf);   /* DEIXAR EM ../ PARA SUBIR PARA WEB */
}
@font-face {
    font-family: 'Inter Bold';
    src: url(../fonts/Inter/Inter-Bold.ttf);   /* DEIXAR EM ../ PARA SUBIR PARA WEB */
}
* { box-sizing: border-box; padding: 0; margin: 0;}

/* COLORS */
:root {
    --bs-white: #fff;
    --bs-yellow-light: #fff9e6;
    --bs-yellow-light-hover: #fff6d9;
    --bs-yellow-light-active:##ffecb0;
    --bs-yellow-normal: #ffc300;
    --bs-yellow-normal-hover: #e6b000;
    --bs-yellow-normal-active: #cc9c00;
    --bs-yellow-dark: #bf9200;
    --bs-yellow-dark-hover: #997500;
    --bs-yellow-dark-active: #735800;
    --bs-yellow-darker: #594400;
    --bs-blue-light: #e6e8ed;
    --bs-blue-light-hover: #d9dde3;
    --bs-blue-light-active:#b0b9c6;
    --bs-blue-normal: #001d47;
    --bs-blue-normal-hover: #001a40;
    --bs-blue-normal-active: #001739;
    --bs-blue-dark: #001635;
    --bs-blue-dark-hover: #00112b;
    --bs-blue-dark-active: #000d20;
    --bs-blue-darker: #000a19;
  }

/* CLASSES COLORS */
.white { color: var(--bs-white); }
.blue-light {
    color: var(--bs-blue-light);
}
.blue-light-hover {
    color: var(--bs-blue-light-hover);
}
.blue-light-active {
    color: var(--bs-blue-light-active);
}
.blue-normal {
    color: var(--bs-blue-normal);
}
.blue-normal-hover {
    color: var(--bs-blue-normal-hover);
}
.blue-normal-active {
    color: var(--bs-blue-normal-active);
}
.blue-dark{
    color: var(--bs-blue-dark);
}
.blue-dark-hover {
    color: var(--bs-blue-dark-hover);
}
.blue-dark-active {
    color: var(--bs-blue-dark-active);
}
.blue-darker {
    color: var(--bs-blue-darker);
}
.yellow-light {
    color: var(--bs-yellow-light);
}
.yellow-light-hover {
    color: var(--bs-yellow-light-hover);
}
.yellow-light-active {
    color: var(--bs-yellow-light-active);
}
.yellow-normal {
    color: var(--bs-yellow-normal);
}
.yellow-normal-hover {
    color: var(--bs-yellow-normal-hover);
}
.yellow-normal-active {
    color: var(--bs-yellow-normal-active);
}
.yellow-dark{
    color: var(--bs-yellow-dark);
}
.yellow-dark-hover {
    color: var(--bs-yellow-dark-hover);
}
.yellow-dark-active {
    color: var(--bs-yellow-dark-active);
}
.yellow-darker {
    color: var(--bs-yellow-darker);
}
.black { color: #000;}

/* FONTS */
.bebas-neue { font-family: 'BebasNeue', sans-serif; }
.bebas-neue-pro { font-family: 'BebasNeue Pro', sans-serif;}
.bebas-neue-pro-light {font-family: 'BebasNeue Pro Light',sans-serif;}
.inter-regular {font-family: 'Inter Regular', sans-serif;}
.inter-bold {font-family: 'Inter Bold', sans-serif;}

/* META */
a { text-decoration: none;}
h1 { font-size: 2.438rem; /* 39px */ }
h2 { font-size: 2.438rem; /* 39px */ }
h3 { font-size: 1.938rem; /* 31px */ }
p { font-size: 1.250rem; /* 20px */}
.fs-small { font-size: 14px }
body { font-family: 'Inter Regular', sans-serif; background-color: var(--bs-blue-normal); overflow-x: hidden;}

/* ROLETA */


/* HEXAGONO */
.hexagon {
    width: 78px;
    height: 45px;
    background-color: #0662B7;
    position: relative;
    margin: 22.5px 0;
    border: none; /* Adicionando esta linha para remover a borda */
    cursor: pointer;
  }
  .hexagon.active {
    background-color: #44C4E6; /* Cor diferente para o hexágono ativo */
  }
  .hexagon.active:after {
    border-top: 23.5px solid #44C4E6;
  }
  .hexagon.active:before {
    border-bottom: 22.5px solid #44C4E6;
  }
  .hexagon:before,
  .hexagon:after {
    content: "";
    width: 0;
    border-left: 39px solid transparent;
    border-right: 39px solid transparent;
    position: absolute;
  }
  .hexagon:before {
    top: -22px;
    border-bottom: 22.5px solid #0662B7;
  }
  .hexagon:after {
    bottom: -22.5px;
    border-top: 23.5px solid #0662B7;
  }
  .hexagon span {                            /* NÚMEDO DO HEXAGONO */
    font-size: 1.250rem;
    color: var(--bs-white);
    position: absolute;
    left: 33px;
    top: 8px;
    margin: 0;
    padding: 0;
  }
.hexagon.active span {
        color: var(--bs-blue-normal);
    }
  .hexagon-text {                           /* TEXTO PASSO A PASSO */
    text-align: center;
    display: none;
  }
  .hexagon-text.active {
    display: block;
    position: relative;
    animation: slideText 0.5s ease-in-out;
  }
  @keyframes slideText {
    0% {
        opacity: 0;
        right: -50vh;
    }
    100% {
        opacity: 1;
        right: 0vh;
    }
  }
  .hexagon-text img {
    width: 100%;
  }

  /* CARD FAQ*/
  .card {
    background: none !important;
  }
  .card-header {
    background-color: #0662B7;
  }
  .card-body {
    background-color: var(--bs-blue-light);
    color: var(--bs-blue-normal);
  }

  /*TINY SLIDER*/
  .tns-nav {
    display: none;
  }
  .item img {
    position: relative;
    left: 4vh;
  }

  /* LOGO TOP FOOTER*/
  .logo-estrelabet {
    max-width: 130px;
  }