/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-81 {
    /* Centers button */
    text-align: center;
    /* 144px - 300px - leaving extra space for the navigation */
    padding: var(--sectionPaddingMobile);
    /* 130px - 450px */
    position: relative;
    z-index: 1;
    /* Prevents white rectangle pseudos from overlapping the sections below */
    overflow: hidden;
    display: flex;
    align-items: center;
    background-image: url(/assets/backgrounds/HERO-MOBILE.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 800px;
    justify-content: center;
    flex-direction: column;
  }
  #hero-81 .cs-container {
    width: 100%;
    max-width: 80rem;
    max-width: 67.5rem;
    padding-top: 25rem;
  }
  #hero-81 .cs-button-solid {
    font-size: 1rem;
  }
  #hero-81 .cs-title {
    /* 36px - 61px */
    font-size: 2.75em;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    /* 16px - 24px */
    position: relative;
  }
  #hero-81 .cs-title span {
    color: var(--primary);
    font-weight: 700;
  }
  #hero-81 .cs-text {
    /* 16px - 25px */
    font-size: 1.5em;
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 800px */
    max-width: clamp(29rem, 60vw, 50rem);
    margin: 0 auto 1rem;
    /* 40px - 48px */
    color: var(--bodyTextColor);
  }
  #hero-81 .cs-picture {
    display: block;
    position: relative;
    width: clamp(100% 50% 100%);
    height: 10%;
    margin-top: 2rem;
  }
  #hero-81 .cs-picture img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
/* Desktop - 1300px (To make image background parallax) */
@media only screen and (min-width: 65rem) {
  #hero-81 {
    padding: clamp(6rem, 9.6vh, 6rem) 1rem 7rem;
    background-color: var(--secondary);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: url("/assets/backgrounds/HERO-DESKTOP.png");
    object-fit: cover;
    background-position: center;
    height: 800px;
  }
  #hero-81 #cs-form-265 {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    display: flex;
    width: 31rem;
    padding-top: 0.69rem;
  }
  #hero-81 #cs-form-265 label {
    width: 100%;
    max-width: 14.4rem;
  }
  #hero-81 #cs-form-265 input,
  #hero-81 #cs-form-265 textarea {
    width: 100%;
  }
  #hero-81 #cs-form-265 .cs-label-message {
    width: 35rem;
    max-width: 31rem;
    margin-bottom: 2.7rem;
  }
  #hero-81 .cs-button-solid {
    margin-top: 1.5rem;
    font-size: 1.25em;
    width: 90%;
    height: 5rem;
    line-height: 5rem;
    justify-content: flex-start;
  }
  #hero-81 .textbox {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  #hero-81 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: self-start;
    margin: 0;
    width: 100%;
    padding-top: 0rem;
  }
  #hero-81 .cs-title {
    font-size: 2.75em;
    font-weight: 700;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #hero-81 .cs-text {
    font-size: clamp(1em, 2.4vw, 1.8125eem);
    text-align: left;
    width: 100%;
    margin: 0;
  }
  #hero-81 .cs-picture {
    position: static;
    margin-top: 1rem;
  }
  #hero-81 .cs-picture img {
    width: 100%;
    height: 100%;
  }
}
/* Tablet - 768px */
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px- Contains Hover State */
@media only screen and (min-width: 0rem) {
  #services-279 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    margin-top: -2px;
  }
  #services-279:before {
    content: "";
    position: absolute;
    display: block;
    height: 32.6875rem;
    width: 100%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-279 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-279 .cs-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;
  }
  #services-279 .cs-title {
    color: var(--bodyTextColorWhite);
    font-size: 2.75em;
  }
  #services-279 .cs-text {
    color: var(--bodyTextColorWhite);
    font-size: 1.5em;
  }
  #services-279 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 3.75rem;
  }
  #services-279 .cs-item {
    list-style: none;
    margin: 0;
    width: 80%;
    /* changes to 100% at tablet */
    max-width: 21.75rem;
  }
  #services-279 .cs-item:hover .cs-picture:before {
    height: 100%;
  }
  #services-279 .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }
  #services-279 .cs-picture {
    aspect-ratio: 0.80369515;
    position: relative;
    display: block;
    /* Keeps image from bleeding outside the picture element */
    overflow: hidden;
    border-radius: 4px;
  }
  #services-279 .cs-picture:before {
    content: "";
    position: absolute;
    display: block;
    height: 0%;
    width: 100%;
    background: var(--primary);
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
    transition: height 0.3s;
  }
  #services-279 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act like a background image */
    object-fit: cover;
    transition: transform 0.7s;
  }
  #services-279 .cs-box {
    /* Centers the button */
    text-align: center;
    width: 90%;
    margin: 0 auto;
    /* -32px to -48px */
    margin-top: calc(clamp(2rem, 7vw, 3rem)*-1);
    padding-top: 1.5rem;
    background: #f6f6ff;
    position: relative;
    z-index: 10;
    padding-bottom: 2rem;
    border-radius: 2px;
  }
  #services-279 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-align: center;
    line-height: 1.2em;
    font-weight: bold;
    color: #000;
    margin-bottom: 1rem;
    padding: 0rem 2rem 0rem 2rem;
  }
  #services-279 .cs-button-transparent {
    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: #000000;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border: 1px solid 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;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  }
  #services-279 .cs-button-transparent: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;
  }
  #services-279 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #services-279 .cs-button-transparent:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-279 {
    margin: 0px;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -30px;
  }
  #services-279:before {
    /* 450px - 580px */
    height: clamp(28.125rem, 45vw, 36.25rem);
  }
  #services-279 .cs-card-group {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #services-279 .cs-item {
    margin: 0;
    max-width: 30%;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RTsbs-876,
  #RTsbsr-876,
  #RTsbst-876 {
    padding: var(--sectionPadding);
  }
  #RTsbs-876 .cs-container,
  #RTsbsr-876 .cs-container,
  #RTsbst-876 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
  }
  #RTsbs-876 .cs-content,
  #RTsbsr-876 .cs-content,
  #RTsbst-876 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    /* 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;
  }
  #RTsbs-876 .cs-title,
  #RTsbsr-876 .cs-title,
  #RTsbst-876 .cs-title {
    /* 17 characters wide including spaces */
    max-width: 17ch;
    font-size: 2.75em;
  }
  #RTsbs-876 .cs-text,
  #RTsbsr-876 .cs-text,
  #RTsbst-876 .cs-text {
    font-size: 1.25em;
    margin-bottom: 1rem;
  }
  #RTsbs-876 .cs-text:last-of-type,
  #RTsbsr-876 .cs-text:last-of-type,
  #RTsbst-876 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RTsbs-876 .cs-picture,
  #RTsbsr-876 .cs-picture,
  #RTsbst-876 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 70vw, 48.4375rem);
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
    /* 100px - 200px */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
  }
  #RTsbs-876 .cs-picture img,
  #RTsbsr-876 .cs-picture img,
  #RTsbst-876 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 64rem) {
  #RTsbs-876,
  #RTsbsr-876,
  #RTsbst-876 {
    padding: var(--sectionPadding);
  }
  #RTsbs-876 .cs-container,
  #RTsbsr-876 .cs-container,
  #RTsbst-876 .cs-container {
    flex-direction: row;
    max-width: 80rem;
    justify-content: space-between;
    gap: 1rem;
  }
  #RTsbs-876 .cs-content,
  #RTsbsr-876 .cs-content,
  #RTsbst-876 .cs-content {
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
  }
  #RTsbs-876 .cs-picture,
  #RTsbsr-876 .cs-picture,
  #RTsbst-876 .cs-picture {
    width: 47vw;
    position: relative;
  }
  #RTsbst-876 {
    max-width: 200rem;
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RTsbsr-876 {
    background-color: #191760;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RTsbsr-876 .cs-content {
    /* sends it to the left in the 1st position */
    order: -1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RTsbsr-876 {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
/* Mobile - 360px */
/* you can copy and paste these styles into the section CSS where you placed the #list-1186 HTML, or you can place it in your global stylesheet so you can reuse the HTML in any Side By Side section on your site. That way when you make changes to it, it will also change everywhere in the site */
@media only screen and (min-width: 0rem) {
  #list-1186 {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.5rem;
  }
  #list-1186 .cs-li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #list-1186 .cs-li-picture {
    /* 60px - 80px */
    width: clamp(3.75rem, 6vw, 5rem);
    height: clamp(3.75rem, 6vw, 5rem);
    margin: 0;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #list-1186 .cs-li-icon {
    /* 24px - 32px */
    width: clamp(1.5rem, 3vw, 2rem);
    height: auto;
    display: block;
  }
  #list-1186 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    color: var(--headerColor);
  }
  #list-1186 .cs-li-text {
    font-size: 1em;
    line-height: 1.5em;
    text-align: left;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-697 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }
  #cta-697 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-697 .cs-title {
    color: #000;
  }
  #cta-697 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColorWhite);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: #000;
    background: linear-gradient(90deg, #000000 55%, #312d02 80%);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta-697 .cs-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-697 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-697 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-697 {
    flex-direction: column;
  }
  #cta-697 .cs-button-solid {
    width: 50%;
  }
  #cta-697 .cs-title {
    color: #000;
    font-size: 2.75em;
    text-align: center;
  }
  #cta-697 .cs-content {
    text-align: left;
    flex-direction: column;
    justify-content: space-between;
  }
}