/* Import the exact Google font used originally */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

/* Preserve box-sizing and base defaults (safe, non-visual) */
html {
   box-sizing: border-box;
}

*,
*:before,
*:after {
   box-sizing: inherit;
}

/* Set the base font-family so look matches original */
body {
   font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Navbar brand text (rebrand) */
.navbars .brand-text {
   margin-left: 12px;
   font-weight: 600;
   letter-spacing: 0.2px;
   line-height: 1;
   white-space: nowrap;
   color: inherit;
}

@media (max-width: 767px) {
   .navbars .brand-text {
      display: none;
   }
}

/* Keep the main navbar pinned to the top across pages.
   This matches typical -- behavior and should not change visual styling. */
.navbars.w-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
}

/* Prevent fixed navbar from covering the page content.
   We use the navbar's actual height via JS to avoid guessing. */
body {
   padding-top: var(--navbar-height, 0px);
}

/* Elements that were animated by  often had inline transform/opacity styles.
    We provide a simple transition so removing those inline styles (by JS) produces
    a smooth entrance similar to . This is intentionally non-invasive. */
[data-w-id] {
   transition: transform 640ms cubic-bezier(.22, .9, .36, 1), opacity 640ms cubic-bezier(.22, .9, .36, 1);
}

/* --------------------------------------------
   Professional motion system (opt-in)
   - Uses IntersectionObserver in js/app.js to add `.is-inview`
   - Avoids layout shifts (transform/opacity only)
   - Respects prefers-reduced-motion
--------------------------------------------- */

:root {
   --motion-ease-out: cubic-bezier(.22, .9, .36, 1);
   --motion-ease-smooth: cubic-bezier(.2, .8, .2, 1);
   --motion-fast: 180ms;
   --motion-medium: 520ms;
   --motion-slow: 780ms;
}

@media (prefers-reduced-motion: reduce) {
   :root {
      --motion-fast: 1ms;
      --motion-medium: 1ms;
      --motion-slow: 1ms;
   }
}

/* Generic reveal (fade + slight lift) */
.reveal {
   opacity: 0;
   transform: translate3d(0, 14px, 0);
   will-change: transform, opacity;
   transition:
      transform var(--motion-medium) var(--motion-ease-out),
      opacity var(--motion-medium) var(--motion-ease-out);
}

.reveal.is-inview {
   opacity: 1;
   transform: translate3d(0, 0, 0);
}

/* Stagger helper: JS sets transition-delay: var(--reveal-delay) */
.reveal[data-reveal-stagger] {
   transition-delay: var(--reveal-delay, 0ms);
}

/* Subtle reveal variants */
.reveal.reveal--fade {
   transform: none;
}

.reveal.reveal--scale {
   transform: scale(0.985);
}

.reveal.reveal--scale.is-inview {
   transform: scale(1);
}

/* Micro-interactions: keep it subtle and accessible */
.fx-link,
.fx-button,
.fx-card {
   transition:
      transform var(--motion-fast) var(--motion-ease-smooth),
      box-shadow var(--motion-fast) var(--motion-ease-smooth),
      filter var(--motion-fast) var(--motion-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {

   .fx-button:hover,
   .fx-link:hover {
      transform: translate3d(0, -1px, 0);
   }

   .fx-card:hover {
      transform: translate3d(0, -2px, 0);
   }
}

.fx-button:focus-visible,
.fx-link:focus-visible,
.fx-card:focus-within {
   transform: translate3d(0, -1px, 0);
}

/* --------------------------------------------
   Mobile nav open/close animation
   Uses ike `.w--open` class toggled by our JS.
--------------------------------------------- */

@media (max-width: 991px) {
   .nav-menu.w-nav-menu {
      transform-origin: top;
      transform: translate3d(0, -8px, 0);
      opacity: 0;
      pointer-events: none;
      transition:
         transform var(--motion-medium) var(--motion-ease-out),
         opacity var(--motion-medium) var(--motion-ease-out);
   }

   .nav-menu.w-nav-menu.w--open {
      transform: translate3d(0, 0, 0);
      opacity: 1;
      pointer-events: auto;
   }

   /* Animate burger button itself (subtle press/rotate) */
   .menu-button.w-nav-button {
      transition: transform var(--motion-fast) var(--motion-ease-smooth);
      will-change: transform;
   }

   .menu-button.w-nav-button.w--open {
      transform: scale(0.98);
   }
}

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

   .nav-menu.w-nav-menu,
   .menu-button.w-nav-button {
      transition: none !important;
   }
}

/* Basic lightbox modal styles used by our custom JS (kept minimal and scoped) */
.wf-lightbox-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

.wf-lightbox-content {
   max-width: 92vw;
   max-height: 92vh;
}

.wf-lightbox-content img,
.wf-lightbox-content video {
   width: 100%;
   height: auto;
   border-radius: 8px;
}

/* Small utility class for showing the commerce cart container (JS toggles inline display by default) */
.w-commerce-commercecartcontainerwrapper--visible {
   display: block !important;
}

/* --------------------------------------------
   Count-up animation (Webflow digit columns)
   Triggered by JS adding `.is-counting` to `.counting-animation`
--------------------------------------------- */

.counting-animation {
   --count-duration: 1100ms;
}

@media (prefers-reduced-motion: reduce) {
   .counting-animation {
      --count-duration: 1ms;
   }
}

/* Animate any column (both `couting-column` and `couting-column-fixed`) */
.counting-animation .couting-column,
.counting-animation .couting-column-fixed {
   transition: transform var(--count-duration) var(--motion-ease-out);
   will-change: transform;
}

/* When counting starts, slide columns up a bit to simulate rolling */
.counting-animation.is-counting .couting-column.align-top {
   transform: translate3d(0, -72%, 0);
}

.counting-animation.is-counting .couting-column.align-bottom {
   transform: translate3d(0, -64%, 0);
}

/* Fixed column is mostly suffix; keep it subtle */
.counting-animation.is-counting .couting-column-fixed {
   transform: translate3d(0, -10%, 0);
}

/* --------------------------------------------
   Testimonials auto-reveal (horizontal auto-advance)
   - JS adds `wf-testimony-track` to `.testimony-row`
   - Keeps visuals intact (no sizing/spacing changes)
--------------------------------------------- */

.wf-testimony-track {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
}

/* Hide horizontal scrollbar where supported (purely cosmetic) */
.wf-testimony-track {
   scrollbar-width: none;
}

.wf-testimony-track::-webkit-scrollbar {
   width: 0;
   height: 0;
}

.wf-testimony-card {
   scroll-snap-align: start;
   scroll-snap-stop: always;
}

@media (prefers-reduced-motion: reduce) {
   .wf-testimony-track {
      scroll-behavior: auto;
   }
}

/* --------------------------------------------
   Footer vCard image zoom adjustment
   Scales down the image to show more content
--------------------------------------------- */

.footer-vcard-image img {
   transform: scale(0.6);
   transform-origin: center;
}

/* --------------------------------------------
   Hero Section Doctor Image Fix
   Ensures the doctor image is fully visible on
   large screens instead of being zoomed/cropped
--------------------------------------------- */

/* Hero image container adjustments for large screens */
.section-hero.home-v1-hero .image-position.home-v1-hero {
   width: 100%;
   height: 100%;
}

/* Make the hero doctor image fully visible on large screens */
.image-cover.home-hero {
   object-fit: contain;
   object-position: bottom center;
   width: 100%;
   height: 100%;
}

/* For very large screens, ensure the image stays visible and well-positioned */
@media (min-width: 1200px) {
   .image-cover.home-hero {
      object-fit: contain;
      object-position: bottom center;
   }

   .section-hero.home-v1-hero .image-position.home-v1-hero {
      display: flex;
      align-items: flex-end;
      justify-content: center;
   }
}

/* For extra large screens */
@media (min-width: 1600px) {
   .image-cover.home-hero {
      object-fit: contain;
      object-position: bottom center;
      max-height: 100%;
   }
}