/* ---------------------------------------------------------
   Ali Momen — Custom site styles & RTL adaptions on Arter
   Shared by the English (/) and Persian (/fa/) pages.
--------------------------------------------------------- */

/* =========================================================
   1. 3-COLUMN NON-OVERLAPPING DESKTOP GRID (> 920px)
      Info-Bar (290px) | Content (100% - 370px) | Menu-Bar (80px)
   ========================================================= */

.art-app .art-app-wrapper {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #1e1e28;
}

.art-app .art-app-wrapper .art-app-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Desktop layout (> 920px) */
@media (min-width: 921px) {
  /* Left Column: Info Bar (290px fixed) */
  .art-app .art-app-wrapper .art-app-container .art-info-bar {
    width: 290px !important;
    min-width: 290px !important;
    max-width: 290px !important;
    flex: 0 0 290px !important;
    position: relative !important;
    z-index: 999 !important;
  }

  /* Center Column: Content (Exactly calc(100% - 370px) with 80px margin reserved for menu) */
  .art-app .art-app-wrapper .art-app-container .art-content {
    flex: 0 0 calc(100% - 370px) !important;
    width: calc(100% - 370px) !important;
    max-width: calc(100% - 370px) !important;
    min-width: 0 !important;
    margin-right: 80px !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: 0.55s ease-in-out !important;
  }

  /* Inner scroll container inside content */
  .art-app .art-app-wrapper .art-app-container .art-content .art-scroll-frame {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-content .container-fluid {
    padding-left: 25px !important;
    padding-right: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Right Column: Menu Bar (230px total width, -150px right = exactly 80px visible bar) */
  .art-app .art-app-wrapper .art-app-container .art-menu-bar {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: -150px !important;
    left: auto !important;
    width: 230px !important;
    height: calc(100vh - 30px) !important;
    z-index: 99 !important;
    box-shadow: 0 3px 8px 0 rgba(15, 15, 20, 0.2) !important;
    transition: 0.55s ease-in-out !important;
  }

  /* Menu Opened Active State */
  .art-app .art-app-wrapper .art-app-container .art-menu-bar.art-active {
    transform: translateX(-150px) !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-content.art-active {
    transform: translateX(-150px) !important;
  }
}

/* =========================================================
   2. MOBILE & TABLET LAYOUT (<= 920px)
   ========================================================= */
@media (max-width: 920px) {
  .art-app .art-app-wrapper .art-app-container .art-content {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-top: 70px !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-content .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-info-bar {
    position: absolute !important;
    left: -290px !important;
    width: 290px !important;
    height: 100vh !important;
    z-index: 999999 !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-info-bar.art-active {
    transform: translateX(290px) !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-menu-bar {
    position: absolute !important;
    right: -230px !important;
    width: 230px !important;
    height: 100vh !important;
    z-index: 999999 !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-menu-bar.art-active {
    transform: translateX(-230px) !important;
  }

  .art-app .art-app-wrapper .art-app-container .art-content.art-active {
    transform: none !important;
  }
}

/* =========================================================
   3. AVATAR PERFECT CENTERING & SIZING
   ========================================================= */

.art-info-bar .art-header {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
  padding: 30px 15px !important;
  height: 235px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.art-info-bar .art-header .art-avatar {
  width: 90px !important;
  height: 90px !important;
  margin: 0 auto 15px auto !important;
  border-radius: 50% !important;
  position: relative !important;
  display: block !important;
}

.art-info-bar .art-header .art-avatar .art-avatar-curtain {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.art-info-bar .art-header .art-avatar .art-avatar-curtain img,
.art-info-bar .art-header .art-avatar .art-avatar-curtain .art-avatar-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
}

.art-info-bar .art-header .art-avatar .art-lamp-light {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  z-index: 2 !important;
}

/* =========================================================
   4. SERVICE ICON BOXES EQUAL HEIGHT FIX
   ========================================================= */

#services .row > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 30px !important;
}

.art-service-icon-box {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 230px !important;
  box-sizing: border-box !important;
}

.art-service-icon-box .art-service-ib-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.art-service-icon-box .art-service-ib-content .art-buttons-frame {
  margin-top: auto !important;
  padding-top: 15px !important;
}

/* =========================================================
   5. PLATFORMS & VENTURES REDESIGN
   ========================================================= */

.art-platform-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 20px;
  background: linear-gradient(159deg, #2d2d3a 0%, #2b2b35 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  box-shadow: 0 3px 8px 0 rgba(15, 15, 20, 0.2);
  text-decoration: none !important;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.art-platform-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.35);
}

.art-platform-icon {
  font-size: 26px;
  color: #FFC107;
  margin-bottom: 14px;
  transition: transform 0.3s ease;
}

.art-platform-card:hover .art-platform-icon {
  transform: scale(1.1);
}

.art-platform-body h5 {
  color: #FAFAFC;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.art-platform-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFC107;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.art-platform-body p {
  color: #8C8C8E;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

/* =========================================================
   6. HERO BANNER PHOTO
   ========================================================= */

.art-app-onepage .art-banner .art-banner-overlay {
  min-height: 400px;
}

.art-app-onepage .art-banner .art-banner-overlay .art-banner-photo {
  position: absolute;
  bottom: 0;
  right: 30px;
  max-height: 92%;
  width: auto;
  max-width: 360px;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.45));
}

@media (max-width: 992px) {
  .art-app-onepage .art-banner .art-banner-overlay .art-banner-photo {
    opacity: 0.18;
    right: 15px;
    max-width: 260px;
  }
}

/* =========================================================
   7. CARDS, TABLES & CTA
   ========================================================= */

.art-card,
.art-blog-card,
.art-portfolio-item-frame {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Contact table responsive text wrap */
.art-card .art-table ul li span {
  word-break: break-word;
  overflow-wrap: break-word;
}

.art-cta-card {
  padding: 35px 30px;
  text-align: center;
  border-radius: 6px;
  background: linear-gradient(159deg, #2d2d3a 0%, #2b2b35 100%);
  box-shadow: 0 3px 8px 0 rgba(15, 15, 20, 0.2);
}

.art-cta-card h4 {
  color: #FAFAFC;
  font-size: 19px;
  margin-bottom: 12px;
}

.art-cta-card p {
  color: #8C8C8E;
  font-size: 13px;
  line-height: 1.7;
  max-width: 550px;
  margin: 0 auto 20px auto;
}

/* =========================================================
   8. RTL ADAPTATIONS (Persian /fa/ page)
   ========================================================= */

html[dir="rtl"] body {
  font-family: "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Desktop RTL Grid (> 920px) */
@media (min-width: 921px) {
  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container {
    flex-direction: row-reverse !important;
  }

  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-content {
    margin-right: 0 !important;
    margin-left: 80px !important;
    width: calc(100% - 370px) !important;
    max-width: calc(100% - 370px) !important;
  }

  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-menu-bar {
    right: auto !important;
    left: -150px !important;
  }

  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-menu-bar.art-active {
    transform: translateX(150px) !important;
  }

  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-content.art-active {
    transform: translateX(150px) !important;
  }
}

/* Mobile RTL (<= 920px) */
@media (max-width: 920px) {
  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-info-bar {
    left: auto !important;
    right: -290px !important;
  }
  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-info-bar.art-active {
    transform: translateX(-290px) !important;
  }
  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-menu-bar {
    left: auto !important;
    right: -230px !important;
  }
  html[dir="rtl"] .art-app .art-app-wrapper .art-app-container .art-menu-bar.art-active {
    transform: translateX(-230px) !important;
  }
}

/* Text alignment for RTL */
html[dir="rtl"] .art-table ul li,
html[dir="rtl"] .art-knowledge-list li,
html[dir="rtl"] .art-skill-heading,
html[dir="rtl"] .art-banner-title,
html[dir="rtl"] .art-section-title,
html[dir="rtl"] .art-service-ib-content,
html[dir="rtl"] .art-timeline-content,
html[dir="rtl"] .art-platform-body,
html[dir="rtl"] footer {
  text-align: right;
}

/* Chevron links mirror in RTL */
html[dir="rtl"] .art-w-chevron:after {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* Latin / numbers direction */
html[dir="rtl"] .art-counter-box,
html[dir="rtl"] .art-code,
html[dir="rtl"] .art-lang-skills-item {
  direction: ltr;
}