.nav__section {
  z-index: 2;
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 150px;
  opacity: 100%;
  background-color: #9ba58d;
}
.nav__headerText,
.nav__subHeader {
  z-index: 1000;
  position: relative;
  display: flex;
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
  color: white;
}
.nav__headerText {
  font-size: 70px;
  letter-spacing: 7%;
  margin: 0;
}
.nav__subHeader {
  font-size: 35px;
  margin-top: -20px;
  letter-spacing: 10%;
}
.nav__textGroup {
  position: absolute;
  top: 32px;
  left: 300px;
}


.floating__navBar {
  position: sticky;
  display: flex;
  width: 100%;
  gap: 1px;
  top: 0px;
  margin: 0;
  /* background-color: red; */
  /* opacity: 50%; */
  background-color: #9ba58d;
  z-index: 1000;
  filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.15));
}
.button__home,
.button__aboutUs,
.button__fav,
.button__contacts {
  position: absolute;
  margin: 0;
  left: 960px;
  font-family: "Imprima";
  font-size: 20px;
  position: relative;
  padding: 10px;
  padding-bottom: 20px;
  padding-left: 45px;
  padding-right: 45px;
  background-color: #9ba58d;
  color: white;
  border: 0;
  transition: 300ms;
  overflow: hidden;
}
.button__home:hover,
.button__aboutUs:hover,
.button__fav:hover,
.button__contacts:hover {
  background-color: #cbcfc0;
  color: gray;
  transform: translateY(7px);
}

/* ===============================================FLOATING NAVIGATION BAR */
.button__home:hover {
  .home__text {
    background-color: #cbcfc0;
    transform: translate(15px, 3px);
  }
  .home__icon {
    animation: movetoleft 600ms forwards;
  }
}
.button__aboutUs:hover {
  .about__text {
    background-color: #cbcfc0;
    transform: translate(17px, 3px);
  }
  .about__icon {
    animation: movetoleft 600ms forwards;
  }
}
.button__fav:hover {
  .fav__text {
    background-color: #cbcfc0;
    transform: translate(15px, 3px);
  }
  .fav__icon {
    animation: movetoleft 600ms forwards;
  }
}
.button__contacts:hover {
  .contacts__text {
    background-color: #cbcfc0;
    transform: translate(15px, 3px);
  }
  .contacts__icon {
    animation: movetoleft 600ms forwards;
  }
}

/* ==========================================================HOME SECTION */
.home__borderbox {
  position: relative;
}
.home__icon {
  position: absolute;
  z-index: 0;
  top: -10px;
  left: 25px;
  width: 65px;
}
.about__icon {
  position: absolute;
  z-index: 0;
  top: -3px;
  left: 32px;
  width: 55px;
}
.fav__icon {
  position: absolute;
  z-index: 0;
  top: -3px;
  left: 30px;
  width: 55px;
}
.contacts__icon {
  position: absolute;
  z-index: 0;
  top: -3px;
  left: 30px;
  width: 55px;
}

.home__text,
.about__text,
.fav__text,
.contacts__text {
  z-index: 1;
  position: relative;
  background-color: #9ba58d;
  padding-bottom: 5px;
  margin: 0;
  transition: 300ms;
}

.nav__background {
  position: absolute;
  height: 206px;
  top: -149px;
  transform: scaleX(-1);
  filter: none !important;

  webkit-mask-image: linear-gradient(to left, black 35%, transparent 100%);
  mask-image: linear-gradient(to left, black 35%, transparent 100%);
}

.home__headerText,
.home__subHeader {
  position: relative;
  display: flex;
  font-size: 55px;
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
  color: #2e241e;
  margin-top: 0;
}
.home__headerText {
  font-size: 120px;
  margin-bottom: -40px;
}
.home__textGroup {
  /* background-color: blue; */
  position: absolute;
  top: 40px;
  right: 300px;
  margin: 0;
  letter-spacing: 6%;
}
.home__subHeader {
  letter-spacing: 7px;
}
.paragraph__box {
  position: absolute;
  display: flex;
  text-align: right;
  /* background-color: white; */
  width: 500px;
  font-size: 40px;
  letter-spacing: 7%;
  right: 300px;
  top: 180px;
  margin: 0;
}
.paragraph__home {
  font-family: "Imprima";
  color: #635347;
  margin: 0;
  line-height: 150%;
}

/* ---------------------------------------------------HOME SECTION BUTTONS*/
.button__box {
  display: flex;
  position: relative;
  justify-content: center;
  margin-top: 560px;
}
.button__showMenu {
  z-index: 100;
  font-family: "Imprima";
  align-items: center;
  font-size: 35px;
  padding: 10px 30px 10px 30px;
  background-color: #9ba58d;
  border: none;
  border-radius: 15px;
  color: white;
  box-shadow:
    2px 2px 5px rgb(63, 63, 63),
    -2px -2px 5px white;
  transition: 300ms;
}
.button__showMenu:hover {
  transform: scale(1.1);
  background-color: #2e241e;
  color: #9ba58d;

  animation: fade 500ms;
}
.arrow__pointer {
  position: absolute;
  width: 80px;
  top: -80px;

  animation: pointdown 800ms infinite alternate-reverse;
}
#button__menu {
  position: absolute;
  width: 1500px;
  top: -550px;
}

/* ---------------------------------------------------------ABOUT SECTION */
.about__img {
  position: absolute;
  right: 0;
  height: 830px;
  opacity: 70%;
  mask-image: linear-gradient(to left, black 30%, transparent 100%);
}
.paragraph__about {
  position: absolute;
  font-size: 40px;
  color: white;
  font-family: "Imprima";
  /* background: red;  */
  left: 50px;
  top: 180px;
  width: 700px;
  letter-spacing: 15%;
  line-height: 150%;
  text-align: left;
}