/**
 * ALLURE Website - Master RTL (Right-to-Left) Stylesheet for Arabic
 * Automatically active when <html dir="rtl" lang="ar">
 */

/* Fallback Arabic webfonts. Keep these until the licensed Boutros files are in
   place; once they are, this @import can be deleted. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   0. Arabic typeface -- GE SS Two (Boutros GE SS Two)
   ========================================================================== */
@font-face {
  font-family: 'GE SS Two';
  src: url('../fonts/GE-SS-Two-Light.woff2') format('woff2'),
       url('../fonts/GE-SS-Two-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GE SS Two';
  src: url('../fonts/GE-SS-Two-Medium.woff2') format('woff2'),
       url('../fonts/GE-SS-Two-Medium.otf') format('opentype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GE SS Two';
  src: url('../fonts/GE-SS-Two-Bold.woff2') format('woff2'),
       url('../fonts/GE-SS-Two-Bold.otf') format('opentype');
  font-weight: 600 700 800;
  font-style: normal;
  font-display: swap;
}

/* Also alias 'Boutros GE SS Two' for full compatibility */
@font-face {
  font-family: 'Boutros GE SS Two';
  src: url('../fonts/GE-SS-Two-Light.woff2') format('woff2'),
       url('../fonts/GE-SS-Two-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boutros GE SS Two';
  src: url('../fonts/GE-SS-Two-Medium.woff2') format('woff2'),
       url('../fonts/GE-SS-Two-Medium.otf') format('opentype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boutros GE SS Two';
  src: url('../fonts/GE-SS-Two-Bold.woff2') format('woff2'),
       url('../fonts/GE-SS-Two-Bold.otf') format('opentype');
  font-weight: 600 700 800;
  font-style: normal;
  font-display: swap;
}

/* One place to change the Arabic stack. --allure-ar-display is used for
   headings/display type, --allure-ar-body for running text and UI. */
html[dir="rtl"],
html[lang="ar"],
body.rtl-mode,
[dir="rtl"],
[lang="ar"] {
  --allure-ar-display: 'Boutros GE SS Two', 'GE SS Two', 'Cairo', -apple-system,
                       BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --allure-ar-body: 'Boutros GE SS Two', 'GE SS Two', 'IBM Plex Sans Arabic',
                    -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, sans-serif;

  /* Force all theme typography variables to use Boutros GE SS Two in Arabic/RTL mode */
  --font_gesstwo: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_thunder: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_sequelsansromanbody: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_sequelsansmediumbody: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_instrumentsans: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_dmsans: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_bdogrotesk: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_timesnow: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_tartuffo: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
  --font_tartuffotrial: "Boutros GE SS Two", "GE SS Two", sans-serif !important;
}

/* ==========================================================================
   1. Typography & Global RTL Rules
   ========================================================================== */
html[dir="rtl"],
html[lang="ar"],
html[dir="rtl"] body,
html[lang="ar"] body,
body.rtl-mode {
  direction: rtl;
  text-align: right;
  font-family: var(--allure-ar-body) !important;
  overflow-x: hidden;
}

/* Universal selector ensuring all text containers inherit Boutros GE SS Two */
html[dir="rtl"] *:not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(svg):not(svg *):not(.custom-cursor):not(.custom-cursor *):not(.spinner),
html[lang="ar"] *:not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(svg):not(svg *):not(.custom-cursor):not(.custom-cursor *):not(.spinner) {
  font-family: var(--allure-ar-body) !important;
}

@keyframes t-slide-rtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

html[dir="rtl"] .title-wrapper,
html[lang="ar"] .title-wrapper {
  animation-name: t-slide-rtl !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .title,
html[dir="rtl"] .page-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-subtitle,
html[dir="rtl"] .rr-btn,
html[dir="rtl"] .main-menu li a,
html[dir="rtl"] .font-sequelsans-romanbody,
html[dir="rtl"] .font-thunder,
html[dir="rtl"] [class*="font-sequel"],
html[dir="rtl"] .service-card-title,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] .title,
html[lang="ar"] .page-title,
html[lang="ar"] .section-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .section-subtitle,
html[lang="ar"] .rr-btn,
html[lang="ar"] .main-menu li a,
html[lang="ar"] .font-sequelsans-romanbody,
html[lang="ar"] .font-thunder,
html[lang="ar"] [class*="font-sequel"],
html[lang="ar"] .service-card-title {
  font-family: var(--allure-ar-display) !important;
  letter-spacing: normal !important;
}

html[dir="rtl"] .page-title,
html[dir="rtl"] .page-title-wrapper .page-title,
html[lang="ar"] .page-title,
html[lang="ar"] .page-title-wrapper .page-title {
  font-size: clamp(50px, 10vw, 140px) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] select,
html[dir="rtl"] li,
html[dir="rtl"] .service-card-text,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] button,
html[lang="ar"] select,
html[lang="ar"] li,
html[lang="ar"] .service-card-text {
  font-family: var(--allure-ar-body) !important;
}

/* ==========================================================================
   2. Language Switcher Component
   ========================================================================== */
.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 16px 7px;
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  line-height: 1;
}

.lang-switcher-btn:hover {
  border-color: #6f1946;
  background: rgba(111, 25, 70, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.lang-switcher-btn .lang-icon {
  font-size: 14px;
  opacity: 0.9;
}

.lang-switcher-btn .lang-text {
  font-family: 'GE SS Two', 'Boutros GE SS Two', 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 14px;
}

.header-lang-wrap {
  display: flex;
  align-items: center;
  margin: 0;
}

@media (max-width: 991px) {
  .header-lang-wrap {
    display: none !important;
  }
}

.offset-lang-wrap {
  margin-top: 24px;
  margin-bottom: 24px;
}

.offset-lang-wrap .lang-switcher-btn {
  padding: 12px 20px;
  border-radius: 50px;
  gap: 8px;
}

/* ==========================================================================
   3. Header & Navigation in RTL
   ========================================================================== */
html[dir="rtl"] .header-area-2 .header__nav {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="rtl"] .header__button {
  margin-left: 0;
  margin-right: 0;
  gap: 10px;
}

html[dir="rtl"] .header__navicon {
  margin-left: 0;
  margin-right: 0;
}

html[dir="rtl"] .main-menu ul li a {
  text-align: right;
}

/* ==========================================================================
   4. Hero Area & Animated Headings in RTL
   ========================================================================== */
html[dir="rtl"] .hero-area-2-inner {
  justify-content: flex-end;
}

html[dir="rtl"] .hero-area-2 .section-title {
  font-size: clamp(38px, 7.5vw, 110px) !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

html[dir="rtl"] .hero-area-2 .section-title .title-video {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

@media only screen and (max-width: 991px) {
  html[dir="rtl"] .hero-area-2-inner {
    align-items: flex-start !important;
    text-align: right !important;
  }
}


html[dir="rtl"] .char-anim,
html[dir="rtl"] .word-anim,
html[dir="rtl"] .rr_title_anim,
html[dir="rtl"] .title_anim {
  /* unicode-bidi: plaintext; */
}

/* ==========================================================================
   5. About Section in Homepage (about-area-2)
   ========================================================================== */
/* The "2017 - PRESENT / Allure" heading is driven by a pinned GSAP scrub
   timeline (main.js, >=1400px). That timeline animates position/right/left and
   font-size on these elements via INLINE styles -- and inline styles lose to
   !important. An earlier RTL pass used !important here plus
   `.last-text { display:none }`, which silently discarded every step of the
   animation in Arabic.

   So: no !important below. `html[dir="rtl"] ...` already out-specifies the base
   rule (0-4-2 vs 0-3-1), so these win normally while still letting GSAP
   override them mid-tween. We mirror the LTR geometry instead of replacing it:
   position:absolute and white-space:nowrap are inherited from the base on
   purpose, since the pin and the horizontal slide both depend on them. */
html[dir="rtl"] .about-area-2 .section-content .year-since {
  font-family: var(--allure-ar-display);
  /* Arabic fonts have tall ascenders; use normal line-height to prevent clipping */
  line-height: 1.2;
  letter-spacing: normal;
  text-align: right;
  /* Make Arabic text bolder as requested */
  font-weight: 700;
  /* Push down so tall ascenders (like madda) aren't clipped by the top of the viewport when GSAP pins this section */
  margin-top: 80px;
  /* RTL flips the inline order, so "ALLURE" renders first (left) and the year
     last (right). Anchor the box to the right edge so it overflows LEFT and
     opens on the year -- the mirror of the LTR left anchor. main.js then slides
     it by tweening `right` negative. Only `right` is ever set: adding `left`
     would over-constrain an auto-width absolute box and resize it instead of
     moving it. */
  right: 0;
  left: auto;
}

html[dir="rtl"] .about-area-2 .section-content .year-since .first-text {
  text-align: left;
  padding-right: 0;
  padding-left: 40px;
}

html[dir="rtl"] .about-area-2 .section-content .year-since .last-text {
  display: inline-block;
  width: var(--container-max-widths);
  text-align: center;
}

html[dir="rtl"] .about-area-2 .section-content .text-wrapper,
html[dir="rtl"] .about-area-2 .section-content .btn-wrapper {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: 650px !important;
  text-align: right !important;
}

html[dir="rtl"] .about-area-2 .section-content .text-wrapper {
  margin-top: 250px !important; /* Push paragraph down to prevent vertical overlap with massive text */
}

@media only screen and (max-width: 991px) {
  html[dir="rtl"] .about-area-2 .section-content .year-wrapper {
    height: clamp(120px, 28vw, 180px);
    margin-top: 10vh;
    position: relative;
    overflow: visible;
    width: 100%;
    --stage-width: calc(100vw - 30px);
  }

  html[dir="rtl"] .about-area-2 .section-content .year-since {
    margin-top: 0;
    right: 0 !important;
    left: auto !important;
    font-size: clamp(48px, 14vw, 85px);
    font-family: var(--allure-ar-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  html[dir="rtl"] .about-area-2 .section-content .year-since .is-fading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--stage-width, calc(100vw - 30px));
    width: var(--stage-width, calc(100vw - 30px));
    text-align: center;
    padding: 0;
  }

  html[dir="rtl"] .about-area-2 .section-content .year-since .first-text {
    padding: 0;
    width: auto;
    display: inline;
  }

  html[dir="rtl"] .about-area-2 .section-content .year-since .last-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--stage-width, calc(100vw - 30px));
    width: var(--stage-width, calc(100vw - 30px)) !important;
    margin: 0 !important;
    text-align: center !important;
    padding: 0 !important;
    transform-origin: center top;
  }

  html[dir="rtl"] .about-area-2 .section-content .text-wrapper {
    margin-top: 25px !important;
  }

  html[dir="rtl"] .about-area-2 .section-content .btn-wrapper {
    margin-top: 25px !important;
  }
}

/* ==========================================================================
   6. Offcanvas Mobile Drawer in RTL
   ========================================================================== */
html[dir="rtl"] .side-info {
  right: auto !important;
  left: 0 !important;
  transform: translateX(calc(-100% - 80px)) !important;
  text-align: right !important;
}

html[dir="rtl"] .side-info.info-open {
  transform: translateX(0) !important;
}

html[dir="rtl"] .side-info-close {
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .contact-meta .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

html[dir="rtl"] .contact-meta .contact-item .icon {
  margin-left: 12px;
  margin-right: 0;
}

/* ==========================================================================
   7. Buttons, Arrows & Icons in RTL
   ========================================================================== */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left {
  transform: scaleX(-1);
}

html[dir="rtl"] .rr-btn .btn-wrap {
  text-align: center;
}

/* ==========================================================================
   8. Forms & Inputs in RTL
   ========================================================================== */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* ==========================================================================
   8.1. Client Logo Slider in RTL (Keep exact animation)
   ========================================================================== */
html[dir="rtl"] .client-area-2,
html[dir="rtl"] .client-area-2 .logo-slider,
html[dir="rtl"] .client-area-2 .logo-track,
html[dir="rtl"] .client-area-2 .logo-group {
  direction: ltr !important;
}

/* ==========================================================================
   9. Footer Layout in RTL
   ========================================================================== */
html[dir="rtl"] .footer-area,
html[dir="rtl"] .footer-area-2 {
  text-align: right;
}

html[dir="rtl"] .footer-area-2 .footer-widget-wrapper {
  display: grid;
  gap: 30px 40px;
  grid-template-columns: 1fr 1fr 1.5fr;
  justify-content: space-between;
  text-align: right;
}

@media only screen and (max-width: 1399px) {
  html[dir="rtl"] .footer-area-2 .footer-widget-wrapper {
    gap: 30px 30px;
    grid-template-columns: 1fr 1fr 1.3fr;
  }
}

@media only screen and (max-width: 1199px) {
  html[dir="rtl"] .footer-area-2 .footer-widget-wrapper {
    gap: 30px 20px;
    grid-template-columns: 1fr 1fr 1.2fr;
  }
}

@media only screen and (max-width: 991px) {
  html[dir="rtl"] .footer-area-2 .footer-widget-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }
}

@media (max-width: 575px) {
  html[dir="rtl"] .footer-area-2 .footer-widget-wrapper {
    grid-template-columns: 1fr;
  }
}

html[dir="rtl"] .footer-area-2 .subscribe-form {
  width: 100%;
  max-width: 100%;
}

html[dir="rtl"] .footer-area-2 .subscribe-form .input-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

html[dir="rtl"] .footer-area-2 .subscribe-form .input-field input {
  flex: 1;
  min-width: 0;
  padding-left: 10px;
  padding-right: 0;
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .footer-widget-box .title {
  text-align: right;
  margin-bottom: 20px;
}

html[dir="rtl"] .footer-nav-list li a {
  text-align: right;
}

html[dir="rtl"] .footer-contact-info p {
  text-align: right;
  margin-bottom: 8px;
}

/* ==========================================================================
   10. Services & About Inner Pages Layout in RTL
   ========================================================================== */
html[dir="rtl"] .services-grid-wrapper .service-card {
  text-align: right;
}

html[dir="rtl"] .approach-box {
  text-align: right;
}

html[dir="rtl"] .approach-list ul li {
  text-align: right;
}

html[dir="rtl"] .funfact-item {
  text-align: right;
}

html[dir="rtl"] .job-card {
  text-align: right;
}

html[dir="rtl"] .job-card-cta {
  margin-left: 0;
  margin-right: auto;
}

/* ==========================================================================
   11. Map Tooltips & Popups
   ========================================================================== */
html[dir="rtl"] .leaflet-popup-content {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .leaflet-popup-content strong {
  font-family: var(--allure-ar-display);
}
/* ==========================================================================
   12. RTL refinements
   ========================================================================== */

/* Portfolio slider arrows: the theme forces direction:ltr on this row, so the
   Prev/Next pair kept English order. Flip it so "previous" sits on the right. */
html[dir="rtl"] .portfolio-4__slider__arrow {
  /* direction:rtl alone reverses the visual order; adding row-reverse as well
     would flip it a second time and land back on the English order. */
  direction: rtl;
}

html[dir="rtl"] .vision-text-content {
  transform: translateX(-50px);
  padding-left: 0;
  padding-right: 40px;
}

html[dir="rtl"] .portfolio-4__slider__arrow-prev i,
html[dir="rtl"] .portfolio-4__slider__arrow-next i {
  transform: scaleX(-1);
}

/* Display titles carry a manual <br> in English; Arabic replaces the whole
   string, so let these headings wrap instead of overflowing their column. */
html[dir="rtl"] .portfolio-4__content-title,
html[dir="rtl"] .work-box .title,
html[dir="rtl"] .service-card-title {
  direction: rtl;
  text-align: right;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

html[dir="rtl"] .portfolio-4__content {
  right: 50px;
  left: auto;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .portfolio-4__list {
  direction: rtl;
  justify-content: flex-start;
}

@media (max-width: 575px) {
  html[dir="rtl"] .portfolio-4__content {
    right: 30px;
    left: auto;
  }
}

/* Latin runs (brand names, emails, URLs, years) inside Arabic copy keep their
   own direction so digits and punctuation do not reorder. */
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .footer-contact-info a {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Meta rows on project pages (service / client / date / category). */
html[dir="rtl"] .work-details-area,
html[dir="rtl"] .work-details-area .section-header,
html[dir="rtl"] .work-details-area .section-title-wrapper,
html[dir="rtl"] .work-details-area .title-wrapper,
html[dir="rtl"] .work-details-area .section-title,
html[dir="rtl"] .work-details-area .section-info,
html[dir="rtl"] .work-details-area .section-details,
html[dir="rtl"] .work-details-area .details-info {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .meta-wrapper,
html[dir="rtl"] .meta-item {
  text-align: right;
}

/* Blog / news listing cards. */
html[dir="rtl"] .blog-post-item,
html[dir="rtl"] .blog-post-item .content,
html[dir="rtl"] .blog-post-item .meta {
  text-align: right;
}

/* Investor tables: header and cells follow the reading direction. */
html[dir="rtl"] .table-wrapper table {
  text-align: right;
}

/* Bulleted lists sit on the correct side and keep their markers inside. */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 0;
  padding-left: 0;
}

html[dir="rtl"] .approach-list ul,
html[dir="rtl"] .investors-list ul {
  list-style-position: inside;
}

/* FAQ Page Accordion RTL */
html[dir="rtl"] .faq-area-faq-page .accordion-item {
  padding-left: 0 !important;
  padding-right: 130px !important;
  text-align: right;
}

@media only screen and (max-width: 991px) {
  html[dir="rtl"] .faq-area-faq-page .accordion-item {
    padding-right: 80px !important;
  }
}

@media only screen and (max-width: 767px) {
  html[dir="rtl"] .faq-area-faq-page .accordion-item {
    padding-right: 50px !important;
  }
}

html[dir="rtl"] .faq-area-faq-page .accordion-item:before {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] .faq-area-faq-page .accordion-button {
  text-align: right !important;
}

html[dir="rtl"] .faq-area-faq-page .accordion-button::after {
  margin-right: auto !important;
  margin-left: 0 !important;
}

html[dir="rtl"] .faq-area-faq-page .accordion-body {
  text-align: right;
}

html[dir="rtl"] .project-cta {
  text-align: center;
}