#menu-header {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  height:100vh;
  background:#fffffff2;
  opacity:0;
  visibility:hidden;
  z-index:100;
  position:fixed;
  top:0;
  left:0;
  right:0;
  transition:opacity .5s ease,visibility .5s ease
  }
  
  #menu-header,.mobnav .menu,.mobnav .menu li {
  padding:0;
  margin:0
  }
  
  #menu-header.activemenu {
  visibility:visible;
  opacity:1
  }
  
  #nav-toggle {
  width:30px;
  height:10px;
  transform:rotate(0deg);
  position:relative;
  cursor:pointer
  }
  
  #nav-toggle span {
  position:absolute;
  height:2px;
  width:100%;
  background:#1b3e61;
  transition:transform .3s ease-in-out,opacity .3s ease-in-out
  }
  
  #nav-toggle span:nth-child(1) {
  transform-origin:left center
  }
  
  #nav-toggle span:nth-child(2) {
  top:8px;
  width:60%;
  left:50%;
  transform:translateX(-50%)
  }
  
  #nav-toggle span:nth-child(3) {
  top:16px;
  transform-origin:left center
  }
  
  #nav-toggle.menuopen span:nth-child(1) {
  transform:rotate(45deg) translateY(0);
  top:-1px;
  left:4px
  }
  
  #nav-toggle.menuopen span:nth-child(2) {
  opacity:0
  }
  
  #nav-toggle.menuopen span:nth-child(3) {
  transform:rotate(-45deg) translateY(0);
  top:20px;
  left:4px
  }
  
  .header * {
  box-sizing:border-box
  }
  
  .header a {
  text-decoration:none;
  transition:color .3s ease-in-out,transform .3s ease-in-out;
  font-size:60.5%;
  font-weight:700
  }
  
  .header img {
  max-width:100%;
  height:auto;
  display:block;
  flex-shrink:0
  }
  
  .mobnav .menu {
  list-style:none;
  text-align:center
  }
  
  .mobnav .menu li {
  font-family:"prometo",sans-serif;
  font-size:1.2rem;
  line-height:2;
  font-weight:500
  }
  
  .mobnav .menu li a {
  color:#1b3761;
  text-decoration:none;
  font-size:1rem;
  transition:color .3s ease,transform .3s ease
  }
  
  .mobnav .menu li::after {
  content:'';
  display:block;
  margin:.5rem auto;
  width:50px;
  height:2px;
  background:#1b3761;
  opacity:0;
  transform:scaleX(0);
  transition:opacity .3s ease,transform .3s ease
  }
  
  .mobnav .menu li:hover a {
  color:#0056b3;
  transform:translateY(-2px)
  }
  
  .mobnav .menu li:hover::after {
  opacity:1;
  transform:scaleX(1)
  }
  
  .nav-ctrl {
  z-index:102;
  margin-left:auto;
  transition:transform .3s ease
  }
  
  .navinner {
  background:#fff;
  width:92%;
  margin:0 auto;
  display:flex;
  align-items:center;
  height:6rem;
  padding:0 2.5rem 0 1.5rem;
  border-radius:2.4rem;
  box-shadow:0 4px 20px #0000001a;
  transition:box-shadow .25s linear
  }
  
  .navinner:hover {
  box-shadow:0 6px 30px #00000026
  }
  
  header {
  z-index:999;
  position:fixed;
  top:1rem;
  left:0;
  right:0;
  transition:transform .3s ease-in-out,opacity .3s ease-in-out
  }
  
  header .logo {
  width:9.6rem
  }
  
  header .nav {
  display:none
  }
  
  header,header.scrolled {
  opacity:1;
  transition:all .6s ease
  }
  
  header.scrolled.scrolldown {
  transform:translateY(-200%);
  opacity:.35
  }
  
  @media only screen and (min-width: 1024px) {
  #menu-header,.nav-ctrl {
  display:none
  }
  
  header .nav {
  display:flex;
  margin-left:auto
  }
  
  header .nav ul {
  display:flex;
  list-style:none
  }
  
  header .nav ul li {
  margin-left:2rem;
  font-family:"prometo",sans-serif;
  font-size:1.2rem
  }
  
  header .nav ul li a {
  color:#1b3761;
  text-decoration:none;
  transition:color .3s ease-in-out
  }
  
  header .nav ul li a:hover {
  color:#0056b3
  }
  }
  
  @media only screen and (min-width: 1440px) {
  header .nav ul li {
  margin-left:3rem
  }
  }
  
  .nav.arabic-font-size ul li a {
  font-size:1.3rem;
  letter-spacing:0;
  line-height:1.8;
  text-align:end;
  font-family:"Tajawal",sans-serif;
  color:#1b3761;
  transition:color .3s ease-in-out
  }
  
  .nav.arabic-font-size ul li a:hover {
  color:#0056b3
  }