header.top-menu {
     background: linear-gradient(to right, #eaaec1, #5ac4b2);
     padding: 8px;
     width: 100%;
     position: fixed;
     top: 0;
     z-index: 10;
     box-shadow: -1px 5px 5px -2px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: -1px 5px 5px -2px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: -1px 5px 5px -2px rgba(0, 0, 0, 0.4);
 }


 .top-menu .container {
     height: 100%;
     width: 1100px;
 }

 .logo img {
     height: 40px;
 }

 i.bi {
     font-weight: bold;
 }

 .top-menu a,
 .top-menu a:visited {
     color: var(--h4e-color-white);
 }

 .top-menu a.active {
     color: var(--h4e-color-black);
 }

 .menu-item {
     font-weight: bold;
     margin: 0 5px;
     padding: 8px 16px;
     text-decoration: none;
     color: #000;
 }

 .lang {
     padding: 8px !important;
     border-radius: 999px;
     background-color: rgba(255, 255, 255, 0.5);
 }


 a.menu-item:hover,
 .menu-item.active {
     color: #fff;
     border-radius: 999px;
     background-color: rgba(255, 255, 255, 0.5);
 }


 .login-btn {
     font-size: 0.8em;
     font-weight: bold;
     padding: 6px 16px;
     border-radius: 999px;
     background-color: #f8aebc;
     text-decoration: none;
     color: #000;
 }

 .lang-icon {
     width: 24px;
     height: 24px;
     margin: 0 5px 0 0;
     border-radius: 50%;
     cursor: pointer;
 }

 .hamburger {
     cursor: pointer;
     display: inline-block;
     padding: 10px;
 }

 .hamburger span {
     display: block;
     width: 25px;
     height: 3px;
     background: black;
     margin-bottom: 4px;
 }


 .mobile-menu {
     overflow: hidden;
     background: white;
     transition: max-height 0.4s ease;
     border-radius: 8px;
     position: absolute;
     top: 50px;
     right: 16px;
     width: 220px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     transition: all 0.6s ease;
 }


 .mobile-menu.show {
     display: block;
 }

 .mobile-menu ul {
     margin: 0;
     padding: 0;
     list-style: none;
 }

 .mobile-menu li {
     border-bottom: 1px solid #ddd;
 }

 .mobile-menu a {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     text-decoration: none;
     color: black;
 }

 .mobile-menu a:last-child {
     border-bottom: none;
 }


 footer.hsc {
     background: linear-gradient(to right, #eaaec1, #5ac4b2);
     padding: 8px;
     width: 100%;
     color: #fff;
     /* position: fixed;
      bottom: 0; */
     z-index: 10;
     text-align: center;
 }

 @media (min-width: 768px) {
     .mobile-only {
         display: none !important;
     }

    .top-menu .container {
        width: 100% !important;
    }
 }

 @media (max-width: 767.98px) {
     .desktop-only {
         display: none !important;
     }

    .top-menu .container {
        width: 100% !important;
    }

    .top-menu a,
    .top-menu a:visited{
        color: var(--h4e-color-black);    
    }
 }