.hero-section-bg {
  background-image: url("../img/png/Group\ 67.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.community-box {
  background-image: url("../img/png/communinty-box.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 61px;
  padding-bottom: 38px;
}

.perks-box {
  background-image: url("../img/png/Group\ 27651.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 26px 45px 38px 45px;
  transition: all 0.4s ease-in-out;
}

.perks-box:hover {
  box-shadow: 2px 1px 40px #22282f;
  filter: drop-shadow(1px 2px 32px #332e2e);
}

.margin-top-30px {
  margin-top: -30px;
}

.galler-cards-img-shadow {
  filter: drop-shadow(0px 4px 38px #fcda2b);
}

.mint-smol-btn {
  font-size: var(--font-btn);
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(
    90deg,
    #057eae 7.29%,
    #7d268d 24.48%,
    #e91580 38.54%,
    #eb293c 57.29%,
    #f16e2d 71.88%,
    #fcda2b 85.94%,
    #38ae4b 100%
  );
  mix-blend-mode: normal;
  border: 1px solid #ffffff;
  border-radius: 10px;
  padding: 24px 51px 24px 81px;
  opacity: 0.8;
  transition: all 0.4s ease-in-out;
}

.mint-smol-btn:hover {
  background: linear-gradient(
    -90deg,
    #057eae 7.29%,
    #7d268d 24.48%,
    #e91580 38.54%,
    #eb293c 57.29%,
    #f16e2d 71.88%,
    #fcda2b 85.94%,
    #38ae4b 100%
  );
}

.p-14-63 {
  padding: 14px 63px;
}

.text-side-line {
  position: relative;
}

.text-side-line::after {
  content: "";
  position: absolute;
  width: 55.5%;
  height: 1px;
  top: 50%;
  right: -62%;
  background: linear-gradient(
    90deg,
    rgba(5, 126, 174, 0.7) 0%,
    rgba(46, 61, 152, 0.7) 14.18%,
    rgba(125, 38, 141, 0.7) 22.88%,
    rgba(233, 21, 128, 0.7) 34.32%,
    rgba(230, 40, 25, 0.7) 43.01%,
    rgba(241, 110, 45, 0.7) 52.16%,
    rgba(248, 177, 44, 0.7) 64.06%,
    rgba(252, 218, 43, 0.7) 72.29%,
    rgba(56, 174, 75, 0.7) 87.85%
  );
}

.text-side-line::before {
  content: "";
  position: absolute;
  width: 55.5%;
  height: 1px;
  top: 50%;
  left: -62%;
  background: linear-gradient(
    90deg,
    rgba(5, 126, 174, 0.7) 0%,
    rgba(46, 61, 152, 0.7) 14.18%,
    rgba(125, 38, 141, 0.7) 22.88%,
    rgba(233, 21, 128, 0.7) 34.32%,
    rgba(230, 40, 25, 0.7) 43.01%,
    rgba(241, 110, 45, 0.7) 52.16%,
    rgba(248, 177, 44, 0.7) 64.06%,
    rgba(252, 218, 43, 0.7) 72.29%,
    rgba(56, 174, 75, 0.7) 87.85%
  );
}

@media (max-width: 576px) {
  .community-box {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .perks-box {
    padding: 26px 16px 38px 16px;
  }

  .text-side-line::after {
    width: 19.5%;
    right: -21%;
  }

  .text-side-line::before {
    width: 19.5%;
    left: -21%;
  }
}

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

.footer-icons-hover svg path {
  transition: all 0.4s ease-in-out;
}

.footer-icons-hover svg:hover path {
  fill: #e91580;
  stroke: #e91580;
}

.team-box {
  background-image: url("../img/png/Rectangle\ 13.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  /* border-radius: 10px; */
  padding-top: 11px;
}

.my-box {
  background-image: url("../img/png/Rectangle\ 13.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.border-left-svg {
  position: absolute;
  left: 0;
  top: -20%;
}

/* ROADMAP SCROLLING EFFCTS STYLE  */

.center-scroll-car {
  z-index: 3;
  position: absolute;
  left: calc(50% - 50px);
  top: 0;
}

.center-scroll-car .car-smoke {
  position: absolute;
  left: -36px;
  top: -13px;
  display: none;
}

.center-scroll-car .rocket-pngimg {
  transform: rotate(180deg);
}

.circle-black-bg {
  width: 120px;
  height: 120px;
  background: linear-gradient(
    81.88deg,
    #3c3e41 76.76%,
    #3c3e41 117.89%,
    #4a4e54 157.52%,
    #3c3e41 173.41%
  );
  border: 5px solid #323336;
  display: inline-block;
  border-radius: 50%;
}

@media (max-width: 1200px) {
  .w-xl-65 {
    width: 65%;
  }

  .center-scroll-car .car-smoke {
    left: -36px;
    z-index: unset;
  }

  .border-left-svg {
    top: -37%;
  }

  .center-scroll-car {
    left: calc(50% - 50px);
  }
}

@media (max-width: 992px) {
  .roadmap-route {
    left: 30px !important;
  }

  .w-lg-80 {
    width: 80% !important;
  }
}

@media (max-width: 768px) {
  .center-scroll-car {
    left: -15px;
  }

  .circle-black-bg {
    width: 110px;
    height: 110px;
  }

  .circle-black-bg .rocket-pngimg {
    width: 40px;
    height: 60px;
  }

  .center-scroll-car .car-smoke {
    position: absolute;
    left: -47px;
    top: -19px;
    display: none;
    z-index: unset;
  }
}

@media (max-width: 575.98px) {
  .circle-black-bg {
    width: 80px;
    height: 80px;
  }

  .circle-black-bg .rocket-pngimg {
    width: 30px;
    height: 50px;
  }

  .center-scroll-car {
    left: 5px;
  }

  .center-scroll-car .car-smoke {
    position: absolute;
    left: -52px;
    top: -19px;
    display: none;
    z-index: unset;
  }

  .video-icon {
    width: 50px;
  }
}

.img-top-1 {
  top: 90%;
}

.img-top-2 {
  top: 80%;
  right: 20%;
}

.img-top-3 {
  top: 30%;
}

.img-top-4 {
  top: 40%;
  left: 20%;
}

.img-top-5 {
  top: 70%;
  left: 5%;
}

.footer-icons-hover {
  transition: all 0.4s ease-in-out;
}

.footer-icons-hover:hover {
  transform: translateY(-10px);
}

.roadmap-box {
  transition: all 0.4s ease-in-out;
}

.roadmap-box:hover {
  filter: drop-shadow(1px 2px 32px #332e2e);
}

.roamap-cricle {
  box-shadow: 2px 1px 27px #22282f;
  border-radius: 55%;
}

.team-cricle {
  transition: all 0.4s ease-in-out;
  border-radius: 50%;
}

.team-cricle:hover {
  box-shadow: 2px 1px 40px #22282f;
  filter: drop-shadow(1px 2px 32px #332e2e);
}

.z-100 {
  z-index: 100;
}

.hero-img {
  animation: updown 2s ease-in-out infinite;
}

@keyframes updown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.video-icon {
  top: 8%;
  right: 24%;
  cursor: pointer;
}