/* Estilo general del banner */
.banner {
    position: relative;
    width: 100%;
    height: 60vh; /* Altura del banner ajustable según el tamaño de la pantalla */
    max-height: 500px; /* Altura máxima para pantallas grandes */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
}

/* Imagen de fondo del banner */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área del banner */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /* Envía la imagen detrás del texto */
    filter: brightness(50%); /* Oscurece la imagen para mejorar la legibilidad del texto */
    transition: filter 0.3s ease;
}

/* Efecto de hover para la imagen */
.banner:hover .banner-image {
    filter: brightness(40%); /* Ajusta la claridad al pasar el ratón */
}

/* Estilo del contenedor de texto sobre la imagen */
.over-paragraph {
    text-align: center;
    color: white;
    padding: 20px; /* Ajusta el padding para un mejor espaciado en pantallas pequeñas */
    background: rgba(0, 0, 0, 0.6); /* Fondo oscuro con mayor opacidad para mejor legibilidad */
    border-radius: 10px; /* Bordes redondeados */
    max-width: 90%; /* Ajusta el ancho máximo para que se adapte en pantallas más pequeñas */
    margin: 0 auto; /* Centra el contenedor de texto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

/* Efecto de hover para el contenedor de texto */
.banner:hover .over-paragraph {
    transform: translateY(0);
}

/* Estilo del título principal */
.over-paragraph h1 {
    font-size: 2.5rem; /* Tamaño de fuente grande pero adaptable */
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Efecto de hover para el título principal */
.banner:hover .over-paragraph h1 {
    color: #f8f9fa;
}

/* Estilo del párrafo */
.over-paragraph p {
    font-size: 1.25rem; /* Tamaño de fuente legible en pantallas pequeñas */
    margin-bottom: 20px;
    line-height: 1.7;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    transition: color 0.3s ease;
}

/* Efecto de hover para el párrafo */
.banner:hover .over-paragraph p {
    color: #e9ecef;
}

/* Estilo del segundo título */
.over-paragraph h2 {
    font-size: 1.5rem; /* Tamaño de fuente adaptado para ser más pequeño */
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* Estilo del botón de llamada */
.call-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #91BF2C;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1rem; /* Tamaño de fuente ajustado para ser más pequeño */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Efecto de hover para el botón de llamada */
.call-button:hover {
    background-color: #668e10;
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Media Queries para ajustar el diseño en diferentes dispositivos */

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .banner {
        height: 40vh; /* Ajusta la altura del banner en pantallas pequeñas */
    }

    .over-paragraph {
        padding: 15px; /* Reduce el padding para pantallas más pequeñas */
        max-width: 95%; /* Ajusta el ancho máximo en pantallas pequeñas */
    }

    .over-paragraph h1 {
        font-size: 1.8rem; /* Tamaño de fuente más pequeño para el título */
    }

    .over-paragraph p {
        font-size: 1rem; /* Tamaño de fuente más pequeño para el párrafo */
    }

    .over-paragraph h2 {
        font-size: 1.25rem; /* Tamaño de fuente más pequeño para el segundo título */
    }

    .call-button {
        font-size: 0.875rem; /* Tamaño de fuente más pequeño para el botón */
    }
}

/* Para pantallas medianas a grandes */
@media (min-width: 769px) {
    .banner {
        height: 60vh; /* Ajusta la altura del banner en pantallas medianas a grandes */
    }
}