/* Custom centering for electronic banner */
.electronic-banner-swiper-area .container-fill .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.electronic-banner-swiper-area .col-lg-6.order-xl-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
  padding-right: 40px;
}
.electronic-banner-swiper-area .col-lg-6.order-xl-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-left: 40px;
  padding-right: 20px;
}

/* Prevent wrapping on large screens */
@media (min-width: 992px) {
  .electronic-banner-swiper-area .container-fill .row {
    flex-wrap: nowrap;
  }
}

/* Slightly shift the banner image left on large screens */
@media (min-width: 992px) {
  .electronic-banner-swiper-area .thumbanail-img-right img {
    margin-right: 180px;
  }
  .electronic-banner-swiper-area .thumbanail-img-right img:lang(ar) {
    margin-left: 180px;
  }
}

h1, h2 {
  font-weight: 500 !important;
}

/* Banner H1: make text unbold */
#banner-title {
  font-weight: 300 !important;
}

/* Ensure banner and about titles use the same Arabic font */
#banner-title,
#about-title {
  font-family: 'Tajawal', 'Albert Sans', sans-serif !important;
}

/* Footer contact: ensure phone link and icon look correct */
.single-footer-component .contact-info p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.single-footer-component .contact-info a#footer-phone {
  color: #fff !important;
  text-decoration: none;
}
.single-footer-component .contact-info a#footer-phone:hover {
  text-decoration: underline;
}
.single-footer-component .contact-info i.fa-phone {
  color: #fff;
  display: inline-block;
}
/* Flip phone icon only for English/LTR */
/* Restrict to footer contact section only */
html[lang="en"] #contact-section .single-footer-component .contact-info i.fa-phone,
html[dir="ltr"] #contact-section .single-footer-component .contact-info i.fa-phone {
  transform: scaleX(-1);
}
/* Ensure no flip for RTL */
html[dir="rtl"] .single-footer-component .contact-info i.fa-phone {
  transform: none;
}
/* Exception: Flip phone icon in Arabic within the footer contact section only */
html[dir="rtl"] #contact-section .single-footer-component .contact-info i.fa-phone {
  transform: scaleX(-1);
}
/* Arabic-only: ensure © appears before 'Powered' in footer link */
html[dir="rtl"] .powered-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[dir="rtl"] .powered-by .copy-symbol {
  order: 0;
}
html[dir="rtl"] .powered-by .powered-text {
  order: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
/* LTR-only: show text first then © to contrast with Arabic */
html[dir="ltr"] .powered-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[dir="ltr"] .powered-by .powered-text {
  order: 0;
}
html[dir="ltr"] .powered-by .copy-symbol {
  order: 1;
}

/* Ensure the whole banner title and any nested nodes are normal weight */
.bannr-content-technical .title,
.bannr-content-technical .title *,
.rts-banner-area-technician .bannr-content-technical .title,
.rts-banner-area-technician .bannr-content-technical .title * {
  font-weight: 300 !important;
}

/* Even more specific targeting for the H1 element itself and nested spans */
.bannr-content-technical h1.title,
.bannr-content-technical h1.title *,
.rts-banner-area-technician .bannr-content-technical h1.title,
.rts-banner-area-technician .bannr-content-technical h1.title * {
  font-weight: 300 !important;
}

.rts-service-area .single-service-electrical {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 440px;
}

.rts-service-area .single-footer-component {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    display: flex;
    flex-direction: column;
}
.single-footer-component .logo-area-footer,
.single-footer-component .title-area,
.single-footer-component .body {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100%;
    display: block;
}
.single-footer-component .pages-footer a {
    color: white !important;
}

.rts-service-area .row.g-24 > [class^="col-"] {
  display: flex;
}

@media (max-width: 991px) {
  .electronic-banner-swiper-area .col-lg-6.order-xl-1,
  .electronic-banner-swiper-area .col-lg-6.order-xl-2 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Mobile: show header menu list and fix positioning */
@media (max-width: 991px) {
  /* Override theme hiding */
  .main-nav-one { display: block !important; }

  /* Reset absolute centering used on desktop */
  .header-nav.main-nav-one {
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin-top: 8px !important;
    width: 100% !important;
  }

  /* Stack header content nicely */
  .header-main-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Make the nav list visible and usable */
  .header-nav.main-nav-one nav > ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0;
    margin: 0;
  }

  .header-nav.main-nav-one nav > ul li {
    list-style: none;
    width: 100%;               /* each item occupies a full row */
  }
}
.fa-phone:lang(en){transform: rotate(0deg) !important;}

/* Mobile Menu Button */
#header .logo-main, .logo-main {
  display: inline-flex;
  align-items: center;
}

/* LTR: keep logo at the left edge by pushing everything else away */
.logo-main { margin-right: auto; margin-left: 0; }

/* RTL: push logo to the right edge */
html[dir="rtl"] .logo-main { margin-left: auto; margin-right: 0; }

#mobile-menu-btn {
  display: none; /* Hidden by default */
  background: #FF7A3D; /* orange */
  color: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10002;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

#mobile-menu-btn i {
  font-size: 20px;
  line-height: 1;
}

#mobile-menu-btn:focus { outline: none; }
#mobile-menu-btn:focus-visible { outline: 2px solid #BA0001; outline-offset: 2px; }

@media (max-width: 991px) {
  #mobile-menu-btn { display: inline-grid; /* Show on mobile */ }

  /* Compact header like design screenshot */
  .header-main-area {
    height: 182px !important; /* taller to fit 170px logo */
    padding: 8px 12px !important;
    align-items: center !important;
  }

  .logo-main img {
    height: 170px !important; /* requested mobile logo size */
    width: auto !important;
  }

  /* Mobile dropdown panel */
  .header-nav.main-nav-one {
    display: none !important; /* hidden by default */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    top: 182px !important; /* sits directly below taller header */
    transform: none !important; /* override inline translateX(-50%) */
  
    background: #ffffff;
    border-radius: 0; /* full-width edges */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 10001;
    padding: 10px 12px 14px;
    /* Keep the panel fixed and scroll inside if content is tall */
    max-height: calc(100vh - 182px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header-nav.main-nav-one.active { display: block !important; }

  .header-nav.main-nav-one nav > ul {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;     /* prevent wrapping */
    align-items: stretch !important;  /* make children take full width */
    gap: 0;                           /* no gap between rows */
    margin: 0;
    padding: 0;
    border-radius: 8px;                /* subtle rounding of whole list */
    overflow: hidden;                  /* so dividers align edge-to-edge */
  }

  .header-nav.main-nav-one nav > ul li { list-style: none; }

  .header-nav.main-nav-one nav > ul li a {
    display: flex;              /* keep text + chevron on one line */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #1b1b1b;
    font-size: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;        /* keep on one line */
    overflow: hidden;           /* clip overflow */
    text-overflow: ellipsis;    /* show ellipsis if too long */
    min-width: 0;               /* allow flexbox to shrink for ellipsis */
  }

  /* Divider lines between items */
  .header-nav.main-nav-one nav > ul li + li a {
    border-top: 1px solid #eee;
    border-radius: 0; /* square edges when stacked */
  }

  /* First item highlighted */
  .header-nav.main-nav-one nav > ul li:first-child > a {
    background: #FF7A3D;
    color: #ffffff !important;
    font-weight: 600;
  }

  /* Chevron for items with sub menus */
  .header-nav.main-nav-one nav > ul li a.has-sub::after {
    content: "\f107"; /* angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 10px;
    color: currentColor;
  }

  body.mobile-menu-open { overflow: hidden; }

  /* RTL adjustments for Arabic */
  html[dir="rtl"] #mobile-menu-btn {
    left: 15px;
    right: auto;
  }

  html[dir="rtl"] .header-nav.main-nav-one {
    left: 0 !important;
    right: 0 !important;
  }

  /* Force vertical stack for Arabic mobile menu (override any global RTL row styles) */
  html[dir="rtl"] .header-nav.main-nav-one nav > ul {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  html[dir="rtl"] .header-nav.main-nav-one nav > ul li a {
    flex-direction: row-reverse;   /* put chevron on the left */
    text-align: right;
    white-space: nowrap;           /* keep on one line in RTL */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  html[dir="rtl"] .header-nav.main-nav-one nav > ul li a.has-sub::after {
    content: "\f104"; /* angle-left in Font Awesome */
  }
}

.header-nav li a::after{display: none !important;}

@media(max-width:767px){
#mobile-menu-btn, .header-nav.main-nav-one nav > ul li:first-child > a{background-color:#ba0001 !important}}
@media(min-width:992px){#mobile-menu-btn{display: none !important ;}}