* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}

input,
textarea,
select {
  font-size: 16px !important; /* Prevents iOS zoom */
}

:root {
  /* Font Family */
  --open-sans: "Open Sans", sans-serif;
  --poppins: "Poppins", sans-serif;

  /* Colors */
  --pink: #ff5299;
  --yellow: #ff8e45;
  --voilate: #4f2d8a;
  --voilate-light: #9305b4;
  --aqua: #2399b3;
  --blue: #403f99;
  --gold: #ffc984;

  /* Section Inline Spacing */
  --section-pd-lr: 7vw;
}

html,
body {
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--poppins);
}

h1 {
  line-height: 64px;
  font-size: 62px;
}

p {
  font-family: var(--open-sans);
  line-height: 28px;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
  color: #5e5e5e;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  font-family: var(--open-sans);
  font-size: 18px;
}

a {
  text-decoration: none;
  font-family: var(--open-sans);
  font-size: 16px;
  font-weight: 400;
}

button {
  font-family: var(--open-sans);
  font-size: 16px;
  font-weight: 400;
}

img {
  width: 100%;
}

.section {
  margin-top: 80px;
}

.section__head--center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.section__head--center .section__paragraph {
  text-align: center;
}

.section__subheading {
  font-family: var(--poppins);
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 10px;
  background: linear-gradient(to right, #ff589d 0%, var(--voilate) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.section__head .section__heading {
  text-align: start;
}

.section__heading {
  font-weight: 500;
  font-size: 45px;
  line-height: 48px;
  text-align: center;
}

.section__paragraph {
  font-size: 20px;
  line-height: 32px;
  color: #5e5e5e;
  max-width: 1100px;
}

.text-bold {
  font-weight: 600;
}

.text-pink {
  color: var(--pink);
}

.text-yellow {
  color: var(--yellow);
}

.text-voilate {
  color: var(--voilate);
}

.text-voilate-light {
  color: var(--voilate-light);
}

.text-aqua {
  color: var(--aqua);
}

.text-gold {
  color: var(--gold);
}

.text-blue {
  color: var(--blue);
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.button {
  padding: 8px 22px;
  border-radius: 99px;
  display: inline-block;
  text-align: center;
}

.button__blue__colored {
  background-color: var(--blue);
  color: #fff;
  border: 2px solid transparent;
}

.button__white__colored:hover {
  border: 2px solid #fff;
  color: #fff;
}

.button__gray__bordered {
  background-color: transparent;
  border: 2px solid #eeeeee;
}

.button__gradient__bordered {
  position: relative;
  min-width: 136px;
  max-width: 100%;
  padding: 10px 24px;
  outline: none;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --gradient-angle: 0deg;
  border-radius: 99px;
}

.button__gradient__bordered::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 300px;
  border: 2px solid transparent;
  background: conic-gradient(
      from var(--gradient-angle),
      #5c5b8d 10%,
      #3084fd 20%,
      #6fffce 40%,
      var(--yellow) 60%,
      #fe2992 80%,
      #2b2457 200%
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: animate-btn-border 4s linear infinite;
}

.gradient__bg__move {
  position: relative;
  overflow: hidden;
  z-index: 9;
}

.gradient__bg__move:hover {
  background-color: transparent;
  border: 2px solid transparent;
  color: #fff !important;
}

.gradient__bg__move:hover::before {
  display: none;
}

.gradient__bg__move::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 700px;
  border-radius: 99px;
  background-color: white;
  background: linear-gradient(
    90deg,
    #5c5b8d,
    #3084fd,
    #6fffce,
    var(--yellow),
    #fe2992,
    #2b2457
  );
  z-index: -1;
  opacity: 0;
}

.gradient__bg__move:hover::after {
  transition: transform 8s;
  opacity: 100%;
  transform: translateX(calc(-100% + 200px));
  right: 0;
}

@keyframes animate-btn-border {
  0% {
    --gradient-angle: 0deg;
  }

  100% {
    --gradient-angle: 360deg;
  }
}

.container {
  max-width: 1440px;
}

/* --------- Header Starts Here ---------- */
header {
  width: 100%;
  position: fixed;
  z-index: 99999;
}

#navbar.sticky {
  background-color: #383838;
}

.navbar {
  height: 70px;
  padding: 0 var(--section-pd-lr);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo__part {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar__logo {
  opacity: 0;
}

.navbar__logo img {
  height: 30px;
}

.navlink__link__list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.navlink__link__list__item a {
  color: #fff;
  position: relative;
}

.navlink__link__list__item a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--aqua);
  box-shadow: 0 0 9px 1px var(--aqua);
  transition: all 0.3s;
}

.navlink__link__list__item a:hover::after {
  width: 100%;
}

.navlink__link__list button {
  display: none;
}

.menu__hame__burger {
  height: 24px;
  width: 24px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  display: none;
}

.menu__hame__burger div {
  height: 3px;
  width: 100%;
  background-color: #fff;
  transition: all 0.3s linear;
}

.menu__hame__burger .top__bar__toggle {
  transform: none;
}
.menu__hame__burger .middle__bar__toggle {
  width: 100%;
}
.menu__hame__burger .bottom__bar__toggle {
  transform: none;
}

.menu__hame__burger.closed .top__bar__toggle {
  transform: rotate(45deg) translateY(11px);
}

.menu__hame__burger.closed .middle__bar__toggle {
  width: 0;
}

.menu__hame__burger.closed .bottom__bar__toggle {
  transform: rotate(-45deg) translateY(-11px);
}

/* --------- Header Ends Here ---------- */

/* Footer Starts Here */
footer {
  padding: 50px var(--section-pd-lr) 20px var(--section-pd-lr);
  background-color: #2b2b2b;
}

.footer__logo__img {
  max-width: 400px;
}

.footer__contact__info__list {
  margin-top: 40px;
  max-width: 400px;
}

.footer__contact__info__item {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__contact__info__item svg {
  padding: 8px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4a4a4a;
  color: #fff !important;
  border-radius: 99px;
}

.footer__contact__info__item a {
  color: #919191;
}

.footer__socialmedia {
  margin-top: 30px;
}

.footer__socialmedia p {
  color: #919191;
  font-family: var(--poppins);
}

.footer__socialmedia__links {
  margin-top: 0;
  display: flex;
  gap: 10px;
}

.footer__socialmedia__item a {
  color: #fff;
  font-size: 22px;
  transition: all 0.3s;
}

.footer__socialmedia__item a:hover {
  color: var(--aqua);
}

.footer__subscribe__text {
  font-family: var(--poppins) !important;
  font-weight: 400;
  color: #fff;
  font-size: 20px;
}

.footer__input__box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
}

.footer__input__box input {
  padding: 8px 0;
  border: none;
  outline: none;
  color: #fff;
  background-color: transparent;
  border-bottom: 1px solid #9b9b9b;
}

.footer__links__categories {
  margin-top: 60px;
  display: flex;
}

.footer__links__category__heading {
  color: #fff;
  font-family: var(--poppins);
  font-size: 18px;
  font-weight: 200;
}

.footer__links__list {
  margin-top: 15px;
}

.footer__links__list__item {
  margin-top: 5px;
}

.footer__links__list__item a {
  color: #919191;
}

.footer__bottom__bar {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #919191;
}

.footer__bottom__bar p {
  color: #919191;
}

.footer__bottom__bar p a {
  color: #919191;
}

/* Footer Ends Here */

/* ---------- Hero Section Starts Here --------- */
.hero {
  max-height: 800px;
  overflow: hidden;
  position: relative;
}

.hero__content {
  max-width: 850px;
  margin-top: 200px;
  padding-left: var(--section-pd-lr);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0%, 0%);
  z-index: 9;
}

.hero__content img {
  max-width: 500px;
}

.hero__content h1 {
  margin-top: 30px;
  font-size: 50px;
  color: #fff;
}

.hero__content p {
  margin-top: 20px;
  color: #fff;
  font-family: var(--poppins);
  font-size: 18px;
}

/* ---------- Hero Section Start Ends Here ---------- */

/* ---------- Screens Sections Starts Here ---------- */
.screens__section {
  padding: 0 var(--section-pd-lr);
}

.screens__section .section__subheading {
  text-align: center;
}

.screens__carousel {
  max-width: 1380px;
  margin: 0 auto;
}

.screen {
  height: 540px;
  border-radius: 20px;
  overflow: hidden;
}

.screen .row,
.screen .row .col-md-5 {
  height: 100%;
}

.screen__1 {
  background-color: #fff3f8;
}
.screen__2 {
  background-color: #b5f1cd33;
}
.screen__3 {
  background-color: #f7f3ff;
}
.screen__4 {
  background-color: #fffbf5;
}
.screen__5 {
  background-color: #eeefff;
}

.screen__1 img {
  mix-blend-mode: multiply;
}

.screen__2 img {
  mix-blend-mode: multiply;
}

.screen__image__wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.screen__1 img {
  left: auto !important;
  right: 0;
  transform: translate(11%, -50%) scale(0.8);
}

.screen__2 img {
  left: auto !important;
  right: 0;
  transform: translate(22%, -50%) scale(0.9);
}

.screen__3 img {
  transform: translate(-50%, -50%);
}

.screen__4 img {
  transform: translate(-50%, -50%);
}

.screen__5 img {
  transform: translate(-50%, -50%);
}

.screen__image__wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100% !important;
  width: auto;
}

.screen__content {
  padding: 16px 50px 16px 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.screen__content h2 {
  font-size: 32px;
  text-align: center;
}

.screen__content button {
  z-index: 9 !important;
}

.screensNavMenu {
  margin: 0 auto;
  width: fit-content;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0000001a;
  border-radius: 99px;
  padding: 5px;
}

.screensNavBtn {
  border: none;
  outline: none;
  padding: 8px 22px;
  background-color: transparent;
  color: #000;
}

.screensNavBtn.active {
  position: relative;
  min-width: 136px;
  max-width: 100%;
  padding: 10px 24px;
  outline: none;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --gradient-angle: 0deg;
  color: #fff;
  border-radius: 99px;
}

.screensNavBtn.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 600px;
  border-radius: 99px;
  background-color: white;
  background: linear-gradient(
    90deg,
    #5c5b8d,
    #3084fd,
    #6fffce,
    var(--yellow),
    #fe2992,
    #2b2457
  );
  z-index: -1;
  animation: animate-active-screen-btn 5s linear;
}

@keyframes animate-active-screen-btn {
  0% {
    transform: translateX(0);
  }
  100% {
    /* transform: translateX(calc(100% - 200px)); */
    transform: translateX(-200px);
  }
}

/* ---------- Screens Sections Ends Here ---------- */

/* ----- Make us different section starts here ----- */
.make__different {
  position: relative;
  background-color: #f6f6f6;
}

.make__different__bg {
  background-color: #f6f6f6;
  height: 100%;
  width: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

.make__different__content {
  padding: 80px var(--section-pd-lr);
  position: relative;
  z-index: 999;
}

.make__different__content .section__head {
  max-width: 800px;
}

.make__different__cards {
  margin-top: 40px;
  display: flex;
  align-content: center;
  gap: 12px;
}

.make__different__card {
  border: 2px solid transparent;
  padding: 30px;
  max-width: 400px;
  background-color: #f8f3ed;
  /* background-color: #ffc9851a; */
  border-radius: 12px;
  transition: all 0.5s;
  position: relative;
}

.make__different__card:hover {
  background-color: #fff !important;
  border: 2px solid #ffc885;
}

.make__different__card__head {
  display: flex;
  align-items: start;
  gap: 8px;
}

.make__different__card__head img {
  width: 30px;
  height: 30px;
}

.make__different__card__head h4 {
  color: #2b2b2b;
}

.make__different__card p {
  color: #5e5e5e;
}

/* ----- Make us different section ends here ----- */

/* Partnership secrtion starts here */
.partnership {
  background-color: var(--voilate);
  width: 100%;
  padding-top: 80px;
}

.partnership__boxes {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.partnership__box {
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(50% + 30px);
  position: absolute;
  top: 0;
}

.partnership__box > :nth-child(1) {
  font-size: 20px;
  margin-bottom: 10px;
}

.partnership__box h2 {
  font-size: 30px;
}

.partnership__box p,
.partnership__box h2 {
  max-width: 520px;
}

.partnership__box > * {
  text-align: center;
}

.partnership__left__box {
  left: 0;
  padding: 40px 220px 40px var(--section-pd-lr);
  border-radius: 0 999px 999px 0;
  backdrop-filter: brightness(0.8);
  z-index: 99;
}

.partnership__right__box {
  right: 0;
  padding: 40px var(--section-pd-lr) 40px 220px;
  border-radius: 999px 0 0 999px;
  background-color: var(--blue);
}

.btn__white__bordered {
  border: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  padding: 8px 22px;
  border-radius: 99px;
  transition: all 0.5s;
}

.btn__white__bordered:hover {
  background-color: #fff;
  color: var(--blue);
}

.partnership__images__container {
  padding-top: 450px;
  position: relative;
  max-width: 100vw;
  overflow: hidden;
  transform: translateY(40px);
}

.partnership__images__shadow {
  filter: opacity(0.3);
  position: absolute;
  bottom: 100px;
  left: -60px;
}

.partnership__images {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  width: 105vw;
  transform: translateX(-80px);
}

.partnership__images img {
  width: 25%;
  rotate: -3deg;
}
/* Partnership section ends here */

/* Collaborating section starts here */
.collaborating {
  padding: 0 var(--section-pd-lr);
  height: 700px;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-position: -10px -50px; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.collaborating__buttons__group {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Collaborating section ends here */

/* ------------------------------- */
/* ------- Login Scren ------- */
/* ------------------------------- */
.login__screen {
  padding: 22px;
  margin: 0 auto;
  height: 100vh;
  overflow: hidden;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 999999;
  transition: all 1s;
}

.login__screen.closed {
  transform: translateX(calc(100% + 30px));
}

.login__images__section {
  height: 100%;
  width: 100vh !important;
  padding: 12px;
  border-radius: 22px;
  gap: 12px;
  background: conic-gradient(
    from 134.19deg at 49.98% 51.39%,
    #403f99 0deg,
    #3a4cab 72deg,
    #2399b3 144deg,
    #ffc984 214.62deg,
    #ff589d 287.31deg,
    #9305b4 360deg
  );
}

.login__images__column {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login__images__columns__wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 22px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.login__images__columns__wrapper > :nth-child(1),
.login__images__columns__wrapper > :nth-child(3) {
  height: 125%;
  overflow: hidden;
}

.login__images__columns__wrapper > :nth-child(2) > div {
  height: 33%;
}

.login__images__columns__wrapper > :nth-child(1) > div {
  height: 25%;
  transform: translateY(-50px);
}

.login__images__columns__wrapper > :nth-child(3) > div {
  height: 25%;
  transform: translateY(50px);
}

.login__image__wrapper {
  width: 100%;
  border: 5px solid #fff;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.login__text__wrapper__middle {
  padding: 22px;
  width: 100%;
  background-color: #3084fd;
  border: 5px solid #fff;
  border-radius: 32px;
  color: #fff;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.login__text__wrapper__end {
  padding: 22px;
  width: 100%;
  background-color: #4f2d8a;
  border: 5px solid #fff;
  border-radius: 32px;
  color: #fff;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.login__text__wrapper__end h1,
.login__text__wrapper__middle h1 {
  font-family: var(--open-sans);
  font-size: 45px;
  line-height: 36px;
  font-weight: 600;
}

.login__text__wrapper__end p,
.login__text__wrapper__middle p {
  font-size: 14px;
  line-height: 22px;
  color: #fff;
}

.login__image__wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login__logo {
  max-width: 300px;
}

.login__form__section {
  margin: 0 auto;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}

.login__form__wrapper {
  width: 100%;
  max-width: 400px;
  min-width: 320px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login__logo + p {
  font-size: 20px;
}

.login__back__btn {
  min-width: auto;
  align-self: flex-end;
  min-height: 47px;
}

.login__form {
  margin-top: 30px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login__input {
  margin-top: 30px;
  width: 100%;
}

.login__input input {
  outline: none;
  border: none;
  border-bottom: 2px solid #d7d7d7;
  width: 100%;
  padding: 8px;
  color: #676767;
}

.login__input input::placeholder {
  color: #818181;
}

.password__input {
  position: relative;
}

.password__input input {
  padding-right: 35px;
}

.password__input i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  cursor: pointer;
  color: #444444;
}

.forgot_password_link {
  color: #3a4cab;
  font-weight: 600;
  margin-top: 30px;
  text-align: center;
  display: block;
  font-style: italic;
}

.login__with__google {
  width: 100%;
  max-width: 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login__divider {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.login__divider hr {
  display: block;
  border: 1px solid #00000067;
  margin: 0 10px;
  width: 100%;
}

.dont__have__account {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dont__have__account a {
  color: #000000;
}

/* ------------------------------- */
/* ------- Contact us page ------- */
/* ------------------------------- */

/* Contact: hero Section starts here */
.contact_nav {
  background-color: #383838 !important;
}

.contact_nav .navbar__logo {
  opacity: 100% !important;
}

.contact__hero {
  padding-left: var(--section-pd-lr);
  height: 600px;
  background-color: #2b2b2b;
  position: relative;
  overflow: hidden;
}

.contact_hero_bg_image {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0 0 99999px;
  z-index: 0;
}

.contact_hero_vector_image {
  position: absolute;
  width: 55vmax;
  left: -10px;
  top: 50px;
  height: 100%;
  z-index: 9;
}

.contact__hero__content {
  position: absolute;
  max-width: 450px;
  min-width: 250px;
  /* width: 25%; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
}

.contact__hero__content h1 {
  font-size: 50px;
}
/* Contact: hero Section ends here */

/* Contact: form sectoin starts here */
.contact__form__section {
  padding: 0 var(--section-pd-lr);
  margin-bottom: 20px;
  transform: translateY(-60px);
  display: grid;
  grid-template-columns: auto 400px;
  gap: 25px;
  position: relative;
  z-index: 9999;
}

.contact__form {
  padding: 20px 32px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0 12px -7px;
  position: relative;
}

.contact__form__heading {
  padding: 13px 28px;
  background-color: #3a4cab;
  color: #fff;
  text-align: center;
  border-radius: 99px;
  position: absolute;
  top: -30px;
  left: 20px;
  font-weight: 400;
}

.contact__form form {
  position: relative;
  padding-bottom: 30px;
}

.contact__input__box {
  margin-top: 24px;
}

.contact__input__box input,
.contact__input__box select {
  width: 100%;
  padding: 8px 14px;
  outline: none;
  border: 1px solid #00000024;
  border-radius: 8px;
}

.contact__input__box select {
  color: #757575 !important;
}

.contact__form__interested h5 {
  font-size: 20px;
  font-weight: 400;
}

.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  background-color: white;
  border: 1px solid #00000024;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
}

.checkbox-wrapper:hover {
  border-color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Hide the native checkbox */
.checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.custom-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #00000024;
  border-radius: 4px;
  margin-right: 10px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background-color: white;
}

.checkbox-wrapper:hover .custom-checkbox {
  border-color: #9ca3af;
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox {
  background-color: transparent;
  border-color: #3a4cab;
}

.custom-checkbox::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #3a4cab;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after {
  display: block;
}

.checkbox-label {
  font-family: var(--open-sans);
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.contact__form__btn {
  position: absolute;
  bottom: -40px;
  background-color: #fff;
  left: -12px;
}

.contact__info {
  padding: 30px 20px;
  box-shadow: 0 0 12px -8px;
  border-radius: 20px;
  background-color: #fff;
}

.contact__info__heading {
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 10px;
}

.contact__info__heading span {
  background: linear-gradient(to right, #ff589d 0%, var(--voilate) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  font-weight: 600;
}

.contact__info p {
  line-height: 26px;
  color: #5e5e5e;
}

.contact__detail__heading {
  margin-top: 30px;
  padding: 8px;
  font-family: var(--poppins);
  font-size: 18px;
  background-color: #f5f5f5;
  color: #000 !important;
  border-radius: 8px;
}

.contact__detail__list {
  margin-top: 30px;
}

.contact__detail__list__item {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact__detail__list__item i {
  width: 36px;
  height: 32px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, var(--voilate), #fe2992);
  color: #fff;
}

.contact__detail__list__item a {
  padding: 6px 12px;
  color: #373737;
  background-color: #f5f5f5;
  width: 100%;
  border-radius: 8px;
}

/* Contact: form sectoin ends here */

/* ------------------------------- */
/* -------- About us page -------- */
/* ------------------------------- */

/* About: Hero section starts here */
.about__hero {
  max-width: 100vw;
  overflow: hidden;
  width: 100%;
  height: 35.5vmax;
  background-color: #2b2b2b;
  display: flex;
  position: relative;
}

.about__mobile__img {
  display: none;
}

.about__hero__image__grid {
  height: 100%;
  width: 80%;
  filter: opacity(0.2);
  position: absolute;
  left: 0;
}

.about__hero__content {
  position: absolute;
  top: 50%;
  left: var(--section-pd-lr);
  transform: translateY(-50%);
}

.about__hero__content p {
  color: #fff;
  font-family: var(--poppins);
  font-size: 25px;
  line-height: 32px;
}

.about__hero__content h1 {
  margin-top: 15px;
  color: #fff;
  font-size: 50px;
  line-height: 68px;
}

.about__bg__clip {
  margin-top: 60px;
  width: 100%;
  height: 900px;
  position: absolute;
  right: -14vmax;
  top: 0;
  color: #d000ff6a;
}

.about__bg__clip svg {
  width: 100%;
}

.about__hero__svg {
  width: 100%;
  /* height: 100%; */
}

.clipped-element {
  clip-path: url(/assets/images/about_hero_proples_bg.jpg);
  /* Other styles for the element */
}

/* About: Hero section ends here */

/* About: Who are are section starts here */

.who__top {
  /* padding: 0 var(--section-pd-lr); */
}

.who__top__right p {
  font-size: 18px;
}

.who__bottom {
  padding-right: var(--section-pd-lr);
  align-items: center;
}

.who__bottom .row {
  align-items: center;
}

.who__right__devider {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  justify-content: center;
}
.who__right__devider hr {
  width: 100%;
  height: 5px;
  border: 2px solid #848484;
  background-color: #848484;
}

.who__right__devider h4 {
  color: #848484;
  text-align: center;
}

.carousel__circle {
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from var(--gradient-angle),
    #5c5b8d 10%,
    #3084fd 20%,
    #6fffce 40%,
    var(--yellow) 60%,
    #fe2992 80%,
    #2b2457 200%
  );
  border-radius: 50%;
  padding: 8px;
}

.carousel__circle div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
}

.circular__carousel__slides__wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.circular__carousel__slide {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #afafaf;
  position: absolute;
  /* z-index: 99999; */
  width: 300px;
  height: 300px;
  transform: scale(0.35);
  transition: all 3s;
  border: 1px solid;
}

.whoWeAreSwiper {
  overflow: hidden;
}

.whoWeAreSwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.who__swiper__slide__heading {
  font-size: 40px;
  text-align: center;
}

.who__bottom__right__para {
  font-size: 18px;
  text-align: center;
}

/* About: Who are are section ends here */

.circle__carousel__wrapper {
  position: relative;
  height: 600px;
  width: 600px;
}

.carousel-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  color: white;
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background-size: cover;
  background-repeat: no-repeat;
}

.circle__carousel__wrapper .carousel-container > :nth-child(1) {
  border: 10px solid #ff589d33;
}

.circle__carousel__wrapper .carousel-container > :nth-child(2) {
  /* border: 10px solid #ffc6de34; */
}

.circle__carousel__wrapper .carousel-container > :nth-child(3) {
  border: 10px solid #2399b333;
}

.circle__carousel__wrapper .carousel-container > :nth-child(4) {
  border: 10px solid #ffca8426;
}

.circular__slide__image__wrapper {
  width: 100%;
}

.circular__slide__image {
  width: 100%;
}

.circular__slide__number {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 999;
  background-color: #ff589d;
  padding: 12px;
  border-radius: 50%;
  font-size: 42px;
  height: 65px;
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular__slide__title {
  padding: 12px;
  border-radius: 99px;
  background-color: #ff589d;
  font-size: 24px;
  line-height: 100%;
  position: absolute;
  bottom: -20px;
}

.circle__carousel__wrapper
  .carousel-container
  > :nth-child(1)
  .circular__slide__number,
.circle__carousel__wrapper
  .carousel-container
  > :nth-child(1)
  .circular__slide__title {
  background-color: #ff589d;
}

.circle__carousel__wrapper
  .carousel-container
  > :nth-child(2)
  .circular__slide__number,
.circle__carousel__wrapper
  .carousel-container
  > :nth-child(2)
  .circular__slide__title {
  background-color: #403f99;
}

.circle__carousel__wrapper
  .carousel-container
  > :nth-child(3)
  .circular__slide__number,
.circle__carousel__wrapper
  .carousel-container
  > :nth-child(3)
  .circular__slide__title {
  background-color: #2399b3;
}

.circle__carousel__wrapper
  .carousel-container
  > :nth-child(4)
  .circular__slide__number,
.circle__carousel__wrapper
  .carousel-container
  > :nth-child(4)
  .circular__slide__title {
  background-color: #ffc984;
}

/* About: team section starts here */
.team__section {
  background-color: #fff6ea;
  padding: 80px var(--section-pd-lr);
  overflow-x: hidden;
}

.team__text__section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.team__text__section > :nth-child(2) {
  max-width: 500px;
}

.teamSwiper {
  padding-top: 120px;
  padding-bottom: 40px;
}
.teamSwiper .swiper-pagination-bullet {
  background-color: #ccc;
  width: 10px;
  height: 10px;
  opacity: 1;
  transition: all 0.5s;
}

.teamSwiper .swiper-pagination-bullet-active {
  background-color: var(--aqua);
  width: 20px;
  border-radius: 99px;
  transition: all 0.3s;
}

.team__card {
  padding: 0 32px 22px 32px;
  border-radius: 22px;
  transition: all 0.5s;
}

.team__card:hover {
  background-color: #fff;
}

.team__card_image__wrapper {
  overflow: hidden;
  border-radius: 22px;
  position: relative;
  transform: translateY(-50px);
}

.team__card__socials {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: absolute;
  bottom: -100px;
  transition: all 0.5s;
}

.team__card:hover .team__card__socials {
  bottom: 20px;
}

.team__card__socials a {
  width: 42px;
  height: 42px;
  border-radius: 99px;
  background: linear-gradient(180deg, #4f2d8a 0%, #fe2992 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team__card h3 {
  margin-top: -20px;
  font-size: 24px;
}

.team__card p {
  font-size: 18px;
}

/* About: team section ends here */

/* About: join our team secton starts here */
.join__team {
  /* overflow-x: hidden !important;
  overflow-y: visible !important; */
  padding-left: var(--section-pd-lr);
  background: linear-gradient(
    279.16deg,
    #403f99 39%,
    #4f2d8a 70.94%,
    #9305b4 100%
  );
}

.join__team h1,
.join__team p {
  color: #ffff;
}

.join__team__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.join__team__subheading {
  font-family: var(--poppins);
  font-size: 26px;
}

.join__team__para {
  font-size: 18px;
  max-width: 500px;
}

.join__team__image__wrapper {
  height: 450px;
  overflow-x: hidden;
  border-radius: 999px 0 0 999px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translateY(-40px);
}

.join__team__image__wrapper img {
}
/* About: join our team secton ends here */

/* ------------------------------- */
/* ------- Publisher Page -------- */
/* ------------------------------- */

/* Publisher: Hero section starts here */
.publisher__page__body {
  overflow: visible;
}
.publisher__hero {
  background-color: #2b2b2b;
  position: relative;
}

.publisher__hero .publisher__hero__content {
  max-width: 900px;
  width: 100%;
}

.publisher__hero__bg__image {
  /* filter: saturate(0) opacity(0.7); */
}

.publisher__hero__content {
  position: absolute;
  top: calc(50% + 70px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.publisher_hero_badge {
  background-color: #3a4cab;
  border-radius: 45px 45px 0 45px;
  padding: 16px 32px;
}

.publisher_hero_badge h1 {
  margin-top: 8px;
  font-size: 42px;
  line-height: 32px;
  color: #fff;
  text-align: center;
}

.publisher_hero_badge p {
  font-family: var(--poppins);
  font-size: 22px;
  color: #fff;
  text-align: center;
}

.publisher__hero__heading h1 {
  font-size: 56px;
  font-weight: 600;
  color: #fff;
}

.publisher__hero__heading p {
  font-family: var(--poppins);
  font-size: 35px;
  color: #fff;
}

.publisher_hero_para {
  font-size: 18px;
  color: #b3b3b3;
  text-align: center;
}
/* Publisher: Hero section ends here */

/* Publisher:  screens section starts here*/

.trackmision {
  z-index: 50;
  height: 200vw;
}

.frame {
  display: flex;
  gap: 50px;
  padding-left: var(--section-pd-lr) !important;
}

.camera {
  width: 100vw;
  position: sticky;
  top: 300px;
  overflow: hidden;
}

.track-item-card {
  padding-top: 0;
  margin-top: -80px !important;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: stretch;
  width: 80vw;
  padding-top: 80px;
  display: flex;
}

.publisher__screens {
  margin-top: 80px;
  width: 100vw;
  padding-inline: var(--section-pd-lr);
}

.publisherSreensSwiper {
  overflow-x: hidden;
  margin-inline: var(--section-pd-lr);
}

.publisherSreensSwiper .swiper-wrapper {
  all: revert;
  display: flex;
  gap: 50px;
}

.publisher__screen {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
}

.publisher__screen__text {
  background-color: #2b2457;
  padding: 60px 40px;
  padding-right: 300px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.publisher__screen__01 .publisher__screen__text {
  background-color: #2b2457;
}

.publisher__screen__01 ul li {
  background-color: #4f2d8a66;
}

.publisher__screen__02 .publisher__screen__text {
  background-color: #e4e7ff;
}

.publisher__screen__02 ul li {
  background-color: #fefeff;
}

.publisher__screen__03 .publisher__screen__text {
  background: linear-gradient(110.12deg, #403f99 33.16%, #9305b4 99.19%);
}

.publisher__screen__03 ul li {
  background-color: #5446b1;
}

.publisher__screen__04 .publisher__screen__text {
  background: linear-gradient(110.12deg, #2399b3 33.16%, #b5f1cd 99.19%);
}

.publisher__screen__04 ul li {
  background-color: #0000002e;
}

.publisher__screen ul li {
  margin-top: 20px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 16px;
}

.publisher__screen p {
  font-size: 16px;
  line-height: 28px;
}

.publisher__screen__02 ul li,
.publisher__screen__02 p {
  color: #303030 !important;
}

.publisher__screen__image {
  display: flex;
  align-items: center;
  padding: 30px 0;
}

.publisher__screen__image img {
  width: calc(100% + 200px);
  padding: 0;
  transform: translateX(-200px);
  border-radius: 22px;
}

.publisher__dashboard__images__container {
  margin-top: 120px;
  position: relative;
}

.publisher__dashboard__images__container > :nth-child(1) {
  opacity: 0.6;
}

.publisher__dashboard__images__container > :nth-child(2) {
  position: absolute;
  top: 100px;
  /* left: 90px; */
  /* display: flex; */
  transform: translateX(60px);
}

.publisher__dashboard__images__container > :nth-child(2) img {
  box-shadow: 0 -20px 53px -23px #000;
}

.publisher__dashboard__images {
  display: flex;
  gap: 30px;
}

.publisher__dashboard__images img {
  width: 23%;
  transform: rotate(-5deg);
}

.publisher__dashboard__images {
}
/* Publisher:  screens section ends here*/

/* Publisher: Why section starts here */
.why {
  margin-top: 180px;
  padding-inline: var(--section-pd-lr);
}

.why__cards__container {
  margin-top: 30px;
}

.why__card {
  background-color: #2399b31a;
  padding: 32px 22px;
  border-radius: 15px;
  border: 2px solid transparent;
  transition: all 0.5s;
}

.why__card:hover {
  border: 2px solid #2399b3;
  background-color: #fff;
}

.why__card h3 {
  font-size: 25px;
  font-weight: 400;
  line-height: 32px;
  color: #2b2b2b;
}

.why__card p {
  margin-top: 10px;
  color: #5e5e5e;
}

/* Publisher: Why section ends here */

/* Publisher: Question section starts here */
.question {
  margin-top: 80px;
  padding: 60px 60px;
  background-color: #fff6ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.question__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Publisher: Question section ends here */

/* ---------------------------------- */
/* ----- Advertiser Page ----- */
/* ---------------------------------- */
.advertiser__hero .publisher__hero__content {
  width: 100%;
  max-width: 1120px;
}

.advertiser__screen ul li,
.advertiser__screen p {
  color: #303030;
}

.advertiser__screen ul li {
  background-color: #5656560d;
  font-size: 16px;
}

.advertiser__screen__01 .publisher__screen__text {
  background: #e8e4ff;
}

.advertiser__screen__01 ul li {
  background-color: #4f2d8a1a;
}

.advertiser__screen__02 .publisher__screen__text {
  background: #fceeff;
}

.advertiser__screen__02 ul li {
  background-color: #9305b40f;
}

.advertiser__screen__03 .publisher__screen__text {
  background: #def9ff;
}

.advertiser__screen__03 ul li {
  background-color: #cff1f9;
}

.advertiser__screen__04 .publisher__screen__text {
  background: #fff6ea;
}

.advertiser__screen__04 ul li {
  background-color: #ffc98433;
}

/* ---------------------------------- */
/* ----- Terms & Condition page ----- */
/* ---------------------------------- */

/* Terms & Condition: hero section starts here */
.tnc__hero {
  padding-top: 70px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2b2b2b;
}

.tnc__hero__content {
  max-width: 900px;
}

.tnc__hero__content h1 {
  font-size: 42px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.tnc__hero__content p {
  font-size: 18px;
  text-align: center;
  color: #fff;
}

.tnc__content {
  margin-top: 80px;
  padding: 0 var(--section-pd-lr);
}

.tnc__topics__sidebar {
  border: 2px solid #ededed;
  border-radius: 12px;
  padding: 20px;
  position: sticky;
  top: 100px;
}

.tnc__topics__sidebar h3 {
  font-size: 23px;
  font-weight: 500;
}

.tnc__topics__list {
  margin-top: 20px;
}

.tnc__topics__list__item {
  margin-top: 8px;
  display: flex;
  background-color: #f0f0f0;
  border: 2px solid #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.tnc__topics__list__item > :nth-child(1) {
  background-color: #fff;
  color: #9d9d9d;
  padding: 8px 10px;
  font-family: var(--poppins);
  font-size: 15px;
  font-weight: 600;
}

.tnc__topics__list__item > :nth-child(2) {
  color: #000000;
  padding: 8px 10px;
  font-family: var(--poppins);
  font-size: 15px;
}

.tnc__topics__list__item.active {
  background-color: #4f2d8a;
  border: none;
}

.tnc__topics__list__item.active > :nth-child(1) {
  background-color: #8c6dc3;
  color: #fff;
  font-weight: 600;
}

.tnc__topics__list__item.active > :nth-child(2) {
  color: #fff;
}

.tnc__content__heading {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 500;
  color: #3a4cab;
}

.tnc__content__list {
  list-style: disc;
  margin-left: 20px;
}

.tnc__content__list__item {
  color: #5e5e5e;
  font-size: 16px;
  line-height: 28px;
}

.tnc__content__list__item::marker {
  font-size: 12px;
}

.tnc__content__heading:first-of-type {
  margin-top: 0px;
}

.tnc__question {
  margin-top: 80px;
  padding: 80px var(--section-pd-lr);
  background-color: #fff6ea;
}

.tnc__question__buttons {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.tnc__question .section__head > :nth-child(1) {
  font-size: 26px;
}

.tnc__question .section__head h1 {
  font-size: 40px;
}

.tnc__question .section__head :nth-child(3) {
  font-size: 17px;
}
/* Terms & Condition: hero section ends here */

.swiper-slide {
  margin-right: auto !important;
}