Sindbad~EG File Manager

@import url("https://fonts.googleapis.com/css2?family=Cambay:wght@400;700&display=swap");

.home {
  background: var(--neutre50);
  .home_hero-section-container {
    display: flex;
    padding-top: var(--paddingHeader);

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

    .home_hero-subcontainer {
      width: 50%;

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

      .home_hero-image {
        width: 100%;
      }

      .home_hero-items-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        position: relative;

        .home_hero-item {
          display: flex;
          align-items: center;
          gap: 8px;
          row-gap: 16px;

          .home_hero-item-icon-container {
            width: 24px;
            height: 24px;
            background: var(--purple100);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }

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

  .home_s3 {
    background: url("../assets/star-bg.svg"),
      linear-gradient(254.32deg, #560bab 0%, #7209b5 100%);

    padding: 60px 0;
    .container {
      position: relative;
      .home_s3-rock1 {
        position: absolute;
        width: 100%;
        max-width: 104px;
        top: -20px;
        left: -50px;
        z-index: 3;
      }
    }
    .home_s3-container {
      background: var(--white);
      border-radius: 32px;
      padding: 60px 72px;
      position: relative;
      display: flex;
      gap: 114px;

      justify-content: space-between;
      @media (max-width: 768px) {
        flex-direction: column;
        gap: 32px;
        padding: 32px 16px;
        z-index: 4;
      }

      .home_s3-rock2 {
        position: absolute;
        width: 100%;
        max-width: 104px;
        bottom: -10px;
        left: 30%;
      }
      .home_s3-subcontainer {
        &:nth-child(1) {
          width: 50%;

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

        &:nth-child(2) {
          width: 40%;
          @media (max-width: 768px) {
            width: 100%;
          }
        }

        .home_s3-title {
          position: relative;
          z-index: 4;
        }
      }

      .home_s3-tag {
        padding: 4px 8px;
        border-radius: 20px;
        border: 1px solid var(--purple100);
        background: var(--purple300);
        display: flex;
        align-items: center;
        justify-content: center;
        text-wrap: nowrap;
      }

      .home_s3-progress-container {
        width: 100%;
        position: relative;
        background: var(--neutre100);
        height: 4px;
        border-radius: 40px;
        .home_s3-progress {
          background: linear-gradient(
            85.51deg,
            #3a0ca3 0%,
            #560bad 54.14%,
            #7209b7 100%
          );

          height: 100%;
          border-radius: 40px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }

  .home_s4 {
    background: var(--purple300);
    padding: 60px 0;
    padding-bottom: 0;
    .home_s4-wrapper {
      display: flex;
      gap: 40px;

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

      .home_s4-subcontainer {
        &:nth-child(1) {
          display: flex;
          width: 40%;
          gap: 24px;

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

        &:nth-child(2) {
          width: 55%;
          @media (max-width: 768px) {
            width: 100%;
          }
        }

        .home_s4-image {
          width: 64px;
          min-width: 64px;
          height: 77px;
        }

        .swiper {
          width: 100%;
          height: 100%;
        }

        .swiper-wrapper {
          align-items: center;
        }

        .swiper-top-wrapper {
          display: flex;
          justify-content: flex-end;
        }

        .swipper-btn-wrapper {
          display: flex;
          gap: 12px;

          z-index: 10;
          position: relative;

          .swipper-btn {
            border: 0;
            cursor: pointer;
            width: 32px;
            height: 32px;
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
          }

          .swiper-button-disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }

        .swiper-slide {
          text-align: center;
          font-size: 18px;

          display: flex;
          justify-content: center;
          height: 384px;
          overflow: visible;
          align-items: center;

          > a {
            height: 100%;
          }
          &:nth-child(2n) {
            // padding-top: 40px;
          }
        }

        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .swiper-pagination {
          position: absolute;
          left: 0;
          top: 0;
          height: fit-content;
          text-align: left;
        }
        .swiper-pagination-bullet {
          background: var(--purple500);
          opacity: 0.1;
          transition: opacity 0.3s ease-in-out;
        }
        .swiper-pagination-bullet-active {
          background: var(--purple500);
          opacity: 1;
          transition: opacity 0.3s ease-in-out;
        }
      }
    }
  }

  .home_s5 {
    padding: 60px 0;

    background: var(--purple300);
    .home_s5-container {
      border-top: 1px solid var(--neutre300);

      position: relative;

      .home_s5-icon-container {
        position: absolute;
        left: -70px;
        top: 250px;
        z-index: 3;
        width: 166px;
        height: auto;

        @media (max-width: 768px) {
          width: 80px;
          top: 300px;
          left: -20px;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .home_s5-items-container {
        mask-image: linear-gradient(
          180deg,
          #000000 50.08%,
          rgba(0, 0, 0, 0) 100%
        );
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: center;
        position: relative;

        overflow: auto;
        @media (max-width: 768px) {
          grid-template-columns: 1fr;
          gap: 8px;
          mask-image: linear-gradient(
            180deg,
            #000000 80.08%,
            rgba(0, 0, 0, 0) 100%
          );
        }

        .home_s5-image {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          opacity: 0.5;
        }

        .home_s5-items-wrapper {
          display: flex;
          flex-direction: column;
          gap: 24px;

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

          .home_s5-items {
            width: 100%;

            img {
              border-radius: 24px;
              height: 240px;
              width: 100%;
              object-fit: contain;

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

      .home_s5-cta {
        margin: 0 auto;
      }
    }
  }
  .home_s6 {
    background: url("../assets/star-bg.svg"),
      linear-gradient(254.32deg, #560bab 0%, #7209b5 100%);
    overflow: hidden;
    padding: 60px 0;

    .home_s6-items-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32px;
      position: relative;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }

      .home_s6-rocket-container {
        position: absolute;
        top: 130px;
        left: -100px;
      }

      .home_s6-planet-container {
        position: absolute;
        top: -90px;
        right: -80px;
      }

      .home_s6-item {
        position: relative;
        z-index: 3;
        background: var(--white);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--neutre100);
        display: flex;
        flex-direction: column;
        .home_s6-item-image-container {
          width: 100%;
          height: 226px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .home_s6-item-content {
          display: flex;
          flex-direction: column;
          padding: 24px 32px;
          height: 100%;

          .home_s6-cta {
            margin-top: auto;
          }
        }
      }
    }
  }

  .home_s7 {
    background: var(--purple300);
    padding: 60px 0;

    .home_s7-items-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .home_s7-item {
        box-shadow: 0px 4px 6px -2px #0c041b08;

        box-shadow: 0px 12px 16px -4px #0c041b14;

        overflow: hidden;
        border-radius: 8px;
        background: var(--white);
        .home_s7-item-container {
          display: flex;
          flex-direction: column;
          .home_s7-item-image-container {
            width: 100%;
            height: 226px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .home_s7-item-content {
            padding: 24px;
            .home_s7-category {
              padding: 6px 12px;
              border-radius: 20px;
              background: var(--purple300);
              width: fit-content;
            }

            .home_s7-item-title-container {
              display: flex;
              justify-content: space-between;
              .home_s7-item-title {
                font-size: 23px;
                line-height: 1.2;
                font-weight: 700;
                font-family: var(--fontRedHat);
              }
            }
          }

          .rt-time {
            color: var(--purple800);
            font-weight: 400;
          }

          .home_s7-rating {
            margin-top: auto;
          }
        }
      }
    }
  }

  .home_s8 {
    padding: 60px 0;

    .home_s8-container {
      display: flex;
      gap: 32px;
      background: var(--white);
      box-shadow: 0px 4px 6px -2px #0c041b08;

      padding-left: 72px;
      padding-top: 32px;
      border-radius: 32px;

      box-shadow: 0px 12px 16px -4px #0c041b14;

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

    .home_s8-subcontainer {
      width: 50%;

      @media (max-width: 768px) {
        width: 100%;
      }
      &:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }

      .home_s8-image-container {
        width: 100%;
        img {
          width: 100%;
        }
      }

      .home_s8-form-container {
        .form-row {
          display: flex;
          gap: 16px;

          margin-bottom: 16px;
          @media (max-width: 768px) {
            flex-direction: column;
          }
          .form-col {
            width: 100%;

            label {
              font-size: 14px;
              font-family: var(--fontRedHat);
              line-height: 21px;
              color: var(--purple800);
              font-weight: 600;
              margin-bottom: 8px;
            }
            input,
            textarea {
              margin-top: 8px;
              width: 100%;
              font-size: 16px;
              padding: 12px 4px;

              border-radius: 8px;
              // padding: 0px 12px;
              border: 1px solid #dddde0;
              font-family: var(--fontRedHat);
            }

            .wpcf7-radio {
              display: grid;
              margin-top: 16px;
              grid-template-columns: repeat(2, 1fr);
              .wpcf7-list-item {
                margin: 0;
                label {
                  display: flex;
                  gap: 8px;
                  align-items: center;

                  span {
                    color: var(--purple800);
                    font-weight: 400;
                  }
                }
              }
            }

            input[type="radio"] {
              width: 16px;
              height: 16px;
              align-items: flex-start;
              margin-top: 0;
            }
          }
        }
        .wpcf7-submit {
          display: block;
          margin-bottom: 32px;
        }

        .wpcf7-response-output {
          border: 0;
          padding: 0;
          margin: 0;
          font-family: var(--fontKanit);
          margin-bottom: 32px;
          color: var(--purple800);
        }
        form[data-status="invalid"] {
          .wpcf7-response-output {
            color: red;
          }
        }
      }
    }
  }
}