/* =========================================================
   ALKAAS ALNAQI — FULL CUSTOM CSS — FIXED BUILD
   Complete CSS paired with the fixed JavaScript file.
========================================================= */

/* =========================================================
   ALKAAS ALNAQI — FULL CUSTOM CSS — OPTIMIZED BUILD
   Home trust flow: Reviews → Benefits → Latest Articles
========================================================= */

/* Add custom CSS styles below */

/* ==========================================
   ALKAAS — BENEFITS BAR
========================================== */

#alkaas-benefits-bar {
  direction: rtl;
  width: 100%;
  background: #fff;
  padding: 14px 0 18px;
}

.alkaas-benefits-bar__inner {
  width: min(1440px, calc(100% - 24px));
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.alkaas-benefit-item {
  min-height: 82px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  gap: 14px;

  padding: 13px 18px;

  background: #fcfcfd;

  border: 1px solid #ebedf0;
  border-radius: 11px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.alkaas-benefit-icon {
  flex: 0 0 54px;

  width: 54px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #102b67;
}

.alkaas-benefit-icon svg {
  width: 49px;
  height: 49px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alkaas-benefit-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;

  text-align: right;
}

.alkaas-benefit-copy strong {
  color: #07152d;

  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;

  white-space: nowrap;
}

.alkaas-benefit-copy strong b {
  font-size: 20px;
  font-weight: 900;
}

.alkaas-benefit-copy span {
  color: #697386;

  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;

  white-space: nowrap;
}

@media (hover: hover) {

  .alkaas-benefit-item:hover {
    transform: translateY(-2px);

    border-color: #ced8e8;

    box-shadow:
      0 8px 24px rgba(15, 43, 103, .07);
  }
}

@media (max-width: 1000px) {

  .alkaas-benefits-bar__inner {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 575px) {

  #alkaas-benefits-bar {
    padding: 10px 0 14px;
  }

  .alkaas-benefits-bar__inner {
    width: calc(100% - 16px);

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px;
  }

  .alkaas-benefit-item {
    min-height: 91px;

    padding: 10px 9px;

    gap: 8px;

    border-radius: 9px;
  }

  .alkaas-benefit-icon {
    flex-basis: 38px;

    width: 38px;
    height: 38px;
  }

  .alkaas-benefit-icon svg {
    width: 35px;
    height: 35px;
  }

  .alkaas-benefit-copy {
    gap: 3px;
  }

  .alkaas-benefit-copy strong {
    font-size: 12.5px;
    white-space: normal;
  }

  .alkaas-benefit-copy strong b {
    font-size: 14px;
  }

  .alkaas-benefit-copy span {
    font-size: 9.5px;
    line-height: 1.45;
    white-space: normal;
  }
}

@media (max-width: 360px) {

  .alkaas-benefit-item {
    padding-inline: 7px;
  }

  .alkaas-benefit-icon {
    flex-basis: 32px;

    width: 32px;
    height: 32px;
  }

  .alkaas-benefit-icon svg {
    width: 30px;
    height: 30px;
  }

  .alkaas-benefit-copy strong {
    font-size: 11.5px;
  }

}


/* Scroll reveal — lightweight, one time */
.alkaas-benefit-item.alkaas-benefit-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .50s ease var(--alkaas-benefit-delay, 0ms),
    transform .50s cubic-bezier(.2,.7,.2,1) var(--alkaas-benefit-delay, 0ms),
    border-color .2s ease,
    box-shadow .2s ease;
}

.alkaas-benefit-item.alkaas-benefit-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

  .alkaas-benefit-item {
    transition: none;
  }

}


/* ==========================================================
   ABOUT / SERVICE SECTION
   CTA is structurally below the images — never overlays them
========================================================== */

#alkaas-about-section {
  --alkaas-blue: #0774BA;
  --alkaas-blue-dark: #055F99;
  --alkaas-sky: #55C9EE;
  --alkaas-sky-soft: #EAF9FF;
  --alkaas-heading: #102738;
  --alkaas-text: #5F707C;
  --alkaas-border: #E4EDF2;

  direction: rtl;
  width: 100%;
  position: relative;
  padding: 82px 20px;
  overflow: hidden;

  background:
    radial-gradient(circle at 5% 15%, rgba(85,201,238,.10), transparent 23%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
}

.alkaas-about__container {
  width: min(1380px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr);
  align-items: center;
  gap: clamp(50px,7vw,105px);
}

.alkaas-about__content {
  position: relative;
  z-index: 3;
}

.alkaas-about__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--alkaas-blue);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 800;
}

.alkaas-about__eyebrow-line {
  width: 34px;
  height: 2px;
  flex: 0 0 34px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--alkaas-sky),var(--alkaas-blue));
}

.alkaas-about__title {
  margin: 0 0 19px;
  max-width: 650px;
  color: var(--alkaas-heading);
  font-size: clamp(31px,3vw,47px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.4px;
}

.alkaas-about__intro {
  margin: 0;
  max-width: 700px;
  color: var(--alkaas-text);
  font-size: 15px;
  line-height: 2;
}

.alkaas-about__services {
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alkaas-about__service {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: start;
  gap: 17px;
  padding: 16px 0;
}

.alkaas-about__service:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 69px;
  left: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--alkaas-border));
}

.alkaas-about__service-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--alkaas-blue);
  background: linear-gradient(145deg,#FFFFFF,var(--alkaas-sky-soft));
  border: 1px solid rgba(7,116,186,.13);
  box-shadow: 0 9px 25px rgba(7,116,186,.07);
  transition: transform .25s ease,color .25s ease,background .25s ease,box-shadow .25s ease;
}

.alkaas-about__service-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alkaas-about__service-copy h3 {
  margin: 1px 0 5px;
  color: var(--alkaas-heading);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 850;
}

.alkaas-about__service-copy p {
  margin: 0;
  max-width: 600px;
  color: var(--alkaas-text);
  font-size: 13px;
  line-height: 1.9;
}

.alkaas-about__visual {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alkaas-about__visual-stage {
  position: relative;
  width: 100%;
  min-height: 515px;
}

.alkaas-about__visual-stage::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: 4%;
  top: 7%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(85,201,238,.16),rgba(85,201,238,.035) 53%,transparent 70%);
  pointer-events: none;
}

.alkaas-about__water-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(7,116,186,.10);
  pointer-events: none;
}

.alkaas-about__water-ring.ring-one {
  width: 430px;
  height: 430px;
  top: 0;
  left: -50px;
}

.alkaas-about__water-ring.ring-two {
  width: 220px;
  height: 220px;
  right: 8px;
  bottom: 20px;
  border-color: rgba(85,201,238,.15);
}

.alkaas-about__main-image {
  position: absolute;
  top: 20px;
  right: 0;
  width: min(82%,470px);
  height: 420px;
  z-index: 2;
  overflow: hidden;
  border-radius: 26px;
  background: #EEF8FC;
  box-shadow: 0 28px 70px rgba(7,48,76,.13);
}

.alkaas-about__secondary-image {
  position: absolute;
  left: 0;
  bottom: 15px;
  width: min(57%,315px);
  height: 235px;
  z-index: 4;
  overflow: hidden;
  border: 7px solid #FFFFFF;
  border-radius: 22px;
  background: #EEF8FC;
  box-shadow: 0 24px 50px rgba(7,48,76,.18);
}

.alkaas-about__main-image img,
.alkaas-about__secondary-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.alkaas-about__main-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 58%,rgba(7,116,186,.07));
  pointer-events: none;
}

.alkaas-about__cta-row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 6;
  padding-inline: 4px;
}

.alkaas-about__cta {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 12px 22px;
  color: #FFFFFF !important;
  background: linear-gradient(135deg,var(--alkaas-blue),#159BD0);
  border-radius: 12px;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 13px 30px rgba(7,116,186,.21);
  transition: transform .23s ease,box-shadow .23s ease,background .23s ease;
}

.alkaas-about__cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .23s ease;
}

@media (hover:hover) {
  .alkaas-about__service:hover .alkaas-about__service-icon {
    color: #FFFFFF;
    background: linear-gradient(135deg,var(--alkaas-blue),var(--alkaas-sky));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(7,116,186,.18);
  }

  .alkaas-about__visual-stage:hover .alkaas-about__main-image img {
    transform: scale(1.025);
  }

  .alkaas-about__secondary-image:hover img {
    transform: scale(1.045);
  }

  .alkaas-about__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 37px rgba(7,116,186,.28);
  }

  .alkaas-about__cta:hover svg {
    transform: translateX(-3px);
  }
}

@media (max-width:1050px) {
  #alkaas-about-section { padding-block: 68px; }
  .alkaas-about__container { grid-template-columns: 1fr 1fr; gap: 40px; }
  .alkaas-about__visual-stage { min-height: 475px; }
  .alkaas-about__main-image { width: 87%; height: 385px; }
  .alkaas-about__secondary-image { height: 210px; }
}

@media (max-width:820px) {
  #alkaas-about-section { padding: 58px 16px 62px; }

  .alkaas-about__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 42px;
  }

  .alkaas-about__title { font-size: clamp(27px,7vw,37px); }
  .alkaas-about__intro { font-size: 14px; }

  .alkaas-about__visual {
    width: min(560px,100%);
    margin-inline: auto;
    gap: 12px;
  }

  .alkaas-about__visual-stage { min-height: 430px; }
  .alkaas-about__main-image { top: 0; width: 88%; height: 350px; border-radius: 22px; }
  .alkaas-about__secondary-image { width: 52%; height: 185px; bottom: 5px; border-width: 5px; border-radius: 18px; }
  .alkaas-about__cta-row { padding-top: 4px; }
}

@media (max-width:575px) {
  #alkaas-about-section { padding: 48px 14px 54px; }
  .alkaas-about__eyebrow { font-size: 13px; margin-bottom: 12px; }
  .alkaas-about__title { font-size: 28px; line-height: 1.38; margin-bottom: 14px; }
  .alkaas-about__intro { font-size: 13px; line-height: 1.9; }
  .alkaas-about__services { margin-top: 26px; }

  .alkaas-about__service {
    grid-template-columns: 44px minmax(0,1fr);
    gap: 13px;
    padding-block: 14px;
  }

  .alkaas-about__service:not(:last-child)::after { right: 57px; }
  .alkaas-about__service-icon { width: 43px; height: 43px; border-radius: 13px; }
  .alkaas-about__service-icon svg { width: 23px; height: 23px; }
  .alkaas-about__service-copy h3 { font-size: 15px; }
  .alkaas-about__service-copy p { font-size: 11.5px; line-height: 1.8; }

  .alkaas-about__visual-stage { min-height: 365px; }
  .alkaas-about__main-image { width: 91%; height: 285px; border-radius: 19px; }
  .alkaas-about__secondary-image { width: 55%; height: 150px; bottom: 4px; border-radius: 16px; }

  .alkaas-about__cta-row {
    justify-content: center;
    padding-top: 8px;
  }

  .alkaas-about__cta {
    min-height: 48px;
    padding-inline: 19px;
    font-size: 13px;
  }
}

@media (max-width:360px) {
  .alkaas-about__title { font-size: 25px; }
  .alkaas-about__visual-stage { min-height: 335px; }
  .alkaas-about__main-image { height: 260px; }
  .alkaas-about__secondary-image { height: 138px; }
}

/* ==============================================
   ALL PRODUCTS BUTTON
============================================== */

#alkaas-all-products-wrap {
  --alkaas-blue: #0774BA;
  --alkaas-blue-hover: #055F99;

  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    20px
    15px
    30px;

  background: transparent;

  direction: rtl;
}

.alkaas-all-products__btn {
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    10px 18px;

  background:
    var(--alkaas-blue);

  color:
    #fff !important;

  border-radius: 7px;

  text-decoration:
    none !important;

  font-size: 13px;
  line-height: 1;
  font-weight: 700;

  box-shadow:
    0 6px 18px
    rgba(7,116,186,.15);

  transition:
    background .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.alkaas-all-products__btn svg {
  width: 16px;
  height: 16px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;

  flex-shrink: 0;
}

@media (hover: hover) {

  .alkaas-all-products__btn:hover {

    background:
      var(--alkaas-blue-hover);

    transform:
      translateY(-2px);

    box-shadow:
      0 9px 22px
      rgba(7,116,186,.22);
  }

}

@media (max-width: 575px) {

  #alkaas-all-products-wrap {

    padding:
      16px
      12px
      24px;
  }

  .alkaas-all-products__btn {

    min-height: 40px;

    padding:
      9px 16px;

    font-size: 12px;

    border-radius: 7px;
  }

  .alkaas-all-products__btn svg {

    width: 15px;
    height: 15px;
  }

}


/* =========================================================
   CUSTOMER REVIEWS — LIGHTWEIGHT SINGLE-CARD SLIDER
   One review at a time, 5-star layout, no external library.
========================================================= */

#alkaas-reviews-section {
  --reviews-blue: #0774BA;
  --reviews-aqua: #55C9EE;
  --reviews-heading: #102738;
  --reviews-text: #405867;
  --reviews-muted: #71838F;
  --reviews-border: #DDE8EE;
  --reviews-star: #F3AF3D;

  direction: rtl;
  width: 100%;
  padding: 58px 16px 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgba(85,201,238,.08), transparent 27%),
    linear-gradient(180deg,#FFFFFF 0%,#F9FCFE 100%);
}

#alkaas-reviews-section,
#alkaas-reviews-section * {
  box-sizing: border-box;
}

.alkaas-reviews__container {
  width: min(1180px,100%);
  margin-inline: auto;
}

.alkaas-reviews__head {
  margin: 0 auto 28px;
  text-align: center;
}

.alkaas-reviews__title {
  margin: 0;
  color: var(--reviews-heading);
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.35;
  font-weight: 900;
}

.alkaas-reviews__slider {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 44px;
  align-items: center;
  gap: 10px;
}

.alkaas-reviews__viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.alkaas-reviews__track {
  direction: ltr;
  display: flex;
  width: 100%;
  will-change: transform;
  transition: transform .52s cubic-bezier(.22,.61,.36,1);
}

.alkaas-review-card {
  direction: rtl;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 180px;
  padding: 20px 24px 22px;
  border: 1px solid var(--reviews-border);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 8px 26px rgba(20,73,103,.055);
}

.alkaas-review-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.alkaas-review-card__identity {
  min-width: 0;
}

.alkaas-review-card__name {
  margin: 0 0 5px;
  color: var(--reviews-heading);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 900;
}

.alkaas-review-card__city {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--reviews-blue);
  background: #EAF8FD;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
}

.alkaas-review-card__rating {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.alkaas-review-card__stars {
  direction: ltr;
  color: var(--reviews-star);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

.alkaas-review-card__rating-label {
  color: var(--reviews-muted);
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 700;
}

.alkaas-review-card__divider {
  width: 100%;
  height: 1px;
  margin: 15px 0 12px;
  background: linear-gradient(90deg,transparent,var(--reviews-border),transparent);
}

.alkaas-review-card__text {
  margin: 0;
  color: var(--reviews-text);
  font-size: 14px;
  line-height: 2;
  font-style: normal;
  font-weight: 500;
}

.alkaas-reviews__nav {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(7,116,186,.12);
  border-radius: 50%;
  color: var(--reviews-blue);
  background: #FFFFFF;
  box-shadow: 0 7px 18px rgba(20,73,103,.055);
  cursor: pointer;
  font-family: Arial,sans-serif;
  font-size: 27px;
  line-height: 1;
  transition: transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}

.alkaas-reviews__dots {
  min-height: 18px;
  margin-top: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.alkaas-reviews__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7,116,186,.22);
  cursor: pointer;
  transition: transform .2s ease,background .2s ease;
}

.alkaas-reviews__dot.is-active {
  background: var(--reviews-blue);
  transform: scale(1.24);
}

@media (hover:hover) {
  .alkaas-reviews__nav:hover {
    color: #FFFFFF;
    background: var(--reviews-blue);
    border-color: var(--reviews-blue);
    transform: translateY(-2px);
  }

  .alkaas-review-card {
    transition: border-color .22s ease,box-shadow .22s ease;
  }

  .alkaas-review-card:hover {
    border-color: rgba(7,116,186,.22);
    box-shadow: 0 12px 30px rgba(20,73,103,.085);
  }
}


/* Customer initials — no fake profile photos */
.alkaas-review-card__identity {
  display: flex;
  align-items: center;
  gap: 11px;
}

.alkaas-review-card__avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--reviews-blue);
  background: linear-gradient(145deg,#FFFFFF,#EAF8FD);
  border: 1px solid rgba(7,116,186,.13);
  box-shadow: 0 6px 16px rgba(20,73,103,.07);
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.alkaas-review-card__identity-copy {
  min-width: 0;
  display: block;
}

@media (min-width:1024px) {
  .alkaas-reviews__slider {
    display: block;
  }

  .alkaas-reviews__viewport {
    overflow: visible;
    border-radius: 0;
  }

  .alkaas-reviews__track {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .alkaas-review-card {
    min-width: 0;
    width: auto;
    min-height: 220px;
    padding: 19px 20px 21px;
  }

  .alkaas-review-card:nth-child(n+4) {
    display: none;
  }

  .alkaas-review-card:nth-child(2) {
    transform: translateY(-6px);
    border-color: rgba(7,116,186,.24);
    box-shadow: 0 16px 38px rgba(20,73,103,.10);
  }

  .alkaas-reviews__nav,
  .alkaas-reviews__dots {
    display: none !important;
  }
}

@media (max-width:700px) {
  #alkaas-reviews-section {
    padding: 44px 10px 34px;
  }

  .alkaas-reviews__head {
    margin-bottom: 21px;
  }

  .alkaas-reviews__title {
    font-size: 27px;
  }

  .alkaas-reviews__slider {
    grid-template-columns: 30px minmax(0,1fr) 30px;
    gap: 5px;
  }

  .alkaas-reviews__nav {
    width: 30px;
    height: 30px;
    font-size: 21px;
    box-shadow: none;
  }

  .alkaas-review-card {
    min-height: 205px;
    padding: 17px 16px 19px;
    border-radius: 13px;
  }

  .alkaas-review-card__identity {
    gap: 8px;
  }

  .alkaas-review-card__avatar {
    flex-basis: 35px;
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .alkaas-review-card__header {
    gap: 10px;
  }

  .alkaas-review-card__name {
    font-size: 14px;
  }

  .alkaas-review-card__stars {
    font-size: 16px;
  }

  .alkaas-review-card__rating-label,
  .alkaas-review-card__city {
    font-size: 9px;
  }

  .alkaas-review-card__text {
    font-size: 12.5px;
    line-height: 1.95;
  }
}

@media (prefers-reduced-motion:reduce) {
  .alkaas-reviews__track,
  .alkaas-reviews__nav,
  .alkaas-reviews__dot,
  .alkaas-review-card {
    transition: none !important;
  }
}

/* =========================================================
   BLOG SECTION
========================================================= */

#alkaas-blog-section {
  --alkaas-blue: #0774BA;
  --alkaas-blue-dark: #055F99;
  --alkaas-aqua: #EAF8FD;
  --alkaas-text: #172B3A;
  --alkaas-muted: #647785;
  --alkaas-border: #E2EDF3;

  direction: rtl;
  width: 100%;

  padding:
    54px
    16px
    58px;

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(7,116,186,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F5FBFE 100%
    );
}

#alkaas-blog-section,
#alkaas-blog-section * {
  box-sizing: border-box;
}

#alkaas-blog-section
.alkaas-blog__container {

  width: 100%;
  max-width: 1180px;

  margin: 0 auto;
}

#alkaas-blog-section
.alkaas-blog__head {

  width: 100%;
  max-width: 720px;

  margin:
    0 auto 28px;

  text-align: center;
}

#alkaas-blog-section
.alkaas-blog__eyebrow {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-bottom: 9px;

  color:
    var(--alkaas-blue);

  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

#alkaas-blog-section
.alkaas-blog__eyebrow svg {

  width: 18px;
  height: 18px;

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

#alkaas-blog-section
.alkaas-blog__title {

  margin: 0;

  color:
    var(--alkaas-text);

  font-size:
    clamp(
      24px,
      3vw,
      34px
    );

  font-weight: 800;
  line-height: 1.35;
}

#alkaas-blog-section
.alkaas-blog__description {

  max-width: 650px;

  margin:
    10px auto 0;

  color:
    var(--alkaas-muted);

  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
}

#alkaas-blog-section
.alkaas-blog__grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 18px;

  width: 100%;
}

#alkaas-blog-section
.alkaas-blog-card {

  display: flex;
  flex-direction: column;

  min-width: 0;
  width: 100%;

  overflow: hidden;

  background: #FFFFFF;

  border:
    1px solid
    var(--alkaas-border);

  border-radius: 16px;

  box-shadow:
    0 8px 26px
    rgba(24,75,105,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

@media (hover: hover) {

  #alkaas-blog-section
  .alkaas-blog-card:hover {

    transform:
      translateY(-4px);

    border-color:
      rgba(7,116,186,.25);

    box-shadow:
      0 13px 34px
      rgba(24,75,105,.11);
  }

}

#alkaas-blog-section
.alkaas-blog-card__media {

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #E8F8FD 0%,
      #F8FDFF 100%
    );

  text-decoration: none;
}

#alkaas-blog-section
.alkaas-blog-card__media img {

  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  opacity: 1;

  filter: none !important;
  transform: none !important;

  image-rendering: auto;
}

#alkaas-blog-section
.alkaas-blog-card__placeholder {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      #EAF5FA 8%,
      #F8FCFE 18%,
      #EAF5FA 33%
    );

  background-size: 220% 100%;

  animation:
    alkaasBlogSkeleton
    1.35s
    linear
    infinite;
}

#alkaas-blog-section
.alkaas-blog-card__placeholder::after {
  content: "";
  position: absolute;
  inset: 18% 14%;
  border-radius: 14px;
  border: 1px solid rgba(7,116,186,.055);
  background: rgba(255,255,255,.20);
}

@keyframes alkaasBlogSkeleton {
  to {
    background-position-x: -220%;
  }
}

#alkaas-blog-section
.alkaas-blog-card__placeholder svg {

  position: relative;
  z-index: 2;
  opacity: .28;

  width: 64px;
  height: 64px;

  fill: none;

  stroke:
    rgba(7,116,186,.35);

  stroke-width: 1.4;

  stroke-linecap: round;
  stroke-linejoin: round;
}

#alkaas-blog-section
.alkaas-blog-card__media.has-image
.alkaas-blog-card__placeholder {

  display: none;
}

#alkaas-blog-section
.alkaas-blog-card__body {

  display: flex;
  flex: 1;
  flex-direction: column;

  min-width: 0;

  padding:
    18px
    18px
    19px;
}

#alkaas-blog-section
.alkaas-blog-card__category {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: fit-content;

  max-width: 100%;

  margin-bottom: 9px;

  padding:
    5px 9px;

  border-radius: 20px;

  background:
    var(--alkaas-aqua);

  color:
    var(--alkaas-blue);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;

  white-space: nowrap;
}

#alkaas-blog-section
.alkaas-blog-card__title {

  margin: 0;

  color:
    var(--alkaas-text);

  font-size: 17px;
  font-weight: 800;
  line-height: 1.65;

  display:
    -webkit-box;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

#alkaas-blog-section
.alkaas-blog-card__excerpt {

  margin:
    9px 0 16px;

  color:
    var(--alkaas-muted);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;

  display:
    -webkit-box;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

#alkaas-blog-section
.alkaas-blog-card__link {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  width: fit-content;

  margin-top: auto;

  color:
    var(--alkaas-blue)
    !important;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;

  text-decoration:
    none !important;
}

#alkaas-blog-section
.alkaas-blog-card__link svg {

  width: 16px;
  height: 16px;

  flex: 0 0 auto;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}

#alkaas-blog-section
.alkaas-blog__footer {

  display: flex;

  align-items: center;
  justify-content: center;

  margin-top: 27px;
}

#alkaas-blog-section
.alkaas-blog__all {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;

  padding:
    9px 18px;

  border: 0;

  border-radius: 8px;

  background:
    var(--alkaas-blue);

  color:
    #FFFFFF !important;

  font-size: 13px;
  font-weight: 800;

  text-decoration:
    none !important;

  box-shadow:
    0 6px 17px
    rgba(7,116,186,.18);

  transition:
    background .2s ease,
    transform .2s ease;
}

#alkaas-blog-section
.alkaas-blog__all svg {

  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
}

@media (max-width: 900px) {

  #alkaas-blog-section {

    padding:
      46px
      12px
      50px;
  }

  #alkaas-blog-section
  .alkaas-blog__grid {

    gap: 10px;
  }

  #alkaas-blog-section
  .alkaas-blog-card {

    border-radius: 13px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__body {

    padding:
      13px
      12px
      15px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__title {

    font-size: 14px;

    line-height: 1.6;
  }

  #alkaas-blog-section
  .alkaas-blog-card__excerpt {

    font-size: 12px;
  }

}


/* 3 مقالات جنب بعض على الجوال */

@media (max-width: 640px) {

  #alkaas-blog-section {

    padding:
      36px
      6px
      40px;
  }

  #alkaas-blog-section
  .alkaas-blog__container {

    width: 100%;
    max-width: 100%;
  }

  #alkaas-blog-section
  .alkaas-blog__head {

    padding:
      0 10px;

    margin-bottom: 18px;
  }

  #alkaas-blog-section
  .alkaas-blog__eyebrow {

    margin-bottom: 6px;

    font-size: 11px;
  }

  #alkaas-blog-section
  .alkaas-blog__title {

    font-size: 22px;

    line-height: 1.4;
  }

  #alkaas-blog-section
  .alkaas-blog__description {

    margin-top: 7px;

    font-size: 12px;

    line-height: 1.7;
  }

  #alkaas-blog-section
  .alkaas-blog__grid {

    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );

    gap: 5px;

    width: 100%;

    padding: 0;

    overflow: visible;
  }

  #alkaas-blog-section
  .alkaas-blog-card {

    width: 100%;

    min-width: 0;

    border-radius: 9px;

    box-shadow:
      0 4px 12px
      rgba(24,75,105,.07);
  }

  #alkaas-blog-section
  .alkaas-blog-card__media {

    width: 100%;

    aspect-ratio: 1 / 1;
  }

  #alkaas-blog-section
  .alkaas-blog-card__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
      none !important;

    filter:
      none !important;
  }

  #alkaas-blog-section
  .alkaas-blog-card__body {

    padding:
      7px
      5px
      9px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__category {

    margin-bottom: 5px;

    padding:
      3px 5px;

    border-radius: 10px;

    font-size: 7.5px;

    line-height: 1.4;
  }

  #alkaas-blog-section
  .alkaas-blog-card__title {

    font-size: 10px;

    line-height: 1.55;

    -webkit-line-clamp: 3;
  }

  #alkaas-blog-section
  .alkaas-blog-card__excerpt {

    display: none;
  }

  #alkaas-blog-section
  .alkaas-blog-card__link {

    gap: 2px;

    margin-top: 7px;

    font-size: 8.5px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__link svg {

    width: 10px;
    height: 10px;
  }

  #alkaas-blog-section
  .alkaas-blog__footer {

    margin-top: 17px;
  }

  #alkaas-blog-section
  .alkaas-blog__all {

    min-height: 37px;

    padding:
      7px 14px;

    font-size: 11px;

    border-radius: 7px;
  }

}

@media (max-width: 380px) {

  #alkaas-blog-section {

    padding-left: 4px;
    padding-right: 4px;
  }

  #alkaas-blog-section
  .alkaas-blog__grid {

    gap: 4px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__body {

    padding:
      6px 4px 8px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__title {

    font-size: 9px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__category {

    font-size: 7px;
  }

  #alkaas-blog-section
  .alkaas-blog-card__link {

    font-size: 8px;
  }

}


/* =========================================================
   SUPPORT & MAINTENANCE CENTER
========================================================= */

#alkaas-support-center {
  --support-blue: #0774BA;
  --support-blue-dark: #055F99;
  --support-aqua: #EAF8FD;
  --support-text: #172B3A;
  --support-muted: #657985;
  --support-border: #DCEBF2;

  direction: rtl;

  width: 100%;

  padding:
    46px 16px 64px;

  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(85,201,238,.15),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #F7FCFE 0%,
      #FFFFFF 100%
    );
}

#alkaas-support-center,
#alkaas-support-center * {
  box-sizing: border-box;
}

#alkaas-support-center
.alkaas-support__shell {

  width:
    min(
      1040px,
      100%
    );

  margin-inline: auto;
}

#alkaas-support-center
.alkaas-support__hero {

  max-width: 780px;

  margin:
    0 auto 24px;

  text-align: center;
}

#alkaas-support-center
.alkaas-support__hero-icon {

  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  margin:
    0 auto 10px;

  border-radius: 18px;

  color:
    var(--support-blue);

  background: #fff;

  border:
    1px solid
    rgba(7,116,186,.12);

  box-shadow:
    0 10px 26px
    rgba(7,116,186,.08);
}

#alkaas-support-center
.alkaas-support__hero-icon svg {

  width: 28px;
  height: 28px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

#alkaas-support-center
.alkaas-support__eyebrow {

  margin-bottom: 6px;

  color:
    var(--support-blue);

  font-size: 13px;

  font-weight: 800;
}

#alkaas-support-center
.alkaas-support__hero h1 {

  margin: 0;

  color:
    var(--support-text);

  font-size:
    clamp(
      26px,
      4vw,
      38px
    );

  line-height: 1.45;

  font-weight: 900;
}

#alkaas-support-center
.alkaas-support__hero p {

  max-width: 700px;

  margin:
    10px auto 0;

  color:
    var(--support-muted);

  font-size: 14px;

  line-height: 1.9;
}

#alkaas-support-center
.alkaas-support__card {

  overflow: hidden;

  background: #fff;

  border:
    1px solid
    var(--support-border);

  border-radius: 18px;

  box-shadow:
    0 18px 50px
    rgba(31,73,98,.08);
}

#alkaas-support-center
.alkaas-support__tabs {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 8px;

  padding: 12px;

  background:
    #F8FCFE;

  border-bottom:
    1px solid
    var(--support-border);
}

#alkaas-support-center
.alkaas-support__tab {

  min-height: 54px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    10px 12px;

  cursor: pointer;

  border:
    1px solid
    transparent;

  border-radius: 11px;

  background:
    transparent;

  color:
    #435967;

  font: inherit;

  font-size: 13px;

  font-weight: 800;

  transition:
    .2s ease;
}

#alkaas-support-center
.alkaas-support__tab:hover {

  background: #fff;

  border-color:
    rgba(7,116,186,.12);
}

#alkaas-support-center
.alkaas-support__tab.is-active {

  color: #fff;

  background:
    var(--support-blue);

  border-color:
    var(--support-blue);

  box-shadow:
    0 7px 18px
    rgba(7,116,186,.18);
}

#alkaas-support-center
.alkaas-support__tab-icon {

  font-size: 17px;

  line-height: 1;
}

#alkaas-support-center
.alkaas-support__form {

  padding: 26px;
}

#alkaas-support-center
.alkaas-support__grid {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap: 17px;
}

#alkaas-support-center
.alkaas-support__field {

  min-width: 0;
}

#alkaas-support-center
.alkaas-support__field--full {

  grid-column:
    1 / -1;
}

#alkaas-support-center
.alkaas-support__field label {

  display: block;

  margin-bottom: 7px;

  color:
    var(--support-text);

  font-size: 12.5px;

  font-weight: 800;
}

#alkaas-support-center
.alkaas-support__field label span {

  color: #d94747;
}

#alkaas-support-center
.alkaas-support__field input,
#alkaas-support-center
.alkaas-support__field select,
#alkaas-support-center
.alkaas-support__field textarea {

  width: 100%;

  min-height: 48px;

  display: block;

  padding:
    11px 13px;

  color:
    var(--support-text);

  background: #fff;

  border:
    1px solid
    #D7E5EC;

  border-radius: 10px;

  outline: 0;

  font: inherit;

  font-size: 13px;

  line-height: 1.6;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

#alkaas-support-center
.alkaas-support__field textarea {

  min-height: 125px;

  resize: vertical;
}

#alkaas-support-center
.alkaas-support__field input:focus,
#alkaas-support-center
.alkaas-support__field select:focus,
#alkaas-support-center
.alkaas-support__field textarea:focus {

  border-color:
    var(--support-blue);

  box-shadow:
    0 0 0 3px
    rgba(7,116,186,.09);
}

#alkaas-support-center
.alkaas-support__note {

  margin-top: 17px;

  padding:
    11px 13px;

  border-radius: 9px;

  background:
    var(--support-aqua);

  color:
    #4E6573;

  font-size: 11.5px;

  line-height: 1.8;
}

#alkaas-support-center
.alkaas-support__submit {

  width: 100%;

  min-height: 50px;

  margin-top: 17px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  cursor: pointer;

  border: 0;

  border-radius: 10px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--support-blue),
      #159BD0
    );

  font: inherit;

  font-size: 14px;

  font-weight: 900;

  box-shadow:
    0 10px 24px
    rgba(7,116,186,.18);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

#alkaas-support-center
.alkaas-support__submit:hover {

  transform:
    translateY(-1px);

  background:
    linear-gradient(
      135deg,
      var(--support-blue-dark),
      var(--support-blue)
    );

  box-shadow:
    0 13px 28px
    rgba(7,116,186,.24);
}

#alkaas-support-center
.alkaas-support__submit svg {

  width: 20px;
  height: 20px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


#alkaas-support-center
.alkaas-support__optional {
  display: inline-flex;
  margin-inline-start: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #71838F;
  background: #F1F6F8;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 700;
}

#alkaas-support-center
.alkaas-support__submit.is-loading {
  cursor: progress;
  opacity: .88;
  transform: none !important;
}

#alkaas-support-center
.alkaas-support__submit.is-loading svg {
  animation: alkaasSupportSendPulse .8s ease-in-out infinite alternate;
}

@keyframes alkaasSupportSendPulse {
  from {
    transform: translateX(0);
    opacity: .62;
  }

  to {
    transform: translateX(-4px);
    opacity: 1;
  }
}

@media (max-width: 700px) {

  #alkaas-support-center {

    padding:
      34px
      10px
      46px;
  }

  #alkaas-support-center
  .alkaas-support__tabs {

    grid-template-columns:
      1fr;

    gap: 6px;
  }

  #alkaas-support-center
  .alkaas-support__tab {

    min-height: 46px;
  }

  #alkaas-support-center
  .alkaas-support__form {

    padding:
      18px
      14px
      20px;
  }

  #alkaas-support-center
  .alkaas-support__grid {

    grid-template-columns:
      1fr;

    gap: 13px;
  }

  #alkaas-support-center
  .alkaas-support__field--full {

    grid-column:
      auto;
  }

  #alkaas-support-center
  .alkaas-support__hero h1 {

    font-size: 25px;
  }

}



  
  
  
  
/* =========================================================
   ALKAAS ALNAQI — CUSTOM WATER FOOTER V2
   Layout only changed; brand color direction retained.
========================================================= */


/* Hide original Salla footer only after custom footer mounts */

.alkaas-original-footer-hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


body.alkaas-custom-footer-mounted {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


body.alkaas-custom-footer-mounted > #alkaas-custom-footer {
  display: block;
  width: 100%;
  margin: 0 !important;
  margin-bottom: 0 !important;
}


#alkaas-custom-footer:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   BASE
========================================================= */

#alkaas-custom-footer {

  --footer-blue-1: #075680;
  --footer-blue-2: #044366;
  --footer-blue-3: #052F49;

  --footer-white: #FFFFFF;
  --footer-text: rgba(255,255,255,.84);
  --footer-muted: rgba(255,255,255,.62);
  --footer-line: rgba(255,255,255,.11);
  --footer-aqua: #55C9EE;

  position: relative;

  width: 100%;

  direction: rtl;

  overflow: hidden;

  color: var(--footer-white);

  background:
    linear-gradient(
      145deg,
      var(--footer-blue-1) 0%,
      var(--footer-blue-2) 48%,
      var(--footer-blue-3) 100%
    );

  isolation: isolate;
}


#alkaas-custom-footer,
#alkaas-custom-footer * {
  box-sizing: border-box;
}


/* =========================================================
   WATER BACKGROUND
========================================================= */

#alkaas-custom-footer::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 7% 18%,
      rgba(255,255,255,.05) 0 70px,
      transparent 72px
    ),

    radial-gradient(
      circle at 92% 23%,
      rgba(85,201,238,.10) 0 120px,
      transparent 122px
    ),

    radial-gradient(
      circle at 78% 87%,
      rgba(255,255,255,.035) 0 92px,
      transparent 94px
    ),

    radial-gradient(
      circle at 19% 92%,
      rgba(85,201,238,.06) 0 135px,
      transparent 137px
    );
}


#alkaas-custom-footer::after {

  content: "";

  position: absolute;

  z-index: -2;

  left: -10%;
  bottom: 70px;

  width: 120%;
  height: 190px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  border-radius:
    50% 50% 0 0;

  transform:
    rotate(-2deg);

  pointer-events: none;
}


#alkaas-custom-footer
.alkaas-footer__water-layer {

  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;
}


#alkaas-custom-footer
.alkaas-footer__water-layer::before {

  content: "";

  position: absolute;

  width: 400px;
  height: 400px;

  right: -210px;
  top: -210px;

  border-radius: 50%;

  border:
    1px solid
    rgba(85,201,238,.09);
}


#alkaas-custom-footer
.alkaas-footer__water-layer::after {

  content: "";

  position: absolute;

  width: 270px;
  height: 270px;

  left: -140px;
  bottom: -145px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.055);
}


/* =========================================================
   CONTAINER
========================================================= */

#alkaas-custom-footer
.alkaas-footer__container {

  position: relative;

  z-index: 2;

  width:
    min(
      1480px,
      calc(100% - 52px)
    );

  margin-inline: auto;
}


/* =========================================================
   DESKTOP MAIN LAYOUT
   Right: Brand
   Center: Quick Links
   Left: Company data
========================================================= */

#alkaas-custom-footer
.alkaas-footer__main {

  display: grid;

  grid-template-columns:
    minmax(360px, 1.35fr)
    minmax(240px, .8fr)
    minmax(320px, .95fr);

  align-items: start;

  gap:
    clamp(
      70px,
      9vw,
      150px
    );

  padding:
    66px 0 55px;
}


/* =========================================================
   BRAND
========================================================= */

#alkaas-custom-footer
.alkaas-footer__brand {

  min-width: 0;

  max-width: 500px;
}


#alkaas-custom-footer
.alkaas-footer__logo {

  width: fit-content;

  max-width: 270px;

  display: block;

  margin-bottom: 22px;

  text-decoration: none;
}


#alkaas-custom-footer
.alkaas-footer__logo img {

  display: block;

  width: auto;

  max-width: 245px;

  max-height: 92px;

  object-fit: contain;

  filter:
    brightness(0)
    invert(1);

  opacity: .99;
}


#alkaas-custom-footer
.alkaas-footer__logo-fallback {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 22px;

  color: #fff;

  text-decoration: none;

  font-size: 25px;

  font-weight: 900;
}


#alkaas-custom-footer
.alkaas-footer__logo-drop {

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background:
    rgba(255,255,255,.09);
}


#alkaas-custom-footer
.alkaas-footer__logo-drop svg {

  width: 25px;
  height: 25px;

  fill: none;

  stroke: var(--footer-aqua);

  stroke-width: 1.8;
}


#alkaas-custom-footer
.alkaas-footer__brand-copy {

  max-width: 470px;

  margin:
    0 0 25px;

  color: var(--footer-text);

  font-size: 14px;

  line-height: 2.05;

  font-weight: 450;
}


/* =========================================================
   SOCIAL
========================================================= */

#alkaas-custom-footer
.alkaas-footer__socials {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;
}


#alkaas-custom-footer
.alkaas-footer__social {

  width: 38px;
  height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 !important;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 50%;

  color: #fff !important;

  background:
    rgba(255,255,255,.075);

  text-decoration: none !important;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}


#alkaas-custom-footer
.alkaas-footer__social svg {

  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.9;

  stroke-linecap: round;

  stroke-linejoin: round;
}


#alkaas-custom-footer
.alkaas-footer__social[aria-label="فيسبوك"] svg {

  fill: currentColor;

  stroke: none;
}


@media (hover:hover) {

  #alkaas-custom-footer
  .alkaas-footer__social:hover {

    transform:
      translateY(-2px);

    background:
      rgba(255,255,255,.16);

    border-color:
      rgba(255,255,255,.35);
  }

}


/* =========================================================
   QUICK LINKS
========================================================= */

#alkaas-custom-footer
.alkaas-footer__links {

  min-width: 0;
}


#alkaas-custom-footer
.alkaas-footer__links h3 {

  position: relative;

  margin:
    5px 0 23px;

  padding-bottom:
    13px;

  color: #fff;

  font-size: 20px;

  line-height: 1.4;

  font-weight: 900;
}


#alkaas-custom-footer
.alkaas-footer__links h3::after {

  content: "";

  position: absolute;

  right: 0;
  bottom: 0;

  width: 32px;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--footer-aqua),
      #159BD0
    );
}


#alkaas-custom-footer
.alkaas-footer__links ul {

  margin: 0;

  padding: 0;

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


#alkaas-custom-footer
.alkaas-footer__links li {

  margin: 0;

  padding: 0;
}


#alkaas-custom-footer
.alkaas-footer__links li a {

  min-height: 39px;

  display: inline-flex;

  align-items: center;

  color: var(--footer-text) !important;

  text-decoration: none !important;

  font-size: 13.5px;

  line-height: 1.65;

  font-weight: 550;

  transition:
    color .18s ease,
    transform .18s ease;
}


@media (hover:hover) {

  #alkaas-custom-footer
  .alkaas-footer__links li a:hover {

    color: #fff !important;

    transform:
      translateX(-3px);
  }

}


/* =========================================================
   COMPANY DATA
========================================================= */

#alkaas-custom-footer
.alkaas-footer__company {

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 18px;

  padding-top: 12px;
}


#alkaas-custom-footer
.alkaas-footer__company-row {

  width: 100%;

  min-height: 52px;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 12px;

  color: #fff;
}


#alkaas-custom-footer
.alkaas-footer__company-icon {

  flex:
    0 0 42px;

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  color: var(--footer-aqua);

  background:
    rgba(255,255,255,.07);

  border:
    1px solid
    rgba(255,255,255,.10);
}


#alkaas-custom-footer
.alkaas-footer__company-icon svg {

  width: 20px;
  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}


#alkaas-custom-footer
.alkaas-footer__company-number {

  color: #fff;

  font-family:
    Arial,
    "Tahoma",
    sans-serif;

  font-size: 16px;

  line-height: 1.2;

  font-weight: 700;

  direction: ltr;

  unicode-bidi: isolate;

  letter-spacing: .15px;
}


#alkaas-custom-footer
.alkaas-footer__company-short {

  margin-right: -5px;

  color: var(--footer-muted);

  font-size: 11px;

  line-height: 1;

  font-weight: 800;
}


#alkaas-custom-footer
.alkaas-footer__vat-logo {

  flex:
    0 0 44px;

  width: 44px;
  height: 44px;

  display: block;

  object-fit: contain;

  object-position: center;

  border-radius: 7px;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

#alkaas-custom-footer
.alkaas-footer__bottom {

  min-height: 92px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

  padding:
    22px 0 24px;

  border-top:
    1px solid
    var(--footer-line);
}


#alkaas-custom-footer
.alkaas-footer__copyright {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  justify-content: flex-start;

  gap: 7px;

  color:
    rgba(255,255,255,.74);

  font-size: 12px;

  line-height: 1.6;

  font-weight: 500;
}


#alkaas-custom-footer
.alkaas-footer__copyright-separator {

  color:
    var(--footer-aqua);
}


/* =========================================================
   PAYMENTS
========================================================= */

#alkaas-custom-footer
.alkaas-footer__payments {

  width: 270px;

  display: grid;

  grid-template-columns:
    repeat(3, 82px);

  grid-auto-rows: 46px;

  align-items: center;

  justify-content: end;

  gap: 9px 8px;
}


#alkaas-custom-footer
.alkaas-footer__payment {

  position: relative;

  width: 82px;
  height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 6px 8px;

  border:
    1px solid
    rgba(85,201,238,.34);

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(85,201,238,.18) 0,
      rgba(85,201,238,.07) 27%,
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FFFFFF 48%,
      #F2FBFF 76%,
      #E7F8FF 100%
    );

  overflow: hidden;

  box-shadow:
    0 5px 13px rgba(4,67,102,.13),
    inset 0 1px 0 rgba(255,255,255,.98);

  isolation: isolate;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


/* subtle shared finish on every small card */

#alkaas-custom-footer
.alkaas-footer__payment::after {

  content: "";

  position: absolute;

  right: 7px;
  left: 7px;
  bottom: 0;

  height: 2px;

  border-radius: 999px 999px 0 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(85,201,238,.58),
      transparent
    );

  opacity: .72;

  pointer-events: none;
}


/* restrained gloss — card only, not the whole payment area */

#alkaas-custom-footer
.alkaas-footer__payment::before {

  content: "";

  position: absolute;

  top: -35%;
  left: -58%;

  width: 44%;
  height: 170%;

  z-index: 1;

  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,.08) 25%,
      rgba(255,255,255,.78) 50%,
      rgba(255,255,255,.08) 75%,
      transparent 100%
    );

  transform: skewX(-18deg);

  opacity: .58;

  pointer-events: none;
}


#alkaas-custom-footer
.alkaas-footer__payment img {

  position: relative;

  z-index: 2;

  display: block;

  width: auto;
  height: auto;

  max-width: 64px;
  max-height: 27px;

  object-fit: contain;

  object-position: center;

  margin: auto;
}


/* Optical normalization: same card size, balanced artwork */

#alkaas-custom-footer
.alkaas-footer__payment--mada img {

  max-width: 60px;
  max-height: 26px;
}


#alkaas-custom-footer
.alkaas-footer__payment--visa img {

  max-width: 58px;
  max-height: 23px;
}


#alkaas-custom-footer
.alkaas-footer__payment--mastercard img {

  max-width: 52px;
  max-height: 27px;
}


#alkaas-custom-footer
.alkaas-footer__payment--cod img {

  max-width: 66px;
  max-height: 31px;

  filter: none;
}


#alkaas-custom-footer
.alkaas-footer__payment--tabby img {

  max-width: 59px;
  max-height: 25px;
}


#alkaas-custom-footer
.alkaas-footer__payment--tamara img {

  max-width: 62px;
  max-height: 25px;
}


@media (hover:hover) {

  #alkaas-custom-footer
  .alkaas-footer__payment:hover {

    transform:
      translateY(-2px);

    border-color:
      rgba(85,201,238,.62);

    box-shadow:
      0 8px 18px rgba(4,67,102,.17),
      inset 0 1px 0 rgba(255,255,255,1);
  }


  #alkaas-custom-footer
  .alkaas-footer__payment:hover::before {

    animation:
      alkaas-footer-payment-shine
      .72s ease;
  }

}


@keyframes alkaas-footer-payment-shine {

  0% {
    left: -58%;
  }

  100% {
    left: 122%;
  }

}


@media (prefers-reduced-motion: reduce) {

  #alkaas-custom-footer
  .alkaas-footer__payment,
  #alkaas-custom-footer
  .alkaas-footer__payment::before {

    transition: none !important;
    animation: none !important;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  #alkaas-custom-footer
  .alkaas-footer__container {

    width:
      calc(100% - 36px);
  }


  #alkaas-custom-footer
  .alkaas-footer__main {

    grid-template-columns:
      minmax(300px,1.2fr)
      minmax(210px,.8fr)
      minmax(260px,.9fr);

    gap:
      45px;

    padding:
      56px 0 44px;
  }


  #alkaas-custom-footer
  .alkaas-footer__brand-copy {

    font-size:
      13px;
  }


  #alkaas-custom-footer
  .alkaas-footer__company-number {

    font-size:
      14px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  #alkaas-custom-footer
  .alkaas-footer__container {

    width:
      calc(100% - 28px);
  }


  #alkaas-custom-footer
  .alkaas-footer__main {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 42px;

    padding:
      44px 0 38px;
  }


  /* Brand first */

  #alkaas-custom-footer
  .alkaas-footer__brand {

    width: 100%;

    max-width: none;

    text-align: center;
  }


  #alkaas-custom-footer
  .alkaas-footer__logo {

    margin:
      0 auto 20px;
  }


  #alkaas-custom-footer
  .alkaas-footer__logo img {

    max-width:
      205px;

    max-height:
      78px;
  }


  #alkaas-custom-footer
  .alkaas-footer__logo-fallback {

    margin:
      0 auto 20px;
  }


  #alkaas-custom-footer
  .alkaas-footer__brand-copy {

    max-width:
      540px;

    margin:
      0 auto 22px;

    font-size:
      13px;

    line-height:
      2;
  }


  #alkaas-custom-footer
  .alkaas-footer__socials {

    justify-content:
      center;
  }


  /* Quick links second */

  #alkaas-custom-footer
  .alkaas-footer__links {

    width: 100%;
  }


  #alkaas-custom-footer
  .alkaas-footer__links h3 {

    width: fit-content;

    margin:
      0 auto 22px;

    padding-bottom:
      12px;

    font-size:
      21px;

    text-align:
      center;
  }


  #alkaas-custom-footer
  .alkaas-footer__links h3::after {

    right: 50%;

    transform:
      translateX(50%);
  }


  #alkaas-custom-footer
  .alkaas-footer__links ul {

    align-items:
      center;

    gap:
      2px;
  }


  #alkaas-custom-footer
  .alkaas-footer__links li a {

    min-height:
      43px;

    justify-content:
      center;

    font-size:
      14px;

    text-align:
      center;
  }


  /* Company data third */

  #alkaas-custom-footer
  .alkaas-footer__company {

    width:
      min(360px,100%);

    margin-inline:
      auto;

    align-items:
      stretch;

    gap:
      14px;

    padding-top:
      0;
  }


  #alkaas-custom-footer
  .alkaas-footer__company-row {

    justify-content:
      center;

    min-height:
      52px;

    gap:
      10px;
  }


  #alkaas-custom-footer
  .alkaas-footer__company-number {

    font-size:
      15px;
  }


  /* Bottom = copyright first, payments second */

  #alkaas-custom-footer
  .alkaas-footer__bottom {

    min-height: 0;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      20px;

    padding:
      23px 0 27px;
  }


  #alkaas-custom-footer
  .alkaas-footer__copyright {

    order: 1;

    justify-content:
      center;

    text-align:
      center;

    font-size:
      11.5px;
  }


  #alkaas-custom-footer
  .alkaas-footer__payments {

    order: 2;

    width:
      min(286px,100%);

    margin-inline:
      auto;

    grid-template-columns:
      repeat(3,minmax(0,1fr));

    grid-auto-rows: 43px;

    justify-content: center;

    gap: 8px;
  }


  #alkaas-custom-footer
  .alkaas-footer__payment,
  #alkaas-custom-footer
  .alkaas-footer__payment--cod,
  #alkaas-custom-footer
  .alkaas-footer__payment--tabby,
  #alkaas-custom-footer
  .alkaas-footer__payment--tamara {

    width: 100%;
    height: 43px;

    padding: 5px 7px;

    border-radius: 9px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  #alkaas-custom-footer
  .alkaas-footer__container {

    width:
      calc(100% - 22px);
  }


  #alkaas-custom-footer
  .alkaas-footer__main {

    gap:
      36px;

    padding:
      39px 0 34px;
  }


  #alkaas-custom-footer
  .alkaas-footer__brand-copy {

    font-size:
      12px;
  }


  #alkaas-custom-footer
  .alkaas-footer__links li a {

    min-height:
      40px;

    font-size:
      13px;
  }


  #alkaas-custom-footer
  .alkaas-footer__company-number {

    font-size:
      13.5px;
  }


  #alkaas-custom-footer
  .alkaas-footer__company-icon {

    flex-basis:
      38px;

    width:
      38px;

    height:
      38px;
  }


  #alkaas-custom-footer
  .alkaas-footer__vat-logo {

    flex-basis:
      40px;

    width:
      40px;

    height:
      40px;
  }


  #alkaas-custom-footer
  .alkaas-footer__payments {

    width:
      min(272px,100%);

    grid-auto-rows: 40px;

    gap: 7px;
  }


  #alkaas-custom-footer
  .alkaas-footer__payment,
  #alkaas-custom-footer
  .alkaas-footer__payment--cod,
  #alkaas-custom-footer
  .alkaas-footer__payment--tabby,
  #alkaas-custom-footer
  .alkaas-footer__payment--tamara {

    height: 40px;

    padding: 5px 6px;

    border-radius: 8px;
  }


  #alkaas-custom-footer
  .alkaas-footer__payment img {

    max-width: 58px;
    max-height: 24px;
  }


  #alkaas-custom-footer
  .alkaas-footer__payment--mastercard img {

    max-width: 48px;
  }

}


/* =========================================================
   ALKAAS PUREFLOW EXPERIENCE
   Water identity layer for Alkaas Alnaqi
   Add this block at the END of the current custom CSS.
========================================================= */

:root {
  --alkaas-pf-blue: #0774BA;
  --alkaas-pf-blue-dark: #055F99;
  --alkaas-pf-aqua: #55C9EE;
  --alkaas-pf-aqua-soft: #DDF7FF;
  --alkaas-pf-white: #FFFFFF;
}


/* =========================================================
   GLOBAL SAFETY
========================================================= */

#alkaas-pureflow-experience,
#alkaas-pureflow-experience * {
  pointer-events: none !important;
  user-select: none !important;
  box-sizing: border-box;
}

.alkaas-pureflow-section {
  position: relative;
  isolation: isolate;
}


/* =========================================================
   WATER DEPTH
========================================================= */

.alkaas-pureflow-depth-layer {
  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity:
    var(
      --pf-depth-opacity,
      .025
    );

  background:

    radial-gradient(
      circle at 92% 16%,
      rgba(
        85,
        201,
        238,
        .58
      ) 0 72px,
      transparent 190px
    ),

    radial-gradient(
      circle at 7% 84%,
      rgba(
        7,
        116,
        186,
        .30
      ) 0 65px,
      transparent 190px
    );
}


/* =========================================================
   HERO — WATER LENS
========================================================= */

.alkaas-pureflow-hero {
  position:
    relative !important;

  isolation:
    isolate;
}


.alkaas-water-lens {
  position:
    absolute;

  z-index:
    4;

  top:
    50%;

  left:
    8%;

  width:
    clamp(
      250px,
      34vw,
      520px
    );

  aspect-ratio:
    1 / 1;

  transform:
    translateY(-50%);

  border-radius:
    50%;

  pointer-events:
    none !important;

  overflow:
    visible;

  opacity:
    .94;
}


/* GLOW */

.alkaas-water-lens__halo {
  position:
    absolute;

  inset:
    -11%;

  border-radius:
    50%;

  background:

    radial-gradient(
      circle,

      rgba(
        120,
        229,
        255,
        .16
      ) 0%,

      rgba(
        85,
        201,
        238,
        .075
      ) 42%,

      transparent
      72%
    );

  filter:
    blur(10px);
}


/* WATER GLASS */

.alkaas-water-lens__glass {
  position:
    absolute;

  inset:
    8%;

  border-radius:
    50%;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .28
    );

  background:

    radial-gradient(
      circle at 32% 24%,

      rgba(
        255,
        255,
        255,
        .42
      ) 0 3%,

      rgba(
        255,
        255,
        255,
        .10
      ) 14%,

      transparent
      33%
    ),

    radial-gradient(
      circle at 70% 74%,

      rgba(
        85,
        201,
        238,
        .14
      ),

      transparent
      39%
    ),

    linear-gradient(
      145deg,

      rgba(
        255,
        255,
        255,
        .08
      ),

      rgba(
        85,
        201,
        238,
        .065
      )
    );

  box-shadow:

    inset
    0 0 34px
    rgba(
      255,
      255,
      255,
      .10
    ),

    inset
    -18px -22px 45px
    rgba(
      7,
      116,
      186,
      .075
    ),

    0 28px 80px
    rgba(
      0,
      67,
      105,
      .07
    );

  backdrop-filter:
    blur(1.5px);

  -webkit-backdrop-filter:
    blur(1.5px);
}


/* ORBIT */

.alkaas-water-lens__orbit {
  position:
    absolute;

  inset:
    2%;

  border-radius:
    50%;

  border:
    1px solid
    rgba(
      118,
      225,
      255,
      .18
    );

  box-shadow:

    0 0 0 16px
    rgba(
      85,
      201,
      238,
      .018
    ),

    0 0 0 38px
    rgba(
      85,
      201,
      238,
      .012
    );

  animation:
    alkaasPfOrbit
    12s
    ease-in-out
    infinite
    alternate;
}


/* FLOATING DROP */

.alkaas-water-lens__drop {
  position:
    absolute;

  right:
    4%;

  bottom:
    13%;

  width:
    24px;

  height:
    31px;

  border-radius:
    50% 50% 55% 45%
    /
    58% 58% 42% 42%;

  transform:
    rotate(35deg);

  background:

    linear-gradient(
      145deg,

      rgba(
        255,
        255,
        255,
        .86
      ),

      rgba(
        85,
        201,
        238,
        .55
      ) 48%,

      rgba(
        7,
        116,
        186,
        .58
      )
    );

  box-shadow:

    inset
    3px 4px 8px
    rgba(
      255,
      255,
      255,
      .55
    ),

    0 8px 20px
    rgba(
      7,
      116,
      186,
      .18
    );

  opacity:
    .82;

  animation:
    alkaasPfDropFloat
    4.8s
    ease-in-out
    infinite;
}


/* WATER LIGHT / CAUSTICS */

.alkaas-water-lens__caustics {
  position:
    absolute;

  inset:
    12%;

  border-radius:
    50%;

  overflow:
    hidden;

  opacity:
    .27;

  mix-blend-mode:
    screen;

  background:

    repeating-radial-gradient(
      ellipse at 18% 30%,

      rgba(
        255,
        255,
        255,
        0
      ) 0 11px,

      rgba(
        220,
        250,
        255,
        .25
      ) 12px 14px,

      rgba(
        255,
        255,
        255,
        0
      ) 15px 26px
    ),

    repeating-radial-gradient(
      ellipse at 74% 66%,

      rgba(
        255,
        255,
        255,
        0
      ) 0 15px,

      rgba(
        135,
        229,
        255,
        .22
      ) 16px 18px,

      rgba(
        255,
        255,
        255,
        0
      ) 19px 31px
    );

  background-size:
    145% 145%,
    165% 165%;

  animation:
    alkaasPfCaustics
    13s
    linear
    infinite
    alternate;

  filter:
    blur(.25px);
}


@keyframes alkaasPfOrbit {

  0% {
    transform:
      scale(.985)
      rotate(-3deg);

    opacity:
      .58;
  }

  100% {
    transform:
      scale(1.025)
      rotate(4deg);

    opacity:
      .95;
  }

}


@keyframes alkaasPfDropFloat {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(35deg);

  }

  50% {

    transform:
      translateY(-8px)
      rotate(31deg);

  }

}


@keyframes alkaasPfCaustics {

  0% {

    background-position:
      0% 0%,
      100% 100%;

    transform:
      scale(1)
      rotate(0deg);

  }

  100% {

    background-position:
      38% 22%,
      62% 48%;

    transform:
      scale(1.035)
      rotate(2deg);

  }

}


/* =========================================================
   PUREFLOW DOCUMENT OVERLAY
========================================================= */

#alkaas-pureflow-experience {
  position:
    absolute;

  top: 0;
  right: 0;
  left: 0;

  width:
    100%;

  z-index:
    18;

  overflow:
    visible;
}


#alkaas-pureflow-experience
.alkaas-pureflow-svg {
  position:
    absolute;

  inset:
    0;

  display:
    block;

  width:
    100%;

  height:
    100%;

  overflow:
    visible;
}


.alkaas-pureflow-line {
  opacity:
    .72;
}


.alkaas-pureflow-glow {
  opacity:
    .46;

  animation:
    alkaasPfFlowPulse
    5.8s
    linear
    infinite;
}


@keyframes alkaasPfFlowPulse {

  from {
    stroke-dashoffset:
      0;
  }

  to {
    stroke-dashoffset:
      -380px;
  }

}


/* =========================================================
   PUREFLOW NODES
========================================================= */

.alkaas-pureflow-node__ring {
  fill:
    rgba(
      255,
      255,
      255,
      .015
    );

  stroke:
    rgba(
      85,
      201,
      238,
      .40
    );

  stroke-width:
    1;

  opacity:
    .42;

  transform-box:
    fill-box;

  transform-origin:
    center;
}


.alkaas-pureflow-node__ring--2 {
  stroke:
    rgba(
      255,
      255,
      255,
      .50
    );

  opacity:
    .35;
}


.alkaas-pureflow-node__core {
  fill:
    #77DDF8;

  stroke:
    rgba(
      255,
      255,
      255,
      .85
    );

  stroke-width:
    1;

  filter:
    url(
      #alkaas-pf-glow
    );
}


.alkaas-pureflow-node.is-active
.alkaas-pureflow-node__core {
  fill:
    #FFFFFF;

  stroke:
    #55C9EE;
}


.alkaas-pureflow-node.is-active
.alkaas-pureflow-node__ring {
  animation:
    alkaasPfNodeRing
    1.35s
    ease-out
    infinite;
}


.alkaas-pureflow-node.is-active
.alkaas-pureflow-node__ring--2 {
  animation-delay:
    .28s;
}


@keyframes alkaasPfNodeRing {

  0% {

    transform:
      scale(.60);

    opacity:
      .70;

  }

  75%,
  100% {

    transform:
      scale(2.15);

    opacity:
      0;

  }

}


/* =========================================================
   MOVING DROP
========================================================= */

.alkaas-pureflow-drop {
  filter:
    url(
      #alkaas-pf-glow
    );
}


.alkaas-pureflow-drop__halo {
  fill:
    rgba(
      85,
      201,
      238,
      .10
    );

  stroke:
    rgba(
      125,
      229,
      255,
      .16
    );

  stroke-width:
    1;
}


.alkaas-pureflow-drop__shape {
  fill:
    #0774BA;

  stroke:
    rgba(
      255,
      255,
      255,
      .92
    );

  stroke-width:
    1.25;
}


.alkaas-pureflow-drop__shine {
  fill:
    rgba(
      255,
      255,
      255,
      .88
    );
}


/* =========================================================
   SECTION HEADING SIGNATURE
========================================================= */

.alkaas-pureflow-heading {
  position:
    relative;
}


.alkaas-pureflow-heading::before {
  content:
    "";

  display:
    inline-block;

  width:
    .48em;

  height:
    .68em;

  margin-inline-end:
    .36em;

  border-radius:
    52% 48% 57% 43%
    /
    58% 58% 42% 42%;

  vertical-align:
    .02em;

  transform:
    rotate(34deg);

  background:

    linear-gradient(
      145deg,

      #A8EDFF
      0%,

      #55C9EE
      42%,

      #0774BA
      100%
    );

  box-shadow:

    inset
    1px 1px 2px
    rgba(
      255,
      255,
      255,
      .72
    ),

    0 3px 10px
    rgba(
      7,
      116,
      186,
      .18
    );

  transition:

    transform
    .36s ease,

    box-shadow
    .36s ease,

    filter
    .36s ease;
}


.alkaas-pureflow-section-active
.alkaas-pureflow-heading::before {
  transform:
    rotate(34deg)
    scale(1.13);

  filter:
    brightness(1.08);

  box-shadow:

    inset
    1px 1px 2px
    rgba(
      255,
      255,
      255,
      .82
    ),

    0 0 0 6px
    rgba(
      85,
      201,
      238,
      .08
    ),

    0 5px 16px
    rgba(
      7,
      116,
      186,
      .22
    );
}


/* =========================================================
   MENISCUS
========================================================= */

.alkaas-pureflow-meniscus {
  position:
    relative;
}


.alkaas-pureflow-meniscus-line {
  position:
    absolute;

  z-index:
    3;

  right:
    8%;

  left:
    8%;

  bottom:
    3px;

  height:
    21px;

  pointer-events:
    none;

  opacity:
    .58;

  border-top:
    1px solid
    rgba(
      85,
      201,
      238,
      .25
    );

  border-radius:
    50% 50% 0 0
    /
    100% 100% 0 0;

  box-shadow:

    0 -4px 13px
    rgba(
      85,
      201,
      238,
      .035
    ),

    inset
    0 4px 12px
    rgba(
      255,
      255,
      255,
      .08
    );
}


.alkaas-pureflow-meniscus-line::before,
.alkaas-pureflow-meniscus-line::after {
  content:
    "";

  position:
    absolute;

  top:
    -2px;

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    rgba(
      100,
      218,
      247,
      .45
    );

  box-shadow:
    0 0 10px
    rgba(
      85,
      201,
      238,
      .20
    );
}


.alkaas-pureflow-meniscus-line::before {
  right:
    7%;
}


.alkaas-pureflow-meniscus-line::after {
  left:
    7%;
}


/* =========================================================
   PURITY GLASS — PRODUCT CARDS
========================================================= */

.alkaas-purity-card {
  --pf-x: 50%;
  --pf-y: 24%;

  position:
    relative !important;

  isolation:
    isolate;

  transition:

    box-shadow
    .30s ease,

    filter
    .30s ease !important;

  box-shadow:

    0 7px 24px
    rgba(
      17,
      75,
      109,
      .055
    ),

    0 0 0 1px
    rgba(
      85,
      201,
      238,
      .075
    ) !important;
}


.alkaas-purity-card::before {
  content:
    "";

  position:
    absolute;

  z-index:
    8;

  inset:
    0;

  pointer-events:
    none;

  border-radius:
    inherit;

  opacity:
    0;

  background:

    radial-gradient(
      circle at
      var(--pf-x)
      var(--pf-y),

      rgba(
        255,
        255,
        255,
        .72
      )
      0 3%,

      rgba(
        153,
        232,
        252,
        .18
      )
      11%,

      rgba(
        85,
        201,
        238,
        .055
      )
      24%,

      transparent
      48%
    );

  transition:
    opacity
    .28s ease;
}


.alkaas-purity-card::after {
  content:
    "";

  position:
    absolute;

  z-index:
    7;

  inset:
    1px;

  pointer-events:
    none;

  border-radius:
    inherit;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .42
    );

  box-shadow:

    inset
    0 1px 0
    rgba(
      255,
      255,
      255,
      .42
    ),

    inset
    0 -1px 0
    rgba(
      85,
      201,
      238,
      .06
    );
}


@media (hover:hover) {

  .alkaas-purity-card:hover {

    box-shadow:

      0 14px 38px
      rgba(
        13,
        89,
        130,
        .105
      ),

      0 0 0 1px
      rgba(
        85,
        201,
        238,
        .18
      ) !important;

  }


  .alkaas-purity-card:hover::before {
    opacity:
      1;
  }

}


/* =========================================================
   WATER BUTTONS
========================================================= */

.alkaas-water-button {
  position:
    relative !important;

  isolation:
    isolate;

  overflow:
    hidden !important;
}


.alkaas-water-button__sweep {
  position:
    absolute;

  z-index:
    0;

  top:
    -55%;

  bottom:
    -55%;

  left:
    -34%;

  width:
    23%;

  pointer-events:
    none;

  opacity:
    0;

  transform:
    translateX(0)
    rotate(12deg);

  background:

    linear-gradient(
      90deg,

      transparent,

      rgba(
        255,
        255,
        255,
        .10
      ),

      rgba(
        255,
        255,
        255,
        .52
      ),

      rgba(
        255,
        255,
        255,
        .12
      ),

      transparent
    );

  filter:
    blur(.5px);
}


.alkaas-water-button
> *:not(.alkaas-water-button__sweep):not(.alkaas-water-ripple) {
  position:
    relative;

  z-index:
    2;
}


@media (hover:hover) {

  .alkaas-water-button:hover
  .alkaas-water-button__sweep {

    opacity:
      .88;

    animation:
      alkaasPfButtonSweep
      .72s
      cubic-bezier(
        .2,
        .7,
        .2,
        1
      )
      both;

  }

}


@keyframes alkaasPfButtonSweep {

  0% {

    transform:
      translateX(0)
      rotate(12deg);

  }

  100% {

    transform:
      translateX(650%)
      rotate(12deg);

  }

}


.alkaas-water-ripple {
  position:
    absolute !important;

  z-index:
    1 !important;

  display:
    block !important;

  border-radius:
    50% !important;

  pointer-events:
    none !important;

  background:

    radial-gradient(
      circle,

      rgba(
        255,
        255,
        255,
        .38
      )
      0%,

      rgba(
        145,
        231,
        252,
        .22
      )
      31%,

      rgba(
        85,
        201,
        238,
        .08
      )
      54%,

      transparent
      70%
    ) !important;

  transform:
    scale(.12);

  opacity:
    .92;

  animation:
    alkaasPfRipple
    .68s
    ease-out
    forwards !important;
}


@keyframes alkaasPfRipple {

  0% {

    transform:
      scale(.12);

    opacity:
      .90;

  }

  100% {

    transform:
      scale(1);

    opacity:
      0;

  }

}


/* =========================================================
   SECTION REACTION
========================================================= */

.alkaas-pureflow-section-active
.alkaas-pureflow-depth-layer {
  opacity:
    calc(
      var(
        --pf-depth-opacity,
        .025
      )
      +
      .022
    );

  transition:
    opacity
    .55s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .alkaas-water-lens {

    left:
      2%;

    width:
      clamp(
        220px,
        39vw,
        390px
      );

    opacity:
      .80;
  }


  .alkaas-pureflow-line {
    opacity:
      .58;
  }


  .alkaas-pureflow-glow {
    opacity:
      .34;
  }

}


/* =========================================================
   MOBILE LIGHT MODE
========================================================= */

@media (max-width: 700px) {

  .alkaas-water-lens {

    top:
      23%;

    left:
      -18%;

    width:
      300px;

    transform:
      none;

    opacity:
      .48;

  }


  .alkaas-water-lens__glass {

    backdrop-filter:
      none;

    -webkit-backdrop-filter:
      none;

  }


  .alkaas-water-lens__orbit {

    opacity:
      .48;

    animation-duration:
      17s;

  }


  .alkaas-water-lens__caustics {

    opacity:
      .14;

    animation-duration:
      19s;

  }


  .alkaas-water-lens__drop {

    width:
      18px;

    height:
      24px;

    opacity:
      .62;

  }


  .alkaas-pureflow-line {

    opacity:
      .27;

    stroke-width:
      .82;

  }


  .alkaas-pureflow-glow {

    opacity:
      .10;

    stroke-width:
      1;

  }


  .alkaas-pureflow-node__ring {
    opacity:
      .18;
  }


  .alkaas-pureflow-heading::before {

    width:
      .42em;

    height:
      .60em;

    margin-inline-end:
      .30em;

  }


  .alkaas-pureflow-meniscus-line {

    right:
      5%;

    left:
      5%;

    height:
      15px;

    opacity:
      .24;

  }


  .alkaas-purity-card {

    box-shadow:

      0 5px 16px
      rgba(
        17,
        75,
        109,
        .045
      ),

      0 0 0 1px
      rgba(
        85,
        201,
        238,
        .055
      ) !important;

  }


  .alkaas-purity-card::before {
    display:
      none;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .alkaas-water-lens {

    left:
      -27%;

    width:
      270px;

    opacity:
      .42;

  }


  .alkaas-pureflow-line,
  .alkaas-pureflow-glow {

    opacity:
      .28;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .alkaas-water-lens__orbit,
  .alkaas-water-lens__drop,
  .alkaas-water-lens__caustics,
  .alkaas-pureflow-glow,
  .alkaas-pureflow-node__ring,
  .alkaas-water-button__sweep,
  .alkaas-water-ripple {

    animation:
      none !important;

  }


  .alkaas-pureflow-drop {
    display:
      block !important;
  }


  .alkaas-purity-card,
  .alkaas-purity-card::before,
  .alkaas-pureflow-heading::before {

    transition:
      none !important;

  }

}


/* =========================================================
   ALKAAS — HERO WATER MOTION V4
   Faucet-first stream alignment
========================================================= */

#alkaas-hero-water-motion {
  position: absolute;
  z-index: 25;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  isolation: isolate;

  /*
     Stable compositor layer:
     prevents sub-pixel top/bottom repaint jitter while the
     Salla hero/slider is recalculating its layout.
  */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout paint;

  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}

#alkaas-hero-water-motion.is-image-ready {
  opacity: 1;
  visibility: visible;
}

#alkaas-hero-water-motion,
#alkaas-hero-water-motion * {
  box-sizing: border-box;
  pointer-events: none !important;
}

#alkaas-hero-water-motion
.alkaas-hero-water-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/* =========================================================
   GENERAL WATER
========================================================= */

#alkaas-hero-water-motion
.alkaas-water-stream {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   SOFT UNDER-GLOW
========================================================= */

#alkaas-hero-water-motion
.alkaas-water-stream--glow {
  stroke: rgba(46, 203, 245, .18);
  stroke-width: 8;
  opacity: .56;
  filter: url(#alkaasHeroWaterGlow);
}


/* =========================================================
   MAIN STREAM
========================================================= */

#alkaas-hero-water-motion
.alkaas-water-stream--base {
  stroke: url(#alkaasHeroWaterGradient);
  stroke-width: 2.8;
  opacity: .86;
  filter: url(#alkaasHeroWaterGlow);
}


/* =========================================================
   WATER DIRECTLY FROM THE FAUCET
   أوضح جزء عند فتحة الصنبور
========================================================= */

#alkaas-hero-water-motion
.alkaas-water-stream--source {
  stroke: rgba(238, 253, 255, .98);
  stroke-width: 2.25;
  opacity: .96;
  filter: url(#alkaasHeroWaterGlow);
}


/* =========================================================
   MOVING WATER HIGHLIGHTS
========================================================= */

#alkaas-hero-water-motion
.alkaas-water-stream--flow {
  fill: none;
  filter: url(#alkaasHeroWaterGlow);
}

#alkaas-hero-water-motion
.alkaas-water-stream--flow-1 {
  stroke: rgba(241, 254, 255, .96);
  stroke-width: 1.7;
  stroke-dasharray: 36 70;
  opacity: .88;
  animation:
    alkaasHeroWaterFlow1
    2.65s
    linear
    infinite;
}

#alkaas-hero-water-motion
.alkaas-water-stream--flow-2 {
  stroke: rgba(78, 222, 253, .90);
  stroke-width: 1.35;
  stroke-dasharray: 16 46;
  opacity: .82;
  animation:
    alkaasHeroWaterFlow2
    2.04s
    linear
    infinite;
}

#alkaas-hero-water-motion
.alkaas-water-stream--flow-3 {
  stroke: rgba(194, 248, 255, .82);
  stroke-width: 1;
  stroke-dasharray: 6 29;
  opacity: .74;
  animation:
    alkaasHeroWaterFlow3
    1.54s
    linear
    infinite;
}

@keyframes alkaasHeroWaterFlow1 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -214;
  }
}

@keyframes alkaasHeroWaterFlow2 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -190;
  }
}

@keyframes alkaasHeroWaterFlow3 {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -145;
  }
}


/* =========================================================
   FAUCET OPENING
========================================================= */

#alkaas-hero-water-motion
.alkaas-water-source__halo {
  fill: url(#alkaasHeroSourceGlow);
  stroke: rgba(188, 247, 255, .18);
  stroke-width: .65;
  transform-box: fill-box;
  transform-origin: center;
  opacity: .48;
  filter: url(#alkaasHeroWaterGlow);
  animation:
    alkaasHeroSourcePulse
    2.35s
    ease-in-out
    infinite;
}

#alkaas-hero-water-motion
.alkaas-water-source__core {
  fill: rgba(248, 255, 255, .98);
  stroke: rgba(68, 219, 251, .92);
  stroke-width: .8;
  filter: url(#alkaasHeroWaterGlow);
}

@keyframes alkaasHeroSourcePulse {
  0%,
  100% {
    transform: scale(.86);
    opacity: .36;
  }

  50% {
    transform: scale(1.04);
    opacity: .64;
  }
}


/* =========================================================
   GLASS REACTION
========================================================= */

#alkaas-hero-water-motion
.alkaas-cup-water-reaction__blur {
  fill: rgba(40, 202, 246, .14);
  filter: url(#alkaasHeroCupGlow);
  transform-box: fill-box;
  transform-origin: center;
  animation:
    alkaasHeroCupGlow
    2.7s
    ease-in-out
    infinite;
}

@keyframes alkaasHeroCupGlow {
  0%,
  100% {
    opacity: .20;
    transform: scale(.96);
  }

  50% {
    opacity: .46;
    transform: scale(1.04);
  }
}

#alkaas-hero-water-motion
.alkaas-cup-water-reaction__ring {
  fill: none;
  stroke: rgba(202, 250, 255, .64);
  stroke-width: 1.05;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#alkaasHeroWaterGlow);
  animation:
    alkaasHeroCupRing
    2.5s
    ease-out
    infinite;
}

@keyframes alkaasHeroCupRing {
  0% {
    opacity: .68;
    transform: scale(.78);
  }

  72%,
  100% {
    opacity: 0;
    transform: scale(1.19);
  }
}

#alkaas-hero-water-motion
.alkaas-cup-water-reaction__impact {
  fill: rgba(246, 255, 255, .98);
  stroke: rgba(66, 218, 250, .90);
  stroke-width: 1.05;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#alkaasHeroWaterGlow);
  animation:
    alkaasHeroImpact
    1.55s
    ease-in-out
    infinite;
}

@keyframes alkaasHeroImpact {
  0%,
  100% {
    opacity: .52;
    transform: scale(.72);
  }

  50% {
    opacity: .94;
    transform: scale(1.12);
  }
}

#alkaas-hero-water-motion
.alkaas-cup-water-reaction__spark {
  fill: rgba(255, 255, 255, .98);
  opacity: .72;
  filter: url(#alkaasHeroWaterGlow);
  animation:
    alkaasHeroSpark
    1.8s
    ease-in-out
    infinite;
}

@keyframes alkaasHeroSpark {
  0%,
  100% {
    opacity: .16;
    transform:
      translateY(2px)
      scale(.76);
  }

  50% {
    opacity: .88;
    transform:
      translateY(-3px)
      scale(1.10);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  #alkaas-hero-water-motion {
    z-index: 20;
  }

  #alkaas-hero-water-motion
  .alkaas-water-stream--glow {
    stroke-width: 5.8;
    opacity: .36;
  }

  #alkaas-hero-water-motion
  .alkaas-water-stream--base {
    stroke-width: 2.15;
    opacity: .76;
  }

  #alkaas-hero-water-motion
  .alkaas-water-stream--source {
    stroke-width: 1.65;
  }

  #alkaas-hero-water-motion
  .alkaas-water-stream--flow-1 {
    stroke-width: 1.3;
  }

  #alkaas-hero-water-motion
  .alkaas-water-stream--flow-2 {
    stroke-width: 1.05;
  }

  #alkaas-hero-water-motion
  .alkaas-water-stream--flow-3 {
    stroke-width: .8;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  #alkaas-hero-water-motion
  .alkaas-water-stream--flow,

  #alkaas-hero-water-motion
  .alkaas-water-source__halo,

  #alkaas-hero-water-motion
  .alkaas-cup-water-reaction__blur,

  #alkaas-hero-water-motion
  .alkaas-cup-water-reaction__ring,

  #alkaas-hero-water-motion
  .alkaas-cup-water-reaction__impact,

  #alkaas-hero-water-motion
  .alkaas-cup-water-reaction__spark {
    animation: none !important;
  }
}


/* =========================================================
   ACCESSIBILITY — CLEAR FOCUS STATES
========================================================= */

.alkaas-all-products__btn:focus-visible,
.alkaas-about__cta:focus-visible,
.alkaas-blog__all:focus-visible,
.alkaas-support__submit:focus-visible,
.alkaas-reviews__nav:focus-visible,
.alkaas-reviews__dot:focus-visible,
#alkaas-back-to-top:focus-visible {
  outline: 3px solid rgba(85,201,238,.55) !important;
  outline-offset: 3px !important;
}


/* =========================================================
   BACK TO TOP
========================================================= */

#alkaas-back-to-top {
  position: fixed;
  z-index: 9995;
  left: 20px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #FFFFFF;
  background: linear-gradient(145deg,#0774BA,#159BD0);
  box-shadow: 0 10px 28px rgba(7,67,107,.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.92);
  pointer-events: none;
  cursor: pointer;
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

#alkaas-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#alkaas-back-to-top svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover:hover) {
  #alkaas-back-to-top:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 32px rgba(7,67,107,.30);
  }
}

@media (max-width:700px) {
  #alkaas-back-to-top {
    left: 12px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alkaas-benefit-item.alkaas-benefit-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #alkaas-blog-section
  .alkaas-blog-card__placeholder,

  #alkaas-support-center
  .alkaas-support__submit.is-loading svg {
    animation: none !important;
  }

  #alkaas-hero-water-motion,
  #alkaas-back-to-top {
    transition: none !important;
  }
}


/* =========================================================
   ALKAAS — FOOTER NATURAL FLOW FIX
   Final fix:
   - no viewport stretching
   - no root-level blue floor
   - footer height ends naturally after its own content
   - payment layout remains untouched
========================================================= */

html.alkaas-footer-root {
  min-height: 0 !important;
  background-color: initial !important;
}

body.alkaas-custom-footer-mounted {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.alkaas-custom-footer-mounted > #alkaas-custom-footer,
#alkaas-custom-footer {
  --alkaas-footer-fill: 0px !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

#alkaas-custom-footer::before {
  bottom: 0 !important;
}

/* =========================================================
   ALKAAS — INSTALLMENT BANNER
   Compact height + logo sweep + soft 4-installments pulse
========================================================= */

#alkaas-installment-banner {
  width: 100%;
  margin: 16px 0 26px;
  direction: rtl;
}

#alkaas-installment-banner,
#alkaas-installment-banner * {
  box-sizing: border-box;
}

.alkaas-installment__inner {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
}

.alkaas-installment__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3.15 / 1;
  overflow: hidden;
  isolation: isolate;

  border: 1px solid rgba(7,116,186,.08);
  border-radius: 18px;
  background: #F8FCFF;
  text-decoration: none !important;

  box-shadow:
    0 12px 32px rgba(14,55,90,.075),
    0 2px 8px rgba(14,55,90,.035);

  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease;
}

.alkaas-installment__image,
.alkaas-installment__pulse-copy {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.alkaas-installment__image {
  z-index: 1;
}

.alkaas-installment__pulse-copy {
  z-index: 2;
  pointer-events: none;
  clip-path: inset(34% 7% 43% 42% round 8px);
  transform-origin: 72% 45%;
  animation: alkaasInstallmentPulse 5.4s ease-in-out infinite;
}

.alkaas-installment__logo-sweep {
  position: absolute;
  z-index: 3;
  left: 53%;
  right: 10%;
  top: 66%;
  bottom: 14%;
  overflow: hidden;
  border-radius: 11px;
  pointer-events: none;

  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);

  mask-image:
    linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.alkaas-installment__logo-sweep::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -30%;
  width: 20%;
  opacity: 0;
  transform: skewX(-18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10) 20%,
      rgba(255,255,255,.80) 50%,
      rgba(255,255,255,.10) 80%,
      transparent
    );

  animation: alkaasInstallmentSweep 5s ease-in-out infinite;
}

@keyframes alkaasInstallmentPulse {
  0%, 7%, 100% { transform: scale(1); }
  11% { transform: scale(1.014); }
  15% { transform: scale(1); }
}

@keyframes alkaasInstallmentSweep {
  0%, 12% {
    left: -30%;
    opacity: 0;
  }

  18% {
    opacity: .78;
  }

  34% {
    left: 112%;
    opacity: .55;
  }

  39%, 100% {
    left: 112%;
    opacity: 0;
  }
}

@media (hover: hover) {
  .alkaas-installment__media:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 38px rgba(14,55,90,.10),
      0 3px 10px rgba(14,55,90,.04);
  }
}

@media (max-width: 900px) {
  #alkaas-installment-banner {
    margin: 14px 0 21px;
  }

  .alkaas-installment__inner {
    width: calc(100% - 18px);
  }

  .alkaas-installment__media {
    aspect-ratio: 2.90 / 1;
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  #alkaas-installment-banner {
    margin: 11px 0 17px;
  }

  .alkaas-installment__inner {
    width: calc(100% - 12px);
  }

  .alkaas-installment__media {
    aspect-ratio: 2.75 / 1;
    border-radius: 13px;
    box-shadow: 0 7px 18px rgba(14,55,90,.065);
  }

  .alkaas-installment__pulse-copy {
    clip-path: inset(33% 4% 42% 40% round 7px);
  }

  .alkaas-installment__logo-sweep {
    left: 52%;
    right: 7%;
    top: 65%;
    bottom: 13%;
    border-radius: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alkaas-installment__pulse-copy,
  .alkaas-installment__logo-sweep::after {
    animation: none !important;
  }

  .alkaas-installment__media {
    transition: none !important;
  }
}







/* =========================================================
   ALKAAS — FINAL FOOTER END
   Footer ends immediately after its natural content.
========================================================= */

#alkaas-custom-footer {
  --alkaas-footer-fill: 0px !important;
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#alkaas-custom-footer::before {
  bottom: 0 !important;
}

/* ALKAAS — stable footer overflow boundary */
#alkaas-pureflow-experience,
#alkaas-pureflow-experience .alkaas-pureflow-svg {
  overflow: hidden !important;
}

#alkaas-pureflow-experience {
  contain: paint !important;
}

/* ALKAAS — payment logo visual fit */
#alkaas-custom-footer .alkaas-footer__payment {
  padding: 3px 4px !important;
}

#alkaas-custom-footer .alkaas-footer__payment img {
  width: auto !important;
  height: auto !important;
  max-width: 72px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}

#alkaas-custom-footer .alkaas-footer__payment--mada img {
  max-width: 70px !important;
  max-height: 32px !important;
}

#alkaas-custom-footer .alkaas-footer__payment--visa img {
  max-width: 70px !important;
  max-height: 29px !important;
}

#alkaas-custom-footer .alkaas-footer__payment--mastercard img {
  max-width: 63px !important;
  max-height: 33px !important;
}

#alkaas-custom-footer .alkaas-footer__payment--cod img {
  max-width: 74px !important;
  max-height: 36px !important;
}

#alkaas-custom-footer .alkaas-footer__payment--tabby img {
  max-width: 70px !important;
  max-height: 31px !important;
}

#alkaas-custom-footer .alkaas-footer__payment--tamara img {
  max-width: 72px !important;
  max-height: 31px !important;
}

@media (max-width: 380px) {
  #alkaas-custom-footer .alkaas-footer__payment {
    padding: 3px !important;
  }

  #alkaas-custom-footer .alkaas-footer__payment img {
    max-width: calc(100% - 2px) !important;
    max-height: 31px !important;
  }
}

/* ALKAAS — crop built-in logo whitespace */
#alkaas-custom-footer .alkaas-footer__payment img {
  transform-origin: center !important;
  transform: scale(1.34) !important;
}

#alkaas-custom-footer .alkaas-footer__payment--visa img {
  transform: scale(1.30) !important;
}

#alkaas-custom-footer .alkaas-footer__payment--mastercard img {
  transform: scale(1.27) !important;
}

#alkaas-custom-footer .alkaas-footer__payment--mada img {
  transform: scale(1.34) !important;
}

#alkaas-custom-footer .alkaas-footer__payment--tamara img {
  transform: scale(1.38) !important;
}

#alkaas-custom-footer .alkaas-footer__payment--tabby img {
  transform: scale(1.24) !important;
}

#alkaas-custom-footer .alkaas-footer__payment--cod img {
  transform: scale(1.42) !important;
}

/* ALKAAS — mobile pureflow boundary guard */
@media (max-width: 700px) {
  #alkaas-pureflow-experience {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* ALKAAS — COD logo optical size correction */
#alkaas-custom-footer .alkaas-footer__payment--cod img {
  transform: scale(1.72) !important;
}