:root {
  --primary-color: #0058d2;
  --sec-color: #ffc107;
  --third-color: #cce1ff7d;
  --white-color: #ffffff;
  --gray-color: #dee5ed;
  --title-color: #2d3e50;
  --description-color: #496583;
  --service-card-bg: #e5f0ff8a;
  --icon-color: #adb3b8;
  --rating-color: #ffd401;
  --gray-border-color: 1px solid #dee5ed;
  --main-border: 1px solid var(--primary-color);
  --border-top-header: #ffffff29;
  --social-border-header: #ffffff52;
  --hello-message-color: #ffffff1c;
  --login-color: #7c98b6;
}

@font-face {
  font-family: "Bahij TheSansArabic";
  src: url("https://db.onlinewebfonts.com/t/a85976799f11330f194b1dc04c954666.woff2")
    format("woff2");
}

body {
  font-family: Bahij TheSansArabic !important;
}

/* Utility Classes */
.bg-primary {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.bg-secondary {
  background-color: var(--sec-color);
  color: var(--white-color);
}

.title-border {
  border: 1px solid var(--primary-color) !important;
  width: 40px;
}

.border-bottom {
  border-bottom: 2px solid var(--primary-color) !important;
  width: 40px;
  margin-bottom: 24px;
}

.main-border {
  border: 1px solid var(--primary-color);
}

.border {
  border: var(--gray-border-color) !important;
}

.sec-padding {
  padding: 70px 0;
}

.mb-18 {
  margin-bottom: 18px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-0 {
  margin-top: 0px;
}

.margin-y-20 {
  margin: 20px 0;
}

.margin-y-32 {
  margin: 32px 0;
}

.margin-y-40 {
  margin: 40px 0;
}

.gap-24 {
  gap: 24px;
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.centered-main-btn {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  width: 100%;
}

.main-btn {
  background: var(--primary-color);
  color: var(--white-color);
  width: -webkit-fit-content;
  height: fit-content;
  padding: 15px 24px;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  transition-duration: 0.3s;

  /* Hover */
  &:hover {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
  }

  /* Disabled */
  &.disabled {
    border: none;
    background-color: #cce1ff7d;
    cursor: not-allowed;
    color: #adcfff;
  }
}

.sec-btn {
  background: var(--sec-color);
  color: var(--white-color);
  width: -webkit-fit-content;
  height: fit-content;
  padding: 15px 24px;
  border-radius: 8px;
  border: none;
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the icon and text */
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;

  /* Hover */
  &:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
  }
}

.white-btn {
  background: var(--white-color);
  color: var(--primary-color);
  width: -webkit-fit-content;
  height: fit-content;
  padding: 15px 24px;
  border-radius: 8px;
  border: none;
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the icon and text */
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;

  /* Hover */
  &:hover {
    background-color: transparent;
    border: 1px solid var(--white-color);
    font-weight: bold;
    transition: all 0.3s ease;
    color: var(--white-color);
  }
}

.third-btn {
  background: var(--third-color);
  color: var(--primary-color);
  width: -webkit-fill-content;
  height: fit-content;
  padding: 15px 24px;
  border-radius: 8px;
  border: none;
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the icon and text */
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.border-btn {
  background: var(--white-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  width: -webkit-fit-content;
  height: fit-content;
  padding: 15px 24px;
  border-radius: 8px;
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the icon and text */
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  transition-duration: 0.3s;

  &:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transition: all 0.3s ease;
    transition-duration: 0.3s;
  }
}

/* Hero */
.hero {
  position: relative;
  background-image: url("/imgs/bg-hero.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 40px 0 0 0;
  border-radius: 40px;
  margin: 0 100px;
  @media (max-width: 768px) {
    margin: 0 20px;
  }

  .container {
    position: relative;
  }
  .hero-title {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .hello-message {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px;
      border-radius: 8px;
      background-color: var(--hello-message-color);
      border: 1px solid var(--third-color);
      width: fit-content;

      .message-icon {
        background-color: var(--primary-color);
        padding: 6px;
        border-radius: 8px;

        svg {
          color: var(--white-color);
        }
      }

      p {
        color: var(--white-color);
        font-size: 16px;
        font-weight: 500;
      }
    }

    .hero-title-btns {
      display: flex;
      flex-direction: column;
      gap: 40px;

      .hero-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        z-index: 2; /* Ensure it sits above the overlay */
        position: relative;
        gap: 22px;
        /* padding-bottom: 200px; */
        h1 {
          color: var(--white-color);
          font-weight: 700;
          font-size: 44px;
          line-height: 1.6;
          max-width: calc(100% - 20%);
          margin-bottom: 0;

          @media (max-width: 768px) {
            font-size: 28px;
          }

          span {
            color: var(--sec-color);
          }
        }
        p {
          /* text-align: center; */
          font-size: 16px;
          color: var(--white-color);
          max-width: 550px;
          font-weight: 500;
        }
      }

      .hero-btns {
        display: flex;
        align-items: center;
        gap: 24px;

        .video-player {
          .video-btn {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--white-color);
            font-size: 16px;
            font-weight: 500;
            text-decoration: underline;
            transition: all 0.3s ease;
            cursor: pointer;

            .play-icon {
              width: 50px;
              height: 50px;
              background-color: var(--sec-color);
              border: 4px solid var(--white-color);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.3s ease;
            }

            &:hover {
              .play-icon {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }

  .items-hero {
    position: relative;
    .hero-img {
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .single-item-1 {
      position: absolute;
      top: 45%;
      right: 0;

      .item-text {
        position: absolute;
        top: 13px;
        bottom: 0;
        right: 59px;
        width: max-content;
        height: fit-content;
        z-index: 99;
        background-color: var(--white-color);
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 40px;
        padding: 10px;

        p {
          font-size: 16px;
          font-weight: bold;
          color: var(--title-color);
        }
      }
    }

    .single-item-2 {
      position: absolute;
      bottom: 25%;
      left: 40%;

      .item-icon {
        position: relative;
        z-index: 100;
        border-radius: 50%;
        border: 6px solid var(--white-color);
        width: fit-content;
        .the-svg {
          background-color: var(--primary-color);
          width: fit-content;
          padding: 8px;
          border-radius: 50%;
        }
      }

      .item-text {
        position: absolute;
        top: 13px;
        bottom: 0;
        right: 59px;
        width: max-content;
        height: fit-content;
        z-index: 99;
        background-color: var(--white-color);
        display: flex;
        align-items: center;
        gap: 12px;
        border-start-end-radius: 40px;
        border-end-end-radius: 40px;
        padding: 10px;

        html[dir="ltr"] & {
          border-start-end-radius: 0;
          border-end-end-radius: 0;
          border-end-start-radius: 40px;
          border-start-start-radius: 40px;
        }

        p {
          font-size: 16px;
          font-weight: bold;
          color: var(--title-color);
        }
      }
    }

    .single-item-3 {
      position: absolute;
      bottom: 10%;
      right: 32px;

      .item-icon {
        position: relative;
        z-index: 100;
        border-radius: 50%;
        border: 6px solid var(--white-color);
        width: fit-content;
        .the-svg {
          background-color: var(--primary-color);
          width: fit-content;
          padding: 8px;
          border-radius: 50%;
        }
      }

      .item-text {
        position: absolute;
        top: 13px;
        bottom: 0;
        right: 59px;
        width: max-content;
        height: fit-content;
        z-index: 99;
        background-color: var(--white-color);
        display: flex;
        align-items: center;
        gap: 12px;
        border-start-end-radius: 40px;
        border-end-end-radius: 40px;
        padding: 10px;

        html[dir="ltr"] & {
          border-start-end-radius: 0;
          border-end-end-radius: 0;
          border-end-start-radius: 40px;
          border-start-start-radius: 40px;
        }

        p {
          font-size: 16px;
          font-weight: bold;
          color: var(--title-color);
        }
      }
    }
  }
}

/* Sec Hero */
.sec-hero {
  position: relative;
  background-image: url("/imgs/sec-bg-hero.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 40px;
  padding: 110px 0;
  margin: 0 100px;

  @media (max-width: 768px) {
    margin: 0 20px;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background: #0058d2e5; /* Black overlay */
  }
  .container {
    position: relative;
  }
  .hero-title {
    .hero-text {
      position: relative;
      z-index: 9999 !important;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 20px;
      color: var(--white-color);

      h1 {
        font-size: 32px;
        font-weight: bolder;

        @media (max-width: 568px) {
          font-size: 24px;
        }
      }

      p {
        font-size: 12px;
        color: var(--white-color);
      }

      .pages {
        display: flex;
        align-items: center;
        gap: 8px;

        svg {
          color: var(--white-color);
        }

        .main-page {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
  }

  .items-hero {
    width: fit-content;
    height: fit-content;

    .hero-img {
      position: absolute;
      left: 24px;
      bottom: 0;
      top: 15px;

      img {
        object-fit: cover;
      }

      @media (max-width: 568px) {
        width: fit-content;
        height: 100%;
        top: 80px;
        bottom: 0;
        left: 16px;

        img {
          width: 250px;
        }
      }
    }
  }
}

/* ======================================================================================================================== */
/* Home Page */
/* ======================================================================================================================== */

/* Home Page */
.home-page {
  .services {
    .quran-program {
      position: relative;
      background-image: url(/imgs/quran-program.png);
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 20px;
      padding: 18px;
      height: 350px;

      .quran-text {
        display: flex;
        flex-direction: column;
        gap: 18px;

        .quran-title {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .name {
            font-size: 28px;
            font-weight: bolder;
            color: var(--white-color);
          }

          .description {
            font-size: 14px;
            font-weight: 500;
            color: var(--white-color);
          }
        }
      }

      .quran-img {
        position: absolute;
        bottom: 0;
        left: 0;

        html[dir="ltr"] & {
          -webkit-transform: scaleX(-1);
          left: auto;
          right: 0;
        }
      }

      @media (max-width: 768px) {
        margin-bottom: 32px;
      }
    }

    .service-card {
      background-color: var(--service-card-bg);
      border-radius: 16px;
      padding: 26px 0px;
      width: 100%;
      display: flex;
      justify-content: center;

      .card-img {
        max-width: 200px;
        height: 215px;
        position: relative;
        z-index: 1;

        img {
          width: 100%;
          height: 200px;
          object-fit: cover;
          border-radius: 16px;
        }
      }
      .card-text {
        position: absolute;
        background-color: var(--white-color);
        padding: 21px 24px;
        border-radius: 16px;
        bottom: 20px;
        width: calc(100% - 55px);
        z-index: 3;

        .text {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .title {
            font-size: 16px;
            font-weight: bolder;
            color: var(--title-color);
          }
          .students-count {
            display: flex;
            align-items: center;
            gap: 4px;

            p {
              font-size: 14px;
              font-weight: 500;
              color: var(--description-color);
            }
          }
        }

        .share {
          background-color: var(--primary-color);
          padding: 8px;
          border-radius: 50%;
          position: absolute;
          bottom: 12px;
          left: 12px;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          cursor: pointer;
          border: 2px solid transparent;
          box-shadow: 0 4px 15px rgba(0, 88, 210, 0.3);

          html[dir="ltr"] & {
            left: auto;
            right: 12px;
          }

          svg {
            color: var(--white-color);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            /* LTR SVG hidden by default (RTL mode) */
            &.ltr-icon {
              display: none;
            }
          }

          /* In LTR mode, show ltr-icon and hide rtl-icon */
          html[dir="ltr"] & {
            svg.ltr-icon {
              display: block;
            }

            svg.rtl-icon {
              display: none;
            }
          }

          &:hover {
            background-color: var(--white-color);
            border: 2px solid var(--primary-color);
            transform: scale(1);
            box-shadow: 0 8px 25px rgba(0, 88, 210, 0.4);

            svg {
              color: var(--primary-color);
              transform: rotate(-45deg);

              html[dir="ltr"] & {
                transform: rotate(45deg);
              }
            }
          }
        }
      }
    }

    /* Swiper Navigation & Pagination */
    .buttons-swiper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 32px;

      .swiper-button-next,
      .swiper-button-prev {
        position: static;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--white-color);
        border: var(--gray-border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        margin: 0;

        &::after {
          display: none;
        }

        svg {
          width: 16px;
          height: 16px;
          color: var(--title-color);
          transition: all 0.3s ease;
        }

        &:hover {
          background-color: var(--primary-color);
          border-color: var(--primary-color);

          svg {
            color: var(--white-color);
          }
        }

        /* &.swiper-button-disabled {
          opacity: 0.5;
          cursor: not-allowed;
    
          &:hover {
            background-color: var(--white-color);
            border-color: #dee5ed;
    
            svg {
              color: var(--title-color);
            }
          }
        } */
      }

      .service-pagination {
        position: inherit;
        display: flex;
        align-items: center;
        gap: 6px;
        width: auto;

        .swiper-pagination-bullet {
          width: 8px;
          height: 8px;
          background-color: #dee5ed;
          opacity: 1;
          transition: all 0.3s ease;
          border-radius: 50%;
          margin: 0;

          &.swiper-pagination-bullet-active {
            background-color: var(--primary-color);
            width: 10px;
            height: 10px;
          }
        }
      }
    }
  }

  /* What We Offer Section */
  .what-we-offer {
    background-color: #e5f0ff8a;
  }

  /* Education Packages Section */
  .education-packages {
    .package-box {
      border: var(--gray-border-color);
      border-radius: 24px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      margin: 20px;

      &:hover {
        border: 1px solid var(--primary-color);
        border-top-width: 6px;

        .third-btn {
          background-color: var(--primary-color);
          color: var(--white-color);
        }
      }

      .subscribe-now {
        border: var(--gray-border-color);
        padding: 20px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .package-title {
          .the-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;

            h3 {
              font-size: 20px;
              font-weight: bold;
              color: var(--title-color);
              margin-bottom: 0;

              @media (max-width: 568px) {
                font-size: 16px;
              }
            }

            .disscount {
              background-color: var(--primary-color);
              color: var(--white-color);
              padding: 4px 8px;
              border-radius: 6px;
              font-size: 14px;
            }
          }

          .price-box {
            .description {
              font-size: 14px;
              font-weight: 500;
              color: var(--description-color);
              margin-bottom: 8px;
            }

            .the-price {
              display: flex;
              flex-direction: column;
              gap: 4px;

              .main-price {
                font-size: 16px;
                color: var(--title-color);
                span {
                  font-size: 28px;
                  font-weight: bolder;
                  color: var(--primary-color);
                }
              }
              .instead-of {
                p {
                  font-size: 14px;
                  color: var(--description-color);
                }
                span {
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }

      .package-notes {
        display: flex;
        flex-direction: column;
        gap: 14px;

        .single-item {
          display: flex;
          align-items: center;
          gap: 8px;

          svg {
            color: var(--primary-color);
            width: 20px;
            height: 20px;
          }

          p {
            font-size: 14px;
            font-weight: 500;
            color: var(--description-color);
          }
        }
      }
    }
    .buttons-swiper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 8px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 20%;

      .swiper-button-next,
      .swiper-button-prev {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--white-color);
        border: var(--gray-border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        margin: 0;

        &::after {
          display: none;
        }

        svg {
          width: 20px;
          height: 20px;
          color: var(--title-color);
          transition: all 0.3s ease;
        }

        &:hover {
          background-color: var(--primary-color);
          border-color: var(--primary-color);

          svg {
            color: var(--white-color);
          }
        }

        /* &.swiper-button-disabled {
              opacity: 0.5;
              cursor: not-allowed;
        
              &:hover {
                background-color: var(--white-color);
                border-color: #dee5ed;
        
                svg {
                  color: var(--title-color);
                }
              }
            } */
      }

      .swiper-button-next {
        position: absolute;
        left: 0px;
      }
      .swiper-button-prev {
        position: absolute;
        right: 0px;
      }
    }

    .packages-pagination {
      position: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: auto;
      margin-top: 20px;

      .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background-color: var(--gray-color);
        opacity: 1;
        transition: all 0.3s ease;
        border-radius: 50%;
        margin: 0;

        &.swiper-pagination-bullet-active {
          background-color: var(--primary-color);
          width: 10px;
          height: 10px;
        }
      }
    }
  }

  /* TOEFL Section */
  .toefl {
    background-color: var(--third-color);
    position: relative;

    .toefl-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: fit-content;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 32px;
      position: relative;
      z-index: 99999 !important;

      .text {
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        align-items: center;

        h4 {
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          color: var(--title-color);
          margin-bottom: 0;

          span {
            color: var(--primary-color);
          }

          @media (max-width: 768px) {
            font-size: 24px;
          }
        }

        p {
          font-size: 18px;
          font-weight: 500;
          color: var(--title-color);
          text-align: center;
          max-width: 750px;
          line-height: 180%;

          @media (max-width: 768px) {
            font-size: 14px;
          }
        }
      }

      img {
        width: 100%;
        height: 80px;
        object-fit: contain;

        @media (max-width: 768px) {
          height: 60px;
        }
      }
    }
  }
}

/* ======================================================================================================================== */
/* About Us Page */
/* ======================================================================================================================== */
.about-us-page {
  .start-journey {
    background-color: var(--service-card-bg);

    .journey-text {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 48px;

      @media (max-width: 992px) {
        margin-bottom: 0;
      }

      .journey-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;

        img {
          width: 115px;
          height: 50px;
          object-fit: cover;
          border-radius: 8px;

          @media (max-width: 568px) {
            width: 80px;
          }
        }

        p {
          font-size: 32px;
          font-weight: bolder;
          color: var(--title-color);

          @media (max-width: 568px) {
            font-size: 16px;
          }

          @media (max-width: 375px) {
            font-size: 14px;
          }
        }

        .journey-img {
          display: flex;
          align-items: center;

          .single-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid var(--white-color);
            margin: 0px -8px;

            @media (max-width: 568px) {
              width: 45px;
              height: 45px;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }

  .courses {
    background-image: url(/imgs/about-frame.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 130px 0 52px 0;
    margin-top: -120px;

    @media (max-width: 992px) {
      background-image: none;
      padding: 70px 0;
      margin-top: 0;
    }

    .single-course {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 0;

      @media (max-width: 568px) {
        gap: 12px;
      }

      .the-icon {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        padding: 20px;
        background-color: var(--border-top-header);
        display: flex;
        align-items: center;
        justify-content: center;

        @media (max-width: 992px) {
          background-color: var(--primary-color);
        }

        @media (max-width: 568px) {
          width: 60px;
          height: 60px;
          padding: 12px;
        }

        svg {
          font-size: 55px;
          color: var(--white-color);
        }
      }

      .course-number {
        h3 {
          font-size: 32px;
          font-weight: bolder;
          color: var(--white-color);
          margin-bottom: 0;

          @media (max-width: 992px) {
            color: var(--title-color);
          }

          @media (max-width: 568px) {
            font-size: 18px;
          }
        }
        p {
          font-size: 16px;
          font-weight: 500;
          color: var(--white-color);

          @media (max-width: 992px) {
            color: var(--title-color);
          }

          @media (max-width: 568px) {
            font-size: 14px;
          }
        }
      }
    }
  }

  .about-students {
    @media (max-width: 992px) {
      padding: 0;
    }

    .student-opinion {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .student-photo {
        display: flex;
        align-items: center;
        gap: 20px;
        img {
          width: 70px;
          height: 70px;
          object-fit: cover;
          border-radius: 50%;
        }

        h4 {
          font-size: 16px;
          font-weight: bolder;
          color: var(--title-color);
        }

        p {
          font-size: 14px;
          font-weight: 500;
          color: var(--title-color);
        }
      }

      .the-opinion {
        display: flex;
        align-items: start;
        gap: 16px;
        border-radius: 8px;
        background-color: var(--service-card-bg);
        padding: 20px;
        height: 120px;

        svg {
          color: var(--third-color);
        }

        p {
          font-size: 14px;
          font-weight: 500;
          color: var(--title-color);
          max-width: 200px;
        }
      }
    }
  }
}

/* ======================================================================================================================== */
/* Educational Programs Page */
/* ======================================================================================================================== */

.educational-programs-page {
  .events-tabs {
    background-color: var(--service-card-bg);
    box-shadow: 0px 0px 10px 0px #0058d20a;
    margin: 0;

    .btn {
      &.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
      }
    }
  }

  .search {
    display: flex;
    padding: 7px;
    width: 100%;
    border: var(--gray-border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;

    .search-icon {
      background: var(--primary-color);
      /* width: 55px; */
      padding: 8px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        color: var(--white-color);
      }
    }

    input {
      flex: 1;
      border: none;
      padding: 0 15px;
      font-weight: bold;
      font-size: 14px;
      outline: none;

      @media (max-width: 1200px) {
        padding: 0;
      }
    }

    .search input::placeholder {
      color: var(--description-color);
    }
  }

  .tab-content {
    .assignment-card {
      margin: 12px 0;
      &:hover {
        border: 1px solid var(--primary-color);
        border-bottom-width: 5px;

        .assignment-text {
          transform: translateY(-240px);

          @media (max-width: 1024px) {
            transform: translateY(-180px);
          }

          @media (max-width: 568px) {
            transform: translateY(-230px);
          }

          .assignment-details {
            .description {
              opacity: 1;
              max-height: 100px;
              margin-top: 8px;
            }
          }

          .btn-card {
            opacity: 1;
            transform: translateY(105px);
            @media (max-width: 1024px) {
              transform: translateY(65px);
            }
            @media (max-width: 568px) {
              transform: translateY(80px);
            }
          }
        }
      }
    }
  }

  .results {
    text-align: end;
    @media (max-width: 568px) {
      text-align: start;
    }
  }
}

/* ======================================================================================================================== */
/* Prices Page */
/* ======================================================================================================================== */

.prices-page {
  .title {
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: bolder;
    color: var(--title-color);
  }

  .single-package {
    border: var(--main-border);
    border-bottom-width: 4px;
    background-color: var(--service-card-bg);
    margin-bottom: 24px;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;

    .package-name {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;

      @media (max-width: 568px) {
        align-items: center;
      }

      h3 {
        font-size: 20px;
        font-weight: bold;
        color: var(--title-color);
        margin-bottom: 0;
        max-width: 250px;

        @media (max-width: 568px) {
          font-size: 15px;
        }
      }
      .disscount {
        background-color: var(--primary-color);
        color: var(--white-color);
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 14px;
        width: fit-content;
      }
    }

    .package-details {
      display: flex;
      flex-direction: column;
      gap: 12px;

      p {
        font-size: 14px;
        font-weight: 500;
        max-width: 280px;
        color: var(--description-color);
      }
    }

    .package-price {
      p {
        color: var(--primary-color);
        font-size: 28px;
        font-weight: bolder;
        span {
          font-size: 16px;
          font-weight: 500;
          color: var(--title-color);
        }
      }
      p.instead-of {
        font-size: 14px;
        color: var(--description-color);
        span {
          text-decoration: line-through;
        }
      }
    }
  }

  .package-contents {
    border: var(--gray-border-color);
    border-radius: 12px;
    padding: 24px;

    h4 {
      font-size: 18px;
      font-weight: bold;
      color: var(--title-color);
      margin-bottom: 10px;
    }

    .content {
      .data {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;

        ul {
          list-style: none;
          padding: 0;

          li {
            font-size: 14px;
            font-weight: 500;
            color: var(--title-color);
            margin-bottom: 8px;
            position: relative;
            padding-right: 16px;

            &::before {
              content: "•";
              position: absolute;
              right: 0;
              color: var(--primary-color);
              font-size: 24px;
              line-height: 1;
            }
          }
        }
      }
    }

    .special-features {
      .special {
        display: flex;
        align-items: flex-start;
        gap: 32px;

        .single-special {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 14px;

          svg {
            color: var(--primary-color);
            width: 20px;
            height: 20px;
          }

          p {
            font-size: 14px;
            font-weight: 500;
            color: var(--title-color);
          }
        }
      }
    }
  }

  .tabels {
    .single-package {
      background-color: var(--white-color);
      border: var(--gray-border-color);
      transition: all 0.3s ease;

      &:hover {
        border: var(--main-border);
        border-bottom-width: 4px;
        background-color: var(--service-card-bg);
      }
    }
  }
}

/* ======================================================================================================================== */
/* Cart Page */
/* ======================================================================================================================== */

.cart-page {
  .cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border: var(--gray-border-color);
    border-radius: 16px;
    padding: 20px;

    @media (max-width: 992px) {
      margin-bottom: 16px;
    }

    .the-item {
      display: flex;
      align-items: center;
      gap: 24px;

      @media (max-width: 768px) {
        gap: 12px;
      }

      .product-img {
        width: 210px;
        height: 210px;
        border-radius: 12px;

        @media (max-width: 768px) {
          width: 120px;
          height: 120px;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 12px;
        }
      }

      .details-product {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .description-item {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
      }
    }

    .x-icon {
      svg {
        font-size: 24px;
        color: var(--description-color);
        transition: color 0.3s ease;

        &:hover {
          color: var(--primary-color);
        }
      }
    }
  }

  .price-details {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;

    .coupon-code {
      @media (max-width: 992px) {
        width: 100%;
      }

      .coupon-input {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        border: var(--gray-border-color);
        border-radius: 8px;
        background-color: var(--white-color);
        width: 450px;

        @media (max-width: 992px) {
          width: 100%;
        }

        svg {
          width: 24px;
          height: 24px;
        }

        input {
          flex: 1;
          border: none;
          outline: none;
          font-size: 14px;
          font-weight: 500;
          color: var(--title-color);

          &::placeholder {
            color: var(--description-color);
          }
        }

        .main-btn {
          padding: 8px 12px;
        }
      }
    }

    .cart-price {
      width: 400px;
      margin-right: auto;

      @media (max-width: 992px) {
        width: 100%;
      }
      .price-summary {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;

        .total-price {
          display: flex;
          align-items: center;

          .the-item {
            width: 50%;
            border: var(--gray-border-color);
            padding: 20px;
            background-color: var(--service-card-bg);

            p {
              font-size: 16px;
              font-weight: 500;
              color: var(--description-color);
            }
          }

          .the-price {
            width: 75%;
            padding: 20px 16px;
            background-color: var(--white-color);
            border: var(--gray-border-color);
          }
        }
      }
    }
  }
}

/* ======================================================================================================================== */
/* Payment Page */
/* ======================================================================================================================== */

.payment {
  .checks {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    border: 8px solid var(--service-card-bg);
    border-radius: 16px;
    padding: 24px;

    .form-check {
      transition: all 0.3s ease;
      cursor: pointer;

      .form-check-input {
        width: 20px;
        height: 20px;
        border: var(--gray-border-color);
        cursor: pointer;
        margin-left: 0;
        margin-right: 0;

        &:checked {
          background-color: var(--primary-color);
          border-color: var(--primary-color);
        }

        &:focus {
          box-shadow: none;
          border-color: var(--primary-color);
        }
      }

      .form-check-label {
        font-size: 18px;
        font-weight: 500;
        color: var(--title-color);
        cursor: pointer;

        img {
          object-fit: cover;
        }
      }

      /* When radio is checked, change parent border */
      input:checked ~ label {
        color: var(--primary-color);
      }
    }

    /* Add border color change when input is checked */
    .form-check:has(input:checked) {
      border-color: var(--primary-color);
    }
  }

  .payment-method-box {
    .checks {
      gap: 24px;
      .available-payments {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .how-pay {
        background-color: var(--service-card-bg);
        padding: 16px;
        border-radius: 8px;

        p {
          font-size: 20px;
          font-weight: bold;
          color: var(--title-color);
        }
      }

      .form-check {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border: var(--gray-border-color);
        border-radius: 8px;
      }

      .form-check:first-child {
        flex-direction: column;
      }

      .visa-check {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        border-bottom: var(--gray-border-color);
        padding-bottom: 12px;

        svg {
          color: var(--title-color);
        }

        .the-card {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .visa-img {
          display: flex;
          align-items: center;
          gap: 8px;

          img {
            width: 25px;
            height: 25px;
            object-fit: cover;
          }

          .center-border {
            height: 16px;
            border: var(--gray-border-color);
          }
        }
      }

      .bank-card-details {
        width: 100%;
        margin: 24px 0;
        display: flex;
        flex-direction: column;
        gap: 24px;

        .card-type-selection {
          display: flex;
          align-items: center;
          gap: 12px;

          .card-type-option {
            display: flex;
            align-items: center;
            border: var(--gray-border-color);
            border-radius: 8px;
            padding: 4px 16px;
            gap: 8px;

            img {
              width: 40px;
              height: 40px;
              object-fit: contain;
            }
          }
        }

        .card-info-row {
          display: flex;
          gap: 20px;
          align-items: center;
          flex-wrap: nowrap;

          @media (max-width: 768px) {
            flex-wrap: wrap;
          }
        }
      }
    }
  }

  .summary-order {
    position: sticky;
    display: flex;
    flex-direction: column;
    gap: 24px;
    top: 10px;
    background-color: var(--service-card-bg);
    padding: 20px 24px;
    border-radius: 12px;

    .application-summary {
      background-color: var(--white-color);
      padding: 16px;
      border-radius: 8px;

      h3 {
        font-size: 20px;
        font-weight: bold;
        color: var(--title-color);
        margin-bottom: 0;
      }
    }

    .card-order {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .the-item {
        display: flex;
        align-items: center;
        gap: 12px;

        .item-img {
          width: 60px;
          height: 60px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          }
        }

        .item-details {
          h4 {
            font-size: 14px;
            font-weight: bold;
            color: var(--title-color);
            margin-bottom: 4px;
          }

          p {
            font-size: 14px;
            font-weight: 500;
            color: var(--primary-color);
          }
        }
      }
    }

    .total-price {
      border: 2px solid var(--white-color);
      border-radius: 8px;

      .price-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 2px solid var(--white-color);

        p {
          font-size: 16px;
          font-weight: 500;
          color: var(--title-color);
        }
      }

      .price-details.total {
        background-color: var(--white-color);

        p.total {
          font-weight: bold;
        }
      }
    }
  }
}

.confirmed-order {
  max-width: 500px;
  margin: 0 auto;

  .confirm-img {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    margin-bottom: 32px;

    @media (max-width: 568px) {
      width: 100px;
      height: 100px;
    }

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

  .confirm-message {
    text-align: center;
    margin-bottom: 24px;

    h3 {
      font-size: 32px;
      font-weight: bolder;
      color: var(--title-color);
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      font-weight: 500;
      color: var(--title-color);
      max-width: 450px;
    }
  }

  .summary-order {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    background-color: var(--service-card-bg);
    padding: 20px 24px;
    border-radius: 12px;

    .application-summary {
      background-color: var(--white-color);
      padding: 16px;
      border-radius: 8px;

      h3 {
        font-size: 20px;
        font-weight: bold;
        color: var(--title-color);
        margin-bottom: 0;
      }
    }

    .card-order {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .the-item {
        display: flex;
        align-items: center;
        gap: 12px;

        .item-img {
          width: 60px;
          height: 60px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          }
        }

        .item-details {
          h4 {
            font-size: 14px;
            font-weight: bold;
            color: var(--title-color);
            margin-bottom: 4px;
          }

          p {
            font-size: 14px;
            font-weight: 500;
            color: var(--primary-color);
          }
        }
      }
    }

    .total-price {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .price-details {
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 16px;
          font-weight: 500;
          color: var(--title-color);
        }
      }
    }
  }

  .btns {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    width: 100%;

    @media (max-width: 568px) {
      .main-btn,
      .border-btn {
        font-size: 14px;
        padding: 16px 12px;
      }
    }
  }
}

/* ======================================================================================================================== */
/* Login Pages */
/* ======================================================================================================================== */

.login-page,
.verification-page {
  .login-details {
    position: relative;
    border: 1px solid var(--primary-color);
    border-radius: 18px;
    padding: 32px;
    height: 100%;

    .login-img {
      position: absolute;
      /* top: 0; */
      bottom: 0;
      right: 0;
      height: fit-content;
      width: fit-content;

      html[dir="ltr"] & {
        right: auto;
        left: 0;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        html[dir="ltr"] & {
          -webkit-transform: scaleX(-1);
        }
      }

      @media (max-width: 992px) {
        display: none;
      }
    }

    .login-form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      padding: 50px 0;

      @media (max-width: 992px) {
        padding: 0;
      }

      .login-title {
        text-align: center;
        p {
          font-size: 24px;
          font-weight: bolder;
          color: var(--title-color);
          margin-bottom: 8px;
        }

        .login-description {
          font-size: 14px;
          font-weight: 500;
          color: var(--description-color);
        }
      }

      .verification-code {
        text-align: center;

        .inputs {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 24px;
          width: 100%;
          margin-bottom: 24px;

          @media (max-width: 768px) {
            gap: 12px;
          }

          input {
            width: 60px;
            height: 60px;
            font-size: 24px;
            font-weight: bold;
            border: var(--gray-border-color);
            border-radius: 12px;
            outline: none;
            transition: all 0.3s ease;
            text-align: center;

            @media (max-width: 768px) {
              width: 50px;
              height: 50px;
            }

            &:focus {
              border-color: var(--primary-color);
            }
          }
        }

        p {
          font-size: 16px;
          font-weight: 500;
          color: var(--login-color);

          span {
            color: var(--primary-color);
          }
        }
      }
    }

    .login-info {
      display: flex;
      flex-direction: column;

      @media (max-width: 992px) {
        align-items: center;
      }

      .logo {
        margin-bottom: 32px;
        width: fit-content;
        height: 60px;
        img {
          height: 100%;
          width: 100%;
          object-fit: contain;
        }
      }

      p {
        font-size: 28px;
        font-weight: bolder;
        color: var(--title-color);
        max-width: 350px;
      }
    }

    .choose-account {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;

      @media (max-width: 768px) {
        flex-direction: column;
      }

      .account-card {
        position: relative;
        border: 1px solid var(--primary-color);
        border-radius: 16px;
        padding: 16px;
        min-height: 180px;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s ease;
        overflow: hidden;

        &:hover,
        &.active {
          background-color: var(--primary-color);
          border-color: var(--primary-color);

          .card-content p {
            color: var(--white-color);
          }

          .card-icon svg {
            color: var(--white-color);
          }
        }

        .card-content {
          .name {
            margin-bottom: 8px;
            font-size: 20px;
            font-weight: bolder;
            color: var(--title-color);
            transition: all 0.3s ease;
          }

          p {
            font-size: 14px;
            font-weight: 500;
            color: var(--description-color);
            transition: all 0.3s ease;
            max-width: calc(100% - 70px);
          }
        }

        .card-icon {
          position: absolute;
          bottom: 0;
          left: 0;

          svg {
            color: var(--primary-color);
            transition: all 0.3s ease;
          }
        }
      }
    }

    .login-steps {
      margin-bottom: 40px;

      .step {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        gap: 8px;

        .number {
          width: 8px;
          height: 8px;
          padding: 11px;
          border-radius: 50%;
          background-color: var(--primary-color);
          border: 2px solid var(--white-color);
          color: var(--white-color);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0px 0px 10px 0px #0058d24d;

          p {
            margin: 0;
            font-size: 14px;
          }
        }

        .sub-title {
          font-size: 14px;
          font-weight: 500;
          color: var(--title-color);
        }
      }

      .lines {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;

        .line-border {
          border: var(--gray-border-color);
          border-width: 3px;
          border-radius: 24px;
          width: 100%;

          &.active {
            border-color: var(--primary-color);
          }
        }
      }
    }
  }
}

.verification-page {
  .login-details {
    height: 600px;

    @media (max-width: 992px) {
      height: auto;
    }
  }
}

/* ======================================================================================================================== */
/* Contact Us Page */
/* ======================================================================================================================== */

.contact-us-page {
  .help-anytime {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
    gap: 40px;
    @media (max-width: 992px) {
      align-items: center;
    }

    h3 {
      font-size: 28px;
      font-weight: bolder;
      color: var(--title-color);

      @media (max-width: 768px) {
        font-size: 24px;
      }
    }

    .contact-social {
      display: flex;
      flex-direction: column;
      gap: 18px;

      .contact-img {
        max-width: 330px;
        height: 100%;

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

      .social-icons {
        display: flex;
        flex-direction: column;
        gap: 32px;

        .message-us {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 32px;

          .single-icon {
            display: flex;
            align-items: center;
            gap: 12px;

            .the-svg {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              padding: 8px;
              display: flex;
              text-align: center;
              align-items: center;
              justify-content: center;
              background-color: var(--primary-color);

              svg {
                color: var(--white-color);
              }
            }

            .contact-name {
              p {
                font-size: 14px;
                font-weight: 500;
                color: var(--description-color);
                margin-bottom: 6px;

                @media (max-width: 568px) {
                  font-size: 12px;
                }
              }

              a {
                font-size: 16px;
                font-weight: bold;
                color: var(--title-color);
                transition: color 0.3s ease;

                &:hover {
                  color: var(--primary-color);
                }

                @media (max-width: 568px) {
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
  }

  .send-message {
    border: 8px solid var(--service-card-bg);
    border-radius: 40px;
    padding: 32px;

    .title {
      font-size: 20px;
      font-weight: bold;
      color: var(--title-color);
    }

    .details {
      margin: 32px 0;

      display: flex;
      flex-direction: column;
      gap: 16px;

      .cards {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
      }

      .card-title {
        width: 100%;

        textarea {
          width: 100%;
          height: 120px;
          border: var(--gray-border-color);
          border-radius: 8px;
          padding: 12px;
          font-size: 14px;
          font-weight: 500;
          color: var(--title-color);
          outline: none;
          resize: none;
          transition: all 0.3s ease;

          &::placeholder {
            color: var(--description-color);
          }

          &:focus {
            border-color: var(--primary-color);
          }
        }
      }
    }
  }
}

/* ======================================================================================================================== */
/* Course Page */
/* ======================================================================================================================== */

.courses-page {
  .data-of-course {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;

    .course-data {
      .events-tabs {
        background-color: var(--white-color);
        box-shadow: none;
        margin: 0;
      }

      .tab-content {
        border: var(--gray-border-color);
        padding: 24px;
        border-radius: 16px;

        #synopsis {
          .synopsis-content {
            display: flex;
            flex-direction: column;
            gap: 18px;

            .hint-of-course {
              h5 {
                font-size: 18px;
                font-weight: bold;
                color: var(--title-color);
                margin-bottom: 12px;
              }

              p {
                font-size: 14px;
                font-weight: 500;
                color: var(--title-color);
              }
            }

            .what-learn {
              h5 {
                font-size: 18px;
                font-weight: bold;
                color: var(--title-color);
                margin-bottom: 12px;
              }

              .learning {
                display: flex;
                flex-direction: column;
                gap: 8px;

                .single-learn {
                  display: flex;
                  align-items: center;
                  gap: 6px;

                  p {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--title-color);
                    margin-bottom: 0;
                  }

                  svg {
                    color: var(--primary-color);
                    width: 16px;
                    height: 16px;
                  }
                }
              }
            }
          }
        }

        #teacher {
          .who-teacher {
            display: flex;
            align-items: center;
            gap: 16px;

            @media (max-width: 568px) {
              flex-wrap: wrap;
            }

            img {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              object-fit: cover;
            }

            .teacher-name {
              .name {
                font-size: 14px;
                font-weight: 500;
                color: var(--description-color);
              }

              p {
                font-size: 16px;
                font-weight: 600;
                color: var(--title-color);
              }
            }
          }
        }

        #reviews {
          .student-review {
            margin-bottom: 24px;
            .img-student {
              display: flex;
              align-items: center;
              gap: 12px;
              margin-bottom: 12px;

              img {
                width: 55px;
                height: 55px;
                border-radius: 50%;
                object-fit: cover;
              }

              .student-name {
                .name {
                  font-size: 16px;
                  font-weight: bold;
                  color: var(--title-color);
                }

                p {
                  font-size: 14px;
                  font-weight: 500;
                  color: var(--title-color);
                }
              }
            }

            .the-review {
              background-color: var(--service-card-bg);
              padding: 20px;
              border-radius: 8px;
              display: flex;
              align-items: flex-start;
              gap: 12px;

              svg {
                font-size: 24px;
                color: var(--third-color);
              }

              .text {
                width: 100%;
                p {
                  font-size: 14px;
                  font-weight: 500;
                  color: var(--title-color);
                  margin-bottom: 12px;
                }

                .rating {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  .single-star {
                    &.active {
                      svg {
                        color: var(--rating-color);
                      }
                    }
                  }

                  p {
                    margin-bottom: 0;
                    font-size: 12px;
                    font-weight: 500;
                    color: var(--title-color);
                  }
                }
              }
            }
          }
        }
      }

      .name-course {
        margin-bottom: 24px;

        .title {
          h4 {
            font-size: 32px;
            font-weight: 900;
            color: var(--title-color);
            margin-bottom: 8px;

            @media (max-width: 568px) {
              font-size: 24px;
            }
          }

          p {
            font-size: 16px;
            font-weight: 500;
            color: var(--title-color);
            max-width: 550px;

            @media (max-width: 568px) {
              font-size: 14px;
            }
          }
        }
      }

      .teacher {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px;

        @media (max-width: 576px) {
          gap: 24px;
        }
      }
    }

    .disscount {
      background-color: var(--primary-color);
      color: var(--white-color);
      padding: 4px 8px;
      margin-bottom: 16px;
      border-radius: 6px;
      font-size: 14px;
      width: fit-content;
    }
  }
  .course-card {
    border: var(--main-border);
    border-bottom-width: 6px;
    border-radius: 16px;
    position: sticky;
    top: 5px;

    .course-img {
      width: 100%;
      height: 250px;
      padding: 20px;
      border-radius: 12px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
      }
    }

    .btns {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 20px;
      width: 100%;

      @media (max-width: 1200px) {
        flex-wrap: wrap;
      }

      @media (max-width: 992px) {
        flex-wrap: nowrap;
      }

      a {
        width: 100%;
      }
    }

    .single-course-details {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px;

      .course-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        .price-icon {
          display: flex;
          align-items: center;
          gap: 8px;

          svg {
            color: var(--primary-color);
            width: 20px;
            height: 20px;
          }

          p {
            font-size: 16px;
            font-weight: 500;
            color: var(--description-color);
            margin-bottom: 0;
          }
        }

        .the-price {
          font-size: 20px;
          font-weight: bolder;
          color: var(--title-color);
        }

        .hours {
          font-size: 16px;
          font-weight: 500;
          color: var(--title-color);
        }
      }
    }

    .share-btn {
      display: flex;
      align-items: center;
      padding: 20px 0;
      justify-content: center;
      border-top: var(--gray-border-color);
      gap: 8px;

      svg {
        color: var(--primary-color);
        width: 20px;
        height: 20px;
      }

      p {
        font-size: 16px;
        font-weight: 500;
        color: var(--title-color);
        margin-bottom: 0;
      }
    }
  }
}

/* ======================================================================================================================== */
/* My Lessons Page */
/* ======================================================================================================================== */

.my-lessons-page {
  .right-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 8px;
    margin-bottom: 24px;

    .lessons {
      border: var(--gray-border-color);
      border-radius: 8px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;

      svg {
        color: var(--primary-color);
      }

      &.active {
        background-color: var(--primary-color);
        border-color: var(--primary-color);

        p {
          color: var(--white-color);
        }

        svg {
          color: var(--white-color);
        }
      }
    }
  }

  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;

    .title-box {
      font-size: 24px;
      font-weight: bolder;
      color: var(--title-color);
    }
  }

  .schedule-table {
    background-color: var(--white-color);
    border-radius: 16px;
    overflow: hidden;
    border: var(--gray-border-color);

    @media (max-width: 568px) {
      overflow-x: auto;
    }

    table {
      width: 100%;
      margin-bottom: 0;
      border-collapse: collapse;

      @media (max-width: 568px) {
        min-width: 600px;
      }

      thead {
        background: #e5f0ff8a;

        tr {
          th {
            padding: 16px 24px;
            background: #e5f0ff8a;
            font-size: 16px;
            font-weight: 600;
            color: var(--title-color);
            text-align: right;
            border-left: var(--gray-border-color);
            white-space: nowrap;

            &:first-child {
              text-align: right;
            }

            &:last-child {
              text-align: right;
            }
          }
        }
      }

      tbody {
        tr {
          border-bottom: var(--gray-border-color);

          &:last-child {
            /* border-bottom: none; */
          }

          td {
            padding: 16px 24px;
            font-size: 16px;
            font-weight: 500;
            color: var(--description-color);
            text-align: right;
            border-left: var(--gray-border-color);
            background-color: var(--white-color);
            text-align: right;
            white-space: nowrap;

            &:first-child {
              color: var(--title-color);
              text-align: right;
            }

            &:last-child {
              text-align: right;
            }
          }
        }
      }
    }
  }

  .student-card {
    border: var(--gray-border-color);
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;

    &:hover {
      border: 1px solid var(--primary-color);
    }

    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
    }

    .student-details {
      text-align: center;

      .name {
        font-size: 18px;
        font-weight: bold;
        color: var(--title-color);
        margin-bottom: 8px;
      }

      p {
        font-size: 14px;
        font-weight: 500;
        color: var(--description-color);
        margin-bottom: 0;
      }
    }
  }
}

.subjects-page {
  .main-subject-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    h2 {
      font-size: 32px;
      font-weight: bolder;
      color: var(--title-color);
    }

    .primary-border {
      width: 100px;
      height: 2px;
      background-color: var(--primary-color);
      border-radius: 2px;
    }
  }

  .next-course {
    margin: 40px 0;
    background-color: var(--service-card-bg);
    padding: 16px 40px;
    border: 1px solid var(--third-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;

    @media (max-width: 568px) {
      padding: 16px 20px;
    }

    .course-name {
      display: flex;
      align-items: center;
      gap: 28px;

      p {
        font-size: 24px;
        font-weight: bolder;
        color: var(--title-color);
        margin-bottom: 6px;

        @media (max-width: 768px) {
          font-size: 18px;
        }
      }

      .type-of {
        font-size: 16px;
        font-weight: 500;
        color: var(--description-color);
      }

      .third-btn {
        color: #adcfff;
        cursor: not-allowed;

        @media (max-width: 768px) {
          font-size: 14px;
        }
      }
    }

    .timer {
      display: flex;
      align-items: center;
      gap: 24px;

      .single-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;

        .hours {
          background-color: var(--white-color);
          padding: 8px 16px;
          border-radius: 8px;
          color: var(--primary-color);
          font-weight: bold;
          font-size: 20px;
        }

        p {
          color: var(--primary-color);
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }

  .events-tabs {
    background-color: var(--white-color);
    box-shadow: none;
    margin: 0;
  }

  .tab-content {
    border: var(--gray-border-color);
    padding: 24px;
    border-radius: 16px;

    #exams {
      .homework-box {
        padding: 20px;

        .title-card {
          align-items: flex-start;
          flex-direction: column;
          padding: 0;
          margin-bottom: 12px;
        }
      }
    }

    #notes {
      .bdf-box {
        border: var(--gray-border-color);
        padding: 16px;
        border-radius: 12px;
        background-color: var(--white-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;

        .bdf-icon {
          display: flex;
          align-items: center;
          gap: 8px;

          .bdf-name {
            .name {
              font-size: 16px;
              font-weight: bold;
              color: var(--title-color);
              margin-bottom: 4px;
            }

            .size {
              font-size: 14px;
              font-weight: 500;
              color: var(--description-color);
            }
          }

          svg {
            font-size: 32px;
          }
        }

        .download-icon {
          svg {
            color: var(--title-color);
          }
        }
      }
    }
  }
}

/* ======================================================================================================================== */
/* profile Page */
/* ======================================================================================================================== */

.profile-page,
.edit-page {
  .profile-container {
    border: 1px solid var(--primary-color);
    border-bottom-width: 6px;
    padding: 40px;
    border-radius: 24px;

    .profile-photo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 40px;

      .profile-name {
        display: flex;
        align-items: center;
        gap: 20px;

        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          object-fit: cover;
        }

        .student-name {
          h4 {
            font-size: 24px;
            font-weight: bold;
            color: var(--title-color);
            margin-bottom: 8px;

            @media (max-width: 568px) {
              font-size: 18px;
            }
          }

          p {
            font-size: 16px;
            font-weight: 500;
            color: var(--description-color);
            margin-bottom: 0;

            @media (max-width: 568px) {
              font-size: 14px;
            }
          }
        }
      }

      .btns {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
      }
    }

    .profile-info {
      display: flex;
      align-items: start;
      flex-wrap: wrap;
      gap: 50px;

      .info-box {
        display: flex;
        flex-direction: column;
        gap: 32px;

        .info-name {
          display: flex;
          align-items: center;
          gap: 16px;

          .the-svg {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-color);
            border-radius: 50%;
            svg {
              color: var(--white-color);
            }
          }

          .contact-name {
            p {
              font-size: 14px;
              font-weight: 500;
              color: var(--description-color);
              margin-bottom: 4px;
            }

            a,
            .desc-name {
              font-size: 16px;
              font-weight: bold;
              color: var(--title-color);
            }
          }
        }
      }
    }
  }
}

.edit-page {
  .profile-container {
    padding: 0;

    .profile-photo {
      padding: 24px 40px;
      border-bottom: var(--gray-border-color);
      margin-bottom: 0px;

      .profile-name {
        .img-box {
          position: relative;

          .edit-icon {
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            border: 2px solid var(--white-color);
            border-radius: 50%;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;

            html[dir="ltr"] & {
              left: auto;
              right: 0;
            }

            svg {
              color: var(--white-color);
              width: 16px;
              height: 16px;
            }
          }
        }
      }
    }

    .profile-inputs-edits {
      padding: 24px;

      .title-name {
        font-size: 20px;
        font-weight: bold;
        color: var(--title-color);
      }

      .passwords-section {
        .title-name {
          margin-bottom: 24px;
        }
      }
    }

    .change-password {
      display: flex;
      align-items: center;
      gap: 14px;

      @media (max-width:568px) {
        flex-wrap: wrap;
      }
    }
  }
}

/* ======================================================================================================================== */
/* Utility Classes For All Website*/
/* ======================================================================================================================== */

.login-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;

  .inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .form-field {
    position: relative;
    width: 100%;

    input {
      width: 100%;
      padding: 13px 12px;
      border: var(--gray-border-color);
      border-radius: 8px;
      font-size: 14px;
      color: var(--login-color);
      background: transparent;
      outline: none;
      transition: all 0.3s ease;

      &:focus {
        border-color: var(--primary-color);
      }

      &:focus + label,
      &:not(:placeholder-shown) + label {
        top: 0;
        font-size: 12px;
        color: var(--primary-color);
        background: var(--white-color);
        padding: 0 6px;
      }
    }

    label {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: var(--login-color);
      pointer-events: none;
      transition: all 0.3s ease;
      background: transparent;
    }

    .toggle-password {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      padding: 0;

      svg {
        width: 20px;
        height: 20px;
        color: var(--login-color);
      }
    }
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .remember-me {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;

      input[type="checkbox"] {
        display: none;
      }

      .custom-checkbox {
        width: 22px;
        height: 22px;
        border: var(--gray-border-color);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;

        svg {
          opacity: 0;
          transition: opacity 0.2s ease;
        }
      }

      input[type="checkbox"]:checked + .custom-checkbox {
        background-color: var(--primary-color);
        border-color: var(--primary-color);

        svg {
          opacity: 1;
        }
      }

      label {
        font-size: 14px;
        color: var(--title-color);
        font-weight: 500;
        cursor: pointer;
      }
    }

    .forgot-password {
      font-size: 14px;
      color: var(--primary-color);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .login-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;

    @media (max-width: 568px) {
      gap: 12px;
    }
  }

  .signup-link {
    text-align: center;
    font-size: 16px;
    color: var(--title-color);
    border: 1px solid var(--primary-color);
    color: var(--white-color);
    width: -webkit-fill-content;
    height: fit-content;
    padding: 16px 24px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the icon and text */
    justify-content: center;
    /* gap: 8px; */
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;

    span {
      color: var(--title-color);
    }

    a {
      color: var(--primary-color);
      font-weight: 600;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.homework-box {
  border: var(--gray-border-color);
  border-radius: 20px;

  .title-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;

    p {
      font-size: 16px;
      font-weight: bold;
      color: var(--title-color);
    }

    svg {
      color: var(--primary-color);
    }
  }
}

.homework-data {
  padding: 16px 18px;

  .data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;

    .subject-name {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .the-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--description-color);
      }
      p {
        font-size: 14px;
        font-weight: 500;
        color: var(--title-color);
      }
    }
  }
}

.subject-card {
  border: var(--gray-border-color);
  border-radius: 20px;
  overflow: hidden;

  @media (max-width: 768px) {
    margin-bottom: 24px;
  }

  .video-thumbnail {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    display: block;
    cursor: pointer;

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

    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      transition: transform 0.3s ease;
      border-radius: 50%;

      &:hover {
        transform: translate(-50%, -50%) scale(1.1);
      }

      svg {
        border-radius: 50%;
        background-color: #ffffff1f;
        border: 1px solid #ffffff;
      }
    }

    .video-duration {
      position: absolute;
      bottom: 12px;
      left: 12px;
      background: #ffffff1f;

      color: var(--white-color);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
    }
  }

  img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  .subject-text {
    background-color: var(--white-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .subject-name {
      font-size: 20px;
      font-weight: bold;
      color: var(--title-color);
      margin-bottom: 0;
    }
  }
}

.teacher-img {
  display: flex;
  align-items: center;
  gap: 12px;

  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
}

.teacher-name {
  .name {
    font-size: 14px;
    font-weight: 500;
    color: var(--description-color);
  }

  p {
    font-size: 16px;
    font-weight: 600;
    color: var(--title-color);
  }
}

/* Profile Dropdown */
.profile-dropdown {
  position: relative;
  display: inline-block;
}

.profile-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.profile-dropdown-toggle:hover {
  background-color: var(--service-card-bg);
}

.profile-dropdown-toggle .dropdown-arrow {
  transition: transform 0.3s ease;
}

.profile-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 200px;
  background-color: var(--white-color);
  border-radius: 12px;
  box-shadow: 0px 4px 20px rgba(0, 88, 210, 0.1);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

[dir="rtl"] .profile-dropdown-menu {
  left: auto;
  right: 0;
}

.profile-dropdown.active .profile-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--title-color);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.profile-dropdown-menu .dropdown-item:hover {
  background-color: var(--third-color);
  color: var(--primary-color);
}

.profile-dropdown-menu .dropdown-item.logout {
  color: #dc3545;
}

.profile-dropdown-menu .dropdown-item.logout:hover {
  background-color: #fff5f5;
  color: #dc3545;
}

.profile-dropdown-menu .dropdown-item svg {
  flex-shrink: 0;
}
.footer-social {
  margin-top: 16px;

  p {
    font-size: 14px;
    color: var(--title-color);
    font-weight: 500;
    margin-bottom: 12px;
  }
  .svg-icons {
    display: flex;
    align-items: center;
    gap: 12px;

    .single-svg {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      padding: 8px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      border: var(--gray-border-color);
      transition: all 0.3s ease;

      svg {
        color: var(--title-color);
        font-size: 20px;
      }

      &:hover {
        border-color: var(--primary-color);
        transition: all 0.3s ease;

        svg {
          color: var(--primary-color);
        }
      }
    }
  }
}

.events-tabs {
  background-color: var(--white-color);
  padding: 0px 40px;
  border-radius: 16px;
  box-shadow: 0px 0px 10px 0px #0058d20a;
  overflow-y: auto;
  margin: 40px 0;

  .center-border {
    height: 32px;
    border: var(--gray-border-color);
  }

  .single-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;

    .btn {
      border: none;
      padding: 24px 0;
      border-radius: 0;
      width: fit-content;
      border-bottom: 2px solid transparent;
      transition: border-bottom-color 0.3s ease-in-out;

      &.active {
        color: var(--primary-color);
        border-bottom-color: var(--primary-color);
      }
    }
  }
}

.tab-content {
  .assignment-card {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    border-radius: 20px;
    max-height: 450px;
    gap: 20px;
    border: var(--gray-border-color);
    background-color: var(--white-color);
    margin: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;

    &:hover {
      border: 1px solid var(--primary-color);
      border-bottom-width: 5px;

      .assignment-img {
        transform: translateY(-280px);
      }

      .assignment-text {
        transform: translateY(-230px);

        @media (max-width: 768px) {
          transform: translateY(-205px);
        }

        .assignment-details {
          .description {
            opacity: 1;
            max-height: 100px;
            margin-top: 8px;
          }
        }

        .btn-card {
          opacity: 1;
          transform: translateY(105px);
          @media (max-width: 768px) {
            transform: translateY(85px);
          }
        }
      }
    }

    .assignment-img {
      width: 100%;
      height: 250px;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px 20px 0 0;
      }
    }

    .assignment-text {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 0 24px;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);

      .assignment-details {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .description {
          font-size: 14px;
          font-weight: 500;
          color: var(--description-color);
          line-height: 1.6;
          opacity: 0;
          max-height: 0;
          margin-top: 0;
          overflow: hidden;
          transition: opacity 0.4s ease,
            max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s ease;
        }

        .rating {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;

          .disscount {
            background-color: var(--primary-color);
            color: var(--white-color);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 14px;
            p {
              color: var(--white-color);
            }
          }

          .stars {
            display: flex;
            align-items: center;
            gap: 4px;

            .single-star {
              svg {
                color: var(--gray-color);
                width: 16px;
                height: 16px;
              }

              &.active {
                svg {
                  color: var(--rating-color);
                }
              }
            }
          }

          p {
            font-size: 14px;
            font-weight: 500;
            color: var(--description-color);
          }
        }

        .card-address {
          font-size: 20px;
          font-weight: bold;
          color: var(--title-color);
        }

        .lessons {
          display: flex;
          align-items: center;
          gap: 12px;

          .lessons-count {
            display: flex;
            align-items: center;
            gap: 4px;

            svg {
              font-size: 24px;
              color: var(--primary-color);
            }

            p {
              font-size: 14px;
              font-weight: 500;
              color: var(--description-color);
            }
          }
        }
      }
      .btn-card {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 12px;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.4s ease 0.1s,
          transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;

        .seen {
          padding: 15px;
          border-radius: 8px;
          background-color: var(--third-color);
          svg {
            font-size: 24px;
            color: var(--primary-color);
          }
        }
      }

      .price {
        font-size: 20px;
        font-weight: bolder;
        color: var(--primary-color);
      }
    }
  }

  .buttons-swiper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 20%;

    .swiper-button-next,
    .swiper-button-prev {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--white-color);
      border: var(--gray-border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      margin: 0;

      &::after {
        display: none;
      }

      svg {
        width: 20px;
        height: 20px;
        color: var(--title-color);
        transition: all 0.3s ease;
      }

      &:hover {
        background-color: var(--primary-color);
        border-color: var(--primary-color);

        svg {
          color: var(--white-color);
        }
      }
    }

    .swiper-button-next {
      position: absolute;
      left: 0px;
    }
    .swiper-button-prev {
      position: absolute;
      right: 0px;
    }
  }
}

.price {
  font-size: 20px;
  font-weight: bolder;
  color: var(--primary-color);

  @media (max-width: 568px) {
    font-size: 14px;
  }
}

.card-address {
  font-size: 20px;
  font-weight: bold;
  color: var(--title-color);

  @media (max-width: 568px) {
    font-size: 14px;
  }
}

.lessons {
  display: flex;
  align-items: center;
  gap: 12px;

  @media (max-width: 568px) {
    gap: 6px;
  }

  .lessons-count {
    display: flex;
    align-items: center;
    gap: 4px;

    svg {
      font-size: 24px;
      color: var(--primary-color);
    }

    p {
      font-size: 14px;
      font-weight: 500;
      color: var(--description-color);

      @media (max-width: 568px) {
        font-size: 12px;
      }
    }
  }
}

.stars {
  display: flex;
  align-items: center;
  gap: 4px;

  .single-star {
    svg {
      color: var(--gray-color);
      font-size: 16px;
      @media (max-width: 568px) {
        font-size: 14px;
      }
    }

    &.active {
      svg {
        color: var(--rating-color);
      }
    }
  }

  p {
    @media (max-width: 568px) {
      font-size: 14px;
    }
  }
}

/* Who Us Section */
.who-us {
  .who-img {
    width: fit-content;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
    }
  }

  .title-section {
    margin-top: 32px;
  }

  .why-bukra {
    margin-top: 32px;
    p {
      font-size: 18px;
      font-weight: 500;
      color: var(--title-color);
      margin-bottom: 20px;
    }

    .hint-list {
      display: flex;
      align-items: center;
      gap: 40px;

      .list {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .single-list {
          display: flex;
          align-items: center;
          gap: 8px;

          p {
            font-size: 16px;
            font-weight: 500;
            color: var(--title-color);
            margin-bottom: 0;

            @media (max-width: 768px) {
              font-size: 14px;
            }
          }

          svg {
            color: var(--primary-color);
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
}

/* Services Title In All Pages */
.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;

  .service-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;

    .title-text {
      display: flex;
      flex-direction: column;
      gap: 12px;
      .my-services {
        display: flex;
        align-items: center;
        gap: 8px;

        p {
          color: var(--primary-color);
          font-size: 14px;
          font-weight: bold;
        }
      }

      p {
        font-size: 32px;
        font-weight: bolder;
        color: var(--title-color);

        @media (max-width: 768px) {
          font-size: 30px;
        }
      }
    }

    .center-border {
      border: var(--gray-border-color);
      height: 77px;
    }

    .description-text {
      font-size: 14px;
      font-weight: 400;
      color: var(--description-color);
      max-width: 550px;
      line-height: 1.7;
    }
  }
}

/* Small Border Color Style */
.center-border {
  border: var(--gray-border-color);
  height: 32px;
}

/* ======================================================================================================================== */
/* Header */
/* ======================================================================================================================== */

/* Header */
.student-nav {
  border-bottom: var(--gray-border-color);

  .show-courses {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
    padding: 0px 24px;
  }
}

.header {
  .top-header {
    background-color: var(--primary-color);
    padding: 12px 0;

    .sec-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .contacts {
        display: flex;
        align-items: center;
        gap: 30px;
        font-size: 14px;

        .contact {
          display: flex;
          align-items: center;
          gap: 8px;
          color: var(--white-color);

          svg {
            color: var(--white-color);
          }
        }
      }

      .social-icons {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 14px;
        color: var(--white-color);

        .svg-icons {
          display: flex;
          align-items: center;
          gap: 16px;

          .single-svg {
            border-radius: 50%;
            width: 28px;
            height: 28px;
            padding: 6px;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--social-border-header);
          }
        }
      }
    }
  }

  /* Main Header */
  .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-links {
      display: flex;
      align-items: center;

      .logo img {
        height: 60px;
        max-width: 185px;
        object-fit: cover;

        @media (max-width: 1200px) {
          height: 40px;
        }
      }

      .links {
        ul {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 0;

          li {
            list-style: none;

            a {
              color: var(--title-color);
              font-size: 14px;
              font-weight: 500;
              transition: color 0.3s ease;
              position: relative;
              padding-bottom: 4px;

              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                right: 0;
                width: 0;
                height: 2px;
                background-color: var(--primary-color);
                transition: width 0.3s ease;
              }

              &:hover {
                color: var(--primary-color);
              }

              &:hover::after {
                width: 100%;
                left: 0;
              }

              &.active {
                color: var(--primary-color);
              }

              &.active::after {
                width: 100%;
                left: 0;
              }
            }
          }
        }
      }
    }

    .search {
      display: flex;
      /* height: 48px; */
      padding: 7px;
      width: fit-content;
      border: var(--gray-border-color);
      border-radius: 8px;
      overflow: hidden;

      .search-icon {
        background: var(--primary-color);
        /* width: 55px; */
        padding: 8px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        svg {
          color: var(--white-color);
        }
      }

      input {
        flex: 1;
        border: none;
        padding: 0 15px;
        font-weight: bold;
        font-size: 14px;
        outline: none;

        @media (max-width: 1200px) {
          padding: 0;
        }
      }

      .search input::placeholder {
        color: var(--description-color);
      }
    }

    .cart-icon {
      display: flex;
      align-items: center;
      gap: 12px;

      .profile-icon,
      .cart,
      .notification {
        position: relative;
        padding: 12px;
        border-radius: 8px;
        border: var(--gray-border-color);

        svg {
          color: var(--title-color);
        }
      }
      .cart,
      .notification {
        a {
          position: relative;
          display: block;
        }

        .cart-badge {
          position: absolute;
          top: -9px;
          right: -9px;
          background-color: var(--primary-color);
          color: var(--white-color);
          border-radius: 50px;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
        }

        &.active .cart-badge {
          display: flex;
        }
      }

      .menu-toggle {
        position: relative;
        padding: 12px;
        border-radius: 8px;
        border: var(--gray-border-color);
        cursor: pointer;
      }
    }
  }
}

/* ======================================================================================================================== */
/* Footer And Mobile Navigation */
/* ======================================================================================================================== */

/* Footer */
.footer {
  padding-top: 80px;
  /* position: relative; */

  .contact-us {
    /* position: absolute; */
    /* top: 0px; */
    /* left: 50%; */
    z-index: 10;
    /* transform: translate(-50%, -50%); */
    /* width: calc(100% - 15%); */
    /* max-width: 1300px; */
    padding: 40px 70px;
    border-radius: 24px;
    background-image: url(/imgs/footer-frame.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: -80px;

    .text {
      h3 {
        font-size: 32px;
        color: var(--white-color);
        font-weight: bolder;
      }

      p {
        font-size: 18px;
        color: var(--white-color);
        font-weight: 500;
      }
    }

    @media (max-width: 992px) {
      align-items: flex-start;
      padding: 32px 24px;

      .text {
        h3 {
          font-size: 18px;
        }

        p {
          font-size: 14px;
        }
      }
    }

    @media (max-width: 768px) {
      justify-content: center;
      text-align: center;
      flex-direction: column;
      align-items: center;
    }
  }

  .main-footer {
    /* position: relative; */
    border-top: var(--gray-border-color);
    z-index: 1;
    /* padding-top: 70px; */

    .logo-box {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 32px;

      .footer-logo {
        display: flex;
        flex-direction: column;
        gap: 28px;

        img {
          max-height: 70px;
          max-width: 220px;
          object-fit: cover;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: var(--title-color);
          max-width: 325px;
        }
      }

      .payment-footer-photo {
        img {
          max-height: 40px;
          max-width: 320px;
          object-fit: cover;
        }
      }
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 32px;

      .fast-links {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      h3 {
        font-size: 20px;
        font-weight: bold;
        color: var(--primary-color);
      }

      .links {
        display: flex;
        align-items: flex-start;
        gap: 12px;

        .main-links {
          display: flex;
          flex-direction: column;
          gap: 16px;

          a {
            font-size: 16px;
            font-weight: 500;
            color: var(--title-color);
            transition: color 0.3s ease;
            display: flex;
            align-items: center;
            gap: 12px;

            svg {
              color: var(--primary-color);
            }

            &:hover {
              color: var(--primary-color);
            }
          }

          .footer-social {
            .svg-icons {
              .single-svg {
                svg {
                  color: var(--title-color);
                  font-size: 20px;
                  transition: all 0.3s ease;
                }

                &:hover {
                  border-color: var(--primary-color);
                  transition: all 0.3s ease;

                  svg {
                    color: var(--primary-color);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer-bottom {
    padding: 16px;
    background: var(--primary-color);
    color: var(--white-color);
    font-size: 16px;
    font-weight: 500;

    .footer-content-bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }

    @media (max-width: 768px) {
      .footer-content-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        font-size: 12px;
      }
    }
  }
}

/* Mobile Navigation */
.mobile-navigation {
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
  }

  .mobile-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background: var(--white-color);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
  }

  &.active {
    .mobile-overlay {
      opacity: 1;
      visibility: visible;
    }

    .mobile-sidebar {
      right: 0;
    }
  }

  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    /* border-bottom: var(--gray-border-color); */

    .mobile-logo img {
      max-height: 50px;
    }

    .close-sidebar {
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      display: flex;
      align-items: center;

      svg {
        color: var(--title-color);
      }
    }
  }

  .mobile-search {
    display: flex;
    padding: 8px;
    width: 100%;
    border: var(--gray-border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;

    .search-icon {
      background: var(--primary-color);
      padding: 8px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        color: var(--white-color);
      }
    }

    input {
      flex: 1;
      border: none;
      /* padding: 0 15px; */
      font-weight: bold;
      font-size: 14px;
      outline: none;
    }

    input::placeholder {
      color: var(--description-color);
    }
  }

  .links {
    ul {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 0;

      li {
        list-style: none;

        a {
          color: var(--title-color);
          font-size: 16px;
          font-weight: 500;
          transition: color 0.3s ease;
          position: relative;
          padding-bottom: 4px;

          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
          }

          &:hover {
            color: var(--primary-color);
          }

          &:hover::after {
            width: 100%;
            left: 0;
          }

          &.active {
            color: var(--primary-color);
          }

          &.active::after {
            width: 100%;
            left: 0;
          }
        }
      }
    }
  }

  .mobile-actions {
    margin: 24px 0;
    padding-top: 24px;
    border-top: var(--gray-border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;

    .action-item {
      border: var(--gray-border-color);
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        border-color: var(--primary-color);
        background-color: var(--third-color);
      }

      &.active {
        .cart-badge {
          background-color: var(--primary-color);
          color: var(--white-color);
          border-radius: 50px;
          min-width: 24px;
          height: 24px;
          padding: 2px 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: 600;
        }
      }

      .cart-side {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        color: var(--title-color);
        font-size: 16px;
        font-weight: 500;
        position: relative;

        svg {
          color: var(--title-color);
        }
      }
    }
  }

  .profile-dropdown {
    width: 100%;

    .profile-dropdown-toggle {
      justify-content: space-between;
    }

    .profile-dropdown-menu {
      width: 100%;
    }
  }
}

.product-selection {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .selected {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;

    @media (max-width: 568px) {
      flex-direction: column;
    }

    .select2-container--default .select2-selection--single {
      border: none;
    }

    .select2 {
      background-color: var(--white-color);
      border-radius: 8px;
      border: var(--gray-border-color);
      width: 100%;
    }
    p {
      color: var(--title-color);
      font-size: 14px;
      font-weight: 500;
    }
  }
}

/* Select-2 In All*/

.select-2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;

  p {
    font-size: 14px;
    font-weight: 500;
    color: var(--title-color);
  }
}

.select2-selection__rendered {
  padding: 5px;
}

.select2-selection.select2-selection--single {
  height: fit-content;
}

.select2-selection__arrow {
  height: 100% !important;
}

.select2-container--default .select2-selection--single {
  background-color: transparent;
  border: var(--gray-border-color);
  padding: 5px;
  border-radius: 8px;
  box-shadow: none;
}

.select2-container[dir="rtl"]
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--login-color);
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--description-color);
  padding-left: 0;
  padding-right: 0;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  color: var(--description-color);
}

.select2-container--default .select2-selection--multiple {
  background-color: transparent;
  border: none;
  border-bottom: var(--gray-border-color);
  border-radius: 0;
  box-shadow: none;
}

.select2-container--open .select2-dropdown--below {
  border-top: none !important;
  border: var(--gray-border-color);
  border-radius: 8px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.096);
  padding: 12px;
  z-index: 9999;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none !important;
  border: 1px solid var(--gray-border-color);
  border-radius: 12px 12px 0px 0px;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.096);
  z-index: 9999;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  right: 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--gray-border-color);
}

.select2-search__field:focus {
  outline: none !important;
}

.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border: 1px solid var(--gray-border-color);
  box-shadow: var(--tblr-box-shadow-input);
}

.select2-container--default[dir="rtl"]
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: #efefef;
}

.select2-search--dropdown .select2-search__field {
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__clear {
  display: none;
}

.select2-selection_choice_remove {
  border-left: none !important;
}

.selection {
  max-width: 100%;
}

select {
  direction: inherit;
}

.select2-search--dropdown {
  margin: 8px 0px;
  border: var(--gray-border-color);
  border-radius: 8px;
}

.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;

    input[type="checkbox"] {
      display: none;
    }

    .custom-checkbox {
      width: 22px;
      height: 22px;
      border: var(--gray-border-color);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;

      svg {
        opacity: 0;
        transition: opacity 0.2s ease;
      }
    }

    input[type="checkbox"]:checked + .custom-checkbox {
      background-color: var(--primary-color);
      border-color: var(--primary-color);

      svg {
        opacity: 1;
      }
    }

    label {
      font-size: 14px;
      color: var(--title-color);
      cursor: pointer;
    }
  }

  .forgot-password {
    font-size: 14px;
    color: var(--primary-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.form-field {
  position: relative;
  width: 100%;

  input {
    width: 100%;
    padding: 13px 12px;
    border: var(--gray-border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--login-color);
    background: transparent;
    outline: none;
    transition: all 0.3s ease;

    &::placeholder {
      color: var(--login-color);
    }

    &:focus {
      border-color: var(--primary-color);
    }

    &:focus + label,
    &:not(:placeholder-shown) + label {
      top: 0;
      font-size: 12px;
      color: var(--primary-color);
      background: var(--white-color);
      padding: 0 6px;
    }
  }

  label {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--login-color);
    pointer-events: none;
    transition: all 0.3s ease;
    background: transparent;
  }
}

.bank-card-details {
  .card-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    .the-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--title-color);
    }
  }

  .card-info {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .toggle-password {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;

    svg {
      width: 20px;
      height: 20px;
      color: var(--login-color);
    }
  }
}
/* ======================================================================================== */
/* Accordion Styles */
/* ======================================================================================== */

/* FAQ Accordion Style - #accordionExample */
.accordion#accordionExample {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.accordion#accordionExample .accordion-item {
  border: var(--gray-border-color);
  border-radius: 8px;
  padding: 8px 16px;
  transition: border 0.3s ease;
}

.accordion#accordionExample
  .accordion-item:has(.accordion-button:not(.collapsed)) {
  border: 1px solid var(--primary-color);
  box-shadow: 0px 0px 28px 0px #0058d21a;
}

.accordion#accordionExample .accordion-button {
  padding: 12px 0;
  border: none;
  background-color: transparent;
}

.accordion#accordionExample .accordion-button.collapsed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
}

.accordion#accordionExample .accordion-button.collapsed p {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
}

.accordion#accordionExample .accordion-button:not(.collapsed) {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* box-shadow: none; */
  /* border-bottom: var(--gray-border-color); */
}

.accordion#accordionExample .accordion-button:not(.collapsed) p {
  font-size: 16px;
  font-weight: bold;
}

.accordion#accordionExample .accordion-button::after {
  margin-left: 0;
  margin-bottom: 0;
  transition: all 0.3s ease;
}

.accordion#accordionExample .accordion-body {
  padding-inline-start: 0;
}

.accordion#accordionExample .accordion-body p {
  color: var(--description-color);
}

.accordion#accordionExample .accordion-button:focus {
  box-shadow: none;
  outline: none;
  border: none;
}

.accordion#accordionExample .accordion-button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Curriculum Accordion Style */
.curriculum-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px !important;

  /* Default state - collapsed (clean, no border) */
  .accordion-item {
    border: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden;
    background-color: var(--white-color);
    box-shadow: none;
    transition: all 0.3s ease;
  }

  /* Expanded state - with border and shadow */
  .accordion-item:has(.accordion-button:not(.collapsed)) {
    border: var(--gray-border-color) !important;
    padding: 14px !important;
  }

  .accordion-button:not(.collapsed) {
    background-color: var(--service-card-bg) !important;
    box-shadow: none !important;
  }

  /* Accordion button base styles */
  .accordion-button {
    padding: 16px 20px !important;
    /* background-color: var(--white-color) !important; */
    border: none !important;
    box-shadow: none !important;
  }

  /* Collapsed button - simple border */
  .accordion-button.collapsed {
    border: var(--gray-border-color) !important;
    border-radius: 12px !important;
  }

  /* Expanded button - border only on bottom */
  .accordion-button:not(.collapsed) {
    border-radius: 12px !important;
  }

  /* Unit header layout */
  .unit-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;

    @media (max-width: 568px) {
      gap: 6px;
      flex-wrap: wrap;
    }
  }

  .unit-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--title-color);
    margin-bottom: 0 !important;

    @media (max-width: 568px) {
      font-size: 14px !important;
    }
  }

  /* Badge - collapsed state (blue bg, white text) */
  .lessons-badge {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  /* Badge - expanded state (white bg, blue text) */
  .accordion-button:not(.collapsed) .lessons-badge {
    background-color: var(--white-color);
    color: var(--primary-color);
  }

  /* Accordion body */
  .accordion-body {
    padding: 0 !important;
    background-color: var(--white-color);
  }

  /* Lesson items */
  .lesson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: var(--gray-border-color);
    transition: background-color 0.2s ease;

    @media (max-width: 568px) {
      padding: 12px 0px;
    }
  }

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

  .lesson-item:hover {
    background-color: rgba(0, 88, 210, 0.02);
  }

  .lesson-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--login-color);
    font-size: 14px;
  }

  .lesson-title {
    flex: 1;
    text-align: right;
    margin: 0 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--title-color);
  }

  .eye-icon {
    color: var(--login-color);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .eye-icon:hover {
    opacity: 0.7;
  }
}