/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* 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);
    }
}
    #steps-1210 {
      padding: var(--sectionPadding);
      background-color: #060606;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    #steps-1210 .cs-container {
      /* changes to 1280px at tablet */
      max-width: 44rem;
      width: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      background-color: #1a1a1a;
      border-radius: clamp(2rem, 4vw, 3rem);
      padding: 30px;
    }
    #steps-1210 .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-1210 .cs-title {
      color: var(--bodyTextColorWhite);
    }
    #steps-1210 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      text-align: inherit;
      max-width: 40.625rem;
      width: 100%;
      margin: 0;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
    }
    #steps-1210 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.25rem;
    }
    #steps-1210 .cs-item {
      text-align: center;
      list-style: none;
      /* 8px - 48px */
      padding: 0 clamp(0.5rem, 5vw, 3rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      grid-column: span 12;
    }
    #steps-1210 .cs-item:last-of-type:after {
      display: none;
    }
    #steps-1210 .cs-item:after {
      /* content property isn't set until 768px, to hide the line on mobile */
      /* 120px - 200px */
      content: "";
      width: clamp(7.5rem, 14vw, 12.5rem);
      height: 5.625rem;
      background: url("../images/dashed-line.webp");
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 1;
      display: none;
      position: absolute;
      top: 0;
      left: clamp(11.5rem, 24vw, 20rem);
    }
    #steps-1210 .cs-number {
      font-size: 1.25rem;
      font-weight: bold;
      width: 5.5rem;
      height: 5.5rem;
      /* 16px - 32px */
      margin-bottom: clamp(1rem, 4vw, 2rem);
      color: var(--primary);
      background-color: #282828;
      border: 1px solid #404040;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #steps-1210 .cs-icon {
      width: 2.5rem;
      height: auto;
      display: block;
    }
    #steps-1210 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--bodyTextColorWhite);
    }
    #steps-1210 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      text-align: inherit;
      max-width: 25.8125rem;
      margin: 0;
      color: var(--bodyTextColorWhite);
    }
    #steps-1210 .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: var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #steps-1210 .cs-button-solid:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #ffffff;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #steps-1210 .cs-button-solid:hover {
        color: var(--primary);
    }
    #steps-1210 .cs-button-solid:hover:before {
        width: 100%;
    }
    
    #steps-1210 .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, 0.5em);
        position: absolute;
        z-index: -1;
    }
    #steps-1210 .cs-bubbles1 {
        width: 42.5em;
        height: 45.25em;
        right: -11.875rem;
        /* changes to 172 at large desktop */
        top: 0;
    }
    #steps-1210 .cs-bubbles1:before {
        /* white border bubble */
        content: "";
        width: 38.875em;
        height: 38.875em;
        background: transparent;
        border: 1px solid #fff;
        border-radius: 50%;
        opacity: 1;
        position: absolute;
        display: block;
        top: 35px;
        left: 0;
        animation-name: floatAnimation;
        animation-duration: 7s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #steps-1210 .cs-bubbles1:after {
        /* blue bubble */
        content: "";
        width: 34.125em;
        height: 34.125em;
        background: var(--primary);
        opacity: 0.8;
        border-radius: 50%;
        display: block;
        position: absolute;
        bottom: -35px;
        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;
    }
    
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #steps-1210 .cs-container {
      max-width: 80rem;
    }
    #steps-1210 .cs-item {
      grid-column: span 4;
    }
    #steps-1210 .cs-item:after {
      display: block;
    }
    #steps-1210 .cs-bubbles1 {
        width: 42.5em;
        height: 50.25em;
        right: -0.875rem;
        /* changes to 172 at large desktop */
        top: 0;
    }
    #steps-1210 .cs-bubbles1:after {
        width: 20rem;
        height: 20rem;
    }
  }