/* =========================================================

   V3 GLOBAL STYLE SYSTEM INDEX

=========================================================

01. ROOT VARIABLES / GLOBAL COLOURS
02. GLOBAL RESET
03. BODY / BASE TYPOGRAPHY
04. GLOBAL LINKS
05. GLOBAL HEADER SYSTEM
    05A. TOP CONTACT STRIP
    05B. MAIN NAVBAR
    05C. LOGO SYSTEM
    05D. SCROLLED HEADER STATE
06. BURGER BUTTON
07. FULL SCREEN MENU OVERLAY
    07A. MENU ANIMATION
    07B. MENU DECORATIVE OUTLINES
    07C. MENU NAVIGATION LINKS
    07D. MENU FOOTER INFO
08. HERO TEXT ANIMATION SYSTEM
    08A. SCRIPT WRITING EFFECT
    08B. HERO FALL / SOFT REVEAL
    08C. REDUCED MOTION ACCESSIBILITY
    08D. HERO SUBTITLE LINE 
09. FLOATING CONTACT BUTTONS
    09A. WHATSAPP BUTTON
    09B. CALL BUTTON
10. GLOBAL FOOTER SYSTEM (NOT INCLUDING HOME AND CONTACT FOOTERS)
    10A. FOOTER STRUCTURE
    10B. FOOTER DECORATIVE OUTLINES
    10C. FOOTER CTA BUTTON
    10D. FOOTER SOCIAL ICONS
    10E. FOOTER COPYRIGHT
11. GLOBAL BUTTON SYSTEM
12. GLOBAL UNDERLINE SYSTEM
13. RESPONSIVE SYSTEM
    13A. iPAD / TABLET
    13B. MOBILE
    13C. Laptop / PC

========================================================= */

/* =========================================================

   SYSTEM RULE:
   style.css controls global/shared systems only.
   Page-specific layout/design must stay in each page CSS file.
   Do not place experimental fixes here unless they apply globally.
   Page exceptions must be clearly labelled.

========================================================= */


/* =========================================================

   01. ROOT VARIABLES / GLOBAL COLOURS

========================================================= */

:root {

  --v2-white: #ffffff;

  --v2-ivory: #fffaf2;

  --v2-cream: #f5eee3;

  --v2-soft-cream: #f8f2e8;

  --v2-charcoal: #262321;

  --v2-muted: #6f655c;

  --v2-navy: #0f2f57;

  --v2-gold: #b99657;

  --v2-gold-soft: rgba(185, 150, 87, 0.42);

  --v2-gold-faint: rgba(185, 150, 87, 0.18);

  --v2-border: rgba(185, 150, 87, 0.24);

  --v2-shadow: rgba(38, 35, 33, 0.12);

  --v2-whatsapp: #25d366;

  --v2-facebook: #1877f2;

  --v2-youtube: #ff0000;

  --v2-header-height: 78px;

  --v2-header-compact-height: 64px;

  --v2-ease-luxury: cubic-bezier(0.45, 0, 0.15, 1);

}

/* =========================================================

   02. GLOBAL RESET

========================================================= */

*,

*::before,

*::after {

  box-sizing: border-box;

  border-radius: 0 !important;

}

html {

  scroll-behavior: smooth;

}

body {

  margin: 0;

  overflow-x: hidden;

}

/* =========================================================

   03. BODY / BASE TYPOGRAPHY

========================================================= */
@font-face {

  font-family: 'FasthinScript';

  src: url('fasthin-script.otf') format('opentype');

  font-weight: normal;

  font-style: normal;

}

@font-face {

  font-family: 'PaintBrushScript';

  src: url('paint-brush-script.otf') format('opentype');

  font-weight: normal;

  font-style: normal;

}


@font-face {

  font-family: 'RoyaltyFree';

  src: url('royalty-free.otf') format('opentype');

  font-weight: normal;

  font-style: normal;

}



body {

  font-family: 'Poppins', 'Montserrat', Arial, sans-serif;

  background: var(--v2-ivory);

  color: var(--v2-charcoal);

}

h1,

h2,

h3,

h4,

h5,

h6,

p {

  margin-top: 0;

}

img {

  max-width: 100%;

  display: block;

}

/* =========================================================

   04. GLOBAL LINKS

========================================================= */

a {

  color: inherit;

  text-decoration: none;

}

a:hover {

  text-decoration: none;

}

/* =========================================================

   05. GLOBAL HEADER SYSTEM

========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 10000;

  width: 100%;

  background: var(--v2-white);

  transition: background 0.35s ease;

}

/* ---------- 05A. TOP CONTACT STRIP ---------- */

.header-top {

  width: 100%;

  background: var(--v2-cream);

  padding: 14px 6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 34px;

  overflow: hidden;

  transition:

    max-height 0.45s ease,

    opacity 0.35s ease,

    padding 0.45s ease;

}

.header-doctor-name {

  display: flex;

  align-items: center;

  white-space: nowrap;

  color: var(--v2-charcoal);

  font-size: 15px;

  line-height: 1.2;

  letter-spacing: 0.08em;

  font-weight: 400;

}

.header-contact {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

  gap: 5px;

  color: var(--v2-charcoal);

  font-size: 11px;

  letter-spacing: 0.11em;

  text-transform: uppercase;

  text-align: right;

}

.header-contact span,

.header-contact a {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  white-space: nowrap;

}

.header-contact span {

  line-height: 1.2;

}

.header-contact i {

  font-size: 10px;

  color: var(--v2-gold);

  transform: translateY(-0.5px);

}

.header-consultation {

  margin-top: 4px;

  padding: 10px 28px;

  border: 1px solid var(--v2-gold);

  background: transparent;

  color: var(--v2-charcoal);

  font-size: 10px;

  line-height: 1;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  transition:

    background 0.3s ease,

    color 0.3s ease,

    border-color 0.3s ease;

}

.header-consultation:hover {

  background: var(--v2-gold);

  color: var(--v2-white);

}

/* ---------- 05B. MAIN NAVBAR ---------- */

.header-main {

  width: 100%;

  height: 62px;

  padding: 0 6%;

  background: var(--v2-white);

  display: flex;

  align-items: center;

  justify-content: space-between;

  transition:

    height 0.45s ease,

    box-shadow 0.35s ease,

    padding 0.35s ease;

}

/* ---------- 05C. LOGO SYSTEM ---------- */

.site-logo {

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  height: 100%;

}

.site-logo img {

  width: auto;

  height: 82px;

  max-height: none;

  object-fit: contain;

  display: block;

}

.logo-text {

  color: var(--v2-charcoal);

  font-size: 20px;

  font-weight: 300;

  letter-spacing: 0.06em;

}

/* ---------- 05D. SCROLLED HEADER STATE ---------- */

body.is-scrolled .header-top {

  max-height: 0;

  padding-top: 0;

  padding-bottom: 0;

  opacity: 0;

}

body.is-scrolled .header-main {

  height: 58px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.055);

}

/* =========================================================

   06. BURGER BUTTON

========================================================= */

.burger-btn {

  width: 48px;

  height: 48px;

  border: none;

  background: transparent;

  padding: 0;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 6px;

  position: relative;

  z-index: 13000;

}

.burger-btn span {

  display: block;

  width: 38px;

  height: 2px;

  background: var(--v2-charcoal);

  transition:

    transform 0.35s ease,

    opacity 0.3s ease,

    background 0.3s ease;

}

body.menu-open .burger-btn span {

  background: var(--v2-gold);

}

/* =========================================================

   07. FULL SCREEN MENU OVERLAY

========================================================= */

.menu-overlay {

  position: fixed;

  inset: 0;

  z-index: 12000;

  background: var(--v2-cream);

  transform: translateX(100%);

  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);

  overflow: hidden;

}

body.menu-open {

  overflow: hidden;

}

body.menu-open .menu-overlay {

  transform: translateX(0);

}

/* ---------- 07A. MENU DECORATIVE OUTLINES ---------- */

.menu-overlay::before,

.menu-overlay::after {

  content: "";

  position: absolute;

  pointer-events: none;

}

.menu-overlay::before {

  width: 420px;

  height: 760px;

  right: -95px;

  top: 8%;

  border-left: 10px solid rgba(255, 255, 255, 0.72);

  border-top: 10px solid rgba(255, 255, 255, 0.72);

  border-bottom: 10px solid rgba(185, 150, 87, 0.11);

  box-shadow: -12px 0 22px rgba(0, 0, 0, 0.035);

}

.menu-overlay::after {

  width: 320px;

  height: 320px;

  right: -120px;

  bottom: 13%;

  border: 8px solid rgba(255, 255, 255, 0.68);

  transform: rotate(45deg);

}

/* ---------- 07B. MENU INNER STRUCTURE ---------- */

.menu-inner {

  position: relative;

  z-index: 2;

  min-height: 100%;

  padding: 58px 7% 34px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

.menu-logo img {

  width: auto;

  max-height: 58px;

  margin-bottom: 28px;

}

/* ---------- 07C. MENU NAVIGATION LINKS ---------- */

.menu-nav {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  max-width: 430px;

}

.menu-nav a {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 11px 0;

  border-bottom: 1px solid rgba(185, 150, 87, 0.16);

  color: var(--v2-charcoal);

  font-size: clamp(23px, 2.6vw, 36px);

  line-height: 1.05;

  font-weight: 300;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}

.menu-nav a::after {

  content: "›";

  color: var(--v2-gold);

  font-size: 25px;

  line-height: 1;

  transition: transform 0.35s ease;

}

.menu-nav a:hover::after {

  transform: translateX(7px);

}

/* ---------- 07D. MENU FOOTER INFO ---------- */

.menu-bottom {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

  margin-top: 34px;

  max-width: 760px;

  color: var(--v2-muted);

  font-size: 13px;

  line-height: 1.48;

}

.menu-bottom strong {

  display: block;

  margin-bottom: 12px;

  color: var(--v2-charcoal);

  font-size: 12px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}

.menu-bottom p {

  margin: 0 0 7px;

}

/* =========================================================

   08. HERO TEXT ANIMATION SYSTEM

========================================================= */

/* Default hidden state */

.hero-reveal .script-line,

.hero-reveal .hero-title,

.hero-reveal .hero-subtitle,

.hero-reveal .hero-copy,

.hero-reveal .hero-button {

  opacity: 0;

}

/* ---------- 08A. SCRIPT WRITING EFFECT ---------- */

.hero-reveal.animate .script-line {

  animation: scriptWrite 5.6s cubic-bezier(0.25, 0.05, 0.2, 1) forwards 0.7s;

}

/* ---------- 08B. HERO TITLE / CONTENT SOFT REVEAL ---------- */

.hero-reveal.animate .hero-title {

  animation: heroSoftFall 3.8s cubic-bezier(0.18, 0.9, 0.22, 1) forwards 3.4s;

}

.hero-reveal.animate .hero-subtitle {

  animation: heroSoftFall 2.4s cubic-bezier(0.18, 0.9, 0.22, 1) forwards 2.2s;

}

.hero-reveal.animate .hero-copy {

  animation: heroSoftFall 2.2s cubic-bezier(0.18, 0.9, 0.22, 1) forwards 2.6s;

}

.hero-reveal.animate .hero-button {

  animation: heroSoftFall 2s cubic-bezier(0.18, 0.9, 0.22, 1) forwards 3s;

}

/* ---------- 08C. KEYFRAMES ---------- */

@keyframes scriptWrite {

  0% {

    opacity: 0;

    transform: translateX(-18px) translateY(8px);

    filter: blur(3px);

  }

  35% {

    opacity: 1;

  }

  100% {

    opacity: 1;

    transform: translateX(0) translateY(0);

    filter: blur(0);

  }

}

@keyframes heroSoftFall {

  0% {

    opacity: 0;

    transform: translateY(-42px);

    filter: blur(4px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

    filter: blur(0);

  }

}

/* ---------- 08D. REDUCED MOTION ACCESSIBILITY ---------- */

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

  html {

    scroll-behavior: auto;

  }

  .menu-overlay,

  .header-top,

  .header-main,

  .burger-btn span,

  .hero-reveal .script-line,

  .hero-reveal .hero-title,

  .hero-reveal .hero-subtitle,

  .hero-reveal .hero-copy,

  .hero-reveal .hero-button {

    animation: none !important;

    transition: none !important;

    transform: none !important;

    opacity: 1 !important;

    filter: none !important;

    clip-path: none !important;

  }

}


/* =========================================================

   09. FLOATING CONTACT BUTTONS

========================================================= */

.floating-contact {

  position: fixed;

  right: 22px;

  z-index: 9500;

  width: 56px;

  height: 56px;

  border-radius: 50% !important;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);

  font-size: 22px;

  transition:

    transform 0.28s ease,

    box-shadow 0.28s ease,

    opacity 0.28s ease;

}

.floating-contact:hover {

  transform: translateY(-3px);

  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);

}

/* ---------- 09A. WHATSAPP BUTTON ---------- */

.float-whatsapp {

  top: 36vh;

  background: var(--v2-whatsapp);

  color: var(--v2-white);

}

/* ---------- 09B. CALL BUTTON ---------- */

.float-call {

  top: 78vh;

  background: var(--v2-white);

  color: var(--v2-navy);

  border: 1px solid rgba(15, 47, 87, 0.12);

}


/* =========================================================

   10. GLOBAL FOOTER SYSTEM — LOCKED FOOTER

========================================================= */

/* =========================================================

   NOTE:
   This global footer system currently applies to:
   - Services
   - Pricing
   - FAQ
   - About
   Home and Contact footers remain intentional
   page-specific variants handled separately in:
   - home.css
   - contact.css

========================================================= */


.site-footer {

  position: relative;

  overflow: hidden;

  background: #f6efe4;

  color: #2d2a26;

  padding: 44px 7% 24px;

  border-top: 1px solid rgba(198, 161, 91, 0.26);

}

.footer-inner {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1.12fr 1fr 1fr;

  gap: 52px;

  align-items: start;

}

/* ---------- 10A. FOOTER STRUCTURE ---------- */

.footer-brand,

.footer-column {

  position: relative;

}

.footer-brand::after,

.footer-column:nth-child(2)::after {

  content: "";

  position: absolute;

  top: 8px;

  right: -26px;

  width: 1px;

  height: 285px;

  background: rgba(198, 161, 91, 0.45);

}

.footer-logo img {

  width: 260px;

  max-width: 100%;

  height: auto;

  margin: 0 0 24px;

}

.footer-question {

  margin: 0 0 14px !important;

  color: #2d2a26 !important;

  font-family: 'Montserrat', 'Poppins', sans-serif;

  font-size: 15px !important;

  line-height: 1.45 !important;

  font-weight: 300 !important;

  letter-spacing: 0.01em;

}

.footer-brand p,

.footer-column p {

  margin: 0 0 8px;

  color: #2d2a26;

  font-family: 'Montserrat', 'Poppins', sans-serif;

  font-size: 14px;

  line-height: 1.68;

  font-weight: 300;

  letter-spacing: 0.01em;

}

.footer-column h3 {

  margin: 0 0 30px;

  color: #b88932;

  font-family: 'Montserrat', 'Poppins', sans-serif;

  font-size: 13px;

  font-weight: 400;

  letter-spacing: 0.22em;

  text-transform: uppercase;

}

.footer-clinic {

  margin-bottom: 26px;

  padding-bottom: 22px;

  border-bottom: 1px solid rgba(198, 161, 91, 0.42);

}

.footer-clinic:last-child {

  margin-bottom: 0;

  padding-bottom: 0;

  border-bottom: none;

}

.footer-clinic strong {

  display: block;

  margin-bottom: 8px;

  color: #111111;

  font-family: 'Montserrat', 'Poppins', sans-serif;

  font-size: 13px;

  font-weight: 500;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}

.footer-column:last-child > p {

  margin-bottom: 14px;

}

.footer-column:last-child::before {

  content: "";

  display: block;

  width: 100%;

  height: 1px;

  background: rgba(198, 161, 91, 0.42);

  margin: 30px 0 26px;

}

/* ---------- 10B. FOOTER DECORATIVE OUTLINES ---------- */

.site-footer::before,

.site-footer::after {

  content: "";

  position: absolute;

  pointer-events: none;

  border: 1px solid rgba(198, 161, 91, 0.16);

  opacity: 0.92;

}

.site-footer::before {

  width: 980px;

  height: 620px;

  right: -240px;

  top: -40px;

  border-radius: 50% !important;

  transform: rotate(12deg);

}

.site-footer::after {

  width: 720px;

  height: 420px;

  right: 120px;

  top: 40px;

  border-radius: 50% !important;

  transform: rotate(8deg);

}

/* ---------- 10C. FOOTER CTA / LINKS ---------- */

.footer-map {

  display: inline-flex;

  margin-top: 10px;

  color: #b88932;

  font-size: 14px;

  font-weight: 300;

  letter-spacing: 0.04em;

  text-decoration: none;

}

.footer-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 250px;

  min-height: 36px;

  height: 36px;

  margin: 26px 0 0;

  padding: 0 22px;

  background: #b88932;

  border: 1px solid #b88932;

  color: #ffffff;

  font-family: 'Montserrat', 'Poppins', sans-serif;

  font-size: 11px;

  font-weight: 400;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  text-decoration: none;

}

.footer-cta:hover {

  background: transparent;

  color: #b88932;

}

.footer-map::after,

.footer-cta::after {

  content: "›";

  margin-left: 10px;

  font-size: 20px;

  line-height: 1;

  font-weight: 300;

}

/* ---------- 10D. FOOTER SOCIAL ICONS ---------- */

.footer-socials {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 22px;

}

.icon {

  width: 42px;

  height: 42px;

  border-radius: 50% !important;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  font-size: 18px;

  text-decoration: none;

}

.icon.instagram {

  background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #4f5bd5);

}

.icon.facebook {

  background: var(--v2-facebook);

}

.icon.whatsapp {

  background: var(--v2-whatsapp);

}

.icon.youtube {

  background: var(--v2-youtube);

}

.icon.twitter {

  background: #111111;

}

.icon.tiktok {

  background: #111111;

}

/* ---------- 10E. FOOTER COPYRIGHT ---------- */

.footer-bottom {

  position: relative;

  z-index: 2;

  margin-top: 42px;

  padding-top: 28px;

  color: #2d2a26;

  font-size: 11px;

  line-height: 1.8;

  text-align: center;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}

.footer-bottom::before {

  content: "";

  display: block;

  width: 100%;

  height: 1px;

  background: rgba(198, 161, 91, 0.48);

  margin-bottom: 26px;

}



/* =========================================================

   11. GLOBAL BUTTON SYSTEM

========================================================= */

.btn,

.global-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  padding: 13px 24px;

  border: 1px solid var(--v2-gold);

  background: transparent;

  color: var(--v2-charcoal);

  font-size: 11px;

  font-weight: 400;

  letter-spacing: 0.15em;

  line-height: 1;

  text-transform: uppercase;

  text-decoration: none;

  cursor: pointer;

  transition:

    background 0.3s ease,

    color 0.3s ease,

    border-color 0.3s ease,

    transform 0.25s ease;

}

.btn:hover,

.global-btn:hover {

  background: var(--v2-gold);

  color: var(--v2-white);

  transform: translateY(-1px);

}

.btn:focus-visible,

.global-btn:focus-visible {

  outline: 1px solid var(--v2-gold);

  outline-offset: 3px;

}

/* ---------- 11A. BUTTON ARROW SYSTEM ---------- */

.btn-arrow::after,

.global-btn-arrow::after {

  content: "›";

  margin-left: 10px;

  font-size: 18px;

  line-height: 1;

  font-weight: 300;

}


/* =========================================================

   12. GLOBAL UNDERLINE SYSTEM

========================================================= */

.hero-title-line::after {

  content: "";

  display: block;

  width: 80px;

  height: 4px;

  background: #ddb46a;

  margin-top: 22px;

}

/* ---------- 12A. LAPTOP / PC UNDERLINE ---------- */

@media (min-width: 1181px) {

  .hero-title-line::after {

    width: 100px;

    height: 5px;

  }

}


/* =========================================================

   13. RESPONSIVE SYSTEM

========================================================= */

/* ---------- 13A. iPAD / TABLET ---------- */

@media (max-width: 1180px) {

  .header-top {

    padding-left: 5%;

    padding-right: 5%;

    gap: 16px;

  }

  .header-main {

    padding-left: 5%;

    padding-right: 5%;

  }

  .header-contact {

    gap: 12px;

    font-size: 10px;

  }

  .header-consultation {

    padding: 7px 14px;

  }

  .site-logo img {

    width: auto;

    height: 60px;

    max-height: none;

  }

  .menu-inner {

    padding: 84px 7% 46px;

  }

  .footer-inner {

    grid-template-columns: 1.12fr 1fr 1fr;

    gap: 42px;

  }

  .footer-column:last-child {

    grid-column: auto;

  }

}

/* ---------- 13B. MOBILE ---------- */

@media (max-width: 700px) {

  .header-top {

    padding: 9px 5%;

    align-items: flex-start;

    gap: 8px;

  }

  .header-doctor-name {

    font-size: 12px;

    letter-spacing: 0.06em;

  }

  .header-contact {

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

    font-size: 9.5px;

  }

  .header-contact span:nth-child(2),

  .header-contact span:nth-child(3) {

    display: none;

  }

  .header-consultation {

    padding: 6px 10px;

    font-size: 9px;

  }

  .header-main {

    height: 66px;

  }

  body.is-scrolled .header-main {

    height: 60px;

  }

  .site-logo img,

  body.is-scrolled .site-logo img {

    width: auto;

    height: 54px;

    max-height: none;

  }

  .burger-btn {

    width: 42px;

    height: 42px;

  }

  .burger-btn span {

    width: 28px;

  }


  .menu-inner {

    padding: 84px 7% 38px;

  }

  .menu-logo img {

    max-height: 56px;

    margin-bottom: 30px;

  }

  .menu-nav {

    max-width: 100%;

  }

  .menu-nav a {

    font-size: 22px;

    padding: 13px 0;

  }

  .menu-bottom {

    grid-template-columns: 1fr;

    gap: 18px;

    font-size: 12px;

  }

  .menu-overlay::before {

    width: 420px;

    height: 170px;

    right: -190px;

    top: 18%;

  }

  .menu-overlay::after {

    width: 400px;

    height: 160px;

    right: -180px;

    bottom: 8%;

  }

  .floating-contact {

    right: 15px;

    width: 48px;

    height: 48px;

    font-size: 21px;

  }

html body a.float-whatsapp.floating-contact,

html body .float-whatsapp.floating-contact,

html body .floating-contact.float-whatsapp {

  top: 145px !important;

  bottom: auto !important;

  transform: none !important;

}

  .float-call {

    top: 70vh;

  }

  .site-footer {

    padding: 38px 7% 22px;

  }

  .footer-inner {

    grid-template-columns: 1fr;

    gap: 28px;

  }

  .footer-column:last-child {

    grid-column: auto;

  }

  .footer-logo img {

    width: 300px;

    max-width: 86%;

    height: auto;

    max-height: none;

    object-fit: contain;

    margin: 0 0 22px;

  }

  .footer-brand p,

  .footer-column p {

    line-height: 1.45;

    margin-bottom: 7px;

  }

  .footer-question {

    margin-bottom: 10px !important;

  }

  .footer-cta {

    min-width: 0;

    width: 100%;

    margin-top: 22px;

    height: 42px;

    min-height: 42px;

  }

  .footer-clinic {

    margin-bottom: 20px;

    padding-bottom: 18px;

  }

  .footer-column h3 {

    margin-bottom: 20px;

  }

  .footer-socials {

    margin-top: 18px;

  }

  .footer-bottom {

    margin-top: 30px;

    padding-top: 22px;

    font-size: 10.5px;

  }

}

/* ---------- 13C. LAPTOP / PC ---------- */

@media (min-width: 1181px) {

  .site-header {

    position: sticky;

    top: 0;

    transform: translateZ(0);

    backface-visibility: hidden;

    will-change: transform;

  }

  .header-top {

    padding: 16px 6%;

  }

  .header-doctor-name {

    font-size: 16px;

  }

  .header-contact {

    font-size: 12px;

  }

  .header-consultation {

    font-size: 11px;

    padding: 11px 30px;

  }

  .header-main {

    height: 78px;

    transition: none;

  }

  body.is-scrolled .header-main {

    height: 68px;

    transition: none;

  }

  .site-logo img {

    width: auto;

    height: 68px;

    max-height: none;

  }

}

/* ---------- 13D. ROUND ICON EXCEPTIONS ---------- */

.floating-contact,

.floating-contact a,

.float-contact a,

.whatsapp-float,

.phone-float,

.footer-socials a,

.social-icons a,

.icon {

  border-radius: 50% !important;

}


/* =========================================================

   GLOBAL FOOTER SOCIAL ICON FIX

========================================================= */

.footer-socials .icon,

.contact-footer-socials .icon {

  width: 42px !important;

  height: 42px !important;

  border-radius: 50% !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  overflow: hidden !important;

  text-decoration: none !important;

}

.footer-socials .icon i,

.contact-footer-socials .icon i {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: auto !important;

  height: auto !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: 17px !important;

  line-height: 1 !important;

}