/************ MOBILE - 360PX *************/
/*****************************************/
@media only screen and (min-width: 0em) {
    /************** CONTENT ******************/
    /*****************************************/
    @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);
    }
}
    #content {
        padding: var(--sectionPadding);
        background-color: #FFF;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #content .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 40px - 64px */
        gap: clamp(2.5rem, 4vw, 4rem);
        position: relative;
    }
    #content .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #content h1 {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: center;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
        color: var(--textBlack);
        position: relative;
    }
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    #content h6 {
        font-weight: 700;
        text-align: center;
        margin: 0 0 1rem 0;
        color: var(--primaryDark);
    }
    #content h2 {
        font-size: 2rem;
        margin-top: 2rem;
    }
    #content h3 {
        font-size: 1.5rem;
        color: #686868;
        text-align: left;
    }
    #content h4,
    #content h5,
    #content h6 {
        font-size: 1.25rem;
    }
    #content .button-solid {
        margin-bottom: 2rem;
    }
    #content .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(2.9vw, 0.9em);
      position: absolute;
      z-index: -1;
    }
    #content .bubbles1 {
      width: 42.5em;
      height: 50.25em;
      right: -11.875rem;
      /* changes to 172 at large desktop */
      bottom: -37.25rem;
    }
    #content .bubbles1:before {
      /* white border bubble */
      content: "";
      width: 38.875em;
      height: 38.875em;
      background: transparent;
      border: 2px solid var(--accentColor);
      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;
    }
    #content .bubbles1:after {
      /* purple bubble */
      content: "";
      width: 34.125em;
      height: 34.125em;
      opacity: 0.8;
      border-radius: 50%;
      border-color: #1a1a1a;
      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;
      display: none;
    }
    #content .no-margin {
        margin: 0;
    }
    #content p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #content p:last-of-type {
        margin-bottom: 2rem;
    }
    #content p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
        filter: brightness(120%);
    }
    #content ol,
    #content ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #content ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #content ul li:before {
        /* custom list bullet */
        content: '';
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #content img {
        width: 100%;
        height: auto;
        display: block;
    }
    #content .image-group {
        width: 32.625em;
        height: 33.75em;
        display: none;
        position: relative;
        z-index: 1;
    }
    #content .background {
        width: 100%;
        height: 100%;
        border-radius: 2.5em;
        border: 10px solid var(--primaryDark);
        /* clips the corners of the children around the border radius */
        overflow: hidden;
        /* makes it cover the parent dimensions */
        object-fit: cover;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #content .background img {
        width: 100%;
        height: 100%;
        /* makes it cover the parent like a backgorund image */
        object-fit: cover;
        display: block;
    }
    #content .floater {
        width: 44.375em;
        height: auto;
        position: absolute;
        left: 9.375em;
        top: 25em;
        z-index: -1;
        animation-name: floatAnimation2;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}

/************ TABLET - 768PX *************/
/*****************************************/
@media only screen and (min-width: 48rem) {

    /*************** CONTENT *****************/
    /*****************************************/
    #content .container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
      #content .content {
        width: 60%;
        max-width: 43.375rem;
        /* prevents flexbox from squishing it */
        flex: none;
    }
      #content .image-group {
        font-size: min(1.3vw, 1em);
        display: block;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}

/************ DESKTOP - 1024PX ***********/
/*****************************************/
@media only screen and (min-width: 64rem) {
    /************** BANNER *******************/
    /*****************************************/
    #banner .int-title{
        padding: clamp(2.75rem, 25vw ,3rem);
    }
    /*************** CONTENT *****************/
    /*****************************************/
    #content .content {
        width: 53%;
    }
}

/************** DARK MODE ****************/
/*****************************************/
body.dark-mode #content {
  background-color: var(--dark);
}
body.dark-mode #content .title,
body.dark-mode #content .text {
  color: var(--bodyTextColorWhite);
}
body.dark-mode #content .background {
  border-color: var(--accentColor);
}

/*************** SETPS *******************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps {
    margin-bottom: 4rem;
    padding: var(--sectionPadding);
    position: relative;
  }
  #steps .container {
    /* changes to 1440px at tablet */
    max-width: 34.375rem;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    gap: 1rem;
  }
  #steps .text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    max-width: 21.875rem;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #steps .text {
    max-width: 39.375rem;
  }
  #steps .card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #steps .item {
    list-style: none;
    background-color: #fff;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #steps .item:hover {
    transform: translateY(-0.4375rem);
  }
  #steps .item::after {
    content: "";
    width: 1.25rem;
    height: 5rem;
    margin: 1rem auto;
    background-image: url(https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/arrow-orange.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    display: block;
    position: relative;
    z-index: 10;
  }
  #steps .item:nth-of-type(2)::after {
    transform: scaleX(-1);
  }
  #steps .item:last-of-type::after {
    display: none;
  }
  #steps .link {
    text-decoration: none;
    display: block;
  }
  #steps .number {
    font-size: 1.25rem;
    font-weight: bold;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    color: #fff;
    background-color: var(--accentColor);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps .h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    word-break: normal;
    margin: 0 0 0.75rem 0;
    color: var(--textBlack);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  #steps .item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--textBlack);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps .container {
    max-width: 90rem;
    gap: 6.25rem;
  }
  #steps .content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #steps .item {
    grid-column: span 3;
  }
  #steps .item::after {
    width: 7.5rem;
    height: 1.75rem;
    margin: 0;
    background-image: url(https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/arrow-orange-large.svg);
    position: absolute;
    bottom: -2.5rem;
    left: clamp(8.5rem, 18vw, 18.5rem);
  }
  #steps .item:nth-of-type(2)::after {
    top: -3.75rem;
    transform: rotateX(180deg);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps .topper {
    color: var(--darkModeAccent);
  }
  body.dark-mode #steps .title,
  body.dark-mode #steps .text,
  body.dark-mode #steps .h3,
  body.dark-mode #steps .item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps .text,
  body.dark-mode #steps .item-text {
    opacity: 0.8;
  }
  body.dark-mode #steps .item {
    background-color: var(--dark);
  }
}