Global Header: Animated

p {
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
}

.mobile {
  width: 320px;
  height: 568px;
  background-color: blue;
  position: relative;
  overflow: scroll;
}

.nav-wrapper {
  width: 100%;
  height: 60px;
  background-color: white;
  border-bottom: 1px;
  border-style: none none solid none;
  border-color: #EAEAEA;
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 2;

}


.nav-expand {
  width: 100%;
  height: 60px;
  background-color: white;
  transform: scaleY(0);
  transform-origin: top;
  z-index: 0;


}

@keyframes expand-down {
  0%{transform: scaleY(0);}
  100%{transform: scaleY(9.467);}
}

/* Nav Line Item Begin */

.nav-items-wrapper {
  width: 100%;
  height: 100%;
  margin-top: 60px;
  position: absolute;
  z-index: 1;

}

.nav-item {
  width: 100%;
  height: 60px;
  /* background: pink; */
  border-bottom: 1px;
  border-style: none none solid none;
  border-color: #EAEAEA;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;


}

@keyframes fade-in {
  0%{opacity:0;}
  100%{opacity:1;}
}

.nav-item-title-wrapper1 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}

@keyframes translate-fade-in {
  0%{opacity: 0; transform: translateX(-15px)}
  100%{opacity: 1; transform: translateX(0px)}
}


.nav-item-title-wrapper2 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}

.nav-item-title-wrapper3 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}

.nav-item-title-wrapper4 {
  width: 75%;
  height: 100%;
  /* background-color: cadetblue; */
  padding-left: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-15px);



}


.nav-item-title {
  font-size: 18px;
  line-height: 0;
}



.dropdown-icon-wrapper {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateX(-25px);



}

.dropdown-icon-wrapper3 {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateX(-25px);



}

.dropdown-icon {
  width: 20px;
  height: 20px;
}


/* Nav Line Item End */


/* Contact Info Begin */


.contact-wrapper {
  width: 100%;
  height: 364px;
  display: flex;
  align-items: center;
  flex-direction: column;
  opacity: 0;

}

@keyframes fade-in {
  0%{opacity:0;}
  100%{opacity:1;}
}


.hamburger-wrapper {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger-wrapper.hamburger-wrapper--open .line-top {
  animation-name: move-down-rotate;
  animation-duration: .5s;
  transition-timing-function: ease-in;
  animation-fill-mode: forwards;
  transform: translateY(0) rotate(0deg);
}

.hamburger-wrapper.hamburger-wrapper--open .line-middle {
  animation-name: fade;
  animation-duration: .1s;
  animation-fill-mode: forwards;
}

.hamburger-wrapper.hamburger-wrapper--open .line-bottom {
  animation-name: move-up-rotate;
  animation-duration: .5s;
  transition-timing-function: ease-in;
  animation-fill-mode: forwards;
  transform: translateY(0);
  transform: rotate(0deg);
  transform-origin: center center;
}

.nav-expand.nav-expand--open {
  animation: expand-down .23s ease-out forwards;
}

.nav-item.nav-item--open {
  animation: fade-in .20s ease-in .20s forwards;
}

.nav-item-title-wrapper1.title1--open {
  animation: translate-fade-in .25s ease-in .15s forwards;
}

.nav-item-title-wrapper2.title2--open{
  animation: translate-fade-in .25s ease-in .25s forwards;
}

.nav-item-title-wrapper3.title3--open{
  animation: translate-fade-in .25s ease-in .35s forwards;
}

.nav-item-title-wrapper4.title4--open {
  animation: translate-fade-in .25s ease-in .45s forwards;
}

.dropdown-icon-wrapper.dropdown-icon1-open  {
  animation: translate-fade-in .25s ease-in .15s forwards;
}

.dropdown-icon-wrapper3.dropdown-icon3-open   {
  animation: translate-fade-in .25s ease-in .35s forwards;
}

.contact-wrapper.contact--open  {
  animation: fade-in .35s ease-in .5s forwards;
}

.lines-wrapper {
  width: 20px;
  height: 15px;
}

.line-top {
  width: 20px;
  height: 1px;
  background-color: black;

}

@keyframes move-down-rotate {
  0% {transform: translateY(0) rotate(0deg);}
  35% {transform: translateY(6px) rotate(0deg);}
  100% {transform: translateY(6px) rotate(45deg);}
}


.line-middle {
  width: 20px;
  height: 1px;
  background-color: black;
  margin-top: 5px;
  opacity: 1;

}

@keyframes fade {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.line-bottom {
  width: 20px;
  height: 1px;
  background-color: black;
  margin-top: 6px;
}

@keyframes move-up-rotate {
  0% {transform: translateY(0) rotate(0deg);}
  35% {transform: translateY(-7px) rotate(0deg);}
  100% {transform: translateY(-7px) rotate(-45deg);}

}

/* Hamburger End*/