@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap");

* {
  color: #fff;
  font-family: "Sora", sans-serif;
}

body {
  background-color: #0e0c15;
  box-sizing: border-box;
  margin: 0 auto;
}

.max-main {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.main-container {
  width: 100%;
  padding-top: 84px;
}

.primary-bg {
  background-color: #ac6aff;
}

.sub-bg-1 {
  background-color: #ffc876 !important;
}
.sub-bg-2 {
  background-color: #7adb78 !important;
}
.sub-bg-3 {
  background-color: #ff776f !important;
}

h5,
p {
  margin: 0;
}

/***************/
/* REUSEABLES */
/*************/

.section-spacer {
  margin-bottom: 64px;
}

/* .btm-spacer {
  margin-bottom: 32px;
} */

.section-header {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  /* or 125% */

  text-align: center;
  margin-bottom: 80px;
}

/*****************/
/* HERO SECTION */
/***************/
.slick-track {
  display: flex !important;
  align-items: center;
  justify-content: space-evenly;
  width: 344px !important;
  align-self: stretch !important;
}
.carousel-cards-container {
  max-width: 1540px;
}
.hero-wrapper {
  /* padding: 0 1.3rem;
  margin: 0 auto;
  max-width: 429px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; */
  position: relative;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-overlay {
  width: 1134px;
  height: 1000px;
  background-color: #0e0c15;
  position: absolute;
  top: 300px;

  filter: blur(300px);
}

.robot-bg {
  width: 1034px;
  position: absolute;
  top: -200px;
  opacity: 0.8;
}

.planet-1 {
  height: 16px;
  width: 16px;
  position: absolute;
  border-radius: 100%;
  z-index: 10;
  top: -270px;
  right: -320px;
  background: linear-gradient(
    180deg,
    rgba(185, 174, 223, 0.8) 0%,
    rgba(26, 26, 50, 0.8) 100%
  );
}

.planet-2 {
  height: 14px;
  width: 14px;
  position: absolute;
  border-radius: 100%;
  z-index: 10;
  top: -210px;
  right: 350px;
  background: linear-gradient(
    180deg,
    rgba(185, 174, 223, 0.8) 0%,
    rgba(26, 26, 50, 0.8) 100%
  );
}
.planet-3 {
  height: 24px;
  width: 24px;
  position: absolute;
  border-radius: 100%;
  z-index: 10;
  top: -95px;
  right: 605px;
  background: linear-gradient(180deg, rgb(136, 229, 190) 0%, #1a1a32 100%);
}
.planet-4 {
  height: 16px;
  width: 16px;
  position: absolute;
  border-radius: 100%;
  z-index: 10;
  top: -460px;
  right: 580px;
  background: linear-gradient(180deg, #dd734f 0%, #1a1a32 100%);
}
.planet-5 {
  height: 24px;
  width: 24px;
  position: absolute;
  border-radius: 100%;
  z-index: 10;
  top: -230px;
  right: -595px;
  background: linear-gradient(180deg, rgb(136, 229, 190) 0%, #1a1a32 100%);
}
.planet-6 {
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 100%;
  z-index: 10;
  top: -590px;
  right: -540px;
  background: linear-gradient(180deg, #dd734f 0%, #1a1a32 100%);
}

.hero-ruler {
  position: absolute;
  top: 0;
  width: 100%;
  max-width: 1840px;
  min-height: 796px;
}

.ruler-container {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 796px;
}

.hero-ruler2 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 1840px;
}

.hero-super-ruler {
  position: relative;
  max-width: 1840px;
  width: 100%;
  padding: 31px 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-container {
  position: relative;
  max-width: 1034px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.3rem;
}

.hero-ripples {
  margin: 0 auto;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -198;
}

.hero-ripples-second {
  margin: 0 auto;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -198;
}

.hero-ripple-circle {
  background-color: #0e0c1500;
  border-radius: 100%;
  border: 1px solid #cac6dd;
  position: absolute;
  opacity: 0.1;
}
.ripple-xl,
.ripple-xl2 {
  opacity: 0.05 !important;
}

.ripple-xs {
  height: 370px;
  width: 370px;
}

.ripple-sm {
  height: 578px;
  width: 578px;
}

.ripple-md {
  height: 822px;
  width: 822px;
}

.ripple-lg {
  height: 1054px;
  width: 1054px;
}

.ripple-xl {
  height: 1248px;
  width: 1248px;
}

.ripple-xs2 {
  height: 220.58px;
  width: 220.58px;
}

.ripple-sm2 {
  height: 344.58px;
  width: 344.58px;
}

.ripple-md2 {
  height: 490.04px;
  width: 490.04px;
}

.ripple-lg2 {
  height: 628.35px;
  width: 628.35px;
}

.ripple-xl2 {
  height: 744px;
  width: 744px;
}

.hero-gradient-circle {
  height: 250px;
  width: 250px;
  border-radius: 100%;

  background: rgba(255, 0, 247, 0.815);

  position: absolute;
  left: 72%;
  top: 25%;
  transform: translate(-50%, -50%);
  z-index: -200;
  filter: blur(150px);
}

.hero-gradient-circle-2 {
  height: 350px;
  width: 350px;
  border-radius: 100%;

  background: #0900ff;

  position: absolute;
  left: 59%;
  top: 70%;
  transform: translate(-50%, -50%);
  z-index: -200;
  filter: blur(180px);
}

.get-started-btn {
  max-width: 140px;
  /* border: none;
  padding: 18px 20px;
  background-color: #fff;
  color: #0e0c15;
  border-top-left-radius: 8px;
  border-top-right-radius: 22.5px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  position: relative;
  font-family: 'Source Code Pro'!important;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px; */
}

.pricing-btn svg {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  z-index: 55;
}

.hero-wrapper h1 {
  font-size: 55px;
  text-align: center;
  line-height: 72px;
  font-weight: 600;
  margin: 0 !important;
}

.hero-section--sub-heading {
  font-family: "Sora";
  font-size: 15px;
  text-align: center;
  font-weight: 400;
  line-height: 32px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 32px;
  isolation: isolate;
}

.hero-heading-underline-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  isolation: isolate;
}

.hero-underline {
  max-width: 311px !important;
  position: absolute;
  top: 65%;
  right: calc(50% - 154px);
  z-index: -1;
}

.hero-img--container {
  height: 100%;
  width: 100%;
  margin-top: 1.8875rem;
  z-index: 10;

  background: linear-gradient(hsl(251, 27%, 8%), hsl(251, 27%, 8%)) padding-box,
    linear-gradient(
        to right,
        #facb7c 0%,
        #89f9e8 25%,
        #9299fc 50%,
        #d77dee 100%,
        #facb7c 20%
      )
      border-box;

  border-radius: 10px;
  border: 2px solid transparent;
}

.hero-img--container::before {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4.71652px 4.71652px 0px 0px;
}

.hero-img {
  width: 100%;
  border-radius: 0 0 20px 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.hero-img-btm-object {
  margin-top: -22px;
  width: 90%;
  height: 9.43px;
  background: #1b1b2e;
  border-radius: 0px 0px 4.71652px 4.71652px;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.hero-img-btm-object-2 {
  margin-top: -22px;
  width: 80%;
  height: 9.43px;
  background: #1b1b2e;
  opacity: 0.5;
  z-index: -1;

  border-radius: 0px 0px 4.71652px 4.71652px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
/*********************/
/* PARTNERS SECTION */
/*******************/

.partners-wrapper {
  display: none;
  z-index: 999;
}

.partner-container {
  position: relative;
  width: 100%;
  max-width: 1840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.3rem 113px;
  gap: 24px;
}

.partners-heading {
  font-family: "Space Grotesk";
  letter-spacing: 3px;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;

  margin-bottom: 78px;
}

/*********************/
/* CAROUSEL SECTION */
/*******************/

.carousel-wrapper {
  z-index: 999;
}

.carousel-container {
  position: relative;
  max-width: 1840px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 1.3rem;
}
.wrapper-card {
  position: relative;
  width: 344px !important;
}
.carousel-card-1 {
  position: relative;
  border-radius: 2em;
  border: 2px solid transparent;
  isolation: isolate;
  display: inline-grid;
  padding: 12px 8px;
  width: 384px;
  height: 366px;
  border: 0;
  border-radius: 18px;
  background: #efefef;
  color: #fff;
  transition: 0.3s;
  clip-path: polygon(0% 0%, 84% 0, 100% 15%, 100% 100%, 0% 100%);
}
.carousel-card-1::before,
.carousel-card-1::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carousel-card-1::before {
  background-image: linear-gradient(
    hsla(180, 100%, 50%, 0.8) 20%,
    hsl(250, 8%, 28%) 20%,
    #ad6aff7e,
    34%,
    hsl(250, 8%, 28%)
  );

  /* Rest of the CSS properties */
  z-index: -2;
  border-radius: 18px;
}
.carousel-card-1::after {
  background: #0e0c15;
  clip-path: polygon(0.6% 0.5%, 83.5% 0.5%, 99.3% 15%, 99.5% 99.5%, 0.6% 99.5%);
  z-index: -1;
  border-radius: 15px;
  transition: 0.3s;
  border-radius: 24px;
}

/* .carousel-card-1::before { */
/* content: ""; */
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
/* height: 100%; */
/* background: linear-gradient(hsl(251, 27%, 8%), hsl(251, 27%, 8%)) padding-box, */
/* linear-gradient( */
/* to bottom, */
/* cyan, */
/* #ad6aff7e, */
/* #ffffff34, */
/* rgba(255, 255, 255, 0.25) */
/* ) */
/* border-box; */
/* border-radius: 1em; */
/* inset: 0; */
/* border: 2px solid transparent; */
/* clip-path: polygon(0% 0%, 76% 0, 100% 26%, 100% 100%, 0% 100%); */
/* } */
/* .carousel-card-2 { */
/* background: linear-gradient(hsl(251, 27%, 8%), hsl(251, 27%, 8%)) padding-box, */
/* linear-gradient( */
/* to bottom, */
/* #ffc876, */
/* #ff776f, */
/* #ffffff34, */
/* rgba(255, 255, 255, 0.25) */
/* ) */
/* border-box; */
/* border-radius: 50em; */
/* border: 2px solid transparent; */
/* } */
.carousel-card-2 {
  position: relative;
  border-radius: 2em;
  border: 2px solid transparent;
  isolation: isolate;
  display: inline-grid;
  padding: 12px 8px;
  width: 384px;
  height: 366px;
  border: 0;
  border-radius: 18px;
  background: #efefef;
  color: #fff;
  transition: 0.3s;
  clip-path: polygon(0% 0%, 84% 0, 100% 15%, 100% 100%, 0% 100%);
}
.carousel-card-2::before,
.carousel-card-2::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carousel-card-2::before {
  background-image: linear-gradient(
    hsla(36, 100%, 73%) 20%,
    hsl(250, 8%, 28%) 20%,
    #ad6aff7e,
    34%,
    hsl(250, 8%, 28%)
  );

  /* Rest of the CSS properties */
  z-index: -2;
  border-radius: 18px;
}
.carousel-card-2::after {
  background: #0e0c15;
  clip-path: polygon(0.6% 0.5%, 83.5% 0.5%, 99.3% 15%, 99.5% 99.5%, 0.6% 99.5%);
  z-index: -1;
  border-radius: 15px;
  transition: 0.3s;
  border-radius: 24px;
}

/* .carousel-card-3 { */
/* background: linear-gradient(hsl(251, 27%, 8%), hsl(251, 27%, 8%)) padding-box, */
/* linear-gradient(to bottom, #ff5ffa, #ffffff34, rgba(255, 255, 255, 0.25)) */
/* border-box; */
/* border-radius: 50em; */
/* border: 2px solid transparent; */
/* } */
.carousel-card-3 {
  position: relative;
  border-radius: 2em;
  border: 2px solid transparent;
  isolation: isolate;
  display: inline-grid;
  padding: 12px 8px;
  width: 384px;
  height: 366px;
  border: 0;
  border-radius: 18px;
  background: #efefef;
  color: #fff;
  transition: 0.3s;
  clip-path: polygon(0% 0%, 84% 0, 100% 15%, 100% 100%, 0% 100%);
}
.carousel-card-3::before,
.carousel-card-3::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carousel-card-3::before {
  background-image: linear-gradient(
    hsla(302, 100%, 69%) 20%,
    hsl(250, 8%, 28%) 20%,
    #ad6aff7e,
    34%,
    hsl(250, 8%, 28%)
  );

  /* Rest of the CSS properties */
  z-index: -2;
  border-radius: 18px;
}
.carousel-card-3::after {
  background: #0e0c15;
  clip-path: polygon(0.6% 0.5%, 83.5% 0.5%, 99.3% 15%, 99.5% 99.5%, 0.6% 99.5%);
  z-index: -1;
  border-radius: 15px;
  transition: 0.3s;
  border-radius: 24px;
}

/* .carousel-card-4 { */
/* background: linear-gradient(hsl(251, 27%, 8%), hsl(251, 27%, 8%)) padding-box, */
/* linear-gradient( */
/* to bottom, */
/* #b1d845, */
/* #ff766f73, */
/* #ffffff34, */
/* rgba(255, 255, 255, 0.25) */
/* ) */
/* border-box; */
/* border-radius: 50em; */
/* border: 2px solid transparent; */
/* } */
.carousel-card-4 {
  position: relative;
  border-radius: 2em;
  border: 2px solid transparent;
  isolation: isolate;
  display: inline-grid;
  padding: 12px 8px;
  width: 384px;
  height: 366px;
  border: 0;
  border-radius: 18px;
  background: #efefef;
  color: #fff;
  transition: 0.3s;
  clip-path: polygon(0% 0%, 84% 0, 100% 15%, 100% 100%, 0% 100%);
}
.carousel-card-4::before,
.carousel-card-4::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carousel-card-4::before {
  background-image: linear-gradient(
    hsl(76, 65%, 56%) 20%,
    hsla(3, 100%, 72%, 0.451) 20%,
    #ad6aff7e,
    34%,
    hsl(250, 8%, 28%)
  );

  /* Rest of the CSS properties */
  z-index: -2;
  border-radius: 18px;
}
.carousel-card-4::after {
  background: #0e0c15;
  clip-path: polygon(0.6% 0.5%, 83.5% 0.5%, 99.3% 15%, 99.5% 99.5%, 0.6% 99.5%);
  z-index: -1;
  border-radius: 15px;
  transition: 0.3s;
  border-radius: 24px;
}
.carousel-card {
  display: flex;
  flex-direction: column;

  padding: 40px;
  gap: 90px;
  max-width: 344px;
  border-radius: 32px;
  justify-content: space-between;

  position: relative;
  margin-bottom: 50.78px;
}

.gradient-circle {
  height: 280px;
  width: 280px;
  background: rgb(33, 0, 130);
  background: radial-gradient(
    circle,
    rgba(33, 0, 130, 1) 0%,
    rgba(51, 47, 62, 1) 100%
  );
  border-radius: 100%;
  position: absolute;
  filter: blur(40px);

  z-index: 0;

  right: -10px;
  bottom: 80px;
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.box {
  position: absolute;
  isolation: isolate;
  top: 5px;
  right: 5px;
  height: 54px;
  width: 70px;
  border-radius: 10px;
  background-color: rebeccapurple;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
  z-index: -1;
}

.wrapper-card:hover .box {
  opacity: 1;
}
.img-circle {
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.img-circle img {
  width: 100%;
  height: auto;
  max-width: 100% !important;
  min-height: 380px !important;
  opacity: 0.2;
}
.carousel-card:hover .gradient-circle {
  opacity: 0;
  filter: blur(0);
}
.carousel-card:hover .img-circle {
  opacity: 1;
}
.card-heading {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
}

.card-description {
  font-family: "Sora";
  color: #a8a8a8;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
}

.title-desc-card-container {
  display: flex;
  flex-direction: column;
  gap: 20px;

  z-index: 5;
}

.card-icon {
  padding: 15px;
  border-radius: 12px;
  color: #0e0c15;
  font-size: 1.5rem;
}

.card-icon-img {
  width: 100%;
  height: 100%;
}

.icon-btn-card-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.explore-more-btn-container {
  display: flex;
  align-items: center;
  gap: 28px;
}

.explore-more-btn-container p {
  white-space: nowrap;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  font-family: "Source Code Pro";

  letter-spacing: 0.035em;
  text-transform: uppercase;
}

ion-icon {
  font-size: 1.5rem;
}

.partner-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}

.partner-logo {
  height: 40px !important;
  width: 100%;
}

.logo-name {
  font-size: 28px;
  font-weight: 700;
}

.partners-container {
  display: flex;
  gap: 4rem;
  justify-content: center;
  margin-bottom: 167px;
  flex-wrap: wrap;
}

.carousel-pages {
  display: flex;

  width: 100%;
  justify-content: center;
  gap: 34px;
  margin-bottom: 170px;
}

.carousel-page {
  height: 6px;
  width: 6px;
  background-color: #fff;
  border-radius: 100%;
  position: relative;
}
.caro-border {
  position: relative;
  padding: 8px;
}
.caro-border.active:before {
  content: "";
  position: absolute;
  inset: 0;
  /* Set different values for each corner */
  border-radius: 33px;
  padding: 1.4px;
  background-image: radial-gradient(
    circle at top right,
    #facb7c 0%,
    #89f9e8 25%,
    #9299fc 50%,
    #d77dee 75%,
    #facb7c 100%
  );
  background-clip: padding-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.carousel-page :nth-child(2) ::before {
  content: "nice";
}