:root{
    --wf-bg:#ffffff;
    --wf-line:#8a8a8a;
    --wf-line-light:#c9c9c9;
    --wf-fill:#e4e4e4;
    --wf-fill-dark:#cfcfcf;
    --wf-text:#4d4d4d;
    --wf-text-light:#8a8a8a;
    --wf-accent:#9a9a9a;
    --radius:2px;
  }
  *{box-sizing:border-box;}

  html{
  scroll-behavior: smooth;
  }

  html,body{margin:0;padding:0;}

  /* ===== CUSTOM SCROLLBAR ===== */

/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: #0091D1 #f2f2f2;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: #0091D1;
}
::-webkit-scrollbar-thumb{
  background-color: #37465c;
  border-radius: 50px;
  border: 2px solid #f2f2f2; /* creates padding so thumb looks thinner/rounded */
  transition: background-color .2s ease;
}
::-webkit-scrollbar-thumb:hover{
  background-color: #000;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ===== PAGE LOADER ===== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.page-loader-panel {
  position: absolute;
  inset: 0;

  height: 100vh;
  width: 100%;

  background-color: #f2f2f2;

  transform: translateY(0%);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);

  pointer-events: auto;

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

.page-loader.is-loaded .page-loader-panel {
  transform: translateY(-100%);
}

.page-loader.is-loaded {
  pointer-events: none;
}


/* ===== LOADER CONTENT ===== */

.page-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  z-index: 334;
}


/* ===== LOGO ===== */

.page-loader-logo {
  color: #0062B0 !important;

  font-weight: 600 !important;
  font-size: 1rem !important;

  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity .5s ease .2s,
    transform .5s ease .2s;

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

  gap: 20px;
}

.page-loader.is-visible .page-loader-logo {
  opacity: 1;
  transform: translateY(0);
}


/* ===== PROGRESS BAR ===== */


.loader-progress {
  width: 240px;
  height: 4px;
  margin-top: 32px;

  background: rgba(0, 98, 176, 0.10);

  border-radius: 100px;
  overflow: hidden;

  box-shadow: inset 0 0 0 1px rgba(0, 98, 176, 0.05);
}

.loader-progress-bar {
  width: 0%;
  height: 100%;

  background: linear-gradient(
    90deg,
    #0062B0 0%,
    #0091D1 55%,
    #21B5E8 100%
  );
   border-radius: 100px;

  box-shadow:
    0 0 8px rgba(0, 145, 209, 0.35),
    0 0 16px rgba(0, 145, 209, 0.15);

  transition: width .3s cubic-bezier(.16, 1, .3, 1);
}


/* ===== PROGRESS NUMBER ===== */
.loader-progress-number {
  margin-top: 12px;

  color: #0062B0;

  font-family: "Libre Franklin", sans-serif;
  font-size: 11px;
  font-weight: 600;

  letter-spacing: .12em;

  opacity: .75;
}


/* ===== REDUCED MOTION ===== */

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

  .page-loader-panel {
    transition: none;
  }

  .page-loader.is-loaded .page-loader-panel {
    transform: translateY(-100%);
  }

}

  body{
    font-family:Libre Franklin, sans-serif;
    color:var(--wf-text);
    background:var(--wf-bg);
    /* background-color: #eff1f5; */
    line-height:1.4;
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
  a{color:inherit;text-decoration:none;}
 
  .wrap{margin:0 auto;}

  .smallScreen {
    display:none;
  }
  .ph{
    /* background:repeating-linear-gradient(45deg, var(--wf-fill), var(--wf-fill) 10px, #ececec 10px, #ececec 20px); */
      
   
    display:flex;align-items:center;justify-content:center;
    color:var(--wf-text-light);
    font-size:11px;
    letter-spacing:.05em;
    text-transform:uppercase;
    min-height:120px;
  }



  .ph-hero {
 background-image:url('./Images/AsimHero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* animation: heroBreathe 8s ease-in-out infinite; */
}
/* 
@keyframes heroBreathe{
  0%, 100%{ background-size: 100%; }
  50%{ background-size: 110%; }
}

@media (prefers-reduced-motion: reduce){
  .ph-hero{ animation: none; }
} */

  .footer-ph {
      background-image:url('./Images/AsimAmer2.jpg');

       background-size:cover;
    background-position:top;
    background-repeat:no-repeat;
  }

  /* annotation tag for wireframe callouts */
  .tag{
    display:inline-block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#fff;
    background:var(--wf-accent);
    padding:2px 6px;
    border-radius:2px;
    margin-bottom:6px;
  }

  h1,h2,h3,h4{
    font-weight:600;
    color:#333;
    margin:0 0 8px;
  }
  h1{    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: clamp(87px,6vw, 115px);
    font-weight: 300;
    line-height:110%;
  }
  h2{font-size:26px;}
  h3{
    text-transform: none;
    overflow-wrap: normal;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(1.9vw, 33px);
    font-weight: 500;
    line-height: 130%;
  }
  h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--wf-text-light);}
  p{margin:0 0 12px;    color: #616161;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 170%;}

  section{    padding-top: 2rem;
    padding-bottom: 2rem;max-width: 1920px; margin: 0 auto; overflow: hidden; }

  /* buttons */
  .btn{
    display:inline-block;
    border:1px solid var(--wf-line);
    padding:10px 20px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    background:#fff;
    cursor:pointer;
  }
  button {
    cursor: pointer;
  }
  .btn.solid{background:var(--wf-fill-dark);border-color:var(--wf-line);}
  .btn.ghost{background:transparent;}

  /* ===== HEADER ===== */
  header{
    /* border-bottom:1px dashed var(--wf-line-light); */
    position:sticky;top:0;background:transparent;z-index:50;
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem;
    background: #f2f2f2;
    border-radius: 8px;
    /* border-bottom-right-radius: 8px;
     border-bottom-left-radius: 8px; */
    margin-top:1rem;
  }
  .logo-box{
    /* border:1px solid var(--wf-line); */
    padding:8px 14px;
    font-size:12px;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .nav-links{display:flex;gap:28px;color:#313131;font-size: .9rem;
    line-height: 120%;list-style:none;margin:0;padding:0;text-transform:uppercase;letter-spacing:.04em;}
  /* .nav-links a{border-bottom:1px dashed transparent;} */
  .nav-links a:hover{}
  .nav-right{display:flex;align-items:center;gap:16px;}
  .burger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:8px;}
  .burger span{width:18px;height:2px;background:var(--wf-text);display:block;}


  .nav-links a.nav-link-wrap{
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.1rem;
}

.BookNow {
  color:#313131 !important; font-weight: 600 !important;
}
.link-inner-text,
.link-inner-text-hover{
  display: block;
  text-transform: uppercase;
  font-size: .9rem;
  line-height: 120%;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.65,0,.35,1);
}

.link-inner-text{
  color: #313131;
  font-weight: 500;
}

.link-inner-text-hover{
  color: #616161;
  position: absolute;
  top: 100%;
  left: 0;
}

/* the magic: move BOTH children together by animating the parent */
.nav-links a.nav-link-wrap:hover .link-inner-text,
.nav-links a.nav-link-wrap:hover .link-inner-text-hover{
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce){
  .link-inner-text,
  .link-inner-text-hover{ transition:none; }
}

  /* ===== HERO ===== */
  .hero{padding-top:0;}
  .hero-media{
    position:relative;
    width:100%;
    height:520px;
    overflow:hidden;
    border-radius:8px;
    margin:2rem 0;
    min-height: 85vh;

  }
  .hero-media .ph{
    position:absolute;inset:0;
    height:100%;width:100%;
  }
  .hero-content{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    padding:3rem 60px;
    z-index:2;
  }
  .hero-content h1{color:#333;}
  .hero-content p{
    max-width: 61%;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
  margin-bottom: 2rem;}

  .services-content p {
    max-width: none !important;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
  margin-bottom: 2rem;
  }


  .eyebrow{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--wf-text-light);margin-bottom:10px;}

  .section-eyebrow {
        text-align: left;
    text-transform: uppercase;
    font-family: Libre Franklin, sans-serif;
    font-weight: 300;
    line-height: 130%;
    text-decoration: none;
    color: #616185;
  }
  /* ===== SERVICES (bento grid) ===== */
  .services-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;
    column-gap:16px;
    row-gap:16px;
  }

  /* shared card base */
  .card,
  .card-square,
  .card-button{
    border-radius:8px;
    display:flex;
    flex-flow:column;
    justify-content:space-between;
    align-items:flex-start;
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    box-sizing:border-box;
  }

  .card-color-light-blue {
        aspect-ratio: 1;
            max-height: 407px;
    background-color: #eff1f5;
    color: #313131;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: rgba(10, 17, 40, 0.16) 0px 20px 40px -12px;
    border: 1px solid #0a11280f;
  }
   .card-color-light-blue h3 {
    
    color: #313131 !important;
  
  }

 

  .card-color-dark-blue {
        max-height: 601px;
    aspect-ratio: 1;
    background-color: #0062B0;
    color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: rgba(10, 17, 40, 0.16) 0px 20px 40px -28px;
    border: 1px solid #0a11280f;
  }

   .card-services {
     max-height: 407px;
  }
  
  .subvention-video-cta a {
    display:flex; justify-content: center; align-items: center; gap:10px;
  }
    .card-color-dark-blue h3 {
    
    color: #f9f9f9 !important;
  
  }

     .card-color-dark-blue p {
    
    color: #f2f2f2 !important;
  
  }


  /* intro text card — spans 2 columns, row 1 */
  .card{
    grid-area: span 1 / span 2 / span 1 / span 2;
    /* border:1px solid var(--wf-line-light);
    background:#f6f6f6; */
    padding:28px;
  }

  .card-middle-aligment {
    justify-content: center;
  }
  .card .eyebrow{margin-bottom:14px;}
  .card h2{
        text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(4vw,69px);
    font-weight: 500;
    line-height: 120%;
  }
  .card p{margin:0;max-width:420px;}

  /* individual service squares — auto placed */
  .card-square{
    aspect-ratio:1;
    background-color: #eff1f5;
    padding:20px;
  }
  .num{
    text-align: left;
    text-transform: uppercase;
    font-size: 2.3vw;
    line-height: 100%;
    overflow: visible;
    color:var(--wf-text-light);
  }
  .white-num {
    color :#f9f9f9;
  }

  .subventionImage {
  aspect-ratio: auto;
    object-fit: cover;
    width: 90%;
    height: auto;
    vertical-align: middle;
}
  .skill-card p{    
    max-width: none !important;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;}

     .skill-card-more p{    
    max-width: none !important;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;}
  .card-square h3{margin:0;color:#333;}

  /* CTA button card — spans 2 columns, row 2 */
  .card-button{
    grid-area: span 1 / span 2 / span 1 / span 2;
   
    padding:28px;
    text-decoration:none;
    cursor:pointer;
  }
  .work-card p{
    max-width: none !important;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;
  }
  .card-button .cb-label{
    font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#333;
  }
  .card-button .cb-arrow{
    align-self:flex-end;
    border:1px solid var(--wf-line);
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    border-radius:50%;
  }

  @media (max-width:900px){
    .services-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
    .card{grid-area: span 1 / span 2 / span 1 / span 2;}
    .card-button{grid-area: span 1 / span 2 / span 1 / span 2;}
     .subvention-grid {
          grid-template-columns: 1fr;
    }
  }
  @media (max-width:720px){
    .services-grid{grid-template-columns:1fr;}
    .card,.card-button{grid-area: span 1 / span 1 / span 1 / span 1;}
    .card-square{aspect-ratio:auto;min-height:140px;}
   
  }

  /* ===== SERVICES LIST PAGE (max 2 cards per row) ===== */
  .services-list-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    column-gap:16px;
    row-gap:16px;
    overflow: hidden;
  }
  @media (max-width:720px){
    .services-list-grid{grid-template-columns:1fr;}
    .services-list-grid .card-square{aspect-ratio:auto;         max-height: 550px;}
  }

  /* ===== CLINIC ===== */
  .clinic-text{margin-bottom:32px;}

  .clinic-text p {
    max-width: none !important;
    color: #616161;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;
  }

  .clinic-text h2 {
         text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(4vw, 69px);
    font-weight: 500;
    line-height: 120%;
  }
  .home-clinic-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
    column-gap:16px;
    row-gap:16px;
    overflow: hidden;
  }

     .subvention-grid {
       display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
    column-gap:16px;
    row-gap:16px;
    overflow: hidden;
     }
  .image-cover-parallax{
    border-radius:8px;
    width:100%;
    height:100%;
    min-height:460px;
    overflow:hidden;
    position:relative;
      
  }
  .home-clinic-grid .card-button{min-height:360px;grid-area:span 1 / span 1 / span 1 / span 1; background-color: #eff1f5;}
  /* ===== TEAM ===== */
  .team-header-row{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:24px;margin-bottom:32px;
  }

  .our-team-card {
      max-height: auto;
  }
  .card-info-height {
     max-height: 456px;
  }
  .team-text-holder {
        height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
  }

  .team-text-holder p {
    max-width: none !important;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;
  }

  .slider-nav{display:flex;gap:10px;flex-shrink:0;}
  .slider-btn{
        background-color: #0091D1;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    display: flex;
    color: #fff;
        border: 2px solid #0091D1;
         transition: opacity 0.3s ease;
    /* inset: -16% 60px auto auto; */
    /* transform: rotate(-135deg); */
  }
  /* .slider-btn:hover{background:var(--wf-fill);} */


  .slider-btn:hover {
  opacity: 0.85;
}

   .our-team-text h2 {
         text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(4vw, 69px);
    font-weight: 500;
    line-height: 120%;
  }

   .our-team-text p {
        max-width: 70%;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;
  }
  
  .team-main-grid{
    overflow: hidden;
    display:grid;
    grid-template-columns: 1fr .75fr .75fr 1fr;
    grid-template-rows:auto;
    grid-auto-columns:1fr;
    column-gap:16px;
    row-gap:16px;
    min-height:25rem;
    position:relative;
  }

  /* static "about us" info card — column 1 only */
  .team-about-card{
    grid-area: span 1 / span 1 / span 1 / span 1;
    position:static;
    
    padding:2rem;
  }
  .team-about-card h3{margin-bottom:10px;}
  .team-about-card .cb-arrow-inline{
    margin-top:auto;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#333;
  }

  .offer-percent{
  display: inline-block;
  animation: percentWiggle 2.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes percentWiggle{
  0%, 100%{ transform: rotate(0deg) scale(1); }
  10%{ transform: rotate(-12deg) scale(1.1); }
  20%{ transform: rotate(10deg) scale(1.1); }
  30%{ transform: rotate(-8deg) scale(1.05); }
  40%{ transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .offer-percent{ animation: none; }
}

  /* slider holder — spans remaining 3 columns */
  .team-slider-holder{
    grid-area: span 1 / span 3 / span 1 / span 3;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    /* background:#ddd; */
  }
  .slider{position:relative;height:100%;text-align:left;}
  .slide{
    position:absolute;inset:0;
    display:grid;
    grid-template-columns: 2fr 1fr;
    column-gap:16px;
    opacity:0;
    transform:translateX(24px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none;
  }
  .slide.active{opacity:1;transform:translateX(0);pointer-events:auto;position:relative;height:100%;}
  .slide-image{height:100%;}
  .slide-info{
    grid-area: span 1 / span 1 / span 1 / span 1;
    border-radius:8px;
    background:#e6edf4; /* stand-in for Light Blue 200 */
    height:100%;
    padding:24px;
    box-shadow: rgba(10, 17, 40, 0.16) 0px 20px 40px -28px;
    border: 1px solid #0a11280f;
  }
  .slide-info h3{margin:0 0 8px;}
  .slide-info p{    max-width: none !important;
    color: #747474;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 2rem;}

  /* ===== OUR WORK ===== */
  #our-work, #team {
    overflow: hidden;
  }
  .our-work-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;}
  .work-row{margin-bottom:16px;}

  .our-work-text h2{
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(4vw, 69px);
    font-weight: 500;
    line-height: 120%;
  }
  .work-squares-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns:1fr;
  column-gap:16px;
  row-gap:16px;
}

 .our-work h3{margin:0;color: #f9f9f9;}

  .insight-card .ph{height:180px;margin-bottom:12px;}

  /* ===== FAQ ===== */
  .faq-item{border-bottom:1px solid #d0d0d0; margin-bottom: 1rem;}
  .faq-items{
     background-color:#f1efea;
     padding: 4rem;
     border-radius: 8px;
  }
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 0;cursor:pointer;font-size:15px;color:#333;
  }
  .faq-q .arrow{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:transform .15s ease;}
  .faq-item.open .arrow{transform:rotate(90deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;font-size:13px;}
  .faq-item.open .faq-a{max-height:200px;padding-bottom:18px;}

  .faq h2 {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(4vw, 69px);
    font-weight: 500;
    line-height: 120%;
  }

  .faq-deco {
    font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--wf-text-light);margin-bottom:10px; padding:0 2rem 2rem 0;
   
  }
  .faq-deco span {
    color:#222;
    padding:0 1.5rem 1.5rem 0;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.3px;
  }

  .faq-a{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq-a-inner{
  overflow:hidden;
  min-height:0;
}
.faq-item.open .faq-a{
  grid-template-rows: 1fr;
}
.faq-a-inner p{
  padding-bottom:18px;
}

@media (prefers-reduced-motion: reduce){
  .faq-a,
  .faq-q .arrow{ transition:none; }
}


        .sct-section { background: #eff1f5; overflow: hidden; position: relative; max-height: 500px;     padding: 8rem 5%;
    border-radius: 8px; }
        .sct-row { max-width: 1512px; margin: 0 auto; display: flex; flex-flow: row; justify-content: space-between; gap: 80px; }
        .sct-col-1 { flex: 0 0 220px; display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; padding-top: 4px; opacity: 0; transform: translateX(-60px); transition: opacity .9s cubic-bezier(.16,1,.3,1) .05s, transform .9s cubic-bezier(.16,1,.3,1) .05s; }
        .sct-col-1.sct-animate { opacity: 1; transform: translateX(0); }
        .sct-label { display: flex; align-items: center; gap: 10px; font-size: .8rem; letter-spacing: .05em; font-weight: 600;
    color: #747474;}
        .sct-label::before { content: '•';  color: #747474; font-size: 1.1rem; }
        .sct-col-2 { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(50px); transition: opacity .9s cubic-bezier(.16,1,.3,1) .25s, transform .9s cubic-bezier(.16,1,.3,1) .25s; max-width: 976px; }
        .sct-col-2.sct-animate { opacity: 1; transform: translateY(0); }
        .sct-testimonial-wrapper { position: relative; min-height: 220px; overflow: hidden; }
        .sct-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(60px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); pointer-events: none; }
        .sct-slide.sct-active { opacity: 1; transform: translateX(0); pointer-events: auto; position: relative; }
        .sct-slide.sct-exit { opacity: 0; transform: translateX(-60px); }
        .sct-blockquote { margin: 0 0 36px; font-size: min(2.2vw, 35px); font-weight: 500; line-height: 1.2; color: #333;}
        .sct-author { display: flex; align-items: center; gap: 16px; }
        .sct-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 3px solid rgb(0, 98, 176);    background: rgb(0, 98, 176); flex-shrink: 0; }
        .sct-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .sct-author-info .sct-author-name { font-size: .92rem; font-weight: 500; color: #333; line-height: 1.3; }
        .sct-author-info .sct-author-role {    font-size: .7rem;
        color: #747474;
    margin-top: 2px;
    font-weight: 600; }
        .sct-dots { display: flex; gap: 8px; margin-top: 32px; }
        .sct-dot { width: 28px; height: 3px; border-radius: 2px; background: rgb(36 36 36 / 20%); cursor: pointer; overflow: hidden; position: relative; }
        .sct-dot-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0;  border-radius: 2px; background: rgba(0,98,176,.75);}
        .sct-dot.sct-dot-active .sct-dot-fill { animation: sct-fill 10s linear forwards; }
        @keyframes sct-fill { from{width:0%} to{width:100%} }
        @media (max-width: 900px) { .sct-row { flex-direction: column; gap: 32px; align-items: flex-start; } .sct-col-1 { flex: 0 0 auto; transform: translateY(40px) !important; } .sct-col-1.sct-animate { transform: translateY(0) !important; } }
      
  .eyebrow{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--wf-text-light);margin-bottom:10px;}

  /* ===== PRICING ===== */
  .pricing h2{
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
    font-family: Libre Franklin, sans-serif;
    font-size: min(4vw, 69px);
    font-weight: 500;
    line-height: 120%;
  }
  .pricing-intro{margin-bottom:40px; padding-left: 1rem;}
  .pricing-intro p{
    max-width:640px;
    color:#747474;
    font-size:1rem;
    font-weight:400;
    line-height:170%;
    margin-bottom:2rem;
  }
  .pricing-box{
    background-color:#f1efea;
    padding:4.5rem 5rem;
    border-radius:8px;
  }
  .pricing-category{
    padding-top:3rem;
    padding-bottom:3rem;
  }
  .pricing-category:first-child{padding-top:0;}
  .pricing-category:last-child{padding-bottom:0;}
  .pricing-category + .pricing-category{
    border-top:1px solid #dcd8cf;
  }
  .pricing-category h4{
    position:relative;
    color:#222;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:28px;
    padding-bottom:16px;
  }
  .pricing-category h4::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:44px;
    height:2px;
    background:#37465c;
  }
  .pricing-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:18px 4px;
    border-bottom:1px solid #dcd8cf;
    transition:background-color .15s ease;
  }
  .pricing-row:hover{background-color:#e9e5da;}
  .pricing-category .pricing-row:last-child{border-bottom:none;}
  .pricing-row .service-name{
    color:#333;
    font-size:15px;
    line-height:150%;
  }
  .pricing-row .service-note{
    display:block;
    color:#8a8a8a;
    font-size:12px;
    margin-top:4px;
  }
  .pricing-row .price{
    color:#37465c;
    font-weight:700;
    font-size:16px;
    white-space:nowrap;
    min-width:70px;
    text-align:right;
  }
  @media (max-width:720px){
    .pricing-box{padding:2.5rem 1.5rem;}
    .pricing-category{padding-top:2rem;padding-bottom:2rem;}
    .pricing-row{padding:14px 4px;}
  }

  /* ===== FOOTER REVEAL EFFECT ===== */
  .page-wrap{
    position:relative;
    z-index:1;
    background:var(--wf-bg);
  }
  #footerSpacer{
    width:100%;
  }
  footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
    padding-left:2.5rem;
    padding-right:2.5rem;
  }

  .hero-btn {
       /* background-color: rgb(49, 49, 49); */
       background-color: #0091D1;
    border-radius: 50px;
    color: var(--white-700-body-text);
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    padding: .8rem 2rem;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    color: #fff;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    transition: opacity 0.3s ease, color .3s ease, transform .25s ease, box-shadow .3s ease;
  }

  .hero-btn:hover {
  opacity: 0.85s;
}


.skills-btn {
  /* background-color: rgb(49, 49, 49); */
  background-color: #0091D1;
  border-radius: 50px;
  color: var(--white-700-body-text);
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 500;
  padding: .8rem 2rem;
  font-family: Libre Franklin, sans-serif;
  font-size: 1rem;
  color: #fff;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  transition: background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .3s ease;
}

.skills-btn:hover, .hero-btn:hover, .team-btn:hover, .services-btn:hover {
  background-color: #fff;
  font-weight: 500;
  color: #313131;
  transform: translateY(-3px);
  box-shadow: rgba(10, 17, 40, 0.25) 0px 14px 28px -10px;
}

@media (prefers-reduced-motion: reduce) {
  .skills-btn { transition: none; }
}

  .services-btn {
    position:relative;
       background-color: #0091D1;
    border-radius: 50px;
    color: var(--white-700-body-text);
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    padding: .8rem 2rem;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    color: #fff;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    transition: background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .3s ease;
  }

  .team-btn {
     background-color: #f2f2f2;
    border-radius: 50px;
    color: var(--white-700-body-text);
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    padding: .8rem 2rem;
    font-family: Libre Franklin, sans-serif;
    font-size: 1rem;
    color:  rgb(49, 49, 49);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
     transition: background-color .3s ease, color .3s ease, transform .25s ease, box-shadow .3s ease;
  
  }

.cursor-dot,
.cursor-ring{
  position:fixed;
  top:0;
  left:0;
  border-radius:50%;
  pointer-events:none; 
  z-index:9999;
  transform:translate(-50%,-50%);
}
.cursor-dot{
  width:8px;
  height:8px;
  background:#37465c;
}
.cursor-ring{
  width:36px;
  height:36px;
  border:2px solid #37465c;
  transition:width .2s ease, height .2s ease, opacity .2s ease;
}
 
.cursor-ring.hovering{
  width:52px;
  height:52px;
  opacity:.6;
}

/*Services file */
  .services-h2 {
    text-transform: uppercase;
    margin-top: 0;
    /* margin-bottom: 0; */
    margin-bottom: 1rem;
    font-family: Libre Franklin, sans-serif;
    font-size: 6.5vw !important;
    font-weight: 400 !important;
    line-height: 110% !important;
    text-align: center;
  }

  .services-h3 {
        font-size: 2.3vw;
    font-weight: 500;
    line-height: 130%;
  }

  .services-cards-height {
    height:80vh;
  }
  .our-work-cards-height {
    height:50vh;
     
  }
  .our-work-cards-color {
   background-color: #0062B0;
    color: #f9f9f9;
  }

  .our-work-cards-color p {
    color: #f9f9f9;
  }

  .our-work-cards-color .num {
      color: #f9f9f9;
  }
 
@media (hover:none) and (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

 
body{ cursor:none; }
a, button{ cursor:none; }

  /* ===== FOOTER ===== */
  footer{padding-top:48px;padding-bottom:28px;}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr ;gap:32px;margin-bottom:36px;}

  .footer-col {
        display: flex;
        flex-direction: column;
    justify-content: center;
  }
  .footer-col ul{list-style:none;padding:0;font-size:13px;}
  .footer-col li{margin-bottom:8px;     display: flex;
    gap: 8px;
    align-items: center;}
  .footer-bottom{
    display:flex;justify-content:space-between;
    border-top:1px dashed var(--wf-line-light);
    padding-top:18px;font-size:11px;color:var(--wf-text-light);
  }



/* ================= SERVICE SINGLE (detail) PAGE ================= */

/* breadcrumb + title block above the hero image */
.service-hero-top{
  margin-bottom:2rem;
}
.service-hero-top .eyebrow{margin-bottom:14px;}
.service-hero-top h1{margin-bottom:1.2rem;}
.service-hero-top p{
  max-width:640px;
  color:#747474;
  font-size:1rem;
  font-weight:400;
  line-height:170%;
  text-align: center;
  margin: 0 auto;
}

.service-content-section {
  overflow: visible;
}

/* two-column layout: sticky image stack (left) + scrolling text (right) */
.service-grid-content{
  display: grid;
  grid-template-columns: .5fr 1fr;
  gap: 16px;
  align-items: start;
  overflow: visible;
}
.service-grid-content-left{
 display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;

  position: sticky;
  top: 1rem;
  align-self: start;

  height: calc(100vh - 2rem);
}
.service-image-box{
  min-height: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.service-image-box img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-text-content {
  min-width: 0;
}

.service-text-content{
  grid-area: span 1 / span 1 / span 1 / span 1;
      background-color: #0091D1;
              padding: 3rem;
                  border-radius: 8px;
}
.service-text-content h2{
  text-transform: uppercase;
  margin-top:0;
  margin-bottom:1.2rem;
  font-family: Libre Franklin, sans-serif;
  font-size: min(5vw, 52px);
  font-weight: 500;
  line-height: 120%;
  color:#f9f9f9;
}
.service-text-content h3{
  margin-top:2.5rem;
  margin-bottom:1rem;
  font-size: min(5vw, 28px);
  color: #f9f9f9;
}
.service-text-content p{
  max-width:none !important;
  color:#f9f9f9;
  font-family: Libre Franklin, sans-serif;
  font-size:1rem;
  font-weight:400;
  line-height:170%;
  margin-bottom:1.5rem;
}
.service-text-content ul{
  margin:0 0 1.5rem;
  padding-left:1.2rem;
  color:#f9f9f9;
  font-size:1rem;
  font-weight:400;
  line-height:170%;
}
.service-text-content ul li{margin-bottom:.8rem;}
.service-text-content ul li strong{color: #f9f9f9;}

@media (max-width:900px){
  .service-grid-content{grid-template-columns:1fr;}
  .service-grid-content-left{
    position:static;
    height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
  }
  .service-image-box{min-height:220px;}
}
@media (max-width:720px){
  .service-grid-content-left{grid-template-columns:1fr;}
}


[data-reveal]{
  opacity:0;
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible{
  opacity:1;
  transform: translate(0,0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transition:none; opacity:1; transform:none; }
}


[data-parallax-img]{
  will-change: transform;
  transform: scale(1.12) translate3d(0,0,0);
  transition: transform .1s linear; /* smooths out scroll jitter */
}

@media (prefers-reduced-motion: reduce){
  [data-parallax-img]{ transform:none !important; transition:none; }
}



/* ===== BEFORE / AFTER SLIDER ===== */
.ba-card{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ba-slider{
  position:relative;
  width:100%;
  aspect-ratio: 1;
  border-radius:8px;
  overflow:hidden;
  cursor:ew-resize;
  user-select:none;
  box-shadow: rgba(10, 17, 40, 0.16) 0px 20px 40px -12px;
  border: 1px solid #0a11280f;
}

.ba-img-before,
.ba-img-after{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

/* REPLACES the old .ba-after-wrap width-based approach */
.ba-after-wrap{
  position:absolute;
  inset:0;
  clip-path: inset(0 50% 0 0); /* JS updates this on drag */
}

.ba-handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#fff;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.ba-handle-grip{
  width:36px;
  height:36px;
  border-radius:50%;
     background: #0091D1;
  color:#313131;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  pointer-events:none;
}

.ba-label{
  position:absolute;
  top:16px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
  color:#fff;
       background: #0091D1;
    padding: 8px 14px;
  border-radius:50px;
  pointer-events:none;
}
.ba-label-before{ left:16px; }
.ba-label-after{ right:16px; }

.ba-handle-grip{
  width:36px;
  height:36px;
  flex-shrink: 0; /* ← ovo je fix */
  border-radius:50%;
background: #0091D1;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  pointer-events:none;
}

/* .lang-switcher{
  display:flex;
  gap:6px;
  align-items:center;
}
.lang-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--wf-line-light);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  overflow:hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.lang-btn .fi{
  border-radius:50%;
  width:18px;
  height:18px;
  background-size: cover;
}
.lang-btn:hover{
  transform: translateY(-2px);
  border-color:#313131;
}
.lang-btn.active{
  border-color:#313131;
  border-width:2px;
}

.goog-te-banner-frame{ display:none !important; }
body{ top:0 !important; }
.goog-te-gadget-icon{ display:none !important; } */

/* ===== SPECIAL OFFER BADGE ===== */
.offer-badge{
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 84px;
  height: 84px;
  z-index: 9998;
  cursor: pointer;
  animation: offerBob 3s ease-in-out infinite;
}
.offer-badge svg{
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 24px rgba(0,145,209,.45));
  transition: filter .3s ease;
}
.offer-badge:hover{ animation-play-state: paused; transform: scale(1.06); }
.offer-badge:hover svg{ filter: drop-shadow(0 12px 32px rgba(0,145,209,.6)); }

.offer-badge circle,
.offer-badge-bg{ fill: #0091D1; }

.offer-badge-pct{
  font-family: Libre Franklin, sans-serif;
  font-weight: 700;
  font-size: 22px;
  fill: #fff;
}
.offer-badge-label{
  font-family: Libre Franklin, sans-serif;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .06em;
  fill: rgba(255,255,255,.85);
}

.offer-ring{
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,145,209,.4);
  pointer-events: none;
}
.offer-ring-1{ animation: offerPulse 2.6s ease-out infinite; }
.offer-ring-2{ inset: -18px; animation: offerPulse 2.6s ease-out .6s infinite; }

@keyframes offerBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
@keyframes offerPulse{
  0%{ transform: scale(1); opacity: .8; }
  70%{ transform: scale(1.4); opacity: 0; }
  100%{ transform: scale(1.4); opacity: 0; }
}

/* fills the SVG background circle */
.offer-badge svg::before{ content:''; }

.social {
  display: flex;
  flex-direction: column;
  gap:6px;
  margin-top:1rem;
}

.social li a {
      font-size: 1rem !important;
}

#footerSection, #footerSpacer {
  max-width: 1920px;
  margin:0 auto;
}




  /* ===== responsive ===== */
  @media (max-width: 900px){

 
     .card h2 {  font-size: 2.5rem;}
      .num {
      font-size: 2rem;
    }
    h3 {
      font-size: 1.55rem;
    }
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .work-squares-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .team-main-grid{grid-template-columns:1fr 1fr;}
    .team-about-card{grid-area: span 1 / span 2 / span 1 / span 2;}
    .team-slider-holder{grid-area: span 1 / span 2 / span 1 / span 2;}

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

  }

  @media (max-width:900px){
  .service-grid-content{grid-template-columns:1fr;}
  .service-grid-content-left{
    position:static;
    height:auto;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
  }
  .service-image-box{min-height:220px;}
}

@media (min-width: 721px){
  .fs-menu{ display: none; }
}
  @media (max-width: 720px){

    .cursor-dot,
.cursor-ring {
  display: none !important;
}

body,
a,
button {
  cursor: auto;
}

    body {
      padding-left:2rem;
      padding-right: 2rem;
    }

       .service-hero-top {
      margin-bottom: 0;
    }
    /* .hero-media {
      min-height: 75vh;
    } */

      .smallScreen {
        display:flex;
      } 

      .smallScreen h1 {
color: #fff;
        font-size: min(12.9vw, 56px);
        font-weight: 500 !important;
        line-height: 106%;
      }

      .largeScreen {
        display: none;
      }


      .clinic-text h2, .services-h2 {
              font-size: min(9vw, 3rem) !important;
      }

      .parodont {
         font-size: min(8vw, 3rem) !important;
      }
    .hero-media {
        /* height: 85vh; */
         height: 85vh;
        max-height: 700px;
        min-height: 700px;
    }
    .nav-links{display:none;}
    .card h2, .clinic-text h2, .our-team-text h2, .our-work-head h2, .faq h2 { font-size: 2.2rem;}
    .card {        padding: 1.5rem;}
    .num {
      font-size: 2rem;
    }



    .card-square h3 {
              font-size: 1.55rem;
        line-height: 130%;
    }

      .services-list-grid > *:nth-child(1)  { order: 1; }
  .services-list-grid > *:nth-child(2)  { order: 2; }

  .services-list-grid > *:nth-child(4)  { order: 3; }
  .services-list-grid > *:nth-child(3)  { order: 4; }

  .services-list-grid > *:nth-child(5)  { order: 5; }
  .services-list-grid > *:nth-child(6)  { order: 6; }

  .services-list-grid > *:nth-child(8)  { order: 7; }
  .services-list-grid > *:nth-child(7)  { order: 8; }

  .services-list-grid > *:nth-child(9)  { order: 9; }
  .services-list-grid > *:nth-child(10) { order: 10; }


 .service-grid-content-left{
    position: static;      /* ukida sticky ponašanje */
    height: auto;           /* ukida naslijeđeni 95vh */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
  }

    .pricing h2 {
      font-size: 2rem !important;
    }

  .service-image-box{
    /* height: 320px; */
    max-height: 500px;
    min-height: 0;
  }

 .service-grid-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }


  .service-grid-content-left{
    display: contents; 
  }


   .service-image-box:nth-of-type(1){
    order: 1;
  }

  .service-text-content{
    order: 2;
  }

  .service-image-box:nth-of-type(2){
    order: 3;
  }

    /* br {
      display:none;
    } */

    h3 {
              font-size: 1.55rem;
    }

    .ph-hero {
      /* background-image: url('./Images/AsimHeroPhone.png'); */
       background-image: url('./Images/asimPhoneHero.png');
    }
    .BookNow, .bookNowArrow {
      display:none;
    }
    .sct-blockquote {
         font-size: 1.55rem !important;
    }

 



    .image-cover-parallax {
      min-height: auto;
    }
    .card-color-dark-blue, .card-color-light-blue {
      max-height: 307px;
    }
    
    .our-work-head {
      flex-direction: column;
      align-items: start;
      grid-row-gap: 2rem;
    }

      #team .wrap{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  
  .meet-us {
        height: 475px !important;
        max-height: none;
  }
  #team .team-header-row,
  #team .team-main-grid{
    display: contents; 
  }

  #team .team-header-text{
    order: 1;
  }

  #team .team-about-card{
    order: 2;
  }

  #team .slider-nav{
    order: 3;
    align-self: end;
  }

  #team .team-slider-holder{
    order: 4;
    min-height: 420px;
  }

  .home-clinic-grid .card-button {
        grid-column-gap: 1rem;
    grid-row-gap: 1rem;
        padding: 2rem;
  }

  .faq-item.open .faq-a {
        max-height: 300px;
    padding-bottom: 0px;
  }

  .faq-deco {
        margin-bottom: 0px;
    padding: 0 1rem 1rem 0;
  }
  .slide-info{
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .slide-info p {
     margin-bottom: 0rem;
  }

.card-info-height {
  min-height: auto;
}

.sct-label {
  font-size:1rem;
}

.services-grid .services-content{
    order: 1;
  }
  .services-grid .card-button{
    order: 2;
  }
  .services-grid .card-color-light-blue,
  .services-grid .card-color-dark-blue{
    order: 3;
  }

      .page-loader-logo{
  font-size: 3vw !important;
  }

.sct-section { padding: 3rem 2rem; } .sct-testimonial-wrapper { min-height: 280px; } 

    .burger{display:flex;}
    .hero-media{height:420px;}
    .hero-content{              padding-top: min(13vw, 1rem);
    padding-left: 5vw;
    padding-bottom: 13vw;
    padding-right: 5vw;}
    .hero-content p{max-width:280px;}
    .services-grid{grid-template-columns:1fr;}
    .work-squares-grid{    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    max-height: 75rem;}
    .footer-grid{grid-template-columns:1fr;}
    h1{font-size: 3.5rem;}
    .team-header-row{flex-direction:column;align-items:flex-start;}
    .team-main-grid{grid-template-columns:1fr;min-height:0;}
    .team-about-card{grid-area:auto;}
    .team-slider-holder{grid-area:auto;min-height:420px;}
    .slide{grid-template-columns:1fr;grid-template-rows:auto auto;row-gap:12px;}
    .slide-image{min-height:320px;}




  /* mobile nav drawer */
  /* .mobile-nav{
    display:none;flex-direction:column;gap:0;
    border-top:1px dashed var(--wf-line-light);
  }
  .mobile-nav.active{display:flex;}
  .mobile-nav a{padding:14px 0;border-bottom:1px dashed var(--wf-line-light);font-size:13px;text-transform:uppercase;} */

  /* ===== FULLSCREEN MOBILE MENU ===== */
.fs-menu{
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  background: #f2f2f2;
  transform: translateY(-100%);
  transition: transform .6s cubic-bezier(.76,0,.24,1);
}
.fs-menu.open{
  pointer-events: auto;
  transform: translateY(0);
}

.fs-close-btn{
  position: fixed;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(49,49,49,.15);
  background: transparent;
  color: #313131;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100002;
  opacity: 0;
  transform: rotate(-90deg) scale(.8);
  transition: opacity .4s ease .3s, transform .5s cubic-bezier(.34,1.56,.64,1) .3s, background-color .25s ease;
}
.fs-menu.open .fs-close-btn{
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.fs-close-btn:hover{
  background-color: rgba(49,49,49,.08);
}
.fs-close-btn svg{
  width: 18px;
  height: 18px;
}

.fs-content{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
}

.fs-eyebrow{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #0091D1;
  font-weight: 600;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease .35s, transform .4s cubic-bezier(.16,1,.3,1) .35s;
}
.fs-menu.open .fs-eyebrow{
  opacity: 1;
  transform: translateY(0);
}

.fs-nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fs-nav-item{
  border-bottom: 1px solid rgba(49,49,49,0);
  transition: border-color .3s ease .5s;
}
.fs-nav-item:first-child{
  border-top: 1px solid rgba(49,49,49,0);
  transition: border-color .3s ease .5s;
}
.fs-menu.open .fs-nav-item{
  border-bottom-color: rgba(49,49,49,.1);
}
.fs-menu.open .fs-nav-item:first-child{
  border-top-color: rgba(49,49,49,.1);
}

.fs-nav-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  text-decoration: none;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.fs-nav-item:nth-child(1) .fs-nav-link{ transition-delay: .3s; }
.fs-nav-item:nth-child(2) .fs-nav-link{ transition-delay: .37s; }
.fs-nav-item:nth-child(3) .fs-nav-link{ transition-delay: .44s; }
.fs-nav-item:nth-child(4) .fs-nav-link{ transition-delay: .51s; }
.fs-menu.open .fs-nav-link{
  opacity: 1;
  transform: translateY(0);
}

.fs-nav-link-text{
  font-family: Libre Franklin, sans-serif;
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 500;
  color: #313131;
  letter-spacing: -.02em;
  line-height: 1;
  transition: color .25s ease;
}
.fs-nav-link:hover .fs-nav-link-text{
  color: #0091D1;
}

.fs-nav-link-num{
  font-size: .72rem;
  font-weight: 400;
  color: #0091D1;
  letter-spacing: .1em;
  align-self: flex-end;
  padding-bottom: 6px;
  opacity: .7;
}

.fs-footer{
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease .6s, transform .4s cubic-bezier(.16,1,.3,1) .6s;
}
.fs-menu.open .fs-footer{
  opacity: 1;
  transform: translateY(0);
}
.fs-footer-line{
  width: 40px;
  height: 1px;
  background: rgba(49,49,49,.25);
}
.fs-footer-contact{
  font-size: .85rem;
  color: #616161;
  text-decoration: none;
  letter-spacing: .05em;
  transition: color .25s ease;
}
.fs-footer-contact:hover{
  color: #0091D1;
}

@media (prefers-reduced-motion: reduce){
  .fs-menu,
  .fs-close-btn,
  .fs-eyebrow,
  .fs-nav-link,
  .fs-footer{ transition: none; }
}




  .wf-banner{
    background:#37465c; z-index: 111; color:#fff;text-align:center;
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    padding:6px 0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    height: min(40px, 2.1vw);

  }

  

  @media (max-width: 479px) {
     body {
      padding-left:1rem;
      padding-right: 1rem;
    }

    .card-color-dark-blue, .card-color-light-blue {
      max-height:280px;
    }

    /* .home-clinic-grid {
         

        grid-template-rows: 1fr 1fr;
        min-height: 30rem;
    } */

       .subvention-grid {
      grid-template-columns: 1fr;
      grid-auto-rows: 1fr;
    }

    .subventionImage{
      width:100%;
    }

      .meet-us {
        height: 475px !important;
        max-height: none;
    }

    .sct-section {
      padding: 2.5rem 2rem;
    }

    .sct-blockquote {
      font-size: 1.35rem !important;
    }

    .faq-items {
      padding:2rem;
    }
  }
}
/* =========================================================
   MOBILE FIX — OUR WORK IMAGE / CARD GAP
   Keeps desktop layout unchanged and lets each mobile row
   size itself from its own content instead of stretching.
   ========================================================= */
@media (max-width: 720px) {

  .home-clinic-grid{
        grid-template-columns: 1fr;
  }
  #our-work .home-clinic-grid.work-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    gap: 16px;
    align-items: start;
  }

  #our-work .home-clinic-grid.work-row > .image-cover-parallax {
    height: auto;
    min-height: 0;
    align-self: start;
  }

  #our-work .home-clinic-grid.work-row > .image-cover-parallax > img {
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: cover;
  }

  #our-work .home-clinic-grid.work-row > .work-card {
    height: auto;
    min-height: 0;
    align-self: start;
  }
}


/* =========================================================
   SERVICE DETAIL — FINAL STICKY IMAGE FIX
   Keep the image column sticky on tablet + desktop.
   This block intentionally comes last so it overrides older
   duplicated responsive rules that set position: static.
   ========================================================= */

@media (min-width: 721px) {
  .service-content-section,
  .service-content-section > .wrap,
  .service-grid-content {
    overflow: visible !important;
  }

  .service-grid-content {
    display: grid !important;
    grid-template-columns: 0.5fr 1fr !important;
    align-items: start !important;
    gap: 16px !important;
  }

  .service-grid-content-left {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 16px !important;

    position: -webkit-sticky !important;
    position: sticky !important;
    top: 6rem !important;
    align-self: start !important;

    height: calc(100vh - 7rem) !important;

    /* Prevent the reveal transform from interfering with sticky. */
    transform: none !important;
  }

  .service-grid-content-left .service-image-box {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
  }

  .service-grid-content-left .service-image-box img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
}

/* Mobile stays stacked and non-sticky. */
@media (max-width: 720px) {
  .service-content-section {
    overflow: hidden;
  }

  .service-grid-content {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }

  .service-grid-content-left {
    position: static !important;
    height: auto !important;
    display: contents !important;
    transform: none !important;
  }
}

/* =========================================================
   SITE FOOTER
   ========================================================= */

#footerSection.site-footer {
  background: #ffffff;
  color: #121212;
  padding: 0 2.5rem;
  font-family: "Libre Franklin", sans-serif;
}

.site-footer-wrap {
  width: 100%;
}

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

/* =========================================================
   FOOTER TOP
   ========================================================= */

.site-footer-top {
  min-height: 215px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 3rem;
  align-items: center;
}

.site-footer-top-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.site-footer-label {
  color: #121212;
  opacity: 0.65;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
}

.site-footer-value {
  width: fit-content;
  color: #121212;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  transition: opacity 0.25s ease;
}

a.site-footer-value:hover {
  opacity: 0.6;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

.site-footer-socials {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.site-footer-socials a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px solid rgba(18, 18, 18, 0.2);
  border-radius: 5px;

  color: #0091D1;
  font-size: 0.95rem;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.site-footer-socials a i {
  color: #0091D1;
}

.site-footer-socials a:hover {
  background: #0091D1;
  border-color: #0091D1;
  color: #ffffff;
  transform: translateY(-2px);
}

.site-footer-socials a:hover i {
  color: #ffffff;
}

/* =========================================================
   DIVIDER
   ========================================================= */

.site-footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(18, 18, 18, 0.12);
}

/* =========================================================
   FOOTER MAIN
   ========================================================= */

.site-footer-main {
  min-height: 325px;

  display: grid;
  grid-template-columns: 1.55fr 0.85fr 0.95fr 1fr;
  gap: clamp(2.5rem, 6vw, 7rem);

  padding: 5.2rem 0 3rem;
  align-items: start;
}

/* =========================================================
   BRAND
   ========================================================= */

.site-footer-brand {
  max-width: 330px;
}

.site-footer-logo {
  width: fit-content;

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

  color: #121212;

  font-size: clamp(1.75rem, 2.3vw, 2.25rem);
  font-weight: 500;
  line-height: 1;

  margin-bottom: 1.7rem;
}

.site-footer-logo-mark {
  color: #0091D1;
  font-size: 2rem;
  line-height: 1;
}

.site-footer-brand p {
  max-width: 310px;

  color: #121212;
  opacity: 0.68;

  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;

  margin: 0;
}

/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.site-footer-column h4 {
  color: #121212;
  opacity: 0.5;

  font-size: 0.9rem;
  font-weight: 500;

  text-transform: none;
  letter-spacing: 0;

  margin: 0 0 1.45rem;
}

.site-footer-links,
.site-footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.site-footer-links a,
.site-footer-info a,
.site-footer-info span {
  color: #121212;

  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.45;
}

/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.site-footer-links a {
  position: relative;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.site-footer-links a:hover {
  color: #121212;
  opacity: 0.6;
  transform: translateX(4px);
}

/* =========================================================
   LOCATION
   ========================================================= */

.site-footer-location {
  gap: 0.45rem;
}

.site-footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-top: 0.8rem;

  color: #121212 !important;
  font-weight: 500 !important;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.site-footer-map-link i {
  color: #0091D1;
}

.site-footer-map-link:hover {
  color: #0091D1 !important;
}

/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.site-footer-bottom {
  min-height: 74px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  color: #121212;
  opacity: 0.7;

  font-size: 0.82rem;

  border-top: 1px solid rgba(18, 18, 18, 0.12);
}

.site-footer-legal {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-footer-legal a {
  color: #121212;

  transition: opacity 0.25s ease;
}

.site-footer-legal a:hover {
  color: #121212;
  opacity: 0.6;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .site-footer-top {
    grid-template-columns: 1fr 1fr;
    padding: 3rem 0;
    min-height: 0;
  }

  .site-footer-socials {
    justify-content: flex-start;
  }

  .site-footer-main {
    grid-template-columns: 1.3fr 1fr;
    gap: 3.5rem 4rem;

    min-height: 0;
    padding: 4rem 0;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  #footerSection.site-footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .site-footer-top {
    grid-template-columns: 1fr;
    gap: 1.8rem;

    padding: 3rem 0;
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    gap: 2.7rem;

    padding: 3.5rem 0;
  }

  .site-footer-brand {
    max-width: none;
  }

  .site-footer-brand p {
    max-width: 430px;
  }

  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 1.5rem 0;
  }

  .site-footer-legal {
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {


 footer {
    position: static;
  }

  #footerSpacer {
    display: none;
  }

  #footerSection.site-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site-footer-logo {
    font-size: 1.7rem;
  }
}