@import url(./main.css);

/* swiper */

.solution .customers-swiper {
  direction: rtl;
}

.solution .swiper-slide {
  direction: ltr;
}

.swiper-slide {
  opacity: 0.6;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
}

.swiper-button-next,
.swiper-button-prev {
  right: auto;
  left: auto;
  top: auto;
  height: 24px;
  width: 24px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-menu-item.active {
  color: var(--color-second);
  border-left: var(--color-second) 2px solid;
}

/* register */
.steps .step.active .number {
    color: var(--color-second);
    -webkit-text-stroke: var(--color-main);
}

.steps .step .number {
  color: transparent;
  -webkit-text-stroke: 0.6px #fff;
}

.steps .step .number:hover {
  color: var(--color-main);
  -webkit-text-stroke: var(--color-main);
}

.register {
  background: linear-gradient(
      0deg,
      rgba(0, 66, 136, 0.9) 0%,
      rgba(0, 66, 136, 0.9) 100%
    ),
    url(../assets/imgs/register.jpg),
    lightgray 0px -451.605px / 100% 215.947% no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* customers-benefits */
ul.list-benefits li .content {
  transition: max-height 0.5s linear;
  transition-delay: 0ms;
}

ul.list-benefits li.active .title {
  color: #fff;
  background-color: var(--color-main);
}

ul.list-benefits li.active .title span {
  color: #fff;
  background-color: var(--color-second);
}

ul.list-benefits li.active .close {
  display: inline;
}

ul.list-benefits li.active .open {
  display: none;
}

ul.list-benefits li.active .content {
  max-height: 300px;
}

ul.list-benefits li:hover .title {
  color: #fff;
  background-color: var(--color-main);
}

ul.list-benefits li:hover .title span {
  color: #fff;
  background-color: var(--color-second);
}

ul.list-benefits li:hover .close {
  display: inline;
}

ul.list-benefits li:hover .open {
  display: none;
}

/* user  */
.user-swiper-pagination .swiper-pagination-bullet-active {
  /* display: flex; */
  position: relative;
  background-color: var(--color-main);
}

.user-swiper-pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  display: inline-block;
  height: 20px;
  width: 20px;
  left: -6px;
  top: -6px;
  border: 2px var(--color-main) solid;
  border-radius: 9999px;
}