:root {
  --gradient-green: linear-gradient(131.87deg, #0dff76 9.78%, #00dd3e 95.85%);
  --gradient-black: linear-gradient(131.87deg, #000000 9.78%, #272727 95.85%);
  --gradient-blackwhiteblack: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  --gradient-blackwhite: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    #000000 100%
  );

  --white: #ffffff;
  --black: #000000;
  --gray: #d9d9d9;
  --black-project: #272727;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /* 10px */
}

*,
*:after,
*:before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

body {
  line-height: 1.6;
  font-size: 1.6rem;
  font-family: var(--font-dana);
  font-weight: 700;
}
a {
  text-decoration: none;
  outline: none;
}
img {
  display: block;
}
textarea {
  resize: none;
  overflow-y: scroll;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}
button {
  all: unset;
  cursor: pointer;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.color-green {
  color: #00dc33;
}
.color-black {
  color: var(--black);
}
ul li::marker {
  color: #00dc33; /* فقط رنگ رو میشه تغییر داد */
  font-size: 20px;
}
.hide {
  display: none;
}
/* 

====================================
             header
====================================

*/
.header {
  position: relative;
  height: 95vh;
  min-height: 760px;
}
.header-circle-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  z-index: -1;
}
.header-circle {
  width: 174%;
  height: 174%;
  bottom: calc(100vh - 55%);

  background: var(--gradient-black);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}
.header-pattern {
  height: 650px;
  position: absolute;
  bottom: 0;
  left: 150px;
  pointer-events: none;
  z-index: -1;
}
.header-icons {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr;
  align-items: center;
  padding-top: 40px;
  margin-bottom: 20px;
}
.header-btn {
  align-self: center;
  justify-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.header-btn-line {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gradient-green);
  z-index: 1;
}
.header-time {
  background-color: var(--white);
  border: 1px solid #262626;
  padding: 2px;
  padding-right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  justify-self: center;
  gap: 20px;
  border-radius: 22.5px;
  width: 260px;
  white-space: nowrap; /* متن رو مجبور می‌کنه همیشه توی یه خط بمونه */
  overflow: hidden; /* جلوی اسکرول یا بیرون‌زدن رو می‌گیره */
  text-overflow: ellipsis; /* اگه جا نشد سه‌نقطه (…) می‌ذاره */
  transition: all 0.3s ease;
}

.header-time-text {
  font-weight: 500;
  font-size: 14px;
  opacity: 1;
  transition: all 0.3s ease;
}
.header-municipality-not-active {
  opacity: 0;
  display: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease 0.6s;
}
.header-time-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 2px 0px #00000040;
  background: var(--gradient-black);
  border-radius: 50%;
  width: 35px;
  height: 35px;
}
.header-time-image {
  width: 20px;
  height: 20px;
  opacity: 1;
  transition: all 0.3s ease;
}
.header-error-image {
  width: 20px;
  height: 20px;
  display: none;
  opacity: 0;
  transition: all 0.3s ease;
}
.header-logo-wrapper {
  display: flex;
  gap: 15px;
  align-self: center;
  justify-self: flex-end;
  z-index: 7;
}
.heeder-logo-login {
  width: 50%;
}
.heeder-logo-profile {
  width: 80%;
}
.header-logo-profile-wrapper .header-logo-link {
  margin-right: 1.22px;
}
.header-logo-profile-wrapper,
.header-logo,
.header-logo-login-wrapper {
  border: 1px solid #ffffff33;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  backdrop-filter: blur(3px);
  transition: all 0.3s ease;
}
.header-logo {
  position: relative;
  overflow-y: hidden;
}

.heeder-logo-text-image {
  position: absolute;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  width: 90%;
}

.header-logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.heeder-logo-image {
  width: 45px;
  opacity: 1;
  visibility: visible;
  position: absolute;
}
.header-search {
  width: 100%;
  height: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.header-search-input {
  border: none;
  font-family: var(--font-dana);
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 12px;
  padding: 20px 20px 20px 50px;
  font-size: 15px;
  font-weight: 500;
  color: #464749;
  background: #f2f3f5;
}
.header-search-input::placeholder {
  font-size: 15px;
  font-weight: 500;
  color: #464749;
}
.search {
  position: absolute;
  left: 20px;
  pointer-events: none;
  width: 20px;
  height: 20px;
}

.header-slider-item {
  position: relative;
  height: calc(100vh - 200px);
  min-height: 600px;
  width: 100%;
}
.header-slider-video,
.header-slider-image {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
}
.play,
.stop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.2),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2), 0 8px 25px rgba(0, 220, 51, 0.2);
  cursor: pointer;
}

.play.active,
.stop.active {
  opacity: 1;
  pointer-events: auto;
}

.header-slider-item:not(.is-playing):hover .play {
  opacity: 1;
  pointer-events: auto;
}

/* وقتی ویدیو در حال پخش است: فقط با hover روی آیتم، STOP نمایش داده شود */
.header-slider-item.is-playing:hover .stop {
  opacity: 1;
  pointer-events: auto;
}

/* مطمئن شو حالت‌های متقابل خاموش باقی بمانند */
.header-slider-item.is-playing:hover .play {
  opacity: 0;
  pointer-events: none;
}
.header-slider-item:not(.is-playing):hover .stop {
  opacity: 0;
  pointer-events: none;
}
.header-slider-stop,
.header-slider-play {
  width: 60px;
  height: 60px;
  z-index: 1;
}

.header-slider-gradient {
  position: absolute;
  bottom: 0;
  background: var(--gradient-blackwhite);
  width: 100%;
  height: 40%;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  pointer-events: none;
}
.header-slider-texts {
  position: absolute;
  right: 20px;
  bottom: 35px;
  color: var(--white);
}
.header-slider-title {
  font-size: 64px;
}
.header-slider-text-wrapper {
  display: flex;
  align-items: flex-start;
}
.header-slider-text {
  font-size: 20px;
}
.pointer-events {
  pointer-events: auto;
}
.location-green {
  margin-top: 6px;
  margin-left: 5px;
  width: 11px;
  height: 15px;
}
.error-green {
  margin-left: 5px;
  margin-top: 7px;
  width: 18px;
  height: 18px;
}
.header-sliders .owl-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  z-index: 10;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 10px;
}
.header-sliders .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  display: block;
  background: var(--white);
  transition: all 0.3s ease;
  border-radius: 100%;
}

.header-sliders .owl-dots .owl-dot.active span {
  background: var(--gradient-green);
  transform: translateY(-4px) scale(1.2);
}
/* 

====================================
             menu
====================================

*/
.menu {
  position: fixed;
  inset: 0;
  background: #191919;
  z-index: 9;
  width: 100vw;
  height: 100vh;
  transform: translateX(100%);
  transition: all 0.4s ease;
  overflow-y: auto;
  overflow-x: hidden;
  direction: ltr;
  opacity: 0;
}
.menu-wrapper {
  position: relative;
  direction: rtl;
}
.menu--open {
  transform: translateX(0);
  opacity: 1;
}
.menu-pattern {
  position: absolute;
  right: -50px;
  pointer-events: none;
  z-index: 5;
}
.menu-pattern-image {
  position: absolute;
}
.menu-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
  margin-bottom: 20px;
  z-index: 6;
}
.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 50%;
  background: var(--white);
  width: 52px;
  height: 52px;
  transition: all 0.3s ease;
}
.menu-btn-line {
  transform: rotate(45deg);
  display: block;
  width: 30px;
  height: 3px;
  background: var(--gradient-green);
  z-index: 1;
  border-radius: 12px;
}
.menu-btn-line::after {
  content: "";
  transform: rotate(-90deg);
  display: block;
  width: 30px;
  height: 3px;
  background: var(--gradient-green);
  z-index: 1;
  border-radius: 12px;
}
.menu-logo {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: var(--white);
  transition: all 0.3s ease;
}
.menu-logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-logo-icon {
  width: 100%;
}
.menu-main {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.menu-dekstop {
  width: 45%;
  height: 755px;
  z-index: 6;
}
.menu-dekstop-image {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0px 4px 12px 0px #0000005e;
}
.menu-contents {
  width: 55%;
  z-index: 6;
}
.slot-target {
  transform: translateY(-50px);
  opacity: 0;
}

/* کلاس افکت slot machine */
.slot-anim {
  animation: slotMove 0.8s ease-out forwards;
}

@keyframes slotMove {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  40% {
    transform: translateY(30%);
    opacity: 1;
  }
  70% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.menu-nav {
  margin-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
}
.menu-list {
  list-style: square;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-link {
  font-size: 54px;
  color: var(--white);
}
.menu-item {
  transition: all 0.3s ease;
}
.menu-item span {
  transition: all 0.3s ease;
}
.menu-information-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.menu-information {
  width: 85%;
}
.menu-email {
  text-align: left;
}
.menu-email-link {
  font-weight: 500;
  font-size: 40px;
  color: var(--white);
  transition: all 0.3s ease;
}

.menu-email-link span {
  transition: all 0.3s ease;
}

.menu-tel {
  text-align: left;
  padding-bottom: 20px;
  margin-bottom: 5px;
  position: relative;
}
.menu-tel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: #c2c2c2;
  width: 0; /* شروع از صفر */
}

/* کلاس انیمیشن */
.menu-tel.border-anim::after {
  animation: borderGrow 0.6s ease-out forwards;
}

@keyframes borderGrow {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.menu-tel-link {
  font-weight: 500;
  font-size: 20px;
  display: flex;
  flex-direction: row-reverse;
  color: var(--white);
  transition: all 0.3s ease;
}

.menu-tel-link span {
  transition: all 0.3s ease;
}

.menu-app {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
  margin-bottom: 10px;
}
.menu-link-app {
  font-size: 16px;
  color: var(--white);
  transition: all 0.3s ease;
}

.menu-link-app span {
  transition: all 0.3s ease;
}

.menu-address-texts {
  font-weight: 500;
  font-size: 20px;
  color: var(--white);
}
.menu-address-text {
  margin-bottom: 10px;
  text-shadow: 0px 0px 2px#0000000D;
}
.menu-address-tel {
  text-shadow: 0px 0px 2px#0000000D;
}
.menu-mobile {
  display: none;
  width: 100%;
}
.menu-mobile-image {
  box-shadow: 0px 4px 12px 0px #0000005e;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}
/* 

====================================
             main
====================================

*/
.main {
  margin-top: 70px;
}
/* 

====================================
            services
====================================

*/
.services {
  margin-bottom: 30px;
}
.services-filter {
  display: flex;
  gap: 10px;
  align-items: center;
}
.services-filter-combobox {
  display: none;
  position: relative;
}
.services-select {
  width: 100%;
  outline: none;
  font-family: var(--font-dana);
  font-weight: 600;
  padding: 15px 10px 15px 3px;
  border-radius: 40px;
  font-size: 18px;
  border: 2px solid var(--black-project);
}
.services-select-arrow-wrapper {
  border: 2px solid var(--black-project);
  box-shadow: 0px 2px 2px 0px #00000024;
  background: var(--gradient-green);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 5px; /* فاصله از راست select */
  top: 50%; /* وسط عمودی */
  transform: translateY(-50%); /* اصلاح برای مرکز دقیق */
  pointer-events: none;
}
.services-select-arrow {
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.services-filter-item {
  position: relative;
  overflow: hidden;
  width: 196px;
  border: 1.4px solid #272727;
  background: var(--gray);
  border-radius: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 2px;
  padding-right: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.services-filter-item--active {
  background: var(--gradient-green);
}
.services-filter-text {
  position: relative;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  z-index: 2;
}

.services-filter-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 75%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1.2s ease;
  opacity: 0;
}

.services-filter-icon {
  border: 1.4px solid var(--black-project);
  box-shadow: 0px 2px 2px 0px #00000024;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background: var(--gradient-green);
  transition: all 0.3s ease;
  z-index: 2;
}
.services-filter-image.first {
  width: 80%;
  height: 80%;
}
.services-filter-image.second {
  width: 65%;
  height: 65%;
}
.services-filter-image.third {
  width: 70%;
  height: 70%;
}

.services-filter-icon--active {
  background: var(--black-project);
  border: 1.4px solid var(--white);
}

.services-slider,
.services-slider-Electronic {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  width: 100%;
}
.services-slider .owl-stage-outer.dragging {
  user-select: none;
  cursor: grabbing;
}
.services-item {
  width: fit-content;
}
.bulky-items {
  width: 55%;
  height: 55%;
}
.services-item-link {
  position: relative;
  overflow: hidden;
  display: block;
  transition: all 0.3s ease;
}

.services-item-link::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 40%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}

.services-item-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 83px;
  border-radius: 50%;
  background: var(--gray);
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}
.services-item-icon {
  width: 45%;
  height: 45%;
}
.services-item-text {
  width: 83px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  margin-top: 10px;
  pointer-events: none;
}
/* 

====================================
            banner
====================================

*/
.banner {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.banner-item-link {
  width: 100%;
}
.banner-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 250px;
  box-shadow: 0px 8px 20px 0px #00000026;
}
.banner-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 100%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}

.banner-link-text-hover {
  display: none;
  opacity: 0;
  transition: all 0.3 ease;
  white-space: nowrap; /* متن رو مجبور می‌کنه همیشه توی یه خط بمونه */
  overflow: hidden; /* جلوی اسکرول یا بیرون‌زدن رو می‌گیره */
  text-overflow: ellipsis;
}
.banner-image {
  width: 100%;
  border-radius: 10px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
}
.banner-gradient {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  z-index: 4;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  flex-direction: column-reverse;
  padding: 10px 15px;
  pointer-events: none;
}
.banner-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.banner-title {
  color: var(--white);
  white-space: nowrap;
  font-size: 26px;
}
.banner-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 110px;
  color: var(--black-project);
  border: 1.4px solid var(--black-project);
  background: var(--white);
  border-radius: 20.5px;
  padding: 3px 10px 3px 3px;
  transition: all 0.3s ease;

  font-weight: 600;
  z-index: 4;
  font-size: 12px;
}
.banner-link-text {
  transition: all 0.3 ease;
  white-space: nowrap; /* متن رو مجبور می‌کنه همیشه توی یه خط بمونه */
  overflow: hidden; /* جلوی اسکرول یا بیرون‌زدن رو می‌گیره */
  text-overflow: ellipsis;
}

.banner-link-icon path {
  transition: all 0.3 ease;
}
.banner-link-icon-wrapper {
  box-shadow: 0px 2px 2px 0px #00000024;
  border: 1.4px solid var(--black-project);
  background: var(--gradient-green);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.banner-link-icon {
  z-index: 2;
  width: 14px;
  height: 11px;
  justify-self: flex-end;
}

/* 

====================================
            messages
====================================

*/
.messages {
  margin-bottom: 50px;
}
.messages-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.messages-header-title {
  font-size: 20px;
}
.messages-header-link {
  color: #a6a6a6;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.messages-header-icon {
  transform: rotate(90deg);
  width: 12px;
  height: 6px;
}
.messages-items {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 30px;
  height: fit-content;
}
.messages-items-link {
  width: 300px;
}
.messages-item {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 175px;
  transition: all 0.3s ease;
}
.messages-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 50%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}

.messages-item:hover {
}
.messages-image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.messages-gradient {
  background: var(--gradient-blackwhite);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  z-index: 3;
}
.messages-title {
  color: var(--white);
  font-weight: 600;
  font-size: 16px;
  text-shadow: 0px 4px 4px#00000040;
}
.messages-text {
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0px 0px 2px#0000000d;
}
.messages .owl-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  z-index: 10;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -30px;
}
.messages .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  display: block;
  background: #1c1c1c;
  transition: all 0.3s ease;
  border-radius: 100%;
}

.messages .owl-dots .owl-dot.active span {
  background: var(--gradient-green);
  transform: translateY(-4px) scale(1.2);
}
/* 

====================================
         notification
====================================

*/
.notification {
  margin-bottom: 30px;
  height: fit-content;
}
.notification-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.notifications-header-title {
  font-size: 20px;
}
.notifications-header-link {
  color: #a6a6a6;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.notification-header-icon {
  transform: rotate(90deg);
  width: 12px;
  height: 6px;
}
.notification-items {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
}
.notification-item {
  background: var(--gradient-black);
  border-radius: 10px;
  padding: 10px;
  height: 170px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  transition: all 0.3s ease;
}
.notification-item:hover {
}
.notification-item-title {
  font-size: 16px;
  color: var(--white);
  font-weight: 600;
  padding-bottom: 9px;
  text-shadow: 0px 4px 4px#00000040;
}
.notification-item-text {
  color: var(--white);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: auto;
  text-align: justify;
  text-shadow: 0px 0px 2px#0000000d;
}
.notification-item-icon-wrapper {
  display: flex;
  justify-content: flex-end;
}

.notification-item-icon {
  width: 20px;
  height: 20px;
}
/* 

====================================
              sliders
====================================

*/
/* 

====================================
              news
====================================

*/
.sliders {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}
.news {
  width: calc(50% - 15px);
  display: flex;
  flex-direction: column;
}

.new-slider-item {
  width: 100%;

  height: calc(100vh - 100px);
  min-height: 620px;
  position: relative;
}
.new-slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0px 8px 20px 0px #00000026;
}
.new-slider-gradient {
  background: var(--gradient-blackwhite);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  display: flex;
  align-items: flex-end;
  padding-right: 20px;
  padding-bottom: 35px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.new-slider-texts {
  color: var(--white);
}
.new-slider-title {
  font-size: 64px;
}
.new-slider-text-wrapper {
  display: flex;
}
.new-slider-location {
  width: 11px;
  height: 15px;
  margin-top: 4px;
  margin-left: 5px;
}
.new-slider-location-icon {
  width: 100%;
  height: 100%;
}
.new-slider-text {
  font-weight: 600;
  font-size: 20px;
}
.new-btn {
  position: relative;
  background: var(--gradient-green);
  color: var(--white);
  font-weight: 600;
  font-size: 20px;
  width: 100%;
  height: 58px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.new-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-black);
  box-shadow: 0px 4px 12px 0px #00000040;
  opacity: 0;
  transition: all 0.4s ease;
  border-radius: 9px;
  z-index: 0;
}

.new-btn span {
  position: relative;
  z-index: 1; /* متن بالای لایه قرار گیرد */
}
.new-slider .owl-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  z-index: 10;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 10px;
}
.new-slider .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  display: block;
  background: var(--white);
  transition: all 0.3s ease;
  border-radius: 100%;
}

.new-slider .owl-dots .owl-dot.active span {
  background: var(--gradient-green);
  transform: translateY(-4px) scale(1.2);
}
/* 

====================================
              multimedia
====================================

*/
.multimedia {
  width: calc(50% - 15px);
}
.multimedia-box {
  width: 100%;
  height: calc(100vh - 100px);
  min-height: 620px;
  background: var(--gradient-black);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.multimedia-player {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.multimedia-slider-player-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0px 8px 20px 0px #00000026;
}
.multimedia-player-gradient {
  background: var(--gradient-blackwhite);
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding-right: 20px;
  padding-bottom: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.multimedia-player-title {
  font-size: 29px;
  color: var(--white);
  margin-bottom: 5px;
}
.multimedia-player-text {
  font-size: 16px;
  color: var(--white);
}
.multimedia-player-location {
  display: flex;
  align-items: center;
}
.multimedia-player-location-icon-wrapper {
  width: 11px;
  height: 15px;
  margin-top: -3px;
  margin-left: 5px;
}
.multimedia-player-location-icon {
  width: 100%;
  height: 100%;
}
.multimedia-player-location-text {
  font-weight: 600;
  font-size: 14px;
}
.multimedia-slider {
  display: flex;
  box-shadow: 0px 8px 20px 0px #00000026, inset 0px 4px 8px 0px #00000047;

  justify-content: space-between;
  background: var(--white);
  height: 150px;
  border-radius: 10px;
  gap: 15px;
  padding: 5px;
}
.multimedia-slider-item {
  width: 100%;
  height: 100%;
  position: relative;
}
.multimedia-slider-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  cursor: pointer;
}
.multimedia-slider-not-active {
  cursor: pointer;
  background: #000000b5;
  position: absolute;
  inset: 0;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.multimedia-btn {
  position: relative;
  background: var(--gradient-black);
  color: var(--white);
  font-weight: 600;
  font-size: 20px;
  width: 100%;
  height: 58px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.multimedia-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-green);
  opacity: 0;
  transition: all 0.4s ease;
  border-radius: 9px;
  box-shadow: 0px 4px 12px 0px #00000040;

  z-index: 0;
}

.multimedia-btn span {
  position: relative;
  z-index: 1; /* متن بالای لایه قرار گیرد */
}
/* 

====================================
              footer-top
====================================

*/
.footer {
  width: 100%;
  border-radius: 12px;
  background: var(--gradient-black);
  padding: 10px;
  margin-bottom: 20px;
  padding-bottom: 0;
}
.footer-top {
  width: 100%;
  background: var(--white);
  border-radius: 12px;
  padding: 10px;
}
.footer-top-top {
  width: 100%;
  margin-bottom: 65px;
}
.footer-top-title {
  width: 100%;
}
.footer-top-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.footer-top-bottom-right {
  width: 100%;
}
.footer-top-bottom-right-text {
  font-weight: 500;
  font-size: 24px;
  color: var(--black-project);
  margin-bottom: 15px;
  text-align: justify;
  text-shadow: 0px 0px 2px#0000000d;
}
.footer-top-bottom-right-link {
  position: relative;
  width: 100%;
  background: #262626;
  color: var(--white);
  box-shadow: 0px 4px 12px 0px #00000021;
  font-weight: 500;
  font-size: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-shadow: 0px 0px 2px#0000000D;
  padding-left: 40px;
  transition: all 0.3s ease;
}
.footer-top-bottom-right-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-green);
  box-shadow: 0px 4px 12px 0px #00000040;
  opacity: 0;

  transition: all 0.4s ease;
  border-radius: 9px;
  z-index: 0;
}

.footer-top-bottom-right-link .footer-top-bottom-right-link-text {
  position: relative;
  z-index: 1; /* متن بالای لایه قرار گیرد */
  transition: all 0.4s ease;
}
.footer-top-bottom-right-link .go-green {
  position: relative;
  z-index: 1;
}

.footer-top-bottom-right-link
  .go-green
  .footer-top-bottom-right-link-icon
  path {
  transition: all 0.3s ease;
}

.footer-top-bottom-right-link-icon path {
  transition: all 0.3s ease;
}

.footer-top-bottom-right-link span {
  transition: all 0.3s ease;
}

.go-green {
  display: flex;
  align-items: center;
}
.footer-top-bottom-right-link-icon {
  width: 20px;
  height: 15px;
}
.footer-top-bottom-right-email {
  text-align: left;
}
.footer-top-bottom-right-email-link {
  font-weight: 500;
  font-size: 40px;
  transition: all 0.3s ease;
  color: #232323;
}

.footer-top-bottom-right-email-link span {
  transition: all 0.3s ease;
}

.footer-top-bottom-right-tel {
  border-bottom: 2px solid #242424;
  padding-bottom: 20px;
  margin-bottom: 5px;
}
.footer-top-bottom-right-tel-link {
  font-weight: 500;
  font-size: 20px;
  display: flex;
  flex-direction: row-reverse;
  transition: all 0.3s ease;
  color: #232323;
}

.footer-top-bottom-right-tel-link span {
  transition: all 0.3s ease;
}

.footer-top-bottom-right-app {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}
.footer-top-bottom-right-link-app {
  font-size: 16px;
  color: #232323;
  transition: all 0.3s ease;
}

.footer-top-bottom-right-link-app span {
  transition: all 0.3s ease;
}

.font-poppins {
  font-family: "Poppins";
}
.footer-top-bottom-left {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.footer-top-bottom-left-image {
  display: block;
  width: 100%;
  box-shadow: 0px 4px 20px 0px #00000040;
  object-fit: cover;
  object-position: center;

  height: 525px;
}
.footer-top-bottom-left-gradient {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 40%;
  background: var(--gradient-blackwhite);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 

====================================
          footer-bottom
====================================

*/
.footer-bottom {
  margin-top: 20px;
  padding-left: 50px;
  padding-right: 50px;
}
.footer-bottom-contact-us {
  width: 100%;
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
}
.footer-bottom-contact-us-title {
  font-size: 40px;
  white-space: nowrap;
}
.footer-bottom-contact-us-line {
  display: flex;
  align-items: center;
  width: 90%;
}
.footer-bottom-contact-us-line-white {
  width: 90%;
  height: 2px;
  background: var(--white);
}
.footer-bottom-contact-us-line-green {
  width: 10%;
  height: 2px;
  background: var(--gradient-green);
}
.star {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -7px;
}
.footer-bottom-contact-us-icon {
  width: 100%;
  height: 100%;
}
.footer-bottom-content {
  display: flex;
  gap: 25px;
}
.footer-bottom-content-right {
  width: 34%;
}
.footer-form {
  display: flex;
  gap: 5px;
  flex-direction: column;
}
.footer-form-input-holder {
  width: 100%;

  background-color: white;
  display: flex;
  gap: 5px;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;

  padding: 5px;
  border-radius: 12px;
  box-shadow: 0px 4px 12px 0px #00000021;
}
.footer-form-input-email,
.footer-form-input-name {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 15px;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  border: none;
  text-shadow: 0px 0px 2px#0000000D;
  border-radius: 12px;
}
.footer-form-input-email {
  padding-left: 10px;
}
.footer-form-input::placeholder {
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0px 0px 2px#0000000D;
}
.footer-form-email-btn {
  border: 2px solid #212121;
  border-radius: 12px;
  color: var(--white);
  box-shadow: 0px 4px 12px 0px #00000021;
  text-shadow: 0px 0px 2px#0000000D;

  background: var(--gradient-green);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-size: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}
.footer-form-email-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 50%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}

.footer-form-textarea-holder {
  width: 100%;
  box-shadow: 0px 4px 12px 0px #00000021;
  border-radius: 12px;
  height: 230px;
}
.footer-form-text-area {
  border-radius: 12px;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 15px;

  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0px 0px 2px#0000000D;
}
.footer-form-text-area::placeholder {
  color: #757575;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0px 0px 2px#0000000D;
}
.footer-form-btn-holder {
  width: 100%;
  display: flex;
}
.footer-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 20px;
  padding: 15px;
  color: var(--white);
  background: var(--gradient-green);
  border-radius: 12px;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}
.footer-form-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 100%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}

.footer-bottom-content-left {
  width: 66%;
}
.footer-bottom-content-left-address {
  display: flex;
  align-items: center;
  margin-bottom: 44px;
  justify-content: space-between;
}
.footer-bottom-content-left-address-texts {
  font-weight: 500;
  font-size: 23px;
  color: var(--white);
}
.footer-bottom-content-left-address-text {
  text-shadow: 0px 0px 2px#0000000D;
}
.footer-bottom-content-left-address-tel {
  text-shadow: 0px 0px 2px#0000000D;
}
.footer-bottom-content-left-logo {
}
.footer-bottom-content-left-logo-image {
  width: 75px;
  height: 100px;
}
.footer-bottom-content-left-logo-image path[fill-opacity="0.4"] {
  animation: pulseOpacity 1.5s ease-in-out infinite alternate;
}

@keyframes pulseOpacity {
  0% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 0.4;
  }
}

.footer-bottom-content-left-map {
  width: 100%;
  height: 304px;
}
.footer-bottom-content-left-map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0px 4px 20px 0px #00000040;
}
.footer-bottom-text-logo {
  width: 100%;
}
.footer-bottom-text-logo-image {
  width: 100%;
  height: 100%;
}
/* 

====================================
          our-mission
====================================

*/
.our-mission {
}
.our-mission-header {
  display: flex;
  align-items: center;
  gap: 5px;
}
.our-mission-header-circle {
  border-radius: 50%;
  background: #272727;
  box-shadow: 0px 2px 4px 0px #00000040;
  width: 8px;
  height: 8px;
}
.our-mission-header-title {
  font-size: 20px;
  font-weight: 600;
}
.our-mission-content {
  margin-top: 15px;
}
.our-mission-content-text {
  font-weight: 600;
  font-size: 26px;
  color: #757575;
  text-align: justify;
}
/* 

====================================
         achievements 
====================================

*/
.achievements {
  margin-top: 30px;
  background: #f2f2f2;
  border-radius: 12px;
  padding: 7px;
}
.achievements-wrapper {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}
.achievement {
  border-radius: 12px;
  width: 100%;
  background: var(--white);
  padding: 10px;
}
.achievement-number {
  text-align: left;
  color: #272727;
  font-weight: 600;
  font-size: 40px;
}
.achievement-text {
  color: #272727;
  font-weight: 600;
  font-size: 40px;
}
.achievement-image-wrapper {
  position: relative;
}

.achievement-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}
.achievement-image-gradient {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  height: 40%;
  background: var(--gradient-blackwhite);
}
/* 

====================================
           what-we-do
====================================

*/
.what-we-do {
}
.what-we-do-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 30px;
}
.what-we-do-header-circle {
  border-radius: 50%;
  background: #272727;
  box-shadow: 0px 2px 4px 0px #00000040;
  width: 8px;
  height: 8px;
}
.what-we-do-header-title {
  font-size: 20px;
  font-weight: 600;
}
.what-we-do-content {
  margin-top: 15px;
}
.what-we-do-content-text {
  font-weight: 600;
  font-size: 26px;
  color: #757575;
  text-align: justify;
}
/* 

====================================
           sponsors
====================================

*/

.sponsors {
  position: relative;
  margin-top: 30px;
  background: #f2f2f2;
  border-radius: 12px;
  padding: 50px 10px;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.sponsors::before,
.sponsors::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.sponsors::before {
  left: 0;
  background: linear-gradient(to right, #f2f2f2, transparent);
}

.sponsors::after {
  right: 0;
  background: linear-gradient(to left, #f2f2f2, transparent);
}

.sponsors-logo-wrapper {
  width: 72px;
  height: 72px;
}

.sponsors-logo-wrapper.last {
  width: 130px !important;
  height: 72px !important;
}

.sponsors-logo {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.sponsors-logo-wrapper .sponsors-logo path[fill="#757575"] {
  transition: fill 0.3s ease;
}

.sponsors .owl-stage {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 100% !important;
}
/* 

====================================
           team-gallery
====================================

*/
.team-gallery {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
  margin-top: 30px;
  background: #f2f2f2;
  border-radius: 12px;
  padding: 10px;
}
.team-gallery-image-wrapper {
}
.team-gallery-image {
  width: 100%;
  display: block;

  border-radius: 12px;
  object-fit: cover;
  object-position: center;
}
/* 

====================================
          contact-us
====================================

*/
.footer {
  margin-top: 30px;
}
.contact-us {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #515151;
}
.contact-us-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}
.contact-us-header-circle {
  border-radius: 50%;
  background: #272727;
  box-shadow: 0px 2px 4px 0px #00000040;
  width: 8px;
  height: 8px;
}
.contact-us-header-title {
  font-size: 20px;
  font-weight: 600;
}
.contact-us-content {
  display: flex;
  gap: 50px;
}
.contact-us-information {
  width: 100%;
}
.contact-us-information-title {
  font-weight: 800;
  font-size: 64px;
  margin-bottom: 10px;
}
.contact-us-information-text {
  color: #757575;
  font-size: 26px;
  font-weight: 600;
}
.contact-us-email {
  text-align: left;
}
.contact-us-email-link {
  font-weight: 500;
  font-size: 40px;
  color: #232323;
  transition: all 0.3s ease;
}

.contact-us-email-link span {
  transition: all 0.3s ease;
}

.contact-us-tel {
  padding-bottom: 20px;
}
.contact-us-tel-link {
  font-weight: 500;
  font-size: 20px;
  display: flex;
  flex-direction: row-reverse;
  color: #232323;
  transition: all 0.3s ease;
}

.contact-us-tel-link span {
  transition: all 0.3s ease;
}

.contact-us-address {
  font-weight: 500;
  font-size: 23px;
  text-shadow: 0px 0px 2px#0000000D;
  border-bottom: 2px solid #242424;
  border-top: 2px solid #242424;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.contact-us-app {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}
.contact-us-link-app {
  font-size: 16px;
  color: #232323;
  transition: all 0.3s ease;
}

.contact-us-link-app span {
  transition: all 0.3s ease;
}

.contact-us-form-wrapper {
  width: 100%;
}
.contact-us-form {
  display: flex;
  gap: 5px;
  flex-direction: column;
}
.contact-us-form-input-holder {
  width: 100%;

  background-color: white;
  display: flex;
  gap: 5px;
  border: 2px solid #515151;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;

  padding: 5px;
  border-radius: 12px;
  box-shadow: 0px 4px 12px 0px #00000021;
}
.contact-us-form-input-name {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 15px;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  border: none;
  text-shadow: 0px 0px 2px#0000000D;
  border-radius: 12px;
}
.contact-us-input::placeholder {
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0px 0px 2px#0000000D;
}
.contact-us-form-input-email {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 15px;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  border: none;
  text-shadow: 0px 0px 2px#0000000D;
  padding-left: 10px;
  border-radius: 12px;
}
.contact-us-form-email-btn {
  border: 2px solid #212121;
  border-radius: 12px;
  color: var(--white);
  box-shadow: 0px 4px 12px 0px #00000021;
  text-shadow: 0px 0px 2px#0000000D;

  background: var(--gradient-green);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-size: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}
.contact-us-form-email-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 50%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}

.contact-us-form-textarea-holder {
  width: 100%;
  box-shadow: 0px 4px 12px 0px #00000021;
  border: 2px solid #515151;
  border-radius: 12px;
  height: 230px;
}
.contact-us-form-text-area {
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding: 15px;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0px 0px 2px#0000000D;
}
.footer-form-text-area::placeholder {
  color: #757575;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0px 0px 2px#0000000D;
}
.contact-us-form-btn-holder {
  width: 100%;
  display: flex;
}
.contact-us-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-dana);
  font-weight: 500;
  font-size: 20px;
  padding: 15px;
  color: var(--white);
  background: var(--gradient-green);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.contact-us-form-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: var(--white);
  transform: rotate(-45deg);
  transition: all 1s ease;
  opacity: 0;
}
/* پاپ‌آپ کلی */
/* باکس پاپ‌آپ پایین راست */
.popup {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

/* وقتی فعال میشه */
.popup.show {
  visibility: visible;
  opacity: 1;
}

/* محتوای پاپ‌آپ */
.popup-content {
  background: var(--white);
  padding: 20px 25px;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transform: translateX(150%);
  transition: all 0.6s ease;
  max-width: 280px;
  text-align: center;
}

/* وقتی نمایش داده می‌شود، از راست می‌آید داخل */
.popup.show .popup-content {
  transform: translateX(0);
}

.popup-title {
  margin: 0 0 8px;
  color: #333;
}

.popup-text {
  color: #555;
  font-size: 14px;
  margin-bottom: 12px;
}

.popup-btn {
  background: var(--gradient-green);
  border: none;
  color: var(--white);
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}
.popup-btn::after {
  content: "بزن بریم";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  background: var(--gradient-black);
  opacity: 0;
  transition: all 0.4s ease;
  border-radius: 19px;
  box-shadow: 0px 4px 12px 0px #00000040;

  z-index: 2; /* زیر متن قرار می‌گیرد */
}

.popup-btn-text {
  z-index: 2;
  color: var(--white);
}
@media (hover: hover) {
  .contact-us-form-btn:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(800%);
  }
  .header-logo-profile-wrapper:hover,
  .header-logo-login-wrapper:hover,
  .header-logo:hover,
  .menu-btn:hover,
  .menu-logo:hover {
    transform: scale(1.1);
  }
  .menu-item:hover {
    color: #00dc33;
  }
  .menu-item:hover span {
    color: var(--white);
  }
  .menu-tel-link:hover span {
    color: var(--white);
  }
  .header-time:hover .header-time-text {
    display: none;
    opacity: 0;
  }
  .header-time:hover .header-municipality-not-active {
    display: block;
    opacity: 1;
  }
  .header-time:hover .header-time-image {
    display: none;
    opacity: 0;
  }
  .header-time:hover .header-error-image {
    display: block;
    opacity: 1;
  }
  .header-time:hover {
    width: 500px;
  }
  .menu-email-link:hover {
    color: #00dc33;
  }
  .menu-email-link:hover span {
    color: var(--white);
  }
  .menu-tel-link:hover {
    color: #00dc33;
  }
  .menu-link-app:hover {
    color: #00dc33;
  }
  .menu-link-app:hover span {
    color: var(--white);
  }
  .services-filter-item:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(800%);
  }
  .services-filter-item--active:hover::before {
    opacity: 0;
  }
  .services-item-link:hover .services-item-icon-wrapper {
    border-color: #313234;
  }
  .services-item-link:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(600%);
  }
  .banner-item:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(500%);
  }
  .banner-item-link:hover
    .banner-item
    .banner-gradient
    .banner-content
    .banner-link
    .banner-link-text {
    display: none;
    opacity: 0;
  }
  .banner-item-link:hover
    .banner-item
    .banner-gradient
    .banner-content
    .banner-link
    .banner-link-icon-wrapper {
    width: 100%;
    border-radius: 20.5px;
    justify-content: space-between;
    padding: 3px 10px 3px 5px;
  }
  .banner-item-link:hover
    .banner-item
    .banner-gradient
    .banner-content
    .banner-link {
    padding-right: 3px;
    justify-content: flex-end;
  }
  .banner-item-link:hover
    .banner-item
    .banner-gradient
    .banner-content
    .banner-link
    .banner-link-icon-wrapper
    .banner-link-text-hover {
    display: block;
    opacity: 1;
  }
  .banner-item-link:hover
    .banner-item
    .banner-gradient
    .banner-content
    .banner-link
    .banner-link-icon-wrapper
    .banner-link-icon
    path {
    stroke: var(--black-project);
  }
  .messages-item:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(800%);
  }
  .new-btn:hover::after {
    opacity: 1;
  }
  .multimedia-slider-not-active:hover {
    background: rgba(0, 0, 0, 0.5);
  }
  .multimedia-btn:hover::after {
    opacity: 1;
  }
  .multimedia-btn:hover span {
    color: #272727;
  }
  .footer-top-bottom-right-link:hover {
    padding-left: 15px;
  }
  .footer-top-bottom-right-link:hover::after {
    opacity: 1;
  }
  .footer-top-bottom-right-link:hover {
    color: #272727;
  }
  .footer-top-bottom-right-link:hover
    .go-green
    .footer-top-bottom-right-link-icon
    path {
    stroke: #272727;
  }
  .footer-top-bottom-right-link:hover .footer-top-bottom-right-link-text {
    color: #272727;
  }
  .footer-top-bottom-right-link:hover span {
    color: #272727;
  }
  .footer-top-bottom-right-email-link:hover {
    color: #00dc33;
  }
  .footer-top-bottom-right-email-link:hover span {
    color: #232323;
  }
  .footer-top-bottom-right-tel-link:hover {
    color: #00dc33;
  }
  .footer-top-bottom-right-tel-link:hover span {
    color: #232323;
  }
  .footer-top-bottom-right-link-app:hover {
    color: #00dc33;
  }
  .footer-top-bottom-right-link-app:hover span {
    color: #232323;
  }
  .footer-form-email-btn:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(800%);
  }
  .footer-form-btn:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(1000%);
  }
  .sponsors-logo-wrapper:hover .sponsors-logo path[fill="#757575"] {
    fill: #00dc33;
  }
  .contact-us-email-link:hover {
    color: #00dc33;
  }
  .contact-us-email-link:hover span {
    color: #232323;
  }
  .contact-us-tel-link:hover {
    color: #00dc33;
  }
  .contact-us-tel-link:hover span {
    color: #232323;
  }
  .contact-us-link-app:hover {
    color: #00dc33;
  }
  .contact-us-link-app:hover span {
    color: #232323;
  }
  .contact-us-form-email-btn:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(800%);
  }
  .popup-btn:hover::after {
    opacity: 1;
  }
}