/* Importamos la fuente Poppins */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
    --color-base: #9e0e11;

}

body{
    font-family: 'Roboto', sans-serif;
    margin: 0 auto;
    scroll-behavior: smooth;
}

/* iniciamos CSS Header*/
.va-header::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #00000077 100%, #000000 100%), url(../images/landscape-1.jpg);
    background-size: cover;
    z-index: -1;
  }

.navbar {
    font-family: 'Poppins', sans-serif; /* Aplica la fuente Poppins a la barra de navegación */
    font-weight: 500;
}

.frase{
    width: 100%;
    height: 100%;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.btn-transparent {
    background-color: transparent;
    border: none;
    color: #ffffff; /* Puedes cambiar el color del texto según tu preferencia */
}

.bg-transparent {
    background-color: transparent !important;
}

.second{
    margin-top: 200px;
    text-align: center;
    margin-bottom: 2rem;
    font-family: 'Roboto', sans-serif;
}

.third{
    height: 400px;
    margin-top: 5rem;
    text-align: center;
    margin-bottom: 50px;
}

.logos-container{
    display: flex;
    justify-content: space-around; /* Distribuir los logotipos de forma equitativa */
    align-items: center; /* Alinear verticalmente los logotipos */
}

.img-seg{
    width: auto; /* Ancho de las imágenes */
    height: 100px; /* Altura automática para mantener la proporción */
}

.card {
    background-color: rgba(255, 255, 255, 5%); /* Fondo blanco con 15% de opacidad */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    text-align: center; /* Alineación del contenido */
    margin: 10px; /* Márgenes entre las tarjetas */
    transition: all 0.3s ease; /* Transición suave para los efectos */
}

.card:hover {
    transform: scale(1.05); /* Efecto de escala al pasar el mouse */
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.097); /* Sombra al pasar el mouse */
}


.mt-custom {
    margin-top: 20px; /* Equivale a 3 en términos de tamaño de fuente de Bootstrap */
}

.dropdown-wrapper {
    margin-right: 20px;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 5px;
  }
  
.dropdown {
    border: none;
    border-radius: 20px;
    background-color: rgb(255 255 255 / 26%);;
    color: #ffffff;
    padding: 15px 20px;
    font-weight: bold; /* Añade estilo bold al texto dentro de los dropdown */
  }
  
.dropdown option {
    /* Aplica estilo bold a las opciones dentro del dropdown */
    color: var(--color-base); /* Cambia el color del texto de las opciones */
    background-color: transparent;
  }
  

.dropdown-label {
    display: block;
    margin-top: auto;
    color: #ffffff;
    margin-bottom: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: bold; /* Añade estilo bold al texto arriba de los dropdown */
  }

@keyframes slide {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
       
    }
}

.logos{
    overflow: hidden;
    padding: 60px 0 0 0;
    background: white;
    white-space: nowrap;
    position: relative;

}


.logos:before, .logos:after{
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}

.logos:before{
    left: 0;
    background: linear-gradient(to left, rgba(255,255,255,0), white);
}

.logos:after{
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), white);
}


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

.logos-slide img{
    height: 100px;
    margin: 0 40px;
}




@media (max-width: 991px) {
    .dropdown-wrapper {
        margin-right: 20px;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 5px;
      }

    #offcanvasNavbar {
        background-color: rgba(106, 106, 106, 0.574);
        backdrop-filter: blur(5px);
    }

    .frase{
        width: 75%;
        height: 75%;
        margin-top: 1rem;
        margin-bottom: 3rem;
        padding-left: 5rem;
    }

    .second{
        margin-top: 100px;
        text-align: center;
    }

    .logos-slide img{
        height: 50px;
        margin: 0 20px;
    }

    .img-seg{
        width: 75px; /* Ancho de las imágenes */
        height: 30px; /* Altura automática para mantener la proporción */
    }

    .third{
        height: 200px;
        margin-top: 5rem;
        text-align: center;
    }
    
    body {
    background-position: bottom right; /* Cambia la posición del fondo a la esquina inferior derecha en dispositivos móviles */
    }
  

}

@media (max-width: 760px) {
    .dropdown-wrapper {
        margin-right: 20px;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 5px;
      }

    #offcanvasNavbar {
        background-color: rgba(106, 106, 106, 0.574);
        backdrop-filter: blur(5px);
    }

    .frase{
        width: 75%;
        height: 75%;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-left: 5rem;
    }

    .second{
        margin-top: 50px;
        text-align: center;
    }

    .logos-slide img{
        height: 50px;
        margin: 0 20px;
    }

    .third{
        height: 200px;
        margin-top: 5rem;
        text-align: center;
    }

    .img-seg{
        width: 75px; /* Ancho de las imágenes */
        height: 30px; /* Altura automática para mantener la proporción */
    }
    
    body {
    background-position: bottom right; /* Cambia la posición del fondo a la esquina inferior derecha en dispositivos móviles */
    }
  
    
}