/* TehranWeb Services Experience v1.0.5 – services selection ONLY.
   Refines the services heading layout, keeps the icon separate from the
   service image, and makes the single-card state match the approved visual
   structure more closely. Scoped only to the services section so the frozen
   hero and the rest of the page remain unchanged. */

body.tehranweb-services-experience #twsx-services.twsx-services {
  position: relative !important;
  isolation: isolate;
  padding-block: clamp(42px, 4.1vw, 74px) clamp(60px, 5.3vw, 96px) !important;
  margin: 0 !important;
  border: 0 !important;
  background:
    radial-gradient(ellipse 63% 36% at 54% 2%, rgba(16, 47, 64, .24), transparent 74%),
    linear-gradient(180deg, #03111d 0%, #03111d 100%) !important;
  scroll-margin-top: 120px;
}
body.tehranweb-services-experience #twsx-services .twsx-services__ambient { opacity: .16 !important; }
body.tehranweb-services-experience #twsx-services .twsx-services__ambient span { display: none !important; }
body.tehranweb-services-experience #twsx-services .twsx-shell {
  position: relative;
  width: min(1500px, calc(100% - 72px)) !important;
  max-width: 1500px !important;
  margin-inline: auto !important;
  padding: 0 !important;
}
/* Reference: small centered eyebrow / single readable H2 / two-line intro. */
body.tehranweb-services-experience #twsx-services .twsx-services__head {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto clamp(26px, 2.6vw, 42px) !important;
  padding: 0 8px !important;
  text-align: center !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__head .twsx-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 13px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.88) !important;
  font-size: clamp(12px, .92vw, 15px) !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__head .twsx-eyebrow span {
  display: block !important;
  height: 1px !important;
  width: 38px !important;
  flex: 0 0 38px !important;
  background: #f4b62a !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__head h2,
body.tehranweb-services-experience #twsx-services .twsx-section-head h2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  font-size: clamp(30px, 2.65vw, 50px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  color: #f8fbff !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__head h2 em {
  color: #f4b62a !important;
  font-style: normal !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__head p {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(231,240,247,.85) !important;
  font-size: clamp(13px, .98vw, 16px) !important;
  font-weight: 450 !important;
  line-height: 1.9 !important;
  text-align: center !important;
}

/* In the reference the cards form three tight columns with consistent height. */
body.tehranweb-services-experience #twsx-services .twsx-services__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: clamp(14px, 1.25vw, 22px) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__grid--single {
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-inline: 0 !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__grid--single .twsx-service-card {
  grid-column: 1 / span 1 !important;
}
body.tehranweb-services-experience #twsx-services .twsx-services__grid--double {
  max-width: 760px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-inline: auto !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 386px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(164, 187, 198, .28) !important;
  border-radius: 13px !important;
  background: #061523 !important;
  box-shadow: 0 15px 32px rgba(0,0,0,.16) !important;
  transform: none;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card:hover,
body.tehranweb-services-experience #twsx-services .twsx-service-card:focus-visible {
  border-color: rgba(248,191,70,.75) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 19px 37px rgba(0,0,0,.22), 0 0 17px rgba(244,182,42,.11) !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__media {
  position: relative !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  height: 180px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #071623 !important;
  border: 0 !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__media img {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center 50% !important;
  filter: saturate(.95) contrast(1.04) !important;
  transform: none !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__veil {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent 24%, rgba(4,17,28,.16) 58%, #061523 100%) !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__icon {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2 !important;
  width: 46px !important;
  height: 46px !important;
  background: rgba(4,17,28,.73) !important;
  border: 1px solid #d8a530 !important;
  border-radius: 10px !important;
  color: #f4b62a !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__icon svg {
  width: 23px !important;
  height: 23px !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__body {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 20px 18px !important;
  text-align: center !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__body h3 {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: clamp(18px, 1.18vw, 23px) !important;
  line-height: 1.4 !important;
  font-weight: 850 !important;
  color: white !important;
  text-align: center !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__body p {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: clamp(12px, .85vw, 15px) !important;
  line-height: 1.8 !important;
  color: rgba(231,240,248,.82) !important;
  text-align: center !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__link {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: auto !important;
  margin: auto 0 0 !important;
  padding: 0 !important;
  color: #f4b62a !important;
  font-size: clamp(12px, .87vw, 15px) !important;
  font-weight: 850 !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
  gap: 8px !important;
}
body.tehranweb-services-experience #twsx-services .twsx-service-card__link:hover { color: #ffdb79 !important; }

@media (max-width: 1100px) {
  body.tehranweb-services-experience #twsx-services .twsx-shell { width: calc(100% - 40px) !important; }
  body.tehranweb-services-experience #twsx-services .twsx-services__grid:not(.twsx-services__grid--single) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.tehranweb-services-experience #twsx-services .twsx-services__grid--single { width: 100% !important; }
  body.tehranweb-services-experience #twsx-services .twsx-service-card__media { height: 190px !important; }
}
@media (max-width: 650px) {
  body.tehranweb-services-experience #twsx-services.twsx-services { padding-block: 40px 58px !important; scroll-margin-top: 85px; }
  body.tehranweb-services-experience #twsx-services .twsx-shell { width: calc(100% - 28px) !important; }
  body.tehranweb-services-experience #twsx-services .twsx-services__head { margin-bottom: 25px !important; }
  body.tehranweb-services-experience #twsx-services .twsx-services__head h2 {
    font-size: clamp(25px, 6.8vw, 34px) !important;
    line-height: 1.3 !important;
  }
  body.tehranweb-services-experience #twsx-services .twsx-services__head p { font-size: 13px !important; }
  body.tehranweb-services-experience #twsx-services .twsx-services__grid,
  body.tehranweb-services-experience #twsx-services .twsx-services__grid:not(.twsx-services__grid--single) {
    max-width: 480px !important;
    grid-template-columns: minmax(0,1fr) !important;
    margin-inline: auto !important;
  }
  body.tehranweb-services-experience #twsx-services .twsx-service-card { min-height: 360px !important; }
  body.tehranweb-services-experience #twsx-services .twsx-service-card__media { height: 186px !important; }
  body.tehranweb-services-experience #twsx-services .twsx-service-card__body { padding: 14px 16px 16px !important; }
  body.tehranweb-services-experience #twsx-services .twsx-service-card__body h3 { font-size: 18px !important; }
  body.tehranweb-services-experience #twsx-services .twsx-service-card__body p { font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.tehranweb-services-experience #twsx-services .twsx-service-card { transition: none !important; }
}


body.tehranweb-services-experience #twsx-services .twsx-service-card__artwork { object-position: left center !important; }
body.tehranweb-services-experience #twsx-services .twsx-service-card__body p:empty { display:none !important; }