@charset "UTF-8";
/* ***** Fonts *****

These fonts are imported from the fonts folder
Then, variables are set using those fonts
Finally, fonts are applied to the respective elements
I've also set some link mixins in this file too

***** ***** ***** */
@import url("https://fonts.googleapis.com/css2?family=K2D&display=swap");
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=6446e355-97cb-438e-8bc7-1d404b92bcf0&fontids=1075568,6149637,6149645,6149670");
/* ***** Breakpoints *****

These Breakpoints are mobile first
This means no breakpoint applied styles the design for the smallest screens
Then, the 'small-screen' breakpoint styles 28em, or 448px and above
These values can be changes per project

***** ***** ***** */
/* ***** Colors *****

These colors can be used across the project
Values can easily be added or changes and they will change across the site

***** ***** ***** */
.purple-background {
  background-color: #781c7d;
}

.dark-purple-background {
  background-color: #422670;
}

.blue-background {
  background-color: #4561eb;
}

.pink-background {
  background-color: #ffbdf2;
}

.red-orange-background {
  background-color: #fa5c47;
}

.white-background {
  background-color: #ffffff;
}

.light-gray-background {
  background-color: #f3f3f3;
}

.purple-color {
  color: #781c7d;
}

.dark-purple-color {
  color: #422670;
}

.blue-color {
  color: #4561eb;
}

.pink-color {
  color: #ffbdf2;
}

.red-orange-color {
  color: #fa5c47;
}

.white-color {
  color: #ffffff;
}

.light-gray-color {
  color: #f3f3f3;
}

/* ***** Variables *****

This file is for all variables that don't need their own dedicated file
It is here to provide variables for often repetative tasks, like overriding the default outline style
Currently, transition styles are also in here, but might be moved to their own file, I haven't decided

***** ***** ***** */
@font-face {
  font-family: "Avenir Next Rounded";
  src: url("/template/nala/fonts/avenir-next-rounded/avenir-next-rounded.woff2") format("woff2"), url("/template/nala/fonts/avenir-next-rounded/avenir-next-rounded.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next";
  src: url("/template/nala/fonts/avenir-next/avenir-next-medium.woff2") format("woff2"), url("/template/nala/fonts/avenir-next/avenir-next-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next";
  src: url("/template/nala/fonts/avenir-next/avenir-next-demi.woff2") format("woff2"), url("/template/nala/fonts/avenir-next/avenir-next-demi.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Next";
  src: url("/template/nala/fonts/avenir-next/avenir-next-bold.woff2") format("woff2"), url("/template/nala/fonts/avenir-next/avenir-next-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
body,
div,
main,
p,
a,
span,
input,
button,
textarea,
select {
  font-family: "Avenir Next", sans-serif;
}

h1,
h2,
h3,
h4 {
  font-family: "Avenir Next Rounded", Helvetica, Arial, sans-serif;
}

a:not([class]) {
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
  transition: 150ms all ease;
}
a:not([class]):hover, a:not([class]):focus {
  color: #fa5c47;
}

.form-link,
.link-color,
.popupinline,
main section a:not([class]) {
  font-weight: inherit;
  text-decoration: none;
  color: #fa5c47;
  transition: 150ms all ease;
}
.form-link:hover, .form-link:focus,
.link-color:hover,
.link-color:focus,
.popupinline:hover,
.popupinline:focus,
main section a:not([class]):hover,
main section a:not([class]):focus {
  color: #422670;
}

/* ***** Reset *****

1. Most of this reset is from https://piccalil.li/blog/a-modern-css-reset with some adjustments
2. If anything in this reset is messing with other styles, they can be adjusted or removed
3. I have added some useful resets, such as a reset to the focus outline and highlighting of elements

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul that have classes */
ul[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

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

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.4;
}

/* Remove default styles on links with a class */
a[class] {
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:focus {
  outline: none;
}

:focus-visible {
  outline: 1px solid #ffbdf2;
}

::selection {
  background: #4561eb;
}

main h1 {
  font-size: 3rem;
  line-height: 1.15;
  font-weight: 500;
}
main h2 {
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 500;
}
main h3 {
  font-size: 2rem;
  font-weight: 500;
}
main h4 {
  font-size: 1.625rem;
  font-weight: 500;
}
main p,
main div {
  font-size: 1.25rem;
  font-weight: 600;
}
main small {
  font-size: 0.875rem;
  font-weight: 400;
}

.title-small {
  font-size: 2.5rem;
}

.title-normal {
  font-size: 3rem;
}

.title-large {
  font-size: 3.125rem;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .title-large {
    font-size: 4.75rem;
  }
}

.orangeBgJs {
  background-color: #fa5c47 !important;
  transition: 150ms all ease;
}

.whiteClrJs {
  color: white !important;
}

.darkPurpleBgJs {
  background-color: #422670 !important;
}

.lightGreyBgJs {
  background-color: #f3f3f3 !important;
  transition: 150ms all ease;
}

.spinJs {
  transform: rotateZ(45deg);
  transition: 150ms all ease;
}
.spinJs path {
  stroke: white;
}

.showJs {
  display: block !important;
}

.noneJs {
  display: none !important;
}

.visibleJs {
  visibility: visible !important;
  opacity: 1 !important;
  transition: 150ms all ease;
}

.upsidedownJs {
  transform: rotate(180deg) !important;
}

.borderRadiusAtraightJs {
  border-radius: 0px 0px 0px 0px !important;
}

/* ***** Buttons *****

By default the mixin 'primary-button' is applied to all buttons with a type of button and inputs (equal to submit)
Any changes made to the mixin will automatically apply to all buttons and inputs and the classes listed below
The mixin uses colors set in 'abstracts/_colors' and transitions set in 'abstracts/_variables'

***** ***** ***** */
main button[type=button],
main button[type=submit],
main input[type=submit] {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  text-decoration: none !important;
  user-select: none;
  background-color: #781c7d;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 10px 25px;
  font-family: "Avenir Next", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 34.15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  user-select: text;
  transition: 150ms all ease;
}
main button[type=button]:hover, main button[type=button]:focus,
main button[type=submit]:hover,
main button[type=submit]:focus,
main input[type=submit]:hover,
main input[type=submit]:focus {
  cursor: pointer;
  text-decoration: none;
  background-color: #422670;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transform: translateY(-2px);
}

.nala-btn-main {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  text-decoration: none !important;
  user-select: none;
  background-color: #781c7d;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 10px 25px;
  font-family: "Avenir Next", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 34.15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  user-select: text;
  transition: 150ms all ease;
}
.nala-btn-main:hover, .nala-btn-main:focus {
  cursor: pointer;
  text-decoration: none;
  background-color: #422670;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transform: translateY(-2px);
}

.nala-btn-secondary {
  display: inline-block;
  color: #781c7d;
  text-align: center;
  vertical-align: middle;
  text-decoration: none !important;
  user-select: none;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 10px 25px;
  font-family: "Avenir Next", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 34.15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  user-select: text;
  transition: 150ms all ease;
}
.nala-btn-secondary:hover, .nala-btn-secondary:focus {
  cursor: pointer;
  text-decoration: none;
  color: #422670;
  background-color: #ffbdf2;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transform: translateY(-2px);
}

.small-button-with-icon i {
  margin-right: 0.25rem;
}

.button-with-icon i {
  margin-right: 0.5rem;
}
@media (min-width: 28rem) {
  .button-with-icon i {
    margin-right: 1rem;
  }
}

.clear-btn {
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  text-align: center;
  vertical-align: middle;
}
.clear-btn:hover, .clear-btn:focus {
  cursor: pointer;
}

.choice-modal {
  display: none;
  position: absolute;
  width: 300px;
  top: 2%;
  top: 2%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 2;
  padding: 1.5rem;
  background-color: #ffbdf2;
  color: #422670;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
@media (min-width: 48rem) {
  .choice-modal {
    padding: 3rem 1.5rem;
    width: 700px;
  }
}
@media (min-width: 64rem) {
  .choice-modal {
    width: 1000px;
  }
}
.choice-modal h2 {
  margin-bottom: 1.5rem;
}
.choice-modal .modal-close {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}
.choice-modal .modal-close-label {
  padding-right: 1rem;
}
.choice-modal .modal-close-btn {
  font-size: 1.75rem;
}
.choice-modal .modal-close-btn:hover {
  cursor: pointer;
}
.choice-modal .modal-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .choice-modal .modal-info {
    gap: 2rem;
    flex-direction: row;
  }
}
.choice-modal .modal-info .modal-guide,
.choice-modal .modal-info .modal-video {
  width: 100%;
}
@media (min-width: 48rem) {
  .choice-modal .modal-info .modal-guide,
.choice-modal .modal-info .modal-video {
    width: 50%;
  }
}
.choice-modal .subject-modal-widgets {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .choice-modal .subject-modal-widgets {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .choice-modal .subject-modal-widgets {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.choice-modal .subject-widget {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.choice-modal .widget-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width: 55px;
  background-color: #ffffff;
  padding: 0.5rem;
  border-radius: 50%;
}
.choice-modal .widget-img-large-container,
.choice-modal .widget-img-tutor-course-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 100px;
  background-color: #ffffff;
  padding: 0;
  border-radius: 50%;
}
.choice-modal .widget-img-large-container .widget-img {
  width: 80px;
  height: auto;
}
.choice-modal .widget-img-tutor-course-container {
  padding: 1rem;
}
.choice-modal .level-modal-widgets {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .choice-modal .level-modal-widgets {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .choice-modal .level-modal-widgets {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
.choice-modal .course-modal-widgets {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 1.5rem;
}
@media (min-width: 48rem) {
  .choice-modal .course-modal-widgets {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64rem) {
  .choice-modal .course-modal-widgets {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.choice-modal .course-and-level-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: flex-start;
}
.choice-modal .modal-widget-header {
  text-align: center;
}
.choice-modal .modal-widget-info {
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

.phone-widget {
  position: fixed;
  background-color: #ffffff;
  border-radius: 50%;
  z-index: 1;
  bottom: 15px;
  right: 15px;
  height: 65px;
  width: 65px;
  padding: 1rem;
  box-shadow: 0px 2px 15px 1px rgba(0, 0, 0, 0.2);
  transition: all 200ms ease;
}
.phone-widget::before {
  position: absolute;
  content: "Call us for free on 1 800 20 20 80";
  font-family: "Avenir Next", sans-serif;
  font-size: 1rem;
  color: #422670;
  top: 0;
  right: 50%;
  height: 100%;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  background-color: #ffbdf2;
  padding: 1rem;
  border-radius: 40px 0px 0px 40px;
  visibility: hidden;
  opacity: 0;
  transition: all 200ms ease;
}
@media (min-width: 48rem) {
  .phone-widget {
    bottom: 30px;
    right: 30px;
    height: 80px;
    width: 80px;
  }
  .phone-widget::before {
    font-size: 1.25rem;
    width: 400px;
  }
}
.phone-widget:hover, .phone-widget:focus {
  cursor: pointer;
  background-color: #ffbdf2;
}
.phone-widget:hover::before, .phone-widget:focus::before {
  visibility: visible;
  opacity: 1;
}

.shapes-container {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.shapes-container-overflow {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.background-shape {
  position: absolute;
  z-index: -1;
}

.background-shape-top {
  position: absolute;
}

.background-shape-overflow {
  position: absolute;
}

.acc-header-shape-1 {
  bottom: 190px;
  right: 120px;
  z-index: 1;
}
@media (min-width: 64rem) {
  .acc-header-shape-1 {
    display: block;
    top: 105px;
    right: 650px;
    bottom: auto;
    z-index: auto;
  }
}

.acc-header-shape-2 {
  display: none;
}
@media (min-width: 64rem) {
  .acc-header-shape-2 {
    display: block;
    top: 50px;
    right: 540px;
  }
}

.acc-header-shape-3 {
  bottom: -50px;
  right: -400px;
  transform: scale(1.5);
}
@media (min-width: 64rem) {
  .acc-header-shape-3 {
    bottom: 0px;
    right: -20px;
    transform: scale(1);
  }
}

.header-shape-1 {
  transform: scale(1.2);
  bottom: -110px;
  right: -240px;
}
@media (min-width: 48rem) {
  .header-shape-1 {
    transform: scale(1);
    bottom: 0;
    right: 0;
  }
}

.header-shape-2 {
  display: none;
}
@media (min-width: 64rem) {
  .header-shape-2 {
    display: block;
    right: 450px;
    top: 60px;
  }
}

.header-shape-3 {
  display: none;
}
@media (min-width: 48rem) {
  .header-shape-3 {
    display: block;
    bottom: 20px;
    right: 45px;
  }
}

.header-shape-4 {
  right: 112px;
  bottom: 50%;
}
@media (min-width: 48rem) {
  .header-shape-4 {
    top: 50px;
    right: 50px;
    bottom: auto;
  }
}

.tc-header-shape-1 {
  transform: scale(1.2);
  bottom: -80px;
  right: -240px;
}
@media (min-width: 48rem) {
  .tc-header-shape-1 {
    transform: scale(1);
    bottom: 0;
    right: 0;
  }
}

.tc-header-shape-4 {
  right: 106px;
  bottom: 145px;
}
@media (min-width: 48rem) {
  .tc-header-shape-4 {
    top: 50px;
    right: 50px;
    bottom: auto;
  }
}

.fa-header-shape-1 {
  transform: scale(1.5);
  bottom: -90px;
  right: -240px;
}
@media (min-width: 28rem) {
  .fa-header-shape-1 {
    bottom: -130px;
  }
}
@media (min-width: 48rem) {
  .fa-header-shape-1 {
    transform: scale(1);
    bottom: 0;
    right: 0;
  }
}

.fa-header-shape-4 {
  right: 106px;
  bottom: 195px;
}
@media (min-width: 28rem) {
  .fa-header-shape-4 {
    bottom: 150px;
  }
}
@media (min-width: 48rem) {
  .fa-header-shape-4 {
    top: 50px;
    right: 50px;
    bottom: auto;
  }
}

.register-page .background-shape.rect {
  top: 20px;
  right: 90px;
  height: 806px;
  width: 294px;
  transform: rotateZ(45deg);
  background-color: #422670;
}
@media (min-width: 48rem) {
  .register-page .background-shape.rect {
    top: 10px;
    right: 20;
    transform: rotateZ(-45deg);
  }
}
@media (min-width: 48rem) {
  .register-page .background-shape.circle {
    top: 80px;
    right: 660px;
  }
}
@media (min-width: 64rem) {
  .register-page .background-shape.plus {
    display: none;
  }
}
@media (min-width: 64rem) {
  .register-page .background-shape.cross {
    display: block;
    top: 30px;
    right: 520px;
  }
}

@keyframes rock-and-roll-animation {
  from {
    transform: rotate(10deg) translateX(10px);
  }
  to {
    transform: rotate(-10deg) translateX(-10px);
  }
}
@keyframes spin-animation {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  45% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  70% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  95% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.video-outer-container {
  max-width: 1000px;
  margin: 0 auto;
}

.video-container {
  position: relative;
  height: 0;
  width: 100%;
  padding-bottom: 56.25%;
}
.video-container .nala-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.rs-player-loadindicator {
  display: block !important;
  left: 0 !important;
}

.main-header-shadow {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  position: relative;
  z-index: 100;
}

.main-header .top-nav-color {
  background-color: #422670;
}
.main-header .top-nav-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 48rem) {
  .main-header .top-nav-container {
    align-items: center;
    justify-content: flex-end;
  }
}
.main-header .top-nav-container .readspeaker {
  position: absolute;
  padding-top: 14px;
  left: 1rem;
}
@media (min-width: 48rem) {
  .main-header .top-nav-container .readspeaker {
    padding-top: 10px;
    left: 3rem;
  }
}
.main-header .top-nav-container .top-nav {
  display: flex;
  padding: 1rem 0 1rem 1.5rem;
}
@media (min-width: 48rem) {
  .main-header .top-nav-container .top-nav {
    padding: 1rem 3rem;
  }
}
.main-header .top-nav-container .top-nav-link {
  display: block;
  color: #ffffff;
  transition: 150ms all ease;
}
.main-header .top-nav-container .top-nav-link:hover, .main-header .top-nav-container .top-nav-link:focus {
  color: #ffbdf2;
}
.main-header .top-nav-container .top-nav-link i {
  color: #ffbdf2;
  margin-right: 0.75rem;
}
.main-header .top-nav-container .top-nav-link.my-account-link {
  display: none;
}
@media (min-width: 64rem) {
  .main-header .top-nav-container .top-nav-link.my-account-link {
    display: block;
  }
}
.main-header .top-nav-container .top-nav-link.freephone-link {
  display: none;
}
@media (min-width: 64rem) {
  .main-header .top-nav-container .top-nav-link.freephone-link {
    display: block;
  }
}
@media (min-width: 64rem) {
  .main-header .top-nav-container .top-nav-mobile-search {
    display: none;
  }
}
.main-header .top-nav-container .top-nav-mobile-search .top-nav-search-toggle.search-open {
  min-height: 56px;
  padding: 1rem;
  border: none;
  background-color: #ffbdf2;
}
.main-header .top-nav-container .top-nav-mobile-search .top-nav-search-toggle.search-open:hover {
  cursor: pointer;
}
.main-header .top-nav-container .top-nav-mobile-search .top-nav-search-toggle.search-open i {
  display: flex;
  align-items: center;
  color: #422670;
  height: 22px;
  width: 1rem;
  font-size: 1rem;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container {
  z-index: 2;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #781c7d;
  display: none;
  flex-direction: column;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .search-close-container {
  width: 100%;
  display: flex;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .top-nav-search-toggle.search-close {
  margin-left: auto;
  padding: 1rem;
  border: none;
  background-color: transparent;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .top-nav-search-toggle.search-close:hover {
  cursor: pointer;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .top-nav-search-toggle.search-close i {
  color: #ffffff;
  height: 1rem;
  width: 1rem;
  font-size: 1rem;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #ffffff;
  padding-left: 1.5rem;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container form {
  padding: 1.5rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .search-courses {
  flex-grow: 1;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .search-courses-btn {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: none;
  background-color: #ffffff;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .search-courses-btn:hover {
  cursor: pointer;
}
.main-header .top-nav-container .top-nav-mobile-search .mobile-search-container .search-courses-btn i {
  color: #422670;
  height: 1rem;
  width: 1rem;
  font-size: 1rem;
}
.main-header .top-nav-container .top-nav-desktop-search {
  display: none;
}
@media (min-width: 64rem) {
  .main-header .top-nav-container .top-nav-desktop-search {
    display: block;
  }
}
.main-header .top-nav-container .top-nav-desktop-search form {
  padding-right: 3rem;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.main-header .top-nav-container .top-nav-desktop-search .search-courses {
  flex-grow: 1;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}
.main-header .top-nav-container .top-nav-desktop-search .search-courses-btn {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: none;
  background-color: #ffffff;
}
.main-header .top-nav-container .top-nav-desktop-search .search-courses-btn:hover {
  cursor: pointer;
}
.main-header .top-nav-container .top-nav-desktop-search .search-courses-btn i {
  color: #422670;
  height: 1rem;
  width: 1rem;
  font-size: 1rem;
}
.main-header .main-nav-color {
  background-color: #ffffff;
}
.main-header .main-nav-container {
  display: flex;
  justify-content: space-between;
}
.main-header .main-nav-container .main-nav {
  width: 100%;
  display: flex;
  padding: 1rem;
  justify-content: space-between;
}
@media (min-width: 48rem) {
  .main-header .main-nav-container .main-nav {
    padding: 1.5rem;
  }
}
@media (min-width: 90rem) {
  .main-header .main-nav-container .main-nav {
    padding: 1.5rem 3rem;
  }
}
.main-header .main-nav-container .main-nav-child {
  display: flex;
  align-items: center;
}
.main-header .main-nav-container .main-nav-logo img {
  height: 80px;
}
@media (min-width: 90rem) {
  .main-header .main-nav-container .main-nav-logo img {
    height: 128px;
  }
}
.main-header .main-nav-container .main-nav-link-container {
  display: none;
}
@media (min-width: 64rem) {
  .main-header .main-nav-container .main-nav-link-container {
    display: flex;
    gap: 1rem;
  }
}
@media (min-width: 90rem) {
  .main-header .main-nav-container .main-nav-link-container {
    gap: 2rem;
  }
}
.main-header .main-nav-container .main-nav-link {
  position: relative;
  font-size: 1.25rem;
  font-weight: 600;
  color: #781c7d;
}
.main-header .main-nav-container .main-nav-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -1%;
  width: 104%;
  height: 3px;
  background-color: #fa5c47;
  transform: scaleX(0);
  transition: 250ms all ease;
}
.main-header .main-nav-container .main-nav-link:hover, .main-header .main-nav-container .main-nav-link:focus {
  cursor: pointer;
}
.main-header .main-nav-container .main-nav-link:hover::after, .main-header .main-nav-container .main-nav-link:focus::after {
  transform: scaleX(1);
}
@media (min-width: 90rem) {
  .main-header .main-nav-container .main-nav-link {
    font-size: 1.625rem;
  }
}
.main-header .main-nav-container .selected-link {
  position: relative;
}
.main-header .main-nav-container .selected-link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -1%;
  width: 104%;
  height: 3px;
  background-color: #fa5c47;
  transform: scaleX(1);
}
.main-header .main-nav-container .main-nav-button {
  display: none;
  background-color: #781c7d;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-right: 1rem;
  font-weight: 600;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition: 150ms all ease;
}
.main-header .main-nav-container .main-nav-button:hover, .main-header .main-nav-container .main-nav-button:focus {
  cursor: pointer;
  background-color: #422670;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transform: translateY(-2px);
}
@media (min-width: 64rem) {
  .main-header .main-nav-container .main-nav-button {
    display: block;
  }
}
.main-header .main-nav-container .register-nav-button {
  margin-right: 0;
}
@media (min-width: 64rem) {
  .main-header .main-nav-container .register-nav-button {
    display: flex;
    gap: 0.3rem;
    align-items: center;
  }
}
.main-header .main-nav-container .main-nav-brand-img {
  height: 46px;
  width: 46px;
  margin-right: 1.5rem;
}
.main-header .main-nav-container .burger-menu {
  padding: 0;
  border: none;
  background-color: #ffffff;
}
.main-header .main-nav-container .burger-menu:hover {
  cursor: pointer;
}
@media (min-width: 64rem) {
  .main-header .main-nav-container .burger-menu {
    display: none;
  }
}
.main-header .main-nav-container .burger-menu .slice {
  display: block;
  height: 4px;
  width: 35px;
  border-radius: 8px;
  background-color: #422670;
}
.main-header .main-nav-container .burger-menu .slice:first-of-type {
  margin-bottom: 8px;
}
.main-header .main-nav-container .burger-menu .slice:last-of-type {
  margin-top: 8px;
}
.main-header .mobile-menu {
  display: none;
  padding: 3rem 0;
  background-color: #ffbdf2;
}
@media (min-width: 64rem) {
  .main-header .mobile-menu {
    display: none;
  }
}
.main-header .mobile-menu .main-nav-link {
  display: block;
  font-size: 1.625rem;
  font-weight: 600;
  color: #422670;
  padding: 1rem 1.5rem;
  transition: 250ms all ease;
}
.main-header .mobile-menu .main-nav-link:hover, .main-header .mobile-menu .main-nav-link:focus {
  background-color: #ffffff;
}
.main-header .mobile-menu .main-nav-link i {
  margin-right: 0.75rem;
}
.main-header .mobile-menu .main-nav-button-container {
  padding: 0 1.5rem;
}
.main-header .mobile-menu .main-nav-button {
  margin-top: 2rem;
  display: inline-block;
  background-color: #781c7d;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-right: 1rem;
  font-weight: 600;
}
.main-header .mobile-menu .main-nav-button i {
  margin-right: 0.25rem;
}

.mobile-search-visibleJs {
  display: flex !important;
}

.mobile-menu-visibleJs {
  display: block !important;
}

.inner-container {
  max-width: 90rem;
  margin: 0 auto;
}

.padding-container {
  padding: 3rem 1.5rem;
}
@media (min-width: 48rem) {
  .padding-container {
    padding: 6rem 3rem;
  }
}

.heading-padding-container {
  padding: 3rem 1.5rem;
}
@media (min-width: 48rem) {
  .heading-padding-container {
    padding: 3rem 3rem;
  }
}

@media (min-width: 64rem) {
  .headings-flex-container {
    display: flex;
    justify-content: space-between;
  }
}

.nala-btn-container {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.margin-bottom-3 {
  margin-bottom: 3rem !important;
}

.center-text {
  text-align: center;
}

.center-div-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center-div-container > div {
  width: 100%;
}

.center-form-elements > input,
.center-form-elements > label,
.center-form-elements > textarea,
.center-form-elements > button,
.center-form-elements > select,
.center-form-elements .webform-checklist {
  display: block !important;
  margin: 0 auto;
}

.new-site-banner .banner-close {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  margin-bottom: 1rem;
}
.new-site-banner .banner-close-btn {
  font-size: 1.75rem;
}
.new-site-banner .banner-close-btn:hover {
  cursor: pointer;
}

.new-site-banner[data-show=true] {
  display: block;
}

.new-site-banner[data-show=false] {
  display: none;
}

.main-footer {
  color: #ffffff;
  background-color: #422670;
  font-family: "Avenir Next", sans-serif;
}
.main-footer .footer-container {
  padding: 3rem 1.5rem;
}
@media (min-width: 48rem) {
  .main-footer .footer-container {
    padding: 3rem;
  }
}
.main-footer .footer-section {
  width: 100%;
}
@media (min-width: 48rem) {
  .main-footer .footer-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
@media (min-width: 64rem) {
  .main-footer .footer-section {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
  }
}
.main-footer .footer-links-section {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
@media (min-width: 48rem) {
  .main-footer .footer-links-section {
    padding-bottom: 3rem;
  }
}
.main-footer .footer-links-section .links-container {
  margin-bottom: 2.25rem;
}
@media (min-width: 48rem) {
  .main-footer .footer-links-section .links-container {
    margin-bottom: 0;
  }
}
.main-footer .footer-links-section .links-heading {
  font-family: "Avenir Next", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}
.main-footer .footer-info-section {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 48rem) {
  .main-footer .footer-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.main-footer .footer-info-section .info-container {
  margin-bottom: 2.25rem;
}
@media (min-width: 48rem) {
  .main-footer .footer-info-section .info-container {
    margin-bottom: 0;
  }
}
.main-footer .footer-info-section .text-section.text-section-last {
  margin-top: 2rem;
}
.main-footer .footer-info-section .footer-logo-container {
  order: 1;
}
@media (min-width: 48rem) {
  .main-footer .footer-info-section .footer-logo-container {
    order: 0;
  }
}
.main-footer .footer-info-section .info-heading {
  font-family: "Avenir Next", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}
.main-footer .footer-info-section .info-text-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
}
.main-footer .footer-info-section .info-text {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
}
.main-footer .footer-info-section .stand-out {
  font-weight: 700;
}
.main-footer .footer-info-section .socials-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 48rem) {
  .main-footer .footer-info-section .socials-container {
    align-items: flex-end;
  }
}
.main-footer .footer-info-section .socials-section {
  display: flex;
  align-items: center;
}
.main-footer .footer-info-section .socials-section .socials-link {
  margin-left: 1rem;
  font-size: 1.25rem;
  color: #ffffff;
  transition: 150ms all ease;
}
.main-footer .footer-info-section .socials-section .socials-link:hover, .main-footer .footer-info-section .socials-section .socials-link:focus {
  color: #ffbdf2;
}
.main-footer .footer-info-section .socials-section .socials-link:first-child {
  margin-left: 0;
}
@media (min-width: 48rem) {
  .main-footer .footer-end-section {
    padding-top: 3rem;
  }
}
.main-footer .footer-end-section .end-logo-container {
  display: flex;
  margin-bottom: 2.25rem;
}
@media (min-width: 48rem) {
  .main-footer .footer-end-section .end-logo-container {
    display: block;
    margin-right: 3rem;
    margin-bottom: 0;
  }
}
@media (min-width: 90rem) {
  .main-footer .footer-end-section .end-logo-container {
    display: flex;
  }
}
.main-footer .footer-end-section .footer-logo {
  height: 30px;
  margin-right: 1rem;
}
@media (min-width: 28rem) {
  .main-footer .footer-end-section .footer-logo {
    height: 45px;
  }
}
@media (min-width: 48rem) {
  .main-footer .footer-end-section .footer-logo {
    margin-right: 3rem;
  }
}
.main-footer .footer-end-section .footer-logo:first-child {
  margin-bottom: 1rem;
}
@media (min-width: 90rem) {
  .main-footer .footer-end-section .footer-logo:first-child {
    margin-bottom: 0;
  }
}
.main-footer .footer-end-section .end-information {
  grid-column: 3/-1;
}
.main-footer .footer-end-section .end-information .mobile-info-text {
  display: block;
}
@media (min-width: 48rem) {
  .main-footer .footer-end-section .end-information .mobile-info-text {
    display: none;
  }
}
.main-footer .footer-end-section .end-information .desktop-info-text {
  display: none;
}
@media (min-width: 48rem) {
  .main-footer .footer-end-section .end-information .desktop-info-text {
    display: block;
  }
}
.main-footer .footer-end-section .info-text {
  font-size: 1rem;
  font-weight: 500;
}
.main-footer .footer-link {
  display: block;
  margin-top: 0.625rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  transition: 150ms all ease;
}
.main-footer .footer-link:hover, .main-footer .footer-link:focus {
  color: #ffbdf2;
}
.main-footer .footer-link.web-link {
  font-weight: 700;
}

.section-heading-simple {
  background-color: #781c7d;
  color: #ffffff;
}
.section-heading-simple .heading-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.section-heading-simple .heading-breadcrumbs .breadcrumb-link {
  color: #ffffff;
  font-weight: 400;
  margin-right: 0.2rem;
  transition: 150ms all ease;
}
.section-heading-simple .heading-breadcrumbs .breadcrumb-link:hover, .section-heading-simple .heading-breadcrumbs .breadcrumb-link:focus {
  color: #fa5c47;
}
.section-heading-simple .heading-breadcrumbs .breadcrumb-link::after {
  content: "—";
  margin-left: 0.2rem;
}
.section-heading-simple .headings-inner-container {
  width: 100%;
}
@media (min-width: 48rem) {
  .section-heading-simple .headings-inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.section-heading-simple .headings-header {
  font-size: 2.5rem;
}
@media (min-width: 48rem) {
  .section-heading-simple .headings-header {
    font-size: 4.25rem;
    max-width: 70%;
  }
}
.section-heading-simple .headings-info-container {
  margin-top: 1rem;
}
@media (min-width: 48rem) {
  .section-heading-simple .headings-info-container {
    margin-top: 0;
    width: 50%;
  }
}
@media (min-width: 90rem) {
  .section-heading-simple .headings-info-container {
    width: 30%;
  }
}
.section-heading-simple .headings-info {
  max-width: 28ch;
}
@media (min-width: 48rem) {
  .section-heading-simple .headings-info {
    margin-left: auto;
  }
}
.section-heading-simple .headings-info-button {
  margin-top: 1rem;
}
.section-heading-simple .background-shape.rect {
  top: 20px;
  right: 90px;
  height: 806px;
  width: 294px;
  transform: rotateZ(45deg);
  background-color: #422670;
}
@media (min-width: 48rem) {
  .section-heading-simple .background-shape.rect {
    top: -130px;
    right: 400px;
  }
}
.section-heading-simple .background-shape.circle {
  display: none;
}
@media (min-width: 28rem) {
  .section-heading-simple .background-shape.circle {
    display: block;
    top: 85px;
    right: 105px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #fa5c47;
  }
}
@media (min-width: 48rem) {
  .section-heading-simple .background-shape.circle {
    top: 20px;
    right: 92px;
  }
}
.section-heading-simple .background-shape.plus {
  display: none;
}
@media (min-width: 64rem) {
  .section-heading-simple .background-shape.plus {
    display: block;
    top: 50px;
    right: 700px;
  }
}
.section-heading-simple .background-shape.cross {
  display: none;
}
@media (min-width: 64rem) {
  .section-heading-simple .background-shape.cross {
    display: block;
    bottom: 20px;
    right: 100px;
  }
}

.section-heading-image {
  overflow: hidden;
}
.section-heading-image .headings-container {
  padding: 3rem 1.5rem;
}
.section-heading-image .heading-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
@media (min-width: 48rem) {
  .section-heading-image .heading-breadcrumbs {
    margin-bottom: 4.5rem;
  }
}
.section-heading-image .heading-breadcrumbs .breadcrumb-link {
  font-weight: 400;
  margin-right: 0.2rem;
  transition: 150ms all ease;
}
.section-heading-image .heading-breadcrumbs .breadcrumb-link:hover, .section-heading-image .heading-breadcrumbs .breadcrumb-link:focus {
  color: #fa5c47;
}
.section-heading-image .heading-breadcrumbs .breadcrumb-link::after {
  content: "—";
  margin-left: 0.2rem;
}
.section-heading-image .headings-inner-container {
  width: 100%;
}
@media (min-width: 48rem) {
  .section-heading-image .headings-inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.section-heading-image .headings-header {
  font-size: 2.5rem;
}
@media (min-width: 48rem) {
  .section-heading-image .headings-header {
    font-size: 4.75rem;
  }
}
.section-heading-image .headings-info-container {
  margin-top: 1rem;
  margin-bottom: 3rem;
  max-width: 500px;
  letter-spacing: 1px;
}
.section-heading-image .headings-info-container .headings-info {
  width: 100%;
  font-size: 1.5rem;
}
.section-heading-image .headings-info-container .headings-info.bottom-margin {
  margin-bottom: 1.5rem;
}
.section-heading-image .headings-image-container {
  position: relative;
  width: 475px;
  height: 400px;
  flex-shrink: 0;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .section-heading-image .headings-image-container {
    overflow: visible;
  }
}
@media (min-width: 64rem) {
  .section-heading-image .headings-image-container {
    width: 550px;
    height: 550px;
  }
}
@media (min-width: 90rem) {
  .section-heading-image .headings-image-container {
    width: 750px;
    height: 720px;
  }
}
.section-heading-image .header-image {
  position: absolute;
  width: 475px;
  height: 475px;
  border-radius: 50%;
  bottom: -20%;
  left: -20%;
}
@media (min-width: 64rem) {
  .section-heading-image .header-image {
    width: 550px;
    height: 550px;
    top: -50px;
    right: -50px;
    bottom: auto;
    left: auto;
  }
}
@media (min-width: 90rem) {
  .section-heading-image .header-image {
    width: 750px;
    height: 750px;
    top: -50px;
    right: -50px;
  }
}
.section-heading-image .heading-shape-1 {
  display: none;
}
@media (min-width: 28rem) {
  .section-heading-image .heading-shape-1 {
    display: block;
    bottom: 40px;
    left: 320px;
  }
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-1 {
    bottom: 100px;
    left: 55%;
  }
}
.section-heading-image .heading-shape-2 {
  display: none;
}
@media (min-width: 28rem) {
  .section-heading-image .heading-shape-2 {
    display: block;
    bottom: 145px;
    left: 343px;
  }
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-2 {
    bottom: 50px;
    left: 50%;
  }
}
.section-heading-image .heading-shape-3 {
  display: none;
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-3 {
    display: block;
    bottom: 0;
    left: 60.5%;
  }
}
.section-heading-image .heading-shape-4 {
  display: none;
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-4 {
    height: 85px;
    width: 85px;
    display: block;
    bottom: 100px;
    right: 50px;
  }
}
.section-heading-image .heading-shape-5 {
  display: none;
}
@media (min-width: 28rem) {
  .section-heading-image .heading-shape-5 {
    display: block;
    bottom: 0;
    left: -10%;
  }
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-5 {
    left: auto;
    right: 5%;
  }
}
.section-heading-image .heading-shape-6 {
  display: none;
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-6 {
    display: block;
    bottom: 150px;
    left: 60%;
  }
}
.section-heading-image .heading-shape-7 {
  display: none;
}
@media (min-width: 64rem) {
  .section-heading-image .heading-shape-7 {
    display: block;
    bottom: 20px;
    left: 60.5%;
  }
}

.section-informational {
  background-color: #ffffff;
  color: #000000;
}
.section-informational h2 {
  color: #781c7d;
  margin: 3rem 0 1.5rem 0;
  max-width: 40ch;
  word-break: break-word;
}
.section-informational h3,
.section-informational h4 {
  color: #781c7d;
  margin: 2.5rem 0 1.5rem 0;
  max-width: 50ch;
  word-break: break-word;
}
.section-informational div {
  color: #2c3b3b;
  font-size: 1.5rem;
}
.section-informational p,
.section-informational address,
.section-informational ul,
.section-informational ol,
.section-informational .parent-list {
  max-width: 65ch;
  margin-bottom: 1.25rem;
  color: #2c3b3b;
  font-size: 1.5rem;
}
.section-informational .parent-list-no-margin {
  margin-bottom: 0;
  list-style-type: revert;
  padding: revert;
}
.section-informational address {
  font-style: normal;
}
.section-informational address span {
  display: block;
}
.section-informational .effective-from {
  font-weight: 500;
  font-size: 1rem;
}
.section-informational a {
  color: #fa5c47;
  transition: 150ms all ease;
  word-break: break-word;
}
.section-informational a:hover, .section-informational a:focus {
  color: #422670;
  text-decoration: none;
}
.section-informational .contact-details-container {
  max-width: 65ch;
  border: 1px solid #000000;
  margin-bottom: 1.25rem;
}
.section-informational .contact-details-container .contact-header {
  background-color: #781c7d;
  color: #ffffff;
  padding: 0.5rem;
  border-bottom: 1px solid #000000;
}
.section-informational .contact-details-container .contact-sub-header {
  background-color: #f3f3f3;
  padding: 0.5rem;
  border-bottom: 1px solid #000000;
}
.section-informational .contact-details-container .contact-flex-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
  border-bottom: 1px solid #000000;
}
@media (min-width: 48rem) {
  .section-informational .contact-details-container .contact-flex-container {
    flex-direction: row;
    gap: 2rem;
  }
}
.section-informational .contact-details-container .contact-flex-container > div {
  min-width: 150px;
}
.section-informational .contact-details-container .contact-flex-container .border-right {
  border-right: 1px solid #000000;
}
.section-informational .contact-details-container .contact-flex-container:last-child {
  border-bottom: none;
}
.section-informational .data-table-container {
  max-width: 65ch;
  border: 1px solid #000000;
  margin-bottom: 1.25rem;
}
.section-informational .data-table-container .data-header {
  background-color: #781c7d;
  color: #ffffff;
  padding: 0.5rem;
  border-bottom: 1px solid #000000;
}
.section-informational .data-table-container .data-sub-header {
  background-color: #f3f3f3;
  padding: 0.5rem;
  border-bottom: 1px solid #000000;
}
.section-informational .data-table-container .data-flex-container {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #000000;
}
@media (min-width: 48rem) {
  .section-informational .data-table-container .data-flex-container {
    flex-direction: row;
    gap: 0;
  }
}
.section-informational .data-table-container .data-flex-container > div {
  padding: 0.5rem;
}
.section-informational .data-table-container .data-flex-container ul {
  margin: 0;
}
.section-informational .data-table-container .border-right {
  border-right: none;
}
@media (min-width: 48rem) {
  .section-informational .data-table-container .border-right {
    max-width: 250px;
    width: 100%;
    border-right: 1px solid #000000;
  }
}
.section-informational .data-table-container .data-flex-container:last-child {
  border-bottom: none;
}
.section-informational .resource-display {
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
  border-bottom: 3px solid #f3f3f3;
  margin-bottom: 2rem;
}
@media (min-width: 48rem) {
  .section-informational .resource-display {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}
.section-informational .resource-display .resource-info {
  max-width: 75ch;
}
.section-informational .resource-display h2 {
  margin-top: 0;
  color: #422670;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .section-informational .resource-display h2 {
    font-size: 3.75rem;
  }
}
.section-informational .resource-display img {
  height: auto;
  margin: 0 auto;
}
@media (min-width: 48rem) {
  .section-informational .resource-display img {
    height: 300px;
    margin: unset;
    margin-left: auto;
  }
}
@media (min-width: 64rem) {
  .section-informational .resource-display img {
    height: 500px;
  }
}

.section-form {
  background-color: #f3f3f3;
  color: #000000;
}
.section-form h1 {
  color: #781c7d;
  margin-bottom: 0.5rem;
}
.section-form h2 {
  font-size: 1.375rem;
  color: #781c7d;
  margin-bottom: 0.5rem;
}
@media (min-width: 48rem) {
  .section-form h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
  }
}
.section-form .form-info-label {
  margin-bottom: 1rem;
}
.section-form form {
  position: relative;
}
.section-form form > label,
.section-form form > input,
.section-form form > textarea,
.section-form form > select,
.section-form form .webform-checklist {
  width: 100%;
  display: block;
  font-family: "Avenir Next", sans-serif;
  font-size: 1.25rem;
}
@media (min-width: 48rem) {
  .section-form form > label,
.section-form form > input,
.section-form form > textarea,
.section-form form > select,
.section-form form .webform-checklist {
    max-width: 50%;
  }
}
.section-form form label,
.section-form form input,
.section-form form textarea,
.section-form form select {
  font-family: "Avenir Next", sans-serif;
  font-size: 1.25rem;
}
.section-form form label,
.section-form form .checklist-label,
.section-form form div[id],
.section-form form .radio-heading,
.section-form form .dob-heading,
.section-form form .questions-heading {
  font-family: "Avenir Next", sans-serif;
  color: #781c7d;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.section-form form input,
.section-form form textarea,
.section-form form select {
  margin-bottom: 3rem;
  font-weight: 800;
  padding: 1rem;
  color: #000000;
  border: 1px solid transparent;
  transition: 150ms all ease;
}
.section-form form input:hover,
.section-form form textarea:hover,
.section-form form select:hover {
  border: 1px solid #ffbdf2;
  background-color: #fbfbfc;
}
.section-form form input::placeholder,
.section-form form textarea::placeholder {
  color: #2c3b3b;
}
.section-form form .webform-checklist {
  margin-bottom: 3rem;
}
.section-form form .webform-checklist input {
  margin-bottom: 1rem;
}
.section-form form .form-info {
  margin-bottom: 2rem;
}
@media (min-width: 48rem) {
  .section-form form .form-info {
    max-width: 50%;
  }
}
@media (min-width: 48rem) {
  .section-form form .dob-container {
    display: flex;
  }
}
.section-form form .last-form-btn {
  margin-top: 4rem;
}
.section-form form .login-btn {
  margin-top: 0.5rem;
  margin-bottom: 4rem;
}

.section-account .flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .section-account .flex-container {
    flex-direction: row;
    gap: 2rem;
  }
}
@media (min-width: 64rem) {
  .section-account .flex-container {
    gap: 6rem;
  }
}
@media (min-width: 90rem) {
  .section-account .flex-container {
    max-width: 64rem;
  }
}
.section-account .flex-section {
  flex: 1 1 0px;
  background-color: #422670;
  color: #ffffff;
  border-radius: 10px;
  padding: 2rem;
}
.section-account h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
}
.section-account p {
  max-width: 70%;
  margin-bottom: 4rem;
}
.section-account .account-btn {
  margin-bottom: 4rem;
}
.section-account .forgotton-password {
  display: block;
  font-size: 1rem;
  text-decoration: underline;
  font-weight: 500;
  color: white;
}

.section-grid h2 {
  margin-bottom: 3rem;
}
.section-grid .para-container {
  color: #2c3b3b;
  max-width: 60ch;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .section-grid .para-container p {
    font-size: 1.5rem;
  }
}
.section-grid p {
  margin-bottom: 1rem;
}
.section-grid .image-accent-container {
  position: relative;
}
.section-grid .image-accent-shape {
  position: absolute;
}
@media (min-width: 48rem) {
  .section-grid .four-section-grid {
    display: grid;
    grid-template-areas: "a b" "c d";
    grid-template-columns: 1fr 1fr;
  }
}
.section-grid .image-section {
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-grid .image-section img {
  height: 260px;
  width: 260px;
  border-radius: 50%;
}
@media (min-width: 90rem) {
  .section-grid .image-section img {
    width: 450px;
    height: 450px;
  }
}
.section-grid .info-section {
  display: flex;
  justify-content: center;
  align-items: center;
}
.section-grid .inner-section-1 {
  grid-area: a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-grid .inner-section-2 {
  grid-area: b;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 48rem) {
  .section-grid .inner-section-2 h2 {
    font-size: 3.75rem;
  }
}
.section-grid .inner-section-2 > div {
  max-width: 530px;
}
.section-grid .inner-section-3 {
  grid-area: d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-grid .inner-section-4 {
  grid-area: c;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 48rem) {
  .section-grid .inner-section-4 h2 {
    font-size: 3.75rem;
  }
}
.section-grid .inner-section-4 > div {
  max-width: 530px;
}

.section-why-nala h1 {
  text-align: center;
}
.section-why-nala .why-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 22.5rem) {
  .section-why-nala .why-widgets {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 48rem) {
  .section-why-nala .why-widgets {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 3rem;
  }
}
.section-why-nala .why-widgets .widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  user-select: text;
}
@media (min-width: 48rem) {
  .section-why-nala .why-widgets .widget {
    width: 215px;
  }
}
@media (min-width: 22.5rem) {
  .section-why-nala .why-widgets .last-widget {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
.section-why-nala .why-widgets .widget-background {
  background-color: #ffffff;
  width: 115px;
  padding: 0.75rem;
  border-radius: 50%;
}
.section-why-nala .why-widgets .qqi-padding {
  padding: 0;
}
.section-why-nala .why-widgets .widget-background-flex {
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-why-nala .why-widgets .widget-background-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0.5rem;
  border-radius: 50%;
}
.section-why-nala .why-widgets .widget-background-clear img {
  height: 88px;
  width: 88px;
}
.section-why-nala .why-widgets p {
  margin-top: 0.75rem;
  user-select: text;
}
.section-why-nala .why-widgets-large {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 28rem) {
  .section-why-nala .why-widgets-large {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
}
.section-why-nala .why-widgets-large .widget {
  width: 215px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  user-select: text;
}
.section-why-nala .why-widgets-large .widget-background {
  background-color: #ffffff;
  width: 115px;
  padding: 0.75rem;
  border-radius: 50%;
}
.section-why-nala .why-widgets-large .widget-background-flex {
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-why-nala .why-widgets-large .widget-background-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  padding: 0.5rem;
  border-radius: 50%;
}
.section-why-nala .why-widgets-large .widget-background-clear img {
  height: 88px;
  width: 88px;
}
.section-why-nala .why-widgets-large p {
  margin-top: 0.75rem;
  user-select: text;
}
.section-why-nala .why-need-help {
  text-align: center;
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .section-why-nala .why-need-help {
    max-width: 700px;
    margin: 0 auto 3rem auto;
    font-size: 1.625rem;
  }
}

.why-nala-shape-1 {
  display: none;
}
@media (min-width: 90rem) {
  .why-nala-shape-1 {
    display: block;
    left: 90px;
    top: -50px;
  }
}

.need-help-shape-1 {
  display: none;
}
@media (min-width: 64rem) {
  .need-help-shape-1 {
    display: block;
    top: 150px;
    left: 150px;
  }
}

.need-help-shape-2 {
  display: none;
}
@media (min-width: 90rem) {
  .need-help-shape-2 {
    display: block;
    top: 220px;
    left: 220px;
  }
}

.need-help-shape-3 {
  display: none;
}
@media (min-width: 64rem) {
  .need-help-shape-3 {
    display: block;
    top: 40px;
    right: 150px;
  }
}

.need-help-shape-4 {
  display: none;
}
@media (min-width: 64rem) {
  .need-help-shape-4 {
    display: block;
    top: 100px;
    right: 100px;
  }
}

.need-help-shape-5 {
  display: none;
}
@media (min-width: 48rem) {
  .need-help-shape-5 {
    display: block;
    top: 0;
    right: 0;
  }
}

.need-help-shape-6 {
  display: none;
}
@media (min-width: 48rem) {
  .need-help-shape-6 {
    display: block;
    bottom: 0;
    left: 0;
  }
}

.need-help-shape-7 {
  display: none;
}
@media (min-width: 64rem) {
  .need-help-shape-7 {
    display: block;
    top: 140px;
    right: 140px;
  }
}

.section-how-it-works h1 {
  text-align: center;
}

.how-it-works-shape-1 {
  display: none;
}
@media (min-width: 28rem) {
  .how-it-works-shape-1 {
    display: block;
    top: 0;
    left: 50px;
  }
}
@media (min-width: 48rem) {
  .how-it-works-shape-1 {
    left: 150px;
  }
}

.how-it-works-shape-2 {
  height: 120px;
  width: 120px;
  bottom: -60px;
  left: -40px;
}
@media (min-width: 48rem) {
  .how-it-works-shape-2 {
    height: auto;
    width: auto;
    bottom: 0;
    left: 0;
  }
}

.how-it-works-shape-3 {
  display: none;
}
@media (min-width: 64rem) {
  .how-it-works-shape-3 {
    display: block;
    bottom: 0;
    right: 0;
  }
}

.how-it-works-shape-4 {
  bottom: -145px;
  right: -145px;
  transform: scale(0.35);
}
@media (min-width: 48rem) {
  .how-it-works-shape-4 {
    bottom: 378px;
    right: 0;
    transform: scale(1);
  }
}

.how-it-works-shape-5 {
  display: none;
}
@media (min-width: 22.5rem) {
  .how-it-works-shape-5 {
    display: block;
    bottom: -245px;
    left: -165px;
    transform: scale(0.5);
  }
}
@media (min-width: 48rem) {
  .how-it-works-shape-5 {
    bottom: 0;
    left: 0;
    transform: scale(1);
  }
}

.section-what-they-say h1,
.section-what-they-say h2 {
  text-align: center;
}
.section-what-they-say .wts-flex-container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  justify-content: space-around;
  align-items: center;
}
@media (min-width: 48rem) {
  .section-what-they-say .wts-flex-container {
    gap: 9rem;
  }
}
.section-what-they-say .wts-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-container {
    flex-direction: row;
    gap: 9rem;
  }
}
.section-what-they-say .wts-image-container {
  height: 215px;
  flex-basis: 215px;
  flex-grow: 0;
  flex-shrink: 0;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-image-container {
    height: 315px;
    flex-basis: 315px;
  }
}
.section-what-they-say .wts-image {
  width: 215px;
  height: 215px;
  border-radius: 50%;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-image {
    width: 315px;
    height: 315px;
  }
}
.section-what-they-say .wts-shape-1 {
  transform: scale(0.7);
  top: 5%;
  right: 10%;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-shape-1 {
    transform: scale(1);
    top: 5%;
    right: 15%;
  }
}
.section-what-they-say .wts-shape-2 {
  transform: scale(0.7);
  top: 35%;
  left: -15%;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-shape-2 {
    transform: scale(1);
    top: 40%;
    left: -11%;
  }
}
.section-what-they-say .wts-shape-3 {
  transform: scale(0.7);
  bottom: 5%;
  left: 10%;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-shape-3 {
    transform: scale(1);
    bottom: 5%;
    left: 15%;
  }
}
.section-what-they-say .wts-shape-4 {
  transform: scale(0.7);
  top: -16%;
  right: -7%;
}
@media (min-width: 64rem) {
  .section-what-they-say .wts-shape-4 {
    transform: scale(1);
    top: 0;
    right: -7%;
  }
}
.section-what-they-say .wts-quote-container {
  max-width: 50ch;
}
.section-what-they-say .quotemarks {
  font-family: "K2D", sans-serif;
  color: #fa5c47;
  font-size: 4rem;
  line-height: 0.7;
}
.section-what-they-say .quote {
  margin-bottom: 1rem;
  font-size: 1.625rem;
}
@media (min-width: 64rem) {
  .section-what-they-say .quote {
    font-size: 2rem;
  }
}
.section-what-they-say .author {
  margin-bottom: 0.5rem;
}
.section-what-they-say .location {
  font-size: 1rem;
  font-weight: 500;
}

.section-popular-courses {
  background-color: #ffffff;
  color: #781c7d;
}
.section-popular-courses h1 {
  text-align: center;
}
.section-popular-courses .popular-courses-btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rem;
}
.section-popular-courses .courses-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .section-popular-courses .courses-container {
    flex-direction: row;
    gap: 3rem 1rem;
    flex-wrap: wrap;
  }
}
@media (min-width: 64rem) {
  .section-popular-courses .courses-container {
    justify-content: center;
  }
}
.section-popular-courses .course-img {
  width: 300px;
  margin-bottom: 1.5rem;
}
.section-popular-courses .course-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-faqs .faq-block {
  margin-bottom: 0.5rem;
  background-color: #ffbdf2;
  border-radius: 10px;
  transition: 150ms all ease;
}
@media (min-width: 64rem) {
  .section-faqs .faq-block {
    max-width: 70%;
  }
}
.section-faqs .faq-block .faq-flex-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}
@media (min-width: 48rem) {
  .section-faqs .faq-block .faq-flex-container {
    padding: 2rem;
  }
}
.section-faqs .faq-block .faq-question-container {
  margin-right: 1rem;
}
@media (min-width: 48rem) {
  .section-faqs .faq-block .faq-question-container {
    width: 70%;
  }
}
.section-faqs .faq-block .faq-question {
  font-size: 1.5rem;
  color: #422670;
  line-height: 1.4;
}
.section-faqs .faq-block .faq-toggle {
  margin-right: 1rem;
}
.section-faqs .faq-block .faq-toggle .btn-svg {
  height: 36px;
  width: 36px;
  transition: 150ms all ease;
}
@media (min-width: 48rem) {
  .section-faqs .faq-block .faq-toggle .btn-svg {
    height: 48px;
    width: 48px;
  }
}
.section-faqs .faq-block .faq-answer-container {
  display: none;
  padding: 2rem 1rem;
  background-color: #f3f3f3;
  border-radius: 0 0 10px 10px;
}
@media (min-width: 48rem) {
  .section-faqs .faq-block .faq-answer-container {
    padding: 4rem 2rem;
  }
}
.section-faqs .faq-block .faq-answer-container p,
.section-faqs .faq-block .faq-answer-container ul li {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #781c7d;
  line-height: 1.4;
}
@media (min-width: 48rem) {
  .section-faqs .faq-block .faq-answer-container p,
.section-faqs .faq-block .faq-answer-container ul li {
    font-size: 1.5rem;
  }
}
.section-faqs .faq-block .faq-answer-container ul {
  margin-bottom: 1rem;
}

.homepage-landing {
  background-color: #ffffff;
  color: #781c7d;
  text-align: center;
  min-height: 600px;
  height: calc(100vh - 166px);
}
@media (min-width: 48rem) {
  .homepage-landing {
    height: calc(100vh - 182px);
  }
}
@media (min-width: 90rem) {
  .homepage-landing {
    height: calc(100vh - 230px);
  }
}
.homepage-landing h2 {
  font-size: 2rem;
}
@media (min-width: 48rem) {
  .homepage-landing h2 {
    font-size: 3.125rem;
  }
}
.homepage-landing .landing-buttons-contianer {
  margin-top: 3rem;
}
@media (min-width: 48rem) {
  .homepage-landing .landing-buttons-contianer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.homepage-landing .landing-buttons-contianer p {
  margin: 1rem 0;
}
@media (min-width: 48rem) {
  .homepage-landing .landing-buttons-contianer p {
    margin: 0 1rem;
  }
}

.homepage-not-ready {
  background-color: #ffbdf2;
  color: #781c7d;
}
.homepage-not-ready h1 {
  max-width: 15ch;
}
.homepage-not-ready p {
  font-size: 1.5rem;
  margin-bottom: 3rem;
  max-width: 24ch;
}
@media (min-width: 48rem) {
  .homepage-not-ready p {
    font-size: 2rem;
  }
}
.homepage-not-ready .not-ready-flex-container {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}
@media (min-width: 64rem) {
  .homepage-not-ready .not-ready-flex-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
}
.homepage-not-ready .not-ready-flex-child {
  flex-basis: 0;
  flex-grow: 1;
}
.homepage-not-ready .nr-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.homepage-not-ready .nr-image-container .nr-image-width-container {
  width: 280px;
  height: 280px;
}
@media (min-width: 48rem) {
  .homepage-not-ready .nr-image-container .nr-image-width-container {
    width: 380px;
    height: 380px;
  }
}
@media (min-width: 64rem) {
  .homepage-not-ready .nr-image-container .nr-image-width-container {
    width: 480px;
    height: 480px;
  }
}
.homepage-not-ready .nr-image-container img {
  border-radius: 50%;
}
.homepage-not-ready .nr-shape-1 {
  top: -60px;
  left: -30px;
}
@media (min-width: 64rem) {
  .homepage-not-ready .nr-shape-1 {
    left: 0px;
  }
}
.homepage-not-ready .nr-shape-2 {
  transform: scale(0.7);
  top: -26%;
  right: -7%;
}
@media (min-width: 48rem) {
  .homepage-not-ready .nr-shape-2 {
    transform: scale(0.85);
    top: -50px;
    right: -18px;
  }
}
@media (min-width: 64rem) {
  .homepage-not-ready .nr-shape-2 {
    transform: scale(1);
    top: -35px;
    right: -8px;
  }
}
.homepage-not-ready .nr-shape-3 {
  transform: scale(0.7);
  bottom: -55px;
  right: -55px;
}
@media (min-width: 64rem) {
  .homepage-not-ready .nr-shape-3 {
    transform: scale(1);
    bottom: 0;
    right: 0;
  }
}

.landing-shape-1 {
  height: 40px;
  bottom: 0;
  left: -46px;
}
@media (min-width: 48rem) {
  .landing-shape-1 {
    height: auto;
    left: 0;
  }
}

.landing-shape-2 {
  width: 40px;
  bottom: 2px;
  left: 0;
}
@media (min-width: 48rem) {
  .landing-shape-2 {
    width: auto;
    bottom: 75px;
  }
}

.landing-shape-3 {
  display: none;
}
@media (min-width: 22.5rem) {
  .landing-shape-3 {
    display: block;
    height: 50px;
    bottom: 40px;
    left: 19px;
  }
}
@media (min-width: 48rem) {
  .landing-shape-3 {
    height: auto;
    bottom: 80px;
    left: 76px;
  }
}

.landing-shape-4 {
  display: none;
}
@media (min-width: 22.5rem) {
  .landing-shape-4 {
    display: block;
    height: 80px;
    bottom: -14px;
    left: 39px;
    animation: spin-animation 17s linear infinite;
  }
}
@media (min-width: 48rem) {
  .landing-shape-4 {
    height: auto;
    bottom: -25px;
    left: 158px;
  }
}

.landing-shape-5 {
  display: none;
}
@media (min-width: 48rem) {
  .landing-shape-5 {
    display: block;
    bottom: 100px;
    right: 250px;
    animation: spin-animation 15s linear infinite;
  }
}
@media (min-width: 64rem) {
  .landing-shape-5 {
    bottom: 150px;
  }
}

.landing-shape-6 {
  display: none;
}
@media (min-width: 48rem) {
  .landing-shape-6 {
    display: block;
    bottom: 0;
    right: 0;
  }
}

.landing-shape-7 {
  display: none;
}
@media (min-width: 48rem) {
  .landing-shape-7 {
    display: block;
    bottom: 350px;
    right: 0;
  }
}
@media (min-width: 64rem) {
  .landing-shape-7 {
    bottom: 250px;
  }
}

@media (min-width: 64rem) {
  .course-page .course-page-grid {
    display: grid;
    grid-template-areas: "a a a b" ". . . b" ". . . b" "c c . ." "c c . .";
    gap: 2rem;
  }
}
.course-page .video-container {
  grid-area: a;
  margin-bottom: 2rem;
}
.course-page .course-main-container {
  grid-area: c;
  margin-bottom: 2rem;
}
.course-page .course-main-container h2 {
  font-size: 1.375rem;
  color: #781c7d;
  margin-bottom: 2rem;
}
@media (min-width: 48rem) {
  .course-page .course-main-container h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
  }
}
.course-page .course-main-container p {
  font-weight: 800;
  margin-bottom: 2rem;
}
@media (min-width: 48rem) {
  .course-page .course-main-container p {
    margin-bottom: 3rem;
  }
}
.course-page .course-info-container {
  grid-area: b;
  padding: 2rem 1rem;
  background-color: #ffbdf2;
  border-radius: 10px;
}
@media (min-width: 48rem) {
  .course-page .course-info-container {
    padding: 3rem 2rem;
  }
}
.course-page .course-info-container h2 {
  font-size: 1.5rem;
  color: #781c7d;
  margin-bottom: 2rem;
}
.course-page .course-info-container p {
  font-size: 0.875rem;
  font-weight: 400;
  color: #781c7d;
}

.hit-header-shape-1 {
  bottom: 40px;
  left: 335px;
}
@media (min-width: 64rem) {
  .hit-header-shape-1 {
    top: 100px;
    right: 452px;
    bottom: auto;
    left: auto;
  }
}
@media (min-width: 90rem) {
  .hit-header-shape-1 {
    top: 100px;
    right: 610px;
  }
}

.hit-header-shape-2 {
  bottom: 345px;
  left: 30px;
  z-index: 1;
}
@media (min-width: 64rem) {
  .hit-header-shape-2 {
    top: 250px;
    right: 550px;
    bottom: auto;
    left: auto;
    z-index: auto;
  }
}
@media (min-width: 90rem) {
  .hit-header-shape-2 {
    right: 750px;
  }
}

.hit-header-shape-3 {
  bottom: 350px;
  left: 250px;
  height: 80px;
}
@media (min-width: 64rem) {
  .hit-header-shape-3 {
    bottom: 50px;
    right: 450px;
    left: auto;
    height: auto;
  }
}
@media (min-width: 90rem) {
  .hit-header-shape-3 {
    right: 650px;
  }
}

.hit-image-accent-1 {
  height: 50px;
  width: 50px;
  bottom: 20px;
  right: 10px;
}
@media (min-width: 90rem) {
  .hit-image-accent-1 {
    height: auto;
    width: auto;
    bottom: 15px;
    right: 10px;
  }
}

.hit-image-accent-2 {
  top: 50px;
  left: 0px;
}
@media (min-width: 90rem) {
  .hit-image-accent-2 {
    top: 90px;
    left: 17px;
    transform: scale(1.7);
  }
}

.hit-image-accent-3 {
  width: 80px;
  height: 80px;
  bottom: 0;
  right: 0;
}
@media (min-width: 90rem) {
  .hit-image-accent-3 {
    width: auto;
    height: auto;
  }
}

.hit-image-accent-4 {
  width: 90px;
  height: 90px;
  top: 15px;
  right: -28px;
}
@media (min-width: 90rem) {
  .hit-image-accent-4 {
    width: auto;
    height: auto;
    right: -52px;
  }
}

.hit-image-accent-5 {
  top: 10px;
  left: -30px;
  transform: scale(0.7);
}
@media (min-width: 90rem) {
  .hit-image-accent-5 {
    top: 50px;
    left: -20px;
    transform: scale(1);
  }
}

.how-it-works-page .para-container p {
  color: #422670;
}

.online-courses-page h1 {
  margin-bottom: 3rem;
  font-size: 3.125rem;
}
@media (min-width: 48rem) {
  .online-courses-page h1 {
    font-size: 4rem;
  }
}

.need-help-deciding {
  background-color: #781c7d;
  color: #ffffff;
}
@media (min-width: 64rem) {
  .need-help-deciding .need-help-flex-container {
    display: flex;
    gap: 3rem;
  }
}
@media (min-width: 64rem) {
  .need-help-deciding .help-deciding-info,
.need-help-deciding .help-deciding-video {
    flex-grow: 1;
    flex-basis: 0;
  }
}
.need-help-deciding p {
  margin-bottom: 3rem;
  max-width: 50ch;
}
.need-help-deciding .call-us-btn {
  margin-bottom: 3rem;
}
@media (min-width: 64rem) {
  .need-help-deciding .call-us-btn {
    margin-bottom: 0;
  }
}

.online-courses-search {
  position: relative;
  background-color: #f3f3f3;
  color: #781c7d;
}
.online-courses-search h1 {
  text-align: center;
}
.online-courses-search .choice-outer-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 64rem) {
  .online-courses-search .choice-outer-container {
    padding-top: 3rem;
    flex-direction: row;
    justify-content: center;
  }
}
.online-courses-search .tutor-choice-outer {
  max-width: 1000px;
  margin: 0 auto;
}
.online-courses-search .choices-container {
  flex-basis: 0;
  flex-grow: 1;
}
.online-courses-search .choice {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.online-courses-search .choice h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.online-courses-search .choice-info {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  transition: 150ms all ease;
}
.online-courses-search .choice-info:hover {
  cursor: pointer;
}
.online-courses-search .choice-info p {
  font-size: 1rem;
  font-weight: 500;
  transition: 150ms all ease;
}
.online-courses-search .choice-info i {
  color: #fa5c47;
  transition: 150ms all ease;
}
.online-courses-search .choice-info:hover i, .online-courses-search .choice-info:hover p {
  color: #422670;
}
.online-courses-search .choice-img {
  background-color: #781c7d;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  padding: 1rem;
}
.online-courses-search .choice-dropdown {
  position: relative;
  width: 100%;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 6px;
}
.online-courses-search .choice-drop-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fa5c47;
  color: #ffffff;
  padding: 0.5rem 2rem;
  border-radius: 6px;
}
.online-courses-search .choice-drop-btn:hover {
  cursor: pointer;
}
.online-courses-search .choice-dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  background-color: #ffffff;
  border-radius: 0px 0px 6px 6px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.online-courses-search .choice-option {
  display: flex;
  align-items: center;
  justify-content: start;
  color: #781c7d;
  border-bottom: 1px solid #422670;
  transition: 150ms all ease;
}
.online-courses-search .choice-option:last-of-type {
  border-bottom: 0;
  border-radius: 0px 0px 6px 6px;
}
.online-courses-search .choice-option img {
  width: 45px;
  background-color: #ffbdf2;
  padding: 0.75rem;
  margin-right: 0.75rem;
}
.online-courses-search .choice-option p {
  padding: 0.75rem;
}
.online-courses-search .choice-option:hover, .online-courses-search .choice-option:focus {
  background-color: #ffbdf2;
}
.online-courses-search .choice-search-btn-container {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
@media (min-width: 48rem) {
  .online-courses-search .choice-search-btn-container {
    margin-top: 6rem;
  }
}
.online-courses-search .choice-search-btn i {
  margin-left: 1rem;
}

.online-courses-courses .course {
  border-radius: 6px;
  margin-bottom: 1.5rem;
}
.online-courses-courses .course:last-of-type {
  margin-bottom: 0;
}
.online-courses-courses .course-header {
  border-radius: 6px 6px 0px 0px;
  background-color: #422670;
  color: #ffffff;
  transition: 150ms all ease;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-header {
    display: flex;
  }
}
@media (min-width: 64rem) {
  .online-courses-courses .course-header p {
    font-size: 1.5rem;
  }
}
.online-courses-courses .level-and-type {
  display: flex;
  border-bottom: 1px solid #ffffff;
}
@media (min-width: 64rem) {
  .online-courses-courses .level-and-type {
    border-bottom: 0;
  }
}
.online-courses-courses .course-level {
  padding: 1rem 2rem 1rem 1rem;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-level {
    border-right: 1px solid #ffffff;
  }
}
.online-courses-courses .course-type {
  padding: 1rem;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-type {
    padding: 1rem 2rem 1rem 1rem;
    border-right: 1px solid #ffffff;
  }
}
.online-courses-courses .course-subject {
  padding: 1rem;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-subject {
    flex-grow: 1;
    border-right: 1px solid #ffffff;
  }
}
.online-courses-courses .course-logo {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #f3f3f3;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-logo {
    display: block;
    width: 285px;
    height: auto;
    margin-left: auto;
  }
}
.online-courses-courses .course-logo img {
  background-color: #f3f3f3;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-logo img {
    height: 100px;
    margin: 0 auto;
  }
}
.online-courses-courses .course-main {
  border-radius: 0px 0px 6px 6px;
  background-color: #ffbdf2;
  color: #781c7d;
  padding: 1rem;
  transition: 150ms all ease;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-main {
    display: flex;
    justify-content: space-between;
  }
}
.online-courses-courses .course-main h2 {
  margin: 1.5rem 0;
  overflow-wrap: break-word;
}
.online-courses-courses .course-main .click-here-info {
  cursor: pointer;
}
.online-courses-courses .course-main .click-here-btn {
  margin-bottom: 2rem;
  margin-left: 1rem;
  transition: 150ms all ease;
}
.online-courses-courses .course-main .click-here-btn:hover {
  cursor: pointer;
}
.online-courses-courses .course-main .view-courses {
  display: flex;
  align-items: center;
  margin-right: 1.5rem;
}
@media (min-width: 48rem) {
  .online-courses-courses .course-main .view-courses .not_available_to_purchase_message {
    min-width: 507px;
    margin-left: 1.5rem;
  }
}
.online-courses-courses .course-more-info-container {
  display: none;
}
.online-courses-courses .course-more-info {
  padding: 1rem;
  background-color: #f3f3f3;
  color: #781c7d;
  border-radius: 0px 0px 6px 6px;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-more-info {
    display: flex;
    gap: 3rem;
  }
}
.online-courses-courses .course-more-info .more-info-flex-child {
  width: 100%;
}
@media (min-width: 64rem) {
  .online-courses-courses .course-more-info .more-info-flex-child {
    width: 50%;
  }
}
.online-courses-courses .course-more-info p {
  margin-bottom: 1.5rem;
}

.oc-header-shape-1 {
  transform: rotate(180deg) scale(0.7);
  bottom: 30px;
  left: -17px;
}
@media (min-width: 48rem) {
  .oc-header-shape-1 {
    transform: rotate(0deg) scale(1);
    top: 60px;
    bottom: auto;
    right: 0;
    left: auto;
  }
}

.oc-header-shape-2 {
  display: none;
}
@media (min-width: 64rem) {
  .oc-header-shape-2 {
    display: block;
    top: 40px;
    right: 50%;
  }
}

.oc-header-shape-3 {
  height: 65px;
  left: 270px;
  bottom: 30px;
  z-index: 1;
}
@media (min-width: 64rem) {
  .oc-header-shape-3 {
    height: auto;
    left: auto;
    right: 411px;
    bottom: 0;
    z-index: auto;
  }
}
@media (min-width: 90rem) {
  .oc-header-shape-3 {
    right: 583px;
  }
}

.tut-header-shape-1 {
  bottom: 300px;
  left: 260px;
  height: 80px;
  z-index: 1;
}
@media (min-width: 64rem) {
  .tut-header-shape-1 {
    top: 45px;
    right: 550px;
    bottom: auto;
    left: auto;
    height: auto;
    z-index: auto;
  }
}
@media (min-width: 90rem) {
  .tut-header-shape-1 {
    right: 665px;
  }
}

.tut-header-shape-2 {
  bottom: 6px;
  left: 320px;
  z-index: 1;
}
@media (min-width: 64rem) {
  .tut-header-shape-2 {
    left: auto;
    right: 550px;
    bottom: 20px;
    z-index: auto;
  }
}
@media (min-width: 90rem) {
  .tut-header-shape-2 {
    right: 700px;
  }
}

.tut-header-shape-3 {
  left: -180px;
  bottom: -290px;
  transform: rotate(90deg) scale(1.3);
}
@media (min-width: 64rem) {
  .tut-header-shape-3 {
    left: auto;
    right: -215px;
    bottom: 0px;
    transform: rotate(0deg) scale(1);
  }
}
@media (min-width: 90rem) {
  .tut-header-shape-3 {
    right: 0px;
  }
}

.ts-header-shape-1 {
  display: none;
}
@media (min-width: 64rem) {
  .ts-header-shape-1 {
    display: block;
    bottom: 140px;
    right: 550px;
  }
}
@media (min-width: 90rem) {
  .ts-header-shape-1 {
    right: 750px;
  }
}

.ts-header-shape-2 {
  bottom: 330px;
}
@media (min-width: 64rem) {
  .ts-header-shape-2 {
    bottom: 50px;
    right: 620px;
  }
}
@media (min-width: 90rem) {
  .ts-header-shape-2 {
    right: 820px;
  }
}

.ts-header-shape-3 {
  z-index: 1;
  bottom: 50px;
  left: 330px;
}
@media (min-width: 64rem) {
  .ts-header-shape-3 {
    bottom: 20px;
    right: 450px;
    left: auto;
    z-index: auto;
  }
}
@media (min-width: 90rem) {
  .ts-header-shape-3 {
    right: 650px;
  }
}

.ts-header-shape-4 {
  bottom: -40px;
  left: 50px;
}
@media (min-width: 64rem) {
  .ts-header-shape-4 {
    bottom: 0;
    right: 97px;
    left: auto;
  }
}
@media (min-width: 90rem) {
  .ts-header-shape-4 {
    right: 280px;
  }
}

.ts-accent-1 {
  width: 65px;
  height: 65px;
  top: 33px;
  right: -20px;
}
@media (min-width: 90rem) {
  .ts-accent-1 {
    width: auto;
    height: auto;
    top: 50px;
    right: -15px;
  }
}

.ts-accent-2 {
  bottom: 20px;
  left: -2px;
}
@media (min-width: 90rem) {
  .ts-accent-2 {
    bottom: 50px;
    left: 24px;
  }
}

.ts-accent-3 {
  height: 80px;
  width: 80px;
  left: -37px;
  top: 105px;
}
@media (min-width: 90rem) {
  .ts-accent-3 {
    height: auto;
    width: auto;
    left: -70px;
    top: 175px;
  }
}

.ts-accent-4 {
  height: 80px;
  width: 80px;
  top: -8px;
  right: 2px;
}
@media (min-width: 90rem) {
  .ts-accent-4 {
    height: auto;
    width: auto;
    top: 30px;
    right: 5px;
  }
}

.ts-accent-5 {
  display: none;
}
@media (min-width: 48rem) {
  .ts-accent-5 {
    display: block;
    top: 15px;
    right: -45px;
  }
}

.ts-accent-6 {
  transform: scale(0.6);
  right: -35px;
  top: 40px;
}
@media (min-width: 22.5rem) {
  .ts-accent-6 {
    right: -50px;
    top: 50px;
  }
}
@media (min-width: 48rem) {
  .ts-accent-6 {
    transform: scale(1);
    right: -65px;
    top: 70px;
  }
}

.reg-header-shape-1 {
  bottom: 350px;
  left: 270px;
}
@media (min-width: 64rem) {
  .reg-header-shape-1 {
    bottom: 300px;
    right: 560px;
    left: auto;
  }
}
@media (min-width: 90rem) {
  .reg-header-shape-1 {
    right: 750px;
  }
}

.reg-header-shape-2 {
  display: none;
}
@media (min-width: 90rem) {
  .reg-header-shape-2 {
    display: block;
    right: 830px;
    bottom: 170px;
  }
}

.reg-header-shape-3 {
  bottom: 40px;
  left: 270px;
}
@media (min-width: 64rem) {
  .reg-header-shape-3 {
    bottom: 20px;
    right: 400px;
    left: auto;
  }
}
@media (min-width: 90rem) {
  .reg-header-shape-3 {
    right: 600px;
  }
}

.reg-accent-1 {
  top: 30px;
  left: 0px;
}
@media (min-width: 90rem) {
  .reg-accent-1 {
    top: 70px;
    left: 10px;
  }
}

.reg-accent-2 {
  height: 80px;
  width: 80px;
  bottom: 0;
  right: 0;
}
@media (min-width: 90rem) {
  .reg-accent-2 {
    height: auto;
    width: auto;
  }
}

.reg-image-accent-3 {
  top: -10px;
  left: -10px;
}
@media (min-width: 90rem) {
  .reg-image-accent-3 {
    top: 15px;
    left: 15px;
  }
}

.reg-image-accent-4 {
  width: 80px;
  height: 80px;
  bottom: 0;
  right: 0;
}
@media (min-width: 90rem) {
  .reg-image-accent-4 {
    width: auto;
    height: auto;
  }
}

.reg-image-accent-5 {
  width: 90px;
  height: 90px;
  top: 15px;
  right: -28px;
}
@media (min-width: 90rem) {
  .reg-image-accent-5 {
    width: auto;
    height: auto;
    right: -52px;
  }
}

.about-us-page .abt-image-accent-1 {
  width: 70px;
  height: 70px;
  background-color: #781c7d;
  border-radius: 50%;
  bottom: 20px;
  right: 0;
}
@media (min-width: 90rem) {
  .about-us-page .abt-image-accent-1 {
    width: 120px;
    height: 120px;
    bottom: 15px;
    right: -5px;
  }
}
.about-us-page .abt-image-accent-2 {
  top: 20px;
  left: 24px;
}
@media (min-width: 90rem) {
  .about-us-page .abt-image-accent-2 {
    width: 55px;
    height: 55px;
    top: 75px;
    left: 10px;
  }
}
.about-us-page .abt-image-accent-3 {
  transform: scale(0.8);
  top: 40px;
  left: -52px;
}
@media (min-width: 90rem) {
  .about-us-page .abt-image-accent-3 {
    transform: scale(1.4);
    top: 90px;
    left: -42px;
  }
}
.about-us-page .abt-image-accent-4 {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  bottom: 85px;
  right: -10px;
}
@media (min-width: 90rem) {
  .about-us-page .abt-image-accent-4 {
    width: 28px;
    height: 28px;
    bottom: 150px;
    right: -12px;
  }
}
.about-us-page .abt-image-accent-5 {
  display: none;
}
@media (min-width: 48rem) {
  .about-us-page .abt-image-accent-5 {
    display: block;
    bottom: 0px;
    right: 0px;
    transform: scale(0.7);
  }
}
@media (min-width: 90rem) {
  .about-us-page .abt-image-accent-5 {
    bottom: 75px;
    right: 0px;
    transform: scale(1);
  }
}

.ab-header-shape-1 {
  bottom: 25px;
  left: 310px;
  height: 75px;
}
@media (min-width: 64rem) {
  .ab-header-shape-1 {
    bottom: 100px;
    right: 550px;
    left: auto;
    height: auto;
  }
}
@media (min-width: 90rem) {
  .ab-header-shape-1 {
    right: 750px;
  }
}

.ab-header-shape-2 {
  bottom: 150px;
  left: 340px;
}
@media (min-width: 64rem) {
  .ab-header-shape-2 {
    bottom: 30px;
    right: 630px;
    left: auto;
  }
}
@media (min-width: 90rem) {
  .ab-header-shape-2 {
    right: 830px;
  }
}

.ab-header-shape-3 {
  display: none;
}
@media (min-width: 64rem) {
  .ab-header-shape-3 {
    display: block;
    right: 350px;
    bottom: 0;
  }
}
@media (min-width: 90rem) {
  .ab-header-shape-3 {
    right: 520px;
  }
}

.ab-header-shape-4 {
  display: none;
}
@media (min-width: 64rem) {
  .ab-header-shape-4 {
    display: block;
    bottom: 100px;
    right: 50px;
  }
}

.thank-you-page .flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2rem;
}
@media (min-width: 64rem) {
  .thank-you-page .flex-container {
    flex-direction: row;
    gap: 2rem;
  }
}
.thank-you-page .start-course-btn-container {
  margin-bottom: 3rem;
}
@media (min-width: 48rem) {
  .thank-you-page .start-course-btn-container {
    margin-bottom: 5rem;
  }
}
.thank-you-page .thank-you-main-details {
  width: 100%;
}
@media (min-width: 64rem) {
  .thank-you-page .thank-you-main-details {
    width: 60%;
  }
}
.thank-you-page .thank-you-main-details .thank-you-details-info {
  margin-bottom: 2rem;
}
.thank-you-page .thank-you-main-details .thank-you-details-info p {
  color: #2c3b3b;
  font-size: 1.25rem;
  font-weight: 600;
}
.thank-you-page .thank-you-main-details .lineitem td {
  color: #2c3b3b;
  font-size: 1.25rem;
  font-weight: 600;
}
.thank-you-page .order-details-container {
  width: 100%;
  background-color: #422670;
  color: #ffffff;
  padding: 4rem 3rem;
  border-radius: 10px;
  height: fit-content;
}
@media (min-width: 64rem) {
  .thank-you-page .order-details-container {
    width: 40%;
  }
}
.thank-you-page .order-details-container .order-details-header {
  margin-bottom: 2rem;
}
.thank-you-page .order-details-container .details-border-top {
  border-top: 1px solid #ffffff;
}
.thank-you-page .order-details-container .details-border-bottom {
  border-bottom: 1px solid #ffffff;
}
.thank-you-page .order-details-container p {
  padding: 0.35rem;
  word-break: break-word;
}
.thank-you-page .order-details-container p span {
  display: block;
  padding: 0.35rem;
  word-break: break-word;
  border-bottom: 1px solid #ffffff;
}

.ty-header-shape-1 {
  bottom: -170px;
  right: -100px;
}
@media (min-width: 48rem) {
  .ty-header-shape-1 {
    bottom: 0;
    right: 0;
  }
}

.ty-header-shape-2 {
  bottom: 15px;
  right: 15px;
  transform: scale(0.7);
}
@media (min-width: 48rem) {
  .ty-header-shape-2 {
    bottom: 50px;
    right: 75px;
    transform: scale(1);
  }
}

.ty-header-shape-3 {
  display: none;
}
@media (min-width: 48rem) {
  .ty-header-shape-3 {
    bottom: 220px;
    right: 50px;
    display: block;
  }
}

form.create-account-form fieldset.terms_and_conditions div.fieldset_fields div.form-line:last-of-type {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
}
form.create-account-form fieldset.terms_and_conditions div.fieldset_fields div.form-line:last-of-type div.form-label#g-recaptcha-response_label_div {
margin: 0;
margin-left: 10px;
margin-bottom: 60px;
}

/*# sourceMappingURL=nala-main.css.map */