/* Global Styles */
body {
  background-color: var(--bg-light);
  overflow-x: hidden;
  color: var(--natural-Txt);
}

section {
  margin: 5rem 0;
}

p {
  white-space: pre-line;
}

/* Page Loader */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-white, #fff);
  opacity: 1;
  visibility: visible;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
/* Full-screen background for the preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff96; /* Page background color */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Keeps it above all other elements */
}

html:not(.lang-pending) .page-loader {
  opacity: 0;
  visibility: hidden;
}

/* Section Title */
.section-title {
  text-align: center;
  font-size: var(--font-size-2xl);
  color: var(--natural-Txt);
  margin-bottom: 1rem;
  font-weight: 500;
}

.section-desc {
  text-align: center;
  font-size: var(--font-size-xl);
  color: var(--natural-Txt);
  margin-bottom: 2rem;
}

/* App Download Buttons */
.app-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--transition-fast);
}

.app-btn:hover {
  transform: translateY(-3px);
  color: var(--text-white);
}

.app-btn i {
  font-size: var(--font-size-xl);
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0 !important;
}

.nav-link {
  transition: none !important;
}

.outline-btn {
  border-radius: 0px;
  color: #832b00;
  font-size: var(--font-size-md);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: 40%;
  text-underline-position: from-font;
  font-weight: 400;
  margin-top: 10px;
}

.outline-btn:focus,
.outline-btn:hover,
.outline-btn:active {
  cursor: pointer;
  color: #832c00e8 !important;
  border-color: transparent !important;
}

.primary-btn {
  border-radius: 8px;
  background: var(--primary-500);
  box-shadow: 0 4px 16px 0 rgba(56, 19, 18, 0.04);
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: 400;
  padding: 10px 42px;
}

.primary-btn:focus,
.primary-btn:hover,
.primary-btn:active {
  background-color: var(--primary-600) !important;
  cursor: pointer;
  color: #fff !important;
}

/*=================  styles ar /en ===================== */

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

/* LTR (English) */
html[dir="ltr"] .carousel-indicators {
  right: 150px;
  left: unset;
}

/*  RTL (Arabic) */
html[dir="rtl"] .carousel-indicators {
  left: 150px;
  right: unset;
}

/* Flip when page is LTR (English) */
html[dir="ltr"] .hero-image img,
html[dir="ltr"] .arrow {
  transform: rotateY(180deg);
}

/* Normal orientation for RTL (Arabic) */
html[dir="rtl"] .hero-image img,
html[dir="rtl"] .arrow {
  transform: rotateY(0deg);
}

/*  RTL (Arabic) */
html[dir="rtl"] .banner-offer {
  left: 0;
  right: unset;
}

/* LTR (English) */
html[dir="ltr"] .banner-offer {
  right: 0px;
  top: 0;
  width: 350px;
  left: unset;
}
/*  RTL (Arabic) */
html[dir="rtl"] .special-offer {
  left: 80px;
  right: unset;
}

/* LTR (English) */
html[dir="ltr"] .special-offer {
  right: 130px;
  bottom: 12px;
  width: 300px;
  border-radius: 8px;
  left: unset;
}

/*  RTL (Arabic) */
html[dir="rtl"] .step-item:not(:last-child)::before {
  right: 38px;
  left: unset;
}

/* LTR (English) */
html[dir="ltr"] .step-item:not(:last-child)::before {
  left: 38px;
  right: unset;
}

html[dir="rtl"] #providerMockup {
  left: 80px;
  right: unset;
}

html[dir="ltr"] #providerMockup {
  right: 80px;
  left: unset;
}

html[dir="rtl"] .pl-text {
  padding-left: 5%;
  padding-right: unset;
}

html[dir="ltr"] .pl-text {
  padding-right: 5%;
  padding-left: unset;
}