*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#fff}
body{font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
.viewport{
  position:relative;width:100vw;height:100vh;overflow:hidden;
  background:#fff;
}
.design-base{
  position:absolute;inset:0;
  background:url("assets/images/reference-design.jpg") center center / 100% 100% no-repeat;
  z-index:1;
  pointer-events:none;
}

/* The card strip is the only part deliberately covered, because it must be a live
   seamless carousel rather than a static screenshot. */
.carousel-zone{
  position:absolute;
  left:0;top:60.0%;width:100%;height:16.1%;
  z-index:5;overflow:hidden;
}
.carousel-mask{
  position:absolute;
  left:0;
  right:0;
  top:10.5%;
  bottom:0;
  background:#e9f8ff;
  z-index:0;
}
.carousel-viewport{
  position:absolute;left:3.85%;right:3.85%;top:7.5%;height:82%;
  overflow:hidden;z-index:2;
}
.carousel-track{
  display:flex;gap:.9vw;align-items:stretch;height:100%;
  width:max-content;will-change:transform;
  transform:translate3d(0,0,0);
}
.focus-card{
  position:relative;
  flex:0 0 14.35vw;width:14.35vw;height:100%;padding:0;border:0;
  border-radius:.65vw;overflow:hidden;background:#fff;
  box-shadow:0 .18vw .5vw rgba(0,0,0,.18);
}
.focus-card img{display:block;width:100%;height:100%;object-fit:cover}

.carousel-arrow{
  position:absolute;top:50%;
  z-index:4;width:2.65vw;height:2.65vw;min-width:30px;min-height:30px;
  border:0;border-radius:50%;background:rgba(255,255,255,.94);
  color:#f05a22;font-size:2.2vw;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 .15vw .5vw rgba(0,0,0,.18);
}
.arrow-left{left:1.45%}.arrow-right{right:1.45%}

.hotspot{
  position:absolute;border:0;background:transparent;color:transparent;
  z-index:8;border-radius:.7vw;outline:none;
}

.hotspot-nav{position:absolute;inset:0;z-index:7}
.nav-home{left:29.1%;top:8.25%;width:7.5%;height:5.45%}
.nav-about{left:37.1%;top:8.25%;width:8.8%;height:5.45%}
.nav-mission{left:46.2%;top:8.25%;width:9.2%;height:5.45%}
.nav-services{left:55.9%;top:8.25%;width:9.7%;height:5.45%}
.nav-news{left:66.1%;top:8.25%;width:9.5%;height:5.45%}
.nav-contact{left:76.0%;top:8.25%;width:8.5%;height:5.45%}
.nav-admin{left:85.1%;top:8.25%;width:8.6%;height:5.45%}

.hero-hotspots{position:absolute;inset:0;z-index:7;pointer-events:none}
.hero-hotspots .interactive-button{pointer-events:auto}
.action-courses{position:absolute!important;right:3.9%;top:14.6%;width:22.3%;height:7.4%;border-radius:3vw}
.action-membership{position:absolute!important;right:3.9%;top:22.7%;width:22.3%;height:7.4%;border-radius:3vw}
.action-doctors{right:3.9%;top:30.9%;width:22.3%;height:7.4%;border-radius:3vw}
.action-products{right:3.9%;top:39.1%;width:22.3%;height:7.4%;border-radius:3vw}
.action-branches{right:3.9%;top:47.2%;width:22.3%;height:7.4%;border-radius:3vw}


.focus-heading{
  position:absolute;
  left:3.9%;
  top:1.0%;
  z-index:3;
  margin:0;
  padding-left:1.0%;
  color:#123f73;
  font-size:clamp(16px,1.48vw,25px);
  line-height:1.15;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:-.01em;
}
.focus-heading::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:.26vw;
  min-width:3px;
  height:1.55em;
  transform:translateY(-50%);
  border-radius:1px;
  background:#f15a24;
}

/* Interaction overlays sit above the supplied visual master without changing its layout. */
.interaction-overlays{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
}
.stat-hotspots,.social-hotspots{position:absolute;inset:0}
.stat-hotspot,.social-hotspot{
  position:absolute;
  display:block;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  outline:none;
  pointer-events:auto;
}
.stat-hotspot{
  top:76.55%;
  height:8.1%;
  border-radius:1.7vw;
}
.stat-1{left:3.0%;width:18.5%}.stat-2{left:22.5%;width:16.9%}.stat-3{left:40.2%;width:17.2%}.stat-4{left:58.4%;width:18.3%}.stat-5{left:77.5%;width:18.0%}
.stat-title-replacement{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(7px,.65vw,12px);padding:0 clamp(12px,1.1vw,20px);border-radius:1.7vw;background:linear-gradient(180deg,rgba(238,249,255,.98),rgba(218,241,253,.98));color:#123f73;font:700 clamp(13px,1.15vw,21px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:.01em;pointer-events:none;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(104,171,210,.22),0 1px 3px rgba(10,43,77,.08);box-sizing:border-box;overflow:hidden}
.stat-title-icon{width:clamp(25px,2.25vw,39px);height:clamp(25px,2.25vw,39px);flex:0 0 auto;fill:#123f73;display:block}
.stat-title-text{display:block;white-space:nowrap;line-height:1.05}
.stat-5:hover .stat-title-replacement,.stat-5.is-hovered .stat-title-replacement{filter:brightness(1.04)}

.social-hotspot{
  top:86.4%;
  width:3.5%;
  height:6.2%;
  border-radius:50%;
}
.social-whatsapp{left:82.4%}.social-instagram{left:86.8%}.social-facebook{left:91.8%}


/* =========================================================
   FINAL GLOBAL BUTTON INTERACTIONS — GLOWING EDGE SYSTEM
   Interaction-only: preserves the approved visual design.
   ========================================================= */
.interactive-button{
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  transform-origin:center center;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    opacity .22s ease;
  will-change:transform,box-shadow,filter;
  -webkit-user-select:none;
  user-select:none;
  position:relative;
}
.interactive-button:focus{outline:none}

/* A moving, masked conic-gradient creates a thin light that travels around
   the perimeter. It is hidden in the normal state, so the approved artwork
   remains unchanged until the pointer enters the control. */
.interactive-button::before{
  content:"";
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:3;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(255,255,255,.28) 325deg,
    rgba(255,255,255,1) 338deg,
    rgba(255,220,140,1) 347deg,
    transparent 358deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.88));
  transform:rotate(0deg);
}

.interactive-button::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:4;
  background:linear-gradient(112deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.06) 47%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,.06) 53%,
    transparent 58%,
    transparent 100%);
  transform:translateX(-135%);
}

.interactive-button.is-hovered{
  transform:translateY(-3px) scale(1.025);
  filter:brightness(1.055);
  box-shadow:0 .50vw 1.10vw rgba(0,0,0,.26),0 0 1.05vw rgba(70,155,255,.28);
  z-index:50;
}
.interactive-button.is-hovered::before{
  opacity:1;
  animation:glowingEdgeSpin 1.35s linear infinite;
}
.interactive-button.is-hovered::after{
  opacity:.45;
  animation:buttonShine .62s ease-out 1;
}
.interactive-button.is-pressed{
  transform:translateY(1px) scale(.97);
  filter:brightness(1.02);
  box-shadow:0 .12vw .42vw rgba(0,0,0,.18);
  transition:transform .08s ease,box-shadow .08s ease,filter .08s ease;
}
.interactive-button.is-pressed::before{
  opacity:1;
  animation-duration:.72s;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9));
}
.interactive-button.is-pressed::after{opacity:0}

/* Warm glow for the orange navigation hotspots. */
.hotspot-nav .interactive-button::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(255,185,75,.18) 325deg,
    rgba(255,255,255,1) 338deg,
    rgba(255,173,45,.98) 347deg,
    transparent 358deg 360deg
  );
  filter:drop-shadow(0 0 3px rgba(255,158,45,.82));
}
.hotspot-nav .interactive-button.is-hovered{
  box-shadow:inset 0 0 0 .10vw rgba(255,255,255,.38),
             0 .45vw 1vw rgba(0,0,0,.25),
             0 0 .9vw rgba(255,145,45,.34);
}

/* Cool blue/cyan edge for the five right-side action buttons. */
.hero-hotspots .interactive-button::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(90,205,255,.20) 325deg,
    rgba(255,255,255,1) 338deg,
    rgba(70,165,255,1) 347deg,
    transparent 358deg 360deg
  );
  filter:drop-shadow(0 0 4px rgba(45,165,255,.9));
}
.hero-hotspots .interactive-button.is-hovered{
  box-shadow:inset 0 0 0 .10vw rgba(255,255,255,.35),
             0 .45vw 1vw rgba(0,45,180,.34),
             0 0 1vw rgba(25,145,255,.48);
  filter:brightness(1.10);
}

/* Information-card hotspots use the same moving edge while retaining their
   transparent overlay behavior over the supplied master artwork. */
.stat-hotspot::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(115,215,255,.16) 325deg,
    rgba(255,255,255,.95) 338deg,
    rgba(70,165,255,.9) 347deg,
    transparent 358deg 360deg
  );
  filter:drop-shadow(0 0 3px rgba(55,155,255,.62));
}
.stat-hotspot.is-hovered{
  background:rgba(255,255,255,.025);
  box-shadow:0 .42vw .95vw rgba(0,45,100,.27),0 0 .7vw rgba(55,150,255,.25);
}

/* Focus cards keep their carousel behavior; only the temporary edge effect and
   existing tiny image response are added. */
.focus-card::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(100,215,255,.14) 325deg,
    rgba(255,255,255,.92) 338deg,
    rgba(65,160,255,.88) 347deg,
    transparent 358deg 360deg
  );
  filter:drop-shadow(0 0 3px rgba(55,150,255,.58));
}
.focus-card.is-hovered{
  filter:brightness(1.035);
  box-shadow:0 .45vw 1vw rgba(0,0,0,.28),0 0 .75vw rgba(55,150,255,.22);
}
.focus-card.is-hovered img{transform:scale(1.012)}
.focus-card img{transition:transform .22s ease;transform-origin:center}

/* Social controls are circular, so the same perimeter system follows their
   inherited border-radius instead of creating a rectangular outline. */
.social-hotspot::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(255,255,255,.22) 325deg,
    rgba(255,255,255,1) 338deg,
    rgba(120,220,255,.95) 347deg,
    transparent 358deg 360deg
  );
  filter:drop-shadow(0 0 4px rgba(255,255,255,.78));
}
.social-hotspot.is-hovered{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 .45vw 1vw rgba(0,0,0,.30),0 0 .9vw rgba(255,255,255,.30);
  filter:brightness(1.05);
}
.social-hotspot.is-pressed{
  transform:translateY(1px) scale(.95);
}

/* Carousel arrows retain their centered vertical anchor. */
.carousel-arrow::before{
  background:conic-gradient(
    from 0deg,
    transparent 0deg 315deg,
    rgba(255,185,85,.16) 325deg,
    rgba(255,255,255,.98) 338deg,
    rgba(245,110,45,.92) 347deg,
    transparent 358deg 360deg
  );
  filter:drop-shadow(0 0 3px rgba(245,105,45,.58));
}
.carousel-arrow.is-hovered{
  transform:translateY(-50%) scale(1.04);
  filter:brightness(1.06);
  box-shadow:0 .42vw .95vw rgba(0,0,0,.25),0 0 .7vw rgba(255,120,55,.22);
}
.carousel-arrow.is-pressed{
  transform:translateY(-50%) scale(.96);
}

.interactive-button:focus-visible{
  outline:.18vw solid rgba(255,255,255,.95);
  outline-offset:.12vw;
}

@keyframes glowingEdgeSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes buttonShine{
  0%{transform:translateX(-135%)}
  100%{transform:translateX(135%)}
}

@media (prefers-reduced-motion:reduce){
  .interactive-button,
  .focus-card img{transition:none}
  .interactive-button.is-hovered::before{animation:none}
  .interactive-button.is-hovered::after{animation:none;opacity:0}
}

@media (max-aspect-ratio: 1.6/1){
  .focus-card{flex-basis:14.2vw;width:14.2vw}
}
@media (prefers-reduced-motion:reduce){
  .interactive-button{transition:none}
}


/* PATCH: INFORMATION-CARD NAVIGATION HITBOX
   Restore the four information-card links to absolute positioning.
   The global .interactive-button rule otherwise overrides their hotspot placement. */
.stat-hotspot.interactive-button{position:absolute;}

/* PATCH: ABOUT US NAVIGATION HITBOX
   Restore the existing About Us hotspot to absolute positioning.
   The generic interactive-button rule otherwise overrides .hotspot positioning. */
.nav-about.interactive-button{position:absolute;}

/* =========================================================
   PATCH: STATIC BUTTONS — NO MOTION / NO BUTTON ANIMATION
   Preserves existing button dimensions, placement, typography,
   colors and layout. Only interaction motion/effects are disabled.
   ========================================================= */
.interactive-button,
.interactive-button:hover,
.interactive-button:active,
.interactive-button:focus,
.interactive-button:focus-visible,
.interactive-button.is-hovered,
.interactive-button.is-pressed{
  transition:none !important;
  animation:none !important;
  transform:none !important;
  filter:none !important;
  will-change:auto !important;
}

.interactive-button::before,
.interactive-button::after,
.interactive-button:hover::before,
.interactive-button:hover::after,
.interactive-button.is-hovered::before,
.interactive-button.is-hovered::after,
.interactive-button.is-pressed::before,
.interactive-button.is-pressed::after{
  animation:none !important;
  opacity:0 !important;
  transform:none !important;
  transition:none !important;
}

.hotspot-nav .interactive-button:hover,
.hotspot-nav .interactive-button.is-hovered,
.hero-hotspots .interactive-button:hover,
.hero-hotspots .interactive-button.is-hovered,
.stat-hotspot:hover,
.stat-hotspot.is-hovered,
.social-hotspot:hover,
.social-hotspot.is-hovered,
.carousel-arrow:hover,
.carousel-arrow.is-hovered{
  transform:none !important;
  animation:none !important;
  transition:none !important;
  filter:none !important;
}

/* =========================================================
   FINAL ABOUT US NAVIGATION FIX
   The homepage artwork is a full-screen visual master. The
   About Us text is part of that artwork, so this transparent
   link intentionally uses a generous invisible hit area over
   the visible label. No visual styling is changed.
   ========================================================= */
.nav-about.interactive-button {
  position:absolute !important;
  left:36.0% !important;
  top:7.0% !important;
  width:11.5% !important;
  height:8.0% !important;
  z-index:20 !important;
  cursor:pointer !important;
}

/* =========================================================
   FINAL MEMBERSHIP NAVIGATION FIX
   Restore the Membership hero hotspot as an absolute link. The
   generic .interactive-button rule otherwise changes its position
   and prevents the visible Membership button from receiving the click.
   ========================================================= */
.action-membership.interactive-button {
  position:absolute !important;
  right:3.9% !important;
  top:22.7% !important;
  width:22.3% !important;
  height:7.4% !important;
  z-index:20 !important;
  cursor:pointer !important;
}

/* =========================================================
   FINAL OUR PRODUCTS NAVIGATION FIX
   Restore the Products hero hotspot as an absolute link so the
   existing global .interactive-button rule cannot move the click area.
   The approved homepage visual design is unchanged.
   ========================================================= */
.action-products.interactive-button {
  position:absolute !important;
  right:3.9% !important;
  top:39.1% !important;
  width:22.3% !important;
  height:7.4% !important;
  z-index:20 !important;
  cursor:pointer !important;
}

/* =========================================================
   FINAL OUR MISSION NAVIGATION FIX
   Keep the existing visual design unchanged. The generic
   .interactive-button rule sets position:relative, so this
   restores the Mission hotspot as an absolute navigation link
   over the existing visible OUR MISSION label.
   ========================================================= */
.nav-mission.interactive-button {
  position:absolute !important;
  left:46.2% !important;
  top:8.25% !important;
  width:9.2% !important;
  height:5.45% !important;
  z-index:20 !important;
  cursor:pointer !important;
}


/* =========================================================
   FINAL OUR SERVICES NAVIGATION FIX
   Preserve the existing homepage artwork and place the real
   services link over the existing visible navigation label.
   ========================================================= */
.nav-services.interactive-button {
  position:absolute !important;
  left:55.9% !important;
  top:8.25% !important;
  width:9.7% !important;
  height:5.45% !important;
  z-index:20 !important;
  cursor:pointer !important;
}

/* =========================================================
   FINAL NEWS & ADMIN NAVIGATION FIX
   Keep the approved homepage artwork unchanged. These real
   links use the same invisible hotspot approach as the completed
   About Us / Mission / Services navigation.
   ========================================================= */
.nav-news.interactive-button {
  position:absolute !important; left:66.1% !important; top:8.25% !important;
  width:9.5% !important; height:5.45% !important; z-index:20 !important; cursor:pointer !important;
}
.nav-admin.interactive-button {
  position:absolute !important; left:85.1% !important; top:8.25% !important;
  width:8.6% !important; height:5.45% !important; z-index:20 !important; cursor:pointer !important;
}

/* =========================================================
   FINAL STEP 1 CLICK-HITBOX FIX
   Keep the approved homepage artwork unchanged. These rules
   place the transparent links above the artwork at the exact
   existing button/icon areas.
   ========================================================= */
.action-doctors.interactive-button,
.action-branches.interactive-button {
  position:absolute !important;
  right:3.9% !important;
  width:22.3% !important;
  height:7.4% !important;
  z-index:20 !important;
  cursor:pointer !important;
}
.action-doctors.interactive-button { top:30.9% !important; }
.action-branches.interactive-button { top:47.2% !important; }

.nav-contact.interactive-button {
  position:absolute !important;
  left:76.0% !important;
  top:8.25% !important;
  width:8.5% !important;
  height:5.45% !important;
  z-index:20 !important;
  cursor:pointer !important;
}

.stat-1.interactive-button,
.social-hotspot.interactive-button {
  z-index:20 !important;
  cursor:pointer !important;
}
.social-hotspot.interactive-button {
  position:absolute !important;
  top:86.4% !important;
  width:3.5% !important;
  height:6.2% !important;
}
.social-whatsapp.interactive-button { left:82.4% !important; }
.social-instagram.interactive-button { left:86.8% !important; }
.social-facebook.interactive-button { left:91.8% !important; }

/* Make the transparent hotspot itself receive the click; no visual change. */
.hero-hotspots .action-doctors,
.hero-hotspots .action-branches,
.interaction-overlays .social-hotspot,
.interaction-overlays .stat-1 {
  pointer-events:auto !important;
}