@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  font-family: "Oswald", sans-serif;
}
:root {
  --gradient: conic-gradient(
    from 90deg at 50% 50%,
    rgb(251, 55, 60),
    rgba(252, 114, 28, 1),
    rgba(251, 32, 255, 1),
    rgba(27, 206, 255, 1),
    rgba(42, 107, 255, 1),
    rgba(217, 41, 255, 1),
    rgba(255, 10, 92, 1)
  );
}
@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-Light.woff") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Hellix";
  src: url("../fonts/Hellix-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}
a {
  text-decoration: none !important;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
.header {
  position: sticky;
  top: 0;
  padding: 2px 44px;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 5px 0px #fff;
  z-index: 9;
  transition: 0.3s ease-in-out;
  backdrop-filter: blur(200px);
}
.header.scrolled {
  position: relative;
  top: 0;
  transition: 0.3s ease-in-out;
}
section,
header nav.navbar,
.footer .container-fluid {
  max-width: 1920px;
  margin: auto;
}
.menuList a {
  text-align: center;

  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  padding: 0 10px;
  display: inline-block;
  transition: 0.3s ease-in-out;
}
.menuList a:hover {
  background: linear-gradient(90deg, #ef70f1 12%, #e654e9 36%, #fb20ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menuList a:hover.dropdown-toggle::after {
  border-top: 0.3em solid #fb20ff;
}
.mainBtn.btn {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  padding: 11px 20px;
  transition: all 0.5s;
}
.outlineBtn.btn {
  border-radius: 51.5px;
  border: 2px solid #5700ff;
  backdrop-filter: blur(35.5px);
  min-width: 125px;
  overflow: hidden;
}
.outlineBtn.btn span {
  position: relative;
  z-index: 2;
  color: #fff;
}

.outlineBtn.btn::before,
.outlineBtn.btn::after {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  background-color: #702ff3;
  transition: all 0.25s;
  content: "";
  z-index: 1;
}
.outlineBtn.btn::before {
  top: 0;
  transform: translate(-100%, 0);
}
.outlineBtn.btn::after {
  bottom: 0;
  transform: translate(100%, 0);
}
.outlineBtn.btn:hover {
  color: #fff;
}
.outlineBtn.btn:hover::before,
.outlineBtn.btn:hover::after {
  transform: translate(0, 0);
}

.btn.themeBtn {
  background: #5700ff;
  backdrop-filter: blur(35.5px);
  border-radius: 50px;
  min-width: 160px;
  padding: 11px 7px 11px 20px;
  justify-content: space-around;
  max-height: 54px;
}
.btn.themeBtn:hover {
  box-shadow: inset 4.8em 0 0 0 #702ff3, inset -0.65em 0 0 0 transparent;
  color: #fff;
}
.arrowCircle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  background: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.gradiantBg {
  background-image: url("../images/gradiantbanner.png");
  background-repeat: no-repeat;
  padding: 150px 56px 400px;
  /* height: 100vh; */
  background-position: top center;
  overflow: hidden;
  position: relative;
}
h1.gradiantText {
  opacity: 0.2;
  background: linear-gradient(
    180deg,
    #fff 39.23%,
    rgba(255, 255, 255, 0) 82.32%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 220px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.animateText p {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
ul.animateText {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 0;
}
.animateText p span {
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  color: #5700ff;
}
.animatePara p {
  text-align: center;
  font-size: 36px;
  font-style: normal;
  color: #fff;
  font-weight: 300;
  line-height: 60px;
  font-family: "Hellix";
  width: 40%;
  margin: auto;
}

.glow-effect {
  animation: glowPulse 2s infinite;
  width: 100%;
  transition: 0.3s ease-in-out;
}

.glowSvg {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -370px;
}

@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 1px #a14ef3);
    transition: 0.3s ease-in-out;
  }
  50% {
    filter: drop-shadow(0 0 1px #9141be);
    transition: 0.3s ease-in-out;
  }
  100% {
    filter: drop-shadow(0 0 1px #c636f1);
    transition: 0.3s ease-in-out;
  }
}

.topGlowSvg {
  position: absolute;
  top: -450px;
  margin: auto;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

.reqstBtn {
  display: flex;
  align-items: center;
  margin: auto;
  padding: 14px 18px 14px 40px;
  justify-content: center;
  gap: 17px;
  margin-top: 25px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 50px;
  max-height: 76px;
  width: fit-content;
  backdrop-filter: blur(35.5px);
  cursor: pointer;
}
.reqstBtn p {
  margin-bottom: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}

.reqstBtn:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 2px;
  background: linear-gradient(
    97deg,
    rgba(31, 128, 255, 0.44) 0%,
    rgba(151, 32, 255, 0.22) 41%,
    rgba(251, 32, 255, 1) 99%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.reqstBtn a {
  border-radius: 49px;
  background: linear-gradient(90deg, #1f80ff 0%, #9720ff 46.5%, #fb20ff66 100%);
  backdrop-filter: blur(50px);
  padding: 6px 9px 6px 27px;
  gap: 24px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  z-index: 2;
  line-height: normal;
  transition: 0.3s ease-in-out;
}
.reqstBtn a:hover {
  background: linear-gradient(90deg, #fb20ff66 0%, #9720ff 46.5%, #1f80ff 100%);
}
.px-56 {
  padding-inline: 56px;
}
/* .videoBanner {

  transform: translateY(-34%);

} */
.videoSec {
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    rgba(31, 128, 255, 0.74) 12%,
    rgba(151, 32, 255, 0.822) 36%,
    rgba(251, 32, 255, 0.795) 100%
  );
  box-shadow: 0px 14px 250px 0px rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(50px);
  padding: 20px;
  position: relative;
  /* margin-top: -20%; */
}
.mainVideo {
  width: 100%;
  border-radius: 30px;
}
/* .multicross {
  position: absolute;
  left: 0;
  right: 0;
  margin: 55px auto;
} */
.section2 {
  padding-bottom: 150px;
}

.versaTabsUpper .nav-tabs {
  background: #5700ff;
  width: 95%;
  margin: auto;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 50px;
}
.versaTabsUpper .nav-tabs li.nav-item {
  width: 49%;
}
.whitBtn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.versaTabsUpper .nav-tabs .nav-link {
  font-size: 36px;
  border: none;
  font-family: "Hellix";
  border-radius: 50px;
  padding: 10px 110px;
  font-weight: 400;
  color: #fff;
  line-height: normal;
  transition: all 0.3s;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.versaTabsUpper .nav-tabs .nav-link span {
  z-index: 2;
  position: relative;
}
.versaTabsUpper .nav-tabs .nav-link::before,
.versaTabsUpper .nav-tabs .nav-link::after {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  background-color: #fff;
  transition: all 0.5s;
  content: "";
  z-index: 1;
}
.versaTabsUpper .nav-tabs .nav-link::before {
  top: 0;
  transform: translate(-100%, 0);
}
.versaTabsUpper .nav-tabs .nav-link::after {
  bottom: 0;
  transform: translate(100%, 0);
}
.versaTabsUpper .nav-tabs .nav-link:hover {
  color: #fff;
}
.versaTabsUpper .nav-tabs .nav-link:hover::before,
.versaTabsUpper .nav-tabs .nav-link:hover::after {
  transform: translate(0, 0);
}
.versaTabsUpper .nav-tabs .nav-link:hover span {
  color: #5700ff;
}
.versaTabsUpper .nav-tabs .nav-link.active {
  font-weight: 500;
  line-height: normal;
  color: #5700ff;
  background: #fff;
}
.productCards {
  border-radius: 60px;
  border: 3px solid #a8a8ff;
  background: #efefff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(50px);
  padding: 60px 52px;
  position: relative;
  height: 100%;
}
.gradiantShadow:after {
  content: "";
  position: absolute;
  background-image: url("../images/card-gradiant.svg");
  background-repeat: no-repeat;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: -250px;
  z-index: -1;
  background-size: contain;
  background-position: center bottom;
}
.InnerCard h2 {
  color: #000;

  font-size: 54px;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}
.inputBtn {
  gap: 10px;
}
.InnerCard p {
  color: #000;
  font-family: "Hellix";
  font-size: 26px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 1.44px;
  margin: 50px 0 0;
  width: 60%;
  min-height: 226px;
}
a.knowBtn {
  display: inline-block;
background: #fff;
    border-radius: 50px;
    padding: 10px 70px;
    max-height: 60px;
}

a.knowBtn span {
  transition: 0.3s ease-in-out;
  font-size: 28px;
  font-weight: 400;
  line-height: 65px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    rgba(31, 128, 255, 1) 12%,
    rgba(151, 32, 255, 1) 36%,
    rgba(251, 32, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.whitBtn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.knowBtn:hover span {
  background: linear-gradient(90deg, #fb20ff 12%, #9720ff 36%, #1f80ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
span.upArrow {
  background: #fff;
    width: 60px;
    height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
span.upArrow img{
  width: 20px;
}
.versaTabs {
  padding: 50px 0;
}
.productCards.peach {
  border: 3px solid #ffcdd6;
  background: #ffeff2;
}
.productCards.green {
  border: 3px solid #c0ffa3;
  background: #eaffe0;
}

.multiCards .knowBtn {
  width: calc(100% - 91px);
}
.virsaGif {
  position: absolute;
  width: 45%;
  right: 0;
  bottom: 30px;
  height: 100%;
  display: flex;
  align-items: end;
  z-index: 1;
}
.virsaGif img {
  width: 100%;
}
.InnerCard {
  z-index: 2;
  position: relative;
}
.py-120 {
  padding-block: 120px;
}
.py-100 {
  padding-block: 100px;
}
/* .parallexSec {
  background-image: url("../images/gradiantline.png");
  background-repeat: no-repeat;
  height: 75vh;
  background-size: cover;
} */
.row > .parallexCard {
  border-radius: 40px;
  background: #efefff;
  padding: 65px 58px;
  position: relative;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}
.row > .parallexCard:before {
  content: "";
  position: absolute;
  background-image: url("../images/topline.svg");
  background-repeat: no-repeat;
  width: 100%;
  height: 40%;
  left: -60px;
  z-index: -1;
  top: -80px;
}
.row > .parallexCard:after {
  content: "";
  position: absolute;
  background-image: url("../images/bottomline.svg");
  background-repeat: no-repeat;
  width: 55%;
  height: 66%;
  right: -60px;
  background-size: cover;
  z-index: -1;
  bottom: -60px;
}
.sideVideo {
  background: #5700ff;
  padding: 20px;
  border-radius: 40px;
}
.sideContent h1 {
  color: #000;
  font-size: 62px;
  font-style: normal;
  margin-top: 44px;
  font-weight: 400;
  line-height: 100px;
  width: 70%;
  text-transform: uppercase;
}
.sideContent h1 span,
.gardiantHead {
  background: linear-gradient(
    90deg,
    rgba(31, 128, 255, 1) 12%,
    rgba(151, 32, 255, 1) 36%,
    rgba(251, 32, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sideContent p {
  color: #000;
  font-family: "Hellix";
  font-size: 32px;
  margin: 46px 0 0;
  width: 90%;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 1.44px;
}
section.parallexSec {
  /* position: sticky;
  top: 0; */
  overflow: hidden;
}
.parallexCard.greenBg {
  background: #eaffe0;
}
.parallexCard.peachBg {
  background: #ffeff2;
}
.pageHead h1 {
  color: #000;
  font-size: 84px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 48px;
}
.pageHead h1 span,
.sectionHead h1 span {
  background: linear-gradient(
    90deg,
    rgba(31, 128, 255, 1) 12%,
    rgba(151, 32, 255, 1) 36%,
    rgba(251, 32, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pageHead p {
  color: #000;
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
}
.blurBg {
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 14px 250px 0px rgba(0, 0, 0, 0.11);
  backdrop-filter: blur(50px);
  padding: 20px;
  position: relative;
  margin-top: 91px;
}
.shadeBg::after {
  content: "";
  position: absolute;
  top: 50px;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/shadebg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.glow-wrapper {
  width: 100px;
  margin: auto;
  animation: glow 3s infinite alternate;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50px;
}

@keyframes glow {
  0% {
    /* filter: drop-shadow(0 0 8px #77aff8) drop-shadow(0 0 16px #77aff8); */
    transform: scale(1, 1);
  }
  25% {
    /* filter: drop-shadow(0 0 8px #b86bfc) drop-shadow(0 0 16px #b86bfc); */
  }
  50% {
    filter: drop-shadow(0 0 8px #c07ff8) drop-shadow(0 0 16px #9867fc);
    transform: scale(1.2, 1.2);
  }
  75% {
    /* filter: drop-shadow(0 0 8px #c07ff8) drop-shadow(0 0 16px #c07ff8); */
  }
  100% {
    /* filter: drop-shadow(0 0 8px #9867fc) drop-shadow(0 0 16px #9867fc); */
    transform: scale(1, 1);
  }
}

.searchBox {
  border-radius: 200px;
  background: #5700ff;
  box-shadow: 0px 0px 25px 0px rgba(87, 0, 255, 0.56);
  backdrop-filter: blur(200px);
  padding: 8px 11px;
}
.accesIcon {
  position: absolute;
  top: 0;
  right: 24px;
  bottom: 0;
  background: #5700ff;
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchBox input {
  width: 100%;
  border-radius: 50px;
  border: 1px solid #000;
  color: #000;
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.8px;
  outline: none;
  padding: 20px 70px 20px 25px;
}
.aiSearch {
  width: 50%;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 4;
}
.searchBox input::placeholder {
  color: #000;
}
.InnerCard .whitBtn {
  justify-content: start;
}
.fields .iti {
  display: block;
}
.fields .iti--separate-dial-code .iti__selected-flag {
  background-color: transparent;
  border-radius: 16px 0px 0px 16px;
  border-right: 1px solid #000;
}
.py-75 {
  padding-block: 75px;
}
.contactForm {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 52px 0px rgba(40, 25, 109, 0.1);
  backdrop-filter: blur(50px);
  padding: 12px;
  border-radius: 36px;
}
.insideForm {
  padding: 24px 60px 44px;
  z-index: 2;
  position: relative;
}
.insideForm h1 {
  color: #000;
  text-align: center;
  font-size: 60px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin: 0px 0 35px;
}
.contactForm::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: linear-gradient(
    180deg,
    rgba(85, 0, 255, 0) 0%,
    rgba(85, 0, 255, 0.36) 61.48%,
    rgba(85, 0, 255, 0) 100%
  );
  opacity: 0.2;
}
.formBox input,
.formBox textarea,
.formBox select {
  /* background: #fff; */
  padding: 24px 25px;
  display: block;
  width: 100%;
  font-family: "Hellix";
  border-radius: 16px;
  outline: none;
  border: 1px solid #000;
}
.formBox .form-label {
  margin-bottom: 18px;
  color: #000;
  font-size: 20px;
  font-weight: 400;
  line-height: 120%;
  font-family: "Hellix";
  text-transform: capitalize;
}
.fields {
  margin-bottom: 50px;
}
button.submitBtn {
  width: 100%;
  position: relative;
  border-color: transparent;
  background: transparent;
  border-radius: 16px;
  color: #fff;
  text-align: center;
  font-family: "Hellix";
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
}

button.submitBtn::before,
button.submitBtn::after {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.3s;
  content: "";
}
button.submitBtn::before {
  width: 100%;
  left: 0;
  border-radius: 16px;
  background-color: #5700ff;
  z-index: -1;
}
button.submitBtn::after {
  width: 0;
  left: 50%;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transform: translate(-50%, 0);
  z-index: 1;
}
button.submitBtn:hover {
  color: #5700ff;
}
button.submitBtn:hover img {
  filter: invert(43%) sepia(108%) saturate(7324%) hue-rotate(252deg)
    brightness(96%) contrast(130%);
}
button.submitBtn:hover::before {
  transform: scale(0, 1);
}
button.submitBtn:hover::after {
  width: 100%;
  border-color: #5700ff;
  transition-delay: 0.2s;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}
.sectionHead h1 {
  color: #fff;
  font-size: 60px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.sectionHead p {
  color: #fff;
  font-family: Hellix;
  font-size: 24px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0.96px;
  text-transform: capitalize;
  margin: 53px 0 50px;
}
.darkBg {
  background-image: url("../images/darkBg.png");
  background-position: center;
  background-size: contain;
}
.partnersBox {
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(33, 28, 85, 0.7) 100%
  );
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(0px);
  padding: 30px 22px;
  height: 100%;
  color: #fff;
  position: relative;
}
.garediantBorder {
  position: relative;
  --start: 0;
  transition: border-color 0.3s ease-in-out;
}
.garediantBorder::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  border: 4px solid transparent;
  background: var(--gradient);
  background-attachment: fixed;
  mask: linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--start) - (20 * 1.1)) * 1deg),
      #ffffff1f 0deg,
      white,
      #ffffff00 100deg
    );
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: 0;
  transition: 0.5s ease;
}
.blogCards.garediantBorder::before {
  border-radius: 36px;
}
.glow {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: blur(14px);
}

.glow::before {
  position: absolute;
  content: "";
  width: 98%;
  height: 98%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  border: 15px solid transparent;
  background: var(--gradient);
  background-attachment: fixed;
  mask: linear-gradient(#0000, #0000),
    conic-gradient(
      from calc(var(--start) * 1deg),
      #000 0deg,
      #ffffff,
      rgba(0, 0, 0, 0) 60deg
    );
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: 0;
  transition: 1s ease;
}

.garediantBorder:hover > .glow::before {
  opacity: 1;
}
.garediantBorder:hover::before {
  opacity: 0.6;
}

.partnersBox h4 {
  font-size: 24px;
  font-weight: 400;
  margin-top: 40px;
  line-height: normal;
  text-transform: uppercase;
}
.partnersBox p {
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.64px;
  min-height: 90px;
}
.partnerArea,
.smallBoxes {
  display: flex;
  justify-content: space-between;
}
.smallBoxes {
  width: 61%;
}
.largeBox {
  width: 37%;
}
.smallBoxes .partnersBox {
  width: 48%;
}
.partnerArea {
  margin-bottom: 24px;
  height: 100%;
  align-items: center;
  flex-wrap: wrap;
}
.partnersBox h4 span {
  font-size: 16px;
}

.doubleStar {
  position: absolute;
  top: 10px;
  right: 10px;
  animation: zoom-in-zoom-out 3s ease-out infinite;
}
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
    filter: drop-shadow(0 0 8px #925df3) drop-shadow(0 0 30px #925df3);
  }
  100% {
    transform: scale(1, 1);
  }
}

.footer {
  background-image: url("../images/Footer.png");
  background-repeat: no-repeat;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 100px;
  background-size: cover;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle,
    rgba(78, 48, 128, 0.2) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
  z-index: -1;
}

.footer h5 {
  color: #5700ff;
  font-family: "Hellix";
  font-size: 24px;
  font-weight: 700;
  line-height: 53.145px;
  margin-bottom: 50px;
}
.footer .text-white-50 {
  color: rgba(255, 255, 255, 0.75) !important;
}

.list-unstyled li a {
  transition: color 0.3s ease;
  color: #fff;
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 25px;
  display: inline-block;
}
.list-unstyled li:last-child a {
  margin-bottom: 0;
}
.footer a:hover {
  color: #ffffff;
}

.input-group .input-box {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #fff;
  color: #000;
  border-right: none;
  padding-left: 20px;
  border: 1px solid #444;
  width: 10px;
}

.input-group .input-box::placeholder {
  color: #888;
}

.input-group .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  padding-right: 20px;
  border-left: none;
}

.footer .social-icons .list-inline-item a {
  border: 1px solid #6c6c6c;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  transition: background-color 0.3s ease;
}

.footer .social-icons .list-inline-item a:hover {
  background-color: #8a2be2;
}

.footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  word-break: break-word;
}

.contact-list li i {
  margin-top: 0.2rem;
}

.description-text {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 400;
  line-height: 190%;
}

.main {
  color: #5700ff;
  font-weight: 700;
}
.inputBtn .input-box {
  background-color: #fff;
  color: #000;
  border: 1px solid #444;
  border-right: none;
  padding: 13px 24px;
  outline: none;
  border-radius: 50px;
  width: calc(100% - 130px);
}

.input-box::placeholder {
  color: #888;
}

.email-signup-section .button:hover {
  background-color: #6a1fa6;
  border-color: #6a1fa6;
}

.right-side-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 94%;
  margin-left: auto !important;
}
.right-side {
  margin-left: auto;
}
.inputBtn button {
  min-width: 130px;
  padding: 18px 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "Hellix";
  max-height: 54px;
  border-radius: 50px;
  background-color: #5700ff;
  border: none;
  color: #fff;
}
.contact-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 24px;
}
.extraPages li a {
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #fff;
  margin-right: 50px;
}

p.reservedPara {
  color: #fff;
  text-align: center;
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 400;
  line-height: 19.777px;
  margin-bottom: 0;
}
.footerGlowSvg {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -30px;
  z-index: -1;
}
.logoImg {
  height: 60px;
}
.bannerBox {
  padding-left: 48px;
}
.pageName h1 {
  background: linear-gradient(
    90deg,
    rgba(31, 128, 255, 1) 12%,
    rgba(151, 32, 255, 1) 36%,
    rgba(251, 32, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  padding: 129px 65px 161px 0;
  width: fit-content;
  position: relative;
}

.midHead h3 {
  font-size: 84px;
  font-weight: 700;
  line-height: 128px;
  color: #000;
}
.midHead h3 span {
  color: #5700ff;
}
.midHead p {
  color: #000;
  font-size: 64px;
  font-weight: 500;
  line-height: 100px;
  text-transform: uppercase;
  width: 45%;
  margin-bottom: 80px;
}
.lastPara p {
  font-size: 64px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  background: linear-gradient(
    177deg,
    rgba(152, 99, 255, 1) 0%,
    rgba(87, 0, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.aboutContent p {
  margin-bottom: 42px;
  color: #000;
  font-family: "Hellix";
  font-size: 30px;
  font-style: normal;
  line-height: 48px;
  letter-spacing: 1.8px;
}
.aboutContent p b {
  font-family: "Hellix";
}
.headerBg {
  background-image: url("../images/headerBg.png");
  background-size: cover;
  background-position: center;
}
.glow-wrapper img {
  width: 100%;
}
.pageName h1 .glow-wrapper {
  left: auto;
  width: 59px;
  top: 60px;
}

.animated-circle {
  animation: blink 2s infinite alternate;
  opacity: 1;
}

.animated-circle:nth-child(even) {
  animation-delay: 0.5s;
}

@keyframes blink {
  0% {
    /* transform: scale(1); */
    opacity: 0;
  }
  100% {
    /* transform: scale(1.03); */
    opacity: 1;
  }
}
.dotsIcons {
  position: absolute;
  z-index: -1;
  left: -100px;
  top: 160px;
  width: fit-content;
}
.hideBox {
  overflow: hidden;
}
.circle {
  position: absolute;
  right: -70px;
  top: -220px;
  width: 68%;
  height: 100%;
}

.globe {
  position: absolute;
  right: 256px;
  top: 260px;
}
.contactNo {
  position: absolute;
  right: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  top: 46px;
}
.multiBg {
  background-image: url("../images/multicolorbg.png");
  background-size: cover;
}

[data-ssc] {
  transition-property: opacity, transform;
  transition-duration: 1s;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-timeline: view();
}

[data-ssc-exit] {
  animation-range: exit;
}

[data-ssc-instant] {
  animation-timeline: unset;
}

[data-ssc="fade-up"] {
  animation-name: fadeUp;
}

@keyframes fadeUp {
  from {
    transform: translate3d(0, 100px, 0);
    opacity: 0;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}

[data-ssc="zoom-in"] {
  animation-name: zoomIn;
}

[data-ssc="zoom-in-down"] {
  animation-name: zoomInDown;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100px, 0) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

.blogCards {
  border-radius: 36px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 17px;

  height: 100%;
}
.blogImg {
  height: 280px;
  overflow: hidden;
  border-radius: 36px;
}
.blogImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blogContent,
.cateBox,
.blogImg {
  position: relative;
  z-index: 2;
}
.blogContent h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  margin: 10px 0 15px;
}

.blogContent h3 {
  color: #77838f;
  font-family: Hellix;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 15px;
  line-height: normal;
}
.blogContent h3 span {
  color: #5700ff;
  font-family: Hellix;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.blogContent p {
  font-size: 14px;
  font-family: Hellix;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cateBox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cateBox p {
  background: #eaeaea;
  color: #000;
  font-family: "Hellix";
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  padding: 5px 10px;
  border-radius: 50px;
  margin-bottom: 5px;
}
h4.virsHead {
  color: #000;
  font-size: 84px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  margin-bottom: 110px;
}
.listBox {
  gap: 50px;
  margin-bottom: 50px;
}
.listContent h6 {
  color: #5700ff;
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 15px;
}
.listContent p {
  color: #000;
  font-family: "Hellix";
  font-size: 30px;
  font-weight: 300;
  line-height: 50px;
  letter-spacing: 0.9px;
  margin-bottom: 0;
  width: 82%;
}

.listContent a {
  color: #000;
  font-family: "Hellix";
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 1.2px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.listContent a img {
  filter: invert(1);
}
.contactPageForm .fields {
  margin-bottom: 30px;
}

.contactPageForm h1 {
  font-size: 64px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  background: linear-gradient(
    177deg,
    rgba(152, 99, 255, 1) 0%,
    rgba(87, 0, 255, 1) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: -80px;
}
.contactPage:after {
  left: 0;
}
.sideBorder:after {
  content: "";
  position: absolute;
  background-image: url("../images/sideBorder.png");
  width: 100%;
  height: 10%;
  background-repeat: no-repeat;
  left: 0;
  background-size: 100%;
  opacity: 1;
  bottom: -5px;
  z-index: 2;
  top: auto;
  background-position: bottom;
}
.sideBorder:before {
  content: "";
  position: absolute;
  background-image: url("../images/sideBorder.png");
  width: 100%;
  height: 10%;
  background-repeat: no-repeat;
  left: 0;
  z-index: 2;
  background-size: 100%;
  opacity: 1;
  top: 0;
  transform: rotate(180deg);
  background-position: bottom;
}
.cstmPadding {
  padding: 250px 56px 80px;
}

.blob {
  width: 500px;
  height: 500px;
  background: linear-gradient(
    187deg,
    rgba(87, 0, 255, 1) 0%,
    rgba(87, 0, 255, 0.57) 100%
  );
  border-radius: 50%;
  animation: blobAnimation 6s infinite ease-in-out;
}
.globe2 {
  position: absolute;
  right: 330px;
  top: 248px;
  z-index: -1;
}
.blob2 {
  width: 520px;
  height: 623px;
  background: linear-gradient(
    187deg,
    rgba(87, 0, 255, 1) 0%,
    rgba(87, 0, 255, 0.57) 100%
  );
  border-radius: 120px 36px 120px 36px;
  animation: blobAnimation2 8s infinite ease-in-out;
}
@keyframes blobAnimation2 {
  0%,
  100% {
    border-radius: 120px 36px 120px 36px;
  }
  33% {
    border-radius: 80px 300px 80px 300px;
    filter: drop-shadow(0 0 25px #d5acf8) drop-shadow(0 0 25px #bfa0fd);
  }
  66% {
    border-radius: 310px 150px 310px 150px;
    filter: drop-shadow(0 0 20px #c07ff8) drop-shadow(0 0 20px #9866fc);
  }
}

@keyframes blobAnimation {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
  33% {
    border-radius: 40% 60% 60% 40%;
    transform: translate(10px, -15px) rotate(2deg) scale(1.03);
  }
  66% {
    border-radius: 60% 40% 40% 60%;
    transform: translate(-10px, 10px) rotate(-2deg) scale(0.97);
  }
  75% {
    transform: translate(5px, -10px) rotate(1deg) scale(1.02);
  }
}

.drop-in {
  animation: drop-in 1s ease 200ms backwards;
}

.drop-in-2 {
  animation: drop-in 1200ms ease 500ms backwards;
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translate(0px);
  }
}
.mobileBtns,
.mobileViewBg {
  display: none;
}
.mobHideBtn {
  display: flex;
}

.mainGlobe {
  -webkit-animation: spin 5s linear infinite; /* Safari browser */
  animation: spin 5s linear infinite center;
  transform-origin: center;
}

/* for Safari browser  */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.childMenu.dropdown-menu {
  padding: 0;
  top: 51px;
  border-radius: 6px;
}
.childMenu li a.dropdown-item {
  padding: 10px 12px;
  font-size: 16px;
  text-align: start;
}
.childMenu li a.dropdown-item:hover {
  background: #5700ff;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.footerLogo {
  width: 50%;
}
.virsaPoint h1 {
  color: #000;
  font-size: 62px;
  font-style: normal;
  margin-top: 44px;
  font-weight: 400;
  line-height: 100px;
  width: 70%;
  text-transform: uppercase;
}
.virsaPoint p {
  padding-left: 50px;
  position: relative;
  color: #000;
  font-family: "Hellix";
  width: 90%;
  font-size: 26px;
  margin: 20px 0 0;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: 1.44px;
}
.virsaPoint p:after {
  content: "";
  position: absolute;
  background-image: url("../images/star.svg");
  width: 35px;
  height: 35px;
  top: 15px;
  left: 0;
  background-size: cover;
}
.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-section.hidden {
  opacity: 0;
  transform: translateY(40px);
}
.midHead .smallPara {
  font-size: 30px;
  margin-bottom: 0px;
}

.solutionBg {
  background-image: url("../images/solution-bg.png");
  background-repeat: no-repeat;
  background-position: top center;
}

.secHead h3 {
  color: #000;
  text-align: center;
  font-size: 74px;
  font-weight: 400;
  line-height: normal;
  width: 47%;
  margin: auto auto 40px;
}
.secHead p {
  color: #000;
  text-align: center;
  font-family: "Hellix";
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 56%;
  margin: auto;
}

.gBg {
  background-image: url("../images/g-bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

.sliderBg {
  background-image: url("../images/slideBg.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
}
.creativeHead {
  display: none;
}
.creativeHead.active {
  display: block;
}
.creativeHead h3 {
  color: #000;
  font-size: 64px;
  font-weight: 300;
  line-height: 128px;
  margin-bottom: 10px;
}
.creativeHead h3 span {
  color: #5700ff;
}
.creativeHead p {
  color: #5700ff;
  font-family: "Hellix";
  font-size: 28px;
  font-weight: 300;
  text-transform: capitalize;
}

.circleImg img {
  width: 100%;
}

.circleImg {
  position: relative;
  min-height: 300px;
}

.shortCircle {
  position: absolute;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.shortCircle.active {
  opacity: 1;
  visibility: visible;
}
.gifSection {
  position: absolute;
  right: 0;
  bottom: 0px;
}
.solutionBg .pageName h1 {
  padding: 40px 65px 50px 0;
}
.solutionBg .pageName h1 .dotsIcons {
  top: 60px;
}
.solutionBg .pageName h1 .glow-wrapper {
  top: -20px;
}
img.BannervirsaGif {
  position: absolute;
  right: 0;
  width: 80%;
  bottom: 0;
}
.sliderCards {
  padding: 0 16px;
}
.sliderCards .card {
  border-radius: 30px;
  border: 3px solid #826ff578;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(50px);
}
.sliderCards .card .card-body {
  padding: 33px;
}
.sliderCards .card h5.card-title {
  color: #5700ff;
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  margin-bottom: 25px;
}
.sliderCards .card p.card-text {
  color: #000;
  font-family: "Hellix";
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 0.64px;
  min-height: 105px;
}
.cardGif img {
  width: 100%;
}

.multiple-items .slick-dots {
  /* position: relative; */
  bottom: auto;
  margin-top: 60px;
  text-align: end;
  padding-right: 5px;
}
.multiple-items .slick-dots li {
  width: 40px;
  height: 10px;
  margin: 0 10px;
}
.multiple-items .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 40px;
  height: 11px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: rgba(227, 227, 227, 0.5);
  border-radius: 50px;
}
.multiple-items .slick-dots li.slick-active button {
  background: rgba(127, 109, 245, 0.5);
}
.multiple-items .slick-dots li button:before {
  font-size: 0;
}

.multiple-items .slick-next,
.multiple-items .slick-prev {
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  height: 70px;
  top: 100%;
  width: 70px;
  margin-top: 45px;
  z-index: 2;
}

.multiple-items .slick-prev {
  left: 0%;
  transform: translateX(0%);
}
.multiple-items .slick-next {
  right: 94.5%;
  transform: translateX(130%);
}
.multiple-items .slick-next:before {
  background-image: url("../images/sliderightarrow.png");
}
.multiple-items .slick-prev:before {
  background-image: url("../images/slideleftarrow.png");
}
.multiple-items .slick-next:before,
.multiple-items .slick-prev:before {
  background-position: 50%;
  background-repeat: no-repeat;
  /* background-size: cover; */
  color: #0000;
  opacity: 1;
  font-size: 22px;
}
.multiple-items .slick-prev:hover,
.multiple-items .slick-prev:focus,
.multiple-items .slick-next:hover,
.multiple-items .slick-next:focus {
  background: #7f6df5;
}

.abtContent h3 {
  color: #000;
  font-family: "Hellix";
  font-size: 54px;
  font-weight: 500;
  line-height: 84px;
  margin: 50px 0 30px;
  text-transform: uppercase;
}
.abtContent h3 span {
  font-family: "Hellix";
}
.abtContent p {
  color: #000;
  text-align: justify;
  font-family: "Hellix";
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 30px;
}
.abtContent p span {
  color: #5700ff;
  font-family: "Hellix";
}
span.number {
  color: #000;
  font-size: 42.275px;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.423px;
}
.label {
  color: #5700ff;
  font-size: 20.025px;
  font-weight: 500;
  line-height: 163%;
  text-transform: capitalize;
  margin-top: 5px;
}
span.plus {
  font-size: 42px;
  font-weight: 600;
}

.gifArea .whitBtn {
  display: none;
}
.themeImg {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0.2;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    height: 50%;
}
.themeImg img {
  width: 100%;
}

.productlastPara p {
  font-size: 42px;
  width: 47%;
}

.coreOnnerList {
  position: relative;
  padding-left: 54px;
}
.coreOnnerList h4 {
  color: #5700ff;
  font-size: 28px;
  margin-bottom: 10px;
}
.coreOnnerList:after {
  content: "";
  position: absolute;
  background-image: url("../images/star.svg");
  width: 35px;
  height: 35px;
  top: 0;
  left: 0;
  background-size: cover;
}

.vclHead h4 {
  font-size: 54px;
  text-transform: uppercase;
}

.vclHead span {
  color: #5700ff;
}
.virsaBg img{
    width: 100%;
}
.cstmParaW p{
    width: 40%;
}
h3.termHead {
    font-size: 90px;
    font-weight: 800;
}

.termsContent h3 {
    font-size: 36px;
    font-weight: 600;
    margin: 50px 0 0px;
}
.termsContent h5 {
    font-size: 24px;
    margin-bottom: 15px;
}