:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #653D1B;
    --secondary: #E2C6AD;
    --headerColor: black;
    --bodyTextColor: #141414;
    --bodyTextColorWhite: white;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;

    --merriweather: "Merriweather", serif;
    --opensans: "Open Sans", sans-serif;
}

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

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

/* My Own Styles */

h1, h2, h3 {
  font-family: var(--merriweather);
}
            
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-1763 {
    padding: var(--sectionPadding);
    padding-bottom: clamp(1.875rem, 5vw, 3.125rem);
    /* change this to match the color of the section above the footer */
    background-color: #f7f7f7;
    overflow: hidden;
    /* 30px - 50px */
    position: relative;
    z-index: 1;
  }
  #cs-footer-1763 .cs-card-group {
    /* reset on tablet */
    max-width: 34.375rem;
    margin: auto;
    /* 60px - 100px*/
    padding: 0 0 clamp(3.75rem, 7vw, 6.25rem) 0;
    display: grid;
    /* 20px - 58px */
    gap: clamp(1.25rem, 4vw, 3.625rem);
  }
  #cs-footer-1763 .cs-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 16px - 24px */
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  #cs-footer-1763 .cs-picture {
    display: block;
    margin-right: 20px;
  }
  #cs-footer-1763 .cs-icon {
    width: 3rem;
    height: auto;
    display: block;
  }
  #cs-footer-1763 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
  }
  #cs-footer-1763 .cs-card-info {
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
    width: 100%;
  }
  #cs-footer-1763 .cs-container {
    width: 100%;
    /* reset on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    /* 32px - 48px */
    gap: clamp(2rem, 7vw, 3rem);
  }
  #cs-footer-1763 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-1763 .cs-logo {
    width: 13.125rem;
    height: auto;
    margin: 0 0 1rem 0;
    display: block;
  }
  #cs-footer-1763 .cs-text {
    max-width: 44rem;
    /* 24px - 40px */
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
    opacity: 0.8;
  }
  #cs-footer-1763 .cs-logo-img {
    width: 100%;
    height: auto;
  }
  #cs-footer-1763 .cs-contact {
    display: grid;
    gap: 2rem;
  }
  #cs-footer-1763 .cs-topper {
    color: var(--secondary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
  #cs-footer-1763 .cs-contact-link {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    text-decoration: none;
    color: var(--headerColor);
  }
  #cs-footer-1763 .cs-header {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.5em;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 4vw, 1.5rem) 0;
    color: var(--headerColor);
    display: block;
    position: relative;
  }
  #cs-footer-1763 .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  #cs-footer-1763 .cs-li {
    list-style: none;
  }
  #cs-footer-1763 .cs-link {
    font-size: 1.3rem;
    line-height: 1.5em;
    text-align: left;
    text-decoration: none;
    color: var(--bodyTextColor);
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: color 0.3s;
  }
  #cs-footer-1763 .cs-link:hover {
    color: var(--primary);
  }
  #cs-footer-1763 .cs-bottom {
    width: 100%;
    max-width: 80rem;
    /* 60px - 80px */
    margin: clamp(3.75rem, 7vw, 5rem) auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-border-10, #e8e8e8);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  #cs-footer-1763 .cs-credit,
  #cs-footer-1763 .cs-bottom-link,
  #cs-footer-1763 .cs-credit-link {
    font-size: 1.2rem;
    line-height: 1.5em;
    text-decoration: none;
    color: var(--bodyTextColor);
  }
  #cs-footer-1763 .cs-credit {
    width: 100%;
  }
  #cs-footer-1763 .cs-credit-link {
    font-size: 1.2rem;
    line-height: 1.5em;
    text-decoration: none;
    width: auto;
    margin: 0;
    display: inline-block;
    position: relative;
  }
  #cs-footer-1763 .cs-credit-link:hover {
    color: var(--primary);
  }
  #cs-footer-1763 .cs-bottom-links {
    width: 100%;
    display: flex;
  }
  #cs-footer-1763 .cs-bottom-link {
    display: flex;
    align-items: center;
  }
  #cs-footer-1763 .cs-bottom-link:hover {
    color: var(--primary);
  }
  #cs-footer-1763 .cs-bottom-link:last-of-type:before {
    /* separator */
    content: "";
    width: 1px;
    height: 0.875rem;
    margin: 0 0.75rem;
    background: currentColor;
    opacity: 1;
    display: block;
  }
  #cs-footer-1763 .cs-graphic {
    width: 100%;
    min-width: 120rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 9rem;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #cs-footer-1763 .cs-light {
    display: block;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #cs-footer-1763 .cs-card-group {
    max-width: 80rem;
  }
  #cs-footer-1763 .cs-container {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    max-width: 80rem;
    grid-template-columns: repeat(12, 1fr);
  }
  #cs-footer-1763 .cs-logo-group {
    grid-column: span 12;
  }
  #cs-footer-1763 .cs-ul-wrapper {
    grid-column: span 4;
  }
  #cs-footer-1763 .cs-contact {
    grid-template-columns: repeat(12, 1fr);
    grid-column: span 12;
  }
  #cs-footer-1763 .cs-table {
    grid-column: span 12;
  }
  #cs-footer-1763 .cs-bottom {
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  #cs-footer-1763 .cs-credit {
    text-align: left;
  }
  #cs-footer-1763 .cs-bottom-links {
    justify-content: flex-end;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-1763 .cs-flex{
    width: 360px;
  }
  #cs-footer-1763 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #cs-footer-1763 .cs-card {
    width: 400px;
    grid-column: span 4;
  }
  #cs-footer-1763 .cs-logo-group {
    grid-column: span 4;
  }
  #cs-footer-1763 .cs-ul-wrapper {
    grid-column: span 2;
  }
  #cs-footer-1763 .cs-contact {
    display: flex;
    flex-direction: column;
    grid-column: span 4;
  }
}
                                  
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

  /* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 100%;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100px;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover,
  #cs-navigation .cs-dropdown:focus-within {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul,
  #cs-navigation .cs-dropdown:focus-within .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li,
  #cs-navigation .cs-dropdown:focus-within .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    visibility: hidden;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    z-index: -100;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    font-size: 1.2rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    color: var(--bodyTextColor);
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1.2rem;
    line-height: 1.5em;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover,
  #cs-navigation .cs-li-link.cs-drop-link:focus {
    background-color: #f7f7f7;
    outline: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }

  #cs-navigation .cs-li {
    
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(1rem, 1vw, 1.3rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1.2rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}

/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1856 {
    /* 200px - 300px - leaving extra space for the navigation */
    padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
  }
  #hero-1856 .cs-content {
    text-align: left;
    width: 100%;
    max-width: 46.875rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 1;
  }
  #hero-1856 .cs-title {
    /* 49px - 84px */
    font-size: clamp(3.0625rem, 6vw, 5.25rem);
    max-width: 100%;
    letter-spacing: -2px;
  }
  #hero-1856 .cs-title,
  #hero-1856 .cs-text {
    text-align: left;
    color: var(--bodyTextColorWhite);
  }
  #hero-1856 .cs-text {
    margin-bottom: 2rem;
  }
  #hero-1856 .cs-button-solid {
    font-size: 1.5rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1856 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1856 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1856 .cs-content-graphic {
    height: 305%;
    max-height: 81.25rem;
    filter: brightness(60%);
    width: auto;
    position: absolute;
    top: 50%;
    right: -4rem;
    left: auto;
    z-index: -1;
    transform: translateY(-50%);
    z-index: -3;
  }
  #hero-1856 .cs-graphic {
    width: 100%;
    min-width: 120rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }
  #hero-1856 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    /* Overlay on the background image that gets removed at tablet+, in favour of the svg graphic */
  }
  #hero-1856 .cs-background:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1856 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1856 .cs-background::before {
    content: none;
  }
}
/* Desktop Parallax - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1856 .cs-background {
    background: url("images/Hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1856 .cs-background img {
    display: none;
  }
}
/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #hero-1856 {
    /* this ties the padding bottom value to the size of the screen width. The wider the image gets the taller it gets, meaning it will get closer and closer to the content. This makes the padding bottom value grow with the screen size so it accounts for the growing height of the svg graphic getting taller */
    padding-bottom: 14vw;
  }
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1446 {
      padding: var(--sectionPadding);
  }
  #gallery-1446 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
  }
  #gallery-1446 .cs-content {
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1.5rem;
  }
  #gallery-1446 .cs-title {
      margin: 0;
  }
  #gallery-1446 .cs-gallery {
      width: 100%;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(19.0625rem, 1fr));
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
      position: relative;
  }
  #gallery-1446 .cs-image {
      /* 260px - 360px */
      min-height: clamp(16.25rem, 60vw, 20rem);
      border-radius: 1rem;
      /* clips the image corners */
      overflow: hidden;
      display: block;
      position: relative;
  }
  #gallery-1446 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it act like a background image */
      object-fit: cover;
  }
}


/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1192 {
      margin-top: 1.875rem;
      padding: var(--sectionPadding);
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
      position: relative;
      z-index: 1;
  }
  #cta-1192:before {
      /* yellow shape */
      content: "";
      width: 5rem;
      /* 64px - 284px */
      height: clamp(4rem, 10vw, 5rem);
      background: var(--secondary);
      opacity: 1;
      position: absolute;
      display: block;
      top: 1.25rem;
      left: 0;
      z-index: 2;
      transform: skew(-17deg);
  }
  #cta-1192:after {
      /* covers the rest of the :before shape on the left */
      content: "";
      width: 6.25rem;
      /* 64px - 284px */
      height: clamp(4rem, 10vw, 5rem);
      background: var(--secondary);
      opacity: 1;
      position: absolute;
      display: block;
      top: 1.875rem;
      left: 0;
      z-index: 1;
  }
  #cta-1192 .cs-container {
      width: 100%;
      background-color: #000;
      /* 96px - 120px */
      padding-top: clamp(6rem, 20vw, 7.5rem);
      /* 100px - 240px */
      padding-bottom: clamp(6.25rem, 25vw, 15rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
      z-index: 2;
  }
  #cta-1192 .cs-content {
      margin-left: 110px;
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #cta-1192 .cs-title {
      max-width: 17ch;
      /* 28px - 40px */
      margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
      color: var(--bodyTextColorWhite);
  }
  #cta-1192 .cs-button-solid {
      font-size: 1.5rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 2rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #cta-1192 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }
  #cta-1192 .cs-button-solid:hover:before {
      width: 100%;
  }
  #cta-1192 .cs-image {
      width: 100%;
      /* changes to 779px at large desktop */
      max-width: 25.9375rem;
      max-height: 30.125rem;
      height: auto;
      display: block;
      position: relative;
      z-index: 10;
  }
  #cta-1192 .cs-image img {
      width: 100%;
      height: auto;
      object-fit: contain;
  }
  #cta-1192 .cs-graphic-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #1a1a1a;
      display: block;
      position: absolute;
      /* same as --secitonPadding variable */
      top: clamp(3.75rem, 7.82vw, 6.25rem);
      left: 0;
      z-index: 1;
  }
  #cta-1192 .cs-graphic {
      width: 140vw;
      height: auto;
      position: absolute;
      bottom: 10%;
      left: 50%;
      z-index: -1;
      transform: translateX(-60%) rotate(-10deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-1192 {
      overflow: visible;
  }
  #cta-1192 .cs-container {
      flex-direction: row;
      overflow: hidden;
  }
  #cta-1192 .cs-content {
      text-align: left;
      width: 50%;
      max-width: 31.25rem;
      align-items: flex-start;
  }
  #cta-1192 .cs-image {
      flex: none;
      position: absolute;
      top: 5rem;
      right: 0;
  }
  #cta-1192 .cs-graphic {
      width: 90vw;
      max-width: 91.375rem;
      margin-left: -15.625rem;
      left: 50%;
      transform: rotate(-10deg);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-1192 {
      overflow: hidden;
  }
  #cta-1192 .cs-container {
      overflow: visible;
  }
  #cta-1192 .cs-image {
      width: 48vw;
      max-width: 48.6875rem;
  }
  #cta-1192 .cs-graphic {
      width: 80vw;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #cta-1192 {
      overflow: hidden;
  }
  #cta-1192:before {
      height: 17.6875rem;
      width: 50vw;
      margin-right: 30.625rem;
      right: 50%;
      left: auto;
  }
  #cta-1192:after {
      height: 17.6875rem;
      width: 10vw;
  }
  #cta-1192 .cs-container {
      padding-left: 13.5625rem;
      padding-right: 0;
  }
  #cta-1192 .cs-image {
      margin-left: clamp(2rem, 4.5vw, 5rem);
      left: 50%;
      right: auto;
  }
}

/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1192 {
      padding: var(--sectionPadding);
      padding-top: 0;
  }
  #reviews-1192 .cs-container {
      width: 100%;
      /* changed to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
  }
  #reviews-1192 .cs-picture {
      width: 100%;
      max-width: 46.125rem;
      /* 296px - 493px */
      height: clamp(18.5rem, 37vw, 30.8125rem);
      /* -75px to -120px, makes it overlap the CTA section above, changes at tablet */
      margin-top: calc(clamp(4.6875rem, 13vw, 7.5rem) * -1);
      display: block;
      position: relative;
      z-index: 10;
  }
  #reviews-1192 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #reviews-1192 .cs-review-group {
      width: 90%;
      max-width: 39.375rem;
      /* makes it overlap the image, removed at tablet */
      margin-top: -2.625rem;
      /* 24px - 80px */
      padding: clamp(1.5rem, 5.5vw, 5rem);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      position: relative;
      z-index: 10;
  }
  #reviews-1192 .cs-icon {
      /* 48px - 97px */
      width: clamp(3rem, 7vw, 6rem);
      height: auto;
      display: block;
  }
  #reviews-1192 .cs-review-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1.3rem);
      line-height: 1.5em;
      text-align: center;
      margin: 0;
      color: var(--bodyTextColor);
  }
  #reviews-1192 .cs-info {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.75rem;
  }
  #reviews-1192 .cs-profile {
      width: 3.75rem;
      height: auto;
      border-radius: 50%;
      border: 4px solid #fff;
      background-color: #fff;
  }
  #reviews-1192 .cs-name {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.75rem);
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
      display: block;
  }
  #reviews-1192 .cs-desc {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1.3rem);
      line-height: 1.5em;
      text-align: center;
      margin: 0;
      color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-1192 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: flex-end;
  }
  #reviews-1192 .cs-picture {
      /* changes at desktop */
      width: 47%;
      margin: 0;
      position: absolute;
      top: calc(clamp(4.6875rem, 13vw, 7.5rem) * -1);
      left: 0;
  }
  #reviews-1192 .cs-review-group {
      width: 57%;
      margin: 0;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-1192 .cs-picture {
      width: 55%;
  }
}

/* Text To Speech Styles */
@media only screen and (min-width: 64rem) {
  ::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
  }

  #tts-settings .tts-container {
    display: flex;
    flex-direction: column;
    font-family: var(--merriweather);
  }

  #tts-settings .tts-range-input {
    width: 320px;
  }

  #tts-settings #tts-voices {
    border: 0;
    height: 21px;
    font-size: larger;
  }

  #tts-settings .tts-voice-box {
    margin-bottom: 24px;
  }

  #tts-settings .tts-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}