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

header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

.navbar{

    width:90%;
    max-width:1200px;

    margin:auto;

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

    padding:20px 0;

}

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

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    width:60px;
    height:60px;
    object-fit:cover;
    margin-right:12px;

}

.logo h2{

    color:white;
    font-size:28px;
    margin:0;

}

/* =========================================
   MENU
========================================= */

.nav-links{

    display:flex;
    align-items:center;
    list-style:none;

}

.nav-links li{

    margin-left:35px;

}

.nav-links a{

    color:white;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    position:relative;
    transition:.3s;

}

/* =========================================
   HOVER EFFECT
========================================= */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:2px;

    background:#ff9800;

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

.nav-links a:hover{

    color:#ff9800;

}

/* =========================================
   ACTIVE PAGE
========================================= */

.nav-links a.active{

    color:#ff9800;

}

.nav-links a.active::after{

    width:100%;

}

/* =========================================
   HAMBURGER
========================================= */

.menu-btn{

    display:none;

    font-size:30px;

    color:white;

    cursor:pointer;

}

/* =========================================
   STICKY NAVBAR
========================================= */

header.sticky{

    position:fixed;

    background:#111;

    box-shadow:0 5px 15px rgba(0,0,0,.2);

    animation:slideDown .4s ease;

}

header.sticky .navbar{

    padding:15px 0;

}

/* =========================================
   ANIMATION
========================================= */

@keyframes slideDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}