/* Estilos para el widget de Google Translate */
#google_translate_element {
    display: none; /* Oculta completamente el elemento */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000; /* Asegura que el widget esté encima del contenido */
}

.goog-te-gadget img {
    display: none !important;
}

body > .skiptranslate {
    display: none !important;
}

body {
    top: 0px !important;/*oculto el error del espacio blanco en el top*/
    font-family: 'Exo', sans-serif;
}
.navbar {
    background-color: #000;
    position: absolute;
    top: 35px;
    width: 100%;
    z-index: 2000;
}

.navbar a {
    color: #fbda11 !important;
    text-decoration: none; /* Elimina el subrayado predeterminado */
    transition: border-bottom 0.3s ease; /* Agrega una transición suave al subrayado */
    position: relative; /* Permite posicionar el subrayado */
}

.navbar a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px; /* Altura del subrayado */
    bottom: 0;
    left: 0;
    background-color: #fbda11;
    visibility: hidden;
    transform: scaleX(0); /* Inicialmente sin ancho */
    transition: all 0.3s ease;
}

.navbar a:hover::before {
    visibility: visible;
    transform: scaleX(1); /* Ancho completo en el hover */
}
.jumbotron {
    background-color: #fbda11;
    color: #000;
}
.card {
    border: 1px solid #000;
}
.card-body {
    background-color: #fbda11;
    color: #000;
}
.footer {
    background-color: #000;
    color: #fbda11;
    padding: 20px 0;
}        

.footer .col-md-6 {
    padding: 15px;
}

.footer h5 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.footer p {
    margin-bottom: 10px;
    font-size: 18px;
}

.footer p i {
    margin-right: 10px;
    color: #ffffff;
}
.swiper-caption {
    position: absolute;
    bottom: 20%;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    color: #ffffff; /* Color del texto */
    font-size: 40px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 1em;
    text-align: center;
    position: absolute;
    
}
.swiper-container {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Asegura que no haya desbordamiento */
}
/* Ajustes de estilo para las diapositivas dentro del Swiper */
.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 800px; /* Altura personalizada para las diapositivas */
}

/* Estilos para la imagen dentro de .swiper-slide */
.swiper-slide img {
    display: block;
    width: 100vw; /* Ancho del 100% del viewport width */
    height: 100%;
    object-fit: cover; /* Ajuste de la imagen manteniendo la relación de aspecto */
    max-height: 800px; /* Altura máxima de 600px */
    object-position: left 25%; /* Mostrar la parte superior de la imagen */
}

/* Estilos para pantallas pequeñas (altura al 600px) */
@media (max-width: 767px) {
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 550px; /* Altura personalizada para las diapositivas */
    }            
    /* Estilos para la imagen dentro de .swiper-slide */
    .swiper-slide img {
        width: 100vw; /* Ancho del 100% del viewport width */
        height: 100%;
        object-fit: cover; /* Ajuste de la imagen manteniendo la relación de aspecto */
        max-height: 550px; /* Altura máxima de 600px */
        object-position: 0%; /* 0 = extremo izquierda, 100 = extremo derecha */
    }
}        
/* Estilos para el botón flotante */
.floating-buttons {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior de la pantalla */
    right: 20px; /* Distancia desde el lado derecho de la pantalla */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.floating-buttons a, .floating-buttons button {
    display: block;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%; /* Hace que el botón sea circular */
    margin-bottom: 10px; /* Espacio entre botones */
    text-decoration: none;
    font-size: 24px;    
    border: none; /* Sin borde para el botón */
    cursor: pointer; /* Cambia el cursor a puntero para el botón */
    padding: 0; /* Elimina el relleno por defecto del botón */
    outline: none; /* Elimina el contorno por defecto del botón */
}

.whatsapp-button {
    background-color: #25d366; /* Color de fondo del botón de WhatsApp */
}

.scroll-top-button {
    background-color: #007bff; /* Color de fondo del botón de scroll hacia arriba */
}

.traductor-button {
    background-color: #4c8bf5; /* Color de fondo del botón de scroll hacia arriba */
}

.floating-buttons a:hover, .floating-buttons button:hover {
    opacity: 0.8; /* Reduce la opacidad al pasar el ratón por encima */
}
.info_container {
    position: relative;
    width: 100%;
    height: 900px; /* ajusta la altura según necesites */
    background-image: url('imgs/refacciones2.webp'); /* reemplaza 'ruta/de/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover;
    background-position: center;
}

.info_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(251, 218, 17, 0.75); /* color de la capa con opacidad */
}

.info_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* ancho del contenido */
    color: black; /* color del texto */
    text-align: center;
}

.info_text {
    padding: 20px;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  Define la sombra del texto */
}

.info_text h2 {
    font-size: 26px;
    margin-bottom: 10px;
}

.info_text p {
    font-size: 18px;
    line-height: 1.5;
}
/* Estilos para dispositivos móviles */
@media (max-width: 767px) {
    .info_container {
        height: 800px; /* Ajusta la altura del contenedor para dispositivos móviles */
    }
    .info_content {
        width: 90%; /* Reducir el ancho del contenido para dispositivos móviles */
    }

    .info_text {
        padding: 10px; /* Reducir el espacio de relleno para dispositivos móviles */
        text-shadow: none; /* Eliminar la sombra del texto en dispositivos móviles */
    }

    .info_text h2 {
        font-size: 20px; /* Reducir el tamaño del título para dispositivos móviles */
        margin-bottom: 5px; /* Reducir el espacio inferior del título */
    }

    .info_text p {
        font-size: 16px; /* Reducir el tamaño del texto para dispositivos móviles */
        line-height: 1.3; /* Ajustar la altura de línea para mejorar la legibilidad */
    }
}
/* Estilos personalizados para el dropdown */
.dropdown-menu {
    background-color: #fbda11;
}
.dropdown-item {
    color: black !important;
}
.dropdown-item:hover {
    background-color: #fbc823 !important;
    color: black !important;
}
.dropdown-item:focus {
    background-color: #fbc823 !important;
    color: black !important;
}
/* Fuerza a todos los enlaces dentro del dropdown a ser negros */
.dropdown-menu a {
    color: black !important;
}        
/* Asegúrate de que el modal esté por encima de todo */
.modal {
    z-index: 2001; /* Aumentar el z-index si es necesario */
}

.btn-xl {
    font-size: calc(1.25rem * 1.4); /* Aumenta un 40% el tamaño de fuente */
    padding: calc(0.5rem * 1.4) calc(1rem * 1.4); /* Aumenta el padding un 40% */
    border-radius: calc(0.3rem * 1.4); /* Ajusta el border-radius si lo deseas */
}

/* Estilos específicos para el div con la clase optica1967 */
.optica1967 {
    background-color: #fbda11;
    color: #000;
    font-family: Arial, sans-serif;
    padding: 20px;            
}

.optica1967 h1 {
    color: #fff;
    font-size: 3rem;
    margin-bottom: 20px;
    /* Agrega sombra al texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.optica1967 p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 15px;
}
.optica1967 .hand-image {
    margin-top: -20px;
    width: 60%;
    height: auto;
}
/* Estilos para las columnas adicionales */
.custom-column {
    background-color: #ebebeb;          
    position: relative;            
}

/* Imagen centrada en la segunda columna */
.centered-image {
    display: block;
    margin: 0 auto;
}

.image-container-oftalmologo {
    width: 100%;
    padding-top: 100%; /* Mantiene la relación de aspecto cuadrada */
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 5px solid #ffd700; /* Color del borde amarillo */
    margin: auto;
}

.image-container-oftalmologo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title-container-oftalmologo {
    background-color: #ffd700; /* Color de fondo amarillo */
    padding: 10px;
    border-radius: 10px;
}

.title-container-oftalmologo h2 {
    margin: 0;
}

.list-oftalmologo {
    position: relative;
    padding-right: 20px;
    list-style: none;
}

.list-oftalmologo:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #ffd700; /* Color de la línea vertical amarilla */
}

.list-oftalmologo li {
    margin-bottom: 10px;
}

.list-optometrista {
    position: relative;
    padding-left: 20px;
    list-style: none;
}

.list-optometrista:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #ffd700; /* Color de la línea vertical amarilla */
}

.list-optometrista li {
    margin-bottom: 10px;
}
.carousel-container {
    background-color: #ebebeb;
    padding: 20px 0;
}
.carousel-container img {
    display: block;
    margin: auto;
}  
.item-custom {
    background-color: black;
    color: white;
    padding: 5px 20px; /* Padding más discreto */
    margin: 5px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: inline-block; /* Limita el ancho al tamaño del texto */
    text-align: center;
    font-weight: 900;
}

/* Tamaño por defecto para pantallas grandes */
.navbar-logo {
    height: 45px; /* Tamaño para pantallas grandes */
    width: auto;
    padding: 5px;
}

/* Tamaño reducido para pantallas medianas */
@media (max-width: 992px) {
    .navbar-logo {
        height: 40px; /* Ajusta el tamaño en pantallas medianas */
    }
}


.info_containerPro {
    position: relative;
    width: 100%;
    height: 370px; /* ajusta la altura según necesites */
    background-image: url('imgs/cintillo.jpg'); /* reemplaza 'ruta/de/tu/imagen.jpg' con la ruta de tu imagen */
    background-size: cover;
    background-position: center;
}

.info_overlayPro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(42, 175, 207, 0.8);*/
    background: linear-gradient(to right, #9ea0ae, #7e8394);
   /* background-color:gray;*/
}

.info_contentPro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* ancho del contenido */
    color: black; /* color del texto */
    text-align: center;
}