.layer1 {
  background: var(--ion-color-primary-contrast);
  display:flex;
  flex-direction: column;
}

.bottom {
  position: relative;
  top:30px;
}

.layer2 {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  top:-35px;
}
a {
  font-size: 14px;
  text-transform: capitalize;
}
.nav-area {
  background: var(--ion-color-primary-contrast);
  font-family: "arial";
  height: 0px;
  
}
.nav-area:after {
  content: "";
  clear: both;
  display: block;
}
.nav-area ul {
  list-style: none;
  margin: 0;
}
.nav-area > ul > li {
  float: left;
  position: relative;
}
.nav-area ul li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  padding: 0px 10px 10px 10px;
  display: block;
}
.nav-area ul ul {
  position: absolute;
  padding: 0;
  display: none;
  min-width: 120px;
  top: 100%;
  left: 0;
  z-index: 99999;
}
.nav-area ul li:hover a {
  background: var(--ion-color-primary-contrast);
  color: var(--ion-color-secondary);
}
.nav-area ul li:hover > ul {
  display: block;
  background: var(--ion-color-primary);
}
.nav-area ul ul li:hover a {
  background: var(--ion-color-primary);
}
.nav-area ul ul li {
  position: relative;
}
.nav-area ul ul ul {
  top: 0;
  left: 100%;
}
.nav-area ul ul ul li:hover a {
  background: var(--ion-color-primary);
}

h2 {
  font-family: "myriad pro light condensed";
  color: var(--ion-color-primary);
}
