/*******************************/
/*         HERO SLIDER         */
/*******************************/

.section-hero {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: calc(100vw / 1.5);
  text-align: center;
}

.hero-overlay-header {
  color: var(--color-white);
  font-size: 5rem;
  z-index: 10;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slider {
  max-width: 100rem;
  height: 50rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.slide>img {
  /* Only for images that have different size than slide */
  width: 100vw;
  height: calc(100vw / 1.5);
  object-fit: cover;
}

.slider__btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  border: none;
  background-color: rgba(3, 3, 3, 0.25);
  color: var(--color-white);
  border-radius: 50%;
  height: 74px;
  width: 74px;
  cursor: pointer;
}

.slider__btn--left {
  left: 6%;
  background-image: url(../img/icons/prev.png);
  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 6%;
  background-image: url(../img/icons/next.png);
  transform: translate(50%, -50%);
}

.dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #b9b9b9;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;

  /* Only necessary when overlying images */
  /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  background-color: #fff;
  /* background-color: #888; */
  opacity: 1;
}

/*******************************/
/*            HEADER           */
/*******************************/

.header {
  position: relative;
  /* top: 89.6rem; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-primary);

  /* Because we want header to be sticky later */
  height: 9.6rem;
  padding: 0 4.8rem;
}

.sticky .header {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 4;
  background-color: var(--color-white);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.3);
}

.sticky .navbar-brand,
.sticky .main-nav-link:link,
.sticky .main-nav-link:visited {
  color: var(--color-primary);
}

.sticky .main-nav-link.nav-bth:link,
.sticky .main-nav-link.nav-bth:visited {
  background-color: var(--color-bth);
  color: var(--color-white);
}

/*******************************/
/*         NAVIGATION          */
/*******************************/

.navbar-brand {
  font-size: 3rem;
  height: 3.2rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-white);
  text-transform: uppercase;
}

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: var(--color-white);
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: var(--color-primary-darker);
}

.main-nav-link.nav-bth:link,
.main-nav-link.nav-bth:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color: #333;
  background-color: var(--color-white);
}

.main-nav-link.nav-bth:hover,
.main-nav-link.nav-bth:active {
  box-shadow: 0 2.4rem 4.8rem rgba(139, 46, 36, 0.5);
}

/* mobile only */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/*******************************/
/*        ABOUT SECTION        */
/*******************************/

.section-about {
  padding: 9.6rem 0;
}

.about-text-box {
  font-size: 1.8rem;
  line-height: 1.8;
}

.about-img-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-img {
  width: 100%;
}

/*******************************/
/*     LEARNING SECTION        */
/*******************************/

.section-learning {
  padding: 4.8rem;
  background-color: var(--color-primary);
}

.learning-container {
  border: 1px solid var(--color-white);
  border-radius: 8px;
  margin-bottom: 3rem;
  background-color: var(--color-white);
}

.learning-container-header {
  display: flex;
  align-items: center;
  flex-flow: wrap;
}

.learning-container-header .heading-tertiary {
  padding: 2rem 0 0 2rem;
}

.learning-logo {
  height: 80px;
  width: 80px;
}

.course-card {
  display: grid;
  grid-template-rows: 11.25rem, 8.75rem, 1.5rem, 1.5rem;
  grid-template-areas: "img" "title" "stats" "StDur";
  width: 20rem;
  height: 26rem;
  box-shadow: var(--box-shadow-card);
  border-radius: 11px;
  overflow: hidden;
  transition: all 400ms;
}

.course-card:hover {
  transform: translateY(-1.2rem);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

.course-card-img {
  grid-area: img;
  width: 20rem;
  height: 11.25rem;
  aspect-ratio: 16 / 9;
}

.course-card-title {
  grid-area: title;
  width: 20rem;
  height: 8.75rem;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: #333;
  font-weight: 600;
  padding: 0.75rem 1.4rem;
}

.course-card-stats {
  grid-area: stats;
  width: 20rem;
  height: 1.5rem;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.5rem;
  color: #333;
  font-weight: 500;
  padding: 0.5rem;
}

.course-card-StDur {
  grid-area: StDur;
  width: 20rem;
  height: 1.5rem;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.5rem;
  color: #333;
  font-weight: 500;
  padding: 1rem 0.5rem 2rem 0.5rem;
}

/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */
.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 16rem);
  overflow-y: scroll;
  max-height: calc(100vh - 16rem);
  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
  pointer-events: all;
  cursor: pointer;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  overflow-y: scroll;
  z-index: 5;
}

.display-none {
  display: none;
}

.display-grid {
  display: grid;
}

.modal-course-Grid {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 16rem);
  max-height: calc(100vh - 16rem);
  overflow-y: scroll;
  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
  pointer-events: all;
  cursor: pointer;
  grid-template-columns: 50% 50%;
  grid-template-rows: 4rem, 2.5rem, auto, auto auto;
  row-gap: 1rem;
  grid-template-areas:
    "modal-title modal-title"
    "modal-stats modal-stdur"
    "model-List-L model-List-R"
    "model-List-L2 model-List-R2"
    "modal-List modal-List"
    "modal-resources modal-resources"
    "modal-keywords modal-keywords";
}

.modal-title {
  grid-area: modal-title;
  font-size: 2.4rem;
  height: 4rem;
}

.close-modal {
  grid-area: close-modal;
  position: absolute;
  top: 1.2rem;
  right: 2rem;
  font-size: 5rem;
  color: #333;
  cursor: pointer;
  border: none;
  background: none;
}

.modal-course-stats {
  grid-area: modal-stats;
}

.modal-course-stDur {
  grid-area: modal-stdur;

}

.modal-course-list-left {
  grid-area: model-List-L;
  margin-bottom: 2rem;
}

.modal-course-list-left2 {
  grid-area: model-List-L2;
  margin-bottom: 2rem;
}

.modal-course-list {
  grid-area: modal-List;
  margin-bottom: 2rem;
}

.modal-course-list-right {
  grid-area: model-List-R;
  margin-bottom: 2rem;
}

.modal-course-list-right2 {
  grid-area: model-List-R2;
  margin-bottom: 2rem;
}

.modal-course-list-left li,
.modal-course-list-left2 li,
.modal-course-list-right li,
.modal-course-list-right2 li,
.modal-course-list {
  font-size: 1.6rem;
  line-height: 2.2rem;
  padding: 0 5rem 0 0rem;
}

.modal-course-keywords {
  grid-area: modal-keywords;
}

.modal-course-stats,
.modal-course-stDur,
.modal-course-list-left h6,
.modal-course-list-right h6,
.modal-course-list-left2 h6,
.modal-course-list-right2 h6,
.modal-course-list h6,
.modal-course-keywords h6,
.modal-course-resources h6 {
  font-size: 1.8rem;
  line-height: 2.5rem;
}

.modal-course-keywords p {
  font-size: 1.6rem;
  margin: 1rem 0 3rem 0;
}

.modal-course-resources {
  grid-area: modal-resources;
}

.modal-course-btn-flex {
  display: flex;
  flex-flow: wrap;
  gap: 2rem;
  margin: 1rem 0 3rem 0;
}

/*******************************/
/*          BTH SECTION        */
/*******************************/

.section-bth {
  padding: 4.8rem;
  background-color: var(--color-bth);
  color: var(--color-dark-grey);
}

.section-bth .subheading {
  color: var(--color-dark-grey);
}

.bth-figure {
  border-radius: 11px;
  overflow: hidden;
  transition: all 400ms;
  box-shadow: var(--box-shadow-bth);
}

.bth-grid-img-right {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 5rem;
  margin: 9.6rem 0;
}

.bth-grid-img-left {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 5rem;
  margin: 9.6rem 0;
}

.bth-grid-img-right p,
.bth-grid-img-left p {
  font-size: 1.8rem;
  font-weight: 400;
  padding: 1rem 0;
  color: var(--color-dark-grey);
  line-height: 3rem;
  text-align: left;
}

.bth-grid-img-right ul,
.bth-grid-img-left ul {
  list-style: none;
  font-size: 1.6rem;
  font-weight: 400;
  padding: 1rem 0;
  color: var(--color-dark-grey);
  line-height: 3rem;
  text-align: left;
}

.bth-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bth-figure:hover {
  transform: translateY(-1.2rem);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

.bth-figure a:link,
.bth-figure a:visited {
  text-decoration: none;
}

.bth-figure figcaption {
  font-size: 1.8rem;
  line-height: 2.6rem;
  padding: 0.5rem 1rem;
  color: var(--color-dark-grey);
  text-align: center;
}

/*******************************/
/*       CONTACT SECTION       */
/*******************************/

.contact-container {
  background-color: #e74c3c;
  color: #fff;
  border-radius: 11px;
  max-width: 120rem;
  padding: 3.2rem;
  margin: 10rem auto;
}

.contact-container .subheading,
.contact-container .heading-secondary {
  color: #fff;
}

.contact-flex {
  display: flex;
  gap: 5rem;
  justify-content: center;
}

.contact-icon {
  width: 17rem;
}

.contact-icon img {
  max-width: 17rem;
  border-radius: 0.2rem;
}

.contactButton {
  color: #fff;
  font-size: 1.8rem;
  line-height: 3rem;
  padding: 1.8rem 2rem;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

.contactButton:hover {
  text-decoration: none;
  color: #e74c3c;
  background-color: #fff;
}

/*******************************/
/*       FOOTER SECTION        */
/*******************************/

.footer {
  padding: 4.8rem 0;
  border-top: 1px solid #eee;
  background-color: var(--color-dark-grey);
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #767676;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #555;
}