/* Njiblek fixed-pages visual, functional and SEO optimization — 2026-07-13 */
body.njb-fixed-opt {
  --njb-google-blue: #4285F4;
  --njb-google-blue-dark: #1967D2;
  --njb-google-orange: #FBBC05;
  --njb-google-orange-dark: #B06000;
  --njb-google-green: #34A853;
  --njb-google-green-dark: #137333;
  --njb-google-red: #EA4335;
  --njb-google-red-dark: #C5221F;
  --njb-opt-green: var(--njb-google-green);
  --njb-opt-green-dark: var(--njb-google-green-dark);
  --njb-opt-ink: #202124;
  --njb-opt-muted: #5F6368;
  --njb-opt-surface: #F8FAFF;
  --njb-opt-border: rgba(66, 133, 244, .18);
}
body.njb-fixed-opt main > .section,
body.njb-fixed-opt main > section.section {
  padding-top: clamp(42px, 5vw, 72px);
  padding-bottom: clamp(42px, 5vw, 72px);
}
body.njb-fixed-opt main > .section + .section,
body.njb-fixed-opt main > section.section + section.section {
  margin-top: 0;
}
body.njb-fixed-opt .section-title {
  margin-bottom: clamp(24px, 3vw, 38px);
}
body.njb-fixed-opt .njb-solid-hero-visual {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 24px;
  background: #eef5ef;
  box-shadow: 0 22px 55px rgba(16, 58, 28, .16);
}
body.njb-fixed-opt .njb-visual-link-card > a {
  position: relative;
  display: block;
  min-height: clamp(300px, 40vw, 520px);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
body.njb-fixed-opt .njb-visual-link-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}
body.njb-fixed-opt .njb-visual-link-card > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7, 29, 12, .02) 35%, rgba(7, 29, 12, .78) 100%);
}
body.njb-fixed-opt .njb-visual-link-card > a:hover img,
body.njb-fixed-opt .njb-visual-link-card > a:focus-visible img {
  transform: scale(1.025);
}
body.njb-fixed-opt .njb-visual-overlay {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 4vw, 38px);
  right: clamp(20px, 4vw, 38px);
  bottom: clamp(20px, 4vw, 38px);
  display: grid;
  gap: 6px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}
body.njb-fixed-opt .njb-visual-overlay strong {
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  line-height: 1.1;
}
body.njb-fixed-opt .njb-visual-overlay span {
  max-width: 42ch;
  font-size: clamp(.94rem, 1.4vw, 1.08rem);
  line-height: 1.45;
}
body.njb-fixed-opt .njb-action-section {
  background: linear-gradient(180deg, #fff 0%, var(--njb-opt-surface) 100%);
}
body.njb-fixed-opt .njb-action-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}
body.njb-fixed-opt .njb-action-media {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #e9f1ea;
  box-shadow: 0 20px 46px rgba(16, 58, 28, .12);
}
body.njb-fixed-opt .njb-action-media a {
  display: block;
  color: inherit;
  text-decoration: none;
}
body.njb-fixed-opt .njb-action-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
body.njb-fixed-opt .njb-action-media figcaption {
  padding: 14px 18px 17px;
  color: var(--njb-opt-muted);
  font-size: .92rem;
  line-height: 1.45;
  background: #fff;
}
body.njb-fixed-opt .njb-action-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.njb-fixed-opt .njb-action-card {
  min-height: 100%;
  padding: 20px;
  border: 1px solid var(--njb-opt-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 58, 28, .06);
}
body.njb-fixed-opt .njb-action-card h3 {
  margin: 0 0 9px;
  font-size: 1.04rem;
  line-height: 1.25;
}
body.njb-fixed-opt .njb-action-card h3 a {
  color: var(--njb-opt-green-dark);
  text-decoration: none;
}
body.njb-fixed-opt .njb-action-card h3 a:hover,
body.njb-fixed-opt .njb-action-card h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.njb-fixed-opt .njb-action-card p {
  margin: 0;
  color: var(--njb-opt-muted);
  font-size: .94rem;
  line-height: 1.55;
}
body.njb-fixed-opt .njb-action-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(19, 138, 54, .08);
}
body.njb-fixed-opt .njb-action-cta p {
  flex: 1 1 300px;
  margin: 0;
  color: var(--njb-opt-ink);
}
body.njb-fixed-opt .njb-action-cta .njb-secondary-link {
  font-weight: 700;
  color: var(--njb-opt-green-dark);
  text-decoration: none;
}
body.njb-fixed-opt .njb-action-cta .njb-secondary-link:hover,
body.njb-fixed-opt .njb-action-cta .njb-secondary-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.njb-fixed-opt .njb-home-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
body.njb-fixed-opt .seo-rich-content-extra .section-title h2 {
  max-width: 780px;
  margin-inline: auto;
}
body.njb-fixed-opt .local-side-panel .box:empty,
body.njb-fixed-opt .njb-solid-hero-visual:empty {
  display: none !important;
}
@media (max-width: 991.98px) {
  body.njb-fixed-opt .njb-action-layout {
    grid-template-columns: 1fr;
  }
  body.njb-fixed-opt .njb-action-cards {
    grid-template-columns: 1fr 1fr;
  }
  body.njb-fixed-opt .njb-action-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 575.98px) {
  body.njb-fixed-opt main > .section,
  body.njb-fixed-opt main > section.section {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  body.njb-fixed-opt .njb-action-cards {
    grid-template-columns: 1fr;
  }
  body.njb-fixed-opt .njb-action-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
  body.njb-fixed-opt .njb-visual-link-card > a {
    min-height: 310px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.njb-fixed-opt .njb-visual-link-card img {
    transition: none;
  }
}

/* Arabic fixed pages */
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .section-title,html[dir="rtl"] .footer-contact{text-align:right}
html[dir="rtl"] .njb-action-card,html[dir="rtl"] .njb-action-cta,html[dir="rtl"] .njb-apps-compact-copy{text-align:right}
html[dir="rtl"] .njiblek-mobile-cta{direction:rtl}

/* Linked hero backgrounds and practical lists — final closure */
body.njb-fixed-opt .njiblekc::before {
  background: linear-gradient(90deg, rgba(246, 255, 248, .90) 0%, rgba(246, 255, 248, .78) 48%, rgba(246, 255, 248, .48) 100%);
  pointer-events: none;
}
body.njb-fixed-opt .njiblekc .njb-solid-hero-bg.njb-hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  background: none;
  z-index: 1;
}
body.njb-fixed-opt .njb-hero-bg-link {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
body.njb-fixed-opt .njiblekc .njb-hero-bg-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform .4s ease;
}
body.njb-fixed-opt .njb-hero-bg-link:hover img,
body.njb-fixed-opt .njb-hero-bg-link:focus-visible img {
  transform: scale(1.035);
}
body.njb-fixed-opt .njiblek-practical-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}
body.njb-fixed-opt .njiblek-practical-list li {
  border: 1px solid var(--njb-opt-border);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .86);
  color: var(--njb-opt-ink);
  font-weight: 650;
}
@media (max-width: 767.98px) {
  body.njb-fixed-opt .njiblekc::before {
    background: rgba(246, 255, 248, .84);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.njb-fixed-opt .njiblekc .njb-hero-bg-link img {
    transition: none;
  }
}

/* Functional WhatsApp forms */
body.njb-fixed-opt .njb-whatsapp-form label {
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--njb-opt-ink);
}
body.njb-fixed-opt .njb-whatsapp-form input,
body.njb-fixed-opt .njb-whatsapp-form select,
body.njb-fixed-opt .njb-whatsapp-form textarea {
  width: 100%;
}
body.njb-fixed-opt .njb-whatsapp-form .btn-get-started {
  border: 0;
  cursor: pointer;
}
body.njb-fixed-opt .njb-form-note {
  margin-top: 10px;
  color: var(--njb-opt-muted);
  font-size: .88rem;
  line-height: 1.5;
}

/* NJIBLEK_IMAGE_CONTAINMENT_GOOGLE_PALETTE_20260714 */
/*
 * Media policy:
 * - contain: interface captures, illustrations, logos and informational media;
 * - cover: photographic portraits and true background images only;
 * - every media frame clips its own contents and keeps a stable responsive ratio.
 */
body.njb-fixed-opt,
body.njb-fixed-opt *,
body.njb-fixed-opt *::before,
body.njb-fixed-opt *::after {
  box-sizing: border-box;
}
body.njb-fixed-opt main,
body.njb-fixed-opt section,
body.njb-fixed-opt .container,
body.njb-fixed-opt .container-fluid,
body.njb-fixed-opt .row,
body.njb-fixed-opt [class*="col-"],
body.njb-fixed-opt figure,
body.njb-fixed-opt picture,
body.njb-fixed-opt article,
body.njb-fixed-opt a {
  min-inline-size: 0;
  max-inline-size: 100%;
}
body.njb-fixed-opt img,
body.njb-fixed-opt svg,
body.njb-fixed-opt video,
body.njb-fixed-opt canvas,
body.njb-fixed-opt iframe {
  max-inline-size: 100% !important;
}
body.njb-fixed-opt img {
  display: block;
}
body.njb-fixed-opt picture,
body.njb-fixed-opt picture > img,
body.njb-fixed-opt figure > img,
body.njb-fixed-opt a > img {
  inline-size: 100%;
}

/* Shared media windows */
body.njb-fixed-opt .njb-action-media,
body.njb-fixed-opt .njb-action-media > a,
body.njb-fixed-opt .njb-visual-link-card,
body.njb-fixed-opt .njb-visual-link-card > a,
body.njb-fixed-opt .njb-solid-hero-visual,
body.njb-fixed-opt .njb-seo-media,
body.njb-fixed-opt .seo-card,
body.njb-fixed-opt .portfolio-item,
body.njb-fixed-opt .portfolio-details-slider,
body.njb-fixed-opt .bnimag-slide,
body.njb-fixed-opt .member-img,
body.njb-fixed-opt .client-logo,
body.njb-fixed-opt .testimonial-item,
body.njb-fixed-opt .local-hero-box,
body.njb-fixed-opt .icon-box {
  max-inline-size: 100%;
  overflow: hidden;
}

/* Informational visuals: show the entire image instead of cropping it. */
body.njb-fixed-opt .njb-action-media {
  position: relative;
  border: 1px solid rgba(66, 133, 244, .20);
  background:
    linear-gradient(135deg, rgba(66, 133, 244, .08), rgba(52, 168, 83, .08)),
    #fff;
}
body.njb-fixed-opt .njb-action-media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  block-size: 5px;
  background: linear-gradient(90deg,
    var(--njb-google-blue) 0 25%,
    var(--njb-google-orange) 25% 50%,
    var(--njb-google-green) 50% 75%,
    var(--njb-google-red) 75% 100%);
  pointer-events: none;
}
body.njb-fixed-opt .njb-action-media > a {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(66, 133, 244, .06), rgba(251, 188, 5, .08));
}
body.njb-fixed-opt .njb-action-media img {
  inline-size: 100% !important;
  block-size: 100% !important;
  padding: clamp(8px, 1.2vw, 16px);
  object-fit: contain !important;
  object-position: center !important;
}

body.njb-fixed-opt .njb-visual-link-card {
  border: 1px solid rgba(52, 168, 83, .22);
  background: linear-gradient(135deg,
    rgba(66, 133, 244, .10),
    rgba(251, 188, 5, .10) 38%,
    rgba(52, 168, 83, .10) 68%,
    rgba(234, 67, 53, .10));
}
body.njb-fixed-opt .njb-visual-link-card > a {
  min-block-size: clamp(280px, 40vw, 520px);
}
body.njb-fixed-opt .njb-visual-link-card img {
  inline-size: 100% !important;
  block-size: 100% !important;
  padding: clamp(8px, 1.3vw, 18px);
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
body.njb-fixed-opt .njb-visual-link-card > a:hover img,
body.njb-fixed-opt .njb-visual-link-card > a:focus-visible img {
  transform: none !important;
  filter: saturate(1.04) contrast(1.02);
}

/* Hero background images remain cover images, but can never escape their section. */
body.njb-fixed-opt .njiblekc {
  isolation: isolate;
  overflow: hidden !important;
}
body.njb-fixed-opt .njiblekc > img,
body.njb-fixed-opt .njiblekc .njb-hero-bg-link img {
  position: absolute;
  inset: 0;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: none !important;
  padding: 0;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}
body.njb-fixed-opt .njb-hero-bg-link:hover img,
body.njb-fixed-opt .njb-hero-bg-link:focus-visible img {
  transform: none !important;
}

/* Content and SEO cards */
body.njb-fixed-opt .seo-card {
  border-top: 4px solid var(--njb-google-blue);
}
body.njb-fixed-opt .seo-card:nth-child(4n + 2) { border-top-color: var(--njb-google-orange); }
body.njb-fixed-opt .seo-card:nth-child(4n + 3) { border-top-color: var(--njb-google-green); }
body.njb-fixed-opt .seo-card:nth-child(4n + 4) { border-top-color: var(--njb-google-red); }
body.njb-fixed-opt .seo-card > img,
body.njb-fixed-opt .seo-card > a > img,
body.njb-fixed-opt .njb-seo-media img,
body.njb-fixed-opt .article-content img,
body.njb-fixed-opt .growth-hero-img,
body.njb-fixed-opt .services-img,
body.njb-fixed-opt .col-lg-5 > img,
body.njb-fixed-opt .col-lg-6 > img,
body.njb-fixed-opt .col-lg-8 > img {
  inline-size: 100% !important;
  block-size: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
body.njb-fixed-opt .seo-card > img,
body.njb-fixed-opt .seo-card > a > img {
  aspect-ratio: 16 / 10;
  block-size: clamp(190px, 24vw, 300px) !important;
  padding: clamp(8px, 1vw, 14px);
  background: linear-gradient(135deg, rgba(66, 133, 244, .07), rgba(52, 168, 83, .07));
}
body.njb-fixed-opt .article-content img,
body.njb-fixed-opt .services-img,
body.njb-fixed-opt .col-lg-5 > img,
body.njb-fixed-opt .col-lg-6 > img,
body.njb-fixed-opt .col-lg-8 > img {
  margin-inline: auto;
}

/* Portfolio and slider captures: preserve the whole screen capture. */
body.njb-fixed-opt .portfolio-item {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(66, 133, 244, .16);
  border-radius: 18px;
  background: #F8FAFF;
}
body.njb-fixed-opt .portfolio-item > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  padding: clamp(8px, 1vw, 14px);
  object-fit: contain !important;
  object-position: center !important;
}
body.njb-fixed-opt .bnimag-slide {
  display: grid;
  place-items: center;
  min-block-size: clamp(260px, 52vw, 680px);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(66, 133, 244, .06), rgba(234, 67, 53, .06));
}
body.njb-fixed-opt .bnimag-slide > img,
body.njb-fixed-opt .portfolio-details-slider img {
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: 680px;
  padding: clamp(8px, 1.2vw, 18px);
  object-fit: contain !important;
  object-position: center !important;
}

/* Logos, portraits and team photographs use dedicated fit modes. */
body.njb-fixed-opt .header .logo img,
body.njb-fixed-opt a.logo img {
  inline-size: min(150px, 42vw) !important;
  block-size: auto !important;
  max-block-size: 50px;
  padding: 0;
  object-fit: contain !important;
}
body.njb-fixed-opt .clients .client-logo {
  min-block-size: 104px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
}
body.njb-fixed-opt .clients .client-logo img {
  inline-size: auto !important;
  block-size: auto !important;
  max-inline-size: 100% !important;
  max-block-size: 82px;
  padding: 8px !important;
  object-fit: contain !important;
}
body.njb-fixed-opt .clients .client-logo img:hover {
  transform: scale(1.03);
}
body.njb-fixed-opt .testimonial-item .testimonial-img {
  inline-size: 90px !important;
  block-size: 90px !important;
  max-inline-size: 90px !important;
  max-block-size: 90px !important;
  object-fit: cover !important;
  object-position: center top !important;
}
body.njb-fixed-opt .team .member-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(66, 133, 244, .08), rgba(251, 188, 5, .10));
}
body.njb-fixed-opt .team .member-img > img {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Google palette applied consistently to actions and section accents. */
body.njb-fixed-opt .section-title::after {
  content: "";
  display: block;
  inline-size: min(220px, 58vw);
  block-size: 5px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--njb-google-blue) 0 25%,
    var(--njb-google-orange) 25% 50%,
    var(--njb-google-green) 50% 75%,
    var(--njb-google-red) 75% 100%);
}
body.njb-fixed-opt .btn-get-started,
body.njb-fixed-opt .btn-getstarted,
body.njb-fixed-opt button.btn-get-started {
  border: 1px solid var(--njb-google-blue) !important;
  background: var(--njb-google-blue) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(66, 133, 244, .24);
}
body.njb-fixed-opt .btn-get-started:hover,
body.njb-fixed-opt .btn-get-started:focus-visible,
body.njb-fixed-opt .btn-getstarted:hover,
body.njb-fixed-opt .btn-getstarted:focus-visible,
body.njb-fixed-opt button.btn-get-started:hover,
body.njb-fixed-opt button.btn-get-started:focus-visible {
  border-color: var(--njb-google-green) !important;
  background: var(--njb-google-green) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(52, 168, 83, .25);
}
body.njb-fixed-opt .njb-secondary-link,
body.njb-fixed-opt .read-more,
body.njb-fixed-opt .growth-link {
  color: var(--njb-google-blue-dark) !important;
}
body.njb-fixed-opt .seo-kicker {
  border: 1px solid rgba(251, 188, 5, .42);
  background: rgba(251, 188, 5, .14);
  color: var(--njb-google-orange-dark);
}
body.njb-fixed-opt .njb-action-cta {
  border-inline-start: 5px solid var(--njb-google-red);
  background: linear-gradient(90deg, rgba(234, 67, 53, .08), rgba(66, 133, 244, .06));
}
body.njb-fixed-opt .njb-action-card:nth-child(4n + 1) { border-top: 4px solid var(--njb-google-blue); }
body.njb-fixed-opt .njb-action-card:nth-child(4n + 2) { border-top: 4px solid var(--njb-google-orange); }
body.njb-fixed-opt .njb-action-card:nth-child(4n + 3) { border-top: 4px solid var(--njb-google-green); }
body.njb-fixed-opt .njb-action-card:nth-child(4n + 4) { border-top: 4px solid var(--njb-google-red); }
body.njb-fixed-opt :focus-visible {
  outline: 3px solid var(--njb-google-orange);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  body.njb-fixed-opt .njb-action-media > a {
    aspect-ratio: 4 / 3;
  }
  body.njb-fixed-opt .njb-visual-link-card > a {
    min-block-size: clamp(240px, 76vw, 360px);
  }
  body.njb-fixed-opt .seo-card > img,
  body.njb-fixed-opt .seo-card > a > img {
    block-size: clamp(190px, 62vw, 280px) !important;
  }
  body.njb-fixed-opt .portfolio-item {
    aspect-ratio: 1 / 1;
  }
  body.njb-fixed-opt .bnimag-slide {
    min-block-size: clamp(240px, 82vw, 440px);
  }
}
@media (max-width: 575.98px) {
  body.njb-fixed-opt .njb-action-media,
  body.njb-fixed-opt .njb-visual-link-card,
  body.njb-fixed-opt .portfolio-item,
  body.njb-fixed-opt .bnimag-slide {
    border-radius: 16px;
  }
  body.njb-fixed-opt .njb-action-media img,
  body.njb-fixed-opt .njb-visual-link-card img,
  body.njb-fixed-opt .portfolio-item > img,
  body.njb-fixed-opt .bnimag-slide > img {
    padding: 8px;
  }
  body.njb-fixed-opt .clients .client-logo {
    min-block-size: 88px;
    padding: 6px;
  }
  body.njb-fixed-opt .clients .client-logo img {
    max-block-size: 68px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.njb-fixed-opt img {
    transition: none !important;
  }
}
/* NJIBLEK_IMAGE_CONTAINMENT_GOOGLE_PALETTE_20260714_END */