/* ================================================================
   SECTION: Detailed services — atmospheric light treatment
   Adds depth to the light section and highlights service titles.
   Shared by the English and Arabic homepages.
   ================================================================ */

.service-details-section {
  isolation: isolate;
  background: #fff !important;
}

.service-details-section::before {
  display: none !important;
}

.service-details-section::after {
  display: none !important;
}

.service-details-header p,
.service-detail-card > span {
  color: #078d88 !important;
}

.service-details-header p {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(22, 121, 223, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}

.service-detail-card {
  --service-rgb: 24, 119, 246;
  --service-secondary-rgb: 78, 181, 255;
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--service-rgb), .3) !important;
  background:
    linear-gradient(145deg, rgba(var(--service-rgb), .19), rgba(255, 255, 255, .9) 52%, rgba(var(--service-secondary-rgb), .13)) !important;
  box-shadow: 0 24px 70px rgba(31, 74, 105, .07);
}

.service-detail-card:nth-child(2) {
  --service-rgb: 0, 173, 181;
  --service-secondary-rgb: 33, 214, 194;
}

.service-detail-card:nth-child(3) {
  --service-rgb: 115, 82, 219;
  --service-secondary-rgb: 164, 118, 242;
}

.service-detail-card:nth-child(4) {
  --service-rgb: 238, 102, 76;
  --service-secondary-rgb: 255, 143, 103;
}

.service-detail-card:nth-child(5) {
  --service-rgb: 221, 151, 34;
  --service-secondary-rgb: 246, 190, 75;
}

.service-detail-card:nth-child(6) {
  --service-rgb: 38, 153, 104;
  --service-secondary-rgb: 74, 194, 139;
}

/* Animated colour lives inside each card, below its content. */
.service-detail-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -38%;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(ellipse at 25% 32%, rgba(var(--service-rgb), .52) 0, rgba(var(--service-rgb), .24) 27%, rgba(var(--service-rgb), .07) 43%, transparent 59%),
    radial-gradient(ellipse at 72% 68%, rgba(var(--service-secondary-rgb), .36) 0, rgba(var(--service-secondary-rgb), .1) 29%, transparent 52%),
    radial-gradient(ellipse at 70% 18%, rgba(255, 255, 255, .42) 0, transparent 40%);
  filter: blur(20px);
  transform: translate3d(-5%, -3%, 0) rotate(0deg) scale(1.05);
  animation: serviceCardFlow 12s ease-in-out infinite alternate;
  transition: opacity .45s ease;
  will-change: transform;
}

.service-detail-card > * {
  position: relative;
  z-index: 1;
}

.service-detail-card:nth-child(2n)::after {
  animation-name: serviceCardFlowReverse;
  animation-duration: 15s;
  animation-delay: -5s;
}

.service-detail-card:nth-child(3n)::after {
  animation-duration: 18s;
  animation-delay: -9s;
}

.service-detail-card:hover::after {
  opacity: .92;
}

@keyframes serviceCardFlow {
  0% { transform: translate3d(-7%, -4%, 0) rotate(-4deg) scale(1.03); }
  50% { transform: translate3d(6%, 3%, 0) rotate(3deg) scale(1.12); }
  100% { transform: translate3d(-1%, 8%, 0) rotate(-1deg) scale(1.07); }
}

@keyframes serviceCardFlowReverse {
  0% { transform: translate3d(7%, -5%, 0) rotate(4deg) scale(1.08); }
  50% { transform: translate3d(-6%, 6%, 0) rotate(-3deg) scale(1.03); }
  100% { transform: translate3d(2%, -1%, 0) rotate(2deg) scale(1.13); }
}

.service-detail-card h3 {
  color: #0a1110 !important;
  font-weight: 600 !important;
}

.service-detail-card p {
  color: #63706f !important;
}

.service-detail-card > span {
  color: rgb(var(--service-rgb)) !important;
}

html[dir="rtl"] .service-details-header p {
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .service-detail-card {
    border: 1px solid rgba(var(--service-rgb), .3) !important;
    border-radius: var(--df-card-radius, 28px) !important;
    background:
      linear-gradient(145deg, rgba(var(--service-rgb), .18), rgba(255, 255, 255, .91) 55%, rgba(var(--service-secondary-rgb), .12)) !important;
    box-shadow: 0 18px 48px rgba(31, 74, 105, .07) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-detail-card::after {
    animation: none !important;
  }

  .service-detail-card {
    transition: none !important;
  }
}