.navbardown .navdot {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #fdfbf7;
  padding-inline: 5.5%;
}
.navbardown .navdot:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.navbardown .navdot:hover span {
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  opacity: 1;
}
.navbardown .navdot:before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 12px;
  background: #910e0b;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

.navbardown .navdot span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  -webkit-transform: translate(-50%, 10px);
          transform: translate(-50%, 10px);
  background: #910e0b;
  padding-inline: 10px;
  margin-left: 9px;
  height: 40px;
  color: #fdfbf7;
  font-size: 0.8rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  line-height: 44px;
  white-space: nowrap;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  pointer-events: none;
  opacity: 0;
}
.navbardown .navdotf {
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: #fdfbf7;
  padding-inline: 5.5%;
}
.navbardown .navdotf:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.navbardown .navdotf:hover span {
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  opacity: 1;
}
.navbardown .navdotf:before {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 12px;
  background: #910e0b;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.navbardown .navdotf span {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  -webkit-transform: translate(-50%, 10px);
          transform: translate(-50%, 10px);
  background: #910e0b;
  padding-inline: 10px;
  margin-left: 9px;
  height: 40px;
  color: #fdfbf7;
  font-size: 0.8rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  line-height: 44px;
  white-space: nowrap;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  pointer-events: none;
  opacity: 0;
}
.navbardown .navdotf span ::before {
  content: "";
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
  right: 3px;
  bottom: 3px;
  border: 1px solid #fdfbf7;
}
.navbardown .navdotf span ::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 6px 0;
  border-color: #d49256 transparent transparent;
}

.navbardown .active :nth-child(1) ~ .deco {
  -webkit-transform: translateX(50px);
          transform: translateX(50px);
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  --bgColorMenu: #1d1d27;
  --duration: 0.7s;
}

button {
  background-color: transparent;
  border: none;
  outline: none;
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background-color var(--duration);
  transition: background-color var(--duration);
}

.menu {
  opacity: 1;
  font-family: logam;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Works well with 100% width  */
  width: 100%;
  font-size: 1.5em;
  padding: 0 31%;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  bottom: 7%;
  z-index: 100;
}
@media (min-width: 769px) and (max-width: 1366px) {
  .menu {
    padding: 0 27%;
  }
}

.menu_show {
  opacity: 1;
  -webkit-animation: show;
          animation: show;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
@-webkit-keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.menu_hide {
  -webkit-animation: hide;
          animation: hide;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  opacity: 0;
}
@-webkit-keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.menu__border {
  left: 10px;
  width: 3%;
  position: absolute;
  -webkit-clip-path: url(#menu);
  clip-path: url(#menu);
  will-change: transform;
  transition: -webkit-transform var(--timeOut, var(--duration));
  -webkit-transition: -webkit-transform var(--timeOut, var(--duration));
  transition: transform var(--timeOut, var(--duration));
  transition: transform var(--timeOut, var(--duration)), -webkit-transform var(--timeOut, var(--duration));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.svg-container {
  width: 0;
  height: 0;
}

@media screen and (max-width: 50em) {
  .menu {
    font-size: 0.8em;
  }
}
.main_historical {
  width: 100vw;
  font-family: Leelawadee UI;
  display: block;
  z-index: 55;
  opacity: 1;
}
.main_historical .container-fluid {
  width: 100vw;
  padding: 0;
  background: #fff url(../images/main_bg.jpg) center center/cover no-repeat;
}
.main_historical .container-fluid .his_breif_jupiter {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_jupiter .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-left: 52%;
}
.main_historical .container-fluid .his_breif_jupiter .content img {
  position: absolute;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  top: 0;
  left: -2%;
  z-index: 1;
}
.main_historical .container-fluid .his_breif_jupiter .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_jupiter .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
  font-family: "Leelawadee UI";
  z-index: 55;
}
.main_historical .container-fluid .his_breif_citadel {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_citadel .content {
  padding-top: 20%;
  padding-inline: 7%;
  position: relative;
  padding-right: 53%;
}
.main_historical .container-fluid .his_breif_citadel .content img {
  position: absolute;
  top: 0;
  right: -4%;
}
.main_historical .container-fluid .his_breif_citadel .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_citadel .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
}
.main_historical .container-fluid .his_breif_citadel_two {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_citadel_two .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-left: 54%;
}
.main_historical .container-fluid .his_breif_citadel_two .content img {
  position: absolute;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  top: 0;
  left: -4%;
  z-index: 1;
}
.main_historical .container-fluid .his_breif_citadel_two .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_citadel_two .content p {
  font-size: 1.4rem;
  text-align: center;
  color: #910e0b;
  line-height: 150%;
  font-family: "Leelawadee UI";
  z-index: 55;
}
.main_historical .container-fluid .his_breif_citadel_three {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_citadel_three .content {
  padding-top: 20%;
  padding-inline: 7%;
  position: relative;
  padding-right: 53%;
}
.main_historical .container-fluid .his_breif_citadel_three .content img {
  position: absolute;
  top: 0;
  right: -2%;
}
.main_historical .container-fluid .his_breif_citadel_three .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_citadel_three .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
}
.main_historical .container-fluid .his_breif_ommayad {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_ommayad .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-left: 54%;
}
.main_historical .container-fluid .his_breif_ommayad .content img {
  position: absolute;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  top: 0;
  left: 0%;
  z-index: 1;
}
.main_historical .container-fluid .his_breif_ommayad .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_ommayad .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
  font-family: "Leelawadee UI";
  z-index: 55;
}
.main_historical .container-fluid .his_breif_ommayad_two {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_ommayad_two .content {
  padding-top: 20%;
  padding-inline: 7%;
  position: relative;
  padding-right: 53%;
}
.main_historical .container-fluid .his_breif_ommayad_two .content img {
  position: absolute;
  top: 0;
  right: -7%;
}
.main_historical .container-fluid .his_breif_ommayad_two .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_ommayad_two .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
}
.main_historical .container-fluid .his_breif_nouri {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_nouri .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-left: 54%;
}
.main_historical .container-fluid .his_breif_nouri .content img {
  position: absolute;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  top: 0;
  left: 0%;
  z-index: 1;
}
.main_historical .container-fluid .his_breif_nouri .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_nouri .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
  font-family: "Leelawadee UI";
  z-index: 55;
}
.main_historical .container-fluid .his_breif_nouri_two {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_nouri_two .content {
  padding-top: 20%;
  padding-inline: 7%;
  position: relative;
  padding-right: 53%;
}
.main_historical .container-fluid .his_breif_nouri_two .content img {
  position: absolute;
  top: -30%;
  right: -1%;
}
.main_historical .container-fluid .his_breif_nouri_two .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_nouri_two .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
}
.main_historical .container-fluid .his_breif_pasha {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_pasha .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-left: 54%;
}
.main_historical .container-fluid .his_breif_pasha .content img {
  position: absolute;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  top: -20%;
  left: -8%;
  z-index: 1;
}
.main_historical .container-fluid .his_breif_pasha .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_pasha .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
  font-family: "Leelawadee UI";
  z-index: 55;
}
.main_historical .container-fluid .his_breif_pasha_two {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_pasha_two .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-right: 53%;
}
.main_historical .container-fluid .his_breif_pasha_two .content img {
  position: absolute;
  top: -30%;
  right: -9%;
}
.main_historical .container-fluid .his_breif_pasha_two .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_pasha_two .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
}
.main_historical .container-fluid .his_breif_alazem {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_alazem .content {
  padding-top: 16%;
  padding-inline: 7%;
  position: relative;
  padding-left: 52%;
}
.main_historical .container-fluid .his_breif_alazem .content img {
  position: absolute;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  top: 0;
  left: -2%;
  z-index: 1;
}
.main_historical .container-fluid .his_breif_alazem .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_alazem .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
  font-family: "Leelawadee UI";
  z-index: 55;
}
.main_historical .container-fluid .his_breif_alazem_two {
  height: 100vh;
}
.main_historical .container-fluid .his_breif_alazem_two .content {
  padding-top: 14%;
  padding-inline: 7%;
  position: relative;
  padding-right: 53%;
}
.main_historical .container-fluid .his_breif_alazem_two .content img {
  position: absolute;
  top: -26%;
  right: -1%;
}
.main_historical .container-fluid .his_breif_alazem_two .content h1 {
  font-family: "Logam";
  color: #910e0b;
  padding-bottom: 3%;
}
.main_historical .container-fluid .his_breif_alazem_two .content p {
  font-size: 1.2rem;
  color: #910e0b;
  line-height: 145%;
}

.main_historical_hide {
  -webkit-animation: breif_hide;
          animation: breif_hide;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  opacity: 0;
  z-index: -55 !important;
}
@-webkit-keyframes breif_hide {
  0% {
    opacity: 1;
    z-index: 55;
    display: block !important;
  }
  100% {
    z-index: 55;
    opacity: 0;
    display: block !important;
  }
}
@keyframes breif_hide {
  0% {
    opacity: 1;
    z-index: 55;
    display: block !important;
  }
  100% {
    z-index: 55;
    opacity: 0;
    display: block !important;
  }
}

.main_historical_show {
  -webkit-animation: breif_show;
          animation: breif_show;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  display: block !important;
  z-index: 555 !important;
  opacity: 1;
}
@-webkit-keyframes breif_show {
  0% {
    opacity: 0;
    z-index: -55;
  }
  50% {
    opacity: 0;
    z-index: -55;
  }
  100% {
    opacity: 1;
  }
}
@keyframes breif_show {
  0% {
    opacity: 0;
    z-index: -55;
  }
  50% {
    opacity: 0;
    z-index: -55;
  }
  100% {
    opacity: 1;
  }
}

.main_historical_none {
  display: none !important;
}