/* MediFix Homepage v2 • page-only overrides • original dynamic fields untouched */
#home {
  --mf-ink: #153b52;
  --mf-blue: #17618a;
  --mf-sky: #82c9ed;
  --mf-muted: #506a7b;
  --mf-stroke: #dae9f1;
  color: var(--mf-ink);
  background: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65
}

#home,
#home * {
  box-sizing: border-box
}

#home .container {
  max-width: 1190px;
  width: calc(100% - 48px);
  padding: 0 8px
}

#home h1,
#home h2,
#home h3,
#home h4 {
  color: var(--mf-ink);
  letter-spacing: -.035em;
  overflow-wrap: break-word
}

#home h2 {
  font-size: clamp(30px, 3.1vw, 43px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 14px
}

#home h3 {
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 750;
  line-height: 1.3;
  margin: 0 0 12px
}

#home p,
#home li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--mf-muted)
}

#home .mf-section-eyebrow {
  font-size: 12px;
  letter-spacing: .13em;
  font-weight: 800;
  color: var(--mf-blue);
  margin-bottom: 15px
}

#home .mf-hero {
  padding: 72px 0 76px;
  background: radial-gradient(ellipse at 87% 7%, #dff3fd 0, transparent 36%), linear-gradient(120deg, #f3faff 0%, #fff 76%)
}

#home .mf-hero-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 6vw, 88px)
}

#home .mf-eyebrow {
  font-size: 12px;
  letter-spacing: .07em;
  margin-bottom: 22px;
  padding: 10px 16px
}

#home .mf-hero h1 {
  font-size: clamp(40px, 4.35vw, 64px);
  line-height: 1.13;
  font-weight: 800;
  margin: 0 0 22px;
  color: #103951
}

#home .mf-hero p {
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 27px;
  max-width: 580px;
  color: #496578
}

#home .mf-hero-actions {
  margin: 0 0 24px;
  gap: 12px
}

#home .btn {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  padding: 15px 22px;
  min-height: 49px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none
}

#home .mf-hero-details {
  gap: 12px 18px;
  font-size: 14px
}

#home .mf-hero-image-frame {
  transform: none;
  border-radius: 24px;
  padding: 9px;
  background: #e0f2fa
}

#home .mf-hero-image-frame img {
  height: 440px;
  border-radius: 16px;
  object-position: center 28%
}

#home .mf-visual-note {
  font-size: 13px;
  bottom: -8px;
  left: -15px
}

#home .medifix-team-modern {
  padding: 92px 0 96px;
  background: #fff
}

#home .team-header {
  margin: 0 auto 35px;
  max-width: 760px
}

#home .team-header h2 {
  margin: 0 0 12px
}

#home .team-header p {
  font-size: 16px;
  margin: 0
}

#home .team-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch
}

#home .team-card-modern {
  min-height: 310px;
  padding: 32px 29px;
  border: 1px solid var(--mf-stroke);
  border-radius: 17px !important;
  box-shadow: 0 10px 30px rgba(17, 69, 97, .055);
  background: #fff
}

#home .team-card-modern.highlight {
  background: #eaf6fd;
  border: 1px solid #d6eaf5;
  color: var(--mf-ink)
}

#home .team-card-modern.highlight h3,
#home .team-card-modern.highlight li,
#home .team-card-modern.highlight p {
  color: var(--mf-ink)
}

#home .team-card-modern .team-tag,
#home .team-card-modern.highlight .team-tag {
  display: inline-flex;
  background: #dfeff8;
  color: var(--mf-blue);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .09em;
  padding: 9px 12px;
  margin: 0 0 20px
}

#home .team-card-modern h3 {
  color: var(--mf-ink);
  font-size: 21px;
  margin-bottom: 15px
}

#home .team-card-modern p,
#home .team-card-modern li {
  font-size: 15px;
  line-height: 1.72;
  color: var(--mf-muted)
}

#home .team-card-modern ul {
  padding-left: 19px
}

#home .team-card-modern li {
  margin-bottom: 9px
}

#home .ourWorkSwiper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 82px 45px 78px;
  overflow: hidden
}

#home .ourWorkSwiper .team-header {
  margin-bottom: 30px
}

#home .ourWorkSwiper .swiper-slide {
  height: 270px;
  overflow: hidden;
  border-radius: 17px;
  background: #eaf1f4;
  box-shadow: 0 10px 23px rgba(13, 63, 91, .09)
}

#home .ourWorkSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

#home .ourWorkSwiper .swiper-button-next,
#home .ourWorkSwiper .swiper-button-prev {
  color: var(--mf-blue)
}

#home .equipment-services {
  padding: 92px 0 105px;
  background: #f1f8fc;
  margin: 0
}

#home .mf-section-intro {
  margin-bottom: 22px;
  gap: 35px;
  align-items: center
}

#home .mf-section-intro p {
  max-width: 355px;
  font-size: 16px;
  line-height: 1.6
}

#home .filter-box {
  margin-bottom: 25px !important
}

#home .filter-box select {
  height: 49px;
  min-width: 240px;
  background: #fff;
  font-size: 15px;
  color: #244c64;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid #c9e0ed
}

#home .services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px
}

#home .service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 240px;
  padding: 27px;
  background: #fff;
  border: 1px solid #e0edf3;
  border-radius: 16px;
  box-shadow: 0 7px 25px rgba(20, 80, 110, .045)
}

#home .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: #e3f3fb;
  color: var(--mf-blue);
  border-radius: 12px;
  font-size: 20px
}

#home .service-content {
  padding: 0;
  width: 100%;
  min-width: 0
}

#home .service-content h3 {
  font-size: 19px;
  line-height: 1.32;
  margin-bottom: 10px;
  color: #123c56;
  font-weight: 750
}

#home .service-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #526f80;
  margin: 0;
  overflow-wrap: anywhere
}

#home .service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(20, 80, 110, .085)
}

#home .about {
  padding: 100px 0;
  background: #fff
}

#home .about-container {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center
}

#home .about-content,
#home .about-image {
  min-width: 0
}

#home .about h2 {
  margin: 0 0 20px
}

#home .about-content>p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 17px
}

#home .features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 25px
}

#home .feature {
  padding: 17px 15px;
  min-width: 0;
  border-radius: 13px;
  gap: 10px;
  background: #f2f9fc
}

#home .feature h4 {
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 5px
}

#home .feature p {
  font-size: 13px;
  line-height: 1.6;
  margin: 0
}

#home .feature i {
  font-size: 17px;
  color: var(--mf-blue)
}

#home .about-image {
  overflow: hidden;
  border-radius: 20px
}

#home .about-image img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover
}

#home .emergency {
  padding: 76px 20px 83px;
  background: linear-gradient(115deg, #12577e, #257eae);
  text-align: center
}

#home .emergency .container {
  max-width: 850px
}

#home .emergency h2 {
  font-size: clamp(31px, 3.5vw, 46px);
  color: #fff;
  margin: 0 0 16px
}

#home .emergency p {
  color: #edf8ff;
  font-size: 16px;
  max-width: 720px;
  margin: 0 auto 27px
}

#home .emergency .mf-section-eyebrow {
  color: #b9e8ff
}

#home .emergency .btn {
  background: #fff;
  color: #13577c
}

@media(max-width:1050px) {
  #home .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  #home .team-layout {
    gap: 15px
  }

  #home .team-card-modern {
    padding: 25px 22px
  }

  #home .mf-hero-image-frame img {
    height: 360px
  }

  #home .about-image img {
    height: 430px
  }
}

@media(max-width:800px) {
  #home .mf-hero {
    padding: 28px 0 55px
  }

  #home .mf-hero-layout {
    grid-template-columns: 1fr;
    gap: 37px
  }

  #home .mf-hero-content {
    max-width: 690px
  }

  #home .mf-hero h1 {
    font-size: clamp(37px, 6vw, 52px)
  }

  #home .mf-hero-visual {
    max-width: 620px;
    margin: 0 auto
  }

  #home .mf-hero-image-frame img {
    height: 390px
  }

  #home .medifix-team-modern {
    padding: 65px 0 70px
  }

  #home .team-layout {
    grid-template-columns: 1fr
  }

  #home .team-card-modern {
    min-height: 0;
    padding: 26px
  }

  #home .ourWorkSwiper {
    padding-top: 64px;
    padding-bottom: 64px
  }

  #home .equipment-services {
    padding: 70px 0 76px
  }

  #home .about {
    padding: 73px 0
  }

  #home .about-container {
    grid-template-columns: 1fr;
    gap: 32px
  }

  #home .about-image img {
    height: 350px
  }

  #home .emergency {
    padding: 68px 16px
  }
}

@media(max-width:600px) {
  #home .container {
    width: calc(100% - 32px);
    padding: 0 2px
  }

  #home h2 {
    font-size: 29px
  }

  #home .mf-section-eyebrow {
    font-size: 11px
  }

  #home .mf-hero {
    padding: 14px 0 48px
  }

  #home .mf-eyebrow {
    font-size: 10px;
    padding: 8px 12px;
    margin-bottom: 14px
  }

  #home .mf-hero h1 {
    font-size: clamp(32px, 8.6vw, 40px);
    line-height: 1.16;
    margin-bottom: 16px
  }

  #home .mf-hero p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 20px
  }

  #home .mf-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
  }

  #home .mf-hero-actions .btn {
    width: 100%
  }

  #home .mf-hero-details {
    font-size: 13px;
    gap: 8px 15px
  }

  #home .mf-hero-visual {
    padding: 5px 9px 18px
  }

  #home .mf-hero-image-frame img {
    height: 275px
  }

  #home .mf-visual-note {
    left: 0;
    bottom: -2px;
    font-size: 12px;
    padding: 10px 12px
  }

  #home .team-header {
    margin-bottom: 25px
  }

  #home .team-card-modern h3 {
    font-size: 20px
  }

  #home .ourWorkSwiper {
    padding: 57px 30px 55px
  }

  #home .ourWorkSwiper .swiper-slide {
    height: 225px
  }

  #home .mf-section-intro {
    display: block
  }

  #home .mf-section-intro p {
    margin-top: 12px
  }

  #home .filter-box select {
    width: 100%;
    min-width: 0
  }

  #home .services-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  #home .service-card {
    min-height: 0;
    padding: 22px;
    gap: 12px
  }

  #home .service-content p {
    font-size: 15px
  }

  #home .features {
    grid-template-columns: 1fr;
    gap: 10px
  }

  #home .about-image img {
    height: 270px
  }

  #home .emergency h2 {
    font-size: 30px
  }

  #home .emergency .btn {
    width: 100%;
    max-width: 360px
  }

  #home .medifix-team-modern,
  #home .equipment-services,
  #home .about {
    padding-top: 56px;
    padding-bottom: 60px
  }
}

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

  #home .service-card,
  #home .team-card-modern,
  #home .btn {
    transition: none !important
  }
}

/* HOMEPAGE HEADER ONLY. The template uses <body> (no body_class),
   so `body.home` will not match. Modern Safari/Chrome support :has(). */
@media (max-width: 768px) {
  body:has(#home)>header {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body:has(#home)>header .header-container {
    min-height: 76px;
    padding-top: 6px;
    padding-bottom: 6px;
    align-items: center;
  }

  body:has(#home)>header .logo,
  body:has(#home)>header .logo a {
    height: auto;
    min-height: 0;
    overflow: visible;
    line-height: 0;
  }

  body:has(#home)>header img.mf-brand-logo {
    display: block;
    width: 140px;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  #home,
  #home .mf-hero {
    margin-top: 0;
  }

  #home .mf-hero-content {
    padding-top: 0;
    margin-top: 0;
  }

  #home .mf-hero-layout {
    align-items: start;
  }
}

@media (max-width: 600px) {
  body:has(#home)>header .header-container {
    min-height: 72px;
  }

  body:has(#home)>header img.mf-brand-logo {
    width: 130px;
  }

  #home .mf-hero {
    padding-top: 12px;
  }

  #home .mf-hero .container {
    margin-top: 0;
  }
}


/* FINAL: homepage-only zero vertical section padding on phones.
   Appended last so it takes priority over all previous 800px/600px blocks. */
@media screen and (max-width: 767px) {
  #home {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #home section,
  #home .mf-hero,
  #home .medifix-team-modern,
  #home .equipment-services,
  #home .about,
  #home .emergency,
  #home .ourWorkSwiper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  #home .mf-hero-content,
  #home .mf-hero-layout,
  #home .mf-hero .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #home .mf-hero-layout {
    align-items: start;
  }

  #home .container {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  /* Keep card and button padding: only SECTIONS have zero vertical padding. */
  #home .ourWorkSwiper {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 480px) {
  #home .ourWorkSwiper {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ==========================================
   MEDIFIX 3D STACKED OUR WORK SLIDER
========================================== */

#home .mf-stack-section {
  background: #fff;
  padding: 75px 0;
  overflow: hidden;
}

#home .mf-stack-container {
  width: min(100% - 32px, 1180px);
  margin: auto;
}

#home .mf-stack-heading {
  text-align: center;
  margin-bottom: 12px;
}

#home .mf-stack-eyebrow {
  display: block;
  color: #17618a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#home .mf-stack-heading h2 {
  color: #153b52;
  font-size: clamp(29px, 4vw, 42px);
  margin: 12px 0;
}

#home .mf-stack-heading p {
  color: #637c8c;
  font-size: 15px;
  margin: 0;
}

/* STACK STAGE */

#home .mf-stack-slider {
  width: 100%;
  max-width: 640px;
  margin: auto;
}

#home .mf-stack-stage {
  position: relative;
  height: 495px;
  width: 100%;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  isolation: isolate;
}

/* ALL CARDS */

#home .mf-stack-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 67%;
  height: 390px;

  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 38px;

  background: #edf6fa;
  box-shadow:
    0 18px 45px rgba(20, 60, 80, .13);

  transform-origin: center center;
  transform:
    translate(-50%, -50%)
    translateX(100px)
    scale(.75);

  opacity: 0;
  visibility: hidden;

  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    opacity .5s ease,
    visibility .5s ease;

  will-change: transform;
  pointer-events: none;
}

/* FRONT CARD */

#home .mf-stack-card[data-pos="0"] {
  z-index: 5;
  opacity: 1;
  visibility: visible;
  transform:
    translate(-50%, -50%)
    translateX(-30px)
    scale(1)
    rotate(-1deg);
  pointer-events: auto;
}

/* SECOND CARD */

#home .mf-stack-card[data-pos="1"] {
  z-index: 4;
  opacity: 1;
  visibility: visible;
  transform:
    translate(-50%, -50%)
    translateX(4px)
    translateY(6px)
    scale(.97)
    rotate(4deg);
}

/* THIRD CARD */

#home .mf-stack-card[data-pos="2"] {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transform:
    translate(-50%, -50%)
    translateX(30px)
    translateY(13px)
    scale(.94)
    rotate(8deg);
}

/* FOURTH CARD */

#home .mf-stack-card[data-pos="3"] {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform:
    translate(-50%, -50%)
    translateX(47px)
    translateY(20px)
    scale(.91)
    rotate(11deg);
}

#home .mf-stack-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* IMAGE CAPTION */

#home .mf-stack-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 35px 18px 20px;

  background: linear-gradient(
    transparent,
    rgba(10, 39, 58, .83)
  );

  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* BOTTOM CONTROLS */

#home .mf-stack-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 510px;
  margin: 0 auto;
}

#home .mf-stack-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  background: #fff;
  border: 1px solid #bdd4e1;
  border-radius: 50%;

  color: #153b52;
  font-size: 22px;
  cursor: pointer;
  transition: all .25s ease;
}

#home .mf-stack-arrow:hover {
  background: #17618a;
  border-color: #17618a;
  color: #fff;
}

#home .mf-stack-progress {
  flex: 1;
  min-width: 0;
  height: 2px;
  background: #dce6eb;
  overflow: hidden;
}

#home .mf-stack-progress-bar {
  width: 0;
  height: 100%;
  background: #17618a;
  transition: width .5s ease;
}

#home .mf-stack-count {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #153b52;
}

/* MOBILE */

@media (max-width: 767px) {

  #home .mf-stack-section {
    padding: 0 !important;
    margin: 0 !important;
  }

  #home .mf-stack-container {
    width: calc(100% - 24px);
  }

  #home .mf-stack-heading {
    margin-bottom: 8px;
  }

  #home .mf-stack-heading h2 {
    font-size: 29px;
  }

  #home .mf-stack-heading p {
    font-size: 14px;
  }

  #home .mf-stack-stage {
    height: 395px;
  }

  #home .mf-stack-card {
    width: 76%;
    height: 315px;
    border-width: 5px;
    border-radius: 28px;
  }

  #home .mf-stack-card[data-pos="0"] {
    transform:
      translate(-50%, -50%)
      translateX(-15px)
      scale(1)
      rotate(-1deg);
  }

  #home .mf-stack-card[data-pos="1"] {
    transform:
      translate(-50%, -50%)
      translateX(4px)
      scale(.96)
      rotate(4deg);
  }

  #home .mf-stack-card[data-pos="2"] {
    transform:
      translate(-50%, -50%)
      translateX(20px)
      scale(.92)
      rotate(8deg);
  }

  #home .mf-stack-card[data-pos="3"] {
    transform:
      translate(-50%, -50%)
      translateX(30px)
      scale(.88)
      rotate(11deg);
  }

  #home .mf-stack-card-caption {
    font-size: 14px;
    padding: 30px 12px 16px;
  }

  #home .mf-stack-controls {
    gap: 10px;
    padding: 0 8px;
  }

  #home .mf-stack-arrow {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }
}

@media (max-width: 380px) {
  #home .mf-stack-stage {
    height: 340px;
  }

  #home .mf-stack-card {
    height: 270px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home .mf-stack-card,
  #home .mf-stack-progress-bar {
    transition: none;
  }
}