/**
 * Header alignment (English + Arabic): fix transparent navbar sitting too high.
 * Consistent top/bottom padding and vertical alignment so the header bar is straight.
 */

/* Wrapper: no extra top/bottom that would push content up */
#site-header.navbar-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Nav bar: smaller padding so header bar is slimmer */
#site-header .navbar {
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  min-height: 0;
}

/* Inner container: vertically center all items */
#site-header .nav-container {
  align-items: center;
  min-height: 0;
}

/* English layout: logo left, nav center, language switch right (Index-style on all EN pages) */
#site-header .nav-center {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}
#site-header .nav-lang {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
#site-header .nav-lang .nav-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#site-header .menu-toggle {
  margin-left: 0;
}
@media (min-width: 992px) {
  #site-header .nav-center {
    justify-content: center !important;
  }
  #site-header .site-nav {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Logo / transparent image: prevent extra height; align to center */
#site-header .nav-brand {
  align-items: center;
  display: inline-flex;
}

#site-header .nav-logo {
  display: block;
  height: auto;
  max-height: 100px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}

/* Language switch: no dot/bullet between Arabic and English on any page */
#site-header .nav-lang,
#site-header .nav-lang ul,
#site-header .nav-lang li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
#site-header .nav-lang ul {
  list-style-type: none !important;
}

/* Language button icon: same idea, no extra line height */
#site-header .nav-button .btn-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-width: 767px) {
  #site-header .navbar {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #site-header .nav-logo {
    max-height: 80px;
  }
}

/* ==========================================================================
   Global responsiveness & zoom (Ctrl +/- / pinch zoom)
   This site uses Webflow, not Bootstrap. These rules stabilize layout when
   the viewport or browser zoom changes and keep text scaling predictable.
   ========================================================================== */

/* Stop mobile browsers from inflating small text (breaks alignment with zoom) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-width: 0;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Page shell: allow flex/grid children to shrink instead of overflowing */
.page_wrapper,
.global {
  min-width: 0;
  max-width: 100%;
}

/* Common Webflow layout grids: prevent min-content width blowout on narrow viewports */
.main-grid,
.w-layout-grid,
.w-row,
.w-container {
  min-width: 0;
}

/* Media scales with layout; avoids horizontal scroll when zoomed or on small screens */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Narrow phones: allow long strings/URLs to break instead of stretching layout */
@media (max-width: 479px) {
  p,
  .text-body,
  .w-richtext {
    overflow-wrap: anywhere;
  }
}