/* ===== Final Why Us section replacement - user supplied design with image icons ===== */
.why-us-final-section{
  --navy:#071f55;
  --navy-2:#0a2d70;
  --deep:#031631;
  --blue:#1379c5;
  --blue-2:#25a1eb;
  --cyan:#87d8ff;
  --ice:#f7fbff;
  --sky:#edf7ff;
  --line:#dce9f5;
  --text:#2e4569;
  --muted:#72849c;
  --white:#ffffff;
  --shadow:0 30px 90px rgba(5,25,55,.14);
  --shadow-soft:0 18px 45px rgba(5,25,55,.08);
  --radius:30px;
  --radius-lg:44px;
  position:relative !important;
  padding:140px 0 112px !important;
  overflow:hidden !important;
  isolation:isolate !important;
  direction:rtl !important;
  font-family:"Cairo",sans-serif !important;
  color:var(--deep) !important;
  background:
    radial-gradient(circle at 86% 12%,rgba(37,161,235,.15),transparent 28%),
    radial-gradient(circle at 10% 86%,rgba(7,31,85,.11),transparent 30%),
    linear-gradient(135deg,#fff 0%,#f7fbff 46%,#eef7ff 100%) !important;
}

.why-us-final-section,
.why-us-final-section *{
  box-sizing:border-box !important;
}

.why-us-final-section img{
  display:block !important;
  max-width:100% !important;
}

.why-us-final-section:before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:-2;
  opacity:.78;
  pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0 46%,rgba(19,121,197,.045) 46% 47.5%,transparent 47.5% 100%) 0 0/155px 155px,
    linear-gradient(45deg,transparent 0 46%,rgba(7,31,85,.035) 46% 47.5%,transparent 47.5% 100%) 0 0/155px 155px,
    linear-gradient(135deg,transparent 0 46%,rgba(19,121,197,.032) 46% 47.5%,transparent 47.5% 100%) 77px 77px/155px 155px,
    linear-gradient(45deg,transparent 0 46%,rgba(7,31,85,.026) 46% 47.5%,transparent 47.5% 100%) 77px 77px/155px 155px;
}

.why-us-final-section:after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  opacity:.42;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,transparent 0 74px,rgba(19,121,197,.018) 74px 76px,transparent 76px 150px),
    repeating-linear-gradient(45deg,transparent 0 74px,rgba(7,31,85,.015) 74px 76px,transparent 76px 150px);
  animation:whyUsPatternDrift 24s linear infinite;
}

@keyframes whyUsPatternDrift{
  to{ transform:translate3d(80px,80px,0); }
}

.why-us-final-section > .container,
.why-us-final-section .container{
  width:min(1240px,90%) !important;
  max-width:1240px !important;
  margin-inline:auto !important;
  position:relative !important;
  z-index:3 !important;
  padding-inline:0 !important;
}

.why-us-final-section .section-pattern{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

.why-us-final-section .section-pattern:before,
.why-us-final-section .section-pattern:after{
  content:"" !important;
  position:absolute !important;
  width:240px !important;
  height:240px !important;
  transform:rotate(45deg) !important;
  border:28px solid rgba(19,121,197,.055) !important;
}

.why-us-final-section .section-pattern:before{
  top:-92px !important;
  right:-92px !important;
}

.why-us-final-section .section-pattern:after{
  left:-92px !important;
  bottom:-92px !important;
  border-color:rgba(7,31,85,.05) !important;
}

.why-us-final-section .why-us-final-heading{
  margin:0 auto 46px !important;
  padding:0 !important;
  text-align:center !important;
  position:relative !important;
  z-index:2 !important;
}

.why-us-final-section .why-us-final-heading h2{
  margin:0 0 12px !important;
  padding:0 !important;
  color:var(--deep) !important;
  font-family:"Cairo",sans-serif !important;
  font-size:clamp(30px,3vw,44px) !important;
  font-weight:900 !important;
  line-height:1.35 !important;
}

.why-us-final-section .why-us-final-heading h3{
  margin:0 auto !important;
  padding:0 !important;
  max-width:760px !important;
  color:var(--text) !important;
  font-family:"Cairo",sans-serif !important;
  font-size:clamp(16px,1.45vw,20px) !important;
  font-weight:700 !important;
  line-height:1.9 !important;
}

.why-us-final-section .about-grid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  position:relative !important;
  z-index:1 !important;
}

.why-us-final-section .about-card{
  position:relative !important;
  display:block !important;
  text-align:right !important;
  background:#fff !important;
  border:1px solid rgba(7,31,85,.08) !important;
  box-shadow:var(--shadow-soft) !important;
  border-radius:var(--radius) !important;
  padding:38px !important;
  min-height:335px !important;
  overflow:hidden !important;
  transition:transform .45s ease, box-shadow .45s ease, background .45s ease, border-color .45s ease !important;
  isolation:isolate !important;
  will-change:transform,box-shadow,background,color !important;
}

.why-us-final-section .about-card:hover{
  background:linear-gradient(135deg,#ffffff 0%,#f3faff 45%,#eaf6ff 100%) !important;
  border-color:rgba(19,121,197,.26) !important;
  box-shadow:0 35px 95px rgba(7,31,85,.16) !important;
}

.why-us-final-section .about-card:before{
  content:"" !important;
  position:absolute !important;
  inset-inline:0 !important;
  top:0 !important;
  height:6px !important;
  background:linear-gradient(90deg,var(--blue),var(--navy)) !important;
}

.why-us-final-section .about-card:after{
  content:"" !important;
  position:absolute !important;
  width:190px !important;
  height:190px !important;
  left:-105px !important;
  bottom:-105px !important;
  transform:rotate(45deg) !important;
  border:30px solid rgba(19,121,197,.05) !important;
  transition:.45s !important;
}

.why-us-final-section .about-card:hover:after{
  left:-82px !important;
  bottom:-82px !important;
  transform:rotate(135deg) !important;
}

.why-us-final-section .about-icon{
  width:68px !important;
  height:68px !important;
  border-radius:22px !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  background:linear-gradient(135deg,var(--blue),var(--navy)) !important;
  box-shadow:0 16px 34px rgba(19,121,197,.22) !important;
  margin:0 0 24px auto !important;
  padding:7px !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:1 !important;
  transition:.55s !important;
}

.why-us-final-section .about-icon img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  margin:0 !important;
  border-radius:17px !important;
  filter:none !important;
  transition:.55s !important;
}

.why-us-final-section .about-card:hover .about-icon{
  transform:rotate(360deg) scale(1.08) !important;
  background:linear-gradient(135deg,var(--blue),var(--blue-2)) !important;
  box-shadow:0 22px 46px rgba(19,121,197,.28) !important;
}

.why-us-final-section .about-card h3{
  font-size:25px !important;
  line-height:1.55 !important;
  color:var(--deep) !important;
  margin:0 0 14px !important;
  padding:0 !important;
  position:relative !important;
  z-index:1 !important;
  font-family:"Cairo",sans-serif !important;
  font-weight:900 !important;
  text-align:right !important;
  transition:.35s !important;
}

.why-us-final-section .about-card p{
  color:var(--text) !important;
  line-height:1.95 !important;
  font-size:16px !important;
  font-weight:600 !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  z-index:1 !important;
  font-family:"Cairo",sans-serif !important;
  text-align:right !important;
  transition:.35s !important;
}

.why-us-final-section .about-card:hover h3{
  color:var(--blue) !important;
  transform:translateY(-3px) !important;
}

.why-us-final-section .about-card:hover p{
  color:#17345f !important;
}

.why-us-final-section .card-shine{
  position:absolute !important;
  inset:-140% -60% !important;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.08) 58%,transparent 65%) !important;
  transform:translateX(80%) rotate(10deg) !important;
  opacity:0 !important;
  z-index:3 !important;
  transition:.75s ease !important;
  pointer-events:none !important;
}

.why-us-final-section .about-card:hover .card-shine{
  opacity:1 !important;
  transform:translateX(-80%) rotate(10deg) !important;
}

.why-us-final-section .animated-border{
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  padding:1px !important;
  background:linear-gradient(130deg,rgba(19,121,197,0),rgba(19,121,197,.35),rgba(37,161,235,.35),rgba(7,31,85,0)) !important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  opacity:0 !important;
  transition:opacity .4s ease !important;
  z-index:2 !important;
  pointer-events:none !important;
}

.why-us-final-section .about-card:hover .animated-border{
  opacity:1 !important;
  animation:whyUsBorderSpin 4s linear infinite !important;
}

@keyframes whyUsBorderSpin{
  to{ transform:rotate(360deg); }
}

.why-us-final-section .pulse-orb{
  position:absolute !important;
  width:120px !important;
  height:120px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(37,161,235,.18),transparent 70%) !important;
  filter:blur(8px) !important;
  z-index:0 !important;
  opacity:0 !important;
  transition:.45s ease !important;
  pointer-events:none !important;
}

.why-us-final-section .about-card:hover .pulse-orb{
  opacity:1 !important;
  animation:whyUsPulseMove 2.4s ease-in-out infinite !important;
}

@keyframes whyUsPulseMove{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(12px,-10px) scale(1.08); }
  100%{ transform:translate(0,0) scale(1); }
}

.why-us-final-section .ripple{
  position:absolute !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.45) !important;
  transform:translate(-50%,-50%) scale(0) !important;
  animation:whyUsRipple .7s ease-out forwards !important;
  pointer-events:none !important;
  z-index:10 !important;
}

@keyframes whyUsRipple{
  to{ transform:translate(-50%,-50%) scale(16); opacity:0; }
}

@media (max-width:1080px){
  .why-us-final-section .about-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  .why-us-final-section{
    padding:95px 0 82px !important;
  }

  .why-us-final-section .about-card{
    padding:30px 24px !important;
    min-height:auto !important;
  }

  .why-us-final-section .about-icon{
    margin-inline:auto !important;
  }

  .why-us-final-section .about-card,
  .why-us-final-section .about-card h3,
  .why-us-final-section .about-card p{
    text-align:center !important;
  }
}

/* =========================================================
   USER UPDATE - Why Us parent section matches Projects parent
   Scope: parent section only. Inner containers/cards remain unchanged.
   Keeps the current Why Us background/pattern squares.
   ========================================================= */
.why-us-final-section{
  --maal-navy:#02173f;
  --maal-blue:#022056;
  --maal-sky:#0c6fc9;
  --maal-soft:#eaf5ff;
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  clip-path:inset(0) !important;
  -webkit-clip-path:inset(0) !important;
  margin:0 !important;
  min-height:auto !important;
  padding:clamp(34px,4vw,62px) 0 clamp(38px,4.4vw,68px) !important;
  background-color:var(--maal-navy) !important;
  background-image:
    radial-gradient(circle at 86% 12%,rgba(37,161,235,.15),transparent 28%),
    radial-gradient(circle at 10% 86%,rgba(7,31,85,.11),transparent 30%),
    linear-gradient(135deg,#fff 0%,#f7fbff 46%,#eef7ff 100%) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  transform:none !important;
}

.why-us-final-section:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  opacity:.78 !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg,transparent 0 46%,rgba(19,121,197,.045) 46% 47.5%,transparent 47.5% 100%) 0 0/155px 155px,
    linear-gradient(45deg,transparent 0 46%,rgba(7,31,85,.035) 46% 47.5%,transparent 47.5% 100%) 0 0/155px 155px,
    linear-gradient(135deg,transparent 0 46%,rgba(19,121,197,.032) 46% 47.5%,transparent 47.5% 100%) 77px 77px/155px 155px,
    linear-gradient(45deg,transparent 0 46%,rgba(7,31,85,.026) 46% 47.5%,transparent 47.5% 100%) 77px 77px/155px 155px !important;
}

.why-us-final-section:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(12,111,201,.12),transparent 34%),
    radial-gradient(circle at 82% 72%,rgba(125,211,252,.12),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(247,251,255,.42) 45%,rgba(238,247,255,.62) 100%) !important;
  -webkit-backdrop-filter:blur(4px) saturate(120%) !important;
  backdrop-filter:blur(4px) saturate(120%) !important;
  animation:none !important;
}

.why-us-final-section .section-pattern{
  z-index:2 !important;
}

@media (max-width:991.98px){
  .why-us-final-section{
    padding-top:38px !important;
    padding-bottom:44px !important;
    background-attachment:fixed !important;
    background-position:center center !important;
  }

  .why-us-final-section:after{
    background:
      radial-gradient(circle at 20% 10%,rgba(12,111,201,.10),transparent 36%),
      linear-gradient(135deg,rgba(255,255,255,.68),rgba(247,251,255,.46),rgba(238,247,255,.68)) !important;
    -webkit-backdrop-filter:blur(3px) saturate(118%) !important;
    backdrop-filter:blur(3px) saturate(118%) !important;
  }
}

@media (max-width:575.98px){
  .why-us-final-section{
    padding-top:30px !important;
    padding-bottom:36px !important;
  }
}

/* =========================================================
   USER UPDATE - Clear fixed Why Us background like Projects
   - no blur on the parent overlay
   - the current Why Us background image stays fixed
   - content/cards scroll above it
   - inner cards/containers are not restyled here
   ========================================================= */
.why-us-final-section{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  clip-path:inset(0) !important;
  -webkit-clip-path:inset(0) !important;
  background-color:#f7fbff !important;
  background-image:url("../images/choose-bg.jpg") !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
  background-attachment:fixed !important;
  transform:none !important;
  will-change:auto !important;
}

.why-us-final-section:before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:url("../images/choose-bg.jpg") !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center center !important;
  background-attachment:fixed !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  transform:translateZ(0) !important;
  will-change:transform !important;
}

.why-us-final-section:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(247,251,255,.14),rgba(238,247,255,.28)) !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  animation:none !important;
  transform:none !important;
}

.why-us-final-section .section-pattern{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  opacity:.72 !important;
  background:
    linear-gradient(135deg,transparent 0 46%,rgba(19,121,197,.04) 46% 47.5%,transparent 47.5% 100%) 0 0/155px 155px,
    linear-gradient(45deg,transparent 0 46%,rgba(7,31,85,.032) 46% 47.5%,transparent 47.5% 100%) 0 0/155px 155px,
    linear-gradient(135deg,transparent 0 46%,rgba(19,121,197,.028) 46% 47.5%,transparent 47.5% 100%) 77px 77px/155px 155px,
    linear-gradient(45deg,transparent 0 46%,rgba(7,31,85,.024) 46% 47.5%,transparent 47.5% 100%) 77px 77px/155px 155px !important;
}

.why-us-final-section > .container,
.why-us-final-section .container{
  position:relative !important;
  z-index:3 !important;
}

@media (max-width:991.98px){
  .why-us-final-section{
    background-attachment:fixed !important;
    background-position:center center !important;
  }

  .why-us-final-section:before{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100svh !important;
    background-attachment:fixed !important;
    background-size:cover !important;
    background-position:center center !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  .why-us-final-section:after{
    background:linear-gradient(135deg,rgba(255,255,255,.32),rgba(247,251,255,.16),rgba(238,247,255,.32)) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

/* =========================================================
   2026-07-10 - Supplied Why Us background artwork
   - Uses the new attached image without blur or duplicate layers.
   - Keeps the fixed background effect on large screens.
   - Uses a stable mobile fallback to prevent scroll jumping/jank.
   ========================================================= */
.why-us-final-section{
  background-color:#f4f9ff !important;
  background-image:url("../images/choose-bg.jpg") !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:right center !important;
  background-attachment:fixed !important;
}

/* The supplied artwork already contains its own geometric details. */
.why-us-final-section::before{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  z-index:0 !important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.08) 0%,
    rgba(248,252,255,.04) 52%,
    rgba(229,243,255,.08) 100%
  ) !important;
  background-image:none !important;
  background-attachment:scroll !important;
  opacity:1 !important;
  transform:none !important;
  will-change:auto !important;
}

.why-us-final-section::after{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,0) 38%,
    rgba(235,247,255,.08) 100%
  ) !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.why-us-final-section .section-pattern{
  opacity:0 !important;
  background:none !important;
}

@media (max-width:991.98px){
  .why-us-final-section{
    background-attachment:scroll !important;
    background-size:auto clamp(580px,88vw,820px) !important;
    background-position:right bottom !important;
  }
}

@media (max-width:575.98px){
  .why-us-final-section{
    background-size:auto 620px !important;
    background-position:82% bottom !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .why-us-final-section{
    background-attachment:scroll !important;
  }
}


/* =========================================================
   2026-07-10 - Light blur on the Why Us background only
   The content and cards stay on separate, sharp layers.
   ========================================================= */
.why-us-final-section{
  background-color:#f4f9ff !important;
  background-image:none !important;
}

.why-us-final-section::before{
  content:"" !important;
  position:absolute !important;
  inset:-10px !important;
  width:auto !important;
  height:auto !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-color:#f4f9ff !important;
  background-image:url("../images/choose-bg.jpg") !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:right center !important;
  background-attachment:fixed !important;
  opacity:1 !important;
  filter:blur(3px) !important;
  -webkit-filter:blur(3px) !important;
  transform:none !important;
  transform-origin:center center !important;
  will-change:auto !important;
}

.why-us-final-section::after{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(247,251,255,.03) 48%,rgba(235,247,255,.10)) !important;
  filter:none !important;
  -webkit-filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

.why-us-final-section > .container,
.why-us-final-section .container{
  position:relative !important;
  z-index:3 !important;
  filter:none !important;
  -webkit-filter:none !important;
}

@media (max-width:991.98px){
  .why-us-final-section::before{
    /* Match the desktop artwork behavior on phones and tablets. */
    background-attachment:fixed !important;
    background-size:cover !important;
    background-position:right center !important;
    filter:blur(2.5px) !important;
    -webkit-filter:blur(2.5px) !important;
    transform:none !important;
  }
}

@media (max-width:575.98px){
  .why-us-final-section::before{
    background-attachment:fixed !important;
    background-size:cover !important;
    background-position:right center !important;
  }
}