/* Add custom CSS styles below */ 

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@400;500;600&family=Playfair+Display&display=swap');

/* -----------------------------
   1. FONT — apply everywhere
------------------------------ */
html[lang="ar"] body,
html[lang="ar"] section,
html[lang="ar"] div,
html[lang="ar"] p,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] a,
html[lang="ar"] span,
html[lang="ar"] label {
  font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif !important;
}

html[lang="en"] body,
html[lang="en"] section,
html[lang="en"] div,
html[lang="en"] p,
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] a,
html[lang="en"] span,
html[lang="en"] label {
  font-family: 'IBM Plex Sans', 'IBM Plex Serif', 'Playfair Display', sans-serif !important;
}

/* -----------------------------
   2. BACKGROUND — only for regular sections
------------------------------ */
html[lang="ar"] section:not(.sticky-product-bar):not(.flex) {
  background: linear-gradient(to left, rgba(255,255,255,1) 40%, rgba(66,137,197,.7)),
              url('') no-repeat 100% 100% / auto 100%;
}

html[lang="en"] section:not(.sticky-product-bar):not(.flex) {
  background: linear-gradient(to right, rgba(255,255,255,1) 40%, rgba(66,137,197,.7)),
              url('') no-repeat 100% 100% / auto 100%;
}

img[alt="Store Logo"] {
  transform: scale(1.7);       /* enlarge 20% */
  transform-origin: center;   
}


/* When the page is Arabic: keep as is */
html:lang(ar) a[href="#mobile-menu"] > span.font-semibold.text-base {
  font-size: 1rem; /* normal Arabic display */
}

/* When the page is English: swap text */
html:lang(en) a[href="#mobile-menu"] > span.font-semibold.text-base {
  font-size: 0 !important; /* visually hide Arabic */
}

html:lang(en) a[href="#mobile-menu"] > span.font-semibold.text-base::before {
  content: "Main Menu";
  font-size: 1rem;          /* ~Tailwind text-base */
  font-weight: 600;         /* font-semibold */
  display: inline-flex;
  color: inherit;           /* respect hover/text colors */
}

/* Footer background */
footer.bg-\[var\(--bg-secondary\)\] {
  background-color: #1c3f59 !important;
  color: #ffffff !important; /* default text color */
}

/* Headings */
footer.bg-\[var\(--bg-secondary\)\] h2 {
  color: #ffffff !important;
}

/* Paragraphs (like "Certified On the Saudi Business Center") */
footer.bg-\[var\(--bg-secondary\)\] p {
  color: #ffffff !important;
}

/* Links */
footer.bg-\[var\(--bg-secondary\)\] a {
  color: #ffffff !important;
}

footer.bg-\[var\(--bg-secondary\)\] a:hover {
  color: #cccccc !important;
}

/* Icons and SVGs */
footer.bg-\[var\(--bg-secondary\)\] i,
footer.bg-\[var\(--bg-secondary\)\] svg,
footer.bg-\[var\(--bg-secondary\)\] path {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: #ffffff !important;
}

/* Copyright */
footer.bg-\[var\(--bg-secondary\)\] .copyright-text,
footer.bg-\[var\(--bg-secondary\)\] .copyright-text a {
  color: #ffffff !important;
}

footer h2.text-\[\#231f1e\] {
  margin-top: 0px;   
  margin-bottom: 10px;
}

footer .flex.w-full.flex-col.lg\:flex-row.lg\:justify-between.gap-4.items-center.md\:items-start {
  margin-top: 20px; /* adjust as needed */
}

.social-banner-content-title {
  margin-top: 0px;
  margin-bottom: 0px;
}

html:lang(ar) .divider.bg-\[var\(--bg-primary\)\] {
  background: linear-gradient(to left, rgba(255,255,255,1) 40%, rgba(66,137,197,.7)), 
              url('') no-repeat 100% 100% / auto 100% !important;
}

/* English */
html:lang(en) .divider.bg-\[var\(--bg-primary\)\] {
  background: linear-gradient(to right, rgba(255,255,255,1) 40%, rgba(66,137,197,.7)), 
              url('') no-repeat 100% 100% / auto 100% !important;
}

.main-links-style-2-slider-single {
    margin-bottom: 0px;
}

/* Mobile view */
@media (max-width: 768px) {
  img.main-links-style-3-slider-single-content-image {
    height: 450px;          /* reduce visible height on small screens */
    object-fit: cover;      /* crop instead of squeeze */
    object-position: center; /* crop around center */
  }
}

/* Mobile only (≤768px width) */
@media (max-width: 768px) {
  a.enhanced-products-slider-action-button[href="https://linktr.ee/smartcare_services"] {
    margin-top: 27px;  /* adjust as needed */
    display: inline-block; /* ensures the margin applies properly */
  }
}

/* Remove the gradient ONLY on product pages, ONLY for enhanced-products sliders */
body:has(form.product-form)
  section:has(.swiper-container[class*="enhanced-products-slider-"]) {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
}