/* =========================================
   GLOBAL FONTS
   ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");

:root {
  --font-primary: "Plus Jakarta Sans", sans-serif;
  --font-secondary: "Libre Caslon Text", serif;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  background: #fff;
}
.page-width {
  width: 100%;
  max-width: 1318px;
  margin: 0 auto;
}
.topbar {
  width: 100%;
  height: 78px;
  background: linear-gradient(90deg, #1979b9 0%, #0f9a96 52%, #00a05a 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: var(--font-primary);
}
.topbar-inner {
  width: min(100%, 1316px);
  margin: auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  align-items: center;
}
.top-item {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.top-item:last-child {
  border-right: 0;
}
.topbar-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.topbar-inner .top-item:nth-child(2) .topbar-icon {
  width: 23px;
  height: 23px;
}
.mail-icon {
  width: 26px;
  height: 18px;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}
.topbar-icon.mail-icon {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
}
.topbar-text {
  font-family: var(--font-primary);
  font-size: 18px;
}
.nav {
  width: 100%;
  min-height: 66px;
  height: auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.nav-inner {
  width: min(100%, 1316px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-template-columns: 150px 1fr 170px;
  align-items: center;
  padding: 0 0;
}
.logo {
  width: 136px;
  height: 99px;
  object-fit: contain;
}
.links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.links a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.35px;
}
.appointment,
.learn-more {
  background: #079b78;
  color: #fff;
  border: 0;
  border-radius: 24px;
  text-decoration: none;
}
.appointment {
  font-family: var(--font-primary);
  font-weight: 600;
  justify-self: end;
  padding: 0 20px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 276px;
  height: 60px;
  border-radius: 80px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
}
.hero {
  position: relative;
  min-height: 436px;
  overflow: hidden;
  background: #f9f8f6;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/home-banner.png") right center no-repeat;
  background-size: auto 100%;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1316px);
  margin: auto;
  padding: 62px 0 40px;
}
.eyebrow {
  font-family: var(--font-primary);
  color: #006686;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 1.02px;
  margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 70px;
  line-height: 100px;
  letter-spacing: -0.96px;
  max-width: 905px;
  margin: 0;
}
.subtitle {
  font-family: var(--font-primary);
  max-width: 672px;
  font-size: 18px;
  line-height: 29px;
  color: #45464d;
}
.actions {
  display: flex;
  gap: 12px;
}
.btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 20px;
  font-size: 10px;
  border: 1px solid #cfcfcf;
}
.btn-primary {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: auto;
  padding: 0 30px;
  height: 60px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  border-radius: 80px;
  border: none;
  color: #fff;
}
.btn-secondary {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: auto;
  padding: 0 30px;
  height: 60px;
  background: transparent;
  border-radius: 80px;
  color: #000000;
  border: 1px solid #76777d;
}
.about-section {
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(230, 249, 242, 0.6) 0%,
      rgba(255, 255, 255, 0) 40%
    ),
    #fff;
  padding: 100px 0 70px;
}
.about-inner {
  width: min(100%, 1316px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  align-items: center;
  gap: 60px;
}
/* .about-copy {
  width: 50%;
} */
.section-label {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #116f82;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 15px;
}
.section-label span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0b7c88;
  position: relative;
}
.section-label span:after {
  content: "";
  position: absolute;
  left: 12px;
  top: 4px;
  width: 80px;
  height: 1px;
  background: #006686;
}
.section-label strong {
  margin-left: 80px;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
}
.about-copy h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  line-height: 100%;
  letter-spacing: -0.96px;
  margin: 30px 0 30px;
}
.about-copy p {
  font-family: var(--font-primary);
  color: #41484c;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 30px;
  padding-right: 30px;
}
.learn-more {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: fit-content;
  padding: 0 40px;
  height: 60px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  border-radius: 80px;
  color: #fff;
  margin-top: 30px;
}
.about-visual {
  position: relative;
}
.about-visual > img {
  width: 100%;
  border-radius: 5px;
}
.stat {
  position: absolute;
  top: -95px;
  width: 100%;
  max-width: 236px;
  height: 148px;
  padding: 10px 10px;
  color: #fff;
  /* background: linear-gradient(135deg, #197eb5, #009f7a);
  border: 12px solid #fff;
  border-radius: 11px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08); */
  z-index: 2;
  padding-top: 45px;
  padding-left: 20px;
}
.stat-one:after {
  content: "";
  background: url(../images/bg-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 236px;
  height: 148px;
  display: flex;
  border-radius: 11px;
  position: absolute;
  left: -3px;
  top: 7px;
  z-index: -1;
}
.stat-two:after {
  content: "";
  background: url(../images/bg-2.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 236px;
  height: 148px;
  display: flex;
  border-radius: 11px;
  position: absolute;
  left: -5px;
  top: 7px;
  z-index: -1;
}
.stat strong {
  display: block;
  font-family: var(--font-secondary);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  margin-bottom: 15px;
}
.stat span {
  display: block;
  font-family: var(--font-secondary);
  font-size: 18px;
  line-height: 1.05;
}
.stat-one {
  left: 25px;
}
.stat-two {
  right: 8px;
  /* background: #08728a; */
}
@media (max-width: 900px) {
  .nav-inner {
    padding: 0 24px;
    grid-template-columns: 100px 1fr;
  }
  .appointment {
    display: none;
  }
  .links {
    gap: 16px;
  }
  .hero-content {
    padding-left: 35px;
    padding-right: 35px;
  }
  .about-inner {
    padding: 0 35px;
    grid-template-columns: 1fr;
    row-gap: 60px;
  }
  .about-copy {
    max-width: 100%;
  }
  .about-visual {
    justify-self: center;
    max-width: 100%;
  }
}
@media (max-width: 650px) {
  .topbar {
    height: auto;
    padding: 7px 15px;
  }
  .topbar-inner {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .top-item {
    justify-content: flex-start;
    border: 0;
  }
  .nav {
    height: auto;
    padding: 10px 15px;
  }
  .nav-inner {
    width: 100%;
    grid-template-columns: 80px 1fr;
    padding: 0;
  }
  .links {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .links a {
    font-size: 9px;
  }
  .hero {
    min-height: 600px;
  }
  .hero:before {
    height: 878px;
    width: 100%;
  }
  .hero-content {
    padding: 48px 24px;
  }
  .hero h1 {
    font-size: 39px;
  }
  .about-section {
    padding: 60px 0;
  }
  .about-inner {
    padding: 0 24px;
  }
  .about-copy h2 {
    font-size: 32px;
  }
  .about-visual {
    width: 100%;
    height: 270px;
  }
  .about-visual > img {
    width: calc(100% - 10px);
    height: 235px;
  }
  .stat {
    top: -25px;
    width: 100px;
    height: 68px;
  }
  .stat-one {
    right: 105px;
  }
}
/* SECTION 3: OUR SERVICES */
.services-section {
  position: relative;
  padding: 48px 0 52px;
  background: linear-gradient(180deg, #e9f7f4 0 58%, #ffffff 58% 100%);
  overflow: hidden;
}
.services-inner {
  width: min(100%, 1316px);
  margin: 0 auto;
}
.services-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.services-label {
  align-items: center;
  gap: 12px;
  color: #126b7a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.85px;
  margin-bottom: 12px;
  position: relative;
}
/* .services-label:before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #087e88;
  position: absolute;
}
.services-label:after {
  content: "";
  width: 80px;
  height: 1px;
  background: #006686;
  position: absolute;
  margin-left: -8px;
  left: 25px;
  top: 4px;
} */
.services-section h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.4;
  letter-spacing: -0.96px;
  margin-top: 30px;
  margin-bottom: 0;
}
.services-more {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
  max-width: 255px;
  height: 60px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  border-radius: 80px;
  color: #fff;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 auto;
}
.service-card {
  position: relative;
  min-height: 285px;
  background: #fff;
  border-radius: 7px 7px 30px 30px;
  overflow: visible;
  /* box-shadow: 0 8px 0 rgba(225,228,226,.72); */
  background: #ebebebc7;
}
.service-card-image {
  display: block;
  width: 100%;
  border-radius: 6px 6px 0 0;
}
.service-card-body {
  position: relative;
  min-height: 78px;
  padding: 31px 16px 12px;
  text-align: center;
  z-index: 1;
}
.service-card-body:before {
  content: "";
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 0);
  z-index: 4;
  width: 395px;
  height: 134px;
  border-radius: 0 0 30px 30px;
}
.service-icon {
  position: absolute;
  left: 50%;
  top: -75px;
  transform: translateX(-50%);
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
  z-index: 4;
}
.service-icon svg {
  width: 61px;
  height: 61px;
  stroke: #079b82;
  fill: none;
  stroke-width: 1.8;
}
.service-title {
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  margin-top: 20px;
  margin-bottom: 0;
  letter-spacing: -0.96px;
  position: relative;
  z-index: 4;
}
.services-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 26px;
}
.services-dots span {
  display: block;
  width: 22px;
  height: 4px;
  border-radius: 3px;
  background: #b9e8f4;
}
.services-dots span.active {
  width: 43px;
  background: #087a91;
}

@media (max-width: 900px) {
  .services-inner {
    padding: 0 35px;
  }
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
  .services-section {
    background: linear-gradient(180deg, #e9f7f4 0 78%, #fff 78% 100%);
  }
}
@media (max-width: 650px) {
  .services-section {
    padding: 55px 0 45px;
  }
  .services-inner {
    padding: 0 24px;
  }
  .services-heading-row {
    align-items: flex-start;
    gap: 15px;
  }
  .services-section h2 {
    font-size: 30px;
  }
  .services-more {
    min-width: 105px;
  }
}

/* SECTION 4 — FEATURED SERVICES */
.featured-services {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 94% 92%,
      rgba(224, 244, 239, 0.75),
      rgba(255, 255, 255, 0) 25%
    ),
    #fff;
  padding: 48px 0 52px;
}

.featured-inner {
  width: min(100%, 1316px);
  margin: 0 auto;
}

.featured-heading {
  text-align: center;
  margin-bottom: 43px;
}

.featured-heading .section-label {
  justify-content: center;
  margin-bottom: 10px;
}

.section-label.centered {
  position: relative;
  justify-content: center;
}
.section-label.centered span:first-child {
  position: absolute;
  left: 33%;
}
.section-label.centered span:last-child {
  position: absolute;
  right: 32%;
}

.section-label.centered span::after {
  display: none;
}

.section-label.centered span:first-child::after {
  display: block;
  left: 14px;
  width: 80px;
}
.section-label.centered span:last-child::after {
  display: block;
  left: -85px;
  width: 80px;
}
.section-label.centered h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #006686;
  margin: 0;
}

.featured-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  line-height: 66px;
  letter-spacing: -0.96px;
  margin: 20px 0;
margin-bottom: 80px;
}

.featured-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: center;
  margin: 0 auto;
}
.featured-grid .featured-card:nth-child(1) {
	color: #fff;
    background: linear-gradient(110deg, #187fb8 0%, #079b78 100%);
    padding-right: 68px;
    padding-left: 40px;
}
.featured-grid .featured-card:nth-child(1) p {
	color: #fff;
}
.featured-grid .featured-card:nth-child(2) {
	color: #111;
    background: #fff;
    border: 1px solid #71b4ac;
    padding: 18px 23px 18px 33px;
    transform: translateY(-40px);
    padding-left: 65px;
}

.featured-card {
  position: relative;
  min-height: 205px;
  border-radius: 20px;
  padding: 40px 20px 17px;
  box-shadow: 0 7px 22px rgba(20, 60, 70, 0.07);
}

.featured-card-primary {
  color: #fff;
  background: linear-gradient(110deg, #187fb8 0%, #079b78 100%);
  padding-right: 68px;
  padding-left: 40px;
}

.featured-card-light {
  color: #111;
  background: #fff;
  border: 1px solid #71b4ac;
  padding: 18px 23px 18px 33px;
  padding-left: 65px;
}

.featured-icon {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #0c8b91;
  font-size: 18px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
  margin-bottom: 9px;
}

.featured-card h3 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 36px;
  line-height: -0.96px;
  margin: 25px 0;
}

.featured-card p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  margin: 25px 0;
}

.featured-card-light p {
  color: #5a5a5a;
}

.card-center-icon {
  position: absolute;
/*   width: 86px;
  height: 86px;
  border-radius: 50%; */
  color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
/*   font-size: 23px;
  background: linear-gradient(125deg, #0f6f8c 0%, #0a8f6e 55%, #0b9d5e 100%); */
/*   border: 11px solid #fff;
  box-shadow: 0 4px 14px rgba(11, 90, 78, 0.28); */
  z-index: 4;
}

/* .card-center-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
} */

.light-icon {
  color: #168b87;
}

@media (max-width: 900px) {
  .featured-inner {
    padding: 0 35px;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
  }

  .featured-card-light {
    transform: none;
  }

  .card-center-icon {
    display: none;
  }
}

@media (max-width: 650px) {
  .featured-services {
    padding: 58px 0 62px;
  }

  .featured-inner {
    padding: 0 24px;
  }

  .featured-heading h2 {
    font-size: 29px;
  }

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

  .featured-card-primary {
    padding-right: 20px;
  }
}

/* SECTION 5 — CTA */
.cta-section {
  width: 100%;
  padding: 54px 0 52px;
  background: #fff;
}

.cta-card {
  position: relative;
  width: 100%;
  min-height: 435px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 9px;
  background: url("../images/cta.png") center / cover no-repeat;
  display: flex;
  align-items: center;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background: none;
}

.cta-content {
  position: relative;
  z-index: 2;
  padding: 40px 37px;
  color: #fff;
  max-width: 940px;
}

.cta-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.75px;
  margin-bottom: 12px;
}
.cta-label h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.cta-dot {
  width: 9px;
  height: 9px;
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  position: relative;
}

.cta-line {
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.65);
  margin-right: 2px;
}

.cta-content h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  line-height: 66px;
  letter-spacing: -0.96px;
  margin: 0 0 15px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 255px;
  height: 60px;
  padding: 0 16px;
  border-radius: 36px;
  background: #fff;
  color: #222;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .cta-card {
    width: 100%;
  }
}

@media (max-width: 650px) {
  .cta-section {
    padding: 45px 0;
  }

  .cta-card {
    width: 100%;
    min-height: 250px;
  }

  .cta-content {
    padding: 35px 25px;
  }

  .cta-content h2 {
    font-size: 29px;
  }
}

/* SECTION 6 — TESTIMONIALS */
.testimonials-section {
  position: relative;
  overflow: hidden;
  padding: 52px 0 54px;
  background:
    radial-gradient(
      circle at 8% 88%,
      rgba(222, 244, 239, 0.7),
      rgba(255, 255, 255, 0) 25%
    ),
    linear-gradient(180deg, #e8f7f3 0 63%, #fff 63% 100%);
}

/* .testimonials-inner {
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
} */

.testimonials-heading {
  text-align: center;
  margin-bottom: 45px;
}

.testimonial-label {
  justify-content: center;
  margin-bottom: 9px;
}

.testimonial-label span {
  background: #147d88;
}

.testimonial-label span:first-child {
  position: absolute;
  left: 36%;
}
.testimonial-label span:last-child {
  position: absolute;
  right: 36%;
}
.testimonial-label span:first-child::after {
  display: block;
  left: 14px;
  width: 80px;
}
.testimonial-label span:last-child::after {
  display: block;
  left: -85px;
  width: 80px;
}
.testimonials-heading h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #006686;
  margin: 0;
}

.testimonials-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  line-height: 66px;
  letter-spacing: -0.96px;
  margin: 20px 0;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin: 0 auto;
  padding: 0 25px;
}

.testimonial-card {
  position: relative;
  min-height: 310px;
  margin-top: 50px;
  padding: 70px 36px 45px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 11px 27px rgba(28, 62, 72, 0.12);
}

.testimonial-profile {
  position: absolute;
  left: -20px;
  top: 0;
  width: calc(100% - 70px);
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

.profile-photo {
  width: 124px;
  height: 124px;
  margin: 0;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: transparent;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 2;
  flex-shrink: 0;
}

.profile-sarah {
  background: url("../images/test-1.png") center / cover no-repeat;
}

.profile-emily {
  background: url("../images/test-2.png") center / cover no-repeat;
}

.profile-bar {
  flex: 1;
  height: 91px;
  margin-top: 0;
  margin-left: -10px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, #097a93, #08a16e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px 5px 25px;
  z-index: 1;
}

.profile-name strong,
.profile-name small {
  display: block;
}

.profile-name strong {
  font-size: 15px;
  font-weight: 700;
}

.profile-name small {
  font-size: 12px;
  margin-top: 2px;
  opacity: 0.9;
}

.testimonial-rating {
  text-align: right;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 1px;
}

.testimonial-rating span {
  font-size: 11px;
  letter-spacing: 0;
}

.testimonial-body p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: #555;
  font-size: 18px;
  line-height: 32px;
  margin: 0;
  max-width: 100%;
  padding: 35px 0;
}

.quote-mark {
  position: absolute;
  left: 36px;
  bottom: -30px;
  width: 76px;
  height: auto;
}

@media (max-width: 900px) {
  .testimonials-inner {
    padding: 0 35px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
  }
}

@media (max-width: 650px) {
  .testimonials-section {
    padding: 55px 0 70px;
  }

  .testimonials-inner {
    padding: 0 24px;
  }

  .testimonials-heading h2 {
    font-size: 29px;
  }

  .testimonial-grid {
    gap: 48px;
  }

  .testimonial-card {
    padding: 58px 24px 35px;
  }
}

/* SECTION 7 — CARE OPTIONS */
.care-options-section {
  background: #fff;
  padding: 72px 0 78px;
}

.care-options-inner {
  width: min(100%, 1316px);
  margin: 0 auto;
}

.care-heading {
  margin-bottom: 14px;
}
.care-heading h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #006686;
  margin: 0;
  padding-left: 80px;
}

.care-heading .section-label {
  margin-bottom: 10px;
}

.care-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  line-height: 66px;
  letter-spacing: -0.96px;
  margin: 20px 0;
}

.care-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.care-row-first {
  margin-top: 40px;
}

.care-row-second {
  margin-top: 80px;
}

.care-image {
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
}

.care-image img {
  width: 100%;
  display: block;
}

.care-image-second {
  justify-self: end;
  max-width: 540px;
  height: 360px;
}

.care-copy {
  max-width: 668px;
  padding: 0;
}
.care-copy h2 {
  font-family: var(--font-secondary);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -0.96px;
  margin: 25px 0;
}

.care-copy h3 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
}

.care-copy p {
  font-family: var(--font-primary);
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 15px;
}
.care-copy .practice-mb-30,
.practice-copy-col .bl-wysiwyg > p:last-child {
  margin-bottom: 30px;
}
.care-copy .practice-list-desc {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  line-height: 29px;
}

.care-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 30px;
  border-radius: 24px;
  background: linear-gradient(90deg, #187fb8, #079b78);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.care-button:hover {
  opacity: 0.9;
}

@media (max-width: 900px) {
  .care-options-inner {
    padding: 0 35px;
  }

  .care-row {
    grid-template-columns: 1fr;
    row-gap: 25px;
  }

  .care-row-second .care-copy {
    order: 1;
  }

  .care-row-second .care-image {
    order: 2;
  }

  .care-image,
  .care-image-second {
    justify-self: center;
    max-width: 620px;
    height: 250px;
  }

  .care-copy {
    max-width: 620px;
    justify-self: center;
  }
}

@media (max-width: 650px) {
  .care-options-section {
    padding: 55px 0 65px;
  }

  .care-options-inner {
    padding: 0 24px;
  }

  .care-heading h2 {
    font-size: 29px;
  }

  .care-image,
  .care-image-second {
    height: 220px;
  }

  .care-copy h3 {
    font-size: 21px;
  }
}

/* SECTION 8 — FOOTER */
.site-footer {
  position: relative;
  color: #fff;
  background: linear-gradient(105deg, #197fba 0%, #087f91 48%, #079b71 100%);
  padding: 50px 0 16px;
  overflow: hidden;
}

.site-footer::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -170px;
  bottom: -270px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.footer-inner {
  width: min(100%, 1316px);
  margin: 0 auto;
  padding: 0 0 27px;
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 1.15fr 1.25fr;
  column-gap: 15px;
  position: relative;
  z-index: 1;
}

.footer-brand {
  max-width: 190px;
}

.footer-logo {
  max-width: 192px;
  width: 192px;
  height: 128px;
  object-fit: contain;
  border-radius: 6px;
}

.footer-brand p {
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.9);
}

.social-links {
  display: flex;
  gap: 9px;
}

.social-links a {
  width: 46px;
  height: 46px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.social-links a:hover {
  opacity: 0.8;
}

.social-links a img {
  object-fit: contain;
}

.social-links a img.facebook-icon {
  width: 14px;
  height: 26px;
}

.social-links a img.youtube-icon {
  width: 21px;
  height: 15px;
}

.social-links a img.instagram-icon {
  width: 20px;
  height: 20px;
}

.footer-column,
.footer-newsletter {
  display: flex;
  flex-direction: column;
}

.footer-column h3,
.footer-newsletter h3 {
  font-family: var(--font-secondary);
  font-size: 25px;
  line-height: 1;
  font-weight: 400;
  margin: 2px 0 25px;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 18px;
  margin-bottom: 20px;
}

.footer-newsletter p {
  font-family: var(--font-primary);
  font-size: 18px;
  margin: 0 0 15px;
  color: rgba(255, 255, 255, 0.9);
}

.subscribe-form {
  width: 100%;
  max-width: 421px;
  height: 65px;
  display: flex;
  overflow: hidden;
  border-radius: 100px;
  background: #fff;
  margin-bottom: 30px;
}

.subscribe-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 15px;
  font-size: 18px;
  color: #333;
}

.subscribe-form button {
  width: 184px;
  border: 1px solid #fff;
  border-radius: 80px;
  background: #167ab7;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.footer-contact {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: 25px;
}

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

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-contact img {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 8px;
}

.footer-bottom {
  width: min(100%, 1316px);
  margin: 0 auto;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 1;
}

.footer-bottom div {
  display: flex;
  gap: 25px;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 900px) {
  .footer-inner {
    padding: 0 35px 28px;
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }

  .footer-bottom {
    padding-left: 35px;
    padding-right: 35px;
  }
}

@media (max-width: 650px) {
  .site-footer {
    padding-top: 40px;
  }

  .footer-inner {
    padding: 0 24px 25px;
    grid-template-columns: 1fr;
    row-gap: 27px;
  }

  .footer-brand {
    max-width: 250px;
  }

  .footer-bottom {
    padding: 14px 24px 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
  }

  .footer-bottom div {
    gap: 16px;
  }
}

/* =========================================
   SERVICES PAGE
   ========================================= */
.services-hero {
  position: relative;
  min-height: 511px;

  display: flex;
  align-items: center;
}
.services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
}
.services-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1316px);
  margin: auto;
  padding: 0 15px;
}
.services-hero h1 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 64px;
  color: #111;
  margin: 0 0 15px;
  letter-spacing: -0.96px;
}
.breadcrumbs {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 10px 24px;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 600;
  color: #111;
  gap: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.breadcrumbs .arrow {
  color: #8bb2a7;
  font-weight: 400;
}
.services-page-section {
  position: relative;
  padding: 70px 0 100px;
  background: #fdfdfd;
  overflow: hidden;
}
.services-page-bg-blob {
  position: absolute;
  right: -100px;
  top: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(230, 249, 242, 1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  z-index: 0;
  pointer-events: none;
}
.page-services-heading {
  position: relative;
  z-index: 2;
}
.page-services-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  margin: 0;
}
.page-services-grid {
  position: relative;
  z-index: 2;
  row-gap: 60px;
}

/* =========================================
   PSYCHOLOGICAL EVALUATIONS PAGE
   ========================================= */
.pe-hero {
  position: relative;
  min-height: 511px;

  display: flex;
  align-items: center;
}
.pe-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}
.pe-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1316px);
  margin: auto;
  padding: 0 15px;
}
.pe-hero h1 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 50px;
  color: #111;
  margin: 0 0 15px;
  letter-spacing: -0.96px;
}
.pe-hero .breadcrumbs {
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 40px;
  border: 1px solid #ddd;
  box-shadow: none;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--font-primary);
  font-weight: 600;
}
.pe-hero .breadcrumbs .arrow {
  color: #8bb2a7;
  font-weight: 400;
}
.pe-hero .breadcrumbs .current {
  color: #0b7c88;
}

/* PE About Section */
.pe-about {
  padding: 80px 0;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(230, 249, 242, 0.6) 0%,
      rgba(255, 255, 255, 0) 40%
    ),
    #fff;
}
.pe-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.pe-about-copy .section-label {
  margin-bottom: 20px;
}
.pe-about-copy h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  margin: 0 0 25px;
  letter-spacing: -0.96px;
}
.pe-about-copy p {
  font-family: var(--font-primary);
  color: #555;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 35px;
}
.pe-btn {
  max-width: 260px;
  margin-bottom: 30px;
  margin-right: auto;
}
.pe-about-copy .pe-btn {
  justify-self: start;
  margin-right: auto;
}
.pe-about-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: #444;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 15px 20px;
  background: #fff;
  width: fit-content;
}
.pe-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
}
.pe-feature svg {
  flex-shrink: 0;
}
.pe-about-visual {
  position: relative;
  border-radius: 12px;
}
.pe-about-visual img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.pe-doctor-badge {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  width: 90%;
  max-width: 576px;
  gap: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.pe-doctor-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0b7c88;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-doctor-info {
  display: flex;
  flex-direction: column;
}
.pe-doctor-info strong {
  font-family: var(--font-primary);
  font-size: 14px;
  color: #0b7c88;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pe-doctor-info span {
  font-family: var(--font-primary);
  font-size: 15px;
  color: #222;
  font-weight: 500;
}

/* PE Process Section */
.pe-process {
  padding: 70px 0;
  background: #eaf6f4;
}
.pe-process .pe-process-heading .section-label.centered {
  justify-content: center;
}
.pe-process .pe-process-heading .section-label.centered span:first-child {
  left: 30%;
}
.pe-process .pe-process-heading .section-label.centered span:last-child {
  right: 30%;
}
.pe-process-heading {
  text-align: center;
  margin-bottom: 50px;
}
.pe-process-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 48px;
  margin: 15px 0 0;
}
.pe-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pe-process-card {
  background: #fff;
  border-radius: 29px;
  padding: 40px 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
}
.pe-process-card-primary {
  background: linear-gradient(135deg, #187fb8, #079b78);
  color: #fff;
}
.pe-step-number {
  width: 45px;
  height: 45px;
  background: #e8f5f3;
  color: #0b7c88;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 25px;
}
.pe-step-primary {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.pe-process-card h3 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 15px;
}
.pe-process-card p {
  font-family: var(--font-primary);
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 25px;
}
.pe-process-card-primary p {
  color: rgba(255, 255, 255, 0.9);
}
.pe-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pe-check-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
}
.pe-check-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #079b78;
}
.pe-process-card-primary .pe-check-list li::before {
  color: #fff;
}

/* PE Approach Section */
.pe-approach {
  padding: 90px 0 50px;
  background: #fff;
}
.pe-approach-heading {
  margin-bottom: 50px;
}
.pe-approach-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 48px;
  margin: 15px 0 0;
}
.pe-approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.pe-approach-card {
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 40px;
  display: flex;
  gap: 25px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}
.pe-approach-primary {
  background: linear-gradient(135deg, #187fb8, #079b78);
  color: #fff;
  border: none;
}
.pe-approach-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
}
.pe-approach-icon.pe-icon-blue {
  color: #0072b1;
}
.pe-approach-icon.pe-icon-teal {
  background: #e8f5f3;
  color: #0f9a96;
}
.pe-approach-content h3 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 15px;
}
.pe-approach-content p {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  margin: 0 0 25px;
}
.pe-approach-primary .pe-approach-content p {
  color: rgba(255, 255, 255, 0.9);
}
.pe-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pe-pill {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 15px;
  border-radius: 20px;
  background: #f2f7f6;
  color: #0b7c88;
}
.pe-approach-primary .pe-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* PE Fees Section */
.pe-fees {
  margin-top: 0;
  padding: 0;
  background:
    radial-gradient(
      circle at 100% 50%,
      rgba(230, 249, 242, 0.8) 0%,
      rgba(255, 255, 255, 0) 40%
    ),
    #fff;
}
.pe-fees .section-label.centered {
  justify-content: center;
}
.pe-fees .section-label.centered span:first-child {
  left: 35%;
}
.pe-fees .section-label.centered span:last-child {
  right: 35%;
}
.pe-fees-heading {
  text-align: center;
  margin-bottom: 50px;
}
.pe-fees-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 48px;
  margin: 15px 0 0;
}
.pe-fees-card {
  background: #e4f4ed;
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.pe-fees-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.pe-fees-title-area {
  max-width: 60%;
}
.pe-fees-eyebrow {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #0b7c88;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.pe-fees-title-area h3 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 32px;
  margin: 0 0 15px;
  color: #111;
}
.pe-fees-title-area p {
  font-family: var(--font-primary);
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}
.pe-fees-price-area {
  text-align: right;
}
.pe-price-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}
.pe-price {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 56px;
  color: #0b7c88;
  line-height: 1;
}
.pe-price-sub {
  display: block;
  font-family: var(--font-primary);
  font-size: 13px;
  color: #777;
  font-weight: 500;
  margin-top: 10px;
}
.pe-fees-body h4 {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin: 0 0 25px;
  letter-spacing: 0.5px;
}
.pe-fees-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 40px;
  margin-bottom: 40px;
}
.pe-fees-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: #222;
}
.pe-fees-list-item svg {
  flex-shrink: 0;
}
.pe-fees-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.pe-fees-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-size: 15px;
  color: #444;
  font-weight: 500;
}
.pe-fees-btn {
  max-width: 260px;
  margin: 0;
  order: -1;
}

@media (max-width: 900px) {
  .pe-about-inner {
    grid-template-columns: 1fr;
  }
  .pe-doctor-badge {
    left: 20px;
  }
  .pe-process-grid {
    grid-template-columns: 1fr;
  }
  .pe-approach-grid {
    grid-template-columns: 1fr;
  }
  .pe-fees-header {
    flex-direction: column;
    gap: 25px;
  }
  .pe-fees-title-area {
    max-width: 100%;
  }
  .pe-fees-price-area {
    text-align: left;
  }
  .pe-fees-list-grid {
    grid-template-columns: 1fr;
  }
  .pe-fees-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* =========================================
   CONTACT PAGE STYLES
   ========================================= */
.contact-hero {
  position: relative;
  min-height: 511px;
  display: flex;
  align-items: center;
}
.contact-hero-content {
  width: min(100%, 1316px);
  margin: auto;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}
.contact-hero-content h1 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 70px;
  line-height: 100px;
  letter-spacing: -0.96px;
  margin: 0 0 20px;
}
.contact-hero-content .breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: 600;
  font-family: var(--font-primary);
  font-size: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contact-hero-content .breadcrumbs a {
  color: #333;
  text-decoration: none;
}
.contact-hero-content .breadcrumbs span {
  color: #087f88;
}
.contact-hero-content .breadcrumbs img {
  width: 25px;
}

.contact-main-section {
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(
      circle at 100% 50%,
      rgba(230, 245, 242, 0.8),
      rgba(255, 255, 255, 0) 40%
    ),
    linear-gradient(180deg, #f2f9f8 0%, #fff 100%);
  overflow: hidden;
}
.contact-main-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(14, 140, 150, 0.05),
    transparent 70%
  );
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 40px;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.contact-left .contact-label {
  margin-bottom: 20px;
}
.contact-left h2 {
  font-family: var(--font-secondary);
  font-size: 56px;
  font-weight: 400;
  margin: 0 0 40px;
  letter-spacing: -0.96px;
}
.contact-info-box {
  background: #fff;
  border: 1px solid #cde7df;
  border-radius: 15px;
  padding: 40px 110px 40px 40px;
  margin-right: -70px;
  margin-bottom: 40px;
  position: relative;
  z-index: 0;
  box-shadow: none;
}
.contact-info-box::after {
  display: none;
}
.contact-info-box h3 {
  font-family: var(--font-secondary);
  font-size: 25px;
  line-height: 40px;
  font-weight: 600;
  margin: 0 0 35px;
  color: #111;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.contact-item:last-child {
  margin-bottom: 0;
}
.contact-item-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.contact-item-text strong {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 6px;
  color: #111;
}
.contact-item-text p {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  color: #555;
  line-height: 29px;
}
.contact-item-text p a {
  color: #41484c;
  text-decoration: none;
}
.contact-actions {
  display: flex;
  gap: 15px;
}
.contact-actions .contact-btn {
  max-width: 225px;
  height: 60px;
  font-size: 16px;
  padding: 0 25px;
}

.contact-form-box {
  background: #ECFAF3;
  border-radius: 20px;
  padding: 50px 45px;
  position: relative;
  z-index: 1;
}
.contact-form-box::before {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 250px;
  background-image: radial-gradient(#d1e6e0 2px, transparent 2px);
  background-size: 15px 15px;
  z-index: -1;
}
.contact-form-box h3 {
  font-family: var(--font-secondary);
  font-size: 30px;
  line-height: 56px;
  font-weight: 600;
  margin: 0 0 35px;
}
.form-group {
  margin-bottom: 22px;
}
.form-group label {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: #41484c;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #41484c;
  font-weight: 700;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: 1.5px solid #078a94;
}
.form-submit {
  border: none;
  cursor: pointer;
  width: 210px;
  max-width: 100%;
  margin-top: 15px;
  font-size: 16px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

@media (max-width: 900px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .contact-info-box {
    margin-right: 0;
    padding: 40px;
  }
  .contact-info-box::after {
    display: none;
  }
  .contact-form-box {
    padding: 40px 25px;
  }
}
@media (max-width: 650px) {
  .contact-hero {
    min-height: 350px;
  }
  .contact-hero-content h1 {
    font-size: 45px;
    line-height: 55px;
  }
  .contact-left h2 {
    font-size: 36px;
  }
  .contact-actions {
    flex-direction: column;
  }
  .contact-actions .contact-btn {
    max-width: 100%;
  }
}

/* Book Appointment Section */
.book-appointment-section {
  padding: 80px 0;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(220, 245, 240, 0.4),
      transparent 50%
    ),
    #fff;
  position: relative;
}
.book-appointment-section .section-label.centered span:first-child {
  left: 32%;
}
.book-appointment-heading {
  text-align: center;
  margin-bottom: 50px;
}
.book-appointment-heading h2 {
  font-family: var(--font-secondary);
  font-size: 48px;
  font-weight: 400;
  margin: 15px 0 0;
  letter-spacing: -0.5px;
}
.book-appointment-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}

/* Form Area */
.book-form-area {
  background: #fff;
}
.form-step {
  margin-bottom: 40px;
}
.step-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}
.step-number {
  width: 45px;
  height: 45px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.step-header h3 {
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 5px;
}
.step-header p {
  font-family: var(--font-primary);
  font-size: 18px;
  color: #666;
  margin: 0;
}

.form-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.option-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  display: block;
}
.option-card.selected {
  border-color: #007a8a;
  background: #f8fbfb;
}
.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.option-header strong {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 22px;
  color: #333;
}
.custom-radio {
  position: relative;
  width: 20px;
  height: 20px;
}
.custom-radio input {
  opacity: 0;
  position: absolute;
  cursor: pointer;
}
.custom-radio .radio-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
}
.option-card.selected .radio-mark {
  border-color: #007a8a;
}
.option-card.selected .radio-mark:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007a8a;
}
.option-card p {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 400;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.form-inputs {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-inputs.row {
  flex-direction: row;
}
.form-inputs.row .input-group {
  flex: 1;
}
.input-group label {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}
.input-with-icon {
  position: relative;
}
.input-with-icon input {
  width: 100%;
  padding: 12px 15px 12px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  color: #333;
  box-sizing: border-box;
}
.input-with-icon input:focus {
  outline: 1px solid #007a8a;
  border-color: #007a8a;
}
.input-with-icon .input-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #007a8a;
  pointer-events: none;
  line-height: 0;
}
/* Date/time: hide the native picker icon behind the custom one, keep it clickable */
.input-with-icon input[type="date"],
.input-with-icon input[type="time"] {
  position: relative;
  padding-right: 48px;
  min-height: 48px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  text-align: left;
}
.input-with-icon input[type="date"]::-webkit-calendar-picker-indicator,
.input-with-icon input[type="time"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.input-with-icon input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
/* Firefox draws its own non-stylable picker icon — drop the custom one there */
@-moz-document url-prefix() {
  .input-with-icon input[type="date"] ~ .input-icon,
  .input-with-icon input[type="time"] ~ .input-icon {
    display: none;
  }
}

.submit-row {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
.submit-appointment {
  width: 495px;
}

/* Info Card */
.book-info-card {
  background:
    url("../images/copy-image.png") center 80% no-repeat,
    linear-gradient(135deg, #107bb4, #009369);
  border-radius: 12px;
  padding: 40px;
  color: #fff;
  position: sticky;
  top: 120px;
}
.book-info-card h3 {
  font-family: var(--font-secondary);
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 15px;
}
.book-info-card > p {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px;
  opacity: 0.95;
}
.info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}
.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
}
.info-list li:last-child {
  margin-bottom: 0;
}
.check-icon {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.check-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.info-list li div strong {
  display: block;
  font-family: var(--font-secondary);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
}
.info-list li div span {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  opacity: 0.9;
  line-height: 1.5;
  display: block;
}

.info-card-bottom {
  text-align: center;
  margin-top: 50px;
  position: relative;
}
.info-card-bottom .faded-logo {
  width: 150px;
  opacity: 0.2;
  margin-bottom: 15px;
}
.info-card-bottom p {
  font-family: var(--font-primary);
  font-size: 25px;
  font-weight: 500;
  line-height: 41px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.info-card-bottom p i {
  font-style: italic;
}

@media (max-width: 991px) {
  .book-appointment-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .form-options {
    grid-template-columns: 1fr;
  }
  .form-inputs.row {
    flex-direction: column;
  }
}

/* Testimonials Page Hero */
.testimonials-hero {
  position: relative;
  min-height: 511px;

  display: flex;
  align-items: center;
}
.testimonials-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
}
.testimonials-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1316px);
  margin: auto;
  padding: 0 15px;
}
.testimonials-hero h1 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 64px;
  color: #111;
  margin: 0 0 15px;
  letter-spacing: -0.96px;
}
.testimonials-hero-content .breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: 600;
  font-family: var(--font-primary);
  font-size: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.testimonials-hero-content .breadcrumbs a {
  color: #333;
  text-decoration: none;
}
.testimonials-hero-content .breadcrumbs span {
  color: #087f88;
}
.testimonials-hero-content .breadcrumbs img {
  width: 25px;
}

/* Testimonials Page Section */
.testimonials-page-section {
  padding: 80px 0 100px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(220, 245, 240, 0.4),
      transparent 50%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(230, 248, 250, 0.6),
      transparent 50%
    ),
    #f4fafa;
  position: relative;
}
.testimonials-heading {
  text-align: center;
  margin-bottom: 50px;
}
.testimonials-heading h2 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 48px;
  margin: 15px 0 0;
  letter-spacing: -0.5px;
}
.testimonials-page-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 50px;
}
.page-testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 35px 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.page-testimonial-card.col-3 {
  width: calc(33.333% - 20px);
}
.page-testimonial-card.col-2 {
  width: calc(50% - 15px);
}
.quote-icon img {
  width: 38px;
  height: 27px;
  object-fit: contain;
}
.page-testimonial-card p {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  color: #555;
  flex-grow: 1;
  margin-bottom: 25px;
}
.card-divider {
  height: 1px;
  background: #eaeaea;
  margin-bottom: 20px;
}
.card-profile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.profile-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.profile-info img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-info strong {
  display: block;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 2px;
}
.profile-info span {
  display: block;
  font-family: var(--font-primary);
  font-size: 12px;
  color: #777;
}
.stars {
  display: flex;
  align-items: center;
  gap: 3px;
}
.stars img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.load-more-container {
  text-align: center;
}
.load-more-btn {
  min-width: 180px;
  border-radius: 30px;
  font-size: 16px;
  padding: 12px 30px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  border: none;
}
.load-more-btn:hover {
  opacity: 0.9;
}

@media (max-width: 1024px) {
  .page-testimonial-card.col-3,
  .page-testimonial-card.col-2 {
    width: calc(50% - 15px);
  }
}
@media (max-width: 767px) {
  .page-testimonial-card.col-3,
  .page-testimonial-card.col-2 {
    width: 100%;
  }
}

.banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* adjust if necessary, usually it's behind ::before or content */
  /* For some banners, object-position might be needed based on the previous background property */
}
.hero .banner-bg,
.about-hero .banner-bg {
  object-position: right center;
}

/* Gradient Borders for All Buttons */
.btn,
.learn-more,
.services-more,
.pe-btn,
.pe-fees-btn,
.contact-btn,
.load-more-btn,
.btn-primary,
.btn-secondary {
  position: relative;
  z-index: 1;
  border: 1px solid transparent !important;
}

.btn::before,
.learn-more::before,
.services-more::before,
.pe-btn::before,
.pe-fees-btn::before,
.contact-btn::before,
.load-more-btn::before,
.btn-primary::before,
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

/* Universal Button Hover Effects */
.btn,
.learn-more,
.services-more,
.pe-btn,
.pe-fees-btn,
.contact-btn,
.load-more-btn,
.btn-primary,
.btn-secondary,
.appointment {
  transition:
    transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    background 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn:hover,
.learn-more:hover,
.services-more:hover,
.pe-btn:hover,
.pe-fees-btn:hover,
.contact-btn:hover,
.load-more-btn:hover,
.btn-primary:hover,
.appointment:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(19, 117, 188, 0.25);
}

.btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(19, 117, 188, 0.25);
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  color: #fff !important;
}

/* Gradient Borders for Breadcrumbs */
.breadcrumbs {
  position: relative;
  z-index: 1;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}

.breadcrumbs::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}

/* =========================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================= */

.mobile-menu-toggle,
.mobile-menu-close,
.mobile-menu-backdrop {
  display: none;
}

/* 1440px */
@media (max-width: 1440px) {
  .page-width {
    max-width: 1366px;
    padding: 0 20px;
  }
}

/* 1366px */
@media (max-width: 1366px) {
  /* .page-width {
    max-width: 1240px;
  } */
  .hero-content h1 {
    font-size: 60px;
  }
}

/* 1280px */
@media (max-width: 1280px) {
  .page-width {
    max-width: 1160px;
  }
  .hero-content h1 {
    font-size: 56px;
  }
  .about-copy h2,
  .services-heading-row h2 {
    font-size: 40px;
  }
}

/* 1199px */
@media (max-width: 1199px) {
  .page-width {
    max-width: 980px;
  }
  .about-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-copy,
  .about-visual {
    width: 100%;
    max-width: 100%;
    justify-self: center;
  }
  .nav-inner {
    grid-template-columns: 150px 1fr auto;
    gap: 10px;
  }
  .links a {
    padding: 0 10px;
    font-size: 14px;
  }
  .appointment {
    padding: 0 15px;
    font-size: 14px;
    max-width: 220px;
  }
  .care-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .professional-info-row {
    flex-direction: column;
  }
  .professional-info-image {
    height: auto;
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .page-width {
    max-width: 100%;
    padding: 0 20px;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-content h1 {
    font-size: 48px;
  }
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .about-section,
  .practice-section,
  .services-section,
  .professional-info-section,
  .testimonials-section,
  .footer-section {
    padding: 60px 0;
  }
}

/* 991px - Tablet Landscape */
@media (max-width: 991px) {
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #116f82;
  }
  .nav-inner {
    position: relative;
    grid-template-columns: auto 1fr auto;
    justify-content: space-between;
    align-items: center;
  }
  /* Mobile menu: off-canvas drawer that slides in from the right. */
  .links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 70px 0 30px;
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
    z-index: 1002;
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 0.3s ease-in-out,
      visibility 0.3s ease-in-out;
  }
  .links.active {
    visibility: visible;
    transform: translateX(0);
  }
  .mobile-menu-close {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #116f82;
    cursor: pointer;
  }
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease-in-out,
      visibility 0.3s ease-in-out;
  }
  .mobile-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
  }
  html.menu-open {
    overflow: hidden;
  }
  .links a {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    width: 100%;
  }
  .appointment {
    display: none;
  }
  .hero-content {
    padding-left: 0;
    padding-right: 0;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .topbar-inner {
    flex-wrap: wrap;
  }
  .about-stats-container {
    gap: 10px;
  }
}

/* 768px - Tablet Portrait */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 40px;
  }
  .hero-content .subtitle {
    font-size: 16px;
  }
  .topbar-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 10px;
  }
  .top-item {
    border-right: none;
    justify-content: center;
  }
  .actions {
    flex-direction: column;
    width: 100%;
  }
  .actions .btn {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .book-grid {
    grid-template-columns: 1fr;
  }
  .pe-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .practice-copy-col {
    padding-left: 0;
    margin-top: 20px;
  }
  .professional-info-copy {
    padding-left: 0;
    margin-top: 20px;
  }
  .about-overlay-icon {
    width: 40px;
    height: 40px;
  }
  .about-visual-overlay {
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    width: 90%;
  }
}

/* 575px - Large Mobile */
@media (max-width: 575px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .hero-content h1 {
    font-size: 36px;
  }
  .about-stats-container {
    flex-direction: column;
    align-items: stretch;
  }
  .about-stat-item {
    justify-content: center;
  }
  .professional-info-group {
    flex-direction: column;
    gap: 20px;
  }
  .professional-info-card {
    padding: 25px;
  }
}

/* 480px - Mobile */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 32px;
    line-height: 1.2;
  }
  .section-label {
    justify-content: flex-start;
  }
  .about-copy h2,
  .services-heading-row h2 {
    font-size: 28px;
  }
  .btn,
  .btn-primary,
  .btn-secondary {
    font-size: 14px;
    padding: 0 20px;
  }
  .top-item {
    flex-direction: column;
    align-items: center;
  }
  .top-item span {
    margin-left: 0;
    margin-top: 5px;
  }
}

/* 425px - Small Mobile */
@media (max-width: 425px) {
  .hero-content h1 {
    font-size: 28px;
  }
  .top-item {
    font-size: 11px;
  }
  .about-visual-overlay {
    flex-direction: column;
    text-align: center;
    height: auto;
  }
}

/* 375px - Very Small Mobile */
@media (max-width: 375px) {
  .hero-content h1 {
    font-size: 26px;
  }
  .about-copy h2,
  .services-heading-row h2 {
    font-size: 24px;
  }
  .service-card {
    padding: 20px;
  }
}

/* 320px - Extra Small Mobile */
@media (max-width: 320px) {
  .hero-content h1 {
    font-size: 24px;
  }
  .top-item {
    flex-wrap: wrap;
  }
  .professional-info-card {
    padding: 15px;
  }
}

/* =========================================
   ANIMATIONS
   ========================================= */
.js .animate-on-scroll,
.js .animate-on-load {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}

.js .animate-on-scroll.in-view,
.js .animate-on-load.in-view,
.in-view {
  opacity: 1;
  visibility: visible;
}

/*
 * Fail-safe: if JS never loads / errors before adding .in-view, reveal every
 * animated element a few seconds after load so content is never permanently
 * stuck at opacity:0 / visibility:hidden. The JS reveal (immediate on scroll,
 * 2.5s fallback) normally lands first; this only catches the JS-failed case.
 * Any element already .in-view is unaffected — that selector is more specific.
 */
@keyframes bl-reveal-failsafe {
  to {
    opacity: 1;
    visibility: visible;
  }
}

.js .animate-on-scroll,
.js .animate-on-load {
  animation: bl-reveal-failsafe 0s linear 4s forwards;
}

.js .animate-on-scroll.in-view,
.js .animate-on-load.in-view {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .animate-on-scroll,
  .js .animate-on-load {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* Slide Up */
.slide-up {
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In */
.fade-in {
  transition: opacity 1s ease-out;
}
.fade-in.in-view {
  opacity: 1;
}

/* Image Reveal */
.reveal-img {
  transform: scale(0.95);
  transition:
    opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal-img.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Delay */
.delay-100 {
  transition-delay: 100ms;
}
.delay-200 {
  transition-delay: 200ms;
}
.delay-300 {
  transition-delay: 300ms;
}
.delay-400 {
  transition-delay: 400ms;
}
.delay-500 {
  transition-delay: 500ms;
}

/* Enhanced Hover Effects for Cards/Interactive elements */
.service-card,
.process-step,
.value-box,
.team-member,
.page-testimonial-card,
.contact-card {
  transition:
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-card:hover,
.process-step:hover,
.value-box:hover,
.team-member:hover,
.page-testimonial-card:hover,
.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   About Page Extracted Styles
   ========================================================================== */

/* 1. Hero Section & Breadcrumbs */
.about-hero {
  position: relative;
  min-height: 511px;
  display: flex;
  align-items: center;
}
.about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.about-hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 1316px);
  margin: auto;
  padding: 0 15px;
  text-align: left;
}
.about-hero-title {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 64px;
  color: #111;
  margin: 0 0 15px;
  letter-spacing: -0.96px;
}
.breadcrumb-link {
  color: inherit;
  text-decoration: none;
}
.breadcrumb-icon {
  margin: 0 8px;
  vertical-align: middle;
}

/* 2. About BrighterLife Section */
.about-section-container {
  padding-top: 100px;
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(230, 249, 242, 0.6) 0%,
      rgba(255, 255, 255, 0) 40%
    ),
    radial-gradient(
      circle 260px at 12% 50%,
      rgba(19, 117, 188, 0.14) 0%,
      rgba(19, 117, 188, 0.1) 40%,
      rgba(19, 117, 188, 0.05) 70%,
      rgba(255, 255, 255, 0) 100%
    ),
    #fff;
}
@media (max-width: 767px) {
  .about-section-container {
    padding-top: 50px;
    padding-bottom: 30px;
  }
}
.btn-book-inline {
  text-decoration: none;
  display: inline-flex;
  margin-top: 20px;
}
.about-stats-container {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.about-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #e6f3fa 0%, #ffffff 100%);
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  color: #1375bc;
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(19, 117, 188, 0.1);
  border: 1px solid #e6f3fa;
}
.about-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #e6f3fa;
  color: #1375bc;
  border-radius: 50%;
  font-size: 12px;
}
.about-stat-icon-img {
  object-fit: contain;
}
.about-visual-overlay {
  position: absolute;
  bottom: -45px;
  left: -40px;
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;
  align-items: center;
  width: 359px;
  height: 143px;
  box-sizing: border-box;
  max-width: none;
}
.about-overlay-icon {
  width: 50px;
  height: 50px;
  background: #e6f7ef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00a05a;
  flex-shrink: 0;
}
.about-overlay-title {
  font-family: var(--font-primary);
  display: block;
  color: #111;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.about-overlay-desc {
  font-family: var(--font-primary);
  color: #666;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  display: block;
  margin-top: 4px;
}

/* 3. Our Practice Section */
.practice-section {
  background: #fff;
  padding: 100px 0;
  padding-bottom: 0;
}
.practice-image {
  border-radius: 20px;
  width: 100%;
  object-fit: cover;
}
/* .practice-image-col { padding-right: 50px; } */
.practice-copy-col {
  padding-left: 20px;
}
.practice-mb-30 {
  margin-bottom: 30px;
}
.practice-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.practice-list-item {
  display: block;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #1375bc 0%, #02a451 100%) border-box;
}
.practice-list-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}
.practice-list-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1375bc 0%, #02a451 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.practice-list-title {
  font-family: var(--font-secondary);
  margin: 0;
  font-size: 22px;
  color: #111;
  font-weight: 400;
  line-height: 31px;
}
.practice-list-desc {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}

/* 4. Comprehensive Care Section */
.services-section-bg {
  background: transparent;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.service-card {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 30px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #1375bc 0%, #02a451 100%) border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.service-card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1375bc 0%, #02a451 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: white;
}
.service-card-icon img {
  filter: brightness(0) invert(1);
}
.service-card-title {
  font-size: 25px;
  margin: 0 0 15px 0;
  color: #111;
  font-weight: 600;
  font-family: var(--font-secondary);
}
.service-card-desc {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-family: var(--font-secondary);
}
.service-card-link {
  color: #0f9a96;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.service-card-link span {
  font-size: 16px;
}

/* 5. Professional Information Section */
.professional-info-section {
  background: transparent;
  padding: 50px 0 100px;
}
.professional-info-row {
  align-items: center;
}
.professional-info-image {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.professional-info-copy {
  padding-left: 20px;
  flex: 1;
}
.professional-info-card {
  background: linear-gradient(90deg, #1979b9 0%, #0f9a96 52%, #00a05a 100%);
  border-radius: 20px;
  padding: 40px;
  color: white;
  margin-top: 30px;
  height: auto;
  box-shadow: 20px 20px 60px rgba(7, 155, 120, 0.2);
}
.professional-info-mb-25 {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.professional-info-mt-25 {
  margin-top: 25px;
}
.professional-info-label {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 600;
  font-family: var(--font-secondary);
}
.professional-info-value {
  font-size: 16px;
  font-family: var(--font-primary);
  font-weight: 400;
}
.professional-info-group {
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* =========================================
   WORDPRESS INTEGRATION OVERRIDES
   (keep the flat design when nav comes from wp_nav_menu ul)
   ========================================= */
.links .menu,
.footer-column .menu,
.footer-bottom .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.links .menu {
  gap: 28px;
}
.links .menu li,
.footer-column .menu li,
.footer-bottom .menu li {
  margin: 0;
  padding: 0;
}
.links .menu a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0.35px;
}
.links .menu .current-menu-item > a,
.links .menu .current_page_item > a {
  color: #007bb6;
  font-weight: 600;
}
.footer-column .menu {
  flex-direction: column;
  align-items: flex-start;
}
.footer-column .menu a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 18px;
  margin-bottom: 20px;
  display: block;
}
.footer-bottom .menu {
  gap: 25px;
}
.footer-bottom .menu a {
  color: #fff;
  text-decoration: none;
}

/* Mobile: mirror the design .links dropdown for the nested .menu */
@media (max-width: 991px) {
  .links .menu {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
  .links .menu li {
    width: 100%;
  }
  .links .menu a {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    width: 100%;
    display: block;
  }
}

/* Form feedback + AJAX states */
.bl-form-message {
  margin: 15px 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 15px;
  display: none;
}
.bl-form-message.is-visible { display: block; }
/* Newsletter: pull the message box up close to the field. The subscribe
   form's own margin-bottom otherwise sets the gap (margins collapse), so
   shrink it and restore the spacing on the contact links below instead. */
.footer-newsletter .subscribe-form {
  margin-bottom: 34px;
}
.footer-newsletter .bl-form-message {
  margin-top: 0;
  margin-bottom: 8px;
}
.footer-newsletter {
  width: 421px;
}
.footer-newsletter .subscribe-form + .footer-contact {
  margin-top: 22px;
}
.bl-form-message.is-success {
  background: #e4f6ee;
  color: #0b7c5f;
  border: 1px solid #a9dcc7;
}
.bl-form-message.is-error {
  background: #fdecea;
  color: #a5342c;
  border: 1px solid #f2b6b0;
}
.bl-field-error {
  color: #b32d2e;
  font-size: 13px;
  margin-top: 5px;
  display: block;
}
.form-group.has-error input,
.form-group.has-error textarea,
.input-group.has-error input {
  outline: 1.5px solid #b32d2e;
  border-color: #b32d2e;
}
.bl-honeypot {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}
.is-loading { opacity: 0.7; pointer-events: none; }

/* Filter bar */
.bl-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 40px;
  max-width: 900px;
}
.bl-filter-btn {
  border: 1px solid #cfe6e0;
  background: #fff;
  color: #0b7c88;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.bl-filter-btn.active,
.bl-filter-btn:hover {
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  color: #fff;
  border-color: transparent;
}
.bl-filter-search input {
  border: 1px solid #cfe6e0;
  border-radius: 30px;
  padding: 11px 20px;
  font-size: 14px;
  min-width: 240px;
  font-family: var(--font-primary);
}
.bl-no-results {
  text-align: center;
  grid-column: 1 / -1;
  width: 100%;
  padding: 40px;
  color: #666;
  font-family: var(--font-primary);
}

/* Team grid + cards */
.team-section { padding: 70px 0 100px; background: #fdfdfd; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.team-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,.06);
  text-align: center;
}
.team-card-photo { width: 100%; aspect-ratio: 4/4.6; object-fit: cover; display: block; }
.team-card-body { padding: 22px 20px 26px; }
.team-card-body h3 { font-family: var(--font-secondary); font-size: 22px; margin: 0 0 6px; font-weight: 400; }
.team-card-body h3 a { color: #111; text-decoration: none; }
.team-card-role { color: #0b7c88; font-weight: 600; font-family: var(--font-primary); font-size: 14px; }
.team-card-socials { display: flex; gap: 8px; justify-content: center; margin-top: 15px; }
.team-card-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
  color: #fff; text-decoration: none; font-size: 14px;
}
@media (max-width: 991px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .team-grid { grid-template-columns: 1fr; } }

/* Blog grid + cards */
.blog-section { padding: 70px 0 100px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.blog-card-thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.blog-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { font-size: 13px; color: #0b7c88; font-weight: 600; margin-bottom: 10px; font-family: var(--font-primary); }
.blog-card-body h3 { font-family: var(--font-secondary); font-size: 22px; margin: 0 0 12px; font-weight: 400; line-height: 1.3; }
.blog-card-body h3 a { color: #111; text-decoration: none; }
.blog-card-body p { color: #666; font-size: 15px; line-height: 1.6; margin: 0 0 18px; font-family: var(--font-primary); flex: 1; }
.blog-card-link { color: #0f9a96; font-weight: 600; font-size: 14px; text-decoration: none; }
@media (max-width: 991px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) { .blog-grid { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq-section { padding: 70px 0 100px; }
.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  border: 1px solid #e0efeb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 26px;
  font-family: var(--font-secondary);
  font-size: 20px;
  color: #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.faq-question .faq-icon { flex-shrink: 0; transition: transform .3s ease; color: #0b7c88; font-size: 24px; line-height: 1; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; padding: 0 26px; }
.faq-item.is-open .faq-answer { max-height: 600px; padding: 0 26px 24px; }
.faq-answer p { margin: 0; color: #555; font-size: 16px; line-height: 1.7; font-family: var(--font-primary); }

/* Single service extras / gallery / related */
.bl-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 900px){ .bl-related-grid{ grid-template-columns:1fr; } }
.bl-gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.bl-gallery-grid img { width:100%; height: 220px; object-fit: cover; border-radius: 10px; }
@media (max-width: 650px){ .bl-gallery-grid{ grid-template-columns:1fr 1fr; } }

/* Contact map */
.contact-map { margin-top: 40px; border-radius: 15px; overflow: hidden; }
.contact-map iframe { width:100%; min-height: 340px; border:0; display:block; }

/* Pagination */
.bl-pagination { display:flex; justify-content:center; gap:8px; margin-top: 50px; flex-wrap: wrap; }
.bl-pagination .page-numbers {
  min-width: 42px; height: 42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 8px; border: 1px solid #d9e8e4; color:#0b7c88; text-decoration:none; font-weight:600; padding: 0 12px;
}
.bl-pagination .page-numbers.current,
.bl-pagination .page-numbers:hover {
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%); color:#fff; border-color: transparent;
}

/* Post content */
.bl-single { padding: 60px 0 90px; }
.bl-single-content { max-width: 820px; margin: 0 auto; font-family: var(--font-primary); font-size: 17px; line-height: 1.8; color:#333; }
.bl-single-content h2, .bl-single-content h3 { font-family: var(--font-secondary); font-weight: 400; }
.bl-single-content img { max-width: 100%; height: auto; border-radius: 10px; }
.bl-single-title { font-family: var(--font-secondary); font-weight:400; font-size: 42px; max-width: 820px; margin: 0 auto 15px; }
.bl-single-meta { max-width: 820px; margin: 0 auto 30px; color:#0b7c88; font-weight:600; font-family: var(--font-primary); }
.bl-sidebar { }
.bl-search-form { display:flex; gap:8px; }
.bl-search-form input[type=search]{ flex:1; padding:12px 16px; border:1px solid #d9e8e4; border-radius:8px; }

/* 404 */
.bl-404 { text-align:center; padding: 100px 20px; }
.bl-404 h1 { font-family: var(--font-secondary); font-size: 120px; margin: 0; background: linear-gradient(90deg, #1375bc 0%, #02a451 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bl-404 h2 { font-family: var(--font-secondary); font-weight: 400; font-size: 34px; margin: 10px 0 20px; }
.bl-404 p { color:#666; margin-bottom: 30px; font-family: var(--font-primary); }

/* Default WP pagination wrapper mapping */
.pagination .nav-links, .navigation.pagination .nav-links { display:flex; justify-content:center; gap:8px; margin-top:50px; flex-wrap:wrap; }
.pagination .page-numbers, .navigation.pagination .page-numbers {
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid #d9e8e4; color:#0b7c88; text-decoration:none; font-weight:600; padding:0 12px;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current, .navigation.pagination .page-numbers:hover {
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%); color:#fff; border-color:transparent;
}
.screen-reader-text { position:absolute; left:-9999px; }

/* Contact Form 7 (contact page) — match the theme's form styles */
.bl-cf7-form .wpcf7-form-control-wrap {
  display: block;
}
.bl-cf7-form .wpcf7-not-valid-tip {
  color: #b32d2e;
  font-size: 13px;
  margin-top: 5px;
  display: block;
}
.bl-cf7-form .form-group input.wpcf7-not-valid,
.bl-cf7-form .form-group textarea.wpcf7-not-valid {
  outline: 1.5px solid #b32d2e;
}
.bl-cf7-form.submitting .form-submit {
  opacity: 0.6;
  pointer-events: none;
}
.wpcf7 form.bl-cf7-form .wpcf7-response-output {
  margin: 15px 0 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 15px;
  background: #fdecea;
  color: #a5342c;
  border: 1px solid #f2b6b0;
}
.wpcf7 form.bl-cf7-form.sent .wpcf7-response-output {
  background: #e4f6ee;
  color: #0b7c5f;
  border-color: #a9dcc7;
}
.bl-cf7-form .wpcf7-spinner {
  display: none;
}

/* =========================================
   MOBILE RESPONSIVE FIXES
   Kept last so it wins over the earlier, overlapping breakpoints.
   ========================================= */

/* Safety net against stray horizontal scroll (clip keeps sticky headers working). */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}
img,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 991px) {
  /* Top bar: stacked rows, text allowed to wrap instead of running off-screen. */
  .topbar {
    height: auto;
    padding: 10px 16px;
  }
  .topbar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .top-item,
  .top-item:last-child {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    border: 0;
    white-space: normal;
    text-align: center;
    min-height: 0;
  }
  .topbar-icon,
  .topbar-inner .top-item:nth-child(2) .topbar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .topbar-icon.mail-icon {
    font-size: 18px;
    line-height: 18px;
  }
  .top-item span {
    margin: 0;
  }
  .topbar-text {
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  /* Hero: keep side gutters and readable heading spacing. */
  .hero-content {
    padding: 40px 20px;
  }
  .hero h1,
  .hero-content h1 {
    line-height: 1.2;
  }
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero .actions .btn {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .hero .btn-secondary {
    background: rgba(255, 255, 255, 0.85);
  }

  /* Headings sized in px line-heights look broken once the font shrinks. */
  .featured-heading h2,
  .cta-content h2,
  .care-heading h2,
  .care-copy h2,
  .testimonials-heading h2,
  .services-section h2,
  .about-copy h2,
  .featured-card h3 {
    line-height: 1.2;
  }
  .featured-heading h2 {
    margin-bottom: 30px;
  }
  .section-label strong {
    margin-left: 70px;
    font-size: 16px;
    line-height: 1.3;
  }
  .section-label.centered h3,
  .cta-label h3 {
    font-size: 16px;
    line-height: 1.4;
  }
  /* Centered labels: drop the absolutely-positioned side lines that cross the text. */
  .section-label.centered span:first-child,
  .section-label.centered span:last-child {
    display: none;
  }

  /* Home "Our Services" heading row: button below the title. */
  .services-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Featured services cards: even padding. */
  .featured-grid .featured-card:nth-child(1),
  .featured-grid .featured-card:nth-child(2),
  .featured-card-primary,
  .featured-card-light {
    padding: 28px 22px;
    transform: none;
  }
  .featured-card h3 {
    font-size: 28px;
    margin: 18px 0 12px;
  }
  .featured-card p {
    font-size: 16px;
    margin: 0;
  }
  .featured-icon {
    width: 64px;
    height: 64px;
  }

  /* CTA */
  .cta-content {
    padding: 32px 22px;
  }
  .cta-button {
    min-width: 0;
    width: 100%;
    max-width: 280px;
  }

  /* Testimonials: card fills the column, profile header fits inside it. */
  .testimonial-grid {
    padding: 0;
  }
  .testimonial-card {
    padding: 58px 20px 40px;
  }
  .testimonial-profile {
    left: 12px;
    width: calc(100% - 24px);
  }
  .profile-photo {
    width: 90px;
    height: 90px;
  }
  .profile-bar {
    height: 70px;
    padding: 5px 12px 5px 20px;
  }
  .testimonial-body p {
    font-size: 16px;
    line-height: 1.6;
    padding: 25px 0;
  }
  .quote-mark {
    width: 56px;
    left: 20px;
  }

  /* Footer newsletter: button sized to fit next to the input. */
  .subscribe-form {
    height: 54px;
  }
  .subscribe-form input {
    font-size: 16px;
  }
  .subscribe-form button {
    width: auto;
    flex-shrink: 0;
    padding: 0 20px;
    font-size: 15px;
  }
  .footer-brand {
    max-width: 100%;
  }
}

@media (max-width: 991px) {
  /* Section label: keep the decorative line clear of the text. */
  .section-label strong {
    margin-left: 96px;
  }

  /* Home about image: stat badges sit in a row under the photo. */
  .about-visual {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .about-visual > img {
    width: 100%;
    height: auto;
    order: -1;
  }
  .stat,
  .stat-one,
  .stat-two {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
    padding: 16px;
    border: 0;
  }
  .stat strong {
    font-size: 28px;
    margin-bottom: 6px;
  }
  .stat span {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  /* Long words in big headings wrap instead of widening the page. */
  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
  }

  /* About page: two-column rows collapse to a single column that can shrink. */
  .care-row,
  .professional-info-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .care-copy,
  .care-image,
  .care-image-second {
    max-width: 100%;
    min-width: 0;
  }
  .practice-copy-col,
  .professional-info-copy {
    padding-left: 0;
    margin-top: 0;
  }
  .care-copy h2 {
    font-size: 32px;
    line-height: 1.2;
    margin: 16px 0;
  }
  .care-heading h3 {
    padding-left: 0;
  }
  .practice-section {
    padding-top: 50px;
  }
  .professional-info-section {
    padding: 40px 0 60px;
  }
  .professional-info-card {
    padding: 24px 20px;
    box-shadow: 0 10px 30px rgba(7, 155, 120, 0.2);
  }
  .professional-info-group {
    gap: 20px;
  }

  /* About page "Comprehensive Care" grid: one card per row. */
  .services-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 30px;
  }
  .service-card {
    padding: 24px;
  }
  .service-card-title {
    font-size: 22px;
  }

  /* About intro image: floating card sits under the photo instead of off-screen. */
  .about-visual-overlay {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: auto;
    margin-top: -30px;
    margin-inline: auto;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 991px) {
  /* Page banners: smaller title, breadcrumbs wrap inside the screen. */
  .services-hero h1,
  .about-hero-title {
    font-size: 40px;
    line-height: 1.15;
  }
  .breadcrumbs {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 6px 10px;
    padding: 10px 16px;
    font-size: 14px;
  }
  .breadcrumbs .breadcrumb-icon {
    margin: 0;
    width: 32px;
  }

  /* Service cards: white title panel matches the card width. */
  .service-card-body:before {
    width: 100%;
  }
  .service-title {
    font-size: 26px;
  }

  /* Single service page */
  .pe-about-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .pe-about-copy h2,
  .pe-process-heading h2,
  .pe-approach-heading h2,
  .pe-fees-heading h2 {
    font-size: 32px;
    line-height: 1.2;
  }
  .pe-doctor-badge {
    left: 50%;
    bottom: 16px;
    width: calc(100% - 32px);
    padding: 12px 16px;
  }
  .pe-process-heading,
  .pe-approach-heading,
  .pe-fees-heading {
    margin-bottom: 30px;
  }
}

@media (max-width: 991px) {
  .pe-approach-card {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
  }
  .pe-fees-card {
    padding: 28px 20px;
  }
  .pe-fees-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
}

@media (max-width: 991px) {
  /* Contact page */
  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .contact-hero-content h1 {
    font-size: 40px;
    line-height: 1.15;
  }
  .contact-left h2 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 24px;
  }
  .contact-info-box {
    margin-right: 0;
    padding: 24px 20px;
  }
  .contact-info-box h3 {
    margin-bottom: 20px;
  }
  .contact-item {
    gap: 14px;
    align-items: flex-start;
  }
  .contact-item-icon {
    width: 52px;
    height: 52px;
  }
  .contact-item-text {
    min-width: 0;
  }
  .contact-item-text strong {
    font-size: 19px;
  }
  .contact-item-text p {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .contact-actions .contact-btn {
    width: 100%;
  }
  .contact-form-box {
    padding: 28px 20px;
  }
  .contact-form-box::before {
    display: none;
  }
  .contact-form-box h3 {
    font-size: 26px;
    line-height: 1.25;
    margin-bottom: 20px;
  }

  /* Book appointment page */
  .book-appointment-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .book-appointment-heading h2,
  .services-heading-row h2 {
    font-size: 32px;
    line-height: 1.2;
  }
  .step-header {
    align-items: flex-start;
  }
  .step-header h3 {
    font-size: 24px;
  }
  .step-header p,
  .option-card p {
    font-size: 16px;
  }
  .option-header strong {
    font-size: 19px;
  }
  .input-group label {
    font-size: 18px;
  }
  .submit-appointment {
    width: 100%;
  }
  .book-info-card {
    position: static;
    padding: 28px 20px;
  }
}

@media (max-width: 991px) {
  .info-card-bottom p {
    font-size: 20px;
    line-height: 1.5;
  }
}

@media (max-width: 991px) {
  .testimonials-hero h1 {
    font-size: 40px;
    line-height: 1.15;
  }
}

@media (max-width: 991px) {
  .testimonials-heading h2 {
    font-size: 34px;
    line-height: 1.2;
  }
}

@media (max-width: 991px) {
  .bl-search-form input[type="search"] {
    min-width: 0;
  }
  .bl-404 {
    padding: 60px 16px;
  }
  .bl-404 h1 {
    font-size: 88px;
  }
  .bl-404 h2 {
    font-size: 28px;
  }
}

@media (max-width: 991px) {
  .topbar {
    height: auto;
    padding: 10px 16px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .hero .actions {
    align-items: flex-start;
  }
  .hero .actions .btn {
    max-width: 320px;
  }
}

/* About / Contact banners use the shared page-banner markup: match the other banner titles. */
.about-hero h1,
.contact-hero h1 {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.15;
  color: #111;
  margin: 0 0 15px;
  letter-spacing: -0.96px;
}
@media (max-width: 991px) {
  .about-hero h1,
  .contact-hero h1,
  .pe-hero h1 {
    font-size: 40px;
  }
}

/* Home banner: shorter on tablets and phones. */
@media (max-width: 991px) {
  .hero {
    min-height: 420px;
  }
}
@media (max-width: 767px) {
  .hero {
    min-height: 0;
    height: 378px;
  }
  .hero:before {
    height: 378px;
  }
  .hero-content {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* Home banner buttons: compact on phones. */
@media (max-width: 767px) {
  .hero .actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .hero .actions .btn {
    width: auto;
    max-width: none;
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
}

/* Home banner: space between the title and the buttons. */
@media (max-width: 991px) {
  .hero h1,
  .hero-content h1 {
    margin-bottom: 20px;
  }
}

/* About text: use the full width on phones. */
@media (max-width: 767px) {
  .about-copy p {
    padding-right: 0;
  }
}

/* Service card image: keep its aspect ratio (the img height attribute would otherwise fix it at 280px). */
.service-card-image {
  height: auto;
}

/* Service card: white title panel fills the card body only, so it never covers the photo. */
.service-card-body:before {
  top: 0;
  height: auto;
}

@media (max-width: 767px) {
  .services-section {
    padding-bottom: 0;
  }
}

/* Featured service card icon image (was an inline 48px style). */
.featured-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .featured-icon img {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 767px) {
  .cta-line {
    width: 50px;
  }
}

@media (max-width: 767px) {
  .cta-label h3 {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .cta-content h2 {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .cta-button {
    width: auto;
    min-width: 0;
    height: 48px;
    padding: 0 24px;
    font-size: 15px;
  }
}

/* Section headings: one size on phones. */
@media (max-width: 767px) {
  .testimonials-heading h2,
  .featured-heading h2,
  .services-section h2,
  .about-copy h2,
  .care-heading h2,
  .care-copy h2,
  .pe-about-copy h2,
  .pe-process-heading h2,
  .pe-approach-heading h2,
  .pe-fees-heading h2,
  .contact-left h2,
  .book-appointment-heading h2,
  .services-heading-row h2 {
    font-size: 26px;
    line-height: 1.25;
  }
}

@media (max-width: 767px) {
  .testimonials-inner {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .care-row {
    gap: 0;
  }
  .practice-section .practice-copy-col,
  .professional-info-section .professional-info-copy {
    margin-top: 30px;
  }
  .section-label span:after {
    width: 50px;
  }
  .section-label strong {
    margin-left: 50px;
    font-size: 14px;
  }
  .contact-form-box {
    padding: 15px;
  }
  .contact-form-box h3 {
    font-size: 24px;
  }
}

/* Care options: when the rows stack, every block shows its image before the text. */
@media (max-width: 1199px) {
  .care-row-second .care-image {
    order: -1;
  }
  .care-row-second .care-copy {
    order: 0;
  }
}

/* Footer newsletter: breathing room around the email field on mobile. */
@media (max-width: 767px) {
  .footer-newsletter .subscribe-form {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

/* Footer menus: heading doubles as a toggle button (looks like plain text on desktop). */
.footer-toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: default;
}

@media (max-width: 767px) {
  .footer-inner {
    row-gap: 24px;
  }
  .footer-column h3 {
    margin-bottom: 15px;
  }
  .footer-collapsible .footer-column:not(.is-open) h3 {
    margin-bottom: 0;
  }
  .footer-newsletter h3 {
    font-size: 20px;
  }
  .footer-column h3 {
    font-size: 18px;
  }
  .footer-column a,
  .footer-column .menu a {
    font-size: 16px;
  }
  .footer-toggle {
    position: relative;
    padding-right: 32px;
    cursor: pointer;
  }
  .footer-toggle::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .footer-column.is-open .footer-toggle::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  .footer-collapsible .footer-column:not(.is-open) .footer-collapse {
    display: none;
  }
}

/* Inner page banners (page-banner component): fixed 375px height on mobile. */
@media (max-width: 767px) {
  .services-hero,
  .pe-hero,
  .about-hero,
  .contact-hero,
  .testimonials-hero {
    height: 375px;
    min-height: 375px;
  }
}

/* ============================================================
 * Buttons: size to their text (overrides fixed widths above)
 * ============================================================ */
.btn-primary,
.btn-secondary,
.appointment,
.learn-more,
.services-more,
.cta-button,
.pe-btn,
.pe-fees-btn,
.form-submit,
.submit-appointment,
.load-more-btn,
.subscribe-form button,
.actions .btn,
.hero .actions .btn,
.contact-actions .contact-btn {
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  white-space: nowrap;
}
.appointment,
.subscribe-form button {
  padding-left: 28px;
  padding-right: 28px;
}

/* ============================================================
 * Slider (home services) — scroll-snap track + arrows + dots
 * ============================================================ */
.bl-slider {
  --slider-gap: 30px;
  --slider-per-view: 3;
  position: relative;
}
.bl-slider-track {
  display: flex;
  gap: var(--slider-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for card hover lift + shadow, which a scroller would clip */
  padding: 12px 2px 24px;
  margin: -12px -2px 0;
}
.bl-slider-track::-webkit-scrollbar {
  display: none;
}
.bl-slider-track > * {
  flex: 0 0 calc((100% - (var(--slider-per-view) - 1) * var(--slider-gap)) / var(--slider-per-view));
  min-width: 0;
  scroll-snap-align: start;
}
.bl-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.bl-slider.is-static .bl-slider-nav {
  display: none;
}
.bl-slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #1375bc 0%, #02a451 100%) border-box;
  color: #007a8a;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.bl-slider-arrow:hover:not(:disabled) {
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%) border-box;
  color: #fff;
  transform: translateY(-2px);
}
.bl-slider-arrow:focus-visible,
.bl-slider-dot:focus-visible {
  outline: 2px solid #007a8a;
  outline-offset: 3px;
}
.bl-slider-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.bl-slider-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bl-slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #b9d9d6;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}
.bl-slider-dot.is-active {
  width: 28px;
  background: linear-gradient(90deg, #1375bc 0%, #02a451 100%);
}
@media (max-width: 1024px) {
  .bl-slider {
    --slider-per-view: 2;
    --slider-gap: 20px;
  }
}
@media (max-width: 767px) {
  .bl-slider {
    --slider-per-view: 1;
    --slider-gap: 16px;
  }
  .bl-slider-arrow {
    width: 42px;
    height: 42px;
  }
}
/* Every slider card image matches the first service photo (357x280). */
.services-slider .service-card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 357 / 280;
  object-fit: cover;
  object-position: center;
}

/* Footer divider: thin centred line that fades out at both ends, with more breathing room */
.footer-bottom {
  border-top: 0;
  padding-top: 32px;
  margin-top: 8px;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 8%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}
@media (max-width: 650px) {
  .footer-bottom {
    padding-top: 24px;
  }
  .footer-bottom::before {
    left: 24px;
    right: 24px;
  }
}

/* Footer newsletter submit: fixed width (overrides the fit-content button rule) */
.subscribe-form button {
  width: 183px;
  flex: 0 0 183px;
  padding-left: 0;
  padding-right: 0;
}

/* Footer links: hover + active (current page) state */
.footer-column .menu a,
.footer-bottom a {
  transition: color 0.3s ease;
}
.footer-column .menu a:hover,
.footer-bottom a:hover,
.footer-column .menu .current-menu-item > a,
.footer-column .menu .current_page_item > a,
.footer-column .menu .current-menu-ancestor > a,
.footer-bottom .is-active {
  color: #a8f0d1;
}
.footer-column .menu .current-menu-item > a,
.footer-column .menu .current_page_item > a,
.footer-bottom .is-active {
  font-weight: 600;
}

/* Breadcrumb pill: white fill + crisp blue→green gradient border (replaces the masked ::before) */
.breadcrumbs,
.pe-hero .breadcrumbs,
.contact-hero-content .breadcrumbs,
.testimonials-hero-content .breadcrumbs {
  border: 1.5px solid transparent !important;
  border-radius: 8px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #1375bc 0%, #07a08a 55%, #02a451 100%) border-box;
  box-shadow: none;
  padding: 10px 24px;
}
.breadcrumbs::before {
  content: none;
}
@media (max-width: 767px) {
  .breadcrumbs,
  .pe-hero .breadcrumbs,
  .contact-hero-content .breadcrumbs,
  .testimonials-hero-content .breadcrumbs {
    padding: 8px 16px;
  }
}

/* Home services: heading → cards spacing */
.services-section .services-heading-row {
  margin-bottom: 32px;
}
@media (max-width: 767px) {
  .services-section .services-heading-row {
    margin-bottom: 22px;
  }
}

/* ============================================================
 * Home services slider cards — original design: grey card,
 * full-bleed photo, inset white title panel, round icon badge.
 * ============================================================ */
.services-slider .service-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0 !important;
  border-radius: 8px 8px 30px 30px;
  background: #ebebebc7;
  box-shadow: none;
  min-height: 0;
}
.services-slider .service-card > a {
  display: flex !important;
  flex-direction: column;
  flex: 1;
}
.services-slider .service-card-image {
  border-radius: 8px 8px 0 0;
}
.services-slider .service-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 18px 18px;
}
.services-slider .service-card-body:before {
  top: 0;
  left: 18px;
  right: 18px;
  bottom: 18px;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0 0 24px 24px;
  z-index: 0;
}
.services-slider .service-icon {
  top: -59px;
  width: 104px;
  height: 104px;
  box-shadow: none;
}
.services-slider .service-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.services-slider .service-title {
  margin: 0;
  padding: 62px 16px 30px;
  font-size: 26px;
}
.services-slider .service-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Dots: design pills (light blue, active dark teal) */
.services-slider .bl-slider-dots {
  gap: 5px;
}
.services-slider .bl-slider-dot {
  width: 22px;
  height: 4px;
  border-radius: 3px;
  background: #b9e8f4;
}
.services-slider .bl-slider-dot.is-active {
  width: 43px;
  background: #087a91;
}

@media (max-width: 767px) {
  .services-slider .service-title {
    font-size: 24px;
    padding: 58px 14px 28px;
  }
}

/* Tighten the gap between the services slider controls and Featured Services */
.services-section {
  padding-bottom: 20px;
}
.services-slider .bl-slider-nav {
  margin-top: 12px;
}
@media (max-width: 1024px) {
  .services-section {
    padding-bottom: 16px;
  }
}
@media (max-width: 650px) {
  .featured-services {
    padding-top: 40px;
  }
}

/* About page intro: even top/bottom spacing */
.about-section.about-section-container {
  padding-top: 70px;
  padding-bottom: 70px;
}
@media (max-width: 1024px) {
  .about-section.about-section-container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .about-section.about-section-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* About page: tighten gap between intro (with its overlapping card) and Our Practice */
.practice-section {
  padding-top: 50px;
}
@media (max-width: 1024px) {
  .practice-section {
    padding-top: 40px;
  }
}
@media (max-width: 767px) {
  .practice-section {
    padding-top: 30px;
  }
}

/* About page "Comprehensive Care": tighter heading → cards gap */
.services-section-bg .services-grid {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .services-section-bg .services-grid {
    margin-top: 10px;
  }
}

/* About page: gap between Our Practice and Comprehensive Care */
.services-section.services-section-bg {
  padding-top: 70px;
}
.practice-section .practice-list {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .services-section.services-section-bg {
    padding-top: 50px;
  }
}
@media (max-width: 767px) {
  .services-section.services-section-bg {
    padding-top: 40px;
  }
}

/* ============================================================
 * Service Fees — redesigned card (mint glass card, gradient price,
 * two-column checklist, note + CTA footer)
 * ============================================================ */
.pe-fees {
  position: relative;
  overflow: hidden;
  padding: 70px 0 90px;
  background:
    radial-gradient(circle 320px at 6% 35%, rgba(212, 238, 226, 0.75) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle 380px at 96% 85%, rgba(196, 232, 214, 0.85) 0%, rgba(255, 255, 255, 0) 100%),
    #fff;
}
.pe-fees-heading {
  margin-bottom: 40px;
}
.pe-fees-card {
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding: 44px 48px 36px;
  border: 1px solid rgba(8, 161, 110, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, #f1faf6 0%, #e6f5ee 55%, #dcf1e6 100%);
  box-shadow: 0 20px 50px rgba(8, 122, 100, 0.08);
}
.pe-fees-header {
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(11, 124, 136, 0.12);
}
.pe-fees-title-area {
  max-width: 62%;
}
.pe-fees-eyebrow {
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #0b7c88;
  margin-bottom: 6px;
}
.pe-fees-title-area h3 {
  font-size: 30px;
  margin: 0 0 14px;
}
.pe-fees-title-area p {
  font-size: 15px;
  line-height: 1.6;
  color: #4a4a4a;
}
.pe-fees-price-area {
  flex-shrink: 0;
  text-align: left;
}
.pe-price-label {
  font-size: 13px;
  letter-spacing: 0.6px;
  color: #333;
  margin-bottom: 8px;
  text-align: right;
}
.pe-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  color: #0b7c88;
  background: linear-gradient(90deg, #1375bc 0%, #0b8a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pe-price-sub {
  display: inline;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  -webkit-text-fill-color: #444;
}
.pe-fees-body {
  padding: 0 4px;
}
.pe-fees-body h4 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #222;
  margin: 0 0 24px;
}
.pe-fees-list-grid {
  row-gap: 22px;
  column-gap: 48px;
  margin-bottom: 36px;
}
.pe-fees-list-item {
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  color: #333;
}
.pe-fees-list-item svg {
  margin-top: 1px;
}
.pe-fees-footer {
  gap: 20px;
  padding-top: 70px;
  border-top: 1px solid rgba(11, 124, 136, 0.12);
}
.pe-fees-note {
  font-size: 14px;
  color: #444;
}
.pe-fees-btn {
  order: 0;
  margin: 0;
  height: 52px;
  padding-left: 32px !important;
  padding-right: 32px !important;
  font-size: 15px;
}

@media (max-width: 900px) {
  .pe-fees {
    padding: 50px 0 60px;
  }
  .pe-fees-header {
    gap: 24px;
  }
  .pe-fees-title-area {
    max-width: 100%;
  }
  .pe-price-label {
    text-align: left;
  }
  .pe-price {
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .pe-fees-card {
    padding: 28px 20px;
  }
  .pe-fees-title-area h3 {
    font-size: 26px;
  }
  .pe-price {
    font-size: 46px;
  }
  .pe-fees-body h4 {
    font-size: 17px;
  }
  .pe-fees-list-grid {
    row-gap: 16px;
  }
}

/* Breadcrumb text size */
.breadcrumbs,
.pe-hero .breadcrumbs,
.contact-hero-content .breadcrumbs,
.testimonials-hero-content .breadcrumbs {
  font-size: 18px;
}
@media (max-width: 767px) {
  .breadcrumbs,
  .pe-hero .breadcrumbs,
  .contact-hero-content .breadcrumbs,
  .testimonials-hero-content .breadcrumbs {
    font-size: 16px;
  }
}

/* Breadcrumb: one text colour for links and the current page */
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs .current,
.pe-hero .breadcrumbs .current,
.contact-hero-content .breadcrumbs a,
.contact-hero-content .breadcrumbs span,
.testimonials-hero-content .breadcrumbs a,
.testimonials-hero-content .breadcrumbs span {
  color: #111;
}

/* Service intro: button → feature box spacing and feature box inner spacing */
.pe-about-copy .pe-btn {
  margin-bottom: 40px;
}
.pe-about-features {
  gap: 12px 24px;
  padding: 16px 20px;
  border-radius: 14px;
}
.pe-feature {
  gap: 8px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .pe-about-features {
    gap: 10px 16px;
    padding: 14px 16px;
  }
}
.pe-feature img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* About "Our Practice": photo matches the text column top-to-bottom (two-column layout only) */
@media (min-width: 1200px) {
  .practice-section .care-row {
    align-items: stretch;
    gap: 40px;
  }
  .practice-section .practice-image-col {
    position: relative;
    height: auto;
    min-height: 100%;
  }
  .practice-section .practice-image-col .practice-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .practice-section .practice-copy-col {
    padding-left: 0;
  }
  .practice-section .practice-copy-col > :first-child {
    margin-top: 0;
  }
  .practice-section .practice-list > :last-child {
    margin-bottom: 0;
  }
}

/* About "Professional Information": same 40px column gap as Our Practice */
@media (min-width: 1200px) {
  .professional-info-section .care-row {
    gap: 40px;
  }
  .professional-info-section .professional-info-copy {
    padding-left: 0;
  }
}

/* Contact page: two equal columns; the "Our Contacts" box runs right up to the form card */
@media (min-width: 992px) {
  .contact-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
  .contact-info-box {
    margin-right: -41px;
    padding-right: 48px;
  }
}

/* Contact form submit: fixed 210px (overrides the fit-content button rule) */
.contact-form-box .form-submit,
.form-submit {
  width: 210px;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Appointment sidebar card: blue (left, deepest at bottom) → teal → green (right) */
.book-info-card {
  background:
    url("../images/copy-image.png") center 80% no-repeat,
    linear-gradient(72deg, #1a6abb 0%, #1580ad 30%, #0c9187 62%, #079d6c 100%);
}

/* Footer copyright link: looks like the text, mint highlight on hover */
.footer-bottom .footer-copyright a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-bottom .footer-copyright a:hover {
  color: #a8f0d1;
}