.multi-card-section {
  max-width: 1440px;
  flex-direction: column;
  .heading-wrapper {
    margin-bottom: 80px;
    @media (max-width: 770px) {
      margin-bottom: 24px;
    }
  }
  .section-inner {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    &.cards-2 {
      .inner-card {
        @media (min-width: 1280px) {
          max-width: 532px !important;
        }
      }
    }
    &.cards-3 {
      .inner-card {
        @media (min-width: 1280px) {
          max-width: 466px !important;
        }
      }
    }
    .inner-card {
      min-height: 488px;
      background: transparent;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      border-radius: 24px;
      gap: 30px;
      min-width: 280px;
      border: 1px solid #797979;
      cursor: pointer;

      @media (max-width: 480px) {
        max-width: 300px;
        width: 100vw;
        min-width: calc(100vw - 75px);
      }

      .content {
        padding: 30px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;

        .content-section {
          display: flex;
          flex-direction: column;
          gap: 20px;
          align-items: flex-start;
          z-index: 2;
          height: 100%;
          justify-content: space-between;
          .icon-container {
            .icon-wrapper {
              width: 78px;
              height: 78px;
              text-align: center;
              border-radius: 50%;
              border: 1px solid #000;
              max-height: 85px;
              background: #000;
              display: block;
              content: "";
              mask-repeat: no-repeat;
              mask-position: center;

              img {
                max-width: 25px;
                margin: 0 30px;
                max-height: 85px;
              }
            }
          }
          .card-image-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            height: 310px;
            img {
              object-fit: cover;
            }
          }
          .text-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
            width: 100%;
            gap: 16px;
            margin-bottom: 24px;
            .title {
              font-weight: 300;
              strong {
                font-weight: 700;
              }
            }
            .description {
              align-items: center;
              max-width: 300px;
              text-align: center;
              p {
                margin: 0;
                font-size: 15px;
                line-height: 1;
                font-weight: 300;
                letter-spacing: 0;
              }
            }
          }
          .title {
            font-size: 1.875em;
            font-weight: bold;
            margin-top: 0;
            line-height: 1.3;
            margin-bottom: 0;
          }
          .divider {
            width: 16px;
            height: 4px;
            background-color: #f4001c;
            content: "";
            display: block;
          }

          .description {
            margin: 0;
            font-weight: 300;
            color: #000;
            
            p {
              line-height: 1.2em;
            }
          }
          .button-wrapper-inner {
            width: 100%;
            display: flex;
            flex-direction: column;
            /* align-items: center; */

            .card-button {
              display: flex;
              justify-content: center;
              align-items: center;
              text-decoration: none;
              border: none;
              text-transform: uppercase;
              font-weight: 500;
              font-size: 14px;
              border-radius: 9999px;
              width: 142px;
              cursor: pointer;
              letter-spacing: 2px;
              transition: color 0.3s ease, border 0.3s ease;
              line-height: 1.4;
              color: white;
              height: 32px;
              margin: 0 auto;

              &.outlined {
                border: 1px solid #000;
                margin: unset;
                background: transparent;
                gap: 10px;
                padding: 0 10px;
                width: fit-content;
                color: #000;

                svg {
                  background: #000;
                  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEwIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDQuNTI4NkM5Ljk5Njc4IDQuODc5MzQgOS44NTU0NiA1LjIxNDY3IDkuNjA2NjkgNS40NjE5M0w2Ljc0NjY5IDguMzI4NkM2LjYyMTc4IDguNDUyNzcgNi40NTI4MSA4LjUyMjQ2IDYuMjc2NjkgOC41MjI0NkM2LjEwMDU2IDguNTIyNDYgNS45MzE2IDguNDUyNzcgNS44MDY2OSA4LjMyODZDNS43NDQyIDguMjY2NjIgNS42OTQ2MSA4LjE5Mjg5IDUuNjYwNzYgOC4xMTE2NUM1LjYyNjkxIDguMDMwNDEgNS42MDk0OSA3Ljk0MzI3IDUuNjA5NDkgNy44NTUyN0M1LjYwOTQ5IDcuNzY3MjYgNS42MjY5MSA3LjY4MDEyIDUuNjYwNzYgNy41OTg4OEM1LjY5NDYxIDcuNTE3NjQgNS43NDQyIDcuNDQzOTEgNS44MDY2OSA3LjM4MTkzTDguMDAwMDIgNS4xOTUyN0gxLjMzMzM1QzEuMTU2NTQgNS4xOTUyNyAwLjk4Njk3NCA1LjEyNTAzIDAuODYxOTQ5IDVDMC43MzY5MjUgNC44NzQ5OCAwLjY2NjY4NyA0LjcwNTQxIDAuNjY2Njg3IDQuNTI4NkMwLjY2NjY4NyA0LjM1MTc5IDAuNzM2OTI1IDQuMTgyMjIgMC44NjE5NDkgNC4wNTcxOUMwLjk4Njk3NCAzLjkzMjE3IDEuMTU2NTQgMy44NjE5MyAxLjMzMzM1IDMuODYxOTNIOC4wMDAwMkw1LjgwNjY5IDEuNjY4NkM1LjY4MTE1IDEuNTQzOTUgNS42MTAyNyAxLjM3NDUzIDUuNjA5NjUgMS4xOTc2MkM1LjYwOTAyIDEuMDIwNzEgNS42Nzg3IDAuODUwODAxIDUuODAzMzUgMC43MjUyNjVDNS45MjgwMSAwLjU5OTcyOSA2LjA5NzQyIDAuNTI4ODUyIDYuMjc0MzMgMC41MjgyMjdDNi40NTEyNCAwLjUyNzYwMiA2LjYyMTE1IDAuNTk3MjgxIDYuNzQ2NjkgMC43MjE5MzJMOS42MDY2OSAzLjU4ODZDOS44NTcwOCAzLjgzNzUgOS45OTg1MyA0LjE3NTU1IDEwIDQuNTI4NloiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');
                }
              }
            }
          }
        }
      }

      &.active,
      &:hover
       {
        background-image: var(--card-background-image);
        background-size: cover;
        background-position: center;
        color: #fff;
        border: 0;

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--base-heading-bg-color);
          z-index: 1;
          opacity: 0.4;
        }

        .blurred-area {
          position: absolute;
          top: 48%;
          left: -25%;
          min-width: 150%;
          min-height: 80%;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(100px);
          z-index: 0;
          border-radius: 59%;
          content: "";
          display: block !important;
          -webkit-mask-image: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.3) 68%,
            rgba(0, 0, 0, 0.1) 86%,
            rgba(0, 0, 0, 0) 100%
          );
          mask-image: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0.3) 68%,
            rgba(0, 0, 0, 0.1) 86%,
            rgba(0, 0, 0, 0) 100%
          );
        }

        .content {
          .content-section {

            .button-wrapper-inner {
              .card-button {
                &.outlined {
                  svg {
                    background: #fff;
                  }
                }
              }

            .card-button {
              /* border: 1px solid #fff; */
              color: #fff;
            }
          }
            .icon-container {
              .icon-wrapper {
                border: 1px solid #fff;
                background-color: #fff;
                .divider {
                  background-color: #fff;
                }
              }
            }

            .title {
              color: #fff;
              margin-bottom: 0;
            }

            .divider {
              background-color: #fff;
            }

            .description {
              color: #fff;
            }
          }
          img {
            opacity: 0;
          }
        }
      }
    }
  }
   .button-wrapper {
    margin-top: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;

    @media (max-width: 1024px) {
      margin-top: 40px;
    }
  }
}