/************ MOBILE - 360PX *************/
/*****************************************/
@media only screen and (min-width: 0rem) {
  /************** HERO/LANDING *************/
  /*****************************************/
  @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);
    }
  }
  @keyframes bounce {
      0%,20%,50%,80%,100% {
          transform: translateY(0);
      }
      40% {
          transform: translateY(6px);
      }
      60% {
          transform: translateY(3px);
      }
  }
  @keyframes pulse {
      0% {
          box-shadow: 0 0 0 0 rgba(255,255,255,.35);
      }
      70% {
          box-shadow: 0 0 0 14px rgba(255,255,255,0);
      }
      100% {
          box-shadow: 0 0 0 0 rgba(255,255,255,0);
      }
  }
  #hero {
    /* 250px - 500px - leaving extra space for the navigation */
    padding: clamp(10rem, 30vw, 17rem) 1rem 0;
    padding-bottom: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: var(--heroBG);
  }
  #hero .container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #hero .content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #hero .title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 20ch;
    margin: 0 0 1rem 0;
    color: #fff;
    position: relative;
  }
  #hero .text {
    font-size: 1.1rem;
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #e8e8e8;
  }
  #hero .button-solid {
    font-size: 1.25rem;
    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(--accentColor);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero .button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero .button-solid:hover {
    color: var(--accentColor);
  }
  #hero .button-solid:hover:before {
    width: 100%;
  }
  #hero .picture {
    width: 100%;
    /* 427px - 621px */
    max-width: clamp(26.6875rem, 75vw, 38.8125rem);
    /* reserve space to prevent CLS */
    aspect-ratio: 1216 / 911;
    display: block;
    position: relative;
    z-index: 7;
  }
  #hero .picture img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
  #button-box-838 {
    width: 100%;
    max-width: calc(39.375rem);
    margin-bottom: calc(2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(1.5rem);
  }
  #button-box-838 .button-solid {
      font-size: 1.25rem;
      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(--accentColor);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: color 0.3s;
  }
  #button-box-838 .button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #FFF;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #button-box-838 .button-solid:hover:before {
      width: 100%;
  }
  #button-box-838 .button-transparent {
      font-size: 1.25rem;
      line-height: 3.5rem;
      text-decoration: none;
      font-weight: 700;
      overflow: hidden;
      margin: 0;
      text-align: center;
      color: var(--textLight);
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: transparent;
      border: 3px solid var(--accentColor);
      border-radius: 1.875rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition:
          background-color 0.3s,
          color 0.3s;
  }
  #button-box-838 .button-transparent:hover {
      background-color: var(--textLight);
      color: var(--accentColor);
  }
  #hero .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;
  }
  #hero .bubbles1 {
    width: 42.5em;
    height: 45.25em;
    right: -11.875rem;
    /* changes to 172 at large desktop */
    bottom: -6.25rem;
  }
  #hero .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;
  }
  #hero .bubbles1:after {
    /* purple bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    opacity: 0.8;
    border-radius: 50%;
    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;
  }
  #hero .bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* changes to 160px at larger desktop */
    left: -16.25rem;
    /* removed at larger desktop */
    top: 3.75rem;
  }
  #hero .bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 2px solid var(--accentColor);
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero .bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: #240438;
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 2.5rem;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    display: none;
  }
  #hero .scroll-down {
    display: none;
  }
  /********** SERVICES WITH CARDS **********/
  /*****************************************/
  #services {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: var(--sectionPadding);
    background: #f5f8f5;
    scroll-margin-top: 6rem;
  }
  #services .container {
    width: 100%;
    /* changes to 1440px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services .content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services .topper {
    color: var(--textBlack);
    font-weight: 500;
  }
  #services .title {
    max-width: 30ch;
    margin-bottom: 1rem;
    color: var(--textBlack);
  }
  #services .text {
    color: var(--textBlack);
  }
  #services .card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #services .item {
    list-style: none;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e8e8e4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
  }
  #services .item:hover {
    transform: translateY(-8px);
    border-color: #d6dfd8;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  }
  #services .link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--textBlack);
  }
  #services .icon-container {
    background-color: #eef6f1;
    width: 5.5rem;
    height: 5.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    border: 2px solid #FFF;
    align-self: center;
  }
  #services .icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;

    /* keep/remove this depending on your SVG color */
    /* filter: brightness(0) invert(1); */
  }
  #services .h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--textBlack);
    font-weight: 800;
  }
  #services .item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--textBlack);
  }
  #services .button-solid {
    margin: 1rem;
    align-self: center;
  }
  /************* ABOUT SECTION *************/
  /*****************************************/
  #about {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: var(--sectionPadding);
    background-color: var(--bgLight);
  }
  #about .container {
    width: 100%;
    /* changes to 1440px on desktop */
    /* max-width: 43.75rem; */
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #about .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;
  }
  #about .topper {
    color: var(--textBlack);
    margin-bottom: 1.25rem;
  }
  #about .title {
    max-width: 30ch;
    color: var(--textBlack);
  }
  #about .text {
    color: var(--textBlack);
  }
  #about .card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 16px - 20px */
    /* gap: clamp(1rem, 2.3vw, 1.25rem); */
    gap: 6rem;
    position: relative;
  }
  #about .item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #about .picture {
    width: 100%;
    max-width: 25rem;
    aspect-ratio: 0.80589681;
    margin: 0 0 0.5rem 0;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e8e4;
    box-shadow:
        0 10px 30px rgba(0,0,0,.06),
        0 24px 50px rgba(0,0,0,.05);
    display: block;
    position: relative;
    z-index: 1;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

#about .picture:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10),
        0 32px 70px rgba(0,0,0,.08);
  }
  #about .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #about .image-info-box{
    width: 90%;
    margin: -3.75rem 0 0;
    padding: 1.5rem;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e8e8e4;
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
  }
  #about .name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--textBlack);
  }
  #about .job-title {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--textBlack);
  }
  #about .image-info-box {
    max-width: 22rem;
  }
  #about .image-info-box img {
    display: block;
    max-width: 30%;
    height: auto;
    gap: 10rem;
  }
  #about .button-solid {
    font-size: 1.25rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin-top: 1.5rem;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    background-color: var(--accentColor);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #about .button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: var(--primaryDark);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #about .button-solid:hover:before {
    width: 100%;
  }
  /********** PORTFOLIO SECTION ************/
  /*****************************************/
  #portfolio {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: var(--sectionPadding);
    background-color:  var(--primaryLight);
    scroll-margin-top: 7.5rem;
  }
  #portfolio .container {
    width: 100%;
    /* changes to 1440px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #portfolio .flex {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #portfolio .topper {
    color: var(--textBlack);
    margin-bottom: 1.25rem;
  }
  #portfolio .title {
    max-width: 30ch;
    color: var(--textBlack);
    margin-bottom: 1rem;
  }
  #portfolio .overview {
    margin-bottom: 1rem;
  }
  #portfolio .text {
    color: var(--textBlack);
  }
  #portfolio .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #portfolio .card-group {
    /* max-width: fit-content; */
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
  }
  #portfolio .item {
    flex: 1 1 250px;
    max-width: 31.25rem;
    display: flex;
    align-items: stretch;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e8e8e4f4;
    border-radius: 1rem;
    box-shadow:
        0 8px 20px rgba(0,0,0,.05);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
  }
  #portfolio .link {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
  }
  #portfolio .picture,
  #portfolio .link h3,
  #portfolio .description{
    flex: 0 0 auto;
  }
  #portfolio .link h3 {
    color: var(--textBlack);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-wrap: nowrap;
  }
  #portfolio .description {
    margin: 0.4rem;
    line-height: 1.4;
    /* Keeps the buttons aligned at the bottom regardless of how text shifts. Change 4 to however many lines that need to be reserved */
    min-height: calc(1.4em * 4);

    /* Clamp to N lines, will cut text */
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: visible; */
    color: var(--textBlack);
  }
  #portfolio .button {
    margin-bottom: auto;
    display: inline-flex;
    justify-content: center;
    align-self: center;
    font-size: 1.25rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0.5rem 2rem;
    border-radius: 1.875rem;
    background-color: var(--accentColor);
    transition: background-color ease 0.3s;
  }
  #portfolio .item:hover {
    transform: translateY(-8px);
    border-color: #d6dfd8;
    box-shadow: 0 20px 45px rgba(0,0,0,.10);
  }
  #portfolio .item:hover .button {
    background-color: var(--lightAccentColor);
  }
  #portfolio .picture {
    width: 100%;
    aspect-ratio: 12/9;
    border-radius: .75rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }
  #portfolio .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /******************* BLOG ****************/
  /*****************************************/
  #blog {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--primaryLight);
  }
  #blog .container {
    width: 100%;
    /* changes to 1280px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #blog .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;
  }

  #blog .title {
    max-width: 20ch;
    color: var(--textBlack);
  }
  #blog .topper {
    color: var(--textBlack);
  }
  #blog .text {
    color: var(--textBlack);
  }
  #blog .card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  #blog .item {
    list-style: none;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
  }
  #blog .item:hover .h3,
  #blog .item:hover .date,
  #blog .item:hover .category {
    color: var(--textLight);
  }
  #blog .item:hover .item-text {
    background-color: var(--primaryDark);
  }
  #blog .item:hover .icon-wrapper {
    border-color: var(--textLight);
  }
  #blog .item:hover .icon,
  #blog .item:hover .date-icon {
      filter: brightness(1000%) grayscale(1);
  }
  #blog .item:hover .icon {
      transform: rotate(45deg);
  }
  #blog .item:hover .category::before {
      background-color: #fff;
      opacity: 0.2;
  }
  #blog .link {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      /* if one card has more content then the others, the card will stretch to fill the parent container */
      flex-grow: 1;
      gap: 1rem;
  }
  #blog .picture {
      width: 100%;
      height: 20rem;
      margin: 0;
      border-radius: 1.5rem;
      display: block;
      position: relative;
      z-index: 1;
      overflow: hidden;
  }
  #blog .picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #blog .item-text {
      padding: 1.25rem;
      background-color: #f7f7f7;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* makes the item text the element that grows to fill the container */
      flex-grow: 1;
      transition: background-color 0.3s;
  }
  #blog .h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
      line-height: 1.2em;
      text-align: left;
      margin: 0;
      color: #1a1a1a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      transition: color 0.3s;
  }
  #blog .icon-wrapper {
      width: 3rem;
      height: 3rem;
      border: 1px solid #bababa;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents the parent flexbox from shrinking the icon */
      flex-shrink: 0;
      transition: border-color 0.3s;
  }
  #blog .icon {
      width: auto;
      height: 0.75rem;
      transition:
          filter 0.3s,
          transform 0.3s;
  }
  #blog .info {
      margin: 1rem 0 0;
      padding: 1rem 0 0;
      border-top: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  #blog .date {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-align: left;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.3s;
  }
  #blog .date-icon {
      width: auto;
      height: 1.5rem;
      transition: filter 0.3s;
  }
  #blog .category {
      font-size: 0.875rem;
      /* centers the text if the category bullet has to span multiple lines */
      text-align: center;
      padding: 0.25rem 1rem;
      color: #1a1a1a;
      border-radius: 5rem;
      position: relative;
      z-index: 0;
      overflow: hidden;
  }
  #blog .category::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #e8e8e8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}

/************ TABLET - 768PX *************/
/*****************************************/
@media only screen and (min-width: 48rem) {
  /******************** HERO ***************/
  /*****************************************/
  #hero {
    /* 180px - 250px */
    padding-bottom: clamp(8.25rem, 16vw, 5.625rem);
  }
  #hero .content {
    text-align: center;
    /* width: 53%; */
    align-items: center;
  }
  #hero .picture {
    width: 100%;
    position: relative;
  }
  #hero .bubbles {
    font-size: 1em;
  }
  #hero .bubbles1 {
    /* changes to auto at large desktop */
    right: -18.75rem;
  }
  /********** SERVICES WITH CARDS **********/
  /*****************************************/
  #services .card-group {
    justify-content: space-between;
    /* makes sure every box "stretches" to be the same height as the tallest box */
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #services .item {
    width: 48.6%;
  }
  /*************** ABOUT SECTION ***********/
  /*****************************************/
  #about .card-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #about .item {
    width: 100%;
  }
  /***************** PRICING ***************/
  /*****************************************/
  #pricing .card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  #pricing .item {
    width: 100%;
    /* ensures they stay the same height if you add more content */
    align-self: stretch;
  }
  #pricing .popular {
    /* send back to its original order */
    order: unset;
  }
  #pricing #option2:before {
    top: -0.625rem;
  }
  #pricing #option2:after {
    top: -2.1875rem;
    right: -6.25rem;
  }
  /************* New Pricing ***************/
  /*****************************************/
  #pricing .container {
    max-width: 80rem;
  }
  #pricing .container .card-group {
    flex-direction: row;
    align-items: stretch;
  }
}

/************ DESKTOP - 1024PX ***********/
/*****************************************/
@media only screen and (min-width: 64rem) {
  /*************** HERO ********************/
  /*****************************************/
  #hero {
    padding: clamp(7rem, 11vw, 9rem) 1rem 5rem;
  }
  #hero .container {
    min-height: calc(100svh - 9rem);
    flex-direction: row;
    justify-content: space-between;
  }
  #hero .bubbles1 {
    width: 42.5em;
    height: 45.25em;
    right: -11.875rem;
    /* changes to 172 at large desktop */
    bottom: -6.25rem;
  }
  #hero .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;
  }
  #hero .bubbles1:after {
    /* gray bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    background: #2c2c2c;
    opacity: 0.8;
    border-radius: 50;
    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: block;
  }
  #hero .bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* changes to 160px at larger desktop */
    left: -16.25rem;
    /* removed at larger desktop */
    top: 3.75rem;
  }
  #hero .bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    border: 2px solid var(--accentColor);
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #hero .bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: #2c2c2c;
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 2.5rem;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    display: block;
  }
  #hero .scroll-down {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s ease;
    animation: pulse 2.5s infinite;
  }
  #hero .scroll-down:hover {
      transform: translateX(-50%) scale(1.08);
      border-color: white;
      background: rgba(255,255,255,.18);
  }
  #hero .scroll-down svg {
      width: 1.25rem;
      height: 1.25rem;
      stroke: white;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      animation: bounce 2s infinite;
  }
  /****************** BLOG *****************/
  /*****************************************/
  #blog .container {
      max-width: 80rem;
  }
  #blog .item {
      grid-column: span 4;
  }
}

/************ DESKTOP - 1300PX ***********/
/*****************************************/
@media only screen and (min-width: 81.25rem) {
  /************** HERO *********************/
  /*****************************************/
  #hero {
    padding: clamp(7rem, 11vw, 9rem) 1rem 5rem;
  }
  #hero .container {
    min-height: calc(100svh - 12rem);
    position: initial;
  }
  #hero .bubbles1 {
    margin-left: clamp(12.5rem, 20vw, 28.125rem);
        top: 10.75rem;
        right: auto;
        bottom: auto;
        left: 50%;
  }
  
  /************ SERVICES *******************/
  /*****************************************/
  #services .container {
    max-width: 90rem;
  }
  #services .card-group {
    justify-content: center;
  }
  #services .item {
    /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 22.5vw or 23% to get the desired sizes fit 4 in a row and then stack when you add more */
    width: clamp(23.84%, 22.5vw, 23.95%);
  }
  /**************** ABOUT  *****************/
  /*****************************************/
  #about .container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #about .content {
    text-align: left;
    width: 55%;
    flex-direction: column;
    align-items: flex-start;
  }
  #about .card-group {
    justify-content: center;
    flex-wrap: nowrap;
  }
  #about .item {
    width: 100%;
  }
  #about .button-solid {
    margin-top: 3rem;
  }
  /********** PORTFOLIO SECTION ************/
  /*****************************************/
  #portfolio .container {
    max-width: 100rem;
  }
  #portfolio .card-group {
    flex-direction: row;
    justify-content: center;
  }

  /**************** PRICING ***************/
  /*****************************************/
  #pricing .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #pricing .content {
    width: 47%;
  }
  #pricing .info {
    min-height: 27rem;
  }
  #pricing .card-group {
    justify-content: space-around;
  }
  #pricing .mobile-view {
    display: none;
  }
  #pricing .desktop-view {
    display: block;
  }
}

/* LARGE DESKTOP - PARALAX EFFECT -1600px*/
/*****************************************/
@media only screen and (min-width: 100rem) {
  #hero .background {
      background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/abstract.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
  }
  #hero .background img {
      display: none;
  }
}

/******* LARGER DESKTOP - 1800px ********/
/*****************************************/
@media only screen and (min-width: 112.5rem) {
  #hero {
    min-height: 0;
  }
  #hero .bubbles2 {
   margin-right: 50rem;
        right: 45%;
        left: auto;
        top: 13.125rem;
        bottom: auto;
    }
}

/************* DARK MODE *****************/
/*****************************************/
@media only screen and (min-width: 0rem) {
  /************** HERO/LANDING *************/
  /*****************************************/
  body.dark-mode #hero {
    background: var(--dark);
  }
  /********** SERVICES WITH CARDS **********/
  /*****************************************/
  body.dark-mode #services {
    background-color: var(--dark);
  }
  body.dark-mode #services .title,
  body.dark-mode #services .text,
  body.dark-mode #services .item-text,
  body.dark-mode #services .h3 {
    color: var(--textLight);
  }
  body.dark-mode #services .topper {
    color: var(--darkModeAccent);
  }
  body.dark-mode #services .item {
    background: var(--medium);
  }
  /************** ABOUT ********************/
  /*****************************************/
  body.dark-mode #about {
    background-color: var(--dark);
  }
  body.dark-mode #about .title,
  body.dark-mode #about .text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #about .topper {
    color: var(--darkModeAccent);
  }
  /************** PORTFOLIO ****************/
  /*****************************************/
  body.dark-mode #portfolio {
    background-color: var(--dark);
  }
  body.dark-mode #portfolio .title,
  body.dark-mode #portfolio h3,
  body.dark-mode #portfolio .text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #portfolio .topper {
    color: var(--darkModeAccent);
  }
  body.dark-mode #portfolio .item {
    background: var(--medium);
    border-color: var(--darkModeAccent);
  }
  body.dark-mode #portfolio .item:hover {
    border-color: var(--lightAccentColor);
    background-color: var(--accent);
  }
  body.dark-mode #portfolio .item:hover .button {
    background-color: var(--lightAccentColor);
  }
  /*************** PRICING *****************/
  /*****************************************/
  body.dark-mode #pricing {
    background-color: var(--dark);
  }
  body.dark-mode #pricing .title,
  body.dark-mode #pricing h3,
  body.dark-mode #pricing .text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing .topper {
    color: var(--darkModeAccent);
  }
  body.dark-mode #pricing .toggle-group,
  body.dark-mode #pricing .info {
    background-color: var(--medium);
  }
  body.dark-mode #pricing .item .flex {
    background-color: var(--dark);
    border-color: var(--accentColor);
  }
  body.dark-mode #option1,
  body.dark-mode #option2 {
    color: var(--primaryLight);
  }
  body.dark-mode #pricing .toggle-group,
  body.dark-mode #pricing .info {
      background-color: var(--medium);
  }
  body.dark-mode #option1,
  body.dark-mode #option2 {
      color: var(--primaryLight);
  }
  body.dark-mode #pricing .item .flex {
      background-color: var(--dark);
      border-color: var(--accentColor);
  }
  body.dark-mode #pricing .flex .package,
  body.dark-mode #pricing .flex .price,
  body.dark-mode #pricing .flex .duration,
  body.dark-mode #pricing .li,
  body.dark-mode #pricing .ul .li:first-child {
      color: var(--primaryLight);
  }
  body.dark-mode #pricing .li-img {
      filter: brightness(0) invert(1);
  }
  body.dark-mode #pricing .button-solid:hover {
      color: var(--accentColor);
  }
  body.dark-mode #pricing .card-button:before {
    background: #FFF;
  }
  /*************** BLOG ********************/
  /*****************************************/
  body.dark-mode #blog {
    background-color: var(--dark);
  }
  body.dark-mode #blog .title,
  body.dark-mode #blog h3,
  body.dark-mode #blog .text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #blog .topper {
    color: var(--darkModeAccent);
  }
  body.dark-mode #blog .picture {
    border-color: var(--lightAccent);
  }
  body.dark-mode #blog .item-text {
    background-color: var(--medium);
  }
  body.dark-mode #blog .date {
    color: var(--bodyTextColorWhite);
  }
}

/*-- -------------------------- -->
<---         Web Audit         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #web-audit {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--bgLight);
  }
  #web-audit::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("/assets/img/blob-scene-haikei-landing-m.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0.15;
        z-index: 0;
        pointer-events: none;
        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%
        );
  }
  #web-audit .container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #web-audit .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;
  }
  #web-audit .title {
    max-width: 27ch;
    margin: 0;
  }
  #web-audit .topper {
    color: var(--secondary);
  }
  #web-audit .card-wrapper {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2vw, 1.25rem);
    row-gap: 2.5rem;
  }
  #web-audit .card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 24px - 60px */
    gap: clamp(1.5rem, 5vw, 3.75rem);
  }
  #web-audit .item {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
  }
  #web-audit .icon-wrapper {
    /* 60px - 80px */
    width: clamp(3.75rem, 5vw, 5rem);
    height: clamp(3.75rem, 5vw, 5rem);
    background-color: #FFF;
    border: 2px solid var(--dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
  }
  #web-audit .icon {
    /* 40px - 52px */
    width: clamp(2.5rem, 3vw, 3.25rem);
    height: auto;
  }
  #web-audit .h3 {
    font-size: 1.25rem;
    /* font-weight: 400; */
    line-height: 1.2em;
    margin: 0 0 0.5rem;
    color: var(--headerColor);
  }
  #web-audit .item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #web-audit .image {
    /* all these change on tablet */
    width: 40vw;
    max-width: 18.75rem;
    height: 30vw;
    max-height: 18.75rem;
    margin: auto;
    display: flex;
    justify-content: center;
    position: relative;
    display: none;
  }
  #web-audit .image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    z-index: 1;
  }
  #web-audit .image::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    opacity: 0.1;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #web-audit .container {
    max-width: 80rem;
  }
  #web-audit .card-wrapper {
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
  }
  #web-audit .item {
    text-align: left;
    align-items: start;
  }
  #web-audit .image {
    width: 45vw;
    max-width: 26.75rem;
    height: 45vw;
    max-height: 26.875rem;
    display: flex;
  }
  #web-audit .image img {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #web-audit::before {
    background-image: url("/assets/img/blob-scene-haikei-landing-d.svg");
  }
  #web-audit .item {
    flex-direction: row;
  }
  #web-audit .image {
    width: 50vw;
    max-width: 30.75rem;
    height: 50vw;
    max-height: 30.875rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #web-audit {
    background-color: var(--dark);
  }
  body.dark-mode #web-audit::before {
    opacity: 0.04;
  }
  body.dark-mode #web-audit .topper {
    color: var(--lightAccentColor);
  }
  body.dark-mode #web-audit .title,
  body.dark-mode #web-audit .text,
  body.dark-mode #web-audit .h3,
  body.dark-mode #web-audit .item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #web-audit .icon-wrapper {
    border-color: #FFF;
  }
}

/*-- -------------------------- -->
<---         Web Makeover       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #web-makeover {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
    scroll-margin-top: 8rem;
  }
  #web-makeover .container {
       width: 100%;
      /* changes to 1280px at tablet */
      max-width: 32rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #web-makeover .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;
    gap: 1rem;
  }
  #web-makeover .heading-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #web-makeover .card-wrapper {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #web-makeover .card-group {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #web-makeover .text {
    color: var(--textBlack);
    opacity: 1;
  }
  #web-makeover .before-after {
    --slider-position: 35%;
    position: relative;
    width: 80%;
    max-width: 56.25rem;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    touch-action: pan-y;
    user-select: none;
    cursor: ew-resize;
  }
  /* Both image layers always occupy the full container */
  #web-makeover .comparison-image {
      display: block;
      width: 100%;
      user-select: none;
      -webkit-user-drag: none;
  }
  #web-makeover .comparison-image img {
      display: block;
      width: 100%;
      height: auto;
  }
  /* After image establishes the container height */
  #web-makeover .comparison-after {
      position: relative;
  }
  /* Before image sits directly over the after image */
  #web-makeover .comparison-before {
      position: absolute;
      inset: 0;
      /* Reveal everything left of the slider */
      clip-path: inset(
          0
          calc(100% - var(--slider-position))
          0
          0
      );
  }
  #web-makeover .slider-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--slider-position);
      width: 0.1875rem;
      background: #fff;
      transform: translateX(-50%);
      pointer-events: none;
      box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.35);
    }
    #web-makeover .slider-handle {
      position: absolute;
      left: var(--slider-position);
      top: 50%;

      transform: translate(-50%, -50%);

      display: flex;
      flex-direction: column;
      align-items: center;

      pointer-events: none;

      z-index: 20;
  }
  #web-makeover .slider-labels {
      display: flex;
      align-items: center;
      gap: .35rem;
      padding: .45rem .8rem;
      margin-bottom: .5rem;
      background: rgba(0,0,0,.75);
      backdrop-filter: blur(8px);
      color: #fff;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 700;
      white-space: nowrap;
  }
  #web-makeover .slider-labels .divider {
      opacity: .5;
  }
  #web-makeover .slider-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      border: 3px solid #fff;
      background: rgba(0,0,0,.75);
      color: #fff;
  }
  #web-makeover .comparison-slider {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  #web-makeover .comparison-label {
      position: absolute;
      top: 1rem;
      z-index: 2;
      padding: 0.4rem 0.75rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 0.875rem;
      font-weight: 700;
      pointer-events: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {

  #web-makeover .container {
    max-width: 80rem;
  }
  #web-makeover .content {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: clamp(3rem, 6vw, 6rem);
        text-align: left;
  }
  #web-makeover .heading-group {
        width: 48%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
  }
  #web-makeover .card-wrapper {
        width: 45%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        list-style: none;
  }
  #web-makeover .before-after {
    width: 85%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #web-makeover .before-after {
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #web-makeover .text {
    color: var(--textLight);
  }
}

/* =========================================
   PORTFOLIO
========================================= */

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #portfolio {
      padding: 5rem 0;
      background-color: var(--primaryLight);
  }
  #portfolio .container {
      width: 92%;
      max-width: 75rem;
      margin: 0 auto;
  }
  #portfolio .content {
      width: 100%;
  }
  #portfolio .portfolio-heading {
      max-width: 46rem;
      margin: 0 auto 3rem;

      text-align: center;
  }
  #portfolio .title {
      margin: 0 0 1rem;

      font-size: clamp(2rem, 7vw, 3.25rem);
      line-height: 1.08;
  }
  #portfolio .overview {
      max-width: 42rem;
      margin: 0 auto;

      line-height: 1.7;
  }
  #portfolio .card-group {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 1.5rem;

      width: 100%;
      max-width: 44rem;
      margin: 0 auto;
      padding: 0;

      list-style: none;
  }
  #portfolio .item {
      min-width: 0;
      border: 1px solid rgba(20, 35, 28, 0.12);
      border-radius: 1rem;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 0.75rem 2.5rem rgba(20, 35, 28, 0.08);
      transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          border-color 0.3s ease;
  }
  #portfolio .link {
      display: flex;
      flex-direction: column;
      height: 100%;
      color: inherit;
      text-decoration: none;
  }
  #portfolio .picture {
      position: relative;

      display: block;

      width: 100%;
      aspect-ratio: 16 / 11;
      overflow: hidden;

      background-color: #e8e6e0;
  }
  #portfolio .picture::after {
      position: absolute;
      inset: 0;

      content: "";

      background: linear-gradient(
          to bottom,
          transparent 70%,
          rgba(0, 0, 0, 0.08)
      );

      pointer-events: none;
  }
  #portfolio .picture img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;

      transition: transform 0.5s ease;
  }
  #portfolio .card-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;

      padding: 1.5rem;
  }
  #portfolio .project-type {
      display: block;
      margin-bottom: 0.625rem;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--primary, #315f4b);
  }
  #portfolio h3 {
      margin: 0 0 0.875rem;
      font-size: clamp(1.5rem, 5vw, 2rem);
      line-height: 1.15;
      color: #17211c;
  }
  #portfolio .description {
      margin: 0 0 1.5rem;

      line-height: 1.65;

      color: #535c57;
  }
  #portfolio .button {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      margin-top: auto;
      padding-bottom: 0.25rem;
      border-bottom: 0.125rem solid currentColor;
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #FFF;
      transition:
          gap 0.25s ease,
          color 0.25s ease;
  }
  #portfolio .button::after {
      content: "→";

      font-size: 1.1em;
  }
  #portfolio .link:focus-visible {
      outline: 0.1875rem solid var(--primary, #315f4b);
      outline-offset: -0.1875rem;
  }
}
/* Tablet - 48rem+ */
@media (min-width: 48rem) {
    #portfolio {
        padding: 6.5rem 0;
    }

    #portfolio .portfolio-heading {
        margin-bottom: 4rem;
    }

    #portfolio .card-group {
        width: 100%;
        max-width: 44rem;
        margin-inline: auto;
        gap: 2rem;
        justify-items: center;
    }
    #portfolio .item {
        width: 100%;
        max-width: 44rem;
        margin-inline: auto;

        justify-self: center;
    }
    #portfolio .link {
        width: 100%;
    }

    #portfolio .card-content {
        padding: 2rem;
    }

    #portfolio h3 {
        font-size: 2rem;
    }
}
/* Desktop - 64rem+ */
@media (min-width: 64rem) {
    #portfolio {
        padding: 8rem 0;
    }

    #portfolio .card-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;

        max-width: none;
    }
    #portfolio .item {
        width: 100%;
        max-width: none;
    }

    #portfolio .item:hover {
        border-color: rgba(49, 95, 75, 0.3);

        box-shadow: 0 1.25rem 3.5rem rgba(20, 35, 28, 0.14);

        transform: translateY(-0.375rem);
    }

    #portfolio .item:hover .picture img {
        transform: scale(1.025);
    }

    #portfolio .item:hover .button {
        gap: 0.875rem;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #portfolio .item {
    border-color: #FFF;
  }
  body.dark-mode #portfolio .project-type {
    color: var(--lightAccentColor);
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #portfolio .item,
    #portfolio .picture img,
    #portfolio .button {
        transition: none;
    }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing {
        padding: var(--sectionPadding);
        position: relative;
        z-index: 10;
        background-color: #f5f8f5;
    }
    #pricing .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #pricing .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;
    }

    #pricing .title {
        max-width: 20ch;
    }
    #pricing .card-group {
        width: 100%;
        max-width: 80rem;
        margin: 0;
        padding: 0 1rem;
        /* prevents padding and border from affecting height and width */
        background-color: #fff;
        box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        position: relative;
        z-index: 15;
    }
    #pricing .item {
        text-align: left;
        list-style: none;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
        box-sizing: border-box;
        grid-column: span 12;
        transition:
            background-color 0.3s,
            border-color 0.3s;
    }
    #pricing .item:last-of-type {
        border-bottom: none;
    }
    #pricing .card {
        text-decoration: none;
        /* 24px - 60px top & Bottom */
        /* 24px - 16px top & Bottom */
        padding: clamp(1.5rem, 5.3vw, 3.75rem) clamp(1rem, 2.7vw, 2.5rem);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }
    #pricing .h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        font-weight: 700;
        text-align: inherit;
        line-height: 1.2em;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
        transition: color 0.3s;
    }
    #pricing .item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        text-align: inherit;
        line-height: 1.5em;
        margin-top: 1rem;
        color: var(--bodyTextColor);
        transition:
            color 0.3s,
            opacity 0.3s;
    }
    #pricing .price {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 5vw, 3.0625rem);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--accentColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0.25rem;
  }
  #pricing .duration {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0;
    color: var(--textBlack);
    transform: translateY(-9px);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing .content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 3rem;
    }
    #pricing .title {
        margin: 0;
    }
    #pricing .flex-group {
        width: 50%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #pricing .item {
        grid-column: span 4;
        border-bottom: none;
        border-right: 1px solid #e8e8e8;
    }
    #pricing .item:nth-of-type(3) {
        border-bottom: none;
        border-right: none;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #pricing .card-group {
        padding: 0;
    }
    #pricing .item:last-of-type {
        border: none;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #pricing .title,
    body.dark-mode #pricing .text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #pricing .text {
        opacity: 0.9;
    }
    body.dark-mode #pricing .card-group {
        background-color: var(--dark);
    }
    body.dark-mode #pricing .item {
      background-color: var(--mediumDark);
    }
    body.dark-mode #pricing .item {
        border-color: rgba(255, 255, 255, 0.1);
    }
    body.dark-mode #pricing .h3,
    body.dark-mode #pricing .item-text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #pricing .item-text {
        opacity: 0.9;
    }
    body.dark-mode #pricing .price {
      color: var(--lightAccentColor);
    }
    body.dark-mode #pricing .duration {
      color: var(--textLight);
    }
}