/* ============== TABLE OF CONTENTS ============== */

/* 1. HEADER - NAVBAR

/* =============================================== */


/* || 1. HEADER - NAVBAR */

.header {
	width: 100%;
	background-color: #202125; /* Dark blue */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 10px 20px;
}

.header__logo img {
	display: block;
	width: 80px;
}

.header__nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.header__nav-link {
	display: inline-block;
	color:  #ffad00; /* Orange */
	font-weight: 600;
	padding-bottom: 1px;
}

.header__nav-link:hover {
	padding-bottom: 1px;
    border-bottom: 2px solid #feae01; /* Dark orange */
}

.header__nav__icons,
.header__nav-icon {
	color: #fff; /* White */
}

.notification {
	position: relative;
}

.badge {
	position: absolute;
    top: -14px;
	right: -7px;
    padding: 1px 4px;
    border-radius: 50%;
	background-color: #ffad00; /* Orange */
    color: #fff; /* White */
	font-size: 12px;
	font-weight: 700;
}

a[title="My profile"]:hover,
a[title="User guide"]:hover,
.notification:hover {
	color: #ebebeb; /* Light Grey */
}

.notification:hover .badge {
	background-color: #F98C1E; /* Dark orange */
}

.nav-link-transparent {
	border-bottom: 2px solid transparent;
}