/* ============================================================================ */
/* ARABIC RTL CSS - CLEAN ARCHITECTURE */
/* ============================================================================ */
/* 
   CLEAN ARCHITECTURE:
   - Mobile/Tablet: Uses EN CSS exactly + RTL paragraphs only
   - Desktop: RTL layout for Section 0, LTR layout for Sections 1-7
   - No conflicting rules, no duplications, minimal RTL
   
   🔒 DESKTOP VERSION PERMANENTLY LOCKED 🔒
   ⚠️  DO NOT MODIFY ANY DESKTOP RULES ⚠️
   ⚠️  DO NOT EDIT ANY DESKTOP CSS ⚠️
   ⚠️  DO NOT TOUCH DESKTOP FUNCTIONALITY ⚠️
   
   Desktop rules below are FINALIZED and PROHIBITED from modification.
   Any changes to desktop behavior are STRICTLY FORBIDDEN.
*/

/* ============================================================================ */
/* DESKTOP ONLY: SECTION 0 (HOME/TIMELINE) - FULL RTL ISOLATION */
/* ============================================================================ */

/* UNDO: Leasing Inquiry desktop-specific half/full overrides (reverted per user) */
/* Section 0 container: LTR layout (RTL only on text nodes) */
/* REMOVED: direction: rtl from container to prevent Swiper/Owl interference */
/* Text children will inherit RTL from body or explicit text rules */
#section0 {
    /* Container stays LTR for plugin compatibility */
    text-align: right !important; /* Visual alignment only, not direction */
}

/* Section 0 text alignment (inherited from container, explicit for clarity) */
#section0 h1, #section0 h2, #section0 h3,
#section0 h4, #section0 h5, #section0 h6,
#section0 p, #section0 .text-title,
#section0 .text-txt { 
    text-align: right; 
}

/* Timeline Swiper navigation RTL positioning */
#section0 .parallax .swiper-button-prev { 
    left: auto; 
    right: 10px; 
}

#section0 .parallax .swiper-button-next { 
    right: auto; 
    left: 10px; 
}

.timeline .swiper-button-prev {
    top: 15%;
    right: auto;
    left: 15%;
    transform: rotate(90deg) translate(0, 10px);
}

.timeline .swiper-button-next {
    top: auto;
    bottom: 15%;
    right: auto;
    left: 15%;
    transform: rotate(90deg) translate(0, 10px);
}

/* Timeline Swiper pagination RTL */
#section0 .timeline .swiper-container .swiper-pagination,
#section0 .timeline .swiper-pagination {
    left: 15% !important;  /* RTL mirror positioning - must override Swiper defaults */
    right: auto !important;
    margin-left: 5px;
    margin-right: 0;
    height: 100% !important;  /* Vertical pagination - must override Swiper defaults */
    top: 0 !important;
    display: flex !important;  /* Custom layout - must override Swiper defaults */
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
    z-index: 1;
      opacity: 1;
      visibility: visible;
    transform: none;
}

#section0 .timeline .swiper-container .swiper-pagination::before,
#section0 .timeline .swiper-pagination::before {
    right: -30px !important;  /* RTL mirror - must override Swiper */
    left: auto !important;
    width: 2px;
    background-color: rgba(255, 255, 255, .4);
      opacity: 1;
      visibility: visible;
      display: block;
}

#section0 .timeline .swiper-container .swiper-pagination-bullet::before,
#section0 .timeline .swiper-pagination-bullet::before {
    right: -31px !important;  /* RTL mirror - must override Swiper */
    left: auto !important;
      opacity: 1;
      visibility: visible;
      display: block;
}

#section0 .timeline .swiper-container .swiper-pagination-bullet,
#section0 .timeline .swiper-pagination-bullet {
    position: relative !important;  /* Must override Swiper defaults */
    width: auto !important;  /* Custom year labels - must override Swiper */
    height: auto !important;
      text-align: center;
    background: transparent !important;  /* Must override Swiper bullet styles */
      color: #fff;
      margin: 15px 0;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      line-height: normal;
      font-style: italic;
      text-transform: uppercase;
      font-weight: 400;
      letter-spacing: normal;
      text-shadow: 1px 1px 2px #111;
      opacity: 1;
      visibility: visible;
      display: block;
    border-radius: 0 !important;  /* Must override Swiper rounded bullets */
}

#section0 .timeline .swiper-container .swiper-pagination-bullet-active,
#section0 .timeline .swiper-pagination-bullet-active {
      color: #fff;
      opacity: 1;
      visibility: visible;
      display: block;
    background: transparent !important;  /* Must override Swiper active state */
}

#section0 .timeline .swiper-container .swiper-pagination-bullet-active::before,
#section0 .timeline .swiper-pagination-bullet-active::before {
    transform: scale(1);
}

/* Section 0 section titles RTL positioning */
#section0 .section-title-vertical {
    left: auto;
    right: 35px;
}

#section0 .section-title-vertical.right-side {
    right: auto;
    left: 45px;
}

#section0 .section-title-vertical:after {
    margin: 20px 0 0 12px !important; /* Keep left margin like English - line aligns on left side of vertical text */
}
/* ============================================================================ */
/* DESKTOP ONLY: SECTIONS 1-7 SECTION TITLES - RTL POSITIONING */
/* ============================================================================ */

@media only screen and (min-width: 1025px) {
/* Standard section titles (left-side in EN → right-side in AR) */
/* Sections 2, 4, 6 */
#section2 .section-title-vertical,
#section4 .section-title-vertical,
#section6 .section-title-vertical {
    left: auto;
    right: 35px;
}

/* Right-side section titles (right-side in EN → left-side in AR) */
/* Sections 1, 3, 5, 7 */
#section1 .section-title-vertical.right-side,
#section3 .section-title-vertical.right-side,
#section5 .section-title-vertical.right-side,
#section7 .section-title-vertical.right-side {
    right: auto;
    left: 45px;
}

/* UNDO: Extra RTL text-only override for Sections 1,2,6 (reverted per user) */

/* RTL :after positioning for sections 1-7 titles */
#section1 .section-title-vertical:after,
#section2 .section-title-vertical:after,
#section3 .section-title-vertical:after,
#section4 .section-title-vertical:after,
#section5 .section-title-vertical:after,
#section6 .section-title-vertical:after,
#section7 .section-title-vertical:after {
    margin: 20px 0 0 12px !important; /* Keep left margin like English - line aligns on left side of vertical text */
}

/* Timeline content RTL positioning */
.timeline .swiper-slide-content {
    position: absolute;
    width: 400px;
    top: 50%;
    right: auto;
    left: 23%;
    text-align: right;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    text-shadow: 1px 1px 2px #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    transform: translateY(-50%);
    z-index: 2;
}

  /* AR DESKTOP TYPOGRAPHY - Keep max-width for readability only */
  /* Section 0: Timeline title max-width */
    #section0 .timeline-title,
    #section0 .text-title h4 {
        max-width: 70ch; /* Keep measure readable */
    }
    
    /* S0 Timeline description - max-width */
    #section0 .timeline-text,
    #section0 .text-txt p,
    #section0 p {
        max-width: 65ch; /* Keep measure readable */
    }
    
    /* Section padding adjustments */
    #section1 .text-txt {
        padding-bottom: 12px; /* Add breathing room if needed */
    }
    
    #section2 .text-txt {
        padding-bottom: 12px; /* Add breathing room if needed */
    }
    
    #section4 .text-txt {
        padding-bottom: 12px; /* Add breathing room if needed */
    }
    
    /* Section 1 and Section 2 RTL - Desktop */
    #section1 .about-content .about-content-inner,
    #section2 .about-content .about-content-inner {
      text-align: right;
    }
    
    #section1 .about-content-inner .text-spacer .c-btn.inverse,
    #section2 .about-content-inner .text-spacer .c-btn.inverse,
    #section1 .text-spacer .c-btn.inverse,
    #section2 .text-spacer .c-btn.inverse,
    #section1 .about-content-inner .text-spacer .c-btn.inverse span,
    #section2 .about-content-inner .text-spacer .c-btn.inverse span,
    #section1 .text-spacer .c-btn.inverse span,
    #section2 .text-spacer .c-btn.inverse span {
      direction: rtl;
      text-align: right;
    }
    
    @media only screen and (min-width: 881px) {
      #section1 .about-content-inner .text-spacer,
      #section2 .about-content-inner .text-spacer,
      #section1 .text-spacer,
      #section2 .text-spacer {
        padding: 10px 30px 0 0;
      }
    }
    
}

/* ============================================================================ */
/* DESKTOP ONLY: LOGO & HAMBURGER MENU - RTL POSITIONING */
/* ============================================================================ */

@media only screen and (min-width: 1025px) {
body.is-loaded .logo,
body.is-loaded .logo.logo-light { 
    left: auto;
    right: 10px;
    position: fixed;
    top: 10px;
}

.main-menu { 
    right: auto;
    left: 50px;
    top: 88px;
    position: absolute;
}

.custom-sel,
.language-switcher {
    left: calc(50px + 40px);
    right: auto;
    top: 88px;
    position: absolute;
}
}

/* Mobile breakpoint: Reduce logo right margin and ensure exact 100px size */
@media only screen and (max-width: 1024px) {
  body.is-loaded .logo,
  body.is-loaded .logo.logo-light {
    right: max(5px, env(safe-area-inset-right, 0px) + 5px) !important;
    left: auto !important;
    top: max(5px, env(safe-area-inset-top, 0px) + 5px) !important;
    width: 100px !important;
    height: 100px !important;
  }
}

/* ============================================================================ */
/* DESKTOP ONLY: SECTIONS 1-7 - LTR LAYOUT WITH RTL TEXT */
/* ============================================================================ */

@media only screen and (min-width: 1025px) {
/* Services wrapper RTL - Desktop */
.services-wrapper {
  direction: rtl !important;
  text-align: right !important;
}

/* Services accordion RTL - Desktop */
.services-accordion,
.services-accordion ul,
.services-accordion ul li,
.services-accordion ul li span,
.services-accordion > ul,
.services-accordion > ul > li,
.services-accordion ul ul,
.services-accordion ul ul li,
.services-accordion ul ul li a {
  direction: rtl !important;
  text-align: right !important;
}

.services-accordion ul li {
  padding: 0 !important;
}

.services-accordion ul ul {
  margin-left: 0 !important;
  margin-right: 15px !important;
  padding: 0 !important;
}

.services-accordion ul ul li {
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.services-accordion ul ul li a {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.services-accordion ul li span:after {
  right: auto !important;
  left: 20px !important;
}

/* Services container with dark-logo - RTL for headings and lists - Desktop */
.services-container.dark-logo {
  direction: rtl !important;
}

.services-container.dark-logo h1,
.services-container.dark-logo h2,
.services-container.dark-logo h3,
.services-container.dark-logo h4,
.services-container.dark-logo h5,
.services-container.dark-logo h6,
.services-container.dark-logo .section-title,
.services-container.dark-logo .section-heading,
.services-container.dark-logo .text-title,
.services-container.dark-logo .text-title h4 {
  direction: rtl !important;
  text-align: right !important;
}

.services-container.dark-logo ul,
.services-container.dark-logo ul li,
.services-container.dark-logo ul ul,
.services-container.dark-logo ul ul li,
.services-container.dark-logo ul ul li a,
.services-container.dark-logo .services-accordion {
  direction: rtl !important;
  text-align: right !important;
}

/* Parent containers RTL - Desktop - CRITICAL for accordion inheritance */
.services-container.dark-logo .blockquote,
.services-container.dark-logo .center-container,
.services-container.dark-logo .center-block {
  direction: rtl !important;
}

/* Section 3 & 5 carousel RTL - Desktop */
#section3 .works-page-img-carousel-text,
#section3 .works-page-img-carousel-heading,
#section3 .works-page-img-carousel-title,
#section3 .works-page-img-carousel-title h4,
#section3 .works-page-img-carousel-text .c-btn.inverse.popup-photo,
#section5 .news-page-img-carousel-text,
#section5 .news-page-img-carousel-heading,
#section5 .news-page-img-carousel-title,
#section5 .news-page-img-carousel-title h4,
#section5 .news-page-img-carousel-text .c-btn.c-btn-news.inverse,
#section5 .news-page-img-carousel-text .news-page-img-carousel-content .c-btn {
  direction: rtl !important;
  text-align: right !important;
}

#section5 .news-page-img-carousel-text {
  z-index: 100 !important;
  pointer-events: auto !important;
}

#section5 .news-page-img-carousel-text .c-btn.c-btn-news.inverse,
#section5 .news-page-img-carousel-text .news-page-img-carousel-content .c-btn {
  z-index: 200 !important;
  pointer-events: auto !important;
  position: relative !important;
}

#section5 .news-page-img-carousel-text .news-page-img-carousel-content {
  overflow: visible !important;
}

/* ONLY text elements get RTL for Arabic reading + text-align right */
#section1 h1, #section1 h2, #section1 h3,
#section1 h4, #section1 h5, #section1 h6,
#section1 p, #section1 li, #section1 a, #section1 label,
#section1 .text-title, #section1 .text-txt,
#section2 h1, #section2 h2, #section2 h3,
#section2 h4, #section2 h5, #section2 h6,
#section2 p, #section2 li, #section2 a, #section2 label,
#section2 .text-title, #section2 .text-txt,
#section3 h1, #section3 h2, #section3 h3,
#section3 h4, #section3 h5, #section3 h6,
#section3 p, #section3 span, #section3 li, #section3 a, #section3 label,
#section4 h1, #section4 h2, #section4 h3,
#section4 h4, #section4 h5, #section4 h6,
#section4 p, #section4 span, #section4 li, #section4 a, #section4 label,
#section5 h1, #section5 h2, #section5 h3,
  #section5 h4, #section5 h5, #section5 h6,
#section5 p, #section5 span, #section5 li, #section5 a, #section5 label,
#section6 h1, #section6 h2, #section6 h3,
#section6 h4, #section6 h5, #section6 h6,
#section6 p, #section6 span, #section6 li, #section6 a, #section6 label,
#section6 .text-title, #section6 .text-txt,
#section6 input, #section6 textarea, #section6 select, #section6 option,
#section6 input::placeholder, #section6 textarea::placeholder,
#section7 h1, #section7 h2, #section7 h3,
#section7 h4, #section7 h5, #section7 h6,
#section7 p, #section7 span, #section7 li, #section7 a, #section7 label,
#section7 input, #section7 textarea, #section7 select, #section7 option,
#section7 input::placeholder, #section7 textarea::placeholder {
    direction: rtl !important;
  }

  /* Text-align right for Sections 1, 2, 6 - Desktop only */
  @media only screen and (min-width: 881px) {
  #section1 h1, #section1 h2, #section1 h3,
  #section1 h4, #section1 h5, #section1 h6,
  #section1 p, #section1 .text-title, #section1 .text-txt,
  #section2 h1, #section2 h2, #section2 h3,
  #section2 h4, #section2 h5, #section2 h6,
  #section2 p, #section2 .text-title, #section2 .text-txt,
  #section6 h1, #section6 h2, #section6 h3,
  #section6 h4, #section6 h5, #section6 h6,
  #section6 p, #section6 .text-title, #section6 .text-txt {
    text-align: right !important;
    }
  }
  
  /* Remove left padding and border from .text-txt in RTL sections so paragraph aligns with heading - Desktop only */
  @media only screen and (min-width: 881px) {
    #section1 .text-txt,
    #section2 .text-txt,
    #section6 .text-txt {
    padding: 0 0 0 0 !important; /* Remove left padding for RTL alignment */
    border-left: none !important; /* Remove left border */
    border-right: 1px solid #555 !important; /* Add right border for RTL */
    padding-right: 30px !important; /* Add right padding to match original spacing */
  }
  
  /* Remove left padding from headings in RTL sections so they align with paragraphs - Desktop only */
  @media only screen and (min-width: 881px) {
    #section1 .text-title h4 {
      padding: 0 0 30px 0 !important;
    }
  }
  
  /* Section 2 - remove right padding so heading starts independently (like Section 1) */
  #section2 .text-title h4 {
    padding: 0 0 30px 0 !important;
  }
  
  /* Section 1 and Section 2 text spacing - Desktop */
  @media only screen and (min-width: 881px) {
    #section1 .text-txt,
    #section2 .text-txt {
      padding-bottom: 25px !important;
    }
  }
  
  /* Section 6 (leasing) - add right padding to align with paragraphs */
  #section6 .text-title h4 {
    padding: 0 30px 20px 0 !important;
  }

  /* Column flipping for sections 1, 2, 4, 6 - DESKTOP ONLY */
  @media only screen and (min-width: 1025px) {
    #section1 .row,
    #section2 .row,
    #section4 .row,
    #section6 .row {
      display: flex !important;
      flex-direction: row-reverse !important;
    }

    #section1 .row > .col-md-6,
    #section1 .row > .col-sm-6,
    #section2 .row > .col-md-6,
    #section2 .row > .col-sm-6,
    #section4 .row > .col-md-6,
    #section4 .row > .col-sm-6,
    #section6 .row > .col-md-6,
    #section6 .row > .col-sm-6 {
      float: none !important;
    }
  }




  /* SECTION 7 (CONTACT) - DESKTOP CENTER ALIGNMENT (MATCH EN) */
    /* Contact heading "اتصل بنا" */
    #section7 .text-title-secondary-contact h4 {
        text-align: center !important; /* Override RTL right alignment */
        direction: rtl; /* Keep RTL for text rendering */
    }
    
    /* Newsletter heading "اشترك في النشرة البريدية" */
    #section7 .section-heading.newsletter,
    #section7 h2.newsletter {
        text-align: center !important;
        direction: rtl;
    }
    
    /* Contact info descriptions (location, email, phone) */
    #section7 .contact-info-description,
    #section7 .contact-info-description-img,
    #section7 .contact-info-text {
        text-align: center !important;
        direction: rtl;
    }
    
    /* Email and contact links should remain LTR */
    #section7 .contact-info-text a,
    #section7 .contact-info-text.large a,
    #section7 a[href^="mailto:"],
    #section7 a.contact,
    #section7 .link-underline.contact {
        direction: ltr !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        transition: color 0.3s ease;
    }
    
    /* Hover effect for clickable elements - gold color */
    #section7 a[href^="mailto:"]:hover,
    #section7 a[href^="tel:"]:hover,
    #section7 a.contact:hover,
    #section7 .link-underline.contact:hover,
    #section7 .contact-info-text a:hover {
        color: #A89B7E !important;
    }
    
    /* Fix text breaking for other text elements */
    #section7 .contact-info-text,
    #section7 .contact-info-description,
    #section7 span {
        word-break: normal !important;
        word-wrap: normal !important;
        overflow-wrap: normal !important;
    }
    
    /* Newsletter form elements */
    #section7 #subscribe-wrapper,
    #section7 #newsletter,
    #section7 .newsletter {
        text-align: center !important;
    }
    
    #section7 .subscribe-email,
    #section7 input[type="email"],
    #section7 input::placeholder {
        text-align: center !important;
    direction: ltr;
    letter-spacing: 0 !important;
}

    #section7 button,
    #section7 .c-btn {
        text-align: center !important;
    }
    
    /* Social icons */
    #section7 .social-icons-wrapper,
    #section7 .social-icons {
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Any other paragraphs or spans in Section 7 */
    #section7 p,
    #section7 span,
    #section7 label {
        text-align: center !important;
        direction: rtl;
    }
}

/* ============================================================================ */
/* MOBILE/TABLET: MINIMAL RTL - PARAGRAPHS ONLY */
/* ============================================================================ */
/* 
   CLEAN MOBILE APPROACH:
   - Uses EN mobile CSS exactly (no overrides)
   - RTL applied ONLY to paragraphs for Arabic reading
   - Headings, buttons, forms behave exactly like EN
   - No global rules, no conflicts, minimal code
*/

@media only screen and (max-width: 1024px) {
  /* Keep structural containers LTR so Slick geometry matches EN */
  #section1,
  #section1 .row,
  #section1 [class*="col-"],
  #section1 .slick-left-almutawir,
  #section1 .slick-left-almutawir .slick-list,
  #section1 .slick-left-almutawir .slick-track,
  #section1 .slick-left-almutawir .slick-slide,
  #section2,
  #section2 .row,
  #section2 [class*="col-"],
  #section2 .slick-right-about,
  #section2 .slick-right-about .slick-list,
  #section2 .slick-right-about .slick-track,
  #section2 .slick-right-about .slick-slide {
    direction: ltr;
  }

  /* Section 1 – Arabic text centered like EN */
  #section1 .text-title,
  #section1 .text-title h4,
  #section1 .text-txt,
  #section1 .text-txt p {
    direction: rtl;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Section 2 – text right aligned */
  #section2 .text-title,
  #section2 .text-title h4,
  #section2 .text-txt,
  #section2 .text-txt p {
    direction: rtl;
    text-align: right;
    text-transform: none;
    letter-spacing: 0;
  }

  #section2 .text-txt {
    align-items: flex-start;
  }

  /* Skillbars: layout LTR, labels RTL */
  #section2 .show-skillbar,
  #section2 .show-skillbar .skillbar {
    direction: ltr;
    text-align: left;
  }

  #section2 .show-skillbar .skillbar {
    padding-inline-end: 56px;
    min-height: 44px;
  }

  #section2 .show-skillbar .skillbar-title {
    direction: rtl;
    text-align: right;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    inset-inline-start: 0;
    inset-inline-end: auto;
  }

  #section2 .show-skillbar .skill-bar-percent {
    direction: ltr;
    text-align: left;
    inset-inline-end: 0;
    inset-inline-start: auto;
  }

  /* Buttons & links – keep RTL reading order */
  .text-spacer,
  .text-spacer .c-btn,
  .text-spacer .c-btn span,
  a,
  a span {
    direction: rtl;
    text-align: center;
  }

  /* Inputs – user typing RTL */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  input::placeholder,
  textarea::placeholder,
  .form-control {
    direction: rtl;
  }
}

/* ============================================================================ */
/* END OF ARABIC RTL CSS */
/* ============================================================================ */