/************ 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::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/img/blob-scene-haikei-web-dev-m.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.15;
    z-index: 0;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
    }
  #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: transparent;
    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);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #steps::before {
    background-image: url("/assets/img/blob-scene-haikei-web-dev.svg");
    background-position: center;
    background-size: cover;
    opacity: 0.15;
        mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 8%,
      black 22%,
      black 78%,
      rgba(0, 0, 0, 0.25) 92%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 8%,
      black 22%,
      black 78%,
      rgba(0, 0, 0, 0.25) 92%,
      transparent 100%
    );
    }
}
/* 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: 1;
  }
  body.dark-mode #steps .item {
    background-color: transparent;
  }
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-285 {
        /* centers the button */
        text-align: center;
        padding: var(--sectionPadding);
    }
    #services-285 .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-285 .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-285 .text {
        max-width: 80rem;
    }
    #services-285 .card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        row-gap: 1rem;
    }
    #services-285 .item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        /* 32px - 40px top & bottom */
        /* 28px - 40px left & right */
        padding: clamp(2rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
        background-color: #FFF;
        color: var(--textBlack);
        border: 1px #000 solid;
        border-radius: 2rem;
        box-shadow:  0 4px 12px 0 rgba(0, 0, 0, 0.25);
        box-sizing: border-box;
        transition:
            background-color 0.3s,
            transform 0.3s;
    }
    #services-285 .item:hover {
        background-color: #05432b27;
        transform: translateY(-0.4375rem);
    }
    #services-285 .item:hover .picture:before {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    #services-285 .item .h3,
    #services-285 .item .item-text {
        color: var(--textBlack);
    }
    #services-285 .link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-285 .picture {
        margin: 0;
        margin-bottom: 1.5rem;
        /* 76px - 96px */
        width: clamp(4.75rem, 4vw, 6rem);
        height: clamp(4.75rem, 4vw, 6rem);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: var(--accentColor);
        position: relative;
        z-index: 1;
    }
    #services-285 .picture:before {
        /* floating hover box */
        content: "";
        width: 130%;
        height: 130%;
        background-color: transparent;
        opacity: 0;
        border-radius: 50%;
        border: 2px solid var(--accentColor);
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        z-index: 10;
        transition:
            width 0.5s,
            height 0.5s,
            opacity 0.4s;
    }
    #services-285 .icon {
        /* 45px - 54px */
        height: clamp(2.8125rem, 3vw, 3.375rem);
        width: auto;
    }
    #services-285 .h3 {
        font-size: 1.25rem;
        font-weight: 900;
        text-align: center;
        line-height: 1.2em;
        margin: 0;
        margin-bottom: 0.75rem;
        color: var(--textLight);
        transition: color 0.3s;
    }
    #services-285 .item-text {
        font-size: 1rem;
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        color: var(--textLight);
        transition: color 0.3s;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-285 .card-group {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        /* 16px - 20px */
        column-gap: clamp(1rem, 2vw, 1.25rem);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #services-285 .title,
    body.dark-mode #services-285 .text,
    body.dark-mode #services-285 .h3,
    body.dark-mode #services-285 .item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-285 .picture {
        background-color: var(--accentColor);
    }
    body.dark-mode #services-285 .item {
        background-color: var(--medium);
        position: relative;
        transition:
            background-color 0.3s,
            transform 0.3s;
    }
    body.dark-mode #services-285 .item:before {
        /* floating hover box */
        content: "";
        width: 100%;
        height: 100%;
        background-color: transparent;
        opacity: 0;
        border: 2px solid #fff;
        border-radius: 2rem;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* prevents the mouse from interacting with it */
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.4s;
    }
    body.dark-mode #services-285 .item:hover {
        background-color: var(--dark);
        transform: none;
    }
    body.dark-mode #services-285 .picture:before {
        border-color: #FFF;
    }
    body.dark-mode #services-285 .item:hover:before {
        opacity: 1;
    }
    body.dark-mode #services-285 .item:hover .picture:before {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    body.dark-mode #services-285 .item:hover .h3,
    body.dark-mode #services-285 .item:hover .item-text {
        color: #fff;
    }
}