/* For best practice, move CSS below to an external CSS file. */
@keyframes fadeinall {
  0% {
    opacity: 1;
  }
  97% {
    opacity: 0;
  }
  98% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  99% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
#fadein {
  opacity: 1;
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  background-color: #fff;
  z-index: 999;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation: fadeinall 1s normal both;
  animation: fadeinall 1s normal both;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
/* For best practice, move CSS below to an external CSS file. */
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#loader-wrapper {
  background-color: #ffffff;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
}
.loader {
  width: 40px;
  height: 40px;
  border: 5px solid #000000;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin-top: calc(50vh - 20px);
  display: inline-block;
  box-sizing: border-box;
  -webkit-animation: rotation 1s linear infinite;
  animation: rotation 1s linear infinite;
}
.serviceCard {
  cursor: pointer;
  padding: 18px;
  border: 1px solid #ffffff00;
  /* transition: transform 0.6s linear; */
  transition: 0.5s;
}
/* .serviceCard img {
  transition: 0.6s !important;
} */
/* .serviceCard:hover img {
  transform: rotate(4deg);
} */
/* .serviceCard:hover {
  transition: opacity 1s ease 0s;
  border: 1px solid #ff4444;
  border-radius: 6px;
  box-shadow: 8px 8px 10px 0px #eaeaea;
  background-color: #ff44441a;
} */
.heroBg {
  background: linear-gradient(rgb(255 255 255 / 52%), rgba(255, 255, 255, 0.5)),
    url(../imgs/bg.png) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.heroSection {
  /* background-color: hsla(0, 100%, 50%, 1) !important;
  background-image: radial-gradient(
      at 40% 20%,
      hsla(28, 100%, 74%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%) !important; */
  /* margin-top: 81px !important; */
  /* margin: 40px; */
  /* height: calc(100vh - 161px) !important; */
  /* border-radius: 50px; */
  background: url(./../imgs/bg.png) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.discoverBtn {
  border-radius: 41px !important;
  padding: 12px 70px !important;
  background: #05060f !important;
}
.blurSec {
  position: absolute;
  width: 100%;
  height: 258px;
  left: 0px;
  top: calc(100vh - 180px);
  background: linear-gradient(
    360deg,
    #ffffff 32.26%,
    rgba(255, 255, 255, 0) 79.75%
  );
  mix-blend-mode: normal;
}
a.ourWorksBtn {
  padding: 12px 70px !important;
  color: #2c2243;
  display: inline-block;
  font-weight: 500;
}
section.about_developer {
  padding-top: 200px;
}
.item_pro.serviceCard.aos-init.aos-animate {
  border-radius: 1rem;
  border: 0.5vmin solid #05060f;
  box-shadow: 0.4rem 0.4rem #05060f;
  min-height: 360px;
  padding: 50px 25px;
  background-color: rgb(255, 255, 255);
  background-image: radial-gradient(
      at 80% 100%,
      hsla(266, 100%, 71%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 0% 0%, hsla(325, 100%, 82%, 1) 0px, transparent 50%);
}
div#navbarSupportedContent {
  justify-content: flex-end;
}
.obj1 {
  width: 140px;
  position: absolute;
  top: 70vh;
  z-index: 9;
  right: 150px;
  animation: rotation 90s infinite linear;
}
.obj2 {
  width: 100px;
  position: absolute;
  top: 20vh;
  z-index: 9;
  left: 150px;
  animation: rotation 90s infinite reverse;
}
.obj3 {
  width: 80px;
  position: absolute;
  top: 35vh;
  z-index: 9;
  right: 350px;
  animation: rotation 90s infinite linear;
}
@keyframes animate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
.heroImg {
  animation: animate 16s ease-in-out infinite;
}
@media (max-width: 992px) {
  .demo_1.banner_section .banner_title h1 {
    font-size: 2rem;
  }
  img.obj1 {
    width: 100px;
    position: absolute;
    top: 80vh;
    right: 50px;
  }
  img.obj2 {
    width: 60px;
    top: 40vh;
    right: 55px !important;
    left: unset;
  }
  img.obj3 {
    width: 70px;
    top: 5vh;
    left: 15px !important;
  }
}
.mr-2 {
  margin-right: 0.5rem;
}
.copyright {
  color: white;
}