[data-reveal]{
    opacity:1 !important;
    transform:none !important;
}

[data-reveal="fade-up"].sr-visible {
  opacity: 1;
  transform: translateY(0);
}
 
/* ── Fade In (subtle — badges, tags, decorative lines) ───── */
[data-reveal="fade-in"] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-organic);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity;
}
[data-reveal="fade-in"].sr-visible {
  opacity: 1;
}
 
/* ── Zoom Up (cards — slight scale + translate) ──────────── */
[data-reveal="zoom-up"] {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transition:
    opacity var(--dur-base) var(--ease-reveal),
    transform var(--dur-base) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="zoom-up"].sr-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
 
/* ── Slide Left (info panels, left-side content) ─────────── */
[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity var(--dur-base) var(--ease-reveal),
    transform var(--dur-base) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="slide-left"].sr-visible {
  opacity: 1;
  transform: translateX(0);
}
 
/* ── Slide Right (form panels, right-side content) ───────── */
[data-reveal="slide-right"] {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity var(--dur-base) var(--ease-reveal),
    transform var(--dur-base) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="slide-right"].sr-visible {
  opacity: 1;
  transform: translateX(0);
}
 
/* ── Line Grow (decorative underlines, dividers) ─────────── */
[data-reveal="line-grow"] {
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.9s var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0.2s);
  will-change: transform;
}
[data-reveal="line-grow"].sr-visible {
  transform: scaleX(1);
}
 
/* ============================================================
   WHY SKINPASE SECTION
   Header fades up, cards zoom-up with stagger
   ============================================================ */
.why2-section .why2-header {
  /* Reset existing inline animation if any */
}
 
.why2-section .why2-tag[data-reveal],
.why2-section .why2-title[data-reveal],
.why2-section .why2-desc[data-reveal] {
  display: block; /* ensure block for transform */
}
 
/* Cards — zoom-up with cascade stagger */
.why2-grid .why2-card[data-reveal="zoom-up"] {
  transform: translateY(44px) scale(0.95);
}
.why2-grid .why2-card[data-reveal="zoom-up"].sr-visible {
  transform: translateY(0) scale(1);
}
 
/* ============================================================
   OUR SPECIALITIES SECTION
   Header stagger, carousel fades in as unit
   ============================================================ */
.sp2-section {  background: linear-gradient(135deg, rgba(0, 169, 181, 0.35) 0%, rgba(0, 169, 181, 0.22) 50%, rgba(0, 169, 181, 0.35) 100%); }.sp2-tag[data-reveal],
.sp2-section .sp2-title[data-reveal],
.sp2-section .sp2-subtitle[data-reveal] {
  display: block;
}
 
/* Viewport container — fade in */
.sp2-section .sp2-viewport[data-reveal="fade-in"] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s var(--ease-reveal),
    transform 0.9s var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0.2s);
}
.sp2-section .sp2-viewport[data-reveal="fade-in"].sr-visible {
  opacity: 1;
  transform: translateY(0);
}
 
/* Nav row */
.sp2-nav-row[data-reveal="fade-in"] {
  opacity: 0;
  transition: opacity 0.7s var(--ease-organic);
  transition-delay: var(--reveal-delay, 0.45s);
}
.sp2-nav-row[data-reveal="fade-in"].sr-visible {
  opacity: 1;
}
 
/* ============================================================
   DOCTORS / SPECIALISTS SECTION
   Section header + each card zooms up
   ============================================================ */
.specialists-section .section-header[data-reveal="fade-up"] {
  /* inherits base */
}
 
.specialists-grid .doctor-card[data-reveal="zoom-up"] {
  transform: translateY(40px) scale(0.97);
}
.specialists-grid .doctor-card[data-reveal="zoom-up"].sr-visible {
  transform: translateY(0) scale(1);
  transition:
    opacity var(--dur-slow) var(--ease-reveal),
    transform var(--dur-slow) var(--ease-reveal);
}
 
/* ============================================================
   BRANCHES SECTION
   Section header + each branch card
   ============================================================ */
.branches-section .section-header[data-reveal="fade-up"] {
  /* inherits base */
}
 
.branches-grid .branch-card[data-reveal="zoom-up"] {
  transform: translateY(48px) scale(0.96);
  transition:
    opacity var(--dur-slow) var(--ease-reveal),
    transform var(--dur-slow) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0s);
}
.branches-grid .branch-card[data-reveal="zoom-up"].sr-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
 
/* ============================================================
   CONTACT / APPOINTMENT SECTION
   Left column slides in from left, form slides from right
   ============================================================ */
.appointment-info[data-reveal="slide-left"] {
  /* inherits base */
}
.appointment-form-wrap[data-reveal="slide-right"] {
  /* inherits base */
}
 
/* ============================================================
   TRUST STRIP — subtle fade in
   ============================================================ */
.trust-strip[data-reveal="fade-in"] {
  opacity: 0;
  transition: opacity 0.8s var(--ease-organic);
}
.trust-strip[data-reveal="fade-in"].sr-visible {
  opacity: 1;
}
 
/* ============================================================
   STAT ITEMS — count-up pairs with stagger fade-up
   ============================================================ */
.stat-item[data-reveal="fade-up"] {
  /* inherits base */
}
 
/* ============================================================
   SECTION TAGS — refined line-reveal using clip-path
   ============================================================ */
.section-tag[data-reveal="clip-in"],
.why2-tag[data-reveal="clip-in"],
.sp2-tag[data-reveal="clip-in"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1; /* keep opacity; use clip-path for the reveal */
  transition:
    clip-path 0.8s var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0s);
  will-change: clip-path;
}
[data-reveal="clip-in"].sr-visible {
  clip-path: inset(0 0% 0 0);
}
 
/* ============================================================
   CONTACT ITEMS — staggered list fade-up
   ============================================================ */
.contact-item[data-reveal="fade-up"] {
  /* inherits base */
}
 
/* ============================================================
   FOOTER COLUMNS — stagger fade-up
   ============================================================ */
.footer-links-group[data-reveal="fade-up"],
.footer-brand[data-reveal="fade-up"] {
  /* inherits base */
}
 
/* ============================================================
   MOBILE ADJUSTMENTS
   Reduce translate distances on small screens
   ============================================================ */
@media (max-width: 640px) {
  [data-reveal="fade-up"],
  [data-reveal="zoom-up"] {
    transform: translateY(24px) scale(0.98);
  }
  [data-reveal="zoom-up"].sr-visible {
    transform: translateY(0) scale(1);
  }
  [data-reveal="slide-left"] {
    transform: translateX(-24px);
  }
  [data-reveal="slide-right"] {
    transform: translateX(24px);
  }
}

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

.branch-hero{
    position:relative;
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    padding:140px 0 100px;
  
}

.branch-hero-media{
    position:absolute;
    inset:0;
    z-index:-2;
}

.branch-hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.branch-hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 169, 181, .25) 45%, rgba(5, 31, 62, .45) 100%);
}

.branch-hero-content{
    position:relative;
    z-index:5;

    max-width:720px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
   text-align:left;
    padding-top:0;
    padding-bottom:0;

    margin:0;
}


@media(max-width:768px){

.branch-hero-content{
    text-align:center;
    align-items:center;
}

}

.branch-hero-title{
    font-family:var(--font-primary);
    font-size:clamp(4rem,7vw,6rem);
    line-height:.95;
    color:#fff;
    margin:0 0 25px;
    white-space: nowrap; 
}

.branch-hero-title em{
    color: #e8ba21;
    font-style:normal;
}

.branch-hero-sub{
    max-width:650px;
    color:#fff;
    font-size:1.15rem;
    line-height:1.9;
    margin-bottom:35px;
}

.branch-hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:40px;
}

.branch-hero-meta-item{

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

    padding:14px 20px;

    color:#fff;

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

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

    backdrop-filter:blur(15px);

    border-radius:40px;

    font-size:.95rem;
}

.branch-hero-actions{
    display:flex;
    gap:18px;
    justify-content: center;
}

.branch-hero-actions .btn{
    min-width:220px;
}

/* ==========================================================
   HERO RESPONSIVE
========================================================== */
@media(max-width:768px){

  .branch-hero-content{
      width:100%;
      padding:0 20px;
      align-items:center;
      text-align:center;
  }

  .branch-hero-sub{
      max-width:100%;
  }

}

@media(max-width:991px){

.branch-hero{

min-height:850px;
padding:130px 0 80px;

}

.branch-hero-title{

font-size:3.6rem;

}

.branch-hero-meta{

flex-direction:column;
align-items:flex-start;

}

}

@media(max-width:768px){

.branch-hero{

min-height:760px;
padding:120px 0 70px;

}

.branch-hero-title{

font-size:2.8rem;

}

.branch-hero-sub{

font-size:1rem;

}

.branch-hero-actions{

width:100%;
flex-direction:column;

}

.branch-hero-actions .btn{

width:100%;

}

}
/* ============================================================
   ABOUT SECTION — PREMIUM SPLIT LAYOUT
   ============================================================ */

.about-redesign-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:stretch;
}

/* ---------- LEFT: Media + Badge ---------- */
.about-media-col{
    position:relative;
    height:100%;
}

.about-media-frame{
    height:100%;
    min-height:355px;   /* Adjust as needed */
    overflow:hidden;
    border-radius:28px;
}

.about-media-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.about-media-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(5,31,62,0) 40%,
    rgba(5,31,62,0.55) 100%
  );
}

.about-badge{
  position:absolute;
  bottom: -14px;
  right: -28px;

  width:140px;
  height:140px;
  border-radius:50%;

  background: linear-gradient(135deg, #00A9B5 0%, #00C7D4 100%);
  color:#fff;

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

  box-shadow: 0 20px 40px -10px rgba(0,169,181,0.5);
  border: 4px solid #F8FAFC;

  transform: scale(0.85);
  opacity:0;
  animation: aboutBadgeScale 0.7s 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes aboutBadgeScale{
  to{ transform: scale(1); opacity:1; }
}

.about-badge-number{
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: 2rem;
  font-weight:700;
  line-height:1;
}

.about-badge-label{
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.03em;
  margin-top:4px;
  line-height:1.3;
}

/* ---------- RIGHT: Content ---------- */
.about-content-col{
  display:flex;
  flex-direction:column;
}

.about-heading-wrapper{
    text-align:center;
    margin-bottom:30px;
}

.about-tag{
    display:inline-block;
    margin-bottom:10px;
}

.about-heading{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;

   font-family:var(--font-primary);
    font-size:clamp(2.4rem,4vw,3.2rem);

    white-space:normal;
    flex-wrap:wrap;

    margin:0;
    line-height:1.2;
}

.about-heading em{
    display:inline-block;
    color:#00A9B5;
    font-style:normal;
}


.about-lead{
  font-size:1.05rem;
  line-height:1.8;
  color:#051F3E;
  margin:0 0 18px;
}

.about-body{
  font-size:1rem;
  line-height:1.8;
  color:#475569;
  margin:0 0 36px;
}

/* ---------- 2x2 Feature Grid ---------- */
.about-feature-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  margin-bottom:40px;
}

.about-feature-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(5,31,62,0.08);
  padding:24px 22px;
  box-shadow: 0 8px 24px -12px rgba(5,31,62,0.12);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
}

.about-feature-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px -14px rgba(0,169,181,0.28);
}

.about-feature-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  color:#00A9B5;
  background: rgba(0,169,181,0.1);
}

.about-feature-title{
  font-size:0.98rem;
  font-weight:700;
  color:#051F3E;
  margin:0 0 6px;
  line-height:1.3;
}

.about-feature-desc{
  font-size:0.85rem;
  line-height:1.55;
  color:#64748b;
  margin:0;
}

/* ---------- Buttons ---------- */
.about-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn--secondary-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:50px;
  font-weight:600;
  font-size:0.95rem;
  border:1.5px solid #051F3E;
  color:#051F3E;
  background:transparent;
  text-decoration:none;
  transition: background 0.3s ease, color 0.3s ease;
}

.btn--secondary-outline:hover{
  background:#051F3E;
  color:#fff;
}

/* ============================================================
   ABOUT SECTION — RESPONSIVE
   ============================================================ */
@media (max-width:991px){

  .about-redesign-inner{
      grid-template-columns:1fr;
      gap:48px;
  }

  .about-media-frame{
      aspect-ratio:16/10;
      max-width:520px;
      margin:0 auto;
      width:100%;
    overflow:hidden;
  }

  .about-badge{
      width:110px;
      height:110px;

      right:-20px;
      bottom:-12px;
  }

}


/* ============================================================
   GOOGLE REVIEWS SECTION — PREMIUM REDESIGN
   ============================================================ */

.reviews-section{
  background:#F8FAFC;
}


.gr-layout{
  display:grid;
  grid-template-columns: 40% 60%;
  gap:32px;
  align-items:stretch;
  margin-bottom:64px;
}

/* ---------- Rating Card ---------- */
.gr-rating-card{
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(5,31,62,0.06);
  border-radius:28px;
  padding:40px 32px;
  box-shadow: 0 24px 48px -20px rgba(5,31,62,0.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.gr-google-logo{ margin-bottom:14px; }

.gr-stars{ margin-bottom:10px; }
.gr-stars .star,
.gr-card-stars{
  color:#FFC107;
  letter-spacing:2px;
  font-size:1.1rem;
}

.gr-score{
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size:3rem;
  font-weight:700;
  color:#051F3E;
  line-height:1;
  margin-bottom:6px;
}

.gr-score-label{
  font-size:0.95rem;
  color:#64748b;
  margin:0 0 28px;
}

.gr-bars{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:30px;
}

.gr-bar-row{
  display:grid;
  grid-template-columns: 28px 1fr 36px;
  align-items:center;
  gap:10px;
  font-size:0.8rem;
  color:#475569;
}

.gr-bar-track{
  height:7px;
  border-radius:6px;
  background:rgba(5,31,62,0.08);
  overflow:hidden;
}

.gr-bar-fill{
  height:100%;
  width:0;
  border-radius:6px;
  background: linear-gradient(90deg, #00A9B5, #00C7D4);
  transition: width 1.1s cubic-bezier(0.16,1,0.3,1);
}

.gr-cta{
  width:100%;
  justify-content:center;
}

/* ---------- Carousel ---------- */
.gr-carousel-col{
  display:flex;
  flex-direction:column;
}

.gr-viewport{
  overflow:hidden;
  flex:1;
}

.gr-track{
  display:flex;
  gap:20px;
  height:100%;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  touch-action: pan-y;
}

.gr-card{
  flex: 0 0 calc(50% - 10px);
  min-width:280px;
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(5,31,62,0.06);
  padding:26px 24px;
  box-shadow: 0 10px 28px -16px rgba(5,31,62,0.14);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease;
  display:flex;
  flex-direction:column;
}

.gr-card:hover{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 40px -16px rgba(0,169,181,0.25);
}

.gr-card:hover .gr-google-icon-sm svg{
  transform: rotate(8deg) scale(1.1);
}

.gr-card-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.gr-avatar-img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

.gr-author-info{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}

.gr-author-name{
  font-size:0.92rem;
  font-weight:600;
  color:#051F3E;
  display:flex;
  align-items:center;
  gap:4px;
}

.gr-verified{ flex-shrink:0; }

.gr-date{
  font-size:0.78rem;
  color:#94a3b8;
}

.gr-google-icon-sm svg{
  transition: transform 0.3s ease;
  display:block;
}

.gr-card-stars{
  margin-bottom:10px;
  font-size:0.9rem;
}

.gr-card-text{
  font-size:0.9rem;
  line-height:1.65;
  color:#475569;
  margin:0;
}

/* Nav row */
.gr-nav-row{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

.gr-arrow{
  width:42px;
  height:42px;
  border-radius:50%;
  
  border:1.5px solid rgba(5,31,62,0.12);
  background:#fff;
  color:rgba(0, 169, 181, 0.35);;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gr-arrow:hover{
  background:#3fb1c1;
  color:#fff;
  border-color:#44c0c9;
}

.gr-arrow:disabled{
  opacity:0.4;
  cursor:default;
}

/* ---------- Trust Stats ---------- */
.gr-stats-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
}

.gr-stat-card{
  background:#fff;
  border-radius:18px;
  border:1px solid rgba(5,31,62,0.06);
  padding:28px 16px;
  text-align:center;
  box-shadow: 0 8px 22px -14px rgba(5,31,62,0.12);
}

.gr-stat-num{
  display:block;
  font-family: var(--font-primary, Arial, sans-serif);
  font-size:2rem;
  font-weight:700;
  color:#051F3E;
  margin-bottom:6px;
}

.gr-stat-label{
  font-size:0.85rem;
  color:#64748b;
}

/* ============================================================
   GOOGLE REVIEWS — RESPONSIVE
   ============================================================ */
@media (max-width: 991px){
  .gr-layout{
    grid-template-columns: 1fr;
  }
  .gr-card{
    flex: 0 0 calc(100% - 0px);
  }
  .gr-stats-row{
    grid-template-columns: repeat(2, 1fr);
  }
}


 @media (max-width:640px){

    .gr-rating-card{
        padding:32px 22px;
    }

    .gr-nav-row{

        width:100%;

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

        gap:12px;

        margin-top:20px;

        padding-right:10px;

    }

}
.sp2-card-link{
    display:block;
    text-decoration:none;
    color:white
}

.sp2-card-link:hover{
    color:white
}
@media(max-width:768px){

  .specialists-grid{
      grid-template-columns:1fr !important;
      gap:24px;
  }

  .doctor-card{
      max-width:420px;
      margin:0 auto;
      width:100%;
  }

}
@media(max-width:768px){

  .gr-card{
      min-width:100%;
  }

  .gr-rating-card{
      margin-bottom:20px;
  }

}
@media(max-width:768px){

  .gr-layout{
      display:flex;
      flex-direction:column;
      gap:24px;
  }

}
@media(max-width:768px){

  .footer-top-inner{
      grid-template-columns:1fr !important;
      gap:40px;
      text-align:center;
  }

  .footer-social{
      justify-content:center;
  }

}
@media(max-width:768px){

  .map-wrapper iframe{
      height:320px;
  }

  .map-info-card{
      position:relative;
      inset:auto;
      margin-top:20px;
      width:100%;
  }

}
/* ==========================
   ABOUT MOBILE FIX
========================== */

@media (max-width:768px){

  .about-redesign-inner{
      display:flex;
      flex-direction:column;
      gap:30px;
  }

 

  .about-content-col{
      text-align:center;
  }

  .about-media-frame{
      min-height:260px;
      width:100%;
    overflow:hidden;
  }

}
/* FOOTER MOBILE FIX */
@media (max-width:768px){

    .footer-contact-items{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .footer-contact-item{
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center;
        width:100%;
    }

    .footer-contact-value{
        text-align:center;
    }

    .footer-branch{
        text-align:center;
    }

}
@media(max-width:768px){

  .sp2-hd{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
  }

  .sp2-title,
  .sp2-subtitle{
      text-align:center;
  }

}
@media(max-width:768px){

  .branch-hero{
      min-height:auto;
      padding:130px 0 80px;
  }

}

@media (max-width:768px){

    .about-badge{

        width:80px !important;
        height:80px !important;

       
        right:-18px;
        bottom:-15px;

        border:3px solid #fff;

    }

    .about-badge-number{
        font-size:1.3rem !important;
    }

    .about-badge-label{
        font-size:.6rem !important;
        line-height:1.1 !important;
    }

}
/* Premium Treatment Arrows */

.sp2-nav-row{
    display:none;
}

@media (max-width:1024px){

    .sp2-nav-row{
        display:flex;
        justify-content:flex-end;
        margin-top:24px;
        gap:12px;
    }

    .sp2-arrow{

        width:52px;
        height:52px;

        border-radius:50%;

        background:transparent;

        border:1px solid rgba(0,169,181,.25);

        color:#00A9B5;

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

        cursor:pointer;

        transition:.3s ease;
    }

    .sp2-arrow:hover{

        border-color:#00A9B5;
        background:rgba(0,169,181,.06);

    }

    .sp2-arrow svg{
        width:18px;
        height:18px;
    }

}
.about-title{
    font-size:clamp(2.5rem,4vw,3.5rem) !important;
    line-height:1.2 !important;

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

    white-space:nowrap;
}
html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
    width:100%;
}
@media (max-width:768px){

.appointment-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:35px;
}

.appointment-info,
.appointment-form-wrap{
    width:100% !important;
    max-width:100% !important;
}

.appointment-form{
    width:100%;
}

.form-row{
    display:flex;
    flex-direction:column;
}

.form-group{
    width:100%;
}

}
.hero-cubes{

    position:absolute;

    inset:0;

    display:grid;

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

    grid-template-rows:repeat(5,1fr);

    z-index:5;

    pointer-events:none;

}
.hero-cube{

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


   

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

    transform-style:preserve-3d;

    transform-origin:center;

  animation:cubeReveal .9s ease forwards;
}
@keyframes cubeReveal{

    0%{

        transform:
        rotateY(0deg)
        rotateX(0deg)
        scale(1);

        opacity:1;

    }

    100%{

        transform:
        rotateY(90deg)
        scale(.25);

        opacity:0;

    }

}

/* ============================================================
   WHATSAPP APPOINTMENT BUTTON
   ============================================================ */

.whatsapp-submit {
    background: #25D366 !important;
    color: #ffffff !important;
    border: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25) !important;

    transition: all 0.25s ease !important;
}

.whatsapp-submit:hover {
    background: #1ebe5d !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35) !important;
}

.whatsapp-submit-icon {
    flex-shrink: 0;
}

.whatsapp-submit-arrow {
    font-size: 25px;
    line-height: 1;
    margin-left: 4px;
}