@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}
 /* Estilos del parallax */
 .parallax {
    background-image: url('../img/parallax/parallax1.jpeg'); /* Reemplaza con tu imagen */
   height: auto; /* Altura del contenedor parallax */
   background-attachment: fixed; /* Efecto parallax */
   background-position: center; /* Centrar la imagen */
   background-repeat: no-repeat; /* No repetir la imagen */
   background-size: cover; /* Cubrir el contenedor */
   position: relative; /* Para el contenido absoluto */
   overflow: hidden; /* Ocultar contenido que sobresale */
}



/* Capa de color azul marino */
.overlay, .overlay-carrera{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8); /* Azul marino con transparencia */
   z-index: 1; /* Asegurarse de que esté encima del fondo */
}

/* Estilo para el contenido */
.content, .content-carrera {
   position: relative; /* Permitir que el texto esté sobre la capa */
   z-index: 2; /* Asegurarse de que esté encima de la capa */
   color: white; /* Color del texto */
   /*text-align: center; /* Alinear texto al centro */
   padding: 20px; /* Espaciado alrededor del contenido */
}


/* Parallax background */
.parallax-footer {
    background-image: url('../img/parallax/parallax2.webp'); /* Cambia la URL por la imagen que deseas */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Overlay degradado */
.overlay-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)); /* Azul marino degradado */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 50;
    display: none; /* Oculto por defecto */
}

.parallax-carrera {
    background-image: url('../img/parallax/parallax3.jpg'); /* Reemplaza con tu imagen */

   background-attachment: fixed; /* Efecto parallax */
   background-position: center; /* Centrar la imagen */
   background-repeat: no-repeat; /* No repetir la imagen */
   background-size: cover; /* Cubrir el contenedor */
   position: relative; /* Para el contenido absoluto */
   overflow: hidden; /* Ocultar contenido que sobresale */
}

.parallax-carrera-tecnico {
    background-image: url('../img/parallax/parallax4.jpg'); /* Reemplaza con tu imagen */

   background-attachment: fixed; /* Efecto parallax */
   background-position: center; /* Centrar la imagen */
   background-repeat: no-repeat; /* No repetir la imagen */
   background-size: cover; /* Cubrir el contenedor */
   position: relative; /* Para el contenido absoluto */
   overflow: hidden; /* Ocultar contenido que sobresale */
}

.shadow-text {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ajusta el valor según tu preferencia */
}