@font-face {
  font-family: "Open Sans Regular";
  src: url("/fonts/opensans.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-new.ttf") format("truetype");
}

@font-face {
  font-family: "Aboreto Sans-serif";
  src: url("/fonts/aboreto.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito latin Sans";
  src: url("/fonts/nunito-latin.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto, Sans-serif";
  src: url("/fonts/roboto.woff2") format("woff2");
}

@font-face {
  font-family: "PT, Sans";
  src: url("/fonts/ptsans.woff2") format("woff2");
}

/* @font-face {
  font-family: "Open Sans Normal";
  src: url("/fonts/opensans-2.woff") format("woff");

} */

:root {
  --color-primary: #175b6b;
  --color-tertiary: #e7e0d9;
  --color-pinkish: #eee4e5;
  --color-grayish: #6f6f6f;

  --font-opensans: "Open Sans Regular";
  --font-nunito: "Nunito Sans";
  --font-aboreto: "Aboreto Sans-serif";
  --font-latin: "Nunito latin Sans";
  --font-roboto: "Roboto, Sans-serif";
  --font-pt: "PT, Sans";
}

/* ✅ Pure CSS keyframes (move outside) */
@keyframes opacity-nav {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes dropdown {
  0% { opacity: 0; transform: translateY(-10px) scaleY(0.95); transform-origin: top; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); transform-origin: top; }
}

body {
  font-family: "Open Sans Regular";
  scroll-behavior: smooth;
}

.testimonials__swiperInstance .swiper-pagination {
  position: relative;
  margin-top: 10px;
}

.testimonials__swiperInstance .swiper-pagination .swiper-pagination-bullet {
  background: white;
  opacity: 1;
}

.testimonials__swiperInstance
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #175b6b;
}

.home-header .swiper-pagination {
  bottom: 3px;
}

.home-header .swiper-pagination .swiper-pagination-bullet {
  background: white;
  opacity: 1;
}

.home-header
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #175b6b;
}
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #eee4e5;
  background-color: #000;
  border-radius: 999px;
}

.scrollbar::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
  border-radius: 999px;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px #eee4e5;
  background-color: #e7e0d9;
}
/* =============================
   Header (Dentist by the Green)
============================= */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.12);
}

/* Top bar */
.siteHeader__topbar {
  background: #175b6b;
  color: #fff;
  font-size: 15px;
  padding: 12px 0;
}

.siteHeader__topbarInner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.siteHeader__topbarLink {
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.siteHeader__topbarLink:hover {
  opacity: 0.85;
}

.siteHeader__topbarLink--desktopOnly {
  display: none;
}

/* Social buttons */
.siteHeader__social {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.siteHeader__socialBtn {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: #e7e0d9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.siteHeader__socialBtn--mobileOnly {
  display: flex;
}

.siteHeader__socialIcon {
  width: 15px;
  height: 15px;
}

/* Main */
.siteHeader__main {
  background: #fff;
  padding: 16px 0;
}

.siteHeader__mainInner {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.siteHeader__logo {
  width: 140px;
  height: auto;
}

/* Desktop nav */
.siteHeader__nav {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}

.siteHeader__navItem {
  position: relative;
}

.siteHeader__navLink,
.siteHeader__navBtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  text-transform: uppercase;
  font-size: 15px;
  color: #175b6b;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease;
}

.siteHeader__navBtn {
  background: transparent;
  border: 0;
}

.siteHeader__navLink:hover,
.siteHeader__navBtn:hover {
  color: #d0b1b1;
}

.siteHeader__navLink--active {
  color: #d0b1b1;
}

.siteHeader__caret {
  width: 16px;
  height: 16px;
  fill: #175b6b;
  flex: 0 0 auto;
}

/* Dropdown */
.siteHeader__dropdown {
  position: absolute;
  top: 35px;
  left: 0;
  z-index: 1000;
  width: 200px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  overflow: hidden;
}

.siteHeader__dropdown--open {
  display: block;
  animation: siteHeaderDropdownIn 180ms ease-out both;
}

@keyframes siteHeaderDropdownIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.siteHeader__dropdownItem {
  opacity: 0;
}

.siteHeader__dropdownItem--animate {
  animation: siteHeaderNavItemIn 240ms ease-out both;
}

@keyframes siteHeaderNavItemIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.siteHeader__dropdownLink {
  display: inline-block;
  width: 100%;
  padding: 8px;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  color: #175b6b;
  transition: background 300ms ease, color 300ms ease;
}

.siteHeader__dropdownLink:hover {
  background: #d0b1b1;
  color: #fff;
}

.siteHeader__dropdownLink--active {
  background: #d0b1b1;
  color: #fff;
}

/* Mobile nav area */
.siteHeader__mobileNav {
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .siteHeader__topbarLink--desktopOnly {
    display: inline;
  }

  .siteHeader__socialBtn--mobileOnly {
    display: none;
  }

  .siteHeader__nav {
    display: flex;
  }

  .siteHeader__mobileNav {
    display: none;
  }
}
/* =============================
   Mobile Sidebar
============================= */

.mobileSidebar {
  display: inline-flex;
}

.mobileSidebar__trigger {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.mobileSidebar__hamburger {
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: #175b6b;
}

/* Backdrop */
.mobileSidebar__backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
}

/* Panel */
.mobileSidebar__panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  overflow-y: auto;
  background: #175b6b;
  transform: translateX(-100%);
  transition: transform 500ms ease;
}

.mobileSidebar__panel--open {
  transform: translateX(0);
}

/* Close button */
.mobileSidebar__close {
  position: absolute;
  top: 32px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.mobileSidebar__close:hover {
  background: #e5e7eb;
  color: #111827;
}

.mobileSidebar__closeIcon {
  width: 20px;
  height: 20px;
  color: #175b6b;
}

/* Inner layout */
.mobileSidebar__inner {
  width: 100%;
  display: grid;
  align-items: center;
  gap: 8px;
}

.mobileSidebar__brand {
  background: #fff;
  padding: 16px;
}

.mobileSidebar__logo {
  width: 80%;
  cursor: pointer;
}

@media (min-width: 640px) {
  .mobileSidebar__logo {
    width: 188px;
  }
}

/* Nav */
.mobileSidebar__nav {
  display: flex;
  flex-direction: column;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Dropdown */
.mobileSidebar__item {
  position: relative;
}

.mobileSidebar__dropdownBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 17px;
  cursor: pointer;
  transition: color 200ms ease;
  color: #fff;
}

.mobileSidebar__dropdownBtn--active {
  color: #d0b1b1;
}

.mobileSidebar__dropdownIcon {
  margin-right: 20px;
  max-width: 30px;
  max-height: 30px;
  border-radius: 999px;
  border: 1px solid #fff;
  transition: transform 200ms ease;
}

.mobileSidebar__dropdownIcon--open {
  transform: rotate(180deg);
}

.mobileSidebar__submenu {
  padding: 0 16px;
  background: #eee4e5;
  list-style: none;
  margin: 0;
}

.mobileSidebar__submenuItem {
  padding: 2px 0; /* py-0.5 */
}

.mobileSidebar__submenuLink {
  display: block;
  text-decoration: none;
}

.mobileSidebar__submenuText {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 12px; /* px-3 py-1.5 */
  font-size: 13px;
  text-transform: uppercase;
  transition: color 300ms ease;
  color: #000;
}

.mobileSidebar__submenuText:hover {
  color: #d0b1b1;
}

.mobileSidebar__submenuText--active {
  color: #175b6b;
}

/* Regular links */
.mobileSidebar__linkItem {
  padding: 16px 0; /* py-4 */
}

.mobileSidebar__link {
  display: block;
  text-decoration: none;
}

.mobileSidebar__linkText {
  display: inline-block;
  text-transform: uppercase;
  font-size: 17px;
  padding-left: 16px;
  transition: color 200ms ease;
  color: #fff;
}

.mobileSidebar__linkText:hover {
  color: #d0b1b1;
}

.mobileSidebar__linkText--active {
  color: #d0b1b1;
}

/* Accessibility helper */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Transition class hooks for HeadlessUI (kept as plain CSS) */
.mobileSidebar__transitionEnter {
  transition: transform 400ms ease-out, opacity 400ms ease-out;
}
.mobileSidebar__transitionEnterFrom {
  transform: scale(0.98);
  opacity: 0;
}
.mobileSidebar__transitionEnterTo {
  transform: scale(1);
  opacity: 1;
}

.mobileSidebar__transitionLeave {
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.mobileSidebar__transitionLeaveFrom {
  transform: scale(1);
  opacity: 1;
}
.mobileSidebar__transitionLeaveTo {
  transform: scale(0.98);
  opacity: 0;
}
/* =============================
   Footer
============================= */

.siteFooter {
  background: #175b6b;
  color: #fff;
  padding: 40px 0; /* py-10 */
  position: relative;
  font-size: 14px;
}

/* Floating WhatsApp */
.siteFooter__floatWrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}

.siteFooter__whatsapp {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
}

/* Floating Book Online tab */
.siteFooter__bookWrap {
  position: relative;
  z-index: 1000;
}

.siteFooter__bookTab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 1000;
  display: inline-flex;
  padding: 24px 8px; /* px-2 py-6 */
  background: #175b6b;
  color: #fff;
  text-decoration: none;
  border-top-left-radius: 24px;  /* rounded-l-3xl */
  border-bottom-left-radius: 24px;
  box-shadow: 0 0 12px #fff;
}

.siteFooter__bookText {
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  letter-spacing: 0.5px;
}

/* Grid */
.siteFooter__grid {
  display: flex;
  flex-direction: column;
  gap: 16px; /* gap-4 */
}

.siteFooter__col {
  width: 100%;
}

/* Logo column */
.siteFooter__logoStack {
  display: flex;
  flex-direction: column;
  gap: 24px; /* gap-6 */
}

.siteFooter__logo {
  width: 100%;
  max-width: 333px;
  height: auto;
}

/* Meta */
.siteFooter__meta {
  font-family: var(--font-nunito, inherit);
}

.siteFooter__metaLink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 200ms ease;
}

.siteFooter__metaLink:hover {
  opacity: 0.85;
}

/* Links */
.siteFooter__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* gap-4 */
  font-family: var(--font-opensans, inherit);
}

.siteFooter__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.siteFooter__link:hover {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contact */
.siteFooter__contact {
  display: block;
}

.siteFooter__contactRow {
  display: block;
}

.siteFooter__contactLink {
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.siteFooter__contactLink:hover {
  opacity: 0.85;
}

/* Social */
.siteFooter__social {
  display: flex;
  gap: 16px; /* gap-4 */
}

.siteFooter__socialBtn {
  width: 40px;
  height: 40px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.siteFooter__socialIcon {
  width: 22px;
  height: 22px;
}

.siteFooter__socialBtn--mobileOnly {
  display: inline-flex;
}

.siteFooter__meta--desktop,
.siteFooter__contactRow--desktop,
.siteFooter__contactRow--desktopPhone {
  display: none;
}

.siteFooter__meta--mobile {
  display: block;
  text-align: center;
}

/* md: >= 768px */
@media (min-width: 768px) {
  .siteFooter__grid {
    flex-direction: row;
    gap: 0; /* md:gap-0 */
  }

  .siteFooter__col--logo {
    width: 50%; /* md:w-1/2 */
    order: 1;
  }

  .siteFooter__col--links {
    width: 24.665%;
    order: 2;
  }

  .siteFooter__col--contact {
    width: 25%;
    order: 3;
  }

  .siteFooter__logoStack {
    padding-right: 40px; /* md:pr-10 */
  }

  .siteFooter__meta--desktop {
    display: block;
  }

  .siteFooter__meta--mobile {
    display: none;
  }

  .siteFooter__contactRow--desktop {
    display: block;
    margin-bottom: 24px; /* md:mb-6 */
  }

  .siteFooter__contactRow--desktopPhone {
    display: block;
    margin-bottom: 12px; /* md:mb-3 */
  }
}

/* lg: >= 1024px */
@media (min-width: 1024px) {
  .siteFooter__socialBtn--mobileOnly {
    display: none;
  }
}
/* =============================
   Promo / Landing Header
============================= */

.promoHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.12);
}

/* Top bar */
.promoHeader__topbar {
  background: #175b6b;
  color: #fff;
  padding: 12px 0; /* py-3 */
  font-size: 15px;
}

.promoHeader__topbarInner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.promoHeader__promoText {
  color: #fff;
  text-align: center;
  font-family: var(--font-aboreto, inherit);
  font-size: 20px; /* text-xl */
  line-height: 1.2;
  margin: 0;
}

/* Main */
.promoHeader__main {
  background: #fff;
  padding: 16px 0; /* py-4 */
}

.promoHeader__row {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px; /* gap-20 */
  justify-content: center;
}

.promoHeader__logo {
  width: 140px;
  height: auto;
}

/* Right side */
.promoHeader__right {
  display: flex;
  align-items: center;
  gap: 32px; /* gap-8 */
}

.promoHeader__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* gap-2 */
  color: #000;
  text-decoration: none;
  font-size: 18px; /* text-lg */
  transition: opacity 200ms ease;
}

.promoHeader__phone:hover {
  opacity: 0.85;
}

.promoHeader__phoneIcon {
  width: 35px;
  height: 35px;
}

.promoHeader__ctaBtn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.promoHeader__ctaBtn:hover {
  background: #a3a695;
}

/* CTA visibility */
.promoHeader__cta--desktop {
  display: none;
}

.promoHeader__cta--mobile {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* mt-5 */
}

/* =============================
   Responsive
============================= */

/* lg: >= 1024px */
@media (min-width: 1024px) {
  .promoHeader__promoText {
    font-size: 24px; /* lg:text-2xl */
  }

  .promoHeader__row {
    justify-content: space-between; /* lg:justify-between */
  }

  .promoHeader__cta--desktop {
    display: block;
  }

  .promoHeader__cta--mobile {
    display: none;
  }
}
/* =============================
   Reusable Component: Accordion
============================= */

.uiAccordion {
  padding: 40px 0;          /* py-10 */
  background: #e7e0d9;
}

.uiAccordion__header {
  text-align: center;
}

.uiAccordion__title {
  color: #175b6b;
  font-weight: 500;
  margin-bottom: 20px;      /* mb-5 */
  font-size: 30px;          /* text-[30px] */
  line-height: 1.2;
}

.uiAccordion__para {
  font-family: var(--font-opensans, inherit);
  font-size: 16px;          /* text-base */
  font-weight: 400;
  color: #4d4d4d;
  margin: 0 0 16px;         /* mb-4 */
  display: flex;
  flex-direction: column;
  gap: 16px;                /* gap-4 */
  text-align: center;
}

/* Grid area */
.uiAccordion__grid {
  display: grid;
  gap: 20px;                /* gap-5 */
  place-items: center;
}

@media (min-width: 1024px) {
  .uiAccordion__grid {
    grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
  }

  .uiAccordion__title {
    font-size: 38px;         /* lg:text-[38px] */
  }
}

/* Media */
.uiAccordion__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.uiAccordion__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Content stack */
.uiAccordion__stack {
  display: flex;
  flex-direction: column;
  gap: 12px;               /* gap-3 */
}

/* Panel animation container */
.uiAccordion__panel {
  overflow: hidden;
  transition: max-height 300ms ease-in-out;
}

.uiAccordion__text {
  margin-top: 4px;         
  font-size: 16px;         
  font-family: var(--font-opensans, inherit);
  color: #4b5563;          
  line-height: 1.6;
}
/* =============================
   Reusable Section: Treatments Banner
============================= */

.treatBanner {
  position: relative;
  padding: 20px 0; /* py-5 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -400px center; /* mobile default */
}

/* overlay */
.treatBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.17); /* #0000002B */
}

/* content wrapper */
.treatBanner__inner {
  position: relative; /* keep content above overlay */
  min-height: 550px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Typography */
.treatBanner__title {
  font-size: 38px;
  font-family: var(--font-aboreto, inherit);
  color: #175b6b;
  margin: 0;
  line-height: 1.15;
}

.treatBanner__subtitle {
  font-size: 25px;
  font-family: var(--font-aboreto, inherit);
  color: #fff;
  margin: 0 0 16px; /* mb-4 */
  position: relative;
  line-height: 1.2;
}

.treatBanner__text {
  color: #4d4d4d;
  font-family: var(--font-pt, inherit);
  font-size: 18px;
  margin: 0;
  line-height: 1.6;
}

/* CTA */
.treatBanner__cta {
  position: relative;
  margin-top: 16px; /* mt-4 */
  width: fit-content;
  background: #175b6b;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.treatBanner__cta:hover {
  background: #a3a695;
}

@media (min-width: 1024px) {
  .treatBanner {
    background-position: right center; /* lg:bg-[center_right] */
  }
}
/* =============================
   Reusable Section: Banner
============================= */

.siteBanner {
  padding: 20px 0; /* py-5 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -300px center; /* mobile default */
}

.siteBanner__inner {
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Typography */
.siteBanner__title {
  font-size: 40px;
  font-family: var(--font-aboreto, inherit);
  color: #175b6b;
  line-height: 1.05;
}

.siteBanner__subtitle {
  font-size: 25px;
  font-family: var(--font-aboreto, inherit);
  margin: 0 0 8px; /* mb-2 */
  width: 100%;
  line-height: 1.2;
}

.siteBanner__text {
  color: #4d4d4d;
  font-family: var(--font-opensans, inherit);
  font-size: 18px;
  width: 100%;
  margin: 0;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  .siteBanner {
    background-position: right center; /* lg:bg-[center_right] */
  }

  .siteBanner__subtitle {
    width: 50%; /* lg:w-[50%] */
  }

  .siteBanner__text {
    width: 50%; /* lg:w-[50%] */
  }
}
/* =============================
   Reusable UI: Button
============================= */

.uiBtn {
  display: inline-block;
  border-radius: 3px;
  padding: 8px 24px; /* px-6 py-2 */
  text-align: center;
  text-decoration: none;
  font-family: var(--font-roboto, inherit);
  transition: all 300ms ease;
  cursor: pointer;
}

/* Optional utility-like variants (use when you want) */
.uiBtn--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.uiBtn--fit {
  width: fit-content;
}

.uiBtn--primary {
  background: #175b6b;
  color: #fff;
}

.uiBtn--primary:hover {
  background: #a3a695; /* your current hover color used in banners */
}

.uiBtn--muted {
  background: #809ca5;
  color: #fff;
}

.uiBtn--muted:hover {
  background: #a3a695;
}
.uiContainer {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px; 
  padding-right: 20px;
}
/* =============================
   Reusable UI: Headings
============================= */

.uiH2 {
  font-family: var(--font-aboreto, inherit);
  line-height: 1.2;
}

/* Optional helpers (use when needed) */
.uiTextCenter {
  text-align: center;
}

.uiTextPrimary {
  color: #175b6b;
}

.uiFontMedium {
  font-weight: 500;
}

.uiMb5 {
  margin-bottom: 20px; /* mb-5 */
}

/* Size helpers */
.uiH2--30 {
  font-size: 30px;
}

.uiH2--38 {
  font-size: 38px;
}

@media (min-width: 1024px) {
  .uiH2--lg38 {
    font-size: 38px;
  }
}
/* =============================
   Reusable Section: Cost Payment
============================= */

.costPayment {
  padding: 40px 0; /* py-10 */
}

.costPayment__inner {
  display: flex;
  flex-direction: column;
  gap: 20px; /* gap-5 */
}

/* Title */
.costPayment__title {
  font-size: 30px;
  color: #175b6b;
  margin: 0;
}

@media (min-width: 1024px) {
  .costPayment__title {
    font-size: 38px;
  }
}

/* Body */
.costPayment__text {
  font-size: 16px; /* text-base */
  margin: 0;
  line-height: 1.7;
}

/* CTA alignment */
.costPayment__ctaWrap {
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .costPayment__ctaWrap {
    justify-content: flex-start;
  }
}
.costPayment__ctaBtn {
  width: fit-content;
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.costPayment__ctaBtn:hover {
  background: #a3a695;
}
/* =============================
   Reusable Section: Dental Care Treatment
============================= */

.dentalCare {
  padding: 40px 0; /* py-10 */
  background-size: cover;
  background-position: center;
}

/* Panel layout */
.dentalCare__panel {
  display: flex;
  flex-direction: column;
  gap: 20px; /* gap-5 */
  padding-left: 0;
  padding-right: 0;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .dentalCare__panel {
    flex-direction: row; /* lg:flex-row */
    gap: 72px; /* lg:gap-18 => 18 * 4 = 72px */
    padding-left: 20px;  /* lg:px-5 */
    padding-right: 20px;
  }
}

/* Reverse on desktop */
@media (min-width: 1024px) {
  .dentalCare__panel--reverse {
    flex-direction: row-reverse;
  }
}

/* When background exists, you were adding card-like rounding + min-height on lg */
.dentalCare__panel--withBgCard {
  border-radius: 24px; /* rounded-3xl */
  height: auto;
}

@media (min-width: 1024px) {
  .dentalCare__panel--withBgCard {
    min-height: 300px; /* lg:min-h-[300px] */
  }
}

/* Side column */
.dentalCare__side {
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .dentalCare__side {
    width: 40%; /* lg:w-[40%] */
  }
}

/* Main column */
.dentalCare__main {
  width: 100%;
  flex: 1 1 auto;
}

/* Title */
.dentalCare__title {
  margin: 0 0 20px; /* mb-5 */
  color: #175b6b;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  font-family: var(--font-aboreto, inherit);
}

@media (min-width: 1024px) {
  .dentalCare__title {
    font-size: 38px;
  }
}

/* Subtitle */
.dentalCare__subTitle {
  margin: 0 0 10px;
  font-size: 18px; /* text-lg */
  font-family: var(--font-opensans, inherit);
  font-weight: 700;
  color: #175b6b;
}

/* Text blocks */
.dentalCare__textBlock {
  font-family: var(--font-opensans, inherit);
  color: #4d4d4d;
  font-size: 16px; /* text-base */
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 16px; /* gap-4 */
  line-height: 1.7;
}

.dentalCare__textBlock p {
  margin: 0;
}

/* List */
.dentalCare__list {
  list-style: disc;
  padding-left: 16px; /* ps-4 */
  margin: 16px 0;     /* my-4 */
  display: flex;
  flex-direction: column;
  gap: 8px;           /* gap-2 */
  font-family: var(--font-opensans, inherit);
  font-size: 16px;
}

.dentalCare__list li::marker {
  color: #175b6b; /* marker:text-primary */
}
.dental-care {
  padding-top: 40px;
  padding-bottom: 40px;
}

.dental-care__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Desktop layout */
@media (min-width: 1024px) {
  .dental-care__grid {
    flex-direction: row;
    gap: 88px; /* matches lg:gap-22 (22 * 4px) */
    align-items: flex-start;
  }
}

.dental-care__left {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .dental-care__left {
    width: 40%;
  }
}

.dental-care__title {
  margin-bottom: 20px;
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .dental-care__title {
    font-size: 45px;
  }
}

.dental-care__btnWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .dental-care__btnWrap {
    justify-content: flex-start;
  }
}

/* Button styling (kept same look as Tailwind version) */
.dental-care__btn {
  background: #809ca5;
  color: #ffffff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  border: none;
  transition: background 0.25s ease;
}

.dental-care__btn:hover {
  background: #a3a695;
}

.dental-care__right {
  flex: 1 1 auto;
}

.dental-care__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #4d4d4d;
  font-size: 18px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.dentalCare__listItem {
  position: relative;
}

/* CTA wrapper */
.dentalCare__ctaWrap {
  display: flex;
  align-items: center;
  justify-content: center; /* default mobile center */
}

@media (min-width: 1024px) {
  .dentalCare__ctaWrap {
    justify-content: flex-start; /* lg:justify-start */
  }
}

.dentalCare__ctaWrap--main {
  padding-top: 16px; /* pt-4 */
}

/* Button */
.dentalCare__btn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.dentalCare__btn:hover {
  background: #a3a695;
}
/* =============================
   Reusable Section: FAQs (HeadlessUI Disclosure)
============================= */

.faqsBlock {
  padding-top: 40px; /* pt-10 */
}

.faqsBlock__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px; /* gap-9 */
}

/* Group title */
.faqsBlock__groupTitle {
  font-size: 30px;
  text-align: center;
  font-weight: 500;
  color: #175b6b;
  margin: 0 0 20px; /* mb-5 */
}

@media (min-width: 1024px) {
  .faqsBlock__groupTitle {
    font-size: 38px;
  }
}

/* Item */
.faqsBlock__item {
  width: 100%;
}

/* Button */
.faqsBlock__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px; /* px-3 py-1 */
  text-align: left;
  cursor: pointer;
  background: #175b6b;
  color: #fff;
}

.faqsBlock__question {
  margin: 0;
  font-family: var(--font-aboreto, inherit);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
}

@media (min-width: 1024px) {
  .faqsBlock__question {
    font-size: 20px;
  }
}

/* Plus/Minus icon */
.faqsBlock__icon {
  position: relative;
  width: 40px; /* w-10 */
  height: 24px;
  flex: 0 0 auto;
}

/* horizontal line */
.faqsBlock__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 4px; /* h-1 but visually nicer */
  transform: translate(-50%, -50%);
  background: #fff;
}

/* vertical line (hidden when open => minus) */
.faqsBlock__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 16px; /* h-4 */
  transform: translate(-50%, -50%);
  background: #fff;
  opacity: 1;
  transition: opacity 200ms ease;
}

.faqsBlock__icon--open::before {
  opacity: 0;
}

/* Panel wrap */
.faqsBlock__panelWrap {
  overflow: hidden;
  padding: 8px 0; /* py-2 */
}

/*
  HeadlessUI v2 uses data attributes like data-headlessui-state="open"
  With `transition`, it also toggles `data-closed` on the panel.
  We mimic your Tailwind: data-closed:-translate-y-6 data-closed:opacity-0
*/
.faqsBlock__panel {
  transform-origin: top;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

/* When closed (HeadlessUI adds [data-closed]) */
.faqsBlock__panel[data-closed] {
  transform: translateY(-24px); /* -translate-y-6 (6*4=24px) */
  opacity: 0;
}

/* Content */
.faqsBlock__content {
  display: block;
}

.faqsBlock__text {
  color: #4d4d4d;
  font-family: var(--font-opensans, inherit);
  font-size: 16px;
  margin: 0;
  line-height: 1.7;
}
.faqsBlock__bullets {
  list-style: disc;
  padding-left: 24px; 
  margin: 16px 0;     
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #333;
}

.faqsBlock__bullets li::marker {
  color: #175b6b;
}

.faqsBlock__bulletItem {
  font-size: 16px;
  font-family: var(--font-opensans, inherit);
  margin: 0;
}
/* =============================
   Reusable Component: Image Comparison Slider
============================= */

.imgCompare {
  width: 100%;
}

/* Optional title above slider */
.imgCompare__title {
  font-size: 30px; /* text-3xl */
  font-family: var(--font-aboreto, inherit);
  margin: 0 0 20px; /* mb-5 */
  text-align: center;
  padding: 8px 0; /* py-2 */
  border-radius: 2px; /* rounded-sm */
  color: #fff;
  line-height: 1.2;
}

.imgCompare__title--primary {
  background: #175b6b;
}

.imgCompare__title--alt {
  background: #31899e;
}

/* Stage */
.imgCompare__stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Frame holds both images */
.imgCompare__frame {
  position: relative;
  width: 100%;
  display: grid;
}

/* Both images share same styling */
.imgCompare__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px; /* rounded-2xl */
  display: block;
}

/* After image wrapper (clipped) */
.imgCompare__afterWrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Invisible range input over whole slider */
.imgCompare__range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  cursor: ew-resize;
  opacity: 0;
}

/* Divider */
.imgCompare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 3px;
  background: #175b6b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* shadow-sm */
  pointer-events: none;
  transform: translateX(-50%);
}

/* Handle */
.imgCompare__handle {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 4px; /* p-1 */
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* shadow-md */
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* ===================================
   Reusable Component: Image Comparison (Grid Version)
=================================== */

.imgCompareGrid {
  width: 100%;
  margin: 20px 40px; /* my-5 mx-10 */
}

/* Default responsive width */
@media (min-width: 768px) {
  .imgCompareGrid--normal {
    flex: 0 0 calc(40% - 0.625rem);
  }
}

@media (min-width: 1024px) {
  .imgCompareGrid--normal {
    width: 50%;
  }
}

/* Force full width */
.imgCompareGrid--full {
  width: 100%;
}

/* Title */
.imgCompareGrid__title {
  font-size: 30px;
  font-family: var(--font-aboreto, inherit);
  text-align: center;
  padding: 8px 0;
  border-radius: 2px;
  margin: 0 0 20px;
  color: #fff;
}

.imgCompareGrid__title--primary {
  background: #175b6b;
}

.imgCompareGrid__title--alt {
  background: #31899e;
}

/* Stage */
.imgCompareGrid__stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Frame */
.imgCompareGrid__frame {
  position: relative;
  width: 100%;
  display: grid;
}

/* Images */
.imgCompareGrid__img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* After image clipped */
.imgCompareGrid__afterWrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Invisible range input */
.imgCompareGrid__range {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 2;
  opacity: 0;
  cursor: ew-resize;
}

/* Divider line */
.imgCompareGrid__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #175b6b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.imgCompareGrid__handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  pointer-events: none;
}
/* =============================
   Reusable Section: Journey CTA
============================= */

.journeyCta {
  padding: 40px 0; /* py-10 */
}

.journeyCta__card {
  background: var(--color-pinkish, #f3dfe0); /* bg-pinkish */
  margin-left: 8px;  /* mx-2 */
  margin-right: 8px;
  border-radius: 32px; /* rounded-4xl (Tailwind 4xl = 2rem = 32px) */
  padding: 28px; /* p-7 */
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .journeyCta__card {
    margin-left: 16px; /* sm:mx-4 */
    margin-right: 16px;
  }
}

@media (min-width: 1024px) {
  .journeyCta__card {
    padding: 40px; /* lg:p-10 */
  }
}

/* Icon */
.journeyCta__icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* Title */
.journeyCta__title {
  color: #175b6b;
  font-size: 30px;
  margin: 0 0 8px; /* mb-2 */
  text-align: center;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .journeyCta__title {
    font-size: 35px;
  }
}

/* Text */
.journeyCta__text {
  color: #4d4d4d;
  font-family: var(--font-opensans, inherit);
  font-size: 18px; /* text-lg */
  margin: 0 0 12px; /* mb-3 */
  text-align: center;
  line-height: 1.7;
}

@media (min-width: 1024px) {
  .journeyCta__text {
    text-align: left; /* lg:text-left */
  }
}

/* Buttons row */
.journeyCta__btnRow {
  display: flex;
  flex-direction: column;
  gap: 20px; /* gap-5 */
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .journeyCta__btnRow {
    flex-direction: row;
    width: auto;
  }
}

/* Button */
.journeyCta__btn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.journeyCta__btn:hover {
  background: #a3a695;
}

/* Button text swap */
.journeyCta__btnText--desktop {
  display: none;
}

.journeyCta__btnText--mobile {
  display: block;
}
@media (min-width: 1024px) {
  .journeyCta__btnText--desktop {
    display: block;
  }
  .journeyCta__btnText--mobile {
    display: none;
  }
}
/* =============================
   Reusable Section: Make Enquiry (Formik Form)
============================= */

.makeEnquiry {
  padding-bottom: 40px;     /* pb-10 */
  scroll-margin-top: 160px; /* scroll-mt-40 (40*4 = 160px) */
}

.makeEnquiry__shell {
  border: 8px solid #809ca5;
  background: #fff;
  border-radius: 32px; /* rounded-4xl */
  padding: 12px;       /* p-3 */
}

@media (min-width: 1024px) {
  .makeEnquiry__shell {
    padding: 40px; /* lg:p-10 */
  }
}

.makeEnquiry__layout {
  display: flex;
  flex-direction: column;
  gap: 32px; /* gap-8 */
}

@media (min-width: 1024px) {
  .makeEnquiry__layout {
    flex-direction: row;
  }
}

/* Left card */
.makeEnquiry__card {
  width: 100%;
  background: #ddd6d5;
  padding: 20px 28px; /* py-5 px-7 */
  border-radius: 32px; /* rounded-4xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15), 0 4px 6px -4px rgba(0,0,0,0.15); /* shadow-lg */
}

/* Title */
.makeEnquiry__title {
  color: #175b6b;
  font-weight: 500;
  font-size: 36px;
  line-height: 45px; /* leading-[45px] */
  margin: 0 0 20px;  /* mb-5 */
}

/* Form layout */
.makeEnquiry__form {
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
}

.makeEnquiry__field {
  display: flex;
  flex-direction: column;
  gap: 4px; /* gap-1 */
}

.makeEnquiry__label {
  font-family: var(--font-nunito, inherit);
  color: #111;
}

.makeEnquiry__req {
  color: #b30000;
}

/* Inputs */
.makeEnquiry__input {
  height: 43px;
  padding: 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
  color: #696565;
  outline: none;
  font-family: var(--font-nunito, inherit);
}

.makeEnquiry__input::placeholder {
  color: #fff;
}

/* Textarea */
.makeEnquiry__textarea {
  width: 100%;
  height: 120px;
  padding: 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #fff;
  color: #696565;
  outline: none;
  resize: vertical;
  font-family: var(--font-nunito, inherit);
}

.makeEnquiry__textarea::placeholder {
  color: #fff;
}

/* Errors */
.makeEnquiry__error {
  color: #b30000;
  font-weight: 700;
  margin-top: 8px; /* mt-2 */
  font-size: 14px; /* text-sm */
}

/* Privacy row */
.makeEnquiry__privacyRow {
  display: flex;
  gap: 8px;     /* gap-2 */
  margin-top: 20px; /* mt-5 */
  align-items: flex-start;
}

.makeEnquiry__checkbox {
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.makeEnquiry__privacyText {
  font-family: var(--font-nunito, inherit);
  color: #111;
  line-height: 1.5;
}

.makeEnquiry__privacyLink {
  text-decoration: underline;
  color: inherit;
}

/* Submit */
.makeEnquiry__submitWrap {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* mt-5 */
}

.makeEnquiry__submit {
  width: 100%;
  background: #809ca5;
  color: #fff;
  font-size: 18px; /* text-lg */
  font-family: var(--font-nunito, inherit);
  text-transform: uppercase;
  padding: 16px 0; /* py-4 */
  border-radius: 16px; /* rounded-2xl */
  border: 0;
  cursor: pointer;
  transition: background 200ms ease;
}

.makeEnquiry__submit:hover {
  background: #175b6b;
}

.makeEnquiry__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
/* =============================
   Reusable Section: Location CTA
============================= */

.locationCta {
  background: var(--color-pinkish, #f3dfe0); /* bg-pinkish */
  padding: 40px 0; /* py-10 */
}

/* Layout: stack on mobile, grid on md */
.locationCta__grid {
  display: flex;
  flex-direction: column;
  gap: 36px; /* gap-9 */
}

@media (min-width: 768px) {
  .locationCta__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: center;
  }
}

.locationCta__col {
  width: 100%;
}

/* Titles */
.locationCta__title {
  color: #175b6b;
  font-size: 30px;
  margin: 0 0 8px; /* mb-2 */
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .locationCta__title {
    font-size: 35px;
  }
}

/* Text */
.locationCta__text {
  color: #4d4d4d;
  margin: 0 0 16px; /* mb-4 */
  line-height: 1.7;
  font-family: var(--font-opensans, inherit);
  font-size: 16px;
}

/* List */
.locationCta__list {
  list-style: disc;
  padding-left: 20px; /* ps-5 */
  margin: 0;
  color: #4d4d4d;
  font-family: var(--font-opensans, inherit);
  font-size: 16px;
}

.locationCta__listItem {
  margin: 6px 0;
}

.locationCta__list li::marker {
  color: #4d4d4d; /* marker:text-[#4D4D4D] */
}

/* Extra paragraph blocks */
.locationCta__block {
  margin-top: 16px; /* mt-4 */
}

/* CTA align */
.locationCta__ctaWrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (min-width: 768px) {
  .locationCta__ctaWrap {
    justify-content: flex-start; 
  }
}
.locationCta__btn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.locationCta__btn:hover {
  background: #a3a695;
}
/* =============================
   Reusable Component: Partners With (Swiper)
============================= */

.partnersWith {
  width: 100%;
}

.partnersWith__swiper {
  width: 100%;
}

.partnersWith__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.partnersWith__logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
/* =============================
   Reusable Component: Popup Content Modal
============================= */

.popupContent {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button */
.popupContent__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10000;
  width: 48px;   /* h-12 w-12 */
  height: 48px;
  border-radius: 999px;
  border: 4px solid #fff;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.popupContent__close:focus {
  outline: none;
}

.popupContent__closeIcon {
  width: 30px;
  height: 30px;
}

@media (min-width: 1024px) {
  .popupContent__closeIcon {
    width: 40px;
    height: 40px;
  }
}

/* Modal */
.popupContent__modal {
  position: relative;
  width: 91.6667%; /* w-11/12 */
  max-height: 90%;
  background: #175b6b;
  border-radius: 16px; /* rounded-2xl */
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px; /* gap-4 */
  padding: 8px; /* p-2 */
  animation: popupContentScaleUp 220ms ease-out;
}

@media (min-width: 1024px) {
  .popupContent__modal {
    max-width: 800px;
    padding: 16px 16px; /* lg:p-4 */
    padding-top: 24px;  /* lg:py-6 */
    padding-bottom: 24px;
  }
}

/* Left column */
.popupContent__left {
  width: 40%;
  flex-shrink: 0;
  margin: 0 auto 8px;
}

.popupContent__image {
  width: 100%;
  object-fit: cover;
  object-position: left;
  display: block;
}

@media (min-width: 768px) {
  .popupContent__image {
    object-position: center;
  }
}

/* Meta */
.popupContent__meta {
  color: #fff;
  margin-top: 12px; /* mt-3 */
}

.popupContent__name {
  margin: 0 0 12px; /* mb-3 */
  font-size: 30px; /* text-3xl */
  text-align: center;
  line-height: 1.2;
}

.popupContent__credentials {
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.popupContent__regLink {
  color: inherit;
  text-decoration: underline;
  display: inline-block;
  margin-left: 6px;
}

/* CTA */
.popupContent__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px; /* m-1.5 */
}

.popupContent__btn {
  background: #809ca5;
  color: #fff;
  border-radius: 32px; /* rounded-4xl look */
  transition: background 200ms ease, color 200ms ease;
}

.popupContent__btn:hover {
  background: var(--color-pinkish, #f3dfe0);
  color: #000;
}

/* Right column */
.popupContent__right {
  flex: 1 1 auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Scroll area */
.popupContent__scroll {
  height: 400px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Optional: minimal scrollbar styling */
.popupContent__scroll::-webkit-scrollbar {
  width: 8px;
}

.popupContent__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.popupContent__scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
}

.popupContent__para {
  margin: 0 0 16px;
  line-height: 1.7;
}

@keyframes popupContentScaleUp {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* =============================
   Reusable Component: Poster Modal
============================= */

.posterModal {
  position: relative;
}

/* Overlay */
.posterModal__overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card */
.posterModal__card {
  background: #fff;
  padding: 16px; /* p-4 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Image wrapper */
.posterModal__imageWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.posterModal__image {
  width: 90%;
  max-width: 100%;
  border-radius: 8px; /* rounded-lg */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
  cursor: pointer;
}

@media (min-width: 768px) {
  .posterModal__image {
    width: 450px; /* md:w-[450px] */
  }
}

/* Close button */
.posterModal__closeBtn {
  margin-top: 20px; /* mt-5 */
  background: #175b6b;
  color: #fff;
  font-weight: 600; /* font-semibold */
  padding: 8px 24px; 
  border-radius: 999px; 
  cursor: pointer;
  border: 1px solid #175b6b;
  transition: background 200ms ease, color 200ms ease;
  font-size: 18px; 
  letter-spacing: 0.04em; 
}

.posterModal__closeBtn:hover {
  background: transparent;
  color: #175b6b;
}
/* =============================
   Reusable Section: Real Smile
============================= */

.realSmile {
  padding: 40px 0; /* py-10 */
  background: #e7e0d9; /* bg-tertiary */
}

.realSmile--bgWhite {
  background: #fff; /* bg-white */
}

/* Main grid */
.realSmile__grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 20px; /* gap-5 */
  align-items: center;
}

@media (min-width: 1024px) {
  .realSmile__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
    gap: 88px; /* lg:gap-22 (22*4px) */
  }
}

/* Title */
.realSmile__title {
  font-size: 35px;
  color: #175b6b;
}

@media (min-width: 1024px) {
  .realSmile__title {
    font-size: 38px;
  }
}

/* Quote */
.realSmile__quote {
  font-style: italic;
  margin: 0;
}

.realSmile__author {
  color: #175b6b;
  font-size: 16px; /* text-base */
  font-weight: 700; /* font-bold */
}

/* Images grid */
.realSmile__imagesGrid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 20px; /* gap-5 */
}

@media (min-width: 768px) {
  .realSmile__imagesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
}

/* Card */
.realSmile__card {
  background: #175b6b; /* bg-primary */
  border-radius: 24px; /* rounded-3xl */
  padding: 4px; /* p-1 */
}

/* Image */
.realSmile__img {
  width: 100%;
  height: auto;
  border-radius: 24px; /* rounded-3xl */
  display: block;
}
.realSmile__label {
  color: #fff; 
  font-weight: 500; 
  text-align: center;
  margin: 0;
}
/* =============================
   Reusable Component: Simple Button
============================= */

.simpleBtn {
  display: inline-block;
  text-align: center;      
  font-size: 14px;        
  font-weight: 500;      
  background: #175b6b; /* bg-primary */
  color: #fff;             /* text-white */
  padding: 8px 16px;       /* py-2 px-4 */
  text-decoration: none;
}
/* =============================
   Reusable Component: Suitable
============================= */

.suitable {
  padding-bottom: 40px; /* pb-10 */
}

/* Row layout */
.suitable__row {
  display: flex;
  flex-direction: column; /* flex-col */
  gap: 16px; /* gap-4 */
}

@media (min-width: 1024px) {
  .suitable__row {
    flex-direction: row; /* lg:flex-row */
  }
}

@media (min-width: 1024px) {
  .suitable__row--reverse {
    flex-direction: row-reverse; /* lg:flex-row-reverse */
  }
}

/* Content column */
.suitable__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px; /* gap-5 */
}

@media (min-width: 1024px) {
  .suitable__content {
    width: 50%; /* lg:w-1/2 */
    gap: 8px;   /* lg:gap-2 */
  }
}

/* Title */
.suitable__title {
  color: #175b6b;
  font-family: var(--font-aboreto, inherit);
  font-size: 30px; /* text-[30px] */
  font-weight: 500; /* font-medium */
  margin: 0;
}

@media (min-width: 1024px) {
  .suitable__title {
    font-size: 38px; /* lg:text-[38px] */
  }
}

/* Sub headings */
.suitable__subTitle {
  font-size: 16px; /* text-base */
  font-family: var(--font-opensans, inherit);
  font-weight: 700; /* font-bold */
  color: #175b6b;
  margin: 0 0 8px 0;
}

.suitable__subTitle2 {
  font-size: 18px; /* text-lg */
  font-family: var(--font-opensans, inherit);
  font-weight: 700; /* font-bold */
  color: #175b6b;
  margin: 16px 0 8px 0;
}

/* Paragraph blocks */
.suitable__paraWrap {
  font-family: var(--font-opensans, inherit);
  color: #4d4d4d;
  font-size: 16px; /* text-base */
  font-weight: 400; /* font-normal */
  display: flex;
  flex-direction: column;
  gap: 16px; /* gap-4 */
}

/* List */
.suitable__list {
  list-style: disc;
  padding-left: 16px; /* ps-4 */
  margin: 16px 0;     /* my-4 */
  font-size: 16px;    /* text-base */
  font-family: var(--font-opensans, inherit);
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
}

.suitable__listItem {
  position: relative;
}

.suitable__list li::marker {
  color: #175b6b; /* marker:text-primary */
}

/* Buttons row */
.suitable__btnRow {
  display: flex;
  gap: 16px; /* gap-4 */
  flex-wrap: wrap;
  margin-top: 20px; /* mt-5 */
}

/* Button styling (matches your Tailwind on Button) */
.suitable__btn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto, inherit);
  transition: background 200ms ease;
}

.suitable__btn:hover {
  background: #a3a695;
}

/* Media column */
.suitable__media {
  width: 100%;
}

@media (min-width: 1024px) {
  .suitable__media {
    width: 50%; /* lg:w-1/2 */
  }
}

.suitable__image {
  height: 100%;       
  width: auto;       
  object-fit: cover; 
  display: block;
}
/* =============================
   Reusable Component: Testimonials (Swiper)
============================= */

.testimonials {
  padding: 40px 0; /* py-10 */
  background: var(--color-pinkish, #f3dfe0); /* bg-pinkish */
}

.testimonials__inner {
  margin-left: auto;
  margin-right: auto; /* mx-auto */
}

@media (min-width: 1024px) {
  .testimonials__inner {
    max-width: 80%; /* lg:max-w-[80%] */
  }
}

/* Icon */
.testimonials__iconWrap {
  display: flex;
  justify-content: center; /* justify-center */
  margin-bottom: 12px; /* mb-3 */
}

.testimonials__icon {
  width: 105px; /* w-[105px] */
  height: auto; /* h-auto */
}

/* Heading */
.testimonials__headingWrap {
  margin-bottom: 32px; /* mb-8 */
}

.testimonials__heading {
  color: #175b6b;
  font-size: 30px; /* text-[30px] */
  text-align: center;
  font-weight: 600; /* font-semibold */
  font-family: var(--font-aboreto, inherit);
}

@media (min-width: 1024px) {
  .testimonials__heading {
    font-size: 39px; /* lg:text-[39px] */
  }
}

/* Swiper wrapper */
.testimonials__swiper {
  width: 100%;
}

/* Slide content */
.testimonials__slide {
  display: flex;
  flex-direction: column;
  gap: 28px; /* gap-7 */
}

/* Paragraph */
.testimonials__para {
  text-align: center;
  font-family: var(--font-latin, inherit); /* font-latin */
  font-size: 18px; /* text-lg */
  color: var(--color-grayish, #6b7280); /* text-grayish */
  margin: 0;
}

@media (min-width: 1024px) {
  .testimonials__para {
    font-size: 22px; /* lg:text-[22px] */
  }
}

/* Name */
.testimonials__name {
  text-align: center;
  text-transform: uppercase;
  font-size: 18px; /* text-lg */
  font-family: var(--font-opensans, inherit);
  font-weight: 500; /* font-medium */
  color: #175b6b;
  margin: 0;
}
/* =============================
   Reusable Component: Treatments Learn More
============================= */

.treatLearn {
  background: #e7e0d9; /* bg-tertiary */
  padding: 40px 0; /* py-10 */
}

.treatLearn__grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 20px; /* gap-5 */
}

@media (min-width: 1024px) {
  .treatLearn__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
  }
}

/* Card */
.treatLearn__card {
  position: relative;
  min-height: 233px; /* min-h-[233px] */
  padding: 16px 8px; /* py-4 px-2 */
}

/* Overlay */
.treatLearn__overlay {
  position: absolute;
  inset: 0;
  opacity: 0.5; /* opacity-50 */
}

/* Content above overlay */
.treatLearn__content {
  position: relative;
}

/* Link */
.treatLearn__link {
  color: #fff; /* text-white */
  font-family: var(--font-roboto, inherit); /* font-roboto */
  font-weight: 400; /* font-normal */
  text-transform: uppercase; /* uppercase */
  transition: color 150ms ease; /* duration-150 */
  text-decoration: none;
}

.treatLearn__link:hover {
  color: #175b6b; /* hover:text-primary */
}
.treatLearn__title {
  font-size: 33px; /* text-[33px] */
  font-family: var(--font-aboreto, inherit);
  color: #fff;
  margin: 0 0 20px; /* mb-5 */
}
/* =============================
   Reusable Component: TTEF
============================= */

.ttef {
  padding: 40px 0; /* py-10 */
}

/* Grid */
.ttef__grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 48px; /* gap-12 */
}

@media (min-width: 768px) {
  .ttef__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .ttef__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg:grid-cols-4 */
  }
}

/* Card */
.ttef__card {
  display: flex;
  flex-direction: column;
  gap: 20px; /* gap-5 */
}

/* Icon */
.ttef__iconWrap {
  display: flex;
  justify-content: center; /* justify-center */
}

.ttef__icon {
  width: 70px; /* w-[70px] */
  height: auto; /* h-auto */
}

/* Title */
.ttef__title {
  text-align: center;
  font-family: var(--font-aboreto, inherit);
  font-weight: 600; /* font-semibold */
  font-size: 24px; /* text-2xl */
  line-height: 1.25; /* leading-tight */
  margin: 0;
}

/* Text */
.ttef__textWrap {
  width: 100%;
}

.ttef__text {
  text-align: center;
  color: #6f6f6f; /* text-[#6f6f6f] */
  font-size: 14px; /* text-sm */
  font-family: var(--font-opensans, inherit);
  margin: 0;
}

/* Link */
.ttef__linkWrap {
  text-align: center;
  font-family: var(--font-opensans, inherit);
  font-weight: 500; /* font-medium */
  font-size: 18px; /* text-lg */
}

.ttef__link {
  transition: color 200ms ease; 
  text-decoration: none;
}
.ttef__link:hover {
  color: var(--color-primary) !important;
}
/* =============================
   Reusable Component: Why Choose
============================= */

.whyChoose {
  padding-bottom: 40px; /* pb-10 */
  padding-top: 0;       /* pt-0 */
}

@media (min-width: 1024px) {
  .whyChoose {
    padding-top: 40px; /* lg:pt-10 */
  }
}

/* Title */
.whyChoose__title {
  margin-bottom: 20px; /* mb-5 */
  color: #175b6b;
  font-family: var(--font-aboreto, inherit);
  font-size: 30px; /* text-[30px] */
  font-weight: 500; /* font-medium */
  text-align: center;
}

@media (min-width: 1024px) {
  .whyChoose__title {
    font-size: 38px; /* lg:text-[38px] */
  }
}

/* Grid */
.whyChoose__grid {
  margin-top: 32px; /* mt-8 */
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 24px; /* gap-6 */
}

@media (min-width: 640px) {
  .whyChoose__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* sm:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .whyChoose__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* lg:grid-cols-5 */
  }
}

/* Card */
.whyChoose__card {
  border-radius: 16px; /* rounded-2xl */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #175b6b; /* bg-primary */
  color: #fff; /* text-white */
  padding: 40px 24px; /* py-10 px-6 */
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
  margin-left: 40px;  /* mx-10 */
  margin-right: 40px;
}

@media (min-width: 1024px) {
  .whyChoose__card {
    margin-left: 0; /* lg:mx-0 */
    margin-right: 0;
  }
}

/* Tick icon */
.whyChoose__tick {
  width: 20px;  /* w-5 */
  height: 20px; /* h-5 */
  position: absolute;
  top: 12px;  /* top-3 */
  right: 12px; /* right-3 */
  z-index: 10;
}

/* Decorative corner */
.whyChoose__corner {
  position: absolute;
  right: -44px; /* -right-11 */
  top: -24px;   /* -top-6 */
  transform: rotate(45deg);
  width: 128px; /* w-32 */
  height: 64px; /* h-16 */
  background: var(--color-pinkish, #f3dfe0); /* bg-pinkish */
}
.whyChoose__cardText {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 600; 
  font-size: 20px;
  margin: 0;
}

@media (min-width: 1024px) {
  .whyChoose__cardText {
    font-size: 16px; 
  }
}
/* =============================
   Page Block: Complaints Policy
============================= */

.complaintsPolicy {
  padding-bottom: 80px; /* pb-20 */
}

/* h1 */
.complaintsPolicy__title {
  font-size: 47px; /* text-[47px] */
  color: #175b6b; /* text-primary */
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  padding: 40px 0; /* py-10 */
}

/* main paragraph */
.complaintsPolicy__text {
  font-family: var(--font-opensans, inherit); /* font-opensans */
  font-size: 15px; /* text-[15px] */
  color: #6f6f6f; /* text-[#6f6f6f] */
}

/* "Last Updated" span */
.complaintsPolicy__updated {
  font-weight: 600; /* font-semibold */
  color: #333333; /* text-[#333333] */
}

/* h2 inside content */
.complaintsPolicy__h2 {
  font-family: inherit;
  font-weight: 700;
  font-size: 24px; /* sensible default since you didn't give tailwind here */
  line-height: 1.25;
  color: #333333;
}

/* links */
.complaintsPolicy__link {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease; /* similar to tailwind hover behavior */
}

.complaintsPolicy__link:hover {
  color: #175b6b; /* hover:text-primary */
} 
/* =============================
   Layout: Header (Lite Variant)
============================= */

.headerLite {
  position: sticky; /* sticky */
  top: 0;           /* top-0 */
  z-index: 50;      /* z-50 */
  width: 100%;      /* w-full */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
              0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
}

.headerLite__bar {
  background: #fff;      /* bg-white */
  padding: 16px 0;       /* py-4 */
}

.headerLite__row {
  margin-left: auto; /* ml-auto */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px; /* gap-20 */
  justify-content: center; /* justify-center */
}

@media (min-width: 1024px) {
  .headerLite__row {
    justify-content: space-between; /* lg:justify-between */
  }
}

/* Logo */
.headerLite__logo {
  width: 140px; /* w-[140px] */
  height: auto; /* h-auto */
  display: block;
}

/* Right side */
.headerLite__right {
  display: flex;
  align-items: center;
  gap: 32px; /* gap-8 */
}

/* Phone link */
.headerLite__phone {
  display: flex;          /* flex */
  align-items: center;    /* items-center */
  gap: 8px;               /* gap-2 */
  color: #000;            /* text-black */
  font-size: 18px;        /* text-lg */
  text-decoration: none;
}

/* CTA wrapper: hidden on mobile, visible on lg */
.headerLite__ctaWrap {
  display: none; /* hidden */
}

@media (min-width: 1024px) {
  .headerLite__ctaWrap {
    display: block; /* lg:block */
  }
}
.headerLite__ctaBtn {
  background: #809ca5;       /* bg-[#809CA5] */
  color: #fff;               /* text-white */
  font-size: 17px;           
  text-transform: uppercase; 
  font-family: var(--font-roboto, inherit); 
  transition: background 200ms ease;
}

.headerLite__ctaBtn:hover {
  background: #a3a695; 
}
/* =============================
   Page/Section: Banner Landing
============================= */

.bannerLanding {
  position: relative; /* relative */
  padding: 20px 0; /* py-5 */ 
  background-repeat: no-repeat; /* bg-no-repeat */
  background-size: cover; /* bg-cover */
  background-position: -400px center; /* bg-[-400px_center] */
}

/* lg:bg-[center_right] */
@media (min-width: 1024px) {
  .bannerLanding {
    background-position: right center;
  }
}

/* Tailwind before overlay */
.bannerLanding::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0000002b; /* before:bg-[#0000002B] */
  pointer-events: none;
}

/* Ensure content stays above overlay */
.bannerLanding > * {
  position: relative;
  z-index: 1;
}

/* Inner layout */
.bannerLanding__inner {
  min-height: 550px; /* min-h-[550px] */
  max-width: 550px; /* max-w-[550px] */
  display: flex;
  flex-direction: column;
  justify-content: center; /* justify-center */
}

/* Title */
.bannerLanding__title {
  font-size: 35px; /* text-[35px] */
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  color: #175b6b; /* text-primary */
  margin: 0 0 16px;
}

/* List */
.bannerLanding__list {
  list-style: none; /* list-none */
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
  padding: 0;
  margin: 0;
}

/* Items */
.bannerLanding__item {
  margin: 0;
}

/* Bullet icon */
.bannerLanding__bulletIcon {
  width: 16px; /* w-4 */
  height: 16px; /* h-4 */
  display: inline-block; /* inline-block */
  margin-right: 8px; /* mr-2 */
  vertical-align: middle;
}

/* Highlight span */
.bannerLanding__highlight {
  color: #175b6b; /* text-primary */
  font-weight: 600; /* font-semibold */
}

/* Note line */
.bannerLanding__note {
  margin: 0;
}
.bannerLanding__ctaBtn {
  background: #809ca5; /* bg-[#809CA5] */
  color: #fff; /* text-white */
  font-size: 17px; /* text-[17px] */
  margin-top: 20px; /* mt-5 */
  text-transform: uppercase; /* uppercase */
  font-family: var(--font-roboto, inherit); /* font-roboto */
  position: relative; /* relative */
  transition: background 200ms ease;
}

.bannerLanding__ctaBtn:hover {
  background: #a3a695; /* hover:bg-[#A3A695] */
}
/* =============================
   Reusable Component: Include
============================= */

.include {
  padding: 40px 0;  /* py-10 */
  margin-bottom: 40px; /* mb-10 */
  background: #e7e0d9; /* bg-tertiary */
}

/* Grid */
.include__grid {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 32px; /* gap-8 */
}

@media (min-width: 640px) {
  .include__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* sm:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  .include__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
  }
}

/* Card */
.include__card {
  display: flex;
  flex-direction: column;
  align-items: center; /* items-center */
  text-align: center; /* text-center */
  padding: 24px; /* p-6 */
  border: 1px solid #175b6b; /* border border-primary */
  border-radius: 12px; /* rounded-xl */
  background: rgba(255, 255, 255, 0.8); /* bg-white/80 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
  transition: box-shadow 200ms ease; /* transition-shadow */
}

.include__card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.12); /* hover:shadow-md-ish */
}

/* Icon */
.include__icon {
  margin-bottom: 16px;
  width: 56px;  
  height: 56px; 
  object-fit: contain;
  display: block;
}

/* Text */
.include__text {
  font-size: 16px;
  margin: 0;
}
/* =============================
   Section: TeamLand
============================= */

.teamLand {
  padding-top: 40px; /* pt-10 */
}

.teamLand__sections {
  padding-bottom: 40px; /* pb-10 */
}

/* Each section block */
.teamLand__section {
  display: flex;
  flex-direction: column;
  gap: 20px; /* gap-5 */
  align-items: center; /* items-center */
}

/* Section title */
.teamLand__sectionTitle {
  width: 100%;            /* w-full */
  font-size: 24px;        /* text-2xl */
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  color: #175b6b; /* text-primary */
  margin-bottom: 4px;     /* mb-1 */
  text-align: center;     /* text-center */
}

@media (min-width: 1024px) {
  .teamLand__sectionTitle {
    font-size: 47px; /* lg:text-[47px] */
  }
}

/* Grid wrapper */
.teamLand__grid {
  width: 100%; /* w-full */
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 40px; /* gap-10 */
}

@media (min-width: 768px) {
  .teamLand__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
}

/* lg:grid-cols-2 (same as md, but kept intentionally) */
@media (min-width: 1024px) {
  .teamLand__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
    width: 55%; /* lg:w-[55%] */
  }
}

/* Card */
.teamLand__card {
  position: relative; /* relative */
  cursor: pointer;    /* cursor-pointer */
  /* Tailwind group behavior via :hover on card */
}

.teamLand__img {
  width: 100%;  /* w-full */
  height: auto; /* h-auto */
  display: block;
}

/* Overlay: starts at 0 height, expands on hover */
.teamLand__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0; /* h-0 */
  background: #a3a695ad; /* bg-[#A3A695AD] */
  transition: height 300ms ease; /* transition-all duration-300 */
}

.teamLand__card:hover .teamLand__overlay {
  height: 100%; /* group-hover:h-full */
}

/* Hover content centered */
.teamLand__hoverContent {
  width: 100%; /* w-full */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* -translate-y-1/2 -translate-x-1/2 */
  opacity: 0; /* opacity-0 */
  transition: opacity 150ms ease; /* transition-all duration-150 */
  transition-delay: 300ms; /* delay-300 */
}

.teamLand__card:hover .teamLand__hoverContent {
  opacity: 1; /* group-hover:opacity-100 */
}

/* Name */
.teamLand__name {
  font-size: 22px; /* text-[22px] */
  text-align: center; /* text-center */
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  font-weight: 500; /* font-medium */
  color: #fff; /* text-white */
  margin: 0;
}
.teamLand__role {
  color: #fff; /* text-white */
  text-align: center; /* text-center */
  font-family: var(--font-nunito, inherit); /* font-nunito */
  font-size: 14px; /* text-sm */
  text-transform: uppercase; /* uppercase */
  margin: 0;
}
/* =============================
   Component: Make Enquiry
============================= */

.makeEnquiry {
  padding-bottom: 40px; /* pb-10 */
  scroll-margin-top: 10rem; /* scroll-mt-40 (40 * 0.25rem = 10rem) */
}

.makeEnquiry__wrap {
  border: 8px solid #809ca5; /* border-8 border-[#809CA5] */
  background: #fff; /* bg-white */
  padding: 12px; /* p-3 */
  border-radius: 2rem; /* rounded-4xl (Tailwind 4xl = 2rem) */
}

@media (min-width: 1024px) {
  .makeEnquiry__wrap {
    padding: 40px; /* lg:p-10 */
  }
}

.makeEnquiry__row {
  display: flex;
  flex-direction: column; /* flex-col */
  gap: 32px; /* gap-8 */
}

@media (min-width: 1024px) {
  .makeEnquiry__row {
    flex-direction: row; /* lg:flex-row */
  }
}

/* LEFT form box */
.makeEnquiry__formBox {
  background: #ddd6d5; /* bg-[#DDD6D5] */
  padding: 20px 28px; /* px-7 py-5 */
  border-radius: 2rem; /* rounded-4xl */
  width: 100%; /* w-full */
  box-shadow: 0 10px 15px rgba(0,0,0,0.12); /* shadow-lg */
}

@media (min-width: 1024px) {
  .makeEnquiry__formBox {
    width: 60%; /* lg:w-[60%] */
  }
}

.makeEnquiry__title {
  color: #175b6b;
  font-weight: 500; /* font-medium */
  line-height: 45px; /* leading-[45px] */
  font-size: 36px; /* text-[36px] */
  margin-bottom: 20px; /* mb-5 */
}

/* Form */
.makeEnquiry__form {
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
}

.makeEnquiry__field {
  display: flex;
  flex-direction: column;
  gap: 4px; /* gap-1 */
}

.makeEnquiry__req {
  color: #b30000;
}

.makeEnquiry__input {
  border: none;
  border-bottom: 1px solid #fff; /* border-b border-white */
  background: transparent; /* bg-transparent */
  height: 43px; /* h-[43px] */
  padding: 16px; /* p-4 */
  color: #696565; /* text-[#696565] */
  outline: none; /* focus:outline-none */
}

.makeEnquiry__input::placeholder {
  color: #fff; /* placeholder:text-white */
}

.makeEnquiry__textarea {
  border: none;
  border-bottom: 1px solid #fff; /* border-b border-white */
  background: transparent;
  width: 100%;
  height: 120px; /* h-[120px] */
  padding: 16px; /* p-4 */
  color: #696565;
  outline: none;
  resize: vertical; /* optional but safe */
}

.makeEnquiry__textarea::placeholder {
  color: #fff;
}

/* Errors */
.makeEnquiry__error {
  color: #b30000;
  font-weight: 700; /* font-bold */
  margin-top: 8px; /* mt-2 */
  font-size: 14px; /* text-sm */
}

/* Privacy */
.makeEnquiry__privacyRow {
  display: flex;
  gap: 8px; /* gap-2 */
  margin-top: 20px; /* mt-5 */
}

.makeEnquiry__checkbox {
  width: 22px;  /* w-[22px] */
  height: 22px; /* h-[22px] */
}

.makeEnquiry__privacyLink {
  text-decoration: underline; /* underline */
}

/* Submit */
.makeEnquiry__submitRow {
  display: flex;
  justify-content: center; /* justify-center */
  margin-top: 20px; /* mt-5 */
}

.makeEnquiry__submitBtn {
  width: 100%;
  border: 0;
  background: #809ca5; /* bg-[#809CA5] */
  color: #fff; /* text-white */
  font-size: 18px; /* text-lg */
  font-family: var(--font-nunito, inherit); /* font-nunito */
  text-transform: uppercase; /* uppercase */
  padding: 16px 0; /* py-4 */
  border-radius: 1rem; /* rounded-2xl */
  cursor: pointer;
  transition: background-color 200ms ease; /* transition-all duration-200 */
}

.makeEnquiry__submitBtn:hover {
  background: #175b6b; /* hover:bg-primary */
}

.makeEnquiry__submitBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* RIGHT info */
.makeEnquiry__info {
  display: flex;
  flex-direction: column;
  gap: 4px; /* gap-1 */
  width: 100%;
}

@media (min-width: 1024px) {
  .makeEnquiry__info {
    width: 40%; /* lg:w-[40%] */
  }
}

.makeEnquiry__infoHeader {
  display: flex;
  gap: 8px; /* gap-2 */
  align-items: center; /* items-center */
}

.makeEnquiry__infoIcon {
  width: 32px; /* w-8 */
  height: auto; /* h-auto */
  display: block;
}

.makeEnquiry__infoTitle {
  color: #175b6b;
  font-weight: 500;
  line-height: 45px;
  font-size: 24px; /* text-[24px] */
  font-family: var(--font-opensans, inherit); /* font-opensans */
}

.makeEnquiry__infoPara {
  font-size: 18px; /* text-[18px] */
  font-family: var(--font-nunito, inherit); /* font-nunito */
  color: #4d4d4d;
}

.makeEnquiry__block {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
}

.makeEnquiry__subTitle {
  color: #175b6b;
  font-size: 24px; /* text-[24px] */
  font-family: var(--font-opensans, inherit);
  margin: 0;
}

/* Opening hours list */
.makeEnquiry__hours {
  list-style: disc;
  padding-left: 20px; /* pl-5 */
  margin: 0;
  color: #6f6f6f; /* text-[#6f6f6f] */
  font-size: 18px;
  font-family: var(--font-nunito, inherit);
}

.makeEnquiry__hours li::marker {
  color: #175b6b; /* marker:text-primary */
}

/* Contact links */
.makeEnquiry__contact {
  gap: 12px; /* gap-3 */
}

.makeEnquiry__contactLink {
  display: flex;
  gap: 8px; /* gap-2 */
  align-items: center; /* items-center */
  font-size: 18px;
  font-family: var(--font-nunito, inherit);
  color: #4d4d4d;
  text-decoration: none;
}

/* =============================
   Modal: Submission (MakeEnquiry)
============================= */

.makeEnquiryModal {
  position: fixed;
  inset: 0; /* inset-0 */
  background: rgba(0,0,0,0.5); /* bg-black/50 */
  backdrop-filter: blur(6px); /* backdrop-blur */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003; /* z-[10003] */
}

.makeEnquiryModal__box {
  position: relative;
  background: #175b6b; /* bg-primary */
  max-width: 800px; /* max-w-[800px] */
  width: calc(100% - 32px);
  padding: 40px 36px; /* px-9 py-10 */
  border-top-right-radius: 1.5rem; /* rounded-tr-3xl */
  border-bottom-left-radius: 1.5rem; /* rounded-bl-3xl */
}

.makeEnquiryModal__text {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 20px; /* text-xl */
}

.makeEnquiryModal__close {
  position: absolute;
  top: 20px;  /* top-5 */
  right: 20px; /* right-5 */
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  font-size: 24px; /* text-2xl */
  line-height: 1;
}

.makeEnquiryModal__closeIcon {
  width: 24px; 
  height: 24px;
  display: block;
}
/* =============================
   Component: ReachUsBy
============================= */

.reachUsBy__grid {
  border-top: 2px solid #175b6b; /* border-t-2 border-primary */
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  padding: 40px 0; /* py-10 */
  gap: 32px; /* gap-8 */
}

@media (min-width: 1024px) {
  .reachUsBy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
  }
}

/* Left */
.reachUsBy__address {
  font-size: 18px; /* text-lg */
  color: #4d4d4d; /* text-[#4D4D4D] */
  font-weight: 500; /* font-medium */
  line-height: 30px; /* leading-[30px] */
  font-family: var(--font-opensans, inherit); /* font-opensans */
  margin-bottom: 50px; /* mb-[50px] */
}

.reachUsBy__title {
  font-size: 32px; /* text-[32px] */
  color: #175b6b; /* text-primary */
  margin-bottom: 12px; /* mb-3 */
  font-weight: 500; /* font-medium */
}

.reachUsBy__items {
  display: grid;
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 24px; /* gap-6 */
}

.reachUsBy__item {
  display: flex;
  flex-direction: row; /* flex-row */
  gap: 24px; /* gap-6 */
}

.reachUsBy__icon {
  width: 50px;  /* w-[50px] */
  height: 50px; /* h-[50px] */
}

.reachUsBy__itemText {
  display: flex;
  flex-direction: column;
}

.reachUsBy__itemHeading {
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  font-size: 28px; /* text-[28px] */
  color: #175b6b; /* text-primary */
}

.reachUsBy__itemPara {
  color: #4d4d4d; /* text-[#4D4D4D] */
  font-size: 15px; /* text-[15px] */
  font-family: var(--font-opensans, inherit); /* font-opensans */
  font-weight: 400; /* font-normal */
  margin: 0;
}

/* Map */
.reachUsBy__map {
  position: relative; /* relative */
  min-height: 300px; /* so iframe has space on mobile */
}

@media (min-width: 1024px) {
  .reachUsBy__map {
    min-height: unset;
  }
}

.reachUsBy__iframe {
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 50%; 
  left: 0; 
  transform: translateY(-50%); 
  border: 0;
}
/* =============================
   Cookie Policy
============================= */

.cookiePolicy__h1 {
  font-size: 47px; /* text-[47px] */
  color: #175b6b; /* text-primary */
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  padding: 40px 0; /* py-10 */
}

.cookiePolicy__intro {
  font-family: var(--font-nunito, inherit); /* font-nunito */
  font-size: 15px; /* text-[15px] */
  color: #333333; /* text-[#333333] */
}

.cookiePolicy__updated {
  font-weight: 600; /* font-semibold */
}

.cookiePolicy__list {
  list-style-type: decimal; /* list-decimal */
  font-family: var(--font-opensans, inherit); /* font-opensans */
  font-size: 15px; /* text-[15px] */
  color: #333333; /* text-[#333333] */
  padding-left: 24px; /* pl-6 */
  margin-top: 24px; /* mt-6 */
}

.cookiePolicy__list > li + li {
  margin-top: 24px; /* space-y-6 */
}

.cookiePolicy__h2 {
  /* you didn't apply classes on h2 except in some places,
     so leave it unstyled unless needed */
}

.cookiePolicy__strongOpensans {
  font-family: var(--font-opensans, inherit); /* font-opensans */
}

.cookiePolicy__sublist {
  list-style-type: disc; /* list-disc */
  font-family: var(--font-opensans, inherit); /* font-opensans */
  padding-left: 24px; /* pl-6 */
  margin-top: 8px; /* mt-2 */
}

/* marker:text-[#333333] marker:text-[17px] */
.cookiePolicy__sublist li::marker {
  color: #333333;
  font-size: 17px;
}

.cookiePolicy__sublistSpaced > li + li {
  margin-top: 4px; /* space-y-1 */
}

/* bottom section */
.cookiePolicy__footerWrap {
  font-size: 15px; /* text-[15px] */
  padding-bottom: 80px; /* pb-20 */
}

.cookiePolicy__footerText {
  color: #333333; /* text-[#333333] */
}

.cookiePolicy__mapLink:hover {
  color: #175b6b;
}

.cookiePolicy__addressLine {
  margin-top: 6px; 
  display: inline-block;
}
/* =============================
   Affordable Dental Cares
============================= */

.affordableDentalCares {
  padding: 40px 0; /* py-10 */
}

.affordableDentalCares__title {
  color: #175b6b; /* text-primary */
  font-weight: 500; /* font-medium */
  font-size: 30px; /* text-[30px] */
  margin-bottom: 20px; /* mb-5 */
}

@media (min-width: 1024px) {
  .affordableDentalCares__title {
    font-size: 35px; /* lg:text-[45px] */
  }
}

.affordableDentalCares__intro {
  font-size: 17px; /* text-[17px] */
  font-family: var(--font-opensans, inherit); /* font-opensans */
  color: #4d4d4d; /* text-[#4D4D4D] */
  margin-bottom: 12px; /* mb-3 */
}

.affordableDentalCares__subtitle {
  color: #175b6b; /* text-primary */
  font-family: var(--font-aboreto, inherit); /* font-aboreto */
  font-size: 25px; /* text-[25px] */
  margin-bottom: 8px; /* mb-2 */
}

@media (min-width: 1024px) {
  .affordableDentalCares__subtitle {
    font-size: 40px; /* lg:text-[40px] */
  }
}

.affordableDentalCares__list {
  list-style-type: disc; /* list-disc */
  padding-left: 20px; /* ps-5 */
  font-size: 17px; /* text-[17px] */
  color: #4d4d4d; /* text-[#4D4D4D] */
  font-family: var(--font-opensans, inherit); /* font-opensans */
  display: flex; /* flex */
  flex-direction: column; /* flex-col */
  gap: 4px; /* gap-1 */
  margin-bottom: 16px; /* mb-4 */
}

/* marker:text-black */
.affordableDentalCares__list li::marker {
  color: #000;
}

.affordableDentalCares__btnWrap {
  display: flex; /* flex */
  justify-content: center; /* justify-center */
}

@media (min-width: 1024px) {
  .affordableDentalCares__btnWrap {
    justify-content: flex-start; /* lg:justify-start */
  }
}

.affordableDentalCares__btn {
  font-family: var(--font-opensans, inherit); 
  font-weight: 600;
  background: #d0b1b1; 
  color: #ffffff; 
}
/* =========================
   FeesMain (Option B - unique names)
   ZERO Tailwind
========================= */

.fees-main {
  padding: 40px 0;
}

.fees-main__wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.fees-main__section {
  margin-bottom: 36px;
}

.fees-main__heading {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 500;
  color: var(--primary, #2f4a43);
  margin: 0 0 20px;
}

@media (min-width: 1024px) {
  .fees-main__heading {
    font-size: 35px;
  }
}

.fees-main__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fees-main__disclosure {
  width: 100%;
}

.fees-main__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;

  font-family: var(--font-aboreto, inherit);
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;

  text-align: left;
  cursor: pointer;
  user-select: none;

  border: 0;
  outline: none;
}

.fees-main__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.fees-main__icon--open {
  transform: rotate(90deg);
}

.fees-main__panel {
  overflow: hidden;
  padding: 8px 12px 0;
  will-change: max-height, opacity;
}

.fees-main__table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
}

.fees-main__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fees-main__row--alt {
  background: #f3f3f3;
}

.fees-main__details {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.5;
  color: #333333;
}

.fees-main__price {
  flex: 0 0 20%;
  min-width: 110px;
  text-align: right;
  white-space: nowrap;
  line-height: 1.5;
  color: #333333;
}

@media (max-width: 640px) {
  .fees-main__price {
    flex-basis: 35%;
    min-width: 100px;
  }
}

/* Transition classes used by HeadlessUI Transition props */
.fees-main__t-enter {
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}
.fees-main__t-enterFrom {
  max-height: 0;
  opacity: 0;
}
.fees-main__t-enterTo {
  max-height: 1000px;
  opacity: 1;
}

.fees-main__t-leave {
  transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
}
.fees-main__t-leaveFrom {
  max-height: 1000px;
  opacity: 1;
}
.fees-main__t-leaveTo {
  max-height: 0;
  opacity: 0;
}
/* ---------------------------
   Thank You Header
---------------------------- */
.thankyou-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.thankyou-header__bar {
  background: #ffffff;
  padding: 16px 0;
}

.thankyou-header__inner {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}

.thankyou-header__logo {
  width: 140px;
  height: auto;
}

/* Desktop */
@media (min-width: 1024px) {
  .thankyou-header__inner {
    justify-content: space-between;
  }

  .thankyou-header__cta {
    display: block;
  }
}

/* Mobile: hide CTA */
.thankyou-header__cta {
  display: none;
}

.thankyou-header__button {
  background: #809ca5;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 17px;
  font-family: Roboto, Arial, sans-serif;
  transition: background 0.25s ease;
}

.thankyou-header__button:hover {
  background: #a3a695;
}

/* ---------------------------
   Thank You Hero
---------------------------- */
.thankyou-hero {
  position: relative;
  padding: 20px 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -400px center;
}

.thankyou-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.17);
}

@media (min-width: 1024px) {
  .thankyou-hero {
    background-position: right center;
  }
}

.thankyou-hero > * {
  position: relative;
  z-index: 1;
}

.thankyou-hero__content {
  min-height: 550px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.thankyou-hero__title {
  font-size: 38px;
  line-height: 1.15;
  font-family: var(--font-aboreto);
  color: #175b6b;
  margin: 0;
}
.thankyou-hero__text {
  font-size: 20px;
  line-height: 1.45;
  margin: 0;
  color: #111;
}

.thankyou-hero__actions {
  margin-top: 8px;
}

.thankyou-hero__button {
  background: #809ca5;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 17px;
  font-family: Roboto, Arial, sans-serif;
  margin-top: 20px;
  transition: background 0.25s ease;
}

.thankyou-hero__button:hover {
  background: #a3a695;
}
/* ---------------------------
   Team Section
---------------------------- */
.team {
  padding: 0;
}

.team__intro {
  padding: 40px 0;
}

.team__title {
  font-size: 30px;
  line-height: 1.15;
  font-family: var(--font-aboreto);
  color: #175b6b;
  margin: 0 0 16px;
}

@media (min-width: 1024px) {
  .team__title {
    font-size: 47px;
  }
}

.team__copy {
  font-size: 18px;
  line-height: 1.55;
  color: #4d4d4d;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team__copy p {
  margin: 0;
}

.team__cta {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .team__cta {
    justify-content: flex-start;
  }
}

.team__button {
  background: #809ca5;
  color: #ffffff;
  transition: background 0.25s ease;
}

.team__button:hover {
  background: #a3a695;
}

/* ---------------------------
   Team Groups
---------------------------- */
.team__groups {
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.team-group__title {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-aboreto);
  color: #175b6b;
  font-size: 24px;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  .team-group__title {
    font-size: 47px;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------
   Team Card
---------------------------- */
.team-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.team-card__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay reveal */
.team-card__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(163, 166, 149, 0.68);
  transition: height 0.3s ease;
}

.team-card:hover .team-card__overlay,
.team-card:focus-visible .team-card__overlay {
  height: 100%;
}

/* Content fade-in */
.team-card__content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  transition-delay: 0.3s;
  display: block;
  padding: 0 16px;
}

.team-card:hover .team-card__content,
.team-card:focus-visible .team-card__content {
  opacity: 1;
}

.team-card__name {
  display: block;
  text-align: center;
  font-family: var(--font-aboreto);
  font-weight: 500;
  font-size: 22px;
  color: #ffffff;
  margin-bottom: 6px;
}

.team-card__role {
  display: block;
  text-align: center;
  font-family: Nunito, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.team-card:focus-visible {
  outline: 3px solid rgba(128, 156, 165, 0.6);
  outline-offset: 4px;
}
/* ---------------------------
   Smile Gallery
---------------------------- */
.smile-gallery {
  padding: 40px 0;
}

.smile-gallery__head {
  margin-bottom: 24px;
  text-align: center;
}

.smile-gallery__title {
  color: #175b6b;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
}

@media (min-width: 1024px) {
  .smile-gallery__title {
    font-size: 35px;
  }
}

/* Grid */
.smile-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.smile-gallery__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

@media (min-width: 768px) {
  .smile-gallery__card {
    width: calc(50% - 24px);
  }
}

@media (min-width: 1024px) {
  .smile-gallery__card {
    width: calc(33.333% - 34px);
  }
}

/* Thumbnail */
.smile-gallery__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f4f6;
}

.smile-gallery__thumbImage {
  width: 100%;
  height: auto;
  display: block;
}

/* Caption */
.smile-gallery__caption {
  margin-top: 12px;
}

.smile-gallery__captionText {
  color: #000;
  font-size: 18px;
  line-height: 1.4;
}

/* ---------------------------
   Modal
---------------------------- */
.smile-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.smile-gallery-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.smile-gallery-modal__close:hover {
  background: rgba(0, 0, 0, 0.9);
}

.smile-gallery-modal__inner {
  width: 100%;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .smile-gallery-modal__inner {
    padding: 0 24px;
  }
}

.smile-gallery-modal__swiper {
  width: 100%;
  max-width: 896px; /* ~ max-w-4xl */
  border-radius: 16px;
  overflow: visible;
}

/* Slide layout */
.smile-gallery-modal__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
}

.smile-gallery-modal__media {
  position: relative;
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .smile-gallery-modal__media {
    height: 65vh;
  }
}

.smile-gallery-modal__image {
  object-fit: contain;
}

.smile-gallery-modal__meta {
  padding: 16px;
  text-align: center;
}

.smile-gallery-modal__metaText {
  margin: 0;
  color: #fff;
  font-family: var(--font-aboreto);
  font-size: 18px;
  line-height: 1.35;
}

/* Optional: slightly improve Swiper UI contrast */
.smile-gallery-modal .swiper-button-prev,
.smile-gallery-modal .swiper-button-next {
  color: #fff;
}

.smile-gallery-modal .swiper-pagination-bullet {
  opacity: 0.5;
}

.smile-gallery-modal .swiper-pagination-bullet-active {
  opacity: 1;
}
/* ---------------------------
   CBCT Referral Page Layout
---------------------------- */
.cbct-page {
  padding: 40px 0;
}

.cbct-page__layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}

@media (min-width: 1024px) {
  .cbct-page__layout {
    flex-direction: row;
    gap: 20px;
  }
}

/* ---------------------------
   Sidebar
---------------------------- */
.cbct-sidebar {
  width: 100%;
  border: 1px solid #175b6b;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  height: fit-content;
}

@media (min-width: 1024px) {
  .cbct-sidebar {
    width: 300px;
    flex-shrink: 0;
    margin-top: 120px;
  }
}

.cbct-sidebar__link {
  display: inline-block;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--olive-dark, #6d7a4c);
  color: #111;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.3;
}

.cbct-sidebar__link--top {
  border-top-right-radius: 24px;
}

.cbct-sidebar__link--bottom {
  border-bottom-left-radius: 24px;
}

.cbct-sidebar__link--active {
  background: #175b6b;
  color: #fff;
}

/* ---------------------------
   Form Base
---------------------------- */
.cbct-form {
  flex: 1;
}

.cbct-form__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cbct-form__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cbct-form__title {
  color: #175b6b;
  text-align: center;
  letter-spacing: -0.02em;
  font-size: 39px;
  line-height: 1.1;
  font-family: var(--font-aboreto);
  margin: 0;
}

.cbct-form__subtitle {
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 8px;
}

/* ---------------------------
   Rows / Columns
---------------------------- */
.cbct-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .cbct-row--twoCols {
    flex-direction: row;
    gap: 16px;
  }

  .cbct-row--twoEqual {
    flex-direction: row;
    gap: 40px;
  }

  .cbct-row--interest {
    flex-direction: row;
    gap: 40px;
  }
}

.cbct-col {
  width: 100%;
}

@media (min-width: 1024px) {
  .cbct-col--wide {
    width: 70%;
  }
  .cbct-col--narrow {
    width: 30%;
  }
  .cbct-col--interest {
    width: 60%;
  }
  .cbct-col--reporting {
    width: 40%;
  }
}

/* ---------------------------
   Section Title + Dividers
---------------------------- */
.cbct-sectionTitle {
  color: #175b6b;
  letter-spacing: -0.02em;
  font-size: 25px;
  line-height: 1.15;
  font-family: var(--font-aboreto);
  margin: 0 0 10px;
}

.cbct-divider {
  border-bottom: 1px solid var(--olive, #b7c59b);
}

.cbct-divider--thick {
  border-bottom-width: 2px;
}

.cbct-divider--top {
  border-top: 1px solid var(--olive, #b7c59b);
  padding-top: 16px;
}

.cbct-divider--spaced {
  margin: 12px 0;
}

/* ---------------------------
   Fields / Inputs
---------------------------- */
.cbct-fields {
  display: grid;
  margin-top: 8px;
}

.cbct-fields--single {
  grid-template-columns: 1fr;
  gap: 16px;
}

.cbct-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cbct-field__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .cbct-field__row {
    flex-direction: row;
  }
}

.cbct-field__label {
  width: 100%;
}

@media (min-width: 1024px) {
  .cbct-field__label {
    width: 40%;
  }
}

.cbct-input {
  width: 100%;
  border: 1px solid #111;
  padding: 8px 10px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  font-size: 15px;
  line-height: 1.3;
  outline: none;
}

.cbct-input:focus {
  border-color: #175b6b;
  box-shadow: 0 0 0 3px rgba(31, 59, 69, 0.15);
}

.cbct-input--signature {
  width: 80%;
}

.cbct-textarea {
  width: 100%;
  border: 1px solid #111;
  padding: 10px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  resize: vertical;
  min-height: 120px;
}

.cbct-textarea--tall {
  min-height: 160px;
}

.cbct-textarea:focus {
  border-color: #175b6b;
  box-shadow: 0 0 0 3px rgba(31, 59, 69, 0.15);
}

/* ---------------------------
   Errors / Hints / Links
---------------------------- */
.cbct-error {
  margin: 12px 0 0;
  font-size: 14px;
  color: #d11a2a;
}

.cbct-error--tight {
  margin-top: 6px;
}

.cbct-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
}

.cbct-mutedLabel {
  display: block;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 6px;
}

.cbct-link {
  color: #175b6b;
  text-decoration: underline;
}

/* ---------------------------
   Checkboxes
---------------------------- */
.cbct-checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

.cbct-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.cbct-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cbct-check__box {
  width: 16px;
  height: 16px;
  border: 2px solid #111;
  border-radius: 3px;
  accent-color: #175b6b;
}

.cbct-check__box--inline {
  margin-right: 6px;
}

.cbct-check__text {
  font-size: 14px;
  line-height: 1.3;
}

/* Reporting row */
.cbct-checkRow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.cbct-checkRow__text {
  font-size: 14px;
}

/* ---------------------------
   Interest Extras
---------------------------- */
.cbct-interestExtras {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 14px;
}

.cbct-interestExtras__image {
  width: 100%;
  height: auto;
  display: block;
}

.cbct-interestExtras__field {
  display: block;
}

/* ---------------------------
   Text Blocks
---------------------------- */
.cbct-paragraph {
  color: #000;
  font-size: 16px;
  line-height: 1.6;
  margin: 16px 0 0;
  padding: 0;
}

.cbct-paragraph--bold {
  font-weight: 600;
}

/* ---------------------------
   Final Section
---------------------------- */
.cbct-final {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cbct-signature {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .cbct-signature {
    flex-direction: row;
  }
}

.cbct-signature__label {
  width: 100%;
}

@media (min-width: 1024px) {
  .cbct-signature__label {
    width: 20%;
  }
}

/* Privacy row */
.cbct-privacy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .cbct-privacy {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }
}

.cbct-privacy__date {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.cbct-privacy__content {
  flex: 1;
}

.cbct-privacy__text {
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------
   Actions
---------------------------- */
.cbct-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cbct-actionBtn {
  width: 30%;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-radius 0.3s ease;
}

.cbct-actionBtn:hover {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.cbct-actionBtn--outline {
  border: 1px solid #175b6b;
  background: transparent;
  color: #175b6b;
}

.cbct-actionBtn--solid {
  border: 1px solid #175b6b;
  background: #175b6b;
  color: #fff;
}

.cbct-actionBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---------------------------
   Submission Modal
---------------------------- */
.cbct-submitOverlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cbct-submitModal {
  width: 100%;
  max-width: 450px;
  background: #175b6b;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.cbct-submitModal__text {
  margin: 0;
  padding: 20px 24px;
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cbct-submitModal__footer {
  padding: 12px 24px;
  display: flex;
  justify-content: flex-end;
}

.cbct-submitModal__close {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
}
/* ---------------------------
   Implant Referral Page
---------------------------- */
.implant-referral {
  padding: 40px 0;
}

/* Layout */
.implant-referral__layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}

@media (min-width: 1024px) {
  .implant-referral__layout {
    flex-direction: row;
    gap: 20px;
  }
}

/* Sidebar */
.implant-referral__sidebar {
  width: 100%;
  border: 1px solid #175b6b;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  height: fit-content;
}

@media (min-width: 1024px) {
  .implant-referral__sidebar {
    width: 300px;
    flex-shrink: 0;
    margin-top: 120px;
  }
}

.implant-referral__navLink {
  display: inline-block;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--olive-dark, #6d7a4c);
  color: #111;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.3;
}

.implant-referral__navLink--top {
  border-top-right-radius: 24px;
}

.implant-referral__navLink--bottom {
  border-bottom-left-radius: 24px;
}

.implant-referral__navLink--active {
  background: #175b6b;
  color: #fff;
}

/* Form wrapper */
.implant-referral__form {
  flex: 1;
}

.implant-referral__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Intro */
.implant-referral__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.implant-referral__title {
  color: #175b6b;
  text-align: center;
  letter-spacing: -0.02em;
  font-size: 39px;
  line-height: 1.1;
  font-family: var(--font-aboreto);
  margin: 0;
}

.implant-referral__subtitle {
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 8px;
}

/* Titles + dividers */
.implant-referral__sectionTitle {
  color: #175b6b;
  letter-spacing: -0.02em;
  font-size: 25px;
  line-height: 1.15;
  font-family: var(--font-aboreto);
  margin: 0 0 10px;
}
.implant-referral__sectionTitle--spaced {
  margin-top: 12px;
}

.implant-referral__divider {
  border-bottom: 1px solid var(--olive, #b7c59b);
}

.implant-referral__divider--thick {
  border-bottom-width: 2px;
}

.implant-referral__divider--top {
  border-top: 1px solid var(--olive, #b7c59b);
  padding-top: 16px;
  border-bottom: 0;
}

.implant-referral__divider--spaced {
  margin: 12px 0;
}

/* Rows/columns */
.implant-referral__row {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .implant-referral__row--twoEqual {
    flex-direction: row;
  }
}

.implant-referral__col {
  width: 100%;
}

/* Fields */
.implant-referral__fields {
  display: grid;
  margin-top: 8px;
  gap: 16px;
}

.implant-referral__fields--single {
  grid-template-columns: 1fr;
}

.implant-referral__fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.implant-referral__fieldRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .implant-referral__fieldRow {
    flex-direction: row;
  }
}

.implant-referral__label {
  width: 100%;
}

@media (min-width: 1024px) {
  .implant-referral__label {
    width: 40%;
  }
}

.implant-referral__input {
  width: 100%;
  border: 1px solid #111;
  padding: 8px 10px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  font-size: 15px;
  line-height: 1.3;
  outline: none;
}

.implant-referral__input:focus {
  border-color: #175b6b;
  box-shadow: 0 0 0 3px rgba(31, 59, 69, 0.15);
}

.implant-referral__input--signature {
  width: 100%;
}

@media (min-width: 1024px) {
  .implant-referral__input--signature {
    width: 80%;
  }
}

/* Textareas */
.implant-referral__textarea {
  width: 100%;
  border: 1px solid #111;
  padding: 10px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  resize: vertical;
  min-height: 128px;
}

.implant-referral__textarea--tall {
  min-height: 160px;
}

/* Errors */
.implant-referral__error {
  margin: 12px 0 0;
  font-size: 14px;
  color: #d11a2a;
}

.implant-referral__error--tight {
  margin-top: 6px;
}

.implant-referral__error--center {
  text-align: center;
}

/* Radio group */
.implant-referral__radioGroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  align-items: flex-start;
}

.implant-referral__radio {
  display: flex;
  align-items: center;
  gap: 10px;
}

.implant-referral__radioInput {
  margin: 0;
}

/* Signature */
.implant-referral__signature {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: column;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .implant-referral__signature {
    flex-direction: row;
  }
}

.implant-referral__signatureLabel {
  width: 100%;
}

@media (min-width: 1024px) {
  .implant-referral__signatureLabel {
    width: 20%;
  }
}

/* Privacy */
.implant-referral__privacy {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-direction: column;
  margin-top: 14px;
}

@media (min-width: 1024px) {
  .implant-referral__privacy {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }
}

.implant-referral__date {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.implant-referral__privacyTextWrap {
  flex: 1;
}

.implant-referral__checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid #111;
  border-radius: 3px;
  accent-color: #175b6b;
  margin-right: 6px;
}

.implant-referral__link {
  color: #175b6b;
  text-decoration: underline;
}

.implant-referral__privacyText {
  font-size: 14px;
  line-height: 1.5;
}

/* Actions */
.implant-referral__actions {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.implant-referral__btn {
  width: 30%;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-radius 0.3s ease;
}

.implant-referral__btn:hover {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.implant-referral__btn--outline {
  border: 1px solid #175b6b;
  background: transparent;
  color: #175b6b;
}

.implant-referral__btn--solid {
  border: 1px solid #175b6b;
  background: #175b6b;
  color: #fff;
}
.implant-referral__btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Submitted modal */
.implant-referral__overlay {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.implant-referral__modal {
  width: 100%;
  max-width: 450px;
  background: #175b6b;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.implant-referral__modalText {
  margin: 0;
  padding: 20px 24px;
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  
}

.implant-referral__modalFooter {
  padding: 12px 24px;
  display: flex;
  justify-content: flex-end;
}

.implant-referral__modalClose {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
}
/* Layout */
.referralPage {
  padding: 40px 0;
}

.referralHeaderSpacer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.referralLayout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}

@media (min-width: 1024px) {
  .referralLayout {
    flex-direction: row;
  }
}

/* Sidebar */
.referralSidebar {
  width: 300px;
  flex-shrink: 0;
  height: fit-content;
  border: 1px solid #175b6b;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  margin-top: 120px;
}

.referralSidebarLink {
  display: inline-block;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--color-olive-dark);
  color: inherit;
  text-decoration: none;
}

.referralSidebarLinkTop {
  border-top-right-radius: 24px;
}

.referralSidebarLinkBottom {
  border-bottom-left-radius: 24px;
}

.referralSidebarLinkActive {
  background: #175b6b;
  color: #fff;
}

/* Form wrapper */
.referralForm {
  flex: 1;
}

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

/* Headings */
.referralTitle {
  color: #175b6b;
  text-align: center;
  letter-spacing: -0.02em;
  font-size: 39px;
  font-family: var(--font-aboreto);
  font-weight: 400;
}

.referralSubtitle {
  text-align: center;
  color: #000;
  padding-bottom: 8px;
  margin: 0;
}

.referralSectionTitle {
  color: #175b6b;
  letter-spacing: -0.02em;
  font-size: 25px;
  font-family: var(--font-aboreto);
  font-weight: 400;
  margin: 0;
}

.referralSectionTitleSmall {
  font-size: 20px;
}

.referralSectionTitleTopSpace {
  margin-top: 12px;
}

/* Dividers */
.referralDividerThick {
  border-bottom: 2px solid var(--color-olive);
  margin-top: 8px;
}

.referralDividerThin {
  border-top: 1px solid var(--color-olive);
  padding-top: 16px;
  margin-top: 10px;
}

.referralDividerThinSpaced {
  margin: 12px 0;
  padding-top: 0;
}

/* Top grid */
.referralTopGrid {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .referralTopGrid {
    flex-direction: row;
  }
}

.referralDentistCol {
  width: 100%;
}

@media (min-width: 1024px) {
  .referralDentistCol {
    width: 70%;
  }
}

.referralReasonCol {
  width: 100%;
}

@media (min-width: 1024px) {
  .referralReasonCol {
    width: 30%;
  }
}

/* Fields */
.referralFieldsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

.referralFieldBlock {
  display: block;
}

.referralFieldRow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .referralFieldRow {
    flex-direction: row;
  }
}

.referralLabel {
  width: 100%;
  font-size: 16px;
}

@media (min-width: 1024px) {
  .referralLabel {
    width: 40%;
  }
}

.referralInput {
  width: 100%;
  border: 1px solid #000;
  padding: 8px 10px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  outline: none;
}

.referralInput:focus {
  border-color: #175b6b;
}

.referralTextarea {
  width: 100%;
  border: 1px solid #000;
  padding: 10px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  outline: none;
  min-height: 128px;
  resize: vertical;
}

.referralTextareaTall {
  min-height: 160px;
}

.referralTextarea:focus {
  border-color: #175b6b;
}

.referralError {
  color: var(--color-red);
  font-size: 14px;
  margin-top: 12px;
}

.referralError.compact {
  margin-top: 6px;
}

/* Reasons (checkboxes) */
.referralReasons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.referralCheckboxRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.referralCheckbox {
  width: 16px;
  height: 16px;
  border: 2px solid #175b6b;
  border-radius: 2px;
  accent-color: #175b6b;
}

.referralCheckboxText {
  font-size: 16px;
}

/* Middle grid */
.referralMidGrid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .referralMidGrid {
    flex-direction: row;
  }
}

.referralHalf {
  width: 100%;
}

@media (min-width: 1024px) {
  .referralHalf {
    width: 50%;
  }
}

.referralPatientGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .referralPatientGrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Bottom blocks */
.referralBottomBlock {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.referralUploadLabel {
  font-size: 16px;
  font-weight: 500;
}

.referralUploadRow {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-top: 8px;
  margin-left: 20px;
  gap: 12px;
}

.referralUploadButton {
  padding: 8px 16px;
  background: #000;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.referralUploadRow:hover .referralUploadButton {
  background: #175b6b;
}

.referralUploadName {
  font-size: 16px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.referralHiddenInput {
  display: none;
}

/* Signature */
.referralSignatureRow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 20px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .referralSignatureRow {
    flex-direction: row;
  }
}

.referralSignatureInput {
  width: 100%;
}

@media (min-width: 1024px) {
  .referralSignatureInput {
    width: 80%;
  }
}

/* Policy */
.referralPolicyRow {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 16px;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .referralPolicyRow {
    flex-direction: row;
    align-items: center;
  }
}

.referralDateText {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.referralPolicyBlock {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.referralPolicyText {
  font-size: 16px;
}

.referralPolicyLink {
  color: #175b6b;
  text-decoration: none;
}

.referralPolicyLink:hover {
  text-decoration: underline;
}

/* Actions */
.referralActions {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.referralBtn {
  width: 30%;
  padding: 10px 12px;
  border-radius: 999px;
  transition: border-radius 0.3s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.referralBtn:hover {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.referralBtnOutline {
  background: transparent;
  border: 1px solid #175b6b;
  color: #175b6b;
}

.referralBtnPrimary {
  background: #175b6b;
  border: 1px solid #175b6b;
  color: #fff;
}

.referralBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Modal */
.referralModalBackdrop {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003;
  padding: 16px;
}

.referralModal {
  width: 100%;
  max-width: 450px;
  border-radius: 10px;
  background: #175b6b;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.referralModalText {
  padding: 20px 24px;
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

.referralModalActions {
  padding: 12px 24px 16px;
  display: flex;
  justify-content: flex-end;
}

.referralModalCloseBtn {
  color: #fff;
  padding: 8px 20px;
  border: 1px solid #fff;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}
/* Wrapper */
.privacyPolicy {
  padding: 0;
}

/* Title (Aboreto via CSS var) */
.privacyPolicy__title {
  font-size: 47px;
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-weight: 400;
  padding: 40px 0;
  margin: 0;
}

/* Intro */
.privacyPolicy__intro {
  font-size: 15px;
  color: #333333;
  font-family: var(--font-opensans);
  line-height: 1.7;
  margin: 0;
}
.adc {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Main Heading */
.adc__title {
  color: var(--color-primary);
  font-family: var(--font-aboreto);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .adc__title {
    font-size: 45px;
  }
}

/* Intro Paragraph */
.adc__intro {
  font-size: 17px;
  font-family: var(--font-opensans);
  color: #4d4d4d;
  margin-bottom: 12px;
  line-height: 1.6;
}

/* Subtitle */
.adc__subtitle {
  color: var(--color-primary);
  font-family: var(--font-aboreto);
  font-size: 25px;
  line-height: 1.15;
  margin-bottom: 8px;
}

@media (min-width: 1024px) {
  .adc__subtitle {
    font-size: 40px;
  }
}

/* List */
.adc__list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  color: #4d4d4d;
  font-size: 17px;
  font-family: var(--font-opensans);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.adc__list li::marker {
  color: #000000;
}

/* Button Wrapper */
.adc__btnWrap {
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .adc__btnWrap {
    justify-content: flex-start;
  }
}
/* Section padding (py-10) */
.referral {
  padding: 40px 0;
}

/* empty "flex flex-col gap-5" spacer (you had an empty div) */
.referral__topSpacer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Main wrapper: flex-col -> lg:flex-row + gap + pt-5 */
.referral__wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}

@media (min-width: 1024px) {
  .referral__wrap {
    flex-direction: row;
  }
}

/* Sidebar */
.referral__sidebar {
  width: 300px;
  flex-shrink: 0;
  height: fit-content;
  border: 1px solid var(--color-primary);
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  margin-top: 120px;
  overflow: hidden;
}

/* Nav links */
.referral__link {
  display: inline-block;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--color-olive-dark, rgba(0, 0, 0, 0.25));
  color: #000;
  text-decoration: none;
  font-family: var(--font-opensans);
}

.referral__link--active {
  background: var(--color-primary);
  color: #fff;
  border-top-right-radius: 24px;
}

.referral__link--last {
  border-bottom-left-radius: 24px;
}

/* Form grows */
.referral__form {
  flex: 1 1 auto;
}

/* Stack spacing */
.referral__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Title */
.referral__title {
  color: var(--color-primary);
  font-family: var(--font-aboreto);
  font-size: 39px;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Paragraph */
.referral__text {
  color: #000;
  padding-bottom: 8px;
  margin: 0;
  line-height: 1.7;
  font-family: var(--font-opensans);
}

.referral__note {
  font-size: 14px; /* text-sm */
}

/* Section headings */
.referral__section {
  width: 100%;
}

.referral__subtitle {
  color: var(--color-primary);
  font-family: var(--font-aboreto);
  font-size: 25px;
  letter-spacing: -0.02em;
  margin: 0;
}

.referral__subtitle--mt {
  margin-top: 12px; /* mt-3 */
}

/* Dividers */
.referral__divider {
  border-bottom-color: var(--color-olive);
  border-bottom-style: solid;
}

.referral__divider--thick {
  border-bottom-width: 2px; /* border-b-2 */
  margin-top: 6px;
}

.referral__divider--thin {
  border-bottom-width: 1px; /* border-b */
  margin: 12px 0; /* my-3 */
}

/* Grid */
.referral__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; /* gap-4 */
  margin-top: 8px; /* mt-2 */
}

/* Field row (label + input) */
.referral__row {
  display: flex;
  gap: 4px; /* gap-1 */
  align-items: center;
}

.referral__label {
  width: 100%;
  font-family: var(--font-opensans);
}

@media (min-width: 1024px) {
  .referral__label {
    width: 40%;
  }
}

/* Inputs */
.referral__input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 8px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  font-family: var(--font-opensans);
  outline: none;
}

.referral__textarea {
  width: 100%;
  height: 128px; /* h-32 */
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 8px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  font-family: var(--font-opensans);
  outline: none;
}

/* Errors */
.referral__error {
  font-size: 14px;
  color: var(--color-primary);
  font-family: var(--font-opensans);
}

.referral__error--mt3 {
  margin-top: 12px; /* mt-3 */
}

.referral__error--mt1 {
  margin-top: 4px; /* mt-1 */
}

/* Consent */
.referral__consent {
  display: flex;
  align-items: flex-start;
  gap: 48px; /* gap-12 */
}

.referral__date {
  font-size: 14px; /* text-sm */
  color: rgba(0, 0, 0, 0.4); /* text-black/40 */
  font-family: var(--font-opensans);
}

.referral__privacy {
  margin-top: 20px; /* mt-5 */
  font-family: var(--font-opensans);
}

.referral__checkbox {
  width: 16px; /* w-4 */
  height: 16px; /* h-4 */
  margin-right: 4px; /* mr-1 */
  accent-color: var(--color-primary);
}

.referral__privacyLink {
  color: var(--color-primary);
  text-decoration: none;
}

/* Buttons */
.referral__actions {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.referral__btn {
  width: 30%;
  padding: 8px;
  border-radius: 24px; /* rounded-3xl */
  font-family: var(--font-opensans);
  cursor: pointer;
  transition: border-radius 300ms ease;
}

.referral__btn:hover {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.referral__btn--ghost {
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}

.referral__btn--primary {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.referral__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Modal */
.referralModal {
  position: fixed;
  inset: 0;
  z-index: 10003;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.referralModal__card {
  width: 100%;
  max-width: 450px;
  margin-top: 16px;
  border-radius: 10px;
  background: var(--color-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.referralModal__text {
  padding: 20px 24px;
  color: #fff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
  font-family: var(--font-opensans);
}

.referralModal__footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 24px;
}

.referralModal__btn {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-opensans);
}
/* Button */
.adc__btn {
  font-family: var(--font-opensans);
  font-weight: 600;
  background: #d0b1b1;
  color: #ffffff;
  border: none;
}
.privacyPolicy__updated {
  font-weight: 600;
}

/* Main ordered list */
.privacyPolicy__list {
  margin: 24px 0 0;
  list-style-type: decimal !important;
  list-style-position: outside;
  padding-left: 24px;
  color: #333333;
  font-family: var(--font-opensans);
  font-size: 15px;
}

.privacyPolicy__item {
  margin: 0 0 24px 0; /* like space-y-6 */
}

/* Headings inside list */
.privacyPolicy__heading {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333333;
  font-family: var(--font-opensans);
  
}

.privacyPolicy__text {
  margin: 0;
}

/* Sub lists */
.privacyPolicy__sublist {
  margin: 10px 0 0;
  padding-left: 24px;
  list-style-type: disc;
}

.privacyPolicy__sublist.compact .privacyPolicy__subitem {
  margin-bottom: 6px; /* space-y-1 */
}

.privacyPolicy__subitem {
  margin-bottom: 10px; /* space-y-2 */
}

/* Marker styling (replaces marker:text styles) */
.privacyPolicy__sublist li::marker {
  color: #333333;
  font-size: 17px;
}

/* Footer spacing (replaces <br /><br />) */
.privacyPolicy__footerSpace {
  height: 32px;
}

/* Contact block */
.privacyPolicy__contact {
  font-size: 15px;
  padding-bottom: 80px;
  font-family: var(--font-opensans);
}

.privacyPolicy__contactTitle {
  margin: 0 0 6px 0;
  color: #333333;
  font-size: 15px;
  font-family: var(--font-opensans);
}

.privacyPolicy__contactText {
  margin: 0;
  color: #333333;
  line-height: 1.7;
}

.privacyPolicy__email {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.privacyPolicy__email:hover {
  color: #175b6b;
}
.invis_Banner {
  position: relative;
  padding: 20px 0; /* py-5 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -400px center;
  overflow: hidden;
}

.invis_Banner::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0000002b;
  z-index: 0;
}

@media (min-width: 1024px) {
  .invis_Banner {
    background-position: right center;
  }
}

.invis_Banner__content {
  position: relative;
  z-index: 1;
  min-height: 550px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.invis_Banner__title {
  font-family: var(--font-aboreto);
  font-size: 38px;
  color: #175b6b;
}

.invis_Banner__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
}

.invis_Banner__item {
  color: #175b6b;
  font-size: 16px;
  line-height: 1.45;
}

.invis_Banner__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
}

.invis_Banner__highlight {
  color: #175b6b;
  font-weight: 600;
}

.invis_Banner__cta {
  margin-top: 20px; /* mt-5 */
}

.invis_Banner__button {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
  position: relative;
}

.invis_Banner__button:hover {
  background: #a3a695;
}
.invis_TreatmentAccordion {
  padding: 40px 0; /* py-10 */
  background: #ffffff;
}

.invis_TreatmentAccordion__wrap {
  width: 100%;
}

.invis_TreatmentAccordion__intro {
  text-align: center;
  margin-bottom: 48px;
}

.invis_TreatmentAccordion__headingBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 40px;
  border-radius: 16px;
  background: #175b6b;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.invis_TreatmentAccordion__heading {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.invis_TreatmentAccordion__subheading {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  font-family: var(--font-nunito);
  color: rgba(255, 255, 255, 0.9);
}

.invis_TreatmentAccordion__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .invis_TreatmentAccordion__grid {
    flex-direction: row;
    gap: 48px;
  }
}

.invis_TreatmentAccordion__left {
  flex: 1;
  width: 100%;
}

.invis_TreatmentAccordion__row {
  display: flex;
  gap: 20px;
}

@media (min-width: 1024px) {
  .invis_TreatmentAccordion__row {
    gap: 24px;
  }
}

.invis_TreatmentAccordion__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invis_TreatmentAccordion__step {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease,
    box-shadow 200ms ease;
  background: #ffffff;
  color: #175b6b;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.invis_TreatmentAccordion__step.is-active {
  background: #175b6b;
  color: #ffffff;
  border-color: #175b6b;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.invis_TreatmentAccordion__line {
  width: 1px;
  flex: 1;
  background: rgba(0, 0, 0, 0.12);
}

.invis_TreatmentAccordion__content {
  flex: 1;
  padding-bottom: 32px;
}

.invis_TreatmentAccordion__titleBtn {
  width: 100%;
  text-align: left;
  font-weight: 600;
  font-size: 18px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 200ms ease;
  color: #000;
}

.invis_TreatmentAccordion__titleBtn.is-active {
  color: #175b6b;
}

.invis_TreatmentAccordion__panel {
  overflow: hidden;
  transition: max-height 300ms ease-out, margin-top 200ms ease;
  margin-top: 0;
}

.invis_TreatmentAccordion__panel.is-open {
  margin-top: 12px;
}

.invis_TreatmentAccordion__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
}

.invis_TreatmentAccordion__right {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .invis_TreatmentAccordion__right {
    width: 50%;
  }
}

.invis_TreatmentAccordion__ctaWrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.invis_TreatmentAccordion__ctaBtn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
}

.invis_TreatmentAccordion__ctaBtn:hover {
  background: #a3a695;
}
.invis_Treats {
  padding: 40px 0;
  background: var(--color-pinkish, #f7f0ee); /* fallback if variable not set */
}

.invis_Treats__wrap {
  width: 100%;
}

.invis_Treats__top {
  text-align: center;
  max-width: 768px; /* ~ max-w-3xl */
  margin: 0 auto;
}

.invis_Treats__logoWrap {
  display: flex;
  justify-content: center;
}

.invis_Treats__logo {
  width: 144px; /* w-36 */
  height: auto;
}

.invis_Treats__title {
  margin: 12px 0;
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-weight: 500;
  text-align: center;
  font-size: 30px;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .invis_Treats__title {
    font-size: 38px;
  }
}

.invis_Treats__intro {
  font-size: 16px;
  line-height: 1.55;
  color: #4d4d4d;
  margin: 0;
}

.invis_Treats__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 640px) {
  .invis_Treats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .invis_Treats__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

.invis_Treats__imgWrap {
  position: relative;
  width: 192px; /* w-48 */
  height: 128px; /* h-32 */
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  display: grid;
  place-items: center;
}

.invis_Treats__img {
  width: 208px; /* w-52 */
  height: auto;
  object-fit: contain;
}

.invis_Treats__cardTitle {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.25;
  color: #175b6b;
  font-weight: 400;
}

.invis_Treats__cardDesc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #4d4d4d;
  max-width: 32ch;
}

.invis_Treats__ctaWrap {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.invis_Treats__ctaBtn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
}

.invis_Treats__ctaBtn:hover {
  background: #a3a695;
}
.invis_Journey {
  padding: 40px 0;
  background: var(--color-tertiary, #f4f4f4);
}

.invis_Journey__wrap {
  width: 100%;
}

.invis_Journey__heading {
  text-align: center;
}

.invis_Journey__title {
  margin-bottom: 20px;
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-weight: 500;
  text-align: center;
  font-size: 30px;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .invis_Journey__title {
    font-size: 38px;
  }
}

.invis_Journey__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .invis_Journey__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.invis_Journey__card {
  text-align: center;
  margin: 0 auto;
  max-width: 384px; /* ~ max-w-sm */
}

.invis_Journey__pill {
  display: inline-block;
  background: #175b6b;
  color: #fff;
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 12px;
  letter-spacing: 0.12em; /* tracking-widest */
  text-transform: uppercase;
}

.invis_Journey__iconWrap {
  width: 96px;  /* w-24 */
  height: 96px; /* h-24 */
  border-radius: 999px;
  border: 2px solid #175b6b;
  display: grid;
  place-items: center;
  margin: 16px auto 0;
}

.invis_Journey__icon {
  width: 56px;  /* w-14 */
  height: 56px; /* h-14 */
  object-fit: contain;
}

.invis_Journey__cardTitle {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.25;
  color: #175b6b;
  font-weight: 400;
}

.invis_Journey__cardDesc {
  margin-top: 8px;
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.6;
}

.invis_Journey__ctaWrap {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.invis_Journey__ctaBtn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
}

.invis_Journey__ctaBtn:hover {
  background: #a3a695;
}
.invis_Team {
  padding-top: 40px;
}

.invis_Team__wrap {
  width: 100%;
}

.invis_Team__sections {
  padding-bottom: 40px;
}

.invis_Team__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.invis_Team__sectionTitle {
  width: 100%;
  text-align: center;
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-weight: 400;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  .invis_Team__sectionTitle {
    font-size: 47px;
  }
}

.invis_Team__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .invis_Team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .invis_Team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.invis_Team__card {
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: inherit;
  display: block;
  width: 100%;
}

.invis_Team__img {
  width: 100%;
  height: auto;
  display: block;
}

.invis_Team__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: rgba(163, 166, 149, 0.68); /* #A3A695AD */
  transition: height 300ms ease;
}

.invis_Team__meta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  transition: opacity 150ms ease;
  transition-delay: 300ms;
  padding: 0 16px;
}

.invis_Team__name {
  text-align: center;
  color: #fff;
  font-family: var(--font-aboreto);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}

.invis_Team__role {
  text-align: center;
  color: #fff;
  font-family: var(--font-nunito);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
}

.invis_Team__card:hover .invis_Team__overlay {
  height: 100%;
}

.invis_Team__card:hover .invis_Team__meta {
  opacity: 1;
}

/* keyboard accessibility */
.invis_Team__card:focus-visible {
  outline: 2px solid #175b6b;
  outline-offset: 4px;
}
.home_Banner {
  width: 100%;
}

.home_Banner__bg {
  position: relative;
  background-color: #833ca3;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -580px center;
}

@media (min-width: 1024px) {
  .home_Banner__bg {
    background-position: center center;
  }
}

/* overlay */
.home_Banner__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.17); /* #0000002B */
}

.home_Banner__inner {
  position: relative; /* keep content above overlay */
}

.home_Banner__content {
  min-height: 650px;
  max-width: 500px;

  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}

.home_Banner__title {
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-size: 39px;
  line-height: 1.15;
  letter-spacing: -0.02em; 
}

.home_Banner__subtitle {
  color: #175b6b;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6; 
}

.home_Banner__textWrap {
  position: relative;
}
.dentalCare {
  padding: 40px 0; /* py-10 */
}

.dentalCare__grid {
  display: flex;
  flex-direction: column;
  gap: 20px; /* gap-5 */
}

@media (min-width: 1024px) {
  .dentalCare__grid {
    flex-direction: row;
    gap: 88px; /* roughly gap-22 (22*4) */
    align-items: flex-start;
  }
}

.dentalCare__left {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .dentalCare__left {
    width: 40%;
  }
}

.dentalCare__right {
  flex: 1;
}

.dentalCare__title {
  margin-bottom: 20px; /* mb-5 */
  color: #175b6b;
  font-family: var(--font-aboreto); 
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  .dentalCare__title {
    font-size: 35px;
  }
}

.dentalCare__cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .dentalCare__cta {
    justify-content: flex-start;
  }
}

/* Button look from your Tailwind */
.dentalCare__btn {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
  transition: background-color 200ms ease;
}

.dentalCare__btn:hover {
  background: #a3a695;
}

.dentalCare__copy {
  font-family: var(--font-opensans);
  color: #4d4d4d;
  font-size: 18px; /* text-lg */
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 16px; /* gap-4 */
  line-height: 1.6; /* comfortable */
}
.clientComfort {
  padding: 40px 0; /* py-10 */
}

.clientComfort__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /* gap-5 */
}

@media (min-width: 768px) {
  .clientComfort__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .clientComfort__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.clientComfort__card {
  display: flex;
  flex-direction: column;
  gap: 12px; /* gap-3 */
}

.clientComfort__iconWrap {
  display: flex;
  justify-content: center;
}

.clientComfort__icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.clientComfort__title {
  font-size: 22px;
  font-family: var(--font-aboreto);
  text-align: center;
  line-height: 1.15; /* leading-tight */
  margin: 0;
}
.genDent_Banner {
  position: relative;
  padding: 20px 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -400px center;
  overflow: hidden;
}

.genDent_Banner::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0000002b;
  z-index: 0;
}

@media (min-width: 1024px) {
  .genDent_Banner {
    background-position: right center;
  }
}

.genDent_Banner__content {
  position: relative;
  z-index: 1;
  min-height: 550px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.genDent_Banner__title {
  font-family: var(--font-aboreto);
  font-size: 38px;
  color: var(--color-primary);
}

.genDent_Banner__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.genDent_Banner__item {
  color: var(--color-primary);
  font-size: 16px;
  line-height: 1.45;
}

.genDent_Banner__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
}

.genDent_Banner__highlight {
  color: var(--color-primary);
  font-weight: 600;
}

.genDent_Banner__cta {
  margin-top: 20px;
}

.genDent_Banner__button {
  background: #809ca5;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
  position: relative;
}

.genDent_Banner__button:hover {
  background: #a3a695;
}

/* genDent Header */
.genDent_Header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12),
    0 4px 6px -4px rgba(0, 0, 0, 0.12);
}

.genDent_Header__topbar {
  background-color: #175b6b;
  font-family: var(--font-nunito);
  font-size: 15px;
  padding: 12px 0;
  color: #fff;
}

.genDent_Header__topbarInner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.genDent_Header__tagline {
  text-align: center;
  color: #fff;
  font-family: var(--font-aboreto);
  font-size: 1.25rem;
  margin: 0;
}

@media (min-width: 1024px) {
  .genDent_Header__tagline {
    font-size: 1.5rem;
  }
}

.genDent_Header__main {
  background: #fff;
  padding: 16px 0;
}

.genDent_Header__mainInner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

@media (min-width: 1024px) {
  .genDent_Header__mainInner {
    justify-content: space-between;
  }
}

.genDent_Header__logoLink {
  display: block;
}

.genDent_Header__logo {
  width: 140px;
  height: auto;
  display: block;
}

.genDent_Header__actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.genDent_Header__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 18px;
  text-decoration: none;
}

.genDent_Header__ctaWrap {
  display: none;
}

@media (min-width: 1024px) {
  .genDent_Header__ctaWrap {
    display: block;
  }
}

.genDent_Header__cta {
  background: #809ca5 !important;
  color: #fff !important;
  font-size: 17px;
  text-transform: uppercase;
  font-family: var(--font-roboto);
}

.genDent_Header__cta:hover {
  background: #a3a695 !important;
}

/* genDent Include */
.genDent_Include {
  padding: 40px 0;
  background: var(--tertiary);
}

.genDent_Include__heading {
  margin-bottom: 40px;
}

.genDent_Include__title {
  text-align: center;
  color: #175b6b;
  font-family: var(--font-aboreto);
  font-size: 30px;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .genDent_Include__title {
    font-size: 38px;
  }
}

.genDent_Include__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .genDent_Include__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .genDent_Include__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.genDent_Include__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.2s ease;
}

.genDent_Include__card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.genDent_Include__icon {
  margin-bottom: 16px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.genDent_Include__text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: #4d4d4d;
}

/* genDent Expect */
.genDent_Expect {
  padding: 40px 0;
}

.genDent_Expect__title {
  text-align: center;
  color: var(--color-primary);
  font-family: var(--font-aboreto);
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .genDent_Expect__title {
    font-size: 38px;
  }
}

.genDent_Expect__intro {
  text-align: center;
  width: 100%;
  margin: 0 auto 20px;
  font-family: var(--font-opensans);
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .genDent_Expect__intro {
    max-width: 70%;
  }
}

.genDent_Expect__wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

@media (min-width: 1024px) {
  .genDent_Expect__wrap {
    flex-direction: row;
    align-items: flex-start;
  }
}

.genDent_Expect__content {
  width: 100%;
}

@media (min-width: 1024px) {
  .genDent_Expect__content {
    width: 60%;
  }
}

.genDent_Expect__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .genDent_Expect__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .genDent_Expect__grid {
    gap: 32px;
  }
}

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

@media (min-width: 1024px) {
  .genDent_Expect__card {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.genDent_Expect__iconWrap {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  border: 1px solid var(--color-primary);
  display: grid;
  place-items: center;
}

.genDent_Expect__icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.genDent_Expect__iconPlaceholder {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.genDent_Expect__cardBody {
  text-align: center;
}

@media (min-width: 1024px) {
  .genDent_Expect__cardBody {
    text-align: left;
  }
}

.genDent_Expect__cardTitle {
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 4px;
  font-size: 1rem;
}

.genDent_Expect__cardDesc {
  font-family: var(--font-opensans);
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.genDent_Expect__media {
  width: 100%;
}

@media (min-width: 1024px) {
  .genDent_Expect__media {
    width: 40%;
  }
}

.genDent_Expect__img {
  width: 100%;
  height: auto;
  display: block;
}

/* genDent Team */
.genDent_Team {
  padding: 40px 0;
}

.genDent_Team__wrap {
  width: 100%;
}

.genDent_Team__sections {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.genDent_Team__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.genDent_Team__sectionTitle {
  width: 100%;
  text-align: center;
  color: var(--color-primary);
  font-family: var(--font-aboreto);
  font-weight: 400;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.15;
}

@media (min-width: 1024px) {
  .genDent_Team__sectionTitle {
    font-size: 47px;
  }
}

.genDent_Team__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .genDent_Team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .genDent_Team__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.genDent_Team__card {
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: inherit;
  display: block;
  width: 100%;
}

.genDent_Team__img {
  width: 100%;
  height: auto;
  display: block;
}

.genDent_Team__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(163, 166, 149, 0.68);
  transition: height 300ms ease;
}

.genDent_Team__meta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  transition: opacity 150ms ease;
  transition-delay: 300ms;
  padding: 0 16px;
}

.genDent_Team__name {
  text-align: center;
  color: #fff;
  font-family: var(--font-aboreto);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}

.genDent_Team__role {
  text-align: center;
  color: #fff;
  font-family: var(--font-nunito);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
}

.genDent_Team__card:hover .genDent_Team__overlay {
  height: 100%;
}

.genDent_Team__card:hover .genDent_Team__meta {
  opacity: 1;
}

.genDent_Team__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}