/* =========================================
   GLASSMORPHISM EFFECTS
========================================= */

.glass-card{

    background: rgba(255,255,255,0.06);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 24px;

    box-shadow:
    0 8px 32px rgba(0,0,0,0.25);

}


.glass-navbar{

    background: rgba(7,3,15,0.55);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255,255,255,0.08);

}


.glass-footer{

    background: rgba(10,5,20,0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-top: 1px solid rgba(255,255,255,0.08);

}


.glass-input{

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.08);

    color: var(--white);

    border-radius: 14px;

    padding: 14px 18px;

}


.glass-input:focus{

    border-color: var(--accent-violet);

    box-shadow: var(--purple-shadow);

    background: rgba(255,255,255,0.08);

    color: var(--white);

}


.glass-btn{

    background: var(--button-gradient);

    border: none;

    color: var(--white);

    padding: 14px 28px;

    border-radius: 14px;

    font-weight: 600;

    transition: 0.4s ease;

    box-shadow: var(--purple-shadow);

}


.glass-btn:hover{

    transform: translateY(-4px);

    box-shadow:
    0 15px 40px rgba(193,75,255,.45);

    color: var(--white);

}


.glass-outline-btn{

    background: rgba(255,255,255,0.06);

    border: 1px solid rgba(255,255,255,0.12);

    color: var(--white);

    padding: 14px 28px;

    border-radius: 14px;

    transition: 0.4s ease;

}


.glass-outline-btn:hover{

    background: rgba(255,255,255,0.12);

    color: var(--white);

    transform: translateY(-4px);

}


.glass-icon{

    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: rgba(255,255,255,0.08);

    color: var(--accent-violet);

    font-size: 28px;

    box-shadow: var(--purple-shadow);

}


.glass-hover{

    transition: 0.4s ease;

}


.glass-hover:hover{

    transform: translateY(-10px);

    box-shadow:
    0 25px 60px rgba(193,75,255,.35);

}


.glass-border{

    border: 1px solid rgba(255,255,255,0.08);

}


.glass-blur{

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

}   