/*-- ---------Hero------------- -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1950 {
    min-height: 100dvh;
    /* 200px - 300px top */
    /* 60px - 100px bottom */
    padding: clamp(12.5rem, 12vw, 18.75rem) 1rem clamp(3.75rem, 8vw, 6.25rem) 1rem;
    position: relative;
    display: flex;
    align-items: flex-end;
    z-index: 1;
  }
  #hero-1950 .cs-container {
    width: 100%;
    max-width: 85.5625rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1950 .cs-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;
  }
  #hero-1950 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    margin-bottom: 1.75rem;
    color: #fff;
  }
  #hero-1950 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 1.25rem;
    color: #fff;
    opacity: 0.8;
  }
  #hero-1950 .cs-flex-group {
    max-width: 30rem;
  }
  #hero-1950 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    margin: 0;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1950 .cs-button-solid:before {
    content: '';
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #hero-1950 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1950 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1950 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.86) 10.79%, rgba(26, 26, 26, 0) 48.32%, rgba(26, 26, 26, 0.86) 82.84%);
    /* prevents the cursor from interacting with it */
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-1950 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1950 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 2rem;
  }
  #hero-1950 .cs-title {
    width: 55%;
    max-width: 39.375rem;
    margin-bottom: 0;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #hero-1950 .cs-flex-group {
    max-width: 30rem;
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1950 .cs-background {
    background: url("assets/images/filmmaking-for-photographers.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
}
/*-----------Video---------------->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #video-1314 .cs-big-link {
    width: 100%;
    /* 320px - 750px */
    height: clamp(20rem, 65vw, 46.875rem);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #video-1314 .cs-big-link:hover .cs-background img {
    transform: scale(1.1);
    opacity: 0.5;
  }
  #video-1314 .cs-background {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    /* clips the img from overflowing the container on hover */
    overflow: hidden;
    display: block;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #video-1314 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.64;
    object-fit: cover;
    z-index: -1;
    transition: transform 0.9s,
                    opacity 0.3s;
  }
  #video-1314 .cs-picture {
    /* 60px - 100px */
    width: clamp(6.75rem, 22vw, 12.25rem);
    height: clamp(6.75rem, 22vw, 12.25rem);
    border-radius: 50%;
    border: 5px solid #bababa;
    background: rgba(250, 250, 250, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 10;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  #video-1314 .cs-picture:hover {
    transform: scale(1.1);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;
  }
  #video-1314 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
}
/*--------Course Brief------------>
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-1738 {
    position: relative;
    z-index: 1;
  }
  #stats-1738 .cs-container {
    width: 100%;
    margin: auto;
    position: relative;
  }
  #stats-1738 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  #stats-1738 .cs-item {
    list-style: none;
    width: 100%;
    /* 325px - 480px */
    min-height: clamp(2.3rem, 12vw, 12rem);
    /* 60px - 135px Top & bottom */
    /* 16px - 60px left & right */
    padding: clamp(1.3rem, 2vw, 2.5rem) clamp(1rem, 2vw, 3.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #stats-1738 .cs-item:nth-of-type(1) {
    background-color: #5F5F5F;
  }
  #stats-1738 .cs-item:nth-of-type(2) {
    background-color: var(--primary);
  }
  #stats-1738 .cs-item:nth-of-type(3) {
    background-color: #1D1C1C;
  }
  #stats-1738 .cs-number {
    /* 49px - 84px */
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.4em;
    text-align: center;
    /* 12px - 16px */
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #stats-1738 .cs-card-group {
    flex-direction: row;
  }
  #stats-1738 .cs-item {
    justify-content: flex-start;
  }
}
/*---------Course Summary--------->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1015 {
    /* prevents the overflowing cs-picture at large desktop from causing overflow issues */
    overflow: hidden;
  }
  #sbs-1015 .cs-container {
    width: 100%;
    max-width: 80rem;
    /* 16px - 20px */
    margin: 0 auto clamp(1rem, 1.5vw, 1.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
    position: relative;
  }
  #sbs-1015 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 33.125rem;
    /* moved section padding to the content area */
    padding: var(--sectionPadding);
    padding-bottom: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #sbs-1015 .cs-text {
    margin: 0 0 2rem;
  }
  #sbs-1015 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 2rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbs-1015 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-1015 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1015 .cs-picture {
    width: 100%;
    height: 30rem;
    display: block;
    position: relative;
  }
  #sbs-1015 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 4rem;
  }
  #sbs-1015 .cs-image-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #sbs-1015 .cs-image {
    width: 100%;
    /* 170px - 284px */
    height: clamp(10.625rem, 32vw, 17.75rem);
    display: block;
    grid-column: span 6;
    position: relative;
  }
  #sbs-1015 .cs-image:nth-of-type(3),
  #sbs-1015 .cs-image:nth-of-type(4),
  #sbs-1015 .cs-image:nth-of-type(5) {
    display: none;
  }
  #sbs-1015 .cs-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1015 .cs-container {
    /* moved section padding to the container */
    padding: var(--sectionPadding);
    padding-bottom: 0;
    /* remove padding-left so the image touches the right screen edge */
    padding-left: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    flex-direction: row;
    justify-content: space-between;
  }
  #sbs-1015 .cs-content {
    text-align: left;
    padding: 0;
    align-items: flex-start;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbs-1015 .cs-image {
    grid-column: span 4;
  }
  #sbs-1015 .cs-image:nth-of-type(3) {
    display: block;
  }
}
/* Large Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #sbs-1015 {
    /* moved section padding to the section but removed all padding except the padding top.  We're moving the padding top from the container to the section container so we can place the cs-picture easier inside the cs-container. If the Stitch below this Stitch is on a white background, add padding-bottom:0; to this one so there's not a huge gap between the sections. */
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
  }
  #sbs-1015 .cs-container {
    padding-top: 0;
  }
  #sbs-1015 .cs-content {
    /* pushes it to the right */
    margin-left: auto;
    padding: 3.25rem 0;
  }
  #sbs-1015 .cs-picture {
    width: 50vw;
    height: 100%;
    margin: 0 0.625rem 0 0;
    /* absolutely positioned so it can rest on the right edge of the screen, and its height will respond the the changing height of the cs-content when you add or subtract content */
    position: absolute;
    right: 50%;
    top: 0;
  }
  #sbs-1015 .cs-image-group {
    grid-template-columns: repeat(5, 1fr);
  }
  #sbs-1015 .cs-image {
    grid-column: span 1;
  }
  #sbs-1015 .cs-image:nth-of-type(4),
  #sbs-1015 .cs-image:nth-of-type(5) {
    display: block;
  }
}
/*------Course Summary Stats------>
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-4 {
    padding: var(--sectionPadding);
    padding-top: 0;
    position: relative;
    z-index: 1;
  }
  #stats-4 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #stats-4 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #stats-4 .cs-card-group {
    width: 100%;
    max-width: 31.25rem;
    padding: 0 1.25rem;
    /* 40px - 68px */
    padding-top: clamp(2.5rem, 5.7vw, 4.25rem);
    /* 48px - 80px */
    padding-bottom: clamp(3rem, 6.5vw, 5rem);
    margin: 0;
    background: #fff;
    border-top: 2px solid var(--primary);
    border-radius: 0.3125rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.4375em;
    box-shadow: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.05);
    /* prevents padding from adding to the width of the container */
    box-sizing: border-box;
  }
  #stats-4 .cs-item {
    text-align: center;
    list-style: none;
  }
  #stats-4 .cs-number {
    /* 39px - 61px */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2em;
    /* 4px - 8px */
    margin-bottom: clamp(0.25rem, 0.78vw, 0.5rem);
    color: var(--primary);
    display: block;
  }
  #stats-4 .cs-stat-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
  }
  #stats-4 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    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;
  }
  #stats-4 .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 0.3s;
  }
  #stats-4 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* In-between - 500px */
@media only screen and (min-width: 31.25rem) {
  #stats-4 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 3.4375rem;
    column-gap: 4.25rem;
  }
  #stats-4 .cs-item {
    /* sets even spacing */
    width: 9.8125rem;
  }
  #stats-4 .cs-number {
    font-size: clamp(2.2375rem, 4.7vw, 3.8125rem);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #stats-4:before {
    height: 37.5%;
  }
  #stats-4 .cs-card-group {
    max-width: 100%;
    justify-content: space-around;
  }
  #stats-4 .cs-item {
    /* reset width */
    width: auto;
  }
}
/*--       What You'll Learn     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1304 {
    padding: var(--sectionPadding);
    padding-bottom: 1rem;
    position: relative;
    z-index: 10;
  }
  #services-1304 .cs-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);
  }
  #services-1304 .cs-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;
  }
  #services-1304 .cs-title {
    max-width: 20ch;
  }
  #services-1304 .cs-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.05);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    z-index: 15;
  }
  #services-1304 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    box-sizing: border-box;
    grid-column: span 12;
    padding: 1.5rem 2rem;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #services-1304 .cs-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: #666;
    transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1304 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1304 .cs-title {
    margin: 0;
  }
  #services-1304 .cs-flex-group {
    width: 50%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1304 .cs-item {
    grid-column: span 6;
  }
  #services-1304 .cs-item:nth-of-type(4),
  #services-1304 .cs-item:nth-of-type(8),
  #services-1304 .cs-item:nth-of-type(12),
  #services-1304 .cs-item:nth-of-type(16) {
    border-right: none;
  }
  #services-1304 .cs-item:nth-of-type(13),
  #services-1304 .cs-item:nth-of-type(14),
  #services-1304 .cs-item:nth-of-type(15),
  #services-1304 .cs-item:nth-of-type(16) {
    border-bottom: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1304 .cs-card-group {
    padding: 0;
  }
  #services-1304 .cs-item {
    grid-column: span 3;
    border-right: 1px solid #e8e8e8;
  }
  #services-1304 .cs-item:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }
  #services-1304 .cs-item:hover .cs-h3,
  #services-1304 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #services-1304 .cs-item:hover .cs-item-text {
    opacity: 0.8;
  }
}
/*--------About the Educator------>
<--- ----------------------------*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1811 {
    padding: var(--sectionPadding);
    /* 100px - 200px */
    padding-bottom: clamp(6.25rem, 8vw, 12.5rem);
    padding-bottom: 0;
    background-color: #222222;
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-1811 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1811 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
    position: relative;
    z-index: 3;
    padding-bottom: 4rem;
  }
  #sbs-1811 .cs-title,
  #sbs-1811 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #sbs-1811 .cs-text {
    margin-bottom: 1rem;
    opacity: .8;
  }
  #sbs-1811 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1811 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    margin-bottom: 2rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbs-1811 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #sbs-1811 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1811 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(1.7vw, .60rem);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 43.6875em;
    height: 40.1875em;
    position: relative;
    z-index: 1;
  }
  #sbs-1811 .cs-image-group:before {
    /* blur effect */
    content: '';
    width: 125rem;
    height: 125rem;
    margin-right: -28.125rem;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    position: absolute;
    display: none;
    top: -12.5em;
    right: 50%;
    transform: skew(40deg);
    transform-origin: center;
    z-index: -1;
  }
  #sbs-1811 .cs-picture {
    width: auto;
    height: 34.375em;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 3.5em;
    transform: translateX(-50%);
  }
  #sbs-1811 .cs-picture img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
  #sbs-1811 .cs-graphic {
    width: 100%;
    min-width: 75rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
  }
  #sbs-1811 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1811 .cs-container {
    max-width: 80rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  #sbs-1811 .cs-image-group {
    /* set to inherit at Large Desktop */
    font-size: min(1.2vw, 1rem);
  }
  #sbs-1811 .cs-image-group:before {
    display: block;
  }
  #sbs-1811 .cs-picture {
    left: 60%;
  }
  #sbs-1811 .cs-content {
    width: 51%;
  }
}
/*-----------Lessons-------->
<--------------------------*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1109 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #faq-1109 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 32px - 48px */
    gap: clamp(2rem, 6vw, 3rem);
  }
  #faq-1109 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #faq-1109 .cs-title {
    /* 32px - 48px */
    margin: 0 0 clamp(2rem, 5vw, 3rem);
  }
  #faq-1109 .cs-picture {
    width: 100%;
    /* 360px - 400px */
    height: clamp(35.5rem, 54vw, 25rem);
    display: block;
    position: relative;
  }
  #faq-1109 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #faq-1109 .cs-faq-group {
    width: 100%;
    max-width: 40.625rem;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  #faq-1109 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #f7f7f7;
    /* clips all corners of the button that overlap the rounded border */
    overflow: hidden;
    transition: border-bottom 0.3s;
  }
  #faq-1109 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1109 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1109 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1109 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    /* 16px - 24px left & right */
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
  }
  #faq-1109 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 20px - 24px */
    padding: clamp(1.25rem, 2vw, 1.5rem);
    background-color: #f7f7f7;
    border: none;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1109 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1109 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1109 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.3125rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1109 .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-1109 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1109 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1109 .cs-content {
    width: 40%;
    text-align: left;
    align-items: flex-start;
    /* prevents flexbox from squishing it */
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/*--        Other Courses       -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1169 {
    background-color: #fff;
    padding: var(--sectionPadding);
  }
  #services-1169 .cs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    /* changes to 1440px at large desktop */
    max-width: 51.5rem;
    width: 100%;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1169 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #services-1169 .cs-title {
    max-width: 20ch;
  }
  #services-1169 .cs-card-group {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(12, 1fr);
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1169 .cs-item {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #f7f7f7;
    width: 100%;
    list-style: none;
    text-align: left;
    grid-column: span 12;
    max-width: 25rem;
    margin: 0 auto;
  }
  #services-1169 .cs-item:hover .cs-picture img {
    transform: scale(1.2);
  }
  #services-1169 .cs-item:hover .cs-h3,
  #services-1169 .cs-item:hover .cs-link {
    color: var(--bodyTextColor);
  }
  #services-1169 .cs-item:hover .cs-arrow {
    filter: initial;
  }
  #services-1169 .cs-picture {
    position: relative;
    display: block;
    /* 180px - 240px */
    height: clamp(13.25rem, 24vw, 15rem);
    width: 100%;
    /* clips the image from overflowing parent on hover */
    overflow: hidden;
  }
  #services-1169 .cs-picture img {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.65s;
  }
  #services-1169 .cs-info {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
  }
  #services-1169 .cs-h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.5em;
    font-weight: 700;
    color: var(--headerColor);
    transition: background-color 0.3s;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    transition: color 0.3s;
  }
  #services-1169 .cs-educator {
    margin-top: -0.65rem;
    padding-bottom: 1.75rem;
  }
  #services-1169 .cs-item-text {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
    margin: 0;
  }
  #services-1169 .cs-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    text-align: inherit;
    margin-top: 1.25rem;
    transition: color 0.3s;
  }
  #services-1169 .cs-link:hover .cs-arrow {
    transform: translateX(0.25rem);
  }
  #services-1169 .cs-arrow {
    filter: grayscale(1) brightness(0);
    display: block;
    height: auto;
    width: 1.25rem;
    transition: filter 0.3s,
            transform 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1169 .cs-container {
    max-width: 59rem;
  }
  #services-1169 .cs-item {
    grid-column: span 4;
    max-width: initial;
  }
  #services-1169 .cs-picture {
    height: 11.25rem;
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1169 .cs-container {
    max-width: 90rem;
  }
  #services-1169 .cs-picture {
    height: 17.25rem;
    width: 100%;
  }
}
/*--        MZed Stats          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats-315 {
    padding: var(--sectionPadding);
    background-color: rgba(247, 247, 247, 0.5);
  }
  #stats-315 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    padding-bottom: 5rem;
  }
  #stats-315 .cs-card-group {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 37.5rem;
    margin: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 2rem;
    gap: 2.5rem;
    margin-left: -1.5rem;
  }
  #stats-315 .cs-item {
    list-style: none;
    /* set fixed width so they can all be aligned on the left */
    width: 8.6875rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #stats-315 .cs-picture {
    width: 5rem;
    height: 5rem;
    /* 12px - 20px */
    margin-right: clamp(0.75rem, 3vw, 1.25rem);
    border-radius: 50%;
    border: 1px solid #bababa;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #stats-315 .cs-icon {
    width: 2.5rem;
    height: auto;
  }
  #stats-315 .cs-flex-group {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
  #stats-315 .cs-number {
    font-size: 1.6rem;
    color: var(--headerColor);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0;
    display: block;
  }
  #stats-315 .cs-stat {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #stats-315 .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: 2rem;
    margin-left: auto;
  }
  #stats-315 .cs-item {
    width: 14.6875rem;
  }
  #stats-315 .cs-number {
    font-size: var(--headerFontSize);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats-315 .cs-card-group {
    max-width: 80rem;
    flex-wrap: nowrap;
    justify-content: space-evenly;
  }
}
/*--          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-567 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
  }
  #reviews-567 .cs-topper {
    color: var(--secondaryLight);
  }
  #reviews-567 .cs-title {
    color: #fff;
  }
  #reviews-567 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-567 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 62.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #reviews-567 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-567 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* 32px - 60px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
    background-color: #f1f1f4;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-567 .cs-stars {
    /* 169px - 189px */
    width: clamp(10.5625rem, 20vw, 11.8125rem);
    height: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
    display: block;
  }
  #reviews-567 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    /* 40px - 64px */
    margin-bottom: clamp(2.5rem, 8vw, 4rem);
    color: var(--bodyTextColor);
  }
  #reviews-567 .cs-flex-group {
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews-567 .cs-profile {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews-567 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-567 .cs-name {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
    margin-top: -1rem;
  }
  #reviews-567 .cs-job {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.6vw, 1rem);
    line-height: 1.2em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-567 .cs-container {
    max-width: 80rem;
  }
  #reviews-567 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #reviews-567 .cs-item {
    width: 100%;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-567 .cs-card-group {
    flex-wrap: nowrap;
  }
  #reviews-567 .cs-item {
    width: 100%;
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type {
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    text-align: left;
  }
}
/*--          Pricing           -->
<--- -------------------------- -*/
#pricing-1262 {
  font-family: 'Calibre', Arial, sans-serif;
  color: #333;
  padding: 6rem 2rem;
  background-image: url(../assets/images/Colour@2x.webp);
}
#pricing-1262 .cs-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: left;
  gap: 4rem;
}
@media (max-width: 768px) {
  #pricing-1262 .cs-container {
    flex-direction: column;
    gap: 2rem;
  }
}
#pricing-1262 .cs-container-left {
  margin-top: 8rem;
  width: 60%;
  max-width: 450px;
  margin: auto;
}
#pricing-1262 .cs-container-left .cs-title,
#pricing-1262 .cs-container-left .cs-text {
  text-align: left;
}
#pricing-1262 .cs-container-left .cs-text {
  margin: 2rem 0 3rem 0;
}
#pricing-1262 .cs-logo {
  max-width: 200px;
  padding: 2rem 0 0 0.5rem;
}
#pricing-1262 .cs-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: white;
}
#pricing-1262 .title-highlight {
  color: #fbb11c;
}
#pricing-1262 .cs-text {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: white;
}
#pricing-1262 .cs-link {
  color: #ccc;
  text-decoration: none;
}
#pricing-1262 .cs-toggle-group {
  width: 100%;
  margin: 0;
  padding: 0.75rem;
  box-sizing: border-box;
  background-color: #f1f1f4;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  justify-content: center;
  justify-items: center;
  align-items: center;
  margin-bottom: 2rem;
}
#pricing-1262 .cs-toggle-group .cs-toggle-text:first-of-type {
  grid: 1 / span 1;
  padding: 0.3rem 1.5rem 0.3rem 0;
  font-weight: 600;
}
#pricing-1262 .cs-toggle-group .cs-toggle-text:last-of-type {
  grid: 3 / span 1;
  padding-left: 1.5rem;
  font-weight: 600;
}
#pricing-1262 .cs-toggle-group .cs-toggle {
  grid: 2 / span 1;
  height: 34px;
}
#pricing-1262 .cs-toggle-group .cs-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
#pricing-1262 .cs-toggle-group .cs-toggle .cs-toggle-slider {
  cursor: pointer;
  background-color: #5cb5e6;
  transition: .4s;
  border-radius: 34px;
  max-width: 62px;
}
#pricing-1262 .cs-toggle-group .cs-toggle .cs-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
#pricing-1262 .cs-pricing-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#pricing-1262 .cs-pricing-card .title-highlight {
  color: #eb3e33;
  font-weight: 600;
  display: block;
}
#pricing-1262 .cs-pricing-card .cs-column {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  #pricing-1262 .cs-pricing-card .cs-column {
    padding: 0;
    min-width: 0;
  }
}
#pricing-1262 .cs-pricing-card .cs-column .cs-title {
  color: #444;
  font-size: 1.5rem;
  font-weight: 600;
}
#pricing-1262 .cs-pricing-card .cs-column.cs-annual {
  background-color: #1a1a2e;
  color: white;
  margin-top: -1px;
}
#pricing-1262 .cs-pricing-card .cs-column.cs-annual .cs-title {
  color: white;
}
#pricing-1262 .cs-pricing-card .cs-column.cs-monthly {
  background-color: rgba(0, 0, 0, 0.02);
}
#pricing-1262 .cs-pricing-card .cs-row {
  display: contents;
  min-height: 0;
  height: auto;
}
#pricing-1262 .cs-pricing-card .cs-row > * {
  padding: .5rem 1rem;
  margin-top: -1px;
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: center;
  font-size: 1rem;
}
#pricing-1262 .cs-pricing-card .cs-row .feature.border-top {
  border-top: 0.3px solid #e9e9e9;
  margin-top: 0;
}
#pricing-1262 .cs-pricing-card .cs-row .monthly.border-top {
  border-top: 0.5px solid #e9e9e9;
}
#pricing-1262 .cs-pricing-card .cs-row .annual.border-top {
  border-top: 0.5px solid #333;
}
#pricing-1262 .cs-pricing-card .cs-row .monthly-container {
  background-color: #fafafa;
}
#pricing-1262 .cs-pricing-card .cs-row .monthly {
  background-color: #fafafa;
  margin-top: 0px;
}
#pricing-1262 .cs-pricing-card .cs-row .feature {
  justify-content: flex-start;
  color: #666;
  padding-left: 1.5rem;
}
#pricing-1262 .cs-pricing-card .cs-checkmark {
  color: #ff6600;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 0.5rem;
}
#pricing-1262 .cs-pricing-card .cs-button {
  display: block;
  width: 100%;
  padding: 0.7rem;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: auto;
}
#pricing-1262 .cs-pricing-card .cs-button-monthly {
  background-color: white;
  color: #ff6600;
  border: 1px solid #ea3f34;
}
#pricing-1262 .cs-pricing-card .cs-button-monthly:hover {
  background-color: #5cb5e6;
  border: 1px solid #5cb5e6;
  color: white;
}
#pricing-1262 .cs-pricing-card .cs-button-annual {
  background-color: #ea3f34;
  color: white;
  margin-top: 2px;
}
#pricing-1262 .cs-pricing-card .cs-button-annual:hover {
  background-color: #5cb5e6;
}
#pricing-1262 .cs-pricing-card .feature {
  background-color: white;
}
#pricing-1262 .cs-pricing-card .annual {
  background-color: #1a1a2e;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
}
#pricing-1262 .cs-pricing-card .billed-annually {
  font-size: 0.8rem;
  color: #e5dede;
  margin-top: 4px;
  font-weight: 100;
}
#pricing-1262 .cs-pricing-card .monthly .no {
  margin-left: -8px;
}
#pricing-1262 .cs-pricing-card .price {
  font-size: 1.2rem;
  font-weight: 600;
}
#pricing-1262 .cs-pricing-card .monthly.price {
  align-self: flex-start;
}
#pricing-1262 .cs-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
#pricing-1262 .cs-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
#pricing-1262 .cs-toggle input:checked + .cs-toggle-slider {
  background-color: #1a1a2e;
}
#pricing-1262 .cs-toggle input:focus + .cs-toggle-slider {
  box-shadow: 0 0 1px #2196F3;
}
#pricing-1262 .cs-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
#pricing-1262 .cs-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
#pricing-1262 .cs-course-only {
  display: none;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: 1rem;
  text-align: center;
  overflow: hidden;
}
#pricing-1262 .cs-course-only .cs-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: left;
}
#pricing-1262 .cs-course-only .cs-column.feature {
  grid-column: 1 / span 2;
}
#pricing-1262 .cs-course-only .cs-row .monthly,
#pricing-1262 .cs-course-only .cs-row .feature {
  background-color: white;
  border-bottom: .5px solid #e9e9e9;
  min-height: 3rem;
  align-self: flex-end;
}
#pricing-1262 .cs-course-only .cs-row .feature {
  margin-top: 0;
}
#pricing-1262 .cs-course-only .cs-checkmark {
  margin-right: 0;
}
#pricing-1262 .cs-course-only .cs-button {
  background-color: #eb3e33;
  color: white;
  border: none;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#pricing-1262 .cs-course-only .cs-button:hover {
  background-color: #d62115;
}
@media (max-width: 768px) {
  #pricing-1262 .cs-container-left {
    width: 100%;
  }
  #pricing-1262 .cs-course-only .cs-column .cs-title {
    font-size: 1.3rem !important;
  }
  #pricing-1262 .cs-course-only .cs-column .cs-button {
    max-width: 95%;
    margin-top: 1.5rem;
    padding: 1rem;
  }
  #pricing-1262 .cs-pricing-card {
    overflow-x: auto;
    margin-top: -2rem;
  }
  #pricing-1262 .cs-pricing-card .cs-course-only {
    grid-template-columns: 0.5fr 1fr;
  }
  #pricing-1262 .cs-pricing-card .feature {
    grid-column-start: 1;
  }
  #pricing-1262 .cs-pricing-card .cs-monthly {
    grid-column-start: 2;
  }
  #pricing-1262 .cs-pricing-card .cs-annual {
    grid-column-start: 3;
  }
  #pricing-1262 .cs-pricing-card .cs-column .cs-title {
    font-size: 1rem;
    padding: 1rem 0.5rem;
  }
  #pricing-1262 .cs-pricing-card .cs-row {
    display: contents;
  }
  #pricing-1262 .cs-pricing-card .cs-row > * {
    padding: 0.5rem 1rem;
    margin-top: -1px;
    min-height: 0;
    height: auto;
    font-size: 1rem;
    display: flex;
  }
  #pricing-1262 .cs-pricing-card .price {
    font-size: 1rem;
  }
  #pricing-1262 .cs-pricing-card .cs-logo {
    padding: 1.5rem;
  }
  #pricing-1262 .cs-pricing-card .cs-button {
    margin: 0.5rem 0.3rem;
    padding: 0.4rem;
    font-size: 0.8rem;
    max-width: 90%;
  }
  #pricing-1262 .cs-pricing-card .cs-annual .cs-button {
    margin-top: 10px;
  }
}
@media (max-width: 768px) and (max-width: 390px) {
  #pricing-1262 .cs-container-left .cs-toggle-group {
    width: 112%;
    margin-left: -20px;
  }
}
@media (max-width: 768px) and (max-width: 390px) {
  #pricing-1262 .cs-pricing-card {
    margin-left: -20px;
    margin-right: -20px;
  }
  #pricing-1262 .cs-pricing-card .cs-row .feature {
    font-size: 0.9rem;
  }
}
@media only screen and (min-width: 48rem) {
  #pricing-1262 #pricing-1262 .cs-container {
    flex-direction: row;
    align-items: center;
  }
  #pricing-1262 #pricing-1262 .cs-container-left {
    width: 40%;
  }
  #pricing-1262 #pricing-1262 .cs-container-right {
    width: 60%;
  }
  #pricing-1262 #pricing-1262 .cs-pricing-card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (min-width: 48rem) {
  #pricing-1262 #pricing-1262 .cs-container {
    max-width: 1200px;
  }
  #pricing-1262 #pricing-1262 .cs-pricing-card {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}
@keyframes toggleOn {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(26px);
  }
}
@keyframes toggleOff {
  0% {
    transform: translateX(26px);
  }
  100% {
    transform: translateX(0);
  }
}
#pricing-1262 .cs-toggle-slider:before {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
#pricing-1262 .cs-toggle input:checked + .cs-toggle-slider:before {
  animation-name: toggleOn;
}
#pricing-1262 .cs-toggle input:not(:checked) + .cs-toggle-slider:before {
  animation-name: toggleOff;
}
/*--   Start Watching Button    -->
<--- -------------------------- -*/
.cs-button-12 {
  font-size: 1rem;
  /* 46px - 56px */
  line-height: clamp(2.875rem, 8vw, 3.5rem);
  text-decoration: none;
  font-weight: 700;
  margin-top: 1.75rem;
  color: #fff;
  background-color: var(--primary);
  padding: 0 0 0 1.5rem;
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  transition: background-color 0.3s;
}
.cs-button-12:hover {
  background-color: #1a1a1a;
  color: white;
  text-decoration: none;
}
.cs-button-12:hover .cs-button-wrapper:before {
  height: 100%;
}
.cs-button-12:hover .cs-button-icon {
  /* turns it white */
  filter: grayscale(1) brightness(1000%);
}
.cs-button-12 .cs-button-wrapper {
  width: 3.5rem;
  background-color: #E8E8E8;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  transition: transform 0.3s, background-color 0.3s;
}
.cs-button-12 .cs-button-wrapper:before {
  /* button background color */
  content: '';
  width: 100%;
  height: 0%;
  background: var(--primary);
  opacity: 1;
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: height .3s;
}
.cs-button-12 .cs-button-icon {
  width: 1.75rem;
  height: auto;
  display: block;
}