:root {
  --theme-color: #DB3D22;
  --theme-bg-color: #DB3D22;
  --theme-text-color: #DB3D22;
  --footer-wrapper: 2.5rem;
  --section-highlight-wrapper: 2.875rem;
}

html {
  min-width: 320px;
}

/* Theme */
.theme-text-color {
  color: var(--theme-text-color);
}

.theme-bg-color {
  background-color: var(--theme-bg-color);
}

/* Layout */
.page-wrapper {
  max-width: 1864px;
}

/* Header */
header {
  nav.navbar {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;

    .navbar-brand {
      img {
        height: 40px;
      }
    }

    .collapse {
      .navbar-nav {
        .nav-item {
          .nav-link {
            font-size: 1.125rem;
            color: white;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
          }
        }

        .nav-item.active {
          .nav-link {
            color: var(--theme-text-color);
          }
        }
      }
    }
  }

  .offcanvas {
    .offcanvas-body {
      .navbar-nav {
        .nav-item {
          border-bottom: 1px solid #9A9A9A;

          .nav-link {
            padding: 0.75rem 0;
            font-size: 1.125rem;
          }

          .nav-link.active {
            color: var(--theme-text-color);
          }

        }

        .nav-item:last-child {
          border-bottom: none;
        }
      }
    }
  }
}

/* Footer */
footer {
  .sitemap {
    font-size: 0.875rem;
    background-color: #EEEEEE;

    .sitemap-wrapper {
      padding: 2rem 0.75rem;
    }

    .sitemap-logo {
      height: 30px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }

    .sitemap-address {
      margin-top: 1rem;
    }

    .sitemap-qr-code {
      width: fit-content;
      margin: 0 auto;
      margin-top: 1.5rem;

      img {
        width: 180px;
        height: auto;
        max-width: 100%;
      }
    }
  }

  .copyright {
    font-size: 0.625rem;

    .copyright-wrapper {
      padding: 0.625rem 0.75rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;

      .right {
        margin-left: auto;

        .logo-complex {
          height: 32px;
          width: auto;
        }
      }
    }
  }
}

/* Button */


/* Section */
.section-artificial-intelligence {
  padding: var(--section-highlight-wrapper) 0;

  .section-text {
    font-size: 1.125rem;
    line-height: 1.556;
    margin: 0;
    margin-top: 2rem;
  }
}

.section-courses {
  background-color: #EBEBEB;
  padding-bottom: var(--section-highlight-wrapper);

  .program-course {
    padding: 1.25rem 0.75rem;
    position: relative;
    margin-top: -2.625rem;
    z-index: 2;

    .row {
      margin-top: 1.5rem;
      margin-right: -0.375rem;
      margin-left: -0.375rem;
    }

    .row>* {
      padding-right: 0.375rem;
      padding-left: 0.375rem;
    }

    .btn-all-course {
      width: 100%;
      color: white;
      background-color: #6C757D;
      border-radius: 38px;
      line-height: normal;
      margin-top: 1rem;
      padding: 0.5rem 1.375rem;
    }
  }
}

.section-synopsis {
  .section-content {
    position: relative;

    p {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      font-size: 1.5rem;
      margin: 0;
      padding: 3.5rem 0;

      .double-quote {
        /* font-size: 1.875rem; */
      }
    }
  }
}

/* Card */
.card-course-highlight {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 8px 0px;
  -webkit-box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 8px 0px;
  -webkit-transition: -webkit-box-shadow .25s;
  transition: -webkit-box-shadow .25s;
  transition: box-shadow .25s;
  transition: box-shadow .25s, -webkit-box-shadow .25s;
  cursor: default;
  margin-bottom: calc(0.375rem * 2);

  .card-image img {
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
  }

  .card-body {
    position: relative;
    padding: 0.875rem 0.625rem;
    min-height: 230px;

    .card-title {
      font-size: 1rem;
    }

    .card-brief {
      font-size: 0.875rem;
      margin: 0;
      margin-top: 0.5rem;
    }

    .btn {
      font-size: 0.875rem;
      position: absolute;
      right: 0.625rem;
      bottom: 0.875rem;
      color: white;
      background-color: var(--theme-bg-color);
      border-radius: 38px;
      line-height: normal;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
}

.card-course-highlight:hover {
  -webkit-box-shadow: 0 8px 17px 0 rgb(0 0 0 / 14%), 0 6px 20px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 8px 17px 0 rgb(0 0 0 / 14%), 0 6px 20px 0 rgb(0 0 0 / 12%);
}

/* Carousel */
.carousel-highlight {
  .carousel-inner {
    .carousel-item {
      position: relative;
      cursor: default;

      img {
        height: 100vh;
        object-fit: cover;
        object-position: center;
      }

      .container-xxl {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;

        .carousel-content {
          position: absolute;
          top: 10%;
          left: calc(var(--bs-gutter-x) * .5);
          right: calc(var(--bs-gutter-x) * .5);
          bottom: 10%;

          .carousel-keyword {
            font-size: 1.375rem;
            color: var(--theme-text-color);
          }

          .carousel-title {
            font-size: 2.125rem;
            margin-top: 1rem;
          }

          .carousel-note {
            position: absolute;
            right: 0;
            bottom: 1rem;
            width: 100%;
            background-color: white;
            padding: 1.5rem;

            p {
              margin: 0;
              font-size: 1.125rem;
            }
          }
        }
      }
    }

    .carousel-item::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: black;
      opacity: 0.85;
      z-index: 1;
    }
  }
}

/* Cookie Policy */
.cookie-policy {
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  align-items: center;
  padding: 20px;
  width: 100%;
  animation-name: slide-bar;
  animation-direction: normal;
  animation-duration: 900ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes slide-bar {
  from {
    transform: translateY(50px);
  }

  to {
    transform: translateY(0);
  }
}

.policy-banner {
  color: black;
  background-color: white;
  padding: 20px;
  opacity: 1;
  width: unset;
  max-width: 1280px;
  margin: 0 auto;
  border: 1px solid rgb(232, 232, 232);
  border-radius: 8px;
  box-shadow: rgb(0 0 0 / 10%) 0px 2px 8px 0px;
}

.policy-banner .policy-title {
  margin-bottom: 5px;
}

.policy-banner .policy-link {
  /* margin: 0 0.2em; */
  color: var(--theme-color);
}

.policy-btn .policy-btn-accept {
  width: 100%;
  background-color: var(--theme-color);
  border-radius: 10px;
  font-weight: 500;
  color: white;
  padding-left: 1rem;
  padding-right: 1rem;

  @media (min-width: 768px) {
    width: fit-content;
  }
}