

.container {
  display: flex;
}

.language-button {
  display: flex;
  align-items: center;
  margin: 0 0.5px;
  font-size: 14px;
  width: 100px;
  height: 25px;
  padding: 2px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  gap: 10px;
}

.language-button img {
  width: 25px;
  height: 25px;
}

.right-menu .language-button {
  text-align: right;
}

.left-menu .language-button {
  text-align: left;
}

.language-button img.flag {
  width: 20px;
  height: 20px;
}

.language-container {
  position: relative;
  margin-left: 1rem;
  margin-right: 1rem;
  width: 100%;
  z-index: 95;
  height: 360px;
}

.language-dropdown {
  display: flex;
  position: absolute;
  width: auto;
  height: 100%;
}

.lang-text {
  position: relative;
  font-size: 14px;
}

.right-menu .fa-text {
  top: -8px;
  right: 6.1px;
}

.right-menu .en-text {
  top: -7px;
  right: 2px;
}

.right-menu .ar-text {
  top: -7px;
  right: 12px;
}

.right-menu .ru-text {
  top: -7px;
  right: 0px;
}

.right-menu .zh-text {
  top: -7px;
  right: 12px;
}

.left-menu .en-text {
  top: -8px;
  left: 6px;
}

.left-menu .ru-text {
  top: -6px;
  left: 2px;
}

.left-menu .zh-text {
  top: -6px;
  left: 12px;
}

.left-menu .ar-text {
  top: -8px;
  left: 12px;
}

.left-menu .fa-text {
  top: -8px;
  left: 10px;
}

.group-title {
  margin-top: 10px;
  padding: 10px;
}

.group-title-container {
  display: flex;
  justify-content: flex-start;
  position: relative;
}

#group-title-fa {
  font-size: clamp(12px, 3vw, 28px);
  color: #0a59ec;
  position: absolute;
  left: 1vw;
  top: 5%;
  transform: translateY(-50%);
  font-family: 'Traffic', sans-serif;
  font-weight: 900; /* برای نمایش با ضخامت بیشتر */
  
  /* افکت سه‌بعدی با سایه‌های چندلایه */
  text-shadow: 
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    3px 3px 6px rgba(0, 0, 0, 0.6);
}
#group-title-ar {
  font-size: clamp(12px, 1.3vw, 24px); /* حداقل 14px، پویا با 1.3vw، حداکثر 24px */
  color: hsl(24, 81%, 55%);
  position: absolute;
  left: 2vw; /* جابجایی به سمت راست */
  top: 5%;
  transform: translateY(-50%);  font-family: 'Arial', sans-serif;
}

#group-title-en {
  font-size: clamp(12px, 3vw, 30px); /* حداقل 14px، پویا با 1.3vw، حداکثر 24px */
  color: #cd32b3;
  position: absolute;
  right: 1vw; /* تغییر به واحد vw */
  top: 5%;
  transform: translateY(-50%);  font-family: 'Arial', sans-serif;
}

#group-title-ru {
  font-size: clamp(12px, 1.3vw, 24px); /* حداقل 14px، پویا با 1.3vw، حداکثر 24px */
  color: #ff6347;
  position: absolute;
  right: 1vw; /* تغییر به واحد vw */
  top: 5%;
  transform: translateY(-50%);  font-family: 'Arial', sans-serif;
}

#group-title-zh {
  font-size: clamp(12px, 1.3vw, 24px); /* حداقل 14px، پویا با 1.3vw، حداکثر 24px */
  color: #ff8c00;
  position: absolute;
  right: 1vw; /* تغییر به واحد vw */
  top: 5%;
  transform: translateY(-50%);  font-family: 'Arial', sans-serif;
}

.hidden {
  display: none;
}

.language-button:hover {
  background-color: #5be6df;
}

#languageDropdown {
  display: none;
}

#languageDropdown.show {
  display: block;
}