.vertical {
    .access {
      clip-path: polygon(0 0, 100% 0%, 95% 100%, 5% 100%);
    }
  
    .engage {
      clip-path: polygon(5% 0, 95% 0%, 90% 100%, 10% 100%);
    }
  
    .mobilize {
      clip-path: polygon(10% 0, 90% 0%, 85% 100%, 15% 100%);
    }
  
    .access:hover {
      transform: scale(1.11);
      z-index: 99;
    }
  
    .engage:hover {
      transform: scale(1.11);
      z-index: 99;
    }
  
    .mobilize:hover {
      transform: scale(1.11);
      z-index: 99;
    }
  
    .access, .engage, .mobilize {
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: transform 0.3s ease;
    }
  }
  
  .horizontal {
    display: flex;
  
    .access {
      background-color: #F79B8F;
      clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
    }
  
    .engage {
      background-color: #DC4538;
      clip-path: polygon(0 5%, 100% 10%, 100% 90%, 0 95%);
    }
  
    .mobilize {
      background-color: #512A28;
      clip-path: polygon(0 10%, 100% 15%, 100% 85%, 0 90%);
    }
  }
  
  .funnel {
    .engage {
      clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
    }
  
    .mobilize {
      clip-path: polygon(0 30%, 100% 45%, 100% 100%, 0 100%);
    }
  
    .engage-v2 {
      clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    }
  
    .mobilize-v2 {
      clip-path: polygon(0 10%, 100% 15%, 100% 100%, 0 100%);
    }
  
    .clip-right-arrow {
      clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100% );
    }
  }
  
  
  .bar {
    .stage2 {
      clip-path: polygon(0 0, 90% 0, 100% 50%, 100% 50%, 90% 100%, 0 100%);
    }
  
    .stage3 {
      clip-path: polygon(0 0, 95% 0, 100% 50%, 100% 50%, 95% 100%, 0 100%);
    }
  }
  
  .stretch-access {
    width: 0%;
    animation: stretch 0.75s ease-in-out forwards;
  }
  
  .fade-access {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards 0.75s;
  }
  
  .stretch-engage {
    width: 0%;
    animation: stretch 0.75s ease-in-out forwards 0.5s;
  }
  
  .fade-engage {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards 1.25s;
  }
  
  .stretch-presented {
    width: 0%;
    animation: stretch 0.75s ease-in-out forwards 1s;
  }
  
  .fade-presented {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards 1.75s;
  }
  
  .stretch-mobilize {
    width: 0%;
    animation: stretch 0.75s ease-in-out forwards 1s;
  }
  
  .stretch-mobilize-v2 {
    width: 0%;
    animation: stretch 0.75s ease-in-out forwards 1.5s;
  }
  
  .fade-mobilize {
    opacity: 0%;
    animation: fadeIn 1s ease-in-out forwards 2.25s;
  }
  
  .slide-access {
    height: 0%;
    animation: slide 0.8s ease-in-out forwards;
  }
  
  .slide-engage {
    height: 0%;
    animation: slide 0.8s ease-in-out forwards 0.5s;
  }
  
  .slide-engage-v2 {
    height: 0%;
    animation: slide 0.8s ease-in-out forwards 1s;
  }
  
  .slide-mobilize {
    height: 0%;
    animation: slide 0.8s ease-in-out forwards 1s;
  }
  
  .slide-mobilize-v2 {
    height: 0%;
    animation: slide 0.8s ease-in-out forwards 2s;
  }
  
  @keyframes stretch {
    0% {
      width: 0%;
    }
  
    100% {
      width: 100%;
    }
  }
  
  @keyframes slide {
    0% {
      height: 0%;
    }
  
    100% {
      height: 100%;
    }
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }