* {
  font-family: 'Prompt', sans-serif;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
}

.hero-text2 {
  text-align: right;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-15px, -50%);
  color: #fff;
}

.txtRed {
  color: #c01c23;
}
.txtRed2 {
  color: #ff0103;
}
.mc-card {
  position: relative;
  padding: 0px;
}
.mc-caption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 30px 15px 15px;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}

.btn-orange {
  background-color: #ed9623;
  color: #fff !important;
  min-width: 300px;
  font-size: 1.3em;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
  transform: scale(1.02) translate(0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.btn-orange:hover {
  transform: scale(1.02) translate(0, -3px);
  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.2);
}

/*----- Animate Scrolling -----*/

:root {
  --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-duration: 1s;
}

@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
[data-animation] {
  opacity: 0;
  -webkit-animation-timing-function: var(--animation-timing-function);
  animation-timing-function: var(--animation-timing-function);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: var(--animation-duration);
  animation-duration: var(--animation-duration);
  will-change: transform, opacity;
}

.animations-disabled,
.animations-disabled [data-animation] {
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 1 !important;
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

.slideInLeft {
  -webkit-animation-name: slideInleft;
  animation-name: slideInleft;
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.zoomReverseIn {
  -webkit-animation-name: zoomReverseIn;
  animation-name: zoomReverseIn;
}

.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

.flipOutY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  animation-direction: reverse;
}

.ta-banner {
  background-image: url('../img/teacher-academy-about.jpg');
  overflow: hidden;
  padding-top: 37.5%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.ta-banner2 {
  background-image: url('../img/inspiration.jpg');
  overflow: hidden;
  padding-top: 37.5%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.aboutUsBanner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background-color: #c41218;
  box-sizing: unset;
}

.aboutUsBannerText {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  font-size: 30px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.footerSection {
  position: absolute;
  width: 100%;
  background-color: #f4f4f6;
  padding-bottom: 0;
  margin-top: 40px;
  font-family: 'Sarabun', sans-serif;
}

.footerContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 4px;
  padding-right: 4px;
}

.footerInformation {
  width: 66.666667%;
  margin-bottom: 0px;
  padding-left: 12px;
  margin-right: 12px;
}

.footerDateMobile {
  display: none;
}

.footerDateDesktop {
  display: block;
}

.facebookLogo {
  margin-top: 0px;
}

.footerLink {
  --text-opacity: 1;
  color: #6d6e71;
  color: rgba(109, 110, 113, var(--text-opacity));
  text-decoration: none;
}
.footerLink:hover {
  --text-opacity: 1;
  color: #919191;
  color: rgba(145, 145, 145, var(--text-opacity));
  text-decoration: none;
}

.nav-margin {
  margin-top: 48px;
}

/* xl */
@media only screen and (min-width: 1280px) {
  .facebookLogo {
    margin-top: 20px;
  }
}

/* lg */
@media only screen and (min-width: 1024px) {
  .footerContainer {
    padding-left: 64px;
    padding-right: 64px;
  }
  .aboutUsBanner {
    width: 100%;
    padding-top: 20%;
  }
  .footerInformation {
    margin-bottom: 0px;
  }
  .facebookLogo {
    margin-top: 16px;
  }
}

/* md */
@media only screen and (min-width: 768px) {
  .footerInformation {
    margin-bottom: 16px;
  }
  .nav-margin {
    margin-top: 64px;
  }
}

/* xs */
@media only screen and (min-width: 475px) {
  .footerDateMobile {
    display: block;
  }
  .footerDateDesktop {
    display: none;
  }
}