@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap");
/* 1. Variables & Colors */
.ebsrv16 {
  --ebsrv16-bg: #f7f9f5;
  --ebsrv16-text: #5c6154;
  --ebsrv16-title: #33342e;
  --ebsrv16-subtitle: #6f7566;
  --ebsrv16-eyebrow-text: #4c5a41;
  --ebsrv16-eyebrow-bg: rgba(107, 125, 95, 0.12);
  --ebsrv16-eyebrow-border: rgba(107, 125, 95, 0.25);

  --ebsrv16-shape1-color: rgba(107, 125, 95, 0.14);
  --ebsrv16-shape2-color: rgba(201, 138, 99, 0.16);
  --ebsrv16-shape3-color: rgba(107, 125, 95, 0.08);

  --ebsrv16-card-bg: #ffffff;
  --ebsrv16-card-bg-hover: #fdfbf8;
  --ebsrv16-card-border: rgba(107, 125, 95, 0.14);
  --ebsrv16-card-border-hover: rgba(201, 138, 99, 0.4);
  --ebsrv16-card-title: #ffffff;
  --ebsrv16-card-text: #6b7060;
  --ebsrv16-card-corner: #c98a63;
  --ebsrv16-card-scanline: rgba(107, 125, 95, 0.2);
  --ebsrv16-card-icon-bg: rgba(201, 138, 99, 0.15);
  --ebsrv16-card-icon: #c98a63;
  --ebsrv16-card-img-overlay: rgba(51, 52, 46, 0.38);
  --ebsrv16-card-spotlight: rgba(107, 125, 95, 0.1);

  --ebsrv16-btn-text: #ffffff;
  --ebsrv16-btn-icon: #ffffff;
  --ebsrv16-btn-bg: #c98a63;
  --ebsrv16-btn-border: #c98a63;
  --ebsrv16-btn-text-hover: #33342e;
  --ebsrv16-btn-icon-hover: #33342e;
  --ebsrv16-btn-bg-hover: #eef1e9;
  --ebsrv16-btn-border-hover: #33342e;

  --ebsrv16-padding-top: 4.5rem;
  --ebsrv16-padding-bottom: 5.5rem;

  --ebsrv16-px: 50%;
  --ebsrv16-py: 50%;
  --ebsrv16-rx: 0deg;
  --ebsrv16-ry: 0deg;
}

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

/* 2. Reset داخل الـ namespace */
.ebsrv16,
.ebsrv16 *,
.ebsrv16 *::before,
.ebsrv16 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 3. Base Styles — Mobile */
.ebsrv16 {
  position: relative;
  overflow: hidden;
  background: var(--ebsrv16-bg);
  color: var(--ebsrv16-text);
  font-family: "El Messiri", sans-serif;
  padding-top: var(--ebsrv16-padding-top);
  padding-bottom: var(--ebsrv16-padding-bottom);
  direction: rtl;
}

.ebsrv16__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(2.5rem);
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}
.ebsrv16__shape-1 {
  width: 18rem;
  height: 14rem;
  top: -3rem;
  left: -5rem;
  background: var(--ebsrv16-shape1-color);
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
}
.ebsrv16__shape-2 {
  width: 13rem;
  height: 13rem;
  bottom: -2rem;
  right: -3rem;
  background: var(--ebsrv16-shape2-color);
}
.ebsrv16__shape-3 {
  width: 8rem;
  height: 8rem;
  top: 55%;
  right: 12%;
  background: var(--ebsrv16-shape3-color);
}

.ebsrv16__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ebsrv16__header {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 3.2rem;
}

.ebsrv16__eyebrow {
  display: inline-block;
  font-size: clamp(0.72rem, 3vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ebsrv16-eyebrow-text);
  background: var(--ebsrv16-eyebrow-bg);
  border: 0.06rem solid var(--ebsrv16-eyebrow-border);
  border-radius: 3rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1.1rem;
}

.ebsrv16__title {
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  font-weight: 600;
  color: var(--ebsrv16-title);
  line-height: 1.3;
  margin-bottom: 0.9rem;
}

.ebsrv16__subtitle {
  font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  color: var(--ebsrv16-subtitle);
  line-height: 1.8;
}


.ebsrv16__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  justify-content: center;
  align-items: start;
}

.ebsrv16__card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(1.6rem);
  animation: ebsrv16-fade-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  perspective: 70rem;
}
.ebsrv16__card:nth-child(1) { animation-delay: 0.05s; }
.ebsrv16__card:nth-child(2) { animation-delay: 0.18s; }
.ebsrv16__card:nth-child(3) { animation-delay: 0.31s; }
.ebsrv16__card:nth-child(4) { animation-delay: 0.44s; }
.ebsrv16__card:nth-child(5) { animation-delay: 0.57s; }
.ebsrv16__card:nth-child(6) { animation-delay: 0.7s; }

@keyframes ebsrv16-fade-in {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: translateY(0); }
}

.ebsrv16__card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2.4rem;
  box-shadow: 0 0.9rem 2.4rem rgba(51, 52, 46, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.ebsrv16__card:hover .ebsrv16__card-inner {
  box-shadow: 0 1.4rem 3.2rem rgba(51, 52, 46, 0.16);
}

@media (hover: hover) and (pointer: fine) {
  .ebsrv16__card:hover .ebsrv16__card-inner {
    transform: rotateY(180deg);
  }
}
.ebsrv16__card.ebsrv16--flipped .ebsrv16__card-inner {
  transform: rotateY(180deg);
}

.ebsrv16__card-media,
.ebsrv16__card-body {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 2.4rem;
  overflow: hidden;
}


.ebsrv16__card-media {
  border: 0.06rem solid var(--ebsrv16-card-border);
}
.ebsrv16__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ebsrv16__card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--ebsrv16-card-img-overlay) 10%, transparent 55%);
}
.ebsrv16__card-title {
  position: absolute;
  right: 1.3rem;
  bottom: 1.2rem;
  left: 1.3rem;
  z-index: 1;
  font-size: clamp(1.1rem, 4.2vw, 1.3rem);
  font-weight: 700;
  color: var(--ebsrv16-card-title);
}

.ebsrv16__card-body {
  transform: rotateY(180deg);
  background: var(--ebsrv16-card-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.8rem;
  text-align: center;
  align-items: center;
}

.ebsrv16__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--ebsrv16-card-icon-bg);
  color: var(--ebsrv16-card-icon);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

.ebsrv16__card-text {
  font-size: clamp(0.86rem, 3.4vw, 0.94rem);
  color: var(--ebsrv16-card-text);
  line-height: 1.75;
  margin-bottom: 1.4rem;
}


.ebsrv16__card-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(0.82rem, 3.2vw, 0.9rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--ebsrv16-btn-text);
  background: var(--ebsrv16-btn-bg);
  border: 0.1rem solid var(--ebsrv16-btn-border);
  border-radius: 2rem;
  padding: 0.65rem 1.4rem;
  box-shadow: 0 0.4rem 1rem rgba(201, 138, 99, 0.25);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ebsrv16__card-btn-icon {
  color: var(--ebsrv16-btn-icon);
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}
.ebsrv16__card-btn:hover,
.ebsrv16__card-btn:focus-visible {
  color: var(--ebsrv16-btn-text-hover);
  background: var(--ebsrv16-btn-bg-hover);
  border-color: var(--ebsrv16-btn-border-hover);
  box-shadow: 0 0.6rem 1.4rem rgba(51, 52, 46, 0.15);
  transform: translateY(-0.15rem);
}
.ebsrv16__card-btn:hover .ebsrv16__card-btn-icon,
.ebsrv16__card-btn:focus-visible .ebsrv16__card-btn-icon {
  color: var(--ebsrv16-btn-icon-hover);
  transform: translateX(-0.3rem);
}

.ebsrv16__ripple {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(1);
  animation: ebsrv16-ripple 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes ebsrv16-ripple {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}

.ebsrv16__dots {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ebsrv16__card {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ebsrv16__card-inner {
    transition: none;
  }
}


@media (min-width: 601px) {
  .ebsrv16 {
    --ebsrv16-padding-top: 5rem;
    --ebsrv16-padding-bottom: 6rem;
  }
  .ebsrv16__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .ebsrv16__card {
    max-width: none;
  }
}

@media (min-width: 1025px) {
  .ebsrv16 {
    --ebsrv16-padding-top: 6rem;
    --ebsrv16-padding-bottom: 7rem;
  }
  .ebsrv16__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
  }

  .ebsrv16__card:nth-child(3n+2) {
    transform: translateY(2rem);
  }
}

@media (min-width: 1281px) {
  .ebsrv16__container {
    padding: 0 2.5rem;
  }
}

@media (min-width: 1441px) {
  .ebsrv16 {
    --ebsrv16-padding-top: 7rem;
    --ebsrv16-padding-bottom: 8rem;
  }
}

@media (min-width: 1921px) {
  .ebsrv16__container {
    max-width: 100rem;
  }
}