/* =====================================================
   CLASSROLL GLOBAL ANTI-FLASH CSS V5
   Paste this at the VERY TOP of Custom CSS.
   It prevents Salla's original page text from flashing before
   the JavaScript-generated design is ready.
===================================================== */

html:not(.cr-page-ready-v5) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: block;
  width: 100vw;
  height: 100vh;
  background: #f7f8fa;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  animation: cr-antiflash-overlay-failsafe-v5 0.01s linear 5s forwards;
}

html:not(.cr-page-ready-v5) body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 3px solid rgba(212, 160, 23, 0.20);
  border-top-color: #d4a017;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  animation:
    cr-antiflash-spin-v5 0.72s linear infinite,
    cr-antiflash-spinner-failsafe-v5 0.01s linear 5s forwards;
}

html.cr-page-ready-v5 body::before,
html.cr-page-ready-v5 body::after {
  content: none;
  display: none;
}

@keyframes cr-antiflash-spin-v5 {
  to { transform: rotate(360deg); }
}

@keyframes cr-antiflash-overlay-failsafe-v5 {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes cr-antiflash-spinner-failsafe-v5 {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.cr-page-ready-v5) body::after {
    animation:
      cr-antiflash-spinner-failsafe-v5 0.01s linear 5s forwards;
  }
}

/* =====================================================
   CLASSROLL FINAL CSS
   Banner + products + feature sections use one fixed width
   Final feature image fixed to correct Google Drive image
===================================================== */

:root {
  --cr-gold: #d4a017;
  --cr-gold-deep: #b8860b;
  --cr-ink: #111827;
  --cr-navy: #17243a;
  --cr-muted: #6b7280;
  --cr-border: #e5e7eb;

  /* ONE WIDTH FOR BANNER + PRODUCTS + FEATURES */
  --cr-site-width: min(96vw, 1560px);
  --cr-banner-radius: 28px;
  --cr-products-gap: 22px;

  /* Bottom feature images */
  --cr-measure-bg: url("https://drive.google.com/thumbnail?id=1XdSbc5KTKSC-yqYc1aFOvvX9TV0GYytY&sz=w2000");
  --cr-final-bg: url("https://drive.google.com/thumbnail?id=1tgKDYeOSg49ztJ3wjSiGGTDWWTEdURWK&sz=w2000");
}

html {
  scroll-behavior: smooth !important;
}

html body * {
  box-sizing: border-box !important;
}

/* =====================================================
   OLD / DAMAGING CLASSES RESET
===================================================== */

html body .cr-salla-feature-hero {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: initial !important;
  padding: initial !important;
  border-radius: initial !important;
  overflow: visible !important;
}

html body .cr-source-menu-hidden,
html body .cr-source-menu-link-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* =====================================================
   SHARED WIDTH
===================================================== */

html body .cr-force-banner-box,
html body .cr-banner-width-sync,
html body .cr-product-align-section,
html body .cr-products-wide-shell,
html body #cr-classroll-experience .crx-wrap {
  width: var(--cr-site-width) !important;
  max-width: var(--cr-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =====================================================
   CUSTOM MAIN MENU
===================================================== */

html body .cr-main-menu-bar {
  width: 100% !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  direction: rtl !important;
  position: relative !important;
  z-index: 9990 !important;
  box-sizing: border-box !important;
}

html body .cr-main-menu-inner {
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: center !important;
  direction: rtl !important;
}

html body .cr-menu-item {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-width: 0 !important;
  position: static !important;
}

html body .cr-main-menu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 14px !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border-left: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  white-space: nowrap !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

html body .cr-main-menu-link:hover,
html body .cr-main-menu-link.cr-active {
  background: #fafafa !important;
  color: var(--cr-gold-deep) !important;
}

/* =====================================================
   MEGA MENU
===================================================== */

html body .cr-products-trigger {
  position: relative !important;
}

html body .cr-products-trigger::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 50% !important;
  width: 34px !important;
  height: 3px !important;
  background: var(--cr-gold) !important;
  border-radius: 999px !important;
  transform: translateX(50%) scaleX(0) !important;
  transition: transform 0.22s ease !important;
}

html body .cr-menu-item-products.cr-mega-open .cr-products-trigger::after {
  transform: translateX(50%) scaleX(1) !important;
}

html body .cr-products-mega {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border-top: 1px solid #eef0f3 !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12) !important;
  direction: rtl !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  z-index: 99999 !important;
}

html body .cr-menu-item-products.cr-mega-open .cr-products-mega {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

html body .cr-products-mega-inner {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  min-height: 330px !important;
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 34px !important;
  padding: 30px 38px !important;
  box-sizing: border-box !important;
}

html body .cr-products-mega-side {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-left: 1px solid #eef0f3 !important;
  padding-left: 26px !important;
}

html body .cr-products-mega-kicker {
  color: var(--cr-gold) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

html body .cr-products-mega-title {
  color: #111827 !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important;
}

html body .cr-products-mega-desc {
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  margin: 0 !important;
}

html body .cr-products-mega-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 20px !important;
  align-content: center !important;
}

html body .cr-products-mega-cat {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  color: #111827 !important;
  background: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, color 0.25s ease !important;
}

html body .cr-products-mega-cat:hover {
  background: #faf7ef !important;
  border-color: rgba(212, 160, 23, 0.34) !important;
  color: var(--cr-gold-deep) !important;
  transform: translateY(-2px) !important;
}

html body .cr-cat-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(212,160,23,0.25) !important;
  background: #faf7ef !important;
  color: var(--cr-gold) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

html body .cr-cat-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: inherit !important;
}

/* =====================================================
   FORCE BANNER WIDTH
   This prevents Salla from returning it to full width
===================================================== */

html body .cr-force-banner-box,
html body .cr-banner-width-sync {
  width: var(--cr-site-width) !important;
  max-width: var(--cr-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body .cr-force-banner-box > *,
html body .cr-banner-width-sync > *,
html body .cr-force-banner-box .container,
html body .cr-banner-width-sync .container,
html body .cr-force-banner-box .container-fluid,
html body .cr-banner-width-sync .container-fluid,
html body .cr-force-banner-box .s-container,
html body .cr-banner-width-sync .s-container,
html body .cr-force-banner-box [class*="container"],
html body .cr-banner-width-sync [class*="container"],
html body .cr-force-banner-box salla-slider,
html body .cr-banner-width-sync salla-slider,
html body .cr-force-banner-box .s-slider-block,
html body .cr-banner-width-sync .s-slider-block,
html body .cr-force-banner-box .s-slider-container,
html body .cr-banner-width-sync .s-slider-container,
html body .cr-force-banner-box .swiper,
html body .cr-banner-width-sync .swiper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html body .cr-force-banner-box img,
html body .cr-banner-width-sync img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

/* =====================================================
   PRODUCTS WIDTH / SHAPE
===================================================== */

html body .cr-product-align-section,
html body .cr-products-wide-shell {
  width: var(--cr-site-width) !important;
  max-width: var(--cr-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html body .cr-product-align-section > *,
html body .cr-products-wide-shell > *,
html body .cr-product-align-section .container,
html body .cr-products-wide-shell .container,
html body .cr-product-align-section .container-fluid,
html body .cr-products-wide-shell .container-fluid,
html body .cr-product-align-section .s-container,
html body .cr-products-wide-shell .s-container,
html body .cr-product-align-section [class*="container"],
html body .cr-products-wide-shell [class*="container"],
html body .cr-product-align-section salla-slider,
html body .cr-products-wide-shell salla-slider,
html body .cr-product-align-section .s-slider-block,
html body .cr-products-wide-shell .s-slider-block,
html body .cr-product-align-section .s-products-slider,
html body .cr-products-wide-shell .s-products-slider,
html body .cr-product-align-section .swiper,
html body .cr-products-wide-shell .swiper,
html body .cr-product-align-section .swiper-wrapper,
html body .cr-products-wide-shell .swiper-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html body .cr-product-align-section .swiper,
html body .cr-products-wide-shell .swiper {
  overflow: visible !important;
}

html body .cr-products-five-row .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

@media (min-width: 1200px) {
  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 80px) / 5) !important;
    min-width: calc((100% - 80px) / 5) !important;
    max-width: calc((100% - 80px) / 5) !important;
    flex: 0 0 calc((100% - 80px) / 5) !important;
  }
}

@media (max-width: 1199px) and (min-width: 901px) {
  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 54px) / 4) !important;
    min-width: calc((100% - 54px) / 4) !important;
    max-width: calc((100% - 54px) / 4) !important;
    flex: 0 0 calc((100% - 54px) / 4) !important;
  }
}

@media (max-width: 900px) and (min-width: 641px) {
  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 32px) / 3) !important;
    min-width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
    flex: 0 0 calc((100% - 32px) / 3) !important;
  }
}

@media (max-width: 640px) {
  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 14px) / 2) !important;
    min-width: calc((100% - 14px) / 2) !important;
    max-width: calc((100% - 14px) / 2) !important;
    flex: 0 0 calc((100% - 14px) / 2) !important;
  }
}

html body .cr-product-align-section img,
html body .cr-products-wide-shell img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

html body .cr-product-align-section salla-product-card,
html body .cr-product-align-section .s-product-card-entry,
html body .cr-product-align-section .product-entry,
html body .cr-products-wide-shell salla-product-card,
html body .cr-products-wide-shell .s-product-card-entry,
html body .cr-products-wide-shell .product-entry {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html body .cr-product-align-section salla-product-card:hover,
html body .cr-product-align-section .s-product-card-entry:hover,
html body .cr-product-align-section .product-entry:hover,
html body .cr-products-wide-shell salla-product-card:hover,
html body .cr-products-wide-shell .s-product-card-entry:hover,
html body .cr-products-wide-shell .product-entry:hover {
  transform: translateY(-3px) !important;
}

/* =====================================================
   FAVORITE WHITE LINE FIX
===================================================== */

html body salla-product-card .s-product-card-wishlist-btn-wrap,
html body .s-product-card-entry .s-product-card-wishlist-btn-wrap,
html body .product-entry .s-product-card-wishlist-btn-wrap,
html body salla-product-card .wishlist-button-wrap,
html body .s-product-card-entry .wishlist-button-wrap,
html body .product-entry .wishlist-button-wrap,
html body salla-product-card .s-product-card-overlay,
html body .s-product-card-entry .s-product-card-overlay,
html body .product-entry .s-product-card-overlay,
html body salla-product-card .s-product-card-content-top,
html body .s-product-card-entry .s-product-card-content-top,
html body .product-entry .s-product-card-content-top {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

html body salla-product-card .s-product-card-wishlist-btn-wrap::before,
html body salla-product-card .s-product-card-wishlist-btn-wrap::after,
html body .s-product-card-entry .s-product-card-wishlist-btn-wrap::before,
html body .s-product-card-entry .s-product-card-wishlist-btn-wrap::after,
html body .product-entry .s-product-card-wishlist-btn-wrap::before,
html body .product-entry .s-product-card-wishlist-btn-wrap::after {
  display: none !important;
  content: none !important;
}

/* =====================================================
   EXPERIENCE SECTION
===================================================== */

html body #cr-classroll-experience {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  direction: rtl !important;
  overflow: hidden !important;
}

html body #cr-classroll-experience * {
  box-sizing: border-box !important;
}

html body .crx-section {
  padding: 78px 0 !important;
}

html body .crx-soft {
  background:
    radial-gradient(circle at 14% 10%, rgba(212,160,23,0.09), transparent 28%),
    linear-gradient(180deg, #f7f8fa, #ffffff) !important;
}

html body .crx-wrap {
  width: var(--cr-site-width) !important;
  max-width: var(--cr-site-width) !important;
  margin: 0 auto !important;
}

html body .crx-title {
  text-align: center !important;
  margin-bottom: 34px !important;
}

html body .crx-kicker {
  color: var(--cr-gold) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
}

html body .crx-title h2 {
  color: #111827 !important;
  font-size: 36px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  margin: 0 0 12px !important;
}

html body .crx-title p {
  color: #6b7280 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

/* =====================================================
   SMART CATEGORY SECTION
===================================================== */

html body #cr-classroll-experience .cr-smart-cats {
  width: 100% !important;
  direction: rtl !important;
}

html body #cr-classroll-experience .crsc-shell {
  display: grid !important;
  grid-template-columns: minmax(520px, 1.12fr) minmax(430px, 0.88fr) !important;
  gap: 26px !important;
  align-items: stretch !important;
  direction: ltr !important;
}

html body #cr-classroll-experience .crsc-stage {
  order: 1 !important;
  position: relative !important;
  min-height: 610px !important;
  width: 100% !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background-color: #0b1220 !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(6,12,24,0.10) 0%,
      rgba(6,12,24,0.28) 30%,
      rgba(6,12,24,0.68) 58%,
      rgba(6,12,24,0.96) 100%
    ),
    var(--crsc-stage-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.16) !important;
  direction: rtl !important;
}

html body #cr-classroll-experience .crsc-stage-inner {
  position: relative !important;
  z-index: 3 !important;
  min-height: 610px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 44px 46px !important;
  direction: ltr !important;
}

html body #cr-classroll-experience .crsc-stage-content {
  width: min(46%, 560px) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  direction: rtl !important;
  color: #ffffff !important;
}

html body #cr-classroll-experience .crsc-kicker {
  display: inline-block !important;
  color: #f0bf2c !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

html body #cr-classroll-experience .crsc-stage-title {
  color: #ffffff !important;
  font-size: 32px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  margin: 0 0 12px !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.36) !important;
}

html body #cr-classroll-experience .crsc-stage-desc {
  color: rgba(255,255,255,0.92) !important;
  font-size: 16px !important;
  line-height: 1.95 !important;
  margin: 0 0 18px !important;
  text-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
}

html body #cr-classroll-experience .crsc-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  justify-content: flex-start !important;
}

html body #cr-classroll-experience .crsc-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(7px) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html body #cr-classroll-experience .crsc-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}

html body #cr-classroll-experience .crsc-meta-item {
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(6px) !important;
  text-align: right !important;
}

html body #cr-classroll-experience .crsc-meta-label {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.72) !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}

html body #cr-classroll-experience .crsc-meta-value {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

html body #cr-classroll-experience .crsc-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

html body #cr-classroll-experience .crsc-btn {
  min-height: 46px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body #cr-classroll-experience .crsc-btn-primary {
  background: #d4a017 !important;
  color: #111827 !important;
}

html body #cr-classroll-experience .crsc-btn-secondary {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

html body #cr-classroll-experience .crsc-note {
  margin-top: 12px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.70) !important;
  line-height: 1.8 !important;
}

/* =====================================================
   CATEGORY CARDS
===================================================== */

html body #cr-classroll-experience .crsc-grid {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 16px !important;
  direction: rtl !important;
  align-content: start !important;
}

html body #cr-classroll-experience .crsc-card {
  position: relative !important;
  display: block !important;
  height: 118px !important;
  min-height: 118px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid #e8ebf0 !important;
  box-shadow: 0 12px 30px rgba(15,23,42,0.045) !important;
  text-align: right !important;
  direction: rtl !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

html body #cr-classroll-experience .crsc-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(212,160,23,0.45) !important;
  box-shadow: 0 22px 44px rgba(15,23,42,0.10) !important;
}

html body #cr-classroll-experience .crsc-card.is-active {
  background: #fffdf8 !important;
  border-color: rgba(212,160,23,0.75) !important;
}

html body #cr-classroll-experience .crsc-card-badge {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  min-width: 70px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(212,160,23,0.55) !important;
  color: #d4a017 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  direction: ltr !important;
  z-index: 10 !important;
}

html body #cr-classroll-experience .crsc-card-title {
  position: absolute !important;
  top: 30px !important;
  right: 22px !important;
  left: 125px !important;
  margin: 0 !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  text-align: right !important;
  direction: rtl !important;
}

html body #cr-classroll-experience .crsc-card-mini {
  position: absolute !important;
  right: 22px !important;
  left: 22px !important;
  bottom: 22px !important;
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  text-align: right !important;
  direction: rtl !important;
}

/* =====================================================
   TWO BOTTOM FEATURE BOXES
===================================================== */

html body .crx-measure {
  margin-top: 36px !important;
  position: relative !important;
  min-height: 430px !important;
  color: #ffffff !important;
  border-radius: 34px !important;
  padding: 0 !important;
  background-color: #0f172a !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(8,13,24,0.12) 0%,
      rgba(8,13,24,0.28) 34%,
      rgba(8,13,24,0.70) 58%,
      rgba(8,13,24,0.96) 100%
    ),
    var(--cr-measure-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16) !important;
}

html body .crx-measure > div:first-child {
  position: absolute !important;
  top: 50% !important;
  right: 64px !important;
  transform: translateY(-50%) !important;
  width: 42% !important;
  max-width: 590px !important;
  text-align: right !important;
  z-index: 5 !important;
}

html body .crx-final {
  margin-top: 36px !important;
  min-height: 270px !important;
  color: #ffffff !important;
  border-radius: 34px !important;
  padding: 52px 34px !important;
  text-align: center !important;
  overflow: hidden !important;
  background-color: #111827 !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(8,13,24,0.18) 0%,
      rgba(8,13,24,0.30) 28%,
      rgba(8,13,24,0.70) 60%,
      rgba(8,13,24,0.92) 100%
    ),
    var(--cr-final-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 24px 60px rgba(15,23,42,0.16) !important;
}

html body .crx-measure h2,
html body .crx-final h2 {
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  margin: 0 0 16px !important;
}

html body .crx-measure p,
html body .crx-final p {
  color: rgba(255,255,255,0.88) !important;
  font-size: 16px !important;
  line-height: 2 !important;
  margin: 0 0 26px !important;
}

html body .crx-steps {
  display: grid !important;
  gap: 12px !important;
  margin-bottom: 28px !important;
}

html body .crx-step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

html body .crx-step span {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--cr-gold) !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
}

html body .crx-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

html body .crx-btn {
  min-height: 46px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

html body .crx-btn-gold {
  background: var(--cr-gold) !important;
  color: #111827 !important;
}

html body .crx-btn-light {
  color: #ffffff !important;
  background: rgba(255,255,255,0.13) !important;
  border: 1px solid rgba(255,255,255,0.26) !important;
}

html body .crx-final .crx-actions {
  justify-content: center !important;
}

/* =====================================================
   FLOATING HELP
===================================================== */

html body .cr-floating-help {
  position: fixed !important;
  right: 18px !important;
  bottom: 22px !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid rgba(212,160,23,0.28) !important;
  box-shadow: 0 18px 45px rgba(15,23,42,0.25) !important;
  border-radius: 999px !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .cr-floating-help span {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--cr-gold) !important;
  color: #111827 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

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

@media (max-width: 1024px) {
  html body #cr-classroll-experience .crsc-shell {
    grid-template-columns: 1fr !important;
  }

  html body #cr-classroll-experience .crsc-stage,
  html body #cr-classroll-experience .crsc-stage-inner {
    min-height: 540px !important;
  }

  html body #cr-classroll-experience .crsc-stage-content {
    width: min(58%, 620px) !important;
  }

  html body .crx-measure {
    padding: 32px 22px !important;
    min-height: 360px !important;
  }

  html body .crx-measure > div:first-child {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 900px) {
  html body .cr-products-mega {
    max-height: 78vh !important;
    overflow-y: auto !important;
  }

  html body .cr-products-mega-inner,
  html body .cr-products-mega-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  html body .cr-main-menu-inner {
    grid-template-columns: repeat(4, 1fr) !important;
    overflow-x: auto !important;
  }

  html body .cr-main-menu-link {
    height: 50px !important;
    min-width: 105px !important;
    font-size: 13px !important;
    padding: 0 8px !important;
  }

  html body .crx-section {
    padding: 54px 0 !important;
  }

  html body .crx-title h2 {
    font-size: 28px !important;
  }

  html body #cr-classroll-experience .crsc-grid {
    grid-template-columns: 1fr !important;
  }

  html body #cr-classroll-experience .crsc-stage,
  html body #cr-classroll-experience .crsc-stage-inner {
    min-height: 520px !important;
  }

  html body #cr-classroll-experience .crsc-stage-content {
    width: 100% !important;
  }

  html body #cr-classroll-experience .crsc-card-title {
    left: 110px !important;
    right: 18px !important;
    font-size: 17px !important;
  }

  html body #cr-classroll-experience .crsc-card-mini {
    right: 18px !important;
    left: 18px !important;
  }
}

/* =====================================================
   CLASSROLL ALIGNMENT PATCH V4
   Fix: bigger normal width + rounded banner + exact banner/product edges
===================================================== */

:root {
  --cr-site-width: min(96vw, 1560px) !important;
  --cr-banner-radius: 28px;
  --cr-products-gap: 22px;
}

/* Bigger normal width for banner/products/features */
html body .cr-force-banner-box,
html body .cr-banner-width-sync,
html body .cr-product-align-section,
html body .cr-products-wide-shell,
html body #cr-classroll-experience .crx-wrap {
  width: var(--cr-site-width) !important;
  max-width: var(--cr-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Rounded/wrapped banner */
html body .cr-force-banner-box,
html body .cr-banner-width-sync {
  border-radius: var(--cr-banner-radius) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  transform: translateZ(0) !important;
}

html body .cr-force-banner-box > *,
html body .cr-banner-width-sync > *,
html body .cr-force-banner-box salla-slider,
html body .cr-banner-width-sync salla-slider,
html body .cr-force-banner-box .s-slider-block,
html body .cr-banner-width-sync .s-slider-block,
html body .cr-force-banner-box .s-slider-container,
html body .cr-banner-width-sync .s-slider-container,
html body .cr-force-banner-box .swiper,
html body .cr-banner-width-sync .swiper,
html body .cr-force-banner-box .swiper-wrapper,
html body .cr-banner-width-sync .swiper-wrapper,
html body .cr-force-banner-box .swiper-slide,
html body .cr-banner-width-sync .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: inherit !important;
  box-sizing: border-box !important;
}

html body .cr-force-banner-box .swiper,
html body .cr-banner-width-sync .swiper,
html body .cr-force-banner-box .swiper-wrapper,
html body .cr-banner-width-sync .swiper-wrapper,
html body .cr-force-banner-box .swiper-slide,
html body .cr-banner-width-sync .swiper-slide {
  min-height: clamp(390px, 31vw, 560px) !important;
}

html body .cr-force-banner-box img,
html body .cr-banner-width-sync img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: clamp(390px, 31vw, 560px) !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Product section must start and end exactly like banner */
html body .cr-product-align-section,
html body .cr-products-wide-shell {
  overflow: hidden !important;
}

html body .cr-product-align-section > *,
html body .cr-products-wide-shell > *,
html body .cr-product-align-section .container,
html body .cr-products-wide-shell .container,
html body .cr-product-align-section .container-fluid,
html body .cr-products-wide-shell .container-fluid,
html body .cr-product-align-section .s-container,
html body .cr-products-wide-shell .s-container,
html body .cr-product-align-section [class*="container"],
html body .cr-products-wide-shell [class*="container"],
html body .cr-product-align-section salla-slider,
html body .cr-products-wide-shell salla-slider,
html body .cr-product-align-section .s-slider-block,
html body .cr-products-wide-shell .s-slider-block,
html body .cr-product-align-section .s-products-slider,
html body .cr-products-wide-shell .s-products-slider,
html body .cr-product-align-section .swiper,
html body .cr-products-wide-shell .swiper {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html body .cr-product-align-section .swiper,
html body .cr-products-wide-shell .swiper {
  overflow: hidden !important;
}

html body .cr-products-five-row .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--cr-products-gap) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

html body .cr-products-five-row .swiper-slide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 1200px) {
  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 88px) / 5) !important;
    min-width: calc((100% - 88px) / 5) !important;
    max-width: calc((100% - 88px) / 5) !important;
    flex: 0 0 calc((100% - 88px) / 5) !important;
  }
}

@media (max-width: 1199px) and (min-width: 901px) {
  :root {
    --cr-products-gap: 18px;
  }

  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 54px) / 4) !important;
    min-width: calc((100% - 54px) / 4) !important;
    max-width: calc((100% - 54px) / 4) !important;
    flex: 0 0 calc((100% - 54px) / 4) !important;
  }
}

@media (max-width: 900px) and (min-width: 641px) {
  :root {
    --cr-products-gap: 16px;
  }

  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 32px) / 3) !important;
    min-width: calc((100% - 32px) / 3) !important;
    max-width: calc((100% - 32px) / 3) !important;
    flex: 0 0 calc((100% - 32px) / 3) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --cr-site-width: calc(100vw - 24px) !important;
    --cr-banner-radius: 18px;
    --cr-products-gap: 14px;
  }

  html body .cr-force-banner-box .swiper,
  html body .cr-banner-width-sync .swiper,
  html body .cr-force-banner-box .swiper-wrapper,
  html body .cr-banner-width-sync .swiper-wrapper,
  html body .cr-force-banner-box .swiper-slide,
  html body .cr-banner-width-sync .swiper-slide,
  html body .cr-force-banner-box img,
  html body .cr-banner-width-sync img {
    min-height: 260px !important;
  }

  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 14px) / 2) !important;
    min-width: calc((100% - 14px) / 2) !important;
    max-width: calc((100% - 14px) / 2) !important;
    flex: 0 0 calc((100% - 14px) / 2) !important;
  }
}


/* =====================================================
   CLASSROLL SMART BASIC MENU V9
   Simple visible navigation + smart e-commerce mega menu
   No custom search because Salla already provides search
===================================================== */

:root {
  --cr-v9-bg: rgba(255, 255, 255, 0.94);
  --cr-v9-bg-solid: #ffffff;
  --cr-v9-text: #111827;
  --cr-v9-muted: #667085;
  --cr-v9-soft: #f6f7f9;
  --cr-v9-soft-2: #fbfbfc;
  --cr-v9-border: rgba(17, 24, 39, 0.08);
  --cr-v9-border-strong: rgba(17, 24, 39, 0.12);
  --cr-v9-gold: #d4a017;
  --cr-v9-gold-deep: #9d7410;
  --cr-v9-gold-soft: #fff7df;
  --cr-v9-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --cr-v9-shadow-strong: 0 28px 80px rgba(15, 23, 42, 0.16);
}

/* Menu container */
html body .cr-main-menu-bar.cr-menu-v9-smart {
  width: var(--cr-site-width) !important;
  max-width: var(--cr-site-width) !important;
  margin: 12px auto 18px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  direction: rtl !important;
  position: sticky !important;
  top: 10px !important;
  z-index: 99950 !important;
  transition: transform .24s ease, margin .24s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-shell {
  width: 100% !important;
  min-height: 68px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: var(--cr-v9-bg) !important;
  border: 1px solid var(--cr-v9-border) !important;
  box-shadow: var(--cr-v9-shadow) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(320px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
  transition: min-height .24s ease, border-radius .24s ease, box-shadow .24s ease, background .24s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart.cr-menu-compact .cr-menu-shell {
  min-height: 60px !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.10) !important;
}

/* Smart but basic: small store label, visible primary navigation, utilities */
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context {
  height: 50px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fffaf0, #ffffff) !important;
  border: 1px solid rgba(212,160,23,0.20) !important;
  color: var(--cr-v9-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 50% !important;
  background: var(--cr-v9-gold) !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-title {
  color: var(--cr-v9-text) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-sub {
  color: var(--cr-v9-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

/* Visible primary links */
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  direction: rtl !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  min-width: 0 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link {
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--cr-v9-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link:hover,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link.cr-active,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-item.cr-mega-open > .cr-main-menu-link {
  background: var(--cr-v9-soft) !important;
  border-color: rgba(212,160,23,0.22) !important;
  color: var(--cr-v9-gold-deep) !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-trigger::after {
  content: "⌄" !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 6px 0 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: currentColor !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transform: none !important;
  transition: transform .22s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-item.cr-mega-open .cr-products-trigger::after {
  transform: rotate(180deg) !important;
}

/* Utility side */
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-help,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mobile-menu-toggle {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-help {
  padding: 0 15px !important;
  color: var(--cr-v9-text) !important;
  background: var(--cr-v9-soft) !important;
  border: 1px solid rgba(17,24,39,0.06) !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp {
  padding: 0 18px !important;
  color: #111827 !important;
  background: linear-gradient(135deg, #eac44c, #d4a017) !important;
  border: 1px solid rgba(157,116,16,0.25) !important;
  box-shadow: 0 10px 22px rgba(212,160,23,0.22) !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-help:hover,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp:hover {
  transform: translateY(-1px) !important;
}

/* Mobile toggle */
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mobile-menu-toggle {
  display: none !important;
  width: 50px !important;
  min-width: 50px !important;
  padding: 0 !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
  background: #ffffff !important;
  color: var(--cr-v9-text) !important;
  cursor: pointer !important;
  font-size: 19px !important;
}

/* Mega menu: smart only inside products, not visible clutter */
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  right: 50% !important;
  left: auto !important;
  width: min(980px, calc(100vw - 42px)) !important;
  max-width: min(980px, calc(100vw - 42px)) !important;
  transform: translate(50%, 10px) !important;
  background: rgba(255,255,255,0.985) !important;
  border: 1px solid var(--cr-v9-border) !important;
  border-radius: 26px !important;
  box-shadow: var(--cr-v9-shadow-strong) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
  direction: rtl !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-item-products.cr-mega-open .cr-products-mega {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(50%, 0) !important;
  pointer-events: auto !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-inner {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 0 !important;
  direction: rtl !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-primary {
  padding: 22px !important;
  background: #ffffff !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-heading {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-kicker {
  color: var(--cr-v9-gold-deep) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  margin-bottom: 5px !important;
  display: block !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-title {
  color: var(--cr-v9-text) !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-all {
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: var(--cr-v9-soft) !important;
  color: var(--cr-v9-text) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  align-content: start !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-cat {
  min-height: 62px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: var(--cr-v9-soft-2) !important;
  border: 1px solid rgba(17,24,39,0.06) !important;
  color: var(--cr-v9-text) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  transition: transform .22s ease, background .22s ease, border-color .22s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-cat:hover {
  transform: translateY(-2px) !important;
  background: var(--cr-v9-gold-soft) !important;
  border-color: rgba(212,160,23,0.28) !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-cat-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: var(--cr-v9-gold-deep) !important;
  border: 1px solid rgba(212,160,23,0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-cat-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-cat-name {
  color: var(--cr-v9-text) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.45 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-cat-desc {
  color: var(--cr-v9-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

/* Smart guide panel */
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-smart {
  padding: 22px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(212,160,23,0.12), transparent 34%),
    linear-gradient(180deg, #fbfcff, #ffffff) !important;
  border-right: 1px solid rgba(17,24,39,0.07) !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-smart-title {
  color: var(--cr-v9-text) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  margin: 0 0 6px !important;
  line-height: 1.5 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-smart-desc {
  color: var(--cr-v9-muted) !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  margin: 0 0 14px !important;
  font-weight: 750 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  margin-bottom: 16px !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-card {
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17,24,39,0.06) !important;
  color: var(--cr-v9-text) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-card:hover {
  transform: translateY(-2px) !important;
  background: var(--cr-v9-gold-soft) !important;
  border-color: rgba(212,160,23,0.25) !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-card strong {
  color: var(--cr-v9-text) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.5 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-card span {
  color: var(--cr-v9-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-arrow {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  background: var(--cr-v9-soft) !important;
  color: var(--cr-v9-gold-deep) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-foot {
  padding-top: 14px !important;
  border-top: 1px solid rgba(17,24,39,0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-foot span {
  color: var(--cr-v9-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.6 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-foot a {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Responsive */
@media (max-width: 1180px) {
  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-sub {
    display: none !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link {
    padding: 0 14px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-help {
    display: none !important;
  }
}

@media (max-width: 991px) {
  html body .cr-main-menu-bar.cr-menu-v9-smart {
    top: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-shell {
    grid-template-columns: 1fr auto !important;
    border-radius: 24px !important;
    padding: 8px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context {
    grid-column: 1 / 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-actions {
    grid-column: 2 / 3 !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-inner {
    grid-column: 1 / -1 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 0 0 !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart.cr-mobile-open .cr-main-menu-inner {
    display: flex !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-item,
  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link {
    width: 100% !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link {
    height: 48px !important;
    min-height: 48px !important;
    justify-content: space-between !important;
    border-radius: 16px !important;
    background: var(--cr-v9-soft) !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mobile-menu-toggle {
    display: inline-flex !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-item-products.cr-mega-open .cr-products-mega {
    transform: none !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-inner {
    grid-template-columns: 1fr !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-smart {
    border-right: 0 !important;
    border-top: 1px solid rgba(17,24,39,0.07) !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-list {
    grid-template-columns: 1fr !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 640px) {
  html body .cr-main-menu-bar.cr-menu-v9-smart {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context {
    padding: 0 12px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-title {
    font-size: 12px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp {
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-primary,
  html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mega-smart {
    padding: 16px !important;
  }
}


/* =====================================================
   CLASSROLL CATEGORY TITLE LOGO PATCH V19
   Stronger version: visible logo mark behind product section title
   Does not change products, menu, banner, or feature layout
===================================================== */

:root {
  --cr-category-heading-logo: none;
  --cr-category-logo-size: 76px;
  --cr-category-logo-opacity: 0.24;
}

/* Product sections must become a positioning context */
html body .cr-product-align-section,
html body .cr-products-wide-shell {
  position: relative !important;
}

/* Real injected logo mark */
html body .cr-product-align-section .cr-section-logo-mark,
html body .cr-products-wide-shell .cr-section-logo-mark {
  position: absolute !important;
  top: 2px !important;
  right: clamp(10px, 1.6vw, 26px) !important;
  width: var(--cr-category-logo-size) !important;
  height: var(--cr-category-logo-size) !important;
  border-radius: 14px !important;
  background-image: var(--cr-category-heading-logo) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  opacity: var(--cr-category-logo-opacity) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* Keep section content above the watermark logo */
html body .cr-product-align-section > *:not(.cr-section-logo-mark),
html body .cr-products-wide-shell > *:not(.cr-section-logo-mark) {
  position: relative !important;
  z-index: 1 !important;
}

/* When the title is detected, add space so the logo sits behind/near it */
html body .cr-product-align-section .cr-category-heading,
html body .cr-products-wide-shell .cr-category-heading {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 58px !important;
  padding-right: 64px !important;
  padding-left: 0 !important;
  z-index: 2 !important;
  overflow: visible !important;
}

/* Small gold accent beside detected heading */
html body .cr-product-align-section .cr-category-heading::after,
html body .cr-products-wide-shell .cr-category-heading::after {
  content: "" !important;
  position: absolute !important;
  right: 50px !important;
  top: 50% !important;
  width: 30px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(212,160,23,1), rgba(212,160,23,0.30)) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

/* Do not affect the custom experience section */
html body #cr-classroll-experience .cr-section-logo-mark {
  display: none !important;
}

@media (max-width: 900px) {
  :root {
    --cr-category-logo-size: 58px;
    --cr-category-logo-opacity: 0.20;
  }

  html body .cr-product-align-section .cr-section-logo-mark,
  html body .cr-products-wide-shell .cr-section-logo-mark {
    top: 6px !important;
    right: 12px !important;
  }

  html body .cr-product-align-section .cr-category-heading,
  html body .cr-products-wide-shell .cr-category-heading {
    min-height: 50px !important;
    padding-right: 54px !important;
  }

  html body .cr-product-align-section .cr-category-heading::after,
  html body .cr-products-wide-shell .cr-category-heading::after {
    right: 42px !important;
    width: 24px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --cr-category-logo-size: 46px;
    --cr-category-logo-opacity: 0.18;
  }

  html body .cr-product-align-section .cr-category-heading,
  html body .cr-products-wide-shell .cr-category-heading {
    min-height: 44px !important;
    padding-right: 44px !important;
  }

  html body .cr-product-align-section .cr-category-heading::after,
  html body .cr-products-wide-shell .cr-category-heading::after {
    right: 35px !important;
    width: 20px !important;
  }
}


/* =====================================================
   CLASSROLL CATEGORY TITLE LOGO PATCH V20
   Fix spacing + remove yellow line + place logo close to title
===================================================== */

:root {
  --cr-category-logo-size: 46px;
  --cr-category-logo-opacity: 0.34;
}

/* Hide the previous free-position logo that caused big spacing */
html body .cr-product-align-section .cr-section-logo-mark,
html body .cr-products-wide-shell .cr-section-logo-mark {
  display: none !important;
}

/* Put the logo directly beside / behind the detected category title */
html body .cr-product-align-section .cr-category-heading,
html body .cr-products-wide-shell .cr-category-heading {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding-right: 50px !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  z-index: 2 !important;
}

/* Remove the yellow decorative line completely */
html body .cr-product-align-section .cr-category-heading::after,
html body .cr-products-wide-shell .cr-category-heading::after {
  display: none !important;
  content: none !important;
}

/* New close logo mark */
html body .cr-product-align-section .cr-category-heading::before,
html body .cr-products-wide-shell .cr-category-heading::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: var(--cr-category-logo-size) !important;
  height: var(--cr-category-logo-size) !important;
  transform: translateY(-50%) !important;
  border-radius: 10px !important;
  background-image: var(--cr-category-heading-logo) !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: var(--cr-category-logo-opacity) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body .cr-product-align-section .cr-category-heading > *,
html body .cr-products-wide-shell .cr-category-heading > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 900px) {
  :root {
    --cr-category-logo-size: 40px;
    --cr-category-logo-opacity: 0.30;
  }

  html body .cr-product-align-section .cr-category-heading,
  html body .cr-products-wide-shell .cr-category-heading {
    min-height: 42px !important;
    padding-right: 44px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --cr-category-logo-size: 34px;
    --cr-category-logo-opacity: 0.28;
  }

  html body .cr-product-align-section .cr-category-heading,
  html body .cr-products-wide-shell .cr-category-heading {
    min-height: 36px !important;
    padding-right: 38px !important;
  }
}


/* =====================================================
   CLASSROLL CATEGORY HEADER LOGO PATCH V21
   Replace faded pseudo logo with crisp real image
===================================================== */

:root {
  --cr-category-logo-size: 38px;
}

/* Stop using the pseudo-element background logo */
html body .cr-product-align-section .cr-category-heading::before,
html body .cr-products-wide-shell .cr-category-heading::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

html body .cr-product-align-section .cr-category-heading,
html body .cr-products-wide-shell .cr-category-heading {
  gap: 8px !important;
  padding-right: 0 !important;
  min-height: 40px !important;
}

html body .cr-product-align-section .cr-heading-logo-inline,
html body .cr-products-wide-shell .cr-heading-logo-inline {
  width: var(--cr-category-logo-size) !important;
  height: var(--cr-category-logo-size) !important;
  min-width: var(--cr-category-logo-size) !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  opacity: 0.95 !important;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  :root {
    --cr-category-logo-size: 34px;
  }

  html body .cr-product-align-section .cr-category-heading,
  html body .cr-products-wide-shell .cr-category-heading {
    gap: 7px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --cr-category-logo-size: 30px;
  }

  html body .cr-product-align-section .cr-category-heading,
  html body .cr-products-wide-shell .cr-category-heading {
    gap: 6px !important;
    min-height: 32px !important;
  }
}


/* =====================================================
   CLASSROLL PRODUCT SECTION VIEW ALL PATCH V22
   Adds "عرض الكل" beside slider arrows for each product feature
===================================================== */

html body .cr-product-align-section,
html body .cr-products-wide-shell {
  position: relative !important;
}

html body .cr-section-view-all {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid rgba(212,160,23,0.52) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,0.06) !important;
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease !important;
  cursor: pointer !important;
  z-index: 20 !important;
}

html body .cr-section-view-all:hover {
  color: #111827 !important;
  background: #d4a017 !important;
  border-color: #d4a017 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px rgba(212,160,23,0.20) !important;
}

html body .cr-section-view-all.cr-view-all-in-nav {
  position: relative !important;
  margin-inline-start: 10px !important;
  margin-inline-end: 10px !important;
  flex: 0 0 auto !important;
}

html body .cr-product-align-section .s-slider-block__title-left,
html body .cr-products-wide-shell .s-slider-block__title-left,
html body .cr-product-align-section .s-slider-block__title-nav,
html body .cr-products-wide-shell .s-slider-block__title-nav,
html body .cr-product-align-section [class*="slider-nav"],
html body .cr-products-wide-shell [class*="slider-nav"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .cr-section-view-all.cr-view-all-absolute {
  position: absolute !important;
  left: 98px !important;
  top: 12px !important;
}

@media (max-width: 900px) {
  html body .cr-section-view-all {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
  }

  html body .cr-section-view-all.cr-view-all-absolute {
    left: 88px !important;
    top: 10px !important;
  }
}

@media (max-width: 640px) {
  html body .cr-section-view-all {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  html body .cr-section-view-all.cr-view-all-absolute {
    left: 78px !important;
    top: 8px !important;
  }
}


/* =====================================================
   CLASSROLL PRODUCT SLIDER PATCH V23
   Plain "عرض الكل" text + smooth moving/autoplay product sliders
===================================================== */

/* Make "عرض الكل" simple text, not oval/button */
html body .cr-section-view-all,
html body .cr-section-view-all.cr-view-all-in-nav,
html body .cr-section-view-all.cr-view-all-absolute {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
}

html body .cr-section-view-all:hover {
  color: var(--cr-gold-deep) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .cr-section-view-all.cr-view-all-in-nav {
  margin-inline-start: 12px !important;
  margin-inline-end: 12px !important;
}

html body .cr-section-view-all.cr-view-all-absolute {
  position: absolute !important;
  left: 104px !important;
  top: 15px !important;
}

/* Make product sliders behave like real carousels */
html body .cr-product-align-section .swiper,
html body .cr-products-wide-shell .swiper {
  overflow: hidden !important;
}

html body .cr-products-five-row .swiper-wrapper {
  flex-wrap: nowrap !important;
  transition-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform !important;
}

html body .cr-products-five-row .swiper-slide {
  flex-shrink: 0 !important;
}

@media (max-width: 900px) {
  html body .cr-section-view-all.cr-view-all-absolute {
    left: 92px !important;
    top: 12px !important;
  }
}

@media (max-width: 640px) {
  html body .cr-section-view-all,
  html body .cr-section-view-all.cr-view-all-in-nav,
  html body .cr-section-view-all.cr-view-all-absolute {
    font-size: 13px !important;
  }

  html body .cr-section-view-all.cr-view-all-absolute {
    left: 82px !important;
    top: 10px !important;
  }
}


/* =====================================================
   CLASSROLL ENGLISH LANGUAGE PATCH V24
   Makes custom Salla-added sections/menu look correct in English
===================================================== */

html.cr-lang-en body .cr-main-menu-bar,
html.cr-lang-en body .cr-main-menu-bar *,
html.cr-lang-en body #cr-classroll-experience,
html.cr-lang-en body #cr-classroll-experience * {
  direction: ltr !important;
}

html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-shell,
html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-inner,
html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-actions {
  direction: ltr !important;
}

html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context {
  direction: ltr !important;
}

html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-trigger::after {
  margin-right: 0 !important;
  margin-left: 7px !important;
}

html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega {
  direction: ltr !important;
  text-align: left !important;
}

html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-list,
html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-grid {
  direction: ltr !important;
}

html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-mega-cat,
html.cr-lang-en body .cr-main-menu-bar.cr-menu-v9-smart .cr-need-card {
  direction: ltr !important;
  text-align: left !important;
}

html.cr-lang-en body #cr-classroll-experience .crx-title,
html.cr-lang-en body #cr-classroll-experience .crsc-stage-content,
html.cr-lang-en body #cr-classroll-experience .crsc-meta-item,
html.cr-lang-en body #cr-classroll-experience .crsc-card,
html.cr-lang-en body #cr-classroll-experience .crsc-card-title,
html.cr-lang-en body #cr-classroll-experience .crsc-card-mini {
  direction: ltr !important;
  text-align: left !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-stage-inner {
  direction: rtl !important;
  justify-content: flex-start !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-stage-content {
  margin-right: auto !important;
  margin-left: 0 !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-tags,
html.cr-lang-en body #cr-classroll-experience .crsc-actions,
html.cr-lang-en body .crx-actions {
  justify-content: flex-start !important;
  direction: ltr !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-card-title {
  right: 125px !important;
  left: 22px !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-card-badge {
  right: 16px !important;
  left: auto !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-card-mini {
  left: 22px !important;
  right: 22px !important;
}

html.cr-lang-en body .crx-measure > div:first-child {
  left: 64px !important;
  right: auto !important;
  text-align: left !important;
  direction: ltr !important;
}

html.cr-lang-en body .crx-step {
  direction: ltr !important;
}

html.cr-lang-en body .cr-product-align-section .cr-category-heading,
html.cr-lang-en body .cr-products-wide-shell .cr-category-heading {
  direction: ltr !important;
  text-align: left !important;
}

html.cr-lang-en body .cr-product-align-section,
html.cr-lang-en body .cr-products-wide-shell {
  direction: ltr !important;
}

html.cr-lang-en body .cr-product-align-section .cr-section-view-all,
html.cr-lang-en body .cr-products-wide-shell .cr-section-view-all {
  direction: ltr !important;
}

@media (max-width: 1024px) {
  html.cr-lang-en body .crx-measure > div:first-child {
    left: auto !important;
  }
}


/* =====================================================
   CLASSROLL ENGLISH FEATURE POSITION PATCH V25
   Only move these two English feature text blocks to the right
===================================================== */

html.cr-lang-en body #cr-classroll-experience .crsc-stage-inner {
  justify-content: flex-end !important;
  direction: ltr !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-stage-content {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  direction: ltr !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-tags,
html.cr-lang-en body #cr-classroll-experience .crsc-actions {
  justify-content: flex-end !important;
  direction: ltr !important;
}

html.cr-lang-en body .crx-measure > div:first-child {
  right: 64px !important;
  left: auto !important;
  text-align: right !important;
  direction: ltr !important;
}

html.cr-lang-en body .crx-measure .crx-actions {
  justify-content: flex-end !important;
  direction: ltr !important;
}

html.cr-lang-en body .crx-measure .crx-step {
  justify-content: flex-end !important;
  text-align: right !important;
  direction: ltr !important;
}

@media (max-width: 900px) {
  html.cr-lang-en body .crx-measure > div:first-child {
    right: 28px !important;
    left: auto !important;
  }
}

@media (max-width: 640px) {
  html.cr-lang-en body #cr-classroll-experience .crsc-stage-content,
  html.cr-lang-en body .crx-measure > div:first-child {
    text-align: right !important;
  }
}

html body .cr-section-view-all,
html body .cr-section-view-all.cr-view-all-in-nav,
html body .cr-section-view-all.cr-view-all-absolute,
html body .cr-section-view-all:visited,
html body .cr-section-view-all:active {
  color: #111827 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
}

html body .cr-section-view-all:hover {
  color: var(--cr-gold-deep) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Increase banner height only — no width changes */
:root {
  --cr-banner-height-v26: clamp(430px, 33.5vw, 600px);
}

html body .cr-force-banner-box .swiper,
html body .cr-banner-width-sync .swiper,
html body .cr-force-banner-box .swiper-wrapper,
html body .cr-banner-width-sync .swiper-wrapper,
html body .cr-force-banner-box .swiper-slide,
html body .cr-banner-width-sync .swiper-slide,
html body .cr-force-banner-box salla-slider,
html body .cr-banner-width-sync salla-slider,
html body .cr-force-banner-box .s-slider-block,
html body .cr-banner-width-sync .s-slider-block,
html body .cr-force-banner-box .s-slider-container,
html body .cr-banner-width-sync .s-slider-container {
  min-height: var(--cr-banner-height-v26) !important;
}

html body .cr-force-banner-box img,
html body .cr-banner-width-sync img {
  height: var(--cr-banner-height-v26) !important;
  min-height: var(--cr-banner-height-v26) !important;
  object-fit: cover !important;
}

@media (max-width: 640px) {
  :root {
    --cr-banner-height-v26: 290px;
  }
}


/* =====================================================
   CLASSROLL MENU FONT WEIGHT PATCH V27
   Make the top menu text not bold
===================================================== */

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-help,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-title,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context-subtitle,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-trigger,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-mobile-menu-toggle,
html body .cr-main-menu-bar.cr-menu-v9-smart a,
html body .cr-main-menu-bar.cr-menu-v9-smart button {
  font-weight: 500 !important;
}

html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link:hover,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-main-menu-link.cr-active,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-whatsapp:hover,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-help:hover,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-menu-context:hover,
html body .cr-main-menu-bar.cr-menu-v9-smart .cr-products-trigger:hover {
  font-weight: 500 !important;
}


/* =====================================================
   CLASSROLL REMOVE VIEW ALL PATCH V30
   Delete / hide "عرض الكل" from all product feature sections
===================================================== */

html body .cr-section-view-all,
html body .cr-product-align-section .cr-section-view-all,
html body .cr-products-wide-shell .cr-section-view-all {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   CLASSROLL OLD MENU FLICKER FIX V37
   Hide Salla default navigation before JS builds the custom menu
===================================================== */

/*
  Hide only the default navigation/menu containers inside the original Salla header.
  This prevents the old menu from flashing for a millisecond on refresh.
  The custom Classroll menu is not inside header, so it stays visible normally.
*/

html body header nav:not(.cr-main-menu-inner):not(.cr-products-mega):not([aria-label*="breadcrumb"]),
html body header .main-menu,
html body header .s-header-menu,
html body header .s-header__menu,
html body header .header-menu,
html body header .store-header__menu,
html body header .navbar-menu,
html body header .navbar-nav,
html body header .main-nav,
html body header .nav-menu,
html body header .menu-primary,
html body header .primary-menu,
html body header .s-menu,
html body header .salla-menu,
html body header [class*="main-menu"],
html body header [class*="header-menu"],
html body header [class*="nav-menu"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Keep header utilities visible */
html body header .s-search,
html body header salla-search,
html body header .s-cart-summary-wrapper,
html body header salla-cart-summary,
html body header .s-user-menu,
html body header salla-user-menu,
html body header .logo,
html body header .navbar-brand,
html body header .brand,
html body header a[href="/"],
html body header a[href$="/ar"],
html body header a[href$="/en"] {
  display: initial !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Ensure the custom Classroll menu never gets hidden by the anti-flicker rules */
html body #cr-main-menu-bar,
html body #cr-main-menu-bar *,
html body .cr-main-menu-bar,
html body .cr-main-menu-bar * {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* Contact column safety */


/* ---------- English experience section ---------- */
html.cr-lang-en body #cr-classroll-experience,
html.cr-lang-en body #cr-classroll-experience * {
  direction: ltr !important;
}

html.cr-lang-en body #cr-classroll-experience .crx-title,
html.cr-lang-en body #cr-classroll-experience .crsc-stage-content,
html.cr-lang-en body #cr-classroll-experience .crsc-card-title,
html.cr-lang-en body #cr-classroll-experience .crsc-card-mini,
html.cr-lang-en body #cr-classroll-experience .crsc-meta-item {
  text-align: left !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-shell {
  direction: ltr !important;
  grid-template-columns: minmax(520px, 1.12fr) minmax(430px, 0.88fr) !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-stage {
  order: 1 !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-grid {
  order: 2 !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-stage-inner {
  direction: ltr !important;
  justify-content: flex-end !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-stage-content {
  margin-left: auto !important;
  margin-right: 0 !important;
  width: min(46%, 560px) !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-tags,
html.cr-lang-en body #cr-classroll-experience .crsc-actions,
html.cr-lang-en body #cr-classroll-experience .crx-actions {
  justify-content: flex-start !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-card-badge {
  left: 16px !important;
  right: auto !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-card-title {
  left: 125px !important;
  right: 22px !important;
}

html.cr-lang-en body #cr-classroll-experience .crsc-card-mini {
  left: 22px !important;
  right: 22px !important;
}

@media (max-width: 980px) {
  html.cr-lang-en body #cr-classroll-experience .crsc-shell {
    grid-template-columns: 1fr !important;
  }

  html.cr-lang-en body #cr-classroll-experience .crsc-stage-content {
    width: 100% !important;
  }
}


/* Hide old/default Salla links only inside the Important Links column */


/* Mobile: stack links cleanly */


/* Keep the smart contact panel clearly on the left in English */


/* Keep Important Links centered between the left smart panel and right company panel */


:root {
  --cr-v19-bg-light: #f5f6f8;
  --cr-v19-bottom-light: #ffffff;
  --cr-v19-text-light: #111827;
  --cr-v19-muted-light: #4b5563;
  --cr-v19-gold: #d4a017;
}


/* =====================================================
   CLASSROLL ABOUT US PAGE - PREMIUM INJECTED PAGE V29
   Works without HTML editor. JS injects this page only on About Us route.
   Scoped only to .cr-about-page-generated
===================================================== */

html body .cr-about-page-generated {
  --cr-about-gold: #d4a017;
  --cr-about-gold-dark: #b8860b;
  --cr-about-dark: #111827;
  --cr-about-navy: #0f172a;
  --cr-about-text: #1f2937;
  --cr-about-muted: #6b7280;
  --cr-about-border: rgba(15, 23, 42, 0.09);
  --cr-about-card: #ffffff;
  --cr-about-soft: #f6f7f9;
  --cr-about-shadow: 0 24px 65px rgba(15, 23, 42, 0.10);
  --cr-about-width: min(94vw, 1460px);
  --cr-about-radius: 32px;
  width: 100% !important;
  direction: rtl !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(212, 160, 23, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 42%, #ffffff 100%) !important;
  color: var(--cr-about-text) !important;
  font-family: inherit !important;
  padding: 28px 0 70px !important;
  overflow: hidden !important;
}

html body .cr-about-page-generated * {
  box-sizing: border-box !important;
}

html body .cr-about-page-generated a {
  text-decoration: none !important;
}

html body .cr-about-page-generated .cr-about-wrap {
  width: var(--cr-about-width) !important;
  max-width: var(--cr-about-width) !important;
  margin: 0 auto !important;
}

html body .cr-about-page-generated .cr-about-section {
  margin-top: 34px !important;
}

html body .cr-about-page-generated .cr-about-hero {
  min-height: 560px !important;
  border-radius: 38px !important;
  overflow: hidden !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr) !important;
  gap: 0 !important;
  background:
    linear-gradient(90deg, rgba(9, 13, 23, 0.96) 0%, rgba(9, 13, 23, 0.84) 44%, rgba(9, 13, 23, 0.36) 100%),
    url("https://drive.google.com/thumbnail?id=1ZMBfGnznnZrYPPcy1OZny34-wIRUy6Sv&sz=w2000") center/cover no-repeat !important;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body .cr-about-page-generated .cr-about-hero:before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(212, 160, 23, 0.24), transparent 25%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.18)) !important;
  pointer-events: none !important;
}

html body .cr-about-page-generated .cr-about-hero-content,
html body .cr-about-page-generated .cr-about-hero-panel {
  position: relative !important;
  z-index: 2 !important;
}

html body .cr-about-page-generated .cr-about-hero-content {
  padding: 72px 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-align: right !important;
}

html body .cr-about-page-generated .cr-about-hero-panel {
  padding: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .cr-about-page-generated .cr-about-premium-card {
  width: 100% !important;
  max-width: 440px !important;
  border-radius: 34px !important;
  padding: 34px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.28) !important;
  color: #ffffff !important;
}

html body .cr-about-page-generated .cr-about-brand-lockup {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
  direction: ltr !important;
  justify-content: flex-start !important;
}

html body .cr-about-page-generated .cr-about-mark {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  border-radius: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #111827, #1f2937) !important;
  border: 1px solid rgba(212, 160, 23, 0.65) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
  position: relative !important;
}

html body .cr-about-page-generated .cr-about-mark:before {
  content: "" !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(var(--cr-about-gold), var(--cr-about-gold)) center 6px / 30px 6px no-repeat,
    repeating-linear-gradient(90deg, var(--cr-about-gold) 0 5px, transparent 5px 10px) center 23px / 35px 22px no-repeat !important;
  opacity: .95 !important;
}

html body .cr-about-page-generated .cr-about-brand-name {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .cr-about-page-generated .cr-about-brand-name strong {
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.7px !important;
}

html body .cr-about-page-generated .cr-about-brand-name span {
  color: var(--cr-about-gold) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body .cr-about-page-generated .cr-about-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: fit-content !important;
  color: var(--cr-about-gold) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}

html body .cr-about-page-generated .cr-about-eyebrow:before {
  content: "" !important;
  width: 34px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--cr-about-gold) !important;
}

html body .cr-about-page-generated .cr-about-title {
  color: #ffffff !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  margin: 0 0 18px !important;
  letter-spacing: -1px !important;
  max-width: 820px !important;
}

html body .cr-about-page-generated .cr-about-subtitle {
  color: rgba(255,255,255,0.88) !important;
  font-size: 18px !important;
  line-height: 2 !important;
  margin: 0 0 28px !important;
  max-width: 790px !important;
}

html body .cr-about-page-generated .cr-about-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

html body .cr-about-page-generated .cr-about-btn {
  min-height: 52px !important;
  min-width: 165px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease !important;
}

html body .cr-about-page-generated .cr-about-btn:hover {
  transform: translateY(-2px) !important;
}

html body .cr-about-page-generated .cr-about-btn-gold {
  background: var(--cr-about-gold) !important;
  color: #111827 !important;
  box-shadow: 0 16px 35px rgba(212, 160, 23, 0.24) !important;
}

html body .cr-about-page-generated .cr-about-btn-outline {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

html body .cr-about-page-generated .cr-about-btn-dark {
  background: #111827 !important;
  color: #ffffff !important;
}

html body .cr-about-page-generated .cr-about-btn-light {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
}

html body .cr-about-page-generated .cr-about-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

html body .cr-about-page-generated .cr-about-stat {
  min-height: 118px !important;
  border-radius: 22px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

html body .cr-about-page-generated .cr-about-stat strong {
  color: var(--cr-about-gold) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  margin-bottom: 8px !important;
}

html body .cr-about-page-generated .cr-about-stat span {
  color: rgba(255,255,255,0.88) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
}

html body .cr-about-page-generated .cr-about-section-head {
  text-align: center !important;
  max-width: 920px !important;
  margin: 0 auto 28px !important;
}

html body .cr-about-page-generated .cr-about-section-head .cr-about-eyebrow {
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .cr-about-page-generated .cr-about-section-head h2 {
  color: var(--cr-about-dark) !important;
  font-size: clamp(30px, 3.5vw, 48px) !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.5px !important;
}

html body .cr-about-page-generated .cr-about-section-head p {
  color: var(--cr-about-muted) !important;
  font-size: 16px !important;
  line-height: 2 !important;
  margin: 0 auto !important;
}

html body .cr-about-page-generated .cr-about-grid {
  display: grid !important;
  gap: 18px !important;
}

html body .cr-about-page-generated .cr-about-grid-4 {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

html body .cr-about-page-generated .cr-about-grid-3 {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

html body .cr-about-page-generated .cr-about-two {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 20px !important;
}

html body .cr-about-page-generated .cr-about-card,
html body .cr-about-page-generated .cr-about-panel,
html body .cr-about-page-generated .cr-about-service,
html body .cr-about-page-generated .cr-about-step {
  background: var(--cr-about-card) !important;
  border: 1px solid var(--cr-about-border) !important;
  box-shadow: var(--cr-about-shadow) !important;
  border-radius: 28px !important;
  padding: 26px !important;
  color: var(--cr-about-text) !important;
}

html body .cr-about-page-generated .cr-about-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

html body .cr-about-page-generated .cr-about-card:hover,
html body .cr-about-page-generated .cr-about-service:hover,
html body .cr-about-page-generated .cr-about-step:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(212,160,23,0.35) !important;
  box-shadow: 0 28px 70px rgba(15,23,42,0.13) !important;
}

html body .cr-about-page-generated .cr-about-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(212,160,23,0.13) !important;
  border: 1px solid rgba(212,160,23,0.28) !important;
  color: var(--cr-about-gold-dark) !important;
  font-size: 24px !important;
  font-weight: 950 !important;
  margin-bottom: 16px !important;
}

html body .cr-about-page-generated .cr-about-card h3,
html body .cr-about-page-generated .cr-about-service h3,
html body .cr-about-page-generated .cr-about-step h3,
html body .cr-about-page-generated .cr-about-panel h3,
html body .cr-about-page-generated .cr-about-panel h2 {
  color: var(--cr-about-dark) !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  margin: 0 0 10px !important;
}

html body .cr-about-page-generated .cr-about-card p,
html body .cr-about-page-generated .cr-about-service p,
html body .cr-about-page-generated .cr-about-step p,
html body .cr-about-page-generated .cr-about-panel p {
  color: var(--cr-about-muted) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  margin: 0 !important;
}

html body .cr-about-page-generated .cr-about-panel-dark {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(31,41,55,0.94)),
    url("https://drive.google.com/thumbnail?id=1HIFujevbH9tz6YGZWRYGA6xT8h0peB-N&sz=w2000") center/cover no-repeat !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.10) !important;
}

html body .cr-about-page-generated .cr-about-panel-dark h2,
html body .cr-about-page-generated .cr-about-panel-dark h3 {
  color: #ffffff !important;
}

html body .cr-about-page-generated .cr-about-panel-dark p {
  color: rgba(255,255,255,0.84) !important;
}

html body .cr-about-page-generated .cr-about-panel-gold {
  background: linear-gradient(135deg, #f7e3a2, #d4a017) !important;
  color: #111827 !important;
}

html body .cr-about-page-generated .cr-about-panel-gold h2,
html body .cr-about-page-generated .cr-about-panel-gold h3,
html body .cr-about-page-generated .cr-about-panel-gold p,
html body .cr-about-page-generated .cr-about-panel-gold .cr-about-eyebrow {
  color: #111827 !important;
}

html body .cr-about-page-generated .cr-about-mv + .cr-about-mv {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

html body .cr-about-page-generated .cr-about-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

html body .cr-about-page-generated .cr-about-mini {
  border-radius: 20px !important;
  padding: 20px !important;
  background: #fafafa !important;
  border: 1px solid var(--cr-about-border) !important;
}

html body .cr-about-page-generated .cr-about-mini h4 {
  color: var(--cr-about-dark) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  margin: 0 0 8px !important;
}

html body .cr-about-page-generated .cr-about-mini p {
  font-size: 14px !important;
  line-height: 1.8 !important;
}

html body .cr-about-page-generated .cr-about-process {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 14px !important;
}

html body .cr-about-page-generated .cr-about-step {
  text-align: center !important;
  padding: 24px 18px !important;
}

html body .cr-about-page-generated .cr-about-step-num {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(212,160,23,0.14) !important;
  border: 1px solid rgba(212,160,23,0.24) !important;
  color: var(--cr-about-gold-dark) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  margin-bottom: 14px !important;
  direction: ltr !important;
}

html body .cr-about-page-generated .cr-about-industries,
html body .cr-about-page-generated .cr-about-brands {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
}

html body .cr-about-page-generated .cr-about-industries span,
html body .cr-about-page-generated .cr-about-brands span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--cr-about-border) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
  color: var(--cr-about-text) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

html body .cr-about-page-generated .cr-about-brands span {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: rgba(212,160,23,0.32) !important;
}

html body .cr-about-page-generated .cr-about-branches {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

html body .cr-about-page-generated .cr-about-branch {
  border-radius: 20px !important;
  padding: 20px !important;
  background: #fafafa !important;
  border: 1px solid var(--cr-about-border) !important;
}

html body .cr-about-page-generated .cr-about-branch h3 {
  margin: 0 0 8px !important;
}

html body .cr-about-page-generated .cr-about-cta {
  border-radius: 36px !important;
  padding: 54px !important;
  overflow: hidden !important;
  position: relative !important;
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(5,10,20,0.28), rgba(5,10,20,0.92)),
    url("https://drive.google.com/thumbnail?id=1Pj-HJZCHSZg_qELb9ys5zgFMFlPn-fF0&sz=w2000") center/cover no-repeat !important;
  box-shadow: var(--cr-about-shadow) !important;
}

html body .cr-about-page-generated .cr-about-cta h2 {
  color: #ffffff !important;
  font-size: clamp(30px, 3.5vw, 48px) !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 0 0 12px !important;
  max-width: 780px !important;
}

html body .cr-about-page-generated .cr-about-cta p {
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.9 !important;
  max-width: 760px !important;
  margin: 0 0 22px !important;
}

html body .cr-about-page-generated.cr-about-ltr,
html body .cr-about-page-generated[dir="ltr"] {
  direction: ltr !important;
}

html body .cr-about-page-generated.cr-about-ltr .cr-about-hero-content,
html body .cr-about-page-generated.cr-about-ltr .cr-about-card,
html body .cr-about-page-generated.cr-about-ltr .cr-about-service,
html body .cr-about-page-generated.cr-about-ltr .cr-about-panel,
html body .cr-about-page-generated.cr-about-ltr .cr-about-cta {
  text-align: left !important;
}

html body .cr-about-page-generated.cr-about-ltr .cr-about-section-head {
  text-align: center !important;
}

@media (max-width: 1180px) {
  html body .cr-about-page-generated .cr-about-hero {
    grid-template-columns: 1fr !important;
  }

  html body .cr-about-page-generated .cr-about-hero-panel {
    padding-top: 0 !important;
    justify-content: flex-start !important;
  }

  html body .cr-about-page-generated .cr-about-grid-4 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  html body .cr-about-page-generated .cr-about-grid-3 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  html body .cr-about-page-generated .cr-about-process {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  html body .cr-about-page-generated .cr-about-two {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  html body .cr-about-page-generated {
    padding: 16px 0 46px !important;
  }

  html body .cr-about-page-generated .cr-about-wrap {
    width: min(94vw, 100%) !important;
    max-width: min(94vw, 100%) !important;
  }

  html body .cr-about-page-generated .cr-about-hero {
    min-height: auto !important;
    border-radius: 26px !important;
  }

  html body .cr-about-page-generated .cr-about-hero-content {
    padding: 34px 22px !important;
  }

  html body .cr-about-page-generated .cr-about-hero-panel {
    padding: 0 22px 22px !important;
  }

  html body .cr-about-page-generated .cr-about-title {
    font-size: 34px !important;
  }

  html body .cr-about-page-generated .cr-about-subtitle {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  html body .cr-about-page-generated .cr-about-premium-card {
    padding: 24px !important;
  }

  html body .cr-about-page-generated .cr-about-grid-4,
  html body .cr-about-page-generated .cr-about-grid-3,
  html body .cr-about-page-generated .cr-about-mini-grid,
  html body .cr-about-page-generated .cr-about-process,
  html body .cr-about-page-generated .cr-about-branches,
  html body .cr-about-page-generated .cr-about-stat-grid {
    grid-template-columns: 1fr !important;
  }

  html body .cr-about-page-generated .cr-about-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body .cr-about-page-generated .cr-about-btn {
    width: 100% !important;
  }

  html body .cr-about-page-generated .cr-about-card,
  html body .cr-about-page-generated .cr-about-panel,
  html body .cr-about-page-generated .cr-about-service,
  html body .cr-about-page-generated .cr-about-step {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  html body .cr-about-page-generated .cr-about-cta {
    padding: 34px 22px !important;
    border-radius: 26px !important;
  }
}


/* Keep normal small boxes clean white */
html body .cr-about-page-generated .cr-about-panel:not(.cr-about-panel-dark):not(.cr-about-panel-gold) {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--cr-about-text) !important;
}

/* Mission / Vision box background */
html body .cr-about-page-generated .cr-about-panel-dark {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
  background-image:
    linear-gradient(90deg,
      rgba(7, 14, 28, 0.94) 0%,
      rgba(10, 18, 34, 0.86) 45%,
      rgba(12, 22, 40, 0.78) 100%
    ),
    url("https://images.unsplash.com/photo-1519710164239-da123dc03ef4?auto=format&fit=crop&w=1800&q=80") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 24px 65px rgba(7,17,34,0.18) !important;
}

html body .cr-about-page-generated .cr-about-panel-dark::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(212,160,23,0.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.08)) !important;
}

html body .cr-about-page-generated .cr-about-panel-dark > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .cr-about-page-generated .cr-about-panel-dark .cr-about-eyebrow,
html body .cr-about-page-generated .cr-about-panel-dark h2,
html body .cr-about-page-generated .cr-about-panel-dark h3 {
  color: #ffffff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.28) !important;
}

html body .cr-about-page-generated .cr-about-panel-dark p {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
}

html body .cr-about-page-generated .cr-about-panel-dark .cr-about-mv + .cr-about-mv {
  border-top: 1px solid rgba(255,255,255,0.16) !important;
}

/* Yellow Let’s Start box background */
html body .cr-about-page-generated .cr-about-panel-gold {
  position: relative !important;
  overflow: hidden !important;
  background-color: #d4a017 !important;
  background-image:
    linear-gradient(90deg,
      rgba(255, 235, 166, 0.88) 0%,
      rgba(224, 172, 28, 0.74) 46%,
      rgba(184, 134, 11, 0.58) 100%
    ),
    url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1800&q=80") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #071122 !important;
  border: 1px solid rgba(184,134,11,0.24) !important;
  box-shadow: 0 24px 65px rgba(212,160,23,0.16) !important;
}

html body .cr-about-page-generated .cr-about-panel-gold::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.20), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.16), transparent 25%) !important;
}

html body .cr-about-page-generated .cr-about-panel-gold > * {
  position: relative !important;
  z-index: 1 !important;
}

html body .cr-about-page-generated .cr-about-panel-gold .cr-about-eyebrow,
html body .cr-about-page-generated .cr-about-panel-gold h2,
html body .cr-about-page-generated .cr-about-panel-gold h3,
html body .cr-about-page-generated .cr-about-panel-gold p {
  color: #071122 !important;
}

html body .cr-about-page-generated .cr-about-panel-gold .cr-about-btn-dark {
  background: #071122 !important;
  color: #ffffff !important;
}

html body .cr-about-page-generated .cr-about-panel-gold .cr-about-btn-light {
  background: #ffffff !important;
  color: #071122 !important;
  border-color: rgba(7,17,34,0.10) !important;
}

/* Mobile safety */
@media (max-width: 767px) {
  html body .cr-about-page-generated .cr-about-panel-dark,
  html body .cr-about-page-generated .cr-about-panel-gold {
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* =====================================================
   CLASSROLL ABOUT US - BACKGROUND IMAGE PATCH V36
   Paste ONLY this patch at the END of your current CSS.
   No JS changes are needed.
   ===================================================== */

/* 1) Hero section - premium curtains / blinds atmosphere */
html body .cr-about-page-generated .cr-about-hero {
  background:
    linear-gradient(90deg,
      rgba(8, 12, 22, 0.96) 0%,
      rgba(8, 12, 22, 0.84) 42%,
      rgba(8, 12, 22, 0.48) 100%
    ),
    url("https://images.unsplash.com/photo-1484154218962-a197022b5858?auto=format&fit=crop&w=1800&q=80") center center / cover no-repeat !important;
}

/* 2) Mission / Vision box - elegant interior / design feeling */
html body .cr-about-page-generated .cr-about-panel-dark {
  background-color: #0f172a !important;
  background-image:
    linear-gradient(90deg,
      rgba(6, 14, 28, 0.88) 0%,
      rgba(9, 18, 34, 0.78) 48%,
      rgba(10, 22, 40, 0.72) 100%
    ),
    url("https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=1800&q=80") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* 3) Yellow call-to-action box - warm residential project image */
html body .cr-about-page-generated .cr-about-panel-gold {
  background-color: #d4a017 !important;
  background-image:
    linear-gradient(90deg,
      rgba(255, 238, 190, 0.72) 0%,
      rgba(229, 182, 43, 0.66) 50%,
      rgba(198, 146, 19, 0.70) 100%
    ),
    url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1800&q=80") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* 4) Bottom CTA banner - curtain / texture / premium space look */
html body .cr-about-page-generated .cr-about-cta {
  background:
    linear-gradient(90deg,
      rgba(6, 10, 20, 0.54) 0%,
      rgba(6, 10, 20, 0.62) 35%,
      rgba(6, 10, 20, 0.74) 100%
    ),
    url("https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1800&q=80") center center / cover no-repeat !important;
}

/* =====================================================
   CLASSROLL ABOUT US - FINAL BACKGROUND IMAGE UPDATE
   Added by ChatGPT
   Purpose: change ONLY About Us page background images.
   Keep all layout, text, spacing, colors, menu, products unchanged.
===================================================== */

/* Main About Us hero background - curtains/interior related */
html body .cr-about-page-generated .cr-about-hero {
  background:
    linear-gradient(
      90deg,
      rgba(8, 12, 22, 0.96) 0%,
      rgba(8, 12, 22, 0.84) 42%,
      rgba(8, 12, 22, 0.48) 100%
    ),
    url("https://drive.google.com/thumbnail?id=16jgITh_bnViEG0re3faRwlxG-wa6wUoc&sz=w2000") center center / cover no-repeat !important;
}

/* Mission / Vision dark box - curtain/product related background */
html body .cr-about-page-generated .cr-about-panel-dark {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(6, 14, 28, 0.92) 0%,
      rgba(9, 18, 34, 0.82) 48%,
      rgba(10, 22, 40, 0.76) 100%
    ),
    url("https://drive.google.com/thumbnail?id=1Hf0vL2wQSixd6N_8ccictpty8wS_Ctrj&sz=w2000") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Keep dark box content above image */
html body .cr-about-page-generated .cr-about-panel-dark > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Soft overlay for dark box */
html body .cr-about-page-generated .cr-about-panel-dark::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 90% 20%, rgba(212,160,23,0.14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08)) !important;
}

/* Yellow "Start with us" / CTA box - warm interior background */
html body .cr-about-page-generated .cr-about-panel-gold {
  position: relative !important;
  overflow: hidden !important;
  background-color: #d4a017 !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(255, 238, 190, 0.78) 0%,
      rgba(229, 182, 43, 0.70) 50%,
      rgba(198, 146, 19, 0.72) 100%
    ),
    url("https://drive.google.com/thumbnail?id=1t2YReXHS4isYVo4t0qMeB-MCTKgGI3EX&sz=w2000") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Keep yellow box content above image */
html body .cr-about-page-generated .cr-about-panel-gold > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Soft overlay for yellow box */
html body .cr-about-page-generated .cr-about-panel-gold::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 0% 100%, rgba(255,255,255,0.20), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.16), transparent 25%) !important;
}

/* Bottom About Us CTA banner - premium curtains related background */
html body .cr-about-page-generated .cr-about-cta {
  background:
    linear-gradient(
      90deg,
      rgba(6, 10, 20, 0.58) 0%,
      rgba(6, 10, 20, 0.66) 35%,
      rgba(6, 10, 20, 0.78) 100%
    ),
    url("https://drive.google.com/thumbnail?id=1ZMBfGnznnZrYPPcy1OZny34-wIRUy6Sv&sz=w2000") center center / cover no-repeat !important;
}

/* Mobile safety for About Us image boxes */
@media (max-width: 767px) {
  html body .cr-about-page-generated .cr-about-hero,
  html body .cr-about-page-generated .cr-about-panel-dark,
  html body .cr-about-page-generated .cr-about-panel-gold,
  html body .cr-about-page-generated .cr-about-cta {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* =====================================================
   CLASSROLL CONTACT US PAGE - SIMPLE PREMIUM DESIGN
   No image backgrounds / No heavy boxes
   Paste at the END of current CSS
===================================================== */

html body .cr-contact-original-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

html body #cr-contact-page-generated,
html body #cr-contact-page-generated * {
  box-sizing: border-box !important;
}

html body #cr-contact-page-generated {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  direction: rtl !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%) !important;
  padding: 70px 0 90px !important;
  overflow: hidden !important;
}

html body #cr-contact-page-generated .cr-contact-wrap {
  width: min(92vw, 1320px) !important;
  max-width: min(92vw, 1320px) !important;
  margin: 0 auto !important;
}

/* HERO - SIMPLE PREMIUM */
html body #cr-contact-page-generated .cr-contact-hero {
  position: relative !important;
  min-height: auto !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 0 54px !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.10) !important;
}

html body #cr-contact-page-generated .cr-contact-hero::before {
  display: none !important;
}

html body #cr-contact-page-generated .cr-contact-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  min-height: auto !important;
  display: block !important;
  padding: 0 !important;
}

html body #cr-contact-page-generated .cr-contact-hero-content {
  width: min(100%, 850px) !important;
  text-align: right !important;
  color: #111827 !important;
  margin-right: auto !important;
}

html body #cr-contact-page-generated .cr-contact-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #d4a017 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-bottom: 18px !important;
}

html body #cr-contact-page-generated .cr-contact-kicker::after {
  content: "" !important;
  width: 52px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
}

html body #cr-contact-page-generated .cr-contact-hero h1 {
  color: #111827 !important;
  font-size: clamp(42px, 5vw, 76px) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  margin: 0 0 18px !important;
  letter-spacing: -1px !important;
  text-shadow: none !important;
}

html body #cr-contact-page-generated .cr-contact-hero p {
  color: #5f6673 !important;
  font-size: 18px !important;
  line-height: 2 !important;
  margin: 0 0 30px !important;
  max-width: 780px !important;
}

html body #cr-contact-page-generated .cr-contact-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

html body #cr-contact-page-generated .cr-contact-btn {
  min-height: 50px !important;
  padding: 0 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  border: 1px solid transparent !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

html body #cr-contact-page-generated .cr-contact-btn:hover {
  transform: translateY(-2px) !important;
}

html body #cr-contact-page-generated .cr-contact-btn-gold {
  background: #d4a017 !important;
  color: #111827 !important;
  box-shadow: 0 14px 30px rgba(212,160,23,0.22) !important;
}

html body #cr-contact-page-generated .cr-contact-btn-light {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(17,24,39,0.14) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.06) !important;
  backdrop-filter: none !important;
}

/* MAIN LAYOUT - CLEAN */
html body #cr-contact-page-generated .cr-contact-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr) !important;
  gap: 70px !important;
  margin-top: 58px !important;
  align-items: start !important;
}

html body #cr-contact-page-generated .cr-contact-panel,
html body #cr-contact-page-generated .cr-contact-info-panel {
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* SECTION TITLE */
html body #cr-contact-page-generated .cr-contact-section-title {
  margin-bottom: 30px !important;
}

html body #cr-contact-page-generated .cr-contact-section-title span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #d4a017 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  margin-bottom: 12px !important;
}

html body #cr-contact-page-generated .cr-contact-section-title span::after {
  content: "" !important;
  width: 42px !important;
  height: 2px !important;
  background: #d4a017 !important;
  border-radius: 999px !important;
}

html body #cr-contact-page-generated .cr-contact-section-title h2 {
  color: #111827 !important;
  font-size: 34px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
}

html body #cr-contact-page-generated .cr-contact-section-title p {
  color: #6b7280 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  margin: 0 !important;
}

/* CONTACT DETAILS - NOT BOXED, CLEAN ROWS */
html body #cr-contact-page-generated .cr-contact-cards {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(17,24,39,0.10) !important;
}

html body #cr-contact-page-generated .cr-contact-card {
  position: relative !important;
  min-height: auto !important;
  padding: 24px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(17,24,39,0.10) !important;
  text-decoration: none !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  transition: transform 0.25s ease, border-color 0.25s ease !important;
}

html body #cr-contact-page-generated a.cr-contact-card:hover {
  transform: translateX(-4px) !important;
  border-color: rgba(212,160,23,0.55) !important;
  box-shadow: none !important;
}

html body #cr-contact-page-generated .cr-contact-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #fff8e6 !important;
  border: 1px solid rgba(212,160,23,0.25) !important;
  color: #d4a017 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
}

html body #cr-contact-page-generated .cr-contact-icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body #cr-contact-page-generated .cr-contact-card h3 {
  color: #111827 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 900 !important;
  margin: 0 0 5px !important;
}

html body #cr-contact-page-generated .cr-contact-card p {
  color: #6b7280 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  margin: 0 !important;
  direction: ltr !important;
  text-align: right !important;
  word-break: break-word !important;
}

html body #cr-contact-page-generated .cr-contact-empty {
  padding: 24px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(17,24,39,0.10) !important;
  color: #6b7280 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  text-align: right !important;
}

/* RIGHT INFO AREA - SIMPLE PREMIUM */
html body #cr-contact-page-generated .cr-contact-info-panel {
  position: relative !important;
  color: #111827 !important;
  background: transparent !important;
  background-image: none !important;
}

html body #cr-contact-page-generated .cr-contact-info-panel::before {
  display: none !important;
}

html body #cr-contact-page-generated .cr-contact-info-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 36px 0 0 !important;
  border-top: 3px solid #d4a017 !important;
}

html body #cr-contact-page-generated .cr-contact-info-panel h2 {
  color: #111827 !important;
  font-size: 34px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  margin: 0 0 14px !important;
}

html body #cr-contact-page-generated .cr-contact-info-panel p {
  color: #6b7280 !important;
  font-size: 15px !important;
  line-height: 2 !important;
  margin: 0 0 24px !important;
}

html body #cr-contact-page-generated .cr-contact-steps {
  display: grid !important;
  gap: 0 !important;
  margin: 28px 0 !important;
  border-top: 1px solid rgba(17,24,39,0.10) !important;
}

html body #cr-contact-page-generated .cr-contact-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 18px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(17,24,39,0.10) !important;
  backdrop-filter: none !important;
}

html body #cr-contact-page-generated .cr-contact-step strong {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: #d4a017 !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

html body #cr-contact-page-generated .cr-contact-step span {
  color: #111827 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 800 !important;
}

/* BOTTOM CTA - SIMPLE */
html body #cr-contact-page-generated .cr-contact-bottom {
  margin-top: 70px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(17,24,39,0.10) !important;
  border-bottom: 1px solid rgba(17,24,39,0.10) !important;
  box-shadow: none !important;
  padding: 34px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

html body #cr-contact-page-generated .cr-contact-bottom h3 {
  color: #111827 !important;
  font-size: 28px !important;
  line-height: 1.4 !important;
  font-weight: 900 !important;
  margin: 0 0 8px !important;
}

html body #cr-contact-page-generated .cr-contact-bottom p {
  color: #6b7280 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  margin: 0 !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  html body #cr-contact-page-generated {
    padding: 54px 0 72px !important;
  }

  html body #cr-contact-page-generated .cr-contact-main {
    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }
}

@media (max-width: 767px) {
  html body #cr-contact-page-generated {
    padding: 42px 0 60px !important;
  }

  html body #cr-contact-page-generated .cr-contact-hero {
    padding-bottom: 40px !important;
  }

  html body #cr-contact-page-generated .cr-contact-hero h1 {
    font-size: 42px !important;
  }

  html body #cr-contact-page-generated .cr-contact-hero p {
    font-size: 15px !important;
  }

  html body #cr-contact-page-generated .cr-contact-actions {
    width: 100% !important;
  }

  html body #cr-contact-page-generated .cr-contact-btn {
    width: 100% !important;
  }

  html body #cr-contact-page-generated .cr-contact-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html body #cr-contact-page-generated .cr-contact-icon {
    width: 44px !important;
    height: 44px !important;
  }

  html body #cr-contact-page-generated .cr-contact-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}


/* =====================================================
   CLASSROLL CONTACT PAGE - ENGLISH PUNCTUATION / DIRECTION FIX
   Keeps Arabic RTL, fixes English punctuation at sentence endings
===================================================== */

html body #cr-contact-page-generated.cr-contact-en {
  direction: ltr !important;
  text-align: left !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-wrap,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero-inner,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-main,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-panel,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-info-panel,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-info-content,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom {
  direction: ltr !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero-content {
  direction: ltr !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero h1,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-section-title,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-section-title h2,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-section-title p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-info-panel h2,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-info-panel p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-step span,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-card h3,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-card p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom h3,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom p {
  direction: ltr !important;
  unicode-bidi: plaintext !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-section-title,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-section-title h2,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-section-title p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-info-panel h2,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-info-panel p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-card h3,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-card p,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom h3,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom p {
  text-align: left !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero h1,
html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero p {
  text-align: center !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-actions {
  direction: ltr !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-hero .cr-contact-actions {
  justify-content: center !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-card {
  direction: ltr !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
}

html body #cr-contact-page-generated.cr-contact-en a.cr-contact-card:hover {
  transform: translateX(4px) !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-step {
  direction: ltr !important;
}

html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom {
  text-align: left !important;
}

html body #cr-contact-page-generated.cr-contact-ar {
  direction: rtl !important;
}

html body #cr-contact-page-generated.cr-contact-ar .cr-contact-hero h1,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-hero p,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-section-title h2,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-section-title p,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-info-panel h2,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-info-panel p,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-step span,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-card h3,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-card p,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-bottom h3,
html body #cr-contact-page-generated.cr-contact-ar .cr-contact-bottom p {
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}

@media (max-width: 767px) {
  html body #cr-contact-page-generated.cr-contact-en .cr-contact-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  html body #cr-contact-page-generated.cr-contact-en .cr-contact-bottom {
    align-items: flex-start !important;
  }
}


/* Mobile Arabic safety */


/* Mobile safety */


/* Arabic safety: keep arrows aligned after reducing the gap */


/* =====================================================
   CLASSROLL OUR CLIENTS PAGE - BIG PREMIUM CLIENT BOXES
   Fixed Google Drive client logos
   Paste at the END of CSS
===================================================== */

html body .cr-clients-original-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

html body #cr-clients-page-generated,
html body #cr-clients-page-generated * {
  box-sizing: border-box !important;
}

html body #cr-clients-page-generated {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(212,160,23,0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
  padding: 76px 0 96px !important;
  overflow: hidden !important;
}

html body #cr-clients-page-generated.cr-clients-ar {
  direction: rtl !important;
}

html body #cr-clients-page-generated.cr-clients-en {
  direction: ltr !important;
}

html body #cr-clients-page-generated .cr-clients-wrap {
  width: min(92vw, 1480px) !important;
  max-width: min(92vw, 1480px) !important;
  margin: 0 auto !important;
}

/* Header */
html body #cr-clients-page-generated .cr-clients-hero {
  text-align: center !important;
  padding: 0 0 56px !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.10) !important;
}

html body #cr-clients-page-generated .cr-clients-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  color: #d4a017 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  margin-bottom: 18px !important;
}

html body #cr-clients-page-generated .cr-clients-kicker::before,
html body #cr-clients-page-generated .cr-clients-kicker::after {
  content: "" !important;
  width: 56px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
}

html body #cr-clients-page-generated .cr-clients-hero h1 {
  color: #111827 !important;
  font-size: clamp(44px, 5vw, 78px) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  margin: 0 0 18px !important;
  letter-spacing: -1px !important;
}

html body #cr-clients-page-generated .cr-clients-hero p {
  color: #6b7280 !important;
  font-size: 17px !important;
  line-height: 2 !important;
  margin: 0 auto !important;
  max-width: 780px !important;
}

/* Grid */
html body #cr-clients-page-generated .cr-clients-area {
  padding-top: 54px !important;
}

html body #cr-clients-page-generated .cr-clients-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

html body #cr-clients-page-generated .cr-client-card {
  position: relative !important;
  min-height: 255px !important;
  padding: 38px 30px !important;
  border-radius: 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(229, 231, 235, 0.95) !important;
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.065) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body #cr-clients-page-generated .cr-client-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(212,160,23,0.10), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(17,24,39,0.04), transparent 34%) !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  pointer-events: none !important;
}

html body #cr-clients-page-generated .cr-client-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(212, 160, 23, 0.45) !important;
  box-shadow: 0 32px 72px rgba(15, 23, 42, 0.12) !important;
}

html body #cr-clients-page-generated .cr-client-card:hover::before {
  opacity: 1 !important;
}

html body #cr-clients-page-generated .cr-client-logo {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  max-width: 88% !important;
  max-height: 155px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}


html body #cr-clients-page-generated .cr-clients-note {
  margin-top: 42px !important;
  text-align: center !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/* Responsive */
@media (max-width: 1200px) {
  html body #cr-clients-page-generated .cr-clients-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html body #cr-clients-page-generated .cr-clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  html body #cr-clients-page-generated .cr-client-card {
    min-height: 220px !important;
  }
}

@media (max-width: 640px) {
  html body #cr-clients-page-generated {
    padding: 48px 0 66px !important;
  }

  html body #cr-clients-page-generated .cr-clients-hero {
    padding-bottom: 38px !important;
  }

  html body #cr-clients-page-generated .cr-clients-hero h1 {
    font-size: 42px !important;
  }

  html body #cr-clients-page-generated .cr-clients-hero p {
    font-size: 15px !important;
  }

  html body #cr-clients-page-generated .cr-clients-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  html body #cr-clients-page-generated .cr-client-card {
    min-height: 205px !important;
    border-radius: 24px !important;
  }

  html body #cr-clients-page-generated .cr-client-logo {
    max-height: 135px !important;
  }
}

/* =====================================================
   CLASSROLL DARK MODE ADD-ON
   Header icon version - Arabic + English
   Safe isolated styles, no layout damage
===================================================== */

html.cr-dark-mode,
html.cr-dark-mode body,
body.cr-dark-mode {
  color-scheme: dark !important;
  background: #0b1220 !important;
  color: #e5e7eb !important;
}

html.cr-dark-mode body {
  --cr-dark-bg: #0b1220;
  --cr-dark-surface: #111827;
  --cr-dark-surface-2: #17243a;
  --cr-dark-card: #111827;
  --cr-dark-border: rgba(255,255,255,0.12);
  --cr-dark-text: #f9fafb;
  --cr-dark-muted: #cbd5e1;
  --cr-dark-soft: rgba(212,160,23,0.12);
}

/* Header icon toggle */
html body .cr-dark-mode-logo-host {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

html body .cr-dark-mode-toggle {
  position: relative !important;
  z-index: 30 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212,160,23,0.35) !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  vertical-align: middle !important;
  flex: 0 0 auto !important;
}

html body .cr-dark-mode-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(212,160,23,0.70) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,0.18) !important;
}

html body .cr-dark-mode-toggle:focus-visible {
  outline: 2px solid rgba(212,160,23,0.85) !important;
  outline-offset: 2px !important;
}

html body .cr-dark-mode-toggle-icon {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #111827 !important;
  background: transparent !important;
  line-height: 1 !important;
}

html body .cr-dark-mode-toggle-text {
  display: none !important;
}

html.cr-dark-mode body .cr-dark-mode-toggle,
body.cr-dark-mode .cr-dark-mode-toggle {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: rgba(212,160,23,0.50) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.32) !important;
}

html.cr-dark-mode body .cr-dark-mode-toggle-icon,
body.cr-dark-mode .cr-dark-mode-toggle-icon {
  color: #f0bf2c !important;
}

html body .cr-dark-mode-header-fallback {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
}

html[dir="ltr"] body .cr-dark-mode-header-fallback,
html.cr-lang-en body .cr-dark-mode-header-fallback,
body.cr-lang-en .cr-dark-mode-header-fallback {
  right: auto !important;
  left: 18px !important;
}

/* Main page + common Salla surfaces */
html.cr-dark-mode body main,
html.cr-dark-mode body .main,
html.cr-dark-mode body .app,
html.cr-dark-mode body .s-block,
html.cr-dark-mode body .s-section,
html.cr-dark-mode body section:not(.crx-section),
html.cr-dark-mode body .container,
html.cr-dark-mode body .s-container {
  background-color: transparent !important;
  color: var(--cr-dark-text) !important;
}


html.cr-dark-mode body,
html.cr-dark-mode body .app,
html.cr-dark-mode body main,
html.cr-dark-mode body .main-content,
html.cr-dark-mode body .page-wrapper,
html.cr-dark-mode body .content,
html.cr-dark-mode body .site-content {
  background: var(--cr-dark-bg) !important;
}

html.cr-dark-mode body a,
html.cr-dark-mode body h1,
html.cr-dark-mode body h2,
html.cr-dark-mode body h3,
html.cr-dark-mode body h4,
html.cr-dark-mode body h5,
html.cr-dark-mode body h6,
html.cr-dark-mode body strong,
html.cr-dark-mode body .title,
html.cr-dark-mode body .section-title {
  color: var(--cr-dark-text) !important;
}

html.cr-dark-mode body p,
html.cr-dark-mode body span,
html.cr-dark-mode body li,
html.cr-dark-mode body small,
html.cr-dark-mode body label,
html.cr-dark-mode body .text-muted,
html.cr-dark-mode body .description,
html.cr-dark-mode body .subtitle {
  color: var(--cr-dark-muted) !important;
}

html.cr-dark-mode body input,
html.cr-dark-mode body textarea,
html.cr-dark-mode body select,
html.cr-dark-mode body .form-control,
html.cr-dark-mode body .search-input,
html.cr-dark-mode body .search-wrapper,
html.cr-dark-mode body .input-group,
html.cr-dark-mode body .dropdown-menu,
html.cr-dark-mode body .dropdown-panel {
  background: var(--cr-dark-surface) !important;
  color: var(--cr-dark-text) !important;
  border-color: var(--cr-dark-border) !important;
}

html.cr-dark-mode body button,
html.cr-dark-mode body .btn,
html.cr-dark-mode body .button,
html.cr-dark-mode body .s-button-btn {
  border-color: var(--cr-dark-border) !important;
}

html.cr-dark-mode body .card,
html.cr-dark-mode body .product,
html.cr-dark-mode body .product-card,
html.cr-dark-mode body .product-entry,
html.cr-dark-mode body .s-product-card-entry,
html.cr-dark-mode body salla-product-card,
html.cr-dark-mode body .box,
html.cr-dark-mode body .panel,
html.cr-dark-mode body .modal-content,
html.cr-dark-mode body .drawer__content,
html.cr-dark-mode body .offcanvas,
html.cr-dark-mode body .menu,
html.cr-dark-mode body .nav,
html.cr-dark-mode body .breadcrumb,
html.cr-dark-mode body .pagination,
html.cr-dark-mode body .widget,
html.cr-dark-mode body .accordion,
html.cr-dark-mode body .tab,
html.cr-dark-mode body .tabs,
html.cr-dark-mode body .s-block,
html.cr-dark-mode body .s-card,
html.cr-dark-mode body .s-slider-block,
html.cr-dark-mode body .s-slider-container {
  background: var(--cr-dark-surface) !important;
  color: var(--cr-dark-text) !important;
  border-color: var(--cr-dark-border) !important;
}

html.cr-dark-mode body .cr-main-menu-bar,
html.cr-dark-mode body .cr-main-menu-link,
html.cr-dark-mode body .cr-products-mega,
html.cr-dark-mode body .cr-products-mega-cat,
html.cr-dark-mode body #cr-classroll-experience .crsc-card,
html.cr-dark-mode body .cr-floating-help {
  background: var(--cr-dark-surface) !important;
  color: var(--cr-dark-text) !important;
  border-color: var(--cr-dark-border) !important;
}

html.cr-dark-mode body .cr-products-mega-cat:hover,
html.cr-dark-mode body #cr-classroll-experience .crsc-card:hover,
html.cr-dark-mode body #cr-classroll-experience .crsc-card.is-active,
html.cr-dark-mode body .cr-main-menu-link:hover,
html.cr-dark-mode body .cr-main-menu-link.cr-active {
  background: var(--cr-dark-surface-2) !important;
}

html.cr-dark-mode body .cr-cat-icon,
html.cr-dark-mode body #cr-classroll-experience .crsc-card-badge,
html.cr-dark-mode body .crx-btn-gold,
html.cr-dark-mode body .crsc-btn-primary {
  background: var(--cr-gold, #d4a017) !important;
  color: #111827 !important;
}

html.cr-dark-mode body .crx-btn-light,
html.cr-dark-mode body .crsc-btn-secondary {
  background: rgba(255,255,255,0.08) !important;
  color: var(--cr-dark-text) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

html.cr-dark-mode body img,
html.cr-dark-mode body video,
html.cr-dark-mode body iframe,
html.cr-dark-mode body svg {
  filter: brightness(0.94) !important;
}

html.cr-dark-mode body .crx-measure,
html.cr-dark-mode body .crx-final,
html.cr-dark-mode body #cr-classroll-experience .crsc-stage {
  color: #ffffff !important;
}

@media (max-width: 767px) {
  html body .cr-dark-mode-logo-host {
    gap: 8px !important;
  }

  html body .cr-dark-mode-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  html body .cr-dark-mode-toggle-icon {
    font-size: 16px !important;
  }

  html body .cr-dark-mode-header-fallback {
    top: 14px !important;
    right: 14px !important;
  }

  html[dir="ltr"] body .cr-dark-mode-header-fallback,
  html.cr-lang-en body .cr-dark-mode-header-fallback,
  body.cr-lang-en .cr-dark-mode-header-fallback {
    left: 14px !important;
    right: auto !important;
  }
}

/* =====================================================
   CLASSROLL MOBILE OPTIMIZATION ADD-ON
   Safe responsive fixes for Salla Arabic + English
   Added at the end to avoid damaging desktop layout
===================================================== */

html,
html body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html body img,
html body video,
html body iframe {
  max-width: 100% !important;
}

html body .cr-mobile-safe-hidden {
  overflow-x: hidden !important;
}

/* Keep desktop untouched, apply strong fixes only on tablets/mobile */
@media (max-width: 1024px) {
  html body {
    overflow-x: hidden !important;
  }

  html body .s-container,
  html body .container,
  html body .container-fluid,
  html body [class*="container"] {
    max-width: 100% !important;
  }

  html body .cr-force-banner-box,
  html body .cr-banner-width-sync,
  html body .cr-product-align-section,
  html body .cr-products-wide-shell,
  html body #cr-classroll-experience .crx-wrap {
    width: min(94vw, 100%) !important;
    max-width: min(94vw, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .cr-products-mega-inner {
    max-width: 94vw !important;
    padding: 22px 18px !important;
    gap: 18px !important;
  }

  html body .cr-products-mega-side {
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  html body .cr-products-mega-title {
    font-size: 28px !important;
  }

  html body .crx-section {
    padding: 52px 0 !important;
  }

  html body .crx-title h2 {
    font-size: 28px !important;
  }

  html body .crx-title p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  html body #cr-classroll-experience .crsc-shell {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  html body #cr-classroll-experience .crsc-stage,
  html body #cr-classroll-experience .crsc-stage-inner {
    min-height: 520px !important;
  }

  html body #cr-classroll-experience .crsc-stage-content {
    width: min(72%, 620px) !important;
  }

  html body .crx-measure,
  html body .crx-final {
    border-radius: 24px !important;
  }
}


@media (max-width: 420px) {
  html body .cr-main-menu-link {
    min-width: 88px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  html body .cr-force-banner-box img,
  html body .cr-banner-width-sync img,
  html body .main-slider img,
  html body .swiper-slide img {
    min-height: 200px !important;
  }

  html body .cr-products-five-row .swiper-slide {
    width: calc((100% - 10px) / 2) !important;
    min-width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
  }

  html body #cr-classroll-experience .crsc-card-title {
    left: 92px !important;
    font-size: 15px !important;
  }

  html body #cr-classroll-experience .crsc-card-badge {
    min-width: 56px !important;
    padding: 0 10px !important;
  }
}

/* =====================================================
   CLASSROLL FLOATING WHATSAPP + SCROLL TOP ADD-ON
   Replaces floating help text button with WhatsApp icon
   Adds scroll-to-top arrow button
===================================================== */

html body .cr-floating-help,
html body .cr-floating-whatsapp {
  position: fixed !important;
  right: 18px !important;
  bottom: 22px !important;
  z-index: 100000 !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 16px 38px rgba(37,211,102,0.32), 0 8px 22px rgba(15,23,42,0.18) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease !important;
}

html body .cr-floating-help:hover,
html body .cr-floating-whatsapp:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 44px rgba(37,211,102,0.40), 0 12px 28px rgba(15,23,42,0.22) !important;
}

html body .cr-floating-help span,
html body .cr-floating-whatsapp span {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .cr-floating-help svg,
html body .cr-floating-whatsapp svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  fill: currentColor !important;
}

/* Scroll to top button */
html body .cr-scroll-top-btn {
  position: fixed !important;
  right: 18px !important;
  bottom: 88px !important;
  z-index: 100000 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid rgba(212,160,23,0.35) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.24) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.25s ease !important;
}

html body .cr-scroll-top-btn.cr-scroll-top-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

html body .cr-scroll-top-btn:hover {
  background: var(--cr-gold, #d4a017) !important;
  color: #111827 !important;
  transform: translateY(-3px) !important;
}

html body .cr-scroll-top-btn svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html.cr-dark-mode body .cr-scroll-top-btn,
body.cr-dark-mode .cr-scroll-top-btn {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: rgba(212,160,23,0.45) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.38) !important;
}

html.cr-dark-mode body .cr-scroll-top-btn:hover,
body.cr-dark-mode .cr-scroll-top-btn:hover {
  background: var(--cr-gold, #d4a017) !important;
  color: #111827 !important;
}

/* Keep both buttons correctly positioned in Arabic and English */
html[dir="ltr"] body .cr-floating-help,
html[dir="ltr"] body .cr-floating-whatsapp,
html[dir="ltr"] body .cr-scroll-top-btn,
html.cr-lang-en body .cr-floating-help,
html.cr-lang-en body .cr-floating-whatsapp,
html.cr-lang-en body .cr-scroll-top-btn,
body.cr-lang-en .cr-floating-help,
body.cr-lang-en .cr-floating-whatsapp,
body.cr-lang-en .cr-scroll-top-btn {
  right: 18px !important;
  left: auto !important;
}

@media (max-width: 767px) {
  html body .cr-floating-help,
  html body .cr-floating-whatsapp {
    right: 12px !important;
    bottom: 14px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  html body .cr-floating-help svg,
  html body .cr-floating-whatsapp svg {
    width: 26px !important;
    height: 26px !important;
  }

  html body .cr-scroll-top-btn {
    right: 12px !important;
    bottom: 76px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html body .cr-scroll-top-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  html[dir="ltr"] body .cr-floating-help,
  html[dir="ltr"] body .cr-floating-whatsapp,
  html[dir="ltr"] body .cr-scroll-top-btn,
  html.cr-lang-en body .cr-floating-help,
  html.cr-lang-en body .cr-floating-whatsapp,
  html.cr-lang-en body .cr-scroll-top-btn,
  body.cr-lang-en .cr-floating-help,
  body.cr-lang-en .cr-floating-whatsapp,
  body.cr-lang-en .cr-scroll-top-btn {
    right: 12px !important;
    left: auto !important;
  }
}

/* =====================================================
   FOOTER COMPANY TITLE LOGO ONLY
   Does not change footer layout or columns
===================================================== */
html body footer .cr-footer-company-title-logo-ready,
html body .store-footer .cr-footer-company-title-logo-ready,
html body .s-footer .cr-footer-company-title-logo-ready {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body footer .cr-footer-company-title-logo-ready .cr-footer-company-title-logo,
html body .store-footer .cr-footer-company-title-logo-ready .cr-footer-company-title-logo,
html body .s-footer .cr-footer-company-title-logo-ready .cr-footer-company-title-logo {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}

@media (max-width: 767px) {
  html body footer .cr-footer-company-title-logo-ready,
  html body .store-footer .cr-footer-company-title-logo-ready,
  html body .s-footer .cr-footer-company-title-logo-ready {
    justify-content: center !important;
    text-align: center !important;
  }

  html body footer .cr-footer-company-title-logo-ready .cr-footer-company-title-logo,
  html body .store-footer .cr-footer-company-title-logo-ready .cr-footer-company-title-logo,
  html body .s-footer .cr-footer-company-title-logo-ready .cr-footer-company-title-logo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* =====================================================
   FOOTER CONTACT OLD SIMPLE BRAND DESIGN V13
   Matches the reference image: logo + Classroll + subtitle + icon row
   It touches only the "تواصل معنا" / Contact column.
===================================================== */

html body footer .cr-footer-contact-brand-v13,
html body .store-footer .cr-footer-contact-brand-v13,
html body .s-footer .cr-footer-contact-brand-v13 {
  width: 100% !important;
  max-width: 260px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  direction: rtl !important;
}

html body footer .cr-footer-contact-brand-v13-head,
html body .store-footer .cr-footer-contact-brand-v13-head,
html body .s-footer .cr-footer-contact-brand-v13-head {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  direction: ltr !important;
  text-decoration: none !important;
}

html body footer .cr-footer-contact-brand-v13-mark,
html body .store-footer .cr-footer-contact-brand-v13-mark,
html body .s-footer .cr-footer-contact-brand-v13-mark {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 17px !important;
  background: #0f172a !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.13) !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
}

html body footer .cr-footer-contact-brand-v13-mark::before,
html body .store-footer .cr-footer-contact-brand-v13-mark::before,
html body .s-footer .cr-footer-contact-brand-v13-mark::before {
  content: "" !important;
  position: absolute !important;
  top: 13px !important;
  left: 13px !important;
  right: 13px !important;
  height: 5px !important;
  background: #d4a017 !important;
  border-radius: 999px !important;
}

html body footer .cr-footer-contact-brand-v13-bars,
html body .store-footer .cr-footer-contact-brand-v13-bars,
html body .s-footer .cr-footer-contact-brand-v13-bars {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 23px !important;
  bottom: 13px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
}

html body footer .cr-footer-contact-brand-v13-bars span,
html body .store-footer .cr-footer-contact-brand-v13-bars span,
html body .s-footer .cr-footer-contact-brand-v13-bars span {
  width: 5px !important;
  height: 20px !important;
  border-radius: 4px !important;
  display: block !important;
  background: #d4a017 !important;
}

html body footer .cr-footer-contact-brand-v13-text,
html body .store-footer .cr-footer-contact-brand-v13-text,
html body .s-footer .cr-footer-contact-brand-v13-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

html body footer .cr-footer-contact-brand-v13-name,
html body .store-footer .cr-footer-contact-brand-v13-name,
html body .s-footer .cr-footer-contact-brand-v13-name {
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

html body footer .cr-footer-contact-brand-v13-sub,
html body .store-footer .cr-footer-contact-brand-v13-sub,
html body .s-footer .cr-footer-contact-brand-v13-sub {
  color: #d4a017 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

html body footer .cr-footer-contact-brand-v13-icons,
html body .store-footer .cr-footer-contact-brand-v13-icons,
html body .s-footer .cr-footer-contact-brand-v13-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 15px auto 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  direction: ltr !important;
}

html body footer .cr-footer-contact-brand-v13-icons a,
html body .store-footer .cr-footer-contact-brand-v13-icons a,
html body .s-footer .cr-footer-contact-brand-v13-icons a {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: color .2s ease, transform .2s ease !important;
}

html body footer .cr-footer-contact-brand-v13-icons a:hover,
html body .store-footer .cr-footer-contact-brand-v13-icons a:hover,
html body .s-footer .cr-footer-contact-brand-v13-icons a:hover {
  color: #d4a017 !important;
  transform: translateY(-1px) !important;
}

html body footer .cr-footer-contact-brand-v13-icons svg,
html body .store-footer .cr-footer-contact-brand-v13-icons svg,
html body .s-footer .cr-footer-contact-brand-v13-icons svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body footer .cr-footer-contact-brand-v13-hide,
html body .store-footer .cr-footer-contact-brand-v13-hide,
html body .s-footer .cr-footer-contact-brand-v13-hide {
  display: none !important;
}

@media (max-width: 767px) {
  html body footer .cr-footer-contact-brand-v13-head,
  html body .store-footer .cr-footer-contact-brand-v13-head,
  html body .s-footer .cr-footer-contact-brand-v13-head {
    gap: 10px !important;
  }

  html body footer .cr-footer-contact-brand-v13-mark,
  html body .store-footer .cr-footer-contact-brand-v13-mark,
  html body .s-footer .cr-footer-contact-brand-v13-mark {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 15px !important;
  }

  html body footer .cr-footer-contact-brand-v13-name,
  html body .store-footer .cr-footer-contact-brand-v13-name,
  html body .s-footer .cr-footer-contact-brand-v13-name {
    font-size: 21px !important;
  }

  html body footer .cr-footer-contact-brand-v13-icons,
  html body .store-footer .cr-footer-contact-brand-v13-icons,
  html body .s-footer .cr-footer-contact-brand-v13-icons {
    gap: 19px !important;
  }
}

/* =====================================================
   CLASSROLL FOOTER CONTACT HARD LEFT V14
   Moves only the Classroll contact/logo block to the hard left
   Keeps footer structure, links, company description and payment icons unchanged
===================================================== */

@media (min-width: 992px) {
  html body footer,
  html body .store-footer,
  html body .s-footer {
    position: relative !important;
  }

  html body footer .cr-footer-contact-hard-left-v14,
  html body .store-footer .cr-footer-contact-hard-left-v14,
  html body .s-footer .cr-footer-contact-hard-left-v14 {
    position: absolute !important;
    left: max(70px, calc(50% - 575px)) !important;
    right: auto !important;
    top: 58px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 5 !important;
    text-align: center !important;
  }

  html body footer .cr-footer-contact-hard-left-v14 .cr-footer-contact-brand-v13,
  html body .store-footer .cr-footer-contact-hard-left-v14 .cr-footer-contact-brand-v13,
  html body .s-footer .cr-footer-contact-hard-left-v14 .cr-footer-contact-brand-v13 {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  html body footer .cr-footer-contact-hard-left-v14,
  html body .store-footer .cr-footer-contact-hard-left-v14,
  html body .s-footer .cr-footer-contact-hard-left-v14 {
    left: 36px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }

  html body footer .cr-footer-contact-hard-left-v14 .cr-footer-contact-brand-v13,
  html body .store-footer .cr-footer-contact-hard-left-v14 .cr-footer-contact-brand-v13,
  html body .s-footer .cr-footer-contact-hard-left-v14 .cr-footer-contact-brand-v13 {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }
}

@media (max-width: 991px) {
  html body footer .cr-footer-contact-hard-left-v14,
  html body .store-footer .cr-footer-contact-hard-left-v14,
  html body .s-footer .cr-footer-contact-hard-left-v14 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}



/* =====================================================
   FOOTER IMPORTANT LINKS V15
   Adds all main page links under "روابط مهمة" only
===================================================== */

html body footer .cr-footer-important-links-v15,
html body .store-footer .cr-footer-important-links-v15,
html body .s-footer .cr-footer-important-links-v15 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 260px !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: center !important;
  direction: rtl !important;
}

html body footer .cr-footer-important-links-v15 a,
html body .store-footer .cr-footer-important-links-v15 a,
html body .s-footer .cr-footer-important-links-v15 a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 24px !important;
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color .2s ease, transform .2s ease !important;
}

html body footer .cr-footer-important-links-v15 a::before,
html body .store-footer .cr-footer-important-links-v15 a::before,
html body .s-footer .cr-footer-important-links-v15 a::before {
  content: "‹" !important;
  color: #d4a017 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  transform: translateY(-1px) !important;
}

html body footer .cr-footer-important-links-v15 a:hover,
html body .store-footer .cr-footer-important-links-v15 a:hover,
html body .s-footer .cr-footer-important-links-v15 a:hover {
  color: #b8860b !important;
  transform: translateX(-2px) !important;
}

@media (min-width: 992px) {
  html body footer .cr-footer-important-links-v15,
  html body .store-footer .cr-footer-important-links-v15,
  html body .s-footer .cr-footer-important-links-v15 {
    max-width: 280px !important;
  }
}

@media (max-width: 767px) {
  html body footer .cr-footer-important-links-v15,
  html body .store-footer .cr-footer-important-links-v15,
  html body .s-footer .cr-footer-important-links-v15 {
    gap: 10px !important;
    margin-top: 14px !important;
  }

  html body footer .cr-footer-important-links-v15 a,
  html body .store-footer .cr-footer-important-links-v15 a,
  html body .s-footer .cr-footer-important-links-v15 a {
    font-size: 13px !important;
    white-space: normal !important;
  }
}


/* =====================================================
   FOOTER IMPORTANT LINKS V16
   Split "روابط مهمة" into 2 columns:
   first 4 links in first column, last 2 links in second column
===================================================== */

html body footer .cr-footer-important-links-v15,
html body .store-footer .cr-footer-important-links-v15,
html body .s-footer .cr-footer-important-links-v15 {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-items: start !important;
  justify-content: center !important;
  column-gap: 36px !important;
  row-gap: 12px !important;
  width: auto !important;
  max-width: none !important;
  margin: 18px auto 0 !important;
  padding: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

/* First 4 links: right/first column */
html body footer .cr-footer-important-links-v15 a:nth-child(1),
html body footer .cr-footer-important-links-v15 a:nth-child(2),
html body footer .cr-footer-important-links-v15 a:nth-child(3),
html body footer .cr-footer-important-links-v15 a:nth-child(4),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(1),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(2),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(3),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(4),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(1),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(2),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(3),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(4) {
  grid-column: 1 !important;
}

/* Last 2 links: second column beside the first 4 links */
html body footer .cr-footer-important-links-v15 a:nth-child(5),
html body footer .cr-footer-important-links-v15 a:nth-child(6),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(5),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(6),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(5),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(6) {
  grid-column: 2 !important;
}

/* Keep the row order clean */
html body footer .cr-footer-important-links-v15 a:nth-child(1),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(1),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(1) { grid-row: 1 !important; }

html body footer .cr-footer-important-links-v15 a:nth-child(2),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(2),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(2) { grid-row: 2 !important; }

html body footer .cr-footer-important-links-v15 a:nth-child(3),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(3),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(3) { grid-row: 3 !important; }

html body footer .cr-footer-important-links-v15 a:nth-child(4),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(4),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(4) { grid-row: 4 !important; }

html body footer .cr-footer-important-links-v15 a:nth-child(5),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(5),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(5) { grid-row: 1 !important; }

html body footer .cr-footer-important-links-v15 a:nth-child(6),
html body .store-footer .cr-footer-important-links-v15 a:nth-child(6),
html body .s-footer .cr-footer-important-links-v15 a:nth-child(6) { grid-row: 2 !important; }

html body footer .cr-footer-important-links-v15 a,
html body .store-footer .cr-footer-important-links-v15 a,
html body .s-footer .cr-footer-important-links-v15 a {
  justify-content: flex-start !important;
  text-align: right !important;
}

@media (max-width: 767px) {
  html body footer .cr-footer-important-links-v15,
  html body .store-footer .cr-footer-important-links-v15,
  html body .s-footer .cr-footer-important-links-v15 {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 320px !important;
    text-align: center !important;
  }

  html body footer .cr-footer-important-links-v15 a,
  html body .store-footer .cr-footer-important-links-v15 a,
  html body .s-footer .cr-footer-important-links-v15 a {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =====================================================
   CLASSROLL FOOTER ENGLISH FIX V17
   1) In English/LTR: move the contact brand block to the right.
   2) In English/LTR: keep important links readable and translated.
===================================================== */

@media (min-width: 992px) {
  html.cr-lang-en body footer .cr-footer-contact-hard-left-v14,
  html.cr-lang-en body .store-footer .cr-footer-contact-hard-left-v14,
  html.cr-lang-en body .s-footer .cr-footer-contact-hard-left-v14,
  body.cr-lang-en footer .cr-footer-contact-hard-left-v14,
  body.cr-lang-en .store-footer .cr-footer-contact-hard-left-v14,
  body.cr-lang-en .s-footer .cr-footer-contact-hard-left-v14,
  html[dir="ltr"] body footer .cr-footer-contact-hard-left-v14,
  html[dir="ltr"] body .store-footer .cr-footer-contact-hard-left-v14,
  html[dir="ltr"] body .s-footer .cr-footer-contact-hard-left-v14 {
    right: max(70px, calc(50% - 575px)) !important;
    left: auto !important;
    text-align: center !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  html.cr-lang-en body footer .cr-footer-contact-hard-left-v14,
  html.cr-lang-en body .store-footer .cr-footer-contact-hard-left-v14,
  html.cr-lang-en body .s-footer .cr-footer-contact-hard-left-v14,
  body.cr-lang-en footer .cr-footer-contact-hard-left-v14,
  body.cr-lang-en .store-footer .cr-footer-contact-hard-left-v14,
  body.cr-lang-en .s-footer .cr-footer-contact-hard-left-v14,
  html[dir="ltr"] body footer .cr-footer-contact-hard-left-v14,
  html[dir="ltr"] body .store-footer .cr-footer-contact-hard-left-v14,
  html[dir="ltr"] body .s-footer .cr-footer-contact-hard-left-v14 {
    right: 36px !important;
    left: auto !important;
  }
}

html.cr-lang-en body footer .cr-footer-contact-brand-v13-sub,
html.cr-lang-en body .store-footer .cr-footer-contact-brand-v13-sub,
html.cr-lang-en body .s-footer .cr-footer-contact-brand-v13-sub,
body.cr-lang-en footer .cr-footer-contact-brand-v13-sub,
body.cr-lang-en .store-footer .cr-footer-contact-brand-v13-sub,
body.cr-lang-en .s-footer .cr-footer-contact-brand-v13-sub,
html[dir="ltr"] body footer .cr-footer-contact-brand-v13-sub,
html[dir="ltr"] body .store-footer .cr-footer-contact-brand-v13-sub,
html[dir="ltr"] body .s-footer .cr-footer-contact-brand-v13-sub {
  font-size: 12px !important;
}

html.cr-lang-en body footer .cr-footer-important-links-v15,
html.cr-lang-en body .store-footer .cr-footer-important-links-v15,
html.cr-lang-en body .s-footer .cr-footer-important-links-v15,
body.cr-lang-en footer .cr-footer-important-links-v15,
body.cr-lang-en .store-footer .cr-footer-important-links-v15,
body.cr-lang-en .s-footer .cr-footer-important-links-v15,
html[dir="ltr"] body footer .cr-footer-important-links-v15,
html[dir="ltr"] body .store-footer .cr-footer-important-links-v15,
html[dir="ltr"] body .s-footer .cr-footer-important-links-v15 {
  direction: ltr !important;
  text-align: left !important;
  column-gap: 40px !important;
}

html.cr-lang-en body footer .cr-footer-important-links-v15 a,
html.cr-lang-en body .store-footer .cr-footer-important-links-v15 a,
html.cr-lang-en body .s-footer .cr-footer-important-links-v15 a,
body.cr-lang-en footer .cr-footer-important-links-v15 a,
body.cr-lang-en .store-footer .cr-footer-important-links-v15 a,
body.cr-lang-en .s-footer .cr-footer-important-links-v15 a,
html[dir="ltr"] body footer .cr-footer-important-links-v15 a,
html[dir="ltr"] body .store-footer .cr-footer-important-links-v15 a,
html[dir="ltr"] body .s-footer .cr-footer-important-links-v15 a {
  text-align: left !important;
  justify-content: flex-start !important;
}

html.cr-lang-en body footer .cr-footer-important-links-v15 a::before,
html.cr-lang-en body .store-footer .cr-footer-important-links-v15 a::before,
html.cr-lang-en body .s-footer .cr-footer-important-links-v15 a::before,
body.cr-lang-en footer .cr-footer-important-links-v15 a::before,
body.cr-lang-en .store-footer .cr-footer-important-links-v15 a::before,
body.cr-lang-en .s-footer .cr-footer-important-links-v15 a::before,
html[dir="ltr"] body footer .cr-footer-important-links-v15 a::before,
html[dir="ltr"] body .store-footer .cr-footer-important-links-v15 a::before,
html[dir="ltr"] body .s-footer .cr-footer-important-links-v15 a::before {
  content: "›" !important;
}

@media (max-width: 767px) {
  html.cr-lang-en body footer .cr-footer-important-links-v15,
  html.cr-lang-en body .store-footer .cr-footer-important-links-v15,
  html.cr-lang-en body .s-footer .cr-footer-important-links-v15,
  body.cr-lang-en footer .cr-footer-important-links-v15,
  body.cr-lang-en .store-footer .cr-footer-important-links-v15,
  body.cr-lang-en .s-footer .cr-footer-important-links-v15,
  html[dir="ltr"] body footer .cr-footer-important-links-v15,
  html[dir="ltr"] body .store-footer .cr-footer-important-links-v15,
  html[dir="ltr"] body .s-footer .cr-footer-important-links-v15,
  html.cr-lang-en body footer .cr-footer-important-links-v15 a,
  html.cr-lang-en body .store-footer .cr-footer-important-links-v15 a,
  html.cr-lang-en body .s-footer .cr-footer-important-links-v15 a,
  body.cr-lang-en footer .cr-footer-important-links-v15 a,
  body.cr-lang-en .store-footer .cr-footer-important-links-v15 a,
  body.cr-lang-en .s-footer .cr-footer-important-links-v15 a,
  html[dir="ltr"] body footer .cr-footer-important-links-v15 a,
  html[dir="ltr"] body .store-footer .cr-footer-important-links-v15 a,
  html[dir="ltr"] body .s-footer .cr-footer-important-links-v15 a {
    text-align: center !important;
    justify-content: center !important;
  }
}

/* =====================================================
   CLASSROLL ABOUT US CEO SIMPLE SECTION V19
   Only appears on About Us / من نحن page page-1177593605
===================================================== */

html body .cr-about-ceo-simple-v19 {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 36px auto 42px !important;
  padding: 28px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08) !important;
  color: #111827 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body .cr-about-ceo-simple-v19 * {
  box-sizing: border-box !important;
}

html body .cr-about-ceo-simple-inner-v19 {
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 26px !important;
  align-items: center !important;
}

html body .cr-about-ceo-simple-photo-box-v19 {
  width: 180px !important;
  height: 180px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.11) !important;
}

html body .cr-about-ceo-simple-photo-v19 {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
}

html body .cr-about-ceo-simple-content-v19 {
  min-width: 0 !important;
}

html body .cr-about-ceo-simple-role-v19 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  margin: 0 0 10px !important;
  background: rgba(212, 160, 23, 0.12) !important;
  color: #d4a017 !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

html body .cr-about-ceo-simple-name-v19 {
  margin: 0 0 14px !important;
  color: #111827 !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

html body .cr-about-ceo-simple-text-v19 {
  margin: 0 !important;
  color: #374151 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  font-weight: 500 !important;
}

html body .cr-about-ceo-simple-text-v19 p {
  margin: 0 0 10px !important;
}

html body .cr-about-ceo-simple-text-v19 p:last-child {
  margin-bottom: 0 !important;
}

html body .cr-about-ceo-simple-text-v19 strong {
  color: #111827 !important;
  font-weight: 900 !important;
}

html[dir="rtl"] body .cr-about-ceo-simple-v19,
html[lang^="ar"] body .cr-about-ceo-simple-v19,
html.cr-lang-ar body .cr-about-ceo-simple-v19 {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="ltr"] body .cr-about-ceo-simple-v19,
html[lang^="en"] body .cr-about-ceo-simple-v19,
html.cr-lang-en body .cr-about-ceo-simple-v19 {
  direction: ltr !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  html body .cr-about-ceo-simple-v19 {
    padding: 22px !important;
    border-radius: 18px !important;
    margin: 28px auto 34px !important;
  }

  html body .cr-about-ceo-simple-inner-v19 {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  html body .cr-about-ceo-simple-photo-box-v19 {
    width: 150px !important;
    height: 150px !important;
  }

  html body .cr-about-ceo-simple-content-v19 {
    text-align: center !important;
  }

  html body .cr-about-ceo-simple-text-v19 {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}

/* =====================================================
   CLASSROLL ABOUT US CEO FINAL POSITION V20
   - About Us page only
   - Move CEO section to the end of the page
   - Bigger image box
   - Simple clean design
===================================================== */
html body .cr-about-ceo-simple-v19 {
  max-width: 1120px !important;
  width: calc(100% - 32px) !important;
  margin: 80px auto 70px !important;
  padding: 34px 38px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}

html body .cr-about-ceo-simple-inner-v19 {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 36px !important;
}

html body .cr-about-ceo-simple-photo-box-v19 {
  width: 260px !important;
  height: 260px !important;
  border-radius: 26px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(17, 24, 39, 0.10) !important;
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.14) !important;
  overflow: hidden !important;
  margin: 0 auto !important;
}

html body .cr-about-ceo-simple-photo-v19 {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  display: block !important;
}

html body .cr-about-ceo-simple-role-v19 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 10px !important;
  padding: 5px 14px !important;
  background: rgba(212, 160, 23, 0.12) !important;
  color: #d4a017 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html body .cr-about-ceo-simple-name-v19 {
  margin: 0 0 16px !important;
  color: #071228 !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

html body .cr-about-ceo-simple-text-v19 {
  color: #1f2937 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  font-weight: 500 !important;
}

html body .cr-about-ceo-simple-text-v19 p {
  margin: 0 0 12px !important;
}

html body .cr-about-ceo-simple-text-v19 p:last-child {
  margin-bottom: 0 !important;
}

html[dir="rtl"] body .cr-about-ceo-simple-inner-v19,
html[lang^="ar"] body .cr-about-ceo-simple-inner-v19,
html.cr-lang-ar body .cr-about-ceo-simple-inner-v19 {
  direction: rtl !important;
}

html[dir="rtl"] body .cr-about-ceo-simple-content-v19,
html[lang^="ar"] body .cr-about-ceo-simple-content-v19,
html.cr-lang-ar body .cr-about-ceo-simple-content-v19 {
  text-align: right !important;
}

html[dir="ltr"] body .cr-about-ceo-simple-inner-v19,
html[lang^="en"] body .cr-about-ceo-simple-inner-v19,
html.cr-lang-en body .cr-about-ceo-simple-inner-v19 {
  direction: ltr !important;
}

html[dir="ltr"] body .cr-about-ceo-simple-content-v19,
html[lang^="en"] body .cr-about-ceo-simple-content-v19,
html.cr-lang-en body .cr-about-ceo-simple-content-v19 {
  text-align: left !important;
}

@media (max-width: 768px) {
  html body .cr-about-ceo-simple-v19 {
    width: calc(100% - 24px) !important;
    margin: 56px auto 48px !important;
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  html body .cr-about-ceo-simple-inner-v19 {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: center !important;
  }

  html body .cr-about-ceo-simple-photo-box-v19 {
    width: 190px !important;
    height: 190px !important;
    border-radius: 22px !important;
  }

  html body .cr-about-ceo-simple-photo-v19 {
    border-radius: 17px !important;
  }

  html body .cr-about-ceo-simple-content-v19 {
    text-align: center !important;
  }
}

/* =====================================================
   CLASSROLL CONTACT PAGE V23
   Simple design - no images - automatic Salla contact values
   Page only: Contact Us / تواصل معنا
===================================================== */

html body.cr-contact-page-v23-active .cr-contact-page-v23-hide-default,
html body.cr-contact-page-v23-active #cr-contact-page-v22,
html body.cr-contact-page-v23-active .cr-contact-page-v22,
html body.cr-contact-page-v23-active .breadcrumb,
html body.cr-contact-page-v23-active .breadcrumbs,
html body.cr-contact-page-v23-active .s-breadcrumb,
html body.cr-contact-page-v23-active [class*="breadcrumb"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.cr-contact-page-v23-active .cr-contact-page-v23-mount > :not(#cr-contact-page-v23) {
  display: none !important;
}

html body #cr-contact-page-v23,
html body .cr-contact-page-v23 {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 48px auto 74px !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  direction: rtl !important;
  font-family: inherit !important;
}

html[dir="ltr"] body #cr-contact-page-v23,
html[dir="ltr"] body .cr-contact-page-v23,
html.cr-lang-en body #cr-contact-page-v23,
html.cr-lang-en body .cr-contact-page-v23,
body.cr-lang-en #cr-contact-page-v23,
body.cr-lang-en .cr-contact-page-v23 {
  direction: ltr !important;
}

html body .cr-contact-page-v23-card {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 28px !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08) !important;
  padding: 34px !important;
}

html body .cr-contact-page-v23-card::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: -70px !important;
  top: -80px !important;
  width: 190px !important;
  height: 190px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.13) !important;
  pointer-events: none !important;
}

html body .cr-contact-page-v23-card::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: -90px !important;
  bottom: -110px !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.04) !important;
  pointer-events: none !important;
}

html body .cr-contact-page-v23-inner {
  position: relative !important;
  z-index: 2 !important;
}

html body .cr-contact-page-v23-head {
  max-width: 760px !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
}

html body .cr-contact-page-v23-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.13) !important;
  color: #d4a017 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 0 12px !important;
}

html body .cr-contact-page-v23-title {
  color: #0f172a !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.03em !important;
}

html body .cr-contact-page-v23-subtitle {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  font-weight: 500 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
}

html body .cr-contact-page-v23-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 24px !important;
  align-items: stretch !important;
}

html body .cr-contact-page-v23-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body .cr-contact-page-v23-info {
  min-height: 104px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

html body a.cr-contact-page-v23-info:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10) !important;
  border-color: rgba(212, 160, 23, 0.35) !important;
}

html body .cr-contact-page-v23-info-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .cr-contact-page-v23-info strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

html body .cr-contact-page-v23-info-value {
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
  direction: ltr !important;
  text-align: inherit !important;
  word-break: break-word !important;
}

html body .cr-contact-page-v23-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f172a !important;
  color: #d4a017 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12) !important;
}

html body .cr-contact-page-v23-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .cr-contact-page-v23-side {
  background: #0b0f19 !important;
  border-radius: 24px !important;
  padding: 26px !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100% !important;
}

html body .cr-contact-page-v23-side::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: -54px !important;
  top: -54px !important;
  width: 145px !important;
  height: 145px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.20) !important;
}

html body .cr-contact-page-v23-side > * {
  position: relative !important;
  z-index: 2 !important;
}

html body .cr-contact-page-v23-side h2 {
  color: #ffffff !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
  margin: 0 0 12px !important;
}

html body .cr-contact-page-v23-side p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  margin: 0 0 22px !important;
}

html body .cr-contact-page-v23-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
  color: #0b0f19 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 30px rgba(212, 160, 23, 0.24) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

html body .cr-contact-page-v23-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px rgba(212, 160, 23, 0.32) !important;
}

html body .cr-contact-page-v23-cta svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

html body .cr-contact-page-v23-note {
  margin: 22px 0 0 !important;
  padding: 14px 18px !important;
  background: rgba(212, 160, 23, 0.09) !important;
  border: 1px solid rgba(212, 160, 23, 0.22) !important;
  border-radius: 16px !important;
  color: #7c5d0d !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

@media (max-width: 991px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    margin: 34px auto 56px !important;
  }

  html body .cr-contact-page-v23-card {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  html body .cr-contact-page-v23-layout {
    grid-template-columns: 1fr !important;
  }

  html body .cr-contact-page-v23-side {
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  html body .cr-contact-page-v23-card {
    padding: 20px 14px !important;
  }

  html body .cr-contact-page-v23-grid {
    grid-template-columns: 1fr !important;
  }

  html body .cr-contact-page-v23-title {
    font-size: 30px !important;
  }

  html body .cr-contact-page-v23-subtitle {
    font-size: 14px !important;
  }
}

/* =====================================================
   CLASSROLL CONTACT PAGE V24
   Remove automatic-data note from Contact Us page
===================================================== */
html body .cr-contact-page-v23-note,
html body .cr-contact-page-v22-note,
html body [class*="cr-contact-page"] [class*="note"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}


/* =====================================================
   CLASSROLL CONTACT PAGE V25 FIXES
   Correct values + location card
===================================================== */
html body .cr-contact-page-v23-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body .cr-contact-page-v23-info.cr-contact-location-card {
  grid-column: 1 / -1 !important;
  min-height: 105px !important;
  align-items: flex-start !important;
}

html body .cr-contact-page-v23-location-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  font-weight: 600 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body .cr-contact-page-v23-info-value {
  direction: inherit !important;
  unicode-bidi: plaintext !important;
}

html body .cr-contact-page-v23-side p {
  max-width: 300px !important;
}

html body .cr-contact-page-v23-side {
  min-height: 220px !important;
}

@media (max-width: 767px) {
  html body .cr-contact-page-v23-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =====================================================
   CLASSROLL CONTACT PAGE V26 PREMIUM REDESIGN
   Cleaner, smarter, premium style for Contact Us only
   No images. Keeps contact data dynamic/fixed values from JS.
===================================================== */

html body #cr-contact-page-v23,
html body .cr-contact-page-v23 {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 54px auto 72px !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 10% 15%, rgba(212, 160, 23, 0.13), transparent 230px),
    radial-gradient(circle at 95% 5%, rgba(212, 160, 23, 0.11), transparent 190px),
    linear-gradient(135deg, #ffffff 0%, #fbfbf9 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 24px 65px rgba(15, 23, 42, 0.08) !important;
}

html body .cr-contact-page-v23-card::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 0 !important;
  width: 7px !important;
  height: 100% !important;
  background: linear-gradient(180deg, #d4a017, #0f172a) !important;
  opacity: .95 !important;
}

html body .cr-contact-page-v23-inner {
  position: relative !important;
  z-index: 2 !important;
  padding: 44px !important;
}

html body .cr-contact-page-v23-head {
  margin: 0 auto 32px !important;
  max-width: 850px !important;
  text-align: center !important;
}

html body .cr-contact-page-v23-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.12) !important;
  color: #b58305 !important;
  border: 1px solid rgba(212, 160, 23, 0.20) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  margin: 0 0 14px !important;
}

html body .cr-contact-page-v23-title {
  color: #0b1220 !important;
  font-size: clamp(36px, 4.8vw, 58px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  margin: 0 0 14px !important;
}

html body .cr-contact-page-v23-subtitle {
  color: #526174 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  font-weight: 600 !important;
  margin: 0 auto !important;
  max-width: 760px !important;
}

html body .cr-contact-page-v23-layout {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  direction: ltr !important;
}

html body[dir="rtl"] .cr-contact-page-v23-layout,
html[dir="rtl"] body .cr-contact-page-v23-layout,
html.cr-lang-ar body .cr-contact-page-v23-layout {
  direction: ltr !important;
}

html body .cr-contact-page-v23-side {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  padding: 30px !important;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.91)),
    radial-gradient(circle at 85% 0%, rgba(212, 160, 23, .35), transparent 170px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(212, 160, 23, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 42px rgba(15, 23, 42, .13) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: start !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-side::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: -62px !important;
  top: -62px !important;
  width: 178px !important;
  height: 178px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.18) !important;
}

html body .cr-contact-page-v23-side::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 28px !important;
  bottom: 28px !important;
  width: 64px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
  opacity: .9 !important;
}

html body .cr-contact-page-v23-side > * {
  position: relative !important;
  z-index: 2 !important;
}

html body .cr-contact-page-v23-side h2 {
  color: #ffffff !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.03em !important;
}

html body .cr-contact-page-v23-side p {
  color: rgba(255, 255, 255, 0.76) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  font-weight: 600 !important;
  margin: 0 0 24px !important;
  max-width: 300px !important;
}

html body .cr-contact-page-v23-cta {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d4a017, #efc34a) !important;
  color: #101827 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 34px rgba(212, 160, 23, .28) !important;
  border: 0 !important;
}

html body .cr-contact-page-v23-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 42px rgba(212, 160, 23, .36) !important;
}

html body .cr-contact-page-v23-cta svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
}

html body .cr-contact-page-v23-grid {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-info {
  position: relative !important;
  min-height: 126px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 24px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
  overflow: hidden !important;
}

html body .cr-contact-page-v23-info::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 22px !important;
  width: 3px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
  opacity: .82 !important;
}

html body a.cr-contact-page-v23-info:hover {
  transform: translateY(-4px) !important;
  background: #ffffff !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.10) !important;
  border-color: rgba(212, 160, 23, 0.34) !important;
}

html body .cr-contact-page-v23-info-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .cr-contact-page-v23-info strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

html body .cr-contact-page-v23-info-value {
  display: block !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  direction: ltr !important;
  text-align: start !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html[dir="rtl"] body .cr-contact-page-v23-info-value,
html.cr-lang-ar body .cr-contact-page-v23-info-value {
  text-align: right !important;
}

html body .cr-contact-page-v23-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0f172a !important;
  color: #d4a017 !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.13) !important;
}

html body .cr-contact-page-v23-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .cr-contact-page-v23-info.cr-contact-location-card {
  grid-column: 1 / -1 !important;
  min-height: 116px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(250, 247, 238, .74)) !important;
}

html body .cr-contact-page-v23-location-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  color: #243245 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  font-weight: 700 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body .cr-contact-page-v23-note,
html body .cr-contact-page-v22-note,
html body [class*="cr-contact-page"] [class*="note"] {
  display: none !important;
}

@media (min-width: 1200px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    width: min(1160px, calc(100% - 48px)) !important;
  }
}

@media (max-width: 991px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    width: min(720px, calc(100% - 28px)) !important;
    margin: 36px auto 58px !important;
  }

  html body .cr-contact-page-v23-inner {
    padding: 28px !important;
  }

  html body .cr-contact-page-v23-layout {
    grid-template-columns: 1fr !important;
    direction: inherit !important;
  }

  html body .cr-contact-page-v23-side,
  html body .cr-contact-page-v23-grid {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body .cr-contact-page-v23-side {
    min-height: 230px !important;
    order: 2 !important;
  }

  html body .cr-contact-page-v23-grid {
    order: 1 !important;
  }
}

@media (max-width: 640px) {
  html body .cr-contact-page-v23-inner {
    padding: 22px 14px !important;
  }

  html body .cr-contact-page-v23-title {
    font-size: 34px !important;
  }

  html body .cr-contact-page-v23-grid {
    grid-template-columns: 1fr !important;
  }

  html body .cr-contact-page-v23-info {
    min-height: 108px !important;
    padding: 18px !important;
  }

  html body .cr-contact-page-v23-side {
    padding: 24px !important;
  }
}



/* =====================================================
   CLASSROLL CONTACT PAGE V27 - STYLE 1 LUXURY MINIMAL
   Clean white layout, gold accents, no images, no heavy black block
===================================================== */

html body #cr-contact-page-v23,
html body .cr-contact-page-v23 {
  width: min(1080px, calc(100% - 36px)) !important;
  margin: 58px auto 78px !important;
  padding: 0 !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid rgba(212, 160, 23, 0.20) !important;
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.075) !important;
}

html body .cr-contact-page-v23-card::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 34px !important;
  inset-inline-end: 34px !important;
  top: 0 !important;
  height: 4px !important;
  width: auto !important;
  border-radius: 0 0 999px 999px !important;
  background: linear-gradient(90deg, transparent, #d4a017, transparent) !important;
  opacity: .95 !important;
}

html body .cr-contact-page-v23-card::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: -72px !important;
  top: -72px !important;
  width: 190px !important;
  height: 190px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.09) !important;
  pointer-events: none !important;
}

html body .cr-contact-page-v23-inner {
  position: relative !important;
  z-index: 2 !important;
  padding: 48px 46px 44px !important;
}

html body .cr-contact-page-v23-head {
  margin: 0 auto 34px !important;
  max-width: 760px !important;
  text-align: center !important;
}

html body .cr-contact-page-v23-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 7px 17px !important;
  border-radius: 999px !important;
  background: #fff8e6 !important;
  color: #b38306 !important;
  border: 1px solid rgba(212, 160, 23, 0.22) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 0 14px !important;
  box-shadow: none !important;
}

html body .cr-contact-page-v23-title {
  color: #0f172a !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 14px !important;
}

html body .cr-contact-page-v23-subtitle {
  color: #536274 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  font-weight: 600 !important;
  margin: 0 auto !important;
  max-width: 720px !important;
}

html body .cr-contact-page-v23-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  gap: 18px !important;
  align-items: stretch !important;
  direction: inherit !important;
}

html body[dir="rtl"] .cr-contact-page-v23-layout,
html[dir="rtl"] body .cr-contact-page-v23-layout,
html.cr-lang-ar body .cr-contact-page-v23-layout {
  direction: rtl !important;
}

html[dir="ltr"] body .cr-contact-page-v23-layout,
html.cr-lang-en body .cr-contact-page-v23-layout,
body.cr-lang-en .cr-contact-page-v23-layout {
  direction: ltr !important;
}

html body .cr-contact-page-v23-grid {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-info {
  position: relative !important;
  min-height: 112px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 20px 20px 18px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
  overflow: hidden !important;
}

html body .cr-contact-page-v23-info::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 20px !important;
  inset-inline-end: 20px !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 999px 999px 0 0 !important;
  background: rgba(212, 160, 23, 0.48) !important;
  opacity: 0 !important;
  transition: opacity .22s ease !important;
}

html body a.cr-contact-page-v23-info:hover {
  transform: translateY(-3px) !important;
  background: #fffdf7 !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.085) !important;
  border-color: rgba(212, 160, 23, 0.38) !important;
}

html body a.cr-contact-page-v23-info:hover::before {
  opacity: 1 !important;
}

html body .cr-contact-page-v23-info-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .cr-contact-page-v23-info strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

html body .cr-contact-page-v23-info-value {
  display: block !important;
  color: #344256 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 700 !important;
  direction: ltr !important;
  text-align: start !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html[dir="rtl"] body .cr-contact-page-v23-info-value,
html.cr-lang-ar body .cr-contact-page-v23-info-value {
  text-align: right !important;
}

html body .cr-contact-page-v23-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff8e6 !important;
  color: #b38306 !important;
  border: 1px solid rgba(212, 160, 23, 0.24) !important;
  box-shadow: none !important;
}

html body .cr-contact-page-v23-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .cr-contact-page-v23-info.cr-contact-location-card {
  grid-column: 1 / -1 !important;
  min-height: 108px !important;
  background: linear-gradient(135deg, #ffffff, #fffdf7) !important;
  border-color: rgba(212, 160, 23, 0.20) !important;
}

html body .cr-contact-page-v23-location-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  color: #344256 !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  font-weight: 700 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html body .cr-contact-page-v23-side {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  padding: 26px !important;
  background: linear-gradient(145deg, #fffaf0, #ffffff) !important;
  color: #0f172a !important;
  border: 1px solid rgba(212, 160, 23, 0.22) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: start !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-side::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-end: -46px !important;
  top: -46px !important;
  width: 128px !important;
  height: 128px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.12) !important;
}

html body .cr-contact-page-v23-side::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 26px !important;
  bottom: 24px !important;
  width: 54px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
  opacity: .9 !important;
}

html body .cr-contact-page-v23-side > * {
  position: relative !important;
  z-index: 2 !important;
}

html body .cr-contact-page-v23-side h2 {
  color: #0f172a !important;
  font-size: 25px !important;
  line-height: 1.35 !important;
  font-weight: 950 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.025em !important;
}

html body .cr-contact-page-v23-side p {
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
  font-weight: 650 !important;
  margin: 0 0 22px !important;
  max-width: 260px !important;
}

html body .cr-contact-page-v23-cta {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 12px 19px !important;
  border-radius: 999px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .18) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

html body .cr-contact-page-v23-cta:hover {
  transform: translateY(-2px) !important;
  background: #111827 !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, .22) !important;
}

html body .cr-contact-page-v23-cta svg {
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

html body .cr-contact-page-v23-note,
html body .cr-contact-page-v22-note,
html body [class*="cr-contact-page"] [class*="note"] {
  display: none !important;
}

@media (max-width: 991px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    width: min(720px, calc(100% - 28px)) !important;
    margin: 36px auto 58px !important;
  }

  html body .cr-contact-page-v23-inner {
    padding: 30px 24px !important;
  }

  html body .cr-contact-page-v23-layout {
    grid-template-columns: 1fr !important;
    direction: inherit !important;
  }

  html body .cr-contact-page-v23-side,
  html body .cr-contact-page-v23-grid {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body .cr-contact-page-v23-side {
    min-height: 0 !important;
    order: 2 !important;
  }

  html body .cr-contact-page-v23-grid {
    order: 1 !important;
  }
}

@media (max-width: 640px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    width: calc(100% - 22px) !important;
  }

  html body .cr-contact-page-v23-inner {
    padding: 26px 14px 18px !important;
  }

  html body .cr-contact-page-v23-title {
    font-size: 32px !important;
  }

  html body .cr-contact-page-v23-subtitle {
    font-size: 14px !important;
  }

  html body .cr-contact-page-v23-grid {
    grid-template-columns: 1fr !important;
  }

  html body .cr-contact-page-v23-info {
    min-height: 102px !important;
    padding: 17px !important;
  }

  html body .cr-contact-page-v23-side {
    padding: 22px !important;
  }
}


/* =====================================================
   CLASSROLL CONTACT PAGE V28 - QUIET LUXURY
   Final override: one unified contact surface, fewer boxes,
   Classroll navy/gold palette, RTL/LTR and mobile ready.
===================================================== */

html body #cr-contact-page-v23,
html body .cr-contact-page-v23 {
  width: min(1100px, calc(100% - 36px)) !important;
  max-width: 1100px !important;
  margin: 58px auto 82px !important;
  padding: 0 !important;
  direction: inherit !important;
  font-family: inherit !important;
}

/* The page no longer looks like one large bordered card. */
html body .cr-contact-page-v23-card {
  position: relative !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .cr-contact-page-v23-card::before,
html body .cr-contact-page-v23-card::after {
  display: none !important;
  content: none !important;
}

html body .cr-contact-page-v23-inner {
  position: relative !important;
  z-index: 1 !important;
  padding: 0 !important;
}

/* Compact editorial heading, aligned with the rest of the store. */
html body .cr-contact-page-v23-head {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto 38px !important;
  padding: 0 !important;
  text-align: center !important;
}

html body .cr-contact-page-v23-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 7px 15px !important;
  margin: 0 0 15px !important;
  border: 1px solid rgba(212, 160, 23, 0.25) !important;
  border-radius: 999px !important;
  background: #fff9ea !important;
  color: #a87900 !important;
  box-shadow: 0 8px 22px rgba(212, 160, 23, 0.08) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body .cr-contact-page-v23-title {
  margin: 0 0 13px !important;
  color: #101827 !important;
  font-size: clamp(36px, 4.4vw, 54px) !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
}

html body .cr-contact-page-v23-subtitle {
  max-width: 710px !important;
  margin: 0 auto !important;
  color: #667085 !important;
  font-size: 15px !important;
  font-weight: 550 !important;
  line-height: 1.95 !important;
}

/* Two calm surfaces: unified details + one clear WhatsApp action. */
html body .cr-contact-page-v23-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 310px !important;
  gap: 18px !important;
  align-items: stretch !important;
  direction: inherit !important;
}

html[dir="rtl"] body .cr-contact-page-v23-layout,
html.cr-lang-ar body .cr-contact-page-v23-layout {
  direction: rtl !important;
}

html[dir="ltr"] body .cr-contact-page-v23-layout,
html.cr-lang-en body .cr-contact-page-v23-layout,
body.cr-lang-en .cr-contact-page-v23-layout {
  direction: ltr !important;
}

/* One connected contact directory instead of six floating cards. */
html body .cr-contact-page-v23-grid {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 1px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 26px !important;
  background: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.065) !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-info {
  position: relative !important;
  min-width: 0 !important;
  min-height: 112px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  padding: 20px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #101827 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .22s ease, color .22s ease !important;
}

html body .cr-contact-page-v23-info::before {
  display: none !important;
  content: none !important;
}

html body a.cr-contact-page-v23-info:hover {
  transform: none !important;
  border-color: transparent !important;
  background: #fffaf0 !important;
  box-shadow: none !important;
}

html body a.cr-contact-page-v23-info:focus-visible,
html body .cr-contact-page-v23-cta:focus-visible {
  outline: 3px solid rgba(212, 160, 23, 0.35) !important;
  outline-offset: -3px !important;
}

html body .cr-contact-page-v23-info-top {
  display: contents !important;
}

html body .cr-contact-page-v23-info strong {
  position: absolute !important;
  inset-block-start: 25px !important;
  inset-inline-start: 80px !important;
  max-width: calc(100% - 100px) !important;
  margin: 0 !important;
  color: #101827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

html body .cr-contact-page-v23-info-value {
  min-width: 0 !important;
  max-width: calc(100% - 58px) !important;
  margin: 23px 0 0 !important;
  display: block !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  direction: ltr !important;
  unicode-bidi: plaintext !important;
  text-align: start !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

html[dir="rtl"] body .cr-contact-page-v23-info-value,
html.cr-lang-ar body .cr-contact-page-v23-info-value {
  text-align: right !important;
}

html body .cr-contact-page-v23-icon {
  order: -1 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 1px solid rgba(212, 160, 23, 0.24) !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff8e5 !important;
  color: #a87900 !important;
  box-shadow: none !important;
}

html body .cr-contact-page-v23-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body .cr-contact-page-v23-info.cr-contact-location-card {
  grid-column: 1 / -1 !important;
  min-height: 116px !important;
  align-items: flex-start !important;
  padding-block: 22px !important;
  background: #fffdf8 !important;
}

html body .cr-contact-page-v23-location-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  color: #596579 !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.72 !important;
}

/* The only strong block on the page: the primary conversation action. */
html body .cr-contact-page-v23-side {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 160, 23, 0.26) !important;
  border-radius: 26px !important;
  padding: 30px 28px !important;
  background: linear-gradient(150deg, #111b2c 0%, #0d1422 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: start !important;
  direction: inherit !important;
}

html body .cr-contact-page-v23-side::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset-inline-end: -58px !important;
  top: -60px !important;
  width: 164px !important;
  height: 164px !important;
  border-radius: 999px !important;
  background: rgba(212, 160, 23, 0.18) !important;
  box-shadow: 0 0 0 24px rgba(212, 160, 23, 0.04) !important;
  pointer-events: none !important;
}

html body .cr-contact-page-v23-side::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset-inline-start: 28px !important;
  bottom: 26px !important;
  width: 46px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
  opacity: .9 !important;
}

html body .cr-contact-page-v23-side > * {
  position: relative !important;
  z-index: 2 !important;
}

html body .cr-contact-page-v23-side h2 {
  margin: 0 0 11px !important;
  max-width: 245px !important;
  color: #ffffff !important;
  font-size: 27px !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.025em !important;
}

html body .cr-contact-page-v23-side p {
  max-width: 240px !important;
  margin: 0 0 23px !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  line-height: 1.85 !important;
}

html body .cr-contact-page-v23-cta {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 47px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 12px 19px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: #d4a017 !important;
  color: #111827 !important;
  box-shadow: 0 14px 30px rgba(212, 160, 23, 0.22) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

html body .cr-contact-page-v23-cta:hover {
  transform: translateY(-2px) !important;
  background: #e0ae24 !important;
  box-shadow: 0 18px 38px rgba(212, 160, 23, 0.30) !important;
}

html body .cr-contact-page-v23-cta svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

html body .cr-contact-page-v23-note,
html body .cr-contact-page-v22-note,
html body [class*="cr-contact-page"] [class*="note"] {
  display: none !important;
}

/* Dark-mode parity with the rest of the custom store. */
html.cr-dark-mode body .cr-contact-page-v23-title {
  color: #f8fafc !important;
}

html.cr-dark-mode body .cr-contact-page-v23-subtitle {
  color: #aab4c4 !important;
}

html.cr-dark-mode body .cr-contact-page-v23-grid {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20) !important;
}

html.cr-dark-mode body .cr-contact-page-v23-info,
html.cr-dark-mode body .cr-contact-page-v23-info.cr-contact-location-card {
  background: #151d2a !important;
}

html.cr-dark-mode body a.cr-contact-page-v23-info:hover {
  background: #1b2636 !important;
}

html.cr-dark-mode body .cr-contact-page-v23-info strong {
  color: #f8fafc !important;
}

html.cr-dark-mode body .cr-contact-page-v23-info-value,
html.cr-dark-mode body .cr-contact-page-v23-location-lines {
  color: #aeb8c7 !important;
}

@media (max-width: 991px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    width: min(720px, calc(100% - 28px)) !important;
    margin: 42px auto 64px !important;
  }

  html body .cr-contact-page-v23-head {
    margin-bottom: 30px !important;
  }

  html body .cr-contact-page-v23-layout {
    grid-template-columns: 1fr !important;
    direction: inherit !important;
  }

  html body .cr-contact-page-v23-side,
  html body .cr-contact-page-v23-grid {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body .cr-contact-page-v23-side {
    min-height: 220px !important;
    order: 1 !important;
  }

  html body .cr-contact-page-v23-grid {
    order: 2 !important;
  }
}

@media (max-width: 640px) {
  html body #cr-contact-page-v23,
  html body .cr-contact-page-v23 {
    width: calc(100% - 22px) !important;
    margin: 34px auto 52px !important;
  }

  html body .cr-contact-page-v23-head {
    margin-bottom: 24px !important;
  }

  html body .cr-contact-page-v23-title {
    font-size: 34px !important;
  }

  html body .cr-contact-page-v23-subtitle {
    font-size: 13.5px !important;
    line-height: 1.85 !important;
  }

  html body .cr-contact-page-v23-grid {
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
  }

  html body .cr-contact-page-v23-info {
    min-height: 98px !important;
    padding: 17px 16px !important;
  }

  html body .cr-contact-page-v23-info strong {
    inset-block-start: 21px !important;
    inset-inline-start: 75px !important;
  }

  html body .cr-contact-page-v23-info.cr-contact-location-card {
    min-height: 126px !important;
  }

  html body .cr-contact-page-v23-side {
    min-height: 210px !important;
    padding: 26px 23px !important;
    border-radius: 22px !important;
  }

  html body .cr-contact-page-v23-side h2 {
    font-size: 24px !important;
  }

  html body .cr-contact-page-v23-cta {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .cr-contact-page-v23-info,
  html body .cr-contact-page-v23-cta {
    transition: none !important;
  }
}