#main-header{background:hsla(0,0%,100%,.2);border:1px solid #fff;border-radius:10px;left:0;margin:1% auto 0;position:relative;top:0;transition:all .4s ease-in-out;width:90%;z-index:999}.header-container{align-items:center;display:flex;justify-content:space-between;padding:15px 25px}#logo{height:50px;transition:all .4s ease-in-out}.nav ul{gap:20px}#main-header.scrolled{background:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,.1);margin:0 auto;padding-left:5%;padding-right:5%;position:fixed;top:0;width:100%}.nav a{color:#fff;font-weight:500;text-decoration:none;transition:color .3s}#main-header.scrolled .nav a{color:#333}.nav a:hover{color:#ff9800}.menu-toggle{background:none;border:none;cursor:pointer;display:none;flex-direction:column;gap:5px;z-index:1001}.menu-toggle span{background:#fff;border-radius:2px;display:block;height:3px;transition:all .3s ease;width:25px}.nav ul{display:flex;gap:25px;list-style:none;margin:0;padding:0}.nav li{display:inline-block}@media (max-width:768px){.menu-toggle{display:flex}.nav{background:#fff;box-shadow:-2px 0 10px rgba(0,0,0,.1);height:100%;padding:20px;position:fixed;right:0;top:70px;transform:translateX(100%);transition:transform .3s ease;width:70%}.nav ul{flex-direction:column;gap:15px}.nav.open{transform:translateX(0)}.nav a{color:#333!important;font-size:18px}}.menu-toggle.active span:first-child{transform:rotate(45deg) translateY(8px)}.menu-toggle.active span:nth-child(2){opacity:0}.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translateY(-8px)}