@import "../colors/colors.scss";

html {
  scroll-behavior: smooth;
}
body {
  background-color: $green !important;
  main {
    position: relative;
    z-index: 5;
    background-color: $blueDark2;
    overflow-x: hidden;
    .video-bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.1;
    }
    .object {
      width: 600px;
      height: 600px;
      border-radius: 50%;
      position: fixed;
      left: -150px;
      top: -150px;
      background: $green;
      z-index: -1;
      filter: blur(200px);
      opacity: 0.6;
    }
    .object.object1 {
      animation: 16s updown infinite forwards;
    }
    .object.object2 {
      left: auto;
      top: auto;
      bottom: -200px;
      right: -200px;
      animation: 16s updown infinite forwards;
      animation-delay: 8s;
    }
    .object.object3 {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      animation: 16s blink infinite forwards;
    }
    @keyframes updown {
      0% {
        transform: translateY(0);
        opacity: 0.5;
      }
      50% {
        transform: translate(-200px, 100%);
        opacity: 1;
      }
      100% {
        transform: translateY(0);
        opacity: 0.5;
      }
    }
    @keyframes blink {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
      }
      50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
      }
    }

    section.hero {
      //background-color: $blueDark;
      padding: 160px 0 100px;
      .badge {
        font-size: 14px;
      }
    }
    section.featured-in {
      padding: 30px 0;
      .inner {
        background: linear-gradient(65deg,rgba($blueDark2, 0.2) 1%, rgba($green, 0.2) 100%);
        padding: 30px 10px;
        border-radius: 20px;
      }
    }
    section.reviews {
      padding: 80px 0;
      .video_wrapper {
        padding: 6px;
      }
      .card {
        border-radius: 12px;
        box-shadow: 0px 0px 14px rgba($black, .08);
        .card-body {
          padding: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .card-title {
            font-size: 22px;
            font-weight: 500;
          }
          .card-text {
            font-size: 14px;
          }
          .author-title {
            font-size: 18px;
          }
        }
      }
      .reviews_slider.slick-initialized {
        padding: 0 12px;
      }
    }
    section.all_in_one {
      padding: 60px 0;
      .content_wrapper {
        position: relative;
        z-index: 1;
        border-radius: 24px;
        padding: 60px 0;
        overflow: hidden;
        > img.bg,
        picture.bg {
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: center;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: -2;
          pointer-events: none;
          user-select: none;
          source,
          img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            object-position: center;
          }
        }
      }
      .card {
        background-color: rgba($white, 0.2);
        backdrop-filter: blur(20px);
        border: 1px solid rgba($white, 0.18);
        box-shadow: 0 8px 32px 0 rgba($black, .2);

        border-radius: 24px;
        transition: all .2s ease-in-out;
        cursor: pointer;
        .card-header {
          background-color: transparent;
          border: none;
          transform: translateY(60px);
          transition: all .4s ease-in-out;
          .card-img {
            height: auto;
            width: 100px;
            margin: 0 auto;
            transition: all .4s ease-in-out;
          }
          .card-title {
            transition: all .4s ease-in-out;
          }
        }
        .card-body {
          overflow: hidden;
          padding: 0 10px 40px;
          transform-origin: center;
          position: relative;
          z-index: 1;
          transition: all .4s ease-in-out;
          ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
            opacity: 0;
            transition: all .4s ease-in-out;
            li {
              background-color: rgba($white, .1);
              font-weight: 600;
              border-radius: 8px;
              padding: 6px 20px;
              max-width: max-content;
              margin: 0 auto;
              span {
                background: #28A9E0;
                background: -webkit-linear-gradient(90deg, rgba(40, 169, 224, 1) 50%, rgba(96, 191, 153, 1) 100%);
                background: -moz-linear-gradient(90deg, rgba(40, 169, 224, 1) 50%, rgba(96, 191, 153, 1) 100%);
                background: linear-gradient(90deg, rgba(40, 169, 224, 1) 50%, rgba(96, 191, 153, 1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28A9E0", endColorstr="#60BF99", GradientType=1);
                color: transparent;
                background-clip: text;
              }
            }
          }
          .text_wrapper {
            height: 100%;
            width: 80%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all .4s ease-in-out;
            .card-img {
              height: auto;
              width: 24px;
              margin: 0 auto;
              border-radius: 0;
            }
          }
        }
        &:hover {
          background: linear-gradient(65deg,rgba($blueDark2, 0.4) 1%, rgba($blueDark, 0.4) 100%);
          border-width: 0;
          .card-header {
            transform: translateY(0);
            .card-img {
              transform: scale(.6);
            }
            .card-title {
              color: $white;
              transform: scale(.8) translateY(-20px);
            }
          }
          .card-body {
            ul {
              opacity: 1;
              li {
                background-color: rgba($blueDark2, 0.2);
              }
            }
            .text_wrapper {
              opacity: 0;
              transform: translate(-50%, calc(-50% + 20px));
            }
          }
        }
      }
    }
    section.who_we_are {
      padding: 80px 0;
      .card {
        background: #ffffff;
        background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
        background: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
        border: solid 1px rgba($white, .2);
        border-radius: 24px;
        overflow: hidden;
        .card-header {
          background-color: transparent;
          padding: 24px;
          position: relative;
          border: none;
          ul {
            display: flex;
            flex-direction: column;
            gap: 4px;
            li {
              background: #ffffff;
              background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
              background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
              background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
              padding: 4px 0;
              position: relative;
              &:before {
                content: "";
                background-color: rgba($white, 0.2);
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                right: 100%;
              }
            }
          }
          &.bg-text {
            padding: 80px 24px 40px;
            &:before {
              content: "Unlock millions of assets";
              width: 100%;
              font-size: 6vw;
              font-weight: 600;
              color: rgba($white, .05);
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, 0);
            }
          }
        }
        .card-body {
          padding: 0 0 0 20px;
        }
        &.s2 {
          .card-header {
            padding: 24px;
          }
          .card-body {
            padding: 0 24px 24px;
          }
        }
      }
    }
    section.ai_ads_pro {
      padding: 80px 0;
      .card {
        background-color: transparent;
        border: none;
        border-radius: 24px;
        overflow: hidden;
        padding: 60px 50px;
        .card-header {
          background-color: transparent;
          padding: 0 50px 0 0;
          position: relative;
          border: none;
        }
        .card-body {
          padding: 0;
        }
      }
      .nav-pills {
        justify-content: center;
        gap: 16px;
        .nav-item {
          width: 100%;
          max-width: calc(16.666% - 13.333px);
          .nav-link {
            background-color: rgba($white, .1);
            color: $white;
            font-size: 16px;
            padding: 8px 10px;
            border: none;
            border-radius: 8px;
            transition: all .2s ease-in-out;
            width: 100%;
            position: relative;
            z-index: 1;
            outline: none;
            overflow: hidden;
            img {
              height: auto;
              width: 20px;
              margin: 0 8px 0 0;
            }
            &:before {
              content: "";
              background: $blueDark2;
              height: 100%;
              width: 0;
              position: absolute;
              top: 0;
              left: 0;
              z-index: -1;
              transition: none;
            }
            &.active {
              &::before {
                animation: fillBar 4s linear forwards;
              }
            }
            @keyframes fillBar {
              from { width: 0%; }
              to { width: 100%; }
            }
          }
        }
      }
      .content_bg {
        background: url("../../img/automation_card_bg.jpg") no-repeat center / cover;
        border-radius: 24px;
        overflow: hidden;
        .tab-content {
          width: 600%;
          display: flex;
          align-items: center;

          .tab-pane {
            display: block!important;
            width: calc(100% / 6);
            order: 2;
            &.active {
              order: 1;
            }
          }
        }
      }
      .start_now {
        background-color: rgba($white, .1);
        border: solid 1px rgba($white, .2);
        border-radius: 24px;
        padding: 24px;
        .top {
          padding-bottom: 24px;
          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            li {
              display: flex;
              align-items: center;
              gap: 10px;
              width: 100%;
              max-width: calc(33.333% - 16px);
              img {
                height: auto;
                width: 72px;
              }
            }
          }
        }
        .bottom {
          padding-top: 24px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 24px;
          position: relative;
          &:before {
            content: "";
            background: #28A9E0;
            background: -webkit-linear-gradient(90deg, rgba(40, 169, 224, 0) 0%, rgba(40, 169, 224, 0.25) 25%, rgba(40, 169, 224, 0.5) 50%, rgba(40, 169, 224, 0.25) 75%, rgba(40, 169, 224, 0) 100%);
            background: -moz-linear-gradient(90deg, rgba(40, 169, 224, 0) 0%, rgba(40, 169, 224, 0.25) 25%, rgba(40, 169, 224, 0.5) 50%, rgba(40, 169, 224, 0.25) 75%, rgba(40, 169, 224, 0) 100%);
            background: linear-gradient(90deg, rgba(40, 169, 224, 0) 0%, rgba(40, 169, 224, 0.25) 25%, rgba(40, 169, 224, 0.5) 50%, rgba(40, 169, 224, 0.25) 75%, rgba(40, 169, 224, 0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28A9E0", endColorstr="#28A9E0", GradientType=0);
            height: 2px;
            width: 80%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
          }
        }
      }
    }
    section.social_media_planner {
      padding: 80px 0;
      .card {
        background-color: transparent;
        padding: 2px;
        border-radius: 24px;
        overflow: hidden;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .card-header {
          padding: 24px;
          border-radius: 24px 24px 0 0;
          overflow: hidden;
          position: relative;
          border: none;
          &.bg-text {
            padding: 80px 24px 40px;
            &:before {
              content: "10x Faster";
              width: 100%;
              font-size: 6vw;
              font-weight: 600;
              color: rgba($white, .05);
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, 0);
            }
          }
          &.bg-effect {
            background: $blueDark;
            background: linear-gradient(90deg,rgba($green, 0.4) 0%, rgba($blueDark, 1) 50%, rgba($green, 0.5) 100%) !important;
            //background: url("../../img/automation_card_bg.jpg") no-repeat center / cover;
            border-radius: 24px;
          }
        }
        .card-body {
          background-color: $blueDark2;
          border-radius: 0 0 24px 24px;
          padding: 0;
          overflow: hidden;
          flex: unset;
          .video_wrapper {
            border-radius: 0;
            video {
              border-radius: 0;
            }
          }
        }
        &:has(.card-header.bg-effect) {
          padding: 4px;
          &:before {
            display: none;
          }
        }
        &:before {
          content: "";
          background-color: $blueDark2;
          height: calc(100% - 4px);
          width: calc(100% - 4px);
          position: absolute;
          top: 2px;
          left: 2px;
          z-index: -1;
          border-radius: 24px;
        }
        &:after {
          content: "";
          background: $blueDark2;
          background: -webkit-linear-gradient(135deg, rgba($blueDark2, 1) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 66%, rgba($blueDark2, 1) 100%);
          background: -moz-linear-gradient(135deg, rgba($blueDark2, 1) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 66%, rgba($blueDark2, 1) 100%);
          background: linear-gradient(135deg, rgba($blueDark2, 1) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 66%, rgba($blueDark2, 1) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00A2E2", endColorstr="#00A2E2", GradientType=0);
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -2;
        }
      }
    }
    section.crm_and_messaging {
      padding: 80px 0;
      .card {
        background-color: transparent;
        border: none;
        border-radius: 24px;
        overflow: hidden;
        padding: 60px 50px;
        .card-header {
          background-color: transparent;
          padding: 0 50px 0 0;
          position: relative;
          border: none;
        }
        .card-body {
          padding: 0;
        }
      }
      .nav-pills {
        justify-content: center;
        gap: 16px;
        .nav-item {
          width: 100%;
          max-width: calc(20% - 12.8px);
          .nav-link {
            height: 100%;
            width: 100%;
            background-color: rgba($white, .1);
            color: $white;
            font-size: 24px;
            font-weight: 600;
            text-align: start;
            padding: 16px;
            border: solid 2px transparent;
            border-radius: 16px;
            transition: all .2s ease-in-out;
            span.play_button {
              background-color: rgba($white, .4);
              padding: 19px 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 0 0 0 5px rgba($white, .1);
              margin: 5px 5px 30px;
              border-radius: 50%;
              max-width: max-content;
              transition: all .2s ease-in-out;
              img {
                height: auto;
                width: 14px;
              }
            }
            &.active {
              border-color: $sky;
              color: $blue;
              span.play_button {
                background-color: $green;
                box-shadow: 0 0 0 5px rgba($sky, .4);
              }
            }
            &:hover {
              border-color: $blueDark2;
              color: $white;
              span.play_button {
                background-color: $sky;
                box-shadow: 0 0 0 5px rgba($sky, .4);
              }
            }
          }
        }
      }
      .tab-content {
        background: url("../../img/automation_card_bg.jpg") no-repeat center / cover;
        border-radius: 24px;
        overflow: hidden;
      }
    }
    section.industry_resources {
      padding: 80px 0;
      .card {
        background-color: rgba($white, .1);
        border: solid 1px rgba($white, .2);
        border-radius: 24px;
        overflow: hidden;
        .card-header {
          background-color: transparent;
          padding: 24px;
          position: relative;
          border: none;
          ul {
            display: flex;
            flex-direction: column;
            gap: 4px;
            li {
              background: $blueDark2;
              background: -webkit-linear-gradient(90deg, rgba($blueDark2, 0.6) 0%, rgba($blueDark2, 0) 70%);
              background: -moz-linear-gradient(90deg, rgba($blueDark2, 0.6) 0%, rgba($blueDark2, 0) 70%);
              background: linear-gradient(90deg, rgba($blueDark2, 0.6) 0%, rgba($blueDark2, 0) 70%);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
              padding: 4px 0;
              position: relative;
              &:before {
                content: "";
                background-color: rgba($blueDark2, 0.6);
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                right: 100%;
              }
            }
          }
          &.bg-text {
            padding: 80px 24px 40px;
            &:before {
              content: "Unlock millions of assets";
              width: 100%;
              font-size: 6vw;
              font-weight: 600;
              color: rgba($white, .05);
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, 0);
            }
          }
        }
        .card-body {
          padding: 0;
          .card-img {
            //height: 100%;
            width: 100%;
            border-radius: 0;
            object-fit: cover;
            object-position: left center;
          }
          .img_wrapper {
            width: 100%;
            overflow: hidden;
            margin: 0 auto -5px;
            z-index: -1;
            .obj_1 {
              --imageWidth: 4520px;
              background: url("../../img/img_horizontal_1.png") repeat-x left center / auto 100%;
              height: 226px;
              width: calc(var(--imageWidth) * 2);
              animation: horizontal_infinite_scroll calc(1s * 60) linear infinite;
            }
            .obj_2 {
              --imageWidth: 4746px;
              background: url("../../img/img_horizontal_2.png") repeat-x left center / auto 100%;
              height: 226px;
              width: calc(var(--imageWidth) * 2);
              animation: horizontal_infinite_scroll_inverse calc(1s * 60) linear infinite;
            }
          }
          @keyframes horizontal_infinite_scroll {
            0% {
              transform: translateX(0);
            }
            100% {
              transform: translateX(calc(-1 * var(--imageWidth)));
            }
          }
          @keyframes horizontal_infinite_scroll_inverse {
            0% {
              transform: translateX(calc(-1 * var(--imageWidth)));
            }
            100% {
              transform: translateX(calc(0 * var(--imageWidth)));
            }
          }
        }
      }
    }
    section.pricing {
      padding: 80px 0 40px;
      .item {
        width: 100%;
        max-width: calc(50% - 12px);
        flex: 1;
        .card {
          background: #ffffff;
          background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
          background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
          border: solid 2px rgba($white, .2);
          border-radius: 24px;
          overflow: hidden;
          height: 100%;
          .card-header {
            padding: 24px 24px 16px;
            border: none;
            display: flex;
            flex-direction: column;
            position: relative;
            .package_name {
              max-width: max-content;
            }
            img.popular_tag {
              height: auto;
              width: 50px;
              position: absolute;
              top: 0;
              right: 0;
            }
            .f-18 {
              font-size: 18px;
            }
            .btn-s1 {
              font-size: 16px;
              span {
                padding: 6px 40px;
                align-items: center;
                img {
                  height: 24px;
                  width: 24px;
                }
              }
              &:before {
                content: "";
                background: #00A2E2;
                background: -webkit-linear-gradient(90deg, rgba(0, 162, 226, 0) 0%, rgba(0, 162, 226, 1) 25%, rgba(0, 162, 226, 1) 50%, rgba(0, 162, 226, 1) 75%, rgba(0, 162, 226, 0) 100%);
                background: -moz-linear-gradient(90deg, rgba(0, 162, 226, 0) 0%, rgba(0, 162, 226, 1) 25%, rgba(0, 162, 226, 1) 50%, rgba(0, 162, 226, 1) 75%, rgba(0, 162, 226, 0) 100%);
                background: linear-gradient(90deg, rgba(0, 162, 226, 0) 0%, rgba(0, 162, 226, 1) 25%, rgba(0, 162, 226, 1) 50%, rgba(0, 162, 226, 1) 75%, rgba(0, 162, 226, 0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00A2E2", endColorstr="#00A2E2", GradientType=1);
                padding-bottom: calc(100% + 10px);
                width: 60%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(0deg);
                z-index: -1;
                transition: all 1s ease;
                pointer-events: none;
                user-select: none;
                animation: button 4s linear infinite;
              }
              &:hover,
              &:focus,
              &:active {
                span {
                  background: #00A2E2;
                  color: $white;
                  border-color: $white;
                  img {
                    filter: brightness(0) invert(1);
                  }
                }
              }
            }
            &:before {
              content: "";
              background: url("../../img/webp/pricing_card_bg.webp") no-repeat center / auto;
              height: 314px;
              width: 314px;
              position: absolute;
              top: 0;
              left: 0;
              transform: translate(calc(-50% + 50px), -50%);
              z-index: -1;
            }
          }
          .card-body {
            padding: 0 0 24px;
            .title {
              background: #ffffff;
              background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
              background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
              background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
              font-size: 16px;
              padding: 4px 24px;
            }
            .text-red {
              max-width: calc(100% - 70px);
            }
            ul {
              list-style: none;
              padding: 0;
              margin: 0;
              display: flex;
              flex-direction: column;
              gap: 4px;
              li {
                background: #ffffff;
                background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
                background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
                font-size: 16px;
                line-height: 18px;
                padding: 4px 24px 4px 48px;
                position: relative;
                &:before {
                  content: "";
                  background: url("../../img/check.png") no-repeat center / cover;
                  height: 15px;
                  width: 15px;
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translate(24px, -50%);
                }
              }
            }
          }
          &.card-blue {
            background: #27A3DC;
            background: -webkit-linear-gradient(180deg, rgba(39, 163, 220, 0.32) 0%, rgba(39, 163, 220, 0.04) 100%);
            background: -moz-linear-gradient(180deg, rgba(39, 163, 220, 0.32) 0%, rgba(39, 163, 220, 0.04) 100%);
            background: linear-gradient(180deg, rgba(39, 163, 220, 0.32) 0%, rgba(39, 163, 220, 0.04) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#27A3DC", endColorstr="#27A3DC", GradientType=0);
          }
        }
        &.reseller {
          .card {
            .card-header {
              &:before {
                transform: translate(calc(-50% + 72px), -50%);
              }
            }
          }
        }
      }
      .pricing_slider {
        display: flex;
        justify-content: center;
        gap: 24px;
        .slick-list {
          width: 100%;
          padding: 0 10% 0 0 !important;
          .slick-track {
            display: flex;
            align-items: start;
            gap: 24px;
          }
        }
      }
      .nav-pills {
        justify-content: center;
        gap: 16px;
        .nav-item {
          .nav-link {
            background-color: transparent;
            color: $white;
            font-size: 20px;
            font-weight: 400;
            border: solid 1px $white;
            padding: 8px 24px;
            border-radius: 50px;
            min-width: 130px;
            &.active {
              background-color: $white;
              color: $black;
              font-weight: 600;
            }
          }
          &:nth-child(2) {
            .nav-link {
              background: #00A2E2;
              background: -webkit-linear-gradient(43deg, rgba(0, 162, 226, 1) 0%, rgba($green, 1) 100%);
              background: -moz-linear-gradient(43deg, rgba(0, 162, 226, 1) 0%, rgba($green, 1) 100%);
              background: linear-gradient(43deg, rgba(0, 162, 226, 1) 0%, rgba($green, 1) 100%);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00A2E2", endColorstr="#9747FF", GradientType=0);
              border: 0;
              position: relative;
              z-index: 1;
              &:before {
                content: "";
                background: $blueDark2;
                background: -webkit-linear-gradient(43deg, rgba($blueDark2, 1) 0%, rgba($blueDark, 1) 100%);
                background: -moz-linear-gradient(43deg, rgba($blueDark2, 1) 0%, rgba($blueDark, 1) 100%);
                background: linear-gradient(43deg, rgba($blueDark2, 1) 0%, rgba($blueDark, 1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020B19", endColorstr="#130922", GradientType=0);
                height: calc(100% - 2px);
                width: calc(100% - 2px);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: -1;
                border-radius: 50px;
                transition: all .3s ease-in-out;
              }
              &:after {
                content: "";
                background: url("../../img/3d-glossy-shape 1.png") no-repeat center / cover;
                height: 36px;
                width: 34px;
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(-13px, -17px);
                animation: star 2s ease-in-out infinite;
              }
              @keyframes star {
                0% {
                  transform: translate(-13px, -17px) scale(1);
                }
                50% {
                  transform: translate(-13px, -17px) scale(.7);
                }
              }
              &.active {
                &:before {
                  background: $white;
                }
              }
            }
          }
        }
      }
    }
    section.payment {
      padding: 0 0 80px;
      .content_wrapper {
        display: flex;
        align-content: center;
        border-radius: 16px;
        overflow: hidden;
        border: solid 2px rgba($white, .2);
        .left_content {
          background: rgba($white, .2);
          width: 100%;
          max-width: max-content;
          padding: 10px 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          .top_bar {
            display: flex;
            align-items: center;
            gap: 10px;
            img {
              width: 100%;
              max-width: 70px;
              filter: brightness(0) invert(1);
            }
          }
          > img {
            width: 100%;
            max-width: 280px;
          }
        }
        .right_content {
          width: 100%;
          padding: 20px 10px;
          .d-flex {
            img {
              height: auto;
              width: 100%;
              max-width: 140px;
              margin: 0 10px;
              &:first-child {
                margin: 0 10px 0 0;
              }
              &:last-child {
                margin: 0 0 0 10px;
              }
            }
          }
        }
      }
      ul.info {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        li {
          font-size: 24px;
          font-weight: 500;
          img {
            width: 32px;
          }
        }
      }
    }
    section.section_1 {
      padding: 80px 0;
      .card {
        padding: 12px;
        border: none;
        border-radius: 24px;
        box-shadow: 2px 2px 10px -2px rgba($black, .05);
        .card-body {
          padding: 0;
        }
        img.card-img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .card.card-s2 {
        background: #1F2A54;
        background: -webkit-linear-gradient(90deg, rgba(31, 42, 84, 1) 0%, rgba(17, 21, 61, 1) 50%, rgba(15, 29, 73, 1) 100%);
        background: -moz-linear-gradient(90deg, rgba(31, 42, 84, 1) 0%, rgba(17, 21, 61, 1) 50%, rgba(15, 29, 73, 1) 100%);
        background: linear-gradient(90deg, rgba(31, 42, 84, 1) 0%, rgba(17, 21, 61, 1) 50%, rgba(15, 29, 73, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1F2A54", endColorstr="#0F1D49", GradientType=1);
        padding: 24px;
        border: none;
        border-radius: 24px;
        box-shadow: 2px 2px 10px -2px rgba($black, .05);
      }
    }
    section.faq {
      padding: 80px 0;
      .accordion {
        .accordion-item {
          background: rgba($white, .1);
          margin: 0 0 8px;
          border: solid 1px rgba($white, .2);
          border-radius: 10px;
          overflow: hidden;
          .accordion-header {
            .accordion-button {
              background: transparent;
              color: $white;
              font-size: 20px;
              font-weight: 500;
              padding: 15px;
              border: none;
              box-shadow: none;
              &:after {
                background-image: var(--bs-accordion-btn-icon);
                filter: brightness(0) invert(1);
              }
            }
          }
          .accordion-collapse {
            .accordion-body {
              color: $gray;
              font-size: 20px;
              padding: 0 15px 15px;
            }
          }
          &:last-child {
            margin: 0;
          }
        }
      }
    }
    section.section_3 {
      padding: 90px 0 20px;
      .content_wrapper {
        background: rgb(3,6,63);
        background: -moz-linear-gradient(90deg, rgba(3,6,63,1) 0%, rgba(3,6,63,1) 5%, rgba(0,0,0,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(3,6,63,1) 0%, rgba(3,6,63,1) 5%, rgba(0,0,0,1) 100%);
        background: linear-gradient(90deg, rgba(3,6,63,1) 0%, rgba(3,6,63,1) 5%, rgba(0,0,0,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#03063f",endColorstr="#000000",GradientType=1);
        border: solid 2px rgba($sky, .6);
        border-radius: 16px;
        padding: 60px 50px 60px 60px;
        position: relative;
        z-index: 1;
        .img_wrapper {
          margin-top: -150px;
          img {
            width: 100%;
            max-width: 748px;
            border-radius: 18px;
          }
        }
        > img.bg {
          height: 100%;
          width: 100%;
          object-fit: cover;
          object-position: center;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: -2;
          pointer-events: none;
          user-select: none;
          border-radius: 16px;
        }
      }
      &:after {
        content: "";
        background-color: $blueDark2;
        height: 45%;
        width: 200%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: -1;
      }
    }
  }
}
@media (max-width: 1580px) {
  body {
    main {
      .object {
        width: 400px;
        height: 400px;
        filter: blur(150px);
      }
      section.ai_ads_pro {
        .nav-pills {
          .nav-item {
            .nav-link {
              font-size: 14px;
            }
          }
        }
      }
      section.crm_and_messaging {
        .nav-pills {
          .nav-item {
            .nav-link {
              font-size: 20px;
            }
          }
        }
      }
      section.industry_resources {
        .card {
          .card-body {
            .img_wrapper {
              .obj_1 {
                --imageWidth: 4200px;
                height: 200px;
              }
              .obj_2 {
                --imageWidth: 4000px;
                height: 200px;
              }
            }
          }
        }
      }
      section.pricing {
        .pricing_slider {
          gap: 16px;
          .item {
            .card {
              //padding: 16px;
              .card-body {
                ul {
                  li {
                    font-size: 16px;
                  }
                }
              }
            }
          }
          .item.popular {
            max-width: calc(24% - 19.2px);
            .card {
              padding: 6px;
              .card-body {
                padding: 16px;
              }
            }
          }
          .slick-list {
            .slick-track {
              gap: 16px;
            }
          }
        }
      }
      section.payment {
        .content_wrapper {
          .left_content {
            > img {
              max-width: 240px;
            }
          }
          .right_content {
            .d-flex {
              img {
                max-width: 120px;
              }
            }
          }
        }
      }
      section.section_1 {
        .img_wrapper {
          padding-right: 20px;
        }
      }
    }
  }
}
@media (max-width: 1380px) {
  body {
    main {
      section.hero {
        padding: 140px 0 80px;
      }
      section.featured-in {
        img {
          max-width: 150px;
        }
      }
      section.reviews {
        padding: 60px 0;
      }
      section.all_in_one {
        .content_wrapper {
          padding: 40px 20px;
        }
        .card {
          .card-header {
            .card-img {
              width: 80px;
            }
          }
          .card-body {
            padding: 0 10px 20px;
            ul {
              li {
                font-size: 14px;
                padding: 6px 10px;
              }
            }
            .text_wrapper {
              p {
                font-size: 14px;
              }
            }
          }
        }
      }
      section.who_we_are {
        padding: 60px 0;
      }
      section.ai_ads_pro {
        padding: 60px 0;
        .nav-pills {
          .nav-item {
            .nav-link {
              font-size: 12px;
              padding: 8px 4px;
            }
          }
        }
      }
      section.social_media_planner {
        padding: 60px 0;
      }
      section.crm_and_messaging {
        padding: 60px 0;
        .nav-pills {
          .nav-item {
            .nav-link {
              font-size: 16px;
            }
          }
        }
      }
      section.industry_resources {
        padding: 60px 0;
        .card {
          .card-body {
            .img_wrapper {
              .obj_1 {
                --imageWidth: 3000px;
                height: 150px;
              }
              .obj_2 {
                --imageWidth: 3150px;
                height: 150px;
              }
            }
          }
        }
      }
      section.pricing {
        padding: 60px 0 40px;
      }
      section.payment {
        padding: 0 0 60px;
        .content_wrapper {
          .left_content {
            padding: 10px 30px;
            .top_bar {
              img {
                max-width: 60px;
              }
            }
            > img {
              max-width: 200px;
            }
          }
          .right_content {
            .d-flex {
              img {
                max-width: 100px;
              }
            }
          }
        }
        ul.info {
          li {
            font-size: 18px;
            img {
              width: 26px;
            }
          }
        }
      }
      section.faq {
        padding: 60px 0;
        .accordion {
          .accordion-item {
            .accordion-header {
              .accordion-button {
                font-size: 18px;
              }
            }
            .accordion-collapse {
              .accordion-body {
                font-size: 18px;
              }
            }
          }
        }
      }
      section.section_3 {
        .content_wrapper {
          padding: 40px 34px 40px 40px;
          .img_wrapper {
            margin-top: -130px;
          }
        }
      }
    }
  }
}
@media (max-width: 1180px) {
  body {
    main {
      section.ai_ads_pro {
        .card {
          padding: 40px 30px;
          .card-header {
            padding: 0 30px 0 0;
          }
        }
        .nav-pills {
          gap: 4px;
          .nav-item {
            max-width: calc(16.666% - 3.333px);
            .nav-link {
              padding: 8px 2px;
            }
          }
        }
      }
      section.crm_and_messaging {
        .card {
          padding: 40px 30px;
          .card-header {
            padding: 0 30px 0 0;
          }
        }
      }
    }
  }
}
@media (max-width: 992px) {
  body {
    main {
      section.hero {
        padding: 120px 0 60px;
      }
      section.featured-in {
        img {
          max-width: 100px;
        }
      }
      section.who_we_are {
        padding: 80px 0;
        .card {
          .card-header {
            padding: 20px;
          }
          .card-body {
            padding: 20px 20px 0;
          }
          &.s2 {
            .card-header {
              padding: 20px;
            }
            .card-body {
              padding: 0 20px 20px;
            }
          }
        }
      }
      section.ai_ads_pro {
        .card {
          padding: 40px;
          .card-header {
            padding: 0 0 20px 0;
          }
        }
        .nav-pills {
          .nav-item {
            max-width: calc(33.333% - 10.666px);
          }
        }
        .start_now {
          .top {
            ul {
              li {
                max-width: 100%;
              }
            }
          }
          .bottom {
            flex-direction: column;
          }
        }
      }
      section.crm_and_messaging {
        .card {
          padding: 40px;
          .card-header {
            padding: 0 0 20px 0;
          }
        }
        .nav-pills {
          .nav-item {
            max-width: calc(33.33% - 10.66666px);
          }
        }
      }
      section.pricing {
        padding: 60px 0 20px;
        .item {
          .card {
            .card-body {
              ul {
                li {
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
      section.payment {
        .content_wrapper {
          flex-wrap: wrap;
          .left_content {
            max-width: 100%;
            justify-content: center;
            padding: 10px;
          }
        }
        ul.info {
          gap: 4px;
          flex-direction: column;
        }
      }
      section.section_1 {
        padding: 60px 0;
      }
      section.faq {
        .accordion {
          .accordion-item {
            .accordion-header {
              .accordion-button {
                font-size: 16px;
              }
            }
            .accordion-collapse {
              .accordion-body {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 767px) {
  body {
    main {
      section.reviews {
        padding: 40px 0;
        .card {
          margin: 0 6px;
        }
      }
      section.all_in_one {
        padding: 40px 0;
      }
      section.who_we_are {
        padding: 40px 0;
      }
      section.ai_ads_pro {
        padding: 40px 0;
        .card {
          padding: 20px;
        }
        .start_now {
          padding: 20px;
        }
      }
      section.social_media_planner {
        padding: 40px 0;
        .card {
          .card-header {
            &.bg-text {
              padding: 40px 24px 40px;
              &:before {
                display: none;
              }
            }
          }
        }
      }
      section.crm_and_messaging {
        padding: 40px 0;
        .card {
          padding: 20px;
        }
      }
      section.industry_resources {
        padding: 40px 0;
        .card {
          .card-header {
            &.bg-text {
              padding: 40px 24px 40px;
              &:before {
               display: none;
              }
            }
          }
        }
      }
      section.pricing {
        padding: 40px 0 20px;
        .item {
          max-width: 100%;
          .card {
            .card-header {
              padding: 14px 14px 16px;
              img.popular_tag {
                width: 44px;
              }
              .f-18 {
                font-size: 14px;
              }
              .btn-s1 {
                span {
                  padding: 6px 20px;
                }
              }
              &:before {
                transform: translate(calc(-50% + 40px), calc(-50% + -10px));
              }
            }
            .card-body {
              padding: 0 0 14px;
              .title {
                padding: 4px 14px;
              }
              ul {
                li {
                  padding: 4px 14px 4px 38px;
                  &:before {
                    transform: translate(14px, -50%);
                  }
                }
              }
            }
          }
          &.reseller {
            .card {
              .card-header {
                &:before {
                  transform: translate(calc(-50% + 62px), calc(-50% + -10px));
                }
              }
            }
          }
        }
        .nav-pills {
          justify-content: center;
          gap: 16px;
          .nav-item {
            .nav-link {
              font-size: 16px;
              padding: 8px 20px;
            }
          }
        }
      }
      section.payment {
        padding: 0 0 40px;
        .content_wrapper {
          .right_content {
            .d-flex {
              img {
                max-width: 80px;
                margin: 0 5px;
                &:first-child {
                  margin: 0 5px 0 0;
                }
                &:last-child {
                  margin: 0 0 0 5px;
                }
              }
            }
          }
        }
        ul.info {
          li {
            font-size: 14px;
            img {
              width: 24px;
            }
          }
        }
      }
      section.section_1 {
        padding: 40px 0;
        .card.card-s2 {
          padding: 12px;
        }
      }
      section.faq {
        padding: 40px 0;
      }
      section.section_3 {
        .content_wrapper {
          .img_wrapper {
            img {
              max-width: 400px;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 567px) {
  body {
    main {
      section.hero {
        padding: 100px 0 40px;
        .badge {
          font-size: 12px;
        }
      }
      section.featured-in {
        padding: 20px 0;
      }
      section.ai_ads_pro {
        .nav-pills {
          .nav-item {
            max-width: calc(50% - 8px);
          }
        }
      }
      section.crm_and_messaging {
        .nav-pills {
          .nav-item {
            max-width: 100%;
            .nav-link {
              display: flex;
              align-items: center;
              padding: 12px 12px 12px 12px;
              span.play_button {
                padding: 9px 10px;
                margin: 0 12px 0 0;
                img {
                  width: 7px;
                }
              }
            }
          }
        }
      }
      section.payment {
        .content_wrapper {
          .right_content {
            .d-flex {
              img {
                max-width: 50px;
              }
            }
          }
        }
      }
    }
  }
}