/*#249e34; */
/* Border framing Booking Form */
/* onfocus boxshadow color*/
/*
  Link color chosen to meet usability contrast requirements of 4.5 to 1 using tool at
 https://dequeuniversity.com/rules/axe/4.4/color-contrast?utm_source=lighthouse&utm_medium=lr
 $link-color: #108910;
 */
/* @Mixins Section */
/* See file FluidTypography.scss  Provides a way to fluidly change font, padding and other
   sizing as screen size changes.  EX:
   sizing as screen size changes.  EX:
   html {
  @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}
*/
/*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.
   Focused on font-size, but may be used for margins and padding

   Usage:
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);
      font-size: clamped(26px, 36px);      //using width default values

*/
/* convenience mixin for bottom-only spacing */
/*
   From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
   Generates the css clamp function.
   Focused on font-size, but may be used for margins and padding

   Usage:
      clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
      font-size: clamped(26px, 36px, 600px, 1200px);
      font-size: clamped(26px, 36px);      //using width default values

*/
/* convenience mixin for bottom-only spacing */
.font-white {
  color: #FFFFFF;
}

.soft-teal {
  color: #357266;
}

.flex-justify {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media screen and (max-width: 800px) {
  .flex-justify {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}
.centered {
  margin-left: auto;
  margin-right: auto;
}

.left-align {
  text-align: left;
}

.margin-top-zero {
  margin-top: 0rem;
}

.margin-bottom-zero {
  margin-bottom: 0rem;
}

.padding-bottom-zero {
  padding-bottom: 0px;
}

/* accesability moves content offscreen to hide it, but still readable by screen readers*/
.a11y-hidden {
  position: absolute;
  left: -1000in;
  top: auto;
  height: 0px;
  width: 0px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
}

.highlight-block-container {
  margin: auto;
  max-width: 78.125rem;
  background-color: #0C434A;
  padding-top: clamp(2.5rem, 2.67vw + 1.67rem, 4rem);
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  margin-bottom: clamp(2.5rem, 2.67vw + 1.67rem, 4rem);
}

.background-highlight-block {
  background-color: #21752c;
}

.highlight-block {
  font-style: italic;
  color: #F6F3EE;
}

a.highlight-block {
  color: rgb(192, 228, 188);
}

.highlight-block h2 {
  color: rgb(192, 228, 188);
  font-style: normal;
}

.highlight-block a:hover,
.highlight-block a:focus {
  color: #86f698;
}

.testimonial-name {
  padding-left: 1.5625rem;
  margin-top: -0.625rem;
  font-weight: 500;
  font-style: italic;
}

@media only screen and (max-width: 750px) {
  .highlight-block-container {
    max-width: 100%;
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
}

/*# sourceMappingURL=highlight-block.css.map */