body {
  background-color: white;
}
section {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.button, .edu-content .button {
  width: fit-content;
  height: fit-content;
  font-size: 16px;
  font-weight: 600;
  border: none;
  padding: 10px 40px;
  border-radius: 50px;
  color:#ffffff;
  background: #5463BF;
}

.edu-head-menu {
  display: none;
}
.edu-landing, .edu-title {
  padding: 80px 0 0 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background-color: transparent;
  background-image: linear-gradient(230deg, #475489 0%, #0A0F20 100%);
}
.edu-landing .breadcrumb {
  width: 90%;
  text-align: left;
  gap: 8px;
  padding: 16px 0;
  margin: 0 auto;
}
.edu-landing .breadcrumb a {
  text-decoration: underline;
  color: #FFFFFF;
}
.edu-landing .breadcrumb a.active {
  text-decoration: none;
  font-weight: 600;
}
.edu-landing .title {
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 195px 0;
}
.edu-landing .title h1 {
  text-transform: uppercase;
  color: transparent;
  font-size: 100px;
  font-weight: 900;
  letter-spacing: 2px;

  background: linear-gradient(120deg, #9431D7 20.69%, #6A6CD9 50.19%, #2BAADA 79.69%);
  background-clip: text;
  -webkit-background-clip: text;
}
.edu-landing .title h3.sub-title {
  font-size: 30px;
  font-weight: 700;
  color: #C1C3C8;
  padding: 0px 200px 0px 200px;
  letter-spacing: 1.6px;
}
.edu-landing .title p {
  margin: 0;
  padding: 0px 300px 0px 300px;
  color: #C1C3C8
}
.grey-section {
  background-color: #F4F6F8;
}
.edu-section {
  padding: 20px 260px;
  gap: 24px;
  justify-content: center;
  align-items: center;
  max-width: 1920px;
  width: 100%;
}
.edu-section div.grid-img {
  width: 50%;
}
.edu-section > div > img {
  width: 100%;
}
.edu-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}
.edu-content * { color: #222222; }
.edu-content h2 { 
  font-size: 23px;
  font-weight: 600;
}
.edu-content p { 
  line-height: 26px;
  color: #444444
}
.edu-content .blue-divider {
  margin: 0 0 8px 0;
  width: 32.39px;
}
.edu-note-extra i strong a {
  color: #337AB7;
}
.review-carousel-item {
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 250px;
  width: 100vw;
  max-width: 1920px;
  text-wrap: wrap;
}
.review-carousel-item p p:first-child {
  font-style: italic;
  padding: 20px;
  color: black;
  background-color: #ffffff;
  border-radius: 30px;
}
/* ----------------  carousel --------------------*/
.carousel {
  margin-top: 30px;
  position: relative;
}
.carousel .outer {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.carousel .outer::-webkit-scrollbar {
  display: none;
}
.carousel .content {
  display: inline-flex;
  flex-wrap: nowrap;
  position: relative;
  white-space: nowrap;
}
.carousel ul {
  display: flex;
  height: 12px;
  margin-top: 10px;
  justify-content: center;
  gap: 4px;
}
.carousel ul li {
  display: block;
  width: 12px;
  height: 6px;
  border-radius: 6px;
  margin-left: 2px;
  border: solid 4px var(--flatbox-color);
  background-color: var(--text-color);
  transition: all 0.2s linear;
  cursor: pointer;
  opacity: 0.2;
}
.carousel ul li:hover:not(.active) {
  opacity: 0.8;
}
.carousel ul li.active {
  opacity: 0.95;
}
#review-carousel-indicator li {
  margin: 0 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #A3A3A3;
}
#review-carousel-indicator li.active {
  background-color: #019ECF;
}
/* ---------------- end carousel --------------------*/
#edu-reviews .edu-content, #edu-success .edu-content {
  width: 100%;
  max-width: 1920px;
  text-align: center;
}
#edu-join-us a{
  color: #337AB7;
}
#edu-join-us .edu-content img {
  width: 150px;
}
#edu-free-trial {
  background-color: #0A0F20;
}
#edu-free-trial h1 {
  font-size: 48px;
  font-weight: 900;
  line-height: 59px;
  text-transform: uppercase;
}
#edu-free-trial img {
  width: 100%;
}
#edu-free-trial img.small {
  display: none;
}
#edu-faq .faq {
  margin-bottom: 100px;
}
#edu-faq .edu-content, #edu-application .edu-content {  max-width: 900px; width: 100%; }
#edu-faq .edu-content h2 { 
  font-weight: 500;
}
#edu-faq .edu-content p { 
  font-size: 18px;
  color: #333333
}
#edu-faq .wrap { 
  width: 100%;
  max-width: 900px;
}
#edu-faq .faq details { border-bottom: none; }
#edu-faq .faq details[open] summary {
  border-color: #4ca4dd;
}
#edu-faq .faq details p { 
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  padding: 30px;
  border: none;
  background: #f6f6f6;
  border-radius: 10px;
  margin-top: 25px;
}
#edu-faq .faq summary {
  font-size: 16px;
  font-weight: 700;
  color: #666666;
  padding: 8px 30px 8px 20px;
  border-radius: 30px;
  border: 2px dashed #E7E7E7;
  gap: 8px;
}
#edu-feature-middle {
  padding: 0 0 32px;
}
#edu-feature-middle .edu-content, #edu-feature-conclusion .edu-content { width: 100%; }
#edu-feature-conclusion .edu-content h2 {
  align-self: center;
}
#edu-feature-middle .edu-content p, #edu-video-tutorial .edu-content {
  text-align: center;
}
.edu-card-section {
  width: 100%;
  gap: 15px;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.edu-card {
  gap: 12px;
  width: 23%;
  border: 1px solid #EEEEEE;
  text-align: center;
  transition: all .15s ease-in;
}
.edu-card p { color: #7A7A7A; }
.edu-card h2 {
  margin: 4px 0 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  line-height: 28px;
}
.edu-card img {
  width: 100%;
}
.edu-card img.logo {
  width: 50px;
  border: 3px solid #ffffff;
  border-radius: 50%;
}
#edu-tutorial-video .edu-content > p.title {
  font-size: 22px;
  font-weight: 500;
}
#edu-tutorial-video .edu-card:hover {
  transform:translateY(-6px);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  cursor: pointer;
}
#edu-tutorial-video .edu-card div {
  position: relative;
  top: -24px;
}
#edu-tutorial-intro {
  background: linear-gradient(73.3deg, #8045A6 0%, #8A96D9 100%);
}
#edu-tutorial-intro .edu-card {
  padding: 20px 20px 36px;
  border: none;
  border-radius: 20px;
  background: #FFFFFF26;
  box-shadow: 0px 10px 15px -10px #0000004D;
  align-items: center;
}
#edu-tutorial-intro .edu-card img {
  width: 82px;
}
#edu-tutorial-intro .edu-card h3 {
  font-size: 20px;
  line-height: 28px;
}
#edu-tutorial-intro .edu-card p {
  font-weight: 500;
  font-size: 14px;
  line-height: 26px;
  color: #ffffff;
}
.edu-section ul.tick-list li {
  padding: 5px 0;
  align-items: center;
  font-size: 18px;
  line-height: 25.5px;
}
.edu-section ul.tick-list li .list-icon {
  width: 20px;
  margin: 0 8px 0 4px;;
}
#edu-application .edu-content h2 {
  font-size: 40px;
  line-height: 60px;
}
/* Edu Application Form */
#education-application-form-login-overlay {
  top:0;
  left: 0;
  gap:30px;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 30px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(#00000000 0%, white 75%);
}
#education-application-form-login-overlay h3 {
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}
#education-application-files,
#education-application-form {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.form-container {
  width: 96%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  line-height: 21px;
}
.title-container { align-self: flex-start; }
.title-container div.bold {
  font-weight: 700;
}
.section-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 60px;
  color: fff;
}
.warning-container {
  background: #F4F6F8;
  padding: 24px;
  border-radius: 8px;
  gap: 24px;
}
.warning-container p {
  line-height: 22px;
}
.warning-container .text-red {
  color: #E84545;
}
.half-width, .text-input.half-width, .select-input.half-width {
  width: calc(50% - 1rem);
}
.form-container .form-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-container .form-actions {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  gap: 8px;
  margin-bottom: 125px;
}

.form-container .form-actions button[type="reset"], #go-back-button {
  background: var(--white, #FFFFFF);
  color: #404348;
  border: 0.7px solid #5463BF
}
/* upload files page */
.filesExampleColumns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.filesExampleColumn {
  flex-basis: min(50%, 200px);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filesExampleColumn div img {
  width: 20px;
}

.filesExampleColumn>div:not(.filesNotAcceptTitle) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.filesNotAcceptTitle {
  display: inline-block;
}

/* Upload area */
.upload-container {
  width: 100%;
  border-radius: 16px;
  background: transparent;
  box-shadow: 0px 12px 24px 0px rgba(145, 158, 171, 0.24), 0px 0px 2px 0px rgba(145, 158, 171, 0.24);
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.upload-container .upload-area {
  background: #F9F9F9;
  width: 100%;
  min-height: 320px;
  padding: 64px 0;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.upload-container .upload-area img {
  width: 70px;
}

.upload-container .upload-area.dragover {
  border: 5px dashed #D3D4D4;
}

.button.upload-button {
  background: #019ECF;
  font-size: 13px;
}
.button.upload-button > img {
  width: 20px;
}
.file-upload {
  display: none;
}

.upload-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 24px;

}

.file-item .file-item-logo {
  width: 32px;
  height: 32px;
}

.file-item .file-item-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  width: clamp(50px, 20vw, 400px);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.file-item .file-item-size {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #595959;
}

.file-item .file-item-progress {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.file-item .file-item-progress.completed {
  visibility: hidden;
}

.file-item .progress-bar {
  height: 8px;
  border-radius: 30px;
  background-color: #D3D4D4;
  position: relative;
}

.file-item .progress-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 30px;
  background-color: #019ECF;
}

.file-item .progress-bar-text,
.file-item .progress-bar-text * {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 21px;
}

.file-item .progress-percent {
  width: 5ch;
  text-align: right;
}

.file-item-cancel {
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: inherit;
  width: 16px;
  height: 16px;
}

.file-item-cancel img {
  width: 16px;
  height: 16px;
}

.fileValidationMessages {
  display: none;
  flex-direction: column;
  align-items: center;
  list-style: initial;
}
.fileValidationMessages > li {
  color: #E91D35;
  font-size: 13px;
  font-weight: 700;
}

.fileValidationMessages:invalid {
  display: flex;
}

.terms-conditions-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.terms-conditions-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  box-shadow: 0px 12px 24px 0px rgba(145, 158, 171, 0.24);
  border: 1px solid white;
  visibility: visible;
  margin-right: 8px !important;
}

@media only screen and (max-width: 1440px) {
  .edu-section {
    padding: 20px 140px;
  }
}

@media only screen and (max-width: 1024px) {
  #head-education {
    width: max-content;
  }
  .edu-head {
    display: none;
  }
  .edu-head-menu {
    display: block;
  }
  .edu-landing .title {
    padding: 80px 24px 100px;
  }
  .edu-landing .title h1 {
    font-size: 64px;
  }
  .edu-landing .title h3.sub-title {
    font-size: 25px;
    font-weight: 600;
    padding: 0 40px;
  }
  .edu-landing .title p {
    padding: 0px 14px;
  }
  .edu-section {
    padding: 24px 40px;
  }
  #edu-upgrade .edu-section, #edu-steps-go-get-free .edu-section {
    flex-direction: column;
  }
  #edu-upgrade .edu-section div.grid-img, #edu-steps-go-get-free .edu-section div.grid-img {
    width: 100%;
  }
  #edu-upgrade .edu-section > div > img, #edu-steps-go-get-free .edu-section > div > img {
    max-width: 480px;
  }
  #edu-upgrade .edu-section .edu-content, #edu-steps-go-get-free .edu-section .edu-content {
    width: 100%;
    order: 1;
    align-self: flex-start;
  }
  .review-carousel-item {
    padding: 0 40px;
  }
  #edu-free-trial img {
    display: none;
  }
  #edu-free-trial img.small {
    display: block;
    width: 100%;
  }
  #edu-free-trial h1 {
    font-size: 32px;
    line-height: 38px;
  }
  #edu-faq .wrap { 
    width: 100%;
  }
  .edu-card img.logo {
    width: 40px;
  }
}

@media only screen and (max-width: 625px) {
  .button {
    font-size: 14px;
  }
  .edu-landing .title h1 {
    font-size: 32px;
  }
  .edu-landing .title h3.sub-title {
    font-size: 19px;
    padding: 0 40px;
  }
  .edu-landing .title p {
    margin: 0;
    padding: 0px 40px;
  }
  .edu-section {
    padding: 8px 16px;
    flex-direction: column;
  }
  .edu-section > div > img {
    width: 100%;
  }
  .edu-content:not(.but) {
    order: 1;
    width: 100%;
  }
  .edu-section div.grid-img {
    width: 100%;
  }
  .edu-content h2 { 
    font-size: 19.2px;
  }
  .carousel {
    margin-top: 0;
  }
  .review-carousel-item p p:first-child {
    background-color: unset;
  }
  .review-carousel-item p {
    margin: 0;
    padding: 10px 20px 20px;
    color: black;
    background-color: #ffffff;
    border-radius: 30px;
  }
  #edu-join-us .edu-content {
    padding: 16px 0;
    gap: 28px;
  }
  #edu-free-trial img.small {
    display: block;
    width: 100%;
  }
  #edu-faq .edu-content, #edu-feature-conclusion .edu-content, 
  #edu-video-tutorial .edu-content, #edu-application .edu-content,
  #edu-success .edu-content { 
    order: 0; 
  }
  .edu-card {
    width: 47%;
  }
  .edu-card img.logo {
    width: 60px;
  }
}

@media only screen and (max-width: 480px) {
  .edu-card {
    width: 100%;
  }
}