body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #222;
}

/* ---- HERO SECTION ---- */
.hero-section {
  background: #fff;
  border-bottom: 1.5px solid #ececec;
  box-shadow: 0 10px 44px 0 rgba(225,200,150,.06);
  position: relative;
  z-index: 1;
}


.hero-inner {
  display: flex;
  align-items: center;      /* Vertically center columns */
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 80vh;        /* Fill viewport height */
  padding: 30px 0;
}
.hero-photo-col {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1 0 0;
  padding-right: 2vw;
  min-width: 320px;
}
.profile-image{
  width: 360px;
  height: 360px;
  aspect-ratio: 1 / 1;      /* keep perfect circle even if sizes change */
  border-radius: 50%;
  object-fit: cover;        /* crop instead of stretch */
  object-position: 50% 45%; /* nudge framing if needed */
  border: 6px solid #d6ae6d;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  background: transparent;  /* no black fill */
  margin-top: 0;            /* remove big upward shift */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.profile-image:hover{
  transform: scale(1.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
@media (max-width: 600px){
  .profile-image{
    width: min(86vw, 270px);
    height: min(86vw, 270px); /* keep square on mobile */
    margin-top: 0;
  }
}

.hero-center-col {
  flex: 2 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;       /* Center horizontally */
  justify-content: center;
  text-align: center;        /* Center all text and button */
  min-width: 340px;
}
.hero-center-col h2 {
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: #a88a3e;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #c59e47 30%, #d6ae6d 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-center-col h1 {
  font-size: 2.9rem;
  font-weight: 700;
  color: #222;
  margin: 8px 0 20px 0;
  line-height: 1.12;
}
.hero-center-col p {
  font-size: 1.13rem;
  color: #555;
  margin-bottom: 34px;
  max-width: 460px;
  line-height: 1.55;
  font-weight: 500;
}
.hero-button {
  background: linear-gradient(94deg, #d6ae6d, #c79d50 85%);
  color: #26231d;
  border: none;
  border-radius: 7px;
  padding: 18px 54px;
  font-size: 1.13rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.23s, box-shadow 0.18s, transform 0.14s;
  box-shadow: 0 6px 16px rgba(215,182,100,0.09);
  width: fit-content;
  min-width: 150px;
  outline: none;
  display: block;
  margin: 0 auto; /* extra insurance for centering on all screens */
}
.hero-button:hover, .hero-button:focus {
  background: linear-gradient(94deg, #caa456, #f1d59a 95%);
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 8px 22px rgba(197,158,71,0.18);
  color: #191815;
}



/* ===== WHAT IS Mostashark SECTION (PRO VERSION) ===== */

.what-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
}

.what-title {
  color: #000000;
  font-size: 2.45rem;
  font-weight: 800;
  margin-bottom: 28px;
  line-height: 1.3;
}

.gradient-text {
  background: linear-gradient(90deg, #c9a74c 20%, #e5c178 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  letter-spacing: 0.02em;
}

.what-description {
  font-size: 1.18rem;
  color: #000000;
  line-height: 1.75;
  max-width: 840px;
  margin: 0 auto;
  font-weight: 500;
  text-shadow: 0.5px 0.5px 0 #ffffff;
  opacity: 0.94;
  transition: opacity 0.3s ease-in;
}

.what-is-Mostashark:hover .what-description {
  opacity: 1;
}

@keyframes fadeInUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .what-title {
    font-size: 1.9rem;
  }

  .what-description {
    font-size: 1.05rem;
    padding: 0 14px;
  }
}



/* -------- WHY CHOOSE SECTION --------- */
.why-choose-section {
  background: #fff;   /* CHANGE: was #f8f8f9 */
  padding: 70px 0 44px 0;
  border-bottom: 1.5px solid #e6e6e6;
  box-shadow: 0 6px 36px 0 rgba(221,193,110,0.03);
  position: relative;
  z-index: 2;
}
.why-choose-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.why-choose-header {
  display: flex;
  align-items: center;
  font-size: 1.10rem;
  color: #b08d3d;
  font-weight: 600;
  margin-bottom: 14px;
  gap: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.why-icon {
  font-size: 1.45rem;
  color: #c59e47;
  filter: drop-shadow(0 0 2px #e3c98070);
}
.why-title {
  font-weight: 600;
  color: #b08d3d;
}
.why-main-title {
  font-size: 2.7rem;
  font-weight: 700;
  margin-bottom: 38px;
  line-height: 1.15;
  color: #2d2a18;
  letter-spacing: 0.1px;
  text-align: left;
}
html[dir="rtl"] .why-main-title {
  text-align: right;
}
.why-benefits-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 18px;
  margin-bottom: 16px;
}
.why-benefit {
  background: linear-gradient(99deg,#fff 74%, #f8efe0 100%);
  min-width: 220px;
  max-width: 330px;
  flex: 1 1 230px;
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: 30px 25px 32px 25px;
  border-radius: 22px;
  box-shadow: 0 4px 26px rgba(221,193,110,0.09);
  border: 1px solid #ece1c7;
  margin-right: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.why-benefit:hover {
  box-shadow: 0 12px 36px rgba(221,193,110,0.17);
  transform: translateY(-5px) scale(1.03);
  border-color: #e5c178;
  z-index: 1;
}
.why-number {
  font-size: 2.6rem;
  font-weight: 800;
  color: #d3b059;
  min-width: 44px;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  line-height: 1.1;
  margin-top: 0;
  text-shadow: 0 1px 4px #f5e3b650;
  letter-spacing: .5px;
}
.why-desc {
  flex: 1;
}
.why-benefit-title {
  font-size: 1.19rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #222;
  letter-spacing: 0.01em;
}
.why-benefit-desc {
  color: #534b32;
  font-size: 1.01rem;
  font-weight: 400;
  line-height: 1.55;
  opacity: .89;
}
.why-subtext {
  font-size: 1.13rem;
  color: #a4905d;
  margin-top: 30px;
  margin-bottom: 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: .11px;
  text-shadow: 0 1px 0 #fff4e7;
}

/* -------- HOW WORKS SECTION --------- */
.how-works-section {
  background: #fff;  /* CHANGE: was #fff, keep as white */
  padding: 52px 0 40px 0;
  position: relative;
  z-index: 2;
}
.how-works-inner {
  max-width: 950px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.how-works-title {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 28px;
  color: #3b2f12;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 #f5e7ca;
}
.how-works-list {
  list-style: none;
  margin: 0 auto 26px auto;
  padding: 0;
  max-width: 700px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how-works-list li {
  display: flex;
  align-items: flex-start;
  font-size: 1.13rem;
  color: #23201c;
  gap: 16px;
  line-height: 1.6;
  border-radius: 13px;
  background: #fcf7ec;
  border-left: 6px solid #e2c78a;
  padding: 18px 18px 18px 24px;
  box-shadow: 0 2px 8px #f6e6bc33;
  margin-bottom: 0;
  transition: box-shadow .17s, border-color .17s;
  position: relative;
  font-weight: 600;
}
.how-works-list li:hover {
  box-shadow: 0 6px 22px #eed08e2a;
  border-left-color: #c8a447;
}
.how-works-dot {
  display: inline-block;
  margin-top: 6px;
  width: 19px;
  height: 19px;
  background: linear-gradient(115deg,#f6ecd8 60%, #f1dab4 100%);
  border-radius: 50%;
  border: 3.3px solid #e6c785;
  box-shadow: 0 2px 7px #f6e6bc44;
  flex-shrink: 0;
  margin-right: 4px;
  transition: border-color .19s;
}
.how-works-list li:hover .how-works-dot {
  border-color: #c8a447;
}
.how-works-note {
  font-size: 1.09rem;
  margin-top: 22px;
  color: #534d34;
  line-height: 1.65;
  font-weight: 500;
  text-align: center;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  opacity: .94;
}

/* -------- RESPONSIVE --------- */
@media (max-width: 1100px) {
  .hero-inner, .why-choose-inner { max-width: 98vw; }
  .why-main-title { font-size: 2.1rem; }
  .hero-center-col h1 { font-size: 2.1rem; }
  .hero-photo-col, .profile-image { min-width: 200px; }
}
@media (max-width: 900px) {
  .hero-inner {
    flex-direction: column;
    gap: 38px;
    min-height: auto;
    padding: 38px 0;
  }
  .hero-photo-col, .hero-center-col {
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .hero-center-col { align-items: center; text-align: center; padding: 0; }
  .profile-image { margin: 0 auto; }
  .why-benefits-list { flex-direction: column; gap: 18px 0; }
  .why-benefit { max-width: 98vw; margin-right: 0; }
  .why-main-title { font-size: 1.6rem; text-align: center;}
}
@media (max-width: 600px) {
  .hero-photo-col, .hero-center-col { padding: 0; }
  .profile-image { width: 86vw; height: 86vw; max-width: 270px; max-height: 270px; }
  .hero-section { padding: 0; }
  .why-choose-inner, .how-works-inner { padding: 0 2vw; }
  .how-works-title { font-size: 1.22rem; }
  .why-number { font-size: 1.4rem; }
  .why-main-title { font-size: 1.12rem; }
  .how-works-list li { font-size: 1.01rem; }
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0 0;
}

.language-switcher label {
  color: #fff;
  font-weight: 600;
  font-size: 1.08rem;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.language-switcher select {
  background: #181818;
  color: #fff;
  border: 1.5px solid #d6ae6d;
  border-radius: 8px;
  padding: 8px 28px 8px 28px;   /* <-- even padding L/R for perfect centering */
  font-size: 1.08rem;
  font-family: inherit;
  min-width: 120px;
  box-shadow: 0 2px 12px rgba(214, 174, 109, 0.11);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s;
  text-align: center;           /* center text */
  text-align-last: center;      /* center selected value */
  outline: none;
  position: relative;

  /* Custom golden arrow SVG for pro look */
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.5 7L12 1' stroke='%23d6ae6d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 8px;
}

.language-switcher select:focus, 
.language-switcher select:hover {
  border-color: #f6d37b;
  background: #23211c;
  color: #ffe6b0;
  box-shadow: 0 2px 18px 0 #e4be7599;
}

/* Firefox only: make dropdown options match theme (does not work in Chrome) */
.language-switcher select option {
  background: #181818;
  color: #fff;
  text-align: center;
}

/* RTL support */
html[dir="rtl"] .language-switcher {
  direction: rtl;
}

html[dir="rtl"] .language-switcher label {
  margin-left: 0;
  margin-right: 0;
}

html[dir="rtl"] .language-switcher select {
  direction: rtl;
  background-position: left 14px center;    /* Move arrow to left */
  text-align: center;
  text-align-last: center;
  padding: 8px 28px 8px 28px;              /* Even for RTL */
}

/* Responsive: smaller select on mobile */
@media (max-width: 600px) {
  .language-switcher select {
    min-width: 80px;
    font-size: 1rem;
    padding: 8px 14px 8px 14px;
  }
}


.custom-dropdown {
  position: relative;
  min-width: 120px;
}
.dropdown-toggle {
  background: #000000;
  color: #fff;
  border: none;
  border-radius: 8px;
  min-width: 120px;
  font-size: 1.08rem;
  box-shadow: 0 0 12px 0 #caba25c3;  /* soft gold glow */
  cursor: pointer;
  outline: none;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;         /* label is centered in the button */
  height: 40px;
  padding: 0 38px 0 38px;         /* <-- KEY: gives same space left & right of text */
  /* Adjust '38px' as needed, but keep left & right the same */
}

.dropdown-label {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  pointer-events: none;
  /* For extra insurance: */
  display: inline-block;
}

.dropdown-toggle:after {
  content: '▼';
  position: absolute;
  font-size: 0.92em;
  color: #d6ae6d;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;           /* Distance arrow from right edge */
  pointer-events: none;
}

/* RTL Support */
html[dir="rtl"] .dropdown-toggle:after {
  right: auto;
  left: 18px;
}




.dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #181818;
  border: 1.5px solid #d6ae6d;
  border-radius: 8px;
  min-width: 120px;
  box-shadow: 0 6px 36px rgba(221,193,110,0.11);
  z-index: 99;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: fadeIn 0.22s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px);}
  to { opacity: 1; transform: translateY(0);}
}

.dropdown-menu.open {
  display: block;
}

.dropdown-item {
  text-align: center;
  color: #fff;
  padding: 13px 12px;
  font-size: 1.08rem;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
  outline: none;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item[aria-selected="true"] {
  background: #2a2113;
  color: #ffd975;
}
.dropdown-toggle:focus,
.dropdown-toggle:hover {
  border-color: #f6d37b;
  background: #23211c;
  color: #ffe6b0;
  box-shadow: 0 2px 18px 0 #e4be7599;
}

html[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

/* Highlight the active nav item */
.active-link {
  border-bottom: 2.5px solid #c59e47; /* or your underline style */
}
html[dir="rtl"] .how-works-dot {
  margin-left: 0px;   /* Space between circle and text */
  margin-right: 0;     /* Reset default margin */
}

html[dir="rtl"] .how-works-list li span {
  text-align: right !important;
  direction: rtl !important;
}

.logo-text {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative; /* so scaling doesn't break layout */
}



/* Arabic / RTL */
html[dir="rtl"] .logo-img {
  transform-origin: right center; /* keeps same space from right as LTR has from left */
}

/* Keep old text hidden for accessibility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 600px) {
  .logo-img {
    height: 50px;
  }
}

/* ✅ NAVIGATION STYLES */
.nav-btn {
  position: relative;
  text-decoration: none;
  font-size: 1rem;
  color: #222;
  font-weight: 500;
  padding: 6px 10px;
  transition: all 0.2s ease-in-out;
}

.nav-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: #d6ae6d;
  transition: width 0.3s ease;
}

.nav-btn:hover {
  color: #c79d50;
}

.nav-btn:hover::after {
  width: 100%;
}

.nav-btn.active::after {
  width: 100%;
}

.btn-contact {
  border: 2px solid #d6ae6d;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 600;
  color: #d6ae6d;
}

.btn-contact:hover {
  background-color: #d6ae6d;
  color: #fff;
}

.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* language dropdown when placed inside the navbar */
.nav-menu .language-switcher { margin: 0 8px; }   /* remove big top margin */
.nav-menu .dropdown-toggle { height: 36px; padding: 0 28px; } /* compact like buttons */

/* Keep the arrow beside, not on top of, the text */
.dropdown-label{
  padding-right: 24px;           /* makes room for the arrow in LTR */
}
html[dir="rtl"] .dropdown-label{
  padding-right: 0;
  padding-left: 24px;            /* makes room for the arrow in RTL */
}

/* Arrow color */
.dropdown-toggle:after{
  color: #fff;                   /* white arrow */
  /* right: 18px;  // keep as-is; you already have this set */
}
/* --- Light theme for the navbar language dropdown --- */
.nav-menu .custom-dropdown .dropdown-toggle{
  background: #fff;          /* white button */
  color: #222;               /* dark text */
  border: 1.5px solid #d6ae6d;
  box-shadow: 0 6px 14px rgba(215,182,100,0.12);
}

.nav-menu .custom-dropdown .dropdown-toggle:hover,
.nav-menu .custom-dropdown .dropdown-toggle:focus{
  background: #fff;
  color: #000;
  border-color: #d6ae6d;
  box-shadow: 0 8px 18px rgba(197,158,71,0.22);
}

/* arrow beside the text (dark so it shows on white) */
.nav-menu .custom-dropdown .dropdown-toggle:after{
  color: #222;
}

/* open menu: white background + dark text */
.nav-menu .custom-dropdown .dropdown-menu{
  background: #fff;
  border: 1.5px solid #d6ae6d;
}

.nav-menu .custom-dropdown .dropdown-item{
  color: #222;
}

.nav-menu .custom-dropdown .dropdown-item:hover,
.nav-menu .custom-dropdown .dropdown-item:focus,
.nav-menu .custom-dropdown .dropdown-item[aria-selected="true"]{
  background: #fff7e2;  /* soft light-gold hover */
  color: #000;
}

.footer-contact-btn{
  display:inline-block;
  margin-top:10px;
  padding:10px 16px;
  background:#fff;
  color:#111;
  border:1.5px solid #d6ae6d;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(197,158,71,0.18);
  transition:box-shadow .18s, transform .12s, background .18s;
}
.footer-contact-btn:hover{
  background:#fff7e2;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(197,158,71,0.26);
}




/* Email look on dark footer */
.footer-email{
  color:#ffffff;
  text-decoration:none;
  opacity:.9;
}
.footer-email:hover{ opacity:1; text-decoration:underline; }



/* Button style (pill + gold gradient) */
.footer-contact-btn{
  margin-bottom: 10px;
  display:inline-block;
  padding:12px 22px;
  border:none;
  border-radius:9999px;
  background:linear-gradient(94deg,#d6ae6d,#c79d50 85%);
  color:#1f1b15;
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(197,158,71,.25);
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease;
}
.footer-contact-btn:hover,
.footer-contact-btn:focus{
  transform:translateY(-2px);
  filter:brightness(1.02);
  box-shadow:0 12px 28px rgba(197,158,71,.33);
}

/* Email under the button */
.footer-email{
  color:#fff;                /* looks good on dark footer */
  text-decoration:none;
  font-weight:600;
  opacity:.9;
}
.footer-email:hover{ opacity:1; text-decoration:underline; }










/* Make social icons line up like the other inline lists */
.social-icons{
  display:flex;
  align-items:center;
  gap:12px;
}

.main-footer h4{ margin:0 0 8px; } /* tidy heading spacing */
/* Put the CTA after "تابعنا" (last on the left) */

/* === Footer: symmetric layout + even spacing === */









.social-icons{ display: flex; gap: 12px; justify-content: center; }


.social-icons{ display:flex; gap:12px; justify-content:center; }



/* --- Footer logo: size it normally (no transform) and reserve space --- */
.main-footer .footer-brand{
  flex: 0 0 clamp(180px, 22vw, 280px);  /* reserves width so it won't overlap */
  display: flex;
  align-items: center;
  justify-content: flex-end;            /* right edge in RTL */
}

@media (max-width: 900px){
  .main-footer .footer-brand{ flex-basis: auto; }
}

/* === FOOTER — single source of truth === */
.main-footer .footer-content{
  max-width:1200px;
  margin-inline:auto;
  padding:0px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;      /* left zone vs brand */
  column-gap:clamp(48px,6vw,140px);
}

/* Brand/logo area on the far side (RTL right / LTR left) */
.footer-brand{
  flex:0 0 clamp(220px, 26vw, 340px); /* reserves width so logo never overlaps */
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
html[dir="ltr"] .footer-brand{ justify-content:flex-start; }

/* Big readable logo — no transform */
.main-footer .footer-logo-img{
     /* adjust this to taste */
  width:auto;
  display:block;
  transform:none !important;
}

/* Left side: Explore | Follow Us | CTA */
.main-footer .footer-links{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:space-between;      /* even space between the 3 groups */
  gap:32px;
}
.main-footer .footer-links > *{
  flex:1 1 0;
  min-width:200px;
  text-align:center;
}
.main-footer .footer-links > div ul{
  display:flex; gap:14px; margin:0; padding:0; list-style:none; justify-content:center;
}
.social-icons{ display:flex; gap:12px; justify-content:center; }

/* CTA stays last and centered like the others */
.footer-inline-cta{
  order:3;
  margin-inline:0 !important;
  align-items:center;
}

/* Mobile stack */
@media (max-width:900px){
  .main-footer .footer-content{ flex-direction:column; align-items:stretch; row-gap:18px; }
  .main-footer .footer-links{ flex-wrap:wrap; row-gap:14px; }
  .main-footer .footer-links > *{ flex-basis:100%; min-width:auto; }
  .footer-brand{ flex-basis:auto; justify-content:center; }
}


/* LTR anchoring (like nav) */
html[dir="ltr"] .main-footer .footer-logo-img{
  transform-origin: left center;
}

/* Give the logo enough room so it won't crowd other items */
.footer-brand{
  flex-basis: clamp(320px, 42vw, 700px);
}
/* Footer logo: match nav visual size WITHOUT overlap */
.main-footer .footer-logo-img{
  /* nav is 40px * 5.8 = 232px visual height */
  height: 232px;                 /* exact same visual size as nav */
  width: auto;
  transform: none !important;    /* important: no scaling */
}

/* Let the brand take its natural width so flex reserves space */
.footer-brand{
  flex: 0 0 auto;
}

/* Responsive downsizing so it doesn’t dominate on small screens */
@media (max-width: 1200px){ .main-footer .footer-logo-img{ height: 200px; } }
@media (max-width: 900px) { .main-footer .footer-logo-img{ height: 140px; } }
@media (max-width: 600px) { .main-footer .footer-logo-img{ height: 90px;  } }


/* scale like the nav, but don't change layout height */
.main-footer .footer-logo-img{
  height:40px;                     /* base like nav */
  width:auto;
  transform:scale(5.8);            /* same visual size as nav */
  transform-origin:right center;   /* LTR: left center */
}

html[dir="ltr"] .main-footer .footer-logo-img{ transform-origin:left center; }
/* Footer logo — single source of truth */
.main-footer .footer-logo-img{
  height: clamp(50px, 3vw, 80px);
  width: auto;
  transform: none !important;          /* ensure no scaling tricks */
}

/* Reserve reasonable space for the brand so it doesn't crowd links */
.footer-brand{
  flex: 0 0 clamp(220px, 26vw, 340px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
html[dir="ltr"] .footer-brand{ justify-content: flex-start; }

/* ===== HOW WORKS — Vertical Timeline (final with spacing) ===== */
.how-works-section{background:#fff;padding:56px 0 44px}
.how-works-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.how-works-title{font:800 2.05rem/1.2 "Plus Jakarta Sans",system-ui;letter-spacing:.02em;color:#2a2416;margin:0 0 20px;text-align:center}

/* list container + vertical line */
.how-works-list{
  list-style:none;margin:0;padding:4px 0;position:relative;counter-reset:step;
  max-width:840px;margin-inline:auto;
}
.how-works-list::before{
  content:"";position:absolute;inset-block:10px 10px;inset-inline-start:29px;
  width:2px;background:linear-gradient(#e8d6a9,#d8bc72);opacity:.55;border-radius:2px;
}

/* each step card */
.how-works-list > li{
  position:relative;counter-increment:step;
  background:#fff;border:1px solid #eee6cf;border-radius:16px;
  padding:16px 18px; padding-inline-start:78px;
  box-shadow:0 6px 20px rgba(202,161,97,.08);
  color:#27231a;font-weight:600;font-size:1.06rem;line-height:1.6;
}
.how-works-list > li + li{ margin-block-start:20px; } /* more space between steps */

/* numbered badge */
.how-works-list > li::before{
  content:counter(step);
  position:absolute; inset-block-start:50%; inset-inline-start:12px; transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:800;font-size:1rem;color:#2d2514;
  background:linear-gradient(135deg,#f8efd9,#edd3a0);
  border:3px solid #caa161; box-shadow:0 4px 12px rgba(202,161,97,.22);
}

/* hover/focus */
.how-works-list > li:hover{border-color:#e8d6a9;box-shadow:0 10px 26px rgba(202,161,97,.18)}
.how-works-list > li:focus-within{outline:2px solid #caa16133;outline-offset:3px}

/* title spacing: first bold line acts like a heading */
.how-works-list li :is(strong,b):first-of-type{
  display:block;
  margin-block-end:14px !important;
  line-height:1.35;
}

/* bullet lists — spacing above/below + between items */
.how-works-list li :is(ul,ol){
  margin-block:12px 16px !important;     /* gap above & below the list */
  padding-inline-start:1.6em !important;  /* proper indent (RTL flips) */
  list-style-position:outside !important;
}
.how-works-list li :is(ul,ol) > li{
  line-height:1.85;                        /* comfy multi-line bullets */
}
.how-works-list li :is(ul,ol) > li + li{
  margin-block-start:12px !important;      /* space between bullets */
}
/* optional: slightly larger bullet dot */
.how-works-list li :is(ul,ol) > li::marker{ font-size:1.12em; }

/* old decorative dot off */
.how-works-dot{display:none !important}

/* note under the list */
.how-works-note{
  max-width:820px;margin:18px auto 0;text-align:center;
  color:#5a523d;font:500 1.02rem/1.65 system-ui
}

/* mobile */
@media (max-width:600px){
  .how-works-title{font-size:1.3rem}
  .how-works-list > li{padding-inline-start:72px}
  .how-works-list > li::before{width:38px;height:38px;font-size:.95rem}
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  .how-works-list > li{transition:none}
}

/* spacing between the bullet sentences inside how-works steps */
.how-works-list > li [data-i18n^="howWorksStep"] br{
  display:block;
  margin-bottom:12px;   /* tweak to taste */
}
/* (optional) a bit more line height for each sentence */
.how-works-list > li [data-i18n^="howWorksStep"]{ line-height:1.8; }
/* Treat newlines as breaks + give each line comfy height */
.how-works-list [data-i18n^="howWorksStep"]{
  white-space: pre-line;   /* turns \n into line breaks */
  line-height: 1.9;        /* vertical breathing room */
}

/* If your JSON uses <br>, add gap under each line */
.how-works-list [data-i18n^="howWorksStep"] br{
  display: block;
  margin-bottom: 12px;
}

/* If we auto-convert to a real <ul>, space those bullets too */
.how-works-list .hw-bullets{
  margin: 10px 0 2px;
  padding-inline-start: 1.2em;     /* flips in RTL */
  list-style: disc outside;
}
.how-works-list .hw-bullets li + li{ margin-top: 10px; }
/* === Why intro band === */
.why-intro{
  background: linear-gradient(180deg,#fff8e6 0%,#ffffff 100%);
  border:1px solid #f0e6cf;
  border-radius:22px;
  padding:22px 22px 18px;
  box-shadow:0 10px 34px rgba(221,193,110,.10);
  margin:0 0 28px;
}
.why-intro-eyebrow{
  margin:0 0 8px;
  font:800 1.05rem/1 "Plus Jakarta Sans",system-ui;
  color:#b08d3d;
}
.why-intro-lead{
  margin:0 0 14px;
  font:600 1.08rem/1.95 system-ui;
  color:#392f18;
}
.why-intro-subtitle{
  margin:6px 0 8px;
  font:800 1.05rem/1 "Plus Jakarta Sans",system-ui;
  color:#2e2615;
}

/* bullets */
.why-intro-list{
  list-style:none; margin:0; padding:0;
}
.why-intro-list li{
  position:relative;
  padding-block:6px;
  padding-inline-start:28px;              /* RTL/LTR friendly */
  line-height:1.9; font-weight:600; color:#463c21;
}
.why-intro-list li::before{
  content:"•";
  position:absolute; inset-inline-start:0; inset-block-start:.35em;
  font-size:1.25rem; line-height:1; color:#d3b059;
}
.why-intro-list.nested{ margin-block:2px 4px; }
.why-intro-list.nested li{ padding-block:4px; }

/* two offer cards */
.offer-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px; margin-top:12px;
}
.offer-card{
  background:#fff; border:1px solid #ece1c7; border-radius:18px;
  padding:16px 18px;
  box-shadow:0 8px 22px rgba(221,193,110,.09);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.offer-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(221,193,110,.18);
  border-color:#e5c178;
}
.offer-badge{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:linear-gradient(94deg,#f6ecd8,#edd3a0);
  border:1px solid #e2c78a; color:#7c6424; font-weight:800; font-size:.85rem;
  margin-bottom:8px;
}
.offer-card h5{ margin:0 0 6px; font:700 1.08rem/1.4 system-ui; color:#222; }
.offer-card p{ margin:0 0 6px; color:#564b32; line-height:1.75; }
.offer-note{ font-style:italic; opacity:.9; }

/* responsive */
@media (max-width: 900px){ .offer-cards{ grid-template-columns:1fr; } }

/* center the lead paragraph and the "what you'll get" subtitle */
.why-intro-lead,
.why-intro-subtitle{
  text-align: center !important;
  max-width: 980px;      /* optional: keeps line length nice */
  margin-inline: auto;   /* centers the block itself */
}
/* Title: center + bigger + nice spacing */
.why-title{
  display:block;                         /* turn span into a block so it can center */
  text-align:center !important;
  font: 800 clamp(1.8rem, 3.4vw, 2.6rem)/1.2 "Plus Jakarta Sans", system-ui;
  color:#2a2416;
  margin: 4px auto 14px;
  letter-spacing:.01em;
}

/* optional: classy gold underline */
.why-title::after{
  content:"";
  display:block;
  width:72px; height:3px;
  margin:10px auto 0;
  background:linear-gradient(90deg,#d8bc72,#caa161);
  border-radius:2px;
}
/* Header above the four cards */
.why-cards-header{
  text-align:center;
  max-width: 980px;
  margin: 8px auto 18px;
}
.why-cards-title{
  margin: 0 0 6px;
  font: 800 clamp(1.4rem, 2.6vw, 1.8rem)/1.35 "Plus Jakarta Sans", system-ui;
  color:#2a2416;
  letter-spacing:.01em;
}
.why-cards-title::after{
  content:"";
  display:block;
  width:66px; height:3px;
  margin:10px auto 0;
  background:linear-gradient(90deg,#d8bc72,#caa161);
  border-radius:2px;
}
.why-cards-subtitle{
  margin: 10px 0 0;
  font: 700 clamp(1.05rem, 2.1vw, 1.25rem)/1.7 system-ui;
  color:#574a2b;
  opacity:.95;
}
/* === Hero Arabic info card === */
.hero-info-col{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex:1 0 0;
  padding-right:2vw;
  min-width:320px;
}
.hero-info-card{
  background:linear-gradient(180deg,#fff8e6 0%,#ffffff 55%,#fffaf0 100%);
  border:1.5px solid #f0e6cf;
  border-radius:22px;
  box-shadow:0 10px 34px rgba(221,193,110,.12);
  padding:18px 20px;
  max-width:520px;
}
.hero-info-title{
  margin:6px 0 10px;
  font:800 1.35rem/1.35 "Plus Jakarta Sans",system-ui;
  color:#2a2416;
  text-align:center;
  letter-spacing:.01em;
}
.hero-info-title::after{
  content:""; display:block; width:66px; height:3px; margin:10px auto 0;
  background:linear-gradient(90deg,#d8bc72,#caa161); border-radius:2px;
}
.hero-info-content{
  font:600 .99rem/1.95 system-ui;
  color:#392f18;
  max-height:56vh;      /* scroll if text is long */
  overflow:auto;
  padding-inline:4px;
}
.hero-info-content p{ margin:0 0 10px; }
.hero-info-content p:last-child{ margin-bottom:0; }

/* Mobile: stack nicely */
@media (max-width: 900px){
  .hero-info-col{
    justify-content:center; align-items:center; min-width:0; padding:0; width:100%;
  }
  .hero-info-card{ max-width:680px; width:100%; }
}
@media (max-width: 600px){
  .hero-info-content{ max-height:none; }
}
/* ========= WHAT IS MOSTASHARK (clean band, no card) ========= */
.what-is-Mostashark{
  background:#fbf3e1;                                /* soft beige band */
  padding:clamp(56px, 7vw, 96px) 0;                   /* responsive vertical space */
}

.what-is-Mostashark .what-inner{
  max-width:1100px;
  margin-inline:auto;
  padding-inline:clamp(16px, 4vw, 28px);
  text-align:center;
}

/* Title */
.what-is-Mostashark .what-title{
  color:#2a2416;
  font-weight:800;
  font-size:clamp(28px, 3.2vw, 42px);
  line-height:1.25;
  margin:0 0 18px;
  text-wrap:balance;                                  /* nicer line breaks on wide screens */
  display:inline-block;
}
.what-is-Mostashark .what-title::after{
  content:"";
  display:block;
  width:clamp(72px, 12vw, 120px);
  height:3px;
  margin:12px auto 0;
  background:linear-gradient(#e8d6a9,#d4b165);        /* gold underline */
  border-radius:3px;
}

/* Paragraphs */
.what-is-Mostashark .what-description{
  max-width:min(92vw, 900px);                          /* readable measure */
  margin-inline:auto;
  color:#2a2416;
  font-size:clamp(15px, 1.05vw, 18px);
  line-height:2.05;
}
.what-is-Mostashark .what-description p{
  margin:0 0 16px;                                    /* space between paragraphs */
}
.what-is-Mostashark .what-description p:first-child{
  font-weight:600;                                    /* slightly emphasized opener */
}
.what-is-Mostashark .what-description p:last-child{
  margin-bottom:0;
}

/* Optional tiny polish */
.what-is-Mostashark .what-description strong{ font-weight:800; }
html[dir="rtl"] .what-is-Mostashark .what-inner{ text-align:center; } /* keep centered in RTL */
/* Layout rules for hero columns */
.hero-inner { display:flex; align-items:center; gap:60px; }

/* Default stacking on mobile */
@media (max-width: 900px){
  .hero-inner { flex-direction: column; text-align:center; }
  .hero-center-col { display:flex; flex-direction:column; gap:16px; align-items:center; }
}

/* Desktop: control sides per language */
/* In Arabic: keep block on the right, but center only the H1 text */
@media (min-width: 901px){
  html[dir="rtl"] .hero-section{ direction: rtl; }

  /* eyebrow + paragraph right aligned */
  html[dir="rtl"] .hero-center-col h2,
  html[dir="rtl"] .hero-center-col p{
    text-align: right;
  }

  /* center the big sentence lines */
  html[dir="rtl"] .hero-center-col h1{
    width: 100%;          /* let text-align work */
    align-self: stretch;  /* fill row in the flex column */
    text-align: center;   /* <— center the heading only */
    line-height: 1.15;
  }
}


/* Buttons side-by-side */
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;       /* center on mobile */
}
@media (min-width:901px){
  .hero-actions{ justify-content:flex-start; }
  html[dir="rtl"] .hero-actions{ justify-content:flex-end; }
}

/* Outline style for the new CTA */
.hero-button.hero-button--outline{
  background:transparent;
  color:#c79d50;
  border:2px solid #d6ae6d;
  padding:16px 28px;
  box-shadow:none;
}
.hero-button.hero-button--outline:hover{
  background:#fff7e2;
  color:#1f1b15;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(215,182,100,.16);
}
/* Button core: true visual centering */
.hero-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

/* If you use an outline/secondary style */
.hero-button--outline{
  background: transparent;
  color: #c79d50;
  border: 2px solid #d6ae6d;
}
.hero-button--outline:hover{
  background: #fff7e2;
  color: #1f1b15;
}

/* Button row alignment (already added earlier—repeat here for clarity) */
.hero-actions{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
@media (min-width:901px){
  .hero-actions{ justify-content:flex-start; }
  html[dir="rtl"] .hero-actions{ justify-content:flex-end; }
}
/* Swap sides on desktop:
   - EN (LTR): text LEFT, photo RIGHT
   - AR (RTL): text RIGHT, photo LEFT  */
   @media (min-width: 901px){
  .hero-center-col { order: 0; }   /* text block first (start edge) */
  .hero-photo-col  { order: 1; }   /* photo second (end edge) */

  /* clean spacing so gap sits between text & photo */
  .hero-photo-col { padding: 0; }                /* reset global padding */
  html[dir="ltr"] .hero-photo-col { padding-left: 2vw; }  /* space on the left of photo */
  html[dir="rtl"] .hero-photo-col { padding-right: 2vw; } /* space on the right of photo */
}
/* === Hero credentials: tidy spacing + RTL right alignment === */
.hero-credentials{
  width:100%;
  margin: 10px 0 18px;          /* space above and below the list */
}
.cred-grid{
  display:flex;
  flex-direction:column;
  gap:10px;                      /* space between the five items */
}
/* rows should top-align so two-line items line up */
.cred-card{
  display:flex;
  align-items:flex-start;   /* was center */
  gap:10px;
  line-height:1.95;
  font-weight:600;
  color:#2e2615;
  font-size:0.98rem;
}

.cred-check svg{
  width:18px; height:18px;
  color:#c59e47;                 /* gold check */
  flex:0 0 18px;
}

/* Arabic: right-align the whole column (keeps English left by default) */
html[dir="rtl"] .cred-grid{
  align-items:flex-end;          /* push items to the right */
  text-align:right;
}

/* Add a bit more gap before the buttons row */
.hero-actions{ margin-top:14px; }

/* wrapper around the check icon */
.cred-check{
  display:inline-flex;
  width:18px; height:18px;
  flex:0 0 18px;
  align-items:center; justify-content:center;
  margin-inline-start:8px;       /* logical spacing; RTL-safe */
}
.cred-check svg{
  width:18px; height:18px;
  fill:#c59e47;                  /* gold (use fill for SVGs) */
}
/* keep your existing .hero-actions margin; add RTL alignment */
html[dir="rtl"] .hero-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:18px;  /* a touch more breathing room */
}
/* === What Is — Slider look === */
.what-is-Mostashark{ background:linear-gradient(120deg,#fff9ec 0%,#fdf5e6 100%); padding:74px 16px 80px; border-bottom:1.5px solid #f1e7ce; }
.what-is-Mostashark .what-inner{ max-width:1100px; margin:auto; text-align:center; }
.what-is-Mostashark .what-title{ font:800 clamp(28px,3.2vw,42px)/1.25 "Plus Jakarta Sans",system-ui; color:#2a2416; margin:0 0 16px; }
.what-is-Mostashark .what-title::after{ content:""; display:block; width:clamp(72px,12vw,120px); height:3px; margin:12px auto 0;
  background:linear-gradient(90deg,#e8d6a9,#d4b165); border-radius:3px; }

.what-intro{ max-width:min(92vw,900px); margin:0 auto 18px; color:#2a2416; font:600 clamp(15px,1.05vw,18px)/2.0 system-ui; }

/* Swiper container */
.what-slider{ position:relative; max-width:1100px; margin:18px auto 0; padding:6px 54px; } /* side padding for arrows */

/* Card layout */
.slide-card{
  display:grid; grid-template-columns:1.1fr 1fr; gap:22px;
  background:linear-gradient(180deg,#fff,#fffaf0);
  border:1.5px solid #ece1c7; border-radius:22px; box-shadow:0 10px 34px rgba(221,193,110,.10);
  padding:16px; text-align:start; align-items:center;
}
html[dir="rtl"] .slide-card{ direction: rtl; }  /* let CSS logical props flip neatly */

.slide-photo{ margin:0; }
.slide-photo img{
  display:block; width:100%; height:360px; object-fit:cover; border-radius:18px;
  box-shadow:0 8px 22px rgba(221,193,110,.12);
}
.slide-text{ color:#2a2416; }
.slide-text .slide-copy{ font:600 1.08rem/1.95 system-ui; margin:0; }

/* Navigation: centered round arrows */
#what-slider .swiper-button-prev,
#what-slider .swiper-button-next{
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1.5px solid #e2c78a; box-shadow:0 8px 22px rgba(221,193,110,.16);
  top:50%; transform:translateY(-50%);
}
#what-slider .swiper-button-prev:after,
#what-slider .swiper-button-next:after{ font-size:18px; color:#c59e47; }

/* Pagination dots */
#what-slider .swiper-pagination{ bottom:-8px !important; }
#what-slider .swiper-pagination-bullet{ background:#d6ae6d; opacity:.35; }
#what-slider .swiper-pagination-bullet-active{ opacity:1; }

/* Mobile stack */
@media (max-width: 900px){
  .what-slider{ padding: 6px 18px; }
  .slide-card{ grid-template-columns:1fr; gap:14px; }
  .slide-photo img{ height:240px; }
}

/* Respect RTL: put image on the other side on wide screens for Arabic */
@media (min-width: 901px){
  html[dir="rtl"] .slide-card{ grid-template-columns:1fr 1.1fr; } /* text then image visually flips */
}
/* Slider controls must not be clipped */
.what-is-Mostashark { overflow: visible !important; }
.what-slider { overflow: visible; }
#what-slider .swiper-button-prev,
#what-slider .swiper-button-next { z-index: 10; }

/* tiny typo you have */
.gradient-text {
  background: linear-gradient(90deg, #c9a74c 20%, #e5c178 85%);
}
/* global: don’t allow horizontal overflow to create a rightward jump */
html, body { overflow-x: clip; }  /* or: overflow-x: hidden; */

/* header logo wrapper: hides the visual scale overflow so it can't widen the page */
.logo-text { overflow: visible; }
/* CTA under slider dots */
.slider-cta{
  display:flex;
  justify-content:center;
  margin-top: 12px;              /* gap below the dots */
}

.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.25rem;
  font: 700 1rem/1.2 "Plus Jakarta Sans", system-ui;
  border-radius: 14px;
  border: 1px solid #e5d6a9;
  background: linear-gradient(180deg, #f7e9c3, #e9d39c);
  box-shadow: 0 6px 16px rgba(214, 179, 102, .25);
  color:#473b1d;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cta:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn-cta:active{ transform: translateY(0); box-shadow: 0 3px 10px rgba(214,179,102,.25); }
.btn-cta:focus{ outline:2px solid #d8bc72; outline-offset:3px; }
/* Make the pagination take normal flow, centered, under the slide */
#what-slider .swiper-pagination,
#what-slider.swiper-horizontal > .swiper-pagination-bullets {
  position: static !important;   /* override Swiper's absolute */
  margin-top: 10px;
  text-align: center;
}

/* Optional: tighten the spacing between dots and the CTA */
#what-cta.slider-cta { margin-top: 10px; }
/* === NAVBAR OVERLAP FIX === */
.main-nav{
  position: sticky;        /* stays put; not required for the fix but nice */
  top: 0;
  background: #fff;
  z-index: 1000;
}


/* 1) Stop the huge visual width from the logo */
.logo-text{ flex: 0 0 auto; overflow: hidden; }
.logo-img{
  height:40px;
  width: auto;
  transform: none !important;   /* <— remove the 5.8x scale */
  transform-origin: center;
}

/* 2) Let the menu use remaining space and wrap if needed */
.nav-menu{
  margin-inline-start: auto;    /* push menu to edge away from the logo */
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;               /* <— prevents overlap when tight */
  min-width: 0;                  /* flex fix so it can actually shrink */
}
.nav-menu .nav-btn,
.nav-menu .custom-dropdown{ white-space: nowrap; }  /* no ugly line breaks */

/* Small desktop / tight widths: give rows some breathing room */
@media (max-width: 1200px){
  .nav-menu{ row-gap: 8px; }
}

/* Safety: no horizontal scroll caused by header */
html, body{ overflow-x: hidden; }
/* Bigger navbar logo (override safely) */


/* let it breathe + avoid clipping */
.main-nav .logo-text{
  overflow: visible;                /* we no longer need hidden */
  margin-inline-end:0;
}

/* keep menu tidy when logo grows */
.nav-menu{ gap: 12px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 900px){
  .main-nav .logo-img{ height: 40px !important; }  /* smaller on phones */
}
/* Navbar logo — make it big */
.main-nav .nav-logo{
  display:block;
  width:auto;
}

@media (max-width:900px){
  .main-nav .nav-logo{ height: 56px !important; }
}
/* NAVBAR LOGO — final size */
.main-nav .logo-text{ overflow: visible !important; flex: 0 0 auto; }

/* --- Hero: video block --- */
.hero-video-wrap{
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 16px;
  margin-bottom: 50px;
}
.hero-video{
  width: 100%;
  aspect-ratio: 16 / 9;     /* responsive 16:9 frame */
  border-radius: 18px;
  background: #000;
  border: 1.5px solid #f0e6cf;
  box-shadow: 0 10px 34px rgba(221,193,110,.12);
}


.nav-inner {
  max-width: 1200px;
  margin: 10px auto;
  padding: 8px 40px;   /* same space left & right */
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}
/* RTL flip */
html[dir="rtl"] .nav-menu {
  margin-left: 0;
  margin-right: auto;
}
/* English (LTR) – add space between logo (left) and first menu item */
html[dir="ltr"] .nav-logo,
html[dir="ltr"] .logo-text,
html[dir="ltr"] .nav-brand {
  margin-right: 24px;   /* adjust px as needed */
}

/* Arabic (RTL) – add space between logo (right) and first menu item */
html[dir="rtl"] .nav-logo,
html[dir="rtl"] .logo-text,
html[dir="rtl"] .nav-brand {
  margin-left: 24px;    /* adjust px as needed */
}
html[dir="ltr"] .nav-logo {
  margin-left: -120px;   /* adjust until visually equal */
}

html[dir="rtl"] .nav-logo {
  margin-right: -100px;  /* for Arabic mode */
}
/* === Bigger navbar logo === */
.main-nav .nav-logo {
  height: 55px !important;  /* adjust as needed */
  width: auto;
}


/* 2) Gap goes after the icon (logical “end” side) in both LTR & RTL */
.hero-credentials .cred-check{
  margin-inline-start: 0;
  margin-inline-end: 8px;         /* becomes RIGHT in LTR, LEFT in RTL */
}
/* Step 2: add space after each line coming from <br> in i18n */
.hw-lines br{
  display:block;
  margin-top:10px;   /* adjust to taste */
}
/* ===== Precision Band ===== */
.precision-band{
  background:#0f0f0f; color:#fff; padding:64px 0; position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.precision-inner{ max-width:1100px; margin:0 auto; padding:0 20px; text-align:center; }
.precision-title{
  margin:0 0 16px; font-weight:600; line-height:1.7;
  font-size:clamp(15px, 2vw + 10px, 30px);
}
.precision-subtitle{
  margin:0 auto 26px; max-width:900px; opacity:.92; line-height:1.9;
  font-size:clamp(14px, .6vw + 12px, 18px);
}
.precision-cta{
  display:inline-block; padding:12px 28px; border-radius:999px;
  background:#ffffff; color:#000000; text-decoration:none; font-weight:700;
}
.precision-cta:hover{ filter:brightness(1.12); }
 /* How Works: subtitle under the main title */
.how-works-subtitle{
  text-align:center;
  margin: 8px auto 28px;         /* tight space under the title, extra space before cards */
  max-width: 920px;              /* readable line length */
  line-height: 1.9;
  font-size: clamp(15px, 1rem + .25vw, 18px);
  color: #6b7280;                /* elegant muted gray */
}

/* Optional: if your site uses a gold brand color, give it a soft accent bar */
.how-works-subtitle::before{
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin: 0 auto 14px;
  border-radius: 3px;
  background: #d4af37;          /* gold accent; tweak to your brand */
}

/* Keep it centered in both RTL/LTR */
html[dir="rtl"] .how-works-subtitle,
html[dir="ltr"] .how-works-subtitle{
  text-align:center;
}

/* ===== Unified pill look in HOW WORKS ===== */
:root{
  --pill-bg:#f7e9c3;
  --pill-border:#e5c178;
  --pill-shadow:0 8px 22px rgba(214,179,102,.18);
  --pill-radius:12px;
}

/* Any bullet UL inside a step card becomes a grid of pills */
#how-works .how-works-card ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

/* Every immediate LI in those lists gets the same pill style */
#how-works .how-works-card ul > li{
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  border-radius:var(--pill-radius);
  padding:12px 14px;
  box-shadow:var(--pill-shadow);
  font-weight:600;
  line-height:1.8;
  color:#392f18;
}

/* Intro paragraph stays plain text (no box) */
#how-works .how-works-card .how-works-desc{
  margin:6px 0 14px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
/* RTL: right-align the whole step card content */
html[dir="rtl"] .how-works-list{
  direction: rtl;          /* lets logical props flip */
  text-align: right !important;
}

html[dir="rtl"] .how-works-list > li{
  text-align: right !important;
}

/* headings, intro line, and the beige pills */
html[dir="rtl"] .how-works-h3,
html[dir="rtl"] .how-works-desc,
html[dir="rtl"] .hw-rect-bullets > li{
  text-align: right !important;
}
/* Stop drawing the old LI badge */
.how-works-list > li::before { display: none !important; }

/* Make BOTH title types the host for the badge, without extra padding */
.how-works-list li .how-works-h3,
.how-works-list li :is(strong,b):first-of-type{
  position: relative;
  display: block;
  padding-inline-start: 0 !important; /* remove the extra space you saw */
}

/* Draw the numbered circle on the title itself (works for <h3> and <strong>) */
.how-works-list li .how-works-h3::before,
.how-works-list li :is(strong,b):first-of-type::before{
  content: counter(step);
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inset-inline-start: -56px; /* tighten/loosen spacing: try -48px or -64px to taste */
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; color: #2d2514;
  background: linear-gradient(135deg,#f8efd9,#edd3a0);
  border: 3px solid #caa161; box-shadow: 0 4px 12px rgba(202,161,97,.22);
}
/* === One rule to unify all section titles === */
:root{
  --section-title-size: clamp(1.8rem, 3vw, 2.4rem);
  --section-title-weight: 700;
}

.section-title{
  font-size: var(--section-title-size) !important;
  font-weight: var(--section-title-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  text-transform: none; /* we’ll optically control uppercase below */
}
.why-cards-title .cats { white-space: nowrap; }
/* --- FIX: persistent navbar --- */
.main-nav{
  position: fixed;      /* was sticky */
  top: 0; left: 0; right: 0;
  background: #fff;
  z-index: 3000;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

/* offset page content by real navbar height (fallback = 84px) */
:root{ --nav-h: 84px; }          /* fallback */
body{ padding-top: var(--nav-h); }
/* --- FIX: mobile swipeable nav --- */
@media (max-width: 1024px){
  .nav-inner{
    overflow-x: auto;                 /* enables swipe/scroll */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .nav-inner::-webkit-scrollbar{ display: none; }

  .nav-menu{
    flex-wrap: nowrap;                /* one row */
    white-space: nowrap;
    gap: 16px;
  }
}
/* --- FIX: footer fully visible on phones --- */
@media (max-width: 900px){
  .main-footer .footer-content{
    flex-direction: column;
    align-items: stretch;
    row-gap: 16px;
  }
  .main-footer .footer-links{
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .main-footer .footer-links > *{
    flex-basis: 100%;
    min-width: 0;
  }
  .footer-brand{
    order: 3;                      /* logo last */
    justify-content: center;
  }
  .main-footer{ overflow: visible; }
}
/* place near your slider CSS */
html[dir="rtl"] #what-slider { direction: rtl; }
html[dir="ltr"] #what-slider { direction: ltr; }
/* keep dropdown above everything */
.dropdown-menu { z-index: 9999; }
/* Phones: stack footer blocks vertically and make sure CTA is visible */
@media (max-width: 600px){
  .main-footer .footer-content{
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 16px;
  }
  .main-footer .footer-links{
    display: flex;
    flex-direction: column !important;
    align-items: center;
    gap: 12px;
  }
  .main-footer .footer-links > *{
    flex: 0 0 auto !important;
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  .main-footer{
    padding-bottom: max(20px, env(safe-area-inset-bottom)); /* iPhone bottom bar safety */
  }
}
/* ===== MOBILE FOOTER: always show the Contact button ===== */
@media (max-width: 470px){
  /* stack everything cleanly */
  .main-footer .footer-content{
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* make the big logo smaller so it doesn't push content off-screen */
  .main-footer .footer-logo-img{
    height: 40px !important; /* was tall; shrink on phones */
    width: auto !important;
  }

  /* the 3 groups (Explore / Follow Us / CTA) stack vertically */
  .main-footer .footer-links{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
    width: 100% !important;
    justify-items: center;
  }
  .main-footer .footer-links > *{
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* ensure CTA block is visible and centered */
  .footer-inline-cta{
    display: flex !important;
    justify-content: center !important;
    order: 3 !important; /* keep it last; change to 0 to make it first */
  }
  .footer-contact-btn{
    display: block !important;
    width: min(92%, 340px) !important;
    margin: 8px auto 0 !important;
    padding: 12px 18px !important;
  }

  /* iPhone bottom bar safety so nothing is hidden */
  .main-footer{
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
  }
}
/* Nav spacing insurance in RTL (Arabic) */
html[dir="rtl"] .nav-menu .nav-btn,
html[dir="rtl"] .nav-menu .custom-dropdown{
  margin-inline: 8px;      /* equal space on both sides */
}


/* NAV: إجبار سطر واحد وتصغير كل شيء قليلاً */
.nav-inner{ padding-inline:16px !important; }

.nav-menu{
  flex-wrap: nowrap !important;   /* لا التفاف */
  white-space: nowrap !important;
  gap: 8px !important;            /* كان كبير */
  min-width: 0 !important;
}

/* أزرار الروابط */
.nav-menu a,
.nav-menu .nav-btn{
  font-size: .92rem !important;
  padding: 6px 10px !important;
  line-height: 1.1 !important;
  text-decoration: none !important;          /* لا خط تحتي */
}
.nav-menu a:hover,
.nav-menu a:focus{ text-decoration: none !important; }

/* زر اللغة أصغر */
.nav-menu .dropdown-toggle{
  height: 28px !important;
  padding: 0 10px !important;
  min-width: 72px !important;
  font-size: .92rem !important;
}

/* تخلّص من أي هامش سلبي يقلّل المساحة في RTL */
html[dir="rtl"] .nav-logo{ margin-right: 0 !important; }
/* ويمكن أيضاً تصغير الشعار قليلاً عند الحاجة */
.nav-logo img{ max-width: 120px; }
/* Keep dropdown the same width as its toggle when inside the navbar */
.nav-menu .custom-dropdown { position: relative; }
.nav-menu .custom-dropdown .dropdown-menu { min-width: 100%; }
/* Keep popup width exact (no extra pixels from padding/borders) */
.dropdown-menu { box-sizing: border-box; }