#portfolio {
  font-family: "Afacad", sans-serif;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 3%;

  /* Add this to your CSS file */
  .clip-diagonal-1 {
    clip-path: polygon(0 0, 43% 0, 80% 100%, 0% 100%);
  }

  .clip-diagonal-2 {
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 51% 100%);
  }

  .diagonal-overlay-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    height: 75%;
    /* h-3/4 */
    width: 75%;
    z-index: 10;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1;
    @media (max-width: 768px) {
      width: 75%;
    }
    @media (max-width: 425px) {
      width: 90%;
    }
  }

  /* Shared styles for both overlays */
  .diagonal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* Dark overlay */
  .diagonal-overlay.dark {
    background-color: rgba(0, 0, 0, 0.5);
    /* bg-black/30 */
    clip-path: polygon(0 0, 43% 0, 80% 100%, 0% 100%);
    /* example shape for clip-diagonal-1 */
  }

  h1 {
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3%;

    @media (max-width: 425px) {
      font-size: 85px;
    }
    @media (max-width: 375px) {
      font-size: 65px;
    }
  }

  /* Light overlay */
  .diagonal-overlay.light {
    background-color: rgba(0, 0, 0, 0.3);
    /* bg-black/10 */
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 47% 100%);
    /* example shape for clip-diagonal-2 */
  }

  .icon {
    background-color: #f3f3f3;
    padding: 1.5rem;
    /* p-6 = 24px = 1.5rem */
    border-radius: 1.5rem;
    /* rounded-3xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
    /* shadow-lg */
    width: 456.4px;
    /* w-[130px] */
    height: 456.4px;
    /* h-[130px] */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    margin-left: 10px;
    margin-right: 10px;

    @media (max-width: 1700px) {
      width: 300.4px;
      height: 300.4px;
    }
    @media (max-width: 1024px) {
      width: 250.4px;
      height: 250.4px;
    }
    @media (max-width: 768px) {
      width: 180.4px;
      height: 180.4px;
    }

    @media (max-width: 425px) {
      width: 110.4px;
      height: 110.4px;
      margin-left: 0;
      margin-right: 0;
    }
  }

  .container {
    position: relative;
    width: 300px;
    height: 300px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    overflow: hidden;
  }
}