@font-face {
    font-family: Trivia_Gothic_R2_Light;
    src: url('/fonts/TriviaGothicR2Light.otf');
}

@font-face {
    font-family: Trivia_Gothic_C3_Heavy;
    src: url('/fonts/TriviaGothicC3CondensedHeavy.otf');
}

@font-face {
    font-family: Trivia_Gothic_C3_Heavy_Italic;
    src: url('/fonts/TriviaGothicC3CondensedHeavyItalic.otf');
}

@font-face {
    font-family: Trivia_Gothic_C3_Italic;
    src: url('/fonts/TriviaGothicC3CondensedItalic.otf');
}

@font-face {
    font-family: Trivia_Gothic_C3_Regular;
    src: url('/fonts/TriviaGothicC3CondensedRegular.otf');
}

@font-face {
    font-family: Trivia_Gothic_C2;
    src: url('/fonts/triviaGothicC2.otf');
}

@font-face {
    font-family: Trivia_Gothic_C2_Bold;
    src: url('/fonts/triviaGothicC2Bold.otf');
}

.imgB {
    height: 676px;
    background-size: cover;
    /* background-attachment: fixed; */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    gap: 20px;

}

.iBG{
    display: flex;
    align-items: end;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
    padding-bottom: 151px;
}


.carousel-item-inner>p {
    letter-spacing: 0em;
    text-align: left;
    color: #ffffff;
    width: 490px;
    font-family: Trivia_Gothic_C3_Regular;
    font-size: 32px;
    font-weight: 900;
    line-height: 33.44px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;


}

.carousel-item-inner>a {
    padding: 7px 15px;
    color: #ffffff !important;
    text-decoration: none;
    background: rgba(249, 147, 27, 1);
    width: 120px;
    height: 36px;
    font-family: Trivia_Gothic_C3_Regular;
    font-size: 20px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}



.carousel-indicators button {
    border-radius: 50%; /* Define o raio de borda para fazer os botões arredondados */
    width: 15px !important; /* Define a largura do botão */
    height: 15px !important; /* Define a altura do botão */
    margin: 0 5px; /* Define a margem entre os botões */
    background-color: #888; /* Define a cor de fundo dos botões */
    border: none; /* Remove a borda */
  }

  .carousel-indicators .active {
    background-color: #FFBD00; /* Define a cor de fundo do botão ativo */
  }

  .ver_mais_banner {
    width: 120px;
    height: 36px;
    background-color: #F9931B;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1.25px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    position: relative;
    z-index: 9;
  }



  @media (max-width: 1024px) {
    .carousel { max-height: 750px; }
    .imgB { height: 750px; }
    .carousel-item-inner.container { padding-left: 55px; }
    .carousel-control-next-icon, .carousel-control-prev-icon { width: 4rem; height: 4rem; }
  }

  @media (max-width: 768px) {
    .carousel { max-height: 520px; }
    .imgB { height: 520px; background-size: cover; background-position: center; }
    .carousel-item-inner.container { padding-left: 24px; padding-right: 24px; }
    .ver_mais_banner { font-size: 0.95rem; padding: 8px 14px; }
    .carousel-control-next-icon, .carousel-control-prev-icon { width: 2.4rem; height: 2.4rem; }
    .banner-navigation { bottom: 30px !important; }
  }

  @media (max-width: 480px) {
    .carousel { max-height: 380px; }
    .imgB { height: 380px; }
    .carousel-item-inner p { font-size: 0.95rem; line-height: 1.3; }
    .ver_mais_banner { font-size: 0.85rem; padding: 6px 10px; }
  }