main {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #000;
}

main #home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: fit-content;
  padding: 50px 0px;
  padding-top: 80px;
  width: 85%;
  position: relative;
  text-align: center;
  margin: auto;
  overflow: hidden;
}

main #home .part2 {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  position: relative;
  overflow: visible;
  border-radius: 20px;
  background-color: hsla(88.26775280898873, 0%, 0%, 1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1356 1356' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    radial-gradient(
      circle at 0% 99%,
      hsla(88.70242603644859, 0%, 0%, 1) 0%,
      transparent 67%
    ),
    radial-gradient(
      circle at 46% 94%,
      hsla(89.13915310222625, 0%, 0%, 1) 0%,
      transparent 81%
    ),
    radial-gradient(
      circle at 93% 95%,
      hsla(87.48114495172278, 0%, 0%, 1) 0%,
      transparent 66%
    ),
    radial-gradient(
      circle at 89% 8%,
      hsla(88.65168539325842, 72%, 47%, 1) 0%,
      transparent 150%
    );
  background-blend-mode: overlay, normal, normal, normal, normal;
  animation: home-slideup 1.5s linear;
  padding: 20px 0px;

  .model {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;

    img {
      overflow: visible;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 50%;
      position: absolute;
      object-fit: cover;
      visibility: hidden;
      animation: float 4s infinite alternate, fadeIn 1s ease-in-out forwards;
      animation-delay: 400ms;
    }
  }

  .text {
    height: 100%;
    width: 60%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    z-index: 2;
    gap: 35px;

    .hero {
      width: fit-content;
      height: fit-content;
      padding: 2px 10px;
      background-color: rgba(255, 255, 255, 0.352);
      backdrop-filter: blur(5px);
      border-radius: 20px;
      p {
        margin: 0px;
        font-family: "Audiowide", sans-serif;
        font-size: 1vw;
        font-weight: 300;
        color: black;
        text-transform: uppercase;
      }
    }

    h1 {
      margin: 0px;
      font-family: "Audiowide", sans-serif;
      font-size: 2.5vw;
      text-align: left;
      font-weight: 900;
      /* width: 70%; */
      text-transform: capitalize;
      color: #fff;
      text-shadow: 5px 5px 20px #fff;
      span {
        font-family: "Notable", sans-serif;
        letter-spacing: 2px;
        font-weight: 100;
        font-style: italic;
        color: white;
      }
    }

    h2 {
      margin: 0px;
      font-size: 1.8vw;
      font-family: Zain, sans-serif;
      text-align: left;
      font-weight: 400;
      width: 90%;
      color: #fff;

      span {
        letter-spacing: 2px;
        font-weight: 900;
        font-style: italic;
        color: gold;
      }
    }

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }
  }
  .text2 {
    width: 40%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    z-index: 2;
    gap: 20px;

    .card {
      text-align: left;
      width: 100%;
      padding: 20px;
      border-radius: 10px;
      background-color: #00000030;
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
      animation: code-move 2s infinite alternate;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .mac-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 15px;
    }

    .mac-header span {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .mac-header .red {
      background-color: #ff5f57;
    }

    .mac-header .yellow {
      background-color: #ffbd2e;
    }

    .mac-header .green {
      background-color: #28c941;
    }

    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 10px;
      color: #e6e6ef;
    }

    .card-description {
      font-size: 14px;
      color: #c9d1d9;
      margin-bottom: 15px;
    }

    .card .card-tag {
      display: inline-block;
      font-size: 10px;
      border-radius: 5px;
      background-color: #0d1117;
      padding: 4px;
      margin-block-end: 12px;
      color: #dcdcdc;
    }
    .code-editor {
      background-color: #0d1117;
      color: #dcdcdc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        monospace;
      font-size: 14px;
      line-height: 1.5;
      border-radius: 5px;
      padding: 15px;
      overflow: auto;
      height: 150px;
      border: 1px solid #333;
    }

    .code-editor::-webkit-scrollbar {
      width: 8px;
    }

    .code-editor::-webkit-scrollbar-thumb {
      background: #555;
      border-radius: 4px;
    }

    .code-editor pre code {
      white-space: pre-wrap;
      display: block;
      color: greenyellow;
    }
  }
}

.extra {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  color: #fff;
  font-family: "Audiowide", sans-serif;
  font-weight: 500;
  font-size: 1.2vw;
  display: flex;
  align-items: center;
  flex-direction: column;
}

@keyframes code-move {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(20px);
  }
}

@keyframes fadeIn {
  from {
    visibility: visible;
    opacity: 0;
    filter: blur(8px);
  }
  to {
    visibility: visible;
    opacity: 0.3;
    filter: blur(2px);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(40px);
  }
}

@keyframes home-slideup {
  from {
    /* transform: scaleZ(0); */
    opacity: 0;
  }
  to {
    /* transform: scaleZ(1); */
    opacity: 1;
  }
}

@keyframes h1-animation {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(1.1);
  }
}

@media (max-width: 968px) {
  main #home .part1 {
    h1 {
      font-size: 15vw;
      text-align: center;
    }
  }
  main #home .part2 {
    padding: 0px;
    .model {
      position: absolute;
      width: 80%;
      img {
        height: 120%;
        opacity: 0.8;
        filter: blur(2px);
      }
    }
    .text {
      width: 100%;
      align-items: start;
      gap: 30px;
      h1 {
        font-size: 4vw;
        width: 100%;
      }
      h2 {
        font-size: 3vw;
        width: 100%;
      }

      .hero {
        p {
          font-weight: 500;
          font-size: 1.8vw;
        }
      }
    }
    .text2 {
      display: none;
    }
  }
}

@media (max-width: 768px) {
  main {
    padding-top: 0px;
  }
  main #home .part1 {
    /* background-color: #28c941; */
    height: 25%;
    h1 {
      font-size: 18vw;
    }
  }
  main #home .part2 {
    height: 75%;
    width: 100%;
    /* background-color: #ff5f57; */
    /* z-index: 11; */
    .model {
      img {
        height: 130%;
      }
    }
    .text {
      h1 {
        font-size: 5vw;
        width: 100%;
      }
      h2 {
        font-size: 3.5vw;
        width: 100%;
      }
      .hero {
        p {
          font-weight: 500;
          font-size: 1.8vw;
        }
      }
    }
  }
  .extra {
    font-size: 2vw;
    /* gap: 5px; */
    letter-spacing: 2px;
  }
}
@media (max-width: 500px) {
  main #home {
    width: 95%;
  }
  main #home .part1 {
    h1 {
      font-size: 22vw;
      transform: scaleY(1);
      margin-bottom: 0px;
    }
  }
  main #home .part2 {
    width: 100%;
    /* background-color: beige; */
    .model {
      img {
        height: 130%;
        /* width: 100%; */
      }
    }
    .text {
      width: 100%;
      h1 {
        /* margin: 0px; */
        font-size: 6vw;
        width: 100%;
      }
      h2 {
        /* margin: 0px; */
        font-size: 5vw;
        width: 100%;
      }
      .hero {
        p {
          font-weight: 500;
          font-size: 3vw;
          padding: 3px 10px;
        }
      }
    }
  }
  .extra {
    font-size: 2vw;
    /* gap: 5px; */
    letter-spacing: 2px;
    /* left: 50%; */
    /* transform: translateX(-50%); */
  }
}