body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f4f4f4;
}

.navbar {
    background-color: #2A6251;
    /* verde oscuro */
}

.navbar-brand,
.nav-link {
    color: #fff !important;
}

.player-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.player-card:hover {
    transform: scale(1.02);
}

.player-img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 3px solid #22c55e;
    /* verde claro */
}

.card-title {
    font-weight: bold;
}

footer {
    background-color: #2A6251;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.list-group-item i {
    color: #22c55e;
    margin-right: 8px;
}

.carousel-inner {
    position: relative;
    width: 100%;
    max-height: 90vh;
    /* Ajusta la altura en función del 60% de la altura de la ventana */
}

.carousel-img {
    object-fit: cover;
    /* Mantiene las proporciones de la imagen */
    width: 100%;
    /* Ancho al 100% del contenedor */
    height: 100%;
    /* Altura al 100% del contenedor */
    max-width: 100%;
    /* Limita el ancho a 100% */
    max-height: 100%;
    /* Limita la altura a 100% */
}

/* Estilos responsivos para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .carousel-inner {
        height: 300px;
        /* Menor altura en móviles para mejorar la visualización */
    }
}

/* Estilos responsivos para pantallas extra pequeñas (móviles en modo retrato) */
@media (max-width: 576px) {
    .carousel-inner {
        height: 250px;
        /* Altura aún más pequeña en pantallas más pequeñas */
    }
}