@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body,
html {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  background-image: url("../img/png/body-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--color-black);
  overflow-x: hidden !important;
}

.no-scroll-y {
  overflow-y: hidden !important;
}

.no-scroll-x {
  overflow-x: hidden !important;
}

:root {
  /*================================== FONT-SIZES ================================================ */
  --font-12: 12px;
  --font-sm: 16px;
  --font-md: 18px;
  --font-xmd: 20px;
  --font-lg: 22px;
  --font-xlg: 30px;
  --font-xl: 50px;
  --font-xxl: 60px;
  --font-btn: 24px;
  --font-hero: 40px;

  /*================================== COLOR-CLASS ================================================ */
  --color-white: #fafafa;
  --color-black: #000000;
  --color-light-black: #010101;
}

/*====================================== Media-queries-start ======================================== */
@media (max-width: 575.98px) {
  :root {
    /*================================== FONT-SIZES ================================================ */
    --font-sm: 13px;
    --font-md: 14px;
    --font-xmd: 15px;
    --font-lg: 18px;
    --font-xlg: 20px;
    --font-xl: 25px;
    --font-xxl: 30px;
    --font-hero: 20px;
    --font-btn: 18px;
  }

  .w-sm-100 {
    width: 100%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  :root {
    /*================================== FONT-SIZES ================================================ */
    --font-sm: 14px;
    --font-md: 15px;
    --font-xmd: 16px;
    --font-lg: 20px;
    --font-xlg: 22px;
    --font-xl: 30px;
    --font-xxl: 40px;
    --font-hero: 25px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  :root {
    /*================================== FONT-SIZES ================================================ */
    --font-sm: 15px;
    --font-md: 16px;
    --font-xmd: 17px;
    --font-lg: 18px;
    --font-xlg: 22px;
    --font-xl: 35px;
    --font-xxl: 45px;
    --font-hero: 30px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  :root {
    /*================================== FONT-SIZES ================================================ */
    --font-sm: 16px;
    --font-md: 17px;
    --font-xmd: 18px;
    --font-lg: 20px;
    --font-xlg: 25px;
    --font-hero: 40px;
    --font-xl: 35px;
    --font-xxl: 50px;
  }
}

/*====================================== Media-queries-end ======================================== */

/*====================================== FONT-SIZE CLASS START ======================================= */

.font-12 {
  font-size: var(--font-12) !important;
}

.font-sm {
  font-size: var(--font-sm) !important;
}

.font-md {
  font-size: var(--font-md) !important;
}

.font-xmd {
  font-size: var(--font-xmd) !important;
}

.font-lg {
  font-size: var(--font-lg) !important;
}

.font-xlg {
  font-size: var(--font-xlg) !important;
}

.font-xl {
  font-size: var(--font-xl) !important;
}

.font-xxl {
  font-size: var(--font-xxl) !important;
}

.font-hero {
  font-size: var(--font-hero) !important;
}

/*====================================== FONT-WEIGHT SIZE CLASS START ============================== */
.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

/*====================================== COLOR CLASS START =================================================== */
.text-white {
  color: var(--color-white) !important;
}

.text-black {
  color: var(--color-black) !important;
}

/*===================================== COLOR CLASS END ======================================================== */
/*===================================== BACKGROUND-COLOR CLASS START =========================================== */
.bg-color-white {
  background-color: var(--color-white) !important;
}

.bg-color-black {
  background-color: var(--color-black) !important;
}

.bg-color-light-black {
  background-color: var(--color-light-black) !important;
}

/*================================== BACKGROUND-COLOR CLASS END ================================================= */
/* ================================== COMMON CLASS START  ================================================== */
.main-heading {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-white);
}

.heading {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-white);
}

.sub-heading {
  font-size: var(--font-xlg);
  font-weight: 600;
  color: var(--color-white);
}

.main-para {
  font-size: var(--font-xmd);
  font-weight: 400;
  color: var(--color-white);
}

.para {
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--color-white);
}

.sub-para {
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--color-white);
}

.common-btn {
  font-size: var(--font-xmd);
  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: 10px 36px;
  opacity: 0.8;
  transition: all 0.4s ease-in-out;
}

.common-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%
  );
}

.cursor-pointer {
  cursor: pointer;
}

.opacity-07 {
  opacity: 0.7 !important;
}

/* SCROLL TOP CSS START */
/* #loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #54E9FD;
    background-image: url("../img/png/loading.gif");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 999999;
    overflow: hidden !important;
} */
body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background: transparent;
  width: 0px;
}

body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  width: 0px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    90.14deg,
    #057eae 2.87%,
    #2e3d98 16.18%,
    #7d268d 28.01%,
    #e91580 37.86%,
    #eb293c 52.15%,
    #f16e2d 62.5%,
    #f8b12c 72.36%,
    #fcda2b 83.2%,
    #38ae4b 97.49%
  );
}

/* 
.scroll-custom::-webkit-scrollbar {
    width: 12px;
}

.scroll-custom::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background: transparent;

}

.scroll-custom::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    background: linear-gradient(90.14deg, #057EAE 2.87%, #2E3D98 16.18%, #7D268D 28.01%, #E91580 37.86%, #EB293C 52.15%, #F16E2D 62.5%, #F8B12C 72.36%, #FCDA2B 83.2%, #38AE4B 97.49%);
}
*/
#scroll-to-top {
  position: fixed;
  z-index: 2;
  right: 20px;
  top: 88%;
  cursor: pointer;
  width: 50px;
  height: 50px;

  box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.09);
  text-indent: -9999px;
  display: none;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  background: url("../img/png/up-arrow-icon.png"),
    linear-gradient(
      90.14deg,
      #057eae 2.87%,
      #2e3d98 16.18%,
      #7d268d 28.01%,
      #e91580 37.86%,
      #eb293c 52.15%,
      #f16e2d 62.5%,
      #f8b12c 72.36%,
      #fcda2b 83.2%,
      #38ae4b 97.49%
    );
  background-repeat: no-repeat;
  background-position: center;
  animation: moves 2s ease-in-out infinite;
}

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

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

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

#scroll:hover {
  opacity: 0.8;
  box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.09);
}

#scroll:hover span {
  border-bottom-color: white;
}

a.middle {
  position: relative;
}

a.middle::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -8px;
  height: 7px;
  border-radius: 5.5px;
  background-color: var(--color-white) !important;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out;
}

a.middle:hover::after {
  visibility: visible;
  transform: scaleX(1);
}

/* SCROLL TOP CSS END */

/* NAVBAR CSS START */
.fix-screen-mobile .display-none-section {
  display: none !important;
}

/* 
.bg-img-navbar {
    background-image: url("../img/png/hero-bg-img.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */

.shadow-black-navbar {
  background-color: rgba(0, 0, 0, 0.24);
  padding-top: 10px;
  padding-bottom: 10px;
}

.navbar-wrapper .navbar-btns button:hover {
  background-color: transparent;
  color: #0ed145;
}

.navbar-wrapper .navbar-btns button:hover .cmmg-soon {
  display: inline-block;
}

.navbar-wrapper .navbar-btns button:hover .launch-app {
  display: none;
}

/* NAVBAR-HOVER */
.navbar-wrapper .nav-items-list a {
  text-decoration: none;
  -webkit-transition: 0.3s ease-in;
  transition: 0.3s ease-in;
  position: relative;
}

.navbar-wrapper .nav-items-list a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: -31px;
  content: "";
  display: block;
  height: 7px;
  left: 50%;
  position: absolute;
  background: var(--color-white);
  border-radius: 5.5px;
  -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.navbar-wrapper .nav-items-list a:hover::after {
  width: 100%;
  left: 0;
}

/* NAVBAR-HOVER-END */

.navbar-wrapper .search-icon {
  z-index: 4;
}

.navbar-wrapper .hamburger-menu {
  position: relative;
  width: 29px;
  cursor: pointer;
  height: 25px;
}

.navbar-wrapper .first {
  top: 0;
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar-wrapper .sec {
  top: 11px;
  background: #ffffff;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
}

.navbar-wrapper .third {
  top: 22px;
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar-wrapper .hamburger-menu span {
  width: 100%;
  height: 3px;
  background-color: white;
  border-radius: 10px;
  position: absolute;
  display: inline-block;
  left: 0;
}

.navbar-wrapper .animate .sec {
  opacity: 0;
}

.navbar-wrapper .animate .first {
  top: 11px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar-wrapper .animate .third {
  top: 11px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navbar-wrapper .hamburger-menu.animate span {
  background-color: #ffffff;
}

.overlay-btns button:hover {
  background-color: transparent;
  color: #ffffff;
}

@media (max-width: 992px) {
  .overlay-links {
    color: hsl(0, 0%, 100%);
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
  }

  .overlay-links::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 3px;
    left: 0;
    bottom: -5px;
    background-color: white;
    transition: all 0.3s ease-in-out;
    transform: scale(0);
  }

  .overlay-links:hover::after {
    width: 100%;
    transition: all 0.3s ease-in-out;
    transform: scale(1);
  }

  .mobile-view #overlay {
    -webkit-transition: 0.7s ease;
    transition: 0.7s ease;
    opacity: 1;
    pointer-events: all;
  }

  .mobile-view #overlay .left {
    opacity: 1;
    width: 100%;
    height: 100vh;
  }

  .mobile-view #overlay .left .copyright a {
    font-size: 18px;
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left .copyright a:hover {
    text-decoration: none;
  }

  .mobile-view #overlay .left ul li:nth-child(1) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li:nth-child(2) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li:nth-child(3) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li:nth-child(4) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li:nth-child(5) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li:nth-child(6) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li:nth-child(7) {
    -webkit-animation: mymove 0.9s;
    animation: mymove 0.9s;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .mobile-view #overlay .left ul li a {
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
  }

  #overlay {
    -webkit-transition: 1s ease !important;
    transition: 1s ease !important;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

@media (min-width: 576px) {
  .mobile-view #overlay .left ul li a {
    font-size: 40px;
  }
}

@-webkit-keyframes mymove {
  from {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1;
  }
}

@keyframes mymove {
  from {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 1;
  }
}

.left,
.right {
  opacity: 0;
}

.fix-screen-mobile {
  height: 100vh;
  overflow: hidden;
}

.left li,
.right li {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}

.left li a,
.right li a {
  font-size: 30px;
  color: #ffffff;
  text-decoration: none;
}

@media (min-width: 576px) {
  .left li a,
  .right li a {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .w-65 {
    width: 65% !important;
  }
}

@media (min-width: 992px) {
  #overlay {
    display: none;
  }
}

.text-shadows {
  background: -webkit-linear-gradient(
    90.14deg,
    #057eae 2.87%,
    #2e3d98 16.18%,
    #7d268d 28.01%,
    #e91580 37.86%,
    #eb293c 52.15%,
    #f16e2d 62.5%,
    #f8b12c 72.36%,
    #fcda2b 83.2%,
    #38ae4b 97.49%
  );
  -webkit-background-clip: text;
  -webkit-text-stroke: 3px transparent;
  text-shadow: 1px 2px 169px #84e9ef;
  color: white;
}

.main_box {
  background: linear-gradient(
      90.14deg,
      #057eae 2.87%,
      #2e3d98 16.18%,
      #7d268d 28.01%,
      #e91580 37.86%,
      #eb293c 52.15%,
      #f16e2d 62.5%,
      #f8b12c 72.36%,
      #fcda2b 83.2%,
      #38ae4b 97.49%
    ),
    linear-gradient(0deg, #ffffff, #ffffff);
  padding: 1px;
  border-radius: 14px;
  transition: all 0.4s ease-in-out;
}

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

.small_box {
  background: black;
  border-radius: 14px;
}

.overlay_img {
  margin-top: -1%;
  transform: rotate(180deg);
}

.margin_bottom_minus {
  margin-bottom: -15%;
}
.img_width {
  width: 150px;
  object-fit: cover;
  border-radius: 50%;
}