@font-face {
  font-family: 'Playfair Display SC Regular';
  src: url(/fonts/PlayfairDisplaySC-Regular.ttf);
}
@font-face {
  font-family: 'Playfair Display SC Bold';
  src: url(/fonts/PlayfairDisplaySC-Bold.ttf);
}
@font-face {
  font-family: 'Lato Regular';
  src: url(/fonts/Lato-Regular.ttf);
}
@font-face {
  font-family: 'Lato Bold';
  src: url(/fonts/Lato-Bold.ttf);
}

: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: #CBA135;
    --primaryLight: #ffba43;
    --secondary: #4D0013;
    --secondaryLight: #ffba43;
    --white: #ffffff;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --bodyFont: 'Lato Regular', Arial, sans-serif;
    --headerFont: 'Playfair Display SC Regular', Georgia, serif;
    /* 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;
}

body {
    margin: 0;
    padding: 0;
}

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

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

.title span {
    color: var(--primary);
}

.text {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}
.button-solid, .button-transparent{
  font-family: var(--bodyFont);
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.open {
    overflow: hidden;
  }
  body.scroll #navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #navigation:before {
    border-radius: 0;
  }
  body.scroll #navigation .ul-wrapper {
    top: 100%;
  }
  #navigation {
    width: 94%;
    max-width: 80rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #navigation:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    /* 12px - 24px */
    /* border-radius: clamp(0.75rem, 2vw, 1.5rem); */
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #navigation.active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #navigation.active .toggle {
    transform: rotate(180deg);
  }
  #navigation.active .ul-wrapper {
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #navigation.active .li {
    opacity: 1;
    transform: translateY(0);
  }
  #navigation .container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #navigation .logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 10;
  }
  #navigation .logo img {
    width: 100%;
    height: 4rem;
    /* 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;
  }
  #navigation .toggle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: #1a1a1a;
    border: none;
    /* border-radius: 0.25rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #navigation .nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #navigation .contact-group {
    display: none;
    position: relative;
    z-index: 10;
  }
  #navigation .phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #navigation .phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #navigation .social {
    display: none;
  }
  #navigation .active .line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #navigation .active .line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #navigation .active .line3 {
    opacity: 0;
    bottom: 100%;
  }
  #navigation .box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    height: 1rem;
    position: relative;
  }
  #navigation .line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #navigation .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;
  }
  #navigation .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;
  }
  #navigation .line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #navigation .ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: #fff;
    /* border-radius: 0 0 1.5rem 1.5rem; */
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #navigation .ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #navigation .li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #navigation .li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #navigation .li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #navigation .li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #navigation .li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #navigation .li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #navigation .li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #navigation .li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #navigation .li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #navigation .li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #navigation .li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #navigation .li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #navigation .li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #navigation .li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #navigation .li-link {
    /* 16px - 24px */
    font-family: var(--bodyFont);
    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;
  }
  #navigation .li-link.active {
    color: var(--primary);
  }
  #navigation .li-link:hover {
    color: var(--primary);
  }
  #navigation .button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #navigation .contact-group {
    display: block;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #navigation .li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #navigation .dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #navigation .dropdown.active .drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #navigation .dropdown.active .drop-link {
    opacity: 1;
  }
  #navigation .dropdown .li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #navigation .drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #navigation .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;
  }
  #navigation .drop-li {
    list-style: none;
  }
  #navigation .li-link.drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #navigation .dropdown {
    position: relative;
  }
  #navigation .dropdown:hover {
    cursor: pointer;
  }
  #navigation .dropdown:hover .drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #navigation .dropdown:hover .drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #navigation .drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #navigation .drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    border-radius: 0 0 1.5rem 1.5rem;
    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 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;
  }
  #navigation .drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #navigation .drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #navigation .drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #navigation .drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #navigation .drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #navigation .drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #navigation .drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #navigation .drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #navigation .drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #navigation .drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #navigation .li-link.drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--headerColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #navigation .li-link.drop-link:hover {
    color: var(--bodyTextColorWhite);
    background-color: var(--primary);
  }
  #navigation .li-link.drop-link:before {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
    background-color: #ffffff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  body.scroll #navigation .li-link,
  body.scroll #navigation .li a,
  body.scroll #navigation .phone {
    color: #1a1a1a;
  }
  #navigation {
    font-family: var(--bodyFont);
    width: 94%;
    max-width: 90rem;
    height: 6rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: rgba(149, 157, 165, 0);
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    /* 12px - 24px */
    /* border-radius: clamp(0.75rem, 2vw, 1.5rem); */
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #navigation .container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #navigation .toggle {
    display: none;
  }
  #navigation .logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 2rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #navigation .logo img {
    width: auto;
    height: 5rem;
    /* 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;
  }
  #navigation .li a,
  #navigation .li .li-link{
    color: var(--bodyTextColorWhite);
  }
  #navigation .contact-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }
  #navigation .phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #navigation .phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #navigation .social {
    height: 2rem;
    opacity: 1;
    display: none;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #navigation .social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #navigation .social-link:hover {
    background-color: var(--primary);
  }
  #navigation .social-link:hover .social-icon {
    opacity: 1;
    filter: grayscale(1) brightness(10000%);
  }
  #navigation .social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
    transition: opacity 0.3s;
  }
  #navigation .ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #navigation .ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #navigation .li {
    list-style: none;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #navigation .li-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #navigation .li-link:hover {
    color: var(--primary);
  }
  #navigation .li-link.active {
    color: var(--primary);
  }
  #navigation .button-solid {
    font-size: 1rem;
    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 2rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #navigation .button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #navigation .button-solid:hover {
    color: var(--primary);
  }
  #navigation .button-solid:hover:before {
    width: 100%;
  }
  body.not-home #navigation {
  background-color: #ffffff;
  }

  body.not-home #navigation .li-link,
  body.not-home #navigation .li a,
  body.not-home #navigation .phone {
    color: #1a1a1a;
  }

body.not-home #navigation .li-link.active {
  color: var(--primary);
}
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #navigation .social {
    display: flex;
  }
}
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-229 {
    /* changes on tablet */
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    /* prevents overflow from the lines extending past the screen width */
    overflow: hidden;
  }
  #hero-229 .picture {
    /* Background Image */
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-229 .picture:before {
    /* Black Color Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-229 .picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes image act like a background-image */
    object-fit: cover;
  }
  #hero-229 .container {
    width: 100%;
    max-width: 80rem;
    /* we put the padding top and bottom on the container instead of #Hero so the pseudo element lines go to the top and bottom of the section */
    /* 144px - 280px - leaving extra space for the navigation */
    /* changes on tablet */
    padding: clamp(9rem, 25.95vw, 17.5rem) 0;
    margin: auto;
    position: relative;
  }
  #hero-229 .flex-group {
    /* 60px - 220px */
    margin-bottom: clamp(3.75rem, 15.5vw, 13.75rem);
    margin: auto;
    width: 80vw;
    /* 464px - 562px */
    max-width: clamp(29rem, 60vw, 45.125rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    box-sizing: border-box;
  }
  #hero-229 .topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: 700;
    color: var(--primaryLight);
    margin-bottom: 1rem;
    display: block;
  }
  #hero-229 .title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    /* font-weight: 900; */
    line-height: 1.2em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #hero-229 .title::after {
    content: '';
    display: block;
    width: 20rem; /* Adjust length as needed */
    height: 1px; /* Adjust thickness */
    background-color: var(--bodyTextColorWhite); /* Same as your white text */
    margin: 1rem auto 0 auto; /* Centers the line & adds top spacing */
}
  #hero-229 .text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 32px - 40px */
    margin: 0 auto clamp(2rem, 4vw, 2.5rem) 0;
    /* 40px - 48px */
    margin-bottom: clamp(2.5rem, 4vw, 3rem);
    color: var(--bodyTextColorWhite);
  }
  #hero-229 .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-229 .button {
    min-width: 12.3125rem;
  }
  #hero-229 .button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 3rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #fff;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-229 .button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-229 .button-solid:hover {
    color: #fff;
  }
  #hero-229 .button-solid:hover:before {
    width: 100%;
  }
  #hero-229 .button-transparent,
  #services-502 .button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    /* 46px - 56px */
    height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--bodyTextColorWhite);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-229 .button-transparent:before,
  #services-502 .button-transparent:before {
    content: '';
    position: absolute;
    display: block;
    background: var(--primary);
    opacity: 1;
    /* so it sits on top of the border */
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
    transform-origin: left;
    /* this is what creates the grow affect on hover */
    transform: scaleX(0);
    transition: transform 0.3s;
  }
  #hero-229 .button-transparent:hover:before,
  #services-502 .button-transparent:hover:before {
    transform: scaleX(1);
  }
  #hero-229 .button-transparent .img,
  #services-502 .button-transparent .img {
    display: block;
    margin-right: 0.75rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-229 {
    /* 32px - 40px */
    padding: 0 clamp(2rem, 5vw, 2.5rem);
  }
  #hero-229 .button-group {
    flex-direction: row;
  }
}
/* Desktop Parallax Effect - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-229 {
    background: url("/img/hero.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates parallax effect on background image */
    background-attachment: fixed;
    /* remove img tag so we can make parallax work */
  }
  #hero-229 .picture img {
    display: none;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #cta-51 {
        padding: var(--sectionPadding);
        position: relative;
        background-color: var(--white);
    }
    #cta-51 .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-51 .content {
        /* 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-51 .title {
        color: var(--headerColor);
    }
    #cta-51 .content::after {
        content: "";
        display: block;
        width: 80%;
        max-width: 30rem;
        height: 1px;
        background-color: #d3d3d3;
        margin: 2rem auto 0 auto;
    }
    #cta-51 .text {
        margin-bottom: 1rem;
        color: var(--bodyTextColor);
        opacity: 0.8;
    }
    #cta-51 .text:last-of-type {
        margin-bottom: 2rem;
    }
    #cta-51 .button-solid {
        font-size: 1rem;
        /* 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 1.5rem;
        background-color: var(--primary);
        /* border-radius: 0.25rem; */
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #cta-51 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
    #cta-51 .button-solid:hover:before {
        width: 100%;
    }
    #cta-51 .picture {
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #cta-51 .picture:before {
        /* black color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0.8;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #cta-51 .picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/*-- -------------------------- -->
<---          Meet Nick         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RTsbs-459,
    #RTsbsr-459,
    #RTsbst-459 {
        padding: var(--sectionPadding);
    }
    #RTsbs-459 .container,
    #RTsbsr-459 .container,
    #RTsbst-459 .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
    }
    #RTsbs-459 .content,
    #RTsbsr-459 .content,
    #RTsbst-459 .content {
        text-align: left;
        width: auto;
        max-width: 40.625rem;
        margin: 0 1rem;
        margin-top: -18.75rem;
        /* 40px - 60px top and bottom */
        /* 20px - 60px left and right */
        padding: clamp(2.5rem, 7vw, 3.75rem) clamp(1.25rem, 5.5vw, 3.75rem);
        background-color: #fafbfc;
        /* prevents padding from affecting width and height */
        box-sizing: border-box;
        /* border-radius: 0.75rem; */
        /* clips the pseudo element */
        overflow: hidden;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
        position: relative;
        z-index: 10;
    }
    #RTsbs-459 .content:before,
    #RTsbsr-459 .content:before,
    #RTsbst-459 .content:before {
        /* green border top */
        content: "";
        width: 100%;
        height: 0.5rem;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }

    #RTsbs-459 .text,
    #RTsbsr-459 .text,
    #RTsbst-459 .text {
        margin-bottom: 1rem;
    }
    #RTsbs-459 .text:last-of-type,
    #RTsbsr-459 .text:last-of-type,
    #RTsbst-459 .text:last-of-type {
        margin-bottom: 2rem;
    }
    #RTsbs-459 .button-solid,
    #RTsbsr-459 .button-solid,
    #RTsbst-459 .button-solid {
        font-size: 1rem;
        /* 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 1.5rem;
        background-color: var(--primary);
        /* border-radius: 0.25rem; */
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #RTsbs-459 .button-solid:before,
    #RTsbsr-459 .button-solid:before,
    #RTsbst-459 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
    #RTsbs-459 .button-solid:hover:before,
    #RTsbsr-459 .button-solid:hover:before,
    #RTsbst-459 .button-solid:hover:before {
        width: 100%;
    }
    #RTsbs-459 .picture,
    #RTsbsr-459 .picture,
    #RTsbst-459 .picture {
        width: 100%;
        height: auto;
        height: 27.6875rem;
        /* clips the img corners */
        overflow: hidden;
        /* border-radius: 1.5rem; */
        display: block;
        /* sends it to the top */
        order: -1;
        position: relative;
    }
    #RTsbs-459 .picture img,
    #RTsbsr-459 .picture img,
    #RTsbst-459 .picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RTsbs-459 .container,
    #RTsbsr-459 .container,
    #RTsbst-459 .container {
        padding: 3.75rem 0;
        position: relative;
        align-items: flex-end;
        justify-content: center;
    }
    #RTsbs-459 .content,
    #RTsbsr-459 .content,
    #RTsbst-459 .content {
        width: 65%;
        margin: 0;
    }
    #RTsbs-459 .picture,
    #RTsbsr-459 .picture,
    #RTsbst-459 .picture {
        /* 465px - 617px */
        width: clamp(29.0625rem, 53vw, 38.5625rem);
        position: absolute;
        left: 0;
        height: 100%;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #RTsbs-459 .content,
    #RTsbsr-459 .content,
    #RTsbst-459 .content {
        /* 90px - 108px */
        margin-right: clamp(5rem, 8.5vw, 6.75rem);
    }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RTsbsr-459 {
        background-color: var(--secondary);
    }
    #RTsbsr-459.about-section {
        background-color: var(--white);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #RTsbsr-459 .container {
        align-items: flex-start;
    }
    #RTsbsr-459 .picture {
        left: auto;
        right: 0;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #RTsbsr-459 .content {
        margin-right: 0;
        /* 90px - 108px */
        margin-left: clamp(5rem, 8.5vw, 6.75rem);
    }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-502 {
        margin: var(--sectionPadding);
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        /* prevents overflow from the slant shape */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #services-502:before {
        /* section background */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #services-502 .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        /* 60px - 80px top and bottom */
        padding: clamp(3.75em, 6.82vw, 5em) 0;
        /* maintains proportional margin top as screen size grows */
        margin-top: 56vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 40px - 70px */
        gap: clamp(2.5rem, 5.7vw, 4.375rem);
        position: relative;
        /* places it on top of the background */
        z-index: 10;
    }
    #services-502 .container:before {
        /* section slant on mobile */
        content: "";
        width: 62.5rem;
        height: 125rem;
        background: var(--headerColor);
        opacity: 1;
        position: absolute;
        z-index: -1;
        display: block;
        top: -28.75rem;
        /* these last two center it horizontally and rotate -65deg */
        left: 50%;
        transform: translateX(-50%) rotate(-65deg);
    }
    #services-502 .background {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #services-502 .background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #services-502 .content {
        width: 100%;
    }

    #services-502 .topper {
        color: var(--bodyTextColorWhite);
    }
    #services-502 .title {
        /* changes to 45% at tablet */
        width: 95%;
        max-width: 32.125rem;
        color: var(--bodyTextColorWhite);
    }
    #services-502 .card-group {
        font-family: var(--bodyFont);
        width: 100%;
        max-width: 35.25rem;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 20px - 32px */
        gap: clamp(1.25rem, 3vw, 2rem);
    }
    #services-502 .item {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 32px - 64px */
        gap: clamp(2rem, 5vw, 4rem);
    }
    #services-502 .icon {
        width: 3.75rem;
        height: auto;
        display: block;
    }
    #services-502 .h3 {
        /* 25px - 31px */
        font-size: clamp(1.5625rem, 3vw, 1.9375rem);
        line-height: 1.2em;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 1.25rem 0;
        color: var(--bodyTextColorWhite);
    }
    #services-502 .item-text {
        /* 16px - 20px */
        font-family: var(--bodyFont);
        font-size: clamp(1rem, 1rem, 1.25rem);
        line-height: 1.5em;
        text-align: left;
        margin: 0;
        color: var(--bodyTextColorWhite);
        max-width: 30rem;
    }
    #services-502 .button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #000;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--secondary);
        /* border-radius: 0.25rem; */
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #services-502 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #fff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
    #services-502 .button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-502:before {
        /* remove the pseudo for the section background */
        display: none;
    }
    #services-502 .background {
        /* reset height to let top and bottom properties create the height */
        height: auto;
        aspect-ratio: initial;
        position: absolute;
        /* creates the gap between the image and the blue section */
        top: 3.75rem;
        bottom: 0;
    }
    #services-502 .background img {
        width: 60%;
        left: auto;
        right: 0;
        object-position: 80% top;
    }
    #services-502 .container {
        margin-top: 0;
    }
    #services-502 .container:before {
        /* make really tall so it always covers top to bottom, even when you add more list items */
        height: 250rem;
        /* make really really wide so it covers the left side at large scree sizes */
        width: 250rem;
        /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
        margin-right: -68.75rem;
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        top: 50%;
        left: auto;
        /* pushes the right edge of the element to the center line of the parent */
        right: 50%;
        transform: rotate(-35deg) translateY(-50%);
    }
    #services-502 .title {
        width: 40%;
    }
    #services-502 .card-group {
        width: 52%;
        /* 24px - 32px */
        padding-left: clamp(1.5rem, 3vw, 2rem);
        /* prevents padding from adding to width */
        box-sizing: border-box;
    }
    #services-502 .item {
        flex-direction: row;
    }
}

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1458 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #faq-1458 .container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1458 .content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq-1458 .title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #faq-1458 .faq-group {
    padding: 0;
    margin: 0;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #faq-1458 .faq-item {
    list-style: none;
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #faq-1458 .faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq-1458 .faq-item.active .button {
    color: var(--primary);
  }
  #faq-1458 .faq-item.active .button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq-1458 .faq-item.active .button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq-1458 .faq-item.active .item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq-1458 .button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1458 .button:hover {
    cursor: pointer;
  }
  #faq-1458 .button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1458 .button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1458 .button-text {
    width: 90%;
    display: block;
  }
  #faq-1458 .button-solid{
    font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        /* margin-top: 3rem; */
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        /* border-radius: 0.25rem; */
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
  }
  #faq-1458 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
    #faq-1458 .button-solid:hover:before {
        width: 100%;
    }
  #faq-1458 .item-p {
    /* 14px - 16px */
    font-family: var(--bodyFont);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq-1458 .image-group {
    /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
    font-size: min(2.43vw, 1em);
    width: 37.375em;
    height: 42.375em;
    display: block;
    position: relative;
  }
  #faq-1458 .picture {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    left: 0;
  }
  #faq-1458 .picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1458 .container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1458 .content {
    width: 55%;
  }
  #faq-1458 .image-group {
    font-size: min(1.4vw, 1em);
    height: auto;
    min-height: 42.375rem;
  }
  #faq-1458 .picture {
    height: 90%;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-574 {
        background-color: var(--primary);
    }
    #sbs-574 .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 7vw, 4rem);
    }
    #sbs-574 .content {
        /* set text aling to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        /* moved section padding to the .content so we can have the picture be full width on mobile without the padding preventing it from doing so */
        padding: var(--sectionPadding);
        padding-top: 0;
        /* prevents padding from affecting width and height */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-574 .title {
        color: var(--bodyTextColorWhite);
    }
    #sbs-574 .topper{
      color: var(--primary);
    }
    #sbs-574 .text {
        margin-bottom: 1rem;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #sbs-574 .text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-574 .button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #1a1a1a;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--bodyTextColorWhite);
        /* border-radius: 0.25rem; */
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #sbs-574 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--headerColor);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
    #sbs-574 .button-solid:hover {
        color: #fff;
    }
    #sbs-574 .button-solid:hover:before {
        width: 100%;
    }
    #sbs-574 .picture {
        display: block;
        position: relative;
        width: 100%;
        height: 18.75rem;
    }
    #sbs-574 .picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-574 {
        /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together */
        margin: var(--sectionPadding);
        margin-left: 0;
        margin-right: 0;
        padding: var(--sectionPadding);
        background-color: transparent;
        /* clips the red box from overflowing the section */
        overflow: hidden;
    }
    #sbs-574 .container {
        flex-direction: row;
        position: relative;
        z-index: 1;
    }
    #sbs-574 .container:before {
        /* red box */
        content: "";
        width: 100vw;
        margin-left: -38%;
        background: var(--headerColor);
        opacity: 1;
        display: block;
        position: absolute;
        top: -9.375rem;
        bottom: -9.375rem;
        left: 50%;
        z-index: -1;
    }
    #sbs-574 .content {
        width: 51%;
        /* reset the padding, add the section padding back to the section container */
        padding: 0;
    }
    #sbs-574 .picture {
        width: 47vw;
        max-width: 38.625rem;
        height: 33.5rem;
        /* 24px - 32px, added margin top and bottom to picture so it pushes away by the same amount the yellow box element overlaps it top and bottom. This maintains consistent spacing top and bottom */
        margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2rem)
            clamp(1.5rem, 3vw, 2rem);
        position: relative;
    }
    /* #sbs-574 .picture:before {
        content: "";
        width: 50%;
        background: var(--secondary);
        opacity: 1;
        display: block;
        position: absolute;
        top: calc(clamp(1.5rem, 3vw, 2rem) * -1);
        bottom: calc(clamp(1.5rem, 3vw, 2rem) * -1);
        left: calc(clamp(1.5rem, 3vw, 2rem) * -1);
    } */
     #sbs-574 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--primary);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
}

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #backgroundTraining,
    #teachingPhilosophy,
    #RTsbst-581 {
    }
    #backgroundTraining .container,
    #teachingPhilosophy .container,
    #RTsbst-581 .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 7vw, 4rem);
    }
    #backgroundTraining .content,
    #teachingPhilosophy .content,
    #RTsbst-581 .content {
        /* set text aling to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        /* moved section padding to the .content so we can have the picture be full width on mobile without the padding preventing it from doing so */
        padding: var(--sectionPadding);
        padding-top: 0;
        /* prevents padding from affecting width and height */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #backgroundTraining .text,
    #teachingPhilosophy .text,
    #RTsbst-581 .text {
        margin-bottom: 1rem;
    }
    #backgroundTraining .text:last-of-type,
    #teachingPhilosophy .text:last-of-type,
    #RTsbst-581 .text:last-of-type {
        margin-bottom: 2rem;
    }
    #backgroundTraining .button-solid,
    #teachingPhilosophy .button-solid,
    #RTsbst-581 .button-solid {
        font-size: 1rem;
        /* 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 1.5rem;
        background-color: var(--primary);
        /* border-radius: 0.25rem; */
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #backgroundTraining .button-solid:before,
    #teachingPhilosophy .button-solid:before,
    #RTsbst-581 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        /* border-radius: 0.25rem; */
        transition: width 0.3s;
    }
    #backgroundTraining .button-solid:hover:before,
    #teachingPhilosophy .button-solid:hover:before,
    #RTsbst-581 .button-solid:hover:before {
        width: 100%;
    }
    #backgroundTraining .picture,
    #teachingPhilosophy .picture,
    #teachingPhilosophy .video-trigger,
    #RTsbst-581 .picture {
        display: block;
        position: relative;
        width: 100%;
        height: 18.75rem;
    }
    #backgroundTraining .picture img,
    #teachingPhilosophy .picture img,
    #teachingPhilosophy .video-trigger img,
    #RTsbst-581 .picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    /* Modal styles for video modal */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  background-color: #000;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  display: block;
}

.modal-close {
    position: absolute;
    top: 3rem;
    right: 0rem;
    font-size: 3rem;
    color: white;
    cursor: pointer;
    z-index: 1001;
}

.video-thumbnail {
    cursor: pointer;
    width: 100%;
    height: auto;
    display: block;
}
    /* Modal wrapper */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0,0,0,0.75);
}

/* Modal content container */
.video-modal-content {
  position: relative;
  margin: 5% auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  background: transparent;
}

/* Video styling */
.video-modal-content video {
  width: 100%;
  height: auto;
  display: block;
}

/* Close button */
.video-modal-close {
  position: absolute;
  top: -30px;
  right: -10px;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #backgroundTraining,
    #teachingPhilosophy,
    #RTsbst-581 {
        padding: var(--sectionPadding);
    }
    #backgroundTraining .container,
    #teachingPhilosophy .container,
    #RTsbst-581 .container {
        flex-direction: row;
        justify-content: flex-start;
        /* 60px - 128px */
        gap: clamp(3.75rem, 10vw, 8rem);
    }
    #backgroundTraining .content,
    #teachingPhilosophy .content,
    #RTsbst-581 .content {
        width: 53%;
        /* reset the padding, add the section padding back to the section container */
        padding: 0;
    }
    #backgroundTraining .picture,
    #teachingPhilosophy .picture,
    #teachingPhilosophy .video-trigger,
    #RTsbst-581 .picture {
        width: 47vw;
        max-width: 30.875rem;
        /* 518px - 700px */
        height: clamp(32.375rem, 63vw, 43.75rem);
        /* 16px - 28px, added margin left and bottom to picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
        margin: 0 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem);
        position: relative;
    }
    /* #backgroundTraining .picture:before,
    #teachingPhilosophy .picture:before,
    #RTsbst-581 .picture:before {
        content: "";
        width: 50%;
        height: 60%;
        background: var(--secondary);
        opacity: 1;
        display: block;
        position: absolute;
        bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
        left: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
    } */
}

/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #teachingPhilosophy {
        background-color: #f7f7f7;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #teachingPhilosophy .container {
        justify-content: flex-end;
    }
    #teachingPhilosophy .content {
        /* sends it to the left in the first position */
        order: -1;
    }
    #teachingPhilosophy .picture,
    #teachingPhilosophy .video-trigger {
        /* 16px - 28px, added margin left and bottom to picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
        margin: 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem) 0;
    }
    /* #teachingPhilosophy .picture:before {
        content: "";
        width: 50%;
        height: 60%;
        background: var(--secondary);
        opacity: 1;
        display: block;
        position: absolute;
        left: auto;
        bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
        right: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
    } */
}

/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #personalConnection {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    background-image: url('/img/susuki.webp');
    background-size: cover;       /* Makes the image cover the entire section */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
  }
  /* #personalConnection:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  } */
  #personalConnection .container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #personalConnection .content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 36.25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #personalConnection .content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #personalConnection .text {
    margin-bottom: 1rem;
  }
  #personalConnection .button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    /* border-radius: 0.25rem; */
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #personalConnection .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;
  }
  #personalConnection .button-solid:hover:before {
    width: 100%;
  }
  #personalConnection .ul {
    width: 100%;
    list-style: none;
    margin: 0 0 2rem 0;
    padding: 0;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #personalConnection .li {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: left;
    font-weight: 700;
    width: 100%;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--bodyTextColor);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
  }
  #personalConnection .li-icon {
    width: 1rem;
    height: auto;
    flex: none;
    display: block;
    position: relative;
  }
  #personalConnection .no-show{
    width: 1rem;
    height: auto;
    flex: none;
    display: block;
    position: relative;
  }
  #personalConnection .image-group {
    /* scaling entire section down. font-size starts at a min in vw, and stops when that vales equals .74em, resets at desktop */
    font-size: min(2.3vw, .6em);
    width: 39.375em;
    height: 44em;
    position: relative;
  }
  #personalConnection .picture {
    width: 100%;
    height: 44em;
    display: block;
    position: relative;
  }
  #personalConnection .picture img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    position: relative;
    bottom: 0;
    left: 0;
  }
  #personalConnection .circle {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  #personalConnection .message {
    font-weight: 700;
    width: 12.3125em;
    padding: 1em 1.5em;
    background-color: #fff;
    border-radius: 2em;
    text-align: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #personalConnection .message:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    border-radius: 2em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  #personalConnection .message:after {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 0.25em solid var(--primary);
    opacity: 0.2;
    border-radius: 2em;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  #personalConnection .arrow {
    width: 4.4375em;
    height: auto;
    position: absolute;
    top: 6.1875em;
    left: 3.125em;
    transform: rotate(-29deg);
  }
  #personalConnection .wrapper {
    width: 100%;
    max-width: 36.25rem;
    display: flex;
    flex-direction: column;
    /* 16px - 32px */
    gap: clamp(1rem, 1.9vw, 2rem);
  }
  #personalConnection .graphic-group {
    /* 96px - 157px */
    width: clamp(6rem, 10vw, 9.8125rem);
    height: clamp(6rem, 10vw, 9.8125rem);
    flex: none;
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #personalConnection .circle-small {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #personalConnection .graphic {
    /* 55px - 96px */
    width: clamp(3.4375rem, 5vw, 6rem);
    height: auto;
  }
  #personalConnection .header {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.9vw, 1.5625rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: block;
  }
  #personalConnection .graphic-text {
    margin-bottom: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #personalConnection .wrapper {
    flex-direction: row;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #personalConnection .container {
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-start;
  }
  #personalConnection .image-group {
    /* reset the scale */
    font-size: min(0.95vw, 1rem);
    /* prevent flexbox from squishing it */
    flex: none;
    order: 2;
  }
  #personalConnection .content-wrapper {
    width: 50%;
  }
  #personalConnection .wrapper{
    width: 80%;
    margin-left: 10rem;
  }
}
/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-1587,
  #suzuki {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #RPsbs-1587 .container,
  #suzuki .container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #RPsbs-1587 .picture,
  #suzuki .picture {
    width: 100%;
    height: clamp(25rem, 80vw, 47rem);
    display: block;
    position: relative;
  }
  #RPsbs-1587 .picture img,
  #suzuki .picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  #RPsbs-1587 .content,
  #suzuki .content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    justify-content: center;
  }
  #RPsbs-1587 .title,
  #suzuki .title {
    /* 26 characters wide including spaces */
    max-width: 26ch;
    margin: 0;
    margin-bottom: 2rem;
  }
  #RPsbs-1587 .text,
  #suzuki .text {
    margin-bottom: 1rem;
  }
  #RPsbs-1587 .text:last-of-type,
  #suzuki .text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs-1587 .card-group,
  #suzuki .card-group {
    width: 100%;
    /* 550px - 630px */
    max-width: clamp(34.375rem, 50vw, 39.375rem);
    padding: 0;
    /* 24px - 40px */
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.75rem, 4vw, 2.5rem) 0;
    display: grid;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
  }
  #RPsbs-1587 .item,
  #suzuki .item {
    list-style: none;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #RPsbs-1587 .wrapper,
  #suzuki .wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
  }
  #RPsbs-1587 .item-number,
  #suzuki .item-number {
    font-family: var(--bodyFont);
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #RPsbs-1587 .h3,
  #suzuki .h3 {
    font-family: var(--bodyFont);
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #RPsbs-1587 .item-text,
  #suzuki .item-text {
    font-family: var(--bodyFont);
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #RPsbs-1587 .button-solid,
  #suzuki .button-solid {
    font-size: 1rem;
    line-height: 3.5em;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    width: auto;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #RPsbs-1587 .button-solid:before,
  #suzuki .button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #RPsbs-1587 .button-solid:hover,
  #suzuki .button-solid:hover {
    color: var(--primary);
  }
  #RPsbs-1587 .button-solid:hover:before,
  #suzuki .button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbs-1587 .container,
  #suzuki .container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #RPsbs-1587 .content,
  #suzuki .content {
    width: 50%;
    max-width: 39.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #RPsbs-1587 .card-group,
  #suzuki .card-group {
    grid-template-columns: repeat(12, 1fr);
  }
  #RPsbs-1587 .item,
  #suzuki .item {
    grid-column: span 6;
  }
  #RPsbs-1587 .picture,
  #suzuki .picture {
    height: auto;
    min-height: 32.8125rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbs-1587 .content,
  #suzuki .content {
    padding: 5.25rem 0;
    align-self: center;
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #suzuki {
    background-color: #f7f7f7;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #suzuki .picture {
    order: 2;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #musicReading,
  #secondInstrument,
  #accompaniment,
  #students,
  #RPsbsr-1445 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #musicReading.reverse.alt-color,
  #secondInstrument.reverse.alt-color,
  #accompaniment.reverse.alt-color,
  #students.reverse.alt-color{
    background-color: var(--secondary);
  }
  #musicReading .container,
  #secondInstrument .container,
  #accompaniment .container,
  #students .container,
  #RPsbsr-1445 .container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #musicReading .content,
  #secondInstrument .content,
  #accompaniment .content,
  #students .content,
  #RPsbsr-1445 .content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #musicReading.reverse.alt-color .title,
  #musicReading.reverse.alt-color .text,
  #musicReading.reverse.alt-color .h3,
  #musicReading.reverse.alt-color .li-text,
  #secondInstrument.reverse.alt-color .title,
  #secondInstrument.reverse.alt-color .text,
  #secondInstrument.reverse.alt-color .h3,
  #secondInstrument.reverse.alt-color .li-text,
  #accompaniment.reverse.alt-color .title,
  #accompaniment.reverse.alt-color .text,
  #accompaniment.reverse.alt-color .h3,
  #accompaniment.reverse.alt-color .li-text,
  #students.reverse.alt-color .title,
  #students.reverse.alt-color .text,
  #students.reverse.alt-color .h3,
  #students.reverse.alt-color .li-text{
    color: var(--bodyTextColorWhite);
  }
  #musicReading .h3,
  #musicReading .li-text,
  #secondInstrument .h3,
  #secondInstrument .li-text,
  #accompaniment .h3,
  #accompaniment .li-text,
  #students .h3,
  #students .li-text{
    font-family: var(--bodyFont);
  }
  #musicReading.reverse .topper,
  #secondInstrument.reverse .topper,
  #accompaniment.reverse .topper,
  #students.reverse .topper{
    color: var(--primary);
  }
  #musicReading .text,
  #secondInstrument .text,
  #accompaniment .text,
  #students .text,
  #RPsbsr-1445 .text {
    margin-bottom: 1rem;
  }
  #musicReading .text:last-of-type,
  #secondInstrument .text:last-of-type,
  #accompaniment .text:last-of-type,
  #students .text:last-of-type,
  #RPsbsr-1445 .text:last-of-type {
    margin-bottom: 2rem;
  }
  #musicReading .card-group,
  #secondInstrument .card-group,
  #accompaniment .card-group,
  #students .card-group,
  #RPsbsr-1445 .card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 2rem 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #musicReading .li,
  #secondInstrument .li,
  #accompaniment .li,
  #students .li,
  #RPsbsr-1445 .li {
    list-style: none;
    margin: 0;
    margin-bottom: 2rem;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #musicReading .li-picture,
  #secondInstrument .li-picture,
  #accompaniment .li-picture,
  #students .li-picture,
  #RPsbsr-1445 .li-picture {
    width: 5rem;
    height: 2rem;
    margin: 0;
    border-radius: 50%;
    /* background-color: #fff; */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
    z-index: 1;
  }
  /* #RPsbs-1445 .li-picture:before,
  #RPsbsr-1445 .li-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  } */
  #musicReading .li-icon,
  #secondInstrument .li-icon,
  #accompaniment .li-icon,
  #students .li-icon,
  #RPsbsr-1445 .li-icon {
    width: 1rem;
    height: auto;
    display: block;
  }
  #musicReading .h3,
  #secondInstrument .h3,
  #accompaniment .h3,
  #students .h3,
  #RPsbsr-1445 .h3 {
    font-size: 1.25rem;
    line-height: 1em;
    font-weight: 700;
    text-align: left;
    margin: 0;
    color: var(--headerColor);
  }
  #musicReading .li-text,
  #secondInstrument .li-text,
  #accompaniment .li-text,
  #students .li-text,
  #RPsbsr-1445 .li-text {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #musicReading .button-solid,
  #secondInstrument .button-solid,
  #accompaniment .button-solid,
  #students .button-solid,
  #RPsbsr-1445 .button-solid {
    font-size: 1rem;
    /* 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);
    /* border-radius: 0.25rem; */
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #musicReading .button-solid:before,
  #secondInstrument .button-solid:before,
  #accompaniment .button-solid:before,
  #students .button-solid:before,
  #RPsbsr-1445 .button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    /* border-radius: 0.25rem; */
    transition: width .3s;
  }
  #secondInstrument .button-solid:before{
    background: var(--bodyTextColorWhite);
  }
  #secondInstrument .button-solid:hover{
    color: var(--headerColor);
  }
  #musicReading .button-solid:hover:before,
  #secondInstrument .button-solid:hover:before,
  #accompaniment .button-solid:hover:before,
  #students .button-solid:hover:before,
  #RPsbsr-1445 .button-solid:hover:before {
    width: 100%;
  }
  #musicReading .picture,
  #secondInstrument .picture,
  #accompaniment .picture,
  #students .picture,
  #RPsbsr-1445 .picture {
    width: 100%;
    max-width: 40.625rem;
    min-height: 22.625rem;
    /* border-radius: 1.5rem; */
    /* clips img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #musicReading .picture img,
  #secondInstrument .picture img,
  #accompaniment .picture img,
  #students .picture img,
  #RPsbsr-1445 .picture img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  #secondInstrument .picture img{
    width: 100%;
    height: 70%;
    display: block;
    position: absolute;
    top: 5rem;
    left: 0;
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #musicReading .container,
  #secondInstrument .container,
  #accompaniment .container,
  #students .container,
  #RPsbsr-1445 .container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
  }
  #musicReading .content,
  #secondInstrument .content,
  #accompaniment .content,
  #students .content,
  #RPsbsr-1445 .content {
    width: 50%;
    padding: 2.5rem 0;
  }
  #musicReading.reverse .content,
  #secondInstrument.reverse .content,
  #accompaniment.reverse .content,
  #students.reverse .content{
    order: 1;
  }
  #musicReading .picture,
  #secondInstrument .picture,
  #accompaniment .picture,
  #students .picture,
  #RPsbsr-1445 .picture {
    height: auto;
    width: 55%;
  }
  #musicReading.reverse .picture,
  #secondInstrument.reverse .picture,
  #accompaniment.reverse .picture,
  #students.reverse .picture{
    order: 2;
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-1445 {
    background-color: #f7f7f7;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbsr-1445 .picture {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/*-- -------------------------- -->
<---      Why Choose Us         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1657 {
    padding: var(--sectionPadding);
    background-color: #F3F3F4;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #why-choose-1657 .container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 100px */
    gap: clamp(3rem, 10vw, 6.25rem);
  }
  #why-choose-1657 .content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1657 .flex {
    max-width: 38.5rem;
  }
  #why-choose-1657 .title {
    max-width: 20ch;
    margin-bottom: 1.5rem;
  }
  #why-choose-1657 .ul {
    width: 100%;
    max-width: 32.625rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 28px - 32px */
    gap: clamp(1.75rem, 3vw, 2rem);
  }
  #why-choose-1657 .li {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  #why-choose-1657 .number {
    font-family: var(--bodyFont);
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: block;
  }
  #why-choose-1657 .li-text {
    /* 14px - 16px */
    font-family: var(--bodyFont);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #why-choose-1657 .wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 40px - 64px */
    gap: clamp(2.5rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #why-choose-1657 .wrapper:before {
    /* white background */
    content: '';
    width: 100vw;
    height: 500%;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    /* 40px - 140px */
    top: clamp(2.5rem, 10vw, 8.75rem);
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1657 .picture {
    width: 100%;
    height: 70vw;
    max-height: 25rem;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1657 .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1657 .quote {
    /* 62px - 100px */
    width: clamp(3.875rem, 7vw, 6.25rem);
    height: auto;
    margin-bottom: -1.75rem;
    opacity: .4;
    position: relative;
    z-index: -1;
  }
  #why-choose-1657 .review {
    --quoteColor: var(--primary);
    /* 20px - 25px */
    font-family: var(--bodyFont);
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1657 .container {
    max-width: 80rem;
    gap: 0;
  }
  #why-choose-1657 .content {
    padding-bottom: 6.25rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #why-choose-1657 .flex {
    text-align: left;
    width: 40vw;
    max-width: 39.375rem;
    flex: none;
  }
  #why-choose-1657 .title {
    margin: 0;
  }
  #why-choose-1657 .wrapper {
    /* -60px to -140px */
    margin-top: calc(clamp(3.75rem, 10vw, 8.75rem)*-1);
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  #why-choose-1657 .picture {
    width: 43vw;
    max-width: 39.375rem;
    height: auto;
    /* 252px - 414px */
    min-height: clamp(15.75rem, 30vw, 25.875rem);
    max-height: 100%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1657 .review {
    /* 100px - 235px */
    /* pushes up against the container so there's always that gap between the top of the review and the container */
    margin-top: clamp(6.25rem, 20vw, 14.5rem);
    align-self: flex-end;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #faq-489 {
        padding: var(--sectionPadding);
        background: #fafbfc;
    }
    #faq-489 .container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        /* 40px - 48px */
        gap: clamp(2.5rem, 5vw, 3rem);
    }
    #faq-489 .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #faq-489 .color {
        color: var(--primary);
    }

    #faq-489 .title {
        /* 17 characters wide including spaces */
        max-width: 17ch;
    }
    #faq-489 .text {
        /* 32px - 48px */
        margin-bottom: clamp(2rem, 3vw, 3rem);
    }
    #faq-489 .button-solid {
        font-size: 1rem;
        /* 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 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #faq-489 .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #faq-489 .button-solid:hover:before {
        width: 100%;
    }
    #faq-489 .faq-group {
        max-width: 46.25rem;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1.25rem;
    }
    #faq-489 .faq-item {
        list-style: none;
        width: 100%;
        /* prevents border from affecting width and height */
        box-sizing: border-box;
        border: 1px solid #f1f1f4;
        transition:
            border 0.3s,
            padding 0.3s,
            border-color 0.3s;
    }
    #faq-489 .faq-item:hover {
        border-color: var(--primary);
    }
    #faq-489 .faq-item.active {
        padding-bottom: 1rem;
        border-color: var(--primary);
    }
    #faq-489 .faq-item.active .button {
        color: var(--primary);
    }
    #faq-489 .faq-item.active .button:before {
        transform: translateY(-50%) rotate(180deg);
        opacity: 0;
        background-color: var(--primary);
    }
    #faq-489 .faq-item.active .button:after {
        transform: translateY(-50%) rotate(360deg);
        background-color: var(--primary);
    }
    #faq-489 .faq-item.active .item-p {
        height: auto;
        margin-top: 0.5rem;
        opacity: 1;
    }
    #faq-489 .button {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 1vw, 1.5625rem);
        line-height: 1.2em;
        text-align: left;
        font-weight: bold;
        padding: 1rem 1.5rem;
        border: none;
        background: transparent;
        color: var(--headerColor);
        display: block;
        width: 100%;
        position: relative;
        transition:
            background-color 0.3s,
            color 0.3s;
    }
    #faq-489 .button:hover {
        cursor: pointer;
    }
    #faq-489 .button:before {
        /* horizontal line */
        content: "";
        width: 1rem;
        height: 0.1875rem;
        background-color: currentColor;
        opacity: 1;
        border-radius: 1px;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        transition:
            transform 0.5s,
            opacity 0.3s;
    }
    #faq-489 .button:after {
        /* vertical line */
        content: "";
        width: 1rem;
        height: 0.1875rem;
        background-color: currentColor;
        opacity: 1;
        border-radius: 1px;
        position: absolute;
        display: block;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%) rotate(90deg);
        transform-origin: center;
        transition: transform 0.5s;
    }
    #faq-489 .button-text {
        width: 80%;
        display: block;
    }
    #faq-489 .item-p {
        font-family: var(--bodyFont);
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        width: 90%;
        height: 0;
        margin: 0;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        padding: 0 1.5rem;
        opacity: 0;
        color: var(--bodyTextColor);
        /* clips the text so it doesn't show up */
        overflow: hidden;
        transition:
            opacity 0.3s,
            padding-bottom 0.3s;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
    #faq-489 .container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 3.25rem;
    }
    #faq-489 .content {
        margin-top: 3.125rem;
    }
    #faq-489 .title,
    #faq-489 .topper {
        text-align: left;
        margin-left: 0;
    }
    #faq-489 .faq-group {
        width: clamp(56%, 58vw, 58%);
        flex: none;
    }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #helpfulLinks {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #helpfulLinks .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;
    }
    #helpfulLinks .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #helpfulLinks .title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #helpfulLinks h2 {
      font-family: var(--headerFont);  
      font-weight: 100;
      font-size: 2rem;
      margin-top: 2rem;
      text-align: inherit;
      color: var(--headerColor);
    }
    #helpfulLinks h2 {
        font-family: var(--headerFont);  
        font-size: 2rem;
        margin-top: 2rem;
    }
    #helpfulLinks .button-solid {
        margin-bottom: 2rem;
    }
    #helpfulLinks .no-margin {
        margin: 0;
    }
    #helpfulLinks .color {
        color: var(--primary);
    }
    #helpfulLinks p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #helpfulLinks p:last-of-type {
        margin-bottom: 2rem;
    }
    #helpfulLinks p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
    }
    #helpfulLinks ol,
    #helpfulLinks ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #helpfulLinks ul li {
      font-family: var(--bodyFont);
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        margin: 0;
        padding: 0;
      list-style: none;
        color: inherit;
        position: relative;
    }
    #helpfulLinks ul li:before {
        /* custom list bullet */
        content: "";
        width: 5px;
        height: 5px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #helpfulLinks ul li a {
        font-size: var(--bodyFontSize);
        line-height: inherit;
        text-decoration: underline;
        color: var(--bodyTextColor);
    }
    #helpfulLinks img {
        width: 100%;
        height: auto;
        display: block;
    }
    #helpfulLinks .image-group {
        width: 50%;
        max-width: 27.0625rem;
        display: none;
        flex-direction: column;
        gap: 1.25rem;
        position: relative;
    }
    /* #helpfulLinks .image-group:after {
        content: "";
        width: 100%;
        height: clamp(11.0625rem, 19vw, 16.125rem);
        background: var(--primary);
        border-radius: 6.25rem 0 6.25rem;
        opacity: 0.15;
        display: block;
    } */
    #helpfulLinks .picture {
        width: 100%;
        /* 300px - 520px */
        height: clamp(18.75rem, 40vw, 32.5rem);
        /* box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16); */
        /* 125px - 200px */
        /* border-radius: 0 clamp(7.8125rem, 15vw, 12.5rem) 0
            clamp(7.8125rem, 15vw, 12.5rem); */
        /* prevents border from affecting height and width */
        box-sizing: border-box;
        /* clips img tag corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #helpfulLinks .picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #helpfulLinks .container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #helpfulLinks .content {
        flex: none;
        width: 60%;
        /* sens it to the right in the 2nd position */
        order: 2;
    }
    #helpfulLinks .image-group {
        display: flex;
    }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #contact {
        padding: var(--sectionPadding);
        background-color: #f7f7f7;
        position: relative;
        z-index: 1;
    }
    #contact .container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
        column-gap: auto;
        /* 48px - 64px */
        gap: clamp(2rem, 3vw, 3rem);
        position: relative;
    }
    #contact .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #contact .title {
        max-width: 23ch;
    }
    #contact .text {
        margin-bottom: 1rem;
    }
    #contact .text:last-of-type {
        margin-bottom: 2rem;
    }
    #contact .ul {
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        position: relative;
    }
    #contact .li {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.25rem;
    }
    #contact .li:hover .icon-wrapper {
        transform: scale(1.1);
    }
    #contact .header {
        font-family: var(--bodyFont);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.75rem;
        color: var(--headerColor);
        display: block;
    }
    #contact .link {
        font-family: var(--bodyFont);
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        color: #767676;
        display: block;
        position: relative;
    }
    #contact .link:hover {
        text-decoration: underline;
    }
    #contact .icon-wrapper {
        width: 3.75rem;
        height: 3.75rem;
        margin: 0;
        border-radius: 50%;
        border: 1px solid #bababa;
        display: flex;
        justify-content: center;
        align-items: center;
        /* prevents flexbox from squishing it */
        flex: none;
        transition: transform 0.3s;
    }
    #contact .icon {
        width: 1.5rem;
        height: auto;
        display: block;
    }
    #contact .form {
        width: 100%;
        max-width: 39.375rem;
        /* 24px - 48px top and bottom */
        /* 16px - 48px left and right */
        padding: clamp(1.5rem, 5.18vw, 3rem) clamp(1rem, 4vw, 3rem);
        /* prevents flexbox from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        /* border-radius: 1rem; */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }
    #contact .h3 {
        /* 20px - 39px */
        font-family: var(--bodyFont);
        font-size: clamp(1.25rem, 3vw, 2.4375rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0 0 0.25rem 0;
        color: var(--headerColor);
    }
    #contact .label {
        /* 14px - 16px */
        font-family: var(--bodyFont);
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        width: 100%;
        color: var(--headerColor);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.25rem;
    }
    #contact .input {
        font-size: 1rem;
        width: 100%;
        height: 3.5rem;
        padding: 0;
        padding-left: 1.5rem;
        color: var(--headerColor);
        background-color: #f7f7f7;
        /* border-radius: 0.5rem; */
        border: none;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #contact .input::placeholder {
        color: #7d799c;
        opacity: 0.6;
    }
    #contact .textarea {
        min-height: 7.5rem;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-family: inherit;
    }
    #contact .button-solid {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: #fff;
        padding: 0 3rem;
        /* border-radius: 1.875rem; */
        background-color: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #contact .button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #contact .button-solid:hover {
        color: var(--primary);
    }
    #contact .button-solid:hover:before {
        width: 100%;
    }
    #contact .submit {
        width: 100%;
        min-width: 12.5rem;
        border: none;
    }
    #contact .submit:hover {
        color: #fff;
        cursor: pointer;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #contact .container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #contact .content {
        width: 47%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #contact .submit {
        width: auto;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #contact .form {
        width: 46%;
        max-width: 36.125rem;
    }
    #contact .submit {
        width: auto;
    }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
    #contact .graphic {
        display: block;
    }
}

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer-1292 {
    padding: var(--sectionPadding);
    padding-bottom: 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 10;
    background-color: var(--headerColor);
    /* Navigation Links */
  }
  #footer-1292 .container {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 2.25rem;
  }
  #footer-1292 .logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #footer-1292 .logo {
    width: 12.3125rem;
    height: auto;
    display: block;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2vw, 1.5rem) 0;
  }
  #footer-1292 .logo-img {
    width: 100%;
    height: auto;
  }
  #footer-1292 .logo-img.dark {
    display: none;
  }
  #footer-1292 .text {
    margin-bottom: 2rem;
    color: var(--bodyTextColorWhite);
  }
  #footer-1292 .link {
    font-family: var(--bodyFont);
    font-size: 0.875rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--bodyTextColorWhite);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
  }
  #footer-1292 .link:hover {
    color: var(--primary);
  }
  #footer-1292 .nav {
    font-family: var(--bodyFont);
    width: 45%;
    max-width: 11.25rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #footer-1292 .nav-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #footer-1292 .header {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: block;
  }
  #footer-1292 .nav-link {
    font-size: 0.875rem;
    text-decoration: none;
    line-height: 1.5em;
    width: auto;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: inline-block;
    transition: color 0.3s;
  }
  #footer-1292 .nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #footer-1292 .nav-link:hover {
    color: var(--primary);
  }
  #footer-1292 .nav-link:hover:before {
    width: 100%;
  }
  #footer-1292 .bottom {
    max-width: 80rem;
    margin: auto;
    /* 48px - 100px */
    margin-top: clamp(3rem, 9vw, 6.25rem);
    /* 20px - 32px */
    padding: clamp(1.25rem, 3vw, 2rem) 0 0 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2.25rem;
    row-gap: 0.75rem;
  }
  #footer-1292 .copyright,
  #footer-1292 .copyright-link {
    font-family: var(--bodyFont);
    font-size: 0.875rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
  }
  #footer-1292 .copyright {
    text-align: center;
    width: 100%;
  }
  #footer-1292 .copyright-link {
    text-decoration: none;
    transition: color 0.3s;
  }
  #footer-1292 .copyright-link:hover {
    color: var(--primary);
  }
  #footer-1292 .floater {
    width: 31.625rem;
    height: 31.625rem;
    margin-left: 34.375rem;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0.1;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
  }
  #footer-1292 .floater:before {
    content: "";
    width: 44.6875rem;
    height: 44.6875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0.6;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #footer-1292 .floater:after {
    content: "";
    width: 60.1875rem;
    height: 60.1875rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer-1292 .container {
    row-gap: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: clamp(2.75rem, 6vw, 5.5rem);
    row-gap: 2.5rem;
  }
  #footer-1292 .nav {
    width: auto;
  }
  #footer-1292 .bottom {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  #footer-1292 .copyright {
    text-align: left;
    width: auto;
    margin-right: auto;
    color: var(--bodyTextColorWhite);
  }
  #footer-1292 .floater {
    display: block;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #footer-1292 .container {
    max-width: 80rem;
    flex-wrap: nowrap;
    /* align everything to the right */
    justify-content: flex-end;
    column-gap: clamp(2.5rem, 6vw, 5.25rem);
  }
  #footer-1292 .logo-group {
    width: 30%;
    max-width: 24.1875rem;
    /* pushes away from everything to the right */
    margin-right: auto;
  }
  #footer-1292 .text {
    width: 100%;
  }
  #footer-1292 .graphic {
    display: block;
  }
}