/* heroSection */
.heroSection {
  background: var(--hero-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 9rem 0 0rem;
}

.heroSection h1 {
  color: #0d144a;
  text-align: center;
  font-family: var(--paytone);
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.heroSection p {
  color: #393c56;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 4rem;
}

.borderContainer {
  border-radius: 1.25rem;
  border: 1.4px solid #dad6ff;
  background: rgba(255, 255, 255, 0.5);
  padding: 1rem;
  width: 90%;
  height: 100%;
  margin: auto;
}

.sl-embed {
  height: 85vh !important;
}
/*  */

/* Logo Section */
.logo-scrolling {
  padding: 0;
}

.logo-scrolling .hrLine {
  background: var(--hrLine);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 1px;
  width: 90%;
  margin: auto;
}

.powering {
  position: relative;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-transform: capitalize;
  color: #3d3c7d;
  margin-bottom: 24px;
  padding: 0 1rem;
}

/* slider css */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-223.19rem);
  }
}

.slider {
  background: transparent;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.slider::before,
.slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100%;
  position: absolute;
  width: 15%;
  z-index: 2;
}

.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.slider::before {
  left: 0;
  top: 0;
}

.slider .slide-track {
  animation: scroll 30s linear infinite;
  display: flex;
  width: 223.19rem;
}

.slider .slide {
  padding: 1rem 2.5rem;
  text-align: center;
  display: flex;
  align-items: center;
}
/*  */

/* meetingBooked */

.meetingBooked {
  padding: 5rem 0;
}

.meetingBooked h2 {
  color: #0d144a;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0.75rem;
}

.meetingBookedContent {
  width: fit-content;
  margin-left: auto;
}

.meetingBooked ul {
  list-style: none;
  padding-left: 0px;
  margin-bottom: 2.5rem;
}

.meetingBooked li {
  color: #393c56;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  margin-bottom: 0.65rem;
  text-indent: -27px;
  margin-left: 25px;
}

.meetingBooked li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: var(--bulletin);
  background-repeat: no-repeat;
  position: relative;
  top: 4px;
  margin-right: 4px;
}

/*  */

/* onePlatform */

.onePlatform {
  padding: 4rem 0;
}

.onePlatform h2 {
  color: #0d144a;
  text-align: center;
  font-size: 2.0625rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 3.5rem;
}

.onePlatform .row {
  row-gap: 4rem;
}

.onePlatformCard:hover .rightArrow {
  display: none;
}

.onePlatformCard:hover .rightArrowPurple {
  display: inline-block;
}

@keyframes fadeOutTransform {
  from {
    opacity: 0;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(6px);
  }
}

.rightArrowPurple {
  display: none;
}

.onePlatformCard:hover {
  border: 1px solid #7352d8;
  box-shadow: 0px 8px 20px 0px rgba(115, 82, 216, 0.1);
}

.onePlatformCard:hover .cardHead {
  color: #7352d8;
}

.onePlatformCard {
  border: 1px solid #e7e3fc;
  border-radius: 1rem;
  padding: 1.5rem;
  width: 96%;
  height: 100%;
  transition: all 0.3s;
}

.onePlatformCard .cardImg {
  margin-bottom: 1.5rem;
}

.onePlatformCard .cardHead {
  color: #0d144a;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0.25rem;
}

.onePlatformCard .rightArrow,
.onePlatformCard .rightArrowPurple {
  position: relative;
  top: -1px;
  left: 6px;
  transition: all 0.3s;
}

.onePlatformCard .cardDesc {
  color: #393c56;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/*  */

/* klentyCustomer */

.klentyCustomer {
  padding: 2rem 0 6rem;
}

.klentyCustomer h2 {
  color: #0d144a;
  text-align: center;
  font-size: 2.0625rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 4.5rem;
}

.klentyCustomerCard {
  border-radius: 1.5rem;
  background: #f3f0ff;
  position: relative;
  padding: 3rem 3.5rem 2.25rem;
}

.quotesIcon {
  position: absolute;
  top: -20px;
  left: 3rem;
}

.klentyCustomerfeedback {
  color: #32174d;
  text-align: center;
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.75rem;
  letter-spacing: 0.03375rem;
  margin-bottom: 3rem;
}

.KlentyCustomerInfo {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: auto;
}

.borderRight {
  padding-right: 1.25rem;
  margin-right: 1rem;
  border-right: 1px solid #ccc1ff;
  gap: 8px;
}

.KlentyCustomerName {
  color: #32174d;
  font-feature-settings: "salt" on, "liga" off;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.KlentyCustomerRole {
  color: #32174d;
  font-feature-settings: "salt" on, "liga" off;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}
/*  */

/* ctaSection */

.ctaSection {
  background: linear-gradient(192deg, #5856ce -133.68%, #13004c 86.02%);
  padding: 5rem 0;
  text-align: center;
}

.ctaSection h2 {
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 2.5rem;
  text-transform: capitalize;
}

.ctaSection a {
  display: inline-block;
}

/*  */

@media only screen and (max-width: 786px) {
  /* meetingBooked */
  .meetingBooked a {
    display: inline-block;
    margin-bottom: 2.5rem;
  }
  /*  */

  /* onePlatform */
  .onePlatform .row {
    gap: 2rem;
  }

  /* klentyCustomer */
  .klentyCustomer .row {
    row-gap: 3rem;
  }

  .KlentyCustomerInfo {
    flex-direction: column;
    row-gap: 2rem;
  }

  .borderRight {
    border: none;
    padding-right: 0;
    margin-right: 0;
    align-items: center;
    gap: 1rem;
  }
}