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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1956 {
    padding: var(--sectionPadding);
    /* 100px - 200px */
    padding-top: clamp(6.25rem, 8vw, 12.5rem);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1956 .cs-container {
    width: 100%;
    max-width: 117.5rem;
    margin: auto;
    padding: var(--sectionPadding);
    /* 12px - 80px */
    padding-left: clamp(0.75rem, 3vw, 5rem);
    padding-right: clamp(0.75rem, 3vw, 5rem);
    background-color: #f7f7f7;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #hero-1956 .cs-card-container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #hero-1956 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    max-width: none;
    margin-bottom: 1.25re-m;
  }
  #hero-1956 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
  }
  #hero-1956 .cs-item {
    list-style: none;
    /* 272px - 320px */
    height: clamp(17rem, 34vw, 20rem);
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    border-radius: 1.25rem;
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #hero-1956 .cs-item:hover {
    border-color: var(--primary);
  }
  #hero-1956 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #hero-1956 .cs-item:hover .cs-icon {
    transform: rotateY(360deg);
  }
  #hero-1956 .cs-item:nth-of-type(3) {
    max-height: 18rem;
    /* 16px - 32px */
    padding: clamp(1rem, 2vw, 2rem);
    background-color: #fff;
    justify-content: space-between;
    grid-column: span 12;
  }
  #hero-1956 .cs-item-content {
    text-align: left;
    list-style: none;
    width: 100%;
    /* 16px - 32px */
    padding: clamp(1rem, 4vw, 2rem);
    background-color: #fff;
    border-radius: 1.25rem;
    grid-column: span 12;
    display: flex;
    /* 60px - 110px */
    gap: clamp(3.75rem, 12vw, 8.875rem);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #hero-1956 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #hero-1956 .cs-item-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.25rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  #hero-1956 .cs-item-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }
  #hero-1956 .cs-h3,
  #hero-1956 .cs-h4 {
    /* 31px - 39px */
    font-size: clamp(1.9375rem, 2vw, 2.4375rem);
    line-height: 1.2em;
    margin: 0;
    max-width: 29.875rem;
    color: var(--headerColor);
    z-index: 3;
    transition: color 0.3s;
  }

  #hero-1956 .cs-wrapper {
    width: 100%;
    /* 304px - 400px top */
    /* 12px - 20px left and right */
    padding: clamp(19rem, 30vw, 25rem) clamp(0.75rem, 2vw, 1.25rem) 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-1956 .cs-card-group2 {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
    z-index: 2;
  }
  #hero-1956 .cs-item2 {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.5vw, 2rem);
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #hero-1956 .cs-item2:hover .cs-icon-wrapper {
    background-color: var(--primary);
    border-color: var(--primary) !important;
  }
  #hero-1956 .cs-item2:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #hero-1956 .cs-item2:nth-of-type(2) {
    background: rgba(255, 255, 255, 0.36);
    backdrop-filter: blur(16px);
  }
  #hero-1956 .cs-item2:nth-of-type(2) .cs-h4 {
    color: #fff;
  }
  #hero-1956 .cs-item2:nth-of-type(2) .cs-icon-wrapper {
    border: 1px solid #fff;
  }
  #hero-1956 .cs-item2:nth-of-type(2) .cs-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  #hero-1956 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    /* 40px - 110px */
    gap: clamp(2.5rem, 12vw, 6.875rem);
  }
  #hero-1956 .cs-icon-wrapper {
    /* 32px - 48px */
    width: 3.5rem;
    height: 3.5rem;
    margin-left: auto;
    /* making this element content-box so padding doesn't apply to the height/width dimensions */
    box-sizing: content-box;
    border: 1px solid #000;
    border-radius: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #hero-1956 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #hero-1956 .cs-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.25rem;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1956 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1956 .cs-item {
    text-align: left;
    max-height: 20.6875rem;
    grid-column: span 6;
  }
  #hero-1956 .cs-item-flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #hero-1956 .cs-item2 {
    grid-column: span 6;
  }
}
/* Large Desktop 1200px */
@media only screen and (min-width: 75rem) {
  #hero-1956 .cs-container {
    max-width: 117.5rem;
    flex-direction: row;
    align-items: stretch;
  }
  #hero-1956 .cs-wrapper {
    max-width: 57.75rem;
    padding-top: 0;
    height: auto;
    justify-content: flex-end;
  }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1376 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    /* clips the waves and lines from cause overflow issues */
    overflow: hidden;
  }
  #steps-1376 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1376 .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;
  }
  #steps-1376 .cs-topper {
    color: #767676;
  }
  #steps-1376 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #steps-1376 .cs-group1,
  #steps-1376 .cs-group2 {
    /* the contents of this div are no longer its children. This div acts as if it doesn't exist and their content is now children of the next level parent, in this case, the cs-card-group. That way they can all be arranged together as children under 1 parent div instead of children in two different parent divs */
    display: contents;
  }
  #steps-1376 .cs-card-group {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #steps-1376 .cs-group1 {
    display: contents;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(1) {
    order: 1;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(2) {
    order: 3;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(3) {
    order: 5;
  }
  #steps-1376 .cs-group2 {
    display: contents;
  }
  #steps-1376 .cs-group2 .cs-item:nth-of-type(1) {
    order: 2;
  }
  #steps-1376 .cs-group2 .cs-item:nth-of-type(2) {
    order: 4;
  }
  #steps-1376 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 15rem;
    height: 15rem;
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    background-color: #f4f4f4;
    /* clips the :before element from being clickable when it's outside the item and triggering the hover animation */
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #steps-1376 .cs-item:before {
    content: "";
    width: 9.25rem;
    height: 9.25rem;
    background: #fff;
    opacity: 0;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: -7.25rem;
    transform: translateY(6.25rem);
    transition: left 0.3s, transform 0.3s, opacity 0.3s;
  }
  #steps-1376 .cs-item:hover {
    background-color: var(--primary);
    border-color: var(--primary);
  }
  #steps-1376 .cs-item:hover:before {
    opacity: 0.2;
    left: -1rem;
    transform: translateY(0);
  }
  #steps-1376 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #steps-1376 .cs-item:hover .cs-h3,
  #steps-1376 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #steps-1376 .cs-item:hover .cs-text {
    opacity: 0.8;
  }
  #steps-1376 .cs-picture {
    width: 6.25rem;
    height: auto;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps-1376 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #steps-1376 .cs-h3 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #steps-1376 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
  #steps-1376 .cs-waves {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1376 .cs-card-group {
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
  }
  #steps-1376 .cs-group1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #steps-1376 .cs-group2 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 3rem;
  }
  #steps-1376 .cs-item {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps-1376 .cs-waves {
    width: 4.4375rem;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #steps-1376 .cs-waves img {
    width: 100%;
    height: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #steps-1376 .cs-card-group {
    flex-direction: column;
  }
  #steps-1376 .cs-group1 {
    width: 100%;
    /* -8px to -30px, we put the clamp in a calc function to turn it into a negative number and pull down to cause the overlapping effect */
    margin-bottom: calc(clamp(0.5rem, 2vw, 1.875rem) * -1);
    flex-direction: row;
  }
  #steps-1376 .cs-group2 {
    width: 100%;
    /* -8px to -30px */
    margin-top: calc(clamp(0.5rem, 2vw, 1.875rem) * -1);
    flex-direction: row;
  }
  #steps-1376 .cs-waves {
    width: 110vw;
    max-width: 120rem;
    height: auto;
  }
  #steps-1376 .cs-waves:before {
    /* left continuation line */
    content: "";
    width: 50vw;
    height: 4px;
    background: #e8e8e8;
    opacity: 1;
    display: block;
    position: absolute;
    top: 5.25rem;
    right: 100%;
  }
  #steps-1376 .cs-waves:after {
    /* Right continuation line */
    content: "";
    width: 50vw;
    height: 4px;
    background: #e8e8e8;
    opacity: 1;
    display: block;
    position: absolute;
    top: 5.25rem;
    left: 100%;
  }
}