/* ===================================================================
   FILE: rtl-styles.css
   PURPOSE: Contains ONLY the necessary CSS overrides for the 
            Arabic (Right-to-Left) version of the website.
   =================================================================== */

/* ===================================
   1. GLOBAL & TYPOGRAPHY OVERRIDES
   =================================== */
body {
    /* A font that supports Arabic characters well */
    font-family: 'Cairo', 'Poppins', sans-serif;
}
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] button,
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea {
  font-family: 'Cairo', sans-serif;
} 


/*
  STICKY NAVBAR STYLES
=====================================================
*/

/* Target the <header> tag which contains your navbar */
header {
  position: sticky; /* The magic property! */
  top: 0;           /* Stick to the very top of the screen */
  width: 100%;      /* Ensure it spans the full width */
  z-index: 1000;    /* Make sure it stays on top of other content */
}

/* --- General Body Styles --- */

/*
=====================================================
  1b. Header & Navigation (Improved Visibility)
=====================================================
*/

/* --- Sticky Navbar Styling --- */
.navbar.sticky-top {
  /* When the navbar is stuck, it needs a solid background and a shadow to stand out */
  background-color: var(--dark-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* A subtle transition for when it sticks/unsticks (if not initially at top) */
  transition: background-color 0.3s ease-in-out;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

.nav-link {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s ease;
}

/* --- Prominent Language Switcher Button --- */
.btn-language {
  background-color: ​#ffd700; /* Your gold accent color */
  color:rgb(200, 200, 207)!important; /* Important to override Bootstrap's default link color */
  border-radius: 30px; /* Pill shape */
border:2px solid #25D366 !important; 
  padding: 0.5rem 1.2rem !important; /* Custom padding */
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.btn-language:hover {
  background-color: #c4a828; /* A slightly darker gold on hover */
  color: #269722 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-language .fa-globe {
  font-size: 1.1rem; /* Control the icon size */
}


/*=====================================================
  DEFINITIVE ICON FIX FOR FONT AWESOME 4
  This overrides RTL and other font conflicts.
=====================================================*/
.contact .cologo a[class*="fa-"] {
    /* This is the most important part. It resets all font properties 
       and forcefully applies the Font Awesome font. */
    font: normal normal normal 1.8rem/1 FontAwesome;

    /* Ensure icons behave like inline blocks */
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* Your original styling for the icons */
    text-decoration: none;
    background: transparent;
    transition: transform 0.2s ease;
}

/* Re-apply the specific icon colors */
.contact .cologo .fa-facebook { color: #3B5998; }
.contact .cologo .fa-whatsapp { color: #25D366; }

/* The hover effect */
.contact .cologo a[class*="fa-"]:hover {
    transform: scale(1.15);
}



/* On smaller screens (when navbar collapses), make the button take full width for better tapping */
@media (max-width: 991px) {
  .nav-item.ms-lg-3 {
    margin-top: 1rem; /* Add some space above the button in the collapsed menu */
  }
  .btn-language {
    width: 100%;
    justify-content: center;
  }
}






/* ===================================
   2. "BUILT TO LAST" SECTION OVERRIDES
   =================================== */
/* Targets the section with the .builttolast-ar class in the Arabic HTML */
.builttolast-ar {
    /* Reverses the order of flex items to [Text] [Image] */
    flex-direction: row-reverse;
}

.builttolast-ar .imagedesc {
    /* Aligns the text content to the right */
    text-align: right;
}

/* On mobile, revert to centered text for a better stacked layout */
@media (max-width: 768px) {
    .builttolast-ar .imagedesc {
        text-align: center;
    }
}

/* ===================================
   3. CONTACT SECTION OVERRIDES
   =================================== */

/* Targets the section with the .contact-ar class in the Arabic HTML */
.contact-ar .contact-details div,
.contact-ar .contact-socials {
    text-align: right;
}

/* No other RTL changes are needed for the contact section due to modern CSS (flexbox/grid) */