/* ============================================================
   ebsrv11 — Services Cards Section
   Namespace  : ebsrv11
============================================================ */

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

/* 1. Variables & Colors */
.ebsrv11 {

  /* Section */
  --ebsrv11-bg:            #f0f2f5;
  --ebsrv11-padding-top:   2rem;
  --ebsrv11-padding-bottom:2rem;

  /* Card */
  --ebsrv11-card-bg:       #ffffff;
  --ebsrv11-card-title:    #154f6b;
  --ebsrv11-card-text:     #555e6a;
  --ebsrv11-card-border:   #e2e7ed;
  --ebsrv11-card-shadow:   0 0.125rem 0.75rem rgba(0,0,0,0.07);
  --ebsrv11-card-radius:   1rem;

  /* Arrow button */
  --ebsrv11-arrow-bg:      #1e7fa0;
  --ebsrv11-arrow-icon:    #ffffff;
  --ebsrv11-arrow-hover-bg:#154f6b;

  /* Icon image */
  --ebsrv11-icon-size:     3rem;
  --ebsrv11-icon-ratio:    1 / 1;
}

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

/* 3. Base Styles — Mobile */
.ebsrv11 {
  font-family: "El Messiri", sans-serif;
  background: var(--ebsrv11-bg);
  padding-top: var(--ebsrv11-padding-top);
  padding-bottom: var(--ebsrv11-padding-bottom);
  direction: ltr;
}

.ebsrv11__container {
  width: 92%;
  max-width: 75rem;
  margin-inline: auto;
}

.ebsrv11__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ── Card ── */
.ebsrv11__card {
  display: flex;
  flex-direction: column;
  background: var(--ebsrv11-card-bg);
  border: 0.0625rem solid var(--ebsrv11-card-border);
  border-radius: var(--ebsrv11-card-radius);
  padding: 0.6rem 1rem 0.6rem  1rem ;
  box-shadow: var(--ebsrv11-card-shadow);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.ebsrv11__card:hover {
  box-shadow: 0 0.375rem 1.5rem rgba(0,0,0,0.12);
  transform: translateY(-0.15rem);
}

/* ── Card Top: icon + title side by side ── */
.ebsrv11__card-top {
  display: flex;
  align-items: center;
}

.ebsrv11__card-icon {
  width: var(--ebsrv11-icon-size);
  aspect-ratio: var(--ebsrv11-icon-ratio);
  object-fit: contain;
  flex-shrink: 0;
}

.ebsrv11__card-title {
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 700;
  color: var(--ebsrv11-card-title);
  line-height: 1.3;
}

/* ── Card Bottom: desc + arrow ── */
.ebsrv11__card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ebsrv11__card-desc {
  font-size: clamp(0.82rem, 3.2vw, 0.95rem);
  color: var(--ebsrv11-card-text);
  line-height: 1.5;
}

.ebsrv11__card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ebsrv11-arrow-bg);
  color: var(--ebsrv11-arrow-icon);
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.ebsrv11__card:hover .ebsrv11__card-arrow {
  background: var(--ebsrv11-arrow-hover-bg);
}

/* 4. Breakpoints */
@media (min-width: 481px) {
  .ebsrv11__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 769px) {
  .ebsrv11 {
    --ebsrv11-padding-top: 3.5rem;
    --ebsrv11-padding-bottom: 3.5rem;
    --ebsrv11-icon-size: 3.5rem;
  }
  .ebsrv11__grid {
    gap: 1.25rem;
  }
}

@media (min-width: 1025px) {
  .ebsrv11 {
    --ebsrv11-padding-top: 4.5rem;
    --ebsrv11-padding-bottom: 4.5rem;
    --ebsrv11-icon-size: 4rem;
  }
  .ebsrv11__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
  .ebsrv11__card {
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

@media (min-width: 1281px) {
  .ebsrv11__grid {
    gap: 1.75rem;
  }
}

@media (min-width: 1441px) {
  .ebsrv11 {
    --ebsrv11-padding-top: 5rem;
    --ebsrv11-padding-bottom: 5rem;
    --ebsrv11-icon-size: 4.5rem;
  }
}