/* Dentro de tu bloque de estilo CSS */

/* Estilo para el título */
h1.display-4 {
    font-family: 'Roboto Condensed', sans-serif; /* Cambia a Roboto Condensed */
    font-weight: bold;
    text-transform: uppercase; /* Convertir texto a mayúsculas */
    font-size: clamp(45px, 6vw, 70px); /* Tamaño de fuente dentro del rango especificado */
}
/* Estilos para la barra de desplazamiento */
/* Estilos para navegadores webkit como Chrome y Safari */
::-webkit-scrollbar {
    width: 5px; /* Ajusta el ancho de la barra de desplazamiento */
}

/* Estilos para la pista de la barra de desplazamiento */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color de fondo de la pista */
}

/* Estilos para el pulgar de la barra de desplazamiento */
::-webkit-scrollbar-thumb {
    background: #888; /* Color del pulgar */
}

/* Estilos para el pulgar de la barra de desplazamiento al pasar el mouse sobre él */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Cambia el color del pulgar al pasar el mouse */
}

        /* Establecer la altura deseada para las imágenes del carrusel */
        .carousel-img {
            height: 770px; /* Ajusta la altura según tus necesidades */
        }

        /* Centrar vertical y horizontalmente el contenido del carrusel en desktop */
        .carousel-caption {
            position: absolute;
            top: 50%;
            
            margin-top: 75px; /* Ajusta la distancia desde la parte superior */
        }

        /* Fondo negro con degradado */
        .carousel-item {
            position: relative;
        }

        .carousel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); /* Ajusta los valores según sea necesario */
            z-index: 1;
        }

        /* Texto blanco en el carrusel */
        .carousel-caption.text-white {
            color: white;
        }
        /* Estilo para los controles previos */
.carousel-control-prev {
    width: 5%; /* Ancho del control */
    left: 0; /* Posicionamiento a la izquierda */
}
 

  
  nav {
    background-color: #e9eaef;
    color: #fff;
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, padding 0.3s ease; /* Agregar transición para una apariencia suave */
  }
 
   
  .scrolled {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

 


/* Estilo para los controles siguientes */
.carousel-control-next {
    width: 5%; /* Ancho del control */
    right: 0; /* Posicionamiento a la derecha */
}

/* Estilo para los iconos de los controles */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #ff0000; /* Color de fondo del icono */
    color: #820606; /* Color del icono */
}

/* Estilo para el texto 'Previous' y 'Next' (sr-only) */
.carousel-control-prev span.sr-only,
.carousel-control-next span.sr-only {
    /* Puedes personalizar el estilo del texto si lo deseas */
    display: none; /* Para ocultar el texto */
}

h1.text-center {
    color: #9c0606; /* Cambia #007bff por tu color azul personalizado */
}
h3.text-center {
    color:#9c0606; /* Cambia #007bff por tu color azul personalizado */
}
body {
    font-family: 'Roboto Slab', sans-serif;
             background-color: #f8f9fa;
            color: #343a40;
        }

        .container {
            margin-top: 5px;
        }

     

        .text-container {
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .lead {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .text-primary {
            color: #007bff;
        }

        .text-justify {
            text-align: justify;
        }
        .container-fluid {
            padding: 50px 15px;
        }

        h1 {
            color: #007bff;
        }

        .card {
            border: none;
            transition: transform 0.3s;
        }

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

        .card-img-top {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .card-body {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .card-title {
            color: #007bff;
        }

        .lead {
            font-size: 16px;
            line-height: 1.6;
        }
        .text-custom-color {
            color: #9c0606 !important; /* Cambia #007bff por tu color azul personalizado */
        }
        .btn-wsp{
            position:fixed;
            width:85px;
            height:60px;
            line-height: 63px;
            bottom:25px;
            right:25px;
            background:#25d366;
            color:#FFF;
            border-radius:100px;
            text-align:center;
            font-size:35px;
            box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
            z-index:100;
            transition: all 300ms ease;
        }
        .btn-wsp:hover{
            background: #02e458;
        }/*
    footer{
        position:fixed;
        background:#14085C;
        width:100%;
        bottom:0;
        left:0;
    }
    footer::before{
        content:'';
        position:absolute;
        left:0;
        top:100px;
        height: 1px;
        width:100%;
        background: #AFAFB6;
    }
    footer .content{
        max-width:1250px;
        margin:auto;
        padding: 30px 40px 40px 40px;;
    }
    footer .content .top{
        display: flex;
        align-items:center;
        justify-content: space-between;
        margin-bottom:50px;
    }
    .content .top .logo-details{
        color:#fff;
        font-size: #fff;
    }
    footer .content .link-boxes{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    footer .content .link-boxes .box{
        width: calc(100% / 5 -10px);
    }
    .content .link-boxes{
        color: #FFF;
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 10px;
        position:relative;
    }
    .link_name::before{
        content: '';
        position: absolute;
        left:0;
        bottom:-2px;
        height: 2px;
        width: 35px;
        background: #fff;
    }
    footer .bottom-details .bottom_text{
        max-width: 1250px;
        margin: auto;
        padding: 20px 40px;
        display:flex;
        justify-content: space-between;
    }
    .bottom-details .bottom_text span, .bottom-details .bottom_text a{
        font-size: 14px;
        font-weight:300;
        color:#fff;
        opacity: 0.8;
        text-decoration: none;
    }
    .bottom-details .bottom_text a:hover{
        opacity: 1;
        text-decoration: underline;
    }
    .bottom-details .bottom_text a{
        margin-right: 10px;
    }
    @media (max-width:900px){
        footer .content .link-boxes{
            flex-wrap: wrap;
        }
    
    footer .content .link-boxes .input-box{
        width: 40%;
        margin-top: 10px;
    }
    }
    @media (max-width:700px){
    footer{
        position: relative;
    }
    footer .content .link-boxes .box{
        width: calc(100% / 3 -10px);

    }
    footer .content .link-boxes .input-box{
        width: 60%;
    }
    .bottom-details .bottom_text span, .bottom-details .bottom_text a{
        font-size: 12px;;
    }
    
    }

        @media only screen and (min-width:320px) and (max-width:768px){
            .btn-wsp{
                width:63px;
                height:63px;
                line-height: 66px;
            }
        }*/
        .protocol-bar-container {
            overflow: hidden;
            width: 100%;
        }
        
        .protocol-bar {
            display: flex;
            animation: desplazar 20s linear infinite;
        }
        
        .protocol-logo {
            margin-right: 10px;
            max-width: 300px; /* Ancho máximo de las imágenes */
            height: auto; /* Altura automática para mantener la proporción */
        }
        
        
        @keyframes desplazar {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }
        
      /* Media queries para dispositivos móviles */
@media only screen and (max-width:500px) {
    /* Reducción del tamaño del logo en la barra de navegación */
    .navbar-brand img {
        height: 70px;
        width: 90px;
    }

    /* Ajuste del tamaño del texto */
    body {
        font-size: 16px;
    }

    /* Ajuste del margen derecho de los elementos de navegación */
    .nav-item {
        margin-right: 20px;
    }

    /* Ajuste del tamaño del carrusel */
    .carousel-img {
        height: 250px;
    }
    h1 {
        font-size: 10px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 16px;
    }

    h6 {
        font-size: 14px;
    }
    .btn-wsp {
        width: 50px; /* Reducción del ancho del botón */
        height: 50px; /* Reducción de la altura del botón */
        bottom: 10px; /* Ajuste de la posición vertical */
        right: 10px; /* Ajuste de la posición horizontal */
    }
    .navbar-brand {
        padding-left: 55px; /* Ajuste del margen interno a la izquierda */
        font-size: 20px; /* Reducción del tamaño de fuente */
    }
}