.background-wrapper {
  width: 100%;
  padding: 5rem 0;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.8) 75%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url("../assets/about.png ");
  background-size: auto; /* Ensure background image covers the entire area */
  background-attachment: fixed;
  background-repeat: round; /* Prevent repeating the image */
  position: relative;
  animation: moveBackground 10s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.About1 {
  width: 100%;
  height: auto;
  padding: 5rem 0;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.8) 75%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url("../assets/bgaboutpg.jpeg");
  background-size: auto; /* Ensure background image covers the entire area */
  background-attachment: fixed;
  background-repeat: round; /* Prevent repeating the image */
  position: relative;
  animation: moveBackground 10s ease-in-out infinite;
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}
/* Keyframes for background movement */
@keyframes moveBackground {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 10px -10%;
  } /* Move the background image 100% width to the left */
}
.About1 h1,
.About1 .h1 {
  font-family: "DINPro-Medium";
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.8rem;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  background-clip: text;
}
.About1 h2,
.About1 .h2 {
  max-width: 20rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .About1 h1,
  .About1 .h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
}

.empow {
  color: #fff;
  font-family: "DINPro-Medium";
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-top: 5rem;
}
.security {
  color: #59e677;
  font-family: "DINPro-Heavy";
  font-size: 78.508px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.servilog {
  width: 90%;
  display: block;
  margin: auto;
}

.shieldanimation {
  position: relative;
  width: fit-content;
  margin: auto;
}
.borders {
  animation: rotate 8s linear infinite;
  position: relative;
  width: 100%;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.shield {
  animation: shield_zoom 8s infinite ease-in-out;
  position: absolute;
  left: 27%;
  top: 24%;
  width: 42%;
}
@keyframes shield_zoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.inner-element {
  position: absolute;
  left: 0px;
  top: 20px;
  width: 100%;
  animation: fadeInOut 8s ease-in-out infinite alternate;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.2; /* Fade out */
  }
  50% {
    opacity: 1; /* Fade in */
  }
  100% {
    opacity: 0.2; /* Fade out */
  }
}

.image {
  position: absolute;
  left: 29%;
  top: 20px;
  width: 38%;
}

#image1 {
  animation: moveRight 8s linear infinite;
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translate3d(-60px, 30px, 0);
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#image2 {
  animation: moveleft 8s linear infinite;
}
@keyframes moveleft {
  0% {
    transform: translate3d(200px, 100px, 0);
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translate3d(200px, 100px, 0);
    opacity: 0;
  }
}

.image1 {
  position: absolute;
  top: 24%;
  left: 23%;
  width: 49%;
}
#image3 {
  animation: movetop 8s linear infinite;
}
@keyframes movetop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translate3d(0, -150px, 0);
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#image4 {
  animation: movebleft 8s linear infinite;
}
@keyframes movebleft {
  0% {
    transform: translate3d(-80px, 200px, 0);
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translate3d(-80px, 200px, 0);
    opacity: 0;
  }
}

.sidedots {
  position: absolute;
  top: 33%;
  left: 0%;
  width: 4%;
}
#sidedot1 {
  animation: moveboot 8s linear infinite;
}
@keyframes moveboot {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translate3d(120px, 150px, 0);
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#sidedot2 {
  animation: moveside 8s linear infinite;
}
@keyframes moveside {
  0% {
    transform: translate3d(350px, 0px, 0);
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translate3d(350px, 0px, 0);
    opacity: 0;
  }
}

.circle {
  position: absolute;
  top: 37%;
  left: 7%;
  animation: rotate 2s linear infinite;
  transform: rotate(720deg);
  width: 5%;
}
.smallele {
  position: absolute;
  top: 18%;
  left: 0%;
  width: 29%;
}
#smallele1 {
  animation: tomap 8s linear infinite;
}
@keyframes tomap {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translate3d(150px, -100px, 0);
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#smallele2 {
  animation: toshield 8s linear infinite;
}
@keyframes toshield {
  0% {
    transform: translate3d(250px, 130px, 0);
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translate3d(250px, 130px, 0);
    opacity: 0;
  }
}

.mobile {
  position: absolute;
  top: 64%;
  left: 8%;
  width: 8%;
  animation: fadeInOut 5s ease-in-out infinite alternate;
}
.circle2 {
  position: absolute;
  top: 57%;
  left: 15%;
  width: 5%;
  animation: rotate 2s linear infinite;
  transform: rotate(720deg);
}
.downarrowanim {
  position: absolute;
  top: 82%;
  left: 42%;
  width: 3%;
  animation: fadeInOut 5s ease-in-out infinite alternate;
}
.cloud {
  position: absolute;
  top: 36%;
  left: 79%;
  width: 14%;
  animation: fadeInOut 5s ease-in-out infinite alternate;
}
.files {
  position: absolute;
  top: 91%;
  left: 50%;
  width: 9%;
  animation: fadeInOut 5s ease-in-out infinite alternate;
}

.linescir {
  position: absolute;
  top: 52%;
  left: 6%;
  width: 23%;
}

.mailcir {
  position: absolute;
  top: 81%;
  left: 26%;
  width: 18%;
}

.rightlines {
  position: absolute;
  top: 64%;
  left: 68%;
  width: 26%;
}

.rightsec {
  position: absolute;
  top: 16%;
  left: 70%;
  width: 21%;
}

.human {
  position: absolute;
  top: 55%;
  left: 76%;
  width: 24%;
}

.graph {
  position: absolute;
  top: 75%;
  left: 50%;
  width: 29%;
}

#sidedot3 {
  animation: moveloo 8s linear infinite;
}
@keyframes moveloo {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translate3d(120px, 150px, 0);
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#sidedot4 {
  animation: movedd 8s linear infinite;
}
@keyframes movedd {
  0% {
    transform: translate3d(200px, -90px, 0);
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    transform: translate3d(200px, -90px, 0);
    opacity: 0;
  }
}

.servi {
  color: #59e677;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: "DINPro-medium";
  padding-top: 20px;
  padding-bottom: 20px;
  margin-left: 20px;
}
.opan {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "DINPro-medium";
  margin-top: 10px;
  width: 98%;
}
.insvc {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 63%;
}
.insvc1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 63%;
  margin-top: 22px;
}
.insvc2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 69%;
  margin-top: 27px;
}
.insvc3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 63%;
  margin-top: 25px;
}
.acc {
  border-top: 2px solid #59e677;
  width: 100%;
}
.acc1 {
  border-top: 2px solid #59e677;
  border-bottom: 2px solid #59e677;
  width: 100%;
}

.downarrow {
  margin-top: 47px;
}

.cover {
  background-color: #000;
  border-radius: 15px;
  width: 100%;
  padding: 30px;
  height: 120px;
}

.selebut,
.selebut1,
.selebut2 {
  font-family: "DINPro-Medium";
  font-size: 22.953px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background-color: #000;
  color: white;
  float: left;
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to right, #59e677, #0ff) 100% 1;
  border-bottom: 0;
  outline: none;
  cursor: pointer;
  padding: 14px 0px 14px 60px;
  width: 22%;
  margin: 0 10px;
  text-align: left;
  position: relative;
}

.selebut:hover,
.selebut1:hover,
.selebut2:hover {
  color: #59e677;
}

.selebut.active,
.selebut1.active,
.selebut2.active {
  color: #59e677;
}

/* Style the tab content */
.contents,
.contents1,
.contents2 {
  color: black;
  display: none;
  text-align: left;
}

.consultingimg {
  display: block;
  width: 100%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 0% 100%);
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  aspect-ratio: 3/2;
}
.consultingimgg {
  display: block;
  width: 100%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 0% 100%);
  clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);

  aspect-ratio: 3/2;
}
.consulttitle {
  color: #59e677;
  font-family: "DINPro-Medium";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.discpt {
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "DINPro-Medium";
  text-align: justify;
}

.consulttitle1 {
  color: #59e677;
  font-family: "DINPro-Medium";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: right;
}
.discpt1 {
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  font-family: "DINPro-Medium";
  text-align: justify;
}
.numm {
  position: absolute;
  color: inherit;
  font-family: "DINPro-Medium";
  font-size: 30.712px;
  font-weight: 600;
  line-height: normal;
  border: 1px solid #59e677;
  border-radius: 50%;
  padding: 10px;
  margin: -10px;
  left: 10px;
}

.csp {
  text-align: center;
  font-family: "DINPro-Medium";
  font-weight: 500;
  color: #fff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}
@media (max-width: 734px) {
  .csp {
    font-size: 12.516px;
  }
}
.cspnum {
  text-align: center;
  font-family: "DINPro-Heavy";
  font-weight: 500;
  color: #59e677;
  font-size: 85.426px;
  letter-spacing: 0;
  line-height: normal;
  animation: countUp 2s ease-in-out;
  margin-bottom: 0;
}
@media (max-width: 734px) {
  .cspnum {
    font-size: 44.551px;
  }
}

.numinser {
  position: relative;
  width: 100%;
  height: auto;
}
@media (max-width: 1000px) {
  .numinser {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.8) 75%,
        rgba(0, 0, 0, 0.8) 100%
      ),
      url("../assets/numincrease.jpeg");
    background-position: center;
    background-repeat: repeat;
    background-attachment: local;
    background-size: cover;
  }
}
.mobtit {
  color: #59e677;
  text-align: center;
  font-family: "DINPro-SemiBold";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  margin: 20px 0;
}
.mob {
  display: block;
}
.mobimg {
  height: 63px;
  display: block;
  margin: auto;
}

@media only screen and (max-width: 767px) {
  .About1 {
    padding: 2rem 0;
  }
  .empow {
    font-size: 12px;
  }
  .security {
    font-size: 24px;
  }
  .discpt,
  .discpt1 {
    font-size: 10px;
    margin-top: 20px !important;
  }
  .consulttitle,
  .consulttitle1 {
    font-size: 15px;
  }
  .cover {
    display: flow-root;
    height: auto;
    padding: 20px;
  }
  .selebut,
  .selebut1,
  .selebut2 {
    font-size: 10px;
    padding: 9px 0px 9px 30px;
    margin: 7px;
    width: 43%;
  }
  .numm {
    font-size: 15px;
    padding: 4px;
    margin-top: -6px;
  }
  .acc,
  .acc1 {
    display: none;
  }
  .home-section {
    padding: 2rem 0;
  }
  .consultingimg,
  .consultingimgg {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .empow {
    font-size: 20px;
  }
  .security {
    font-size: 32px;
  }
  .discpt,
  .discpt1 {
    font-size: 12px;
    margin-top: 15px !important;
  }
  .consulttitle,
  .consulttitle1 {
    font-size: 20px;
  }
  .cover {
    height: 75px;
    padding: 20px;
  }
  .selebut,
  .selebut1,
  .selebut2 {
    font-size: 10px;
    padding: 9px 0px 9px 30px;
  }
  .numm {
    font-size: 15px;
    padding: 4px;
    margin-top: -6px;
  }
  .mob {
    display: none;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .mob {
    display: none;
  }
  .selebut,
  .selebut1,
  .selebut2 {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1440px) and (max-width: 1639px) {
  .mob {
    display: none;
  }
}
@media only screen and (min-width: 1640px) {
  .mob {
    display: none;
  }
  .discpt {
    font-size: 26px;
  }
  .consulttitle {
    font-size: 34px;
  }
}

.w3-animate-opacity {
  animation: opac 2s !important;
}
.w3-animate-right {
  animation: animateright 1s !important;
}
.w3-animate-left {
  animation: animateleft 1s !important;
}