#map {
    height: 300px;
    width: 100%;
    border: 1px solid #ddd;
}


.rounded-bg {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    /* Añade espacio vertical entre los divs */
}



[data-style="13"] .bg-overlay {
    background: linear-gradient(135deg, #FF8700 70%, #00A014 30%);
    opacity: 0.85;
    border-top: 1px solid #FFFFFF; /* Bordes blancos más delgados */
    border-bottom: 1px solid #FFFFFF;
}

[data-style="13"] .shape-divider[data-position="top"],
[data-style="13"] .shape-divider[data-position="bottom"] {
    background: linear-gradient(to right, #FF8700 70%, #00A014 30%);
    height: 25px; /* Altura del divisor más delgada */
    border-top: 1px solid #FFFFFF; /* Bordes blancos más delgados */
    border-bottom: 1px solid #FFFFFF;
}

[data-style="13"] h1, [data-style="13"] p {
    color: #FFFFFF;
    text-align: center;
    font-weight: 300;
    margin: 5px 0; /* Margen reducido para un look más compacto */
}


/* Agregar imagen de fondo al contenedor */

/* Estilos generales */
.service-index-item .effect {
    background-size: cover; /* Hace que la imagen cubra todo el espacio */
    background-position: center; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    border-radius: 10px; /* Mantén el borde redondeado */
    padding: 20px; /* Ajusta el padding para que el contenido no se pegue al borde */
    height: 100%; /* Asegura que el contenedor tenga la altura completa del col */
    display: flex; /* Usamos flexbox para alinear el contenido */
    flex-direction: column; /* Apilamos el contenido verticalmente */
    justify-content: center; /* Centra el contenido verticalmente */
    color: #fff; /* Hace que el texto se vea blanco sobre la imagen */
}

.service-index-item h3 {
    font-size: 18px;
    margin-top: 10px;
    font-weight: bold;
}

.service-index-item p {
    font-size: 14px;
    color: #fff; /* Asegura que el texto también sea blanco */
    margin-top: 10px;
}

/* Imágenes de fondo diferentes para cada cuadro */
.service-index-item-1 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu primera imagen */
}

.service-index-item-2 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu segunda imagen */
}

.service-index-item-3 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu tercera imagen */
}

/* Continúa para cada uno de los otros cuacielo.jpgros (4 a 9) */
.service-index-item-4 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu cuarta imagen */
}

.service-index-item-5 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu quinta imagen */
}

.service-index-item-6 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu sexta imagen */
}

.service-index-item-7 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu séptima imagen */
}

.service-index-item-8 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu octava imagen */
}

.service-index-item-9 {
    background-image: url('../images/imas/cielo.jpg'); /* Ruta de tu novena imagen */
}