html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.noto-sans-arabic{
  font-family: "Noto Sans Arabic", sans-serif;
}


body {
  direction: rtl;
  text-align: right;
}

html.rtl body { direction: rtl; }
html.rtl .text-left { text-align: right; }

.navbar ul {
  float: right;
}

.navbar li {
  margin-left: 0;
  margin-right: 20px;
}

.sf-menu li{
    font-family: "Noto Sans Arabic", sans-serif !important;
    font-size: 22px !important;
	}



.media .media-body h4 a{
  font-family: "Noto Sans Arabic", sans-serif !important;
  font-size: 18px !important;
}

.icon-arrow {
  transform: rotate(180deg); /* flip arrow icons */
}

/* === FlexSlider RTL Compatibility Fix === */
.flexslider {
  direction: ltr !important; /* FlexSlider doesn't support dir=rtl */
}



.flexslider .slides > li {
  display: block !important; /* Show slides even if JS fails */
  float: left !important;
}

.ar .flexslider .slides > li, 
html[dir="rtl"] .flexslider .slides > li {
  display: block !important;
  float: left !important;
  /* you may also need to unset visibility/hide rules */
  visibility: visible !important;
  opacity: 1 !important;
}

/* you may check the culprit just by putting 1px */

* {
  outline: 0px solid red;
}