/* Fonts */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

a,
a:hover {
  text-decoration: none !important;
  /* color:  !important; */
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.1s;
  /* Adjust duration as needed */
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
  {
  opacity: 0;
}

.fourOfour {
  background: radial-gradient(circle, rgba(2, 42, 124, 1) 0%, rgba(0, 0, 0, 1) 66%);
  line-height: 100vh;
  text-align: center;
}

.svg {
  display: inline-block;
  height: 300px;
  width: 300px;
  line-height: 300px;
  text-align: center;
  background-color: #fff;
  border-radius: 50%;
}

#svg {
  display: inline-block;
  vertical-align: middle;
  fill: #0057b8;
}

#svg path:nth-child(1) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.04s;
  animation-delay: 0.04s;
}

#svg path:nth-child(1):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(2) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.08s;
  animation-delay: 0.08s;
}

#svg path:nth-child(2):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(3) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.12s;
  animation-delay: 0.12s;
}

#svg path:nth-child(3):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(4) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}

#svg path:nth-child(4):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(5) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

#svg path:nth-child(5):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(6) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.24s;
  animation-delay: 0.24s;
}

#svg path:nth-child(6):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(7) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.28s;
  animation-delay: 0.28s;
}

#svg path:nth-child(7):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(8) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}

#svg path:nth-child(8):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(9) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.36s;
  animation-delay: 0.36s;
}

#svg path:nth-child(9):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(10) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

#svg path:nth-child(10):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(11) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.44s;
  animation-delay: 0.44s;
}

#svg path:nth-child(11):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(12) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.48s;
  animation-delay: 0.48s;
}

#svg path:nth-child(12):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(13) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.52s;
  animation-delay: 0.52s;
}

#svg path:nth-child(13):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(14) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.56s;
  animation-delay: 0.56s;
}

#svg path:nth-child(14):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(15) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

#svg path:nth-child(15):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(16) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.64s;
  animation-delay: 0.64s;
}

#svg path:nth-child(16):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(17) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.68s;
  animation-delay: 0.68s;
}

#svg path:nth-child(17):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(18) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.72s;
  animation-delay: 0.72s;
}

#svg path:nth-child(18):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(19) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.76s;
  animation-delay: 0.76s;
}

#svg path:nth-child(19):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(20) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

#svg path:nth-child(20):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(21) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.84s;
  animation-delay: 0.84s;
}

#svg path:nth-child(21):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(22) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.88s;
  animation-delay: 0.88s;
}

#svg path:nth-child(22):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(23) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.92s;
  animation-delay: 0.92s;
}

#svg path:nth-child(23):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(24) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 0.96s;
  animation-delay: 0.96s;
}

#svg path:nth-child(24):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(25) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

#svg path:nth-child(25):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(26) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.04s;
  animation-delay: 1.04s;
}

#svg path:nth-child(26):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(27) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.08s;
  animation-delay: 1.08s;
}

#svg path:nth-child(27):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(28) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.12s;
  animation-delay: 1.12s;
}

#svg path:nth-child(28):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(29) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.16s;
  animation-delay: 1.16s;
}

#svg path:nth-child(29):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(30) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

#svg path:nth-child(30):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(31) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.24s;
  animation-delay: 1.24s;
}

#svg path:nth-child(31):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(32) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.28s;
  animation-delay: 1.28s;
}

#svg path:nth-child(32):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(33) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.32s;
  animation-delay: 1.32s;
}

#svg path:nth-child(33):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(34) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.36s;
  animation-delay: 1.36s;
}

#svg path:nth-child(34):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(35) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

#svg path:nth-child(35):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(36) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.44s;
  animation-delay: 1.44s;
}

#svg path:nth-child(36):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(37) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.48s;
  animation-delay: 1.48s;
}

#svg path:nth-child(37):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(38) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.52s;
  animation-delay: 1.52s;
}

#svg path:nth-child(38):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(39) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.56s;
  animation-delay: 1.56s;
}

#svg path:nth-child(39):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(40) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

#svg path:nth-child(40):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(41) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.64s;
  animation-delay: 1.64s;
}

#svg path:nth-child(41):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(42) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.68s;
  animation-delay: 1.68s;
}

#svg path:nth-child(42):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(43) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.72s;
  animation-delay: 1.72s;
}

#svg path:nth-child(43):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(44) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.76s;
  animation-delay: 1.76s;
}

#svg path:nth-child(44):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(45) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

#svg path:nth-child(45):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(46) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.84s;
  animation-delay: 1.84s;
}

#svg path:nth-child(46):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(47) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.88s;
  animation-delay: 1.88s;
}

#svg path:nth-child(47):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(48) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.92s;
  animation-delay: 1.92s;
}

#svg path:nth-child(48):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(49) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 1.96s;
  animation-delay: 1.96s;
}

#svg path:nth-child(49):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(50) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

#svg path:nth-child(50):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(51) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.04s;
  animation-delay: 2.04s;
}

#svg path:nth-child(51):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(52) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.08s;
  animation-delay: 2.08s;
}

#svg path:nth-child(52):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(53) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.12s;
  animation-delay: 2.12s;
}

#svg path:nth-child(53):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(54) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.16s;
  animation-delay: 2.16s;
}

#svg path:nth-child(54):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(55) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

#svg path:nth-child(55):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(56) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.24s;
  animation-delay: 2.24s;
}

#svg path:nth-child(56):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(57) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.28s;
  animation-delay: 2.28s;
}

#svg path:nth-child(57):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

#svg path:nth-child(58) {
  -webkit-animation: pweek 5s linear infinite;
  animation: pweek 5s linear infinite;
  -webkit-animation-delay: 2.32s;
  animation-delay: 2.32s;
}

#svg path:nth-child(58):hover {
  -webkit-animation-play-state: paused;
  /* Chrome, Safari, Opera */
  animation-play-state: paused;
}

@-webkit-keyframes pweek {
  0% {
    fill: #0057b8;
  }

  16.6666666667% {
    fill: #f11e4a;
  }

  33.3333333333% {
    fill: #237;
  }

  50% {
    fill: #229c79;
  }

  66.6666666667% {
    fill: #f8a527;
  }

  83.3333333333% {
    fill: #266d7f;
  }

  100% {
    fill: #0057b8;
  }
}

@keyframes pweek {
  0% {
    fill: #0057b8;
  }

  16.6666666667% {
    fill: #f11e4a;
  }

  33.3333333333% {
    fill: #237;
  }

  50% {
    fill: #229c79;
  }

  66.6666666667% {
    fill: #f8a527;
  }

  83.3333333333% {
    fill: #266d7f;
  }

  100% {
    fill: #0057b8;
  }
}

/* Fonts */

/* body {
  margin: 0;
  height: 100%;
  overflow: hidden; 
}

#content-main {
  overflow: auto; 
 
} */

/* body{
  background-color: #000;
} */

body {
  background-color: #000;
}

#content-main>div,
#app {
  background-color: #ffffff;
}

#app main {
  background-color: #fff;
}

#content-main>div {
  position: absolute;
  top: 0;
  width: 100%;
}

#content-main>div.visible#page-Get-Started {
  width: 100% !important;
  height: 100% !important;
}

#content-main>div.visible {
  overflow: visible !important;
}

body:has(#page-Get-Started.visible) .Footer-background,
body:has(#page-Get-Started.visible) .Navbar {
  display: none !important;
}

body:has(#page-Get-Started.visible) #content-main>div:not(#page-Get-Started.visible) {
  display: none !important;
}

body:has(#page-Get-Started.visible) {
  overflow: hidden;
}

.Footer-background {
  /* position: absolute;
  width: 100%;
  top: 130vh;
  bottom: 0; */
}

#content-main>div {
  opacity: 0 !important;
  overflow: hidden;
  transition: opacity 0.5s ease;
  /* Height change starts after opacity finishes */
  /* height: 0 !important; */
}

#content-main>div.visible#page-Services {
  overflow: visible !important;
}

#content-main>div.visible {
  opacity: 1 !important;
  height: fit-content !important;
}

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999999999999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #000;
  background-image: radial-gradient(circle at 110% 100%, #022a7c, #0000 25%),
    radial-gradient(circle at -20% 30%, #022b80, #0000 41%);
}

.loader-wrapper div {
  background-image: url(/Media/Looming_loader.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  height: 50%;
  width: 50%;
}

/* 
.loader {
  position: relative;
  margin: auto;
  width: 300px;
  height: 300px;
  --colorA: #42afee;
}
.loader::before, .loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  border-top: 10px solid #ffffff;
  filter: drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA)) drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 20px var(--colorA));
  animation: rotate 3s infinite linear;
}
.loader::after {
  --colorA: #022a7c;
  animation-delay: -1.5s;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
 }
} */

:root {
  --compulsory-light-color: #fff;
  --Primary-color: hsla(202, 83%, 54%, 0.884);
  --accent-color: #e74c3c;
  --text-color: #333;
  --background-color: #f4f4f4;
}

/* body::-webkit-scrollbar {
  display: inline-block !important;
} */

body::-webkit-scrollbar {
  display: none;
}

.FirstSectionBanner {
  background-color: black;
  width: 100%;
  min-height: 90vh;
  max-height: auto;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
  background-image: radial-gradient(circle at 110% 100%, #022a7c, #0000 25%),
    radial-gradient(circle at -20% 30%, #022b80, #0000 41%);
  padding-top: 100px;
  padding-bottom: 50px;
}

.PageSections {
  position: relative;
  min-height: 70vh;
  width: 100%;
  max-width: 94rem;
  left: 50%;
  transform: translate(-50%, 0%);
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  align-items: center;
}

.SectionContent {
  width: 100%;
  height: auto;
  cursor: default;
}

.SectionContent>div {
  padding: 5px 0px;
}

.SectionIcons {
  width: fit-content;
  height: 40px;
  cursor: pointer;
  margin-bottom: 10px;
}

.SectionIcons>svg {
  height: 100%;
  padding: 5px;
  color: #ffffffb6;
  transition: 0.3s;
}

.SectionIcons>svg:hover {
  color: hsla(202, 83%, 54%, 0.884);
}

.SectionHeading>h1 {
  font-size: 40px;
  color: #fffffff3;
  font-style: normal;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.SectionHeading>h1>span {
  background: linear-gradient(to right, #42afee 0%, #024ae4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.SectionsPara>h2 {
  font-size: 20px;
  color: #ffffffc5;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.BottomsButtons {
  width: fit-content;
}

.DemoButton,
.TrialButton {
  width: 180px;
  height: 45px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  border-radius: 50px;
  font-size: 14px;
  border: 0px;
  outline: 0px;
  letter-spacing: 0.3px;
  cursor: pointer;
}

.DemoButton {
  color: rgba(255, 255, 255, 0.911);
  background-color: hsla(202, 83%, 54%, 0.884);
  margin-right: 15px;
  transition: 0.3s;
}

.DemoButton:hover {
  color: hsla(202, 83%, 54%, 0.952);
  background-color: rgba(255, 255, 255, 0.911);
  box-shadow: 0px 0px 10px 2px hsla(202, 83%, 54%, 0.678);
}

.TrialButton {
  color: rgba(255, 255, 255, 0.911);
  background-color: hsla(0, 0%, 100%, 0);
  border: 2px solid hsla(202, 83%, 54%, 0.884);
  transition: 0.3s;
}

.TrialButton:hover {
  box-shadow: 0px 0px 10px 2px hsla(202, 83%, 54%, 0.678);
}

.SectionBanner {
  display: flex;
  justify-content: right;
}

.BannerContent {
  height: 100%;
  width: fit-content;
  width: 60%;
  position: relative;
}

.BannerContent>img {
  width: 100%;
  z-index: 1;
}

.BannerShadowContainer {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.BannerShadowEffect {
  height: 0px;
  width: 0px;
  box-shadow: 0 0 250px 250px rgba(0, 0, 255, 0.452);
  border-radius: 50%;
  animation: shadowanimation 2s infinite;
}

@keyframes shadowanimation {
  0% {
    box-shadow: 0 0 250px 250px rgba(0, 0, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 100px 100px rgba(0, 0, 255, 0.3);
  }

  100% {
    box-shadow: 0 0 250px 250px rgba(0, 0, 255, 0.3);
  }
}

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

.floats {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  animation: floats 1s infinite ease-in-out;
}

@keyframes floats {
  0% {
    top: 0;
    left: 0;
  }

  50% {
    top: 5px;
    left: 1px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

@media (max-width: 1000px) {
  .FirstSectionBanner {
    clip-path: polygon(0 0, 100% 0, 100% 98%, 50% 100%, 0 98%);
  }

  .SectionHeading>h1 {
    text-align: center;
    font-size: 40px;
  }

  .SectionsPara>h2 {
    text-align: center;
    font-size: 13px;
    width: 90%;
    margin: auto;
    margin-bottom: 20px;
  }

  .BottomsButtons {
    margin: auto;
  }

  .DemoButton,
  .TrialButton {
    width: 130px;
    height: 45px;
  }

  .SectionIcons {
    margin: auto;
  }

  .BannerContent {
    height: 100%;
    width: fit-content;
    width: 100%;
  }

  .SectionContent {
    margin-top: 20px !important;
  }

  .DemoButton {
    margin-right: 5px;
  }
}

.logos {
  overflow: hidden;
  padding: 60px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos-slide {
  display: inline-block;
  animation: 20s slide infinite linear;
}

.logos-slide img {
  height: 30px;
  margin: 0 20px;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Services  Start */

.services-background {
  transition: background-image 2s, background-color 2s;
  background-color: #000;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Services title */
.title {
  position: absolute;
  left: 16;
  top: 85px;
  z-index: 999;
}

.services .title h3 {
  text-transform: capitalize;
  font-size: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  z-index: 1;
  color: var(--compulsory-light-color);
  line-height: 1;
  transition: 1.2s;
}

.services .title>div {
  transition: 1.4s;
}

/* @media (max-height: 800px) {
  .services .title h3 {
    font-size: calc(3vw + 3vh) !important;
  }
} */

@media screen and (max-width: 500px) {
  .title {
    top: 50px;
  }

  .services .title h3 {
    font-size: 40px !important;
  }

  .scroll-text .head {
    font-size: 9px !important;
  }

  .scroll-text .mouse {
    height: 31px !important;
    width: 18px !important;
  }
}

/* Services title */

.services .scroll {
  height: 100vh;
}

/* Services  Thumb */
.services-thumb-slider-wrapper .scroll-text {
  position: absolute;
  top: 50%;
  transform: translate(100%, -50%);
  left: 4.5%;
  display: flex;
  flex-direction: column;
}

.scroll-text .mouse {
  margin: 0 auto;
  display: block;
  border-radius: 3.125em;
  border: 2px solid var(--compulsory-light-color);
  height: 3.125em;
  width: 1.5em;
  position: relative;
  opacity: 0.4;
}

.scroll-text .move {
  position: absolute;
  background-color: var(--compulsory-light-color);
  height: 0.25em;
  width: 0.25em;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  animation: move 2s linear infinite;
  opacity: 0.8;
}

.scroll-text .head {
  font-size: 0.75em;
  letter-spacing: 0.03em;
  margin: 0.75em 0 0 0;
  opacity: 0.4;
  color: var(--compulsory-light-color);
  font-family: "Montserrat", sans-serif;
}

@keyframes move {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, 1.5625em);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, 3em);
    opacity: 0;
  }
}

/* Services  Thumb */

/* Services  Scroll */

section.services {
  height: 100vh;
}

@media screen and (max-width: 760px) {
  section.services {
    height: 100vh !important;
  }

  .PageSections {
    margin: 0 auto;
  }
}

@media (max-height: 700px) {
  section.services {
    height: 700px;
  }
}

.services-thumb-slider {
  width: 100%;
  height: 36%;
  padding: 0 0 0 1.5em !important;
  position: relative;
}

.services-thumb-slider::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
}

.swiper .swiper-slide {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-thumb__head h2 {
  color: var(--compulsory-light-color);
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  transition: 0.25s all ease-in-out;
  opacity: 0.2;
  font-family: "Montserrat", sans-serif;
}

.service-thumb__head h2 span {
  background: linear-gradient(to right, #42afee 0%, #024ae4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.swiper-slide.swiper-slide-next .service-thumb__head h2,
.services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-prev .service-thumb__head h2 {
  font-size: clamp(12px, 1.3vw, 19px);
  opacity: 0.4;
}

.swiper-slide.swiper-slide-active .service-thumb__head h2 {
  font-size: clamp(12px, 1.7vw, 23px);
  opacity: 1;
}

.swiper-slide .service-thumb__head h2 a {
  color: var(--compulsory-light-color);
  text-decoration: none;
}

@media screen and (max-width: 768px) and (min-width: 0px) {
  .service-thumb__head h2 {
    font-size: 3.5vw;
  }

  .swiper-slide.swiper-slide-next .service-thumb__head h2,
  .services-thumb-slider-wrapper .services-thumb-slider .swiper-slide.swiper-slide-prev .service-thumb__head h2 {
    font-size: 4vw;
  }

  .swiper-slide.swiper-slide-active .service-thumb__head h2 {
    font-size: 4.6vw;
  }

  .swiper-vertical {
    width: 75vw;
  }

  .services-thumb-slider {
    height: 50%;
  }
}

/* Services  Scroll */

/* services content */

.slide-content {
  position: absolute;
  width: 100%;
  transition: opacity 1s, height 1s;
  opacity: 0;
  overflow: hidden;
  color: var(--compulsory-light-color);
}

.active-slide-content {
  opacity: 1;
}

.slide-content .img-wrapper img {
  width: -webkit-fill-available;
  width: 100%;
  object-fit: contain;
}

.service-item__img p {
  font-family: Montserrat, sans-serif;
  font-size: 1em;
  color: var(--compulsory-light-color);
  font-weight: 300;
}

.service-item__img p a {
  color: var(--compulsory-light-color);
  font-weight: 700;
}

.service-item__list-wrapper li a:hover {
  color: var(--compulsory-light-color);
  font-weight: 400;
}

.service-item__list-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.service-item__list-wrapper li {
  width: 33.33%;
  padding: 0 1.5em 0 0;
  margin-bottom: 0.25em;
}

.service-item__list-wrapper li a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1em;
  font-weight: 300;
  transition: 0.25s ease-in-out;
  text-decoration: none;
}

::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}

@media (max-height: 800px) {
  .service-item__img p {
    font-size: 0.8em;
  }

  .service-item__list-wrapper li a {
    font-size: 0.8em;
  }

  .slide-content .img-wrapper img {
    width: 80%;
    margin: 0 auto;
  }

  .slide-content .img-wrapper {
    display: flex;
    justify-content: center;
  }
}

/* services content */

/* Services  End */

/* Work Process Start */

.work-process {
  min-height: fit-content !important;
}

.work-process-background {
  background-repeat: round;
  background-position: center center;
  background-size: cover;
  background-color: var(--compulsory-light-color);
  background-image: url("/Media/Work-Process/Background/work-want.png");
  position: relative;
  animation: shakeBackground 30s infinite;
}

@keyframes shakeBackground {
  0% {
    background-position: 0 0;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    background-position: -10px 0;
  }

  20%,
  40%,
  60%,
  80% {
    background-position: 10px 0;
  }

  100% {
    background-position: 0 0;
  }
}

.bg-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fffefed6;
}

.work-process-main-head p {
  color: #10141e;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
  position: relative;
}

.work-process-main-head p::before,
.work-process-main-head p::after {
  content: "•";
  color: inherit;
  font-size: 24px;
  margin: 0 8px;
  vertical-align: middle;
}

.work-process-main-head h2 {
  background: #061b47;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 800;
}

.work-process-boxes>div {
  padding: 0px 5px;
  cursor: pointer;
}

.work-process-box {
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  padding: 10px 20px;
  min-height: 250px;
  transition: 1s;
  background-size: 200% auto;
  color: white;
  background-color: #000;
  background-image: linear-gradient(to right, #25336e63 0%, #000 10%, #3860fb63 100%);
  background-position: right center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.work-process-box .work-process-icon {
  padding: 12px 0px;
}

.work-process-box .work-process-icon img {
  width: 55px;
  height: 55px;
  filter: none;
  transition: filter 0.1s ease;
}

.work-process-box .work-process-head h3 {
  color: var(--compulsory-light-color);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.work-process-box .work-process-text p {
  font-family: "Roboto", sans-serif;
  font-size: 0.8em;
  font-weight: 300;
  color: var(--compulsory-light-color);
}

.work-process-box:hover .work-process-icon>img {
  /* filter: brightness(0) saturate(100%) invert(56%) sepia(22%) saturate(5240%) hue-rotate(173deg) brightness(89%) contrast(86%); */
}

.work-process-box:hover {
  /* background-position: -99px 0; */
  background-position: center center;
  box-shadow: 0 0 20px #2492d2;
}

/* Work Process End */

/* Work Want Start */

.work-want {
  min-height: fit-content !important;
}

.work-want-main-head p {
  color: #10141e;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
  position: relative;
}

.work-want-main-head p::before,
.work-want-main-head p::after {
  content: "•";
  color: inherit;
  font-size: 24px;
  margin: 0 8px;
  vertical-align: middle;
}

.work-want-main-head h2 {
  background: #061b47;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 800;
}

.work-want-content p {
  color: gray;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 17px;
}

.work-want-btns>div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: var(--Primary-color);
  text-align: center;
  margin: 0px 10px;
  max-width: 180px;
  height: 45px;
  border-radius: 50px;
  border: 0px;
  outline: 0px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: 0.3s;
  border: 2px solid transparent;
}

.work-want-btns>div:hover {
  /* background-color:var(--Primary-color); */
  background-color: #000000;
  box-shadow: 0px 0px 10px 2px hsla(202, 83%, 54%, 0.678);
  border: 2px solid hsla(202, 83%, 54%, 0.884);
}

.work-want-btns a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.911);
  transition: 1s;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  border-radius: 50px;
  font-size: 14px;
}

.work-want-btns>div:hover a {
  color: var(--compulsory-light-color) !important;
}

/* Work Want End */

/* Journey Start */

.journey-background {
  background-color: #0b0b0b;
  background-image: radial-gradient(circle at 110% 100%, #022a7c, #0000 25%),
    radial-gradient(circle at -20% 30%, #022b80, #0000 41%);
}

.journey-background>.journey {
  min-height: fit-content !important;
}

.journey-main-head h3 {
  color: var(--Primary-color);
  font-family: "Roboto", sans-serif;
  font-size: 26px;
  font-weight: 500;
}

.journey-main-head h2 {
  color: var(--compulsory-light-color);
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 800;
}

.journey-para p {
  color: #ffffffc5;
  ;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 15px;
}

.journey-boxes .journey-box {
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 35px 5px;
  cursor: pointer;
  transition: 1s;
  background-size: 100% auto;
}

.journey-boxes .journey-box:hover {
  border: 1px solid #ffffff1a;
  box-shadow: 0 0 10px #2492d263;
  background-color: #000;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%);
}

.journey-box .journey-icon {
  display: flex;
  justify-content: center;
  padding: 20px 0px;
}

.journey-box .journey-icon img {
  width: 30px;
}

.journey-box .journey-head h3 {
  text-align: center;
  color: var(--Primary-color);
  font-family: "Montserrat", sans-serif;
  font-size: 38px;
  font-weight: 600;
}

.journey-box .journey-text p {
  color: var(--compulsory-light-color);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

.journey-box:hover {}

.journey-box:hover {}

/* Journey End */

/* Blogs Start */
.blogs {
  min-height: fit-content !important;
}

.blogs-background {
  background-repeat: round;
  background-position: center center;
  background-size: cover;
  background-color: var(--compulsory-light-color);
  background-image: url(/Media/Work-Process/Background/work-want.png);
  position: relative;
  animation: shakeBackground 30s infinite;
}

.blogs-main-head h2 {
  background: #061b47;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 800;
}

.blogs-boxes .blogs-box {
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  padding: 10px;
  min-height: 280px;
  background-size: cover;
  z-index: 111;
  background-position: center center;
  background-blend-mode: overlay;
  background-color: #000000b0;
  cursor: pointer;
  transition: 1s;
}

.blogs-boxes a {
  text-decoration: none;
}

@media (min-width: 992px) {

  .blogs-boxes .col-lg-6:nth-child(1) .blogs-box,
  .blogs-boxes .col-lg-6:nth-child(2) .blogs-box {
    min-height: 400px !important;
  }
}

.blogs-boxes .blogs-box:hover {
  background-color: #071d4aa4;
  box-shadow: 0 0 20px #2492d2;
}

.blog-btn {
  background-color: black;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  width: 100px;
  display: none;
}

.blogs-head h3 {
  margin: 10px 0px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  /* Adjust based on your design */
  max-height: 3em;
  /* line-height * 2 */
  width: 90%;
}

.blogs-text p {
  display: none;
  color: rgb(255, 255, 255);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  white-space: nowrap;
  /* Prevents text from wrapping */
  overflow: hidden;
  /* Hides overflow text */
  text-overflow: ellipsis;
  /* Adds the ellipsis (...) */
}

/* Blogs End */

.testimonail-service-combo-bg {
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(1, 27, 77, 1) 30%,
      rgba(1, 31, 90, 1) 50%,
      rgba(1, 27, 79, 1) 70%,
      rgba(0, 0, 0, 1) 100%);
  transition: 2s;
}

/* Testimonial Start */

.testimonail-background {
  overflow: hidden;
  /* background: rgb(2, 42, 124);
  background: radial-gradient(
    circle,
    rgba(2, 42, 124, 1) 0%,
    rgba(0, 0, 0, 1) 66%
  ); */
  /* background: rgb(1, 31, 90);
  background: linear-gradient(0deg, rgba(1, 31, 90, 1) 0%, rgba(0, 0, 0, 1) 82%, rgba(0, 0, 0, 1) 83%); */
}

.testimonail {
  min-height: fit-content !important;
}

.testimonail-main-head h2 {
  color: var(--compulsory-light-color);
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 800;
  text-align: center;
}

.testimonai-para p {
  color: #ffffffc5;
  ;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
}

/* .testimonail-main-head h2 span {
  color: var(--Primary-color);
} */

.testimonial-box {
  text-align: center;
  /* background-color: #fff;
  border: 1px solid #f1f1f1; */
  /* border-radius: 14px; */
  align-items: center;
  min-height: 500px;
  justify-content: center;
  padding: 18px 2vw;
  /* background-color: #000; */
  /* border: 1px solid #ffffff26; */
  border-radius: 16px;
  transition: 1s;
  background-size: 100% auto;
}

.testimonial-box:hover {
  box-shadow: 0 0 10px #2492d263;
  background-color: #000;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%);
}

.testimonial-avatar {
  width: 90px;
  height: 90px;
  min-height: 90px;
  min-width: 90px;
  background-color: #f1efee;
  border-radius: 100%;
  margin-bottom: 40px;
  position: relative;
}

.avatar-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 60%;
}

.app-icon {
  position: absolute;
  top: auto;
  bottom: -8px;
  left: auto;
  right: -8px;
  display: none;
}

.star-wrapper {
  margin-bottom: 32px;
}

.star {
  width: 24px;
  margin-left: 2px;
  margin-right: 2px;
}

.testimonial-details {
  color: #ffffffc5;
  ;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  min-height: 250px;
}

.author-block {
  margin-top: 32px;
}

.author-name {
  color: var(--compulsory-light-color);
  margin-bottom: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.author-date {
  color: var(--Primary-color);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
}

.right-arrow,
.left-arrow {
  width: 60px;
  height: 60px;
  min-height: 60px;
  min-width: 60px;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  transition: border-color 0.2s, transform 0.3s;
  display: flex;
  font-size: 40px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 1s;
  background-size: 100% auto;
  z-index: 999;
}

.testimonial-controler .right-arrow,
.testimonial-controler .left-arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.testimonial-controler .right-arrow {
  right: 25px;
}

.testimonial-controler .left-arrow {
  left: 25px;
}

@media (max-width: 992px) {
  .testimonial-controler {
    position: absolute;
    top: 55%;
  }

  .testimonial-controler .right-arrow {
    right: 20px !important;
  }

  .testimonial-controler .left-arrow {
    left: -10px !important;
  }
}

@media (max-width: 768px) {
  .testimonial-controler {
    display: none !important;
  }
}

.right-arrow:hover {
  border: 1px solid #ffffff;
  background-color: #000;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%);
  right: 15px;
}

.left-arrow:hover {
  border: 1px solid #ffffff;
  background-color: #000;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%);
  left: 15px;
}

.testimonial-swiper-pagination .swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width,
      var(--swiper-pagination-bullet-size, 12px)) !important;
  height: var(--swiper-pagination-bullet-height,
      var(--swiper-pagination-bullet-size, 12px)) !important;
}

.testimonial-swiper-pagination .swiper-pagination-bullet {
  background-color: var(--Primary-color) !important;
}

.testimonail-background .swiper-slide-prev .row>div,
.testimonail-background .swiper-slide-next .row>div {
  transform: translateY(80px);
  opacity: 0;
}

.testimonail-background .swiper-slide-active .row>div {
  transform: translateY(0);
  transition: 0.5s;
}

.testimonail-background .swiper-slide-active .row>div:nth-child(1) {
  transition-delay: 0.1s;
  opacity: 1;
}

.testimonail-background .swiper-slide-active .row>div:nth-child(2) {
  transition-delay: 0.4s;
  opacity: 1;
}

.testimonail-background .swiper-slide-active .row>div:nth-child(3) {
  transition-delay: 0.8s;
  opacity: 1;
}

/* Testimonial End */

/* Service Page */

/* Services */

.service-combo-bg {
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(1, 27, 77, 1) 30%,
      rgba(1, 31, 90, 1) 50%,
      rgba(1, 27, 79, 1) 70%,
      rgba(0, 0, 0, 1) 100%);
  /* transition: 2s; */
}

.Services-page-heading-background {
  padding-top: 100px;
  overflow: hidden;
  background: rgb(1, 31, 90);
  background: linear-gradient(163deg,
      rgba(1, 31, 90, 1) 0%,
      rgba(0, 0, 0, 1) 53%);
}

/* .Services-page-slider{
  position: fixed;
  top: 0;
} */

.service-wrapper-fixed {
  position: sticky;
  top: 75px;
  width: 100%;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(1, 27, 77, 1) 30%,
      rgba(1, 31, 90, 1) 50%,
      rgba(1, 27, 79, 1) 70%,
      rgba(0, 0, 0, 1) 100%);
}

.Services-page-background {
  overflow: hidden;
  /* background: rgb(1, 31, 90);
  background: linear-gradient(
    0deg,
    rgba(1, 31, 90, 1) 0%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 1) 83%
  ); */
}

.Services-page-hero-background {
  /* background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 32%,
    rgba(1, 31, 90, 1) 100%
  ); */
  overflow: hidden;
}

.Services-page-hero-background h1 {
  font-size: clamp(30px, 5vw, 40px);
  text-align: left;
  width: fit-content;
  /* margin-right: 10vw; */
  position: relative;
}

.Services-page-hero-background h1 p {
  z-index: 4;
  position: relative;
}

.Services-page-hero-background h1 p span {
  background: linear-gradient(to right, #42afee 0%, #024ae4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
  .Services-page-hero-background h1 {
    margin-right: 0px;
  }
}

.Services-page-slider {
  min-height: fit-content !important;
}

/* Basic styling for Swiper container and slides */
.swiper-container-Service-page {
  overflow: hidden;
}

.swiper-container-Service-page .swiper-slide {
  font-size: 24px;
  color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;

  /* opacity: 0.5; */
  transition: opacity 1s ease;
  /* Smooth opacity transition */
}

/* .Services-Page-Services-slide{
  transition: opacity 1s ease;
} */

.swiper-container-Service-page .swiper-slide h3 {
  text-transform: capitalize;
  font-size: clamp(28px, 3vw, 40px);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  z-index: 1;
  color: var(--compulsory-light-color);
  position: absolute;
  left: 0;
  top: 20px;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 992px) {
  .swiper-container-Service-page .swiper-slide h3 {
    transform: translate3d(33px, 0px, 0px);
  }
}

.swiper-container-Service-page .swiper-slide ul {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

.swiper-container-Service-page .swiper-slide li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 28px);
  line-height: 1.5;
  color: var(--compulsory-light-color);
  padding: 2px 0px;
  white-space: nowrap;
}

.swiper-container-Service-page .swiper-slide li:last-of-type {
  margin: 10px 0px 0px 0px;
  list-style-type: none;
}

.swiper-container-Service-page .swiper-slide li a {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 17px);
  line-height: 1.5;
  color: var(--Primary-color);
  text-decoration: none;
  transition: 0.5s;
}

.swiper-container-Service-page .swiper-slide li a:hover {
  color: var(--compulsory-light-color);
}

.swiper-container-Service-page .swiper-slide li a svg {
  fill: var(--Primary-color);
  width: 12px;
  margin: -1px 3px;
  transition: 0.5s;
}

.swiper-container-Service-page .swiper-slide li a:hover svg {
  fill: var(--compulsory-light-color);
  margin: -1px 6px;
  rotate: 45deg;
}

.swiper-container-Service-page .swiper-slide .img {
  width: -webkit-fill-available;
  /* aspect-ratio: 100 / 80; */
  width: 85vw;
  height: 65vh;
  border-radius: 16px;
  border: 1px solid #ffffff1a;
  background-size: cover;
  background-position: center center;
  filter: brightness(0.8);
  opacity: 0.7;
}

@media (min-width: 992px) and (max-width: 1600px) {
  .swiper-container-Service-page .swiper-slide .img {
    height: 75vh !important;
  }
}



@media (max-width: 768px) {
  .swiper-container-Service-page .swiper-slide ul {
    /* transform: translateY(-122%); */
    /* top: -54vh; */
    /* top: -45.5vh; */
    /* margin-left: 10px; */
    margin-left: -22px;
    position: relative !important;
    transform: unset !important;
    top: unset !important;
  }

  .swiper-container-Service-page .swiper-slide .img {
    height: 70vh;
    opacity: 0.5;
  }

  .swiper-container-Service-page .swiper-slide h3 {
    font-size: 3.6vh;
    width: 85%;
    top: 0;
    height: 100%;
  }

  .swiper-container-Service-page .swiper-slide li {
    /* font-size: 20px !important; */
    font-size: 2.1vh !important;
    white-space: normal !important;
  }

  .swiper-container-Service-page .swiper-slide li a {
    font-size: 2.1vh !important;
  }
}


.services-links.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.ServicePageServices-Links {
  min-height: fit-content !important;
  max-width: 1000px;
}

.services-links .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 992px) {
  .services-links .swiper-slide {
    width: fit-content !important;
  }

  .services-links-pagination .swiper-button-next-services {
    right: -50px !important;
  }

  .services-links-pagination .swiper-button-prev-services {
    left: -50px !important;
  }
}

.services-links-pagination .swiper-button-next-services {
  right: 8px;
}

.services-links-pagination .swiper-button-prev-services {
  left: 8px;
}

.services-links .swiper-wrapper {
  z-index: 1;
}

.ServicePageServices-Links {
  position: relative;
}

.ServicePageServices-Links::before,
.ServicePageServices-Links::after {
  content: "";
  width: 50px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 99;
  pointer-events: none;
  /* Ensures it doesn't block interactions */
}

.ServicePageServices-Links::before {
  background: linear-gradient(to right,
      rgba(0, 15, 45, 0.25) 0%,
      rgba(0, 0, 0, 0) 100%);
  left: 30px;
}

.ServicePageServices-Links::after {
  background: linear-gradient(to left,
      rgba(0, 15, 45, 0.25) 0%,
      rgba(0, 0, 0, 0) 100%);
  right: 30px;
}

.services-links-pagination .swiper-button-next-services svg,
.services-links-pagination .swiper-button-prev-services svg {
  fill: #ffffff;
  /* Adjust arrow color */
  width: 20px;
  transition: 0.5s;
  cursor: pointer;
  margin: 5px 10px;
}

/* .services-links-pagination .swiper-button-next-services,
.services-links-pagination .swiper-button-prev-services {
  width: 46px;

  height: 40px;
} */

.services-links-pagination .swiper-button-next-services,
.services-links-pagination .swiper-button-prev-services {
  width: 35px;
  height: 20px;
  cursor: pointer;
}

.services-links-pagination.swiper-button-next-services svg:hover,
.services-links-pagination .swiper-button-prev-services svg:hover {
  fill: var(--Primary-color);
  /* Adjust arrow color */
}

.services-links-pagination .swiper-button-next-services {
  position: absolute;
  top: 6px;

  z-index: 2;
  transition: 0.5s;
  /* background: linear-gradient(90deg,rgb(0 15 45 / 56%) 100%, rgb(0 0 0 / 0%) 53%);  */
}

.services-links-pagination .swiper-button-prev-services {
  position: absolute;
  top: 6px;

  z-index: 999;
  transition: 0.5s;
  /* background: linear-gradient(90deg, rgb(0 0 0 / 0%) 53%, rgb(0 15 45 / 56%) 100%); */
}

@media screen and (max-width: 599px) {

  .services-links-pagination .swiper-button-next-services,
  .services-links-pagination .swiper-button-prev-services {
    top: 38vh !important;
    z-index: 99 !important;
  }

  .ServicePageServices-Links {
    z-index: 99;
  }

  .services-links.swiper-container a {
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 18px;
  }

  .services-links-pagination .swiper-button-prev-services {
    left: -5px;
  }

  .services-links-pagination .swiper-button-next-services {
    right: -5px;
  }
}

/* .services-links .swiper-button-next-services:hover{
  right: 15px;
}
.services-links .swiper-button-prev-services:hover{
  left: 15px;
} */

.services-links-pagination .swiper-button-next-services svg {
  rotate: 45deg;
}

.services-links-pagination .swiper-button-prev-services svg {
  rotate: -135deg;
}

.services-links.swiper-container a {
  color: var(--compulsory-light-color);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 22px;
  transition: 0.3s;
}

.services-links.swiper-container a.active {
  color: var(--Primary-color);
  font-family: "Roboto", sans-serif;
  text-decoration: underline !important;
}

#ServicesNeon {
  display: flex;
  position: absolute;
  top: 0;
  left: -45px;
  z-index: 1;
  filter: blur(3.5px);
  opacity: 0.2;
  -webkit-filter: blur(3.5px);
}

.ServicesNeon {
  opacity: 0;
  width: clamp(50px, 7vw, 100px);
  height: clamp(50px, 7vw, 100px);
  background-color: rgb(0, 173, 236);
  border-radius: 50%;
  color: #191a1b;
  margin: 5px;
  animation: ServicesNeonAnime 1.5s infinite alternate;
}

@keyframes ServicesNeonAnime {

  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    box-shadow: 0 0 4px #0177a1, 0 0 10px #0177a1, 0 0 20px #0177a1,
      0 0 40px #0177a1, 0 0 80px #0177a1, 0 0 90px #0177a1, 0 0 100px #0177a1,
      0 0 150px #0177a1;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    text-shadow: none;
  }
}

.service-btn-start {
  position: absolute;
  right: -150px;
  bottom: -50px;
}

@media screen and (max-width: 560px) {
  .Services-page-hero-background h1 {
    text-align: center !important;
  }

  .service-btn-start {
    position: relative;
    bottom: -30px;
    right: unset;
    margin: 0 auto;
    width: fit-content;
  }

  .service-btn-start>div {
    margin: 0 auto;
    font-size: 12px;
    width: 120px;
    height: 120px;
  }

  #ServicesNeon {
    top: 50px;
  }
}

.Service-get-start-btn {
  background-color: var(--compulsory-light-color);
  color: var(--Primary-color);
  width: 140px;
  text-align: center;
  height: 140px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 50%;
  position: relative;
  transition: 0.5s;
  z-index: 4;
  cursor: pointer;
}

.Service-get-start-btn:hover {
  background-color: var(--Primary-color);
  color: #fff;
}

.Service-get-start-btn div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.Service-get-start-btn svg {
  width: 14px;
  height: 16px;
  margin: -3px 0px;
  fill: var(--Primary-color);
  rotate: 45deg;
  transition: 0.5s;
}

.Service-get-start-btn:hover svg {
  rotate: 0deg;
  margin: -2px 0px;
  fill: #ffff;
}

/* Services End */

.blogs-bg {
  background-color: #80808008;
}

.blogs-page-hero-background {
  display: block;
  background-color: black;
  background-image: radial-gradient(circle at 110% 100%,
      #022a7c,
      rgba(0, 0, 0, 0) 25%),
    radial-gradient(circle at -20% 30%, rgb(2, 43, 128), rgba(0, 0, 0, 0) 41%);
  height: 75vh;
}

.blogs-page-heading,
.blogs-container {
  min-height: fit-content !important;
  margin-top: -50vh;
}

.blogs-container .SectionContent {
  /* margin-top: -12vh !important; */
  border-radius: 16px;
}

.blogs-container .SectionContent.first {
  border: 1px solid #061b4766;
  background: #ffffff;
}

.blog-box {
  cursor: pointer;
}

.blogs-container .SectionHeading>h6 {
  font-size: 22px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

.small-blogs .SectionContent {
  border: none !important;
  padding: 0 !important;
}

.small-blogs .SectionContent>div {
  padding: 0px 5px;
}

.small-blogs {
  /* margin-top: 14vh; */
}

.blog-image div {
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(183deg,
      rgba(0, 0, 0, 1) 10%,
      rgba(2, 42, 124, 1) 100%);
}

.blog-image div img {
  height: 385px;
  width: auto;
}

.small-blogs .blog-image img {
  height: 300px;
  width: auto;
}

.blog-image.large div {
  border-radius: 16px;
}

.blog-image.small div {
  border-radius: 8px;
}

.blog-image div img {
  /* scale: 1.5; */
  margin: 0 auto;
}

.blog-box-content.large div.first-padding {
  padding: 35px 15px 35px 35px;
}

.blog-box-content.small>div {
  padding: 15px 0px 15px 0px;
  min-height: 175px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.blogs-margin {
  margin-top: 60px;
  margin-bottom: 60px;
}

.blog-box-content.large h4,
.blog-box-content.small h4 {
  font-size: 18px;
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 0px;
}

.blog-box-content.large h1 {
  font-size: 38px;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  margin-bottom: 0px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.blog-box-content.large h2 {
  font-size: 32px;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  margin-bottom: 0px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.blog-box-content.small h2 {
  font-size: 22px;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  margin-bottom: 0px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.blog-box-content p {
  font-size: 18px;
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-bottom: 0px;
}

.blog-box-content.large a,
.blog-box-content.small a {
  font-size: 17px;
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.blog-box-content a:hover {
  color: #2492d4;
}

.blogs-page-background {
  /* background: whitesmoke; */
}


@media screen and (max-width: 960px) {
  .blogs-margin {
    /* margin: 0 !important; */
  }

  .blog-box-content.large h1 {
    font-size: 22px;
  }

  .blog-image div img {
    /* max-width: 300px !important;
    scale: 1.2; */
    width: 100% !important;
    height: auto !important;
  }

  .blog-box {
    margin-bottom: 20px !important;
  }

  .blog-box.first .blog-image div img {
    height: auto;
    width: 100%;
  }

  .blog-box-content.large h4,
  .blog-box-content.large a,
  .blog-box-content.small a {
    padding: 6px 0px !important;
  }

  .blog-box-content.large div.first-padding {
    padding: 10px 16px !important;
  }

  .blog-box.first .blog-box-content p {
    padding: 0 !important;
  }

  .blog-box-content p {
    padding: 0 !important;
  }



  .Blogs-subs-hero .text-content h1 {
    font-size: 32px !important;
  }
}


/* Contact Us page Start */

.contact-background {
  min-height: fit-content !important;
  /* background-image: linear-gradient(to bottom, #061b47, #061b47); */
  clip-path: none;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(1, 27, 77, 1) 30%,
      rgba(1, 31, 90, 1) 50%,
      rgba(1, 27, 79, 1) 70%,
      rgba(0, 0, 0, 1) 100%);
}

.contact-inner-background div {
  min-height: fit-content;
}

.contact-form-fields>div {}

.SectionsPara-contact h2 {
  font-size: 16px;
  color: #ffffffc5;
  ;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

#contactForm p,
#payNowForm p,
#SubscribeForm p {
  font-size: 17px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.PaynowImage {
  padding: 50px;
}

@media screen and (max-width: 960px) {
  .PaynowImage {
    padding: 10px;
    margin-top: 0px !important;
  }
}

/* #responseMessage{
  opacity: 0;
  transition: 1s;
} */

#contactForm div.err p,
#payNowForm div.err p ,
#SubscribeForm div.err p {
  color: #c80000 !important;
}

.contact-form-fields input,
.contact-form-fields textarea,
.contact-form-fields select  {
  background: 0 0;
  border: none;
  outline: none;
  color: var(--compulsory-light-color) !important;
  width: 100%;
  margin-bottom: 10px;
  padding: 0.75em 0;
  font-size: calc(0.005952381 * 100vw + 11.4285714286px);
  border-bottom: 2px solid #ffffff66;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.contact-form-fields select option {
    padding: 10px;
    font-size: 16px;
    color: #333;
    background-color: white;
}
.contact-form-fields select option:hover {
    color: #fff;
}

.contact-form-fields input::placeholder,
.contact-form-fields textarea::placeholder {
  color: gray !important;
  font-weight: 400;
}

.contact-btn {
  position: relative;
}

.contact-btn:hover {
  background-color: rgb(0, 0, 0);
  box-shadow: rgba(40, 164, 235, 0.68) 0px 0px 10px 2px;
  border: 2px solid rgba(40, 164, 235, 0.882);
}

.btn__text {
  margin-right: 16px;
}

.btn__append {
  position: absolute;
  right: 45px;
  transition: 0.3s;
}

.btn__append svg {
  fill: var(--compulsory-light-color);
  width: 12px;
  height: 12px;
  rotate: 45deg;
  margin: -1px 0px;
  margin-left: 8px;
}

.contact-btn:hover .btn__append {
  right: 40px;
}

.contact-us-btn .btn__append {
  right: 35px;
}

.contact-us-btn:hover .btn__append {
  right: 30px;
}

.contact-btn {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: var(--Primary-color);
  text-align: center;
  max-width: 180px;
  height: 45px;
  border-radius: 50px;
  border: 0px;
  outline: 0px;
  letter-spacing: 0.3px;
  width: 170px;
  cursor: pointer;
  transition: 0.3s;
  border: 2px solid transparent;
  outline: none;
}

.contact-btn:focus {
  outline: none;
  box-shadow: none;
}

.contact-btn div {
  width: fit-content;
  margin: 0 auto;
}

.contact-btn .btn__text {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.911);
  transition: 1s;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  border-radius: 50px;
  font-size: 14px;
}

.contacts__address-row {
  margin-bottom: 30px;
}

.contacts__address-data,
.contacts__address-data a {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 3vw, 24px);
  color: var(--compulsory-light-color);
}

.contacts__address-label {
  color: var(--Primary-color);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(12px, 3vw, 20px);
  font-weight: 600;
  margin-bottom: 12px;
}

.contacts__address {
  border: 1px solid #ffffff1a;
  box-shadow: 0 0 10px #2492d263;
  background-color: #00000060;
  /* background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%); */
  padding: 20px;
  border-radius: 16px;
}

/* Contact Us page End */

@media screen and (max-width: 1600px) and (min-width: 992px) {
  .FirstSectionBanner {
    min-height: 107vh;
  }

  .PageSections {
    min-height: 87vh;
  }

  .services .scroll {
    height: 117vh;
  }

  section.services {
    height: 145vh;
  }
}

/* .Blogs-subs-bg{
    background-color: rgb(0, 0, 0);
    height: 20vh;
} */

.header-bg-blogs {
  background-image: radial-gradient(circle at 110% 100%, #022a7c, #0000 25%),
    radial-gradient(circle at -20% 30%, #022b80, #0000 41%);
  background-color: black;
  height: 90px;
  margin-bottom: 20px;
}

.Blogs-subs-hero,
.Blogs-subs-hero-details {
  min-height: fit-content;
  z-index: 99;
}

.main-content-blogs {
  min-height: fit-content;
  /* z-index: -5; */
}

.Blogs-subs-hero .text-content h1 {
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 800;
}

.Blogs-subs-hero .text-content a {
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  gap: 10px;
}

.Blogs-subs-hero .text-content a p {
  margin: 0;
  display: inline;
}

.Blogs-subs-hero .text-content a span {
  background-color: #42afee;
  display: inline-block;
  overflow: hidden;
  border-radius: 24px;
}

.Blogs-subs-hero .text-content a span img {
  width: 24px;
  height: 24px;
}

.Blogs-subs-hero .img-content {
  /* height: 100%; */
  border-radius: 8px;
  background: rgb(0, 0, 0);
  background: linear-gradient(183deg,
      rgba(0, 0, 0, 1) 10%,
      rgba(2, 42, 124, 1) 100%);
  /* overflow: hidden; */
}

/* .Blogs-subs-hero .img-content img {
  max-width: 370px;
  width: -webkit-fill-available;
  margin: 0 auto;
  scale: 1.5;
} */

.Blogs-subs-hero .img-content img {
  width: auto;
  height: 450px;
  padding: 25px 0px;
}

@media screen and (max-width: 960px) {

  /* .Blogs-subs-hero .img-content img{
    max-width: 300px !important;
    scale: 1.2;
  } */
  .Blogs-subs-hero .img-content img {
    /* height: 230px !important; */
    height: auto;
    width: -webkit-fill-available;
    padding: 10px 0px !important;
  }
}

.Blogs-subs-hero-details {
  border-top: 1px solid #c9d7ff;
  border-bottom: 1px solid #c9d7ff;
}

.Blogs-subs-hero-details .details p,
.Blogs-subs-hero-details .details a {
  color: rgb(73, 73, 73);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
  margin: 0;
}

.Blogs-subs-hero-details .share-btn {
  cursor: pointer;
  background-color: #42afee;
  height: 42px;
  width: 42px;
  border-radius: 30px;
}

.share {
  position: relative;
}

.share.active .share-box {
  display: block;
}

.share-box {
  z-index: 99999;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 4px 5px 16px rgba(64, 68, 77, 0.12);
  position: absolute;
  right: 50px;
  top: 0;
  display: none;
  padding: 10px 5px;
}

.share-box a {
  display: block;
  color: #001549;
  text-decoration: none;
  padding: 4px 12px;
  width: 200px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;
}

.share-box a p {
  margin: 2px 5px;
  margin-top: 0px;
}

.share-box a svg {
  width: 24px;
  height: 24px;
}

.tbc-btn {
  padding: 16px 24px;
  margin: 0 auto;
  color: rgb(73, 73, 73);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #195afe;
  word-break: break-word;
  overflow-wrap: break-word;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 4px 5px 16px rgba(64, 68, 77, 0.12);
  z-index: 2;
  position: relative;
}

.tbc-btn::after {
  display: flex;
  width: 8px;
  height: auto;
  content: "";
  background: rgba(0, 0, 0, 0) url(../Media/Blogs/Sub/chevron-icon-right-blue.svg) no-repeat center center / contain;
  transition: 0.2s;
}

.tbc.active .tbc-btn::after {
  transform: rotate(90deg);
}

.tbc-list {
  min-height: 140px;
  max-height: 70vh;
  padding: 10px 24px;
  overflow-y: auto;
  padding-left: 10px;
  padding-bottom: 80px;
  /* z-index: 5; */
  position: relative;
  display: none;
}

.tbc.active .tbc-list {
  display: block;
}

.tbc-list a {
  position: relative;
  display: flex;
  padding: 10px 16px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: rgb(39, 39, 39);
  text-decoration: none;
  transition: 0.3s;
}

.tbc-list a.active {
  color: #00aeef !important;
}

.tbc-list a:hover {
  color: rgb(87, 87, 87);
}

@media screen and (min-width: 960px) {
  .tbc {
    position: sticky;
    top: 145px;
    width: 315px;
  }
}

.tbc::after {
  position: absolute;
  right: 0px;
  bottom: -5px;
  left: 0;
  display: block;
  height: 110px;
  content: "";
  background: linear-gradient(0deg,
      #fff 12.27%,
      rgba(255, 255, 255, 0) 126.96%);
  border-radius: 0 0 8px 8px;
}

.tbc-content img {
  width: -webkit-fill-available;
}

.tbc-content p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18px;
}

.tbc-content a {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #00aeef;
}

.tbc-content h1,
.tbc-content h2,
.tbc-content h3,
.tbc-content h4,
.tbc-content h5,
.tbc-content h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.tbc-content ul,
.tbc-content ol {
  padding-left: 26px;
}

.tbc-content img {
  transition: 1s;
}

.tbc-content img:hover {
  scale: 1.1;
}

.image-wrapper {
  overflow: hidden;
}

/* Profolio */

.Profolio-page-heading-background {
  height: fit-content;
  overflow: hidden;
  background: rgb(1, 31, 90);
  background: linear-gradient(163deg,
      rgba(1, 31, 90, 1) 0%,
      rgba(0, 0, 0, 1) 53%);
}

.Profolio-page-heading {
  min-height: 75vh;
}

.profolio-btns div {
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 14px 25px;
  margin: 0px 10px;
  font-family: "Roboto", sans-serif;
  border-radius: 6px;
  text-transform: capitalize;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 5px 15px 0px rgb(94, 94, 94, 0.15);
  box-shadow: 0px 5px 15px 0px rgb(94, 94, 94, 0.15);
  transition: 0.5s;
  border: 1px solid #ffffff00;
}

.profolio-btns div.active,
.profolio-btns div:hover {
  border: 1px solid #ffffff1a;
  box-shadow: 0 0 10px #2492d263;
  background-color: #000;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%);
  color: #fff;
}

.profolio-btns div p {
  margin: 0;
}

div:has(.profolio-box) {
  overflow: hidden;
}

/* Ensure .profolio-box elements are targeted within .profolio-box-wrapper */
.profolio-box-wrapper .profolio-box {
  border-radius: 8px;
  overflow: hidden;
}

.profolio-box-wrapper .col-12:nth-of-type(even) .profolio-box {
  /* background-color: #000;
  background-image: radial-gradient(circle at 0 0, #3860fb63, #0000 90%); */
}

.profolio-box-wrapper .col-12:nth-of-type(odd) .profolio-box {
  /* background-color: #111; */
  /* Example color for odd elements */
  /* background-image: radial-gradient(circle at 0 0,
      #0000,
      #3860fb63 90%); */
  /* Example gradient for odd elements */
}

.profolio-box div:has(img) {
  margin: 0 auto;
  width: fit-content;
}

.profolio-box img {
  /* max-height: 400px;
  height: 85vw; */
  object-fit: cover;
  width: 100%;
}

.profolio-box .title-box {
  overflow: hidden;
  font-size: 24px;
  position: absolute;
  width: 90%;
  left: 5%;
  margin: 0 auto;
  border-radius: 5px;
  bottom: -85px;
  opacity: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  transition: bottom 0.3s ease-out, opacity 0.8s ease-out 0.2s;
  height: 68px;
  box-shadow: 0px 5px 5px #00000063;
}

@media screen and (max-width: 768px) {
  .title-box {
    bottom: 10px !important;
    opacity: 1 !important;
  }

  .profolio-box .title-box h5,
  .profolio-box .title-box h3 {
    left: 12px !important;
    opacity: 1 !important;
  }

  .profolio-box .title-box div:has(svg) {
    right: 0 !important;
  }

  .profolio-box .title-box h3 {
    font-size: 16px !important;
    margin: -2px 0px !important;
  }

  .profolio-box .title-box h5 {
    font-size: 12px !important;
    margin: 5px 0px !important;
  }

  .profolio-box .title-box svg {
    width: 20px !important;
  }

  .profolio-box .title-box {
    height: 58px !important;
  }
}

/* .profolio-box:hover .title-box {
  bottom: 10px;
  opacity: 1;
} */

.profolio-box .title-box {
  bottom: 10px;
  opacity: 1;
}

.profolio-box .title-box h5 {
  color: #1b1b1b;
  font-size: 15px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  margin: 5px 0px;
  left: -65px;
}

.profolio-box .title-box h3 {
  color: #00aeef;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 5px 0px;
  left: 65px;
}

.profolio-box .title-box .text-title {
  padding: 8px 14px;
}

.profolio-box .title-box div:has(svg) {
  background-color: #00aeef;
  border-radius: 0px 5px 5px 0px;
}

.profolio-box .title-box svg {
  fill: rgb(255, 255, 255);
  width: 30px;
  margin: 0 auto;
  rotate: 45deg;
}

.profolio-box .title-box div:has(h5) {
  height: 22px;
}

.profolio-box .title-box div:has(h3) {
  height: 26px;
}

.profolio-box .title-box div:has(svg) {
  position: absolute;
  max-width: 75px;
  width: 13vw;
  right: -76px;
  height: 100%;
  transition: 0.8s;
}

.profolio-box .title-box h5,
.profolio-box .title-box h3 {
  position: absolute;
  opacity: 0;
  transition: 0.8s;
}

/* .profolio-box:hover .title-box h5,
.profolio-box:hover .title-box h3 {
  left: 12px;
  opacity: 1;
} */


.profolio-box .title-box h5,
.profolio-box .title-box h3 {
  left: 12px;
  opacity: 1;
}


/* .profolio-box:hover .title-box div:has(svg) {
  right: 0;
} */

.profolio-box .title-box div:has(svg) {
  right: 0;
}


.profolio-box-wrapper>div.show {
  position: relative !important;
  transform: translate(0, 0);
  opacity: 1;
  transform: translate(0%, 0%) !important;
  z-index: 999 !important;
}

.profolio-box-wrapper>div .profolio-box {
  scale: 0.5;
  transition: 0.9s;
  height: 26rem;
}

@media screen and (max-width: 992px) {
  .profolio-box-wrapper>div .profolio-box {
    height: 20rem;
  }
}

.profolio-box-wrapper>div.show .profolio-box {
  scale: 1;
  /* background-color: #001549; */
}


.profolio-box-wrapper>div.show .profolio-box .bg{
    background-size: cover !important;
    height: 100%;
    width: 100%;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.profolio-box-wrapper>div.show .profolio-box:hover .bg{
    opacity: 1;
}

.profolio-box-wrapper>div {
  position: absolute;
  opacity: 0;
  transition: 0.5s;
  z-index: 0;
}

.profolio-box-wrapper .col-12:nth-of-type(even) {
  transform: translate(-98%, 0%);
}

.profolio-box-wrapper .col-12:nth-of-type(odd) {
  transform: translate(-98%, 50%);
}

.Profolio-sub-img-sec {
  height: 100%;
  background: rgb(2, 42, 124);
  background: linear-gradient(183deg, rgb(5 32 88) 0%, rgba(0, 0, 0, 1) 100%);
  border-radius: 16px;
}

.Profolio-sub-img-sec {
  min-height: fit-content;
}

.Profolio-sub-img-sec img {
  max-height: 400px;
  height: 60vw;
  margin-left: 9vw;
}

.portfolios-details-desc,
.portfolio-details-info {
  min-height: fit-content;
}

.portfolios-details-desc h3,
.portfolios-details-desc h4 {
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.portfolio-details-info {
  row-gap: 25px;
  column-gap: 25px;
}

.portfolios-details-desc p {
  font-size: 18px;
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

.portfolios-details-desc ol,
.portfolios-details-desc ul {
  font-size: 18px;
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  padding-left: 20px;
}

.portfolio-details-info h4 {
  font-size: 20px;
  background: linear-gradient(to right, #061b47 0%, #42afee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

.portfolio-details-info span {
  font-size: 18px;
  color: #061b47;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

#porfolio_content img {
  width: -webkit-fill-available;
  width: -webkit-fill-available;
  max-width: 900px;
  margin: 20px auto;
  display: block;
}

.default-btn {
  padding: 12px;
  background-color: black;
  border-radius: 5px;
  background-image: radial-gradient(circle at 110% 100%, #022a7c, #0000 25%),
    radial-gradient(circle at -20% 30%, #022b80, #0000 41%);
}

.default-btn {
  font-size: 16px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  text-decoration: none;
}

.default-btn:hover {
  color: #00aeef;
  text-decoration: none;
}

.single-info-box .SectionIcons svg {
  fill: #000;
  width: 30px;
}

/* get started form START */

.get-started-background {
  min-height: 100% !important;
  /* background-image: linear-gradient(to bottom, #061b47, #061b47); */
  clip-path: none !important;
  /* background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(1, 27, 77, 1) 30%,
    rgba(1, 31, 90, 1) 50%,
    rgba(1, 27, 79, 1) 70%,
    rgba(0, 0, 0, 1) 100%
  ); */
  position: absolute;
  z-index: 9999999999999;
  top: 0;
  overflow: hidden;
}

@media screen and (min-width: 992px) {
  .get-started-pagesection {
    margin-left: 12vw;
    margin-top: -10vh;
  }
}

.get-started-btn {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: var(--Primary-color);
  width: 75px !important;
  height: 75px;
  border-radius: 50px;
  outline: 0px;
  width: 170px;
  cursor: pointer;
  transition: 0.3s;
  border: 2px solid transparent;
  outline: none;
}

.get-started-btn:focus {
  outline: none;
  box-shadow: none;
}

.get-started-btn div {
  margin: 0 auto;
}

.get-started-btn svg {
  fill: #fff;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.get-started-btn:hover {
  box-shadow: rgba(40, 164, 235, 0.68) 0px 0px 10px 2px;
  border: 2px solid rgba(40, 164, 235, 0.882);
}

.get-started-close {
  position: absolute;
  right: 4vw;
  top: 30px;
  cursor: pointer;
}

.get-started-close svg {
  width: 44px;
  height: 44px;
  fill: #00aeef;
}

/* get started form start END*/

.banner {
  padding-top: 100px !important;
}

.banner-animation {
  position: absolute;
  top: 50%;
  /* position the top  edge of the element at the middle of the parent */
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
}

.bannerImage {
  max-width: 700px;
  max-height: 70vh;
  width: -webkit-fill-available;
}

.SectionsSubHeading-about h2 {
  font-size: 20px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.sectionPara-about p {
  color: #ffffffc5;
  ;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  .about-main-heading>h1 {
    margin-top: -35px;
  }

  .about-svg {
    margin-left: -70px;
  }
}


.seprate-get-started-bg {
  background: rgb(2, 42, 124);
  background: linear-gradient(183deg, rgba(2, 42, 124, 1) 0%, rgba(0, 0, 0, 1) 77%);
}
.PaymentSucessModal{
  margin:0; 
  padding:0; 
  height:80vh; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  width:100%;
}

.PaymentSucessModal>div{
  background:#fff; 
  padding:30px; 
  border:1px solid #ccc;
  border-radius:10px; 
  text-align:center;
  min-width: 500px;
}
@media screen and (max-width: 768px) {
  .PaymentSuccesssection{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .PaymentSucessModal>div{
    padding:10px; 
    min-width: unset;
  }
  .PaymentSucessModal{
    height:65vh; 
    display: unset;
    margin: 10px;
  }
  .details p {
    margin: 8px 0;
    font-size: 12px;
  }
  .PaymentSucessModal>div>h2 {
    font-size: 20px;
}
.PaymentSucessModal>div>p {
    font-size: 12px;
}
}

.PaymentSucessModal>div>img {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
}
.PaymentSucessModal>div>h2{
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 30px;
  color:rgb(2, 42, 124);
}
.PaymentSucessModal>div>p{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.details {
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        text-align: left;
        margin-top: 20px;
    }
    .details p {
        margin: 8px 0;
        font-size: 16px;
    }
    .details span {
        float: right;
        font-weight: bold;
        color: #333;
    }