/* hero-section */

.hero-section {
  padding: 5.625rem 0 5rem;
}

.hero-section h1 {
  color: #0e0d59;
  font-family: "Paytone One";
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 0.75rem;
}

.w-124 {
  width: 122%;
}

.linkButton {
  color: #504ee4;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-transform: uppercase;
}

.linkButton svg {
  transition: all 0.4s;
  position: relative;
  top: 1px;
  left: 4px;
}

.linkButton:hover {
  color: #504ee4;
}

.linkButton:hover svg {
  transform: translateX(4px);
}

.hero-section p {
  color: #3d3c7d;
  font-size: 1.125rem;
  line-height: normal;
  margin-bottom: 0.5rem;
}

.hero-section img {
  position: relative;
  top: 24px;
}

.hero-section p:last-of-type {
  margin-bottom: 2.5rem;
}

/*  */

/* trustedCompanies */

.trustedCompanies {
  padding-bottom: 4rem;
}

.trustedCompanies h2 {
  color: #3d3c7d;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 1.625rem;
  text-align: center;
}

.trustedCompanies img {
  margin: 0 2rem;
}

/*  */

/* salesleaders */

.salesleaders {
  padding: 4rem 0 0;
  background: #fafaff;
}

.salesleaders h2 {
  color: #0e0d59;
  text-align: center;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 4rem;
}

/* sales-card */

.sales-card {
  width: 82%;
}

.sales-card img {
  margin-bottom: 1rem;
}

.sales-card h3 {
  color: #0e0d59;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 0.25rem;
}

.sales-card p {
  color: #2d2c76;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 5rem;
}

.salesleadersbottombg {
  position: absolute;
  bottom: 0;
  right: -132px;
}

/*  */

/* startandend */

.startandend {
  position: relative;
  padding: 4rem 0;
}

.startandend h2 {
  color: #0e0d59;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 0.5rem;
}

.startandend p {
  color: #2d2c76;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0.5rem;
}

.startandend p strong {
  color: #0e0d59;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 1rem 0 0.75rem;
}

.startandend ul {
  padding-left: 20px;
}

.startandend ul li {
  list-style-image: var(--purple-tick);
  color: #3d3c7d;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0.5rem;
}

.startandend .bg-situate {
  position: absolute;
  right: -264px;
  top: -52px;
  z-index: -1;
}

/*  */

/* g2badges */

.g2badges {
  padding: 3rem 0;
}

.g2badges h2 {
  color: #120155;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 2.5rem;
  text-align: center;
}

.g2badges h2 img {
  position: relative;
  top: -6px;
  right: -6px;
}

.badgesContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 88px;
}

/*  */

/* customertrust */

.customertrust {
  padding: 3rem 0;
}

.customertrust h2 {
  color: #0e0d59;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}

.image-grouping {
  position: relative;
  width: 380px;
  height: 380px;
}
.bigCircle {
  position: absolute;
  width: 380px;
  height: 380px;
  animation: rotate 4s infinite;
  transition-delay: 0.5s;
}
.smallcircle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate1 4s infinite;
}
.shieldImage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.badge-1 {
  position: relative;
  left: -16%;
  top: 12%;
}
.badge-2 {
  position: absolute;
  right: 7%;
  top: 4%;
}
.badge-3 {
  position: absolute;
  right: -6%;
  bottom: 0%;
}
.badge-4 {
  position: absolute;
  bottom: 4%;
  left: 4%;
}

@keyframes rotate {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate1 {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/*  */

/* businessgrowth */

.businessgrowth {
  padding: 3rem 0 6rem;
}

.businessgrowth h2 {
  color: #0e0d59;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 1.25rem;
}

.businessgrowth ul {
  padding-left: 24px;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.businessgrowth ul li {
  color: #3d3c7d;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.16px;
  margin-bottom: 1.5rem;
}

.businessgrowth ul li:last-child {
  margin: 0;
}

.quote {
  color: #504ee4;
  font-size: 6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: -52px;
}

.clientFeedback {
  border-radius: 12px;
  background: #f9f6ff;
  position: relative;
  padding: 2.75rem 1.875rem;
}

.clientFeedback .feedback {
  color: #3d3c7d;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 1.25rem;
  width: 81%;
}

.clientFeedback .feedback strong {
  color: #504ee4;
}

.profile-name {
  color: #0e0d59;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0;
}

.profile-main-image {
  position: absolute;
  bottom: -24%;
  right: -18%;
}

/*  */

/* cta-section */

.cta-section {
  background: var(--cta-section);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 6rem 1rem;
  text-align: center;
}

.cta-section h2 {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3.75rem;
  color: #ffffff;
  margin-bottom: 2.5rem;
}

.startbutton {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #151442 !important;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  height: 2.75rem;
}

.demobutton {
  padding: 0.6875rem 1.5rem;
  border: 1px solid #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-left: 1rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  height: 2.75rem;
}

/*  */

@media only screen and (max-width: 992px) {
  /* customertrust */
  .image-grouping {
    width: 100%;
  }
  .bigCircle {
    width: 100%;
  }
  .badge-1 {
    left: -10%;
    top: 2%;
    transform: scale(0.75);
  }
  .badge-2 {
    transform: scale(0.8);
    right: 6%;
    top: 6%;
  }
  .badge-3 {
    transform: scale(0.75);
  }
  .badge-4 {
    transform: scale(0.8);
  }
  /*  */

  .startandend .bg-situate,
  .salesleadersbottombg {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .hero-section {
    padding-top: 7rem;
  }
  .w-124 {
    width: 100%;
  }
  .sales-card {
    width: 100%;
  }
  .trustedCompanies img {
    margin: 0 0.5rem;
    margin-bottom: 2rem;
    transform: scale(0.75);
  }
  .badgesContainer {
    gap: 20px;
  }
  .badgesContainer img {
    width: 29%;
    height: auto;
  }
  .badgesContainer img:first-child {
    order: 4;
  }
  .badgesContainer img:last-child {
    order: 5;
    width: 23%;
  }
  .profile-main-image {
    right: -8px;
    bottom: -20%;
    width: 120px;
    height: 120px;
  }
  .clientFeedback {
    margin-top: 4rem;
  }
  .clientFeedback .feedback {
    width: 90%;
  }
  .quote {
    top: -36px;
  }
}

@media only screen and (max-width: 576px) {
  .shieldImage {
    transform: translate(-50%, -50%) scale(0.8);
  }
  .badge-3 {
    transform: scale(0.85);
  }
  .businessgrowth ul li {
    padding: 0 0.25rem;
  }

  @keyframes rotate {
    0% {
      transform: scale(0.85);
    }
    10% {
      transform: scale(0.85);
    }
    55% {
      transform: scale(0.93);
    }
    100% {
      transform: scale(0.85);
    }
  }

  @keyframes rotate1 {
    0% {
      transform: translate(-50%, -50%) scale(0.8);
    }
    40% {
      transform: translate(-50%, -50%) scale(0.88);
    }
    100% {
      transform: translate(-50%, -50%) scale(0.8);
    }
  }
}