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

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

/* ── 1. Variables ── */
.ebtest1 {
  --eb-navy:          #084784;
  --eb-navy-deep:     #04254d;
  --eb-navy-mid:      #0a5a9e;
  --eb-orange:        #F97708;
  --eb-orange-lt:     #ffa845;

  /* section */
  --eb-bg:            #ffffff;
  --eb-bg-tint:       #f5f8fc;

  /* text */
  --eb-title:         #084784;
  --eb-text:          #3a4a5c;
  --eb-muted:         #7a8fa6;

  /* badge */
  --eb-badge-bg:      rgba(8,71,132,.07);
  --eb-badge-border:  rgba(8,71,132,.18);
  --eb-badge-text:    #084784;

  /* card */
  --eb-card-bg:       #ffffff;
  --eb-card-border:   #e4eaf2;
  --eb-card-hborder:  #F97708;
  --eb-card-shadow:   rgba(8,71,132,.08);
  --eb-card-hshadow:  rgba(8,71,132,.15);
  --eb-card-text:     #3a4a5c;
  --eb-card-title:    #084784;

  /* stars */
  --eb-star-on:       #F97708;
  --eb-star-off:      #d8e2ed;

  /* quote */
  --eb-quote-clr:     rgba(249,119,8,.25);

  /* avatar */
  --eb-avatar-bg:     rgba(8,71,132,.08);
  --eb-avatar-border: rgba(8,71,132,.20);
  --eb-avatar-text:   #084784;

  /* arrows */
  --eb-btn-bg:        #ffffff;
  --eb-btn-border:    #d0dce9;
  --eb-btn-text:      #084784;
  --eb-btn-hbg:       #084784;
  --eb-btn-hborder:   #084784;
  --eb-btn-htext:     #ffffff;
  --eb-btn-glow:      rgba(8,71,132,.25);

  /* dots */
  --eb-dot-off:       #c8d8e8;
  --eb-dot-on:        #F97708;

  --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,.05)  0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(249,119,8,.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,.06);
  box-shadow:
    0 0 0 3.5rem rgba(8,71,132,.03),
    0 0 0 7rem   rgba(249,119,8,.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: .45rem;
  background: var(--eb-badge-bg);
  border: 1px solid var(--eb-badge-border);
  color: var(--eb-badge-text);
  font-size: clamp(.72rem, 2.5vw, .8rem);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .38rem 1.1rem;
  border-radius: 2rem;
  margin-bottom: 1.1rem;
}

/* pulse dot */
.ebtest1__badge::before {
  content: '';
  display: inline-block;
  width: .4rem; height: .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: .3; transform: scale(.5); }
}

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

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

.ebtest1__subtitle {
  font-size: clamp(.88rem, 3vw, .98rem);
  color: var(--eb-muted);
}

/* ── 7. Slider wrapper ── */
.ebtest1__slider-wrapper {
  overflow: hidden;
  padding: .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 .48s cubic-bezier(.22,.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 .4rem 1.8rem var(--eb-card-shadow);
  position: relative;
  overflow: hidden;
  transition:
    transform    .35s cubic-bezier(.22,.68,0,1.15),
    border-color .3s ease,
    box-shadow   .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 .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,.07) 0%, transparent 70%);
  pointer-events: none;
  transition: transform .5s ease;
}

.ebtest1__card:hover {
  transform: translateY(-.4rem);
  border-color: var(--eb-card-hborder);
  box-shadow:
    0 1rem 3rem var(--eb-card-hshadow),
    0 0 0 1px rgba(249,119,8,.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: .75;
  color: var(--eb-quote-clr);
  align-self: flex-start;
  pointer-events: none;
  user-select: none;
}

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

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

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

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

/* ── 13. Author ── */
.ebtest1__author {
  display: flex;
  align-items: center;
  gap: .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(.72rem, 2.5vw, .82rem);
  font-weight: 700;
  color: var(--eb-avatar-text);
  letter-spacing: .02em;
}

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

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

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

.ebtest1__role {
  font-size: clamp(.7rem, 2.5vw, .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: .45rem;
  margin-top: 1.75rem;
}

.ebtest1__dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--eb-dot-off);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background    .3s ease,
    width         .38s cubic-bezier(.34,1.56,.64,1),
    border-radius .38s cubic-bezier(.34,1.56,.64,1);
}

.ebtest1__dot.ebtest1--active {
  background: var(--eb-dot-on);
  width: 1.5rem;
  border-radius: .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(--eb-btn-border);
  background: var(--eb-btn-bg);
  color: var(--eb-btn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background    .25s ease,
    border-color  .25s ease,
    color         .25s ease,
    transform     .2s ease,
    box-shadow    .25s ease;
}

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

.ebtest1__arrow:active {
  transform: scale(.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; }
}