/* ===== Hero ===== */
.hero {
    background: url("images/index-hero-bg.png") center center / cover no-repeat;
    min-height: 100vh; /* ocupa toda a altura da viewport */
    width: 100%; /* ocupa toda a largura */
    background-position: center top; /* ajusta o foco da imagem */
    background-attachment: fixed; /* efeito parallax opcional */
    display: flex;
    align-items: center; /* centra o conteúdo verticalmente */
    padding: 3rem;
    text-align: left;
    color: white;
}

.hero-content h2 span {
    color: #f5c400;
}

.buttons .btn,
.buttons .btn-outline {
    display: inline-block;
    margin-right: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
}

.btn {
    background-color: #f5c400;
    color: #000;
}

.btn-outline {
    border: 2px solid #f5c400;
    color: #f5c400;
}

/* ===== Estatísticas ===== */
.stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    background-color: #161821;
    padding: 2rem 0;
    text-align: center;
}

.stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}
.stats div h3 {
    font-size: 2.5rem;
    color: rgb(240, 177, 0);
    margin-bottom: 0.5rem;
}
.stats div p {
    color: #ccc;
    font-weight: 500;
}

.game-card img {
    width: 100%;
    height: 180px; /* Altura uniforme para todas as imagens */
    object-fit: cover; /* Corta a imagem proporcionalmente */
    border-radius: 10px;
    margin-bottom: 1rem;
}

/* ===== Call to Action ===== */
.cta {
    background-color: #f5c400;
    color: #000;
    text-align: center;
    padding: 3rem 2rem;
}

.cta .btn {
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
}