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

/* THEME 6: NEO BRUTALIST SWISS */

.ebsrv12-section {
  /* ELEMENT COLOR TOKENS (literal) */
  --ebsrv12-section-bg: #f0ece4;

  --ebsrv12-orb-border-color: #0a0a0a;
  --ebsrv12-orb-1-bg: rgba(255, 68, 0, 0.08);
  --ebsrv12-orb-2-bg: rgba(0, 68, 255, 0.08);
  --ebsrv12-orb-3-bg: #0a0a0a;

  --ebsrv12-badge-bg: #ff4400;
  --ebsrv12-badge-border-color: #0a0a0a;
  --ebsrv12-badge-color: #ffffff;
  --ebsrv12-badge-shadow: 4px 4px 0 #0a0a0a;

  --ebsrv12-title-color: #0a0a0a;
  --ebsrv12-title-after-bg: #ff4400;
  --ebsrv12-title-after-border-color: #0a0a0a;
  --ebsrv12-title-highlight-color: #ff4400;

  --ebsrv12-subtitle-color: rgba(10, 10, 10, 0.45);

  --ebsrv12-track-wrap-bg: #ffffff;
  --ebsrv12-track-wrap-border-color: #0a0a0a;
  --ebsrv12-track-wrap-shadow: 10px 10px 0 #0a0a0a;
  --ebsrv12-track-wrap-shadow-tablet: 6px 6px 0 #0a0a0a;

  --ebsrv12-card-bg: #ffffff;
  --ebsrv12-card-border-color: #0a0a0a;
  --ebsrv12-card-shadow: 6px 6px 0 #0a0a0a;
  --ebsrv12-card-shadow-active: 10px 10px 0 #0a0a0a, 14px 14px 0 rgba(255, 68, 0, 0.25);
  --ebsrv12-card-top-bar-bg: #ff4400;
  --ebsrv12-card-top-bar-bg-even: #0044ff;
  --ebsrv12-card-img-border-bottom-color: #0a0a0a;
  --ebsrv12-card-img-num-bg: #ff4400;
  --ebsrv12-card-img-num-bg-even: #0044ff;
  --ebsrv12-card-img-num-color: #ffffff;
  --ebsrv12-card-img-num-border-color: #0a0a0a;
  --ebsrv12-card-img-num-shadow: 4px 4px 0 #0a0a0a;
  --ebsrv12-card-title-color: #0a0a0a;
  --ebsrv12-card-desc-color: rgba(10, 10, 10, 0.45);

  --ebsrv12-card-link-bg: #ffffff;
  --ebsrv12-card-link-color: #0a0a0a;
  --ebsrv12-card-link-border-color: #0a0a0a;
  --ebsrv12-card-link-hover-bg: #0a0a0a;
  --ebsrv12-card-link-hover-color: #ffffff;
  --ebsrv12-card-link-hover-shadow: 4px -4px 0 #ff4400;

  --ebsrv12-arrow-bg: #ffffff;
  --ebsrv12-arrow-color: #0a0a0a;
  --ebsrv12-arrow-border-color: #0a0a0a;
  --ebsrv12-arrow-hover-bg: #0a0a0a;
  --ebsrv12-arrow-hover-color: #ffffff;
  --ebsrv12-arrow-hover-shadow: 4px -4px 0 #ff4400;

  --ebsrv12-dot-bg: #ffffff;
  --ebsrv12-dot-border-color: #0a0a0a;
  --ebsrv12-dot-hover-bg: rgba(255, 68, 0, 0.25);
  --ebsrv12-dot-active-bg: #ff4400;
  --ebsrv12-dot-active-border-color: #0a0a0a;

  /* BORDERS & RADII */
  --ebsrv12-orb-border-width: 3px;
  --ebsrv12-badge-border-width: 3px;
  --ebsrv12-title-after-border-width: 3px;
  --ebsrv12-track-wrap-border-width: 5px;
  --ebsrv12-card-border-width: 4px;
  --ebsrv12-card-img-border-bottom-width: 4px;
  --ebsrv12-card-img-num-border-width: 3px;
  --ebsrv12-card-link-border-width: 4px;
  --ebsrv12-arrow-border-width: 4px;
  --ebsrv12-dot-border-width: 4px;
  --ebsrv12-radius-zero: 0;

  /* LAYOUT & SPACING */
  --ebsrv12-pos-zero: 0;
  --ebsrv12-opacity-zero: 0;
  --ebsrv12-opacity-one: 1;
  --ebsrv12-width-full: 100%;
  --ebsrv12-height-full: 100%;
  --ebsrv12-flex-shrink-zero: 0;
  --ebsrv12-card-body-flex: 1;

  --ebsrv12-section-padding: 5rem 1.5rem;
  --ebsrv12-section-padding-tablet: 3rem 1rem;
  --ebsrv12-section-padding-mobile: 2rem 0.75rem;

  --ebsrv12-orb-1-size: 150px;
  --ebsrv12-orb-1-top: 8%;
  --ebsrv12-orb-1-right: 5%;
  --ebsrv12-orb-1-transform: rotate(12deg);
  --ebsrv12-orb-2-size: 95px;
  --ebsrv12-orb-2-bottom: 10%;
  --ebsrv12-orb-2-left: 7%;
  --ebsrv12-orb-3-size: 55px;
  --ebsrv12-orb-3-bottom: 28%;
  --ebsrv12-orb-3-right: 18%;

  --ebsrv12-header-margin-bottom: 3.5rem;

  --ebsrv12-badge-gap: 0.45rem;
  --ebsrv12-badge-padding: 0.3rem 0.9rem;
  --ebsrv12-badge-font-size: 0.7rem;
  --ebsrv12-badge-icon-font-size: 0.7rem;

  --ebsrv12-title-font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  --ebsrv12-title-margin: 1.2rem 0 0;
  --ebsrv12-title-line-height: 1.2;
  --ebsrv12-title-text-transform: uppercase;
  --ebsrv12-title-after-width: 72px;
  --ebsrv12-title-after-height: 7px;
  --ebsrv12-title-after-margin: 0.9rem auto 0;

  --ebsrv12-subtitle-font-size: 0.9rem;
  --ebsrv12-subtitle-max-width: 500px;
  --ebsrv12-subtitle-margin: 1rem auto 0;
  --ebsrv12-subtitle-line-height: 1.7;
  --ebsrv12-subtitle-letter-spacing: 1px;
  --ebsrv12-subtitle-text-transform: uppercase;

  --ebsrv12-slider-max-width: 980px;
  --ebsrv12-slider-margin: 0 auto;

  --ebsrv12-track-wrap-padding: 1rem;
  --ebsrv12-track-wrap-padding-tablet: 0.5rem;
  --ebsrv12-track-transition-duration: 0.7s;

  --ebsrv12-slide-flex-desktop: 0 0 calc(100% / 3);
  --ebsrv12-slide-flex-tablet: 0 0 50%;
  --ebsrv12-slide-flex-mobile: 0 0 100%;
  --ebsrv12-slide-padding: 0.5rem;

  --ebsrv12-card-top-bar-height: 8px;
  --ebsrv12-card-img-aspect-ratio: 16 / 9;
  --ebsrv12-card-img-scale-active: 1.05;
  --ebsrv12-card-img-num-top: 12px;
  --ebsrv12-card-img-num-right: 12px;
  --ebsrv12-card-img-num-padding: 0.3rem 0.55rem;
  --ebsrv12-card-img-num-font-size: clamp(1.8rem, 3vw, 2.4rem);
  --ebsrv12-card-img-num-line-height: 1;
  --ebsrv12-card-body-padding: 1.5rem 1.25rem 1.75rem;
  --ebsrv12-card-body-padding-tablet: 1.25rem 1rem 1.5rem;
  --ebsrv12-card-body-padding-mobile: 1rem 0.75rem 1.25rem;
  --ebsrv12-card-body-gap: 0.85rem;
  --ebsrv12-card-body-gap-tablet: 0.7rem;
  --ebsrv12-card-title-font-size: 1.1rem;
  --ebsrv12-card-title-font-size-tablet: 1rem;
  --ebsrv12-card-title-line-height: 1.3;
  --ebsrv12-card-desc-font-size: 0.82rem;
  --ebsrv12-card-desc-line-height: 1.7;

  --ebsrv12-card-link-gap: 0.5rem;
  --ebsrv12-card-link-gap-hover: 0.8rem;
  --ebsrv12-card-link-padding: 0.55rem 1.3rem;
  --ebsrv12-card-link-font-size: 0.8rem;
  --ebsrv12-card-link-transform-hover: translate(-3px, 3px);

  --ebsrv12-arrow-transform-hover: translate(-3px, 3px);

  --ebsrv12-card-transform-active: translate(-4px, 4px);

  --ebsrv12-nav-gap: 1.5rem;
  --ebsrv12-nav-gap-tablet: 1rem;
  --ebsrv12-nav-margin-top: 2.5rem;
  --ebsrv12-nav-margin-top-tablet: 2rem;

  --ebsrv12-arrow-size: 46px;
  --ebsrv12-arrow-size-mobile: 40px;
  --ebsrv12-arrow-font-size: 0.85rem;
  --ebsrv12-arrow-font-size-mobile: 0.75rem;

  --ebsrv12-dots-gap: 0.6rem;
  --ebsrv12-dot-size: 15px;
  --ebsrv12-dot-padding: 0;
  --ebsrv12-dot-scale-active: 1.15;

  --ebsrv12-reveal-distance: 20px;
  --ebsrv12-reveal-delay-1: 0.05s;
  --ebsrv12-reveal-delay-2: 0.1s;
  --ebsrv12-reveal-delay-3: 0.15s;
  --ebsrv12-reveal-delay-4: 0.2s;

  /* TYPOGRAPHY */
  --ebsrv12-font: 'El Messiri', sans-serif;
  --ebsrv12-font-weight-regular: 400;
  --ebsrv12-font-weight-bold: 700;
  --ebsrv12-letter-spacing-wide: 1px;
  --ebsrv12-text-transform-uppercase: uppercase;

  /* ANIMATIONS & TRANSITIONS */
  --ebsrv12-ease: cubic-bezier(.4, 0, .2, 1);
  --ebsrv12-transition-fast: 0.15s;
  --ebsrv12-transition-quick: 0.2s;
  --ebsrv12-transition-base: 0.5s;
  --ebsrv12-transition-slow: 0.7s;
  --ebsrv12-transition-img: 0.6s;

  /* Z-INDEX */
  --ebsrv12-z-backdrop: 0;
  --ebsrv12-z-content: 2;
  --ebsrv12-z-float: 3;

  position: relative;
  padding: var(--ebsrv12-section-padding);
  background: var(--ebsrv12-section-bg);
  font-family: var(--ebsrv12-font);
  direction: rtl;
  overflow: hidden;
}

.ebsrv12-orb {
  position: absolute;
  pointer-events: none;
  z-index: var(--ebsrv12-z-backdrop);
  border: var(--ebsrv12-orb-border-width) solid var(--ebsrv12-orb-border-color);
}

.ebsrv12-orb-1 { width: var(--ebsrv12-orb-1-size); height: var(--ebsrv12-orb-1-size); background: var(--ebsrv12-orb-1-bg); top: var(--ebsrv12-orb-1-top); right: var(--ebsrv12-orb-1-right); transform: var(--ebsrv12-orb-1-transform); }
.ebsrv12-orb-2 { width: var(--ebsrv12-orb-2-size); height: var(--ebsrv12-orb-2-size); background: var(--ebsrv12-orb-2-bg); bottom: var(--ebsrv12-orb-2-bottom); left: var(--ebsrv12-orb-2-left); }
.ebsrv12-orb-3 { width: var(--ebsrv12-orb-3-size); height: var(--ebsrv12-orb-3-size); background: var(--ebsrv12-orb-3-bg); bottom: var(--ebsrv12-orb-3-bottom); right: var(--ebsrv12-orb-3-right); }

.ebsrv12-header { position: relative; z-index: var(--ebsrv12-z-content); text-align: center; margin-bottom: var(--ebsrv12-header-margin-bottom); }

.ebsrv12-badge {
  display: inline-flex; align-items: center; gap: var(--ebsrv12-badge-gap); padding: var(--ebsrv12-badge-padding);
  background: var(--ebsrv12-badge-bg); border: var(--ebsrv12-badge-border-width) solid var(--ebsrv12-badge-border-color); border-radius: var(--ebsrv12-radius-zero);
  font-size: var(--ebsrv12-badge-font-size); font-weight: var(--ebsrv12-font-weight-bold); letter-spacing: var(--ebsrv12-letter-spacing-wide); color: var(--ebsrv12-badge-color); text-transform: var(--ebsrv12-text-transform-uppercase);
  box-shadow: var(--ebsrv12-badge-shadow);
}
.ebsrv12-badge i { font-size: var(--ebsrv12-badge-icon-font-size); }

.ebsrv12-title {
  font-size: var(--ebsrv12-title-font-size); font-weight: var(--ebsrv12-font-weight-bold);
  color: var(--ebsrv12-title-color); margin: var(--ebsrv12-title-margin); line-height: var(--ebsrv12-title-line-height); text-transform: var(--ebsrv12-title-text-transform);
}

.ebsrv12-title::after {
  content: ''; display: block; width: var(--ebsrv12-title-after-width); height: var(--ebsrv12-title-after-height); margin: var(--ebsrv12-title-after-margin);
  background: var(--ebsrv12-title-after-bg); border: var(--ebsrv12-title-after-border-width) solid var(--ebsrv12-title-after-border-color);
}

.ebsrv12-title-highlight {
  color: var(--ebsrv12-title-highlight-color); -webkit-text-fill-color: var(--ebsrv12-title-highlight-color);
}

.ebsrv12-subtitle {
  font-size: var(--ebsrv12-subtitle-font-size); font-weight: var(--ebsrv12-font-weight-regular); color: var(--ebsrv12-subtitle-color);
  max-width: var(--ebsrv12-subtitle-max-width); margin: var(--ebsrv12-subtitle-margin); line-height: var(--ebsrv12-subtitle-line-height); text-transform: var(--ebsrv12-subtitle-text-transform); letter-spacing: var(--ebsrv12-subtitle-letter-spacing);
}

.ebsrv12-slider { position: relative; z-index: var(--ebsrv12-z-content); max-width: var(--ebsrv12-slider-max-width); margin: var(--ebsrv12-slider-margin); }

.ebsrv12-track-wrap {
  overflow: hidden; border-radius: var(--ebsrv12-radius-zero); position: relative;
  background: var(--ebsrv12-track-wrap-bg); border: var(--ebsrv12-track-wrap-border-width) solid var(--ebsrv12-track-wrap-border-color);
  box-shadow: var(--ebsrv12-track-wrap-shadow);
  padding: var(--ebsrv12-track-wrap-padding);
}

.ebsrv12-track { display: flex; transition: transform var(--ebsrv12-track-transition-duration) var(--ebsrv12-ease); will-change: transform; counter-reset: ebsrv-num; }

.ebsrv12-slide {
  flex: var(--ebsrv12-slide-flex-desktop); padding: var(--ebsrv12-slide-padding);
  counter-increment: ebsrv-num;
}

.ebsrv12-card {
  background: var(--ebsrv12-card-bg); border: var(--ebsrv12-card-border-width) solid var(--ebsrv12-card-border-color);
  border-radius: var(--ebsrv12-radius-zero); box-shadow: var(--ebsrv12-card-shadow);
  display: flex; flex-direction: column; height: var(--ebsrv12-height-full); position: relative; overflow: hidden;
  transition: transform var(--ebsrv12-transition-quick) var(--ebsrv12-ease), box-shadow var(--ebsrv12-transition-quick) var(--ebsrv12-ease);
}

.ebsrv12-card::before {
  content: ''; position: absolute; top: var(--ebsrv12-pos-zero); left: var(--ebsrv12-pos-zero); right: var(--ebsrv12-pos-zero); height: var(--ebsrv12-card-top-bar-height); z-index: var(--ebsrv12-z-content);
  background: var(--ebsrv12-card-top-bar-bg);
}

.ebsrv12-slide:nth-child(even) .ebsrv12-card::before { background: var(--ebsrv12-card-top-bar-bg-even); }

.ebsrv12-card-img-wrap {
  width: var(--ebsrv12-width-full); overflow: hidden; position: relative; flex-shrink: var(--ebsrv12-flex-shrink-zero);
  aspect-ratio: var(--ebsrv12-card-img-aspect-ratio); border-radius: var(--ebsrv12-radius-zero); border-bottom: var(--ebsrv12-card-img-border-bottom-width) solid var(--ebsrv12-card-img-border-bottom-color);
}

.ebsrv12-card-img-wrap::after {
  content: counter(ebsrv-num, decimal-leading-zero);
  position: absolute; top: var(--ebsrv12-card-img-num-top); right: var(--ebsrv12-card-img-num-right); z-index: var(--ebsrv12-z-float);
  font-size: var(--ebsrv12-card-img-num-font-size); font-weight: var(--ebsrv12-font-weight-bold); line-height: var(--ebsrv12-card-img-num-line-height);
  color: var(--ebsrv12-card-img-num-color); background: var(--ebsrv12-card-img-num-bg); padding: var(--ebsrv12-card-img-num-padding);
  border: var(--ebsrv12-card-img-num-border-width) solid var(--ebsrv12-card-img-num-border-color); box-shadow: var(--ebsrv12-card-img-num-shadow);
}

.ebsrv12-slide:nth-child(even) .ebsrv12-card-img-wrap::after { background: var(--ebsrv12-card-img-num-bg-even); }

.ebsrv12-card-img {
  width: var(--ebsrv12-width-full); height: var(--ebsrv12-height-full); object-fit: cover; display: block;
  transition: transform var(--ebsrv12-transition-img) var(--ebsrv12-ease);
}

.ebsrv12-slide.ebsrv12-active .ebsrv12-card-img {
  transform: scale(var(--ebsrv12-card-img-scale-active));
}

.ebsrv12-card-body {
  padding: var(--ebsrv12-card-body-padding); display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: var(--ebsrv12-card-body-gap); position: relative; z-index: var(--ebsrv12-z-backdrop); flex: var(--ebsrv12-card-body-flex);
}

.ebsrv12-card-body > * {
  opacity: var(--ebsrv12-opacity-zero); transform: translateY(var(--ebsrv12-reveal-distance));
  transition: opacity var(--ebsrv12-transition-base) var(--ebsrv12-ease), transform var(--ebsrv12-transition-base) var(--ebsrv12-ease);
}

.ebsrv12-slide.ebsrv12-active .ebsrv12-card-body > *:nth-child(1) { transition-delay: var(--ebsrv12-reveal-delay-1); opacity: var(--ebsrv12-opacity-one); transform: none; }
.ebsrv12-slide.ebsrv12-active .ebsrv12-card-body > *:nth-child(2) { transition-delay: var(--ebsrv12-reveal-delay-2); opacity: var(--ebsrv12-opacity-one); transform: none; }
.ebsrv12-slide.ebsrv12-active .ebsrv12-card-body > *:nth-child(3) { transition-delay: var(--ebsrv12-reveal-delay-3); opacity: var(--ebsrv12-opacity-one); transform: none; }
.ebsrv12-slide.ebsrv12-active .ebsrv12-card-body > *:nth-child(4) { transition-delay: var(--ebsrv12-reveal-delay-4); opacity: var(--ebsrv12-opacity-one); transform: none; }

.ebsrv12-card-title { font-size: var(--ebsrv12-card-title-font-size); font-weight: var(--ebsrv12-font-weight-bold); color: var(--ebsrv12-card-title-color); line-height: var(--ebsrv12-card-title-line-height); text-transform: var(--ebsrv12-text-transform-uppercase); }
.ebsrv12-card-desc { font-size: var(--ebsrv12-card-desc-font-size); font-weight: var(--ebsrv12-font-weight-regular); color: var(--ebsrv12-card-desc-color); line-height: var(--ebsrv12-card-desc-line-height); }

.ebsrv12-card-link {
  display: inline-flex; align-items: center; gap: var(--ebsrv12-card-link-gap); font-size: var(--ebsrv12-card-link-font-size);
  font-weight: var(--ebsrv12-font-weight-bold); letter-spacing: var(--ebsrv12-letter-spacing-wide); color: var(--ebsrv12-card-link-color); text-decoration: none;
  padding: var(--ebsrv12-card-link-padding); border: var(--ebsrv12-card-link-border-width) solid var(--ebsrv12-card-link-border-color); border-radius: var(--ebsrv12-radius-zero);
  background: var(--ebsrv12-card-link-bg); transition: all var(--ebsrv12-transition-fast) ease; margin-top: auto; text-transform: var(--ebsrv12-text-transform-uppercase);
}

.ebsrv12-card-link:hover {
  background: var(--ebsrv12-card-link-hover-bg); color: var(--ebsrv12-card-link-hover-color); gap: var(--ebsrv12-card-link-gap-hover);
  transform: var(--ebsrv12-card-link-transform-hover);
  box-shadow: var(--ebsrv12-card-link-hover-shadow);
}

.ebsrv12-nav { display: flex; align-items: center; justify-content: center; gap: var(--ebsrv12-nav-gap); margin-top: var(--ebsrv12-nav-margin-top); position: relative; z-index: var(--ebsrv12-z-content); }

.ebsrv12-arrow {
  width: var(--ebsrv12-arrow-size); height: var(--ebsrv12-arrow-size); border-radius: var(--ebsrv12-radius-zero); border: var(--ebsrv12-arrow-border-width) solid var(--ebsrv12-arrow-border-color);
  background: var(--ebsrv12-arrow-bg); color: var(--ebsrv12-arrow-color); font-size: var(--ebsrv12-arrow-font-size);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--ebsrv12-transition-fast) ease;
}

.ebsrv12-arrow:hover {
  background: var(--ebsrv12-arrow-hover-bg); color: var(--ebsrv12-arrow-hover-color);
  transform: var(--ebsrv12-arrow-transform-hover);
  box-shadow: var(--ebsrv12-arrow-hover-shadow);
}

.ebsrv12-dots { display: flex; align-items: center; gap: var(--ebsrv12-dots-gap); }

.ebsrv12-dot {
  width: var(--ebsrv12-dot-size); height: var(--ebsrv12-dot-size); border-radius: var(--ebsrv12-radius-zero); background: var(--ebsrv12-dot-bg);
  border: var(--ebsrv12-dot-border-width) solid var(--ebsrv12-dot-border-color); cursor: pointer;
  transition: all var(--ebsrv12-transition-fast) ease; padding: var(--ebsrv12-dot-padding);
}

.ebsrv12-dot:hover { background: var(--ebsrv12-dot-hover-bg); }

.ebsrv12-dot.ebsrv12-active {
  background: var(--ebsrv12-dot-active-bg); border-color: var(--ebsrv12-dot-active-border-color);
  transform: scale(var(--ebsrv12-dot-scale-active));
}

.ebsrv12-slide.ebsrv12-active .ebsrv12-card {
  transform: var(--ebsrv12-card-transform-active);
  box-shadow: var(--ebsrv12-card-shadow-active);
}

@media (max-width: 1023px) {
  .ebsrv12-slide { flex: var(--ebsrv12-slide-flex-tablet); }
}

@media (max-width: 767px) {
  .ebsrv12-slide { flex: var(--ebsrv12-slide-flex-mobile); }
}

@media (max-width: 768px) {
  .ebsrv12-section { padding: var(--ebsrv12-section-padding-tablet); }
  .ebsrv12-track-wrap { padding: var(--ebsrv12-track-wrap-padding-tablet); box-shadow: var(--ebsrv12-track-wrap-shadow-tablet); }
  .ebsrv12-card-body { padding: var(--ebsrv12-card-body-padding-tablet); gap: var(--ebsrv12-card-body-gap-tablet); }
  .ebsrv12-card-title { font-size: var(--ebsrv12-card-title-font-size-tablet); }
  .ebsrv12-nav { margin-top: var(--ebsrv12-nav-margin-top-tablet); gap: var(--ebsrv12-nav-gap-tablet); }
}

@media (max-width: 480px) {
  .ebsrv12-section { padding: var(--ebsrv12-section-padding-mobile); }
  .ebsrv12-card-body { padding: var(--ebsrv12-card-body-padding-mobile); }
  .ebsrv12-arrow { width: var(--ebsrv12-arrow-size-mobile); height: var(--ebsrv12-arrow-size-mobile); font-size: var(--ebsrv12-arrow-font-size-mobile); }
}