/* =========================================================
   MEGWORLD HEALTHCARE — NAVY BLUE + WHITE + MAROON THEME
   Updated from the supplied stylesheet; layout and selectors retained.
   ========================================================= */
/* ============ RESET & VARIABLES ============ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

  --navy: #0f1f4b;

  --pink: #941337;

  --pink-light: #b33b5d;

  --blue: #1b4b8f;

  --sky: #4aa3e8;

  --text: #4a5578;

  --radius: 16px;

  --shadow: 0 14px 38px rgba(30, 60, 140, .13);

  --shadow-pink: 0 10px 24px rgba(148, 19, 55, .24);

  --ease: cubic-bezier(.22, .8, .3, 1);

  --gutter: 28px;

}

html { scroll-behavior: smooth; }

body {

  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-size: 16px;

  color: var(--text);

  background: #fff;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* ============ TOP BAR ============ */

.topbar {

  background: linear-gradient(90deg, #eaf1fd, #f4effb 50%, #eaf1fd);

  font-size: 12.5px; font-weight: 500; color: var(--navy);

}

.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }

.topbar__group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .25s; }

a.topbar__item:hover { color: var(--pink); }

.topbar__item i { font-size: 12px; }

.divider { width: 1px; height: 13px; background: #2b3a66; opacity: .55; }

.flag { width: 18px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }

.flag--us { background: linear-gradient(#3c3b6e 0 0) left top / 45% 55% no-repeat, repeating-linear-gradient(#d22 0 2px, #fff 2px 4px); }

.flag--uk {

  background:

    linear-gradient(90deg, transparent 42%, #d22 42% 58%, transparent 58%),

    linear-gradient(transparent 38%, #d22 38% 62%, transparent 62%),

    linear-gradient(90deg, transparent 36%, #fff 36% 64%, transparent 64%),

    linear-gradient(transparent 30%, #fff 30% 70%, transparent 70%),

    #1f3a93;

}

.socials { display: flex; gap: 16px; }

.socials a { font-size: 14px; color: var(--blue); display: inline-block; transition: transform .25s var(--ease), color .25s; }

.socials a:hover { color: var(--pink); transform: translateY(-3px) scale(1.15); }

/* ============ HEADER ============ */

.header {

  position: sticky; top: 0; z-index: 100;

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

  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);

  transition: box-shadow .3s;

}

.header.scrolled { box-shadow: 0 8px 28px rgba(20, 40, 100, .12); }

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; transition: padding .3s; }

.header.scrolled .header__inner { padding-top: 9px; padding-bottom: 9px; }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.logo__mark { width: 46px; height: 41px; transition: transform .5s var(--ease); }

.logo:hover .logo__mark { transform: scale(1.08) rotate(-4deg); }

.logo__text { display: flex; flex-direction: column; line-height: 1; }

.logo__text strong { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: .4px; white-space: nowrap; }

.logo__text small { font-size: 10px; letter-spacing: 5.6px; color: var(--blue); margin-top: 5px; font-weight: 500; }

.nav { display: flex; align-items: center; gap: 28px; }

.nav__link {

  position: relative; font-size: 15px; font-weight: 500; color: var(--navy);

  padding: 6px 0; display: inline-flex; align-items: center; gap: 6px;

  white-space: nowrap; transition: color .25s;

}

.nav__link i { font-size: 9px; transition: transform .3s; }

.nav__link::after {

  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;

  background: var(--pink); border-radius: 2px;

  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);

}

.nav__link:hover, .nav__link.active { color: var(--pink); }

.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }

.nav__item { position: relative; }

.dropdown {

  position: absolute; top: 100%; left: -18px; min-width: 230px; padding: 10px;

  background: #fff; border-radius: 14px; box-shadow: var(--shadow);

  opacity: 0; visibility: hidden; transform: translateY(14px);

  transition: all .3s var(--ease);

}

.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(6px); }

.has-dropdown:hover > .nav__link i { transform: rotate(180deg); }

.dropdown a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--navy); transition: all .25s; }

.dropdown a:hover { background: #f8e8ed; color: var(--pink); padding-left: 20px; }

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

.btn {

  position: relative; overflow: hidden; white-space: nowrap;

  display: inline-flex; align-items: center; justify-content: center; gap: 10px;

  padding: 14px 28px; border-radius: 50px;

  font-size: 15px; font-weight: 600;

  transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;

}

.btn i { font-size: .9em; transition: transform .3s var(--ease); }

.btn:hover i.fa-arrow-right { transform: translateX(5px); }

.btn--primary { background: linear-gradient(135deg, #a91b43, var(--pink)); color: #fff; box-shadow: var(--shadow-pink); }

.btn--primary::before {

  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;

  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);

  transform: skewX(-20deg);

}

.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(148, 19, 55, .32); }

.btn--primary:hover::before { animation: shine .8s; }

.btn--outline { background: rgba(255,255,255,.7); border: 1.5px solid var(--navy); color: var(--navy); backdrop-filter: blur(6px); }

.btn--outline:hover { background: var(--navy); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,31,75,.25); }

.btn--lg { padding: 16px 32px; font-size: 16px; }

.play {

  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--pink);

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

  color: var(--pink); font-size: 9px; position: relative; transition: all .3s;

}

.play i { margin-left: 1px; }

.play::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--pink); animation: ripple 2s infinite; }

.btn--outline:hover .play { background: var(--pink); color: #fff; }

/* the mobile-drawer CTA is hidden on desktop (must come AFTER .btn so it wins) */

.nav .nav__cta-mobile { display: none; }

.burger { display: none; width: 42px; height: 42px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; z-index: 120; }

.burger span { width: 24px; height: 2.5px; background: var(--navy); border-radius: 3px; transition: all .3s; }

.burger.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }

.burger.open span:nth-child(2) { opacity: 0; }

.burger.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ============ HERO ============ */

.hero {

  position: relative; overflow: hidden;

  background: linear-gradient(110deg, #fdf0f6 0%, #f4f4fc 40%, #e9f1fc 100%);

  padding-bottom: 56px;

}

/* ---- BACKGROUND IMAGE: change the path here ---- */

.hero__photo {

  position: absolute; inset: 0;

  background: url('assets/hero/hero.webp') center center / cover no-repeat;

  animation: slowZoom 24s ease-in-out infinite alternate;

}

/* Soft white/navy wash with subtle maroon accents for readable text */



.hero__fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: drift 14s ease-in-out infinite alternate; }

.blob--1 { width: 420px; height: 420px; background: #ffc9de; left: -140px; top: 80px; }

.blob--2 { width: 460px; height: 460px; background: #c5dcfb; right: -100px; bottom: -60px; animation-delay: -6s; }

.particles span { position: absolute; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 12px rgba(120,170,240,.6); animation: floatUp linear infinite; }

.hero__inner {

  position: relative; z-index: 2;

  min-height: 520px;

  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 24px;

}

.hero__content { padding: 56px 0 36px; }

.eyebrow {

  display: inline-flex; align-items: center; gap: 12px;

  font-size: 12.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;

  color: var(--pink); margin-bottom: 18px;

}

.eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--pink); }

.hero__title {

  font-size: clamp(34px, 4.1vw, 58px);

  line-height: 1.14; font-weight: 800; letter-spacing: -1.2px;

  color: var(--navy); margin-bottom: 20px; max-width: 640px;

}

.accent {

  background: linear-gradient(90deg, var(--pink), #b33b5d, var(--pink));

  background-size: 200% auto;

  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;

  animation: gradientMove 4s linear infinite;

}

.hero__text { font-size: 17px; line-height: 1.65; color: #44506f; max-width: 520px; margin-bottom: 32px; }

.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- floating cards ---- */

.hero__visual { position: relative; height: 460px; }

.visual__glow {

  position: absolute; width: 380px; height: 380px; border-radius: 50%;

  right: 8%; top: 8%;

  background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);

  animation: pulse 5s ease-in-out infinite;

}

.fcard {

  position: absolute; z-index: 3;

  display: flex; align-items: flex-start; gap: 14px;

  padding: 16px 22px 15px 18px; border-radius: 18px;

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

  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);

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

  box-shadow: var(--shadow);

  transition: transform .25s ease-out, box-shadow .3s;

  animation: cardIn .9s var(--ease) both, bob 6s ease-in-out infinite;

}

.fcard:hover { box-shadow: 0 20px 48px rgba(30,60,140,.22); }

.fcard strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); }

.fcard span { display: block; font-size: 14.5px; color: #56627f; }

.fcard svg { width: 72px; height: 11px; margin-top: 8px; fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: draw 2s ease forwards 1.2s; }

.fcard svg.pink { stroke: var(--pink-light); }

.fcard__icon { font-size: 28px; color: var(--blue); width: 32px; flex-shrink: 0; }

.fcard--claims  { top: 5%; left: -15%;  animation-delay: .6s, 0s; }

.fcard--revenue { top: 6%;  right: 0;  animation-delay: .9s, 1s; }

.fcard--denials { top: 56%; left: 12%; animation-delay: 1.2s, 2s; }

.plus {

  position: absolute; z-index: 3; width: 46px; height: 46px; border-radius: 50%;

  background: linear-gradient(135deg, #ff6fa8, #ff3a82); color: #fff; font-size: 18px;

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

  box-shadow: 0 8px 20px rgba(148,19,55,.28);

  animation: bob 5s ease-in-out infinite;

}

.plus--1 { top: 2%; left: 20%; }

.plus--2 { top: 70%; right: 6%; width: 42px; height: 42px; animation-delay: -2s; }

.plus--3 { top: 40%; right: 30%; width: 30px; height: 30px; font-size: 12px; background: linear-gradient(135deg,#6bb8f2,#3b8fe0); box-shadow: 0 6px 14px rgba(60,140,220,.4); animation-delay: -3s; }

.plus--sm { width: 20px; height: 20px; font-size: 8px; background: linear-gradient(135deg,#6bb8f2,#3b8fe0); box-shadow: 0 5px 10px rgba(60,140,220,.35); }

.plus--4 { top: 34%; left: 0; animation-delay: -1s; }

.plus--5 { top: 84%; left: 40%; animation-delay: -4s; }

/* ============ FEATURE STRIP ============ */

.features {

  position: relative; z-index: 4; margin-top: 8px;

  display: grid; grid-template-columns: repeat(4, 1fr);

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

  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);

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

  border-radius: 22px; box-shadow: var(--shadow);

  padding: 22px 10px;

}

.feature { display: flex; align-items: center; gap: 14px; padding: 4px 22px; position: relative; transition: transform .35s var(--ease); }

.feature + .feature::before { content: ''; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: #d4dbec; }

.feature:hover { transform: translateY(-4px); }

.feature__icon {

  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;

  background: #f1f5fd; color: var(--blue); font-size: 20px;

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

  transition: all .35s var(--ease);

}

.feature:hover .feature__icon { background: var(--pink); color: #fff; transform: rotate(-8deg) scale(1.08); box-shadow: var(--shadow-pink); }

.feature strong { display: block; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }

.feature span { font-size: 13px; line-height: 1.4; color: #5b6784; display: block; }

/* ============ REVEAL ============ */

.reveal { opacity: 0; transform: translateY(30px); animation: reveal .9s var(--ease) forwards; animation-delay: var(--d, 0s); }

/* ============ VIDEO MODAL ============ */

.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .35s; }

.modal.open { opacity: 1; visibility: visible; }

.modal__backdrop { position: absolute; inset: 0; background: rgba(8,16,40,.8); backdrop-filter: blur(6px); }

.modal__box { position: relative; width: min(900px, 92vw); transform: scale(.88); transition: transform .4s var(--ease); }

.modal.open .modal__box { transform: scale(1); }

.modal__frame { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 80px rgba(0,0,0,.5); }

.modal__frame iframe { width: 100%; height: 100%; border: 0; }

.modal__close { position: absolute; top: -50px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy); font-size: 17px; transition: all .3s; }

.modal__close:hover { background: var(--pink); color: #fff; transform: rotate(90deg); }

/* ============ KEYFRAMES ============ */

@keyframes reveal { to { opacity: 1; transform: none; } }

@keyframes shine { to { left: 130%; } }

@keyframes ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }

@keyframes drift { to { transform: translate(50px,-30px) scale(1.1); } }

@keyframes slowZoom { to { transform: scale(1.07); } }

@keyframes gradientMove { to { background-position: 200% center; } }

@keyframes pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.1); opacity: 1; } }

@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

@keyframes cardIn { from { opacity: 0; transform: translateY(36px) scale(.92); } to { opacity: 1; transform: none; } }

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-560px) scale(1.2); opacity: 0; } }

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

@media (max-width: 1200px) {

  .nav { gap: 20px; }

  .nav__link { font-size: 14.5px; }

  .header__cta { padding: 12px 20px; font-size: 14px; }

  .logo__text strong { font-size: 21px; }

}

@media (max-width: 1024px) {

  :root { --gutter: 22px; }

  .topbar__inner { justify-content: center; }

  .burger { display: flex; }

  .header__cta { display: none; }

  .nav {

    position: fixed; top: 0; right: 0; height: 100vh; width: min(340px, 86vw);

    flex-direction: column; align-items: flex-start; gap: 4px;

    padding: 96px 26px 30px; background: #fff;

    box-shadow: -20px 0 50px rgba(15,31,75,.18);

    transform: translateX(105%); transition: transform .45s var(--ease);

    overflow-y: auto;

  }

  .nav.open { transform: none; }

  .nav__link { font-size: 17px; padding: 11px 0; }

  .nav__item { width: 100%; }

  .dropdown {

    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 0 14px;

    max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);

  }

  .has-dropdown.open .dropdown { max-height: 300px; }

  .has-dropdown:hover .dropdown { transform: none; }

  .nav .nav__cta-mobile { display: inline-flex; margin-top: 18px; width: 100%; }

  .hero__inner { grid-template-columns: 1fr; text-align: center; min-height: 0; }

  .hero__content { padding: 48px 0 8px; }

  .eyebrow { justify-content: center; }

  .hero__title, .hero__text { margin-left: auto; margin-right: auto; }

  .hero__actions { justify-content: center; }

  .hero__visual { height: 300px; max-width: 620px; margin: 0 auto; width: 100%; }

  .fcard--claims { left: 0; top: 12%; }

  .fcard--denials { left: 18%; top: 62%; }

  .fcard--revenue { right: 0; top: 0; }

  .hero__overlay { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.75)); }

  .features { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }

  .feature:nth-child(3)::before { display: none; }

}

@media (max-width: 640px) {

  :root { --gutter: 16px; }

  .topbar { display: none; }

  .logo__mark { width: 38px; height: 34px; }

  .logo__text strong { font-size: 19px; }

  .logo__text small { letter-spacing: 4.5px; font-size: 8.5px; }

  .hero__title { font-size: 32px; }

  .hero__text { font-size: 15.5px; }

  .btn--lg { width: 100%; }

  .hero__visual { height: 270px; }

  .fcard { padding: 10px 14px; gap: 9px; border-radius: 14px; }

  .fcard strong { font-size: 12px; } .fcard span { font-size: 12.5px; }

  .fcard__icon { font-size: 20px; width: 22px; }

  .fcard svg { display: none; }

  .features { grid-template-columns: 1fr; }

  .feature + .feature::before { display: none; }

}

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

  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

  .reveal { opacity: 1; transform: none; }

}

/* Header logo image */

.logo {

  display: inline-flex;

  align-items: center;

  flex-shrink: 0;

  text-decoration: none;

}

.logo__image {

  display: block;

  width: 255px;

  height: 72px;

  object-fit: contain;

  object-position: left center;

}

/* Tablet */

@media (max-width: 1100px) {

  .logo__image {

    width: 220px;

    height: 64px;

  }

}

/* Mobile */

@media (max-width: 700px) {

  .logo__image {

    width: 190px;

    height: 56px;

  }

}

/* =====================================

   MEG WORLD HEALTHCARE ECG LOADER

\===================================== */

.health-loader {

  position: fixed;

  inset: 0;

  z-index: 999999;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 100vh;

  min-height: 100dvh;

  padding: 24px;

  background: #ffffff;

  opacity: 1;

  visibility: visible;

  transition:

    opacity 0.65s ease,

    visibility 0.65s ease;

}

.health-loader.is-hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}

.health-loader__content {

  width: 100%;

  max-width: 480px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}

/* ECG WAVE */

.ecg-container {

  width: 100%;

  height: 100px;

  overflow: hidden;

  position: relative;

  -webkit-mask-image: linear-gradient(

    90deg,

    transparent,

    #000 8%,

    #000 92%,

    transparent

  );

  mask-image: linear-gradient(

    90deg,

    transparent,

    #000 8%,

    #000 92%,

    transparent

  );

}

.ecg-svg {

  display: block;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

.ecg-baseline {

  fill: none;

  stroke: #e8eff6;

  stroke-width: 1.5;

}

.ecg-moving-wave {

  animation: ecgRun 2.6s linear infinite;

  will-change: transform;

}

.ecg-wave {

  fill: none;

  stroke: url(#ecgGradient);

  stroke-width: 3;

  stroke-linecap: round;

  stroke-linejoin: round;

  /* Subtle glowing ECG line */

  filter: drop-shadow(

    0 0 4px rgba(38, 124, 175, 0.22)

  );

}

/* WAVE MOVES CONTINUOUSLY LEFT */

@keyframes ecgRun {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-600px);

  }

}

/* PROGRESS LINE BELOW ECG */

.loader-track {

  position: relative;

  width: 70%;

  max-width: 270px;

  height: 3px;

  margin-top: 18px;

  margin-bottom: 35px;

  overflow: hidden;

  border-radius: 20px;

  background: #edf2f8;

}

.loader-track__line {

  position: absolute;

  top: 0;

  left: 0;

  width: 38%;

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(

    90deg,

    #267caf,

    #45b8ee,

    #f62f79

  );

  animation: progressRun 1.35s ease-in-out infinite;

}

@keyframes progressRun {

  0% {

    transform: translateX(-110%);

  }

  100% {

    transform: translateX(290%);

  }

}

/* BRAND */

.health-loader__brand h2 {

  margin: 0;

  color: #12344d;

  font-family: "DM Sans", Arial, sans-serif;

  font-size: 24px;

  font-weight: 800;

  letter-spacing: 0.5px;

}

.health-loader__brand > span {

  display: block;

  margin-top: 7px;

  color: #267caf;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 4px;

}

/* MESSAGE */

.health-loader__message {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 20px;

  color: #7a8ba0;

  font-size: 12px;

  line-height: 1.7;

}

.loading-dots {

  display: inline-flex;

  gap: 4px;

  margin-left: 6px;

}

.loading-dots i {

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: #f62f79;

  animation: dotBounce 0.9s ease-in-out infinite;

}

.loading-dots i:nth-child(2) {

  animation-delay: 0.15s;

}

.loading-dots i:nth-child(3) {

  animation-delay: 0.3s;

}

@keyframes dotBounce {

  0%, 60%, 100% {

    opacity: 0.35;

    transform: translateY(0);

  }

  30% {

    opacity: 1;

    transform: translateY(-4px);

  }

}

/* MOBILE */

@media (max-width: 480px) {

  .health-loader__content {

    max-width: 340px;

  }

  .ecg-container {

    height: 75px;

  }

  .health-loader__brand h2 {

    font-size: 21px;

  }

  .health-loader__message {

    font-size: 11px;

  }

  .loader-track {

    margin-top: 14px;

    margin-bottom: 28px;

  }

}

/* ACCESSIBILITY */

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

  .ecg-moving-wave,

  .loader-track__line,

  .loading-dots i {

    animation-duration: 6s;

  }

  .health-loader {

    transition-duration: 0.2s;

  }

}

/* FIX: Bottom 4 feature cards */

.features {

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

  align-items: stretch;

}

.feature {

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 14px;

  min-width: 0;

  padding: 12px 18px;

}

.feature__icon {

  width: 48px;

  height: 48px;

  min-width: 48px;

  flex: 0 0 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

  padding: 0;

  border-radius: 50%;

  background: #f1f5fd;

  color: #1b4b8f;

  font-size: 20px;

  line-height: 1;

}

.feature__icon i,

.feature__icon svg {

  display: block;

  margin: 0;

  line-height: 1;

}

.feature strong {

  display: block;

  margin: 0 0 4px;

  font-size: 14px;

  line-height: 1.4;

}

.feature span {

  display: block;

  font-size: 12px;

  line-height: 1.5;

}

/* Keep icons blue; pink only on hover */

.feature:hover .feature__icon {

  background: #f1f5fd;

  color: #1b4b8f;

  transform: none;

  box-shadow: none;

}

/* Tablet and mobile */

@media (max-width: 1024px) {

  .features {

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

  }

}

@media (max-width: 640px) {

  .features {

    grid-template-columns: 1fr;

  }

  .feature {

    padding: 12px 14px;

  }

}

/* FIX FEATURE ICON ALIGNMENT */

.features .feature {

  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

}

.features .feature__icon {

  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 48px !important;

  min-width: 48px !important;

  height: 48px !important;

  min-height: 48px !important;

  flex: 0 0 48px !important;

  padding: 0 !important;

  margin: 0 !important;

  line-height: 1 !important;

  border-radius: 50% !important;

  background: #f1f5fd !important;

  color: #1b4b8f !important;

}

/* Center Font Awesome icons */

.features .feature__icon i {

  position: static !important;

  display: block !important;

  margin: 0 !important;

  padding: 0 !important;

  width: auto !important;

  height: auto !important;

  font-size: 17px !important;

  line-height: 1 !important;

  transform: none !important;

}

/* Keep text vertically centered */

.features .feature > div,

.features .feature > p {

  align-self: center !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

}

/* ===================================

   MEG WORLD HEALTHCARE

   COMPACT ABOUT + SERVICES

\=================================== */

.mw-about,

.mw-services {

  --navy: #102e50;

  --blue: #267caf;

  --pink: #941337;

  --text: #62758c;

  --border: #e3ebf5;

  position: relative;

  padding: 48px 0;

  overflow: hidden;

}

.mw-about {

  background:

    radial-gradient(circle at 0% 10%, #fff0f6, transparent 35%),

    linear-gradient(135deg, #fff, #f5f9ff);

}

.mw-services {

  padding: 44px 0 48px;

  background: linear-gradient(180deg, #f5f9ff, #fff);

}

.mw-container {

  width: min(1160px, calc(100% - 48px));

  margin-inline: auto;

}

.mw-about-layout {

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  align-items: center;

  gap: 38px;

}

/* ABOUT IMAGE */

.mw-about-image {

  position: relative;

  min-width: 0;

  height: 350px;

  overflow: hidden;

  border-radius: 22px 22px 65px 22px;

  background: #eaf5ff;

  box-shadow: 0 12px 32px rgba(16, 46, 80, 0.09);

}

.mw-about-image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.65s ease;

}

.mw-about-image:hover img {

  transform: scale(1.035);

}

/* Image caption */

.mw-image-caption {

  position: absolute;

  right: 12px;

  bottom: 12px;

  left: 12px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border: 1px solid rgba(255, 255, 255, 0.8);

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.94);

  box-shadow: 0 6px 20px rgba(16, 46, 80, 0.08);

}

.mw-caption-icon {

  display: grid;

  place-items: center;

  flex: 0 0 39px;

  width: 39px;

  height: 39px;

  border-radius: 11px;

  background: #fff0f6;

  color: var(--pink);

  font-size: 18px;

}

.mw-image-caption strong,

.mw-image-caption small {

  display: block;

}

.mw-image-caption strong {

  color: var(--navy);

  font-size: 12px;

}

.mw-image-caption small {

  margin-top: 4px;

  color: var(--text);

  font-size: 10px;

}

/* ABOUT CONTENT */

.mw-about-text {

  min-width: 0;

}

.mw-eyebrow {

  display: inline-block;

  color: var(--pink);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

}

.mw-about-text h2 {

  margin: 12px 0;

  color: var(--navy);

  font-size: clamp(30px, 3.1vw, 41px);

  font-weight: 800;

  line-height: 1.16;

  letter-spacing: -1px;

}

.mw-about-text h2 span,

.mw-services-heading h2 span {

  color: var(--pink);

}

.mw-about-lead {

  margin: 0 0 10px;

  color: var(--navy);

  font-size: 14px;

  font-weight: 700;

  line-height: 1.7;

}

.mw-about-description {

  margin: 0 0 10px;

  color: var(--text);

  font-size: 14px;

  line-height: 1.8;

}

.mw-about-list {

  display: grid;

  gap: 9px;

  margin: 15px 0 19px;

}

.mw-about-list span {

  display: flex;

  align-items: center;

  gap: 9px;

  color: var(--navy);

  font-size: 13px;

  font-weight: 600;

}

.mw-about-list i {

  display: grid;

  place-items: center;

  flex: 0 0 20px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  color: var(--blue);

  background: #e8f4ff;

  font-size: 9px;

}

.mw-button,

.mw-explore-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 40px;

  padding: 10px 17px;

  border-radius: 30px;

  font-size: 11px;

  font-weight: 800;

  text-decoration: none;

  transition:

    background 0.3s ease,

    color 0.3s ease,

    transform 0.3s ease,

    box-shadow 0.3s ease;

}

.mw-button {

  color: #fff;

  background: var(--pink);

  box-shadow: 0 6px 17px rgba(246, 47, 121, 0.17);

}

.mw-button:hover {

  color: #fff;

  background: #e82069;

  transform: translateY(-2px);

  box-shadow: 0 9px 20px rgba(246, 47, 121, 0.24);

}

/* SERVICES HEADING */

.mw-services-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 23px;

}

.mw-services-heading h2 {

  margin: 8px 0 5px;

  color: var(--navy);

  font-size: clamp(28px, 3vw, 36px);

  font-weight: 800;

  line-height: 1.2;

}

.mw-services-heading p {

  margin: 0;

  color: var(--text);

  font-size: 14px;

  line-height: 1.7;

}

.mw-explore-button {

  flex-shrink: 0;

  color: var(--navy);

  border: 1px solid #d9e5f1;

  background: #fff;

}

.mw-explore-button:hover {

  color: var(--blue);

  border-color: #a9cee9;

  transform: translateY(-2px);

}

/* SERVICE GRID */

.mw-service-grid {

  display: grid;

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

  align-items: stretch;

  gap: 18px;

}

/* ===================================

   FLIP CARD

\=================================== */

.mw-flip-card {

  position: relative;

  min-width: 0;

  height: 300px;

  perspective: 1500px;

  -webkit-perspective: 1500px;

  outline: none;

}

.mw-flip-inner {

  position: absolute;

  inset: 0;

  border-radius: 17px;

  transform: rotateY(0deg);

  transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  transition: transform 1.1s cubic-bezier(0.2, 0.72, 0.25, 1);

  will-change: transform;

}

/* Desktop hover and keyboard focus */

.mw-flip-card:hover .mw-flip-inner,

.mw-flip-card:focus-within .mw-flip-inner,

.mw-flip-card.is-flipped .mw-flip-inner {

  transform: rotateY(180deg);

}

.mw-card-front,

.mw-card-back {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  padding: 21px;

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

  border-radius: 17px;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}

.mw-card-front {

  color: var(--navy);

  background: rgba(255, 255, 255, 0.98);

  box-shadow: 0 7px 22px rgba(16, 46, 80, 0.055);

}

.mw-card-back {

  color: #fff;

  background: linear-gradient(145deg, #102e50, #194f78);

  border-color: rgba(255, 255, 255, 0.12);

  transform: rotateY(180deg);

  box-shadow: 0 10px 26px rgba(16, 46, 80, 0.12);

}

/* CARD FRONT */

.mw-card-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;

}

.mw-service-icon {

  display: grid;

  place-items: center;

  flex: 0 0 48px;

  width: 48px;

  height: 48px;

  border-radius: 13px;

  font-size: 20px;

  transition: transform 0.4s ease;

}

.mw-service-icon.blue {

  color: var(--blue);

  background: #eaf5ff;

}

.mw-service-icon.pink {

  color: var(--pink);

  background: #fff0f6;

}

.mw-flip-card:hover .mw-service-icon {

  transform: scale(1.04);

}

.mw-card-number {

  color: #dce6f1;

  font-size: 26px;

  font-weight: 800;

}

.mw-card-label {

  display: block;

  margin-bottom: 8px;

  color: var(--pink);

  font-size: 16px;

  font-weight: 800;

  letter-spacing: 1.2px;

}

.mw-card-front h3,

.mw-card-back h3 {

  margin: 0 0 9px;

  font-size: 19px;

  font-weight: 800;

  line-height: 1.4;

}

.mw-card-front p {

  margin: 0;

  color: var(--text);

  font-size: 14px;

  line-height: 1.8;

}

.mw-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: auto;

  padding-top: 14px;

  color: var(--blue);

  font-size: 11px;

  font-weight: 800;

}

.mw-card-footer i {

  display: grid;

  place-items: center;

  width: 29px;

  height: 29px;

  border-radius: 50%;

  background: #eaf5ff;

  transition: background 0.3s ease, color 0.3s ease;

}

.mw-flip-card:hover .mw-card-footer i {

  color: #fff;

  background: var(--pink);

}

/* CARD BACK */

.mw-card-back .mw-card-label {

  color: #ff9abe;

}

.mw-card-back h3 {

  color: #fff;

  font-size: 17px;

}

.mw-card-back p {

  margin: 0 0 11px;

  color: #d8e6f3;

  font-size: 11px;

  line-height: 1.7;

}

.mw-card-back ul {

  display: grid;

  gap: 7px;

  margin: 0;

  padding: 0;

  list-style: none;

}

.mw-card-back li {

  position: relative;

  padding-left: 17px;

  color: #f2f7fc;

  font-size: 10px;

  line-height: 1.5;

}

.mw-card-back li::before {

  content: "✓";

  position: absolute;

  left: 0;

  color: #ff9abe;

  font-weight: 800;

}

.mw-card-back > a {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  margin-top: auto;

  padding-top: 12px;

  color: #fff;

  font-size: 11px;

  font-weight: 800;

  text-decoration: none;

}

.mw-card-back > a i {

  color: #ff9abe;

  transition: transform 0.3s ease;

}

.mw-card-back > a:hover i {

  transform: translateX(4px);

}

.mw-flip-note {

  margin: 15px 0 0;

  color: #8292a6;

  font-size: 10px;

  text-align: center;

}

.mw-flip-note i {

  margin-right: 5px;

  color: var(--pink);

}

/* ===================================

   SCROLL REVEAL

\=================================== */

.mw-reveal {

  opacity: 0;

  transform: translateY(18px);

  transition:

    opacity 0.65s ease,

    transform 0.65s cubic-bezier(0.2, 0.72, 0.25, 1);

}

.mw-reveal.mw-visible {

  opacity: 1;

  transform: translateY(0);

}

.mw-service-grid .mw-reveal:nth-child(2) {

  transition-delay: 100ms;

}

.mw-service-grid .mw-reveal:nth-child(3) {

  transition-delay: 200ms;

}

/* ===================================

   TABLET

\=================================== */

@media (max-width: 900px) {

  .mw-about,

  .mw-services {

    padding: 38px 0;

  }

  .mw-about-layout {

    grid-template-columns: 1fr 1fr;

    gap: 24px;

  }

  .mw-about-image {

    height: 315px;

  }

  .mw-about-text h2 {

    font-size: 30px;

  }

  .mw-service-grid {

    gap: 13px;

  }

  .mw-flip-card {

    height: 310px;

  }

  .mw-card-front,

  .mw-card-back {

    padding: 17px;

  }

  .mw-card-front h3,

  .mw-card-back h3 {

    font-size: 16px;

  }

}

/* ===================================

   MOBILE

\=================================== */

@media (max-width: 650px) {

  .mw-container {

    width: calc(100% - 32px);

  }

  .mw-about,

  .mw-services {

    padding: 32px 0;

  }

  .mw-about-layout {

    grid-template-columns: 1fr;

    gap: 23px;

  }

  .mw-about-image {

    height: 280px;

  }

  .mw-about-text h2 {

    font-size: 30px;

  }

  .mw-services-heading {

    align-items: flex-start;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 19px;

  }

  .mw-explore-button {

    min-height: 38px;

  }

  .mw-service-grid {

    grid-template-columns: 1fr;

    gap: 15px;

  }

  .mw-flip-card {

    height: 285px;

  }

  .mw-card-front,

  .mw-card-back {

    padding: 20px;

  }

  .mw-card-front h3,

  .mw-card-back h3 {

    font-size: 18px;

  }

}

/* ACCESSIBILITY */

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

  .mw-reveal,

  .mw-flip-inner,

  .mw-about-image img,

  .mw-service-icon {

    transition: none;

  }

  .mw-reveal {

    opacity: 1;

    transform: none;

  }

}

/* FIX: Reduce gap between About and Services */

.mw-about {

  padding-top: 35px !important;

  padding-bottom: 25px !important;

  margin-bottom: 0 !important;

}

.mw-about-layout {

  row-gap: 20px !important;

}

.mw-services {

  padding-top: 25px !important;

  padding-bottom: 40px !important;

  margin-top: 0 !important;

}

/* Remove extra space below About content */

.mw-about-text {

  margin-bottom: 0 !important;

}

.mw-about-list {

  margin-top: 12px !important;

  margin-bottom: 14px !important;

}

/* Keep section backgrounds connected */

.mw-about + .mw-services {

  margin-top: 0 !important;

}

/* Mobile spacing */

@media (max-width: 650px) {

  .mw-about {

    padding-top: 25px !important;

    padding-bottom: 20px !important;

  }

  .mw-services {

    padding-top: 25px !important;

    padding-bottom: 30px !important;

  }

}

/* ========================================
   SPECIALITY BILLING SUPPORT
   Navy Blue + White + Maroon Theme
======================================== */

.specialty-section {
  --specialty-navy: #102b52;
  --specialty-maroon: #941337;
  --specialty-white: #ffffff;

  position: relative;
  padding: 65px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 10%, rgba(16, 43, 82, 0.055), transparent 30%),
    radial-gradient(circle at 100% 90%, rgba(148, 19, 55, 0.05), transparent 28%),
    #ffffff;
}

.specialty-section *,
.specialty-section *::before,
.specialty-section *::after {
  box-sizing: border-box;
}

.specialty-section .specialty-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto 12px;
  padding: 0 18px;
}

.specialty-section .specialty-heading h2 {
  margin: 0;
  color: var(--specialty-navy);
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.7px;
}

.specialty-section .specialty-heading h2 span {
  color: var(--specialty-maroon);
}

.specialty-section .heading-line {
  width: clamp(20px, 8vw, 105px);
  height: 2px;
  flex-shrink: 0;
  background: var(--specialty-navy);
}

.specialty-section .heading-line:last-child {
  background: var(--specialty-maroon);
}

.specialty-section .specialty-description {
  max-width: 850px;
  margin: 0 auto 30px;
  padding: 0 18px;
  color: #61738e;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.specialty-section .specialty-description strong {
  color: var(--specialty-navy);
}

/* Cards grid */

.specialty-section .specialty-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.specialty-section .specialty-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 105px;
  padding: 13px;
  overflow: hidden;

  background: #ffffff;
  border: 1px solid #e1e8f1;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(16, 43, 82, 0.055);

  /* Hidden before scroll reveal */
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  filter: blur(3px);

  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1),
    filter 0.65s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* JavaScript adds this class on scroll */

.specialty-section .specialty-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.specialty-section .specialty-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--specialty-maroon);
  transition: height 0.35s ease;
}

.specialty-section .specialty-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(148, 19, 55, 0.4);
  box-shadow: 0 15px 32px rgba(16, 43, 82, 0.12);
}

.specialty-section .specialty-card:hover::before {
  height: 100%;
}

.specialty-section .specialty-card .specialty-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 27px;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.specialty-section .specialty-icon.navy {
  color: var(--specialty-navy);
  background: #eaf1fa;
}

.specialty-section .specialty-icon.maroon {
  color: var(--specialty-maroon);
  background: #f9eaf0;
}

.specialty-section .specialty-card:hover .specialty-icon {
  transform: rotate(-5deg) scale(1.08);
}

.specialty-section .specialty-card h3 {
  min-width: 0;
  margin: 0;
  color: var(--specialty-navy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

/* Card image */

.specialty-section .specialty-card img {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 145px;
  object-fit: cover;
  border-radius: 10px;
  background: #edf3f9;
  transition: transform 0.45s ease;
}

.specialty-section .specialty-card:hover img {
  transform: scale(1.025);
}

.specialty-section .specialty-footer {
  margin: 30px 16px 0;
  color: #61738e;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* Tablet */

@media (max-width: 1024px) {
  .specialty-section .specialty-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
  }

  .specialty-section .specialty-card {
    min-height: 100px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .specialty-section {
    padding: 45px 0;
  }

  .specialty-section .specialty-heading {
    gap: 8px;
  }

  .specialty-section .heading-line {
    width: 17px;
  }

  .specialty-section .specialty-heading h2 {
    font-size: 23px;
  }

  .specialty-section .specialty-description {
    margin-bottom: 22px;
    font-size: 12px;
  }

  .specialty-section .specialty-grid {
    width: calc(100% - 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .specialty-section .specialty-card {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    min-height: 90px;
    padding: 9px;
    border-radius: 11px;
  }

  .specialty-section .specialty-card .specialty-icon {
    width: 33px;
    height: 36px;
    font-size: 21px;
    border-radius: 9px;
  }

  .specialty-section .specialty-card h3 {
    font-size: 10px;
  }

  .specialty-section .specialty-card img {
    height: 95px;
    border-radius: 8px;
  }

  .specialty-section .specialty-footer {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .specialty-section .specialty-grid {
    grid-template-columns: 1fr;
  }

  .specialty-section .specialty-card {
    grid-template-columns: 42px minmax(0, 1fr) 85px;
  }

  .specialty-section .specialty-card img {
    grid-column: auto;
    height: 62px;
  }
}

/* Accessibility: reduce motion when requested */

@media (prefers-reduced-motion: reduce) {
  .specialty-section .specialty-card,
  .specialty-section .specialty-card img,
  .specialty-section .specialty-icon {
    transition: none !important;
    filter: none !important;
  }

  .specialty-section .specialty-card {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   MEGWORLD HEALTHCARE - WORKING PROCESS
   Navy Blue + White + Maroon
============================================ */

.mwt-process-section {
  --mwt-navy: #102b52;
  --mwt-navy-dark: #081f42;
  --mwt-maroon: #941337;
  --mwt-maroon-dark: #7d102e;
  --mwt-white: #ffffff;
  --mwt-text: #203957;
  --mwt-muted: #64758d;
  --mwt-border: #e0e8f2;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 80px 0;
  background:
    radial-gradient(circle at 0% 80%, rgba(16,43,82,.07), transparent 32%),
    radial-gradient(circle at 100% 10%, rgba(148,19,55,.06), transparent 30%),
    linear-gradient(135deg, #fff, #f7faff 55%, #fff);
}

.mwt-process-section *,
.mwt-process-section *::before,
.mwt-process-section *::after {
  box-sizing: border-box;
}

.mwt-process-shell {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
}

/* Heading */

.mwt-process-heading {
  max-width: 850px;
  margin: 0 auto 34px;
  text-align: center;
  opacity: 0;
  transform: translateX(-45px);
  transition: opacity .7s ease, transform .7s ease;
}

.mwt-process-section.is-visible .mwt-process-heading {
  opacity: 1;
  transform: translateX(0);
}

.mwt-eyebrow {
  margin: 0 0 12px;
  color: var(--mwt-maroon);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.mwt-process-heading h2 {
  margin: 0;
  color: var(--mwt-navy);
  font-family: "Manrope", "DM Sans", Arial, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.2px;
}

.mwt-process-heading h2 span {
  color: var(--mwt-maroon);
}

.mwt-heading-line {
  width: 80px;
  height: 4px;
  margin: 17px auto;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--mwt-navy), var(--mwt-maroon));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s ease .25s;
}

.mwt-process-section.is-visible .mwt-heading-line {
  transform: scaleX(1);
}

.mwt-process-intro {
  max-width: 650px;
  margin: 0 auto;
  color: var(--mwt-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* ONE LARGE ROUNDED OUTER CARD */

.mwt-process-main-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--mwt-white);
  border: 1px solid #dce6f2;
  border-radius: 28px;
  box-shadow:
    0 24px 65px rgba(16, 43, 82, .10),
    0 3px 12px rgba(16, 43, 82, .04);

  opacity: 0;
  transform: translateX(-65px);
  filter: blur(3px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.2,.75,.25,1),
    filter .85s ease,
    box-shadow .35s ease;
}

.mwt-process-section.is-visible .mwt-process-main-card {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: .12s;
}

.mwt-process-main-card:hover {
  box-shadow: 0 30px 75px rgba(16, 43, 82, .14);
}

/* Left content inside outer card */

.mwt-process-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 28px 25px;
  background:
    radial-gradient(circle at 0 0, rgba(16,43,82,.035), transparent 42%),
    #ffffff;
}

.mwt-process-track {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 22px
    minmax(0, 1fr) 22px
    minmax(0, 1fr) 22px
    minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

/* Step blocks sit inside the main card */

.mwt-step {
  position: relative;
  min-width: 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 12px 18px;
  text-align: center;
  border: 1px solid #e4ebf4;
  border-radius: 17px;
  background: linear-gradient(150deg, #ffffff, #f8fbff);
  box-shadow: 0 6px 18px rgba(16,43,82,.045);

  opacity: 0;
  transform: translateX(-36px);
  filter: blur(2px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.75,.25,1),
    filter .7s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.mwt-process-section.is-visible .mwt-step {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.mwt-process-section.is-visible .mwt-step:nth-child(1) {
  transition-delay: .30s;
}

.mwt-process-section.is-visible .mwt-step:nth-child(3) {
  transition-delay: .52s;
}

.mwt-process-section.is-visible .mwt-step:nth-child(5) {
  transition-delay: .74s;
}

.mwt-process-section.is-visible .mwt-step:nth-child(7) {
  transition-delay: .96s;
}

.mwt-step:hover {
  border-color: rgba(148,19,55,.38);
  background: #fff;
  box-shadow: 0 15px 30px rgba(16,43,82,.10);
  transform: translateY(-6px) !important;
}

.mwt-step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 3px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, var(--mwt-navy), var(--mwt-maroon));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.mwt-step:hover::after {
  transform: scaleX(1);
}

/* Number badges */

.mwt-step-number {
  position: absolute;
  top: -19px;
  left: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--mwt-navy);
  box-shadow: 0 4px 12px rgba(16,43,82,.18);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  transition: background .3s ease, transform .3s ease;
}

.mwt-step:nth-child(3) .mwt-step-number,
.mwt-step:nth-child(7) .mwt-step-number {
  background: var(--mwt-maroon);
}

.mwt-step:hover .mwt-step-number {
  background: var(--mwt-maroon);
  transform: translateX(-50%) scale(1.1);
}

/* Step icons */

.mwt-step-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 0 17px;
  color: var(--mwt-navy);
  background: #edf3fb;
  border: 1px solid #e1eaf6;
  border-radius: 50%;
  transition: transform .35s ease, color .3s ease, background .3s ease;
}

.mwt-step-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mwt-step:nth-child(3) .mwt-step-icon,
.mwt-step:nth-child(7) .mwt-step-icon {
  color: var(--mwt-maroon);
  background: #f9edf1;
  border-color: #f2dce4;
}

.mwt-step:nth-child(5) .mwt-step-icon svg circle,
.mwt-step:nth-child(5) .mwt-step-icon svg path {
  fill: currentColor;
  stroke: currentColor;
}

.mwt-step:hover .mwt-step-icon {
  color: #fff;
  background: var(--mwt-navy);
  transform: rotate(-5deg) scale(1.08);
}

.mwt-step:nth-child(3):hover .mwt-step-icon,
.mwt-step:nth-child(7):hover .mwt-step-icon {
  background: var(--mwt-maroon);
}

/* Step text */

.mwt-step h3 {
  margin: 0 0 10px;
  color: var(--mwt-navy);
  font-family: "Manrope", "DM Sans", Arial, sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 800;
  line-height: 1.45;
}

.mwt-step p {
  margin: 0;
  color: var(--mwt-muted);
  font-size: 11px;
  line-height: 1.75;
}

/* Connecting arrows */

.mwt-step-arrow {
  display: grid;
  place-items: center;
  color: var(--mwt-maroon);
  font-size: 23px;
  font-weight: 800;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s ease, transform .4s ease;
}

.mwt-process-section.is-visible .mwt-step-arrow {
  opacity: 1;
  transform: translateX(0);
}

.mwt-process-section.is-visible .mwt-step-arrow:nth-child(2) {
  transition-delay: .46s;
}

.mwt-process-section.is-visible .mwt-step-arrow:nth-child(4) {
  transition-delay: .68s;
}

.mwt-process-section.is-visible .mwt-step-arrow:nth-child(6) {
  transition-delay: .90s;
}

/* Bottom message */

.mwt-process-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid #e8edf4;
}

.mwt-bottom-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mwt-maroon);
  box-shadow: 0 0 0 4px rgba(148,19,55,.08);
}

.mwt-process-bottom p {
  margin: 0;
  color: var(--mwt-muted);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

/* Right image inside the same card */

.mwt-process-image {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--mwt-navy);
  opacity: 0;
  transform: translateX(45px);
  transition: opacity .9s ease .75s, transform .9s ease .75s;
}

.mwt-process-section.is-visible .mwt-process-image {
  opacity: 1;
  transform: translateX(0);
}

.mwt-process-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8,31,66,.02) 25%,
    rgba(8,31,66,.20) 52%,
    rgba(8,31,66,.94) 100%
  );
}

.mwt-process-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  transition: transform .8s ease;
}

.mwt-process-main-card:hover .mwt-process-image img {
  transform: scale(1.035);
}

.mwt-image-overlay {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 25px;
  color: #fff;
}

.mwt-image-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 30px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
  backdrop-filter: blur(8px);
}

.mwt-image-overlay h3 {
  margin: 0 0 12px;
  color: #fff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.3;
}

.mwt-image-overlay h3 span {
  color: #f0c4d1;
}

.mwt-image-overlay p {
  max-width: 340px;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.8;
}

/* Tablet */

@media (max-width: 1100px) {
  .mwt-process-shell {
    width: min(900px, calc(100% - 32px));
  }

  .mwt-process-main-card {
    grid-template-columns: 1fr;
  }

  .mwt-process-left {
    padding: 38px 25px 24px;
  }

  .mwt-process-image {
    min-height: 320px;
    max-height: 380px;
  }

  .mwt-process-image img {
    min-height: 320px;
    max-height: 380px;
  }

  .mwt-process-section.is-visible .mwt-process-image {
    transition-delay: 1s;
  }

  .mwt-step {
    min-height: 235px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .mwt-process-section {
    padding: 52px 0;
  }

  .mwt-process-shell {
    width: calc(100% - 24px);
  }

  .mwt-process-heading {
    margin-bottom: 25px;
  }

  .mwt-process-heading h2 {
    font-size: 27px;
    letter-spacing: -.6px;
  }

  .mwt-process-intro {
    font-size: 12px;
  }

  .mwt-process-main-card {
    border-radius: 20px;
  }

  .mwt-process-left {
    padding: 32px 15px 20px;
  }

  .mwt-process-track {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mwt-step {
    min-height: 210px;
    padding: 27px 18px 20px;
  }

  .mwt-step h3 {
    font-size: 17px;
  }

  .mwt-step p {
    max-width: 270px;
    font-size: 12px;
  }

  .mwt-step-icon {
    width: 68px;
    height: 68px;
  }

  .mwt-step-icon svg {
    width: 37px;
    height: 37px;
  }

  .mwt-step-arrow {
    display: none;
  }

  .mwt-process-bottom {
    align-items: flex-start;
  }

  .mwt-process-bottom p {
    text-align: left;
  }

  .mwt-process-image,
  .mwt-process-image img {
    min-height: 300px;
    max-height: 340px;
  }

  .mwt-image-overlay {
    padding: 20px;
  }

  .mwt-image-overlay h3 {
    font-size: 24px;
  }
}

/* Respect reduced-motion settings */

@media (prefers-reduced-motion: reduce) {
  .mwt-process-section *,
  .mwt-process-section *::before,
  .mwt-process-section *::after {
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }

  .mwt-process-heading,
  .mwt-process-main-card,
  .mwt-step,
  .mwt-step-arrow,
  .mwt-process-image {
    opacity: 1 !important;
    transform: none !important;
  }

  .mwt-heading-line {
    transform: scaleX(1) !important;
  }
}
/* ==========================================================
   MegWorld Healthcare — "How We Start Working Together"
   All selectors are scoped with the .mwp prefix.
   ========================================================== */

.mwp {
  --mwp-navy: #102B52;
  --mwp-navy-d: #081F42;
  --mwp-maroon: #941337;
  --mwp-maroon-d: #7D102E;
  --mwp-bg: #F7FAFF;
  --mwp-muted: #64758D;
  --mwp-ease: cubic-bezier(.22, .8, .3, 1);
  --mwp-gap: 30px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 100px;
  background: linear-gradient(180deg, #fff 0%, var(--mwp-bg) 55%, #fff 100%);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mwp-navy);
}
.mwp *, .mwp *::before, .mwp *::after { box-sizing: border-box; }
.mwp h2, .mwp h3, .mwp p, .mwp ol, .mwp li, .mwp figure { margin: 0; padding: 0; }
.mwp ol { list-style: none; }

.mwp-inner { position: relative; z-index: 2; width: min(1360px, 92%); margin: 0 auto; }

/* ==========================================================
   ANIMATED BACKGROUND
   ========================================================== */
.mwp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.mwp-blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.mwp-blob--l { width: 420px; height: 420px; left: -140px; top: 140px; background: rgba(120, 165, 235, .26); }
.mwp-blob--r { width: 380px; height: 380px; right: -120px; top: 40px; background: rgba(148, 19, 55, .10); }
.mwp-blob--b { width: 460px; height: 300px; left: 30%; bottom: -120px; background: rgba(120, 165, 235, .20); }

/* wave wrapper floats vertically; inner svg slides left → right */
.mwp-wave {
  position: absolute; left: 0; width: 100%; height: 260px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  animation: mwp-float var(--mwp-float, 12s) ease-in-out infinite alternate;
}
.mwp-wave svg {
  display: block; width: 200%; height: 100%;
  will-change: transform;
  animation: mwp-slide var(--mwp-slide, 50s) linear infinite;
}
.mwp-wave--1 { top: 10px;  opacity: .55; }
.mwp-wave--2 { top: 90px;  opacity: .45; animation-direction: alternate-reverse; }
.mwp-wave--3 { bottom: -70px; height: 300px; opacity: .9; }
.mwp-wave--4 { bottom: 10px; opacity: .45; animation-direction: alternate-reverse; }
.mwp-wave--5 { bottom: -30px; opacity: .5; }

.mwp-line { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mwp-line--navy   { stroke: var(--mwp-navy);   stroke-width: 1.3; }
.mwp-line--maroon { stroke: var(--mwp-maroon); stroke-width: 1.3; }
.mwp-line--blue   { stroke: #8fb0e6;           stroke-width: 1.5; }
.mwp-area { fill: rgba(140, 175, 235, .16); }

.mwp-dots {
  position: absolute; width: 130px; height: 170px;
  background: radial-gradient(circle, rgba(16, 43, 82, .38) 1.5px, transparent 1.7px) 0 0 / 17px 17px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 85%);
          mask-image: linear-gradient(135deg, #000, transparent 85%);
  opacity: .6;
}
.mwp-dots--l { left: 14px; bottom: 90px; }
.mwp-dots--r { right: 14px; top: 330px; transform: scaleX(-1); }

.mwp-badge {
  position: absolute; display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 30px rgba(16, 43, 82, .10);
  animation: mwp-bob 7s ease-in-out infinite; animation-delay: var(--mwp-d, 0s);
}
.mwp-badge svg { width: 46%; height: 46%; }
.mwp-badge--steth { width: 82px; height: 82px; left: 3%; top: 70px; color: var(--mwp-navy); }
.mwp-badge--heart { width: 78px; height: 78px; right: 2.5%; top: 120px; color: var(--mwp-maroon); background: #fff4f6; }

.mwp-plus { position: absolute; color: var(--mwp-maroon); animation: mwp-bob 6s ease-in-out infinite; animation-delay: var(--mwp-d, 0s); }
.mwp-plus svg { width: 100%; height: 100%; display: block; }
.mwp-plus--1 { width: 16px; height: 16px; left: 11%; top: 52px; }
.mwp-plus--2 { width: 13px; height: 13px; left: 24%; top: 26px; }
.mwp-plus--3 { width: 18px; height: 18px; right: 12%; top: 44px; }
.mwp-plus--4 { width: 15px; height: 15px; right: 1.5%; top: 52%; color: var(--mwp-navy); }

/* ==========================================================
   HEADING
   ========================================================== */
.mwp-head { text-align: center; margin-bottom: 46px; display: flex; flex-direction: column; align-items: center; }
.mwp-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 2.6px; text-transform: uppercase; color: var(--mwp-maroon); }
.mwp-rule { display: flex; gap: 0; margin: 12px 0 22px; }
.mwp-rule i { display: block; width: 68px; height: 2px; }
.mwp-rule i:first-child { background: var(--mwp-navy); }
.mwp-rule i:last-child  { background: var(--mwp-maroon); }
.mwp-title {
  font-size: clamp(30px, 4.1vw, 54px); line-height: 1.15; font-weight: 800; letter-spacing: -1.2px;
  color: var(--mwp-navy-d); margin-bottom: 16px;
}
.mwp-title span { color: var(--mwp-maroon); }
.mwp-sub { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: #3d4f6b; max-width: 760px; }

/* ==========================================================
   MAIN ROUNDED CONTAINER
   ========================================================== */
.mwp-shell {
  display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  background: #fff; border: 1px solid rgba(16, 43, 82, .08); border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(16, 43, 82, .13), 0 6px 18px rgba(16, 43, 82, .05);
}

.mwp-panel { position: relative; z-index: 2; padding: 56px 20px 26px 42px; background: linear-gradient(180deg, #fff, #fbfdff); }

/* ---------- steps ---------- */
.mwp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mwp-gap); margin-top: 22px; }
.mwp-step { position: relative; display: flex; }

.mwp-card {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 50px 16px 30px;
  background: linear-gradient(180deg, #fff, var(--mwp-bg));
  border: 1px solid rgba(16, 43, 82, .10); border-radius: 22px;
  box-shadow: 0 8px 22px rgba(16, 43, 82, .06);
  transition: transform .4s var(--mwp-ease), box-shadow .4s var(--mwp-ease), border-color .4s;
}
.mwp-card--navy   { --mwp-accent: var(--mwp-navy);   --mwp-tint: rgba(16, 43, 82, .08);  --mwp-tint-2: rgba(16, 43, 82, .14); }
.mwp-card--maroon { --mwp-accent: var(--mwp-maroon); --mwp-tint: rgba(148, 19, 55, .08); --mwp-tint-2: rgba(148, 19, 55, .15); }

.mwp-num {
  position: absolute; top: -26px; left: 50%; margin-left: -26px;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mwp-accent); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .5px;
  border: 4px solid #fff; box-shadow: 0 8px 18px rgba(16, 43, 82, .22);
}
.mwp-card--maroon .mwp-num { box-shadow: 0 8px 18px rgba(148, 19, 55, .30); }

.mwp-icon {
  width: 74px; height: 74px; border-radius: 50%; margin-bottom: 18px;
  display: grid; place-items: center; color: var(--mwp-accent);
  background: var(--mwp-tint); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .55);
  transition: transform .45s var(--mwp-ease), background .4s;
}
.mwp-icon svg { width: 34px; height: 34px; }

.mwp-card__title { font-size: clamp(16px, 1.35vw, 19px); font-weight: 800; color: var(--mwp-navy-d); margin-bottom: 10px; letter-spacing: -.2px; }
.mwp-card__text  { font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.65; color: var(--mwp-muted); }

/* arrows live OUTSIDE the card so hover-lift never moves them */
.mwp-arrow {
  position: absolute; top: 50%; right: calc(var(--mwp-gap) * -1);
  width: var(--mwp-gap); height: 22px; margin-top: -11px;
  display: flex; align-items: center; justify-content: center; color: var(--mwp-maroon);
}
.mwp-arrow svg { width: 20px; height: 20px; }

/* hover: only on real hover devices (never sticks on touch) */
@media (hover: hover) and (pointer: fine) {
  .mwp-card:hover {
    transform: translateY(-10px);
    border-color: var(--mwp-accent);
    box-shadow: 0 26px 46px rgba(16, 43, 82, .18);
  }
  .mwp-card--maroon:hover { box-shadow: 0 26px 46px rgba(148, 19, 55, .20); }
  .mwp-card:hover .mwp-icon { transform: scale(1.1) rotate(-6deg); background: var(--mwp-tint-2); }
}
.mwp-card:focus-within { border-color: var(--mwp-accent); }

/* ---------- footer message ---------- */
.mwp-foot {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(16, 43, 82, .10);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 14px; color: var(--mwp-muted); text-align: center;
}
.mwp-foot i { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: var(--mwp-maroon); }

/* ---------- image (yours goes in assets/images/healthcare-team.webp) ---------- */
.mwp-media {
  position: relative; min-height: 440px; overflow: hidden;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .14), transparent 45%),
    linear-gradient(135deg, var(--mwp-navy) 0%, var(--mwp-navy-d) 55%, var(--mwp-maroon-d) 130%);
}
.mwp-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% center; display: block;
}
.mwp-media.mwp-media--empty img { display: none; }
.mwp-curve { position: absolute; left: -1px; top: 0; width: 80px; height: 100%; display: block; }

/* ==========================================================
   SCROLL REVEAL  (only active when JS adds .mwp--js)
   Content stays visible if JS / IntersectionObserver is missing.
   ========================================================== */
.mwp--js:not(.mwp--in) .mwp-rl,
.mwp--js:not(.mwp--in) .mwp-shell,
.mwp--js:not(.mwp--in) .mwp-card,
.mwp--js:not(.mwp--in) .mwp-media,
.mwp--js:not(.mwp--in) .mwp-foot,
.mwp--js:not(.mwp--in) .mwp-arrow svg { opacity: 0; }

/* animations use fill-mode "backwards" so, once finished, normal styles
   (and the hover transform) take over with no conflict */
.mwp--in .mwp-rl     { animation: mwp-from-left .85s var(--mwp-ease) backwards; animation-delay: calc(var(--n) * 130ms); }
.mwp--in .mwp-shell  { animation: mwp-shell-in 1s var(--mwp-ease) backwards; animation-delay: .25s; }
.mwp--in .mwp-card   { animation: mwp-from-left .8s var(--mwp-ease) backwards; animation-delay: calc(.55s + var(--i) * 190ms); }
.mwp--in .mwp-arrow svg { animation: mwp-arrow-in .6s var(--mwp-ease) backwards; animation-delay: calc(.55s + var(--i) * 190ms + .35s); }
.mwp--in .mwp-media  { animation: mwp-from-right 1s var(--mwp-ease) backwards; animation-delay: .6s; }
.mwp--in .mwp-foot   { animation: mwp-fade .8s ease backwards; animation-delay: 1.5s; }

@keyframes mwp-from-left  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes mwp-from-right { from { opacity: 0; transform: translateX(90px);  } to { opacity: 1; transform: none; } }
@keyframes mwp-shell-in   { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes mwp-arrow-in   { from { opacity: 0; transform: translateX(-14px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mwp-fade       { from { opacity: 0; } to { opacity: 1; } }

/* background loops */
@keyframes mwp-slide { from { transform: translateX(-50%); } to { transform: translateX(0); } }   /* left → right */
@keyframes mwp-float { from { transform: translateY(-12px); } to { transform: translateY(14px); } }
@keyframes mwp-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

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

/* tablet — image drops below, cards stay in a row */
@media (max-width: 1100px) {
  .mwp { --mwp-gap: 24px; padding: 56px 0 84px; }
  .mwp-shell { grid-template-columns: 1fr; border-radius: 30px; }
  .mwp-panel { padding: 52px 26px 26px; }
  .mwp-media { min-height: 0; height: 380px; }
  .mwp-curve { display: none; }
  .mwp-media img { object-position: center 35%; }
  .mwp-badge--steth { width: 66px; height: 66px; left: 2%; top: 40px; }
  .mwp-badge--heart { width: 62px; height: 62px; right: 2%; top: 70px; }
}

/* small tablet — 2 × 2 cards, arrows hidden */
@media (max-width: 820px) {
  .mwp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; }
  .mwp-arrow { display: none; }
  .mwp-head { margin-bottom: 38px; }
}

/* mobile — everything stacked, down-arrows between cards */
@media (max-width: 560px) {
  .mwp { padding: 44px 0 70px; }
  .mwp-inner { width: 92%; }
  .mwp-shell { border-radius: 24px; }
  .mwp-panel { padding: 46px 16px 22px; }
  .mwp-steps { grid-template-columns: 1fr; gap: 66px; }
  .mwp-arrow {
    display: flex; top: 100%; right: 0; left: 0; width: auto; margin: 0; height: 66px;
    padding-top: 22px; align-items: center; justify-content: center;
  }
  .mwp-arrow svg { transform: rotate(90deg); }
  .mwp--in .mwp-arrow svg { animation-name: mwp-arrow-in-v; }
  .mwp-card { padding: 48px 20px 26px; }
  .mwp-media { height: 280px; }
  .mwp-foot { font-size: 13px; align-items: flex-start; text-align: left; }
  .mwp-foot i { margin-top: 4px; }

  /* simplify decorative motion */
  .mwp-badge, .mwp-plus--2, .mwp-plus--4, .mwp-dots--r, .mwp-wave--4, .mwp-wave--5 { display: none; }
  .mwp-badge--steth, .mwp-badge--heart { display: none; }
}
@keyframes mwp-arrow-in-v { from { opacity: 0; transform: rotate(90deg) translateX(-14px) scale(.6); } to { opacity: 1; transform: rotate(90deg); } }

/* reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .mwp *, .mwp *::before, .mwp *::after { animation: none !important; transition-duration: .01ms !important; }
  .mwp--js:not(.mwp--in) .mwp-rl,
  .mwp--js:not(.mwp--in) .mwp-shell,
  .mwp--js:not(.mwp--in) .mwp-card,
  .mwp--js:not(.mwp--in) .mwp-media,
  .mwp--js:not(.mwp--in) .mwp-foot,
  .mwp--js:not(.mwp--in) .mwp-arrow svg { opacity: 1; }
  .mwp-wave svg { transform: translateX(-25%); }
}
/* ==========================================================
   MegWorld Healthcare — "Who We Serve"
   Everything is scoped to .mwt-who-serve (no global selectors).
   ========================================================== */

.mwt-who-serve {
  --mwt-navy: #102B52;
  --mwt-navy-d: #081F42;
  --mwt-maroon: #941337;
  --mwt-maroon-d: #7D102E;
  --mwt-bg: #F7FAFF;
  --mwt-muted: #64758D;
  --mwt-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;                       /* decorative waves never cause a horizontal scrollbar */
  padding: 64px 0 96px;
  background: linear-gradient(180deg, #fff 0%, var(--mwt-bg) 50%, #fff 100%);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--mwt-navy);
}
.mwt-who-serve *, .mwt-who-serve *::before, .mwt-who-serve *::after { box-sizing: border-box; }
.mwt-who-serve h2, .mwt-who-serve h3, .mwt-who-serve p, .mwt-who-serve ul, .mwt-who-serve li { margin: 0; padding: 0; }
.mwt-who-serve ul { list-style: none; }

.mwt-ws-inner { position: relative; z-index: 2; width: min(1380px, 93%); margin: 0 auto; }

/* ==========================================================
   ANIMATED BACKGROUND
   ========================================================== */
.mwt-ws-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.mwt-ws-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.mwt-ws-glow--l { width: 440px; height: 340px; left: -160px; top: 40px;  background: rgba(125, 170, 240, .30); }
.mwt-ws-glow--r { width: 380px; height: 300px; right: -120px; bottom: 20px; background: rgba(148, 19, 55, .10); }

/* wrapper floats vertically, inner svg slides left → right */
.mwt-ws-wave {
  position: absolute; left: 0; width: 100%; height: 240px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  animation: mwt-float var(--mwt-float, 12s) ease-in-out infinite alternate;
}
.mwt-ws-wave svg {
  display: block; width: 200%; height: 100%; will-change: transform;
  animation: mwt-slide var(--mwt-slide, 55s) linear infinite;
}
.mwt-ws-wave--top           { top: -90px;    opacity: .95; }
.mwt-ws-wave--accent-top    { top: -40px;    opacity: .70; animation-direction: alternate-reverse; }
.mwt-ws-wave--bottom        { bottom: -100px; height: 280px; opacity: .95; }
.mwt-ws-wave--accent-bottom { bottom: -20px; opacity: .65; animation-direction: alternate-reverse; }
.mwt-ws-wave--navy          { bottom: -50px; opacity: .40; }

.mwt-ws-line { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mwt-ws-line--blue   { stroke: #9bb9ea;           stroke-width: 1.4; }
.mwt-ws-line--maroon { stroke: var(--mwt-maroon); stroke-width: 1.8; }
.mwt-ws-line--navy   { stroke: var(--mwt-navy);   stroke-width: 1.1; }
.mwt-ws-area { fill: rgba(140, 175, 235, .20); }

.mwt-ws-dots {
  position: absolute; width: 120px; height: 190px; opacity: .55;
  background: radial-gradient(circle, rgba(16, 43, 82, .40) 1.5px, transparent 1.7px) 0 0 / 17px 17px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 85%);
          mask-image: linear-gradient(135deg, #000, transparent 85%);
}
.mwt-ws-dots--l { left: 10px;  top: 250px; }
.mwt-ws-dots--r { right: 10px; top: 120px; transform: scaleX(-1); }

.mwt-ws-plus { position: absolute; color: var(--mwt-maroon); animation: mwt-bob 6s ease-in-out infinite; animation-delay: var(--mwt-d, 0s); }
.mwt-ws-plus svg { display: block; width: 100%; height: 100%; }
.mwt-ws-plus--1 { width: 14px; height: 14px; left: 8%;  top: 60px; }
.mwt-ws-plus--2 { width: 12px; height: 12px; right: 9%; top: 90px; color: var(--mwt-navy); }
.mwt-ws-plus--3 { width: 15px; height: 15px; right: 3%; bottom: 70px; }

/* ==========================================================
   HEADING
   ========================================================== */
.mwt-ws-head { text-align: center; margin-bottom: 44px; display: flex; flex-direction: column; align-items: center; }
.mwt-ws-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--mwt-maroon); margin-bottom: 8px; }
.mwt-ws-titlerow { display: flex; align-items: center; gap: 26px; margin-bottom: 14px; }
.mwt-ws-titlerow i { display: block; width: clamp(34px, 6vw, 82px); height: 2px; background: var(--mwt-navy); border-radius: 2px; }
.mwt-ws-title { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.1; font-weight: 800; letter-spacing: -1.2px; color: var(--mwt-navy-d); }
.mwt-ws-title span { color: var(--mwt-maroon); }
.mwt-ws-sub { font-size: clamp(15px, 1.45vw, 18px); line-height: 1.6; color: var(--mwt-muted); max-width: 720px; }

/* ==========================================================
   BANNER (one continuous container)
   ========================================================== */
.mwt-ws-banner {
  position: relative; display: flex; align-items: stretch;
  padding: 22px 20px 22px 22px; border-radius: 38px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 43, 82, .07);
  box-shadow: 0 30px 70px rgba(16, 43, 82, .10), 0 4px 14px rgba(16, 43, 82, .04);
}

/* ---------- left navy panel ---------- */
.mwt-ws-panel {
  position: relative; z-index: 1; flex: 0 0 31%;
  margin: -34px 0 -34px -36px;                       /* panel pokes slightly outside the container, like the reference */
  padding: 50px 40px 50px 58px;
  border-radius: 32px; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(60, 100, 170, .28), transparent 45%),
    linear-gradient(135deg, #14386a 0%, #0f2d5a 45%, var(--mwt-navy-d) 100%);
  box-shadow: 0 24px 50px rgba(8, 31, 66, .32);
}
.mwt-ws-panel__content { position: relative; z-index: 2; width: 72%; max-width: 380px; }
.mwt-ws-panel__bar { display: block; width: 66px; height: 2px; background: var(--mwt-maroon); margin-bottom: 20px; }
.mwt-ws-panel__label { font-size: 14px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 8px; }
.mwt-ws-panel__title { font-size: clamp(38px, 4.4vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -1.5px; margin-bottom: 22px; }
.mwt-ws-panel__title span { display: block; color: #d6173f; }   /* brighter maroon tint so it reads on navy */
.mwt-ws-panel__text { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.55; margin-bottom: 34px; color: #eaf0fb; }

.mwt-ws-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 36px; border-radius: 999px;
  background: linear-gradient(135deg, #a8153d, var(--mwt-maroon-d));
  color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 26px rgba(125, 16, 46, .45);
  transition: transform .35s var(--mwt-ease), box-shadow .35s var(--mwt-ease), background .3s;
}
.mwt-ws-btn:hover, .mwt-ws-btn:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(125, 16, 46, .60); background: linear-gradient(135deg, #b8173f, var(--mwt-maroon)); }
.mwt-ws-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.mwt-ws-watermark {
  position: absolute; z-index: 1; right: 26%; top: 28px; width: 150px; height: auto;
  color: rgba(120, 160, 225, .22); animation: mwt-bob 9s ease-in-out infinite;
}
.mwt-ws-panel__dots {
  position: absolute; z-index: 1; left: 8px; bottom: 54px; width: 90px; height: 150px;
  background: radial-gradient(circle, rgba(255, 255, 255, .28) 1.4px, transparent 1.6px) 0 0 / 15px 15px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
}

/* ---------- five connected slanted cards ---------- */
.mwt-ws-cards {
  --mwt-skew: -12deg; --mwt-unskew: 12deg; --mwt-ov: 60px;
  position: relative; z-index: 2; flex: 1; min-width: 0;
  display: flex; gap: 8px;
  margin-left: -6%; padding-right: 52px;               /* room for the slanted right edge of the last card */
  height: clamp(380px, 33vw, 450px);
}
.mwt-ws-card {
  position: relative; flex: 1 1 0; min-width: 0;
  transition: transform .45s var(--mwt-ease);
}
.mwt-ws-card__shape {
  position: absolute; inset: 0; overflow: hidden;
  transform: skewX(var(--mwt-skew));
  border-radius: 26px; border: 2px solid rgba(255, 255, 255, .85);
  background: linear-gradient(160deg, var(--mwt-navy), var(--mwt-navy-d));     /* fallback if an image fails */
  box-shadow: 0 16px 34px rgba(16, 43, 82, .20);
  transition: box-shadow .45s var(--mwt-ease), border-color .45s;
}
.mwt-ws-card__inner { position: absolute; top: 0; bottom: 0; left: calc(var(--mwt-ov) * -1); right: calc(var(--mwt-ov) * -1); transform: skewX(var(--mwt-unskew)); }
.mwt-ws-card__inner img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--mwt-pos, center);
  display: block; transform-origin: center; transition: transform .9s var(--mwt-ease);
}
.mwt-ws-card__inner img.mwt-ws-img--failed { display: none; }
.mwt-ws-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 31, 66, 0) 34%, rgba(8, 31, 66, .72) 62%, rgba(8, 31, 66, .97) 100%);
}
.mwt-ws-card__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px;
  padding: 0 18px 28px calc(var(--mwt-ov) + 22px);
}
.mwt-ws-badge {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 10px 22px rgba(8, 31, 66, .30);
  transition: transform .45s var(--mwt-ease);
}
.mwt-ws-badge svg { width: 40px; height: 40px; }
.mwt-ws-badge--navy   { color: var(--mwt-navy); }
.mwt-ws-badge--maroon { color: var(--mwt-maroon); }
.mwt-ws-card__title { font-size: clamp(15px, 1.5vw, 22px); line-height: 1.25; font-weight: 800; color: #fff; letter-spacing: -.2px; }

/* hover only on real pointer devices — never sticks on touch */
@media (hover: hover) and (pointer: fine) {
  .mwt-ws-card:hover { transform: translateY(-7px); z-index: 3; }
  .mwt-ws-card:hover .mwt-ws-card__shape { border-color: rgba(214, 23, 63, .9); box-shadow: 0 28px 48px rgba(16, 43, 82, .32), 0 0 0 1px rgba(148, 19, 55, .35); }
  .mwt-ws-card:hover img { transform: scale(1.04); }
  .mwt-ws-card:hover .mwt-ws-badge { transform: scale(1.06); }
  .mwt-ws-panel:hover .mwt-ws-watermark { transform: translateY(-8px) rotate(-3deg); }
}

/* ==========================================================
   SCROLL ENTRANCE  (active only after JS adds --js; content is
   visible by default if JS / IntersectionObserver is missing)
   ========================================================== */
.mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-fade,
.mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-banner,
.mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-panel,
.mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-card { opacity: 0; }

/* "backwards" fill → once finished, normal styles (and hover transforms) take over */
.mwt-who-serve--in .mwt-ws-fade   { animation: mwt-fade-up .9s var(--mwt-ease) backwards; animation-delay: calc(var(--n) * 120ms); }
.mwt-who-serve--in .mwt-ws-banner { animation: mwt-fade .8s ease backwards; animation-delay: .15s; }
.mwt-who-serve--in .mwt-ws-panel  { animation: mwt-panel-in 1.1s var(--mwt-ease) backwards; animation-delay: .2s; }
.mwt-who-serve--in .mwt-ws-card   { animation: mwt-card-in 1s var(--mwt-ease) backwards; animation-delay: calc(.55s + var(--i) * 180ms); }

@keyframes mwt-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes mwt-fade-up  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes mwt-panel-in { from { opacity: 0; transform: translateX(-90px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mwt-card-in  { from { opacity: 0; transform: translateX(110px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* background loops */
@keyframes mwt-slide { from { transform: translateX(-50%); } to { transform: translateX(0); } }   /* left → right */
@keyframes mwt-float { from { transform: translateY(-12px); } to { transform: translateY(14px); } }
@keyframes mwt-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

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

/* tablet — panel on top, five slanted cards underneath */
@media (max-width: 1100px) {
  .mwt-who-serve { padding: 52px 0 80px; }
  .mwt-ws-banner { flex-direction: column; padding: 18px; border-radius: 30px; }
  .mwt-ws-panel { flex: none; margin: 0; padding: 44px 38px; border-radius: 26px; }
  .mwt-ws-panel__content { width: 100%; max-width: 440px; }
  .mwt-ws-watermark { right: 40px; width: 130px; }
  .mwt-ws-cards {
    --mwt-skew: -10deg; --mwt-unskew: 10deg; --mwt-ov: 44px;
    margin: 22px 0 0 0; padding: 0 36px 0 30px; height: 340px; gap: 8px;
  }
  .mwt-ws-badge { width: 58px; height: 58px; }
  .mwt-ws-badge svg { width: 32px; height: 32px; }
  .mwt-ws-card__body { padding-bottom: 22px; gap: 10px; }
  .mwt-ws-card__title { font-size: 15px; }
}

/* small tablet — simple rounded cards in a grid (slant removed) */
@media (max-width: 820px) {
  .mwt-ws-cards {
    --mwt-skew: 0deg; --mwt-unskew: 0deg; --mwt-ov: 0px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
    height: auto; padding: 0; margin-top: 18px;
  }
  .mwt-ws-card { min-height: 240px; }
  .mwt-ws-card:last-child { grid-column: 1 / -1; }
  .mwt-ws-card__body { padding: 0 22px 22px; }
  .mwt-ws-card__title { font-size: 18px; }
}

/* mobile — single column, comfortable touch targets */
@media (max-width: 560px) {
  .mwt-who-serve { padding: 44px 0 68px; }
  .mwt-ws-head { margin-bottom: 30px; }
  .mwt-ws-titlerow { gap: 14px; }
  .mwt-ws-banner { padding: 12px; border-radius: 24px; }
  .mwt-ws-panel { padding: 36px 24px 34px; }
  .mwt-ws-watermark { width: 100px; right: 14px; top: 16px; }
  .mwt-ws-btn { width: 100%; padding: 17px 24px; }
  .mwt-ws-cards { grid-template-columns: 1fr; gap: 12px; }
  .mwt-ws-card { min-height: 210px; }
  .mwt-ws-card:last-child { grid-column: auto; }
  .mwt-ws-card__shape { border-radius: 22px; }

  /* simplify decorative motion */
  .mwt-ws-wave--accent-top, .mwt-ws-wave--navy, .mwt-ws-plus, .mwt-ws-dots--r { display: none; }
}

/* reduced motion — everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .mwt-who-serve *, .mwt-who-serve *::before, .mwt-who-serve *::after { animation: none !important; transition-duration: .01ms !important; }
  .mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-fade,
  .mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-banner,
  .mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-panel,
  .mwt-who-serve--js:not(.mwt-who-serve--in) .mwt-ws-card { opacity: 1; }
  .mwt-ws-wave svg { transform: translateX(-25%); }
}

/* ==========================================
   MEGWORLD HEALTHCARE
   COMPLIANCE & QUALITY ASSURANCE
   Navy + White + Maroon
========================================== */

.mwt-compliance {
  --mc-navy: #102b52;
  --mc-deep: #04152e;
  --mc-dark: #061c39;
  --mc-maroon: #941337;
  --mc-maroon-bright: #c30e3e;
  --mc-white: #ffffff;
  --mc-blue-glow: #168dff;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 70px 0;
  color: var(--mc-white);
  background:
    radial-gradient(ellipse at 38% 45%, rgba(10, 74, 143, .25), transparent 42%),
    linear-gradient(120deg, #06172d, #081f42 55%, #041329);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.mwt-compliance *,
.mwt-compliance *::before,
.mwt-compliance *::after {
  box-sizing: border-box;
}

.mwt-compliance img {
  max-width: 100%;
}

/* Animated background */

.mwt-compliance-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mwt-security-grid {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(70, 153, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 153, 255, .16) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 48% 45%, #000, transparent 75%);
  animation: mwt-grid-drift 24s linear infinite;
}

.mwt-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .19;
  animation: mwt-glow-float 10s ease-in-out infinite alternate;
}

.mwt-glow-one {
  top: -210px;
  left: 15%;
  background: #087cff;
}

.mwt-glow-two {
  right: -180px;
  bottom: -200px;
  background: #8e1238;
  animation-delay: -4s;
}

.mwt-wave {
  position: absolute;
  left: -15%;
  width: 130%;
  height: 140px;
  border: 1px solid rgba(54, 163, 255, .22);
  border-radius: 50%;
  transform: rotate(-7deg);
  animation: mwt-wave-travel 12s ease-in-out infinite alternate;
}

.mwt-wave-one {
  bottom: -70px;
  box-shadow:
    0 -7px 35px rgba(0, 123, 255, .09),
    inset 0 4px 20px rgba(0, 123, 255, .04);
}

.mwt-wave-two {
  bottom: -95px;
  border-color: rgba(148, 19, 55, .42);
  animation-duration: 15s;
  animation-direction: alternate-reverse;
}

.mwt-wave-three {
  bottom: -118px;
  border-color: rgba(65, 173, 255, .18);
  animation-duration: 18s;
}

.mwt-dot-pattern {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 140px;
  height: 170px;
  opacity: .55;
  background-image: radial-gradient(#168dff 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  mask-image: linear-gradient(45deg, #000, transparent 80%);
  animation: mwt-dots-pulse 4s ease-in-out infinite alternate;
}

/* Main layout */

.mwt-compliance-layout {
  width: min(1560px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(330px, .9fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 38px;
}

/* Left panel */

.mwt-compliance-info {
  position: relative;
  min-width: 0;
  padding: 20px 0;
  opacity: 0;
  transform: translateX(-65px);
  filter: blur(4px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22, 1, .36, 1),
    filter .85s ease;
}

.mwt-compliance.is-visible .mwt-compliance-info {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.mwt-compliance-eyebrow {
  display: inline-block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.mwt-compliance-info h2 {
  margin: 0;
  color: var(--mc-white);
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.13;
}

.mwt-compliance-info h2 span {
  display: block;
  color: #79b8ff;
  background: linear-gradient(100deg, #c2e2ff, #3894ff 65%, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mwt-compliance-accent {
  width: 78px;
  height: 4px;
  margin: 23px 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--mc-maroon-bright), #ff496f);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s ease .4s;
}

.mwt-compliance.is-visible .mwt-compliance-accent {
  transform: scaleX(1);
}

.mwt-compliance-description {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 16px;
  line-height: 1.85;
}

/* Glowing shield */

.mwt-shield-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 440px);
  height: 275px;
  margin: 4px auto 0;
  perspective: 800px;
}

.mwt-shield-icon {
  position: relative;
  z-index: 2;
  width: 155px;
  filter: drop-shadow(0 0 17px rgba(39, 160, 255, .7));
  animation: mwt-shield-float 4s ease-in-out infinite;
}

.mwt-shield-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.mwt-shield-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 235px;
  height: 68px;
  border: 1px solid rgba(35, 151, 255, .6);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(0, 123, 255, .13);
  transform: translate(-50%, -50%) rotate(-15deg);
}

.mwt-orbit-one {
  animation: mwt-orbit-rotate 9s linear infinite;
}

.mwt-orbit-two {
  width: 275px;
  height: 92px;
  border-color: rgba(28, 120, 255, .35);
  transform: translate(-50%, -50%) rotate(18deg);
  animation: mwt-orbit-rotate-reverse 13s linear infinite;
}

.mwt-orbit-three {
  width: 200px;
  height: 200px;
  border-color: rgba(51, 154, 255, .13);
  animation: mwt-orbit-rotate 20s linear infinite;
}

.mwt-shield-platform {
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 280px;
  height: 60px;
  border: 2px solid rgba(36, 154, 255, .65);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(0, 135, 255, .35),
    inset 0 0 20px rgba(0, 135, 255, .15);
  transform: translateX(-50%) rotateX(62deg);
  animation: mwt-platform-pulse 3s ease-in-out infinite;
}

.mwt-floating-security {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #83caff;
  background: rgba(4, 35, 73, .76);
  border: 1px solid rgba(70, 170, 255, .5);
  border-radius: 13px;
  box-shadow: 0 0 24px rgba(0, 111, 255, .12);
  backdrop-filter: blur(8px);
}

.mwt-floating-security svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mwt-security-lock {
  top: 12%;
  left: 10%;
  animation: mwt-float-one 5s ease-in-out infinite;
}

.mwt-security-check {
  top: 5%;
  right: 11%;
  animation: mwt-float-two 6s ease-in-out infinite;
}

.mwt-security-file {
  right: 4%;
  bottom: 17%;
  animation: mwt-float-one 5.5s ease-in-out infinite reverse;
}

/* Assurance badges */

.mwt-compliance-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.mwt-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
}

.mwt-highlight-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: #fff;
  background: linear-gradient(145deg, #b90e3c, #7d102e);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(148, 19, 55, .2);
  transition: transform .3s ease, box-shadow .3s ease;
}

.mwt-highlight:hover .mwt-highlight-icon {
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 12px 30px rgba(148, 19, 55, .35);
}

.mwt-highlight-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mwt-highlight span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

/* Right gallery */

.mwt-compliance-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

/* Image cards */

.mwt-compliance-card {
  position: relative;
  min-width: 0;
  min-height: 285px;
  overflow: hidden;
  border: 1px solid rgba(112, 190, 255, .65);
  border-radius: 17px;
  background: #0b2547;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);

  opacity: 0;
  transform: translateX(65px);
  filter: blur(4px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22, 1, .36, 1),
    filter .8s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.mwt-compliance.is-visible .mwt-compliance-card {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.mwt-compliance.is-visible .mwt-compliance-card:nth-child(1) {
  transition-delay: .25s;
}

.mwt-compliance.is-visible .mwt-compliance-card:nth-child(2) {
  transition-delay: .43s;
}

.mwt-compliance.is-visible .mwt-compliance-card:nth-child(3) {
  transition-delay: .61s;
}

.mwt-compliance.is-visible .mwt-compliance-card:nth-child(4) {
  transition-delay: .79s;
}

.mwt-compliance-card:hover {
  z-index: 2;
  border-color: #9ad7ff;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .3),
    0 0 20px rgba(28, 140, 255, .14);
  transform: translateY(-7px) !important;
}

.mwt-compliance-card-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #15375f, #07182e);
}

.mwt-compliance-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .92;
  transition: transform .7s ease, opacity .4s ease;
}

.mwt-compliance-card:hover .mwt-compliance-card-image img {
  transform: scale(1.055);
  opacity: 1;
}

.mwt-card-image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 17, 37, .02) 25%,
    rgba(3, 17, 37, .20) 48%,
    rgba(3, 17, 37, .96) 100%
  );
  transition: background .35s ease;
}

.mwt-compliance-card:hover .mwt-card-image-shade {
  background: linear-gradient(
    180deg,
    rgba(3, 17, 37, .04) 15%,
    rgba(3, 17, 37, .24) 42%,
    rgba(3, 17, 37, .98) 100%
  );
}

/* Card captions */

.mwt-card-caption {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 17px;
  background: linear-gradient(
    0deg,
    rgba(3, 21, 46, .98),
    rgba(3, 21, 46, .80)
  );
  border-top: 1px solid rgba(123, 193, 255, .25);
  backdrop-filter: blur(7px);
}

.mwt-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  color: var(--mc-navy);
  background: #fff;
  border: 2px solid rgba(114, 190, 255, .35);
  border-radius: 50%;
  transition: transform .35s ease, color .35s ease, background .35s ease;
}

.mwt-compliance-card:hover .mwt-card-icon {
  color: #fff;
  background: var(--mc-maroon);
  transform: rotate(-5deg) scale(1.05);
}

.mwt-card-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mwt-card-text {
  min-width: 0;
}

.mwt-card-line {
  display: block;
  width: 50px;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 3px;
  background: var(--mc-maroon-bright);
  transform: scaleX(.5);
  transform-origin: left;
  transition: transform .35s ease;
}

.mwt-compliance-card:hover .mwt-card-line {
  transform: scaleX(1);
}

.mwt-card-text h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1.5;
}

/* Entrance fallback: content visible when JS is unavailable */

@media (scripting: none) {
  .mwt-compliance-info,
  .mwt-compliance-card {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Animations */

@keyframes mwt-grid-drift {
  from { background-position: 0 0; }
  to { background-position: 48px 48px; }
}

@keyframes mwt-glow-float {
  from { transform: translate3d(-10px, 0, 0) scale(.95); }
  to { transform: translate3d(25px, 30px, 0) scale(1.1); }
}

@keyframes mwt-wave-travel {
  from { transform: translateX(-3%) translateY(0) rotate(-7deg); }
  to { transform: translateX(3%) translateY(-15px) rotate(-4deg); }
}

@keyframes mwt-dots-pulse {
  from { opacity: .28; }
  to { opacity: .7; }
}

@keyframes mwt-shield-float {
  0%, 100% { transform: translateY(0) rotateY(-4deg); }
  50% { transform: translateY(-10px) rotateY(4deg); }
}

@keyframes mwt-orbit-rotate {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes mwt-orbit-rotate-reverse {
  from { rotate: 360deg; }
  to { rotate: 0deg; }
}

@keyframes mwt-platform-pulse {
  0%, 100% { opacity: .55; scale: .96; }
  50% { opacity: 1; scale: 1.04; }
}

@keyframes mwt-float-one {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes mwt-float-two {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 9px; }
}

/* Tablet */

@media (max-width: 1050px) {
  .mwt-compliance {
    padding: 60px 0;
  }

  .mwt-compliance-layout {
    width: min(850px, calc(100% - 40px));
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mwt-compliance-info {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .mwt-compliance-accent {
    margin: 20px auto;
  }

  .mwt-compliance-description {
    margin: 0 auto;
  }

  .mwt-shield-stage {
    height: 235px;
    max-width: 380px;
  }

  .mwt-shield-platform {
    bottom: 10px;
  }

  .mwt-compliance-highlights {
    max-width: 480px;
    margin: 8px auto 0;
  }

  .mwt-compliance-gallery {
    gap: 16px;
  }

  .mwt-compliance-card {
    min-height: 280px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .mwt-compliance {
    padding: 45px 0;
  }

  .mwt-compliance-layout {
    width: calc(100% - 28px);
    gap: 25px;
  }

  .mwt-compliance-info h2 {
    font-size: clamp(32px, 9vw, 43px);
    letter-spacing: -.8px;
  }

  .mwt-compliance-description {
    font-size: 14px;
  }

  .mwt-shield-stage {
    height: 210px;
  }

  .mwt-shield-icon {
    width: 125px;
  }

  .mwt-shield-orbit {
    width: 190px;
  }

  .mwt-orbit-two {
    width: 220px;
  }

  .mwt-orbit-three {
    width: 165px;
    height: 165px;
  }

  .mwt-shield-platform {
    width: 220px;
    height: 45px;
  }

  .mwt-floating-security {
    width: 38px;
    height: 38px;
  }

  .mwt-floating-security svg {
    width: 20px;
    height: 20px;
  }

  .mwt-compliance-highlights {
    gap: 6px;
  }

  .mwt-highlight-icon {
    width: 48px;
    height: 48px;
  }

  .mwt-highlight-icon svg {
    width: 24px;
    height: 24px;
  }

  .mwt-highlight span {
    font-size: 11px;
  }

  .mwt-compliance-gallery {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .mwt-compliance-card {
    min-height: 290px;
  }

  .mwt-card-caption {
    gap: 12px;
    padding: 16px 14px;
  }

  .mwt-card-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  .mwt-card-icon svg {
    width: 25px;
    height: 25px;
  }

  .mwt-card-text h3 {
    font-size: 14px;
  }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
  .mwt-compliance *,
  .mwt-compliance *::before,
  .mwt-compliance *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .mwt-compliance-info,
  .mwt-compliance-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .mwt-compliance-accent {
    transform: scaleX(1) !important;
  }
}

/* ==========================================
   WHY PARTNER WITH US — PREMIUM HEXAGON UI
   Theme: Navy Blue + White + Maroon
========================================== */

.mwt-partner {
  --wp-navy: #102b52;
  --wp-deep: #061b39;
  --wp-maroon: #941337;
  --wp-maroon-light: #bf1645;
  --wp-white: #ffffff;
  --wp-text: #18375e;
  --wp-muted: #61758f;
  --wp-border: rgba(94, 151, 213, .20);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px 0 65px;
  color: var(--wp-text);
  background:
    radial-gradient(ellipse at 10% 15%, rgba(190, 220, 255, .35), transparent 38%),
    radial-gradient(ellipse at 95% 80%, rgba(255, 222, 233, .42), transparent 32%),
    linear-gradient(135deg, #fff, #f4f8ff 52%, #fff);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.mwt-partner *,
.mwt-partner *::before,
.mwt-partner *::after {
  box-sizing: border-box;
}

.mwt-partner a {
  text-decoration: none;
}

.mwt-partner-container {
  position: relative;
  z-index: 2;
  width: min(1480px, calc(100% - 64px));
  margin-inline: auto;
}

/* Background motion */

.mwt-partner-bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mwt-partner-glow {
  position: absolute;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  animation: wp-glow-drift 12s ease-in-out infinite alternate;
}

.mwt-partner-glow-one {
  top: -210px;
  left: 12%;
  background: #b7d8ff;
}

.mwt-partner-glow-two {
  right: -180px;
  bottom: -180px;
  background: #f2bfd0;
  animation-delay: -5s;
}

.mwt-partner-wave {
  position: absolute;
  left: -15%;
  width: 130%;
  height: 130px;
  border: 1px solid rgba(76, 155, 232, .22);
  border-radius: 50%;
  transform: rotate(-4deg);
  animation: wp-wave-motion 14s ease-in-out infinite alternate;
}

.mwt-partner-wave-one {
  bottom: -74px;
  box-shadow: 0 -9px 30px rgba(69, 148, 229, .08);
}

.mwt-partner-wave-two {
  bottom: -97px;
  border-color: rgba(148, 19, 55, .23);
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}

.mwt-partner-wave-three {
  bottom: -118px;
  border-color: rgba(69, 148, 229, .18);
  animation-duration: 21s;
}

.mwt-partner-dots {
  position: absolute;
  top: 28%;
  left: 0;
  width: 115px;
  height: 180px;
  opacity: .55;
  background-image: radial-gradient(#82b7ef 1.5px, transparent 1.5px);
  background-size: 17px 17px;
  mask-image: linear-gradient(90deg, #000, transparent);
  animation: wp-dots-float 5s ease-in-out infinite alternate;
}

/* Heading */

.mwt-partner-heading {
  max-width: 820px;
  margin: 0 auto 58px;
  text-align: center;
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

.mwt-partner.is-visible .mwt-partner-heading {
  opacity: 1;
  transform: translateY(0);
}

.mwt-partner-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--wp-maroon);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.mwt-partner-heading h2 {
  margin: 0;
  color: var(--wp-navy);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 850;
  letter-spacing: -1.7px;
  line-height: 1.16;
}

.mwt-partner-heading h2 span {
  color: var(--wp-maroon);
}

.mwt-partner-heading p {
  margin: 17px 0 0;
  color: var(--wp-muted);
  font-size: 16px;
  line-height: 1.75;
}

.mwt-partner-heading-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 125px;
  margin: 22px auto 0;
}

.mwt-partner-heading-line span {
  width: 45px;
  height: 3px;
  border-radius: 5px;
  background: var(--wp-navy);
}

.mwt-partner-heading-line i {
  width: 20px;
  height: 3px;
  border-radius: 5px;
  background: var(--wp-maroon);
}

/* Six-card grid */

.mwt-partner-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

/* Individual cards */

.mwt-partner-card {
  --wp-card-delay: 0ms;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 29px 16px 25px;
  text-align: center;
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--wp-border);
  border-radius: 20px 20px 28px 28px;
  box-shadow:
    0 12px 34px rgba(20, 55, 95, .07),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  transition:
    opacity .8s ease var(--wp-card-delay),
    transform .8s cubic-bezier(.22, 1, .36, 1) var(--wp-card-delay),
    filter .8s ease var(--wp-card-delay),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;

  opacity: 0;
  transform: translateY(38px) scale(.96);
  filter: blur(3px);
}

/* Decorative top accent */

.mwt-partner-card::before {
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  height: 3px;
  content: "";
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--wp-navy), var(--wp-maroon));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s ease;
}

.mwt-partner-card::after {
  position: absolute;
  right: 13%;
  bottom: 0;
  left: 13%;
  height: 4px;
  content: "";
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(148, 19, 55, .45), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}

.mwt-partner.is-visible .mwt-partner-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.mwt-partner.is-visible .mwt-partner-card:nth-child(1) {
  --wp-card-delay: 100ms;
}

.mwt-partner.is-visible .mwt-partner-card:nth-child(2) {
  --wp-card-delay: 220ms;
}

.mwt-partner.is-visible .mwt-partner-card:nth-child(3) {
  --wp-card-delay: 340ms;
}

.mwt-partner.is-visible .mwt-partner-card:nth-child(4) {
  --wp-card-delay: 460ms;
}

.mwt-partner.is-visible .mwt-partner-card:nth-child(5) {
  --wp-card-delay: 580ms;
}

.mwt-partner.is-visible .mwt-partner-card:nth-child(6) {
  --wp-card-delay: 700ms;
}

.mwt-partner-card:hover {
  z-index: 3;
  border-color: rgba(148, 19, 55, .38);
  background: #fff;
  box-shadow:
    0 24px 45px rgba(16, 43, 82, .14),
    0 5px 20px rgba(148, 19, 55, .08);
  transform: translateY(-9px) scale(1.015);
}

.mwt-partner-card:hover::before {
  transform: scaleX(1);
}

.mwt-partner-card:hover::after {
  opacity: 1;
}

/* Hexagon icon */

.mwt-partner-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 112px;
  margin-bottom: 18px;
}

.mwt-partner-hex {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 94px;
  color: #fff;
  background: linear-gradient(145deg, #1b4d84, #071d3c);
  clip-path: polygon(50% 0%, 91% 22%, 91% 73%, 50% 100%, 9% 73%, 9% 22%);
  filter: drop-shadow(0 8px 8px rgba(16, 43, 82, .2));
  transition: transform .4s ease, filter .4s ease;
}

.mwt-partner-hex::before {
  position: absolute;
  inset: 5px;
  content: "";
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 55%);
  clip-path: polygon(50% 0%, 91% 22%, 91% 73%, 50% 100%, 9% 73%, 9% 22%);
}

.mwt-partner-card:nth-child(even) .mwt-partner-hex {
  background: linear-gradient(145deg, #bf1645, #7d102e);
}

.mwt-partner-card:hover .mwt-partner-hex {
  transform: translateY(-5px) rotate(4deg) scale(1.07);
  filter: drop-shadow(0 13px 12px rgba(148, 19, 55, .22));
}

.mwt-partner-hex svg {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s ease;
}

.mwt-partner-card:hover .mwt-partner-hex svg {
  transform: scale(1.08);
}

.mwt-partner-number {
  position: absolute;
  right: -1px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  color: var(--wp-navy);
  background: #fff;
  border: 1px solid rgba(16, 43, 82, .12);
  border-radius: 50%;
  box-shadow: 0 5px 13px rgba(16, 43, 82, .12);
  font-size: 10px;
  font-weight: 850;
  transition: color .3s ease, background .3s ease;
}

.mwt-partner-card:hover .mwt-partner-number {
  color: #fff;
  background: var(--wp-maroon);
}

/* Card content */

.mwt-partner-card h3 {
  margin: 0 0 12px;
  color: var(--wp-navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.2px;
}

.mwt-partner-card p {
  margin: 0;
  color: var(--wp-muted);
  font-size: 13px;
  line-height: 1.8;
}

.mwt-partner-card p strong {
  color: var(--wp-navy);
  font-weight: 750;
}

.mwt-partner-card-line {
  width: 45px;
  height: 3px;
  margin-top: auto;
  padding-top: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--wp-navy), var(--wp-maroon));
  opacity: .55;
  transform: scaleX(.6);
  transform-origin: center;
  transition: transform .35s ease, opacity .35s ease;
}

.mwt-partner-card:hover .mwt-partner-card-line {
  margin-top: 18px;
  opacity: 1;
  transform: scaleX(1);
}

/* Bottom CTA */

.mwt-partner-footer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 38px;
  padding: 23px 30px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(110deg, #071c3a, #123a6b 65%, #70102e);
  border: 1px solid rgba(116, 183, 255, .28);
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(16, 43, 82, .14);
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity .8s ease .8s,
    transform .8s cubic-bezier(.22, 1, .36, 1) .8s;
}

.mwt-partner.is-visible .mwt-partner-footer {
  opacity: 1;
  transform: translateY(0);
}

.mwt-partner-footer-mark {
  display: grid;
  flex: 0 0 54px;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background: var(--wp-maroon);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  font-size: 38px;
  font-weight: 300;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
}

.mwt-partner-footer-copy {
  flex: 1;
  min-width: 0;
}

.mwt-partner-footer-copy h3 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.mwt-partner-footer-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.6;
}

.mwt-partner-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 48px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, #b71943, #86112f);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  font-size: 14px;
  font-weight: 800;
  transition: transform .3s ease, box-shadow .3s ease;
}

.mwt-partner-cta span {
  display: inline-block;
  font-size: 20px;
  transition: transform .3s ease;
}

.mwt-partner-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .24);
}

.mwt-partner-cta:hover span {
  transform: translateX(4px);
}

/* Background animation keyframes */

@keyframes wp-glow-drift {
  from { transform: translate(0, 0) scale(.95); }
  to { transform: translate(28px, 22px) scale(1.08); }
}

@keyframes wp-wave-motion {
  from { transform: translateX(-2%) translateY(0) rotate(-4deg); }
  to { transform: translateX(3%) translateY(-14px) rotate(-1deg); }
}

@keyframes wp-dots-float {
  from { opacity: .25; transform: translateY(0); }
  to { opacity: .65; transform: translateY(-15px); }
}

/* Laptop and tablet */

@media (max-width: 1250px) {
  .mwt-partner-container {
    width: min(1000px, calc(100% - 48px));
  }

  .mwt-partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .mwt-partner-card {
    padding: 26px 20px 24px;
  }

  .mwt-partner-card h3 {
    font-size: 17px;
  }

  .mwt-partner-card p {
    font-size: 14px;
  }
}

/* Mobile */

@media (max-width: 650px) {
  .mwt-partner {
    padding: 58px 0 42px;
  }

  .mwt-partner-container {
    width: calc(100% - 30px);
  }

  .mwt-partner-heading {
    margin-bottom: 35px;
  }

  .mwt-partner-heading h2 {
    font-size: clamp(30px, 8vw, 40px);
    letter-spacing: -.8px;
  }

  .mwt-partner-heading p {
    font-size: 14px;
  }

  .mwt-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .mwt-partner-card {
    padding: 21px 12px 20px;
    border-radius: 16px 16px 22px 22px;
  }

  .mwt-partner-icon-wrap {
    width: 82px;
    height: 86px;
    margin-bottom: 15px;
  }

  .mwt-partner-hex {
    width: 67px;
    height: 76px;
  }

  .mwt-partner-hex svg {
    width: 35px;
    height: 35px;
  }

  .mwt-partner-number {
    right: -1px;
    bottom: 0;
    width: 27px;
    height: 27px;
    font-size: 9px;
  }

  .mwt-partner-card h3 {
    font-size: 14px;
    line-height: 1.45;
  }

  .mwt-partner-card p {
    font-size: 12px;
    line-height: 1.7;
  }

  .mwt-partner-footer {
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 25px;
    padding: 20px 17px;
  }

  .mwt-partner-footer-mark {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
    font-size: 32px;
  }

  .mwt-partner-footer-copy {
    flex: 1 1 calc(100% - 60px);
  }

  .mwt-partner-footer-copy h3 {
    font-size: 15px;
  }

  .mwt-partner-footer-copy p {
    font-size: 12px;
  }

  .mwt-partner-cta {
    width: 100%;
    min-height: 45px;
  }
}

/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
  .mwt-partner *,
  .mwt-partner *::before,
  .mwt-partner *::after {
    animation: none !important;
    transition: none !important;
  }

  .mwt-partner-heading,
  .mwt-partner-card,
  .mwt-partner-footer {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.mwt-partner.is-visible .mwt-partner-card:hover {
  transform: translateY(-9px) scale(1.015);
}

/* ==========================================
   MEGWORLD HEALTHCARE — LOOK 5 FOOTER
   Navy Blue + White + Maroon
========================================== */

.mwh-footer {
  --mwh-navy: #061a36;
  --mwh-maroon: #a80f3b;
  --mwh-pink: #f51c55;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 0 0;
  color: #fff;
  background: var(--mwh-navy);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.mwh-footer *,
.mwh-footer *::before,
.mwh-footer *::after {
  box-sizing: border-box;
}

.mwh-footer a {
  color: inherit;
  text-decoration: none;
}

.mwh-footer-bg,
.mwh-footer-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mwh-footer-bg {
  z-index: -2;
  background: url("assets/images/footer-healthcare-bg.webp") center / cover no-repeat;
  opacity: .55;
  transform: scale(1.03);
  animation: mwh-bg-move 22s ease-in-out infinite alternate;
}

.mwh-footer-overlay {
  z-index: -1;
  background: linear-gradient(
    105deg,
    rgba(3, 18, 40, .93),
    rgba(4, 25, 53, .90) 48%,
    rgba(65, 5, 30, .85)
  );
}

.mwh-footer-container {
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
}

.mwh-footer-layout {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.18fr)
    minmax(250px, 1.2fr)
    minmax(250px, 1.2fr)
    minmax(270px, 1.15fr)
    minmax(145px, .65fr);
  gap: 10px;
  align-items: stretch;
}

/* Brand */

.mwh-brand {
  min-width: 0;
  padding: 8px 18px 15px 0;
}

.mwh-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
}

.mwh-logo-symbol {
  position: relative;
  flex: 0 0 47px;
  width: 47px;
  height: 49px;
}

.mwh-logo-plus::before,
.mwh-logo-plus::after {
  position: absolute;
  content: "";
  background: #fff;
  border-radius: 1px;
}

.mwh-logo-plus::before {
  width: 17px;
  height: 47px;
  left: 15px;
  top: 0;
}

.mwh-logo-plus::after {
  width: 47px;
  height: 17px;
  left: 0;
  top: 15px;
}

.mwh-logo-phone {
  position: absolute;
  right: -1px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--mwh-maroon);
  background: #fff;
  border: 2px solid var(--mwh-navy);
  border-radius: 50%;
  font-size: 17px;
}

.mwh-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.03;
}

.mwh-logo-text strong,
.mwh-logo-text b {
  color: #fff;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.7px;
}

.mwh-logo-text small {
  margin-top: 5px;
  color: rgba(255,255,255,.8);
  font-size: 7px;
}

.mwh-brand > p {
  max-width: 360px;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 11.5px;
  line-height: 1.75;
}

/* Panels */

.mwh-panel,
.mwh-connect {
  min-width: 0;
  padding: 13px 15px 14px;
  background: linear-gradient(
    145deg,
    rgba(4,25,53,.72),
    rgba(2,18,39,.55)
  );
  border: 1px solid rgba(47,160,255,.28);
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(8px);
  transition: border-color .3s ease, background .3s ease;
}

.mwh-panel:hover,
.mwh-connect:hover {
  border-color: rgba(241,36,88,.55);
  background-color: rgba(6,28,58,.75);
}

.mwh-panel h3,
.mwh-connect h3 {
  position: relative;
  margin: 0 0 15px;
  padding-bottom: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}

.mwh-panel h3::after,
.mwh-connect h3::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25px;
  height: 2px;
  content: "";
  background: var(--mwh-pink);
  border-radius: 2px;
}

/* Links */

.mwh-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mwh-link-grid li {
  min-width: 0;
}

.mwh-link-grid a {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: rgba(255,255,255,.83);
  font-size: 10.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: color .2s ease, transform .2s ease;
}

.mwh-link-grid a::before {
  content: "›";
  flex: 0 0 auto;
  color: #ff426f;
  font-size: 17px;
  line-height: .9;
}

.mwh-link-grid a:hover {
  color: #fff;
  transform: translateX(3px);
}

/* Contact */

.mwh-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
}

.mwh-contact-item > span {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: var(--mwh-maroon);
  border-radius: 50%;
  font-size: 13px;
}

.mwh-contact-item p,
.mwh-contact-item a {
  min-width: 0;
  margin: 1px 0 0;
  color: rgba(255,255,255,.84);
  font-size: 10px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.mwh-contact-item a:hover {
  color: #ff7295;
}

/* Social icons */

.mwh-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
}

.mwh-socials a {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: #fff;
  background: rgba(1,14,31,.82);
  border: 1px solid rgba(111,183,255,.25);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 750;
  transition: transform .25s ease, background .25s ease;
}

.mwh-socials a:hover {
  background: var(--mwh-maroon);
  transform: translateY(-3px);
}

.mwh-connect .mwh-socials {
  gap: 5px;
  margin-top: 0;
}

.mwh-connect .mwh-socials a {
  width: 25px;
  height: 25px;
  font-size: 11px;
}

/* CTA */

.mwh-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  padding: 11px 13px;
  color: #fff;
  background: linear-gradient(120deg, #e91850, #9d0e3a);
  border-radius: 40px;
  font-size: 11px;
  font-weight: 750;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mwh-cta span {
  font-size: 17px;
  transition: transform .25s ease;
}

.mwh-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(213,13,66,.3);
}

.mwh-cta:hover span {
  transform: translateX(4px);
}

/* Bottom bar */

.mwh-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 0 18px;
  border-top: 1px solid rgba(125,183,241,.2);
}

.mwh-bottom p,
.mwh-legal {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 10px;
}

.mwh-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mwh-bottom a:hover {
  color: #ff7295;
}

.mwh-backtop {
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
}

/* Scroll reveal */

.mwh-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(2px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.22,1,.36,1),
    filter .7s ease;
}

.mwh-footer.is-visible .mwh-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.mwh-footer.is-visible .mwh-reveal:nth-child(2) {
  transition-delay: .1s;
}

.mwh-footer.is-visible .mwh-reveal:nth-child(3) {
  transition-delay: .2s;
}

.mwh-footer.is-visible .mwh-reveal:nth-child(4) {
  transition-delay: .3s;
}

.mwh-footer.is-visible .mwh-reveal:nth-child(5) {
  transition-delay: .4s;
}

/* Background animation */

@keyframes mwh-bg-move {
  from { transform: scale(1.03) translateX(-.5%); }
  to { transform: scale(1.09) translateX(.5%); }
}

/* Tablet */

@media (max-width: 1250px) {
  .mwh-footer-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mwh-brand {
    padding: 16px;
    border: 1px solid rgba(47,160,255,.25);
    border-radius: 13px;
    background: rgba(4,25,53,.4);
  }

  .mwh-panel,
  .mwh-connect {
    padding: 17px;
  }

  .mwh-link-grid a,
  .mwh-contact-item p,
  .mwh-contact-item a {
    font-size: 12px;
  }
}

/* Mobile */

@media (max-width: 640px) {
  .mwh-footer {
    padding-top: 22px;
  }

  .mwh-footer-container {
    width: calc(100% - 26px);
  }

  .mwh-footer-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mwh-brand {
    padding: 18px 15px;
  }

  .mwh-logo-text strong,
  .mwh-logo-text b {
    font-size: 22px;
  }

  .mwh-brand > p {
    font-size: 12px;
  }

  .mwh-panel,
  .mwh-connect {
    padding: 16px;
  }

  .mwh-link-grid a,
  .mwh-contact-item p,
  .mwh-contact-item a {
    font-size: 12px;
  }

  .mwh-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .mwh-backtop {
    align-self: flex-end;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .mwh-footer *,
  .mwh-footer *::before,
  .mwh-footer *::after {
    animation: none !important;
    transition: none !important;
  }

  .mwh-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ==========================================================
   MegWorld Healthcare — Footer
   Everything is prefixed .mwf. The reset uses :where() so it has
   ZERO specificity and can never override the component styles.
   ========================================================== */

.mwf {
  --mwf-navy: #102B52;
  --mwf-navy-d: #081F42;
  --mwf-maroon: #941337;
  --mwf-maroon-d: #7D102E;
  --mwf-rose: #ff6b8e;                 /* light tint of the maroon, readable on dark */
  --mwf-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative; isolation: isolate; overflow: hidden;
  padding: 56px 0 20px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #e7edf8;
  background: linear-gradient(100deg, #081F42 0%, #102B52 30%, #34173f 62%, #941337 100%);
  background-size: 160% 160%;
  animation: mwf-bg-shift 22s ease-in-out infinite alternate;
}
:where(.mwf) *, :where(.mwf) *::before, :where(.mwf) *::after { box-sizing: border-box; }
:where(.mwf) h3, :where(.mwf) p, :where(.mwf) ul, :where(.mwf) li, :where(.mwf) address { margin: 0; padding: 0; list-style: none; font-style: normal; }
:where(.mwf) a { color: inherit; text-decoration: none; }

.mwf-inner { position: relative; z-index: 2; width: min(1320px, 93%); margin: 0 auto; }

/* ==========================================================
   BACKGROUND
   ========================================================== */
.mwf-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.mwf-glow { position: absolute; border-radius: 50%; filter: blur(90px); animation: mwf-drift 16s ease-in-out infinite alternate; }
.mwf-glow--l { width: 420px; height: 360px; left: -120px; top: -80px;      background: rgba(70, 120, 210, .28); }
.mwf-glow--r { width: 480px; height: 380px; right: -140px; bottom: -120px; background: rgba(255, 70, 120, .30); animation-delay: -7s; }

.mwf-steth { position: absolute; left: -20px; bottom: -10px; width: 190px; color: rgba(255, 255, 255, .07); animation: mwf-bob 10s ease-in-out infinite; }

.mwf-wave { position: absolute; left: 0; width: 100%; height: 200px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  animation: mwf-float var(--mwf-float, 12s) ease-in-out infinite alternate; }
.mwf-wave svg { display: block; width: 200%; height: 100%; will-change: transform; animation: mwf-slide var(--mwf-slide, 60s) linear infinite; }
.mwf-wave path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mwf-wave--1 { bottom: -60px; opacity: .35; }
.mwf-wave--1 path { stroke: #8fb0e6; stroke-width: 1.2; }
.mwf-wave--2 { bottom: -90px; opacity: .45; }
.mwf-wave--2 path { stroke: var(--mwf-rose); stroke-width: 1.2; }

.mwf-dots { position: absolute; width: 110px; height: 150px; opacity: .5;
  background: radial-gradient(circle, rgba(255,255,255,.45) 1.4px, transparent 1.6px) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 85%); mask-image: linear-gradient(135deg, #000, transparent 85%); }
.mwf-dots--l { left: 12px; top: 20px; }
.mwf-dots--r { right: 12px; top: 24px; transform: scaleX(-1); }

/* ==========================================================
   GRID — 4 columns, all the same height, no empty space
   ========================================================== */
.mwf-grid {
  display: grid; align-items: stretch; gap: 18px;
  grid-template-columns: minmax(230px, 1fr) minmax(270px, 1.05fr) minmax(330px, 1.35fr) minmax(240px, 1fr);
  grid-template-areas: "brand quick services contact";
}
.mwf-brand { grid-area: brand; }
.mwf-quick { grid-area: quick; }
.mwf-services { grid-area: services; }
.mwf-contact-col { grid-area: contact; }

/* ---------- brand: logo top, paragraph middle, icons bottom ---------- */
.mwf-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; }

.mwf-logo { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; }
.mwf-logo__mark { width: 52px; height: 52px; flex: 0 0 52px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); transition: transform .6s var(--mwf-ease); }
.mwf-logo:hover .mwf-logo__mark { transform: rotate(-8deg) scale(1.08); }
.mwf-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.mwf-logo__text strong { margin: 0; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.mwf-logo__text small { margin-top: 6px; font-size: 8.5px; letter-spacing: .3px; color: #c9d5ea; }

.mwf-about { margin: 0; font-size: 13.5px; line-height: 1.7; color: #dbe4f3; }

.mwf-social { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; }
.mwf-social a {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .4s var(--mwf-ease), background .3s, border-color .3s, box-shadow .4s;
}
.mwf-social svg { width: 18px; height: 18px; }
.mwf-social a::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--mwf-rose); opacity: 0; }
.mwf-social a:hover, .mwf-social a:focus-visible {
  transform: translateY(-5px) scale(1.06);
  background: linear-gradient(135deg, #b8173f, var(--mwf-maroon-d)); border-color: transparent;
  box-shadow: 0 12px 22px rgba(125, 16, 46, .55);
}
.mwf-social a:hover::after { animation: mwf-ring .8s ease-out; }
.mwf-social a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- glass cards (fill full column height) ---------- */
.mwf-card {
  position: relative; display: flex; flex-direction: column; height: 100%; min-width: 0; overflow: hidden;
  padding: 22px 24px 24px; border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 18px 40px rgba(4, 12, 32, .25), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .5s var(--mwf-ease), border-color .4s, box-shadow .5s var(--mwf-ease);
}
.mwf-card::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg);
}
.mwf-card:hover { transform: translateY(-6px); border-color: rgba(255, 107, 142, .6); box-shadow: 0 28px 50px rgba(4, 12, 32, .38); }
.mwf-card:hover::after { animation: mwf-sweep 1s ease; }

.mwf-card__title {
  position: relative; margin: 0 0 18px; padding: 0 0 11px;
  font-size: 16px; font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: .2px;
}
.mwf-card__title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; border-radius: 2px; background: var(--mwf-rose); transition: width .5s var(--mwf-ease); }
.mwf-card:hover .mwf-card__title::after { width: 56px; }

/* two list columns share the card width and the card height */
.mwf-cols { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.mwf-list { display: flex; flex-direction: column; justify-content: space-between; gap: 11px; margin: 0; padding: 0; }
.mwf-list li { margin: 0; padding: 0; }
.mwf-list a { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.4; color: #e7edf8; text-decoration: none; transition: color .25s, transform .35s var(--mwf-ease); }
.mwf-list i {
  width: 6px; height: 6px; flex: 0 0 6px; margin-top: 6px;
  border-top: 1.8px solid var(--mwf-rose); border-right: 1.8px solid var(--mwf-rose);
  transform: rotate(45deg); transition: transform .35s var(--mwf-ease);
}
.mwf-list a:hover, .mwf-list a:focus-visible { color: #fff; transform: translateX(6px); }
.mwf-list a:hover i { transform: rotate(45deg) translate(2px, -2px); }
.mwf-list a:focus-visible { outline: 2px solid var(--mwf-rose); outline-offset: 3px; border-radius: 4px; }

/* ---------- contact column: card grows, button fills the width below ---------- */
.mwf-contact-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mwf-contact-col .mwf-card { flex: 1; height: auto; }

.mwf-contact { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; margin: 0; padding: 0; }
.mwf-contact li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; font-size: 13px; line-height: 1.55; color: #e7edf8; }
.mwf-contact a { color: inherit; text-decoration: none; word-break: break-word; transition: color .25s; }
.mwf-contact a:hover { color: var(--mwf-rose); }
.mwf-ico { width: 24px; height: 24px; flex: 0 0 24px; color: var(--mwf-rose); display: grid; place-items: center; transition: transform .4s var(--mwf-ease); }
.mwf-ico svg { width: 20px; height: 20px; }
.mwf-contact li:hover .mwf-ico { transform: scale(1.18) rotate(-6deg); }

.mwf-cta {
  position: relative; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 28px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #ff3f6c, var(--mwf-maroon));
  box-shadow: 0 12px 26px rgba(255, 63, 108, .38);
  transition: transform .4s var(--mwf-ease), box-shadow .4s var(--mwf-ease);
  animation: mwf-pulse 2.8s ease-out infinite;
}
.mwf-cta svg { width: 18px; height: 18px; transition: transform .4s var(--mwf-ease); }
.mwf-cta:hover, .mwf-cta:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(255, 63, 108, .55); animation-play-state: paused; }
.mwf-cta:hover svg { transform: translateX(6px); }
.mwf-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- bottom bar ---------- */
.mwf-bottom {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: #b9c6dd;
}
.mwf-bottom p { margin: 0; }
.mwf-top { display: inline-flex; align-items: center; gap: 8px; color: #e7edf8; text-decoration: none; transition: color .25s, transform .35s var(--mwf-ease); }
.mwf-top svg { width: 15px; height: 15px; transition: transform .35s var(--mwf-ease); }
.mwf-top:hover { color: var(--mwf-rose); }
.mwf-top:hover svg { transform: translateY(-4px); }

/* ==========================================================
   SCROLL REVEAL (only active after JS adds .mwf--js)
   ========================================================== */
.mwf--js:not(.mwf--in) .mwf-r,
.mwf--js:not(.mwf--in) .mwf-social li { opacity: 0; }

/* "backwards" fill → hover transforms still work after the entrance ends */
.mwf--in .mwf-r { animation: mwf-fade-up .9s var(--mwf-ease) backwards; animation-delay: calc(var(--i, 0) * 130ms); }
.mwf--in .mwf-social li { animation: mwf-pop .6s var(--mwf-ease) backwards; animation-delay: calc(.5s + var(--s, 0) * 90ms); }

@keyframes mwf-fade-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes mwf-pop     { from { opacity: 0; transform: translateY(14px) scale(.5); } to { opacity: 1; transform: none; } }

@keyframes mwf-bg-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes mwf-slide    { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes mwf-float    { from { transform: translateY(-10px); } to { transform: translateY(12px); } }
@keyframes mwf-drift    { to { transform: translate(60px, 30px) scale(1.12); } }
@keyframes mwf-bob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes mwf-sweep    { to { left: 130%; } }
@keyframes mwf-ring     { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes mwf-pulse    { 0% { box-shadow: 0 12px 26px rgba(255,63,108,.38), 0 0 0 0 rgba(255,63,108,.5); } 70%, 100% { box-shadow: 0 12px 26px rgba(255,63,108,.38), 0 0 0 16px rgba(255,63,108,0); } }

/* ==========================================================
   RESPONSIVE — columns always fill their row
   ========================================================== */
@media (max-width: 1180px) {
  .mwf-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand    contact"
      "quick    services";
  }
  .mwf-about { max-width: 560px; }
}

@media (max-width: 720px) {
  .mwf { padding: 44px 0 18px; }
  .mwf-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "quick" "services" "contact";
  }
  .mwf-card { padding: 20px; }
  .mwf-bottom { justify-content: center; text-align: center; }
  .mwf-steth, .mwf-dots--r, .mwf-wave--2 { display: none; }
}

@media (max-width: 420px) {
  .mwf-cols { grid-template-columns: 1fr; gap: 11px; }
  .mwf-list { gap: 11px; }
}

/* reduced motion: static + fully visible */
@media (prefers-reduced-motion: reduce) {
  .mwf, .mwf *, .mwf *::before, .mwf *::after { animation: none !important; transition-duration: .01ms !important; }
  .mwf--js:not(.mwf--in) .mwf-r,
  .mwf--js:not(.mwf--in) .mwf-social li { opacity: 1; }
  .mwf-wave svg { transform: translateX(-25%); }
}

/* ==========================================
   SERVICES — SINGLE COLUMN LAYOUT
   Keeps all services in one vertical list
========================================== */

.mwf-services .mwf-cols {
  display: block;
}

.mwf-services .mwf-cols > .mwf-list {
  display: flex;
  flex-direction: column;
  gap: 19px;
  justify-content: flex-start;
}

.mwf-services .mwf-list a {
  width: 100%;
  align-items: center;
  line-height: 1.5;
}

/* Keep Quick Links in the existing two-column layout */
.mwf-quick .mwf-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

/* Responsive spacing */
@media (max-width: 720px) {
  .mwf-services .mwf-cols > .mwf-list {
    gap: 10px;
  }
}


/* ==========================================
   FIX: KEEP ALL CARD TEXT INSIDE THE CARD
   ========================================== */

.mwt-who-serve .mwt-ws-card,
.mwt-who-serve .mwt-ws-card__shape {
  min-width: 0 !important;
}

.mwt-who-serve .mwt-ws-card__shape {
  overflow: hidden !important;
}

.mwt-who-serve .mwt-ws-card__inner {
  overflow: hidden !important;
}

.mwt-who-serve .mwt-ws-card__body {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  /* Remove the oversized left padding */
  padding: 12px 12px 24px !important;
  gap: 10px !important;

  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.mwt-who-serve .mwt-ws-badge {
  width: clamp(42px, 4.5vw, 64px) !important;
  height: clamp(42px, 4.5vw, 64px) !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

.mwt-who-serve .mwt-ws-badge svg {
  width: 65% !important;
  height: 65% !important;
}

.mwt-who-serve .mwt-ws-card__title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(13px, 1.15vw, 18px) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  text-align: center !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;

  color: #fff !important;
}

/* Tablet: give the cards more width */
@media (max-width: 820px) {
  .mwt-who-serve .mwt-ws-card {
    min-height: 240px !important;
  }

  .mwt-who-serve .mwt-ws-card__body {
    padding: 12px 16px 22px !important;
  }

  .mwt-who-serve .mwt-ws-card__title {
    font-size: 16px !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .mwt-who-serve .mwt-ws-card {
    min-height: 220px !important;
  }

  .mwt-who-serve .mwt-ws-card__body {
    padding: 12px 22px 22px !important;
    gap: 10px !important;
  }

  .mwt-who-serve .mwt-ws-card__title {
    font-size: 17px !important;
  }
}
/* FINAL FIX — WHO WE SERVE CARD TEXT OVERFLOW */

.mwt-ws-card {
  min-width: 0 !important;
  overflow: visible !important;
}

.mwt-ws-card__shape {
  overflow: hidden !important;
}

/* Align inner content with the card */
.mwt-ws-card__inner {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

/* Keep icon and text inside each card */
.mwt-ws-card__body {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 10px 24px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;

  text-align: center !important;
  overflow: hidden !important;
}

.mwt-ws-card__title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(12px, 1.05vw, 15px) !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;

  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: center !important;
}

.mwt-ws-badge {
  flex-shrink: 0 !important;
  width: 58px !important;
  height: 58px !important;
}

@media (max-width: 1100px) {
  .mwt-ws-card__body {
    padding: 0 8px 20px !important;
    gap: 8px !important;
  }

  .mwt-ws-card__title {
    font-size: 13px !important;
  }
}

@media (max-width: 820px) {
  .mwt-ws-card__title {
    font-size: 16px !important;
  }
}
/* ==========================================
   PROFESSIONAL RESOURCES DROPDOWN
========================================== */

.nav-dropdown {
  position: relative;
}

/* Resources link */
.nav-menu .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Simple arrow */
.dropdown-arrow {
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown:focus-within .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
  transform: rotate(225deg);
  margin-top: 4px;
}

/* Dropdown panel */
.nav-menu .dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 270px;

  margin: 0;
  padding: 8px;
  list-style: none;

  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-top: 3px solid #7b1230;
  border-radius: 10px;

  box-shadow: 0 12px 30px rgba(10, 31, 77, .12);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translate(-50%, 7px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;

  z-index: 1600;
}

/* Keep panel open while moving mouse into it */
.nav-dropdown:hover > .dropdown-menu,
.nav-dropdown:focus-within > .dropdown-menu,
.nav-dropdown.open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Remove the main navbar underline inside dropdown */
.nav-menu .dropdown-menu a::after {
  display: none !important;
}

.nav-menu .dropdown-menu li {
  display: block;
  width: 100%;
}

/* Individual links */
.nav-menu .dropdown-menu li a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;

  width: 100%;
  padding: 13px 14px;

  border-radius: 6px;
  background: #ffffff;

  white-space: normal;
  text-decoration: none;

  transition:
    background .2s ease,
    padding-left .2s ease;
}

/* Heading */
.nav-menu .dropdown-title {
  color: #0a1f4d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

/* Supporting text */
.nav-menu .dropdown-desc {
  color: #667085;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}

/* Subtle professional hover */
.nav-menu .dropdown-menu li a:hover,
.nav-menu .dropdown-menu li a:focus-visible {
  background: #f8f3f5;
  padding-left: 18px;
}

.nav-menu .dropdown-menu li a:hover .dropdown-title,
.nav-menu .dropdown-menu li a:focus-visible .dropdown-title {
  color: #7b1230;
}

/* Mobile dropdown */
@media (max-width: 960px) {
  .nav-menu .nav-dropdown {
    width: 100%;
  }

  .nav-menu .dropdown-trigger {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .nav-menu .dropdown-menu {
    position: static;
    display: none;

    width: 100%;
    margin: 4px 0 8px;
    padding: 5px;

    border: 1px solid #e6e9ef;
    border-left: 3px solid #7b1230;
    border-top: 1px solid #e6e9ef;
    border-radius: 8px;

    background: #ffffff;
    box-shadow: none;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .nav-menu .nav-dropdown.open > .dropdown-menu {
    display: block;
  }

  .nav-menu .dropdown-menu li a {
    padding: 12px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .dropdown-arrow,
  .nav-menu .dropdown-menu,
  .nav-menu .dropdown-menu li a {
    transition: none !important;
  }
}

/* Resources dropdown arrow — visible by default */
.nav-menu .dropdown-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
}

.nav-menu .dropdown-arrow {
  display: inline-block !important;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: -4px;
  border: 0 !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin 0.2s ease;
}

/* Arrow turns up when dropdown is open */
.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown:focus-within .dropdown-arrow,
.nav-dropdown.open .dropdown-arrow {
  transform: rotate(225deg);
  margin-top: 4px;
}

/* Prevent underline animation from affecting the arrow */
.nav-menu .dropdown-trigger::after {
  right: 13px;
}

/* Mobile dropdown */
@media (max-width: 960px) {
  .nav-menu .dropdown-trigger {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu .dropdown-arrow {
    transition: none;
  }
}