.logos{
    width: 200px;
}
.bg-servicios{
    border-top: 3px solid #01B7F9;

}
/*logo slider*/
.logo-slider {
    overflow: hidden;
    padding: 30px 0 0 0;
    white-space: nowrap;
    position: relative;
}

.logo-slider:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 45s slide infinite linear;
}

.logos-slide img {
    width: 100px;
    height: 100px;
    margin: 0 40px;
}
.icon-servicios{
    width: 12%;
    padding-bottom: 10px;
}
.container-nopadding{
    padding: 0px !important;
}
.navbar-light .navbar-toggler{
    background-color: #01B7F9;
    border: 1px solid #01B7F9;
    color: #fff;
}
.navbar-light .navbar-toggler:hover{
    background-color: #01B7F9;
    border: 1px solid #01B7F9;
    color: #fff
}
nav ul li a:hover{
    border-bottom: 2px solid #01B7F9;
}
nav ul li a:active{
    border-bottom: 2px solid #01B7F9;
}
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}
/* Slider sin contenedor que limite el ancho */

        /* Las imágenes del slider ocuparán todo el ancho disponible y tendrán una altura fija de 500px */
        .carousel-item img {
            width: 100%;      /* Ocupa el 100% del ancho disponible */
            height: 500px;    /* Establece una altura fija de 500px */
            object-fit: cover; /* Asegura que la imagen cubra completamente el área sin deformarse */
        }
       
        .carousel-caption {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-align: center;
            z-index: 10;
        }

        .carousel-caption h2 {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .btn-custom {
            background-color: #E7D336;
            color: black;
            border-radius: 10px;
            padding: 10px 25px;
            font-size: 1.1rem;
            border: none;
            text-decoration: none !important;
        }
        .btn-custom:hover{
            background-color: #B4A003;
            color: #fff;
            text-decoration: none;
        }
       .btn-custom:active {
            background-color: #B4A003; /* Color de fondo al hacer clic */
            color: #fff;               /* Color de texto al hacer clic */
            text-decoration: none;
        }

        .btn-custom:hover {
            background-color: #c6b229;
        }

        .section-bg {
            background-color: #f2f2f2;
        }
        .tab-pane{
            background-color: #fff;
            padding: 30px;
            border-radius: 10px 0px 0px 10px;
            margin-top: 10px;
            border-right: 2px solid #01B7F9 !important;
        }
        .tab-pane h4{
            color: #141515;
            border-left: 3px solid #01B7F9;
            padding-left: 5px;
        }
        .accordion>.card>.card-header{
            background-color: #f2f2f2;
            padding: 10px 0px;
        }
        .card-body h4{
            color: #141515;
            border-left: 3px solid #01B7F9;
            padding-left: 5px;
        }
        .logo{
            width: 50%;
        }
        .card{
            background-color: transparent !important;
            background-clip: none;
            border:none;
        }
        .card-body{
            background-color: #fff;
            border-radius: 10px;
        }
        .card-header{
            border-bottom: none;
            background-color:none;
        }
        .card-header{
            background-color: transparent;
            border-radius: 10px;
            padding: 10px 0px;
        }

         /* Estilos generales para el tab vertical */
        .nav-tabs {
            flex-direction: column; /* Alineación vertical por defecto */
        }

        /* Estilos generales para el menú */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /*footer*/
        .logo-footer{
            width: 30%;
        }
        footer {
          background-color: #343a40;
          border-top:3px solid #01B7F9;
        }
        footer h5{
            color:#01B7F9;
        }

        footer a:hover {
          text-decoration:none;
          color:#01B7F9;
        }
        .list-unstyled li a{
            color: #fff;
        }
        .list-unstyled li a:hover{
            color: #01B7F9;
            border-left: solid 4px #01B7F9;
            padding-left: 5px;
        }


        /* En pantallas pequeñas (menores de 576px), el menú debe ser colapsado y el botón de menú debe ser visible */
        @media (max-width: 575.98px) {
            .navbar-toggler {
                display: block; /* Asegura que el botón de menú (hamburger) sea visible */
                margin-left: auto; /* Alinea el botón a la derecha */
            }
            
            .navbar-nav {
                display: none; /* Oculta los enlaces del menú */
                width: 100%;
                text-align: center;
                margin-top: 10px;
            }

            .navbar-collapse.show .navbar-nav {
                display: block; /* Muestra los enlaces cuando el menú está abierto */
            }

            .nav-item {
                padding: 10px 0;
            }

            .navbar-brand {
                margin-right: auto; /* Alinea el logotipo a la izquierda */
            }
            .carousel-caption{
                width: 80%;
                top:70%;
            }
             .carousel-caption h2 {
                font-size: 1.3rem;
                font-weight: bold;
                margin-bottom: 20px;
            }
            .container{
                padding: 30px;
            }
            .logo-footer{
            margin-bottom:30px;
            }
            .carousel-caption{
                top:40%;
                left:10% !important;

            }
        }

        /* Para pantallas medianas (>= 768px), el menú debe ser horizontal */
        @media (min-width: 768px) {
            .navbar-nav {
                display: flex; /* Muestra los enlaces de forma horizontal */
                justify-content: flex-end; /* Alinea los enlaces a la derecha */
            }

            .navbar-toggler {
                display: none; /* Oculta el botón de menú en pantallas medianas y grandes */
            }

            .navbar-collapse {
                display: flex !important; /* Asegura que el contenido del menú se muestre */
                justify-content: flex-end; /* Los elementos del menú se alinean a la derecha */
            }
        }


        /* Animación de desvanecimiento y deslizamiento desde abajo */
        .carousel-caption {
            position: absolute;
            bottom: 20%;
            left: 30%;
            right:30%;
            transform: translateX(-50%);
            animation: slideInUp 2s ease-out forwards;
            color: #fff;
            text-align: center;
        }

        /* Definir la animación de desvanecimiento y deslizamiento */
        @keyframes slideInUp {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }