.elementor-kit-28709{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"PT Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#181818;font-family:"Open Sans", Sans-serif;font-size:18px;}.elementor-kit-28709 e-page-transition{background-color:#FFBC7D;}.elementor-kit-28709 h1{color:#0A3161;font-family:"PT Sans", Sans-serif;font-size:35px;font-weight:700;}.elementor-kit-28709 h2{color:#0A3161;font-family:"PT Sans", Sans-serif;font-size:25px;font-weight:600;}.elementor-kit-28709 h3{color:#0A3161;font-family:"PT Sans", Sans-serif;font-size:24px;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */h2{
background-color: #0A3161;
color: white !important;
font-weight: 600 !important;
padding: 0.6em 0.85em;
align-content: center;
border-radius: 10px;
font-size: 25px  !important;
font-family:'PT Sans', sans-serif !important;
margin: 10px 0;
margin-top: 2.5rem !important;
margin-bottom: 1rem !important;}
h3{
border-bottom: 2px solid #8D91C7 !important;
    color: #0A3161;
}
.servicio-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px; /* Padding externo para el contenedor general */
}

.servicio {
    flex-basis: 30%; /* Ajusta este valor según necesites */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 10px;
    text-align: center;
    padding: 15px; /* Padding interno para cada servicio */
    background-color: white; /* Fondo blanco para mayor contraste */
}

.servicio img {
    width: 100%;
    height: auto;
    margin-bottom: 10px; /* Espacio debajo de la imagen */
}

.servicio h2, .servicio p {
    margin: 10px 0; /* Margen vertical para separar el texto */
}

.boton-servicio {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px; /* Margen superior para separar el botón de la descripción */
    background-color: #FDBB03; /* Color de fondo amarillo */
    color: white; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s; /* Efecto suave al cambiar color */
    font-weight:600;
}

.boton-servicio:hover {
    background-color: #FDBB03CF; /* Verde vivo al pasar el ratón */
}

@media (max-width: 768px) {
    .servicio {
        flex-basis: 100%; /* Ocupa el 100% del ancho en pantallas pequeñas */
    }
}


          /* Contenedor de la cuadrícula */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* Cuatro columnas */
            gap: 10px; /* Espacio entre celdas */
            width: 100%; /* 100% del ancho disponible */
            margin: auto; /* Centrar horizontalmente */
            padding: 20px; /* Espacio alrededor de la cuadrícula */
            Fondo suave inspirado en #0A3161 */
            border-radius: 10px; /* Bordes redondeados del contenedor */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
        }

        /* Estilo para cada celda de la cuadrícula */
        .grid-item {
            background-color: #F3F6FA; /* Fondo claro para contraste */
            color: #0A3161; /* Color base para el texto */
            border: 1px solid #0A3161; /* Bordes sutiles */
            text-align: center; /* Centrar contenido */
            padding: 20px; /* Espacio interior de las celdas */
            font-family: Arial, sans-serif; /* Fuente */
            font-weight: bold; /* Texto en negrita para profesionalidad */
            border-radius: 5px; /* Bordes redondeados */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para profundidad */
            transition: all 0.3s ease; /* Transición para el efecto hover */
        }

        /* Efecto hover para las celdas */
        .grid-item:hover {
            background-color: #E1EAF3; /* Color ligeramente más oscuro en hover */
            transform: scale(1.05); /* Aumentar tamaño */
            cursor: pointer; /* Cambiar cursor */
        }

        /* Media queries para hacer la cuadrícula responsiva */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas medianas */
            }
        }

        @media (max-width: 480px) {
            .grid-container {
                grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
            }
        }/* End custom CSS */