/* Estilos personalizados para el Nivo Slider */

/* Estilo para el caption del slider (texto superpuesto sobre la imagen) */
.nivo-caption {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important; /* Fondo negro con 50% de opacidad */
    color: #fff !important;
    padding: 20px 0 !important;
    z-index: 8 !important;
    opacity: 1 !important;
    display: block !important;
}

/* Estilos para el contenido del banner */
.slider-2 {
    padding: 50px 0;
}

.slider-right {
    text-align: right;
}

.banner-content {
    position: relative;
}

/* Estilos para el contenido del banner */
.banner-content {
    position: relative;
    z-index: 9;
}

/* Estilos para el texto dentro del banner */
.banner-content .text-content {
    padding: 10px 0;
}

.banner-content h1.title1 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.banner-content p.sub-title {
    font-size: 22px;
    margin-bottom: 5px;
    color: #fff;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.banner-content p {
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Estilos para el botón de "leer más" */
.banner-readmore a {
    display: inline-block;
    background: #1BB4B9;
    color: #fff;
    padding: 10px 25px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.banner-readmore a:hover {
    background: #168a8e;
}

/* Ajuste para que el slider tenga la altura adecuada */
.slider-area .nivo-directionNav a {
    top: 50%;
    z-index: 9;
}

.nivo-directionNav a {
    z-index: 9;
}

/* Asegurar que el slider muestre correctamente las imágenes */
.slider-area .nivoSlider {
    height: auto;
}

.slider-area .nivoSlider img {
    width: 100%;
    height: auto;
}

/* Ajustes responsivos */
@media (max-width: 767px) {
    .banner-content h1.title1 {
        font-size: 24px;
    }
    
    .banner-content p.sub-title {
        font-size: 16px;
    }
    
    .banner-content p {
        font-size: 14px;
    }
    
    .banner-readmore a {
        padding: 6px 15px;
        font-size: 12px;
    }
}