.startAnimation {
  .section-action-banner {
    .action-banner-item {
      animation: floatUp 0.5s cubic-bezier(0.54, 0.1, 0, 0.99) forwards;
    }
  }
}

.section-action-banner {
  .action-banner-item {
    position: relative;
    border-radius: 20px;
    margin-bottom: 15px;
    text-align: center;
    overflow: hidden;
    opacity: 0;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
      height: 100%;
      width: 100%;
      border-radius: 20px;
      background: var(--brown-400);
      content: "";
    }

    .action-banner-content {
      padding: 50px 115px;

      @media screen and (max-width: 991px) {
        padding: 20px;
      }
    }

    .banner-image {
      position: absolute;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: -1;
    }

    .hexagon-bg {
      position: absolute;
      z-index: -1;
      height: 633px;
      width: 997px;
      top: -19%;
      left: -9%;

      @media screen and (max-width: 991px) {
        opacity: 0.8;
        height: 150%;
        width: 150%;
        top: 0;
      }
    }

    .nav-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 35px;
    }

    strong {
      font-size: 28px;
      font-family: var(--font-text);
      font-variation-settings: "opsz" 6, "slnt" 0, "wght" 700;

       @media screen and (max-width: 991px) {
        font-size: 21px;
      }
    }

    p {
      font-size: 21px;
      font-variation-settings: "opsz" 6, "slnt" 0, "wght" 700;

       @media screen and (max-width: 991px) {
        font-size: 16px;
      }
    }

    h2 {
      font-size: 37px;
      color: var(--brown-500);
      line-height: 1;

       @media screen and (max-width: 991px) {
        font-size: 28px;
      }
    }
  }
}