:root {
  /* COLORS */
  --white: #fff;
  --c1: rgb(107, 114, 128);
  --c2: #4b5563;
  --loading-text-gradient: linear-gradient(
    90deg,
    transparent 0% 16.66%,
    #000 33.33% 50%,
    transparent 66.66% 75%
  );

  /* SIZES */
  --size-1: 1.5rem;
  --size-2: 1.6rem;
  --size-3: 1.7rem;
  --size-4: 2rem;
  --size-5: 2.5rem;
  --size-6: 3rem;
  --size-7: 3.5rem;

  --weight1: 500;
  --weight2: 600;
  --weight3: 700;
  --weight4: bolder;
}

@media (max-width: 991px) {
  html {
    font-size: 55%;
  }
  .signIn_form {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .home .home-content .content-desc h1 {
    font-size: 4rem;

    padding: 1rem;
    width: 100%;
  }
  .home .home-content .content-desc p {
    width: 70%;
  }
  .work .work-desc p {
    width: 90%;
    line-height: 3rem;
  }
  .support .support-us .support-contents p {
    width: 70%;
  }
  .close-nav {
    right: -12%;
    top: 2%;
  }
  .navbar.show {
    transform: scaleX(1);
  }
  header .header-container .header-nav {
    display: none;
  }
  .open-nav {
    font-size: var(--size-5);
    align-self: center;
    display: block;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    transition: 0.3s ease-in;
  }
  .open-nav:hover {
    background-color: var(--c1);
    color: var(--white);
  }
  section.contact {
    padding: 13rem 9%;
  }
  .footer-container {
    padding: 2rem;
  }
  section.about,
  section.path {
    padding: 13rem 9%;
    padding-bottom: 1%;
  }
  .foundation-container {
    padding: 2rem;
  }
  .choose-course::before,
  .choose-course::after {
    width: 20%;
  }
  .expect {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .signIn_form {
    width: 60%;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
  nav {
    width: 70%;
  }
  .home {
    height: 100vh;
  }
  .home img {
    height: 40vh;
  }
  .support .support-us .support-contents p {
    width: 100%;
  }
  section.contact {
    padding: 13rem 5%;
  }
  section.about,
  section.path {
    padding: 13rem 5%;
    padding-bottom: 1%;
  }
  .foundation-container .up-content .content {
    gap: 1rem;
  }
  .foundation-container .up-content .content .foundation-img img {
    width: 10rem;
  }
  .choose-course::before,
  .choose-course::after {
    width: 13%;
  }
  .signIn_form {
    width: 90%;
  }
  .course-bg {
    padding: 7rem 2.5rem;
  }
  .course .course-container .course-box {
    flex: 1 1 45rem;
    height: 30rem;
    width: 100%;
  }
}