html {
  scroll-behavior: smooth;
}

/* ===== Header (merged from header.css) ===== */
.block-header-layout-desktop--desktop-3 {
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "logo nav right-side";
  z-index: 999999;
}

.block-header-layout-desktop {
  z-index: 18;
  justify-self: center;
  align-items: center;
  width: 100%;
  max-width: 1224px;
  padding: var(--padding, 24px 0);
  display: grid;
}

.block-header-layout-desktop--desktop-3 .block-header__logo {
  grid-area: logo;
  margin-right: 16px;
}

.block-header-logo {
  display: flex;
  width: 50px;
  height: 55px;
  cursor: pointer;
}

.block-header-layout-desktop--desktop-3 .block-header__nav {
  grid-area: nav;
}

.block-header__nav-links {
  display: flex;
  list-style: none;
  flex-flow: row wrap;
  justify-content: center;
  column-gap: 28px;
  row-gap: 16px;
}

.block-header-item {
  user-select: none;
  position: relative;
  /* enable absolute-positioned dropdowns inside */
}

.item-content-wrapper {
  display: flex;
  align-items: center;
  text-align: left;
}

.item-content {
  position: relative;
  align-self: center;
  font-family: var(--nav-link-font-family, 'Almarai', sans-serif);
  font-size: var(--nav-link-font-size, 16px);
  font-weight: var(--nav-link-font-weight, 400);
  line-height: var(--nav-link-line-height, 1.2);
  color: var(--nav-link-text-color, #9b6ef5);
  text-decoration: none;
  cursor: pointer;
}

.item-content:hover,
.item-content:focus,
.item-content-wrapper--active .item-content {
  color: var(--nav-link-text-color-hover, #7a4fe0);
  text-decoration: underline;
  text-underline-offset: 7px;
}

.block-header-layout-desktop__right-side {
  grid-area: right-side;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.language-switcher__button {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.flag__img {
  width: 28px;
  height: auto;
  display: block;
}

.language-switcher__dropdown-area {
  display: none;

  position: absolute;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  margin-top: 8px;
  z-index: 1100;
  transform: translateX(-50%);
  width: max-content;
  padding: 10px;
}

/* show dropdown only when explicit 'open' class is set (click behavior) */
.language-switcher.open .language-switcher__dropdown-area {
  display: block;
}

.language-switcher__dropdown {
  list-style: none;
  margin: 0;
  padding: var(--spacing-tiny) var(--spacing-large);
  display: flex;
  flex-direction: column;
  /* show as column not row */
}

.language-switcher__dropdown-item {
  padding: 6px 12px;
}

.language-switcher__dropdown-link {
  color: #222;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tools submenu base rules: hide by default and position relative to parent */
.block-header-item__dropdown-area {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin-top: 8px;
  min-width: 220px;
  z-index: 1200;
}

body[dir="rtl"] .block-header-item__dropdown-area {
  right: 0;
  left: auto;
}

body[dir="ltr"] .block-header-item__dropdown-area {
  left: 0;
  right: auto;
}

/* alignment helpers for dropdown */
.dropdown-menu-start {
  right: 0;
  left: auto;
}



/* RTL tweaks */
body[dir="rtl"] .block-header-layout-desktop--desktop-3 {
  direction: rtl;
}

body[dir="rtl"] .block-header__nav-links {
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .block-header__nav {
    display: none;
  }

  .block-header-layout-desktop {
    grid-template-columns: auto 1fr auto;
    padding: 12px;
  }
}

/* ===== End Header Merge ===== */

/* ...existing code... */

/* ===== Top Bar Responsive Styles ===== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
  gap: 15px;
  direction: rtl
}

.top-bar-center {
  flex: 1 1 auto;
  /* Allow it to grow and shrink */
  display: flex;
  justify-content: center;
}


.top-bar-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
  /* Prevent this from shrinking too much */
}

.language-select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px 5px;
  background-color: #fff;
  font-size: 0.85rem;
}

/* --- Responsive Breakpoint --- */
/* For screens smaller than 768px (tablets and phones) */
@media (max-width: 767px) {
  .top-bar {
    flex-direction: column;
    /* Stack center and right sections */
    justify-content: center;
    padding: 10px;
  }

  .top-bar-center {
    order: 2;
    /* Move contact info below the right-side controls */
  }

  .top-bar-right {
    order: 1;
    /* Move controls to the top */
  }

  /* On very small screens, hide the physical address to save space */
  @media (max-width: 480px) {
    .contact-info span:first-child {
      display: none;
    }
  }
}

/* Specific styles for items under the "ادوات تهمك" menu (tagged by JS) */
.nifas-tools .dropdown-item,
.nifas-tools-menu .dropdown-item {
  color: #BA9BF9;
}

/* Underline for dropdown items */
.nifas-tools .dropdown-item {
  position: relative;
}

.nifas-tools .dropdown-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 3px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease, background-color .18s ease;
}

.nifas-tools .dropdown-item:hover::after,
.nifas-tools .dropdown-item:focus::after,
.nifas-tools .dropdown-item.active::after {
  background: #BA9BF9;
  transform: scaleX(1);
}

body {
  font-family: "Almarai", sans-serif;
  font-weight: 400;
  font-style: normal
}

/* Theme-specific utilities */
.site-logo {
  height: 45px;
  display: inline-block;
}

/* Navbar contact button moved from inline styles */
.contact-btn {
  background: #c6b2ff;
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}

/* Navbar contact button moved from inline styles */

.contact-btn:hover {
  opacity: 0.95;
}

.contact-btn:focus {
  outline: 3px solid rgba(198, 178, 255, 0.35);
  outline-offset: 2px;
}

/* Layout helper for nav items */
.nav-items {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stronger navbar-scoped rule to ensure appearance matches previous inline styles */
.navbar .contact-btn {
  display: inline-block;
  background: #c6b2ff;
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
  box-sizing: border-box;
}

.navbar .contact-btn:hover {
  opacity: 0.95;
}

/* Nav link hover/active color (user requested) */
.navbar .nav-link,
.navbar .navbar-nav .nav-link {
  color: inherit;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link[aria-current="page"] {
  color: #BA9BF9 !important;
}

/* Also style links when their parent LI is marked by WordPress as current */
.navbar .navbar-nav .current-menu-item>.nav-link,
.navbar .navbar-nav .current_page_item>.nav-link,
.navbar .navbar-nav .current-menu-ancestor>.nav-link,
.navbar .navbar-nav .current-menu-parent>.nav-link {
  color: #BA9BF9 !important;
}

/* Smooth color transition */
.navbar .navbar-nav .nav-link {
  transition: color .15s ease;
}

/* ======== Top Bar Layout ======== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: #f9f9f9;
  border-bottom: 1px solid #e0e0e0;
  gap: 20px;
  flex-wrap: wrap;
}

.top-bar-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.top-bar-logo {
  height: 45px;
  display: block;
}

.top-bar-center {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
}

.contact-info {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #BA9BF9;
  font-family: "Almarai", sans-serif;
}

.top-bar-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.language-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: inherit;
  cursor: pointer;
  background: #ffffff;
  font-size: 14px;
}

/* Flag-style language switcher (header) */
.language-switch {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.language-switch .lang-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.language-switch .lang-btn .lang-label {
  display: inline-block;
}

.language-switch .lang-btn.active,
.language-switch .lang-btn:focus {
  background: #f4eaff;
  border-color: rgba(186, 155, 249, 0.3);
  outline: none;
}

/* Language dropdown adjustments */
.lang-dropdown .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}

.lang-dropdown .dropdown-menu a.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  font-size: 20px;
  cursor: pointer;
  color: #BA9BF9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease;
}

.icon-btn:hover {
  opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width:992px) {
  .top-bar {
    flex-direction: column;
    gap: 15px;
  }

  .top-bar-left {
    width: 100%;
    justify-content: center;
  }

  .top-bar-center {
    width: 100%;
  }

  .contact-info {
    gap: 15px;
    font-size: 13px;
  }

  .top-bar-right {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width:576px) {
  .top-bar {
    padding: 10px 15px;
  }

  .contact-info {
    gap: 10px;
    font-size: 12px;
    flex-direction: column;
  }

  .icon-btn {
    font-size: 18px;
  }
}

/* Footer nav link focus/hover/active color */
.nifas-footer__nav a {
  color: inherit;
  transition: color .15s ease;
}

.nifas-footer__nav a:hover,
.nifas-footer__nav a:focus,
.nifas-footer__nav .current-menu-item>a,
.nifas-footer__nav .current_page_item>a {
  color: #BA9BF9 !important;
  outline: none;
}



/* Footer - NIFAS style */
.nifas-footer {
  background: #fff;
  border-top: 1px solid #f0f0f0;
  padding: 50px 20px;
  font-family: inherit;
  direction: rtl;
  color: #333;
}

.nifas-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

/* top nav */
.nifas-footer__top {
  margin-bottom: 18px;
}

.nifas-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 22px;
  align-items: center;
}

.nifas-footer__nav li a {
  color: #6b6b6b;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}

/* center block */
.nifas-footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.nifas-footer__logo img {
  height: 70px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* app badges */
.nifas-footer__cta {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.nifas-badge img {
  height: 40px;
  display: block;
}

/* socials */
.nifas-footer__socials {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}

.nifas-footer__socials a {
  color: #222;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
}

.nifas-footer__socials a:hover,
.nifas-footer__socials a:focus {
  color: #BA9BF9 !important;
  background: transparent;
}

.nifas-footer__socials a:focus {
  outline: 3px solid rgba(186, 155, 249, 0.18);
  outline-offset: 3px;
}

.nifas-footer__socials .icon {
  font-family: FontAwesome, sans-serif;
  font-style: normal;
}

/* bottom */
.nifas-footer__bottom {
  border-top: 1px solid #f3f3f3;
  padding-top: 18px;
  margin-top: 18px;
}

.nifas-footer__copyright p {
  margin: 0;
  color: #777;
  font-size: 14px;
}

/* responsive */
@media (min-width:768px) {
  .nifas-footer__center {
    flex-direction: column;
  }
}

@media (max-width:479px) {
  .nifas-footer__nav {
    gap: 12px;
    font-size: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nifas-badge img {
    height: 36px;
  }
}




#main.hero-section {
  width: 100%;
  background: linear-gradient(135deg, #f5f3ff 0%, #fafbff 100%);
  padding: 60px 20px;
  direction: rtl;
  text-align: right;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Content Section */
.hero-content {
  flex: 1;
  min-width: 300px;
  padding: 20px;
}

.hero-title {
  font-size: 40px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 20px 0;
  line-height: 1.2;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.hero-description {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin: 0 0 30px 0;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

/* Buttons Container */
.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Button Styles */
.btn {
  padding: 14px 32px;
  font-size: 16px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.btn-primary {
  background: linear-gradient(135deg, #9b6dd4 0%, #7c4dbe 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(155, 109, 212, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 109, 212, 0.4);
}

.btn-secondary {
  background: transparent;
  color: #9b6dd4;
  border: 2px solid #e0dce8;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  border-color: #9b6dd4;
  background: #f9f7ff;
}

/* Image Section */
.hero-image-wrapper {
  flex: 1;
  min-width: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(155, 109, 212, 0.2);
}

/* Decorative Shapes */
.decorative-shape {
  position: absolute;
  pointer-events: none;
}

.shape-1 {
  width: 80px;
  height: 80px;
  background: rgba(155, 109, 212, 0.15);
  border-radius: 50%;
  bottom: -20px;
  right: -20px;
}

.shape-2 {
  width: 120px;
  height: 120px;
  border: 3px solid rgba(155, 109, 212, 0.2);
  border-radius: 40%;
  bottom: -40px;
  right: -40px;
  animation: float 6s ease-in-out infinite;
}

/* Animations */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  #main.hero-section {
    padding: 40px 15px;
  }

  .hero-container {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .hero-title {
    font-size: 34px;
  }

  .hero-description {
    font-size: 14px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .btn {
    padding: 12px 24px;
    font-size: 14px;
  }

  .hero-image-container {
    max-width: 300px;
  }

  .shape-1 {
    width: 60px;
    height: 60px;
  }

  .shape-2 {
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 480px) {
  #main.hero-section {
    padding: 30px 10px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-description {
    font-size: 13px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .btn {
    width: 100%;
  }

  .hero-image-container {
    max-width: 250px;
  }
}


/* Family Section - Main Container */
.family-section {
  width: 100%;
  background: linear-gradient(135deg, #f5f3ff 0%, #fafbff 100%);
  padding: 80px 20px;
  direction: rtl;
  text-align: right;
}

.family-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  position: relative;
}

/* Image Section */
.family-image-wrapper {
  flex: 1;
  min-width: 300px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.family-image-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 4/3;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(155, 109, 212, 0.25);
}

.family-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Decorative Line */
.decorative-line {
  position: absolute;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(155, 109, 212, 0.3), transparent);
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

/* Content Section */
.family-content {
  flex: 1;
  min-width: 300px;
  padding: 20px;
}

.family-title {
  font-size: 48px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 25px 0;
  line-height: 1.2;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.family-description {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin: 0;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

/* Decorative Shapes */
.decorative-shapes {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 150px;
  height: 100px;
  pointer-events: none;
}

.shape-circle {
  position: absolute;
  border: 2px solid rgba(155, 109, 212, 0.2);
  border-radius: 50%;
}

.shape-1 {
  width: 60px;
  height: 60px;
  bottom: 0;
  left: 0;
  animation: float 5s ease-in-out infinite;
}

.shape-2 {
  width: 80px;
  height: 80px;
  bottom: 20px;
  left: 50px;
  animation: float 6s ease-in-out infinite 0.5s;
}

.shape-line {
  position: absolute;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(155, 109, 212, 0.3), transparent);
  bottom: 50px;
  left: 0;
  transform: rotate(-20deg);
}

/* Animations */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .family-container {
    gap: 40px;
  }

  .family-image-container {
    max-width: 380px;
  }

  .family-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .family-section {
    padding: 60px 15px;
  }

  .family-container {
    flex-direction: column-reverse;
    gap: 30px;
  }

  .family-image-wrapper {
    justify-content: center;
  }

  .family-image-container {
    max-width: 100%;
    max-width: 350px;
  }

  .family-title {
    font-size: 32px;
  }

  .family-description {
    font-size: 14px;
  }

  .decorative-shapes {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .family-section {
    padding: 40px 10px;
  }

  .family-container {
    gap: 20px;
  }

  .family-image-container {
    max-width: 100%;
    aspect-ratio: 3/2;
  }

  .family-title {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .family-description {
    font-size: 13px;
    line-height: 1.6;
  }

  .decorative-line {
    width: 120px;
    top: -30px;
  }

  .shape-1 {
    width: 40px;
    height: 40px;
  }

  .shape-2 {
    width: 60px;
    height: 60px;
    left: 40px;
  }

  .shape-line {
    width: 80px;
  }
}



/* ============================================
   SERVICES SLIDER SECTION - UPDATED DESIGN
   ============================================ */

.services-section {
  width: 100%;
  background: linear-gradient(135deg, #f5f3ff 0%, #fafbff 100%);
  padding: 80px 20px;
  direction: rtl;
  text-align: center;
}

.services-container {
  max-width: 1400px;
  margin: 0 auto;
}

.services-title {
  font-size: 48px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 30px 0;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.services-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #9b6dd4, #9b6dd4);
  margin: 0 0 50px 0;
}

/* Main Slider Wrapper */
.slider-main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* Left Section - Navigation and Counter */
.slider-left-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  justify-content: flex-end;
  width: 100%;
  padding-top: 0;
  padding-right: 20px;
}

/* Navigation Buttons */
.slider-nav-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.slider-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #9b6dd4;
  background: white;
  color: #9b6dd4;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.slider-nav:hover {
  background: #9b6dd4;
  color: white;
  transform: scale(1.1);
}

.slider-prev span {
  transform: scaleX(-1);
}

/* Slide Counter */
.slider-counter {
  font-size: 16px;
  color: #9b6dd4;
  font-weight: 600;
  font-family: 'Arial', 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
}

.counter-current {
  font-size: 18px;
  font-weight: 700;
}

.counter-slash {
  color: #9b6dd4;
}

.counter-total {
  font-size: 16px;
  font-weight: 600;
}

/* Slider Wrapper */
.services-slider-wrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 20px;
  background: white;
  box-shadow: 0 10px 40px rgba(155, 109, 212, 0.15);
}

/* Slider Container */
.services-slider {
  width: 100%;
  overflow: hidden;
}

/* Service Slide */
.service-slide {
  display: none;
  padding: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  min-height: 400px;
  animation: fadeIn 0.5s ease-in-out;
}

.service-slide.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Service Content */
.service-content {
  flex: 1;
  text-align: right;
}

.service-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 20px 0;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.service-description {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
  margin: 0 0 25px 0;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.service-btn {
  padding: 12px 32px;
  font-size: 15px;
  background: linear-gradient(135deg, #9b6dd4 0%, #7c4dbe 100%);
  color: white;
  display: inline-block;
  text-decoration: none;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  font-family: 'Arial', 'Segoe UI', sans-serif;
}

.service-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(155, 109, 212, 0.4);
}

/* Service Image */
.service-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(155, 109, 212, 0.2);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
  .slider-main-wrapper {
    gap: 20px;
  }

  .service-slide {
    padding: 40px;
    min-height: 350px;
    gap: 30px;
  }

  .service-title {
    font-size: 28px;
  }

  .service-image img {
    max-width: 350px;
  }
}

@media (max-width: 768px) {
  .services-section {
    padding: 60px 15px;
  }

  .services-title {
    font-size: 36px;
  }

  .slider-main-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .slider-left-section {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
    min-width: auto;
    padding-top: 0;
  }

  .slider-nav-buttons {
    flex-direction: row;
    gap: 15px;
  }

  .service-slide {
    flex-direction: column-reverse;
    padding: 30px;
    min-height: auto;
    gap: 20px;
  }

  .service-content {
    text-align: center;
  }

  .service-title {
    font-size: 24px;
  }

  .service-description {
    font-size: 14px;
  }

  .service-image img {
    max-width: 280px;
  }

  .slider-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .services-section {
    padding: 40px 10px;
  }

  .services-title {
    font-size: 28px;
  }

  .services-divider {
    margin-bottom: 30px;
  }

  .slider-main-wrapper {
    gap: 20px;
  }

  .slider-left-section {
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }

  .slider-nav-buttons {
    flex-direction: row;
    gap: 10px;
  }

  .slider-nav {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .slider-counter {
    font-size: 14px;
  }

  .counter-current {
    font-size: 16px;
  }

  .services-slider-wrapper {
    border-radius: 15px;
  }

  .service-slide {
    padding: 20px;
    min-height: auto;
  }

  .service-title {
    font-size: 20px;
  }

  .service-description {
    font-size: 13px;
  }

  .service-image img {
    max-width: 200px;
  }
}



.about-sections-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-large) 0;
  background-color: var(--color-secondary);
  /* The light purple/gray background */
}

/* Individual Section Styles (e.g., "من نحن", "رؤيتنا", "رسالتنا") */
.about-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-large);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}

/* Alternating Layout: Image on the right for the first section (من نحن) and third (رسالتنا) */
.about-section:nth-child(odd) {
  flex-direction: row-reverse;
  /* Content on the right, Image on the left */
}

/* Alternating Layout: Image on the left for the second section (رؤيتنا) */
.about-section:nth-child(even) {
  flex-direction: row;
  /* Content on the left, Image on the right */
}

/* Content Block */
.service-content {
  flex: 1;
  max-width: 50%;
  /* Limit content width on large screens */
  text-align: right;
  /* Text alignment for RTL */
}

.service-title {
  font-size: 2.5rem;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-medium);
}

.service-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-medium);
}

.service-btn {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.service-btn:hover {
  background-color: #6a1a9e;
  /* Darker shade of primary color */
}

/* Image Block */
.service-image {
  flex: 1;
  max-width: 50%;
  /* Limit image width on large screens */
  position: relative;
  padding: var(--spacing-medium);
  /* Space for the decorative elements */
}

.service-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-large);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

/* Decorative Elements (The light purple shapes) */
/* These will be positioned absolutely within .service-image */
.service-image::before,
.service-image::after {
  content: '';
  position: absolute;
  background-color: rgba(var(--color-primary), 0.1);
  /* Light transparent purple */
  border-radius: var(--border-radius-large);
  z-index: 1;
}

/* Shape 1: The large, rounded rectangle behind the image */
.service-image::before {
  width: 80%;
  height: 80%;
  /* Position for odd sections (Image on the left) */
  top: 0;
  right: 0;
  transform: translate(10%, -10%);
}

/* Shape 2: The smaller, more square-like shape */
.service-image::after {
  width: 30%;
  height: 30%;
  /* Position for odd sections (Image on the left) */
  bottom: 0;
  left: 0;
  transform: translate(-10%, 10%);
}

/* Adjust decorative elements for even sections (Image on the right) */
.about-section:nth-child(even) .service-image::before {
  /* Move large shape to the left/top */
  left: 0;
  right: auto;
  transform: translate(-10%, -10%);
}

.about-section:nth-child(even) .service-image::after {
  /* Move small shape to the right/bottom */
  right: 0;
  left: auto;
  transform: translate(10%, 10%);
}

/* Responsive Design */
@media (max-width: 992px) {
  .about-section {
    flex-direction: column !important;
    /* Stack content and image vertically */
    text-align: center;
  }

  .service-content,
  .service-image {
    max-width: 100%;
  }

  .service-content {
    order: 2;
    /* Content below image */
    text-align: center;
  }

  .service-image {
    order: 1;
    /* Image above content */
    margin-bottom: var(--spacing-medium);
  }

  .service-title,
  .service-description {
    text-align: center;
  }

  /* Adjust decorative elements for stacked layout */
  .service-image::before {
    width: 90%;
    height: 90%;
    top: 5%;
    right: 5%;
    transform: none;
  }

  .service-image::after {
    display: none;
    /* Hide smaller shape on mobile for simplicity */
  }
}

@media (max-width: 576px) {
  .about-sections-container {
    padding: var(--spacing-medium) 0;
  }

  .about-section {
    padding: var(--spacing-medium);
  }

  .service-title {
    font-size: 2rem;
  }
}

/* ==========================================================================
   New Section Styles
   ========================================================================== */

/* --- "قيمنا" (Our Values) Section --- */
/* This section uses the existing .about-section structure, but with content on the left and image on the right.
   Since it's the first section in the new set, and the previous set ended with an odd section, this one will be an even section.
   The alternating logic in the existing CSS handles this:
   .about-section:nth-child(even) { flex-direction: row; } -> Content on left, Image on right.
*/
/* --- "قيمنا" (Our Values) Section --- */
.values-list {
  list-style: none;
  margin: 30px 0 0 0;
  /* Add some margin from the paragraph above */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  /* Gap between items */
  direction: rtl;
  /* Ensure right-to-left flow */
}

.values-list li {
  flex-basis: calc(50% - 15px);
  /* Creates two columns with gap */
  flex-grow: 1;
  margin-bottom: 10px;
  position: relative;
  padding-right: 25px;
  /* Space for the custom bullet */
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  /* Using a standard text color */
  text-align: right;
}

.values-list li::before {
  content: '•';
  /* Using a simple bullet character */
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  line-height: 1.2;
  color: #BA9BF9;
  /* Primary purple color for the bullet */
}

.values-list li strong {
  font-weight: 700;
  color: #333;
}

/* Responsive adjustment for the values list */
@media (max-width: 768px) {
  .values-list li {
    flex-basis: 100%;
    /* Switch to a single column on smaller screens */
  }
}

/* ===== Milestones Section (Timeline Design) ===== */
/* ===== Milestones Section (Alternating Up/Down Design) ===== */
.milestones-section {
  padding: 120px 0;
  /* Add more vertical padding */
  position: relative;
  background-color: #f7f8fc;
  direction: rtl;
  overflow: hidden;
}

/* Decorative hearts background (Kept from your code) */
.milestones-section::before,
.milestones-section::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  z-index: 1;
}

.milestones-section::before {
  top: 50px;
  left: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd2ff' stroke-width='1'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.milestones-section::after {
  bottom: 50px;
  right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd2ff' stroke-width='1'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

.milestones-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* The dashed line connecting the nodes */
.milestones-container::before {
  content: '';
  position: absolute;
  top: 50%;
  /* Center the line vertically */
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background-image: linear-gradient(to left, #dcd2ff 70%, transparent 0%);
  background-size: 15px 2px;
  background-repeat: repeat-x;
  z-index: 2;
}

.milestones-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 10;
  align-items: center;
  /* Align items to the center line */
}

.milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 250px;
  transition: transform 0.4s ease-out;
}

/* NEW: Add classes to move items up and down */
.milestone-item--up {
  transform: translateY(-60px);
}

.milestone-item--down {
  transform: translateY(60px);
}

/* Circle wrapper for the icon (Kept from your code) */
.milestone-icon-wrapper {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #e9e4ff;
  /* Light purple outer ring */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 0 8px #fff;
  /* Creates the white gap */
  z-index: 5;
  /* Make sure it's above the line */
}

/* The small connector dots on the sides (Kept from your code) */
.milestone-icon-wrapper::before,
.milestone-icon-wrapper::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #dcd2ff;
  z-index: 15;
}

.milestone-icon-wrapper::before {
  right: -25px;
}

.milestone-icon-wrapper::after {
  left: -25px;
}

.milestones-list li:first-child .milestone-icon-wrapper::after,
.milestones-list li:last-child .milestone-icon-wrapper::before {
  display: none;
}

/* Inner circle (Kept from your code) */
.milestone-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(122, 92, 255, 0.1);
}

/* Style for the image inside the circle (Kept from your code) */
.milestone-icon img {
  display: block;
  width: 60%;
  height: auto;
  object-fit: contain;
}

/* Text content below the icon */
.milestone-content {
  text-align: center;
  margin-top: 20px;
  /* Space between icon and text */
}

.milestone-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #7a5cff;
  margin: 0 0 8px 0;
}

.milestone-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .milestones-list {
    flex-direction: column;
    align-items: center;
    gap: 90px !important;
    /* Increased gap for vertical layout */
  }

  .milestone-item {
    flex: 0 1 auto;
    max-width: 80%;
    padding-bottom: 0;
    margin-bottom: 0 !important;
  }

  .milestones-container::before {
    /* Change line to vertical */
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to top, #dcd2ff 70%, transparent 0%);
    background-size: 2px 15px;
  }

  /* Reset transforms on mobile */
  .milestone-item--up,
  .milestone-item--down {
    transform: translateY(0);
  }

  .milestone-icon-wrapper::before,
  .milestone-icon-wrapper::after {
    display: none;
    /* Hide side dots on mobile */
  }
}


/* --- "اليوم" (Today) Section --- */
/* This section uses the existing .about-section structure.
   It appears to be an odd section (Image on Left) in the overall flow.
*/
.today-section .service-title {
  font-size: 2.5rem;
  text-align: right;
  width: 100%;
  margin-bottom: var(--spacing-medium);
}

/* Responsive Adjustments for New Sections */
@media (max-width: 992px) {

  /* Values List */
  .values-list li {
    flex-basis: 100%;
    /* Single column on tablets/mobile */
    text-align: right;
  }

  /* Milestones */
  .milestones-list {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-large);
  }

  .milestone-item {
    flex: 0 1 auto;
    max-width: 80%;
  }

  .milestones-section::before {
    /* Change horizontal line to vertical line on mobile */
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--color-primary), transparent);
  }
}

@media (max-width: 576px) {
  .milestone-item {
    max-width: 100%;
  }
}



/* ===== Contact Section ===== */
.contact-section {
  background-color: #f7f8fc;
  padding: var(--spacing-xlarge) 0;
  direction: rtl;
  display: flex;
  flex-direction: column !important;

  /* Ensure right-to-left layout */
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-medium);
  display: flex;
  align-items: center;
  gap: var(--spacing-xlarge);
}

/* Right side: Info */
.contact-info {
  flex: 1;
  text-align: right;
}

.contact-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-medium);
}

.contact-description {
  font-size: 1.1rem;
  color: var(--color-text-light);
  line-height: 1.8;
  max-width: 500px;
  margin-bottom: var(--spacing-large);
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-medium);
}

.contact-details li a {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #BA9BF9;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-details li a:hover {
  color: var(--color-primary);
}

.contact-details i {
  font-size: 1.3rem;
}

/* Left side: Form */
.contact-form-wrapper {
  flex: 1;
  background-color: #fff;
  border-radius: 20px;
  padding: var(--spacing-large);
  box-shadow: 0 15px 40px rgba(122, 92, 255, 0.08);
  border-top: 4px solid #BA9BF9;
}

.contact-form .form-group {
  margin-bottom: 1.25rem;
}

.contact-form label {
  display: block;
  text-align: right;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #BA9BF9;
  box-shadow: 0 0 0 3px rgba(186, 155, 249, 0.2);
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .btn-primary {
  width: 100%;
  padding: 18px;
  font-size: 1.05rem;
  font-weight: 700;
  background-color: #7a5cff;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contact-form .btn-primary:hover {
  background-color: #694ada;
}

/* Requested contact form spacing and direction rules */
.contact-form {
  padding: 50px;
  /* increased inner spacing */
}

.contact-form-wrapper {

  /* outer spacing for the form container */
}

/* Ensure labels and inputs respect page direction */
body[dir="ltr"] .contact-form label,
body[dir="ltr"] .contact-form input,
body[dir="ltr"] .contact-form textarea {
  direction: ltr;
  text-align: left;
}

body[dir="rtl"] .contact-form label,
body[dir="rtl"] .contact-form input,
body[dir="rtl"] .contact-form textarea {
  direction: rtl;
  text-align: right;
}

/* Location section spacing */
.location-section {
  margin: 20px 0;
}

.location-info-box {
  padding: 20px;
  margin-top: 30px;
}

/* About section spacing */
.about-section {
  margin: 20px 0;
  padding: 10px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .contact-container {
    flex-direction: column;
    text-align: center;
  }

  .contact-info,
  .contact-form-wrapper {
    width: 100%;
    max-width: 600px;
  }

  .contact-info {
    order: 1;
    /* Make info appear first */
  }

  .contact-form-wrapper {
    order: 2;
    /* Make form appear second */
  }

  .contact-info,
  .contact-form label,
  .contact-details {
    align-items: center;
    text-align: center;
  }

  .contact-description {
    margin-left: auto;
    margin-right: auto;
  }
}


/* ...existing code... */

/* ===== App Download Section (Updated) ===== */
.app-download-section {
  padding: var(--spacing-xlarge) 0;
  background-color: #fff;
  direction: rtl;
  overflow: hidden;
  /* Prevents images from overflowing on small screens */
}

.app-download-container {
  max-width: 1300px;
  margin: 5rem auto;
  padding: 0 var(--spacing-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-medium);
}

.app-download-content {
  text-align: center;
  flex-shrink: 0;
  /* Prevent content from shrinking */
}

.app-download-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-large);
}

.app-store-badges {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.app-store-badges a img {
  height: 50px;
  transition: transform 0.2s ease;
}

.app-store-badges a:hover img {
  transform: scale(1.05);
}

.app-download-image {
  flex-basis: 30%;
}

.app-download-image img {
  width: 100%;
  height: auto;
}

/* Responsive adjustments for the new layout */
@media (max-width: 992px) {
  .app-download-container {
    flex-direction: column;
  }

  .app-download-content {
    /* Place content between the two images on mobile */
    order: 2;
    margin: var(--spacing-large) 0;
  }

  .app-download-image-left {
    order: 1;
  }

  .app-download-image-right {
    order: 3;
  }

  .app-download-image {
    flex-basis: auto;
    width: 70%;
    max-width: 350px;
  }
}

@media (max-width: 576px) {
  .app-download-title {
    font-size: 2.5rem;
  }

  .app-store-badges a img {
    height: 45px;
  }
}




/* ===== Location Section ===== */
.location-section {
  min-height: 600px;
  background-image: url('../images/map.png');
  background-size: cover;
  background-position: center;
  position: relative;
  direction: rtl;
}

.location-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center the box horizontally */
  width: 100%;
  height: 100%;
  padding: var(--spacing-large) var(--spacing-medium);
}

.location-info-box {
  background-color: #7a5cff;
  color: #fff;
  padding: var(--spacing-large);
  border-radius: 25px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.location-info-box h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--spacing-medium);
}

.location-info-box p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin: 0 0 var(--spacing-large) 0;
}

.location-info-box i {
  margin-left: 10px;
}

.location-inset-map {
  border-radius: 15px;
  border: 3px solid #fff;
  overflow: hidden;
  line-height: 0;
  /* Removes extra space below the image */
  height: 320px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.location-inset-map .grid-map__frame,
.location-inset-map iframe,
.location-inset-map img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@media (max-width: 768px) {
  .location-inset-map {
    height: 220px;
  }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .location-info-box {
    padding: var(--spacing-medium);
  }

  .location-info-box h3 {
    font-size: 2rem;
  }

  .location-info-box p {
    font-size: 1rem;
  }
}

/* Polylang Language Switcher Styles */
.language-switcher ul {
  list-style: none;
  margin: 0;

  display: flex;
  gap: 10px;
  align-items: center;
}

.language-switcher ul li {
  margin: 0;
  padding: 0;
}

.language-switcher ul li a {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
}

.language-switcher ul li img {
  width: 20px;
  height: auto;
  border-radius: 3px;
}

/* Directional layout helpers: switch alignment and flex ordering based on page dir */
body[dir="rtl"] {
  direction: rtl;
}

body[dir="ltr"] {
  direction: ltr;
}

/* Containers that should reverse ordering in RTL */
body[dir="rtl"] .hero-container,
body[dir="rtl"] .family-container,
body[dir="rtl"] .services-container,
body[dir="rtl"] .about-sections-container,
body[dir="rtl"] .contact-container,
body[dir="rtl"] .app-download-container {

  text-align: right;
}

body[dir="ltr"] .hero-container,
body[dir="ltr"] .family-container,
body[dir="ltr"] .services-container,
body[dir="ltr"] .about-sections-container,
body[dir="ltr"] .contact-container,
body[dir="ltr"] .app-download-container {

  text-align: left;
}

/* Nav and text alignment */
body[dir="rtl"] .navbar .nav-link,
body[dir="rtl"] .navbar-nav .nav-link {
  text-align: right;
}

body[dir="ltr"] .navbar .nav-link,
body[dir="ltr"] .navbar-nav .nav-link {
  text-align: left;
}

/* Ensure values list aligns to LTR for English and RTL for Arabic */
body[dir="ltr"] .values-list,
body[dir="ltr"] .values-list li {
  direction: ltr;
  text-align: left;
}

body[dir="rtl"] .values-list,
body[dir="rtl"] .values-list li {
  direction: rtl;
  text-align: right;
}

/* Service/content blocks inherit alignment */
body[dir="rtl"] .service-content,
body[dir="rtl"] .family-content,
body[dir="rtl"] .hero-content,
body[dir="rtl"] .contact-info,
body[dir="rtl"] .location-info-box {
  text-align: right;
}

body[dir="ltr"] .service-content,
body[dir="ltr"] .family-content,
body[dir="ltr"] .hero-content,
body[dir="ltr"] .contact-info,
body[dir="ltr"] .location-info-box {
  text-align: left;
}

/* Buttons alignment inside hero */
body[dir="rtl"] .hero-buttons {
  justify-content: flex-start;
}

body[dir="ltr"] .hero-buttons {
  justify-content: flex-end;
}

/* Ensure icon margins follow text direction */
.contact-info i {
  margin-inline-start: 10px;
  margin-inline-end: 0;
}

body[dir="ltr"] .contact-info i {
  margin-inline-start: 0;
  margin-inline-end: 10px;
}

/* Mobile: center text for all languages */
@media (max-width: 768px) {

  .hero-title,
  .hero-description,
  .family-title,
  .family-description,
  .service-title,
  .service-description,
  .contact-info,
  .contact-form-wrapper,
  .location-info-box {
    text-align: center !important;
  }

  /* Hide language label on small screens to save space */
  .language-switch .lang-label {
    display: none;
  }
}

/* ===== Dropdown override: enforce click-only behavior ===== */
/* Hide language and tools dropdowns by default; show only when parent has .open */
.language-switcher__dropdown-area,
.block-header-item__dropdown-area {
  display: none !important;
  pointer-events: auto;
}



.language-switcher.open .language-switcher__dropdown-area,
.block-header-item--tools.open .block-header-item__dropdown-area {
  display: block !important;
}

/* Ensure dropdown parent positioning for absolute children */
.block-header-item {
  position: relative;
}

/* RTL-safe alignment defaults (can be overridden by existing rules) */
.block-header-item__dropdown-area {
  left: 0;
  right: auto;
}

body[dir="rtl"] .block-header-item__dropdown-area {
  right: 0;
  left: auto;
}

/* Small transition to avoid flash when toggling */
.language-switcher__dropdown-area,
.block-header-item__dropdown-area {
  transition: opacity .12s ease, transform .12s ease;
  opacity: 0;
  transform: translateY(-6px);
}

.language-switcher.open .language-switcher__dropdown-area,
.block-header-item--tools.open .block-header-item__dropdown-area {
  opacity: 1;
  position: relative;
  transform: translateY(0);
}

/* ===== Explicit overrides requested by user (with !important) ===== */
.contact-form {
  padding: 50px !important;
}

body[dir="ltr"] .contact-form label,
body[dir="ltr"] .contact-form input,
body[dir="ltr"] .contact-form textarea {
  direction: ltr !important;
  text-align: left !important;
}

body[dir="rtl"] .contact-form label,
body[dir="rtl"] .contact-form input,
body[dir="rtl"] .contact-form textarea {
  direction: rtl !important;
  text-align: right !important;
}


.location-section {
  margin: 20px 0 !important;
}

.location-info-box {
  padding: 20px !important;
  margin-top: 30px !important;
}

.about-section {
  margin: 20px 0 !important;
  padding: 10px !important;
}

/* ===== Mobile menu styles ===== */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-menu-toggle:focus {
  outline: 3px solid rgba(186, 155, 249, 0.25);
  border-radius: 6px
}

.mobile-menu-toggle .hamburger {
  display: inline-block;
  width: 22px;
  height: 16px;
  position: relative
}

.mobile-menu-toggle .hamburger span {
  display: block;
  height: 2px;
  background: #333;
  border-radius: 2px;
  position: absolute;
  left: 0;
  right: 0
}

.mobile-menu-toggle .hamburger span:nth-child(1) {
  top: 0
}

.mobile-menu-toggle .hamburger span:nth-child(2) {
  top: 7px
}

.mobile-menu-toggle .hamburger span:nth-child(3) {
  top: 14px
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex
  }

  .block-header__nav {
    display: none
  }

  .block-header__nav.mobile-open {
    display: flex !important;
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 18px 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    flex-direction: column;
    gap: 12px;
    z-index: 1300;
  }

  body[dir="rtl"] .block-header__nav.mobile-open {
    right: 0;
    left: 0
  }

  .block-header__nav.mobile-open .block-header__nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 12px
  }

  .block-header__nav.mobile-open .item-content {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: transparent
  }
}











@media (max-width: 992px) {

  [dir="ltr"] .service-content .service-title,
  [dir="ltr"] .service-content .service-description,
  [dir="ltr"] .family-content .family-title,
  [dir="ltr"] .family-content .family-description,
  [dir="ltr"] .hero-content .hero-title,
  [dir="ltr"] .hero-content .hero-description,
  [dir="ltr"] .service-content {
    text-align: left !important;
  }

  [dir="ltr"] .about-section {
    text-align: left !important;
  }

  .contact-section {
    flex-direction: column !important;
  }
}





.language-switcher {
  position: relative;
}














/* ===== Form Styles ===== */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

form .form-group {
  display: flex;
  flex-direction: column;
}

form label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="password"],
form input[type="search"],
form input[type="number"],
form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

form button,
form input[type="submit"] {
  background-color: #9b6ef5;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

form button:hover,
form input[type="submit"]:hover {
  background-color: #7a4fe0;
}

/* Responsive Form Styles */
@media (max-width: 768px) {
  form {
    padding: 15px;
  }
}

/* ===== App Download Section ===== */
.app-download-section {
  padding: 40px 20px;
  background: #f6f7fb;
}

.app-download-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 36px;
  box-shadow: 0 10px 30px rgba(34, 34, 40, 0.06);
  /* Top accent border to match screenshot */
  border-top: 6px solid #7a4fe0;
  /* purple accent, adjust if needed */
}

.app-download-image {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-download-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.app-download-content {
  flex: 1 1 auto;
  text-align: center;
}

.app-download-title {
  font-size: 34px;
  margin: 6px 0 18px;
  color: #121212;
  font-weight: 600;
}

.app-store-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.app-store-badges a img {
  height: 52px;
  width: auto;
  display: block;
}

@media (max-width: 900px) {
  .app-download-container {
    flex-direction: column;
    padding: 22px;
    border-radius: 16px;
  }

  .app-download-image {
    flex: 0 0 auto;
    width: 60%;
    margin-bottom: 12px;
  }

  .app-download-title {
    font-size: 26px;
  }
}




.nav-link {
  color: #8d5fca !important;
}