/* WhatSapp - BEGIN */
/* Estilos para el botón flotante de WhatsApp */
.btn-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    border-radius: 50%;
    padding: 15px;
    transition: transform 0.3s ease;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.btn-whatsapp:hover {
    transform: scale(1.1); /* Efecto al pasar el ratón */
}

/* Estilo del ícono de WhatsApp */
.whatsapp-icon {
    /* width: 50px;
    height: 50px; */
    width: 40px;
    height: 40px;
}
/* WhatSapp - END */

/* Asegúrate de que la sección de bienvenida no quede oculta detrás de la barra fija, ajusta el alto del header. */
#bienvenida {
    padding-top: 56px !important;
    padding-bottom: 0px !important;    
}


.footer-text {
    /* font-size: 16px;          Cambia el tamaño de la fuente */
    /* color: #f1f1f1;           Cambia el color del texto */
    /* font-style: italic;       Cambia el estilo de la fuente */
    margin: 0;                /* Quita cualquier margen por defecto */
}


/* Tamaño de los iconos seccion servicios */
.service-icon {
    font-size: 80px;
    margin-top: 20px; /* Puedes ajustar el valor según lo necesites */
    color: #4da3d4 !important;
}


/* ============================================================ */

        /* Solo ajustamos el padding-top en el body para que las secciones no se solapen con la navbar */
        body {
            padding-top: 74px; /* Ajuste para compensar la altura de la navbar fija */
        }
        /* Estilos adicionales para personalizar */
        .mission-section {
            padding: 5px 0;  /* Espaciado superior e inferior */
        }
        .mission-text {
            display: flex;
            flex-direction: column;
            justify-content: center;  /* Centra el texto verticalmente */
            /* height: 100%;  Asegura que ocupe el 100% de la altura de la columna */
        }
        .mission-image {
            display: flex;  /* Añadir flexbox aquí */
            justify-content: center; /* Centra la imagen en su columna */
            align-items: center; /* Centra la imagen verticalmente */
            height: 100%;  /* Asegura que ocupe el 100% de la columna */
            overflow: hidden;  /* Esconde cualquier parte de la imagen que sobresalga del borde redondeado */
            border-radius: 15px;  /* Redondea los bordes de la imagen */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra suave alrededor de la imagen */
            transition: all 0.3s ease-in-out; /* Transición suave para el hover */
        }
        .mission-image:hover {
            /* transform: scale(1.05);  Efecto de zoom al pasar el mouse */
            transform: scale(1.01);  /* Efecto de zoom al pasar el mouse */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al pasar el mouse */
        }
        .mission-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Asegura que la imagen cubra todo el espacio */
            border-radius: 15px; /* Redondea los bordes de la imagen */
        }

        /* Cambiar el color de los iconos Font Awesome dentro de .card-body */
        .card-body ul li i {
            color: #25d366; /* Aquí puedes cambiar el color a cualquier valor o código hexadecimal */
        }


        /* ======================================= */
        /* Estilo general de la tarjeta */
        .service-card {
            border-radius: 10px; /* Bordes redondeados en la tarjeta */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para hover */
        }

        /* Efecto hover para la tarjeta */
        .service-card:hover {
            transform: translateY(-5px); /* Sube ligeramente la tarjeta */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra más intensa al pasar el ratón */
        }

        /* Estilo para el icono */
        /* .service-icon {
            font-size: 4rem; Tamaño grande para el icono
            color: #4da3d4; Color azul inicial
            transition: color 0.3s ease; Transición suave en el color del icono
        } */

        /* Efecto hover para el icono */
        /* .service-icon:hover {
            color: #ff6347; Cambia a color naranja al pasar el ratón
        } */


/* =========================================================== */
/* Estilo general para la sección */
.services-section {
    width: 100%; /* Asegura que la sección ocupe todo el ancho de la página */
    padding: 60px 0; /* Espaciado superior e inferior */
    background-color: #f8f9fa; /* Fondo gris claro para la sección */
    text-align: center; /* Centra todo el contenido de la sección */
}

/* Estilo para la primera línea (logotipo) */
.services-section .logo img {
    max-width: 300px; /* Ajusta el tamaño del logotipo */
    height: auto; /* Mantiene las proporciones del logotipo */
}

/* Estilo para la segunda línea (título) */
.services-section .section-title {
    font-size: 2.5rem; /* Tamaño grande para el título */
    font-weight: bold; /* Negrita para el título */
    color: #343a40; /* Color gris oscuro */
    margin-top: 20px; /* Espaciado superior para separar del logotipo */
}

/* Estilo para la tercera línea (slogan) */
.services-section .slogan {
    font-size: 1.2rem; /* Tamaño de texto más pequeño para el slogan */
    color: #6c757d; /* Color gris claro */
    margin-top: 15px; /* Espaciado superior para separar del título */
}

/* =============================== */

/* En tu archivo styles.css */
.custom-bg {
    background-color: #4da3d4 !important;
}


/* Elimina el padding-top y padding-bottom */
.custom-padding-integral-services {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Elimina el padding-top y padding-bottom */
.custom-padding {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}



/* Aplicar margin-top solo en pantallas pequeñas (menos de 768px) */
@media (max-width: 767px) {
    #mission-title {
        margin-top: 24px;
    }
    #services-title {
        margin-top: 24px;
    }
    #div-services {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
}

.custom-card-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* TESTIMONIOS */
/* Estilo para los botones de navegación */
/* Estilo para los botones de navegación */
.carousel-control-prev, 
.carousel-control-next {
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    position: absolute; /* Posicionamiento absoluto */
    top: 50%; /* Centrarlos verticalmente */
    transform: translateY(-50%); /* Ajusta la posición vertical */
}

/* Posicionamiento específico para el botón de la izquierda */
.carousel-control-prev {
    left: 0; /* Pegado al borde izquierdo */
}

/* Posicionamiento específico para el botón de la derecha */
.carousel-control-next {
    right: 0; /* Pegado al borde derecho */
}

/* Estilo para los iconos de las flechas */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    background-color: #000; /* Color negro o el que prefieras para las flechas */
}

/* Estilo para los indicadores (puntos) no activos */
.carousel-indicators button:not(.active) {
    background-color: rgba(169, 169, 169, 0.7); /* plomo transparente (gris claro con opacidad) */
    /* Sborder: none; in borde */
}

/* Estilo para el indicador activo (el que está seleccionado) */
.carousel-indicators .active {
    background-color: #4da3d4;
}

/*
.carousel-indicators button:not(.active) {
    background-color: rgba(169, 169, 169, 0.7);
}


.carousel-indicators .active {
    background-color: #4da3d4; 
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: #4da3d4;
}

*/

.justified-text {
    text-align: justify; /* Justificar el texto */
    line-height: 1.5; /* Opcional, para mejorar la legibilidad */
}





/* CLIENTES */
/* Asegura que las imágenes del carrusel tengan un tamaño adecuado */
#clientCarousel .carousel-item img {
    width: 100%;
    height: auto; /* Mantener la relación de aspecto */
}

/* Asegura que las columnas de cada slide se distribuyan uniformemente */
.carousel-item .row {
    display: flex;
    justify-content: space-between; /* Espacio uniforme entre las columnas */
}





/* SECCION CLIENTES */
/* Centrar la imagen dentro del contenedor */
.carousel-item .col-md-3 {
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center;     /* Centra la imagen verticalmente */
}

/* Establecer un tamaño específico para las imágenes */
.logo-img {
    width: 200px;
    height: 200px;
    object-fit: contain; /* Asegura que la imagen se ajuste sin deformarse */
}





/* CONTACT FORM - BEGIN */
#btnEnviar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#respuesta {
    margin-top: 10px;
}
/* CONTACT FORM - END */


/* social networks - begin */
.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px; /* Botón más pequeño */
    height: 35px; /* Mantener la proporción */
    border-radius: 50%; /* Sigue siendo un círculo */
    text-align: center;
    font-size: 16px; /* Reducir el tamaño de los íconos proporcionalmente */
    padding: 6px; /* Ajustar el relleno para los íconos */
    transition: all 0.3s ease;
    text-decoration: none; /* Eliminar subrayado de los enlaces */
}

.social-btn i {
    color: white; /* Color blanco para los íconos */
}

.social-btn:hover {
    opacity: 0.8; /* Efecto al pasar el ratón */
}

.facebook-btn {
    background-color: #3b5998;
}

.twitter-btn {
    background-color: #1da1f2;
}

.instagram-btn {
    background-color: #e4405f;
}

.social-btn:not(:last-child) {
    margin-right: 6px; /* Ajustar el margen entre los botones */
}
/* social networks - end */