/* D:\VAI\static\css\home\servicios\servicios-contenido.css */
.servicios-contenido-externo {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté por delante de la imagen */
    margin: 10vh 15vh; /* Márgenes de 5vh en todas las direcciones */
    padding: 5vh; /* Padding de 2vh para que sea responsivo */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del elemento */
    z-index: 1; /* Asegura que el pseudo-elemento esté detrás del contenido */

}
.servicios-contenido-externo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/static/images/home/Five-Circle-Collage.webp'); /* Establece la imagen de fondo */
    background-repeat: repeat; /* Repite la imagen en ambas direcciones */
    background-size: 55vw 55vh; /* Ajusta el tamaño de la imagen para que sea más pequeña y se repita adecuadamente */
    background-position: center; /* Centra la imagen en el contenedor */
    opacity: 0.1; /* Ajusta la transparencia de la imagen */
    z-index: -1; /* Asegura que el pseudo-elemento esté detrás del contenido */
}

.servicios-contenido {
    position: relative;
    z-index: 1; /* Asegura que el contenido esté por delante de la imagen */
    margin: 10vh 15vh; /* Márgenes de 5vh en todas las direcciones */
    padding: 5vh; /* Padding de 2vh para que sea responsivo */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del elemento */
    background-color: rgba(50, 67, 87, 0.7); /* Fondo celeste semitransparente */
}


.titulosecundario {
    text-align: center; /* Centra el texto dentro de .titulosecundario */
    padding-bottom: 5vh; /* Ajusta el padding a un porcentaje de la altura del viewport */
}

.titulosecundario h3 {
    color: rgb(121, 195, 215); /* Ajusta el color del texto según sea necesario */
    font-size: calc(2.5rem + 1vw); /* Tamaño ajustable según el ancho de la pantalla */
}

.servicios-contenido .row {
    padding-bottom: 20px; /* Ajusta el valor según el espacio que necesites */
}
.servicios-contenido1 ul {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margin por defecto */
}

.servicios-contenido ul li {
    color: rgb(255, 255, 255); /* Ajusta el color del texto según sea necesario */
    font-size: calc(0.9rem + 0.5vw); /* Ajusta el tamaño de fuente de manera responsiva */
    padding: 8px 0; /* Espaciado entre los elementos de la lista */
}
  

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
  
.carousel-image {
    width: 100%;
    height: 400px; /* Ajusta la altura según tus necesidades */
    object-fit: cover; /* Esta propiedad hace que la imagen mantenga su proporción y cubra el área */
}