/* Main Header */
.main-header{ width: 240px; min-width: 240px; height: auto; padding-bottom: 30px; margin-bottom: 50px; left: 20px; top: 40px; position: sticky; border-radius: 15px; background: rgba(0,0,0,.5); box-shadow: 0 4px 30px rgba(0,0,0,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--transition); }
.main-header .content{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; height: 100%; padding: 0; } 

.main-header .logo{ color: var(--yellow); text-decoration: none; font-weight: bold; display: block; width: 100%; padding: 30px 30px 10px; position: relative; margin-bottom: 20px; }
.main-header .logo img{ width: 120px; }
.main-header .logo:after{ content: ""; width: 100%; height: 2px; background: var(--grey-222); display: block; margin-top: 20px; }
.main-header .logo span{ display: block; font-size: 14px; color: var(--white-aaa); font-family: var(--poppins); position: absolute; top: 55px; left: 158px; font-weight: 600; }

.main-header nav{ font-family: var(--poppins); width: 100%; overflow-y: auto; max-height: calc(100vh - 230px); }
.main-header nav ul{ display: flex; flex-direction: column; width: 100%; padding: 0 10px; }
.main-header nav ul li{ width: 100%; margin-bottom: 5px; }
.main-header nav ul li a{ text-decoration: none; color: var(--white); font-weight: 600; padding: 13px 15px 13px 25px; font-size: 16px; transition: var(--transition); display: flex; width: 100%; align-items: center; border-radius: 10px; position: relative; }
.main-header nav ul li a:before{ content: ""; width: 4px; height: 15px; background: var(--white); display: inline-block; position: absolute; left: 10px; top: 13px; transition: var(--transition); border-radius: 2px; opacity: .1; }
.main-header nav ul li a:hover{ background: var(--grey-111); }
.main-header nav ul li a i{ font-size: 20px; width: 20px; min-width: 20px; text-align: center; height: 20px; display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 5px; top: 50%; margin-top: -10px; opacity: 0; transition: var(--transition);  }
.main-header nav ul li a:hover i{ opacity: .6; right: 10px; }
.main-header nav ul li.active > a{ color: var(--yellow); background: var(--grey-111); }
.main-header nav ul li.active > a i{ opacity: 1; right: 10px; }
.main-header nav ul li.active > a:before{ opacity: 1; background: var(--yellow); }

.main-header nav::-webkit-scrollbar{ width: 8px; background: transparent; }
.main-header nav::-webkit-scrollbar-thumb{ background: var(--grey-222); border-radius: 8px; }
.main-header nav{ scrollbar-width: thin; scrollbar-color: var(--grey-222) transparent; }

/* Submenu */
.main-header nav ul li .sub-menu{ max-height: 0; overflow: hidden; transition: all var(--transition); padding: 0; padding-left: 5px; margin-top: 5px; }
.main-header nav ul li .sub-menu.active{ max-height: 500px; }
.main-header nav ul li.menu-expand.open .ti-chevron-down{ transform: rotate(180deg); }
.main-header nav ul li.menu-expand.active .ti-chevron-down{ right: 10px; transform: rotate(180deg); }
.main-header nav ul li.menu-expand.open.active .ti-chevron-down{ transform: rotate(0); }
.main-header nav ul li.menu-expand.open > a:before{ background: var(--yellow); opacity: 1; }
.main-header nav ul li .sub-menu li a{ line-height: 1.4; font-size: 13px; padding-right: 35px; }

/* Header Mobile */
.mobile-header{ width: 100%; height: 60px; background: #080808; position: fixed; top: 0; left: 0; z-index: 9999; display: none; }
.mobile-header .content{ height: 100%; display: flex; justify-content: space-between; width: 100%; align-items: center; }

.mobile-header .logo{ color: var(--yellow); text-decoration: none; font-weight: bold; display: inline-block; position: relative; }
.mobile-header .logo img{ width: 80px; }
.mobile-header .logo span{ display: block; font-size: 12px; color: var(--white-aaa); margin-top: 5px; font-family: var(--poppins); position: absolute; top: 9px; right: -23px; font-weight: 600; }

.mobile-header .hamburger{ width: 25px; height: 20px; position: relative; }
.mobile-header .hamburger span{ display: block; height: 3px; background: var(--white-aaa); margin-bottom: 6px; border-radius: 20px; }

/* Close Mobile Menu */
.close-mobile-menu{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 9999; opacity: 0; visibility: hidden; transition: var(--transition); }
    

@media screen and (max-width: 1279px) {

    /* Main Header */
    .main-header{ transform: translateX(-280px); z-index: 99999; background: var(--grey-111); position: fixed; height: 100%; top: 0; left: 0; border-radius: 0; box-shadow: 0 0 10px rgba(0,0,0,.1); }
    .main-header.menu-open{ transform: translateX(0); }
    
    /* Header Mobile */
    .mobile-header{ display: block; }
    .mobile-header .content{ padding: 0 20px; }

    /* Close Mobile Menu */
    .close-mobile-menu.show{ opacity: 1; visibility: visible; }

}