/* nav */
.navbar {
    position: fixed;

    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    width: 75%;
    padding: 14px 28px;

    z-index:9999;

    display: flex;
    justify-content: space-between;
    align-items: center;

    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 3px solid rgba(255, 255, 255, 0);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.238);

    border-radius: 24px;
}

.nav-links a{

    position:relative;

    font-size:10pt;

    color:var(--text);

    text-decoration:none;

    padding:10px 22px;

    transition:.3s ease;
}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.3s ease;
}


.nav-links a:hover{

    color:var(--accent);

}

.nav-links a:hover::after{

    width:100%;
}


.nav-links{

    display:flex;

    list-style:none;

    gap:5px;
}


 /* btn theme mode */

 .theme-btn{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:var(--text);

    cursor:pointer;

    transition:.3s;

    gap: 10px;
}

.theme-btn:hover{

    transform:scale(1.1);

    box-shadow: 0 0 15px rgba(255,255,255,.3);
}

.theme-btn i{
    transition:transform .5s ease;
}
/* wwhen click */
.theme-btn:hover i{
    transform: rotate(180deg);
}

/* when hover */
.theme-btn i.rotate{
    transform: rotate(360deg);
}

:root{

--nav-bg:

rgba(255,255,255,.08);

--nav-border:

rgba(255,255,255,.1);

}

.logo{

    font-size:15pt;

    font-weight:700;

}


.first-name{

    color:#14e1fc;

}


.last-name{

    color:rgba(13, 213, 220, 0.917);
}


/* nav actions */
.nav-actions{

    display:flex;

    align-items:center;

    gap:12px;
}

.lang-btn{

    min-width:68px;

    height:45px;

    padding:0 16px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    border-radius:14px;

    color:white;

    font-size:10pt;

    font-weight:700;

    background:

    linear-gradient(

        90deg,

        #05fbea,

        #2196f3

    );

    box-shadow:

    0 8px 20px

    rgba(33,150,243,.18);

    transition:

    transform .3s ease,

    opacity .3s ease;

}

.lang-btn:hover{

    transform:

    translateY(-3px);

    opacity:.9;

}

.lang-btn.switching i{

    animation:

    langIconSpin .42s ease;

}

.lang-btn.switching span{

    animation:

    langTextPop .42s ease;

}

@keyframes langIconSpin{

    from{

        transform:

        rotate(0deg);

    }

    to{

        transform:

        rotate(360deg);

    }

}

@keyframes langTextPop{

    0%{

        transform:

        scale(.78);

        opacity:.4;

    }

    100%{

        transform:

        scale(1);

        opacity:1;

    }

}