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

   Parkway Pediatric Dentistry — Homepage Concept v2

   "Trailhead" system, rebuilt around the practice's original logo and the

   outline doodles from header-bg.svg (tent, trail tree, tooth-cloud,

   toothbrush, donut rings, dashes).

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



@font-face {

  font-family: "Baloo 2";

  src: url("../fonts/baloo2-variable.woff2") format("woff2-variations"),

    url("../fonts/baloo2-variable.woff2") format("woff2");

  font-weight: 400 800;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: "Nunito";

  src: url("../fonts/nunito-variable.woff2") format("woff2-variations"),

    url("../fonts/nunito-variable.woff2") format("woff2");

  font-weight: 200 1000;

  font-style: normal;

  font-display: swap;

}



/* ---------- Tokens ---------- */

:root {

  --teal-900: #0a5b66;

  --teal-800: #1F4E4B;

  --teal-700: #2A605C;

  --teal-600: #357670;

  --teal-500: #4DB0AA;

  /* exact logo teal */

  --teal-100: #DCEEEC;

  --green-600: #5A9A3E;

  --green-500: #6BAF4B;

  /* exact logo green */



  --yellow-500: #f9ca06;

  /* exact logo yellow */

  --paper: #FAF6EC;

  --paper-dim: #F2EBD8;

  --paper-line: #E4D9BC;

  --white: #FFFFFF;

  --ink: #1B2E2C;

  --ink-soft: #4B615E;



  --site-green: #4dafaa;

  --site-green-dark: #0a5b66;

  --site-green-3: #69ab49;



  --shadow-card: 0 18px 40px -20px rgba(19, 45, 43, 0.35);

  --shadow-pop: 0 10px 24px -10px rgba(19, 45, 43, 0.4);



  --font-display: "Baloo 2", "Segoe UI Rounded", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;

  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;



  --fs-xs: 0.8125rem;

  --fs-sm: 0.9375rem;

  --fs-base: 1.0625rem;

  --fs-md: 1.1875rem;

  --fs-lg: clamp(1.375rem, 1.28rem + 0.4vw, 1.625rem);

  --fs-xl: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);

  --fs-2xl: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);

  --fs-hero: clamp(2.7rem, 1.6rem + 5vw, 5.2rem);



  --sp-1: .25rem;

  --sp-2: .5rem;

  --sp-3: .75rem;

  --sp-4: 1rem;

  --sp-5: 1.5rem;

  --sp-6: 2rem;

  --sp-7: 3rem;

  --sp-8: 4.5rem;

  --sp-9: 6.5rem;



  --header-h: 96px;

}



/* ---------- Reset ---------- */

*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



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

  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    animation-duration: 0.001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.001ms !important;

    scroll-behavior: auto !important;

  }

}



body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family: var(--font-body);

  font-size: var(--fs-base);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



img,

svg {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



ul,

ol {

  margin: 0;

  padding: 0;

  list-style: none;

}



h1,

h2,

h3,

h4,

p,

figure {

  margin: 0;

}



button {

  font: inherit;

  color: inherit;

  background: none;

  border: 0;

  cursor: pointer;

}







section[id] {

  scroll-margin-top: calc(var(--header-h) + 12px);

}



h1,

h2,

h3,

.font-display {

  font-family: var(--font-display);

  font-weight: 700;

  letter-spacing: .2px;

  /* text-wrap: balance; */

}



h2 {

  font-size: var(--fs-xl);

  color: var(--teal-800);

  line-height: 1.12;

}



h3 {

  font-size: var(--fs-lg);

  color: var(--teal-800);

  line-height: 1.2;

}



/* p {

  text-wrap: pretty;

} */



.lede {

  font-size: var(--fs-md);

  color: var(--ink-soft);

  max-width: 52ch;

}



:focus-visible {

  outline: 3px solid var(--teal-500);

  outline-offset: 3px;

  border-radius: 4px;

}



.skip-link {

  position: fixed;

  top: -100px;

  left: 1rem;

  z-index: 999;

  background: var(--teal-800);

  color: var(--white);

  padding: .75rem 1.25rem;

  border-radius: 0 0 10px 10px;

  transition: top .2s ease;

}



.skip-link:focus {

  top: 0;

}



.icon-sprite {

  position: absolute;

  width: 0;

  height: 0;

  overflow: hidden;

}



.icon {

  width: 1em;

  height: 1em;

  stroke: currentColor;

  fill: none;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.doodle {

  fill: currentColor;

  stroke: none;

}



/* ---------- Buttons ---------- */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .5rem;

  font-family: var(--font-display);

  font-weight: 600;

  font-size: var(--fs-sm);

  padding: 10px 20px;

  border-radius: 999px;

  white-space: nowrap;

  border: 2px solid transparent;

  transition: all 0.3s ease;

  text-transform: uppercase;

}



.btn .icon {

  width: 1.1em;

  height: 1.1em;

}







.btn--outline {

  border-color: currentColor;

  color: inherit;

}



.btn--outline:hover {

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

}



.btn--outline-dark {

  border-color: var(--teal-800);

  color: var(--teal-800);

}



.btn--outline-dark:hover {

  background: var(--teal-800);

  color: var(--white);

  transform: translateY(-2px);

}



.btn--teal {

  background: var(--site-green);

  color: #fff;

  transition: all 0.3 ease;

}



.btn--teal:hover {

  background: var(--site-green-dark);

  transition: all 0.3s ease;

  color: #fff;

}



.footer__hero-ctas .btn--teal:hover {

  background-color: var(--site-green-3);

}



.btn--block {

  width: 100%;

}



.btn--green {

  background-color: var(--site-green-3);

  color: #fff;

  transition: all 0.3 ease;

}



.btn--green:hover {

  background-color: var(--site-green);

  transition: all 0.3 ease;

}



.btn--sm {

  padding: .6rem 1.1rem;

  font-size: var(--fs-xs);

}



.btn-border {

  padding: 10px 0 10px;

  font-size: 13px;

  text-transform: uppercase;

  color: #0a5b66;

  font-weight: 700;

  letter-spacing: 1px;

  position: relative;

  transition: all .5s ease;

  width: max-content;

}



.btn-border:hover::after {

  opacity: 0;

  transition: all .3s ease;

}



.btn-border:hover::before {

  width: 100%;

  transition: all .5s ease;

}



.btn-border::after {

  position: absolute;

  content: '';

  width: 100%;

  height: 3px;

  background: #0a5b66;

  bottom: 0;

  left: 0;

  transition: all .3s ease;

}



.btn-border::before {

  position: absolute;

  content: '';

  width: 0;

  height: 3px;

  background: #0a5b66;

  bottom: 0;

  left: 0;

  transition: all .5s ease;

}







.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  font-family: var(--font-display);

  font-weight: 600;

  letter-spacing: .06em;

  text-transform: uppercase;

  font-size: var(--fs-xs);

  color: var(--green-600);

}



.eyebrow .icon {

  color: var(--yellow-600);

  width: 1.15em;

  height: 1.15em;

}



.eyebrow--onDark {

  color: var(--yellow-300);

}



.eyebrow--onDark .icon {

  color: var(--yellow-300);

}



.section-head {

  max-width: 660px;

  margin-bottom: var(--sp-7);

}



.section-head--center {

  margin-inline: auto;

  text-align: center;

}



.section-head .lede {

  margin-top: var(--sp-4);

}



.section-head--center .lede {

  margin-inline: auto;

}



.ridge-divider {

  position: relative;

  height: 64px;

  overflow: hidden;

}



.ridge-divider svg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

}



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

   Header — fixed, transparent over hero; solid when scrolled.

   At top: phone + address. Scrolled: nav links. (swap behavior)

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

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 60;

  color: var(--white);

  transition: background-color .3s ease, box-shadow .3s ease;

  background: linear-gradient(180deg, rgba(19, 45, 43, .55), rgba(19, 45, 43, 0));

}



.site-header.is-scrolled {

  background: var(--teal-900);

  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);

}



.site-header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  /* gap: var(--sp-5); */

  min-height: var(--header-h);

  padding-block: .6rem;

}



.brand-logo {

  flex-shrink: 0;

  display: block;

  width: 130px;

}



.brand-logo svg {

  width: 130px;

  height: 78px;

  display: block;

}



.header-mid {

  position: relative;

  flex: 1;

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  align-self: stretch;

}



.header-info,

.nav-inline {

  transition: opacity .28s ease, transform .28s ease, visibility .28s;

}



.header-info {

  display: flex;

  align-items: center;

  gap: var(--sp-5);

  flex-wrap: wrap;

  justify-content: center;

  font-size: var(--fs-sm);

  font-weight: 700;

}



.header-info a {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  opacity: .95;

  transition: color .15s ease;

}



.header-info a:hover {

  color: var(--yellow-300);

}



.header-info .icon {

  color: var(--site-green);

  width: 1.1em;

  height: 1.1em;

}



.header-info__sep {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--site-green);

  opacity: .8;

}



.nav-inline {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  pointer-events: none;

}



.nav-inline ul {

  display: flex;

  gap: clamp(1rem, 2.4vw, 2.2rem);

}



.nav-inline a {

  font-family: var(--font-display);

  font-weight: 600;

  font-size: .95rem;

  color: var(--white);

  position: relative;

  padding-block: .3rem;

  white-space: nowrap;

}



.nav-inline a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 100%;

  bottom: -2px;

  height: 3px;

  border-radius: 2px;

  background: var(--site-green);

  transition: right .22s ease;

}



.nav-inline a:hover::after,

.nav-inline a.is-active::after {

  right: 0;

}



.site-header.is-scrolled .header-info {

  opacity: 0;

  visibility: hidden;

  transform: translateY(-10px);

  pointer-events: none;

  display: none;

}



.site-header.is-scrolled .nav-inline {

  opacity: 1;

  visibility: visible;

  transform: none;

  pointer-events: auto;

}



.site-header__cta {

  display: flex;

  align-items: center;

  gap: var(--sp-4);

  flex-shrink: 0;

}

.site-header__cta .btn--teal{
  border: 1px solid var(--site-green);
}

.site-header__cta .btn--teal:hover {

  background-color: transparent;

  border: 1px solid var(--site-green);

  color: var(--site-green);

}



.trail-toggle {

  display: flex;

  align-items: center;

  gap: .6rem;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: .85rem;

  color: var(--white);

  padding: 5px;

  border-radius: 999px;

  border: 2px solid rgba(255, 255, 255, .7);

  transition: background-color .18s ease, color .18s ease, border-color .18s ease;

}





.trail-toggle__box {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: var(--site-green);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.trail-toggle__lines {

  width: 16px;

  height: 11px;

  position: relative;

}



.trail-toggle__lines span {

  position: absolute;

  left: 0;

  width: 100%;

  height: 2px;

  background: var(--teal-900);

  border-radius: 2px;

}



.trail-toggle__lines span:nth-child(1) {

  top: 0;

}



.trail-toggle__lines span:nth-child(2) {

  top: 4.5px;

}



.trail-toggle__lines span:nth-child(3) {

  top: 9px;

}



/* ---------- Trail nav drawer ---------- */

.trail-overlay {

  position: fixed;

  inset: 0;

  background: rgba(19, 45, 43, .55);

  backdrop-filter: blur(2px);

  z-index: 80;

  opacity: 0;

  pointer-events: none;

  transition: opacity .3s ease;

}



.trail-overlay.is-open {

  opacity: 1;

  pointer-events: auto;

}



.trail-nav {

  position: fixed;

  top: 0;

  right: 0;

  height: 100%;

  width: min(400px, 88vw);

  z-index: 90;

  background: #0a5b66;

  color: var(--paper);

  display: flex;

  flex-direction: column;

  padding: var(--sp-6) var(--sp-6) var(--sp-5);

  transform: translateX(100%);

  transition: transform .35s cubic-bezier(.65, 0, .35, 1);

  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .35);

  overflow-y: auto;

  /* Hide scrollbar - Firefox & IE/Edge */

  scrollbar-width: none;

  -ms-overflow-style: none;

}



/* Hide scrollbar - Chrome, Safari, Opera */

.trail-nav::-webkit-scrollbar {

  display: none;

}



.trail-nav.is-open {

  transform: translateX(0);

}



.trail-nav__doodles {

  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

}



.trail-nav__doodles svg {

  position: absolute;

  opacity: .1;

  color: var(--paper);

}



.trail-nav__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: var(--sp-6);

  position: relative;

}



.trail-nav__head img {

  width: 120px;

  height: 72px;

}



.trail-nav__close {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 1px solid rgba(250, 246, 236, .4);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: background-color .18s ease, transform .18s ease;

}



.trail-nav__close:hover {

  background: var(--site-green);

  color: var(--teal-900);

  transform: rotate(90deg);

}



.trail-path {

  position: relative;

  flex: 1;

}



/* .trail-path::before {

  content: "";

  position: absolute;

  left: 9px;

  top: 10px;

  bottom: 10px;

  width: 2px;

  background: repeating-linear-gradient(to bottom, rgba(250, 246, 236, .4) 0 6px, transparent 6px 12px);

} */



.trail-path li {

  position: relative;

  /* padding-left: 2.1rem; */

  margin-bottom: var(--sp-4);

}



/* .trail-path li::before {

  content: "";

  position: absolute;

  left: 2px;

  top: .5em;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  background: var(--teal-800);

  border: 2px solid var(--yellow-500);

} */



.trail-path a {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 1.15rem;

  color: var(--paper);

  opacity: .88;

  transition: opacity .15s ease, color .15s ease;

}



.trail-path a:hover {

  opacity: 1;

  color: var(--yellow-300);

}



.trail-nav__foot {

  margin-top: var(--sp-6);

  display: flex;

  flex-direction: column;

  gap: var(--sp-4);

  position: relative;

}



.trail-nav__tel {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 1.2rem;

  text-align: center;

  color: var(--yellow-300);

}



.trail-nav__addr {

  text-align: center;

  font-size: var(--fs-xs);

  opacity: .8;

}



.social-row {

  display: flex;

  gap: .6rem;

  justify-content: center;

}



.social-row a {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: 1px solid rgba(250, 246, 236, .4);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background-color .15s ease, border-color .15s ease, color .15s ease;

}



.social-row a:hover {

  background: var(--site-green);

  border-color: var(--site-green);

  color: var(--teal-900);

}



body.trail-open {

  overflow: hidden;

}



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

   Hero — full-bleed photo banner, doodle overlay, ridgeline seam

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

.hero {

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: var(--white);

}



.home-hero-wrapper {

  display: flex;

  align-items: center;

  min-height: 100dvh;

  padding: 100px 0;

}



.hero__media {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.hero__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 30%;

  /* animation: heroZoom 24s ease-out both; */

}



/* @keyframes heroZoom {

  from {

    transform: scale(1.12);

  }



  to {

    transform: scale(1);

  }

} */



.hero__scrim {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(100deg, rgba(19, 45, 43, .88) 0%, rgba(19, 45, 43, .62) 42%, rgba(19, 45, 43, .18) 75%, rgba(19, 45, 43, .05) 100%),

    linear-gradient(180deg, rgba(19, 45, 43, .35) 0%, rgba(19, 45, 43, 0) 30%);

}



.hero__doodles {

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

}



.hero__doodles svg {

  position: absolute;

}



.hero__inner {

  position: relative;

  z-index: 3;

}



.hero__eyebrow {

  margin-bottom: var(--sp-4);

}



.hero h1 {

  font-size: var(--fs-hero);

  font-weight: 800;

  color: var(--white);

  line-height: 1.02;

  margin-bottom: var(--sp-5);

  max-width: 13ch;

}



.hero h1 em {

  font-style: normal;

  color: var(--site-green);

}



.hero__lede {

  font-size: 18px;

  color: var(--paper);

  opacity: .94;

  max-width: 46ch;

  margin-bottom: var(--sp-6);

}



.hero__ctas {

  display: flex;

  gap: var(--sp-4);

  flex-wrap: wrap;

  margin-bottom: var(--sp-7);

}



.hero__facts {

  display: flex;

  flex-wrap: wrap;

  gap: .7rem;

}



.hero__facts li {

  display: flex;

  align-items: center;

  gap: .5rem;

  font-size: var(--fs-xs);

  font-weight: 700;

  background: rgba(19, 45, 43, .45);

  border: 1px solid rgba(250, 246, 236, .3);

  padding: .55rem 1rem;

  border-radius: 999px;

  backdrop-filter: blur(3px);

}



.hero__facts .icon {

  color: var(--yellow-500);

  width: 1.05em;

  height: 1.05em;

}



.hero__ridge {

  position: absolute;

  left: 0;

  right: 0;

  bottom: -1px;

  z-index: 4;

  height: clamp(48px, 8vw, 96px);

}



.hero__ridge svg {

  width: 100%;

  height: 100%;

  display: block;

}



/* ---------- Trust strip ---------- */

.trust {

  background: var(--paper-dim);

  border-bottom: 1px solid var(--paper-line);

}



.trust__inner {

  display: flex;

  flex-wrap: wrap;

  gap: var(--sp-5) var(--sp-7);

  justify-content: space-between;

  align-items: center;

  padding-block: var(--sp-6);

}



.trust__stat {

  display: flex;

  align-items: center;

  gap: var(--sp-3);

}



.trust__stat .icon {

  width: 26px;

  height: 26px;

  color: var(--green-600);

  flex-shrink: 0;

}



.trust__stat strong {

  display: block;

  font-family: var(--font-display);

  font-size: 1.05rem;

  color: var(--teal-800);

}



.trust__stat span {

  font-size: var(--fs-xs);

  color: var(--ink-soft);

}



/* ---------- CTA banner ---------- */

.cta-banner {

  background: var(--yellow-500);

  position: relative;

  overflow: hidden;

}



.cta-banner__topo {

  position: absolute;

  inset: 0;

  opacity: .14;

  mix-blend-mode: multiply;

}



.cta-banner__doodles svg {

  position: absolute;

  color: var(--teal-900);

  pointer-events: none;

}



.cta-banner__inner {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--sp-6);

  padding-block: var(--sp-8);

  flex-wrap: wrap;

}



.cta-banner h2 {

  color: var(--teal-900);

  max-width: 620px;

}



.cta-banner__ctas {

  display: flex;

  gap: var(--sp-4);

  flex-wrap: wrap;

}



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

   Footer — appointment banner + link columns + map

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

.site-footer {

  background: var(--teal-900);

  color: var(--paper);

  position: relative;

  overflow: hidden;

}



.footer__topo {

  position: absolute;

  inset: 0;

  opacity: .06;

}



.footer__doodles svg {

  position: absolute;

  color: var(--paper);

  pointer-events: none;

}



.footer__content {

  position: relative;

  z-index: 1;

}



.footer__hero {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

  gap: var(--sp-6);

  padding-block: var(--sp-8) var(--sp-7);

  border-bottom: 1px solid rgba(250, 246, 236, .14);

}



.footer__hero-logo svg {

  width: 190px;

  height: 114px;

}



.footer__hero h2 {

  color: var(--white);

  font-size: var(--fs-xl);

  max-width: 18ch;

}



.footer__hero-ctas {

  display: flex;

  flex-wrap: wrap;

  gap: var(--sp-3);

}



.footer__grid {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: var(--sp-6);

  align-items: start;

  padding-block: var(--sp-7);

}



.footer__grid>div {

  min-width: 0;

}



.site-footer h4 {

  font-family: var(--font-display);

  font-size: 1rem;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--yellow-500);

  margin: 0 0 var(--sp-4);

  display: flex;

  align-items: center;

  gap: .5rem;

}



.site-footer h4 .icon {

  width: 1.15em;

  height: 1.15em;

  flex-shrink: 0;

}



.footer-links {

  display: flex;

  flex-direction: column;

  gap: .7rem;

}



.footer-links a {

  font-size: 1rem;

  transition: opacity .15s ease, color .15s ease;

}



.footer-links a:hover {

  color: var(--site-green);

}



.footer-credit {

  font-weight: 800;

}



.footer-credit:hover {

  color: var(--yellow-300);

}



.footer-hours {

  display: flex;

  flex-direction: column;

  gap: .55rem;

  font-size: 1rem;

}



.footer-hours li {

  display: flex;

  /* justify-content: space-between; */

  gap: 1rem;

  opacity: .85;

}



.footer-hours li span:last-child {

  font-weight: 800;

  white-space: nowrap;

}



.footer-contact {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  font-size: var(--fs-sm);

}



.footer-contact li {

  display: flex;

  align-items: flex-start;

  gap: .6rem;

  opacity: .9;

}



.footer-contact .icon {

  color: var(--yellow-300);

  width: 1.15em;

  height: 1.15em;

  margin-top: .15em;

  flex-shrink: 0;

}



.footer-contact a:hover {

  color: var(--yellow-300);

}



.footer-map {

  border-radius: 18px;

  overflow: hidden;

  border: 1px solid rgba(250, 246, 236, .18);

  height: 180px;

}



.footer-map svg {

  width: 100%;

  height: 100%;

}



.footer__map-btn {

  margin-top: var(--sp-4);

}



.footer-bottom {

  border-top: 1px solid rgba(250, 246, 236, .15);

  padding-block: var(--sp-5);

  display: flex;

  justify-content: space-between;

  gap: var(--sp-4);

  flex-wrap: wrap;

  font-size: 1rem;

}



.footer-bottom span a{

  color: var(--yellow-500);

}

.footer-bottom span a:hover{

  color: var(--yellow-500);

}





/* ---------- Reveal-on-scroll ---------- */

.reveal {

  opacity: 0;

  transform: translateY(24px);

  transition: opacity .6s ease, transform .6s ease;

}



.reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}



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

  .reveal {

    opacity: 1;

    transform: none;

    transition: none;

  }



  .hero__media img {

    animation: none;

  }

}



/* Responsive */





/* Meet DR section Start */



.pw-meet-dr {

  background-color: #0a5b66;

  padding-top: 100px;

}



.pw-meet-wrapper {

  background-color: #4dafaa;

  display: grid;

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

  grid-template-rows: auto;

  column-gap: 60px;

  row-gap: 30px;

  padding: 150px 100px 100px;

  border-radius: 20px 20px 0 0;

}



.pw-meet-wrapper .pw-meet-left h2 {

  color: #FFFFFF;

  font-size: 28px;

  line-height: 1.6;

  font-weight: 400;

}



.pw-meet-wrapper .pw-meet-right p {

  color: #fff;

  font-size: 18px;

  font-weight: 400;

  margin-bottom: 30px;

}







/* Meet DR section End */



/* New Patients Start */



.pw-patient-section {

  padding-bottom: 100px;

  background-color: var(--site-green);

}



.pw-patient-wrapper {

  display: grid;

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

  grid-template-rows: auto;

  gap: 60px;

  background: #fff;

  border-radius: 0 0 20px 20px;

  overflow: hidden;

}



.pw-patient-wrapper .pw-p-left {

  display: flex;

  flex-direction: column;

  gap: 40px;

  padding: 100px 0 150px 100px;

}



.pw-patient-wrapper .pw-p-left h2 {

  color: var(--site-green);

  font-size: 28px;

  font-weight: 400;

}



.pw-patient-wrapper .pw-p-left p {

  font-size: 18px;

  line-height: 1.6;

}



.pw-patient-wrapper .pw-p-left p a {

  color: var(--site-green);

}



.pw-p-right {

  display: grid;

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

  grid-template-rows: auto;

}



.pw-p-right .pw-p-card {

  position: relative;

}



.pw-p-card .pw-p-img {

  width: 100%;

  height: 100%;

}



.pw-p-card .pw-p-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.pw-p-right .pw-p-card .pw-p-title {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  background-color: #00000050;

  transition: all 0.3s ease;

}



.pw-p-right .pw-p-card .pw-p-title p {

  color: #fff;

  font-weight: 500;

  font-size: 20px;

  transition: all 0.3s ease;

}



.pw-p-right .pw-p-card:hover .pw-p-title {

  background-color: #e0a80cc2;

  transition: all 0.3s ease;

}



.pw-p-right .pw-p-card:hover .pw-p-title p {

  color: var(--site-green-dark);

}



/* New Patients End */



/* Treatment Section Start */



.pw-treat-section {

  background-color: var(--site-green);

  padding-bottom: 100px;

}



.pw-treat-wrapper {

  display: grid;

  grid-template-columns: 2fr 4fr;

  grid-template-rows: auto;

  gap: 30px;

  padding: 0 100px;

}



.pw-t-list-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto;

  gap: 30px;

}



.pw-treat-wrapper .pw-t-title h2 {

  font-size: 28px;

  font-weight: 400;

  color: #fff;

}



.pw-t-list ul {

  list-style: none;

  padding-left: 0;

  margin-bottom: 0;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.pw-t-list ul li a {

  display: flex;

  align-items: center;

  gap: 10px;

}



.pw-t-list ul li a span {

  opacity: 0.5;

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.pw-t-list ul li a {

  color: #fff;

  font-size: 20px;

  font-weight: 500;

}



.pw-t-list ul li a .pw-t-icon {

  width: 30px;

  height: 20px;

  transform: translate(-20px, 2px);

  opacity: 0;

  transition: all 0.3s ease;

}



.pw-t-list ul li a:hover .pw-t-icon {

  transform: translate(0px, 2px);

  opacity: 1;

  transition: all 0.3s ease;

}



.pw-t-list ul li a:hover span {

  opacity: 1;

}



.pw-t-list ul li a:hover {

  color: var(--site-green-dark);

}



/* Treatment Section End */



/* Testimonial Slider Star */



.pw-testi-section {

  background-color: var(--site-green);

  position: relative;

}



.pw-testi-wrapper {

  padding: 100px 100px 100px;

  border-radius: 20px 20px 0 0;

  background-color: var(--site-green-3);

}



.pw-testi-wrapper .custom-slider-nav {

  margin-top: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

}



.pw-testi-wrapper .testi-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 20px;

}



.pw-testi-wrapper .testi-card .pw-testi-content {

  text-align: center;

}



.pw-testi-wrapper .testi-card .pw-testi-content span,

.pw-testi-wrapper .testi-card .pw-testi-content p {

  color: #fff;

  font-size: 20px;

  font-weight: 600;

}



/* Testimonial Slider End */



/* Tout Section Start */



.pw-tour-section {

  position: relative;

  overflow: hidden;

}



.pw-tour-section .container {

  position: relative;

  z-index: 1;

}



.pw-tour-section .pw-tour-bg {

  position: absolute;

  inset: 0;

}



.pw-tour-section .pw-tour-bg::after {

  position: absolute;

  content: '';

  inset: 0;

  background-color: #000000af;

}



.pw-tour-section .pw-tour-bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.pw-tour-wrapper {

  min-height: 100dvh;

  max-width: 800px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 15px;

  width: 100%;

}



.pw-tour-wrapper h2 {

  color: #f9ca06;

  font-size: 30px;

  font-weight: 400;

  line-height: 1.6;

}



.pw-tour-wrapper p {

  font-size: 18px;

  color: #fff;

  font-weight: 400;

}



.pw-tour-wrapper .btn-border {

  color: #fff;

}



.pw-tour-wrapper .btn-border::after,

.pw-tour-wrapper .btn-border::before {

  background: #fff;

}



/* Tout Section End */



/* FAQ Start */



.pw-faq-section {

  padding: 60px 0 100px 0;

  background-color: #f0f0f0;

}



.faq-title {

  text-align: center;

  margin-bottom: 50px;

  color: var(--site-green-dark);

}



.accordion-button:focus {

  box-shadow: none;

}



.accordion-item:last-of-type,

.accordion-item:first-of-type>.accordion-header .accordion-button {

  border-radius: 0;

  border: 0;

}



.accordion-item:first-of-type {

  border: 0;

}



.accordion-button:not(.collapsed) {

  background: #fff;

  box-shadow: none;

  color: var(--site-green-dark);

}



.accordion-button {

  color: var(--site-green-dark);

  font-size: 18px;

  font-weight: 500;

}



.pw-faq-wrapper .accordion-item {

  border: 0;

  background: transparent;

}



.pw-faq-wrapper .accordion {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.pw-faq-wrapper .accordion-body {

  font-size: 16px;

}



.accordion-button {

  padding-top: 12px;

  padding-bottom: 12px;

  gap: 12px;

}



.accordion-button::after {

  background-image: url('../images/toggle_open.webp') !important;

}



.accordion-button:not(.collapsed)::after {

  background-image: url('../images/toggle_close.png') !important;

}





/* FAQ End */



/* CTA Start */



.pw-cta {

  background-color: #f0f0f0;

}



.pw-cta-wrapper {

  background-color: var(--yellow-500);

  padding: 100px 100px 100px;

  border-radius: 40px 40px 0 0;

  display: grid;

  grid-template-columns: 4fr 1fr;

  gap: 40px;

  align-items: center;

}



.pw-cta-wrapper .pw-cta-text h2 {

  font-size: 30px;

  font-weight: 400;

  line-height: 1.6;

  max-width: 50ch;

}



.pw-cta-btn {

  display: flex;

  flex-direction: column;

  gap: var(--sp-3);

}



.pw-cta-wrapper .pw-cta-btn .btn--outline {

  color: var(--site-green-dark);

}



.pw-cta-wrapper .pw-cta-btn .btn--outline:hover {

  background-color: var(--site-green);

  color: #fff;

}





/* CTA End */



/* Map Section Start */



.map-section {

  background-color: var(--site-green-dark);

}



.pw-map-wrapper {

  border-radius: 0 0 40px 40px;

  overflow: hidden;

  height: 450px;

}



.pw-map-wrapper iframe {

  width: 100%;

  height: 100%;

}



/* Map Section End */



.header-contact,

.header-small-btn {

  display: none;

}











.nav-inline ul {

  display: flex;

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav-inline li {

  position: relative;

}



.nav-inline a {

  display: block;

  padding: 1rem 0;

  text-decoration: none;

  color: inherit;

}



/* Dropdown panel */

.nav-inline .dropdown {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 220px;

  background: var(--site-green);

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

  /* border-radius: 6px; */

  /* padding: 0.5rem 0; */

  z-index: 100;

}



.nav-inline .dropdown li {

  width: 100%;

}



.nav-inline .dropdown a {

  padding: 0.6rem 1.25rem;

  white-space: nowrap;

}



.nav-inline .dropdown a:hover,

.nav-inline .dropdown a:focus {

  background: var(--site-green-dark);

}



/* Show on hover (desktop) and keyboard focus */

.nav-inline .has-dropdown:hover .dropdown,

.nav-inline .has-dropdown:focus-within .dropdown {

  display: block;

}



.nav-inline .has-dropdown>a {

  display: flex;

  align-items: center;

  gap: 0.35rem;

}



.nav-inline .dropdown-arrow {

  transition: transform 0.2s ease;

  flex-shrink: 0;

  position: absolute;

  right: -15px;

  top: 50%;

  transform: translateY(-50%);

}



/* Rotate the arrow when open (hover, keyboard focus, or .open from JS) */

.nav-inline .has-dropdown:hover .dropdown-arrow,

.nav-inline .has-dropdown:focus-within .dropdown-arrow,

.nav-inline .has-dropdown.open .dropdown-arrow {

  transform: rotate(180deg);

  position: absolute;

  top: 42%;

  transition: all 0.3s ease;

}



/* Small indicator arrow on the parent link */



.trail-item__row {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.trail-item__toggle {

  background: none;

  border: none;

  padding: 0.5rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: inherit;

}



.trail-item__arrow {

  transition: transform 0.2s ease;

}



.has-submenu.open .trail-item__arrow {

  transform: rotate(180deg);

}



.trail-submenu {

  list-style: none;

  margin: 0;

  padding: 0;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.25s ease;

}



.has-submenu.open .trail-submenu {

  max-height: 300px;

  /* large enough to fit all items */

}



.trail-submenu li a {

  display: block;

  padding: 0.6rem 0 0.6rem 1.5rem;

  font-size: 0.9em;

  opacity: 0.85;

}



.trail-submenu li {

  margin-bottom: 0;

}



.trail-submenu li a:hover {

  color: var(--site-green);

}



.footer-social {

  margin-top: 30px;

  display: flex;

  gap: 15px;

}



.footer-social li a {

  width: 40px;

  height: 40px;

  border: 1px solid #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

}



.footer-social li a:hover {

  background-color: var(--site-green);

  color: #fff;

  border-color: var(--site-green);

}







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



/* Inner Banner Section Start */

.pw-inner-banner-section {

  min-height: 650px;

  width: 100%;

  background-color: var(--teal-900);

  display: flex;

  align-items: end;

  justify-content: center;

  position: relative;

  z-index: -1;

}



.pw-inner-banner-content {

  display: flex;

  align-items: center;

  justify-content: center;

  padding-top: 140px;

  padding-bottom: 150px;

  position: relative;

  z-index: 1;

}



.pw-inner-banner-content h1 {

  color: var(--yellow-500);

  font-size: 100px;

  text-align: center;

}



.pw-inner-banner-bg-image {

  position: absolute;

  bottom: 0;

  right: 0;

  z-index: 0;

  opacity: 0.3;

  max-width: 700px;

  height: auto;

}



/* Inner Banner Section End */





/* Services Cards Section Start */

.pw-service-cards-section {

  background-color: #f0f0f0;

}



.pw-service-card-wrapper {

  background-color: var(--white);

  padding: 100px;

  border-radius: 40px;

  transform: translateY(-110px);

}



/* .pw-service-card-sec-title{

  width: 100%;

} */

.pw-service-card-sec-title h2 {

  font-size: 30px;

  line-height: 1.7;

  color: var(--site-green);

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  /* width: 100%; */

  margin-bottom: 30px;

}



.pw-service-cards-grid {

  display: grid;

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

  grid-template-rows: auto;

  max-width: max-content;

  margin-left: auto;

  margin-right: auto;

  gap: 40px;

}



.pw-service-card {

  position: relative;

  width: 200px;

  height: 200px;

}



.pw-service-card-content {

  width: 100%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  text-align: center;

  z-index: 1;

  padding: 0 10px;

}



.pw-service-card-text h3 {

  font-size: 21px;

  color: #fff;

  font-weight: 400;

  transition: all 0.5s ease;

}



.pw-service-card-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.pw-service-card::after {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #0000007a;

  z-index: 0;

  transition: all 0.5s ease;

}



.pw-service-card:hover::after {

  background-color: #f9ca06ba;

  transition: all 0.5s ease;

}



.pw-service-card:hover .pw-service-card-text h3 {

  color: var(--teal-900);

  transition: all 0.5s ease;

}



/* Services Cards Section End */





/* Service Detail Section Strat */

.pw-service-detail-section,

.pw-blog-page-section {

  background-color: #f0f0f0;

}



.pw-service-detail-area,

.pw-review-wrapper,

.pw-blog-page-area{

  background-color: #fff;

  transform: translateY(-110px);

  border-radius: 40px;

  overflow: hidden;

}



.pw-service-detail-wrapper,

.pw-service-detail-content,

.pw-privacy-policy-content,

.pw-meet-dr-content,

.pw-meet-dr-education-wrapper,

.pw-review-content{

  max-width: 934px;

  margin-left: auto;

  margin-right: auto;

  padding: 0 14px;

}



.pw-service-detail-content,

.pw-privacy-policy-content,

.pw-meet-dr-content {

  padding-top: 100px;

  padding-bottom: 70px;

}



.pw-service-detail-treat-sec {

  padding: 100px 0;

}



.pw-service-detail-content img,

.pw-meet-dr-content img,

.pw-blog-detail-page-content img {

  margin-bottom: 30px;

}



.pw-service-detail-content h2,

.pw-privacy-policy-content h2,

.pw-blog-detail-page-content h2 {

  margin-bottom: 30px;

  font-size: 40px;

  color: #000;

}



.pw-service-detail-content p,

.pw-privacy-policy-content p,

.pw-meet-dr-content p,

.pw-the-dr-detail-title-text-1 p,

.pw-the-dr-detail-content p,

.pw-blog-detail-page-content p {

  margin-bottom: 30px;

}



.pw-service-detail-content h3,

.pw-privacy-policy-content h3,

.pw-meet-dr-content h3,

.pw-blog-detail-page-content h3 {

  margin-bottom: 30px;

  font-size: 36px;

  font-weight: 400;

  color: #000;

}



.pw-service-detail-content p a,

.pw-service-detail-content ul li a,

.pw-privacy-policy-content p a,

.pw-privacy-policy-content ul li a,

.pw-meet-dr-content p a,

.pw-meet-dr-content ul li a,

.pw-the-dr-detail-title-text-1 ul li a,

.pw-the-dr-detail-title-text-1 p a,

.pw-dr-education ul li a,

.pw-dr-education p a,

.pw-blog-detail-page-content p a,

.pw-blog-detail-page-content ul li a {

  color: var(--teal-900);

}



.pw-service-detail-content p strong,

.pw-the-dr-detail-title-grid p strong,

.pw-blog-detail-page-content p strong {

  font-weight: 900;

}



.pw-service-detail-content ul,

.pw-privacy-policy-content ul,

.pw-dr-education ul,

.pw-the-dr-detail-title-text-1 ul,

.pw-meet-dr-content ul,

.pw-blog-detail-page-content ul {

  margin-bottom: 30px;

  padding-left: 30px;

}



.pw-service-detail-content ul li,

.pw-privacy-policy-content ul li,

.pw-meet-dr-content ul li,

.pw-the-dr-detail-title-text-1 ul li,

.pw-dr-education ul li,

.pw-blog-detail-page-content ul li {

  position: relative;

  margin-bottom: 15px;

  font-weight: bold;

}



.pw-service-detail-content ul li::before,

.pw-privacy-policy-content ul li::before,

.pw-meet-dr-content ul li::before,

.pw-the-dr-detail-title-text-1 ul li::before,

.pw-dr-education ul li::before,

.pw-blog-detail-page-content ul li::before {

  content: '';

  position: absolute;

  width: 10px;

  height: 10px;

  background-color: var(--yellow-500);

  top: 8px;

  left: -28px;

  border-radius: 50%;

}



/* Service Detail Section End */





/* Thank You Section Start */

.pw-thank-you-section,

.pw-privacy-policy-section,

.pw-meet-dr-section,

.pw-contact-page-section,

.pw-review-section,

.pw-the-dr-detail-section,

.pw-blog-detail-section {

  background-color: #f0f0f0;

}



.pw-thank-you-sec-wrapper,

.pw-privacy-policy-wrapper,

.pw-meet-dr-wrapper,

.pw-contact-wrapper,

.the-dr-detail-wrapper,

.pw-blog-detail-wrapper {

  background-color: #fff;

  border-radius: 40px;

  transform: translateY(-110px);

  overflow: hidden;

}



.pw-thank-you-sec-wrapper {

  min-height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 100px 14px;

}



.pw-meet-dr-content iframe{

  margin-bottom: 30px;

}



/* Thank You Section End */



.pw-meet-dr-content h2,

.pw-review-content h2,

.pw-the-dr-detail-content h2{

  font-size: 30px;

  color: var(--site-green);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin-bottom: 40px;

  font-weight: 600;

  line-height: normal;

}



.pw-dr-education h4 {

  color: #fff;

  font-weight: bold;

  margin-bottom: 30px;

}



.pw-dr-education ul li {

  color: #fff;

}



.pw-dr-education p {

  margin-bottom: 30px;

  color: #fff;

}



.pw-meet-dr-education-area {

  background-color: #4dafaa;

  padding: 100px 0;

}



.pw-meet-dr-education-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

}



.pw-meet-dr-content img {

  margin-left: auto;

  margin-right: auto;

}



.pw-contact-content-area,

.pw-review-content{

  padding-top: 100px;

  padding-bottom: 100px;

}



.pw-contact-detal ul li span svg {

  width: 20px;

  height: 20px;

  flex-shrink: 0;

  color: var(--site-green);

  margin-top: 3px;

}



.pw-contact-detal ul li {

  display: flex;

  align-items: start;

  gap: 14px;

}

.pw-contact-detal ul li span{

  color: var(--site-green);

}

.pw-contact-detal ul li a {

  /* color: var(--site-green); */

  font-size: 16px;

}



.pw-contact-detal ul li p{

  display: flex;

  flex-direction: column;

}



.pw-contact-content-area{

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto;

  gap: 60px;

}

.pw-contact-detal ul{

  display: flex;

  flex-direction: column;

  gap: 16px;

  margin-bottom: 40px;

}

.pw-contact-add-detal h2{

  margin-bottom: 30px;

  font-size: 32px;

  color: #000;

  font-weight: 600;

}



.pw-contact-working-hours h3{

  font-size: 20px;

  color: #000;

  margin-bottom: 20px;

  font-weight: 600;

}

.pw-contact-working-hours ul{

  display: flex;

  flex-direction: column;

  gap: 4px;

  margin-bottom: 14px;

}

.pw-contact-working-hours span{

  font-size: 14px;

}



.pw-contact-page-sec-map{

  width: 100%;

  height: 100%;



  border-radius: 20px;

  overflow: hidden;

}

.pw-contact-page-sec-map iframe{

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.pw-contact-content-area,

.pw-the-dr-detail-content{

  max-width: 1133px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 14px;

  padding-right: 14px;

}



.pw-what-page-sec{

  border-radius: 40px;

}



.pw-dr-hayley-edusec{

  display: grid;

  grid-template-columns: 1fr;

}



.pw-review-star-img {

  margin-bottom: 10px;

}

.pw-review-text p{

  font-size: 20px;

}

.pw-review-text{

  margin-bottom: 40px;

}

.pw-single-review{

  margin-bottom: 100px;

}

.pw-single-review:last-child{

  margin-bottom: 0;

}

.pw-review-content h2{

  margin-bottom: 50px;

}

.pw-the-dr-detail-content{

  padding-top: 100px;

  padding-bottom: 100px;

}

.pw-the-dr-detail-title-text{

  text-align: center;

  margin-bottom: 80px;

}



.pw-the-dr-detail-title-grid{

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto;

  gap: 50px;

}





/* ------- Blog page section start ---------- */

.pw-blog-category{

  font-size: 16px;

  color: var(--site-green-3);

  text-transform: capitalize;

  margin-bottom: 10px;

}



.pw-blog-title h2{

  font-size: 28px;

  line-height: 1.4;

  color: var(--site-green-dark);

  font-weight: normal;

}

.pw-blog-date{

  background-color: var(--site-green-3);

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  max-width: max-content;

  position: absolute;

  z-index: 1;

  border-radius: 30px 0 30px 0;

}

.pw-blog-date span:nth-child(1),

.pw-blog-date span:nth-child(3){

  font-size: 14px;

  text-transform: uppercase;

  color: #fff;

  line-height: normal;

}

.pw-blog-image{

  border-radius: 0 30px 30px 30px;

  overflow: hidden;

  position: relative;

  margin-bottom: 20px;

}

.pw-blog-image img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: all 0.4s ease;

  aspect-ratio: 6/4;

}

.pw-blog-date span:nth-child(2){

  font-size: 32px;

  color: #fff;

  line-height: 1.2;

}

.pw-blog-date{

  min-width: 80px;

}



.pw-blog-page-content{

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: auto;

  column-gap: 40px;

  row-gap: 90px;

  padding: 100px 40px;

}



.pw-blog-inner-card{

  padding-left: 80px;

}

.pw-single-blog-crad:hover .pw-blog-image img{

  transform: scale(1.06);

  transition: all 0.4s ease;

}



.pw-blog-detail-page-content{

  padding: 100px 40px;

  display: grid;

  grid-template-columns: 1.5fr 0.8fr;

  gap: 150px;

}



.pw-blog-detail-by-date{

  display: flex;

  align-items: center;

  justify-content: start;

  gap: 20px;

  margin-bottom: 20px;

}



.pw-blog-detail-by-date span {

  color: #c7c7ca;

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 16px;

}



.pw-blog-detail-by-date span svg{

  width: 20px;

  height: 20px;

  color: #c7c7ca;

}

.pw-resent-blog-content ul{

  padding-left: 0;

  display: flex;

  flex-direction: column;

  width: 100%;

}

.pw-resent-blog-content ul li{

  width: 100%;

  border-bottom: 1px solid #e0e0e0;

  margin-bottom: 5px;

  display: flex;

  font-weight: lighter;



}

.pw-resent-blog-content ul li a{

  color: #000;

  font-weight: 400;

  width: 100%;

  padding: 10px 0;

  font-size: 18px;

  transition: all 0.3s ease;

}

.pw-resent-blog-content ul li::before{

  display: none;

}

.pw-resent-blog-content ul li:hover a{

  color: var(--site-green-dark);

  transition: all 0.3s ease;

}

.pw-resent-blog-content h4{

  font-size: 20px;

  margin-bottom: 20px;

  color: var(--site-green-dark);

}

/* ------- Blog page section end ---------- */





.inner-site-header .header-mid{

display: none;

}

.inner-site-header.is-scrolled .header-mid{

display: block;

}



.inner-site-header .site-header__inner{

display: grid;

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

grid-template-rows: auto;

gap: 20px;

}

.inner-site-header.is-scrolled .site-header__inner{

display: flex;

justify-content: space-between;

}



.pw-main-header-logo{

  display: flex;

  justify-content: center;

}



.inner-site-header .header-info{

  flex-direction: column;

  align-items: start;

  gap: 5px;

}



.inner-site-header .header-info a{

align-items: start;

}

.inner-site-header .header-info a svg{

  margin-top: 3px;

}

.inner-site-header .site-header__cta{

  justify-content: end;

}





.pw-form-section .pw-the-dr-detail-title-grid{

  grid-template-columns: 1fr;



}

.pw-form-section .gform-theme--foundation .gform_fields{

  row-gap: 30px;



}



.pw-form-section .gfield input.large,

.pw-form-section .gform-theme--foundation .gfield select.large,

.pw-form-section .gform-theme--foundation .gfield textarea,

.pw-form-section .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input{

border-radius: 30px;

background-color: #f1f1f1;

min-height: 50px;

font-size: 18px;

color: #000;

font-weight: 500;

display: flex;

align-items: center;

border: none;

padding-left: 20px;

}



.pw-form-section .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input{

  width: 100%;

}



.pw-form-section .gform_heading{

  display: none;

}



.pw-form-section .gfield input.large::placeholder,

.pw-form-section .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input::placeholder,

.pw-form-section .gform-theme--foundation .gfield select.large::placeholder,

.pw-form-section .gform-theme--foundation .gfield textarea::placeholder{

  color: var(--site-green-dark);

  opacity: 0.6;

}



.pw-form-section .gfield input.large:focus,

.pw-form-section .gform-theme--foundation .gfield select.large:focus,

.pw-form-section .gform-theme--foundation .gfield textarea:focus,

.pw-form-section .gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input:focus{

  box-shadow: none !important;

}



.pw-form-section .gform-theme--framework .gform-field-label{

  font-size: 14px;

  text-transform: uppercase;

  color: var(--site-green-dark);

}



.pw-form-section .gfield--type-radio .gfield_label,

.pw-form-section .gfield--type-radio .gform-field-label{

  color: #000 !important;

  text-transform: capitalize;

  font-size: 16px;

  font-weight: 700;

}





.pw-form-section .gform_footer{

  margin-top: 50px !important;

}

.pw-form-section .gform_footer .gform_button{

 border: 2px solid var(--site-green-dark) !important;

  color: var(--site-green-dark) !important;

  background-color: transparent !important;

  text-transform: uppercase !important;



    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: .5rem !important;

    font-family: var(--font-display) !important;

    font-weight: 600 !important;

    font-size: 15px !important;

    padding: 10px 20px !important;

    border-radius: 999px !important;

    white-space: nowrap !important;

    line-height: 1.5 !important;

}

.pw-form-section .gform_footer .gform_button:hover{

   background: var(--yellow-500) !important;

   border-color: var(--yellow-500) !important;

}





/* =============== */
.pw-blog-pagination {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 60px;
}

.pw-blog-pre-btn a,
.pw-blog-next-btn a{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--site-green-dark);

}

.pw-blog-pre-btn a svg,
.pw-blog-next-btn a svg{
  width: 16px;
  height: 16px;
    color: var(--site-green-dark);
}


/* ----------------------- */

  .nav-inline {

    display: none;

  }

  .site-header.is-scrolled .header-contact{

    display: flex;

    gap: 10px;

  } 


  .header-contact a {

    display: flex;

    align-items: center;

    gap: 10px;

  }



  .header-contact a span:first-child {

    background-color: var(--site-green);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  /* ================= */
  .pw-blog-category{
    display: none;
  }

  .pw-thank-you-section p{
    text-align: center;
  }

  .gform_confirmation_message{
    text-align: center !important;
  }

  .gform-theme--framework input[type]:where(:not(.gform-text-input-reset,[type=hidden])):where(:not(.gform-theme__disable,.gform-theme__disable *):not(.gform-theme__disable-framework,.gform-theme__disable-framework *)):focus{
    outline: 0 !important;
    box-shadow: none !important;
    /* border: 0 !important; */
  }

  .pw-form-section .gfield input{
    outline: 0 !important;
    box-shadow: none !important;
    /* border: 0 !important; */
  }

    .pw-form-section .gfield textarea{
    outline: 0 !important;
    box-shadow: none !important;
    /* border: 0 !important; */
  }

  .pw-form-section .gform-theme--foundation .gfield select.large:focus{
    outline: 0 !important;
    box-shadow: none !important;
    /* border: 0 !important; */
  }

  .pw-form-section .gform-theme--foundation .gfield textarea:focus{
    outline: 0 !important;
    box-shadow: none !important;
    /* border: 0 !important; */
  }

  input:focus{
    outline: 0 !important;
    border: none !important;
  }

  textarea:focus{
    outline: 0 !important;
    border: none !important;
  }

  /* .gfield-choice-input{
    border: inherit !important;
  } */