* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  scroll-behavior: smooth;
  outline: none;
}
.p-lr {
  padding-left: 80px;
  padding-right: 80px;
}
button {
  border: none;
  background: transparent;
  cursor: pointer;
}
body {
  background: #010103;
}
body.hidden {
  overflow-x: hidden;
}
.navbar-container {
  max-width: 1440px;
  width: 100%;
  position: fixed;
  z-index: 20;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  padding: 0 50px;
  .navbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 15px 30px;
    background: rgba(13, 7, 24, 0.7);
    box-shadow:
      0px 12px 40px 0px rgba(123, 44, 255, 0.18),
      0px 4px 20px 0px rgba(0, 0, 0, 0.35),
      0px 4px 20px 0px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
      img {
        width: 60px;
        min-width: 60px;
      }
      p {
        font-weight: 600;
        font-size: 22px;
        line-height: 33px;
        color: #ffffff;
      }
    }
    .navbar-links {
      display: flex;
      align-items: center;
      gap: 16px;
      max-width: 440px;
      width: 100%;
      justify-content: space-between;
      .nav-link {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        transition: 0.25s ease-in-out;
        text-wrap: nowrap;
        &:hover {
          color: #fdc102;
        }
      }
      .nav-link.active {
        color: #fdc102;
      }
      .nav-link-menu {
        position: relative;
        padding: 18px 0;
        .nav-link-subMenu {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 14px;
          position: absolute;
          left: 0;
          padding: 12px;
          border: 1px solid #262328;
          background: #181819;
          border-radius: 14px;
          width: 150px;
          top: 68px;
          opacity: 0;
          visibility: hidden;
          transition: 0.3s ease-in-out;
        }
        &:hover {
          .nav-link-subMenu {
            opacity: 1;
            visibility: visible;
            top: 58px;
          }
        }
      }
    }
    .navbar-right {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-left: auto;
      .navbar-search {
        padding-bottom: 2px;
        border-bottom: 1px solid #fff;
        width: 300px;
        display: none;
        align-items: center;
        gap: 10px;
        .search-btn,
        .search-close-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          min-width: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          font-weight: 400;
          background: transparent;
          border: none;
          &::placeholder {
            color: #fff;
          }
        }
      }
      .search-open-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        min-width: 24px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .language {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
        .lang-btn {
          display: flex;
          align-items: center;
          gap: 10px;
          border: 1px solid rgba(212, 212, 212, 0.3);
          border-radius: 14px;
          padding: 10px 15px;
          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
          .downIcon {
            width: 24px;
            min-width: 24px;
            height: 24px;
            transition: 0.25s ease-in-out;
          }
        }
        .other-languages {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          position: absolute;
          z-index: 2;
          left: 0;
          top: 62px;
          padding: 12px;
          border: 1px solid rgba(212, 212, 212, 0.3);
          background: #181819;
          border-radius: 14px;
          gap: 8px;
          transition: 0.25s ease-in-out;
          opacity: 0;
          visibility: hidden;
          .lang-item {
            font-size: 14px;
            line-height: 20px;
            color: #f7f7f7;
            font-weight: 400;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            text-align: center;
            transition: 0.25s ease-in-out;
            padding-bottom: 8px;
            &:hover {
              color: #fdc102;
            }
            &:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }
          }
        }
      }
      .language.active {
        .lang-btn {
          .downIcon {
            transform: rotate(180deg);
          }
        }
        .other-languages {
          top: 52px;
          opacity: 1;
          visibility: visible;
        }
      }
      .navbar-busket {
        border: 1px solid rgba(212, 212, 212, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        min-width: 54px;
        height: 46px;
        border-radius: 14px;
        position: relative;
        img {
          width: 24px;
          min-width: 24px;
          height: 24px;
        }
        .nav-busket-count {
          position: absolute;
          top: -8px;
          right: -4px;
          width: 22px;
          height: 22px;
          background: #4f18eb;
          border-radius: 100px;
          font-weight: 400;
          font-size: 13px;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 14px;
          color: #ffffff;
        }
      }
      .login-link {
        padding: 10px 28px;
        background: #4f18eb;
        border-radius: 14px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        transition: 0.3s ease-in-out;
        text-wrap: nowrap;
        &:hover {
          background: #fdc102;
        }
      }
      .nav-profile {
        position: relative;
        .nav-profile-btn {
          display: flex;
          align-items: center;
          gap: 6px;
          border: 1px solid rgba(212, 212, 212, 0.3);
          border-radius: 14px;
          padding: 5px 8px;
          .user-image {
            width: 34px;
            height: 34px;
            min-width: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 100px;
              object-fit: cover;
            }
          }
          .userFname {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
            text-wrap: nowrap;
          }
          .down-icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s ease-in-out;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .nav-profile-menu {
          position: absolute;
          right: 0;
          width: 190px;
          top: 62px;
          border: 1px solid #262328;
          background: #181819;
          border-radius: 14px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
          visibility: hidden;
          opacity: 0;
          transition: 0.3s ease-in-out;
          .profile-menu-item {
            display: flex;
            align-items: center;
            padding: 12px 10px;
            gap: 10px;
            width: 100%;
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            color: #f7f7f7;
            border-radius: 14px;
            transition: 0.3s ease-in-out;
            img {
              width: 18px;
              height: 18px;
              min-width: 18px;
            }
            &:hover {
              background: #404040;
            }
          }
          .profile-menu-bottom {
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid #262328;
            width: 100%;
            .exit-btn {
              display: flex;
              align-items: center;
              padding: 12px 10px;
              gap: 10px;
              width: 100%;
              font-weight: 400;
              font-size: 14px;
              line-height: 21px;
              color: #c32917;
              border-radius: 14px;
              transition: 0.3s ease-in-out;
              img {
                width: 18px;
                height: 18px;
                min-width: 18px;
              }
              &:hover {
                background: #404040;
              }
            }
          }
        }
      }
      .nav-profile.active {
        .nav-profile-btn {
          .down-icon {
            transform: rotate(180deg);
          }
        }
        .nav-profile-menu {
          top: 52px;
          visibility: visible;
          opacity: 1;
        }
      }
      .hamburger {
        display: none;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        min-width: 24px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.home-hero {
  padding-top: 170px;
  padding-bottom: 50px;
  width: 100%;
  position: relative;
  overflow: hidden;
  .home-hero-container {
    max-width: 1440px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 auto;
    .hero-content {
      max-width: 750px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .hero-title {
        font-weight: 700;
        font-size: 64px;
        line-height: 78px;
        color: #f7f7f7;
        span {
          color: #fdc102;
        }
      }
      .hero-description {
        margin-top: 20px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(247, 247, 247, 0.9);
        p,
        li,
        span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: rgba(247, 247, 247, 0.9);
        }
      }
      .hero-link {
        margin-top: 40px;
        position: relative;
        z-index: 1;
        background: linear-gradient(
          88.44deg,
          #4914ec -5.82%,
          #6128d1 23.43%,
          #a06695 60.62%,
          #fdc102 105.15%
        );
        border-radius: 14px;
        height: 50px;
        width: 200px;
        transition: 0.3s ease-in-out;
        p {
          color: #f7f7f7;
          transition: 0.3s ease-in-out;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          position: absolute;
          z-index: 1;
          top: 50%;
          left: 30px;
          transform: translateY(-50%);
        }
        img {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 146px;
          z-index: 0;
          transition: 0.3s ease-in-out;
        }
        &:hover {
          background: #4f18eb;
          p {
            left: 64px;
          }
          img {
            left: 30px;
          }
        }
      }
    }
    .hero-image {
      max-width: 524px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
      }
    }
  }
  .hero-ellipse1 {
    position: absolute;
    z-index: -1;
    width: 880px;
    top: calc(100% - 550px);
    left: -325px;
    animation: hero-ellipse-orbit 25s linear infinite;
  }
  .hero-ellipse2 {
    position: absolute;
    z-index: -1;
    width: 880px;
    top: -330px;
    left: calc(100% - 555px);
    animation: hero-ellipse-orbit 25s linear infinite;
    animation-delay: -12.5s;
  }
}
.popular-products {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .products-tabs-slide {
    margin-top: 50px;
    width: 100%;
    .product-tab-btn {
      padding: 10px;
      min-width: 150px;
      width: max-content;
      border: 1px solid #333139;
      border-radius: 14px;
      color: #f7f7f7;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      transition: 0.3s ease-in-out;
      text-align: center;
      cursor: pointer;
      &:hover {
        border-color: #fdc102;
        color: #fdc102;
      }
    }
    .product-tab-btn.active {
      background: #fdc102;
      border-color: #fdc102;
      color: #0d0c0c;
    }
  }
  .product-items {
    margin-top: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    .product-item {
      border: 1px solid #333139;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
      padding: 30px 20px;
      border-radius: 30px;
      transition: 0.3s ease-in-out;
      .item-head {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
        .product-logo {
          border: 1px solid #333139;
          width: 74px;
          min-width: 74px;
          height: 74px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 14px;
          }
        }
        .product-info {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          .product-name {
            font-weight: 600;
            font-size: 20px;
            line-height: 30px;
            color: #fff;
          }
          .product-description {
            display: flex;
            align-items: center;
            gap: 8px;
            .duration {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #959098;
            }
            .package-type {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #959098;
              padding-left: 12px;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 4px;
                height: 4px;
                border-radius: 100px;
                background: #959098;
              }
            }
          }
        }
      }
      .item-bottom {
        padding-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid #333139;
        .product-price {
          font-weight: 600;
          font-size: 26px;
          line-height: 38px;
          color: #fdc102;
        }
        .product-more {
          padding: 10px 22px;
          color: #f7f7f7;
          background: #0f0b17;
          border-radius: 14px;
          border: 1px solid #231f2d;
          font-weight: 400;
          font-size: 14px;
          line-height: 21px;
          transition: 0.3s ease-in-out;
          &:hover {
            background: #6e33c4;
          }
        }
      }
      &:hover {
        background: rgba(13, 7, 24, 0.7);
        border: 1px solid rgba(123, 44, 255, 0.8);
        box-shadow:
          0px 12px 40px 0px rgba(123, 44, 255, 0.18),
          0px 4px 20px 0px rgba(0, 0, 0, 0.35),
          0px 4px 20px 0px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(20px);
      }
    }
  }
  .all-products {
    margin: 80px auto 0;
    display: flex;
    align-items: center;
    width: max-content;
    gap: 20px;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #f7f7f7;
    opacity: 0.7;
    transition: 0.3s ease-in-out;
    img {
      width: 24px;
      height: 24px;
      min-width: 24px;
    }
    &:hover {
      opacity: 1;
    }
  }
}
.whyUs-container {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    text-align: center;
    color: #f7f7f7;
  }
  .section-shortDesc {
    margin: 20px auto 0;
    max-width: 550px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: rgba(247, 247, 247, 0.9);
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: rgba(247, 247, 247, 0.9);
    }
  }
  .whyUs-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 80px;
    view-timeline-name: --whyUsCards;
    view-timeline-axis: block;
    .whyUs-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding: 130px;
      border-radius: 30px;
      position: sticky;
      top: 180px;
      transform-origin: center top;
      will-change: transform;
      @supports (animation-timeline: view()) {
        animation: whyUsCardShrink linear both;
        animation-timeline: --whyUsCards;
        animation-range: calc(100% * (sibling-index() - 1) / sibling-count())
          calc(100% * sibling-index() / sibling-count());
      }
      .card-image {
        width: 430px;
        min-width: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 100%;
          height: auto;
        }
      }
      .card-content {
        max-width: 470px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .card-title {
          font-weight: 600;
          font-size: 40px;
          line-height: 54px;
          color: #ffffff;
        }
        .card-description {
          margin-top: 16px;
          font-weight: 400;
          font-size: 18px;
          line-height: 28px;
          color: rgba(247, 247, 247, 0.9);
          p,
          li,
          span {
            font-weight: 400;
            font-size: 18px;
            line-height: 28px;
            color: rgba(247, 247, 247, 0.9);
          }
        }
        .card-tag {
          margin-top: 30px;
          display: flex;
          align-items: center;
          padding: 10px 20px;
          gap: 10px;
          border-radius: 14px;
          .icon {
            width: 30px;
            height: 30px;
            min-width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f7f7f7;
            border-radius: 100px;
            img {
              width: 16px;
              height: 16px;
            }
          }
          p {
            font-weight: 600;
            font-size: 14px;
            line-height: 21px;
            color: #f7f7f7;
          }
        }
      }
      &:nth-child(3n + 1) {
        background: linear-gradient(90deg, #4f18eb 0%, #0e163e 100%);
        .card-image {
          img {
            filter: drop-shadow(0px 40px 60px rgba(113, 92, 255, 0.45));
          }
        }
        .card-content {
          .card-tag {
            background: #0d1c4c;
          }
        }
      }
      &:nth-child(3n + 2) {
        background: linear-gradient(90deg, #fdc102 0%, #e3a705 72.6%);
        .card-image {
          img {
            filter: drop-shadow(0px 40px 100px #f5c64673)
              drop-shadow(4px 6px 12px #9e9e9e40);
          }
        }
        .card-content {
          .card-tag {
            background: #d79f06;
          }
        }
      }
      &:nth-child(3n + 3) {
        background: #733ae3;
        .card-image {
          img {
            filter: drop-shadow(0px 24px 70px rgba(123, 44, 255, 0.3));
          }
        }
        .card-content {
          .card-tag {
            background: #5944ad;
          }
        }
      }
    }
  }
}
@keyframes whyUsCardShrink {
  to {
    transform: scale(0.8);
  }
}
.customerReview-container {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    text-align: center;
    color: #f7f7f7;
  }
  .section-shortDesc {
    margin: 20px auto 0;
    max-width: 550px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: rgba(247, 247, 247, 0.9);
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: rgba(247, 247, 247, 0.9);
    }
  }
  .customerReview-sliders {
    position: relative;
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: 760px;
    overflow: hidden;
    width: 100%;
    /* üstdən kölgə */
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: linear-gradient(180deg, #010103 0%, rgba(1, 1, 3, 0) 100%);
      pointer-events: none;
      z-index: 2;
    }
    /* aşağıdan kölgə */
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: linear-gradient(180deg, rgba(1, 1, 3, 0) 0%, #010103 100%);
      pointer-events: none;
      z-index: 2;
    }
    .review-column {
      overflow: hidden;
      .review-track {
        display: flex;
        flex-direction: column;
        gap: 16px;
        will-change: transform;
        .review-card {
          background: #0f121c;
          border: 1px solid #28283c;
          padding: 30px;
          border-radius: 14px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          width: 100%;
          .quote-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .review-text {
            margin-top: 10px;
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
            p,
            li,
            span {
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              color: #f7f7f7;
            }
          }
          .review-author {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 20px;
            .review-avatar {
              width: 50px;
              height: 50px;
              min-width: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100px;
              border: 1px solid #6e33c4;
              background: #161327;
              font-weight: 800;
              font-size: 18px;
              line-height: 27px;
              color: #6e33c4;
            }
            .review-author-info {
              padding-left: 20px;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 2px;
              border-left: 1px solid #2b2e3e;
              .review-name {
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: #f7f7f7;
              }
              .review-role {
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: #959098;
              }
            }
          }
        }
      }
      .review-track.scroll-up {
        animation: review-scroll-up 32s linear infinite;
      }
      .review-track.scroll-down {
        animation: review-scroll-down 32s linear infinite;
      }
    }
    &:hover {
      .review-column {
        .review-track {
          animation-play-state: paused;
        }
      }
    }
  }
  .mobileCustomerReview-sliders {
    width: 100%;
    margin-top: 60px;
    display: none;
    .review-card {
      background: #0f121c;
      border: 1px solid #28283c;
      padding: 30px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 353px;
      height: auto;
      .quote-icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .review-text {
        margin-top: 10px;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        p,
        li,
        span {
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
        }
      }
      .review-author {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 20px;
        .review-avatar {
          width: 50px;
          height: 50px;
          min-width: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 100px;
          border: 1px solid #6e33c4;
          background: #161327;
          font-weight: 800;
          font-size: 18px;
          line-height: 27px;
          color: #6e33c4;
        }
        .review-author-info {
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          border-left: 1px solid #2b2e3e;
          .review-name {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
          .review-role {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #959098;
          }
        }
      }
    }
  }
}
.homeBlogs {
  width: 100%;
  margin-top: 120px;
  padding: 100px 0;
  background: #06061b;
  .homeBlogs-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    .section-title {
      font-weight: 700;
      font-size: 64px;
      line-height: 78px;
      text-align: center;
      color: #f7f7f7;
    }
    .section-shortDesc {
      margin: 20px auto 0;
      max-width: 550px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: rgba(247, 247, 247, 0.9);
      p,
      li,
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        color: rgba(247, 247, 247, 0.9);
      }
    }
    .homeBlogs-slide {
      margin-top: 80px;
      width: 100%;
      .blog-card {
        width: 413px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .card-image {
          width: 100%;
          height: 350px;
          border-radius: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            object-fit: cover;
          }
        }
        .card-body {
          margin-top: 20px;
          .blog-date {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #959098;
          }
          .blog-name {
            margin-top: 10px;
            font-weight: 600;
            font-size: 24px;
            line-height: 36px;
            color: #f7f7f7;
          }
        }
      }
    }
  }
}
.faq-container {
  max-width: 1440px;
  width: 100%;
  margin: 120px auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  .faq-content {
    max-width: 430px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .label {
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #fdc102;
    }
    .section-title {
      font-weight: 700;
      font-size: 64px;
      line-height: 78px;
      color: #f7f7f7;
      margin-top: 10px;
    }
    .section-shortDesc {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: rgba(247, 247, 247, 0.9);
      p,
      li,
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(247, 247, 247, 0.9);
      }
    }
  }
  .faq-items {
    max-width: 740px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    .faq-item {
      background: #0f121c;
      border-radius: 14px;
      width: 100%;
      padding: 16px 30px;
      transition: 0.3s ease-in-out;
      .faq-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
        text-align: left;
        .question-title {
          font-weight: 500;
          font-size: 18px;
          line-height: 27px;
          color: #f7f7f7;
        }
        .icon {
          transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .faq-answer {
        height: 0;
        overflow: hidden;
        transition: height 0.4s ease-in-out;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #f7f7f7;
      }

      .faq-answer p {
        padding-top: 16px;
        margin: 0;
      }

      .icon.active {
        transform: rotate(45deg);
      }
      &:hover {
        background: #20202e;
      }
    }
  }
}
footer {
  width: 100%;
  margin-top: 120px;
  padding-top: 80px;
  border-top: 1px solid #333139;
  position: relative;
  overflow: hidden;
  .footer-ellipse1 {
    position: absolute;
    z-index: -1;
    left: -280px;
    top: -200px;
    width: 744px;
  }
  .footer-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    .footer-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      width: 100%;
      .footer-info {
        max-width: 280px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .logo {
          width: 120px;
          height: 120px;
          min-width: 120px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .footer-address {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          margin-top: 40px;
        }
        .footer-phone {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          margin-top: 24px;
          a {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
        }
        .footer-mail {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          margin-top: 24px;
          a {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #fdc102;
          }
        }
      }
      .footer-link-sections {
        max-width: 800px;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
        margin-top: 36px;
        .footer-link-section {
          max-width: 200px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 20px;
          .section-title {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            text-transform: uppercase;
            color: #6d6b6e;
          }
          .section-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            .link-item {
              font-weight: 500;
              font-size: 18px;
              line-height: 27px;
              color: #f7f7f7;
            }
            .view-all {
              color: #4f18eb;
              font-weight: 500;
              font-size: 18px;
              line-height: 27px;
            }
          }
        }
      }
    }
    .footer-socials-language {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 60px;
      .footer-socials {
        display: flex;
        align-items: center;
        gap: 12px;
        .social-item {
          width: 40px;
          height: 40px;
          min-width: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 100px;
          background: rgba(244, 244, 246, 0.8);
          transition: 0.3s ease-in-out;
          img {
            width: 24px;
            height: 24px;
          }
          &:hover {
            background: #f7f7f7;
          }
        }
      }
      .language {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
        .lang-btn {
          display: flex;
          align-items: center;
          gap: 10px;
          border-radius: 14px;
          .earch-icon {
            width: 28px;
            min-width: 28px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #4f18eb;
            border-radius: 8px;
            img {
              width: 16px;
              height: 16px;
            }
          }
          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
          .downIcon {
            width: 24px;
            min-width: 24px;
            height: 24px;
            transition: 0.25s ease-in-out;
          }
        }
        .other-languages {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          position: absolute;
          z-index: 2;
          left: 0;
          top: 42px;
          padding: 12px;
          border: 1px solid #262328;
          background: #181819;
          border-radius: 14px;
          gap: 8px;
          transition: 0.25s ease-in-out;
          opacity: 0;
          visibility: hidden;
          .lang-item {
            font-size: 14px;
            line-height: 20px;
            color: #f7f7f7;
            font-weight: 400;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            text-align: center;
            transition: 0.25s ease-in-out;
            padding-bottom: 8px;
            &:hover {
              color: #fdc102;
            }
            &:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }
          }
        }
      }
      .language.active {
        .lang-btn {
          .downIcon {
            transform: rotate(180deg);
          }
        }
        .other-languages {
          top: 32px;
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .footer-copyright {
      border-top: 1px solid #242131;
      width: 100%;
      margin-top: 60px;
      padding: 30px 0;
      p {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        text-align: center;
      }
    }
  }
}
.busket-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  display: none;
  align-items: flex-start;
  justify-content: end;
  z-index: 21;
  .busket {
    max-width: 530px;
    width: 100%;
    max-height: 100%;
    background: #171717;
    .busket-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 30px;
      border-bottom: 1px solid #404040;
      .busket-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        img {
          width: 24px;
          height: 24px;
          min-width: 24px;
        }
        p {
          font-weight: 600;
          font-size: 30px;
          line-height: 45px;
          color: #ffffff;
        }
      }
      .closeBusket {
        width: 24px;
        height: 24px;
        min-width: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .busket-list {
      padding: 50px 30px;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #404040;
      width: 100%;
      height: calc(100svh - 272px);
      max-height: 480px;
      overflow-y: auto;
      gap: 20px;
      .busket-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        .product-logo {
          width: 90px;
          height: 90px;
          min-width: 90px;
          border: 1px solid #333139;
          border-radius: 14px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 14px;
            object-fit: cover;
          }
        }
        .product-info {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          .product-name {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: #fff;
          }
          .product-description {
            display: flex;
            align-items: center;
            gap: 8px;
            .duration {
              font-weight: 500;
              font-size: 14px;
              line-height: 20px;
              color: #959098;
            }
            .package-type {
              font-weight: 500;
              font-size: 14px;
              line-height: 20px;
              color: #959098;
              padding-left: 12px;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 4px;
                height: 4px;
                border-radius: 100px;
                background: #959098;
              }
            }
          }
          .counter {
            display: flex;
            align-items: center;
            background: #171817;
            border: 1px solid #2e2e2e;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            max-width: 104px;
            width: 100%;
            padding: 4px 10px;
            margin-top: 8px;
            border-radius: 14px;
            input {
              background: transparent;
              width: max-content;
              max-width: 30px;
              text-align: center;
              border: none;
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              color: #fff;
            }
            .counterBtn {
              width: 24px;
              height: 24px;
              min-width: 24px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100px;
              background: #1d1c1c;
              transition: 0.2s ease-in-out;
              img {
                width: 100%;
                height: 100%;
              }
              &:hover {
                background: #333232;
              }
            }
          }
        }
        .item-right {
          margin-left: auto;
          display: flex;
          flex-direction: column;
          align-items: end;
          gap: 30px;
          .product-price {
            font-weight: 600;
            font-size: 20px;
            line-height: 30px;
            color: #f7f7f7;
            text-align: right;
          }
          .removeProduct {
            width: 24px;
            height: 24px;
            min-width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .busket-bottom {
      width: 100%;
      padding: 30px;
      .busket-total {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .total-label {
          font-weight: 500;
          font-size: 20px;
          line-height: 30px;
          color: #959098;
        }
        .total-value {
          font-weight: 700;
          font-size: 22px;
          line-height: 33px;
          color: #f7f7f7;
        }
      }
      .complateOrderBtn {
        margin-top: 30px;
        width: 100%;
        background: #fdc102;
        border-radius: 100px;
        text-align: center;
        padding: 8px;
        font-weight: 600;
        font-size: 18px;
        line-height: 27px;
        color: #0d0c0c;
        transition: 0.3s ease-in-out;
        &:hover {
          background: #c79a09;
        }
      }
    }
  }
}
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 21;
  transition: 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  .mobile-menu-inner {
    width: 100%;
    height: 500px;
    border-radius: 0 0 30px 30px;
    background: #1c1e22;
    padding: 40px 20px;
    .mobile-menu-head {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 16px;
      .mobile-search {
        border: 1px solid rgba(212, 212, 212, 0.3);
        border-radius: 14px;
        padding: 8px 16px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        .mobile-search-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          min-width: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          font-size: 16px;
          line-height: 24px;
          color: #fff;
          font-weight: 400;
          background: transparent;
          border: none;
          &::placeholder {
            color: #fff;
          }
        }
      }
      .language {
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
        .lang-btn {
          display: flex;
          align-items: center;
          gap: 10px;
          border: 1px solid rgba(212, 212, 212, 0.3);
          border-radius: 14px;
          padding: 8px 16px;
          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
          .downIcon {
            width: 24px;
            min-width: 24px;
            height: 24px;
            transition: 0.25s ease-in-out;
          }
        }
        .other-languages {
          display: flex;
          flex-direction: column;
          align-items: start;
          width: 100%;
          position: absolute;
          z-index: 2;
          left: 0;
          top: 62px;
          padding: 12px;
          border: 1px solid rgba(212, 212, 212, 0.3);
          background: #1c1e22;
          border-radius: 14px;
          gap: 8px;
          transition: 0.25s ease-in-out;
          opacity: 0;
          visibility: hidden;
          .lang-item {
            font-size: 14px;
            line-height: 20px;
            color: #f7f7f7;
            font-weight: 400;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            text-align: center;
            transition: 0.25s ease-in-out;
            padding-bottom: 8px;
            &:hover {
              color: #fdc102;
            }
            &:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }
          }
        }
      }
      .language.active {
        .lang-btn {
          .downIcon {
            transform: rotate(180deg);
          }
        }
        .other-languages {
          top: 52px;
          opacity: 1;
          visibility: visible;
        }
      }
    }
    .mobile-menu-links {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      .menu-link {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #f7f7f7;
      }
      .menu-link.active {
        color: #fdc102;
      }
    }
  }
}
.mobile-menu.showed {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.breadcrumb-container {
  max-width: 1440px;
  width: 100%;
  margin: 170px auto 0;
  display: flex;
  align-items: center;
  gap: 6px;
  .breadcrumb-item {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: rgba(247, 247, 247, 0.6);
    white-space: nowrap;
  }
  .breadcrumb-item.active {
    color: #f7f7f7;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .seperate {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.products {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .products-tabs-slide {
    margin-top: 50px;
    width: 100%;
    .product-tab-btn {
      padding: 10px;
      min-width: 150px;
      width: max-content;
      border: 1px solid #333139;
      border-radius: 14px;
      color: #f7f7f7;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      transition: 0.3s ease-in-out;
      text-align: center;
      cursor: pointer;
      &:hover {
        border-color: #fdc102;
        color: #fdc102;
      }
    }
    .product-tab-btn.active {
      background: #fdc102;
      border-color: #fdc102;
      color: #0d0c0c;
    }
  }
  .product-items {
    margin-top: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    .product-item {
      border: 1px solid #333139;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
      padding: 30px 20px;
      border-radius: 30px;
      transition: 0.3s ease-in-out;
      .item-head {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
        .product-logo {
          border: 1px solid #333139;
          width: 74px;
          min-width: 74px;
          height: 74px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 14px;
          }
        }
        .product-info {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          .product-name {
            font-weight: 600;
            font-size: 20px;
            line-height: 30px;
            color: #fff;
          }
          .product-description {
            display: flex;
            align-items: center;
            gap: 8px;
            .duration {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #959098;
            }
            .package-type {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #959098;
              padding-left: 12px;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 4px;
                height: 4px;
                border-radius: 100px;
                background: #959098;
              }
            }
          }
        }
      }
      .item-bottom {
        padding-top: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-top: 1px solid #333139;
        .product-price {
          font-weight: 600;
          font-size: 26px;
          line-height: 38px;
          color: #fdc102;
        }
        .product-more {
          padding: 10px 22px;
          color: #f7f7f7;
          background: #0f0b17;
          border-radius: 14px;
          border: 1px solid #231f2d;
          font-weight: 400;
          font-size: 14px;
          line-height: 21px;
          transition: 0.3s ease-in-out;
          &:hover {
            background: #6e33c4;
          }
        }
      }
      &:hover {
        background: rgba(13, 7, 24, 0.7);
        border: 1px solid rgba(123, 44, 255, 0.8);
        box-shadow:
          0px 12px 40px 0px rgba(123, 44, 255, 0.18),
          0px 4px 20px 0px rgba(0, 0, 0, 0.35),
          0px 4px 20px 0px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(20px);
      }
    }
  }
  .pagination {
    margin-top: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    .pagination-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 32px;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
    .pagination-item.active {
      background: #4f18eb;
    }
    .pagination-point {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 32px;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
  }
}
.product-detail-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .detail-main {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    .product-image {
      width: 100%;
      height: auto;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 30px;
      }
    }
    .main-info {
      width: 100%;
      background: #111418;
      border: 1px solid #1c1e22;
      padding: 40px 50px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border-radius: 30px;
      .pro-category {
        background: rgba(73, 0, 109, 0.2);
        border: 1px solid #8d56a8;
        padding: 10px 26px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #8d56a8;
        border-radius: 10px;
      }
      .pro-name {
        margin-top: 20px;
        font-weight: 700;
        font-size: 40px;
        line-height: 48px;
        color: #f7f7f7;
      }
      .pro-ratingReview-info {
        margin-top: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        .pro-rating {
          display: flex;
          align-items: center;
          gap: 6px;
          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }
          p {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #ffffff;
          }
        }
        .pro-reviews {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #ffffff;
        }
      }
      .pro-desc {
        margin-top: 16px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(247, 247, 247, 0.9);
        p,
        li,
        span {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: rgba(247, 247, 247, 0.9);
        }
      }
      .pro-pricing {
        margin-top: 20px;
        width: 100%;
        .pricing-label {
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          text-transform: uppercase;
          color: #f7f7f7;
        }
        .pricings {
          width: 100%;
          margin-top: 20px;
          padding-bottom: 20px;
          border-bottom: 1px solid #2b2d31;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px 14px;
          .pricing-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            border: 1px solid #262333;
            border-radius: 10px;
            padding: 14px;
            position: relative;
            transition: 0.3s ease-in-out;
            .pricing-duration {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #f7f7f7;
            }
            .pricing-price {
              margin-top: 4px;
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #f7f7f7;
              transition: 0.3s ease-in-out;
            }
            input {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 2;
              width: 100%;
              height: 100%;
              opacity: 0;
              cursor: pointer;
            }
            .pricing-discount {
              background: linear-gradient(180deg, #5426b7 0%, #401c71 100%);
              border-radius: 100px;
              position: absolute;
              right: 8px;
              top: -10px;
              z-index: 1;
              font-weight: 400;
              font-size: 12px;
              line-height: 18px;
              padding: 2px 8px;
              color: #fff;
            }
          }
          .pricing-item.active {
            border-color: #fdc102;
            .pricing-price {
              color: #fdc102;
            }
          }
        }
      }
      .pro-plan-info {
        margin-top: 22px;
        display: flex;
        align-items: center;
        .pro-price {
          font-weight: 800;
          font-size: 40px;
          line-height: 60px;
          color: #fdc102;
        }
        .pro-oldPrice {
          font-weight: 500;
          font-size: 24px;
          line-height: 32px;
          color: #f7f7f7;
          text-decoration: line-through;
        }
        .pro-duration {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          position: relative;
          padding-left: 18px;
          margin-left: 40px;
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: 100px;
            background: #fdc102;
          }
        }
        .pro-type {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          position: relative;
          padding-left: 18px;
          margin-left: 20px;
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 8px;
            height: 8px;
            border-radius: 100px;
            background: #8d56a8;
          }
        }
      }
      .pro-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 20px;
        gap: 20px;
        .buy-now {
          width: 100%;
          padding: 10px;
          border: 1px solid #fdc102;
          border-radius: 100px;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #ffffff;
          text-align: center;
          background: transparent;
          transition: 0.3s ease-in-out;
          &:hover {
            background: #fdc102;
          }
        }
        .add-busket {
          width: 100%;
          padding: 10px;
          border: 1px solid #fdc102;
          border-radius: 100px;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #ffffff;
          text-align: center;
          background: #fdc102;
          transition: 0.3s ease-in-out;
          &:hover {
            background: #c99e17;
            border-color: #c99e17;
          }
        }
      }
      .info-note {
        width: 100%;
        margin-top: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 100px;
        background: #15181c;
        border: 1px solid #191c1f;
        padding: 13px 16px;
        img {
          width: 18px;
          height: 18px;
          min-width: 18px;
        }
        p {
          font-weight: 500;
          font-size: 14px;
          line-height: 21px;
          color: #c9cacc;
        }
      }
    }
  }
  .detail-information {
    margin-top: 50px;
    width: 100%;
    background: #111418;
    border: 1px solid #1c1e22;
    border-radius: 30px;
    padding: 80px 80px 20px;
    position: relative;
    .detail-info-buttons {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      position: relative;
      z-index: 2;
      .detail-info-btn {
        border: 1px solid #333139;
        border-radius: 100px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        padding: 10px;
        transition: 0.3s ease-in-out;
        &:hover {
          border-color: #fdc102;
          background: #fdc102;
          color: #0d0c0c;
        }
      }
      .detail-info-btn.active {
        border-color: #fdc102;
        background: #fdc102;
        color: #0d0c0c;
      }
    }
    .detail-info-content {
      margin-top: 56px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
      display: none;
      height: 240px;
      overflow: hidden;
      -webkit-box-orient: vertical;
      display: none;
      -webkit-line-clamp: 10;
      p,
      li,
      span {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
      }
    }
    .detail-info-content.showed {
      height: auto;
      overflow: auto;
      display: block !important;
      -webkit-box-orient: initial;
      -webkit-line-clamp: initial;
    }
    .readmore-btn {
      margin: 20px auto 0;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: rgba(253, 193, 2, 0.8);
      border: 1px solid #fdc102cc;
      border-radius: 14px;
      padding: 10px 15px;
      transition: 0.3s ease-in-out;
      position: relative;
      z-index: 2;
      p {
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(253, 193, 2, 0.8);
      }
      .showless {
        display: none;
      }
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
        transition: 0.3s ease-in-out;
      }
    }
    .readmore-btn.showed {
      .showless {
        display: block;
      }
      .moreTxt {
        display: none;
      }
      img {
        transform: rotate(180deg);
      }
    }
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 140px;
      border-radius: 0 0 30px 30px;
      background: linear-gradient(
        180deg,
        rgba(1, 1, 3, 0) -45.9%,
        #010103 100%
      );
    }
  }
  .detail-information.showed {
    &::after {
      display: none;
    }
  }
  .customer-review {
    margin-top: 120px;
    width: 100%;
    position: relative;
    .section-title {
      font-weight: 700;
      font-size: 64px;
      line-height: 78px;
      color: #f7f7f7;
    }
    .swiper-buttons {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      top: 14px;
      .swiper-button-prev,
      .swiper-button-next {
        position: initial;
        margin: 0;
        width: 50px;
        min-width: 50px;
        height: 50px;
        border: 1px solid #28283c;
        border-radius: 100px;
        transition: 0.3s ease-in-out;
        &::after {
          color: #fff;
          font-size: 14px;
        }
        &:hover {
          background: #232427;
        }
      }
    }
    .customer-review-slide {
      width: 100%;
      margin-top: 80px;
      .review-card {
        height: auto;
        width: 413px;
        background: #0f121c;
        border: 1px solid #28283c;
        padding: 30px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .quote-icon {
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .review-text {
          margin-top: 10px;
          margin-bottom: 20px;
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          p,
          li,
          span {
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
        }
        .review-author {
          margin-top: auto;
          display: flex;
          align-items: center;
          gap: 20px;
          .review-avatar {
            width: 50px;
            height: 50px;
            min-width: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100px;
            border: 1px solid #6e33c4;
            background: #161327;
            font-weight: 800;
            font-size: 18px;
            line-height: 27px;
            color: #6e33c4;
          }
          .review-author-info {
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            border-left: 1px solid #2b2e3e;
            .review-name {
              font-weight: 500;
              font-size: 16px;
              line-height: 24px;
              color: #f7f7f7;
            }
            .review-role {
              font-weight: 400;
              font-size: 16px;
              line-height: 24px;
              color: #959098;
            }
          }
        }
      }
    }
  }
  .similar-products {
    margin-top: 120px;
    width: 100%;
    position: relative;
    .section-title {
      font-weight: 700;
      font-size: 64px;
      line-height: 78px;
      color: #f7f7f7;
    }
    .swiper-buttons {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      top: 14px;
      .swiper-button-prev,
      .swiper-button-next {
        position: initial;
        margin: 0;
        width: 50px;
        min-width: 50px;
        height: 50px;
        border: 1px solid #28283c;
        border-radius: 100px;
        transition: 0.3s ease-in-out;
        &::after {
          color: #fff;
          font-size: 14px;
        }
        &:hover {
          background: #232427;
        }
      }
    }
    .similar-products-slide {
      width: 100%;
      margin-top: 80px;
      .product-item {
        border: 1px solid #333139;
        width: 305px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 30px 20px;
        border-radius: 30px;
        transition: 0.3s ease-in-out;
        .item-head {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 20px;
          .product-logo {
            border: 1px solid #333139;
            width: 74px;
            min-width: 74px;
            height: 74px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 14px;
            }
          }
          .product-info {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            .product-name {
              font-weight: 600;
              font-size: 20px;
              line-height: 30px;
              color: #fff;
            }
            .product-description {
              display: flex;
              align-items: center;
              gap: 8px;
              .duration {
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: #959098;
              }
              .package-type {
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: #959098;
                padding-left: 12px;
                position: relative;
                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0;
                  width: 4px;
                  height: 4px;
                  border-radius: 100px;
                  background: #959098;
                }
              }
            }
          }
        }
        .item-bottom {
          padding-top: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          border-top: 1px solid #333139;
          .product-price {
            font-weight: 600;
            font-size: 26px;
            line-height: 38px;
            color: #fdc102;
          }
          .product-more {
            padding: 10px 22px;
            color: #f7f7f7;
            background: #0f0b17;
            border-radius: 14px;
            border: 1px solid #231f2d;
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            transition: 0.3s ease-in-out;
            &:hover {
              background: #6e33c4;
            }
          }
        }
        &:hover {
          background: rgba(13, 7, 24, 0.7);
          border: 1px solid rgba(123, 44, 255, 0.8);
          box-shadow:
            0px 12px 40px 0px rgba(123, 44, 255, 0.18),
            0px 4px 20px 0px rgba(0, 0, 0, 0.35),
            0px 4px 20px 0px rgba(0, 0, 0, 0.35);
          backdrop-filter: blur(20px);
        }
      }
    }
  }
}
.about-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .about-content {
    margin-top: 80px;
    background: #111418;
    border: 1px solid #1c1e22;
    border-radius: 30px;
    width: 100%;
    padding: 60px 50px;
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
    * {
      color: #f7f7f7;
    }
  }
}
.terms-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .terms-content {
    margin-top: 80px;
    background: #111418;
    border: 1px solid #1c1e22;
    border-radius: 30px;
    width: 100%;
    padding: 60px 50px;
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
    * {
      color: #f7f7f7;
    }
  }
}
.privacyPolicy-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .privacyPolicy-content {
    margin-top: 80px;
    background: #111418;
    border: 1px solid #1c1e22;
    border-radius: 30px;
    width: 100%;
    padding: 60px 50px;
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }
    * {
      color: #f7f7f7;
    }
  }
}
.reviews-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .reviews {
    margin-top: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    .review-card {
      height: auto;
      width: 100%;
      background: #0f121c;
      border: 1px solid #28283c;
      padding: 30px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .quote-icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .review-text {
        margin-top: 10px;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        p,
        li,
        span {
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
        }
      }
      .review-author {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 20px;
        .review-avatar {
          width: 50px;
          height: 50px;
          min-width: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 100px;
          border: 1px solid #6e33c4;
          background: #161327;
          font-weight: 800;
          font-size: 18px;
          line-height: 27px;
          color: #6e33c4;
        }
        .review-author-info {
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          border-left: 1px solid #2b2e3e;
          .review-name {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
            color: #f7f7f7;
          }
          .review-role {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            color: #959098;
          }
        }
      }
    }
  }
  .pagination {
    margin-top: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    .pagination-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 32px;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
    .pagination-item.active {
      background: #4f18eb;
    }
    .pagination-point {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 32px;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
  }
}
.blogs-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .blogs {
    margin-top: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    .blog-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .card-image {
        width: 100%;
        height: 350px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
          border-radius: 30px;
          object-fit: cover;
        }
      }
      .card-body {
        margin-top: 20px;
        .blog-date {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          color: #959098;
        }
        .blog-name {
          margin-top: 10px;
          font-weight: 600;
          font-size: 24px;
          line-height: 36px;
          color: #f7f7f7;
        }
      }
    }
  }
  .pagination {
    margin-top: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    .pagination-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 32px;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
    .pagination-item.active {
      background: #4f18eb;
    }
    .pagination-point {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 32px;
      border-radius: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
  }
}
.blogDetail-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .blogDetail-image {
    width: 100%;
    height: auto;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: auto;
      border-radius: 30px;
    }
  }
  .blogDetail-properties {
    margin-top: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    .property-item {
      display: flex;
      align-items: center;
      gap: 10px;
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
      }
      p {
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #ffffff;
      }
    }
  }
  .blog-title {
    margin-top: 40px;
    font-weight: 700;
    font-size: 40px;
    line-height: 60px;
    color: #f7f7f7;
  }
  .blogDetail-content {
    width: 100%;
    margin-top: 40px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #f7f7f7;
    p,
    li,
    span {
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
    }
  }
}
.contact-container {
  max-width: 1440px;
  width: 100%;
  margin: 50px auto 0;
  .section-title {
    font-weight: 700;
    font-size: 64px;
    line-height: 78px;
    color: #f7f7f7;
  }
  .contact-form {
    margin-top: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    .form-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      label {
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        color: #f7f7f7;
      }
      input,
      textarea {
        width: 100%;
        border: 1px solid #1d1d1d;
        background: #0f121c;
        padding: 14px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        border-radius: 14px;
        &::placeholder {
          color: #959098;
        }
      }
      .err-msg {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #c32917;
      }
      textarea {
        height: 160px;
        resize: none;
      }
    }
    .submit-form {
      margin: 60px auto 0;
      max-width: 450px;
      width: 100%;
      text-align: center;
      background: #6e33c4;
      border-radius: 100px;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
      padding: 10px;
      transition: 0.3s ease-in-out;
      &:hover {
        background: #fdc102;
      }
    }
  }
  .contact-boxes {
    margin-top: 120px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    .contact-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 50px 30px;
      border: 1px solid #171721;
      box-shadow: 2px 4px 19px 2px rgba(42, 42, 43, 0.25);
      background: rgba(44, 45, 50, 0.6);
      border-radius: 14px;
      .icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        background: rgba(253, 193, 2, 0.16);
        img {
          width: 30px;
          height: 30px;
        }
      }
      .box-title {
        margin-top: 20px;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: #ffffff;
      }
      .box-desc {
        margin-top: 6px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #959098;
      }
    }
  }
  .map {
    margin-top: 120px;
    width: 100%;
    height: 550px;
    border-radius: 30px;
    filter: grayscale(100%);
    iframe {
      width: 100%;
      height: 100%;
      border-radius: 30px;
    }
  }
}
.dashboard-container {
  max-width: 1440px;
  width: 100%;
  margin: 170px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  .dashboard-menu {
    min-width: 350px;
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid #333139;
    border-radius: 30px;
    padding: 40px 20px;
    .dashboard-menu-item {
      display: flex;
      align-items: center;
      padding: 12px 10px;
      gap: 10px;
      width: 100%;
      font-weight: 400;
      font-size: 18px;
      line-height: 27px;
      color: #f7f7f7;
      border-radius: 14px;
      transition: 0.3s ease-in-out;
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
        transition: 0.3s ease-in-out;
      }
      &:hover {
        background: #fff;
        color: #000;
        img {
          filter: brightness(0);
        }
      }
    }
    .dashboard-menu-item.active {
      background: #fff;
      color: #000;
      img {
        filter: brightness(0);
      }
    }
    .dashboard-menu-bottom {
      margin-top: 170px;
      padding-top: 20px;
      border-top: 1px solid #262328;
      width: 100%;
      .exit-btn {
        display: flex;
        align-items: center;
        padding: 12px 10px;
        gap: 10px;
        width: 100%;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #c32917;
        border-radius: 14px;
        transition: 0.3s ease-in-out;
        img {
          width: 18px;
          height: 18px;
          min-width: 18px;
        }
        &:hover {
          background: #fff;
        }
      }
    }
  }
  .profile-setting {
    width: calc(100% - 370px);
    border: 1px solid #333139;
    background: #101218;
    border-radius: 30px;
    padding: 40px;
    .edit-profile-image {
      position: relative;
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #8d56a8;
      border-radius: 100px;
      padding: 5px;
      margin: 0 auto;
      input {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }
      .userImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100px;
      }
      .photo-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        background: #fdc102;
        position: absolute;
        right: 0;
        bottom: 0;
        img {
          width: 20px;
          height: 20px;
          min-width: 20px;
        }
      }
    }
    .userFname {
      margin: 12px auto 0;
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      color: #fff;
      text-align: center;
    }
    .profile-setting-label {
      margin: 4px auto 0;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #fdc102;
      text-align: center;
    }
    .form-items {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin-top: 40px;
      gap: 20px;
      .form-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        label {
          font-weight: 500;
          font-size: 18px;
          line-height: 27px;
          color: #f7f7f7;
        }
        input,
        textarea {
          width: 100%;
          border: 1px solid #1d1d1d;
          background: #0b0c12;
          padding: 14px;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          color: #f7f7f7;
          border-radius: 14px;
          &::placeholder {
            color: #959098;
          }
        }
        .err-msg {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #c32917;
        }
        textarea {
          height: 160px;
          resize: none;
        }
      }
    }
    .form-buttons {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 40px;
      gap: 16px;
      .cancelEdit {
        border: 1px solid #27272c;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #fff;
        border-radius: 14px;
        padding: 10px 34px;
      }
      .saveEdit {
        border: 1px solid #fdc102;
        background: #fdc102;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #0d0c0c;
        border-radius: 14px;
        padding: 10px 40px;
      }
    }
  }
  .myorders {
    width: calc(100% - 370px);
    border: 1px solid #333139;
    background: #101218;
    border-radius: 30px;
    padding: 40px;
    .section-title {
      font-weight: 600;
      font-size: 24px;
      line-height: 36px;
      color: #fff;
    }
    .short-desc {
      margin-top: 2px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #6f6e76;
    }
    .myOrder-tabs {
      margin-top: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
      .my-order-tab {
        white-space: nowrap;
        padding: 8px 16px;
        border: 1px solid #333139;
        border-radius: 14px;
        min-width: 126px;
        color: #f7f7f7;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        transition: 0.3s ease-in-out;
        cursor: pointer;
        &:hover {
          border-color: #fdc102;
          color: #fdc102;
        }
      }
      .my-order-tab.active {
        background: #fdc102;
        border-color: #fdc102;
        color: #0d0c0c;
      }
    }
    .myOrder-list {
      margin-top: 30px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      }
      .order-card {
        width: 100%;
        min-width: max-content;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border: 1px solid #333139;
        background: #0b0c12;
        border-radius: 14px;
        padding: 10px 20px;
        transition: 0.3s ease-in-out;
        .order-product {
          max-width: 190px;
          min-width: 190px;
          display: flex;
          align-items: center;
          gap: 20px;
          .product-logo {
            border: 1px solid #333139;
            width: 50px;
            min-width: 50px;
            height: 50px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 6px;
            }
          }
          .order-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            .product-name {
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              color: #fff;
            }
            .duration {
              font-weight: 400;
              font-size: 14px;
              line-height: 21px;
              color: #959098;
            }
          }
        }
        .order-id {
          min-width: 70px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #949198;
        }
        .order-date {
          min-width: 90px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #949198;
        }
        .order-status {
          width: auto;
          min-width: 70px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #949198;
        }
        .order-status.pending {
          color: #fdc102;
        }
        .order-status.confirmed {
          color: #4a9eff;
        }
        .order-status.completed {
          color: #22c55e;
        }
        .order-status.cancelled {
          color: #c32917;
        }
        .order-price {
          width: auto;
          min-width: 70px;
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          color: #fff;
        }
        .whatsappLink {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 8px 10px;
          background: #6e33c4;
          border-radius: 14px;
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
          color: #fff;
          white-space: nowrap;
          transition: 0.3s ease-in-out;
          img {
            width: 24px;
            height: 24px;
            min-width: 24px;
          }
          &:hover {
            background: #6120bf;
          }
        }
      }
    }
    .myOrder-empty {
      display: none;
      margin-top: 40px;
      text-align: center;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #959098;
    }
    .myOrder-empty.show {
      display: block;
    }
  }
}
.login-container {
  max-width: 1440px;
  width: 100%;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .login {
    background: #090b12;
    max-width: 820px;
    width: 100%;
    border: 1px solid #2c2c2c;
    border-radius: 30px;
    padding: 50px;
    .login-title {
      font-weight: 600;
      font-size: 36px;
      line-height: 50px;
      color: #fff;
      text-align: center;
    }
    .login-shorDesc {
      margin-top: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #6f6e76;
      text-align: center;
    }
    form {
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .form-input {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid #1d1d1d;
        border-radius: 14px;
        .icon {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          color: #959098;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          background: transparent;
          border: none;
          &::placeholder {
            color: #959098;
          }
        }
      }
      .form-input-password {
        margin-top: 24px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid #1d1d1d;
        border-radius: 14px;
        .icon {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          color: #959098;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          background: transparent;
          border: none;
          &::placeholder {
            color: #959098;
          }
        }
        .passwordToggleBtn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s ease-in-out;
          }
          .eyeHidden {
            transform: translate(-50%, -50%) scale(1);
          }
          .eyeShowed {
            transform: translate(-50%, -50%) scale(0);
          }
        }
        .passwordToggleBtn.active {
          .eyeHidden {
            transform: translate(-50%, -50%) scale(0);
          }
          .eyeShowed {
            transform: translate(-50%, -50%) scale(1);
          }
        }
      }
      .saveMe-forgetLink {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 20px;
        .saveMe {
          display: flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          user-select: none;
          input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            margin: 0;
          }
          .checkbox-box {
            position: relative;
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            border-radius: 5px;
            background-color: #6e33c4;
          }
          .checkbox-box::after {
            content: "";
            position: absolute;
            top: 46%;
            left: 50%;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -50%) rotate(45deg) scale(0);
            transition: transform 0.15s ease;
          }
          input:checked + .checkbox-box::after {
            transform: translate(-50%, -50%) rotate(45deg) scale(1);
          }
          input:focus-visible + .checkbox-box {
            box-shadow: 0 0 0 3px rgba(110, 51, 196, 0.25);
          }
          .checkbox-label {
            font-weight: 400;
            font-size: 15px;
            line-height: 23px;
            color: #959098;
          }
        }
        .forgetLink {
          font-weight: 400;
          font-size: 15px;
          line-height: 23px;
          color: #8d56a8;
        }
      }
      .loginBtn {
        width: 100%;
        margin-top: 50px;
        text-align: center;
        background: #6e33c4;
        padding: 10px;
        border-radius: 100px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        transition: 0.3s ease-in-out;
        &:hover {
          background: #4f18eb;
        }
      }
    }
    .or {
      margin: 30px auto 0;
      max-width: 530px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 28px;
      .line {
        width: 100%;
        height: 1px;
        background: #4b4b4b;
      }
      p {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        text-wrap: nowrap;
        color: #959098;
      }
    }
    .loginByGoogle {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
      border: 1px solid #333333;
      padding: 10px;
      border-radius: 100px;
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
      }
    }
    .noProfile {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      p {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #4c4e53;
      }
      a {
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #6e33c4;
      }
    }
  }
  .entry-ellipse1 {
    position: absolute;
    left: -20px;
    top: -280px;
    z-index: -1;
    width: 800px;
  }
  .entry-ellipse2 {
    position: absolute;
    bottom: -240px;
    right: -80px;
    z-index: -1;
    width: 800px;
  }
}
.register-container {
  max-width: 1440px;
  width: 100%;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .register {
    background: #090b12;
    max-width: 820px;
    width: 100%;
    border: 1px solid #2c2c2c;
    border-radius: 30px;
    padding: 50px;
    .register-title {
      font-weight: 600;
      font-size: 36px;
      line-height: 50px;
      color: #fff;
      text-align: center;
    }
    .register-shorDesc {
      margin-top: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #6f6e76;
      text-align: center;
    }
    form {
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .form-items {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 20px;
        .form-input {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 14px;
          border: 1px solid #1d1d1d;
          border-radius: 14px;
          .icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
          input {
            width: 100%;
            color: #959098;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            background: transparent;
            border: none;
            &::placeholder {
              color: #959098;
            }
          }
        }
      }
      .form-input-password {
        margin-top: 24px;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid #1d1d1d;
        border-radius: 14px;
        .icon {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          color: #959098;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          background: transparent;
          border: none;
          &::placeholder {
            color: #959098;
          }
        }
        .passwordToggleBtn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s ease-in-out;
          }
          .eyeHidden {
            transform: translate(-50%, -50%) scale(1);
          }
          .eyeShowed {
            transform: translate(-50%, -50%) scale(0);
          }
        }
        .passwordToggleBtn.active {
          .eyeHidden {
            transform: translate(-50%, -50%) scale(0);
          }
          .eyeShowed {
            transform: translate(-50%, -50%) scale(1);
          }
        }
      }
      .accept-terms {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
        margin-top: 20px;
        input {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
          margin: 0;
        }
        .checkbox-box {
          position: relative;
          flex-shrink: 0;
          width: 18px;
          height: 18px;
          border-radius: 5px;
          background-color: #6e33c4;
        }
        .checkbox-box::after {
          content: "";
          position: absolute;
          top: 46%;
          left: 50%;
          width: 4px;
          height: 8px;
          border: solid #fff;
          border-width: 0 2px 2px 0;
          transform: translate(-50%, -50%) rotate(45deg) scale(0);
          transition: transform 0.15s ease;
        }
        input:checked + .checkbox-box::after {
          transform: translate(-50%, -50%) rotate(45deg) scale(1);
        }
        input:focus-visible + .checkbox-box {
          box-shadow: 0 0 0 3px rgba(110, 51, 196, 0.25);
        }
        .checkbox-label {
          font-weight: 400;
          font-size: 15px;
          line-height: 23px;
          color: #959098;
          a {
            color: #6e33c4;
          }
        }
      }
      .registerBtn {
        width: 100%;
        margin-top: 50px;
        text-align: center;
        background: #6e33c4;
        padding: 10px;
        border-radius: 100px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        transition: 0.3s ease-in-out;
        &:hover {
          background: #4f18eb;
        }
      }
    }
    .or {
      margin: 30px auto 0;
      max-width: 530px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 28px;
      .line {
        width: 100%;
        height: 1px;
        background: #4b4b4b;
      }
      p {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        text-wrap: nowrap;
        color: #959098;
      }
    }
    .registerByGoogle {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
      border: 1px solid #333333;
      padding: 10px;
      border-radius: 100px;
      img {
        width: 24px;
        height: 24px;
        min-width: 24px;
      }
    }
    .haveProfile {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      p {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #4c4e53;
      }
      a {
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        color: #6e33c4;
      }
    }
  }
  .entry-ellipse1 {
    position: absolute;
    left: -20px;
    top: -280px;
    z-index: -1;
    width: 800px;
  }
  .entry-ellipse2 {
    position: absolute;
    bottom: -240px;
    right: -80px;
    z-index: -1;
    width: 800px;
  }
}
.recoveryProfile-container {
  max-width: 1440px;
  width: 100%;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .recoveryProfile {
    background: #090b12;
    max-width: 820px;
    min-height: 660px;
    width: 100%;
    border: 1px solid #2c2c2c;
    border-radius: 30px;
    padding: 50px;
    .recoveryProfile-title {
      font-weight: 600;
      font-size: 36px;
      line-height: 50px;
      color: #fff;
      text-align: center;
    }
    .recoveryProfile-shorDesc {
      margin-top: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #6f6e76;
      text-align: center;
    }
    form {
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .form-input {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid #1d1d1d;
        border-radius: 14px;
        .icon {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          color: #959098;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          background: transparent;
          border: none;
          &::placeholder {
            color: #959098;
          }
        }
      }
      .recoveryLinkBtn {
        width: 100%;
        margin-top: 100px;
        text-align: center;
        background: #6e33c4;
        padding: 10px;
        border-radius: 100px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        transition: 0.3s ease-in-out;
        &:hover {
          background: #4f18eb;
        }
      }
    }
  }
  .entry-ellipse1 {
    position: absolute;
    left: -20px;
    top: -280px;
    z-index: -1;
    width: 800px;
  }
  .entry-ellipse2 {
    position: absolute;
    bottom: -240px;
    right: -80px;
    z-index: -1;
    width: 800px;
  }
}
.resetPassword-container {
  max-width: 1440px;
  width: 100%;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .resetPassword {
    background: #090b12;
    max-width: 820px;
    width: 100%;
    border: 1px solid #2c2c2c;
    border-radius: 30px;
    padding: 50px;
    min-height: 660px;
    .resetPassword-title {
      font-weight: 600;
      font-size: 36px;
      line-height: 50px;
      color: #fff;
      text-align: center;
    }
    .resetPassword-shorDesc {
      margin-top: 8px;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: #6f6e76;
      text-align: center;
    }
    form {
      width: 100%;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      .form-input-password {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid #1d1d1d;
        border-radius: 14px;
        .icon {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        input {
          width: 100%;
          color: #959098;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          background: transparent;
          border: none;
          &::placeholder {
            color: #959098;
          }
        }
        .passwordToggleBtn {
          width: 24px;
          height: 24px;
          min-width: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: 0.3s ease-in-out;
          }
          .eyeHidden {
            transform: translate(-50%, -50%) scale(1);
          }
          .eyeShowed {
            transform: translate(-50%, -50%) scale(0);
          }
        }
        .passwordToggleBtn.active {
          .eyeHidden {
            transform: translate(-50%, -50%) scale(0);
          }
          .eyeShowed {
            transform: translate(-50%, -50%) scale(1);
          }
        }
      }
      .resetPasswordBtn {
        width: 100%;
        margin-top: 26px;
        text-align: center;
        background: #6e33c4;
        padding: 10px;
        border-radius: 100px;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #f7f7f7;
        transition: 0.3s ease-in-out;
        &:hover {
          background: #4f18eb;
        }
      }
    }
  }
  .entry-ellipse1 {
    position: absolute;
    left: -20px;
    top: -280px;
    z-index: -1;
    width: 800px;
  }
  .entry-ellipse2 {
    position: absolute;
    bottom: -240px;
    right: -80px;
    z-index: -1;
    width: 800px;
  }
}
.success-container {
  max-width: 1440px;
  width: 100%;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .success {
    background: #090b12;
    max-width: 820px;
    min-height: 660px;
    width: 100%;
    border: 1px solid #2c2c2c;
    border-radius: 30px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .successIcon {
      width: 100px;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .success-title {
      margin-top: 30px;
      font-weight: 600;
      font-size: 36px;
      line-height: 50px;
      color: #fff;
      text-align: center;
    }
    .success-shorDesc {
      margin: 8px auto 0;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      max-width: 480px;
      color: #6f6e76;
    }
    .success-link {
      width: 100%;
      max-width: 330px;
      margin-top: 40px;
      text-align: center;
      background: #6e33c4;
      padding: 10px;
      border-radius: 100px;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #f7f7f7;
      transition: 0.3s ease-in-out;
      &:hover {
        background: #4f18eb;
      }
    }
  }
  .entry-ellipse1 {
    position: absolute;
    left: -20px;
    top: -280px;
    z-index: -1;
    width: 800px;
  }
  .entry-ellipse2 {
    position: absolute;
    bottom: -240px;
    right: -80px;
    z-index: -1;
    width: 800px;
  }
}
@keyframes review-scroll-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes review-scroll-down {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes hero-ellipse-orbit {
  0% {
    top: calc(100% - 500px);
    left: -375px;
  }
  25% {
    top: -430px;
    left: -375px;
  }
  50% {
    top: -430px;
    left: calc(100% - 505px);
  }
  75% {
    top: calc(100% - 500px);
    left: calc(100% - 505px);
  }
  100% {
    top: calc(100% - 500px);
    left: -375px;
  }
}

@media only screen and (max-width: 1250px) {
  .p-lr {
    padding-left: 50px;
    padding-right: 50px;
  }
  .navbar-container {
    top: 20px;
    padding: 0 35px;
    .navbar {
      gap: 40px;
      padding: 10px 20px;
      .logo {
        gap: 12px;
        img {
          width: 50px;
          min-width: 50px;
        }
        p {
          font-size: 18px;
          line-height: 28px;
        }
      }
      .navbar-links {
        max-width: 360px;
        .nav-link {
          font-size: 14px;
          line-height: 20px;
        }
        .nav-link-menu {
          padding: 14px 0;
          .nav-link-subMenu {
            gap: 12px;
            padding: 10px;
            width: 120px;
            top: 54px;
          }
          &:hover {
            .nav-link-subMenu {
              top: 44px;
            }
          }
        }
      }
      .navbar-right {
        .navbar-search {
          width: 260px;
          .search-close-btn {
            width: 20px;
            height: 20px;
            min-width: 20px;
          }
        }
        .search-open-btn {
          width: 20px;
          height: 20px;
          min-width: 20px;
        }
        .language {
          .lang-btn {
            gap: 8px;
            padding: 8px 10px;
            p {
              font-size: 14px;
              line-height: 20px;
            }
            .downIcon {
              width: 20px;
              min-width: 20px;
              height: 20px;
            }
          }
          .other-languages {
            top: 54px;
            padding: 10px;
            gap: 6px;
            .lang-item {
              font-size: 13px;
              line-height: 18px;
              padding-bottom: 6px;
            }
          }
        }
        .language.active {
          .other-languages {
            top: 44px;
          }
        }
        .navbar-busket {
          width: 50px;
          min-width: 50px;
          height: 38px;
          img {
            width: 20px;
            min-width: 20px;
            height: 20px;
          }
          .nav-busket-count {
            top: -7px;
            right: -5px;
            width: 20px;
            height: 20px;
            font-size: 12px;
            line-height: 13px;
          }
        }
        .login-link {
          padding: 9px 24px;
          font-size: 14px;
          line-height: 20px;
        }
        .nav-profile {
          .nav-profile-btn {
            padding: 4px 6px;
            .user-image {
              width: 28px;
              height: 28px;
              min-width: 28px;
            }
            .userFname {
              font-size: 14px;
              line-height: 20px;
            }
            .down-icon {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
          .nav-profile-menu {
            width: 170px;
            top: 54px;
            padding: 8px;
            gap: 8px;
            .profile-menu-item {
              padding: 10px 8px;
            }
            .profile-menu-bottom {
              margin-top: 16px;
              padding-top: 8px;
              .exit-btn {
                padding: 10px 8px;
              }
            }
          }
        }
        .nav-profile.active {
          .nav-profile-menu {
            top: 44px;
          }
        }
      }
    }
  }
  .home-hero {
    padding-top: 150px;
    padding-bottom: 40px;
    .home-hero-container {
      .hero-content {
        max-width: 650px;
        .hero-title {
          font-size: 48px;
          line-height: 64px;
        }
        .hero-description {
          font-size: 14px;
          line-height: 20px;
          p,
          li,
          span {
            font-size: 14px;
            line-height: 20px;
          }
        }
        .hero-link {
          margin-top: 32px;
        }
      }
      .hero-image {
        max-width: 424px;
      }
    }
  }
  .popular-products {
    margin: 100px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .products-tabs-slide {
      margin-top: 40px;
      .product-tab-btn {
        padding: 8px;
        min-width: 140px;
        font-size: 14px;
        line-height: 20px;
      }
    }
    .product-items {
      margin-top: 40px;
      grid-template-columns: repeat(3, 1fr);
      .product-item {
        gap: 20px;
        padding: 24px 16px;
        .item-head {
          gap: 16px;
          .product-logo {
            width: 64px;
            min-width: 64px;
            height: 64px;
          }
          .product-info {
            .product-name {
              font-size: 18px;
              line-height: 28px;
            }
            .product-description {
              gap: 6px;
              .duration {
                font-size: 14px;
                line-height: 20px;
              }
              .package-type {
                font-size: 14px;
                line-height: 20px;
                padding-left: 10px;
              }
            }
          }
        }
        .item-bottom {
          padding-top: 20px;
          .product-price {
            font-size: 22px;
            line-height: 33px;
          }
          .product-more {
            padding: 8px 18px;
          }
        }
      }
    }
    .all-products {
      margin: 60px auto 0;
      gap: 16px;
      font-size: 18px;
      line-height: 28px;
      img {
        width: 22px;
        height: 22px;
        min-width: 22px;
      }
    }
  }
  .whyUs-container {
    margin: 100px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .whyUs-cards {
      margin-top: 60px;
      .whyUs-card {
        padding: 80px;
        .card-image {
          width: 400px;
          min-width: 320px;
        }
        .card-content {
          max-width: 430px;
          .card-title {
            font-size: 32px;
            line-height: 48px;
          }
          .card-description {
            font-size: 16px;
            line-height: 24px;
            p,
            li,
            span {
              font-size: 16px;
              line-height: 24px;
            }
          }
          .card-tag {
            margin-top: 24px;
            padding: 8px 16px;
            gap: 8px;
            .icon {
              width: 28px;
              height: 28px;
              min-width: 28px;
              img {
                width: 14px;
                height: 14px;
              }
            }
            p {
              font-size: 13px;
              line-height: 18px;
            }
          }
        }
      }
    }
  }
  .customerReview-container {
    margin: 100px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .customerReview-sliders {
      margin-top: 60px;
      height: 760px;
      .review-column {
        .review-track {
          .review-card {
            padding: 24px;
            .quote-icon {
              width: 24px;
              height: 24px;
            }
            .review-author {
              gap: 14px;
              .review-avatar {
                width: 44px;
                height: 44px;
                min-width: 44px;
                font-size: 16px;
                line-height: 24px;
              }
              .review-author-info {
                padding-left: 14px;
                .review-name {
                  font-size: 14px;
                  line-height: 20px;
                }
                .review-role {
                  font-size: 14px;
                  line-height: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
  .homeBlogs {
    margin-top: 100px;
    padding: 75px 0;
    .homeBlogs-container {
      .section-title {
        font-size: 48px;
        line-height: 64px;
      }
      .homeBlogs-slide {
        margin-top: 60px;
        .blog-card {
          width: 393px;
          .card-image {
            height: 330px;
          }
          .card-body {
            .blog-name {
              font-size: 20px;
              line-height: 32px;
            }
          }
        }
      }
    }
  }
  .faq-container {
    margin: 100px auto 0;
    .faq-content {
      max-width: 430px;
      .label {
        font-size: 14px;
        line-height: 20px;
      }
      .section-title {
        font-size: 48px;
        line-height: 64px;
      }
    }
    .faq-items {
      max-width: 740px;
      gap: 20px;
      .faq-item {
        padding: 14px 24px;
        .faq-question {
          gap: 16px;
          .question-title {
            font-size: 16px;
            line-height: 24px;
          }
          .icon {
            width: 20px;
            height: 20px;
            min-width: 20px;
          }
        }
        .faq-answer {
          font-size: 14px;
          line-height: 20px;
        }
        .faq-answer p {
          padding-top: 14px;
        }
      }
    }
  }
  footer {
    margin-top: 100px;
    padding-top: 60px;
    .footer-ellipse1 {
      position: absolute;
      z-index: -1;
      left: -280px;
      top: -200px;
      width: 744px;
    }
    .footer-container {
      .footer-main {
        .footer-info {
          max-width: 240px;
          .logo {
            width: 100px;
            height: 100px;
            min-width: 100px;
          }
          .footer-address {
            font-size: 14px;
            line-height: 20px;
            margin-top: 30px;
          }
          .footer-phone {
            font-size: 14px;
            line-height: 20px;
            margin-top: 20px;
            a {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .footer-mail {
            font-size: 14px;
            line-height: 20px;
            margin-top: 20px;
            a {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
        .footer-link-sections {
          max-width: 700px;
          margin-top: 20px;
          .footer-link-section {
            max-width: 200px;
            gap: 16px;
            .section-links {
              gap: 10px;
              .link-item {
                font-size: 16px;
                line-height: 24px;
              }
              .view-all {
                font-size: 16px;
                line-height: 24px;
              }
            }
          }
        }
      }
      .footer-socials-language {
        margin-top: 50px;
        .footer-socials {
          gap: 10px;
          .social-item {
            width: 36px;
            height: 36px;
            min-width: 36px;
            img {
              width: 22px;
              height: 22px;
            }
          }
        }
      }
      .footer-copyright {
        margin-top: 50px;
        padding: 20px 0;
        p {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
  .busket-modal {
    .busket {
      max-width: 430px;
      .busket-head {
        padding: 20px;
        .busket-title {
          gap: 10px;
          img {
            width: 20px;
            height: 20px;
            min-width: 20px;
          }
          p {
            font-size: 24px;
            line-height: 32px;
          }
        }
        .closeBusket {
          width: 20px;
          height: 20px;
          min-width: 20px;
        }
      }
      .busket-list {
        padding: 40px 20px;
        height: calc(100svh - 207px);
        max-height: 440px;
        .busket-item {
          .product-logo {
            width: 80px;
            height: 80px;
            min-width: 80px;
          }
          .product-info {
            .counter {
              max-width: 104px;
              padding: 2px 6px;
              margin-top: 6px;
              .counterBtn {
                width: 20px;
                height: 20px;
                min-width: 20px;
              }
            }
          }
          .item-right {
            align-items: end;
            gap: 20px;
            .product-price {
              font-size: 18px;
              line-height: 28px;
            }
            .removeProduct {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
          }
        }
      }
      .busket-bottom {
        padding: 20px;
        .busket-total {
          .total-label {
            font-size: 18px;
            line-height: 28px;
          }
          .total-value {
            font-size: 20px;
            line-height: 30px;
          }
        }
        .complateOrderBtn {
          margin-top: 24px;
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
  }
  .products {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .products-tabs-slide {
      margin-top: 40px;
      .product-tab-btn {
        padding: 8px;
        min-width: 140px;
        font-size: 14px;
        line-height: 20px;
      }
    }
    .product-items {
      margin-top: 40px;
      grid-template-columns: repeat(3, 1fr);
      .product-item {
        gap: 20px;
        padding: 24px 16px;
        .item-head {
          gap: 16px;
          .product-logo {
            width: 64px;
            min-width: 64px;
            height: 64px;
          }
          .product-info {
            .product-name {
              font-size: 18px;
              line-height: 28px;
            }
            .product-description {
              gap: 6px;
              .duration {
                font-size: 14px;
                line-height: 20px;
              }
              .package-type {
                font-size: 14px;
                line-height: 20px;
                padding-left: 10px;
              }
            }
          }
        }
        .item-bottom {
          padding-top: 20px;
          .product-price {
            font-size: 22px;
            line-height: 33px;
          }
          .product-more {
            padding: 8px 18px;
          }
        }
      }
    }
    .pagination {
      margin-top: 60px;
      .pagination-item {
        width: 30px;
        height: 28px;
      }
      .pagination-point {
        width: 30px;
        height: 28px;
      }
    }
  }
  .breadcrumb-container {
    margin: 140px auto 0;
    .breadcrumb-item {
      font-size: 14px;
      line-height: 20px;
    }
    .seperate {
      width: 20px;
      height: 20px;
      min-width: 20px;
    }
  }
  .product-detail-container {
    margin: 40px auto 0;
    .detail-main {
      .main-info {
        padding: 30px 40px;
        .pro-name {
          font-size: 32px;
          line-height: 40px;
        }
        .pro-pricing {
          .pricings {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        .pro-ratingReview-info {
          .pro-rating {
            img {
              width: 20px;
              height: 20px;
              min-width: 20px;
            }
            p {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .pro-reviews {
            font-size: 14px;
            line-height: 20px;
          }
        }
        .pro-plan-info {
          .pro-price {
            font-size: 32px;
            line-height: 40px;
          }
          .pro-oldPrice {
            font-size: 18px;
            line-height: 28px;
          }
          .pro-duration {
            margin-left: 20px;
          }
          .pro-type {
            margin-left: 16px;
          }
        }
      }
    }
    .detail-information {
      margin-top: 40px;
      padding: 60px 60px 20px;
      .detail-info-content {
        margin-top: 46px;
      }
    }
    .customer-review {
      margin-top: 100px;
      .section-title {
        font-size: 48px;
        line-height: 64px;
      }
      .swiper-buttons {
        gap: 12px;
        top: 10px;
        .swiper-button-prev,
        .swiper-button-next {
          width: 44px;
          min-width: 44px;
          height: 44px;
          &::after {
            font-size: 12px;
          }
        }
      }
      .customer-review-slide {
        margin-top: 60px;
        .review-card {
          width: 373px;
          padding: 24px;
          .quote-icon {
            width: 24px;
            height: 24px;
          }
          .review-author {
            gap: 14px;
            .review-avatar {
              width: 44px;
              height: 44px;
              min-width: 44px;
              font-size: 16px;
              line-height: 24px;
            }
            .review-author-info {
              padding-left: 14px;
              .review-name {
                font-size: 14px;
                line-height: 20px;
              }
              .review-role {
                font-size: 14px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
    .similar-products {
      margin-top: 100px;
      .section-title {
        font-size: 48px;
        line-height: 64px;
      }
      .swiper-buttons {
        gap: 12px;
        top: 10px;
        .swiper-button-prev,
        .swiper-button-next {
          width: 44px;
          min-width: 44px;
          height: 44px;
          &::after {
            font-size: 12px;
          }
        }
      }
      .similar-products-slide {
        margin-top: 60px;
        .product-item {
          width: 270px;
          gap: 20px;
          padding: 24px 16px;
          .item-head {
            gap: 16px;
            .product-logo {
              width: 64px;
              min-width: 64px;
              height: 64px;
            }
            .product-info {
              .product-name {
                font-size: 18px;
                line-height: 28px;
              }
              .product-description {
                gap: 6px;
                .duration {
                  font-size: 14px;
                  line-height: 20px;
                }
                .package-type {
                  font-size: 14px;
                  line-height: 20px;
                  padding-left: 10px;
                }
              }
            }
          }
          .item-bottom {
            padding-top: 20px;
            .product-price {
              font-size: 22px;
              line-height: 33px;
            }
            .product-more {
              padding: 8px 18px;
            }
          }
        }
      }
    }
  }
  .about-container {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .about-content {
      margin-top: 60px;
      padding: 60px 35px;
    }
  }
  .terms-container {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .terms-content {
      margin-top: 60px;
      padding: 60px 35px;
    }
  }
  .privacyPolicy-container {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .privacyPolicy-content {
      margin-top: 60px;
      padding: 60px 35px;
    }
  }
  .reviews-container {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .reviews {
      margin-top: 40px;
      .review-card {
        padding: 24px;
        .quote-icon {
          width: 24px;
          height: 24px;
        }
        .review-author {
          gap: 14px;
          .review-avatar {
            width: 44px;
            height: 44px;
            min-width: 44px;
            font-size: 16px;
            line-height: 24px;
          }
          .review-author-info {
            padding-left: 14px;
            .review-name {
              font-size: 14px;
              line-height: 20px;
            }
            .review-role {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
    }
    .pagination {
      margin-top: 60px;
      .pagination-item {
        width: 30px;
        height: 28px;
      }
      .pagination-point {
        width: 30px;
        height: 28px;
      }
    }
  }
  .blogs-container {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .blogs {
      margin-top: 40px;
      .blog-card {
        .card-image {
          height: 300px;
        }
        .card-body {
          .blog-name {
            font-size: 20px;
            line-height: 32px;
          }
        }
      }
    }
    .pagination {
      margin-top: 60px;
      .pagination-item {
        width: 30px;
        height: 28px;
      }
      .pagination-point {
        width: 30px;
        height: 28px;
      }
    }
  }
  .blogDetail-container {
    margin: 40px auto 0;
    .blogDetail-properties {
      margin-top: 32px;
    }
    .blog-title {
      margin-top: 32px;
      font-size: 32px;
      line-height: 48px;
    }
    .blogDetail-content {
      margin-top: 32px;
    }
  }
  .contact-container {
    margin: 40px auto 0;
    .section-title {
      font-size: 48px;
      line-height: 64px;
    }
    .contact-form {
      margin-top: 60px;
      .submit-form {
        margin: 40px auto 0;
        max-width: 400px;
      }
    }
    .contact-boxes {
      margin-top: 100px;
      .contact-box {
        padding: 40px 20px;
        .icon {
          width: 50px;
          height: 50px;
          min-width: 50px;
          img {
            width: 24px;
            height: 24px;
          }
        }
        .box-title {
          margin-top: 16px;
          font-size: 18px;
          line-height: 28px;
        }
      }
    }
    .map {
      margin-top: 100px;
      height: 450px;
    }
  }
  .dashboard-container {
    margin: 160px auto 0;
    .dashboard-menu {
      min-width: 300px;
      width: 300px;
      .dashboard-menu-bottom {
        margin-top: 140px;
      }
    }
    .profile-setting {
      width: calc(100% - 320px);
      padding: 40px 30px;
    }
    .myorders {
      width: calc(100% - 320px);
      padding: 40px 30px;
      .section-title {
        font-size: 20px;
        line-height: 32px;
      }
      .short-desc {
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
  .login-container {
    margin: 160px auto 0;
    .login {
      max-width: 720px;
      padding: 35px;
      .login-title {
        font-size: 32px;
        line-height: 48px;
      }
      form {
        margin-top: 32px;
        .loginBtn {
          margin-top: 40px;
        }
      }
      .or {
        margin: 24px auto 0;
        max-width: 430px;
        gap: 24px;
      }
      .loginByGoogle {
        margin-top: 24px;
      }
    }
    .entry-ellipse1 {
      display: none;
    }
    .entry-ellipse2 {
      display: none;
    }
  }
  .register-container {
    margin: 160px auto 0;
    .register {
      max-width: 720px;
      padding: 35px;
      .register-title {
        font-size: 32px;
        line-height: 48px;
      }
      form {
        margin-top: 32px;
        .registerBtn {
          margin-top: 40px;
        }
      }
      .or {
        margin: 24px auto 0;
        max-width: 430px;
        gap: 24px;
      }
      .registerByGoogle {
        margin-top: 24px;
      }
    }
    .entry-ellipse1 {
      display: none;
    }
    .entry-ellipse2 {
      display: none;
    }
  }
  .recoveryProfile-container {
    margin: 160px auto 0;
    .recoveryProfile {
      max-width: 720px;
      padding: 35px;
      min-height: 0;
      .recoveryProfile-title {
        font-size: 32px;
        line-height: 48px;
      }
      form {
        margin-top: 32px;
        .recoveryLinkBtn {
          margin-top: 80px;
        }
      }
    }
    .entry-ellipse1 {
      display: none;
    }
    .entry-ellipse2 {
      display: none;
    }
  }
  .resetPassword-container {
    margin: 160px auto 0;
    .resetPassword {
      max-width: 720px;
      padding: 35px;
      min-height: 0;
      .resetPassword-title {
        font-size: 32px;
        line-height: 48px;
      }
      form {
        margin-top: 32px;
        gap: 20px;
        .form-input-password {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 14px;
          border: 1px solid #1d1d1d;
          border-radius: 14px;
          .icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
            }
          }
          input {
            width: 100%;
            color: #959098;
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
            background: transparent;
            border: none;
            &::placeholder {
              color: #959098;
            }
          }
          .passwordToggleBtn {
            width: 24px;
            height: 24px;
            min-width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: 0.3s ease-in-out;
            }
            .eyeHidden {
              transform: translate(-50%, -50%) scale(1);
            }
            .eyeShowed {
              transform: translate(-50%, -50%) scale(0);
            }
          }
          .passwordToggleBtn.active {
            .eyeHidden {
              transform: translate(-50%, -50%) scale(0);
            }
            .eyeShowed {
              transform: translate(-50%, -50%) scale(1);
            }
          }
        }
        .resetPasswordBtn {
          margin-top: 20px;
        }
      }
    }
    .entry-ellipse1 {
      display: none;
    }
    .entry-ellipse2 {
      display: none;
    }
  }
  .success-container {
    margin: 160px auto 0;
    .success {
      max-width: 720px;
      padding: 35px;
      min-height: 0;
      .successIcon {
        width: 80px;
      }
      .success-title {
        margin-top: 24px;
        font-size: 32px;
        line-height: 48px;
      }
      .success-link {
        max-width: 300px;
        margin-top: 32px;
      }
    }
    .entry-ellipse1 {
      display: none;
    }
    .entry-ellipse2 {
      display: none;
    }
  }
}
@media only screen and (max-width: 992px) {
  .navbar-container {
    top: 20px;
    padding: 0 35px;
    .navbar {
      gap: 40px;
      padding: 10px 20px;
      .navbar-links {
        display: none;
      }
      .navbar-right {
        .navbar-search {
          display: none !important;
        }
        .search-open-btn {
          display: none;
        }
        .language {
          display: none;
        }
        .hamburger {
          display: flex;
        }
      }
    }
  }
  .mobile-menu {
    display: flex;
  }
  .home-hero {
    .home-hero-container {
      .hero-content {
        max-width: 100%;
      }
      .hero-image {
        display: none;
      }
    }
    .hero-ellipse1 {
      width: 680px;
      top: calc(100% - 450px);
      left: -225px;
    }
    .hero-ellipse2 {
      width: 680px;
      top: -230px;
      left: calc(100% - 455px);
    }
  }
  .popular-products {
    .product-items {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .whyUs-container {
    .whyUs-cards {
      .whyUs-card {
        .card-image {
          min-width: 240px;
        }
      }
    }
  }
  .customerReview-container {
    .customerReview-sliders {
      display: none;
    }
    .mobileCustomerReview-sliders {
      display: block;
    }
  }
  footer {
    .footer-container {
      .footer-main {
        flex-direction: column;
        .footer-info {
          max-width: 100%;
        }
        .footer-link-sections {
          max-width: 100%;
        }
      }
    }
  }
  @keyframes hero-ellipse-orbit {
    0% {
      top: calc(100% - 400px);
      left: -275px;
    }
    25% {
      top: -330px;
      left: -275px;
    }
    50% {
      top: -330px;
      left: calc(100% - 405px);
    }
    75% {
      top: calc(100% - 400px);
      left: calc(100% - 405px);
    }
    100% {
      top: calc(100% - 400px);
      left: -275px;
    }
  }
  .products {
    .product-items {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .product-detail-container {
    .detail-main {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }
  .reviews-container {
    .reviews {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .blogs-container {
    .blogs {
      grid-template-columns: repeat(2, 1fr);
      .blog-card {
        .card-image {
          height: 320px;
        }
      }
    }
  }
  .contact-container {
    .contact-boxes {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .dashboard-container {
    .dashboard-menu {
      display: none;
    }
    .profile-setting {
      width: 100%;
    }
    .myorders {
      width: 100%;
    }
  }
}
@media only screen and (max-width: 768px) {
  .p-lr {
    padding-left: 20px;
    padding-right: 20px;
  }
  .navbar-container {
    padding: 0 20px;
    .navbar {
      gap: 20px;
      .logo {
        gap: 0;
        img {
          width: 48px;
          min-width: 48px;
        }
        p {
          display: none;
        }
      }
    }
  }
  .home-hero {
    padding-top: 130px;
    padding-bottom: 30px;
    .home-hero-container {
      .hero-content {
        .hero-title {
          font-size: 32px;
          line-height: 48px;
        }
      }
      .hero-image {
        display: none;
      }
    }
    .hero-ellipse1 {
      width: 480px;
      top: calc(100% - 350px);
      left: -125px;
    }
    .hero-ellipse2 {
      width: 480px;
      top: -130px;
      left: calc(100% - 355px);
    }
  }
  .popular-products {
    margin: 80px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .products-tabs-slide {
      margin-top: 30px;
      .product-tab-btn {
        min-width: 130px;
      }
    }
    .product-items {
      margin-top: 30px;
      .product-item {
        padding: 20px 16px;
        .item-head {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          .product-info {
            .product-name {
              font-size: 16px;
              line-height: 24px;
            }
            .product-description {
              .duration {
                font-size: 12px;
                line-height: 16px;
              }
              .package-type {
                font-size: 12px;
                line-height: 16px;
              }
            }
          }
        }
        .item-bottom {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
          .product-price {
            font-size: 20px;
            line-height: 30px;
          }
          .product-more {
            width: 100%;
            padding: 8px;
            text-align: center;
          }
        }
      }
    }
    .all-products {
      margin: 40px auto 0;
      gap: 14px;
      font-size: 16px;
      line-height: 24px;
      img {
        width: 20px;
        height: 20px;
        min-width: 20px;
      }
    }
  }
  .whyUs-container {
    margin: 80px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .whyUs-cards {
      margin-top: 40px;
      .whyUs-card {
        padding: 40px;
        flex-direction: column-reverse;
        .card-image {
          width: 100%;
          max-width: 360px;
          margin: 0 auto;
          min-width: 0;
        }
        .card-content {
          max-width: 100%;
          .card-title {
            font-size: 24px;
            line-height: 32px;
          }
        }
      }
    }
  }
  .customerReview-container {
    margin: 80px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .mobileCustomerReview-sliders {
      margin-top: 40px;
    }
  }
  .homeBlogs {
    margin-top: 80px;
    padding: 50px 0;
    .homeBlogs-container {
      .section-title {
        font-size: 32px;
        line-height: 48px;
      }
      .homeBlogs-slide {
        margin-top: 40px;
        .blog-card {
          width: 333px;
          .card-image {
            height: 280px;
          }
          .card-body {
            .blog-name {
              font-size: 18px;
              line-height: 28px;
            }
          }
        }
      }
    }
  }
  .faq-container {
    margin: 80px auto 0;
    flex-direction: column;
    .faq-content {
      max-width: 100%;
      .section-title {
        font-size: 32px;
        line-height: 48px;
      }
    }
    .faq-items {
      max-width: 100%;
      .faq-item {
        padding: 12px 20px;
      }
    }
  }
  footer {
    margin-top: 80px;
    padding-top: 40px;
    .footer-ellipse1 {
      left: -240px;
      top: -140px;
      width: 544px;
    }
    .footer-container {
      .footer-main {
        flex-direction: column;
        .footer-info {
          .logo {
            width: 80px;
            height: 80px;
            min-width: 80px;
          }
        }
        .footer-link-sections {
          flex-direction: column;
          margin-top: 0;
          .footer-link-section {
            max-width: 100%;
          }
        }
      }
      .footer-socials-language {
        margin-top: 40px;
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        .footer-socials {
          gap: 10px;
          .social-item {
            width: 36px;
            height: 36px;
            min-width: 36px;
            img {
              width: 22px;
              height: 22px;
            }
          }
        }
      }
      .footer-copyright {
        margin-top: 40px;
        p {
          text-align: start;
        }
      }
    }
  }
  @keyframes hero-ellipse-orbit {
    0% {
      top: calc(100% - 220px);
      left: -205px;
    }
    25% {
      top: -260px;
      left: -205px;
    }
    50% {
      top: -260px;
      left: calc(100% - 205px);
    }
    75% {
      top: calc(100% - 240px);
      left: calc(100% - 205px);
    }
    100% {
      top: calc(100% - 260px);
      left: -205px;
    }
  }
  .busket-modal {
    .busket {
      max-width: 100%;
      height: 100%;
      .busket-list {
        height: calc(100svh - 207px);
        max-height: 100%;
      }
    }
  }
  .products {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .products-tabs-slide {
      margin-top: 30px;
      .product-tab-btn {
        min-width: 130px;
      }
    }
    .product-items {
      margin-top: 30px;
      .product-item {
        padding: 20px 16px;
        .item-head {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          .product-info {
            .product-name {
              font-size: 16px;
              line-height: 24px;
            }
            .product-description {
              .duration {
                font-size: 12px;
                line-height: 16px;
              }
              .package-type {
                font-size: 12px;
                line-height: 16px;
              }
            }
          }
        }
        .item-bottom {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
          .product-price {
            font-size: 20px;
            line-height: 30px;
          }
          .product-more {
            width: 100%;
            padding: 8px;
            text-align: center;
          }
        }
      }
    }
    .pagination {
      margin-top: 40px;
      .pagination-item {
        width: 30px;
        height: 28px;
      }
      .pagination-point {
        width: 30px;
        height: 28px;
      }
    }
  }
  .product-detail-container {
    margin: 30px auto 0;
    .detail-main {
      .main-info {
        padding: 30px 24px;
        .pro-plan-info {
          flex-wrap: wrap;
          .pro-price {
            font-size: 28px;
            line-height: 36px;
            width: 100%;
          }
          .pro-duration {
            margin-top: 12px;
            margin-left: 0;
          }
          .pro-type {
            margin-left: 12px;
            margin-top: 12px;
          }
        }
        .pro-buttons {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
    .detail-information {
      margin-top: 30px;
      padding: 40px 40px 20px;
      .detail-info-buttons {
        grid-template-columns: 1fr;
      }
      .detail-info-content {
        margin-top: 36px;
      }
    }
    .customer-review {
      margin-top: 80px;
      .section-title {
        font-size: 32px;
        line-height: 48px;
      }
      .swiper-buttons {
        display: none;
      }
      .customer-review-slide {
        margin-top: 40px;
        .review-card {
          padding: 30px;
          width: 353px;
          .quote-icon {
            width: 30px;
            height: 30px;
          }
          .review-author {
            gap: 20px;
            .review-avatar {
              width: 50px;
              height: 50px;
              min-width: 50px;
              font-size: 18px;
              line-height: 27px;
            }
            .review-author-info {
              padding-left: 20px;
              .review-name {
                font-size: 16px;
                line-height: 24px;
              }
              .review-role {
                font-size: 16px;
                line-height: 24px;
              }
            }
          }
        }
      }
    }
    .similar-products {
      margin-top: 80px;
      .section-title {
        font-size: 32px;
        line-height: 48px;
      }
      .swiper-buttons {
        display: none;
      }
      .similar-products-slide {
        margin-top: 40px;
        .product-item {
          padding: 20px 16px;
          width: 200px;
          .item-head {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            .product-info {
              .product-name {
                font-size: 16px;
                line-height: 24px;
              }
              .product-description {
                .duration {
                  font-size: 12px;
                  line-height: 16px;
                }
                .package-type {
                  font-size: 12px;
                  line-height: 16px;
                }
              }
            }
          }
          .item-bottom {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            .product-price {
              font-size: 20px;
              line-height: 30px;
            }
            .product-more {
              width: 100%;
              padding: 8px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .about-container {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .about-content {
      margin-top: 40px;
      padding: 40px 20px;
    }
  }
  .terms-container {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .terms-content {
      margin-top: 40px;
      padding: 40px 20px;
    }
  }
  .privacyPolicy-container {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .privacyPolicy-content {
      margin-top: 40px;
      padding: 40px 20px;
    }
  }
  .reviews-container {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .reviews {
      margin-top: 30px;
    }
    .pagination {
      margin-top: 40px;
      .pagination-item {
        width: 30px;
        height: 28px;
      }
      .pagination-point {
        width: 30px;
        height: 28px;
      }
    }
  }
  .blogs-container {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .blogs {
      margin-top: 40px;
      .blog-card {
        .card-image {
          height: 260px;
        }
        .card-body {
          .blog-name {
            font-size: 18px;
            line-height: 28px;
          }
        }
      }
    }
    .pagination {
      margin-top: 40px;
      .pagination-item {
        width: 30px;
        height: 28px;
      }
      .pagination-point {
        width: 30px;
        height: 28px;
      }
    }
  }
  .blogDetail-container {
    margin: 30px auto 0;
    .blogDetail-properties {
      margin-top: 24px;
    }
    .blog-title {
      margin-top: 24px;
      font-size: 24px;
      line-height: 36px;
    }
    .blogDetail-content {
      margin-top: 24px;
    }
  }
  .contact-container {
    margin: 30px auto 0;
    .section-title {
      font-size: 32px;
      line-height: 48px;
    }
    .contact-form {
      margin-top: 40px;
      .submit-form {
        margin: 20px auto 0;
        max-width: 350px;
      }
    }
    .contact-boxes {
      margin-top: 80px;
      grid-template-columns: repeat(2, 1fr);
    }
    .map {
      margin-top: 80px;
      height: 350px;
    }
  }
  .dashboard-container {
    .profile-setting {
      padding: 40px 20px;
    }
    .myorders {
      padding: 40px 20px;
    }
  }
  .login-container {
    margin: 140px auto 0;
    .login {
      max-width: 100%;
      padding: 30px 20px;
      .login-title {
        font-size: 28px;
        line-height: 40px;
      }
      form {
        .saveMe-forgetLink {
          .saveMe {
            .checkbox-label {
              font-size: 14px;
              line-height: 20px;
            }
          }
          .forgetLink {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      .or {
        max-width: 100%;
        gap: 16px;
      }
      .noProfile {
        p {
          font-size: 14px;
          line-height: 20px;
        }
        a {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
  .register-container {
    margin: 140px auto 0;
    .register {
      max-width: 100%;
      padding: 30px 20px;
      .register-title {
        font-size: 28px;
        line-height: 40px;
      }
      form {
        .form-items {
          grid-template-columns: repeat(1, 1fr);
        }
        .accept-terms {
          .checkbox-label {
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
      .or {
        max-width: 100%;
        gap: 16px;
      }
      .haveProfile {
        p {
          font-size: 14px;
          line-height: 20px;
        }
        a {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }
  }
  .recoveryProfile-container {
    margin: 140px auto 0;
    .recoveryProfile {
      max-width: 100%;
      padding: 30px 20px;
      .recoveryProfile-title {
        font-size: 28px;
        line-height: 40px;
      }
      form {
        .recoveryLinkBtn {
          margin-top: 60px;
        }
      }
    }
  }
  .resetPassword-container {
    margin: 140px auto 0;
    .resetPassword {
      max-width: 100%;
      padding: 30px 20px;
      .resetPassword-title {
        font-size: 28px;
        line-height: 40px;
      }
    }
  }
  .success-container {
    margin: 140px auto 0;
    .success {
      max-width: 100%;
      padding: 30px 20px;
      .successIcon {
        width: 60px;
      }
      .success-title {
        font-size: 28px;
        line-height: 40px;
      }
      .success-shorDesc {
        max-width: 100%;
      }
      .success-link {
        max-width: 100%;
      }
    }
  }
}
@media only screen and (max-width: 575px) {
  .reviews-container {
    .reviews {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  .blogs-container {
    .blogs {
      grid-template-columns: repeat(1, 1fr);
      .blog-card {
        .card-image {
          height: auto;
        }
      }
    }
  }
  .contact-container {
    .contact-form {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
      }
      .submit-form {
        max-width: 100%;
      }
    }
    .contact-boxes {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  .dashboard-container {
    .profile-setting {
      .form-items {
        grid-template-columns: repeat(1, 1fr);
      }
      .form-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        .cancelEdit {
          width: 100%;
          padding: 10px;
        }
        .saveEdit {
          width: 100%;
          padding: 10px;
        }
      }
    }
  }
}

/* Product card metadata: keep the duration together in longer locales. */
.product-item .product-description {
  align-items: flex-start !important;
  gap: 4px !important;
}

.product-item .product-description .duration {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px !important;
}

.product-item .product-description .package-type {
  min-width: 0;
  padding-left: 9px !important;
  margin-left: 0;
  white-space: nowrap;
  font-size: 13px !important;
}

.product-item .item-head {
  gap: 12px !important;
}

.product-item .item-head .product-logo {
  width: 64px !important;
  min-width: 64px !important;
  height: 64px !important;
}

/* Product detail price metadata must not split currency, duration or plan names. */
.product-detail-container .pro-plan-info {
  column-gap: 20px;
  flex-wrap: nowrap !important;
}

.product-detail-container .pro-plan-info .pro-price,
.product-detail-container .pro-plan-info .pro-oldPrice,
.product-detail-container .pro-plan-info .pro-duration,
.product-detail-container .pro-plan-info .pro-type {
  white-space: nowrap;
}

.product-detail-container .pro-plan-info .pro-price {
  width: auto !important;
  flex: 0 0 auto;
}

.product-detail-container .pro-plan-info .pro-duration,
.product-detail-container .pro-plan-info .pro-type {
  margin-left: 0 !important;
}

.product-detail-container .pro-plan-info .pro-oldPrice {
  display: inline-block;
}

/* AJAX authentication validation */
[data-ajax-auth] .auth-invalid {
  border-color: #c32917 !important;
}

[data-ajax-auth] .auth-field-error {
  display: block;
  width: 100%;
  margin-top: 6px;
  color: #c32917 !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
}

[data-ajax-auth] .auth-errors {
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(195, 41, 23, 0.55);
  border-radius: 10px;
  background: rgba(195, 41, 23, 0.1);
  color: #ff6b5b !important;
  font-size: 14px;
  line-height: 20px;
}

[data-ajax-auth] .auth-errors[hidden] {
  display: none;
}
/* AJAX məhsul axtarışı */
[data-product-search] {
  position: relative;
}

.product-search-results {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 100;
  width: min(390px, 90vw);
  max-height: 380px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(212, 212, 212, 0.2);
  border-radius: 16px;
  background: #111218;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.product-search-results[hidden] {
  display: none !important;
}

.product-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  transition: background-color 0.2s ease;
}

.product-search-item:hover {
  background: rgba(116, 56, 239, 0.18);
}

.product-search-image {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border: 1px solid rgba(212, 212, 212, 0.16);
  border-radius: 10px;
  background: #090a0e;
}

.product-search-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-search-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-search-info strong,
.product-search-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-search-info strong {
  color: #fff;
  font-size: 15px;
}

.product-search-info small,
.product-search-message {
  color: #aaa6b2;
  font-size: 13px;
}

.product-search-message {
  margin: 0;
  padding: 14px;
  text-align: center;
}

.mobile-search .product-search-results {
  top: calc(100% + 8px);
  width: 100%;
}