.progress-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--menu-bg);
  z-index: 10;
}

.progress-bar {
  position: relative;
  height: 2px;
  background: var(--theme-color);
  width: 0%;
}
nav{
    box-sizing: border-box;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    transition: 0.6s;
    padding: 40px 0;
    z-index:8;
    font-size: 1.2em;
}

nav .menu {
  max-height: 0;
  transition: max-height .2s ease-out;
  text-transform: uppercase;
}
nav .logo{
    position: relative;
    padding: 12px 12px;
    transition: all ease-in-out 0.6s;
}
nav .logo img{
    position: relative;
    width: 120px;
    transition: 0.6s;
}
nav ul{
      position: relative;
      margin: 0;
      padding: 0;
      padding-left: 0;
      overflow: hidden;
}
nav ul li{
    position: relative;
    list-style: none;
    display: block;
    width: 100%;
    text-align: left;
}
.special{
  display: none;
}
.special a{
  background: var(--theme-color);
  border: 4px solid var(--theme-color);
  padding: 10px 12px;
  color: var(--theme-color);
  border-radius: 6px;
}
.special a:hover{
  background: transparent;
  color: var(--theme-color);
}
.special::after{
  background: transparent!important;
}

nav ul li a{
      position: relative;
      text-decoration: none;
      display: block;
      white-space: nowrap;
      padding: 20px 4px;
      color: var(--menu-color);
      font-weight: 500px;
      transition: 0.6s;
}
nav ul li a:hover{
  color: var(--theme-color);
}
nav .menu-btn{
    border-bottom: 4px solid transparent;
}
.menu li::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    bottom:0;
    z-index:10;
    background: var(--theme-color);
    transform: scale(0,1);
    transition: transform 0.6s ease;
}
.menu li:hover::after{
    transform: scale(1,1);
}
nav.sticky{
    background: var(--menu-bg);
    padding: 10px 0;
}
nav.sicky .logo img{
    width: 120px;
}
/* menu icon */

nav .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

nav .menu-icon .nav-icon {
  background: var(--menu-color);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

nav .menu-icon .nav-icon:before,
nav .menu-icon .nav-icon:after {
  background: var(--menu-color);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .menu-icon .nav-icon:before {
  top: 5px;
}

nav .menu-icon .nav-icon:after {
  top: -5px;
}

/* menu btn */

nav .menu-btn {
  display: none;
}

nav .menu-btn:checked ~ .menu {
  max-height: 280px;
} 

nav .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}

nav .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}

nav .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}
@media (min-width: 950px) {
    /* Top Menu */
      nav{
          display: flex;
          justify-content: space-around;
          align-items: center;
      }
      nav .logo{
          padding: 12px 40px;
      }
      nav ul{
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      nav ul li{
          text-align: center;
      }
      
      .special{
        display: block;
      }
      nav ul li:last-child{
          margin-right: 40px;
      }
      nav li::after{
          width: 0%;
          transition: all ease-in-out 1s;
          border-bottom: 1px solid transparent;
      }
      nav ul li a{
        margin: 0 20px;
      }
      nav .menu {
          max-height: none;
      }
      nav .menu-icon {
          display: none;
      }
}