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

    .header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  background: #0B132B;
  border-bottom:1px solid rgba(91,192,190,.22);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  position:sticky;
  top:0;
  z-index:1000;
}

    .left{
  display:flex;
  align-items:center;
  gap:18px;
}

    .menu-btn{
  font-size:28px;
  color:#5bc0be;
  cursor:pointer;
  transition:.25s;
}

.menu-btn:hover{
  color:#21d4ff;
}

    .logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    height:58px;
    width:auto;
    display:block;
}

@media (max-width:480px){

.logo img{
    height:44px;
}

}

    .profile-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(
      135deg,
      #5bc0be,
      #00d8ff
  );
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#071229;
  font-size:16px;
  font-weight:bold;
  box-shadow:0 0 10px rgba(91,192,190,.35);
  transition:.25s;
}

.profile-btn:hover{
  transform:scale(1.06);
}

.right{
  display:flex;
  align-items:center;
  gap:12px;
}

.version-switch{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#5bc0be;
  font-size:16px;
  transition:.25s;
}

.version-switch:hover{
  transform:scale(1.06);
}

.right{
  display:flex;
  align-items:center;
  gap:12px;
}