:root {
  --title-font: "Cairo", sans-serif;
  --body-font: "Cairo", sans-serif;
}

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

body {
  font-family: "Cairo", sans-serif;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.brand-text-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a3f45 0%, #14626b 100%);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.hero-section.style-6,
.about-section.style-6 {
  overflow: hidden;
}

/* Navigation fidelity correction — ".nav-header.header-style7" was bundled
   into the rule above, which clips the header's own bounding box. Every
   dropdown/flyout is an absolutely-positioned descendant of <header> that
   extends below the header's ~100px height, so it was being silently
   clipped invisible regardless of visibility/opacity/z-index — confirmed by
   forcing a dropdown open via a temporary style: it rendered correctly the
   instant this header's overflow was set to visible, no other layout
   changed. Kept scoped to just the header — hero-section/about-section
   above still clip as before. */
.nav-header.header-style7 {
  overflow: visible;
}

.sticky-header {
  display: none;
}

.sticky-header.fixed-header {
  display: block;
}

.header-style7 .main-wrapper {
  margin-top: 0;
}

.header-style7 .main-wrapper .menu-area {
  direction: rtl;
}

.header-style7 .main-wrapper .nav-menu .main-menu > ul,
.sticky-header .main-menu > ul {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-style7 .main-wrapper .nav-menu .main-menu > ul > li,
.sticky-header .main-menu > ul > li {
  float: none;
}

.header-style7 .main-wrapper .nav-menu .main-menu > ul > li > a,
.sticky-header .main-menu > ul > li > a,
.mobile-menu-wrapper .mobile-menu-area .mobile-menu ul li > a {
  font-family: var(--body-font);
  font-weight: 700;
}

.header-style7 .main-wrapper .header-right-wrapper .header-right .theme-btn i,
.hero-content .theme-btn i,
.theme-btn i {
  margin-right: 8px;
  margin-left: 0;
}

.list-unstyled,
ul {
  padding-right: 0;
}

.hero-section.style-6 .hero-content .text p br {
  display: none;
}

.hero-section.style-6 .hero-content .title,
.about-section.style-6 .about-content-wrapper .sec-title,
.title-area .sec-title {
  font-weight: 800;
  line-height: 1.35;
}

.hero-section.style-6 .hero-content .text p,
.about-section.style-6 .about-content-wrapper .sec-text,
.about-section.style-6 .feature-item p,
.about-section.style-6 .features-list li {
  font-size: 18px;
  line-height: 1.9;
}

.hero-section.style-6 .hero-content .title span {
  color: var(--theme-color2);
}

.hero-section.style-6 .hero-right .image-box img {
  width: 100%;
}

.hero-section.style-6 .hero-slider-6 .swiper-slide {
  position: relative;
}

.hero-section.style-6 .hero-slide-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-section.style-6 .hero-slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-section.style-6 .hero-right .image-box {
  width: min(100%, 470px);
  aspect-ratio: 470 / 625;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.hero-section.style-6 .hero-right .image-box img {
  height: 100%;
  object-fit: contain;
}

.about-section.style-6 .row {
  align-items: center;
}

.about-section.style-6 .about-content-wrapper {
  padding-left: 34px;
}

.about-section.style-6 .feature-list {
  justify-content: space-between;
  gap: 24px;
}

.about-section.style-6 .feature-list .feature-item {
  flex-direction: row;
  text-align: right;
}

.about-section.style-6 .feature-list .feature-item .icon {
  margin-left: 18px;
  margin-right: 0;
  flex: 0 0 auto;
}

.about-section.style-6 .features-list li {
  padding-right: 28px;
  padding-left: 0;
}

.about-section.style-6 .features-list li::before {
  right: 0;
  left: auto;
}

.about-section.style-6 .about-thumb-area {
  margin-right: 0;
  margin-left: 60px;
}

.about-section.style-6 .customar-box {
  right: auto;
  left: 30px;
  text-align: right;
}

.about-section.style-6 .customar-box .box-top,
.about-section.style-6 .customar-box .box-bottom {
  direction: rtl;
}

.about-section.style-6 .array-button {
  left: auto;
  right: 40px;
}

.mobile-menu-wrapper .mobile-menu-area,
.sidebar-content,
.search-popup form,
.footer-section,
.contact-page-sourced,
.title-area,
.project-card,
.blog-card,
.team-card,
.testimonial-card,
.pricing-card {
  direction: rtl;
  text-align: right;
}

.contact-page-sourced .row {
  direction: rtl;
}

.contact-page-sourced .contact-content-wrap .contact-info .contact-item {
  flex-direction: row;
}

.contact-page-sourced .contact-content-wrap .contact-info .contact-item .info {
  text-align: right;
}

.contact-page-sourced .contact-form form .form-grid {
  direction: rtl;
}

.contact-page-sourced .contact-form form .form-group .icon {
  right: 26px;
  left: auto;
}

.contact-page-sourced .contact-form form .form-grid input,
.contact-page-sourced .contact-form form .form-grid select {
  padding-right: 52px;
  padding-left: 25px;
}

.contact-page-sourced .contact-form form .terms input[type=checkbox] {
  margin-right: 0;
  margin-left: 10px;
}

.contact-page-sourced .social-links {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.contact-page-map .map-canvas {
  width: 100%;
  min-height: 430px;
  border: 0;
}

@media (max-width: 1199.98px) {
  .about-section.style-6 .about-content-wrapper {
    padding-left: 0;
  }

  .about-section.style-6 .about-thumb-area {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .header-style7 .main-wrapper .header-right-wrapper {
    display: none;
  }

  .hero-section.style-6 .hero-content .title,
  .about-section.style-6 .about-content-wrapper .sec-title,
  .title-area .sec-title {
    font-size: clamp(28px, 6vw, 44px);
  }

  .about-section.style-6 .customar-box {
    left: 16px;
    bottom: -26px;
  }

  .about-section.style-6 .array-button {
    right: 16px;
  }
}

.home-services-section .feature-title-area {
  direction: rtl;
  align-items: flex-start;
}

.home-services-section .feature-title-area .service-btn {
  margin-right: auto;
  margin-left: 0;
}

.home-services-section .title-area.white {
  text-align: right;
}

.home-services-section .feature-box-four .content {
  text-align: right;
}

.home-services-section .feature-box-four .content .title,
.home-services-section .feature-box-four .content .text,
.home-services-section .feature-box-four .content .service-btn {
  font-family: "Cairo", sans-serif;
}

.home-services-section .feature-box-four .content .title {
  line-height: 1.5;
}

.home-services-section .feature-box-four .content .text {
  min-height: 108px;
}

.home-services-section .feature-box-four .image-box .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-services-section .feature-box-four .image-box .service-icon i {
  color: #0d4749;
  font-size: 42px;
  line-height: 1;
  transition: 0.4s ease;
}

.home-services-section .feature-box-four.current .image-box .service-icon i,
.home-services-section .feature-box-four:hover .image-box .service-icon i {
  color: #fff;
}

.home-choose-section .row {
  align-items: center;
}

.home-choose-section .choose-content-wrapper,
.home-choose-section .choose-right-wrapper,
.home-choose-section .title-area,
.home-choose-section .featured-box,
.home-choose-section .right-top {
  direction: rtl;
  text-align: right;
}

.home-choose-section .choose-content-wrapper {
  padding-left: 24px;
}

.home-choose-section .sec-title {
  line-height: 1.32;
}

.home-choose-section .sec-text {
  max-width: 540px;
}

.home-choose-section .features-list li {
  padding-right: 28px;
  padding-left: 0;
}

.home-choose-section .features-list li::before {
  right: 0;
  left: auto;
}

.home-choose-section .choose-image-wrapper {
  display: flex;
  justify-content: center;
}

.home-choose-section .choose-image-wrapper .thumb {
  transform: none;
}

.home-choose-section .right-top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.home-choose-section .right-top .icon {
  flex: 0 0 auto;
}

.home-choose-section .featured-box {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.home-choose-section .featured-box .icon {
  margin: 0;
  flex: 0 0 auto;
}

.home-choose-section .featured-box .content h4 {
  font-family: "Cairo", sans-serif;
  margin-bottom: 10px;
}

.home-choose-section .featured-box .content p {
  margin-bottom: 0;
  line-height: 1.9;
}

@media (max-width: 991.98px) {
  .home-services-section .feature-title-area {
    gap: 22px;
  }

  .home-services-section .feature-title-area .service-btn {
    margin-right: 0;
  }

  .home-choose-section .choose-content-wrapper {
    padding-left: 0;
  }

  .home-choose-section .right-top,
  .home-choose-section .featured-box {
    gap: 16px;
  }
}

.home-video-highlight .marquee-section.style-3 .marquee-wrap .marquee__group .m-item {
  direction: ltr;
  white-space: nowrap;
}

.home-video-highlight .marquee-section.style-3 .marquee-wrap .marquee__group .m-item .icon {
  margin-right: 8px;
  margin-left: 0;
}

.home-video-highlight .video-section.style-3 .stats-container {
  right: 0;
  left: auto;
}

.home-video-highlight .video-section.style-3 .stats-container .stat-box:nth-child(2) {
  margin-right: 18px;
}

.breadcrumb-section .title-outer {
  direction: rtl;
}

.breadcrumb-section .title-outer .page-title,
.breadcrumb-section .title-outer .text {
  text-align: right;
}

.breadcrumb-section .title-outer .text {
  flex-direction: row;
}

.breadcrumb-section .title-outer .text .icon {
  flex: 0 0 auto;
}

.page-breadcrumb li {
  margin-left: 7px;
  margin-right: 0;
  padding-left: 46px;
  padding-right: 0;
}

.page-breadcrumb li:last-child {
  padding-left: 0;
  margin-left: 0;
}

.page-breadcrumb li:after {
  left: 0;
  right: auto;
  transform: translateY(-50%) scaleX(-1);
}

.services-feature-intro .row {
  direction: rtl;
}

.services-intro-copy {
  text-align: right;
}

.services-intro-copy .sec-title {
  font-size: clamp(2.2rem, 3vw, 3.5rem);
  line-height: 1.25;
}

.services-highlight-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.services-highlight-card .icon {
  margin-bottom: 0;
}

.services-highlight-card .title {
  font-size: 1.45rem;
}

.services-highlight-text {
  color: #4f6670;
  font-size: 1rem;
  line-height: 1.9;
}

.services-section-heading {
  max-width: 760px;
  margin: 0 auto 50px;
}

.services-page-card .inner-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

.services-page-card .title,
.services-page-card .text {
  text-align: right;
}

.services-page-card .title a {
  color: inherit;
}

.services-page-card .service-btn {
  margin-top: auto;
}

.services-page-card .serial {
  left: 50px;
  right: auto;
}

.services-pagination nav {
  direction: ltr;
}

.service-details-page .services-details-layout {
  direction: ltr;
}

.service-details-page .services-details__content,
.service-details-page .service-sidebar,
.service-details-page .service-sidebar-single,
.service-details-page .widget-box,
.service-details-page .service-details-content,
.service-details-page .service-detail-highlights,
.service-details-page .service-related-links {
  direction: rtl;
  text-align: right;
}

.service-details-page .services-details__content .title-two {
  margin-top: 32px;
  margin-bottom: 22px;
}

.service-details-page .services-details__content p {
  line-height: 2;
  color: #4f6670;
}

.service-details-page .sidebar-service-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: right;
}

.service-details-page .sidebar-service-list li a i {
  transform: none;
  margin: 0;
}

.service-details-page .service-details-block .inner-box {
  flex-direction: row;
  text-align: right;
}

.service-details-page .service-details-block .inner-box .icon {
  margin-left: 20px;
  margin-right: 0;
  flex: 0 0 auto;
}

.service-details-page .service-detail-highlight-item,
.service-details-page .service-related-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  border-radius: 12px;
}

.service-details-page .service-detail-highlight-item {
  padding: 22px 24px;
  background: #f4fbfc;
}

.service-details-page .service-detail-highlight-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color2);
  color: var(--dark-color);
  flex: 0 0 auto;
}

.service-details-page .service-detail-image-block .stats-container {
  left: 0;
  right: auto;
}

.service-details-page .service-related-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(11, 71, 79, 0.12);
  color: var(--dark-color);
  transition: all 0.3s ease;
}

.service-details-page .service-related-card:hover {
  border-color: var(--theme-color2);
  background: #f4fbfc;
}

.service-details-page .service-related-card-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-color3);
  color: var(--theme-color2);
  flex: 0 0 auto;
}

.service-details-page .service-related-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7;
}

.service-details-page .service-download-btn .theme-btn {
  text-align: right;
  justify-content: flex-start;
}

.service-details-page .service-download-icon {
  margin-left: 10px;
  margin-right: 0;
}

.service-details-page .service-faq-accordion,
.service-details-page .service-faq-accordion .accordion,
.service-details-page .service-faq-accordion .acc-btn,
.service-details-page .service-faq-accordion .acc-content,
.service-details-page .service-faq-accordion .content,
.service-details-page .service-faq-accordion .text {
  direction: rtl;
  text-align: right;
}

.service-details-page .service-faq-accordion .acc-btn {
  padding-right: 26px;
  padding-left: 60px;
}

.service-details-page .service-faq-accordion .acc-btn .icon {
  left: 24px;
  right: auto;
}

.service-newsletter-area {
  background: #fff;
}

.projects-archive-page .title-area {
  text-align: center;
}

.projects-archive-page .sec-text {
  max-width: 720px;
  margin: 14px auto 0;
}

.projects-archive-page .project-filter-buttons .menu-filtering {
  direction: rtl;
}

.projects-archive-page .project-single-box .project-info {
  direction: rtl;
  text-align: right;
}

.projects-archive-page .project-single-box .project-info .project-badge {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.projects-archive-page .project-single-box .project-info .title a {
  line-height: 1.55;
}

.projects-archive-pagination nav {
  direction: ltr;
}

.project-newsletter-area {
  background: #fff;
}

.gallery-archive-page .row {
  direction: ltr;
}

.gallery-newsletter-area {
  background: #fff;
}

.faq-page-archive .title-area,
.faq-page-contact .faq-content-wrapper,
.faq-page-contact .title-area {
  direction: rtl;
  text-align: center;
}

.faq-page-archive .faq-archive-accordion,
.faq-page-archive .faq-archive-accordion .accordion,
.faq-page-archive .faq-archive-accordion .acc-btn,
.faq-page-archive .faq-archive-accordion .acc-content,
.faq-page-archive .faq-archive-accordion .content,
.faq-page-archive .faq-archive-accordion .text,
.faq-page-contact .faq-content-wrapper {
  direction: rtl;
  text-align: right;
}

.faq-page-archive .faq-archive-accordion .acc-btn {
  padding-right: 30px;
  padding-left: 70px;
}

.faq-page-archive .faq-archive-accordion .acc-btn .icon {
  left: 28px;
  right: auto;
}

.faq-page-contact .row {
  direction: rtl;
}

.faq-page-contact .faq-content-wrapper .title-area {
  text-align: right;
}

.faq-page-contact .faq-content-wrapper .theme-btn i {
  margin-right: 8px;
  margin-left: 0;
}

.faq-newsletter-area {
  background: #fff;
}

.about-page-main .title-area {
  direction: rtl;
  text-align: right;
}

.about-page-main .title-area .sec-title {
  font-size: clamp(1.95rem, 2.7vw, 3rem);
  line-height: 1.3;
}

.about-page-main .title-area .sec-text {
  font-size: 1.14rem;
  line-height: 2.05;
  color: #56717b;
  text-align: justify;
  text-justify: inter-word;
}

@media (max-width: 991.98px) {
  .service-details-page .services-details-layout {
    direction: rtl;
  }

  .about-page-main .title-area .sec-title {
    font-size: 2.1rem;
  }
}

@media (max-width: 575.98px) {
  .about-page-main .title-area .sec-title {
    font-size: 1.75rem;
  }

  .about-page-main .title-area .sec-text {
    font-size: 1.05rem;
    line-height: 1.95;
  }
}

@media (max-width: 991.98px) {
  .breadcrumb-section .title-outer {
    gap: 24px;
  }

  .services-intro-copy .sec-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 575.98px) {
  .breadcrumb-section .title-outer .text {
    display: flex;
  }

  .breadcrumb-section .title-outer .text p {
    max-width: none;
  }

  .services-section-heading {
    margin-bottom: 36px;
  }

  .services-page-card .serial {
    left: 30px;
  }
}

/* ==========================================================================
   Navigation fidelity correction — dropdown/flyout vertical stacking
   rtl.css's ".main-menu ul li { float: right; }" was written for the
   top-level horizontal menu bar (ul.navigation > li), so the whole bar
   reverses direction in RTL. Its selector is a plain descendant combinator
   though, so it also matches every <li> inside a nested ".sub-menu" —
   turning every dropdown/flyout from a normal stacked vertical list into a
   single-row horizontal strip (confirmed: every sub-menu li computed
   float:right, collapsing a 3-item family dropdown into one ~47px-tall row
   instead of a ~150px-tall stacked panel). rtl.css itself is left untouched;
   this narrows the float back to none for anything inside a .sub-menu, at
   any nesting depth, restoring the original theme's vertical list behavior.
   ========================================================================== */
.main-menu ul.sub-menu li {
  float: none;
}

/* Navigation fidelity correction — keyboard reachability. The theme's own
   dropdown-reveal rule (style.css) only fires on ":hover", so a keyboard
   user tabbing through the links could never see a submenu open at all.
   ":focus-within" is the standard, no-JS way to extend the same reveal to
   "a descendant link has focus" — same values as the original ":hover"
   rule, nothing else changed. No outline was removed anywhere in this
   component; the browser's default focus ring is left as-is. */
.main-menu ul li:focus-within > ul.sub-menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  z-index: 9;
}

/* ==========================================================================
   Phase 3 — Solutions / Technical Services navigation (RTL nested flyout)
   The theme's own ".main-menu ul.sub-menu li ul.sub-menu" rule opens a
   nested flyout to the LEFT-TO-RIGHT reading direction (left: 100%), which
   is backwards in this RTL layout for the new third-level family→module
   menu. Only the nested (nth 2+) flyout direction and its arrow indicator
   are corrected here — the top-level dropdown itself is left untouched.
   ========================================================================== */
.main-menu ul.sub-menu li ul.sub-menu {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 15px;
}

.main-menu ul.sub-menu li ul.sub-menu li ul {
  left: auto;
  right: 100%;
}

.main-menu ul.sub-menu li.menu-item-has-children > a::after {
  content: "\f104";
  right: auto;
  left: 20px;
}

/* Solutions overview / family cards and module cards — long Arabic titles
   and English brand names must wrap cleanly instead of overflowing the
   ".feature-box-four" / ".service-single-box" card originally sized for
   short English labels. */
.solution-family-card .title,
.solution-module-card .title {
  overflow-wrap: break-word;
}

.solution-family-count {
  display: inline-block;
  font-size: 13px;
  color: var(--body-color, #6b7385);
  margin: 8px 0;
}

.sidebar-family-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-weight: 600;
}

/* ==========================================================================
   Phase 3 correction — Solution family / sub-family cards
   ========================================================================== */

/* Real family descriptions vary in length (unlike the identical demo text
   the theme ships with), so with several cards in one row the original
   ".feature-box-four" — a plain block with no height rules — would otherwise
   end up with uneven heights and a CTA that lands at a different vertical
   position on every card. These 3 rules only apply when the card also
   carries the Bootstrap ".h-100" utility (added in family-card.blade.php):
   stretch the inner wrapper and content block to fill the card, then pin
   the "عرض التفاصيل" link to the bottom with margin-top:auto. */
.feature-box-four.h-100 .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feature-box-four.h-100 .content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.feature-box-four.h-100 .content .service-btn {
  margin-top: auto;
}

/* Breadcrumb/banner no-image fallback (Phase 3 correction) — the theme's
   only bundled breadcrumb photo (theme/images/bg-img/breadcrumb.jpg) has a
   "1920 x 560" dimension-placeholder baked into the image itself, so it can
   never be shown publicly. When frontend.partials.breadcrumb-trail has no
   real $image, it renders this flat brand-color fill instead — a plain
   color, not a generated or placeholder image. */
.breadcrumb-section .bg.bg-color-fallback {
  background-color: var(--dark-color);
}

/* Compact empty state (Phase 3 correction) — replaces a full-height empty
   card grid with a small centered icon + one line of Arabic text, used both
   when a family has no active systems/services and when no families exist
   at all. */
.solutions-empty-state-compact {
  padding: 70px 20px;
}
.solutions-empty-state-compact .icon {
  font-size: 32px;
  margin-bottom: 14px;
  color: var(--gray-color2, #90b4b6);
}

/* Family-card no-image state (Phase 3 correction) — every bundled theme
   "photo" under public/theme/images/{service,choose,about}/ turned out to be
   the same demo dimension-placeholder graphic (a flat gray box with e.g.
   "424 x 300" printed on it), so none of them are usable as a stand-in
   photo. ".feature-box-four .image-box .thumb" normally sizes itself from
   its <img>; with no cover_image this renders a plain gradient fill at the
   same 4:3-ish ratio the original demo photos used, so the card layout is
   unaffected either way.

   Color-balance correction: this was originally the theme's two DARK brand
   colors, which combined with the dark section + dark card content made the
   whole /solutions page read as almost solid green. It is now the theme's
   own pale mint tones (--light-color3 / --theme-color3 — the same colors
   the module/service cards already use), so the only dark-green pixels on
   each card are the icon glyph itself, the heading text, and the button —
   never a large surface. */
.feature-box-four .image-box .thumb .thumb-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 424 / 300;
  background: linear-gradient(135deg, var(--light-color3) 0%, var(--theme-color3) 100%);
}

/* Card depth on a light section (Phase 3 color-balance correction) —
   ".feature-box-four" has no border/shadow of its own (the original demo
   relies on a dark section behind a white card for contrast). On our light
   "bg-white" section a plain white card would blend into the page, so a
   subtle border + the theme's own dropdown shadow value (style.css, the
   ".sub-menu" shadow — reused here rather than inventing a new one) gives
   each card definition without introducing a new color. */
.feature-box-four.solution-family-card .inner .content {
  border: 1px solid var(--light-color3, #dcefef);
  border-top: 0;
  box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
}

/* RTL CTA-wrap fix (Phase 3 color-balance correction) — the original theme's
   hover/"current" animation adds a large left padding (195px, tuned for a
   wide LTR "Learn More" button) to slide the underline in. On our narrower
   RTL Arabic cards that padding leaves too little room for "عرض التفاصيل"
   and forces it onto several lines. The hover/focus color and underline
   animation are kept; only this specific padding shift is neutralized. */
.feature-box-four.solution-family-card:hover .content .service-btn,
.feature-box-four.solution-family-card.current .content .service-btn {
  padding-left: 0;
}

/* =====================================================================
   Phase 4 — Focused homepage compatibility styles
   Scoped to homepage sections only; reuses the purchased theme's
   feature-box-four / process / faq / cta components. No new framework.
   ===================================================================== */

/* --- A. Hero readability overlay (original theme .overlay) ------------ */
.home-hero .home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(6, 40, 41, 0.72) 0%, rgba(6, 40, 41, 0.45) 45%, rgba(6, 40, 41, 0.15) 100%);
  pointer-events: none;
}

.home-hero .hero-slider-6,
.home-hero .hero-scroll {
  position: relative;
  z-index: 2;
}

/* --- B. About single image (no invented customer counter) ------------ */
.home-about-thumb img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 20px;
}

/* --- C/E. Icon-only feature cards (solutions + benefits) ------------- */
.home-solutions-section .feature-title-area,
.home-benefits-section .title-area {
  direction: rtl;
}

.home-solutions-section .feature-title-area .service-btn {
  margin-right: auto;
  margin-left: 0;
}

.solution-card,
.benefit-card {
  height: 100%;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(13, 71, 73, 0.08);
  transition: 0.4s ease;
}

.benefit-card {
  background: #fff;
}

.solution-card:hover,
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(13, 71, 73, 0.16);
}

.solution-card .inner .content,
.benefit-card .inner .content {
  direction: rtl;
  text-align: right;
  padding: 38px 30px;
}

.solution-card .service-icon,
.benefit-card .service-icon {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f7f4;
  margin-bottom: 24px;
  transition: 0.4s ease;
}

.solution-card .service-icon i,
.benefit-card .service-icon i {
  color: #0d4749;
  font-size: 32px;
  line-height: 1;
  transition: 0.4s ease;
}

.solution-card:hover .service-icon,
.benefit-card:hover .service-icon {
  background: #0d4749;
}

.solution-card:hover .service-icon i,
.benefit-card:hover .service-icon i {
  color: #fff;
}

.solution-card .content .title,
.benefit-card .content .title {
  font-family: "Cairo", sans-serif;
  line-height: 1.5;
  margin-bottom: 12px;
}

.solution-card .content .text,
.benefit-card .content .text {
  font-family: "Cairo", sans-serif;
  line-height: 1.9;
  min-height: 84px;
  margin-bottom: 18px;
}

.benefit-card .content .text {
  margin-bottom: 0;
}

.solution-card .content .service-btn {
  font-family: "Cairo", sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0d4749;
  font-weight: 600;
}

/* Neutralize the theme's thumbnail-oriented .current/:hover decorations on the
   icon-only cards. The theme script auto-adds .current to a feature-box, and the
   base theme applies padding-left:195px + a 190px ::before underline to the CTA —
   correct for wide thumbnail cards, but it stretches/wraps the CTA on icon-only
   solution/benefit cards. Keep the card's own lift/shadow hover; drop the line. */
.solution-card .content::before,
.benefit-card .content::before,
.solution-card .content .service-btn::before {
  display: none;
}

.solution-card.current .content .service-btn,
.solution-card:hover .content .service-btn {
  padding-left: 0;
  white-space: nowrap;
}

/* --- D. Featured-service image container (no overlap / clean crop) --- */
.home-services-section .feature-box-four .image-box .thumb {
  overflow: hidden;
  border-radius: 12px;
}

.home-services-section .feature-box-four .image-box .thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* --- F. Delivery process (5 steps, RTL, 3+2 wrap centered) ----------- */
.home-process-section .title-area,
.home-process-section .process-single-box .inner-box {
  direction: rtl;
}

.home-process-section .process-single-box .header {
  text-align: right;
}

.home-process-section .process-single-box .header .title {
  font-family: "Cairo", sans-serif;
}

/* --- K. FAQ accordion (RTL alignment) ------------------------------- */
.home-faq-section .title-area {
  direction: rtl;
}

.home-faq-section .accordion-box {
  direction: rtl;
  text-align: right;
}

.home-faq-section .accordion-box .acc-btn {
  font-family: "Cairo", sans-serif;
  padding-right: 30px;
  padding-left: 55px;
}

.home-faq-section .accordion-box .acc-btn .icon {
  right: auto;
  left: 30px;
}

.home-faq-section .accordion-box .acc-content .text {
  font-family: "Cairo", sans-serif;
  line-height: 1.95;
}

/* --- Final CTA (RTL) ------------------------------------------------ */
.home-cta-section {
  direction: rtl;
}

.home-cta-section .cta-btn.text-left {
  text-align: left;
}

@media (max-width: 991.98px) {
  .home-solutions-section .feature-title-area,
  .home-services-section .feature-title-area {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .home-hero .home-hero-overlay {
    background: linear-gradient(180deg, rgba(6, 40, 41, 0.35) 0%, rgba(6, 40, 41, 0.75) 100%);
  }

  .home-cta-section .cta-btn.text-left {
    text-align: right;
  }
}

/* =====================================================================
   Phase 5B fix — configured (admin-uploaded) logo fit, artwork-cropped
   The purchased theme's header logo slot expects TWO <img> variants
   (light/dark) and hides `img:last-child` on desktop, so a single uploaded
   <img> collapsed to 0x0. Beyond that, the uploaded logo is a 1600x1600
   canvas whose *visible artwork* fills only a 1036x797 region at offset
   (x=376, y=345) — the rest is transparent padding. Sizing the <img> box
   alone therefore left the mark ~half the box tall and looking small.

   Fix: turn each logo wrapper into an overflow-hidden window onto just the
   artwork, and scale the (square) image uniformly so the artwork fills that
   window. Aspect ratio is preserved (uniform scale, square box). --logo-h is
   the visible artwork height per slot; the geometry vars are the real
   measured pixels. No logo file / DB change.
   NOTE: if the logo file is replaced, re-measure --logo-art-* / --logo-img.
   ===================================================================== */
.menu-area .header-logo a,
.sticky-header .header-logo a,
.mobile-menu-wrapper .mobile-logo a,
.mobile-logo a,
.sidebar-content .sidebar-logo a,
.sidebar-logo a,
.footer-brand-logo {
  --logo-art-x: 376;
  --logo-art-y: 345;
  --logo-art-w: 1036;
  --logo-art-h: 797;
  --logo-img: 1600;
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-art-w) / var(--logo-art-h));
}

.menu-area .header-logo a img,
.sticky-header .header-logo a img,
.mobile-menu-wrapper .mobile-logo a img,
.mobile-logo a img,
.sidebar-content .sidebar-logo a img,
.sidebar-logo a img,
.footer-brand-logo img {
  display: block !important;
  position: absolute;
  max-width: none;
  width: calc(var(--logo-h) * var(--logo-img) / var(--logo-art-h));
  height: calc(var(--logo-h) * var(--logo-img) / var(--logo-art-h));
  left: calc(var(--logo-h) * var(--logo-art-x) / var(--logo-art-h) * -1);
  top: calc(var(--logo-h) * var(--logo-art-y) / var(--logo-art-h) * -1);
  object-fit: fill;
}

/* Visible artwork height per slot. Desktop main bar is tall (nav row ~80px),
   so 52px reads clearly yet stays under the nav row — header height unchanged. */
.menu-area .header-logo a { --logo-h: 52px; }
.sticky-header .header-logo a { --logo-h: 40px; }
.mobile-menu-wrapper .mobile-logo a,
.mobile-logo a { --logo-h: 44px; }
.sidebar-content .sidebar-logo a,
.sidebar-logo a { --logo-h: 60px; }
.footer-brand-logo { --logo-h: 46px; }

/* Mobile top bar is only 70px tall — keep the logo within it. */
@media (max-width: 991.98px) {
  .menu-area .header-logo a { --logo-h: 40px; }
}

/* =====================================================================
   Phase 5C — public language switcher (العربية / English)
   Header chrome only (no page content). Rendered as a self-contained
   brand-accent pill group so it stays legible on every header context:
   the transparent over-hero main header, the light sticky header, and
   the dark mobile drawer. The active locale is filled; the other is an
   outline link. Integrated into the header — never floating.
   ===================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.lang-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 12px;
  border: 1.5px solid var(--theme-color);
  border-radius: 999px;
  background: transparent;
  color: var(--theme-color);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
  background: var(--theme-color);
  color: #fff;
}

.lang-switch__link.is-active {
  background: var(--theme-color);
  color: #fff;
}

/* Stack variant — mobile off-canvas drawer: larger, side-by-side, tappable. */
.lang-switch--stack {
  display: flex;
  gap: 10px;
}

.lang-switch--stack .lang-switch__link {
  flex: 1 1 0;
  padding: 10px 14px;
  font-size: 15px;
}

.mb-mobile-lang {
  margin: 6px 0 20px;
}