/* mission&vision.css file */
#VisionMission {
  min-height: 85vh;
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 1rem 0;
  font-family: "Lato", sans-serif;
}

/* Desktop version */
@media (min-width: 992px) {
  #VisionMission .container {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-top: 2rem;
    padding-right: 0 !important;
    margin-left: 6rem;
    max-width: 100% !important;
    width: 100% !important;
    gap: 3rem;
  }

  /* Desktop Background Image Container - positioned absolute to right edge */
  .desktop-background-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 38%;
    max-width: 650px;
    height: 100%;
    min-height: 70vh;
    overflow: hidden;
  }

  /* Desktop Background Image Styling */
  .desktop-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  /* Text content wrapper */
  .vision-text-content {
    width: 50%;
    flex-shrink: 0;
    padding-right: 3rem;
    position: relative;
    z-index: 1;
  }

  /* Vision title styling for desktop */
  .vision-title {
    font-family: "Lato", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 1rem;
    text-align: left;
    color: #000000 !important;
  }

  /* Vision text paragraph styling for desktop */
  .vision-text {
    font-size: 19.2px !important;
    line-height: 1.8;
    text-align: left;
    font-weight: 350;
    color: #000000 !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
  }

  /* Override Bootstrap column width for desktop */
  #VisionMission .col-lg-8 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Vision content container styling */
  .vision-content {
    background-color: transparent;
    padding: 0;
    border: none;
  }
}

/* Mobile version with background image */
@media (max-width: 991px) {
  /* Hide the desktop image element on mobile */
  .desktop-background-image {
    display: none;
  }

  /* Reset container styles for mobile */
  #VisionMission .container {
    display: block;
    margin-top: 1.5rem;
    padding: 0;
    max-width: 55% !important;
    width: 55% !important;
    gap: 0;
  }

  /* English (LTR) - position left */
  html:not([dir="rtl"]) #VisionMission .container {
    margin-left: 1.5rem;
    margin-right: 0;
  }

  /* Remove the text wrapper width on mobile */
  .vision-text-content {
    width: 100% !important;
  }

  /* Mobile background styling */
  #VisionMission {
    background-image: url("../assets/material/ourvaluesPIC.png");
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1rem 0;
    background-color: #ffffff;
  }

  /* RTL MOBILE: Flip background image and position text on RIGHT side */
  html[dir="rtl"] #VisionMission {
    transform: scaleX(-1);
    background-position: left center;
  }

  /* Flip ONLY structural elements back - NOT paragraphs */
  html[dir="rtl"] #VisionMission .container,
  html[dir="rtl"] #VisionMission .vision-text-content,
  html[dir="rtl"] #VisionMission .vision-title,
  html[dir="rtl"] #VisionMission .forOUR,
  html[dir="rtl"] #VisionMission .row,
  html[dir="rtl"] #VisionMission .col-lg-8,
  html[dir="rtl"] #VisionMission .vision-content,
  html[dir="rtl"] #VisionMission .mb-3,
  html[dir="rtl"] #VisionMission .text-left,
  html[dir="rtl"] #VisionMission .justify-content-start,
  html[dir="rtl"] #VisionMission b,
  html[dir="rtl"] #VisionMission span:not(.vision-text *),
  html[dir="rtl"] #VisionMission #noBold {
    transform: scaleX(-1);
  }

  /* DO NOT FLIP paragraphs - they should stay mirrored */
  html[dir="rtl"] #VisionMission .vision-text,
  html[dir="rtl"] #VisionMission p {
    transform: none !important;
  }

  /* Position container on the RIGHT side */
  html[dir="rtl"] #VisionMission .container {
    margin-left: auto !important;
    margin-right: 1.5rem !important;
    max-width: 55% !important;
    width: 55% !important;
  }

  /* Ensure text is right-aligned */
  html[dir="rtl"] #VisionMission .vision-title,
  html[dir="rtl"] #VisionMission .vision-text,
  html[dir="rtl"] #VisionMission .forOUR {
    text-align: right !important;
    direction: rtl !important;
  }

  /* Mobile vision title */
  .vision-title {
    font-family: "Lato", sans-serif;
    font-size: 2.8rem !important;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1.5rem;
    text-align: left;
    color: #000000 !important;
    padding: 0;
    margin-left: 0;
    max-width: 100% !important;
    word-wrap: break-word;
  }

  /* Mobile vision text */
  .vision-text {
    font-size: 1.3rem !important;
    line-height: 1.7;
    text-align: left;
    font-weight: 300;
    color: #000000 !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    margin-left: 0;
    word-wrap: break-word;
  }

  /* Mobile content container */
  .vision-content {
    background-color: transparent;
    padding: 0;
    border: none;
    margin: 0;
    max-width: 100%;
  }

  /* Mobile row adjustments */
  .row.justify-content-start {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  /* Mobile column adjustments */
  .col-lg-8 {
    padding-left: 0;
    padding-right: 0;
    max-width: 100% !important;
  }
}

/* Small mobile adjustments */
@media (max-width: 576px) {
  #VisionMission .container {
    max-width: 65% !important;
    width: 65% !important;
    margin-top: 1.2rem;
  }

  html:not([dir="rtl"]) #VisionMission .container {
    margin-left: 1.2rem;
  }

  /* RTL: Make container full width and flush right on mobile */
  html[dir="rtl"] #VisionMission .container {
    max-width: 100% !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html[dir="rtl"] #VisionMission .container {
    margin-right: 1.2rem !important;
  }

  .vision-title {
    font-size: 2.4rem !important;
    margin-bottom: 1.2rem;
  }

  .vision-text {
    font-size: 1.1rem !important;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  #VisionMission .container {
    max-width: 65% !important;
    width: 65% !important;
    margin-top: 1rem;
  }

  html:not([dir="rtl"]) #VisionMission .container {
    margin-left: 1rem;
  }

  html[dir="rtl"] #VisionMission .container {
    margin-right: 1rem !important;
    padding-left: 20rem;
  }

  .vision-title {
    font-size: 2rem !important;
  }

  .vision-text {
    font-size: 1rem !important;
    line-height: 1.6;
  }
}

/* "OUR" text styling */
.forOUR {
  font-weight: 400;
  font-size: 0.85rem !important;
  color: #b5a46d !important;
  margin-bottom: 0.5rem;
}

/* ========== RTL SUPPORT FOR ARABIC VERSION (DESKTOP) ========== */

/* RTL container adjustments */
@media (min-width: 992px) {
  html[dir="rtl"] #VisionMission .container {
    margin-left: 0;
    margin-right: 6rem;
    padding-left: 0 !important;
    padding-right: initial;
    flex-direction: row-reverse;
  }
}

/* RTL Desktop Background Image - positioned left */
html[dir="rtl"] .desktop-background-image {
  right: auto;
  left: 0;
  width: 40%;
  max-width: 680px;
  height: 110%;
  top: -5%;
  min-height: 75vh;
}

/* RTL Desktop Image styling */
html[dir="rtl"] .desktop-background-image img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: right center !important;
  transform: scaleX(-1);
}

/* RTL text content positioning */
html[dir="rtl"] .vision-text-content {
 padding-right: 3rem;
  margin-right: 1rem;
}

@media (max-width: 991px) {
  html[dir="rtl"] .vision-text-content {
    padding-right: 9rem;
  }
}
/* RTL text alignment */
html[dir="rtl"] .vision-title,
html[dir="rtl"] .vision-text {
  text-align: right;
}

/* Ensure proper spacing for RTL */
html[dir="rtl"] .row.justify-content-start {
  justify-content: flex-end !important;
}

/* ========== LAPTOP-SPECIFIC FIXES FOR RTL ========== */
@media (min-width: 1200px) and (max-width: 1600px) {
  /* General laptop adjustments */
  #VisionMission .container {
    padding-top: 0.5rem !important;
    margin-top: -1rem !important;
  }

  .vision-title {
    margin-bottom: 0.8rem !important;
    font-size: 3.5rem !important;
  }

  .vision-text {
    font-size: 1.3rem !important;
  }

  /* RTL-specific laptop adjustments */
  html[dir="rtl"] #VisionMission .container {
    padding-top: 0.5rem !important;
    margin-top: -1rem !important;
  }

  html[dir="rtl"] .desktop-background-image {
    height: 115% !important;
    top: -7.5% !important;
    width: 42% !important;
  }
}

/* RTL Text Alignment and Font */
html[dir="rtl"] #VisionMission .vision-title,
html[dir="rtl"] #VisionMission .vision-text,
html[dir="rtl"] #VisionMission .text-left,
html[dir="rtl"] #VisionMission .forOUR {
  text-align: right !important;
  font-family: "Tajawal", sans-serif !important;
}

html[dir="rtl"] #VisionMission .vision-text {
  font-weight: 400 !important;
}