.showcase {
  width: 100%;
  height: calc(100vh - 80px);
  max-height: 1080px; /* Optional: limits the height on very large screens */
  display: grid;
  place-items: center; /* Centers the container */
  padding-top: 80px;
  padding-bottom: 60px;

  .showcase-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    width: 85%;
    max-width: 1200px;
    height: 100%;

    .showcase-details {
      grid-column: 1 / 8; /* Starts at far left, goes past the middle */
      grid-row: 1;
      z-index: 3; /* Keeps text on top of the visual backgrounds if they touch */
      padding-top: 100px;

      font-family: "Poppins", sans-serif;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .showcase-title {
        margin: 0;
        color: #181e4b;
        font-size: 72px;
        font-weight: 700;
        letter-spacing: -4px;
        line-height: 75px;
      }

      p {
        margin: 0;
        color: #5e6282;
        font-size: 24px;
        line-height: 30px;
      }

      .showcase-actions {
        display: flex;
        align-items: center;

        .btn {
          font-size: 20px;
          padding: 16px 36px;
        }
      }
    }

    .showcase-visual {
      grid-column: 5 / -1; /* Starts before the text ends, goes to the far right */
      grid-row: 1;
      position: relative; /* Anchor for all your .float elements */
      display: flex;
      justify-content: flex-end; /* Aligns main-img to the right */
      align-items: flex-end; /* Aligns main-img to the bottom */
      padding-top: 100px; /* Pushes it down relative to the text */

      /* All images inside showcase-visual */
      img {
        display: block;
      }

      .img-main {
        width: 100%;
        max-width: 600px;
        display: block;
        z-index: 2;
      }

      /* Specifically targeting the floating sub-classes */
      .float {
        position: absolute;
        z-index: 3;
        transition: transform 0.3s ease;

        /* You can even nest hover effects! */
        &:hover {
          transform: scale(1.1);
        }
      }

      /* Sub-classes for specific positions */
      /* Adjust these % based on your visual preference */

      .icon-thumb1 {
        bottom: 360px;
        left: 466px;
        width: 60px;
      }
      .icon-heart {
        bottom: 270px;
        left: 450px;
        width: 90px;
      }
      .icon-thumb2 {
        bottom: 300px;
        left: 385px;
        width: 80px;
      }
      .ball-pink {
        left: 30px;
        width: 150px;
        z-index: 0; /* Behind the main image */
      }

      .ball-teal {
        bottom: 200px;
        right: 450px;
        width: 70px;
        opacity: 0.3;
      }

      .rectangle {
        left: -220px;
        max-width: 600px;
        z-index: 1;
        position: absolute;
        z-index: 3;
        transition: transform 0.3s ease;
      }
    }
  }

  .grid {
    .grid-container {
      /* 1. Positioning */
      position: absolute;
      top: 10%; /* Center it vertically */
      right: 0; /* Center it horizontally */
      z-index: -1; /* Stay behind everything */

      /* 2. Grid Setup */
      display: grid;
      grid-template-columns: repeat(5, 50px); /* 5 columns, each 50px wide */
      grid-template-rows: repeat(5, 50px); /* 5 rows, each 50px high */
      gap: 5px; /* Space between the plus signs */

      justify-items: center;
      align-items: center;
      pointer-events: none;
    }

    .grid-container span {
      font-family: sans-serif;
      font-size: 20px;
      color: #e0e0e0; /* Light gray default */
      font-weight: bold;
    }

    /* Color classes for your Figma accents */
    .purple {
      color: #8b5cf6 !important;
    }
    .orange {
      color: #ff4500 !important;
    }
  }
}

@media (max-width: 1372px) {
  .showcase .showcase-container {
    width: 90%;
    .showcase-details {
      .showcase-title {
        font-size: 64px;
      }
      p {
        font-size: 22px;
      }
      .showcase-actions {
        .btn {
          font-size: 18px;
          padding: 12px 28px;
        }
      }
    }
    .showcase-visual .ball-teal {
      display: none;
    }
  }
}

@media (max-width: 1104px) {
  .showcase .showcase-container {
    .showcase-details {
      .showcase-title {
        font-size: 60px;
      }
      p {
        font-size: 20px;
      }
      .showcase-actions {
        .btn {
          font-size: 16px;
          padding: 8px 24px;
        }
      }
    }
    .showcase-visual {
      .img-main {
        max-width: 550px;
      }
      .ball-pink {
        left: 40px;
      }
    }
  }
}

@media (max-width: 1040px) {
  .showcase .showcase-container {
    .showcase-details {
      .showcase-title {
        font-size: 56px;
        line-height: 66px;
      }
      p {
        font-size: 20px;
      }
      .showcase-actions {
        .btn {
          font-size: 16px;
          padding: 8px 24px;
        }
      }
    }
    .showcase-visual {
      .img-main {
        max-width: 500px;
      }
      .ball-pink {
        left: 50px;
      }
      .icon-thumb1 {
        bottom: 360px;
        left: 366px;
        width: 40px;
      }
      .icon-heart {
        bottom: 270px;
        left: 350px;
        width: 70px;
      }
      .icon-thumb2 {
        bottom: 300px;
        left: 285px;
        width: 60px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .showcase {
    max-height: calc(100vh - 80px);

    .showcase-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      align-items: end;

      .grid {
        display: none;
      }

      .showcase-visual {
        overflow: hidden;
        padding-top: 0;
        justify-content: center;
        width: fit-content;

        .img-main {
          width: auto;
          max-width: 100%;
          max-height: 100%;
        }

        .ball-pink {
          display: none;
        }

        .icon-thumb1 {
          left: calc(90% - 30px);
          top: 0;
        }

        .icon-thumb2 {
          left: calc(90% - 75px);
          top: 45px;
        }

        .icon-heart {
          left: calc(90% - 55px);
          top: 105px;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .showcase {
    .showcase-container {
      .showcase-visual {
        .float {
          display: none;
        }
      }
    }
  }
}