:root {
    --primary-color: #ffffff;/* Color Primario */
    --primary-color-lighter: #ffffff;/* Color Primario */
    --primary-color-darker: #ffffff;/* Color Primario */
    --primary-contrast: #ffffff;/* Color Primario Contraste */
    --secondary-color: #ffffff;/* Color Secundario */
    --secondary-color-lighter: #ffffff;/* Color Primario */
    --secondary-color-darker: #ffffff;/* Color Primario */
    --secondary-contrast: #ffffff;/* Color Secundario Contraste */
}

/* Estilo para el fondo de imagen */
.background-image {
    position: relative;
    /*background-image: url('slider/fondo.jpg');/* Reemplaza con la ruta de tu imagen */
    background-size: cover;/* Asegura que la imagen cubra todo el contenedor */
    background-position: center;/* Centra la imagen de fondo */
    background-attachment: fixed;/* Fija la imagen de fondo para que no se desplace al desplazarse el contenido */
}

/* Pseudo-elemento para agregar color semi-transparente sobre la imagen */
.background-image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.9;
    background-color: #212529;/* Color semi-transparente */
    z-index: 1;/* Establece un nivel de apilamiento para el pseudo-elemento */
}

/* Estilo para el contenido dentro de .background-image */
.background-image>.container {
    position: relative; /* Para que el contenido aparezca sobre el pseudo-elemento */
    z-index: 2;/*Establece un nivel de apilamiento más alto para el contenido */
}

/* Estilo para el texto del título */
.container-title {
    color: #ffffff;/* Color del texto del título */
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: bold;
}

/* Estilo para el contenedor de contenido con fondo blanco */
.content-container {
    background-color: #ffffff;/* Fondo blanco */
    border-radius: 10px;/* Bordes redondeados */
    border-top: 4px solid var(--primary-color);/* Borde superior del color primario */
    margin-top: 20px;/* Espaciado entre el título y el contenedor de contenido */
    padding-left: 10px;/* Espaciado interno para el contenido */
    padding-right: 10px;/* Espaciado interno para el contenido */
    padding-bottom: 40px;/* Espaciado interno para el contenido */
    padding-top: 40px;/* Espaciado interno para el contenido */
}



    /* Estilos Generales */
    .btn-primary {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: var(--primary-contrast) !important;
        padding: .7rem;
        text-transform: uppercase;
        font-size: .8rem;
        font-weight: 700;
    }






    .img-premio {
        max-width: 100%;
        /* Asegura que la imagen no sobrepase el ancho del contenedor */
        height: auto;
        /* Mantiene las proporciones de la imagen */
    }