/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:sans-serif;
}

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

.top-header{
    width:100%;
    position:relative;
    z-index:1000;
    
}

/* ==========================
   PROFILE BAR
========================== */

.profile-bar{

    background:#095550;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 40px;

}
.logo a{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#fff;

    font-size:22px;

    font-weight:bold;

}

.logo img{

    width:55px;

    height:55px;

    object-fit:contain;

}

.logo span{

    line-height:1.4;

}

.welcome{

    font-size:18px;

}

.account-btn{

    text-decoration:none;

    color:#fff;

    background:#D4AF37;

    padding:10px 18px;

    border-radius:8px;

    transition:.3s;

    font-weight:bold;

}

.account-btn:hover{

    background:#c89f1d;

}

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

.navbar{

    background:#053734;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

    position:relative;

}
.nav-logo{

    display:flex;

    align-items:center;

    justify-content:center;

}

.nav-logo img{

    width:90px;

    height:90px;

    object-fit:contain;

}
/* ==========================
   LINKS
========================== */

.nav-links{

    display:flex;

    list-style:none;

    gap:5px;

}

.nav-links li{

    position:relative;

}

.nav-links li a{

    display:block;

    padding:20px 18px;

    color:#fff;

    text-decoration:none;

    transition:.3s;

    font-size:17px;

}

.nav-links li a:hover{

    color:#D4AF37;

}

/* underline animation */

.nav-links>li>a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:10px;

    width:0;

    height:2px;

    background:#D4AF37;

    transition:.3s;

    transform:translateX(-50%);

}

.nav-links>li>a:hover::after{

    width:70%;

}

/* ==========================
   DROPDOWN
========================== */

.dropdown-menu{

    position:absolute;

    right:0;

    top:100%;

    background:#fff;

    list-style:none;

    min-width:220px;

    border-radius:10px;

    overflow:hidden;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.3s;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li a{

    color:#053734;

    padding:15px;

}

.dropdown-menu li a:hover{

    background:#f5f5f5;

    color:#20bf6b;

}

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

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:#fff;

    font-size:30px;

    cursor:pointer;

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

    .profile-bar{

        flex-direction:column;

        gap:15px;

        text-align:center;

        padding:20px;

    }

    .navbar{

        padding:15px 20px;

        flex-wrap:wrap;

    }

    .menu-toggle{

        display:block;

    }

    .nav-links{

        display:none;

        flex-direction:column;

        width:100%;

        margin-top:20px;

        background:#053734;

    }

    .nav-links.active{

        display:flex;

    }

    .nav-links li{

        width:100%;

    }

    .nav-links li a{

        padding:18px;

        border-top:1px solid rgba(255,255,255,.08);

    }

    .dropdown-menu{

        position:static;

        opacity:1;

        visibility:visible;

        transform:none;

        display:none;

        background:#074742;

        box-shadow:none;

        border-radius:0;

    }

    .dropdown.active .dropdown-menu{

        display:block;

    }

    .dropdown-menu li a{

        color:#fff;

        padding-right:35px;

    }

}

@media(max-width:600px){

    .logo a{

        font-size:20px;

    }

    .welcome{

        font-size:15px;

    }

    .nav-logo{

        font-size:20px;

    }

}