style.scss

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

img {
  user-select: none;
}
/* Variables */
$green: #0eb582;
$light-green: #f0fdfa;
$light-color: #777;
$light-white: #eee;
$black: #444;
$white: #fff;
$border: 0.25rem solid rgba(33, 125, 90, 0.767);

/* Mixins */
@mixin grid($val) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($val, 1fr));
  gap: 2rem;
}

@mixin titleText($titleSize) {
  font-size: $titleSize;
  text-transform: capitalize;
  color: $black;
}

@mixin graphText($graphSize) {
  font-size: $graphSize;
  line-height: 2;
  color: $light-color;
}

/* Global Styles */
* {
  font-family: "Nunito", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  transition: all 0.2s linear;
}

html {
  font-size: 62.5%; // 2.5% of the default 16px = 10px, used for rem calculations
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: 1rem;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: $green;
  }
}

section {
  padding: 5rem 10%;
}

.heding-link {
  text-align: center;
  background-color: $light-green;
  background-size: cover;
  background-position: center;
  h3 {
    @include titleText(4rem);
  }
  p {
    @include graphText(2rem);

    a {
      color: $green;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.heading {
  text-align: center;
  margin-bottom: 3rem;
  @include titleText(3.5rem);
}

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 3rem;
  font-size: 1.8rem;
  border: $border;
  background: $light-green;
  color: $green;
  align-content: center;
  text-transform: capitalize;
  &:hover {
    color: $white;
    background: $green;
    cursor: pointer;
  }
}
/* Header Section */

.header {
  background-color: $white;
  position: sticky;
  top: 0;
  padding: 2rem 10%;
  display: flex;
  align-items: center;
  z-index: 1000;
  .logo {
    margin-right: auto;
    @include titleText(2.5rem);
    font-weight: bolder;
    i {
      color: $green;
    }
  }
  .navbar a {
    margin-right: 2rem;
    @include titleText(2rem);
    &:hover {
      color: $green;
      text-decoration: underline;
    }
  }
  .navbar {
    a {
      margin-right: 2rem;
      @include titleText(2rem);
    }
    #closed-navbar {
      display: none;
    }
  }
  .icons div {
    cursor: pointer;
    font-size: 2.5rem;
    color: $black;
    margin-left: 2rem;
    &:hover {
      color: $green;
    }
  }
  #menu-btn {
    display: none;
  }
}

// proprties on Account section

.account-form {
  position: fixed;
  top: 0;
  right: -105%;
  width: 35rem;
  background: $white;
  display: flex;
  flex-flow: column;
  gap: 2rem;
  justify-content: center;
  height: 100%;

  z-index: 1200;
  padding: 2rem;
  text-align: center;

  &.active {
    right: 0;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
  }

  #closed-form {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-size: 3rem;
    color: $black;
    //    display: none;
    &:hover {
      cursor: ponter;
      transform: rotate(90deg);
    }
  }
  form {
    border: $border;
    padding: 2rem;
    display: none;

    &.active {
      display: block;
    }

    h3 {
      @include titleText(2.5rem);
      text-transform: uppercase;
      padding-bottom: 0.5rem;
    }
  }
  .box {
    width: 100%;
    padding: 1.2rem 1.4rem;
    border: $border;
    font-size: 1.6rem;
    margin: 0.7rem 0;
  }
  .flex {
    padding-top: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    label {
      font-size: 1.5rem;
      color: $light-color;
      cursor: pointer;
    }
    a {
      font-size: 1.5rem;
      color: $light-color;
      margin-left: auto;
      &:hover {
        text-decoration: underline;
        color: $green;
      }
    }
    .btn {
      width: 100%;
    }
  }
  .buttons .btn {
    margin-left: 20px;
    background: $green;
    color: $white;
  }
  .sub_btn {
    margin-left: 50px;
  }
}
.home {
  padding: 0;
  .slide {
    display: flex;
    align-items: center;
    height: 60rem;
    background-size: cover !important;
    background-position: center !important;
  }
  .content {
    width: 50rem;
    h3 {
      @include titleText(5.5rem);
      color: black;
    }
    p {
      @include graphText(1.6rem);
      color: rgba(0, 0, 0, 0.699);
      padding: 1rem 0;
    }
  }
}
.home .slide .content h3 {
  font-size: 3rem;
}

.swiper-pagination-bullet-active {
  background: $green;
}
// on subjets section

.subjects {
  .box-contain {
    @include grid(16rem);

    .box {
      padding: 3rem 2rem;
      text-align: center;
      border: $border;
      background: $light-green;
      cursor: pointer;
      &:hover {
        background: $green;

        h3 {
          color: $white;
        }
        p {
          color: $light-white;
        }
      }
      img {
        height: 8rem;
        margin-bottom: 0.7rem;
      }

      h3 {
        @include titleText(1.7rem);
        padding: 0.5rem 0;
      }

      p {
        @include graphText(1.5rem);
      }
    }
  }
}
// properties on home-courses section

.home-course {
  .slide {
    text-align: center;
    position: relative;
    width: 30rem;
    background: $light-green;
    overflow: hidden;
    &:hover .content {
      bottom: 0;
    }
    .image {
      padding: 2rem;
      img {
        width: 100%;
        margin-bottom: 1.5rem;
        height: 20rem;
        width: 20rem;
      }
      h3 {
        @include titleText(2rem);
      }
    }
    .content {
      background: $green;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -100;

      h3 {
        @include titleText(2rem);
        color: $white;
      }
      p {
        padding: 1rem 0;
        @include graphText(1.5rem);
        color: $light-white;
      }
      .btn:hover {
        background: $black;
      }
    }
  }
}
// properties on about section
.about {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  .images {
    flex: 1 1 40rem;

    img {
      width: 100%;
      clip-path: inset(0 0 50px 0); /* top right bottom left */
    }
  }

  .content {
    flex: 1 1 40rem;

    .about-title {
      margin-top: -5rem;
      @include titleText(3rem);
    }

    p {
      @include graphText(1.5rem);
      padding: 1rem 0;
    }
    .icons-container {
      margin-top: 1rem;
      @include grid(16rem);
      .icons {
        border: $border;
        background: $light-green;
        flex: 1 1 16rem;
        text-align: center;
        padding: 3rem 2rem;

        img {
          height: 8rem;
          margin-bottom: 0.5rem;
        }
        h3 {
          padding: 0.5rem 0;
          @include titleText(3rem);
        }
        span {
          @include graphText(1.5rem);
        }
      }
    }
  }
}
// properties on teachers section

.teachers {
  .slide {
    text-align: center;
    width: 30rem;
    &:hover {
      .image {
        img {
          background: $green;
        }
        .share {
          bottom: 0;
        }
      }
    }
    .image {
      position: relative;
      overflow: hidden;
      img {
        background: $light-green;
        width: 100%;
      }
      .share {
        position: absolute;
        bottom: -10;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        padding: 2rem;
        a {
          font-size: 3rem;
          margin: 0 1rem;
          color: white;
          &:hover {
            color: $green;
          }
        }
      }
    }
    .content {
      display: flex;
      padding-top: 2rem;
      align-items: center;
      justify-content: space-between;

      h3 {
        @include titleText(2rem);
      }

      span {
        @include graphText(1.5rem);
      }
    }
  }
}
// proprties on review section

.reviews {
  .slide {
    text-align: center;
    width: 30rem;
    p {
      @include graphText(1.5rem);
      position: relative;
      background: $light-green;
      border: $border;
      margin-bottom: 3rem;
      padding: 2rem;
      &::before {
        content: "";
        position: absolute;
        bottom: -1.2rem;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        background: $light-green;
        border-bottom: $border;
        border-right: $border;
        height: 2rem;
        width: 2rem;
      }
    }
    img {
      width: 7rem;
      height: 7rem;
      border-radius: 50%;
    }
    h3 {
      @include titleText(2.2rem);
      padding: 0.5rem 0;
    }
    .stars {
      font-size: 1.2rem;
      color: $green;
    }
  }
}

// properties on courses section

.courses {
  .box-container {
    @include grid(30rem);
    .box {
      &:hover .image img {
        transform: scale(1.1);
      }

      &.hide {
        display: none;
      }

      .image {
        height: 25rem;
        overflow: hidden;
        position: relative;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
        h3 {
          @include titleText(1.5rem);
          position: absolute;
          top: 1rem;
          left: 0rem;
          padding: 0.5rem 1.5rem;
          background: $white;
        }
      }
      .content {
        padding: 2rem;
        text-align: center;

        border: $border;

        h3 {
          @include titleText(2rem);
        }
        p {
          padding: 1rem 0;
          @include graphText(1.5rem);
        }
        .icons {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 2rem;
          padding-top: 2rem;
          border-top: $border;

          span {
            @include titleText(1.5rem);
            i {
              color: $green;
              padding-right: 0.5rem;
            }
          }
        }
      }
    }
  }
  .load-more {
    margin-top: 2rem;
    text-align: center;
  }
}

// properties on contact section
.contact {
  .icons-container {
    margin-bottom: 2rem;
    @include grid(25rem);
    .icons {
      text-align: center;
      padding: 3rem 2rem;
      border: $border;
      background: $light-green;
      i {
        height: 6rem;
        width: 6rem;
        line-height: 6rem;
        font-size: 2rem;
        border-radius: 50%;
        margin-bottom: 0.5rem;
        background: $green;
        color: $white;
      }
      h3 {
        @include titleText(2rem);
        padding: 0.5rem 0;
      }
      p {
        @include graphText(1.5rem);
      }
    }
  }
  .contact-container {
    margin-top: 6rem;
    height: 50rem;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10rem;
    flex-wrap: wrap; /* Wrap elements on smaller screens */

    img {
      height: 50rem;
      width: 100%;
      max-width: 100%;
      object-fit: cover;
    }

    .box_container {
      border: $border;
      padding: 2rem;
      width: 40%;
      height: auto; /* Auto height for responsiveness */
      background: $light-white;
      position: relative;

      .box {
        margin-bottom: 1rem;
      }

      .box_cs {
        width: 100%;
        font-size: 1.6rem; /* Slightly smaller font for better scaling */
        border: $border;
        padding-left: 0.5rem;
        height: 4rem; /* Ensure consistent height for inputs */
      }

      .msg {
        height: 15rem; /* Adjusted message box height for smaller screens */
        resize: vertical; /* Allow resizing vertically */
      }

      .submit {
        margin-top: 1rem;
        position: relative; /* Better positioning for responsive layout */
        input {
          width: 100%;
          padding: 1rem;
          font-size: 1.8rem;
          background-color: $primary-color; /* Customize the button color */
          color: #fff;
          border: none;
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background-color: darken($primary-color, 10%);
          }
        }
      }
    }
  }

  // proprties on Footer section

  .footer {
    background: $light-green;
    .box-container {
      @include grid(25rem);
      .box {
        h3 {
          @include titleText(2.2rem);
          padding: 1rem 0;

          i {
            color: $green;
          }
        }
        .link {
          @include graphText(1.7rem);
          padding: 0.5rem 0;
          display: block;
          &:hover {
            color: $green;
            text-decoration: underline;
          }
        }
        p {
          @include graphText(1.5rem);
          padding: 1rem 0;
        }
        .email {
          width: 100%;
          padding: 1.2rem 1.4rem;
          font-size: 1.6rem;
          border: $border;
          margin-bottom: 1rem;
        }
        .share {
          margin-top: 1rem;
          text-align: center;
          a {
            height: 4.5rem;
            width: 4.5rem;
            line-height: 4.5rem;
            font-size: 1.7rem;
            color: $white;
            background-color: $green;
            margin-right: 0.3rem;

            &:hover {
              background-color: $black;
            }
          }
        }
      }
    }
    .credit {
      text-align: center;
      margin-top: 3rem;
      padding-top: 3rem;
      @include titleText(2rem);
      border-top: $border;
      span {
        color: $green;
      }
    }
  }

  // Media queries
  @media (max-width: 1200px) {
    .header {
      padding: 2rem 5%;
    }
    section {
      padding: 5rem 10%;
    }
    .box-container {
      display: none;
    }
  }
  @media (max-width: 991px) {
    html {
      font-size: 55%;
    }
    .header {
      padding: 2rem;
    }
    section {
      padding: 3rem 2rem;
    }
  }
  @media (max-width: 768px) {
    .header {
      #menu-btn {
        display: inline-block;
      }
    }
    .navbar {
      position: fixed;
      top: 0;
      right: -105%;
      width: 30rem;
      background: $white;
      // box-shadow: 0 0  0 100vw rgba(0,0,0,.8);
      height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      &.active {
        box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
        right: 0;
      }
      a {
        display: block;
        margin: 1rem 0;
        text-align: center;
        font-size: 3rem;
      }
    }
    .contact-container {
      flex-direction: column;
      gap: 3rem;

      .box_container {
        width: 80%; /* Make the form container larger */
        padding: 1.5rem;
      }

      img {
        height: auto; /* Adjust the image height for smaller screens */
        width: 100%;
      }
    }
  }
  @media (max-width: 450px) {
    html {
      font-size: 50%;
    }
    .heading {
      font-size: 3rem;
    }
    .about .content .about-title {
      font-size: 4rem;
    }
    .contact-container {
      margin-top: 3rem;
      gap: 2rem;

      .box_container {
        width: 95%; /* Full width on mobile */
        padding: 1rem;
      }

      .box_cs {
        font-size: 1.4rem; /* Reduce font size on small devices */
        height: 3.5rem;
      }

      .msg {
        height: 10rem; /* Adjust the message box height */
      }

      .submit {
        input {
          padding: 0.8rem;
          font-size: 1.6rem;
        }
      }
    }
  }
}