/*@import "tailwindcss";*/

/* -------------------- pagination -------------------- */
.pagination-services .pagination-elements,
.pagination-specialists .pagination-elements {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  border-radius: 12px;
  padding: 0px;
}

@media (max-width: 1024px) {
  .pagination-services .pagination-elements,
  .pagination-specialists .pagination-elements {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* -------------------- Stepper -------------------- */
.stepper-root .step--card {
  box-shadow: 0 0 0 0.2px #00000033;
  transition: box-shadow 300ms ease;
}

.stepper-root .step--card:hover {
  box-shadow: 0 0 0 0.2px #00000012, 0 3px 12px #00000012;
}

.step-divider {
  background: #cfd6dc;
  height: 1px;
  flex: 0 0 50px;
  flex-shrink: 0;
}

/* -------------------- Search Filed -------------------- */
.search-field {
  position: relative;
}

.search-input {
  width: 370px;
  transition: all 350ms ease;

  padding: 13px 24px 13px 52px;
  border-radius: 500px;
  font-size: 14px;
  color: #3e3e3e;
  outline: none;
  background-color: #ffffffb2;
  box-shadow: 0 2px 4px #6666662f;
  text-transform: capitalize;
}

.search-input:focus {
  box-shadow: 0 2px 8px #6666662f;
  width: 450px;
}

.search-input::placeholder {
  color: #00000080;
}

.search-input:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #00000080;
  cursor: pointer;
  z-index: 1;
}

.search-icon:hover {
  color: #5b21a6;
}

html[dir="rtl"] .search-icon {
  right: 12px;
  left: auto;
}
html[dir="rtl"] .search-input {
  padding-right: 38px;
  padding-left: 14px;
}

@media (max-width: 768px) {
  .search-input {
    width: 100%;
  }

  .search-input:focus {
    box-shadow: 0 2px 8px #6666662f;
    width: 100%;
  }
}
/* ---------- Gallery Tab: Swiper Button ---------- */
.gallery-prev.swiper-button-disabled,
.gallery-next.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* -------------------- Card Photo -------------------- */
.card-photo {
  flex: 0 0 clamp(160px, 37.2%, 300px);
  width: 100%;
  aspect-ratio: 205 / 155;
  border-radius: 16px;
  overflow: hidden;
}

.card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1023px) {
  .card-photo {
    aspect-ratio: 205 / 155;
  }
}

@media (max-width: 768px) {
  .card-photo {
    aspect-ratio: 205 / 155;
    aspect-ratio: 205 / 135;
  }
}

.clamp-2 {
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.clamp-3 {
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
  .clamp-2 {
    line-height: 1.25;
  }

  .clamp-3 {
    line-height: 1.25;
  }
}
