/* PAGE-SPECIFIC STYLES FOR THE ABOUT PAGE */
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr {
    padding: var(--sectionPadding);
    position: relative;
  }
  #sbsr .cs-wave {
    width: 110%;
    height: 400px;
    position: absolute;
    overflow: hidden;
    top: 0px;
    transform: translateX(-20px);
    transition: filter 0.3s;
    z-index: -1;
  }
  #sbsr .cs-wave-bottom {
    width: 110%;
    height: 100px;
    position: absolute;
    overflow: hidden;
    bottom: 0px;
    transform: translateX(-20px);
    transition: filter 0.3s;
    z-index: -1;
  }
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.6em);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-1em);
    }
    100% {
      transform: translateY(0);
    }
  }
  #sbsr .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr .cs-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;
  }
  #sbsr .cs-color {
    color: var(--secondary);
  }
  #sbsr .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbsr .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr .cs-image-group {
    /* this is how we can scale entire groups using ems.  Font size is tied to the view width, so as the screen gets bigger, so does the font size, and this scales up and down the elements with em values.  Then it stops growing once the font size reaches the defined value of 1em (16px which is default on the html element). Font size changes at desktop */
    font-size: min(2.3vw, .875em);
    /* all values are done in ems, not rems, so we can scale the group with a font size min/max equation */
    width: 39.375em;
    height: 51.0625em;
    position: relative;
    /* pushes it to the top in the first position */
    order: -1;
  }
  #sbsr .cs-picture {
    display: block;
    position: absolute;
  }
  #sbsr .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 30px -10px var(--secondary);
  }
  #sbsr .cs-picture-large {
    width: 29.75em;
    height: 42.3125em;
    top: 4.375em;
    right: 5em;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #sbsr .cs-content {
    width: 51%;
    max-width: 34.375rem;
  }
  #sbsr .cs-image-group {
    font-size: min(1.1vw, 1em);
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr .cs-wave {
    filter: grayscale(1) brightness(10%);
  }
  body.dark-mode #sbsr .cs-wave-bottom {
    filter: grayscale(1) brightness(23%);
  }
  body.dark-mode #sbsr .cs-title,
  body.dark-mode #sbsr .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbsr .cs-image-group:before {
    background-color: var(--secondary);
    opacity: 0.3;
  }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1 {
    padding: var(--sectionPadding);
    padding-top: 0;
    background-color: #7286d3;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #steps-1 .cs-color {
    color: var(--pink);
  }
  #steps-1 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 44rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1 .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-1 .cs-title,
  #steps-1 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #steps-1 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
  }
  #steps-1 .cs-item {
    text-align: center;
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  #steps-1 .cs-item:nth-of-type(even):after {
    /* scaleX -1 flips it horizontally */
    transform: rotate(-135deg) scaleX(-1);
  }
  #steps-1 .cs-picture {
    margin-bottom: 1.5rem;
    width: 5.5rem;
    height: 5.5rem;
    border: 1px solid rgba(255, 252, 243, 0.5);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary);
  }
  #steps-1 .cs-icon {
    width: 4.375rem;
    height: auto;
    display: block;
  }
  #steps-1 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--bodyTextColorWhite);
  }
  #steps-1 .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    max-width: 21.375rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1 .cs-container {
    max-width: 80rem;
  }
  #steps-1 .cs-item {
    grid-column: span 4;
  }
  #steps-1 .cs-item:nth-of-type(1):after {
    transform: rotate(45deg);
  }
  #steps-1 .cs-item:nth-of-type(2):after {
    transform: rotate(135deg) scaleX(-1);
  }
  #steps-1 .cs-item:after {
    margin: 0;
    position: absolute;
    right: -3rem;
    top: 0;
    transform: rotate(45deg);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-1 {
    background-color: #202020;
  }
}