@font-face {
  font-family: "Wix Madefor Display";
  src: url("../assets/fonts/wix-madefor-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("../assets/fonts/orbitron-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "SlcCommonIcons";
  src: url("../assets/fonts/flaticons-common.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "SlcSolidIcons";
  src: url("../assets/fonts/fa-solid-900.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

.slc-about-component,
.slc-about-component * {
  box-sizing: border-box;
}

.slc-about-component {
  container-name: slc-about;
  container-type: inline-size;
  width: 100%;
  max-width: 1360px;
  min-width: 0;
  margin-inline: auto;
}

.slc-about-section {
  --slc-accent: var(--pricing-action, #176a9f);
  --slc-accent-soft: rgb(82 184 232 / 14%);
  --slc-ink: var(--pricing-ink, #f6fbff);
  --slc-text: var(--pricing-muted, #a9c8dc);
  --slc-surface: #fff;
  --slc-body-font: "Vazirmatn", "IRANSans", Tahoma, "Segoe UI", Arial, sans-serif;
  --slc-style-font: var(--slc-body-font);
  direction: rtl;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 6cqi, 56px);
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--slc-text);
  font-family: var(--slc-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  text-align: start;
}

.slc-about-section h2,
.slc-about-section h3,
.slc-about-section p {
  margin: 0;
}

.slc-about-visual {
  position: relative;
  min-height: clamp(340px, 92cqi, 520px);
  overflow: hidden;
  border-radius: 20px;
  background-color: #dce3df;
  background-image: url("../assets/images/ab1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slc-visual-layers {
  display: none;
}

.slc-about-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3cqi, 28px);
}

.slc-heading-inner {
  position: relative;
}

.slc-about-component .slc-about-legacy-eyebrow {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: max-content;
  min-width: 17.625rem;
  max-width: 100%;
  height: 3.25rem;
  margin: 0 0 1.35rem;
  padding: 0.125rem 1.9375rem 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--slc-component-regional-badge-background);
  color: var(--slc-heading, var(--slc-color-ink-strong, #12324d));
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.slc-about-component .slc-about-legacy-eyebrow::before {
  position: absolute;
  inset: 0.5rem 0.25rem 0.3125rem 1.75rem;
  z-index: -1;
  border-radius: 999px;
  background: var(--slc-component-regional-badge-shadow);
  filter: blur(7px);
  opacity: 0.78;
  pointer-events: none;
  transform: translateY(12px);
  content: "";
}

.slc-about-component .slc-about-legacy-eyebrow::after {
  position: absolute;
  inset-block: 1px;
  inset-inline: 1px 2rem;
  border-radius: inherit;
  background: var(--slc-component-regional-badge-sheen, linear-gradient(90deg, rgb(255 255 255 / 20%), transparent));
  pointer-events: none;
  content: "";
}

.slc-heading-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--slc-text);
  font-family: var(--slc-style-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  word-spacing: 0.08em;
  transition: color 180ms ease;
}

.slc-heading-icon {
  display: inline-block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  background: url("../assets/images/Frame2.png") center / contain no-repeat;
}

.slc-about-title {
  color: var(--slc-ink);
  font-family: var(--slc-body-font);
  font-size: clamp(1.4rem, 2.15vw, 2rem);
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.slc-about-component .slc-title-line {
  display: block;
  text-align: start;
}

.slc-about-description {
  width: min(100%, 680px);
  color: var(--slc-text);
  line-height: 1.8;
  overflow-wrap: break-word;
}

.slc-service-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 28px;
  min-width: 0;
}

.slc-service-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 22px;
}

.slc-service-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.slc-service-card--diagnostics {
  padding-top: 22px;
  border-top: 1px solid rgb(28 32 41 / 10%);
}

.slc-service-icon-area {
  position: relative;
  z-index: 0;
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  margin-inline-end: 10px;
  place-items: center;
}

.slc-service-icon {
  position: relative;
  z-index: 1;
  color: var(--slc-accent);
  font-family: "Material Design Icons";
  font-size: 58px;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
  transition: transform 180ms ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slc-service-card:hover .slc-service-icon {
  transform: translateY(-2px);
}

.slc-service-icon-backdrop {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: -1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--slc-accent-soft);
  transform: translateX(-50%);
}

.slc-service-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}

.slc-service-title {
  color: var(--slc-ink);
  font-family: var(--slc-body-font);
  font-size: clamp(19px, 3cqi, 21px);
  font-weight: 600;
  line-height: 1.4;
}

.slc-service-description {
  color: var(--slc-text);
  line-height: 1.75;
  overflow-wrap: break-word;
}

.slc-video-card {
  min-width: 0;
}

.slc-video-popup,
.slc-video-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 190px;
  overflow: hidden;
  border-radius: 15px;
}

.slc-video-thumbnail {
  width: 100%;
  height: 100%;
  background-image: url("../../../images/afghanistan-transit/loader-wagon.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 300ms ease;
}

.slc-video-popup:hover .slc-video-thumbnail {
  transform: scale(1.025);
}

.slc-video-popup::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 12%);
  content: "";
  pointer-events: none;
}

.slc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 70px;
  height: 70px;
  color: var(--slc-ink);
  border-radius: 50%;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.slc-video-play-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--slc-surface);
  opacity: 0.88;
}

.slc-play-glyph {
  color: var(--slc-ink);
  font-family: "SlcSolidIcons";
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slc-play-glyph::before {
  content: "\f04b";
}

.slc-video-trigger {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  cursor: pointer;
}

.slc-about-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  margin-top: 10px;
}

.slc-primary-button {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 10px 8px 24px;
  border-radius: 40px;
  background: var(--slc-ink);
  color: var(--slc-surface);
  font-family: var(--slc-body-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.slc-primary-button:hover {
  box-shadow: 0 10px 24px rgb(28 32 41 / 18%);
  transform: translateY(-2px);
}

.slc-button-label {
  min-width: 0;
  white-space: nowrap;
}

.slc-button-arrow {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--slc-surface);
  color: var(--slc-ink);
  place-items: center;
}

.slc-arrow-glyph,
.slc-phone-glyph {
  font-family: "SlcCommonIcons";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slc-arrow-glyph {
  transform: rotate(30deg);
  transition: transform 180ms ease;
}

.slc-primary-button:hover .slc-arrow-glyph {
  transform: rotate(0deg);
}

.slc-arrow-glyph::before {
  content: "\e87a";
}

.slc-contact-card {
  display: flex;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 30px;
  background: var(--slc-accent-soft);
  font-style: normal;
}

.slc-contact-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--slc-accent);
  color: var(--slc-surface);
  font-size: 20px;
  place-items: center;
}

.slc-phone-glyph::before {
  content: "\f11e";
}

.slc-contact-link {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: center;
  color: var(--slc-text);
  font-weight: 500;
  line-height: 1.5;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.slc-contact-link:hover {
  color: var(--slc-ink);
  text-decoration-color: currentColor;
}

.slc-video-trigger:focus-visible,
.slc-primary-button:focus-visible,
.slc-contact-link:focus-visible,
.slc-video-modal-close:focus-visible {
  outline: 3px solid #1c2029;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}

.slc-repair-board-image::before {
  position: absolute;
  top: 0;
  inset-inline-start: -100%;
  z-index: 1;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, rgb(255 255 255 / 0%), rgb(255 255 255 / 30%));
  content: "";
  transform: skewX(-25deg);
}

.slc-repair-board-image:hover::before {
  animation: slc-shine 700ms ease-out;
}

@keyframes slc-shine {
  from { inset-inline-start: -100%; }
  to { inset-inline-start: 125%; }
}

@keyframes slc-floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@container slc-about (min-width: 480px) {
  .slc-service-area {
    grid-template-columns: minmax(0, 1.8fr) minmax(110px, 0.42fr);
    gap: 20px;
  }

  .slc-video-card {
    display: flex;
    min-height: 0;
    align-self: center;
    padding-bottom: 0;
  }

  .slc-video-popup,
  .slc-video-stage {
    height: clamp(7rem, 23cqi, 8rem);
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
  }

  .slc-about-actions {
    grid-template-columns: max-content minmax(240px, 1fr);
    align-items: center;
  }
}

@container slc-about (min-width: 480px) {
  .slc-video-play {
    width: 52px;
    height: 52px;
  }

  .slc-play-glyph {
    font-size: 16px;
  }
}

@container slc-about (min-width: 960px) {
  .slc-about-section {
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(44px, 5cqi, 68px);
  }

  .slc-about-visual {
    min-height: clamp(560px, 52cqi, 650px);
  }

  .slc-visual-layers {
    position: absolute;
    inset-inline-end: clamp(18px, 2.5cqi, 34px);
    bottom: clamp(24px, 3cqi, 42px);
    display: block;
    width: min(68%, 257px);
    aspect-ratio: 257 / 297;
  }

  .slc-repair-board,
  .slc-repair-board-frame,
  .slc-repair-board-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
  }

  .slc-repair-board-frame {
    border: 10px solid var(--slc-surface);
  }

  .slc-repair-board-image {
    background: url("../assets/images/ab2.jpg") center / cover no-repeat;
  }

  .slc-accent-bar {
    position: absolute;
    top: -54px;
    inset-inline-end: 24px;
    width: 18px;
    height: 92px;
    border-radius: 10px;
    background: var(--slc-accent);
    animation: slc-floating 3s ease-in-out infinite;
  }
}

@container slc-about (min-width: 1240px) {
  .slc-about-section {
    padding: 24px;
  }

  .slc-about-title {
    font-size: 50px;
  }
}

.slc-video-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  padding: clamp(16px, 4vw, 48px);
  background: rgb(0 0 0 / 88%);
  place-items: center;
}

.slc-video-modal iframe {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  background: #000;
}

.slc-video-modal-close {
  position: fixed;
  top: 18px;
  inset-inline-end: 22px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1c2029;
  font: 700 28px/1 Arial, sans-serif;
  cursor: pointer;
  place-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .slc-about-component *,
  .slc-about-component *::before,
  .slc-about-component *::after,
  .slc-video-modal,
  .slc-video-modal * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Standalone left-side content column. */
.slc-about-component--content-only {
  max-width: 860px;
}

.slc-about-section.slc-about-section--content-only {
  display: block;
}

.slc-about-section--content-only .slc-about-content {
  width: 100%;
}

.slc-about-component .slc-primary-button {
  display: none;
}

@media (max-width: 64rem) {
  .slc-about-component .slc-about-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 64.01rem) {
  .slc-about-component .slc-primary-button {
    display: inline-flex;
  }
}