/* Landing responsive/RTL layout fixes — 2026-10-21 */

/* 1. Mobile menu: RTL alignment, clear close button, faster animation */
.offcanvas-menu { direction: rtl; transition: top .3s ease !important; }
.offcanvas-menu .nav-ul-mb li { text-align: right; }
.offcanvas-menu .nav-ul-mb .item { justify-content: flex-start; transition: opacity .25s ease, transform .25s ease, visibility .25s !important; transform: translateY(24px); }
.offcanvas-menu .nav-ul-mb .has-sub-menu { place-items: start; justify-items: start; }
.offcanvas-menu .nav-ul-mb .has-sub-menu .sub-nav-menu { padding-right: 12px; text-align: right; }
.offcanvas-menu .mb-menu-link .infiniteSlide_text_main { display: none; }
.offcanvas-menu .canvas_head, .offcanvas-menu .canvas_foot { transition: opacity .2s ease, transform .2s ease, visibility .2s !important; }
.offcanvas-menu.show .canvas_head { transition-delay: .08s !important; }
.offcanvas-menu.show .canvas_foot { transition-delay: .2s !important; }
.offcanvas-menu.show .nav-ul-mb li .item { transition-delay: .1s !important; }
.offcanvas-menu.show .nav-ul-mb li:nth-child(n+4) .item { transition-delay: .15s !important; }
.offcanvas-menu .canvas_head { align-items: center; }
.offcanvas-menu .close-mb-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 10px 16px;
  border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  color: #fff !important; font-size: 16px !important; font-weight: 600; line-height: 1; cursor: pointer;
}
.offcanvas-menu .close-mb-menu .icon { font-size: 18px; }
.offcanvas-menu .canvas_foot { direction: rtl; }
@media (max-width: 575px) {
  .offcanvas-menu .mb-menu-link { font-size: 24px; line-height: 44px; }
}
@media (min-width: 576px) and (max-width: 991px) {
  .offcanvas-menu .mb-menu-link { font-size: 26px; line-height: 46px; }
  .offcanvas-menu .nav-ul-mb .sub-nav-link { font-size: 17px; }
}

/* 3. Floating go-to-top: smaller, safe corner */
#goTop {
  width: 36px !important; height: 36px !important; font-size: 15px;
  right: auto !important; left: 16px !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
#goTop .icon { font-size: 15px !important; }
@media (max-width: 991px) {
  footer .footer-bottom { padding-bottom: 72px; }
}

/* 4. Bidi: hours, testimonial counter, email input */
.hours-line { display: inline-block; white-space: nowrap; margin-left: 10px; }
.hours-line bdi, .contact-item bdi { unicode-bidi: isolate; }
.testimonials-pagination { direction: ltr; unicode-bidi: isolate; }
input[type="email"] { direction: ltr; text-align: right; font-family: inherit; }
input[type="email"]::placeholder { font-family: inherit; direction: ltr; text-align: right; }
input[type="email"]:placeholder-shown { direction: rtl; }
input[name="phone"][placeholder="شماره تماس را وارد کنید"],
input[name="phone"][placeholder="شماره تماس"] { direction: ltr; text-align: right; }
input[name="phone"][placeholder="شماره تماس را وارد کنید"]::placeholder,
input[name="phone"][placeholder="شماره تماس"]::placeholder { text-align: right; }
input[name="phone"][placeholder="شماره تماس را وارد کنید"]:placeholder-shown,
input[name="phone"][placeholder="شماره تماس"]:placeholder-shown { direction: rtl; text-align: right; }

/* 5. Tablet layout */
@media (max-width: 991px) {
  .about-company-visual { margin-left: auto !important; margin-right: auto !important; }
  .about-visual-team { left: 0 !important; }
  .about-visual-stat { right: 0 !important; }
  .services-image { width: 100%; max-width: 640px; height: 320px; }
  .section-contact .contact-auth-btns { max-width: 520px; }
  footer .footer-links { display: grid !important; grid-template-columns: repeat(4, auto); justify-content: center; gap: 12px 24px !important; }
  footer .footer-links a { white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .featured-works-item .content .bot { flex-direction: column; gap: 16px; }
  .featured-works-item .content .bot .heading { width: 100%; }
  .featured-works-item .content .grid-text { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .featured-works-item .content .grid-text .item { width: auto !important; }
  .featured-works-item .content .grid-text .item:first-child { grid-column: 1 / -1; }
  .section-contact .col-left > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .section-contact .col-left .contact-item { margin-bottom: 0 !important; }
  .section-contact .col-left .contact-item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  footer .footer-links { grid-template-columns: repeat(2, auto); }
}

/* 6. Card details */
.featured-works-item .content .pagi-dot { justify-content: flex-start; gap: 8px; }
.featured-works-item .content .pagi-dot span { width: 8px; height: 8px; flex: 0 0 8px; }
.featured-works-item .content .pagi-dot span.active { width: 24px; flex-basis: 24px; border-radius: 99px; }
@media (max-width: 991px) {
  .accordion-faq_item .accordion-action { padding-inline: 20px; }
  .accordion-faq_item .accordion-content { padding-inline: 20px; }
}
.list-tags { max-width: 100%; }
.list-tags a, .list-tags .tags-item { max-width: 100%; white-space: normal; }

/* Horizontal-overflow fixes (v2) */
/* Swiper carousels in the process (service pages) and benefits (about) sections spill past their column after a resize/rotate; clip them at their own box. */
.section-process .process-slide,
.benefits-design .benefits-design-inner { overflow: hidden; min-width: 0; }
.section-process .row > [class*="col-"],
.section-benefits .row > [class*="col-"] { min-width: 0; }
/* About visual: real studio frames, cropped to the existing shape. */
.about-visual-main a { display: block; }
.about-visual-main img {
  height: 620px;
  object-fit: cover;
  object-position: center 42%;
}
.about-visual-team a { display: block; }
.about-company-visual .about-visual-team { left: 0; }
.about-visual-team img { object-position: center 34%; }
@media (max-width: 767px) {
  .about-visual-main img { height: 440px; }
}
/* Hours: keep each range together but allow wrapping on narrow screens. */
@media (max-width: 420px) { .hours-line { white-space: normal; } .hours-line bdi { white-space: nowrap; } }
/* Footer links grid never wider than its container. */
footer .footer-links { max-width: 100%; }
/* LTR-template negative margins push carousels past the left edge, which scrolls an RTL page. */
@media (min-width: 992px) { .process-slide { margin-left: 0; } }
.swiper-box-shadow { margin-left: 0; margin-right: 0; }

/* Home hero matches the bought template: heavy title, icon cluster in the second line, larger buttons. */
.section-hero.home-hero .content-wrap .title {
  max-width: 1080px;
  margin-bottom: 22px;
  font-family: IRANSans, Tahoma, sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 5.4vw, 72px);
  line-height: 1.22;
  letter-spacing: -0.035em;
}
.section-hero.home-hero .content-wrap .title1,
.section-hero.home-hero .content-wrap .title2-text {
  display: block;
  font-weight: 700;
  background: none;
  color: #18181b;
  -webkit-text-fill-color: #18181b;
}
.section-hero.home-hero .content-wrap .title2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}
.section-hero.home-hero .content-wrap .title2-text { display: inline; }
.section-hero.home-hero .content-wrap .title,
.section-hero.home-hero .content-wrap .title2,
.section-hero.home-hero .content-wrap .hero-social-decoration,
.section-hero.home-hero .content-wrap .title-icon .title-icon-wrap {
  overflow: visible;
}
.section-hero.home-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-hero.home-hero > .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  padding-top: 108px;
  padding-bottom: 84px;
}
.section-hero.home-hero .content-wrap {
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.section-hero.home-hero .hero-kicker .heading-sub {
  margin-bottom: 16px;
}
.section-hero .content-wrap .title-icon,
.section-hero .content-wrap .title-icon .title-icon-wrap,
.section-hero .content-wrap .hero-social-decoration {
  overflow: visible;
}
.section-hero .content-wrap .title-icon .social-network-instagram {
  top: -30px;
}
.section-hero.home-hero .content-wrap .hero-social-decoration {
  position: relative;
  display: block;
  width: 255px;
  height: 177px;
  margin: 0;
  flex: 0 0 255px;
  transform: none;
}
.section-hero.home-hero .content-wrap .bot-btns {
  gap: 16px;
  margin-top: 28px;
}
.section-hero.home-hero .content-wrap .bot-btns .tf-btn,
.section-hero.home-hero .content-wrap .bot-btns .tf-btn-2 {
  min-width: 176px;
  min-height: 64px;
  padding: 18px 32px;
  font-family: IRANSans, Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.section-hero .title-icon .box {
  animation: hero-pill-glow 4.8s ease-in-out infinite;
}
.section-hero .social-network-instagram {
  --tilt: -10deg;
  animation: hero-social-float 3.4s ease-in-out infinite;
}
.section-hero .social-network-telegram {
  --tilt: 8deg;
  animation: hero-social-float 3.8s ease-in-out infinite .4s;
}
.section-hero .social-network-tiktok {
  --tilt: -8deg;
  animation: hero-social-float 3.1s ease-in-out infinite .75s;
}
@keyframes hero-social-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }
  50% { transform: translate3d(0, -8px, 0) rotate(var(--tilt, 0deg)); }
}
@keyframes hero-pill-glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .section-hero .social-network-icon,
  .section-hero .title-icon .box { animation: none; }
}

.works-viewport { overflow: visible; width: 100%; }
.works-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  direction: rtl;
  align-items: stretch;
  gap: 20px;
  transform: none !important;
}
.works-slide {
  width: auto;
  max-width: none;
  min-width: 0;
  direction: rtl;
  display: flex;
}
#works .featured-works-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#works .featured-works-item .image {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: none;
}
#works .featured-works-item .content {
  flex: 1 1 auto;
  height: auto;
  overflow: visible;
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
}
#works .featured-works-item .content .pagi-dot { display: none; }
#works .featured-works-item .content .bot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#works .featured-works-item .content .bot .heading {
  width: 100%;
  min-height: 0;
  margin: 0;
  white-space: normal;
  line-height: 1.4;
}
#works .featured-works-item .content .grid-text {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
#works .featured-works-item .content .grid-text .item {
  width: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#works .featured-works-item .content .grid-text .item:first-child {
  grid-column: 1 / -1;
}
#works .featured-works-item .content .grid-text .item .title {
  margin: 0;
}
#works .featured-works-item .content .grid-text .item:first-child > :last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 991px) {
  .works-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .works-track { grid-template-columns: 1fr; gap: 16px; }
  .section-hero.home-hero > .container {
    padding-top: 112px;
    padding-bottom: 88px;
  }
  .section-hero.home-hero .content-wrap .title {
    max-width: 100%;
    font-size: 32px;
    line-height: 1.45;
  }
  .section-hero.home-hero .content-wrap .title2 {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .section-hero.home-hero .content-wrap .title2-text { display: block; }
  .section-hero.home-hero .content-wrap .hero-social-decoration {
    flex: 0 0 auto;
    margin: 64px auto 0;
  }
  .section-hero.v1 .content-wrap .title2 {
    padding-top: 48px;
  }
  .section-hero.home-hero .hero-image { overflow: hidden; }
  .section-hero.home-hero .content-wrap .bot-btns .tf-btn,
  .section-hero.home-hero .content-wrap .bot-btns .tf-btn-2 {
    width: min(100%, 280px);
    min-height: 58px;
  }
  #about .about-company-content {
    padding-inline: 4px;
    max-width: 100%;
  }
  #about .about-company-desc,
  #about .about-company-title {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* Blog article: direction, fonts and links from the editor survive on the page. */
.blog-article {
  direction: rtl;
  text-align: right;
  font-family: IRANSans, Tahoma, sans-serif;
  font-size: 18px;
  line-height: 2;
}
.blog-article p { margin: 0 0 1em; }
.blog-article h2,
.blog-article h3,
.blog-article h4 { margin: 1.2em 0 .45em; line-height: 1.5; font-family: inherit; }
.blog-article a { color: var(--primary); text-decoration: underline; }
.blog-article ul,
.blog-article ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.blog-article blockquote {
  margin: 1em 0;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--primary);
}
.blog-article img { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: 12px; }
.blog-article [dir="rtl"] { direction: rtl; text-align: right; }
.blog-article [dir="ltr"] { direction: ltr; text-align: left; }

/* Last-resort safety net (clip keeps sticky/fixed working). */
html, body { overflow-x: clip; }