#encabezadopg3 {
    background-image: url("/images/mallorc1.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#encabezadopg3 h1 {
    color: #fff;
    font-size: 48px;
    margin-bottom: 20px;
}

#encabezadopg3 p {
    color: #fff;
    font-size: 24px;
    margin: 0;
}

#encabezadopg3 {
    background-image: url("/images/mallorc1.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 80vh; /* Aumenta la altura de la imagen de fondo */
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.arrow-container {
    position: relative;
    bottom: 20px; /* Ajusta la posición vertical de la flecha */
    left: 50%; /* Centra horizontalmente la flecha */
    transform: translateX(-50%); /* Centra la flecha horizontalmente */
}

#flecha {
    width: 150px; /* Ajusta el ancho de la flecha */
    height: 120px; /* Ajusta la altura de la flecha */
    transform: rotate(180deg); /* Rotación de 90 grados (puedes ajustar el ángulo) */
    transition: transform 0.3s; /* Transición suave para el efecto hover */

}

#encabezadopg3 h1 {
    color: #fff;
    font-size: 48px;
    margin-bottom: 10px;
}

#encabezadopg3 p {
    color: #fff;
    font-size: 24px;
    margin: 0;
}

#encabezadopg3 button {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #9ccaff;
    border-radius: 0%;
    padding: 8px 16px;
    font-size: 20px;
    cursor: pointer;
    margin-top: 20px;
    align-self: center;
    transition: background-color 0.3s, color 0.3s;
    animation: infinite parpadeo 0.8s;
    z-index: 10;
}

@keyframes parpadeo {
    0%,100%{
        background-color: transparent;
    }

    20%{
        background-color: red;
    }
    
    40%{
        background-color: #007bff;
    }

    60%{
        background-color: rgb(148, 148, 24);
    }

    80%{
        background-color: purple;
    }
    
}




/* Estilos para pantallas medianas */
@media screen and (max-width: 768px) {
    #encabezadopg3 {
        padding: 50px 0; /* Espaciado reducido en pantallas medianas */
    }

    #encabezadopg3 h1 {
        font-size: 36px; /* Reducción del tamaño de fuente */
    }

    #encabezadopg3 p {
        font-size: 20px; /* Reducción del tamaño de fuente */
    }

    #encabezadopg3 button {
        font-size: 18px; /* Reducción del tamaño de fuente */
    }
}

/* Estilos para pantallas pequeñas */
@media screen and (max-width: 576px) {
    #encabezadopg3 {
        padding: 30px 0; /* Espaciado aún más reducido en pantallas pequeñas */
    }

    #encabezadopg3 h1 {
        font-size: 28px; /* Reducción adicional del tamaño de fuente */
    }

    #encabezadopg3 p {
        font-size: 16px; /* Reducción adicional del tamaño de fuente */
    }

    #encabezadopg3 button {
        font-size: 14px; /* Reducción adicional del tamaño de fuente */
    }
}