.hero-bg {
    height: max-content!important;
    margin-bottom: -245px!important;
}
.h1 {
    font-size: 25px;
    margin-bottom: 20px;
    background-color: #2474ff;
    color: #fff;
    font-weight: 400;
    padding: 12px 28px;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    --dash-length: 8px;
    --dash-thickness: 4px;
    --dash-color: #fff;
    --dash-anim-speed: 1s;
}

.border-dashed-anim::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(90deg, var(--dash-color) 0 50%, transparent 50% 100%) 0 0 /
            var(--dash-length) var(--dash-thickness) repeat-x,  /* TOP */
        linear-gradient(180deg, var(--dash-color) 0 50%, transparent 50% 100%) 100% 0 /
            var(--dash-thickness) var(--dash-length) repeat-y,  /* RIGHT */
        linear-gradient(270deg, var(--dash-color) 0 50%, transparent 50% 100%) 0 100% /
            var(--dash-length) var(--dash-thickness) repeat-x,  /* BOTTOM */
        linear-gradient(0deg, var(--dash-color) 0 50%, transparent 50% 100%) 0 0 /
            var(--dash-thickness) var(--dash-length) repeat-y;

    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-origin: border-box;
    background-clip: border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: borderDance var(--dash-anim-speed) linear infinite;
}

@keyframes borderDance {
    0% {
        background-position:
            0 0, 
            100% 0,
            0 100%,
            0 0;
    }
    100% {
        background-position:
            var(--dash-length) 0,
            100% var(--dash-length),
             calc(var(--dash-length) * -1) 100%,
            0 calc(var(--dash-length) * -1);
    }
}


.x-1 {
  position: absolute;
}

.intro-area {
  margin-top: -170px;
  padding-top: 180px !important;
  overflow-x: clip;
  padding-bottom: 50px;
  margin-bottom: 260px;
}
.menu a:hover {
  color: #71d9ff;
}

.text-area {
  position: relative;
  z-index: 1;
  padding-bottom: 11.2em;
}

.x-1,
.x-2 {
  width: 100%;
  height: 75px;
}

.text-transparent-anim {
  margin: 0;
  -webkit-text-stroke: 1px rgb(255, 255, 255);
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(9, 9, 121, 0) 50%, #fff 50%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  animation: 25s infinite gradientAnimation;
}
@keyframes gradientAnimation {
  0%,
  100% {
    background-position: 0 50%;
  }

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

.h-1 {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    'Noto Sans',
    'Liberation Sans',
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
  line-height: 0.6em;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 15px;
  color: #fff;
}

.h-2,
.h-3 {
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    'Noto Sans',
    'Liberation Sans',
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
  font-weight: 700;
  letter-spacing: 15px;
  color: #fff;
}

.h-2 {
  line-height: 1.1em;
  font-size: 2.2em;
}

.h-3 {
  line-height: 0.7em;
  font-size: 3.6em;
}

.x-1 {
  background-color: #4e67f3;
  left: -5%;
  transform: rotate(3deg);
  transform-origin: center;
  z-index: 1;
}

.person-image,
.person-image-shadow {
  position: absolute;
  left: 50%;
  transform: translate(-48%, -50%);
  z-index: 2;
}
.person-image img{
    transform:scale(.9);
    height:auto;
    width:auto;
}

.person-image {
  top: 70%;
}

.person-image-shadow {
  top: 125%;
}

.intro-bg-image,
.person-image-light {
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  position: absolute;
}
.person-image-light img{
  height:auto;
  width:auto;  
}
.person-image-light {
  top: 50%;
}

.intro-bg-image {
  top: 50%;
  opacity: 0.2;
}

.one-number-image {
  position: absolute;
  left: -10%;
  top: 60%;
  transform: rotate(12deg) translate(-50%, -50%);
  z-index: 2;
}

.one-number-image img {
  position: relative;
  width: 45%;
  height: auto;
}

.arrow-right-image {
  position: absolute;
  left: 80%;
  top: 25%;
  width: 22%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.arrow-right-image img {
  position: relative;
  width: 80%;
  left: 100%;
  height:auto;
}

.x-2 {
  position: absolute;
  background-color: #3a82f0;
  transform-origin: center;
  z-index: 3;
}

.x-text {
  color: #fff;
  font-size: 22px;
}
.click-btn {
    position:relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 50px;
    border:2px solid #fff;
    font-weight: 400;
    margin-top: -1rem;
    color: #0b15d3;
    padding: 13px 25px;
    margin-left: 0;
    width: 100%;
    animation: pointer-text-anim 7s 
    ease-in-out infinite;
    transition:all .3s;
}
.person-contact{
    position:absolute;
    bottom:21%;
    left: 50%;
    z-index: 3;
    transform: translate(-70%, -50%);
    width:20%;
}
.click-btn .btn-scale {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
    font-size:19px;
}
.click-btn:hover{
    color: #4696FF;
    background-color: #fff;
    border:2px solid #4696FF;
}
.pointer-container {
    position: absolute;
    top: -40%;
    left: -5%;
}

.icons-area{
     height: 300px;
     margin-bottom: -270px;
}

.anim-9 {
  position: absolute;
  top: 2%;
  left: 23%;
  font-size: 22px;
  color: #fff;
  transform: rotate(0deg);
}

.anim-9 {
  --x1: 5px;
  --y1: -5px;
  --r1: 2deg;
  --x2: 0px;
  --y2: 5px;
  --r2: -2deg;
  --x3: -5px;
  --y3: -2px;
  --r3: 1deg;
  animation: float 6s ease-in-out infinite;
}


.anim-10 {
  position: absolute;
  top: 11%;
  right: 13%;
  font-size: 22px;
  color: #fff;
  transform: rotate(0deg);
}

.anim-10 {
  --x1: 5px;
  --y1: -5px;
  --r1: 2deg;
  --x2: 0px;
  --y2: 5px;
  --r2: -2deg;
  --x3: -5px;
  --y3: -2px;
  --r3: 1deg;
  animation: float 6s ease-in-out .3s infinite;
}

.anim-11 {
  position: absolute;
  bottom: -29%;
  left: 9%;
  font-size: 22px;
  color: #fff;
  transform: rotate(0deg);
}

.anim-11{
  --x1: 5px;
  --y1: -5px;
  --r1: 2deg;
  --x2: 0px;
  --y2: 5px;
  --r2: -2deg;
  --x3: -5px;
  --y3: -2px;
  --r3: 1deg;
  animation: float 6s ease-in-out .5s infinite;
}

.anim-12 {
  position: absolute;
  bottom: -23%;
  right: 5%;
  font-size: 22px;
  color: #fff;
  transform: rotate(0deg);
}

.anim-12 {
  --x1: 5px;
  --y1: -5px;
  --r1: 2deg;
  --x2: 0px;
  --y2: 5px;
  --r2: -2deg;
  --x3: -5px;
  --y3: -2px;
  --r3: 1deg;
  animation: float 6s ease-in-out 1s infinite;
}

@media (max-width: 991px) {
    .about-section{
        margin-top:290px;
    }
    .h1 {
        font-size: 15px;
        font-weight:300;
        margin-bottom: 10px;
        
    }
    .anim-9 {
      top: -8%;
      left: 8%;
    }
    .anim-10 {
      top: -8%;
      right: 8%;
    }
    .anim-11 {
      bottom: 15%;
      left: 5%;
    }
    .anim-12 {
      bottom: 8%;
      right: 5%;
    }
    .icons-area {
        height: 250px;
    }
    .circle-icon{
        width: 35px;
        height: 35px;
    }
    .person-image-light {
        top: 87%;
    }
}

@media (max-width: 600px) {
  .h-1,
  .h-2,
  .h-3 {
    letter-spacing: 0;
  }

  .x-1,
  .x-2 {
    height: 55px;
    bottom: -13%;
  }

  .x-text {
    color: #fff;
  }

  .h-1 {
    line-height: 1em;
    font-size: 1.7em;/*1.5*/
    font-weight: 400;
  }

  .h-2 {
    line-height: 1.2em;
    font-size: 2.3em;/*1.9*/
  }

  .h-3 {
    line-height: 1em;
    font-size: 3.3em;/*2.5*/
  }

  .one-number-image {
    left: -10%;
    top: 140%;
  }

  .one-number-image img {
    width: 15%;
  }
    .arrow-right-image {
      top: 37%;
    }
  .person-image {
    position: absolute;
    transform: scale(0.35) translate(-139%, -118%);
    z-index: 2;
  }

  .x-1 {
    transform: rotate(5deg);
  }


  .x-text {
    font-size: 15px;
    font-weight:300;
  }

  .text-area {
    padding-bottom: 0;
  }

  .intro-area {
    padding-top: 50px;
  }

  .padding-area {
    padding-top: 150px;
  }

  .marquee-text-track {
    padding-left: 0 !important;
    gap: .8rem !important;
  }
  .intro-area {
    margin-top: -115px;
    padding-top: 110px !important;
    padding-bottom: 80px;
    margin-bottom: 120px;
  }
  .about-section{
        margin-top:0px;
    }
    .hero-bg {
        height: max-content!important;
        margin-bottom: -90px!important;
    }
    .pointer-container{
        transform: scale(1.5);
    }
    .click-btn{
        border:2px solid transparent;
        background-color:#fff;
        color:#0b15d3;
        padding: 8px 25px;
    }
    
  .click-btn .btn-scale {
        font-size:50px;
    }
    .click-btn .btn-scale i{
        font-size:50px;
    }
    .person-contact {
        width:40%;
        transform: translate(-62%, -20%)
    }
}

.marquee-text-track {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 5rem;
  gap: 5rem;
  width: max-content;
  animation: marquee-move-text 70s linear infinite var(--anim-to);
}

@keyframes marquee-move-text {
  to {
    transform: translateX(-50%);
  }
}
@media (min-width: 600px) {
  .h-1 {
    line-height: 0.8em;
    font-size: 3em;
    font-weight: 400;
  }

  .h-2 {
    line-height: 1.1em;
    font-size: 4.5em;
  }

  .h-3 {
    line-height: 0.8em;
    font-size: 8em;
  }
}