:root {
    --custom-transparent: rgba(0, 0, 0, 0%);
    --custom-red-primary: #8700A3; /* Vermelho forte, similar ao da imagem */
    --custom-red-dark: #8700A3; /* Tom mais escuro para efeito hover */
    --custom-red-light: #8700A3; /* Tom mais claro para efeito de brilho */
    --custom-text-hover: #ffccd5; /* Vermelho suave para hover no texto */
}

.custom-center-grid {
    display: grid;
    height: inherit;
    place-items: center;
}

.custom-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: 60px;
    background: var(--custom-red-primary);
    border: none;
    border-radius: 0.75rem;
    color: white;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: 250ms ease-in-out;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-btn:hover,
.custom-btn:focus {
    background-color: var(--custom-red-dark);
    transform: scale(1.05);
    color: var(--custom-text-hover);
}

.custom-btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.4;
    border-radius: inherit;
    box-shadow: 0 0 0.6em 0.3em var(--custom-red-light);
    transition: 250ms ease-in-out;
}

.custom-btn:hover::after,
.custom-btn:focus::after {
    opacity: 0.6;
}
.visual-feature-text {
    font-size: 0.9rem; /* Fonte menor */
    color: #cccccc; /* Branco mais escuro */
    transition: color 200ms ease-in-out;
    margin: 0; /* Remove espaçamento extra do <p> */
}

.visual-feature-text:hover {
    color: #eeeeee; /* Branco mais claro no hover */
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem; /* Fonte menor */
    color: #bbbbbb; /* Branco um pouco mais escuro */
    transition: color 200ms ease-in-out;
}

.feature-item:hover {
    color: #dddddd; /* Branco um pouco mais claro no hover */
}

.feature-item .caret {
    font-size: 0.75rem; /* Seta menor */
    color: #bbbbbb;
    transition: color 200ms ease-in-out;
}

.feature-item:hover .caret {
    color: #dddddd;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.2; /* Reduz a altura da linha */
    margin-bottom: 4px; /* Diminui o espaçamento inferior entre os itens */
  }
  
  .feature-item p {
    margin: 0; /* Remove margens extras dos parágrafos */
  }
  #produtos-mych {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .container {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  .row {
    margin-bottom: 0 !important;
  }
  #produtos-mych {
    margin-bottom: 5rem; /* Aumente se necessário */
    padding-bottom: 5rem; /* Garante um espaçamento extra */
}

#gameplay-section {
    margin-top: 5rem !important; /* Força um espaço extra */
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f31b3c'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
    width: 4vw;
    height: 4vw;
  }

  .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f31b3c'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    width: 4vw;
    height: 4vw;
  }

  .carousel-indicators [data-bs-target] {
    background-color: #8700A3;
  }

  .features-grid {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) repeat(auto-fill, minmax(200px, 1fr)) minmax(20px, 1fr); /* Espaço no início e no final */
  gap: 20px; /* Espaçamento entre as features */
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.feature-item p {
  margin: 0;
  font-size: 14px;
}

.ml5 {
  position: relative;
  font-weight: 300;
  font-size: 12em; /* Aumentei o tamanho da fonte para 12em */
  color: #1b1212; /* Cor mais escura */
  display: inline-block;
  line-height: 1em;
}

.ml5 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0;
  padding-right: 0.05em;
  padding-bottom: 0;
  line-height: 1em;
}

.ml5 .line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 3px;
  width: 100%;
  background-color: #7a1414; /* Cor vermelha mais escura */
  transform-origin: 0.5 0;
  visibility: hidden; /* Esconde a linha da animação */
}

.ml5 .ampersand {
  font-family: Baskerville, serif;
  font-style: italic;
  font-weight: 400;
  width: 1em;
  margin-right: -0.1em;
  margin-left: -0.1em;
}

.ml5 .letters {
  display: inline-block;
  opacity: 0;
}