.bg-animal-header {
  background-image: url(../../image/bitasia/images/Group1.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
html.dark .bg-animal-header {
  background-image: url(../../image/bitasia/images/group1Dark.png) !important;
}
.bg-active-tab {
  position: absolute;
  width: 12rem;
  height: 40px;
  background: white;
  border: 1px solid rgb(228, 225, 225);
  transform: translate(100%, 0px);
  z-index: 1;
  border-radius: 8px;
  transition: all .3s;
}

.bg-active-tab.tabProfitable {
  transform: translate(100%, 0px) !important;
}
.bg-active-tab.tabPopular {
  transform: translate(0%, 0px) !important;
}
.bg-active-tab.latest {
  transform: translate(-100%, 0px) !important;
}
html[dir="ltr"] .bg-active-tab {
  transform: translate(-100%, 0px) !important;
}
html[dir="ltr"] .bg-active-tab.tabProfitable {
  transform: translate(-100%, 0px) !important;
}
html[dir="ltr"] .bg-active-tab.tabPopular {
  transform: translate(0%, 0px) !important;
}
html[dir="ltr"] .bg-active-tab.latest {
  transform: translate(100%, 0px) !important;
}

.coin-row td {
  width: 10rem;
}
.buttons-tab-table button.active {
  color: var(--color-teal);
}
html.dark .buttons-tab-table button.active {
  color: #a4cafe;
}
html.dark .bg-active-tab {
  background: var(--text-grayCustom-600) !important;
  border: none;
}
#accordion-collapse h2>button[aria-expanded="false"] {
  margin-bottom: 10px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
.coin-row tbody tr:last-child td:first-child {
  border-bottom-right-radius: 0.75rem;
}
html[dir="ltr"] .coin-row tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.75rem;
}
.coin-row tbody tr:last-child td:last-child {
  border-bottom-left-radius: 0.75rem;
}
html[dir="ltr"] .coin-row tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.75rem;
}
.triangle-small::after {
  content: url(../../image/bitasia/images/VectorAboutUs2.svg);
  position: absolute;
  animation: 4s linear 0s infinite alternate shape-triangle;
}
.triangle-large::after {
  content: url(../../image/bitasia/images/VectorAboutUs1.svg);
  position: absolute;
  animation: 4s linear 0s infinite alternate shape-triangle;
}
html.dark .triangle-small::after {
  content: url(../../image/bitasia/images/triangle-small-dark.svg);
  position: absolute;
  animation: 4s linear 0s infinite alternate shape-triangle;
}
html.dark .triangle-large::after {
  content: url(../../image/bitasia/images/Vectordark.svg);
  position: absolute;
  animation: 4s linear 0s infinite alternate shape-triangle;
}

@keyframes shape-triangle {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
  }
}

.steps-join-job::after {
  content: "";
  position: absolute;
  right: 70px;
  top: 30%;
  height: 5px;
  background: white;
  width: 90%;
  z-index: -1;
}
html.dark .steps-join-job::after {
  background: #374151;
}

@media screen and (max-width:768px) {
  .bg-animal-header {
    background-size: 140%;
    height: 500px;
  }
  .steps-join-job::after {
    content: "";
    position: absolute;
    right: 38px;
    top: 5%;
    height: 90%;
    background: white;
    width: 5px;
    z-index: -1;
  }
}
@media screen and (max-width: 1440px) {
  .bg-animal-header {
    background-size: 140%;
  }
}
.container-gift {
  background-image: url(../../../coinex/image/bitasia/images/gif.png);
  position: absolute;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}
.list-get-profit {
  transition: all .3s;
}
.button-selected button.active {
  border-color: #155eef;
  color: #155eef;
}
.label-card.active {
  color: #155eef;
}

  .swiper {
    width: 100%;
    height: 150px;
    margin: 20px auto;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; /* عرض کارت‌ها برابر با عرض کانتینر */
  }
  .blurSwiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    backdrop-filter: blur(6px); /* کدر کردن */
    box-shadow: 8px 10px 16px 0px rgba(0, 0, 0, 0.05); /* سایه */
    background: linear-gradient(112.91deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0) 111.71%);
    border: 1px solid;
    border-image-source: linear-gradient(110.65deg, #FFFFFF 1.16%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 0.75rem;
    overflow: hidden;
  }







  .custom-shadow {
    box-shadow: rgba(191, 219, 254, 0.12) 0px 2px 4px 0px, rgba(191, 219, 254, 0.32) 0px 2px 16px 0px;
  }
  .custom-shadow1{
    box-shadow: 0px 4px 20px 0px rgba(54, 63, 114, 0.251);
  }
  .shadowBox{
    box-shadow: 0px 4px 20px 0px rgba(54, 63, 114, 0.25);

  }


  @keyframes move {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(2rem);
    }
  }


  .triangle {
    animation: move 4s infinite alternate;
  }

  .triangle-wrapper {
    position: absolute;
  }
  [dir="ltr"] .changDir{
    right: 2px;
    left: auto;
  }

  html.dark tr:hover td{
    background: none !important
  }
  tr:hover td{
    background: none !important
  }

  .chart1{
    width: 100%;
    height: 50px !important;
  }

select{
  appearance:auto !important
}
.shadowslide{
  box-shadow: 0px 4px 20px 0px rgba(54, 63, 114, 0.251);

}
.steps-join::after {
  content: "";
  position: absolute;
  top: 0;
  right: 25px;
  z-index: -1;
  width: 5px;
  height: 100%;
  background: var(--white-color);

}

html.dark .steps-join::after{
  background: var(--bg-dark-card);
}

@media screen and (min-width:768px) {
  .steps-join::after {
    content: "";
    position: absolute;
    top: 30%;
    left: 60px;
    right: 35px !important;
    width: 86%;
    height: 10px;
  }
  .language-item-bit a.active {
    color: var(--text-blue-dark-200);
}
}
.active-2 .arrow-svg {
  transform: rotate(90deg);
  fill: var(--text-blue-dark-200) !important;
}

.active-2 .acctive-item {
  color: var(--text-blue-dark-200);
}

html.dark .accordion-menu-bit svg {
  fill: #ffff;
}

.accordion-menu-bit svg {
  fill: black;
}

.shadow-border{
  box-shadow: -1px 2px 8px 0px rgba(0, 0, 0, 0.25);
}

.container-image::before{
  content: url(../../image/bitasia/images/gift.svg) ;
  position: absolute;
  left: -18px;
  top: -90px;
}

@media screen and (max-width:768px) {
  .container-image::before{
    content: url(../../image/bitasia/images/gift2.svg) ;
    position: absolute;
    left: -18px;
    top: -60px;
  }
}