body {
  background-color: var(--black);
}

.section__title_content,
.section__title--large,
.section__text,
.section_title_large {
  color: var(--white);
}

/* Hero */

.container-section-title--stage {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.bg__hero {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/lines-stage.png');
}

.section__title--hero {
  font-size: 3.2rem;
  text-align: start;
}

.text-left {
  margin-bottom: 24px;
}

/* Sobre estágio*/

.section__text--about-stage {
  padding: 0 16%;
}

/* .section_content--sobre-estagio {
  background-size: 100% auto; 
  background-position: top center; 
  background-repeat: no-repeat;
  background-image: url('../img/bg-steps-stage.png');
} */

.steps-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
}

.left-cards-steps,
.right-cards-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  flex: 1 0 0;
  align-self: stretch;
}

.left-cards-steps {
  gap: 120px;
}

.left-cards-steps .card-step-stage:last-child {
  margin-bottom: 272px;
}

.right-cards-steps {
  gap: 162px;
}

.right-cards-steps .card-step-stage:first-child {
  margin-top: 212px;
}

.card-step-stage {
  background-image: url('../img/card_background_step.png');
  background-size:  cover; 
  background-position: center; 
  background-repeat: no-repeat;

  min-height: 272px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  border-radius: 16px;
  padding: 27px;
}

.title-container-card-step-stage {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.icon-card-stage i {
  color: var(--orange-light);
  font-size: 24px;
}

.icon-card-stage {
  position: relative;
  aspect-ratio: 1/1;
  width: 50px;
  border-radius: 12px;
  border: 1px solid transparent; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(50% 50% at 50% 50%, #524236 0%, #131417 100%);
}

.icon-card-stage::before,
.icon-card-stage::after {
  content: "";
  position: absolute;
  width: 26px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #855D36;
  filter: blur(10px);
  z-index: -1; 
}

.icon-card-stage::before {
  top: -8px;
  left: -8px;
}

.icon-card-stage::after {
  bottom: -8px;
  right: -8px;
}

.divisor-steps {
  stroke-width: 3px;
  background-color: var(--orange-light);
  filter: drop-shadow(0 0 10.797px var(--orange)) drop-shadow(0 0 21.594px var(--orange)) drop-shadow(0 0 75.58px var(--orange)) drop-shadow(0 0 151.16px var(--orange)) drop-shadow(0 0 250px var(--orange)) drop-shadow(0 0 250px var(--orange));
  margin: 0 24px;
  height: 1046.521px;
  width: 3px;
  flex-shrink: 0;
  z-index: -1;
  position: relative;
}

.img-steps {
  width: 100%;
  height: fit-content;
  z-index: -1;
  position: absolute;
  top: 7%;
  left: 0;
}

.title-card-step-stage {
  color: var(--white);
  text-align: center;
  font-family: "Exo 2";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
}

.text-card-step-stage {
  color: var(--white);
  font-family: Saira;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.line-elipses {
  position: absolute;
  left: -6px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 179px;
}

.neon-elipse {
  display: flex;
  width: 16px;
  height: 16px;
  padding: 1px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 63px;
  border: 1px solid var(--orange-light);
  box-shadow: 0 0 60.48px 0 var(--orange), 0 0 34.56px 0 var(--orange), 0 0 20.16px 0 var(--orange), 0 0 10.08px 0 var(--orange), 0 0 2.88px 0 var(--orange), 0 0 1.44px 0 var(--orange-light);
}


.center-elipse {
  width: 12px;
  height: 12px;
  background-color: var(--orange-light);
  border: 2px solid var(--white);
  border-radius: 63px;
}

.cards-games {
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(2, auto); 
  gap: 20px; 
}

.card-game {
  display: flex;
  width: 584px;
  max-width: 47dvw;
  padding: 36px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background: #111;
  gap: 40px;
  position: relative;
  background-size: cover; 
  background-position: center top; 
  background-repeat: no-repeat;
}

.card-game-1 {
  background-image: url('../img/ac_logo.png');
}

.card-game-2 {
  background-image: url('../img/fichas_logo.png');
}

.card-game-3 {
  background-image: url('../img/arretadologo.png');
}

.card-game-4 {
  background-image: url('../img/blackhat_logo.png');
}

.light-bar {
  opacity: 0.8;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, var(--orange) 100%);
  mix-blend-mode: plus-lighter;
  width: 24px;
  height: 50px;
  top: -15px;
  transform: translateX(-50%);
  left: 50%;
  stroke-width: 1px;
  stroke: var(--orange-light);
  mix-blend-mode: plus-lighter;
  filter: blur(6px);
  position: absolute;
}

.image-game {
  width: 98px;
  height: 98px;
  aspect-ratio: 1/1;
}

.text-container-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.title-card-games {
  color: var(--white);
  text-align: center;
  font-family: "Exo 2";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 28px */
}

.text-card-games {
  color: var(--white);
  text-align: center;
  font-family: Saira;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.author-card-games {
  color: var(--white);
  text-align: center;
  font-family: Afacad;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 20px */
}

.author-name {
  font-weight: 400;
}

.title_intership--hero {
  color: var(--orange) !important;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-transform: capitalize;
}

@media (width <= 1023px) {
  .section__container-title {
    align-items: center;
  }

  .bg__hero {
    background-position: center 10px;
    background-size: cover;
  }

  .section__container-title .section__text {
    text-align: center;
  }

  .media--mobile-hero img {
    width: 100%;
  }

  .actions_hero {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .actions_hero .btn__primary {
    width: fit-content;
  }

  .card-step-stage {
    background-image: url(./../img/bg_stage_mobile.png);
  }

  .steps-stage {
    flex-direction: column;
    position: relative;
  }

  .divisor-steps {
    position: absolute !important;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 0;
    height: 98%;
  }

  .line-elipses {
    display: none;
  }

  .right-cards-steps{ 
    display: none;
  }

  .left-cards-steps {
    gap: 48px;
  }

  .left-cards-steps .card-step-stage:last-child {
    margin: 0;
  }

  .title-container-card-step-stage {
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .text-card-step-stage {
    text-align: center;
  }

  .cards-games {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .card-game {
    width: 100%;
    background-position: center -20px;
    padding-top: 52px;
  }

  .tabs__list {
    justify-content: flex-start !important;
    padding-inline: 24px !important;
    scrollbar-width: none;
  }

  .tabs__list::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .btn__game {
    bottom: 40px !important;
  }

  .slide__container {
    flex-direction: column;
  }

  .slide__title, .slide__p, .slide__kicker, .slide__characters {
    text-align: center;
  }

  .slide__characters {
    align-items: center !important;
    overflow: unset !important;
  }

  .logos__track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .characters {
    height: fit-content;
    overflow-y: unset !important;
    overflow-x: unset !important;
  }

  .slide__game__preview {
    width: calc(100dvw - 48px) !important;
  }

  .slide__container {
    max-height: 100% !important;
  }

  .actions_intership {
    display: flex !important;
  }
}

@media (width <= 767px) {
  .card-game {
    max-width: 100%;
  }
}