/* حذف مربع آبی هنگام تاچ روی لینک */
a:focus,
a:active {
  outline: none;
}

a {
  -webkit-tap-highlight-color: transparent; /* مخصوص مرورگرهای موبایل */
}

*:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.menu_back_blur {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 150;

  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  opacity: 0;
  display: none;
  transition: opacity 0.5s;
}

/* -------------------- Navbar -------------------- */

.navbar_body {
  font-family: inter;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  top: 30px;
  z-index: 200;
  /* background-color: blanchedalmond; */

  transition: opacity 0.7s;
}

.navbar_container {
  width: calc(100% - 160px);
  height: 50px;
  /* background-color: aqua; */

  text-align: center;
  line-height: 50px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo_container {
  width: 50px;
  height: 50px;
  /* background-color: yellowgreen; */
  cursor: pointer;

  background-image: url(../icons/logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.more_container {
  width: 42px;
  height: 42px;
  background-color: #0d161584;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  position: relative;
  z-index: 300;

  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.more_container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #fff1, #fff5);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: add, add;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 290;
}

.more_icon {
  width: 22px;
  height: 15px;
  /* background-color: aqua; */
  background-image: url(../icons/more.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  transition: opacity 0.5s;
}

.close_icon {
  width: 22px;
  height: 22px;
  /* background-color: aqua; */
  background-image: url(../icons/close.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}

/*  -------------------- menu  -------------------- */

.menu_container {
  font-family: inter;
  position: absolute;
  width: 345px;
  /* height: 530px; */
  /* background-color: rebeccapurple; */

  top: 100px;
  right: 80px;

  display: flex;
  flex-flow: column;
  justify-content: space-between;

  text-transform: uppercase;
  color: #fff;
  font-size: 24px;
  font-weight: 200;
  z-index: 200;

  transition: 0.5s;
  opacity: 0;

  display: none;

  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  display: none;
}

.first_content_container {
  width: 100%;
  /* height: 300px; */
  border-radius: 10px 10px 0 10px;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 10;

  mask: linear-gradient(to right, #000, #000), url("../icons/subtract2.svg");
  mask-composite: subtract;
  mask-size: 100% 100%, 65px 65px;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center center, calc(100% + 5px) calc(100% + 5px);
  margin-bottom: 12px;

  transition: transform 0.75s;
  transform: translateY(50px) rotate(2deg);
}

.first_content_container > ul {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  list-style: none;
  margin: 0 5px;
  padding: 0;
}

.menu_container ul > ul {
  display: none;
}

.menu_container ul > li {
  width: 255px;
  height: 50px;
  background-color: unset;
  border-radius: 10px;
  line-height: 50px;
  padding: 0 12px;

  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;

  /*   transition: 0.3s; */

  position: relative;
  margin-bottom: 4px;
  margin-top: 4px;
}

.first_content_container ul > li a,
.second_content_container ul > li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;

  text-decoration: none;
  color: unset;
  outline: none;
  box-shadow: none;
}

.first_content_container ul > li a::before,
.second_content_container ul > li a::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 26px;
  height: 26px;
  /* background-color: aqua; */
  background-image: url(../icons/go_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
  /*   transition: opacity 0.3s; */
}

.first_content_container ul > li:hover a::before,
.second_content_container ul > li:hover a::before {
  opacity: 1;
}

.arrow_icon {
  width: 26px;
  height: 26px;
  /* background-color: aqua; */
  background-image: url(../icons/go_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
  transition: 0.3s;
}

.menu_container ul > li:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 10;
  cursor: pointer;
}

/* li:hover .arrow_icon {
  opacity: 1;
} */

.second_content_container {
  width: 100%;
  /* min-height: 130px; */
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 10;
  margin-bottom: 12px;

  transition: transform 0.75s;
  transform: translateY(80px) rotate(-2deg);

  mask: linear-gradient(to right, #000, #000), url("../icons/subtract2.svg");
  mask-composite: subtract;
  mask-size: 100% 100%, 65px 65px;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center center, calc(100% + 5px) calc(100% + 5px);
}

.second_content_container > ul {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  list-style: none;
  margin: 0 5px;
  padding: 0;
}

.third_content_container {
  width: 100%;
  /* height: 75px; */
  /* background-color: #fff; */
  border-radius: 8px;

  color: #fff;

  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 10;

  transition: transform 0.75s;
  transform: translateY(120px) rotate(2deg);
}
.third_content_container > ul {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  list-style: none;
  margin: 0 5px;
  padding: 0;
}

.third_content_container > ul > li > a {
  width: 100%;
  height: 100%;
  background-color: unset;
  /* border-radius: 10px; */
  line-height: 42px;
  /* padding: 0 12px; */
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s;
  position: relative;

  text-decoration: unset;
  color: unset;
}

.third_content_container > ul > li {
  width: calc(100% - 25px);
  /* background-color: aqua; */
}
.third_content_container > ul > li:last-child {
  background: unset;
  box-shadow: unset;
  -webkit-backdrop-filter: unset;
  backdrop-filter: unset;
  z-index: 10;
}

.timeline_icon {
  width: 26px;
  height: 26px;
  background-image: url(../icons/go_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: rotate(-45deg);
  transition: 0.3s;
}

.third_content_container:hover .timeline_icon {
  transform: rotate(0);
}

.menu_active_container {
  opacity: 1;
}

.menu_active_container .first_content_container,
.menu_active_container .second_content_container,
.menu_active_container .third_content_container {
  transform: translateY(0px) rotate(0deg);
}

.first_content_container ul > li:nth-child(2) a {
  color: #c1362c;
  font-weight: 500;
}

/* -------------------- Responsive -------------------- */

@media screen and (max-width: 768px) {
  .navbar_body {
    top: 15px;
  }

  .navbar_container {
    width: calc(100% - 48px);
    z-index: 10;
    height: 35px;
  }

  .menu_container {
    width: calc(100% - 48px);
    /* min-height: 530px; */
    /* color: #2d2d2d; */
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
  }

  .more_container {
    width: 40px;
    height: 40px;
  }

  .more_icon {
    width: 24px;
    height: 24px;
    /* background-image: url(/assets/icons/More.svg); */
  }

  .close_icon {
    width: 22px;
    height: 22px;
  }

  ul > li {
    width: 255px;
    height: 50px;
  }

  .arrow_icon {
    background-image: url(../icons/go.svg);
  }

  /* .first_content_container {
    background-color: #e0e0e0;
  }

  .second_content_container {
    background-color: #e0e0e0;
  }

  .third_content_container {
    background-color: #bed748;
  } */
}