@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

@import url(../css/variables.css);

*,
html {
   scroll-behavior: smooth;
}

body {
   min-height: 100vh;
   background: var(--black-color);
   color: var(--white-color);
   font-size: 1rem;
   font-family: "Plus Jakarta Sans", sans-serif;
}

::selection {
   background: var(--active-menu-link);
   color: var(--black-color);
}
.txtco
{
   color:#fff!important;
}
/* Phonk Heading Font Family */
@font-face {
   font-family: Phonk;
   src: url(../font/Phonk\ Regular\ DEMO.otf);
}

/* Common CSS Classes */
.heading-font {
   font-family: Phonk;
}

.w-fit {
   width: fit-content;
}

.cursor-pointer {
   cursor: pointer;
}

.px-12 {
   padding-inline: 12px;
}

.left-content {
   width: 200px;
}

.without-menu .left-content {
   width: 70px;
}

.without-menu .right-content {
   margin-left: 70px;
}

.dashboard-menu ul li a {
   color: var(--gray-color);
   font-size: var(--fs-18);
   font-weight: 600;
}

.dashboard-menu ul li a.active {
   color: var(--white-color);
}

.dashboard-menu ul li a:hover {
   color: var(--white-color);
}

.dashboard-menu ul li a.active .menu-icon {
   background: var(--active-menu-gradient);
}

.dashboard-menu ul li a:hover .menu-icon {
   background: var(--active-menu-gradient);
}

.dashboard-menu ul li a .menu-icon {
   width: 35px;
   height: 35px;
   background: var(--menu-color);
   border-radius: 50%;
}

.right-content {
   margin-left: 200px;
}

.header-menu ul li a {
   color: var(--gray-color);
   font-weight: 600;
}

.header-menu ul li a.active {
   color: var(--white-color);
}

.header-menu ul li a:hover {
   color: var(--white-color);
}

.header-menu ul li a:hover .dropdown-img {
   filter: brightness(2);
}

.navbar-toggler-icon {
   background: url(../img/icons/ic-toggle.svg);
   background-repeat: no-repeat;
   background-position: center;
}

.hero-sec {
   height: 170px;
   background-image: url(../img/hero-img/quantity.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

.bg-menu-overlay {
   background-color: var(--menu-overlay);
}

header nav .offcanvas-body ul li .nav-link {
   color: var(--gray-color);
   font-weight: 600;
}

header nav .offcanvas-body ul li .nav-link.active {
   color: var(--active-menu-link);
}

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

#page-loader.fade-out {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fs-20 {
   font-size: 20px;
}

.inner-shadow {
   box-shadow: var(--inner-shadow1);
}

.sub-heading2 {
   font-size: var(--sub-heading2);
}

.sub-heading3 {
   font-size: var(--sub-heading3);
}

.rounded-22 {
   border-radius: var(--rounded-22);
}

.gray-color {
   color: var(--gray-color);
}

.custom-border {
   position: relative;
   backdrop-filter: blur(132.10000610351562px);
}

.custom-border::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 2px;
   background: linear-gradient(
      70.86deg,
      rgba(140, 112, 139, 0.84) -2.85%,
      #000000 103.92%
   );
   -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
}

.blue-gradient-btn {
   background: var(--button-gradient);
   color: var(--white-color);
   position: relative;
}

.blue-gradient-btn::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0.16) -58.62%,
      #c0b6b6 94.83%
   );
   -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
}

.gray-gradient-btn {
   background-color: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0.16) -58.62%,
      #c0b6b6 94.83%
   );
   backdrop-filter: blur(70px);
   color: var(--white-color);
   position: relative;
}

.gray-gradient-btn::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: linear-gradient(
      360deg,
      rgba(0, 0, 0, 0.16) -58.62%,
      #c0b6b6 94.83%
   );
   -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
}

.purple-color {
   color: var(--purple-color);
}

.fs-24 {
   font-size: var(--fs-24);
}

.cards-bg {
   background: var(--cards-bg);
}

.blob-effect1 {
   position: absolute;
   top: 5%;
   right: -10%;
}

.blob-effect2 {
   position: absolute;
   top: 20%;
   left: -10%;
}

/* Quantity Page CSS */
.bg-yellow-gradient {
   background: var(--gradient-color2);
   box-shadow: var(--box-shadow1);
   border-radius: var(--rounded-22);
}

/* News Page CSS */
.news-hero-sec {
   background-image: url(../img/hero-img/news.png);
}

.news-hero-sec,
.help-hero-sec,
.recharge-hero-sec,
.team-hero-sec,
.invest-hero-sec,
.agent-hero-sec,
.invite-hero-sec {
   height: 170px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   margin-top: 76px;
}

/* Help Page CSS */
.help-hero-sec {
   background-image: url(../img/hero-img/help.png);
}

/* Recharge Page CSS */
.recharge-hero-sec {
   background-image: url(../img/hero-img/recharge.png);
}

/* Invest Page CSS */
.invest-hero-sec {
   background-image: url(../img/hero-img/recharge.png);
}

/* Agent Page CSS */
.agent-hero-sec {
   background-image: url(../img/hero-img/agent.png);
}

/* Agent Page CSS */
/*.invite-hero-sec {*/
/*   background-image: url(../img/hero-img/invite.png);*/
/*}*/

.bg-purple {
   background: var(--purple-color);
}

/* Dashboard Page CSS */
.dashboard-bg-img1 {
   background-image: url(../img/dashboard-imgs/1.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.dashboard-bg-img2 {
   background-image: url(../img/dashboard-imgs/2.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.dashboard-bg-img3 {
   background-image: url(../img/dashboard-imgs/3.png);
   background-repeat: no-repeat;
   background-size: cover;
}

.dashboard-bg-img4 {
   background-image: url(../img/dashboard-imgs/4.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.dashboard-bg-img5 {
   background-image: url(../img/dashboard-imgs/5.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.dashboard-bg-img6 {
   background-image: url(../img/dashboard-imgs/6.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.dashboard-bg-img7 {
   background-image: url(../img/dashboard-imgs/7.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.about-cards {
   backdrop-filter: blur(120.5999984741211px);
   background: linear-gradient(
      108.47deg,
      rgba(46, 28, 49, 0.39) -2.23%,
      rgba(46, 28, 49, 0.39) 12.66%,
      rgba(140, 87, 151, 0.0702) 97.71%
   );
   border: 1px solid rgba(0, 0, 0, 0.5);
}

.gradient-heading {
   background: linear-gradient(90deg, #ea60ff -12.89%, #5246ff 95.18%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

#pills-tab {
   background-color: #1d1d1d;
   width: fit-content;
   margin: 0 auto;
   padding: 3px;
   border-radius: 6px;
}

#pills-tab .nav-link.active {
   background: linear-gradient(
      to right,
      #323232,
      rgba(226, 36, 255, 0.6),
      #323232
   );
}

.input-bg {
   background: #03082140 !important;
   box-shadow: 1px 3px 3.1px 2px #00000042 inset;
   border: 0;
   color: var(--white-color);
}

.input-bg::placeholder {
   color: var(--white-color);
   opacity: 0.14;
}

/* Team Page CSS */
.team-hero-sec {
   background-image: url(../img/hero-img/team.png);
}

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

.fs-16 {
   font-size: var(--fs-16);
}

.w-80 {
   width: 800px;
}

::-webkit-scrollbar {
   width: 0px;
}

.table > :not(caption) > * > * {
   background: transparent !important;
   border: 0;
   vertical-align: center;
}

.login-bg {
   background: url(../img/hero-img/login-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom center;
}
.logoneww
{
   margin:0 auto;
   margin-bottom: 20px;
}
.login-bg nav {
   background: transparent !important;
}

.login-card {
   background: linear-gradient(
      150.68deg,
      rgba(47, 59, 118, 0.47) -13.1%,
      rgba(33, 48, 124, 0.47) 96.16%
   );
   backdrop-filter: blur(60px);
   position: relative;
   max-width: 450px;
}

.login-card::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: linear-gradient(152.67deg, #004492 -4.72%, #b7b7b7 119.39%);
   -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
}

.text-cyan {
   color: var(--cyan-color);
}

/* Media Queries */

/* Small Laptop Screen */
@media only screen and (max-width: 1400px) {
   .left-content .dashboard-menu a {
      font-size: 1rem;
   }

   .right-content .header-menu {
      font-size: var(--fs-14);
   }

   .table * {
      font-size: var(--fs-16) !important;
   }
}

/* Large Tablet Screen */
@media only screen and (max-width: 1200px) {
   .right-content .header-menu {
      font-size: var(--fs-12);
   }

   .heading-font {
      font-size: var(--sub-heading1);
   }

   .fs-20 {
      font-size: var(--fs-18);
   }

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

   .table * img {
      width: 16px;
   }
}

/* Medium Tablet Screen */
@media only screen and (max-width: 992px) {
   .heading-font {
      font-size: var(--sub-heading3);
   }

   .sub-heading3 {
      font-size: var(--fs-24);
   }

   .cards-bg > h5 {
      font-size: var(--fs-20);
   }
}

/* Small Tablet Screen */
@media only screen and (max-width: 768px) {
   .heading-font {
      font-size: var(--fs-24);
   }

   .right-content,
   .without-menu .right-content {
      margin: 0;
      border: none !important;
   }

   .hero-sec {
      height: auto;
      margin-top: 80px;
      background: transparent;
   }

   .blob-effect1 {
      top: -5%;
      z-index: -1;
      right: -35vw;
      width: 400px;
   }

   .blob-effect2 {
      position: absolute;
      top: 20%;
      left: -50vw;
      width: 600px;
   }

   .blob-effect3 {
      position: absolute;
      top: 40%;
      right: -70%;
      width: 600px;
   }

   .blob-effect4 {
      position: absolute;
      top: 60%;
      left: -70%;
      width: 600px;
   }

   .fs-16 {
      font-size: var(--fs-14);
   }

   .news-hero-sec,
   .help-hero-sec,
   .recharge-hero-sec,
   .team-hero-sec,
   .invest-hero-sec,
   .agent-hero-sec,
   .invite-hero-sec {
      margin-top: 70px;
   }

   .without-menu .fs-24 {
      font-size: var(--fs-20);
   }

   .without-menu .custom-border p.small {
      font-size: var(--fs-12);
   }

   .login-bg header nav {
      background: none !important;
   }

   .login-bg header .navbar-brand {
      visibility: hidden;
   }
   .divider {
      height: 175px;
   }
}

/* Mobile Screen */
@media only screen and (max-width: 576px) {
   .heading-font {
      font-size: var(--fs-18);
   }

   .fs-20 {
      font-size: var(--fs-14);
   }

   .sub-heading3 {
      font-size: var(--fs-20);
   }

   .custom-border .fs-20 {
      font-size: var(--fs-12);
   }

   .account-details h5 {
      font-size: 1rem;
   }

   .cards-bg > h5 {
      font-size: 1rem;
   }

   .vipo-cards .gray-color {
      color: var(--white-color);
   }

   .fs-16 {
      font-size: var(--fs-12);
   }

   .without-menu .fs-24 {
      font-size: var(--fs-16);
   }

   .login-card * {
      font-size: var(--fs-14) !important;
   }

   .about-cards *,
   .core-finance * {
      font-size: var(--fs-12);
   }

   .table * {
      font-size: 10px !important;
   }

   .table * img {
      width: 12px;
   }

   .agent-content p,
   .agent-content ul li {
      font-size: var(--fs-14) !important;
   }

   .mobile-bar ul li {
      font-size: var(--fs-12);
   }

   .mobile-bar ul li a.active {
      color: var(--purple-color) !important
      ;
   }
}

@media only screen and (max-width: 440px) {
   .table2 {
      display: none !important;
   }

   .table1 {
      width: 100% !important;
      margin-top: 20px;
   }

   .table1 > img {
      display: none;
   }
}