@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain/Zain-ExtraLight.ttf') format('truetype');
    font-weight: 200;
}

@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain/Zain-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain/Zain-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain/Zain-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain/Zain-ExtraBold.ttf') format('truetype');
    font-weight: 800;
}

@font-face {
    font-family: 'Zain';
    src: url('../fonts/Zain/Zain-Black.ttf') format('truetype');
    font-weight: 900;
}

* {
    font-family: 'Zain', sans-serif;
}

/* Estilos para el efecto glassmorphism */
.glassmorphism {
    background: rgba(100, 149, 237, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 2px solid rgba(65, 105, 225, 0.5) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px 0 rgba(25, 25, 112, 0.4) !important;
    transition: all 0.4s ease-in-out !important;
    padding: 14px !important;
}

/* Estilos para la transición de salida del glassmorphism */
.glassmorphism-out {
    background: rgba(100, 149, 237, 0) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    border: 2px solid rgba(65, 105, 225, 0) !important;
    border-radius: 8px !important;
    box-shadow: 0 0px 0px 0 rgba(25, 25, 112, 0) !important;
    transition: all 0.4s ease-in-out !important;
    padding: 0px !important;
}

@media (max-width: 1280px) {
    #menu-container {
        background: rgba(100, 149, 237, 0.4) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 2px solid rgba(65, 105, 225, 0.5) !important;
        border-radius: 8px !important;
        box-shadow: 0 8px 32px 0 rgba(25, 25, 112, 0.4) !important;
        transition: all 0.4s ease-in-out !important;
        padding: 14px !important;
    }
    #menu-container.glassmorphism-out {
        background: rgba(100, 149, 237, 0.4) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 2px solid rgba(65, 105, 225, 0.5) !important;
        box-shadow: 0 8px 32px 0 rgba(25, 25, 112, 0.4) !important;
        padding: 14px !important;
    }
}