/* ============================================================
   ebtest1 — Testimonials Slider
   Namespace  : ebtest1
   Theme      : White bg · #084784 navy · var(--primaryColor) orange
   Font       : El Messiri (RTL)
============================================================ */

@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;600;700&display=swap");

/* ── 1. Variables ── */
.ebtest1 {
  /* Main Theme */
  --eb-primary: var(--primaryColor);
  --eb-primary-light: #ff9b42;
  --eb-primary-soft: rgba(249, 119, 8, 0.12);

  --eb-secondary: var(--middleColor);
  --eb-secondary-dark: #23272d;
  --eb-secondary-light: #5a616b;
  --eb-secondary-soft: rgba(57, 62, 70, 0.08);

  /* Section */
  --eb-bg: #ffffff;
  --eb-bg-tint: #fafafa;

  /* Text */
  --eb-title: var(--middleColor);
  --eb-text: #555;
  --eb-muted: #888;

  /* Badge */
  --eb-badge-bg: var(--eb-primary-soft);
  --eb-badge-border: rgba(249, 119, 8, 0.25);
  --eb-badge-text: var(--middleColor);

  /* Card */
  --eb-card-bg: #ffffff;
  --eb-card-border: #ececec;
  --eb-card-hborder: var(--primaryColor);
  --eb-card-shadow: rgba(57, 62, 70, 0.08);
  --eb-card-hshadow: rgba(57, 62, 70, 0.18);
  --eb-card-text: #555;
  --eb-card-title: var(--middleColor);

  /* Stars */
  --eb-star-on:#F97708  ;
  --eb-star-off: #d8d8d8;

  /* Quote */
  --eb-quote-clr: rgba(249, 119, 8, 0.2);

  /* Avatar */
  --eb-avatar-bg: rgba(57, 62, 70, 0.08);
  --eb-avatar-border: rgba(57, 62, 70, 0.15);
  --eb-avatar-text: var(--middleColor);

  /* Buttons */
  --eb-btn-bg: #ffffff;
  --eb-btn-border: #d8d8d8;
  --eb-btn-text: var(--middleColor);
  --eb-btn-hbg: var(--primaryColor);
  --eb-btn-hborder: var(--primaryColor);
  --eb-btn-htext: #ffffff;
  --eb-btn-glow: rgba(249, 119, 8, 0.3);

  /* Dots */
  --eb-dot-off: #d6d6d6;
  --eb-dot-on: var(--primaryColor);

  --eb-pt: 5rem;
  --eb-pb: 5rem;
}

/* ── 2. Reset ── */
*,
.ebtest1 *,
.ebtest1 *::before,
.ebtest1 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── 3. Root ── */
.ebtest1 {
  font-family: "El Messiri", sans-serif;
  direction: rtl;
  background: var(--eb-bg);
  padding-top: var(--eb-pt);
  padding-bottom: var(--eb-pb);
  overflow: hidden;
  position: relative;
}

.ebtest1 a {
  text-decoration: none;
  color: inherit;
}

/* ── 4. Subtle background texture ── */
.ebtest1::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 90% 10%,
      rgba(8, 71, 132, 0.05) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 50% at 10% 90%,
      rgba(249, 119, 8, 0.06) 0%,
      transparent 70%
    );
}

/* decorative ring — top right */
.ebtest1::after {
  content: "";
  position: absolute;
  top: -6rem;
  right: -6rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  border: 1.5px solid rgba(8, 71, 132, 0.06);
  box-shadow:
    0 0 0 3.5rem rgba(8, 71, 132, 0.03),
    0 0 0 7rem rgba(249, 119, 8, 0.025);
  pointer-events: none;
  z-index: 0;
}

/* ── 5. Container ── */
.ebtest1__container {
  width: 92%;
  max-width: 76rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── 6. Header ── */
.ebtest1__header {
  text-align: center;
  margin-bottom: 3rem;
}

.ebtest1__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--eb-badge-bg);
  border: 1px solid var(--eb-badge-border);
  color: var(--middleColor);
  font-size: clamp(0.72rem, 2.5vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.38rem 1.1rem;
  border-radius: 2rem;
  margin-bottom: 1.1rem;
}

/* pulse dot */
.ebtest1__badge::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--eb-orange);
  flex-shrink: 0;
  animation: eb1Pulse 2.2s ease-in-out infinite;
}

@keyframes eb1Pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.5);
  }
}

.ebtest1__title {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 700;
  color: var(--primaryColor);
  line-height: 1.25;
  margin-bottom: 0.65rem;
}

/* highlight span — wrap part of title in <span> for orange accent */
.ebtest1__title-accent {
  color: var(--eb-orange);
}

.ebtest1__subtitle {
  font-size: clamp(0.88rem, 3vw, 0.98rem);
  color: var(--primaryColor);
}

/* ── 7. Slider wrapper ── */
.ebtest1__slider-wrapper {
  overflow: hidden;
  padding: 0.75rem 0 1.25rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

.ebtest1__slider-wrapper.ebtest1--grabbing {
  cursor: grabbing;
}

/* ── 8. Track ── */
.ebtest1__track {
  display: flex;
  direction: ltr;
  gap: 0.5rem;
  will-change: transform;
  transition: transform 0.48s cubic-bezier(0.22, 0.68, 0, 1.15);
}

.ebtest1__track--no-anim {
  transition: none;
}

/* ── 9. Card ── */
.ebtest1__card {
  direction: rtl;
  flex: 0 0 82vw;
  max-width: 23rem;
  background: var(--eb-card-bg);
  border: 1.5px solid var(--eb-card-border);
  border-radius: 1.4rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 0.4rem 1.8rem var(--eb-card-shadow);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.15),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* orange top accent line on hover */
.ebtest1__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--eb-orange),
    transparent
  );
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* subtle navy corner glow */
.ebtest1__card::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: -3rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(8, 71, 132, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
  transition: transform 0.5s ease;
}

.ebtest1__card:hover {
  transform: translateY(-0.4rem);
  border-color: var(--eb-card-hborder);
  box-shadow:
    0 1rem 3rem var(--eb-card-hshadow),
    0 0 0 1px rgba(249, 119, 8, 0.15);
}

.ebtest1__card:hover::before {
  opacity: 1;
}
.ebtest1__card:hover::after {
  transform: scale(1.6);
}

/* ── 10. Quote icon ── */
.ebtest1__quote-icon {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.8rem;
  line-height: 0.75;
  color: var(--eb-quote-clr);
  align-self: flex-start;
  pointer-events: none;
  user-select: none;
}

/* ── 11. Body text ── */
.ebtest1__text {
  font-size: clamp(0.84rem, 3.2vw, 0.93rem);
  color: var(--eb-card-text);
  line-height: 1.9;
  flex: 1;
}

/* ── 12. Stars ── */
.ebtest1__stars {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.12rem;
}

.ebtest1__star {
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  color: var(--eb-star-off);
  line-height: 1;
  transition: color 0.2s;
}

.ebtest1__star--filled {
  color: var(--eb-star-on);
}

/* ── 13. Author ── */
.ebtest1__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid #eaf0f7;
}

/* Avatar — initials or <img> logo */
.ebtest1__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--eb-avatar-bg);
  border: 1px solid var(--eb-avatar-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: clamp(0.72rem, 2.5vw, 0.82rem);
  font-weight: 700;
  color: var(--eb-avatar-text);
  letter-spacing: 0.02em;
}

.ebtest1__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.35rem;
}

.ebtest1__author-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ebtest1__name {
  font-size: clamp(0.86rem, 3vw, 0.95rem);
  font-weight: 700;
  color: var(--eb-card-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.ebtest1__role {
  font-size: clamp(0.7rem, 2.5vw, 0.78rem);
  color: var(--eb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── 14. Dots ── */
.ebtest1__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.75rem;
}

.ebtest1__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--eb-dot-off);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.3s ease,
    width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ebtest1__dot.ebtest1--active {
  background: var(--eb-dot-on);
  width: 1.5rem;
  border-radius: 0.3rem;
}

/* ── 15. Arrows ── */
.ebtest1__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.ebtest1__arrow {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  border: 1.5px solid var(--primaryColor);
  background: var(--eb-btn-bg);
  color: var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

.ebtest1__arrow:hover {
  background: var(--primaryColor);
  border-color: var(--eb-btn-hborder);
  color: var(--white);
  transform: scale(1.12);
  box-shadow: 0 0 1rem var(--eb-btn-glow);
}

.ebtest1__arrow:active {
  transform: scale(0.9);
}

.ebtest1__arrow svg {
  pointer-events: none;
  width: 1.1rem;
  height: 1.1rem;
}

/* ── 16. Breakpoints ── */
@media (min-width: 481px) {
  .ebtest1__card {
    flex: 0 0 54vw;
  }
}

@media (min-width: 601px) {
  .ebtest1 {
    --eb-pt: 5.5rem;
    --eb-pb: 5.5rem;
  }
  .ebtest1__card {
    flex: 0 0 40vw;
  }
}

@media (min-width: 769px) {
  .ebtest1 {
    --eb-pt: 6rem;
    --eb-pb: 6rem;
  }
  .ebtest1__card {
    flex: 0 0 30vw;
  }
}

@media (min-width: 1025px) {
  .ebtest1 {
    --eb-pt: 6.5rem;
    --eb-pb: 6.5rem;
  }
  .ebtest1__card {
    flex: 0 0 23vw;
  }
  .ebtest1__arrow {
    width: 3rem;
    height: 3rem;
  }
}

@media (min-width: 1281px) {
  .ebtest1__card {
    flex: 0 0 19vw;
  }
}

@media (min-width: 1441px) {
  .ebtest1 {
    --eb-pt: 7rem;
    --eb-pb: 7rem;
  }
  .ebtest1__card {
    flex: 0 0 16vw;
  }
}

@media (min-width: 1921px) {
  .ebtest1 {
    --eb-pt: 8rem;
    --eb-pb: 8rem;
  }
}