Untitled

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  :root {
    --primary: #007CFB;
    --primaryLight: #4da3fc;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #f7f7f7;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
  }
  #sbs,
  #sbs-r {
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
    70% {
      transform: translateY(4px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes InAndOut {
    0% {
      transform: translateY(2.5rem) scale(1);
      opacity: 1;
    }
    30% {
      transform: translateY(1.25rem) scale(0.8);
      opacity: 1;
    }
    60% {
      transform: translateY(0.625rem) scale(0.5);
      opacity: 1;
    }
    100% {
      transform: translateY(0rem) scale(0.5);
      opacity: 0;
    }
  }
  @keyframes InAndOut2 {
    0% {
      transform: translateY(3.125rem) scale(1);
      opacity: 1;
    }
    30% {
      transform: translateY(2.5rem) scale(1);
      opacity: 1;
    }
    60% {
      transform: translateY(1.25rem) scale(0.6);
      opacity: 1;
    }
    100% {
      transform: translateY(0rem) scale(0.4);
      opacity: 0;
    }
  }
  #sbs .cs-container,
  #sbs-r .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 48px - 56px */
    gap: clamp(3rem, 7vw, 3.5rem);
  }
  #sbs .cs-topper,
  #sbs-r .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #sbs .cs-title,
  #sbs-r .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin-right: auto;
    color: var(--headerColor);
    position: relative;
  }
  #sbs .cs-text,
  #sbs-r .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 40.625rem;
    margin: auto;
    /* changes to 24px at desktop */
    margin-bottom: 3rem;
    color: var(--bodyTextColor);
  }
  #sbs .cs-picture,
  #sbs-r .cs-picture {
    width: 100%;
    height: 25rem;
    border-radius: 1rem;
    /* clips the corners of rhe image */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #sbs .cs-picture img,
  #sbs-r .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: top;
  }
  #sbs .cs-card-group,
  #sbs-r .cs-card-group {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #sbs .cs-item,
  #sbs-r .cs-item {
    list-style: none;
    /* 24px - 32px */
    padding: clamp(1.5rem, 4.3vw, 2rem);
    border-radius: 1rem;
    border: 1px solid #E8E8E8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #sbs .cs-icon-wrapper,
  #sbs-r .cs-icon-wrapper {
    width: 4.0625rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
  }
  #sbs .cs-icon-wrapper:before,
  #sbs-r .cs-icon-wrapper:before {
    /* Small Bubble */
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #E5F2FF;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0.1875rem;
    animation-name: InAndOut;
    animation-duration: 1.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  #sbs .cs-icon-wrapper:after,
  #sbs-r .cs-icon-wrapper:after {
    /* Small Bubble */
    content: '';
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: #E5F2FF;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0.6875rem;
    right: 0.3125rem;
    animation-name: InAndOut2;
    animation-duration: 2s;
    animation-delay: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  #sbs .cs-bubble,
  #sbs-r .cs-bubble {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  #sbs .cs-bubble:before,
  #sbs-r .cs-bubble:before {
    /* Big Bubble */
    content: '';
    width: 2.6875rem;
    height: 2.6875rem;
    border-radius: 50%;
    background: #E5F2FF;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0.25rem;
    left: 0rem;
    animation-name: floatAnimation2;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #sbs .cs-bubble:after,
  #sbs-r .cs-bubble:after {
    /* Big Bubble */
    content: '';
    width: 1.9375rem;
    height: 1.9375rem;
    border-radius: 50%;
    background: #E5F2FF;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.25rem;
    right: 0rem;
    animation-name: floatAnimation2;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #sbs .cs-icon,
  #sbs-r .cs-icon {
    width: 3rem;
    height: auto;
    position: relative;
    z-index: 10;
  }
  #sbs .cs-h3,
  #sbs-r .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: center;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
  }
  #sbs .cs-item-p,
  #sbs-r .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs .cs-item,
  #sbs-r .cs-item {
    flex-direction: row;
    justify-content: flex-start;
  }
  #sbs .cs-icon-wrapper,
  #sbs-r .cs-icon-wrapper {
    margin-right: 1.5rem;
  }
  #sbs .cs-h3,
  #sbs-r .cs-h3,
  #sbs .cs-item-p,
  #sbs-r .cs-item-p {
    text-align: left;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs .cs-container,
  #sbs-r .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #sbs .cs-left-section,
  #sbs-r .cs-left-section {
    max-width: 32.625rem;
  }
  #sbs .cs-topper,
  #sbs-r .cs-topper,
  #sbs .cs-title,
  #sbs-r .cs-title,
  #sbs .cs-text,
  #sbs-r .cs-text {
    text-align: left;
  }
  #sbs .cs-text,
  #sbs-r .cs-text {
    margin-bottom: 1.5rem;
  }
  #sbs .cs-picture,
  #sbs-r .cs-picture {
    height: 17.5rem;
  }
  #sbs .cs-card-group,
  #sbs-r .cs-card-group {
    width: 68%;
    max-width: 39.375rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs .cs-topper,
  body.dark-mode #sbs-r .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs .cs-title,
  body.dark-mode #sbs-r .cs-title,
  body.dark-mode #sbs .cs-text,
  body.dark-mode #sbs-r .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs .cs-icon-wrapper:before,
  body.dark-mode #sbs-r .cs-icon-wrapper:before,
  body.dark-mode #sbs .cs-bubble:before,
  body.dark-mode #sbs-r .cs-bubble:before,
  body.dark-mode #sbs .cs-icon-wrapper:after,
  body.dark-mode #sbs-r .cs-icon-wrapper:after,
  body.dark-mode #sbs .cs-bubble:after,
  body.dark-mode #sbs-r .cs-bubble:after {
    background-color: var(--accent);
  }
  body.dark-mode #sbs .cs-icon,
  body.dark-mode #sbs-r .cs-icon {
    /* turns the icon white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbs .cs-h3,
  body.dark-mode #sbs-r .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs .cs-item-p,
  body.dark-mode #sbs-r .cs-item-p {
    color: var(--bodyTextColorWhite);
    opacity: .8;
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r .cs-left-section {
    /* sends it to the right */
    order: 1;
  }
}
                                                        
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -->

/* Mobile */
@media only screen and (min-width: 0em) {
  :root {
    --primary: #0C55C2;
    --primaryLight: #134a9e;
    --secondary: #FF6A3E;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #FAFBFC;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
  }
  #pricing-4987 {
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
  }
  #pricing-4987 .cs-container {
    width: 100%;
    /* changes to 1104px on desktop */
    max-width: 46rem;
    margin: auto;
  }
  #pricing-4987 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
  }
  #pricing-4987 .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 50rem;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #pricing-4987 .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 40.625rem;
    margin: 0 auto;
    /* 48px - 64px */
    margin-bottom: clamp(3rem, 6.3vw, 4rem);
    color: var(--bodyTextColor);
  }
  #pricing-4987 .cs-card-group {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #pricing-4987 .cs-item {
    list-style: none;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    max-width: 22.25rem;
    border-radius: 0.875rem;
    background: var(--bodyTextColorWhite);
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #pricing-4987 .cs-item:nth-of-type(2) .cs-option2-text,
  #pricing-4987 .cs-item:nth-of-type(2) .cs-option1-text {
    transition-delay: .1s;
  }
  #pricing-4987 .cs-item:nth-of-type(3) .cs-option2-text,
  #pricing-4987 .cs-item:nth-of-type(3) .cs-option1-text {
    transition-delay: .2s;
  }
  #pricing-4987 .cs-popular {
    background: var(--primary);
    position: relative;
    /* send to the bottom */
    order: 3;
  }
  #pricing-4987 .cs-popular:before {
    /* Most Popular Tag */
    content: 'Most Popular';
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.8125rem;
    font-weight: 700;
    padding: 0 0.75rem;
    color: var(--bodyTextColorWhite);
    background-color: var(--secondary);
    border-radius: 1.875rem;
    position: absolute;
    display: block;
    /* 24px - 32px */
    top: clamp(1.5rem, 3vw, 2rem);
    /* 24px - 32px */
    right: clamp(1.5rem, 3vw, 2rem);
  }
  #pricing-4987 .cs-popular .cs-h3,
  #pricing-4987 .cs-popular .cs-item-text,
  #pricing-4987 .cs-popular .cs-price,
  #pricing-4987 .cs-popular .cs-included,
  #pricing-4987 .cs-popular .cs-li {
    color: var(--bodyTextColorWhite);
  }
  #pricing-4987 .cs-popular .cs-button-solid {
    background-color: var(--bodyTextColorWhite);
    color: var(--primary);
    transition: color .3s;
  }
  #pricing-4987 .cs-popular .cs-button-solid:hover {
    color: var(--bodyTextColorWhite);
  }
  #pricing-4987 .cs-popular .cs-li-img {
    /* turns the check mark white */
    filter: brightness(900%);
  }
  #pricing-4987 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-4987 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.5rem;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #pricing-4987 .cs-price {
    font-size: 2.4375rem;
    line-height: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    /* spans are inline, need to add block for margin to work */
    display: block;
  }
  #pricing-4987 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5em;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: auto;
    color: #fff;
    min-width: 9.375rem;
    margin: 0 0 2rem;
    padding: 0 1.5rem;
    background-color: var(--primaryLight);
    border-radius: 0.25rem;
    display: block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-4987 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--secondary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #pricing-4987 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-4987 .cs-included {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    display: block;
  }
  #pricing-4987 .cs-ul {
    padding: 0;
    margin: 0;
  }
  #pricing-4987 .cs-li {
    font-size: 1rem;
    line-height: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #pricing-4987 .cs-li:last-of-type {
    margin-bottom: 0;
  }
  #pricing-4987 .cs-li-img {
    width: 1.25rem;
    height: auto;
    margin-top: 0.1875rem;
    margin-right: 0.5rem;
  }
}
/* Tablet 768px */
@media only screen and (min-width: 48em) {
  #pricing-4987 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #pricing-4987 .cs-item {
    width: 50%;
    /* ensures they stay the same height if you add more content */
    align-self: stretch;
  }
  #pricing-4987 .cs-popular {
    width: 100%;
    max-width: 100%;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #pricing-4987 .cs-container {
    max-width: 69rem;
  }
  #pricing-4987 .cs-item {
    width: 32%;
  }
  #pricing-4987 .cs-popular {
    max-width: 22.25rem;
    /* remove the order */
    order: unset;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #pricing-4987 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #pricing-4987 .cs-title,
  body.dark-mode #pricing-4987 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-4987 .cs-plan {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-4987 .cs-item {
    background: var(--medium);
  }
  body.dark-mode #pricing-4987 .cs-popular {
    background: var(--primary);
  }
  body.dark-mode #pricing-4987 .cs-h3,
  body.dark-mode #pricing-4987 .cs-item-text,
  body.dark-mode #pricing-4987 .cs-price,
  body.dark-mode #pricing-4987 .cs-included,
  body.dark-mode #pricing-4987 .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-4987 .cs-li-img {
    /* make so bright it turns white */
    filter: brightness(900%);
  }
}                                                                                                           
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px - Contains hover animation */
@media only screen and (min-width: 0em) {
  #gallery {
    /* Centers button */
    text-align: center;
    padding: var(--sectionPadding);
    position: relative;
    /* Prevents overflow from the image going off screen */
    overflow: hidden;
  }
  #gallery .cs-container {
    width: 100%;
    max-width: 82.625em;
    margin: auto;
  }
  #gallery .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
  }
  #gallery .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 38.8125rem;
    margin: 0 auto;
    margin-bottom: 2.5rem;
    color: var(--headerColor);
    position: relative;
  }
  #gallery .cs-image-group {
    /* used rem so it doesn't scale with the font size of on parent */
    font-size: min(1.1vw, 1em);
    width: 100%;
    max-width: 82.625em;
    padding: 0;
    margin: 0 auto 3.75rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.875em;
  }
  #gallery .cs-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.875em;
  }
  #gallery .cs-picture {
    position: relative;
    display: block;
  }
  #gallery .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #gallery .cs-row-1 .cs-picture-1 {
    width:  26.25em;
    height: 39em;
  }
  #gallery .cs-row-1 .cs-picture-2 {
    width: 26.25em;
    height: 39.3125em;
  }
  #gallery .cs-row-1 .cs-picture-3 {
    width: 25em;
    height: 25em;
  }
  #gallery .cs-row-2 .cs-picture-1 {
    width: 26.25em;
    height: 30.75em;
  }
  #gallery .cs-row-2 .cs-picture-2 {
    width: 26.25em;
    height: 32.3125em;
  }
  #gallery .cs-row-2 .cs-picture-3 {
    width: 26.25em;
    height: 39.3125em;
  }
  #gallery .cs-row-3 .cs-picture-1 {
    width: 26.25em;
    height: 39.0625em;
  }
  #gallery .cs-row-3 .cs-picture-2 {
    width: 26.25em;
    height: 28.25em;
  }
  #gallery .cs-row-3 .cs-picture-3 {
    width: 26.25em;
    height: 39.3125em;
  }
}
/* Dark mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #gallery .cs-title {
    color: var(--bodyTextColorWhite);
  }
}                        
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #reviews {
    /* Centers the button */
    text-align: center;
    padding: var(--sectionPadding);
  }
  #reviews .cs-container {
    width: 100%;
    max-width: 69rem;
    margin: auto;
  }
  #reviews .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
  }
  #reviews .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    max-width: 43.75rem;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #reviews .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5rem;
    text-align: center;
    width: 100%;
    max-width: 40.625rem;
    margin: 0 auto;
    /* 88px - 104px */
    margin-bottom: clamp(5.5em, 10.2vw, 6.5em);
    color: var(--bodyTextColor);
  }
  #reviews .cs-card-group {
    padding: 0;
    /* 48px - 64px */
    margin: 0 auto clamp(3rem, 5vw, 4rem);
  }
  #reviews .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    max-width: 33.875rem;
    margin: 0 auto 4rem;
    /* Padding L & R - 16px - 32px */
    padding: 3.75rem clamp(1rem, 3.2vw, 2rem) 0;
    /* 32px - 40px */
    padding-bottom: clamp(2rem, 5.4vw, 2.5rem);
    box-shadow: 0px 20px 39px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0.25rem;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    /* Prevents padding from affecting height & width */
    box-sizing: border-box;
  }
  #reviews .cs-item:last-of-type {
    margin-bottom: 0;
  }
  #reviews .cs-item-img {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: -2.5rem;
  }
  #reviews .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;
    color: var(--bodyTextColor);
    border-bottom: 1px solid #E8E9EC;
  }
  #reviews .cs-reviewer {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    width: 40%;
    margin: 0 auto 0 0;
    display: block;
    color: var(--headerColor);
  }
  #reviews .cs-desc {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--label);
    display: block;
  }
  #reviews .cs-item-stars {
    width: 6rem;
    height: 1rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #reviews .cs-card-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  #reviews .cs-item {
    /* reset margin so it won't interfere with flexbox */
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #reviews .cs-title,
  body.dark-mode #reviews .cs-text,
  body.dark-mode #reviews .cs-item-p,
  body.dark-mode #reviews .cs-reviewer {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews .cs-item {
    background: var(--medium);
  }
  body.dark-mode #reviews .cs-desc {
    color: var(--primaryLight);
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  :root {
    --primary: #007CFB;
    --primaryLight: #4da3fc;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #f7f7f7;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
  }
  #cta {
    font-family: 'Roboto', 'Arial', sans-serif;
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta .cs-background {
    width: 100%;
    height: 100%;
    opacity: .5;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #cta .cs-container {
    width: 100%;
    max-width: 80em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }
  #cta .cs-content {
    text-align: center;
    max-width: 30rem;
  }
  #cta .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #cta .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 auto 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #cta .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5rem;
    width: 100%;
    max-width: 25.125rem;
    margin: 0 auto;
    margin-bottom: 1.75rem;
    color: var(--bodyTextColor);
  }
  #cta .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: auto;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #cta .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width .3s;
  }
  #cta .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta .cs-image-group {
    /* everything is in ems so we can scale the container down with a font size */
    font-size: min(2.6vw, .8em);
    width: 33.9375em;
    height: 28.75em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cta .cs-bucket {
    width: 33.9375em;
    height: auto;
    display: block;
    position: relative;
  }
  #cta .cs-bucket img {
    width: 100%;
    height: auto;
  }
  #cta .cs-powder {
    width: 30.3125em;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: -1;
  }
  #cta .cs-powder img {
    width: 100%;
    height: auto;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #cta .cs-content {
    text-align: left;
  }
  #cta .cs-text {
    margin-left: 0;
  }
  #cta .cs-image-group {
    font-size: min(1.45vw, 1em);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cta .cs-background {
    opacity: .25;
    /* brighten the image to be whiter and show up against dark background */
    filter: grayscale(1) brightness(2000%);
  }
  body.dark-mode #cta .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #cta .cs-title,
  body.dark-mode #cta .cs-text {
    color: var(--bodyTextColorWhite);
  }
}