/* poppins-100 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/poppins-v23-latin_latin-ext-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-100italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/poppins-v23-latin_latin-ext-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/poppins-v23-latin_latin-ext-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/poppins-v23-latin_latin-ext-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/poppins-v23-latin_latin-ext-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/poppins-v23-latin_latin-ext-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v23-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/poppins-v23-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/poppins-v23-latin_latin-ext-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/poppins-v23-latin_latin-ext-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/poppins-v23-latin_latin-ext-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/poppins-v23-latin_latin-ext-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/poppins-v23-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/poppins-v23-latin_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/poppins-v23-latin_latin-ext-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/poppins-v23-latin_latin-ext-800italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/poppins-v23-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900italic - latin_latin-ext */
@font-face {
  font-display: swap;
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/poppins-v23-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* solitreo-regular - latin */
/* caveat-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/caveat-v22-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* caveat-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/caveat-v22-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* caveat-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/caveat-v22-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* caveat-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/caveat-v22-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
  --body-font: "Poppins", sans-serif;
  --block-font-2: "Caveat", sans-serif;
  --h1-size: 74px;
  --h2-size: 50px;
  --h3-size: 40px;
  --h3-height: 50px;
  --h4-size: 32px;
  --h4-height: 40px;
  --h5-size: 28px;
  --h5-height: 38px;
  --h6-size: 22px;
  --p-size: 18px;
  --p-height: 28px;
  --p-spacing: 1.2px;
  --p-size-sm: 16px;
  --p-height-sm: 26px;
  --button-size: 16px;
  --subtitle-size: 22px;
  --border-radius: 45px;
  --standard-width: 1550px;
  --teal: #35B7A1;
  --green: #92ca66;
  --aqua: #82e9e0;
  --forest: #186350;
  --dark: #0c4c3d;
  --mint: #c9e7c7;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
}

body {
  font-family: var(--body-font);
  margin: 0;
  padding: 0;
}

h1 {
  font-family: var(--body-font);
  font-size: var(--h1-size);
  font-weight: 400;
  margin: 0;
}

h2 {
  font-family: var(--body-font);
  font-size: var(--h2-size);
  font-weight: 500;
  margin: 0;
}

h3 {
  font-family: var(--body-font);
  font-size: var(--h3-size);
  font-weight: 500;
  margin: 0;
}

h4 {
  font-family: var(--body-font);
  font-size: var(--h4-size);
  font-weight: 500;
  margin: 0;
}

h5 {
  font-family: var(--body-font);
  font-size: var(--h5-size);
  font-weight: 500;
  margin: 0;
}

h6 {
  font-family: var(--body-font);
  font-size: var(--h6-size);
  font-weight: 500;
  margin: 0;
}

a {
  color: var(--dark);
  text-decoration: none;
  transition: color 0.25s ease;
  font-weight: 500;
}

a:hover {
  cursor: pointer;
  color: var(--forest);
  text-decoration: underline;
}

.underline-link {
  text-decoration: underline;
}

.underline-link:hover {
  color: var(--teal);
}

p {
  font-size: var(--p-size);
  line-height: var(--p-height);
  letter-spacing: var(--p-spacing);
}

.icon {
  width: 50px;
  height: 50px;
}

.primary-button {
  font-family: var(--body-font);
  font-size: var(--button-size);
  letter-spacing: 1.25px;
  border-radius: 20px;
  background-color: var(--green);
  border: none;
  color: var(--dark);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.primary-button::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--teal);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  z-index: -1;
}

.primary-button:hover {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.primary-button:hover::before {
  transform: translateX(0);
}

.secondary-button {
  font-family: var(--body-font);
  font-size: var(--button-size);
  letter-spacing: 1.25px;
  border-radius: 20px;
  background-color: var(--mint);
  border: none;
  color: var(--dark);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all 0.25s ease;
}

.secondary-button:hover {
  cursor: pointer;
  background-color: var(--green);
}

.section-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl) 0;
  max-width: var(--standard-width);
}

.col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.two-column {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.img-col-left {
  width: 40%;
}

.img-col-right {
  width: 60%;
}

.subtitle {
  text-transform: uppercase;
  font-weight: 400;
  font-style: italic;
  font-size: var(--subtitle-size);
  color: var(--forest);
}

.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.divider-text {
  font-family: var(--block-font-2);
  font-size: var(--h3-size);
  letter-spacing: 0.2rem;
  background-color: var(--green);
  width: 90%;
  text-align: center;
  border-radius: var(--border-radius);
  padding: var(--spacing-sm) 0;
  text-transform: uppercase;
}

.team-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--spacing-xl);
  row-gap: var(--spacing-lg);
}

.portrait-wrapper {
  position: relative;
  align-self: center;
  margin: 0 var(--spacing-xl) 0 0;
}

.name-tag {
  background-color: var(--teal);
  padding: var(--spacing-sm) var(--spacing-xl);
  position: absolute;
  right: -30%;
  bottom: 15%;
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.name {
  line-height: 2.5rem;
}

.portrait {
  border-radius: 0 80px 0 80px;
}

.bio {
  padding: 0 var(--spacing-md);
}

.title {
  text-align: center;
  width: 100%;
}

.title-line {
  width: 100px;
  height: 1.2px;
  background-color: var(--forest);
  margin-top: var(--spacing-xs);
}

.badge {
  background-color: var(--green);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius);
  text-transform: uppercase;
  color: var(--dark);
  font-size: var(--h4-size);
  font-weight: 500;
  box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.3);
  margin: var(--spacing-sm) 0;
  font-family: var(--block-font-2);
  letter-spacing: 0.2rem;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm) 0 var(--spacing-md) 0;
}

.navbar img {
  height: 300px;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  margin: 0 var(--spacing-md);
  text-align: center;
  display: inline-block;
}

.collapse-logo {
  display: none;
}

.navbar .hamburger {
  height: 50px;
  width: 50px;
  border-radius: 14px;
  z-index: 3;
  display: none;
}

.navbar .hamburger:hover {
  cursor: pointer;
}

.navbar .bar1, .bar2, .bar3 {
  background-color: var(--forest);
  display: flex;
  height: 4px;
  width: 28px;
  margin: 3px;
  border-radius: 10px;
}

.menu-drawer .navDrawer {
  box-sizing: border-box;
  width: 170px;
  background-color: rgba(201, 231, 199, 0.9);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  position: fixed;
  top: 0;
  right: -190px;
  z-index: 2;
  margin: 0;
  padding: 120px var(--spacing-md) var(--spacing-xl) var(--spacing-md);
  list-style: none;
  text-align: start;
  transition: transform 0.3s;
}

.navDrawer li {
  padding: var(--spacing-sm) 0;
  line-height: 20px;
}

.navDrawer img {
  width: 130px;
}

.openDrawer {
  transform: translateX(-180px);
}

.sub-menu {
  background-color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-md) 0 var(--spacing-xl) 0;
}

.sub-menu ul {
  list-style: none;
  display: flex;
  width: var(--standard-width);
  justify-content: center;
  align-items: center;
  padding: 0;
}

.sub-menu a {
  margin: 0 var(--spacing-lg);
  display: inline-block;
  text-align: center;
}

.space-above {
  margin: var(--spacing-lg) 0 0 0;
}
.footer {
  width: 100%;
  background-image: url("/images/footer-trees.webp");
  position: absolute;
  background-position: bottom right;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  position: relative;
}

.footer .section-container {
  width: 100%;
  align-items: flex-end;
  justify-content: space-around;
}

.footer-cols {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: flex-end;
}

.footer-logo {
  width: 200px;
}

.footer ul {
  list-style: none;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 0;
}

.footer ul li {
  padding: var(--spacing-md) 0 0 0;
}

.contact-info p, .contact-info h3 {
  margin: 0;
}

.contact-info h3 {
  font-size: var(--h5-size);
  padding: var(--spacing-sm) 0;
}

.women-owned {
  margin: 0 0 var(--spacing-md) 0;
}

.caps-icon {
  max-width: 120px;
  margin: 0 0 var(--spacing-sm) 0;
}

.copyright {
  margin: var(--spacing-sm) 0 0 0;
}

.facebook {
  fill: var(--dark);
}

.facebook:hover {
  fill: var(--forest);
}

.hhr-services, .who-we-help-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hhr-services .section-container, .who-we-help-section .section-container {
  flex-direction: column;
}

.hhr-services .service-wrapper, .who-we-help-section .service-wrapper {
  display: grid;
  grid-template-areas: "title title title" "img text text";
  margin: 0 0 var(--spacing-xl) 0;
  width: 100%;
}

.hhr-services .service-img, .who-we-help-section .service-img {
  width: 100%;
  grid-area: img;
  object-fit: cover;
}

.hhr-services .section-container .service-title, .who-we-help-section .section-container .service-title {
  border-bottom: 2px solid var(--aqua);
  grid-area: title;
  margin: 0 0 var(--spacing-lg) 0;
}

.hhr-services .subtitle-wrapper, .who-we-help-section .subtitle-wrapper {
  margin: 0 var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
  box-sizing: border-box;
  display: grid;
  grid-template-areas: "subtitle subtitle subtitle" "img text text" "img list list";
}

.hhr-services .subtitle-wrapper .service-img, .who-we-help-section .subtitle-wrapper .service-img {
  max-width: 300px;
}

.hhr-services .section-container .service-subtitle, .who-we-help-section .section-container .service-subtitle {
  grid-area: subtitle;
}

.hhr-services .section-container .service-text, .who-we-help-section .section-container .service-text {
  margin: 0 0 0 var(--spacing-lg);
  grid-area: text;
  position: relative;
}

.hhr-services .service-text > p, .who-we-help-section .service-text > p {
  margin-top: 0;
}

.hhr-services .section-container .service-text .subtitle, .who-we-help-section .section-container .service-text .subtitle {
  padding: 0 0 var(--spacing-sm) 0;
}

#skip-to-content {
  display: flex;
  align-items: center;
}

#skip-to-content a:focus {
  position: absolute;
  top: 0px;
  left: 0px;
  transition: top .05s ease-in;
}

#skip-to-content a {
  background-color: var(--green);
  padding: var(--spacing-sm) var(--spacing-md);
  top: -50px;
  position: absolute;
  transition: top .5s ease-out;
  z-index: 100;
  color: var(--dark);
}

.hhr-hero-text {
  font-size: calc(var(--p-size) * 1.2);
  line-height: calc(var(--p-height) * 1.2);
  letter-spacing: calc(var(--p-spacing) * 1.2);
  width: 80%;
  text-align: center;
}

.cta {
  display: flex;
  justify-content: center;
}
.cta .section-container {

  flex-direction: column;
}

.core-values {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.core-values .core-values-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--spacing-xl);
  row-gap: var(--spacing-md);
  text-align: center;
  padding: 0;
}

.value-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--h4-size);
}

.value-title .icon {
  margin: 0 var(--spacing-md) 0 0;
  width: 65px;
  height: 65px;
}

.value-text {
  max-width: 80%;
  justify-self: center;
}

.navbar .hhr-collapse {
  padding-left: var(--spacing-md);
}

.hhr-hero {
  background-color: var(--teal);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hhr-hero .two-column {
  display: grid;
  grid-template-columns: 1fr 588px;
  column-gap: var(--spacing-md);
}

.hhr-hero .col {
  align-items: center;
}

.hhr-hero h1 {
  font-size: var(--h2-size);
}

.hhr-hero video {
  width: 588px;
}

.service-text ul {
  font-size: var(--p-size);
}

.service-text .h4size {
  font-size: var(--h4-size);
  line-height: var(--h5-height);
}

.team-hero {
  display: flex;
  justify-content: center;
}

.team-hero .two-column {
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: start;
}

.team-hero .col {
  margin: 0 var(--spacing-md);
  max-width: 50%;
}

.team-hero img {
  width: 100%;
}

.team-hero h1 {
  font-size: var(--h3-size);
}

.team-hero ul {
  margin: 0;
  font-size: var(--p-size);
}
.hhr-team {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hhr-team .supervisor-section {
  display: flex;
  flex-direction: row;
}
.supervisor-section .bio {
  margin: 0 var(--spacing-xl);
  font-size: var(--h6-size);
  line-height: var(--h5-height);
}
.hhr-team .team-section {
  grid-template-columns: 1fr 1fr;
}

nav .active {
  background-color: var(--teal);
  border-radius: var(--border-radius);
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: background-color 0.3s ease;
}

nav .active:hover {
  background-color: var(--mint);
}

nav .active a {
  color: black;
}

.why-refer-section {
  background-color: var(--aqua);
  width: 100%;
  display: flex;
  justify-content: center;
}


.why-refer-section .two-column {
  align-items: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-lg);
}

.why-refer-section .col {
  width: 100%;
  margin: 0;
  height: 100%;
  padding: var(--spacing-lg);
  background-color: white;
}

.when-to-refer-section h2 {
  margin: 0 0 var(--spacing-md) 0;
}
.when-to-refer-section .referral-reasons {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--spacing-xl);
  row-gap: var(--spacing-lg);
}

.when-to-refer-section .reason-title {
  font-size: var(--h4-size);
  line-height: var(--h5-height);
}

.how-to-refer-section {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.how-to-refer-section .section-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.how-to-refer-section ul {
  list-style: none;
  padding: 0;
}

.how-to-refer-section h3 {
  border-bottom: 2px solid var(--aqua);
  font-size: var(--h4-size);
}

.how-to-refer-section li p {
  padding: 0 var(--spacing-sm);
}

.trust-section {
  display: flex;
  justify-content: center;
  background-color: var(--teal);
}

.trust-section .section-container {
  flex-direction: column;
}

.trust-section .subtitle {
  color: black;
}

.service-list {
  display: flex;
  justify-content: center;
}

.service-list .section-container {
  flex-direction: column;
}

.service-list h3 {
  font-size: var(--h5-size);
  line-height: var(--h5-height);
}
.service-list ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-xl);
}

.service-list li p {
  margin: var(--spacing-sm) var(--spacing-md) var(--spacing-lg) var(--spacing-md);
}

.hoarding-hero {
  background-color: var(--teal);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hoarding-hero .two-column {
  display: grid;
  grid-template-columns: 1fr 588px;
  column-gap: var(--spacing-lg);
}

.hoarding-hero .col {
  align-items: center;
}

.hoarding-hero h1 {
  font-size: var(--h3-size);
  line-height: var(--h3-height);
  text-align: center;
  max-width: 600px;
  margin: 0 0 var(--spacing-sm) 0;
}

.hoarding-hero .hoarding-hero-text {
  font-size: calc(1.2 * var(--p-size));
  line-height: calc(1.2 * var(--p-height));
}

.hoarding-hero .subtitle {
  color: black;
  text-align: center;
}

.before-after-section {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.before-after-section .section-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.before-after-section .two-column {
  justify-content: space-around;
}

.before-after-section .img-col-left {
  width: 30%;

}

.before-after-section .img-col-right {
  width: 70%;
  box-sizing: border-box;
  padding: 0 0 0 var(--spacing-lg);
}

.before-after-section img {
  max-width: 460px;
  margin: var(--spacing-sm) 0;
  width: 100%;
}

.before-after-section ul {
  list-style: none;
  padding: 0;
}

.before-after-section h3 {
  border-bottom: 2px solid var(--aqua);
  font-size: var(--h4-size);
}

.before-after-section li p {
  padding: 0 var(--spacing-sm);
}

.before-after-section .approach-img-section .two-column {
  align-items: start;
}

.before-after-section .approach-img-section .img-col-left {
  width: 60%;
}

.before-after-section .approach-img-section .img-col-right {
  width: 40%;
}

.before-after-section .approach-img-section ul {
  list-style: circle;
}
.before-after-section .approach-img-section li {
  margin: 0 0 0 var(--spacing-lg);
}

.before-after-section .approach-img-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-md);
}

.hhr-difference-section {
  display: flex;
  justify-content: center;
  background-color: var(--teal);
}

.hhr-difference-section .section-container {
  flex-direction: column;
}

.hhr-difference-section h2 {
  margin: 0 0 var(--spacing-lg) 0;
}

.hhr-difference-section .two-column {
  align-items: start;
}

.hhr-difference-section .col-left-img {
  width: 70%;
  box-sizing: border-box;
  padding: 0 var(--spacing-lg) 0 0;
}

.hhr-difference-section .hhr-difference-description {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--h6-size);
  line-height: var(--h5-height);
}

.hhr-difference-section .col-right-img {
  width: 30%;
  box-sizing: border-box;
}

.hhr-difference-section img {
  width: 100%;
  max-width: 500px;
  margin: var(--spacing-sm) ;
}

.dme-hero {
  background-color: var(--teal);
  display: flex;
  align-items: start;
  justify-content: center;
}

.dme-hero h1 {
  font-size: var(--h2-size);
}

.dme-hero .dme-hero-text {
  font-size: calc(1.25 * var(--p-size));
  line-height: calc(1.25 * var(--p-height));
}

.dme-hero img {
  width: 100%;
}

.dme-hero .col-left-img {
  width: 60%;
  box-sizing: border-box;
  padding: 0 var(--spacing-lg) 0 0;
  text-align: center;

}

.dme-hero .col-right-img {
  width: 40%;
  box-sizing: border-box;
}

.dme-intro {
  display: flex;
  justify-content: center;
}

.dme-intro .section-container {
  flex-direction: column;
  padding: var(--spacing-xl) var(--spacing-lg) 0 var(--spacing-lg);
}

.accessibility-features-section {
  display: flex;
  justify-content: center;
}

.accessibility-features-section .section-container {
  flex-direction: column;
  padding-top: 0;
}

.accessibility-features-section h2 {
  border-bottom: 2px solid var(--aqua);
  margin: 0 0 var(--spacing-md) 0;
}

.accessibility-features-section img {
  width: 100%;
  margin: 0 0 var(--spacing-lg) 0;
}

.accessibility-features-section ul {
  list-style: none;
}

.accessibility-features-section ul h3 {
  font-size: var(--h5-size);
  color: var(--dark);
  margin: 0;
  padding: 0;
}

.accessibility-features-section li {
  margin: 0;
  padding: 0;
}

.accessibility-features-section li p {
  margin: 0 0 var(--spacing-sm) var(--spacing-sm);
}

.caps-section {
  display: flex;
  justify-content: center;
}

.caps-section h2 {
  border-bottom: 2px solid var(--aqua);
  margin: 0 0 var(--spacing-lg) 0;
  width: 100%;
}

.caps-section .section-container {
  flex-direction: column;
}

.caps-section .two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: var(--spacing-lg);
  align-items: start;
}

.caps-section img {
  width: 100%;
  min-width: 325px;

}

.faq-hero {
  background-color: var(--dark);
  color: white;
  display: flex;
  justify-content: center;
}

.faq-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.faq-section .two-column {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-lg);
  align-items: flex-start;
}

.faq-section img {
  width: 100%;
  max-width: 500px;
}

.faq-section .faq-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.faq-section .faq-img {
  margin: 0 0 var(--spacing-md) 0;
}

.faq-section .faq-item {
  width: 100%;
}

.faq-section .faq-button {
  background-color: var(--mint);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--p-size);
  width: 100%;
  outline: none;
  text-align: start;
  border: none;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.faq-section .faq-button:focus-visible {
  text-decoration: underline;
  color: var(--dark);
}

.faq-section .faq-button .faq-indicator::before {
  content: "";
  width: 1rem;
  height: 0.125rem;
  background-color: var(--dark);
  opacity: 1;
  position: absolute;
  display: block;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:  transform .5s;
}

.faq-section .faq-button .faq-indicator::after {
  content: "";
  width: 1rem;
  height: 0.125rem;
  background-color: var(--dark);
  opacity: 1;
  position: absolute;
  display: block;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transition:  transform .5s;
}
.faq-section .faq-item.active .faq-button .faq-indicator::before {
  transform: translate(-50%, 0) rotate(360deg);
} 

.faq-section .faq-item.active .faq-button .faq-indicator::after {
  transform: translate(-50%, 0) rotate(0deg);
} 

.faq-section .faq-button:hover {
  cursor: pointer;
  text-decoration: underline;
}

.faq-button .faq-button-text {
  padding: 0 var(--spacing-md) 0 0;
}

.faq-section .faq-item-p {
  height: 0;
  margin: 0;
  padding: 0 var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.3s, transform 0.3s, padding-bottom 0.3s;
  background-color: var(--mint);
}

.faq-section .faq-item.active .faq-item-p {
  height: auto;
  padding-top: var(--spacing-md);
  opacity: 1;
  transform: scaleY(1);
}


.faq-section .faq-item-p p {
  margin-top: 0;
}

.faq-section .faq-item-p ul {
  list-style: disc;
  font-size: var(--p-size-sm);
}

.request-quote-form {
  display: flex;
  justify-content: center;
}

.request-quote-form .section-container {
  flex-direction: column;
  padding: 0 var(--spacing-lg);
}

.request-quote-form h1 {
  font-size: var(--h2-size);
}

.request-quote-form h2 {
  font-size: var(--h3-size);
}

.request-quote-form .two-column {
  align-items: start;
}

.request-quote-form .col-left-img {
  width: 50%;
  padding: 0 var(--spacing-lg)  0 0;
}

.request-quote-form form label {
  display: block;
}

.request-quote-form form input {
  margin: 0 0 var(--spacing-md) 0;
  padding: var(--spacing-sm);
  width: 90%;
}

.request-quote-form form textarea {
  width: 92%;
  margin: 0 0 var(--spacing-md) 0;
}

.announcement {
  background-color: var(--green);
  padding: var(--spacing-lg);
  font-size: var(--h3-size);
}

@media only screen and (max-width: 1650px) {
  .divider-text {
    border-radius: 75px;
  }
  .section-container {
    padding: var(--spacing-xl);
  }
  .hhr-hero {
    text-align: center;
  }
  .hhr-hero .badge {
    text-align: center;
  }
  .hhr-hero .section-container {
    padding: var(--spacing-lg);
  }
}
@media only screen and (max-width: 1500px) {
  .section-container {
    padding: var(--spacing-lg);
  }
  .hhr-hero h1 {
    font-size: var(--h3-size);
  }
  .hhr-hero .badge {
    font-size: var(--h4-size);
  }
  .hhr-hero .moving-hero-text {
    font-size: var(--p-size);
    line-height: var(--p-height);
  }
  .team-hero h1 {
    font-size: var(--h4-size);
  }
  .team-hero p, .team-hero ul {
    font-size: var(--p-size-sm);
  }
  .hhr-difference-section h2 {
    font-size: var(--h3-size);
  }
  .hhr-difference-section .hhr-difference-description {
    font-size: var(--p-size);
    line-height: normal;
  }
  .hhr-difference-section h3 {
    font-size: var(--h4-size);
  }
  .dme-hero h1 {
    font-size: var(--h3-size);
  }
  .dme-intro h2 {
    font-size: var(--h3-size);
  }
  .who-we-help-section .section-container .service-title, .accessibility-features-section h2, .caps-section h2 {
    font-size: var(--h3-size);
  }
}
@media only screen and (max-width: 1350px) {
  .navbar img {
    height: 200px;
  }
  nav .active {
    padding: var(--spacing-xs);
  }
  h1 {
    font-size: var(--h2-size);
  }
  h2 {
    font-size: var(--h3-size);
  }
  .footer .section-container {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .hhr-team .supervisor-section {
    flex-direction: column;
  }
  
  .supervisor-section .bio {
    font-size: var(--p-size);
    line-height: var(--p-height);
    padding: var(--spacing-md);
  }
  .team-section {
    grid-template-columns: 1fr 1fr;
  }
  .core-values .section-container {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .hhr-hero .badge{
    font-size: var(--h5-size);
  }

  .hhr-hero .two-column {
    grid-template-columns: 1fr 500px;
  }

  .hhr-hero-text {
    width: 100%;
    font-size: var(--p-size);
    line-height: var(--p-height);
    text-align: start;
  }

  .hhr-hero video {
    width: 480px;
  }

  .hoarding-hero .two-column {
    grid-template-columns: 1fr 480px;
  }
  .hoarding-hero .two-column img {
    width: 100%;
  }
  

  .hoarding-hero h1 {
    font-size: var(--h4-size);
    line-height: var(--h4-height);
  }

  .hoarding-hero .badge {
    font-size: var(--h5-size);
  }

  .hoarding-hero .hoarding-hero-text {
    font-size: var(--p-size);
    line-height: var(--p-height);
  }

  .who-we-help-section .service-img {
    display: none;
  }

  .when-to-refer-section h2 {
    margin: var(--spacing-sm) 0;
  }

  .when-to-refer-section .reason-title {
    font-size: var(--h5-size);
  }

  .when-to-refer-section .referral-reasons {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-lg);
  }

  .how-to-refer-section .two-column {
    align-items: start;
  }

  .how-to-refer-section .img-col-left {
    width: 30%;
    padding: 0 var(--spacing-lg) 0 0;
  }

  .how-to-refer-section img {
    width: 100%;
  }

  .how-to-refer-section .img-col-right .subtitle:first-of-type {
    margin-top: 0;
  }
  
  .before-after-section .approach-img-section .img-col-left {
    width: 50%;
  }

  .before-after-section .approach-img-section .img-col-right {
    width: 50%;
  }

  .before-after-section .first-p {
    margin-top: 0;
  }

  .dme-hero h1 {
    font-size: var(--h4-size);
  }

  .dme-hero .dme-hero-text {
    font-size: var(--p-size);
    line-height:  var(--p-height);
  }
  
  .dme-intro h2 {
    font-size: var(--h4-size);
    padding: 0 0 var(--spacing-md) 0;
  }
  .who-we-help-section .section-container .service-title, .accessibility-features-section h2, .caps-section h2 {
    font-size: var(--h4-size);
  }
  .accessibility-features-section .two-column {
    display: grid;
    grid-template-columns: 500px 1fr;
    column-gap: var(--spacing-lg);
    align-items: start;
  }
  .accessibility-features-section .two-column .img-col-left, .accessibility-features-section .two-column .img-col-right {
    width: 100%;
  }
  .accessibility-features-section .two-column .img-col-right ul {
    padding: 0;
    margin: 0;
  }
  .request-quote-form h1 {
  font-size: var(--h3-size);
}

  .request-quote-form h2 {
    font-size: var(--h4-size);
  }

  .request-quote-form .col-left-img {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
  }

  .request-quote-form img {
    display: none;
  }

  .request-quote-form form input {
    width: 98%;
  }

  .request-quote-form form textarea {
    width: 100%;
  }

}
@media only screen and (max-width: 1150px) {
  p {
    font-size: var(--p-size-sm);
    line-height: var(--p-height-sm);
  }
  .navbar {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
  }
  .divider-text {
    font-size: var(--h4-size);
  }
  .footer .section-container {
    padding: var(--spacing-lg) var(--spacing-lg);
  }
  .footer .footer-logo {
    width: 150px;
  }
  .footer-cols {
    grid-template-columns: 160px minmax(265px, 1fr) 1fr 1fr;
  }
  .hhr-services .section-container .service-text {
    margin: 0 0 var(--spacing-md) var(--spacing-lg);
  }
  .moving-services .section-container {
    padding: var(--spacing-md);
  }
  .core-values .value-title .icon {
    width: 50px;
    height: 50px;
  }
  .value-title {
    font-size: var(--h5-size);
  }

  .hhr-hero .two-column {
    flex-direction: column;
  }

  .hhr-hero .two-column {
    grid-template-columns: 1fr;
  }

  .team-hero .two-column {
    flex-direction: column-reverse;
    align-items: center;
  }
  .team-hero .col {
    max-width: 80%;
  }
  
  .hhr-services .service-wrapper {
    margin: 0 0 var(--spacing-md) 0;
  }

  .hoarding-hero h1 {
    font-size: var(--h3-size);
    line-height: var(--h3-height);
  }

  .hoarding-hero .two-column {
    grid-template-columns: 1fr;
  }

  .hoarding-hero img {
    max-width: 500px;
  }
  .who-we-help-section .service-wrapper {
    margin: 0;
  }

  .who-we-help-section .section-container .service-text {
    margin: 0;
  }

  .why-refer-section h2 {
    font-size: var(--h4-size);
  }

  .before-after-section .two-column {
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: var(--spacing-lg);
  }
  .before-after-section .img-col-left, .before-after-section .img-col-right {
    width: 100%;
    padding: 0;
  }


  .before-after-section .approach-img-section .two-column{
    display: flex;
    flex-direction: column;  
    align-items: center;
  }
  .before-after-section .approach-img-section .img-col-left {
    width: 80%;
    margin: 0 0 var(--spacing-md) 0;
  }

  .before-after-section .approach-img-section .img-col-right {
    width: 100%;
  }
  .hhr-difference-section .col-left-img {
    width: 60%;
  }
  .hhr-difference-section .col-right-img {
    width: 40%;
  }

  .dme-hero h1 {
    font-size: var(--h3-size);
  }
  .dme-hero .two-column {
    flex-direction: column;
  }
  .dme-hero .col-left-img {
    padding: var(--spacing-md);
    width: 100%;
  }

  .dme-hero .col-right-img {
    width: 100%;
    max-width: 500px;
  }

  .accessibility-features-section .two-column {
    grid-template-columns: 1fr;
  }
  .accessibility-features-section .two-column .img-col-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-md);
  }
  .accessibility-features-section ul h3 {
    font-size: var(--h6-size);
  } 
  .faq-section .two-column {
    grid-template-columns: 1fr;
  }

  .faq-section .faq-img {
    display: none;
  }
}

@media only screen and (max-width: 992px) {
  .section-container {
    padding: var(--spacing-lg);
  }
  h1 {
    font-size: var(--h3-size);
  }
  h2 {
    font-size: var(--h4-size);
  }
  h3 {
    font-size: var(--h4-size);
  }
  h4 {
    font-size: var(--h5-size);
  }
  .navbar {
    justify-content: space-between;
  }
  .menu {
    display: none;
  }
  .collapse-logo {
    display: block;
  }
  .navbar .hamburger {
    display: inline-block;
    right: 55px;
    top: -27px;
    position: relative;
  }
  .navbar .openDrawer {
    display: inline-block;
    position: fixed;
    right: 62px;
    top: 60px;
    margin: 0;
    transform: translateX(0px);
  }
  .sub-menu {
    margin: 0 0 var(--spacing-md) 0;
  }
  .sub-menu ul {
    flex-direction: column;
    align-items: start;
    row-gap: var(--spacing-xs);
  }
  .name-tag {
    padding: var(--spacing-xs) var(--spacing-lg);
  }
  .credentials {
    font-size: 14px;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
  .footer .footer-logo {
    width: 200px;
  }
  .footer .contact-info {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .footer .col-footer-fb {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .hhr-services .service-wrapper {
    grid-template-areas: "title" "img" "text";
  }
  .hhr-services .service-img {
    max-width: 600px;
    justify-self: center;
  }
  #caps-logo{
    max-width: 300px;
  }
  .hhr-services .section-container .service-text {
    margin: var(--spacing-md) 0;
  }
  .hhr-services .subtitle-wrapper {
    column-gap: var(--spacing-md);
  }
  .hhr-services .subtitle-wrapper img {
    display: none;
  }
  .team-section {
    grid-template-columns: 1fr;
  }
  .core-values .core-values-list {
    grid-template-columns: 1fr 1fr;
  }

  .supervisor-section .bio {
    padding: var(--spacing-xs);
    margin: 0 var(--spacing-sm);
  }
  .hhr-team .team-section {
    grid-template-columns: 1fr;
  }
  .service-text .h4size {
    font-size: var(--h6-size);
    line-height: normal;
  }
  .name-tag {
    right: -20%;
  }
  .name {
    font-size: var(--h5-size);
  }

  .when-to-refer-section .referral-reasons {
    grid-template-columns: 1fr;
  }

  .how-to-refer-section .img-col-left {
    display: none;
  }

  .how-to-refer-section .img-col-right {
    width: 100%;
  }

  .service-list ul {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .before-after-section .two-column {
    grid-template-columns: 1fr;
  }

  .before-after-section .img-col-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-md);
  }
  
  .before-after-section .approach-img-section .img-col-left {
    width: 100%;
    display: flex;
  }

  .hhr-difference-section h2 {
    font-size: var(--h4-size);
  }
  .hhr-difference-section h3 {
    font-size: var(--h5-size);
    line-height: var(--h5-height);
  }
  .hhr-difference-section .two-column {
    flex-direction: column;
  }
  .hhr-difference-section .col-left-img {
    width: 100%;
  }
  .hhr-difference-section .col-right-img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-md);
    width: 100%;
  }

  .dme-intro h2 {
    font-size: var(--h5-size);
    padding: 0 0 var(--spacing-sm) 0;
  }
  .who-we-help-section .section-container .service-title, .accessibility-features-section h2, .caps-section h2 {
    font-size: var(--h5-size);
  }
  .caps-section .two-column {
    grid-template-columns: 1fr;
    justify-content: center;
    row-gap: var(--spacing-md);
  }

  .caps-section .col {
    align-items: center;
  }

  .request-quote-form h1 {
    font-size: var(--h4-size);
    text-align: center;
  }
  .request-quote-form h2 {
    font-size: var(--h5-size);
  }
}
@media only screen and (max-width: 768px) {
  h1 {
    font-size: var(--h4-size);
  }
  .hero-container {
    padding: var(--spacing-lg);
    box-sizing: border-box;
    height: auto;
  }
  .footer-cols {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-cols .col {
    margin: 0 0 0 var(--spacing-lg);
  }
  .footer .contact-info {
    order: 2;
  }
  .footer .col-footer-fb {
    margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
    order: 3;
  }
  .footer ul li {
    padding: var(--spacing-sm) 0 0 0;
  }
  .hhr-services .subtitle-wrapper {
    margin: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
  }
  .core-values .core-values-list {
    column-gap: var(--spacing-md);
  }

  .team-hero .col {
    max-width: 100%;
  }
  .hoarding-hero h1 {
    font-size: var(--h4-size);
    line-height: var(--h4-height);
  }

  .why-refer-section .two-column {
    grid-template-columns: 1fr;
  }
  .when-to-refer-section .referral-reasons {
    padding: 0;
  }
  .dme-hero h1 {
    font-size: var(--h4-size);
  }

  .request-quote-form h1 {
    font-size: var(--h5-size);
  }
  

}
@media only screen and (max-width: 600px) {
  h2 {
    text-align: center;
  }
  .col {
    align-items: center;
  }
  .two-column {
    flex-direction: column;
  }

  .divider-text {
    font-size: var(--h5-size);
  }

  .hhr-hero video {
    width: 380px;
  }

  .hhr-hero img {
    max-width: 90%;
  }

  #hhr-logo {
    width: 100%;
  }
  .subtitle {
    text-align: center;
    margin: var(--spacing-md) 0 0 0;
  }
  .footer .col {
    align-items: flex-start;
  }
  .moving-hero-text {
    width: 100%;
  }
  .core-values .core-values-list {
    grid-template-columns: 1fr;
  }
  .team-hero h1 {
    font-size: var(--h5-size);
  }
  .team-hero .col {
    align-items: start;
  }
  .when-to-refer-section .referral-reasons {
    row-gap: var(--spacing-sm);
  }
  .why-refer-section .subtitle {
    text-align: start;
  }
  .before-after-section .img-col-left {
    grid-template-columns: 1fr;
  }
  .before-after-section h3 {
    font-size: var(--h5-size);
    line-height: var(--h5-height);
  }
  .request-quote-form h1, .request-quote-form h2 {
    font-size: var(--h6-size);
  }
}
@media only screen and (max-width: 480px) {
  h2 {
    text-align: center;
  }
  .divider-text {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .portrait-wrapper {
    margin: 0;
  }
  .name-tag {
    position: static;
    margin: var(--spacing-sm) 0 0 0;
  }
  .secondary-button {
    font-size: calc(.95 * var(--button-size));
  }
  .subtitle {
    font-size: var(--p-size);
  }
  .hhr-services .service-wrapper {
    margin: 0 0 var(--spacing-md) 0;
  }
  .hhr-services .section-container .service-text .subtitle {
    text-align: start;
  }
  .navbar .hhr-collapse {
    padding-left: var(--spacing-xs);
  }
  .hhr-hero .section-container {
    padding: var(--spacing-md);
  }
  .hhr-hero h1 {
    font-size: var(--h4-size);
  }
  .hhr-hero .badge {
    font-size: var(--h5-size);
    line-height: var(--h5-height);
  }

  .hhr-hero video {
    width: 340px;
  }

  .service-text h4 {
    text-align: center;
  }
  .hoarding-hero h1 {
    font-size: var(--h5-size);
    line-height: var(--h5-height);
  }

  .hoarding-hero .badge {
    font-size: var(--h6-size);
  }

  .hoarding-hero .subtitle {
    font-size: var(--p-size);
    margin: 0 0 var(--spacing-md) 0;
    text-align: start;
  }

  .who-we-help-section .section-container .service-text .subtitle {
    text-align: start;
    line-height: var(--p-height);
    font-size: calc(.9 * var(--h6-size));
    padding: var(--spacing-xs) 0;
    margin: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--teal);
  }

  .why-refer-section .col {
    padding: 0 var(--spacing-lg);
  }

  .before-after-section .approach-img-section .subtitle {
    font-size: var(--p-size);
    line-height: var(--p-height);
    text-align: start;
  }
  .hhr-difference-section .col-right-img {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-md);
  }
  .hhr-difference-section img {
    margin: 0;
  }
  .accessibility-features-section .two-column .img-col-left {
    display: none;
  }
}
.animateBar1 {
  animation: flipBar1 0.5s forwards;
}

.animateBar3 {
  animation: flipBar3 0.5s forwards;
}

.animateBar2 {
  animation: fadeBar2 0.5s forwards;
}

@keyframes flipBar1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(45deg) translate(5px, 5px);
  }
}
@keyframes fadeBar2 {
  from {
    transform: scaleX(1);
    opacity: 1;
  }
  to {
    transform: scaleX(0);
    opacity: 0;
  }
}
@keyframes flipBar3 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}