/* VARIABLES*/

:root {
  --primary-color: #a80018;
  --secondary-color: #202e66;
  --gray-bg-color: #f6f6f6;
  --gray-300-color: #ececec;
  --gray-500-color: #b1b1b1;
  --gray-800-color: #1c1c1c;

  --primary-border-radius: 12px;
  --primary-image-radius: 30px;

  --mobile-vertical-padding-section: 64px;

  --white-space: 20px;

  --black: #000;
  --white: #fff;
}

/* RESET */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  font-family: "Inter", sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  scroll-behavior: smooth;
}

html:focus-within {
  scroll-behavior: smooth;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* BASE CONFIG */

h1 {
  font-size: 50px;
  font-weight: 600;
  line-height: 59px;
}

h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
}

h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 35px;
}

h4 {
  font-size: 22px;
  font-weight: 600;
  line-height: 31px;
}

h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 19px;
}

.subtitle1 {
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
}

.subtitle2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
}

p.small {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

.hidden {
  display: none;
}

button,
a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 5px;
  width: 100%;
  border: none;
  border-radius: var(--primary-border-radius) 0px;
  padding: 15px 24px;
  transition: 0.3s;

  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

button.primary,
a.button.primary {
  color: var(--white);
  background-color: var(--primary-color);
}

button.primary:hover,
a.button.primary:hover {
  color: var(--primary-color);
  background-color: var(--gray-300-color);
}

button.primary.withArrow:hover::before,
a.button.primary.withArrow:hover::before {
  filter: invert(45%) sepia(96%) saturate(5419%) hue-rotate(345deg)
  brightness(64%) contrast(110%);
}

button.secondary,
a.button.secondary {
  color: var(--white);
  background-color: var(--secondary-color);
}

button.secondary:hover,
a.button.secondary:hover {
  color: var(--secondary-color);
  background-color: var(--gray-300-color);
}

button.secondary.withArrow:hover::before,
a.button.secondary.withArrow:hover::before {
  filter: invert(88%) sepia(59%) saturate(871%) hue-rotate(193deg)
  brightness(91%) contrast(98%);
}

button.withArrow::before,
a.button.withArrow::before {
  content: url("./icons/right-arrow-button.svg");
  transition: 0.3s;
}

button.gray,
a.button.gray {
  color: var(--primary-color);
  background-color: var(--gray-300-color);
}

button.gray:hover,
a.button.gray:hover {
  color: var(--gray-300-color);
  background-color: var(--primary-color);
}

.container {
  width: 100%;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.whiteSpacer {
  height: var(--white-space);
}

/* LOADER */

.loader {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide content initially */
.hidden {
  display: none;
}

/* HERO */

.hero {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: 128px;
  background-color: var(--gray-bg-color);
  background-image: url("./icons/icon-bg-top-right.svg");
  background-position: 130% 69%;
  background-repeat: no-repeat;
  background-size: 50%;
}

.heroLogo {
  margin-bottom: 20px;
}

.heroTitle {
  font-size: 36px;
  line-height: 45px;
  margin-bottom: 20px;
}

.heroText {
  font-weight: 500;
  margin-bottom: 20px;
}

.heroTickList,
.heroStarList {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-bottom: 20px;
}

.heroTickElement,
.heroStarElement {
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
}

.heroStarElement a {
  color: var(--primary-color);
  text-decoration: none;
}

.heroSignUp {
  margin-bottom: 10px;
}

.buttonWithPriceWrapper {
  margin-bottom: 15px;
}

.heroImage {
  max-width: 100%;
  margin-bottom: 30px;
}

.googleReviewsWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
}

.reviewsInfoText span {
  font-weight: 600;
}

/* COURSE FOR YOU */

.courseForYou {
  position: relative;
  padding-bottom: var(--mobile-vertical-padding-section);
  margin-top: -65px;
}

.courseForYouGrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
}

.courseForYouBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 20px;
  padding: 30px;
  border-radius: var(--primary-border-radius);
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.05);
  background-color: var(--white);
}

.courseForYouSignUpWrapper {
  text-align: center;
  padding-top: 30px;
}

.courseForYouSignUpTitle {
  font-size: 26px;
  line-height: 35px;
  margin-bottom: 10px;
}

/* YT */

.yt {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: var(--mobile-vertical-padding-section);
  background-color: var(--gray-bg-color);
  background-image: url("./icons/icon-bg-top-right.svg");
  background-position: -30% -3%;
  background-repeat: no-repeat;
  background-size: 50%;
}

.ytVideo {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  border-radius: 8px;
  margin-bottom: 32px;
  overflow: hidden;
}

.ytVideo > video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.ytTitle {
  font-size: 22px;
  line-height: 31px;
  margin-bottom: 20px;
}

.ytText {
  font-weight: 500;
  margin-bottom: 30px;
}

/* WHAT YOU GET */

.whatYouGet {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: var(--mobile-vertical-padding-section);
}

.whatYouGet .contentWrapper {
  margin-bottom: var(--mobile-vertical-padding-section);
}

.whatYouGetTitle {
  font-size: 36px;
  line-height: 45px;
  margin-bottom: 20px;
}

.whatYouGet .subtitle1,
.whatYouGet .small {
  margin-bottom: 20px;
}

.giftsWrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 45px;
}

.singleGift {
  display: flex;
  align-items: center;
  column-gap: 18px;
}

.singleGiftTitle {
  font-size: 20px;
  line-height: 29px;
}

.whatYouGet .subtitle2 a {
  color: var(--primary-color);
  text-decoration: underline;
}

/* COURSE PROGRAMME */

.courseProgramme,
.courseProgramme .innerContainer {
  text-align: center;
  background-color: var(--gray-bg-color);
}

.courseProgramme .innerContainer {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: var(--mobile-vertical-padding-section);
}

.courseProgrammeTitle,
.courseProgramme .innerContainer .small {
  margin-bottom: 20px;
}

.courseProgrammeTitle {
  font-size: 26px;
  line-height: 35px;
}

.detailsWrapper {
  text-align: left;
}

.detailsList {
  list-style: none;
}

.detailsElement {
  max-width: 762px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 15px;
  padding: 15px;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

.detailsElement:nth-child(odd) {
  background-color: var(--white);
}

.detailsElement:nth-child(even) {
  background-color: var(--gray-300-color);
}

.detailsElementLeftCol {
  display: flex;
  column-gap: 5px;
}

/* ITS FOR YOU*/

.itsForYou {
  padding-top: calc(var(--mobile-vertical-padding-section) - 25px);
  padding-bottom: var(--mobile-vertical-padding-section);
  background-color: var(--gray-bg-color);
  background-image: url("./icons/icon-bg-top-right.svg");
  background-position: -30% -3%;
  background-repeat: no-repeat;
  background-size: 50%;
}

.itsForYouImage {
  max-width: 100%;
}

.itsForYouTitle {
  font-size: 22px;
  line-height: 31px;
  margin-bottom: 20px;
}

.itsForYouSubtitle {
  margin-bottom: 20px;
}

.itsForYouText {
  margin-bottom: 30px;
}

/* WHY US */

.whyUs {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: var(--mobile-vertical-padding-section);
}

.whyUs .contentWrapper {
  margin-bottom: var(--mobile-vertical-padding-section);
}

.whyUsTitle {
  font-size: 36px;
  line-height: 45px;
  margin-bottom: 20px;
}

.whyUs .subtitle1,
.whyUs .small {
  margin-bottom: 20px;
}

.whyUs .featuresWrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 45px;
}

.whyUs .singleFeature {
  display: flex;
  align-items: center;
  column-gap: 18px;
}

.whyUs .singleFeatureTitle {
  font-size: 26px;
  line-height: 35px;
}

.whyUs .subtitle2 a {
  color: var(--primary-color);
  text-decoration: underline;
}

/* WHY US SLIDER */

.whyUsSlider {
  padding-bottom: var(--mobile-vertical-padding-section);
}

.whyUsSlider #slider2 .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TRUSTED US */

.trustedUs {
  padding-bottom: var(--mobile-vertical-padding-section);
}

.trustedUsTitle {
  text-align: center;
  margin-bottom: 15px;
}

.trustedUsWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

/* WHAT THEY SAY */

.whatTheySay {
  padding-bottom: 115px;
}

.whatTheySayTitle {
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 30px;
}

.whatTheySayGoogleReviewsWrapper {
  justify-content: center;
  margin-bottom: 50px;
}

.whatTheySayReview {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  border-radius: 12px;
  background-color: var(--gray-bg-color);
  padding: 30px;
}

.whatTheySayReviewHeader,
.whatTheySayReviewAuthor {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.whatTheySayReviewHeader {
  justify-content: space-between;
}

.whatTheySayReviewDate {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  color: var(--gray-500-color);
}

.whatTheySayReviewsPagination {
  bottom: -55px;
}

/* .whatTheySayReviewsPagination li:nth-child(n + 7) {
  display: none;
} */

.whatTheySayReviewsPaginationPage,
.whatTheySayReviewsPaginationPage.is-active {
  width: 12px;
  height: 12px;
  opacity: 1;
}

.whatTheySayReviewsPaginationPage {
  background-color: transparent;
  border: 1px solid var(--primary-color);
}

.whatTheySayReviewsPaginationPage.is-active {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  transform: none;
}

/* SIGNED UP FOR COURSE */

.signedUpForCourse {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: var(--mobile-vertical-padding-section);
  background-color: var(--gray-bg-color);
}

.signedUpForCourseContentWrapper {
  text-align: center;
  margin-bottom: 30px;
}

.coursesWrapper {
  max-width: 1028px;
  background-color: var(--white);
  padding: 15px;
  margin: 0 auto 30px;
}

.singleCourse {
  max-width: 998px;
  background-color: var(--gray-bg-color);
  padding: 20px;
  animation: append-animate 0.3s linear;
}

.singleCourse:nth-child(odd) {
  background-color: var(--white);
}

.courseDateWrapper,
.addressWrapper,
.courseTitle,
.coursePrice {
  margin-bottom: 15px;
}

.coursePrice {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
}

/* ANY QUESTIONS */

.anyQuestions {
  padding-top: var(--mobile-vertical-padding-section);
  padding-bottom: var(--mobile-vertical-padding-section);
  background: linear-gradient(
          20deg,
          var(--primary-color) 40%,
          var(--white) 40%
  );
}

.titleWrapper,
.anyQuestionsAddressWrapper,
.anyQuestionsContactWrapper {
  margin-bottom: 30px;
}

.anyQuestionsTitle {
  color: var(--primary-color);
  margin-bottom: 20px;
}

.anyQuestionsPaymentInfo {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 10px;
}

.representativeWrapper {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
}

.representativeWrapper > img {
  max-width: 96px;
}

.representativeImgDesktop {
  display: none;
  max-width: 199px;
}

.anyQuestionSingleContact {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 5px;
}

.anyQuestionSingleContact:not(:last-of-type) {
  margin-bottom: 10px;
}

.anyQuestionSingleContact > a {
  display: block;
  text-decoration: none;
  color: var(--primary-color);
}

.anyQuestionsButttonContact {
  margin-bottom: 50px;
}

.anyQuestionsFormWrapper {
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.05);
  padding: 30px 20px;
}

.anyQuestionsFormTitle {
  margin-bottom: 20px;
}

.anyQuestionsFormWrapper .formList {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}

.anyQuestionsFormWrapper .formRow {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}

.anyQuestionsFormWrapper .formField {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
}

.anyQuestionsFormWrapper .formField label {
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
  margin-bottom: 0;
}

.anyQuestionsFormWrapper .formField input,
.anyQuestionsFormWrapper .formField textarea {
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  padding: 13px 15px;
}

.anyQuestionsFormWrapper .checkboxWrapper {
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
}

.anyQuestionsFormWrapper .checkboxWrapper input {
  position: relative;
  top: 5px;
}

.anyQuestionsFormWrapper .checkboxWrapper label {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}

.anyQuestionsFormWrapper .checkboxWrapper label a {
  color: var(--primary-color);
}

/* FOOTER */

.footer * {
  color: var(--white);
}

.footerWrapper {
  text-align: center;
  background-color: var(--gray-800-color);
  padding-top: 50px;
  padding-bottom: 50px;
}

.footerWrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 40px;
}

.footerLogo {
  margin-bottom: 40px;
}

.footerAddress {
  margin-bottom: 20px;
}

.footerContactWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
}

.footerContactWrapper:not(:last-of-type) {
  margin-bottom: 10px;
}

.footerContactWrapper > a {
  display: block;
  text-decoration: none;
}

.footerColTitle {
  margin-bottom: 20px;
}

.footerMenuWrapper {
  display: flex;
  flex-direction: column;
  row-gap: 7px;
}

.footerLink {
  display: block;
  text-decoration: none;
}

.footerSocialsWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
}

.footerSingleSocial {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: var(--white);
  padding: 5px;
}

.footerSingleSocial > img {
  max-width: 100%;
}

.underFooterWrapper {
  text-align: center;
  background-color: var(--black);
  padding-top: 30px;
  padding-bottom: 30px;
}

.underFooterText,
.footerYear {
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  color: var(--gray-500-color);
}

/* MOBILE */

@media (min-width: 768px) {
  .container {
    padding-left: 55px;
    padding-right: 55px;
  }

  button,
  a.button {
    width: max-content;
  }

  /* HERO */
  .hero {
    background-size: 60%;
    background-position: 125% -5%;
  }

  .imageWrapper {
    text-align: center;
  }

  /* COURSE FOR YOU */
  .courseForYouGrid {
    grid-template-columns: 1fr 1fr;
  }

  .courseForYouSignUpWrapper {
    grid-column: 1 / -1;
  }

  .courseForYouSignUp {
    margin: 0 auto;
  }

  /* YT */
  .yt {
    background-size: 60%;
    background-position: -30% -15%;
  }

  .giftsWrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* ITS FOR YOU */
  .itsForYou {
    background-size: 60%;
    background-position: 130% -10%;
  }

  /* WHY US */
  .whyUs .featuresWrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* TRUSTED US */
  .trustedUsWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  /* WHAT THEY SAY */
  .whatTheySayTitle {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
    color: var(--black);
  }

  /* SIGNED UP FOR COURSE */
  .coursesWrapperLoadMore {
    margin: 0 auto;
  }

  /* ANY QUESTIONS */
  .anyQuestionsFormWrapper .formRow {
    grid-template-columns: repeat(2, 1fr);
  }

  .representativeWrapper > img {
    display: none;
  }

  .representativeImgDesktop {
    display: block;
  }

  .anyQuestionsButttonContact {
    margin-bottom: 0;
  }

  .anyQuestionsContentDesktop {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1.5fr;
  }

  /* FOOTER */
  .footerWrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .whiteSpacer {
    height: 90px;
  }

  /* HERO */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background-size: 50%;
    background-position: 121% -12%;
  }

  /* YT */
  .yt {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    grid-gap: 35px;
    background-size: 40%;
    background-position: -12% -50%;
  }

  .ytVideo {
    margin-bottom: 0;
  }

  /* WHAT YOU GET */
  .whatYouGet {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    grid-gap: 35px;
    padding-bottom: 50px;
  }

  .whatYouGet .contentWrapper > p:last-of-type,
  .whatYouGet .contentWrapper {
    margin-bottom: 0;
  }

  /* COURSE PROGRAMME */
  .courseProgramme {
    background-color: var(--white);
  }

  .courseProgramme .innerContainer {
    padding-bottom: 50px;
  }

  .detailsWrapper {
    display: flex;
    justify-content: center;
  }

  .courseProgrammeTitle,
  .innerContainer > p.small {
    max-width: 762px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ITS FOR YOU */
  .itsForYou {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    background-size: 50%;
    background-position: 120% -210%;
  }

  .itsForYouImageWrapper {
    order: 2;
  }

  .itsForYouContentWrapper {
    order: 1;
  }

  /* WHY US */
  .whyUs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 35px;
  }

  .whyUs .contentWrapper > p:last-of-type,
  .whyUs .contentWrapper {
    margin-bottom: 0;
  }

  .whyUs .featuresWrapper {
    grid-gap: 60px 30px;
  }

  /* TRUSTED US */
  .trustedUsWrapper > img {
    max-width: 120px;
  }

  /* SIGNED UP FOR COURSE */
  .singleCourse {
    display: grid;
    grid-template-columns: 0.4fr 0.6fr 1.4fr 0.3fr;
    align-items: center;
    grid-gap: 10px;
  }

  .courseDateWrapper,
  .addressWrapper,
  .courseTitle,
  .coursePrice {
    margin-bottom: 0;
  }

  .courseTitle {
    margin-bottom: 10px;
  }

  /* ANY QUESTIONS */
  .anyQuestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 35px;
    background: linear-gradient(
            -70deg,
            var(--primary-color) 40%,
            var(--white) 40%
    );
  }

  .anyQuestionsFormWrapper form input {
    width: 180px;
  }

  .anyQuestionsFormWrapper form input[type="checkbox"] {
    width: auto;
  }

  /* FOOTER */
  .footerWrapper {
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
  }

  .footerContactWrapper {
    justify-content: flex-start;
  }

  .footerSocialsWrapper {
    justify-content: flex-start;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-left: 100px;
    padding-right: 100px;
  }

  /* HERO */
  .hero {
    grid-gap: 35px;
    background-size: 40%;
    background-position: 112% -15%;
  }

  /* COURSE FOR YOU */
  .courseForYouGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* YT */
  .yt {
    background-size: 30%;
    background-position: -7% -50%;
  }

  /* SIGNED UP FOR COURSE */
  .signedUpForCourseContentWrapper h4 {
    font-size: 26px;
    font-weight: 600;
    line-height: 35px;
  }

  .signedUpForCourseContentWrapper h3 {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
  }

  /* ITS FOR YOU */
  .itsForYou {
    background-size: 40%;
    background-position: 110% -230%;
  }

  /* ANY QUESTIONS */
  .anyQuestions {
    grid-template-columns: 1fr 483px;
  }

  .anyQuestionsFormWrapper form input {
    width: 196.5px;
  }
}

@media (min-width: 1600px) {
  .container {
    padding-left: calc((100vw - 1250px) / 2);
    padding-right: calc((100vw - 1250px) / 2);
  }

  /* HERO */
  .hero {
    grid-gap: 125px;
    background-size: 35%;
    background-position: 109% -33%;
  }

  .buttonWithPriceWrapper {
    display: flex;
    align-items: center;
    grid-gap: 10px;
  }

  .buttonWithPriceWrapper > a {
    margin-bottom: 0;
  }

  /* COURSE FOR YOU */
  .courseForYouSignUpTitle {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
  }

  /* YT */
  .yt {
    grid-gap: 70px;
    background-size: 25%;
  }

  .ytTitle {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
  }

  /* WHAT YOU GET */
  .whatYouGet {
    grid-gap: 125px;
  }

  .whatYouGetTitle {
    font-size: 50px;
    font-weight: 600;
    line-height: 59px;
  }

  /* COURSE PROGRAMME */
  .courseProgrammeTitle {
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
  }

  /* ITS FOR YOU */
  .itsForYou {
    grid-gap: 125px;
    grid-template-columns: 1fr 1.3fr;
    background-size: 30%;
    background-position: 105% -40%;
  }

  .itsForYouTitle {
    font-size: 50px;
    font-weight: 600;
    line-height: 59px;
  }

  /* WHY US */
  .whyUs {
    grid-gap: 125px;
  }

  .whyUsTitle {
    font-size: 50px;
    font-weight: 600;
    line-height: 59px;
  }

  /* TRUSTED US */
  .trustedUs {
    display: flex;
    align-items: center;
  }

  .trustedUsTitle {
    margin-bottom: 0;
  }

  .trustedUsWrapper > img {
    max-width: 130px;
  }

  /* ANY QUESTIONS */
  .anyQuestions {
    display: grid;
    grid-template-columns: 0.6fr 483px;
    align-items: center;
    grid-gap: 125px;
    background: linear-gradient(
            -80deg,
            var(--primary-color) 45%,
            var(--white) 45%
    );
  }

  .anyQuestionsContentDesktop {
    grid-gap: 25px;
  }

  .anyQuestionsFormWrapper form input {
    width: 211px;
  }
}

@media (min-width: 1920px) {
  /* HERO */
  .hero {
    background-size: 28%;
    background-position: 105% -35%;
  }

  /* YT */
  .yt {
    background-position: -6% -49px;
  }

  /* ITS FOR YOU */
  .itsForYou {
    background-size: 27%;
    background-position: 104% -60%;
  }
}

@keyframes append-animate {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}