/* PAGE-SPECIFIC STYLES FOR THE HOME PAGE */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #hero-1349 {
    /* 250px - 500px - leaving extra space for the navigation */
    padding: clamp(15.625rem, 35.95vw, 25rem) 1rem 0;
    /* 200px - 250px */
    padding-bottom: clamp(1.5rem, 3.5vw, 3.625rem);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1349:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 30%;
    background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(rgba(0, 0, 0, 0)));
    background: -o-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-1349 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  #hero-1349 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #hero-1349 .cs-topper {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    display: block;
  }
  #hero-1349 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 20ch;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }
  #hero-1349 .cs-text {
    font-size: 1.25rem;
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #fff;
  }
  #hero-1349 .cs-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: #9034c9;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-1349 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #2cccf2;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1349 .cs-button-solid:hover {
    color: #ffffff;
  }
  #hero-1349 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1349 .cs-bubbles {
    /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
    font-size: min(2vw, .5em);
    position: absolute;
    z-index: -1;
  }
  #hero-1349 .cs-bubbles1 {
    width: 42.5em;
    height: 45.25em;
    right: -11.875rem;
    /* changes to 172 at large desktop */
    top: 0;
  }
  #hero-1349 .cs-bubbles1:before {
    /* white border bubble */
    content: "";
    width: 38.875em;
    height: 38.875em;
    background: transparent;
    border: 1px solid #a337cb;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1349 .cs-bubbles1:after {
    /* orange bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    background: #f6a94e;
    opacity: 0.7;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1349 .cs-bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* changes to 160px at larger desktop */
    left: -7.5rem;
    /* removed at larger desktop */
    bottom: -3.125rem;
  }
  #hero-1349 .cs-bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 1px solid #a337cb 35%;
    border: 1px solid #f6a94e;
    border-radius: 50%;
    opacity: 0.9;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1349 .cs-bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: #ef4f60;
    opacity: 0.7;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 2.5rem;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero-1349 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1349 .cs-background:before {
    /* 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-1349 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1349 .cs-container {
    align-items: flex-start;
  }
  #hero-1349 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #hero-1349 .cs-bubbles {
    font-size: 1em;
  }
  #hero-1349 .cs-bubbles1 {
    /* changes to auto at large desktop */
    right: -26.75rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1349 .cs-bubbles1 {
    /* 200px - 450px */
    margin-left: clamp(12.5rem, 20vw, 28.125rem);
    top: 10.75rem;
    right: auto;
    left: 50%;
  }
}
/* Large Desktop Parallax Effect - 1600px */
@media only screen and (min-width: 100rem) {
  #hero-1349 .cs-background {
    background: url("/assets/images/hero-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  #hero-1349 .cs-background img {
    display: none;
  }
}
/* Larger Desktop - 1800px */
@media only screen and (min-width: 112.5rem) {
  #hero-1349 .cs-bubbles2 {
    margin-right: 50rem;
    right: 50%;
    left: auto;
    top: 13.125rem;
    bottom: auto;
  }
}
/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1131 {
    padding: var(--sectionPadding);
  }
  #services-1131 .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-1131 .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-1131 .cs-topper {
    color: #767676;
  }
  #services-1131 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #services-1131 .cs-item {
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 1rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, border-color 0.3s;
  }
  #services-1131 .cs-item:hover {
    box-shadow: 0px 4px 120px 0px rgba(0, 0, 0, 0.12);
    border-color: transparent;
  }
  #services-1131 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1131 .cs-image-group {
    width: 6.25rem;
    height: auto;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
  }
  #services-1131 .cs-icon {
    width: 3rem;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #services-1131 .cs-graphic {
    width: 100%;
    height: auto;
  }
  #services-1131 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #services-1131 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
}
.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  margin: 0 auto 1rem;
  color: #fff;
  position: relative;
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1131 .cs-item {
    text-align: left;
    align-items: flex-start;
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1131 .cs-item {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1131 .cs-item {
    background-color: var(--dark);
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #services-1131 .cs-item:hover .cs-h3 {
    color: var(--secondary);
  }
  body.dark-mode #services-1131 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #services-1131 .cs-title,
  body.dark-mode #services-1131 .cs-text,
  body.dark-mode #services-1131 .cs-h3,
  body.dark-mode #services-1131 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1131 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1131 .cs-graphic {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1525 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #contact-1525 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #contact-1525 .cs-content {
    /* set text aling 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;
  }
  #contact-1525 .cs-title {
    margin: 0;
  }
  #contact-1525 .cs-form {
    width: 100%;
    max-width: 52.875rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
  }
  #contact-1525 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-column: span 12;
    gap: 0.25rem;
  }
  #contact-1525 .cs-input,
  #contact-1525 .cs-select {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding: 0 1.5rem;
    color: var(--headerColor);
    border-radius: 0.5rem;
    background-color: #f7f7f7;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
  #contact-1525 .cs-input:hover,
  #contact-1525 .cs-select:hover {
    border-color: var(--secondary);
  }
  #contact-1525 .cs-input:focus,
  #contact-1525 .cs-select:focus {
    outline: 1px solid var(--secondary);
  }
  #contact-1525 .cs-input::placeholder,
  #contact-1525 .cs-select::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-1525 .cs-textarea {
    /* 120px - 192px */
    min-height: clamp(7.5rem, 28vw, 12rem);
    padding-top: 1.5rem;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6vw, 4rem);
    font-family: inherit;
  }
  #contact-1525 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 3.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: #9034c9;
    border-radius: 3.125rem;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #contact-1525 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #2cccf2;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #contact-1525 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1525 .cs-submit {
    text-transform: uppercase;
    min-width: 13.375rem;
    margin-top: -0.75rem;
    border: none;
    grid-column: span 12;
  }
  #contact-1525 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-1525 .cs-floater1 {
    /* 157px - 312px */
    width: clamp(9.8125rem, 20vw, 19.5rem);
    height: auto;
    position: absolute;
    top: -2rem;
    left: -4rem;
    z-index: -1;
    transform: rotate(-10deg);
  }
  #contact-1525 .cs-floater2 {
    /* 72px - 200px */
    width: clamp(4.5rem, 15vw, 12.5rem);
    height: auto;
    position: absolute;
    bottom: 12.5rem;
    right: -2.75rem;
    z-index: -1;
    transform: rotate(-10deg);
  }
  #contact-1525 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #contact-1525 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-1525 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #contact-1525 .cs-label {
    grid-column: span 6;
  }
  #contact-1525 .cs-message {
    grid-column: span 12;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #contact-1525 .cs-floater1 {
    top: 11.25rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #contact-1525 .cs-title,
  body.dark-mode #contact-1525 .cs-text,
  body.dark-mode #contact-1525 .cs-label {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #contact-1525 .cs-input,
  body.dark-mode #contact-1525 .cs-select {
    background-color: var(--medium);
    color: var(--bodyTextColorWhite);
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #contact-1525 .cs-input:hover,
  body.dark-mode #contact-1525 .cs-select:hover {
    border-color: var(--secondary);
  }
  body.dark-mode #contact-1525 .cs-input::placeholder,
  body.dark-mode #contact-1525 .cs-select::placeholder {
    color: #fff;
    opacity: 0.5;
  }
  body.dark-mode #contact-1525 .cs-background {
    opacity: 0.3;
  }
}