/*==============================
HEADER
==============================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    padding:22px 0;

    transition:all .35s ease;

    background:rgba(0,0,0,.25);

    backdrop-filter:blur(12px);

}

/* Lè pita nou ajoute JavaScript,
   klas .scrolled ap aktive otomatikman */

.header.scrolled{

    background:rgba(17,17,17,.95);

    padding:16px 0;

    box-shadow:0 10px 30px rgba(0,0,0,.20);

}

/*==============================
CONTAINER
==============================*/

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*==============================
LOGO
==============================*/

.logo{

    font-family:var(--font-title);

    font-size:32px;

    font-weight:700;

    color:var(--gold);

    letter-spacing:1px;

}

.logo span{

    color:white;

}

/*==============================
NAVIGATION
==============================*/

.navigation ul{

    display:flex;

    align-items:center;

    gap:35px;

}

.navigation li{

    position:relative;

}

.navigation a{

    color:white;

    font-size:15px;

    font-weight:500;

    transition:var(--transition);

    padding-bottom:6px;

}

/* Ligne animée */

.navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:var(--gold);

    transition:var(--transition);

}

.navigation a:hover{

    color:var(--gold);

}

.navigation a:hover::after{

    width:100%;

}

/*==============================
ACTIVE LINK
==============================*/

.navigation a.active{

    color:var(--gold);

}

.navigation a.active::after{

    width:100%;

}

/*==============================
LOGIN BUTTON
==============================*/

.btn-login{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:150px;

    padding:14px 28px;

    background:var(--gold);

    color:white;

    border-radius:var(--radius-md);

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 10px 25px rgba(201,162,39,.30);

}

.btn-login:hover{

    background:var(--gold-dark);

    transform:translateY(-3px);

}

/*==============================
MOBILE BUTTON
==============================*/

.menu-toggle{

    display:none;

    cursor:pointer;

    font-size:28px;

    color:white;

}