/**
 * Mobile layout — max-width: 991px
 * Keeps the page within the viewport so RTL does not create
 * a black left gutter, and keeps the burger on the right like EN.
 */

@media (max-width: 991px) {

  html,
  body {
    max-width: 100%;
  }

  #primary,
  .site-main,
  footer {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Wide marquee track must not expand the document */
  .marquee_text,
  .marquee_text2,
  .marquee_text3,
  .marque-wrap,
  .background-text-slider,
  .home4-trusted-client-area,
  .home3-contact-area .contact-wrapper {
    overflow: hidden !important;
    max-width: 100%;
  }

  .js-marquee-wrapper {
    max-width: none;
  }

  /* Header stays inside the viewport (not 100% of an oversized body) */
  .header-area2,
  .header-area2.style-2,
  .header-area2.sticky {
    direction: ltr;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }

  .header-area2 .header-logo img {
    max-height: 80px;
    width: auto;
  }

  .header-area2 .nav-right {
    margin-left: auto;
  }

  .header-area2 .nav-right .mobile-menu-btn {
    display: flex !important;
    visibility: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: flex-end;
  }

  /* Closed drawer stays off-canvas; .show-menu must win on transform */
  .header-area2 .main-menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: min(280px, 86vw) !important;
    max-width: 86vw;
    height: 100% !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 100000;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-110%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  html[dir="rtl"] .header-area2 .main-menu,
  html:lang(ar) .header-area2 .main-menu {
    left: auto;
    right: 0;
    transform: translateX(110%);
    direction: rtl;
    text-align: right;
  }

  .header-area2 .main-menu.show-menu,
  html[dir="rtl"] .header-area2 .main-menu.show-menu,
  html:lang(ar) .header-area2 .main-menu.show-menu {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  html[dir="rtl"] .header-area2 .main-menu ul,
  html:lang(ar) .header-area2 .main-menu ul,
  html[dir="rtl"] .header-area2 .main-menu ul>li,
  html:lang(ar) .header-area2 .main-menu ul>li,
  html[dir="rtl"] .header-area2 .main-menu ul>li>a,
  html:lang(ar) .header-area2 .main-menu ul>li>a {
    float: none !important;
    text-align: right !important;
  }

  html[dir="rtl"] .header-area2 .main-menu ul>li>a,
  html:lang(ar) .header-area2 .main-menu ul>li>a {
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 12px 0 !important;
  }

  html[dir="rtl"] .header-area2 .main-menu ul>li>i,
  html[dir="rtl"] .header-area2 .dropdown-icon,
  html[dir="rtl"] .header-area2 .main-menu ul li .bi,
  html:lang(ar) .header-area2 .main-menu ul>li>i,
  html:lang(ar) .header-area2 .dropdown-icon,
  html:lang(ar) .header-area2 .main-menu ul li .bi {
    right: auto !important;
    left: 0 !important;
  }

  html[dir="rtl"] .header-area2 .main-menu ul li ul.sub-menu,
  html:lang(ar) .header-area2 .main-menu ul li ul.sub-menu {
    margin-left: 0 !important;
    margin-right: 12px !important;
  }

  html[dir="rtl"] .header-area2 .mobile-logo-area,
  html:lang(ar) .header-area2 .mobile-logo-area {
    justify-content: flex-start !important;
  }

  html[dir="rtl"] .header-area2 .header-lang-switcher-wrap--mobile,
  html[dir="rtl"] .header-area2 .mobile-menu-form .hotline,
  html[dir="rtl"] .header-area2 .mobile-menu-form .email,
  html:lang(ar) .header-area2 .header-lang-switcher-wrap--mobile,
  html:lang(ar) .header-area2 .mobile-menu-form .hotline,
  html:lang(ar) .header-area2 .mobile-menu-form .email {
    text-align: right;
  }

  /* WOW fade offsets hide whole sections when the page is clipped */
  .wow {
    visibility: visible !important;
  }

  .banner-area4 {
    min-height: auto;
    padding: 160px 16px 70px !important;
    overflow: hidden;
  }

  .banner-area4 .banner-content {
    max-width: 100%;
  }

  .banner-area4 .banner-content p {
    margin-right: 0;
    margin-left: 0;
  }

  .home4-trusted-client-area {
    margin-top: 40px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 30px 16px !important;
  }

  .home4-contact-area .contact-wrapper .title {
    font-size: clamp(28px, 8vw, 42px);
  }

  .home4-contact-area .contact-wrapper .content {
    font-size: clamp(32px, 10vw, 52px);
  }

  html[dir="rtl"] h1,
  html[dir="rtl"] h2,
  html[dir="rtl"] h3,
  html[dir="rtl"] h4,
  html[dir="rtl"] .primary-btn3,
  html[dir="rtl"] .primary-btn5,
  html[dir="rtl"] .section-title-4 h2,
  html[dir="rtl"] .section-title-4 span,
  html:lang(ar) h1,
  html:lang(ar) h2,
  html:lang(ar) h3,
  html:lang(ar) h4,
  html:lang(ar) .primary-btn3,
  html:lang(ar) .primary-btn5,
  html:lang(ar) .section-title-4 h2,
  html:lang(ar) .section-title-4 span {
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html[dir="rtl"] .banner-area4,
  html[dir="rtl"] .banner-area4 .banner-content,
  html[dir="rtl"] .section-title-4,
  html[dir="rtl"] .home4-about-section .banner-right-content,
  html[dir="rtl"] .home4-about-section .about-left-content,
  html[dir="rtl"] .single-service-card .services-content,
  html[dir="rtl"] .home4-work-section .work-content,
  html[dir="rtl"] .single-blog .blog-content,
  html[dir="rtl"] footer .footer-widget,
  html:lang(ar) .banner-area4,
  html:lang(ar) .banner-area4 .banner-content,
  html:lang(ar) .section-title-4,
  html:lang(ar) .home4-about-section .banner-right-content,
  html:lang(ar) .home4-about-section .about-left-content,
  html:lang(ar) .single-service-card .services-content,
  html:lang(ar) .home4-work-section .work-content,
  html:lang(ar) .single-blog .blog-content,
  html:lang(ar) footer .footer-widget {
    text-align: right;
  }

  html[dir="rtl"] .section-title-4.two.text-center,
  html[dir="rtl"] .home4-contact-area .contact-wrapper,
  html[dir="rtl"] .home4-trusted-client-area p,
  html:lang(ar) .section-title-4.two.text-center,
  html:lang(ar) .home4-contact-area .contact-wrapper,
  html:lang(ar) .home4-trusted-client-area p {
    text-align: center !important;
  }

  html[dir="rtl"] .primary-btn5 .content,
  html:lang(ar) .primary-btn5 .content {
    margin-left: 0 !important;
    margin-right: -28px !important;
  }

  html[dir="rtl"] .home4-work-section .mb-55,
  html:lang(ar) .home4-work-section .mb-55 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html[dir="rtl"] .breadcrumb-list img,
  html:lang(ar) .breadcrumb-list img {
    transform: scaleX(-1);
  }

  html[dir="rtl"] .header-sidebar,
  html:lang(ar) .header-sidebar {
    right: auto;
    left: 0;
    transform: translateX(-110%);
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
  }

  html[dir="rtl"] .header-sidebar.slide,
  html:lang(ar) .header-sidebar.slide {
    transform: translateX(0);
  }

  .mobile-logo-wrap img {
    width: 150px;
  }
}