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

* {
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

svg {
  pointer-events: none;
}

:root {
  --bgMain:#FFE2C9;
  --gradient:linear-gradient(90deg, #B6A4FF 0%, #7054E0 46.15%, #023DFF 100%);
  --gradientSeparator:linear-gradient(90deg, #BCABFF 0%, #7054E0 52.4%, #3D2E7A 100%);
  --violet:#E0D8FF;
  --purple:#7054E0;
  --purpleDark:#331C93;
  --purpleText:#5C4C9D;
  --textLight:#B6A4FF;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bgMain);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

.button {
  background: var(--gradient);
  color: white;
  padding: 1rem 4rem;
  border-radius: 30px;
}

button {
  outline: none;
  border: none;
}

.separator {
  background: var(--purpleText);
  height: 1px;
  width: 320px;
  display: block;
  margin: 1rem 0;
}

.separatorBig {
  width: 100%;
  padding-left: 4rem;
  padding-right: 4rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .separatorBig {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.separatorBig div {
  background: var(--gradientSeparator);
  height: 6px;
}

.separatorFull {
  background: var(--gradientSeparator);
  height: 6px;
  width: 100%;
  margin: 1rem auto 1rem auto;
}

h1, h2 {
  padding: 0 1rem;
}

.instrumentRegular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrumentRegularItalic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}

#mainLead {
  position: relative;
  width: 100%;
}
#mainLead #imageMobile {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
#mainLead #imageMobile img {
  width: 100%;
}
@media (min-width: 1046px) {
  #mainLead #imageMobile {
    display: none;
  }
}
#mainLead #logoMobile {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
}
@media (min-width: 1046px) {
  #mainLead #logoMobile {
    display: none;
  }
}
#mainLead .imageContainer {
  position: absolute;
}
@media (max-width: 1045px) {
  #mainLead .imageContainer {
    display: none;
  }
}
#mainLead .imageContainer#imageContainer1 {
  left: 0;
  top: 1.5rem;
}
@media (max-width: 1527px) {
  #mainLead .imageContainer#imageContainer1 {
    width: 250px;
  }
}
@media (max-width: 1200px) {
  #mainLead .imageContainer#imageContainer1 {
    width: 200px;
    top: 5rem;
  }
}
#mainLead .imageContainer#imageContainer2 {
  left: 12rem;
}
@media (max-width: 1527px) {
  #mainLead .imageContainer#imageContainer2 {
    width: 300px;
    left: 11rem;
  }
}
@media (max-width: 1200px) {
  #mainLead .imageContainer#imageContainer2 {
    width: 250px;
    left: 8rem;
    top: 5rem;
  }
}
#mainLead .imageContainer#imageContainer3 {
  top: 0;
  right: 9rem;
}
@media (max-width: 1527px) {
  #mainLead .imageContainer#imageContainer3 {
    width: 300px;
    right: 6rem;
  }
}
@media (max-width: 1200px) {
  #mainLead .imageContainer#imageContainer3 {
    width: 250px;
    right: 6rem;
    top: 5rem;
  }
}
#mainLead .imageContainer#imageContainer4 {
  top: 0;
  right: 0;
}
@media (max-width: 1527px) {
  #mainLead .imageContainer#imageContainer4 img {
    width: 180px;
  }
}
@media (max-width: 1200px) {
  #mainLead .imageContainer#imageContainer4 {
    top: 5rem;
  }
  #mainLead .imageContainer#imageContainer4 img {
    width: 130px;
  }
}
#mainLead #mainLeadCenter {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1rem 1rem;
}
#mainLead #mainLeadCenter h1 {
  background: var(--gradient);
  -webkit-background-clip: text; /* Chrome, Safari */
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Firefox */
  color: transparent;
  font-size: 54px;
  text-align: center;
  margin-top: 3rem;
}
@media (max-width: 1045px) {
  #mainLead #mainLeadCenter h1 {
    margin-top: -3rem;
  }
}
#mainLead #mainLeadCenter #mainSubText1 {
  color: var(--purpleText);
  font-size: 20px;
  text-align: center;
  margin-top: 1rem;
}
#mainLead #mainLeadCenter #mainSubText2 {
  color: var(--purpleText);
  font-size: 16px;
  text-align: center;
}
#mainLead #mainLeadCenter > a {
  margin-top: 2rem;
}
@media (max-width: 1045px) {
  #mainLead #mainLeadCenter #logoNonMobile {
    display: none;
  }
}

#recognize {
  margin-top: 8rem;
}
@media (max-width: 740px) {
  #recognize {
    margin-top: 3rem;
  }
}
#recognize h2 {
  background: var(--gradient);
  -webkit-background-clip: text; /* Chrome, Safari */
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Firefox */
  color: transparent;
  font-size: 32px;
  font-weight: normal;
  text-align: center;
}
#recognize #recognizeContent {
  margin-top: 7rem;
  display: flex;
  justify-content: center;
  position: relative;
  width: 850px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 850px) {
  #recognize #recognizeContent {
    width: 100%;
    justify-content: unset;
  }
}
@media (max-width: 740px) {
  #recognize #recognizeContent {
    margin-top: 1rem;
  }
}
#recognize #recognizeContent #imageContainerRecognizeMobile {
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 741px) {
  #recognize #recognizeContent #imageContainerRecognizeMobile {
    display: none;
  }
}
#recognize #recognizeContent #imageContainerRecognizeMobile img {
  width: 100%;
}
#recognize #recognizeContent .imageContainerRecognize {
  position: relative;
}
@media (max-width: 740px) {
  #recognize #recognizeContent .imageContainerRecognize {
    display: none;
  }
}
#recognize #recognizeContent #imageContainerRecognize1 {
  left: 6rem;
}
#recognize #recognizeContent #imageContainerRecognize2 {
  top: -2rem;
  left: 1rem;
}
#recognize #recognizeContent #imageContainerRecognize3 {
  top: -4rem;
  right: 4rem;
}
#recognize #recognizeContent .recognizeContent {
  background: var(--violet);
  color: var(--purpleText);
  padding: 1rem;
  width: 115px;
  height: max-content;
  position: absolute;
  z-index: 9;
  font-size: 14px;
}
@media (max-width: 740px) {
  #recognize #recognizeContent .recognizeContent {
    display: none;
  }
}
#recognize #recognizeContent .recognizeContent b {
  color: var(--purple);
}
#recognize #recognizeContent .recognizeContent#recognizeContent1 {
  width: 135px;
  left: 17rem;
  top: -3rem;
}
#recognize #recognizeContent .recognizeContent#recognizeContent2 {
  top: 2rem;
  left: 28.5rem;
}
#recognize #recognizeContent .recognizeContent#recognizeContent3 {
  right: 8rem;
  top: 9rem;
}
#recognize #recognizeContent .recognizeContent#recognizeContent4 {
  top: 14rem;
  left: 5rem;
}
#recognize #recognizeContent .recognizeContent#recognizeContent5 {
  bottom: 0;
  width: 130px;
  right: 19rem;
}

#forYou {
  background: var(--gradient);
  -webkit-background-clip: text; /* Chrome, Safari */
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Firefox */
  color: transparent;
  font-size: 32px;
  text-align: center;
  margin: 3rem auto 3rem auto;
  max-width: 380px;
  font-weight: 300;
}
@media (max-width: 740px) {
  #forYou {
    margin: 2rem auto 2rem auto;
  }
}

#faq {
  padding: 2rem 4rem;
}
@media (max-width: 768px) {
  #faq {
    padding: 2rem 1rem;
  }
}
#faq h2 {
  color: var(--purpleText);
  font-size: 32px;
  font-weight: normal;
  padding: 0;
}
#faq #faqItems {
  margin: 4rem 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
#faq #faqItems .faqContent {
  position: relative;
  padding-right: 3rem;
  padding-bottom: 0.5rem;
  font-size: 16px;
  color: var(--purpleText);
  border-bottom: 2px solid var(--purpleText);
}
#faq #faqItems .faqContent p {
  display: none;
}
#faq #faqItems .faqContent.active p {
  display: block;
}
#faq #faqItems .faqContent.active svg {
  transform: rotate(0deg);
}
#faq #faqItems .faqContent h3 {
  font-size: 16px;
  color: var(--purpleText);
  margin-bottom: 5px;
}
#faq #faqItems .faqContent .toggle {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 0;
}
#faq #faqItems .faqContent svg {
  transform: rotate(180deg);
}

footer {
  background: black;
  padding: 2rem 1rem 6rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}
footer span {
  color: white;
  font-size: 11px;
}

#signUp h2 {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 32px;
  text-align: center;
  margin: 3rem auto 1rem auto;
  max-width: 480px;
  font-weight: 300;
}
#signUp p {
  text-align: center;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
#signUp form {
  max-width: 438px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.5rem;
  margin: 2rem auto;
}
@media (max-width: 768px) {
  #signUp form {
    padding: 0 1rem;
  }
}
#signUp form input {
  width: 100%;
  color: var(--purpleText);
  padding: 1rem;
  border: none;
  background: rgb(255, 242, 224);
}
#signUp form input:focus {
  border: none;
  outline: none;
}
#signUp form input::placeholder {
  color: var(--purpleText);
}
#signUp form button {
  margin: 1.5rem auto 1.5rem auto;
  display: block;
  cursor: pointer;
}
#signUp form button:disabled {
  background: gray;
}

#pricing {
  margin: 4rem 0;
  padding: 0 1rem;
}
@media (max-width: 1100px) {
  #pricing {
    margin: 1rem 0;
  }
}
#pricing > h2 {
  color: rgb(51, 28, 147);
  font-size: 54px;
  text-align: center;
  line-height: 92%;
}
@media (max-width: 768px) {
  #pricing > h2 {
    line-height: unset;
  }
}
#pricing > p {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 54px;
  text-align: center;
  line-height: 92%;
}
@media (max-width: 1000px) {
  #pricing > p {
    margin-bottom: 4rem;
  }
}
@media (max-width: 768px) {
  #pricing > p {
    line-height: unset;
  }
}
#pricing #pricingContainer {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 2rem 0;
}
@media (max-width: 1000px) {
  #pricing #pricingContainer {
    flex-direction: column;
    width: 100%;
  }
}
#pricing #pricingContainer > div {
  width: 550px;
  background: rgb(255, 242, 224);
}
@media (max-width: 1000px) {
  #pricing #pricingContainer > div {
    width: 100%;
  }
}
#pricing #pricingContainer > div h3 {
  padding: 2rem;
  font-size: 40px;
  color: white;
}
#pricing #pricingContainer > div .pricingContent {
  padding: 2rem;
}
#pricing #pricingContainer > div .pricingContent .price {
  color: var(--purpleDark);
  font-size: 36px;
}
#pricing #pricingContainer > div .pricingContent .description {
  display: block;
  color: var(--purpleDark);
  font-weight: bold;
  margin-bottom: 2rem;
}
#pricing #pricingContainer > div .pricingContent ul li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--purpleDark);
}
#pricing #pricingContainer #pricingLeft h3 {
  background: rgb(112, 84, 224);
}
#pricing #pricingContainer #pricingRight h3 {
  background: rgb(2, 61, 255);
}
#pricing #returnContainer {
  display: flex;
  gap: 4rem;
  justify-content: center;
  margin-top: 4rem;
}
@media (max-width: 1000px) {
  #pricing #returnContainer {
    margin-top: 1rem;
  }
}
@media (max-width: 1000px) {
  #pricing #returnContainer {
    flex-direction: column;
    gap: 2rem;
  }
}
#pricing #returnContainer h3 {
  font-size: 32px;
  color: var(--purpleDark);
  margin-bottom: 1rem;
}
#pricing #returnContainer p {
  color: var(--purpleDark);
  font-weight: 300;
}
#pricing #returnContainer p span {
  background: var(--gradient);
  color: white;
  padding: 0 5px;
  letter-spacing: 5px;
  font-size: 14px;
}
#pricing #returnContainer ul {
  padding-top: 0.5rem;
  list-style: disc;
  padding-left: 1.5rem;
}
#pricing #returnContainer ul li {
  color: var(--purpleDark);
  font-weight: 300;
  margin-bottom: 0.5rem;
}
#pricing #returnContainer ul li::marker {
  color: var(--purpleDark);
}
#pricing #returnContainer #return {
  width: 315px;
  padding: 1rem;
}
@media (max-width: 1000px) {
  #pricing #returnContainer #return {
    width: 100%;
    text-align: center;
  }
}
#pricing #returnContainer #bonus {
  width: 780px;
  border: 1px solid var(--purpleDark);
  padding: 1rem;
}
@media (max-width: 1000px) {
  #pricing #returnContainer #bonus {
    width: 100%;
    border: none;
    background: #FFF2E0;
  }
  #pricing #returnContainer #bonus h3 {
    text-align: center;
  }
}

#video {
  padding: 0 4rem;
  display: flex;
  justify-content: center;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 1100px) {
  #video {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  #video {
    padding: 0 1rem;
    margin-top: 4rem;
  }
}
@media (max-width: 1100px) {
  #video #videoMobile {
    margin-top: 2rem;
  }
}
#video #videoMobile iframe {
  width: 100%;
}
#video #left {
  width: 550px;
}
@media (max-width: 1100px) {
  #video #left {
    width: 100%;
  }
}
#video h2 {
  font-size: 54px;
  color: var(--purpleDark);
  margin-bottom: 2rem;
}
#video .desc {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--purpleDark);
}
#video .longDesc {
  color: var(--purpleDark);
  margin: 1rem 0;
}
#video .longDesc > p {
  margin-bottom: 1rem;
}
#video a {
  margin-top: 2rem;
  display: block;
  width: max-content;
}

#programme {
  margin: 4rem 0;
  padding: 0 4rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1100px) {
  #programme {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  #programme {
    padding: 0 1rem;
    margin: 2rem 0;
  }
}
#programme picture {
  width: 767px;
  flex-shrink: 0;
}
@media (max-width: 1500px) {
  #programme picture {
    width: 500px;
  }
}
@media (max-width: 1200px) {
  #programme picture {
    width: 400px;
  }
}
@media (max-width: 1100px) {
  #programme picture {
    width: 100%;
  }
}
@media (max-width: 450px) {
  #programme picture {
    -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}
@media (max-width: 1100px) {
  #programme picture img {
    margin: 0 auto;
  }
}
#programme h2 {
  color: var(--purpleDark);
  font-size: 54px;
  font-weight: normal;
}
@media (max-width: 1100px) {
  #programme h2 {
    padding: 0;
  }
}
@media (max-width: 450px) {
  #programme h2 {
    margin-top: -4rem;
  }
}
#programme .sections {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  width: 600px;
  color: var(--purpleDark);
}
@media (max-width: 1100px) {
  #programme .sections {
    width: 100%;
  }
}
#programme .sections .section:nth-of-type(1) {
  width: 100px;
}
@media (max-width: 1100px) {
  #programme .sections .section:nth-of-type(1) {
    width: 150px;
  }
}
#programme .sections .section:nth-of-type(2) {
  width: 153px;
}
@media (max-width: 1100px) {
  #programme .sections .section:nth-of-type(2) {
    width: 150px;
  }
}
#programme .sections .section:nth-of-type(3) {
  width: 153px;
}
@media (max-width: 1100px) {
  #programme .sections .section:nth-of-type(3) {
    width: 150px;
  }
}
#programme .sections .section:nth-of-type(4) {
  width: 153px;
}
@media (max-width: 1100px) {
  #programme .sections .section:nth-of-type(4) {
    width: 150px;
  }
}
#programme .sections .section.full {
  display: flex;
  gap: 1rem;
  width: 350px;
  align-items: center;
}
@media (max-width: 1100px) {
  #programme .sections .section.full {
    width: auto;
  }
}
#programme .sections .section.full svg {
  flex-shrink: 0;
}
#programme .sections .section p {
  margin-top: 0.5rem;
}
@media (max-width: 450px) {
  #programme .right h2 {
    padding-left: 0.7rem;
  }
}

#instructors {
  margin: 6rem 0;
  padding: 0 4rem;
  display: flex;
  justify-content: center;
  gap: 6rem;
  align-items: center;
}
@media (max-width: 1030px) {
  #instructors {
    margin: 2rem 0;
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  #instructors {
    padding: 0 1rem;
  }
}
@media (max-width: 1030px) {
  #instructors {
    gap: 2rem;
  }
}
#instructors p {
  font-size: 24px;
  color: var(--purpleDark);
  width: 211px;
  font-weight: 300;
}
@media (max-width: 1030px) {
  #instructors p {
    width: 100%;
    padding: 0 2rem;
  }
}
#instructors #instructorsItems {
  display: flex;
  gap: 1rem;
  flex-shrink: 1;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #instructors #instructorsItems {
    margin-bottom: 2rem;
    justify-content: center;
  }
}
@media (max-width: 1300px) {
  #instructors #instructorsItems img {
    width: 150px;
  }
}
#instructors #instructorsItems img:nth-of-type(2) {
  position: relative;
  top: 2rem;
}
@media (max-width: 347px) {
  #instructors #instructorsItems img:nth-of-type(2) {
    top: 0;
  }
}
#instructors #instructorsItems img:nth-of-type(4) {
  position: relative;
  top: 2rem;
}
@media (max-width: 347px) {
  #instructors #instructorsItems img:nth-of-type(4) {
    top: 0;
  }
}

#reviews {
  margin: 6rem 0;
  padding: 0 4rem;
  display: flex;
  justify-content: center;
  gap: 6rem;
}
#reviews #reviewMobile {
  display: none;
}
@media (max-width: 1030px) {
  #reviews #reviewMobile {
    display: block;
  }
}
#reviews #reviewMobile img {
  margin: 0 auto;
}
@media (max-width: 1030px) {
  #reviews {
    margin: 4rem 0;
    flex-direction: column;
    background: #FFF2E0;
    padding: 2rem;
    gap: 2rem;
    flex-wrap: wrap;
  }
}
@media (max-width: 513px) {
  #reviews {
    margin-top: -3rem;
  }
}
@media (max-width: 768px) {
  #reviews {
    padding: 2rem 1rem;
  }
}
#reviews p {
  font-size: 32px;
  color: var(--purpleDark);
  font-weight: 300;
  width: 211px;
}
@media (max-width: 1030px) {
  #reviews p {
    width: 100%;
  }
}
@media (max-width: 402px) {
  #reviews p {
    width: 300px;
    padding-left: 1.5rem;
  }
}
#reviews #reviewItems {
  width: 892px;
  display: flex;
  gap: 2rem;
}
@media (max-width: 1030px) {
  #reviews #reviewItems {
    width: 100%;
    display: none;
  }
}
@media (min-width: 1031px) {
  #reviews #reviewItems {
    display: flex;
  }
}

#instructorMain {
  background-image: url("/images/reason.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4rem 1rem;
}
@media (max-width: 768px) {
  #instructorMain {
    background: linear-gradient(to bottom, #331C93 15%, rgba(106, 13, 173, 0) 367px), url("/images/reasonMobile.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}
#instructorMain h2 {
  color: white;
  text-align: center;
  font-size: 54px;
  width: 460px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #instructorMain h2 {
    width: 100%;
  }
}
#instructorMain #flexedInstructor {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}
@media (max-width: 768px) {
  #instructorMain #flexedInstructor {
    flex-direction: column;
    align-items: center;
  }
}
#instructorMain #flexedInstructor #instructorMainDesc {
  width: 450px;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bgMain);
}
@media (max-width: 768px) {
  #instructorMain #flexedInstructor #instructorMainDesc {
    width: 100%;
  }
}
@media (max-width: 768px) {
  #instructorMain #flexedInstructor #instructorMainDesc > div {
    padding: 1rem;
  }
}
#instructorMain #flexedInstructor #instructorMainDesc picture {
  flex-shrink: 0;
}
#instructorMain #flexedInstructor #instructorMainDesc .paragraphTitle {
  font-size: 24px;
  color: var(--purpleDark);
  font-weight: 300;
  margin-bottom: 1rem;
}
@media (max-width: 375px) {
  #instructorMain #flexedInstructor #instructorMainDesc .paragraphDesc {
    font-size: 14px;
  }
}
#instructorMain #flexedInstructor #instructorMainDesc p {
  font-size: 16px;
  color: var(--purpleDark);
  font-weight: 300;
}
#instructorMain #flexedInstructor #instructorMainDesc p b {
  font-weight: bold;
}
#instructorMain #flexedInstructor #instructorMainPoints {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 300px;
}
@media (max-width: 768px) {
  #instructorMain #flexedInstructor #instructorMainPoints {
    width: 100%;
    margin-top: 2rem;
  }
}
#instructorMain #flexedInstructor #instructorMainPoints ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
#instructorMain #flexedInstructor #instructorMainPoints ul li {
  display: flex;
  gap: 1rem;
  color: white;
  font-size: 24px;
  font-weight: 300;
}
#instructorMain #flexedInstructor #instructorMainPoints ul li svg {
  flex-shrink: 0;
  margin-top: 3px;
}
#instructorMain #flexedInstructor #instructorMainPoints a {
  width: max-content;
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  #instructorMain #flexedInstructor #instructorMainPoints a {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

#explained {
  background: var(--purpleDark);
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 8rem 1rem 2rem 1rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #explained {
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
  }
}
#explained > div:nth-of-type(1) {
  width: 318px;
  color: var(--textLight);
  margin-right: 8rem;
}
@media (max-width: 768px) {
  #explained > div:nth-of-type(1) {
    margin-right: 0;
    width: 100%;
  }
}
#explained > div:nth-of-type(1) b {
  color: var(--bgMain);
  font-weight: 300;
}
#explained > div:nth-of-type(1) h2 {
  color: white;
  font-weight: 300;
  font-size: 32px;
  padding: 0;
  margin-top: 2rem;
}
#explained > div:nth-of-type(2) {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 768px) {
  #explained > div:nth-of-type(2) {
    width: 100%;
  }
}
#explained > div:nth-of-type(3) {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 768px) {
  #explained > div:nth-of-type(3) {
    width: 100%;
  }
}
#explained > div .separatorExplained {
  height: 1px;
  width: 90%;
  margin-left: auto;
  background: var(--textLight);
}
#explained > div .wrong {
  color: var(--textLight);
  display: flex;
  gap: 0.5rem;
}
#explained > div .wrong svg {
  flex-shrink: 0;
  margin-top: 3px;
}
#explained > div .right {
  color: white;
  display: flex;
  gap: 0.5rem;
}
#explained > div .right svg {
  flex-shrink: 0;
  margin-top: 3px;
}
#explained #explainedContent {
  flex-basis: 90%;
  background: linear-gradient(180deg, #B6A4FF 0%, #7054E0 46.15%, #023DFF 100%);
  padding: 2rem 1rem 4rem 1rem;
  position: relative;
  top: 5rem;
  max-width: 100%;
}
@media (max-width: 1030px) {
  #explained #explainedContent {
    position: static;
    flex-direction: column;
  }
}
#explained #explainedContent h2 {
  color: white;
  font-size: 36px;
  font-weight: 300;
  text-align: center;
}
#explained #explainedContent > ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
@media (max-width: 1030px) {
  #explained #explainedContent > ul {
    flex-direction: column;
    align-items: center;
  }
}
#explained #explainedContent > ul li {
  width: 250px;
}
#explained #explainedContent > ul li:nth-of-type(1) {
  width: 205px;
}
#explained #explainedContent > ul li:nth-of-type(2) {
  width: 223px;
}
#explained #explainedContent > ul li:nth-of-type(3) {
  width: 208px;
}
#explained #explainedContent > ul li:nth-of-type(4) {
  width: 212px;
}
#explained #explainedContent > ul li:nth-of-type(5) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1030px) {
  #explained #explainedContent > ul li:nth-of-type(5) {
    margin-top: 3rem;
  }
}
#explained #explainedContent > ul li:nth-of-type(5) h3 {
  text-align: left;
}
#explained #explainedContent > ul li:nth-of-type(5) ul {
  list-style: disc;
  color: rgb(224, 216, 255);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 2rem;
}
#explained #explainedContent > ul li h3 {
  color: white;
  font-size: 20px;
  text-align: center;
  min-height: 48px;
  font-weight: 300;
}
#explained #explainedContent > ul li p {
  text-align: center;
  margin-top: 0.5rem;
  font-weight: 300;
  color: rgb(224, 216, 255);
}
#explained #explainedContent > ul li .imgContainer {
  height: 65px;
  margin: 1.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video {
  width: 767px;
}

#formMessage {
  padding: 0.5rem 1rem;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  color: white;
  display: block;
}
#formMessage.success {
  background: #198754;
}
#formMessage.error {
  background: #dc3545;
}

.loader {
  display: none;
  margin: 1rem auto;
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1c3d5a;
  --_m:
          conic-gradient(#0000 10%,#000),
          linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}

.loader.show {
  display: block;
}

@keyframes l3 {
  to {
    transform: rotate(1turn);
  }
}

/*# sourceMappingURL=style.css.map */