/** custom conts **/

.faq-container {
    text-align: center;
    padding: 20px;
}

.custom-container {
    display: flex;
    justify-content: center; /* Centrar los contenedores horizontalmente */
    align-items: center; /* Centrar los contenedores verticalmente */
    flex-wrap: wrap; /* Permitir que los contenedores se ajusten en dispositivos móviles */
}

.custom-box {
    background-color: #6699cc;
    color: white;
    width: 200px;
    padding: 20px;
    margin: 0; /* Asegurarse de que no haya margen entre los contenedores */
    border-radius: 0; /* Asegurarse de que no haya bordes redondeados */
    text-align: center;
    transition: transform 0.3s, background-color 0.3s;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.custom-box:first-child {
    border-top-left-radius: 20px; /* Borde redondeado en la esquina superior izquierda */
    border-bottom-left-radius: 20px; /* Borde redondeado en la esquina inferior izquierda */
}

.custom-box:last-child {
    border-top-right-radius: 20px; /* Borde redondeado en la esquina superior derecha */
    border-bottom-right-radius: 20px; /* Borde redondeado en la esquina inferior derecha */
}

.custom-box:hover {
    background-color: #557a9b;
    transform: translateY(-10px);
}

.custom-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 5px;
    overflow: hidden;
}

.custom-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajustar la imagen para que cubra todo el contenedor */
}

.custom-box h2 {
    font-size: 1.5em;
    margin: 10px 0;
}

.custom-box p {
    font-size: 1em;
    margin: 0;
}

/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
    .custom-container {
        flex-direction: column; /* Hacer que los contenedores se apilen verticalmente en pantallas pequeñas */
        align-items: stretch; /* Asegurarse de que los contenedores ocupen todo el ancho disponible */
    }

    .custom-box {
        width: 100%; /* Hacer que los contenedores ocupen todo el ancho disponible */
        border-radius: 20px; /* Aplicar bordes redondeados a todos los contenedores */
        margin-bottom: 10px; /* Añadir espacio entre los contenedores */
    }

    .custom-box:first-child {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .custom-box:last-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}



















/** guarantee **/

.guarantee {
    background: #fefefd;
    padding-top: 50px; /* Reduce the padding-top value to bring it closer to the banner */
}

.guarantee .titlepage {
    text-align: center;
}

.guarantee .titlepage h2 {
    display: inline-block;
}

.guarantee .titlepage p {
    color: #4c4b4b;
    padding-top: 10px;
}

.guarantee-box_main {
    margin-bottom: 30px;
}

.guarantee-box {
    background: #fff;
    margin-bottom: 40px;
    cursor: pointer;
}

.guarantee-box i {
    border: #241ee1 solid 6px;
    width: 221px;
    height: 221px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    transition: ease-in all 0.5s;
    background: #fff;
}

.guarantee-box i img.circle-img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: ease-in all 0.5s;
}

.guarantee-box h3 {
    color: #1a1c1b;
    font-size: 17px;
    line-height: 19px;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 35px;
}

.guarantee-box p {
    padding-top: 15px;
    color: #4c4b4b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-box_main .btn-solicitar {
    margin: 0 auto;
    display: block;
    background-color: #2e428b;
    color: white;
    padding: 10px 20px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.guarantee-box_main .btn-solicitar:hover {
    background-color: #1ee1d6;
    color: #2e428b;
}

#ho_co:hover .guarantee-box i {
    border: #ee4376 solid 6px;
    background: #2e428b;
    transition: ease-in all 0.5s;
    transform: translateY(-10px); /* Adds elevation */
}

#ho_co:hover .guarantee-box i img.circle-img {
    filter: brightness(0.5); /* Darkens the image */
    transition: ease-in all 0.5s;
}

.titlepage {
    padding-bottom: 60px;
}

/** end guarantee **/

/* Additional CSS to center the boxes */
.row.justify-content-center {
    display: flex;
    justify-content: center;
}




















.policy-card {
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.policy-card:hover {
    background-color: #007bff; /* Cambia el color de fondo a azul */
    color: #ffffff; /* Cambia el color del texto a blanco */
    transform: translateY(-30px); /* Mueve el contenedor hacia arriba */
}

.policy-card:hover *,
.policy-card:hover .btn {
    color: #ffffff !important; /* Asegura que todo el texto y los botones cambien a blanco */
}

.policy-card:hover .btn {
    background-color: #ffffff !important; /* Cambia el fondo del botón a blanco */
    color: #007bff !important; /* Cambia el texto del botón a azul para contraste */
}

.policy-card:hover .btn:hover {
    background-color: #0056b3; /* Cambia el fondo del botón a un azul más oscuro en hover */
    color: #ffffff !important; /* Cambia el texto del botón a blanco */
}




















.faq-container {
    padding: 2rem;
    background-image: url('../img/ban2.png'); /* Ruta a tu imagen de fondo */
    background-attachment: fixed; /* Esto crea el efecto parallax */
    background-size: cover;
    background-position: center;
    min-height: 50vh; /* Asegura que el contenedor tenga suficiente altura */
}

.faq-title {
    margin-bottom: 2rem;
    color: #ffffff;
}

.faq-item {
    background-color: rgba(247, 250, 253, 0.8); /* Fondo semi-transparente para ver la imagen */
    border: 2px solid #07498f;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

.faq-item:hover {
    background-color: #07498f;
    color: #ffffff;
}

















/********** Crédito 123 **********/



.credito-container {
    width: 100%; /* Ancho completo */
    padding: 20px;
    background-color: #B5D1EB; /* Cambié el color de fondo */
    background-image: url('../img/ban123.png'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajustar la imagen para cubrir todo el contenedor */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* Evitar que la imagen se repita */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px; /* Bordes redondeados */
}

.credito-inner-container {
    max-width: 900px; /* Aumenté el tamaño del contenedor padre */
    margin: 0 auto; /* Centrar contenedor interno */
    padding: 20px;
}

.credito-container h1 {
    font-size: 34px; /* CONTAINER PRINCIPAL CON TEXTO "ASI DE FACIL" Tamaño de fuente más grande */
    margin-bottom: 20px;
    text-align: center; /* Alineación del texto al centro */
    color: #07498f; /* Cambié el color del texto */
}

.credito-steps {
    color: #3f25c2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permitir que los contenedores se envuelvan en líneas adicionales */
    margin: 20px 0;
}

.credito-step {
    width: 200px; /* Ancho */
    padding: 20px; /* Espaciado interno más grande */
    border: 2px solid #333;
    border-radius: 10px; /* Bordes redondeados */
    cursor: pointer;
    background-color: #f8f9fa; /* Color de fondo ligero */
    transition: background-color 0.3s, transform 0.3s; /* Transición suave para los cambios de estilo */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #007bff; /* Cambié el color de la fuente a azul */
    margin: 10px; /* Margen entre los contenedores */
}

.credito-step:hover, .credito-step.active {
    background-color: #4592e0; /* Cambio de color al pasar el mouse */
    transform: translateY(-25px); /* Efecto de elevación al pasar el mouse */
    color: #ffffff; /* Cambié el color del texto a blanco */
}

.credito-step-number {
    font-size: 70px; /* Tamaño de la fuente solo para los números */
    font-weight: bold; /* Puse en negrita */
}

.credito-step-text {
    font-size: 24px; /* Tamaño de la fuente */
    margin-top: 10px; /* Espaciado superior para el texto */
    text-align: center; /* Centrando el texto */
    font-weight: bold; /* Puse en negrita */
}

.credito-info-box {
    background-color: #ffffff; /* Color del fondo */
    color: #000000;
    padding: 20px;
    border-radius: 30px; /* Bordes redondeados */
    border: 2px solid #000000; /* Cambié el color del borde a negro */
    margin-top: 20px;
    font-size: 25px; /* Tamaño de fuente más grande */
    text-align: left; /* Alineación del texto a la izquierda */
    line-height: 1.6; /* Altura de línea más grande para mejorar la legibilidad */
    width: 90%; /* Ancho deseado */
    max-width: 900px; /* Asegurar que no exceda el 100% del contenedor padre */
    margin: 0 auto; /* Centrar el contenedor */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 767px) {
    .credito-step {
        width: 100%; /* Hacer que los contenedores ocupen todo el ancho en móviles */
        margin: 10px 0; /* Margen superior e inferior entre los contenedores */
    }

    .credito-step-number {
        font-size: 50px; /* Reducir el tamaño de la fuente para los números en móviles */
    }

    .credito-step-text {
        font-size: 20px; /* Reducir el tamaño de la fuente en móviles */
    }

    .credito-info-box {
        font-size: 20px; /* Reducir el tamaño de la fuente en móviles */
        margin-left: 0; /* Ajustar márgenes para centrar en móviles */
        margin-right: 0; /* Ajustar márgenes para centrar en móviles */
    }
}








/********** INDEX **********/



.unique-main-title {
    font-size: 40px; /* Tamaño para escritorio */
}

.unique-highlight {
    color: #ff6347; /* Color destacado */
    font-size: 1.0em; /* Ajusta según lo necesario */
}

@media (max-width: 767px) {
    .unique-main-title {
        font-size: 28px; /* Tamaño para móviles */
    }

    .unique-highlight {
        font-size: 0.9em; /* Ajusta según lo necesario para que sea visible en móviles */
    }

    .unique-feature-title {
        font-size: 12px;
    }
}





/********** CALCULADORA CONTS **********/

.calc-container {
    margin-top: 50px;
}

.calc-box {
    padding: 20px;
}

.calc-title {
    font-size: 2em;
    margin-bottom: 10px;
}

.calc-subtitle {
    font-size: 1.2em;
    margin-bottom: 20px;
}

.calc-label {
    font-weight: bold;
}

.calc-button {
    margin-top: 20px;
}

.modal-container {
    padding: 20px 0;
}

.modalcont .icon-box {
    padding: 10px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.modalcont .icon-box img {
    width: 300px !important;
    height: 300px !important;
}

.modalcont .icon-box:hover {
    background-color: #f0f0f0; /* Cambia este color según tus necesidades */
    transform: translateY(-10px); /* Mueve el contenedor hacia arriba */
}

/* Estilos específicos para el modal de la calculadora */
.modal-dialog {
    max-width: 1000px; /* Ajusta el tamaño según tus necesidades */
    width: 100%;
    margin: auto; /* Centra el modal horizontalmente */
    top: 30%; /* Centra el modal verticalmente */
    transform: translateY(-30%); /* Ajusta el modal para estar centrado verticalmente */
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-header, .modal-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.modal-footer .btn-secondary {
    margin-left: auto; /* Alinea el botón "Cerrar" a la derecha */
}

.modal-body .btn {
    margin-top: 20px; /* Espaciado entre el texto y el botón */
}

/* Diferentes colores de fondo al pasar el mouse */
.modalcont a:nth-child(1) .icon-box:hover {
    background-color: #106eea; /* Dorado para el primer contenedor */
}

.modalcont a:nth-child(2) .icon-box:hover {
    background-color: #106eea; /* Verde para el segundo contenedor */
}

.modalcont a:nth-child(3) .icon-box:hover {
    background-color: #106eea; /* Azul claro para el tercer contenedor */
}

.modalcont a {
    display: block;
    text-decoration: none;
}













/* Asegurar que los bordes y subrayados se eliminen */
/* Asegurar que los bordes y subrayados se eliminen */
/* Mantener los estilos básicos de la página y contenedores */
.section-title {
    border: none;
}

.section-title::before,
.section-title::after {
    content: '';
    display: none;
    border: none;
}

.featured-services .section-title {
    border: none;
    margin: 0;
    padding: 0;
}

/* Asegurarnos de que los enlaces no tengan estilos de borde */
a {
    text-decoration: none;
    border: none;
    outline: none;
}

/* Efecto de hover en las imágenes dentro de cada contenedor */
.icon-1:hover img {
    content: url('http://localhost/Gega/assets/img/cpt.png'); /* Ruta completa para la imagen de hover */
}

.icon-2:hover img {
    content: url('http://localhost/Gega/assets/img/brt.png'); /* Ruta completa para la imagen de hover */
}

.icon-3:hover img {
    content: url('http://localhost/Gega/assets/img/cat.png'); /* Ruta completa para la imagen de hover */
}



















/********** NUESTRO **********/
/* Asegurar que el contenido sea responsivo */
.container, .container-fluid, .container-xxl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 767px) {
    .calc-box {
        position: relative;
        top: 0;
        width: 100%;
        margin-top: -320px; /* Ajuste de posición para móviles */
    }

    .calc-box h2 {
        font-size: 28px;
    }

    .calc-box p {
        font-size: 18px;
    }

    .video-container iframe {
        width: 100%;
        height: auto;
    }

    .newsletter img {
        width: 100%;
        height: auto;
    }

    .newsletter p {
        font-size: 18px;
    }

    .container-desk {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box-desk {
        width: 100%;
        margin-bottom: 20px;
    }

    .box-desk p {
        font-size: 18px;
    }

    .icon-desk {
        font-size: 24px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .calc-box {
        width: 100%;
        margin-top: -320px; /* Ajuste de posición para tablet */
    }

    .calc-box h2 {
        font-size: 36px;
    }

    .calc-box p {
        font-size: 20px;
    }

    .video-container iframe {
        width: 100%;
        height: auto;
    }

    .newsletter img {
        width: 100%;
        height: auto;
    }

    .newsletter p {
        font-size: 20px;
    }

    .container-desk {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .box-desk {
        width: 100%;
        margin-bottom: 20px;
    }

    .box-desk p {
        font-size: 20px;
    }

    .icon-desk {
        font-size: 26px;
    }
}

/* Ajustes generales para los textos */
.text-center h1, .text-center h6, .text-center p {
    font-size: 1.5rem;
}

/* Ajustes para el botón de WhatsApp */
.whatsapp5 .btn {
    width: 100%;
    height: auto;
    font-size: 1rem;
}

/* Ajustes para el botón de PSE */
.pse .btn {
    width: 100%;
    height: auto;
    font-size: 1rem;
}

/* Ajustes para el botón de Solicita Crédito */
.solici .btn {
    width: 100%;
    height: auto;
    font-size: 1rem;
}


/* General styles for calc container */
.calc-container {
    position: relative;
    padding-top: 50px;
    border-radius: 30px;
}

/* Adjustments for calc box */
.calc-box {
    position: absolute;
    top: -320px;
    width: 85%;
}

/* Styles for text elements within calc */
.calc-title {
    font-size: 50px;
}

.calc-description {
    font-size: 22px;
}

.calc-subtitle {
    font-size: 25px;
}

/* Media queries for responsiveness */
@media (max-width: 767px) {
    .calc-container {
        padding-top: 20px;
    }

    .calc-box {
        position: relative;
        top: 0;
        width: 100%;
        margin-top: -320px;
    }

    .calc-title {
        font-size: 28px;
    }

    .calc-description {
        font-size: 18px;
    }

    .calc-subtitle {
        font-size: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .calc-container {
        padding-top: 30px;
    }

    .calc-box {
        top: 0;
        width: 90%;
    }

    .calc-title {
        font-size: 36px;
    }

    .calc-description {
        font-size: 20px;
    }

    .calc-subtitle {
        font-size: 22px;
    }
}


































/********** Telon **********/
#curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    background-color: transparent;
}

.panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background-color: #00649B; /* Azul oscuro para el telón */
}

.left-panel {
    left: 0;
    transform: translateX(0);
    animation: slideLeft 1s forwards;
}

.right-panel {
    right: 0;
    transform: translateX(0);
    animation: slideRight 1s forwards;
}

@keyframes slideLeft {
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideRight {
    to {
        transform: translateX(100%);
    }
}



/********** Telon End **********/



/********** Template CSS **********/
:root {
    --primary: #0080ff;
    --light: #F1F8FF;
    --dark: #0f172b;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semi-bold {
    font-weight: 600 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    text-transform: uppercase;
    transition: .5s;
}



.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}

/*** Button Circle ***/


        h1 {
            color:green;
        }

        .xyz {
            background-size: auto;
            text-align: center;
            padding-top: 100px;
        }

        .btn-circle.btn-sm {
            width: 30px;
            height: 30px;
            padding: 6px 0px;
            border-radius: 15px;
            font-size: 8px;
            text-align: center;
        }

        .btn-circle.btn-md {
            width: 50px;
            height: 50px;
            padding: 7px 10px;
            border-radius: 25px;
            font-size: 10px;
            text-align: center;
        }

        .btn-circle.btn-xl {
            width: 70px;
            height: 70px;
            padding: 10px 16px;
            border-radius: 35px;
            font-size: 12px;
            text-align: center;
        }

        .btn-circle.btn-xxl {
            width: 150px;
            height: 38px;
            padding: 10px 16px;
            border-radius: 35px;
            font-size: 12px;
            text-align: center;
        }

        .btn-circle.btn-xxs {
            width: 80px;
            height: 55px;
            padding: 10px 16px;
            border-radius: 35px;
            font-size: 12px;
            text-align: center;
        }

        .btn-circle.btn-xxxl {
            width: 190px;
            height: 45px;
            padding: 10px 16px;
            border-radius: 35px;
            font-size: 20px;
            text-align: center;
        }

        .btn-circle.btn-xxxxl {
            width: 190px;
            height: 45px;
            padding: 10px 16px;
            border-radius: 45px;
            font-size: 15px;
            text-align: center;
        }

        .btn-circle.btn-xxll {
            width: 200px;
            height: 100px;
            padding: 10px 16px;
            border-radius: 70px;
            font-size: 12px;
            text-align: center;
        }














/*** Navbar ***/

.navbar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-dark .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #ffffff;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
    position: relative; /* Required for pseudo-elements */
    transition: color 0.3s, background-color 0.3s, border-radius 0.3s, font-weight 0.3s; /* Smooth transition */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #ee0d60 !important; /* Ensure color is white for active and hover state */
    font-weight: bold; /* Apply bold font weight */
}

/* Subrayado para el estado activo 
.navbar-dark .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.3s;
}

*/

.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link.active::after {
    background-color: white; /* Change the underline color to white */
}

/* Ajustes específicos para el dropdown */
.navbar-dark .navbar-nav .dropdown-menu .dropdown-item::after {
    display: none; /* Deshabilitar subrayado para los elementos del dropdown */
}

.navbar-dark .navbar-nav .dropdown-item.active {
    font-weight: bold;
    color: #ffffff !important;
}

.navbar-dark .navbar-nav .dropdown-item.active::after {
    background-color: white; /* Subrayado solo para elementos activos dentro del dropdown */
}

@media (max-width: 991.98px) {
    .navbar-dark .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }
}

.navbar2 {
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar2-dark .navbar2-nav .nav2-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #ffffff;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar2-dark .navbar2-nav .nav2-link:hover,
.navbar2-dark .navbar2-nav .nav2-link.active {
    color: #ffffff !important; /* Ensure color is white for active and hover state */
    font-weight: bold; /* Apply bold font weight */
}

@media (max-width: 991.98px) {
    .navbar2-dark .navbar2-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }
}

#navbar-scroll .navbar-nav {
    align-items: center; /* Alinea verticalmente los elementos */
    padding-right: 0; /* Ajusta según sea necesario */
}

#navbar-scroll .nav-link {
    padding: 0.5rem 1rem; /* Reduce el padding para disminuir el tamaño */
}














/* CSS añadido para ocultar inicialmente el navbar */
/*
.navbar-scrolling {
    display: none;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1030; /* Asegúrate de que el z-index sea suficientemente alto */
 /* } */

 .navbar-scroll {
    display: none;
    /* Otros estilos necesarios para tu navbar secundaria */
  }







/*** Header Carrusel ***/

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: auto; /* Cambiar de height: 100% a height: auto para mantener la proporción */
        object-fit: cover;
        object-position: center; /* Centrar imagen */
    }
}

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(15, 23, 43, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}

.booking {
    position: relative;
    margin-top: -100px !important;
    z-index: 1;
}










/*** Section Title ***/
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::before {
    position: absolute;
    content: "";
    width: 45px;
    height: 2px;
    top: 50%;
    left: -55px;
    margin-top: -1px;
    background: var(--primary);
}

.section-title::after {
    position: absolute;
    content: "";
    width: 45px;
    height: 2px;
    top: 50%;
    right: -55px;
    margin-top: -1px;
    background: var(--primary);
}

.section-title.text-start::before,
.section-title.text-end::after {
    display: none;
}


/*** Service ***/

.service .nav-link.active, .service .nav-link:active {
    background-color: #0000ffa8 !important; /* Azul Bootstrap */
    color: #ffffff !important; /* Texto blanco para contraste */
}

.service .nav-link.active, .service .nav-link:active,
.service .nav-link.active h5, .service .nav-link:active h5,
.service .nav-link.active i, .service .nav-link:active i {
    background-color: #007bff !important; /* Azul Bootstrap */
    color: #ffffff !important; /* Texto blanco para contraste */
}




.service-item {
    height: 320px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
    transition: .5s;
}

.service-item:hover {
    background: var(--primary);
}

.service-item .service-icon {
    margin: 0 auto 30px auto;
    width: 65px;
    height: 65px;
    transition: .5s;
}

.service-item i,
.service-item h5,
.service-item p {
    transition: .5s;
}

.service-item:hover i,
.service-item:hover h5,
.service-item:hover p {
    color: #FFFFFF !important;
}


/*** Youtube Video ***/
.video {
    position: relative;
    height: 100%;
    min-height: 1000px;
    background: linear-gradient(rgba(15, 23, 43, .1), rgba(15, 23, 43, .1)), url(../img/video4.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.video .btn-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 18px 20px 18px 28px;
}

.video .btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
}

.video .btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    transition: all 200ms;
}

.video .btn-play img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
}

.video .btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid var(--dark);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

#videoModal {
    z-index: 99999;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
} 

/*** video nuevo youtube--------------------------------------------------------------------------------------------------------- ***/

.custom-video-height {
    width: 100%;
    max-width: 560px; /* Ajusta este valor según necesites */
}

.video-container {
    position: relative;
    padding-bottom: 85%; /* Ajusta este valor para aumentar la altura */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Añadir borde redondeado al contenedor de video */
.container-xxl .video-container {
    border-radius: 0 40px 40px 0; /* Ajusta los valores según tus necesidades */
}


/* Añadir borde redondeado solo al contenedor de texto con la clase custom-rounded */
.custom-rounded {
    border-radius: 40px 0 0 40px; /* Ajusta los valores según tus necesidades */
}

/* Estilo para el contenedor con fondo azul */
.bg-blue {
    background-color: #b5d1eb; /* Cambia el color según tus necesidades */
    width: 100%;
}





/*** Testimonial ***/
.testimonial {
    background: linear-gradient(rgba(15, 23, 43, .7), rgba(15, 23, 43, .7)), url(../img/bnc1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.testimonial-carousel {
    padding-left: 65px;
    padding-right: 65px;
}

.testimonial-carousel .testimonial-item {
    padding: 30px;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 100%;
    height: 40px;
    top: calc(50% - 20px);
    left: 0;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: var(--primary);
    border-radius: 2px;
    font-size: 18px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--primary);
    background: #FFFFFF;
}


/*** Team ***/
.team-item,
.team-item .bg-primary,
.team-item .bg-primary i {
    transition: .5s;
}

.team-item:hover {
    border-color: var(--secondary) !important;
}

.team-item:hover .bg-primary {
    background: var(--secondary) !important;
}

.team-item:hover .bg-primary i {
    color: var(--secondary) !important;
}

.testimonial-text {
    position: relative;
    background-color: white;
    color: black;
    padding: 4rem; /* Ajusta el padding según necesites */
    margin-bottom: 4rem; /* Ajusta el margen según necesites */
    border-radius: 100px; /* Aumenta para bordes más redondeados */
    font-size: 1rem; /* Ajusta el tamaño de fuente según necesites */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: añade sombra para efecto de elevación */
    z-index: 1;
}

/* Para el triángulo, ajusta según la nueva forma */
.testimonial-text::after {
    content: "";
    position: absolute;
    bottom: -13px; /* Ajusta según la altura del triángulo */
    left: 10%; /* Centra el triángulo bajo el contenedor */
    transform: translateX(-50%); /* Asegura que el triángulo quede centrado */
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FFFFFF; /* Color de fondo del contenedor para que coincida */
}

/*** Testimonial 2 ***/





/*** Footer ***/
.newsletter {
    position: relative;
    z-index: 1;
}

.footer {
    position: relative;
    margin-top: -110px;
    padding-top: 180px;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}









/*=============================
	Start Schedule CSS
===============================*/
.schedule {
	background: #fff;
	margin: 0;
	padding: 0;
	height: 230px;
}
.schedule .schedule-inner {
	position: relative;
	transform: translateY(-50%);
	z-index:9;
}

.schedule .single-schedule {
	position: relative;
	text-align: left;
	z-index:3;
	border-radius:10px;
	background-image:  url('../img/sch11.jpg');
	background-size: cover;
	background-position: center;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s;
}

.schedule .single-schedule .inner {
	overflow:hidden;
	position: relative;
	padding:30px;
	z-index:2;
}
.schedule .single-schedule:before{
	position: absolute;
    z-index: -1;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background:#1A76D1;
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule:hover:before{
	opacity: 0.8;
}
.schedule .single-schedule:hover{
	transform: translateY(-5px);
}
.schedule .single-schedule .icon i{
	position: absolute;
	font-size: 110px;
	color: #000000;
	 -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
	z-index:-1;
	visibility:visible;
	opacity:0.2;
	right: -25px;
	bottom: -30px;
}
.schedule .single-schedule span{
	display:block;
	color:#fff;
}
.schedule .single-schedule h4{
	font-size: 20px;
	font-weight:600;
	display:inline-block;
	text-transform:capitalize;
	color:#fff;
	margin-top:13px;
}
.schedule .single-schedule p{
	color:#fff;
	margin-top:22px;
}
.schedule .single-schedule a {
	color: #fff;
	margin-top: 25px;
	font-weight: 500;
	display: inline-block;
	position: relative;
}
.schedule .single-schedule a:before{
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	height:1px;
	width:0%;
	background:#fff;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.schedule .single-schedule a:hover:before{
	width:100%;
	width:100%;
}
.schedule .single-schedule a i{
	margin-left:10px;
}
.schedule .single-schedule .time-sidual{
	
}
.schedule .single-schedule .time-sidual{
	overflow:hidden;
	margin-top:17px;
}
.schedule .single-schedule .time-sidual li {
	display: block;
	color: #fff;
	width: 100%;
	margin-bottom:3px;
}
.schedule .single-schedule .time-sidual li:last-child{
	margin:0;
}
.schedule .single-schedule .time-sidual li span{
	display:inline-block;
	float:right;
}
.schedule .single-schedule .day-head .time {
	font-weight: 400;
	float: right;
}


/*-------------2----------------------------------------------------------------------------------------------------------------*/

.schedule .single-schedule2 {
	position: relative;
	text-align: left;
	z-index:3;
	border-radius:10px;
	background-image: url('../img/sch22.jpg');
	background-size: cover;
	background-position: center;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s;
}

.schedule .single-schedule2 .inner {
	overflow:hidden;
	position: relative;
	padding:30px;
	z-index:2;
}
.schedule .single-schedule2:before{
	position: absolute;
    z-index: -1;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background:#1A76D1;
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule2:hover:before{
	opacity: 0.8;
}
.schedule .single-schedule2:hover{
	transform: translateY(-5px);
}
.schedule .single-schedule2 .icon i{
	position: absolute;
	font-size: 110px;
	color: #fff;
	 -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
	z-index:-1;
	visibility:visible;
	opacity:0.2;
	right: -25px;
	bottom: -30px;
}
.schedule .single-schedule2 span{
	display:block;
	color:#fff;
}
.schedule .single-schedule2 h4{
	font-size: 20px;
	font-weight:600;
	display:inline-block;
	text-transform:capitalize;
	color:#fff;
	margin-top:13px;
}
.schedule .single-schedule2 p{
	color:#fff;
	margin-top:22px;
}
.schedule .single-schedule2 a {
	color: #fff;
	margin-top: 25px;
	font-weight: 500;
	display: inline-block;
	position: relative;
}
.schedule .single-schedule2 a:before{
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	height:1px;
	width:0%;
	background:#fff;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.schedule .single-schedule2 a:hover:before{
	width:100%;
	width:100%;
}
.schedule .single-schedule2 a i{
	margin-left:10px;
}
.schedule .single-schedule2 .time-sidual{
	
}
.schedule .single-schedule2 .time-sidual{
	overflow:hidden;
	margin-top:17px;
}
.schedule .single-schedule2 .time-sidual li {
	display: block;
	color: #fff;
	width: 100%;
	margin-bottom:3px;
}
.schedule .single-schedule2 .time-sidual li:last-child{
	margin:0;
}
.schedule .single-schedule2 .time-sidual li span{
	display:inline-block;
	float:right;
}
.schedule .single-schedule2 .day-head .time {
	font-weight: 400;
	float: right;
}






/*-------------3----------------------------------------------------------------------------------------------------------*/

.schedule .single-schedule3 {
	position: relative;
	text-align: left;
	z-index:3;
	border-radius:10px;
	background-image: url('../img/sch33.jpg');
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/caba3.jpg');*/
	background-size: cover;
	background-position: center;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s;
}

.schedule .single-schedule3 .inner {
	overflow:hidden;
	position: relative;
	padding:30px;
	z-index:2;
}
.schedule .single-schedule3:before{
	position: absolute;
    z-index: -1;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background:#1A76D1;
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule3:hover:before{
	opacity: 0.8;
}
.schedule .single-schedule3:hover{
	transform: translateY(-5px);
}
.schedule .single-schedule3 .icon i{
	position: absolute;
	font-size: 110px;
	color: #fff;
	 -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
	z-index:-1;
	visibility:visible;
	opacity:0.2;
	right: -25px;
	bottom: -30px;
}
.schedule .single-schedule3 span{
	display:block;
	color:#fff;
}
.schedule .single-schedule3 h4{
	font-size: 20px;
	font-weight:600;
	display:inline-block;
	text-transform:capitalize;
	color:#fff;
	margin-top:13px;
}
.schedule .single-schedule3 p{
	color:#fff;
	margin-top:22px;
}
.schedule .single-schedule3 a {
	color: #fff;
	margin-top: 25px;
	font-weight: 500;
	display: inline-block;
	position: relative;
}
.schedule .single-schedule3 a:before{
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	height:1px;
	width:0%;
	background:#fff;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.schedule .single-schedule3 a:hover:before{
	width:100%;
	width:100%;
}
.schedule .single-schedule3 a i{
	margin-left:10px;
}
.schedule .single-schedule3 .time-sidual{
	
}
.schedule .single-schedule3 .time-sidual{
	overflow:hidden;
	margin-top:17px;
}
.schedule .single-schedule3 .time-sidual li {
	display: block;
	color: #fff;
	width: 100%;
	margin-bottom:3px;
}
.schedule .single-schedule3 .time-sidual li:last-child{
	margin:0;
}
.schedule .single-schedule3 .time-sidual li span{
	display:inline-block;
	float:right;
}
.schedule .single-schedule3 .day-head .time {
	font-weight: 400;
	float: right;
}

.btn-custom-hover {
    background-color: white; /* Color de fondo inicial */
    color: black; /* Color de texto inicial */
    border-radius: 10px;
    width: 200px;
    height: 50px;
    transition: background-color 0.3s, color 0.3s; /* Transición suave de colores */
}

.btn-custom-hover:hover {
    background-color: #007bff; /* Cambiar al color azul de Bootstrap por ejemplo */
    color: white; /* Cambiar el color de texto a blanco */
}






/* Estilos específicos para el modal de la calculadora */

.modal-dialog {
    max-width: 1000px; /* Ajusta el tamaño según tus necesidades */
    width: 100%;
    margin: auto; /* Centra el modal horizontalmente */
    top: 30%; /* Centra el modal verticalmente */
    transform: translateY(-30%); /* Ajusta el modal para estar centrado verticalmente */
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-header, .modal-footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.modal-footer .btn-secondary {
    margin-left: auto; /* Alinea el botón "Cerrar" a la derecha */
}

.modal-body .btn {
    margin-top: 20px; /* Espaciado entre el texto y el botón */
}



/* container desk------------------------------------------------------------------------- */

.container-desk {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto; /* Centrar horizontalmente */
}

.box-desk {
    display: flex;
    align-items: left;
    justify-content: left;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 20px 30px; /* Incrementa el padding */
    margin: 15px 0; /* Incrementa el margen */
    background-color: #fff;
    transition: box-shadow 0.3s ease;
    text-align: left;
}

.box-desk:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.icon-desk {
    font-size: 25px; /* Incrementa el tamaño de la fuente del icono */
    color: #e6007e;
    margin-right: 20px; /* Incrementa el margen derecho */
}

p.desk {
    margin: 0;
    font-size: 35px; /* Incrementa el tamaño de la fuente */
    line-height: 1.5;
}

strong.desk {
    font-weight: bold;
}


/* Asegura    ------------------------------------------------------------------------- */

.asegura-btn-primary {
    background-color: #2e5c8e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 22px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.asegura-btn-primary:hover {
    background-color: #0056b3;
}

.asegura-btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 22px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.asegura-btn-secondary:hover {
    background-color: #5a6268;
}






/* SIMULADOR   ------------------------------------------------------------------------- */

.simulador-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 60%;
    max-width: 800px;
    margin: auto;
}

.valores-variables-simulador {
    flex: 1;
    margin-right: 20px;
}

.slider-container-simulador {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="range"] {
    width: 100%;
}

.resultado-simulador {
    flex: 1;
    text-align: center;
}

.cuota-simulador {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
}

.botones-simulador {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.botones-simulador button {
    padding: 10px 20px;
    border: none;
    color: white;
    cursor: pointer;
}

.botones-simulador button:first-child {
    background-color: #1f4e7c;
}

.botones-simulador button:last-child {
    background-color: #e91e63;
}



















.module-card {
    padding: 20px;
    border: 2px solid #ddd; /* Incrementa el grosor del borde */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 10px; /* Añade bordes redondeados */
}

.module-card:hover {
    background-color: #00649B; /* bg-dark color */
    color: #fff;
}

.module-card:hover h5,
.module-card:hover p {
    color: #fff; /* Cambia el color del texto a blanco al hacer hover */
}

.module-card h5 {
    margin-top: 10px;
}

.module-card p {
    margin-top: 5px;
    color: #6c757d; /* Secondary text color */
}

.module-card .icon {
    font-size: 40px;
}

.custom-img {
    margin-top: -265px; /* Ajusta el margen superior según sea necesario */
    margin-right: -30px; /* Ajusta el margen derecho según sea necesario */
    width: 80%; /* Ajusta el tamaño de la imagen */
    max-width: 250px; /* Tamaño máximo de la imagen */
}

.title {
    font-size: 2.5rem; /* Tamaño del título */
    color: #000000; /* Secondary text color */
}

.subtitle {
    font-size: 1.25rem; /* Tamaño del texto */
    color: #6c757d; /* Color del texto */
}















.articles-container {
    text-align: center;
}

.articles-container h1 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #00649B; /* Cambia este color según tu preferencia */
}

.article-link {
    text-decoration: none;
    color: inherit;
}

.article {
    display: inline-block;
    width: 300px;
    margin: 0 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.article:hover {
    transform: scale(1.05);
}

.article img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.article:hover img {
    transform: scale(1.1);
}

.article p {
    padding: 15px;
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin: 0;
}












/*--------------------------------------------------------------
# Featured Services
--------------------------------------------------------------*/
.featured-services .icon-box {
    padding: 30px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
  }
  
  .featured-services .icon-box::before {
    content: "";
    position: absolute;
    background: #cbe0fb;
    right: 0;
    left: 0;
    bottom: 0;
    top: 100%;
    transition: all 0.3s;
    z-index: -1;
  }
  
  .featured-services .icon-box:hover::before {
    background: #106eea;
    top: 0;
    border-radius: 0px;
  }
  
  .featured-services .icon {
    margin-bottom: 15px;
  }
  
  .featured-services .icon i {
    font-size: 48px;
    line-height: 1;
    color: #106eea;
    transition: all 0.3s ease-in-out;
  }
  
  .featured-services .title {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
  }
  
  .featured-services .title a {
    color: #111;
  }
  
  .featured-services .description {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
  }
  
  .featured-services .icon-box:hover .title a,
  .featured-services .icon-box:hover .description {
    color: #fff;
  }
  
  .featured-services .icon-box:hover .icon i {
    color: #fff;
  }

  .featured-services .section-title {
    text-align: center;
  }

  .featured-services .icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .featured-services .section-title h2,
.featured-services .section-title h3,
.featured-services .section-title p {
  text-align: center;
}

.featured-services .section-title {
    text-align: center;
  }

  .featured-services .icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }



  .custom-dropdown {
    background-color: white;
    color: black;
}
.custom-dropdown .dropdown-item {
    color: black;
}
.custom-dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
}









.unique-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px;
}

.unique-main-title {
    font-size: 2.5em;
    color: #0056b3;
    font-weight: bold;
    text-align: left;
    line-height: 1.2; /* Ajusta la altura de línea para mejor espaciado */
}

.unique-highlight {
    color: #e6002b;
    font-weight: bold;
}

.unique-feature {
    margin-bottom: 20px;
}

.unique-feature-title {
    font-size: 1.5em;
    color: #0056b3;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.unique-feature-title i {
    margin-right: 10px;
    color: #0056b3;
}

.unique-feature p {
    font-size: 1em;
    color: #333;
}

/* Aumentar el tamaño de la línea que contiene "tus sueños" */
.unique-main-title .unique-line {
    font-size: 1.5em;
}









/*--------------------------------------------------------------
# modal containers creditos
--------------------------------------------------------------*/


.modal-container {
    padding: 20px 0;
}
.modalcont .icon-box {
    padding: 10px;
    text-align: center;
}
.modalcont .icon-box img {
    width: 15px; /* Ajuste del tamaño de la imagen */
    height: 15px; /* Ajuste del tamaño de la imagen */
}


















/* Estilos del contenedor del collage */


/* Estilos del contenedor del collage */
.collage-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ajusta el número de columnas según necesites */
    gap: 10px;
}

.collage-item {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.collage-item img:hover {
    opacity: 1;
}

/* Estilos para el modal con nombres únicos */
.unique-modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.unique-modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.unique-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}














/* Estilo para el contenedor general */
.card-container {
    display: flex;
    gap: 20px;
    justify-content: center;
  }
  
  /* Estilo para cada tarjeta */
  .custom-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    width: 220px; /* Reducir el ancho del contenedor */
    text-align: center;
    transition: all 0.3s ease-in-out;
    color: black;
  }
  
  /* Estilo del título en cada tarjeta */
  .custom-card h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  /* Justificación del texto */
  .custom-card p {
    font-size: 15px; /* Reducir un poco el tamaño de la fuente */
    line-height: 1.6; /* Aumentar el interlineado */
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto; /* Permitir la división de palabras */
  }
  
  /* Efecto al pasar el cursor por encima */
  .custom-card:hover {
    background-color: #5271ff;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }














  
/* Efecto de hover en los contenedores del modal de la calculadora con las imagenes de luis */

/* Cambiar imagen al pasar el mouse sobre el primer contenedor en el modal */
.modal-icon-1:hover img {
    content: url('http://localhost/Gega/assets/img/cpt.png'); /* Imagen de hover para el primer contenedor del modal */
}

/* Cambiar imagen al pasar el mouse sobre el segundo contenedor en el modal */
.modal-icon-2:hover img {
    content: url('http://localhost/Gega/assets/img/brt.png'); /* Imagen de hover para el segundo contenedor del modal */
}

/* Cambiar imagen al pasar el mouse sobre el tercer contenedor en el modal */
.modal-icon-3:hover img {
    content: url('http://localhost/Gega/assets/img/cat.png'); /* Imagen de hover para el tercer contenedor del modal */
}

  






































/*=============================
	End Schedule CSS
===============================*/