* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Roboto", sans-serif;
  line-height: 1.5rem;
}

.nav {
  padding: 1rem;
  display: flex;
  align-items: center;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  top: 0;
  z-index: 1;
  justify-content: space-between;
}
@media (width <=700px) {
  .nav {
    position: fixed;
    width: 100%;
    padding: 1rem;
    justify-content: space-between;
  }
}
.logo {
  width: 4rem;
}
@media (max-width: 700px) {
  .logo {
    width: 2rem;
  }
}
.nav-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border: 1px solid rgb(39, 38, 38);
  align-items: center;
  padding: 0.5rem;
}
.nav-link {
  font-size: 0.9rem;
  text-decoration: none;
  color: rgb(188, 188, 188);
  display: block;
  transition: all 0.4s;
  &:hover {
    padding: 5px;
    border-radius: 0.5rem;
    background-color: rgb(41, 41, 41);
  }

  &:active {
    background-color: red;
  }
}
.btn {
  border: none;
  padding: 0.5rem 0.7rem;
  border-radius: 1rem;
  color: white;
  font-size: 1rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background: rgb(76, 200, 0);
  background: linear-gradient(
    90deg,
    rgba(76, 200, 0, 1) 0%,
    rgba(13, 7, 44, 1) 100%
  );
  transition: all 0.4s;
  &:not(:last-child) {
    margin-right: 1rem;
  }
  &:hover {
    transform: translateX(2px);
  }
  &:active {
    transform: translateY(-1px);
  }
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(10, 56, 47);
  background: linear-gradient(
    90deg,
    rgba(10, 56, 47, 0.6434471493675595) 0%,
    rgba(13, 7, 44, 1) 100%
  );
}

.banner {
  background-image: url("image/bg.jpg");
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;

  .banner-content {
    z-index: 2;
    flex-direction: row;
    margin-top: 5rem;
    padding: 2rem;

    .banner-content-left {
      .banner-heading {
        width: 40%;
        margin-top: 1rem;
        background: rgb(255, 255, 255);
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.6434471493675595) 0%,
          rgba(171, 171, 171, 1) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 3rem;
        line-height: 3rem;
      }

      .banner-text {
        background: rgb(252, 162, 39);
        background: linear-gradient(
          90deg,
          rgba(252, 162, 39, 0.6434471493675595) 0%,
          rgba(229, 219, 219, 0.999189446286327) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border: 1px solid grey;
        padding: 1rem;
        width: 50%;
        font-size: 1.5rem;
        line-height: 2rem;
        margin-top: 2rem;
        transition: all 0.4s;
        &:hover {
          transform: scale(1.02);
        }
      }
      .btn-explore {
        margin-top: 2rem;
        width: 7rem;
        text-decoration: none;
        background: rgb(76, 200, 0);
        background: linear-gradient(
          90deg,
          rgba(76, 200, 0, 1) 0%,
          rgba(13, 7, 44, 1) 100%
        );
        display: block;
        transition: all 0.4s;
        position: relative;
        &:hover {
          color: white;
          transform: translateY(-0.3rem);
          box-shadow: 0 1.2rem 2rem rgba(black, 0.7);
          &::after {
            opacity: 0;
            transform: scaleX(1.4) scaleY(1.6);
          }
        }
        &::after {
          content: "";
          width: 100%;
          height: 100%;
          border-radius: 10rem;
          position: absolute;
          background-color: green;
          top: 0;
          left: 0;
          z-index: -1;
          display: inline-block;
          transition: all 0.4s;
        }
      }
    }
    .banner-content-right {
      width: 60%;
      .banner-figure {
        width: 40rem;
        height: 30rem;
        .banner-figure-image {
          width: 100%;
          height: 100%;

          object-fit: contain;
        }
      }
    }
  }
  @media (max-width: 700px) {
    .banner-content {
      flex-direction: column;
      margin-top: 6rem;
      padding: 1rem;
      .banner-content-left {
        .banner-heading {
          width: 100%;
          margin-top: 1rem;
          font-size: 2.5rem;
          margin-bottom: 4rem;
        }
        .banner-text {
          width: 100%;
        }
      }
    }
  }
}

.section {
  width: 100%;
}
.section-1 {
  padding-top: 1.5rem;
  background-image: url("image/sec2.jpg");
  background-size: cover;
  .section-1-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    z-index: 2;
    .section-1-title {
      color: white;
      margin-top: 3rem;
      margin-bottom: 2rem;
    }
    .section-1-box {
      display: flex;
      justify-content: center;
      width: 100%;
      .section-1-left::before {
        content: "";
        top: 2rem;
        left: 0;
        width: 1rem;
        height: 70%;
        background-color: white;
        position: absolute;
      }
      .section-1-left {
        position: relative;
        border: 1px solid grey;
        padding: 2rem;
        width: 50%;
        background-size: cover;
        background: rgb(1, 10, 7);
        background: linear-gradient(
          90deg,
          rgba(1, 10, 7, 0.6434471493675595) 0%,
          rgba(0, 30, 34, 0.7582930877429097) 100%
        );
        .section-1-text {
          font-family: arial;
          line-height: 1.5rem;
          color: white;
        }
        .students {
          margin: 1rem 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .capacity {
            color: orange;
            font-size: 1.4rem;
            text-align: center;
            margin-bottom: 1rem;
          }
          .students-group {
            display: flex;
            justify-content: center;
            gap: 2rem;
            width: 100%;
          }
          .item {
            display: flex;
            padding: 1rem;
            flex-direction: column;
            align-items: center;
            width: 8rem;
            height: 8rem;
            background-color: white;
            transition: all 0.4s;
            .text {
              font-size: 1.2rem;
              color: black;
              margin-bottom: 1rem;
              border-bottom: 1px solid grey;
            }
            .number {
              font-size: 1.5rem;
              font-weight: bolder;
            }
            &:hover {
              transform: scale(1.1);
              padding: 2rem;
              outline: 1px solid orange;
            }
          }
        }
      }
      .section-1-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 40%;
        background-color: rgba(255, 255, 255, 0.781);
        padding: 1rem;
        .box {
          border: 1px solid grey;
          padding: 0.5rem;
          margin-bottom: 1rem;
          .head {
            font-size: 1.2rem;
            color: rgb(242, 159, 5);
          }
          .title {
            font-size: 1rem;
            margin: 1rem 0;
          }
          .time {
            font-size: 0.8rem;
          }
          .location {
            font-size: 0.8rem;
          }
          .icon {
            font-size: 1.2rem;
            color: orange;
            margin-top: 7px;
          }
          .instructor {
            font-family: roboto;
            color: black;
            padding: 0 4px;
          }
        }
      }
    }
  }
  @media (max-width: 700px) {
    .section-1-content {
      padding: 1rem;
      .section-1-title {
        color: white;
        margin-top: 3rem;
        margin-bottom: 2rem;
      }
      .section-1-box {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        .section-1-left::before {
          width: 0.5rem;
        }
        .section-1-left {
          width: 100%;
          height: 100%;
          .section-1-text {
            font-family: arial;
            line-height: 1.5rem;
            color: white;
          }
          .students {
            .capacity {
              color: orange;
              font-size: 1rem;
            }
            .students-group {
              display: flex;
              justify-content: start;
              gap: 1rem;
            }
            .item {
              padding: 2rem;
              width: 5rem;
              height: 6rem;
              background-color: white;

              transition: all 0.4s;
              .text {
                font-size: 0.8rem;
                color: black;
                margin-bottom: 1rem;
                border-bottom: 1px solid grey;
              }
              .number {
                font-size: 1rem;
                font-weight: bolder;
              }
              &:hover {
                transform: scale(1);
                padding: 1rem;
                outline: 1px solid orange;
              }
            }
          }
        }
        .section-1-right {
          margin-top: 1rem;
          width: 100%;
          .box {
            .head {
              font-size: 1rem;
            }
            .icon {
              font-size: 1rem;
            }
          }
        }
      }
    }
  }
}
.section-2 {
  height: 30rem;
  padding-top: 6rem;
  background-image: url("image/grey.jpg");
  background-size: cover;
  .heading {
    color: black;
    text-align: center;
    margin-bottom: 3rem;
  }
  .price-box {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    .price-box-item {
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      transition: all 0.4s;
      margin-right: 1rem;
      padding: 1rem;
      height: auto;
      &:not(:hover) {
        transform: scale(0.9);
      }
      &:hover {
        transform: scale(1.1);
      }
      .money {
        color: orange;
        font-size: 1.5rem;
        margin-bottom: 1rem;
      }
      .price {
        color: black;
        font-family: roboto;
        margin-left: 1rem;
      }
      .info {
        color: orange;
        font-size: 1.5rem;
        display: flex;
      }
      .details {
        color: black;
        margin-left: 1rem;
        font-family: roboto;
        font-size: 1rem;
        line-height: 1.5rem;
      }
      .title {
        transition: all 0.4s;
        text-align: center;
        font-size: 1.2rem;
        margin-bottom: 2rem;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
@media (max-width: 700px) {
  .section-2 {
    height: 100%;
    padding-top: 6rem;
    .heading {
      margin-bottom: 1rem;
    }
    .price-box {
      padding: 1rem;
      grid-template-columns: repeat(1, auto);
      .price-box-item {
        .money {
          color: orange;
          font-size: 1.5rem;
          margin-bottom: 1rem;
        }
        .price {
          font-size: 1.2rem;
        }
        .info {
          font-size: 1.5rem;
        }
        .details {
          font-size: 1rem;
          line-height: 1.5rem;
        }
        .title {
          transition: all 0.4s;
          text-align: center;
          font-size: 1.2rem;
          margin-bottom: 2rem;
          &:hover {
            text-decoration: underline;
            padding: 1rem;
          }
        }
      }
    }
  }
}
.section-3 {
  height: 30rem;
  background-color: rgb(246, 247, 248);
  padding-top: 6rem;
  .heading {
    text-align: center;
    margin-bottom: 2rem;
  }
  .review-box {
    position: relative;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin: 0 auto;
    width: 35rem;
    padding: 2rem;
    display: flex;
    .avatar {
      width: 30rem;

      .figure {
        width: 3rem;
        height: 3rem;
      }
      .image {
        border-radius: 100%;
        width: 100%;
        height: 100%;
      }
      .name {
        font-size: 1rem;
      }
      .social {
        display: flex;
        gap: 0.5rem;
      }
    }
    .text {
      text-align: justify;
    }
    &:hover {
      &::after {
        width: 100%;
      }
    }
    &::after {
      position: absolute;
      content: "";
      height: 0.5rem;
      width: 0;
      top: 0;
      left: 0;
      transition: all 0.5s;
      background-color: orange;
    }
  }
}
@media (max-width: 700px) {
  .section-3 {
    height: 100%;
    background-color: rgb(246, 247, 248);
    padding: 6rem 1rem 0 1rem;
    .heading {
      text-align: center;
      margin-bottom: 1rem;
    }
    .review-box {
      position: relative;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      margin: 0 auto;
      width: 100%;
      padding: 2rem;
      .avatar {
        .figure {
          margin-right: 1rem;
        }
      }
      .text {
        text-align: left;
      }
    }
  }
}

.gallery {
  height: 100%;
  width: 100%;
  background-color: rgb(246, 247, 248);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6rem 1.5rem 0 1.5rem;
  gap: 0.5rem;
  .gallery-item {
    width: 100%;
    height: 15rem;
    transition: all 0.4s;
    &:hover {
      transform: scale(1.1);
      padding: 1rem;
      outline: 1px solid yellow;
    }
  }
  .text {
    margin-bottom: 2rem;
    grid-column: 1 / span 3;
    text-align: center;
  }
  .gallery-img {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 700px) {
  .gallery {
    height: 100%;
    grid-template-columns: repeat(2, 1fr);
    .gallery-item {
      height: 100%;
    }
    .text {
      grid-column: 1 / span 2;
    }
  }
}
.section-5 {
  padding-top: 6rem;
  width: 100%;
  background-image: url("image/contact1.jpg");
  background-size: cover;
  .heading {
    text-align: center;
    margin-bottom: 2rem;
  }
  .contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    .message {
      padding: 2rem;
      background: rgb(10, 56, 47);
      background: linear-gradient(
        90deg,
        rgba(10, 56, 47, 0.6434471493675595) 0%,
        rgba(13, 7, 44, 1) 100%
      );
      .title {
        color: white;
        margin-bottom: 1rem;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        .input {
          color: white;
          padding: 0.5rem;
          background: none;
          border-bottom: 1px solid rgb(235, 234, 234);
          transition: all 0.4s;
          border-left: none;
          border-top: none;
          border-right: none;
          &::placeholder {
            color: white;
          }
          &:focus {
            outline: none;
            border-bottom: 1px solid rgb(181, 179, 179);
          }
        }
        .body {
          height: 5rem;
        }
      }
      .btn-submit {
        border: none;
        color: white;
        background-color: orange;
        transition: all 0.4s;
        margin-top: 0.5rem;
        padding: 1rem;
        &:hover {
          background-color: rgb(212, 141, 9);
        }
      }
    }
    .contact-us {
      background-color: rgba(255, 255, 255, 0.822);
      padding: 1rem;
      .title {
        color: orange;
      }
      .information {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        .fa {
          display: flex;
          gap: 1rem;
        }
      }
    }
  }
}
@media (max-width: 700px) {
  .section-5 {
    padding-top: 6rem;

    .contact-form {
      grid-template-columns: repeat(1, auto);
      .message {
        padding: 2rem;
      }
      .contact-us {
        padding: 2rem;
        .information {
          margin-top: 2rem;
          display: flex;
          flex-direction: column;
          gap: 2rem;
          .fa {
            display: flex;
            gap: 1rem;
          }
        }
      }
    }
  }
}
.footer {
  padding: 2rem 1rem 0 1rem;
  height: 5rem;
  background: rgb(10, 56, 47);
  background: linear-gradient(
    90deg,
    rgba(10, 56, 47, 0.6434471493675595) 0%,
    rgba(13, 7, 44, 1) 100%
  );
  color: white;
  align-items: center;
  display: flex;
  justify-content: space-between;
  .copyright {
    font-size: 0.9rem;
  }
  .logo {
    .img {
      width: 100%;
      width: 100%;
    }
  }
  .links {
    display: flex;
    gap: 1rem;

    .link {
      text-decoration: none;
      color: white;
      transition: all 0.4s;
      &:hover {
        color: rgb(205, 202, 202);
        text-decoration: underline;
      }
    }
  }
}
@media (max-width: 700px) {
  .footer {
    padding: 2rem 1rem 0 1rem;
    height: 100%;
    background: rgb(10, 56, 47);
    background: linear-gradient(
      90deg,
      rgba(10, 56, 47, 0.6434471493675595) 0%,
      rgba(13, 7, 44, 1) 100%
    );
    color: white;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .copyright {
      font-size: 0.9rem;
    }
    .logo {
      .img {
        width: 100%;
        width: 100%;
      }
    }
    .links {
      display: flex;
      gap: 1rem;

      .link {
        text-decoration: none;
        color: white;
        transition: all 0.4s;
        &:hover {
          color: rgb(205, 202, 202);
          text-decoration: underline;
        }
      }
    }
  }
}