/*
Perfect Panel Theme Crafted by
Author: perfectd3v - https://www.fiverr.com/perfectd3v
*/

@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap";

body {
	--main-bg: #f7f8f9;	
	--second-bg: #edeff2;
  	--white-bg: #ffffff;
	--border: #e5e7eb;
	--tw: #FFFFFF;
	--tc: #2d5176;
	--mc: #0139ff;
	--mc-hover: #4a72ff;
	--mc-trans: rgb(1, 57, 255, .25);
	--radius: 15px
}

.dark {
	--main-bg: #020527;	
	--second-bg: #010325;
  	--white-bg: #070a37;
	--border: #122751;
	--tw: #FFFFFF;
	--tc: #FFFFFF;
	--mc: #0139ff;
	--mc-hover: #4a72ff;
	--mc-trans: rgb(1, 57, 255, .25);
	--radius: 15px
}

body {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	letter-spacing: -.015em;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.6;
	min-width: 375px;
	color: var(--tc);
	background-color: var(--main-bg);
	overflow-x: hidden
}

body.overflow {
	overflow: hidden
}

a {
	text-decoration: none !important;
	color: var(--tc)
}

a,
[type="checkbox"] {
	cursor: pointer;
}

.home-fade,
body {
	overflow-x: hidden
}

a:hover {
	color: var(--mc)
}

li {
	list-style-type: none
}

button,
input {
	background-color: transparent;
	line-height: 0;
	border: 0;
	padding: 0;
}

button:focus,
input:focus {
	outline: 0 !important;
	border: none !important
}

b,
strong {
	letter-spacing: -.01em;
	font-weight: 600;
	line-height: 1.6;
	transition: all 0.15s ease;
}

.hidden {
	display: none !important
}

.nowrap {
	white-space: nowrap
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-review-img {
	background: var(--main-bg);
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: var(--main-bg);
}

.primary-color {
	color: var(--mc) !important;
	font-weight: 600
}

.alert {
	border-radius: var(--radius);
	border: none !important
}

.alert.alert-success {
	color: #09b797 !important;
	background: #2dfad431 !important;
}

.alert.alert-danger {
	color: #EE5B5B !important;
	background: #ee5b5b41 !important;
}

.badge {
	background: var(--mc) !important;
	color: #fff !important;
	font-weight: 400;
    font-size: 12px;
}

.h-section {
	margin: 100px 0
}

.h-section.section-50 {
	margin: 50px 0 100px 0
}

.h-section.section-0 {
	margin: 50px 0
}

.h-section.hs-bg {
	background: #fff;
    padding: 50px 0;
}

.c-pointer {
	cursor: pointer;
}

.p-relative {
	position: relative
}

.p-absolute {
	position: absolute
}

.transition {
	transition: all 0.15s ease;
}

.hidden {
	display: none !important
}

.btn {
	position: relative;
    display: flex;
	justify-content: center;
    padding: 11px 25px;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
	font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.14px;
    white-space: nowrap;
    box-shadow: none!important;
    outline: 0!important;
}

.btn:hover,
btn:focus {
	color: var(--tc) !important;
    box-shadow: none!important;
    outline: 0!important
}

.btn-sm {
	font-size: 14px !important;
	padding: 6px 12px;
}

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

.btn-border {
	border: 1px solid var(--border) !important;
}

.btn-danger, .btn-danger:hover, .btn-danger:focus {
	color: var(--tw)!important
}

.btn-100 {
	display: block;
	width: 100%;
}

.btn-100.btn-icon {
	display: flex;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus {
	background: var(--main-bg) !important
}

.btn-primary {
    background: linear-gradient(183deg, #31befe, var(--mc));
	color: #fff;
	border-radius: 15px;
	transition: 250ms all
}

.btn-primary:hover,
.btn-primary:focus {
	background: linear-gradient(183deg, var(--mc), #31befe);
	color: #fff !important;
	outline: 0!important;
	transition: 250ms all
}

.btn-secondary {
	background: radial-gradient(397.75% 81.29% at 109.6% 34.26%, #0d1117 0%, #0e1621 99.99%, #0e131b 100%), #070a0e;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow: 0px 1.182px 2.365px 0px rgb(19 27 38), 0px 0px 0px 1.182px #27303e;
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: radial-gradient(397.75% 81.29% at 109.6% 34.26%, #070a0e 0%, #0e1621 99.99%, #0e131b 100%), #0d1117;
    color: #fff !important;
    border: 1px solid #27303e;
    box-shadow: 0px 1.182px 2.365px 0px rgb(19 27 38), 0px 0px 0px 1.182px #27303e;
}

.mobile-nav {
    z-index: 1001;
    position: relative;
    display: block;
    height: 72px;
    border-bottom: 1px solid var(--border);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background: var(--main-bg);
    backdrop-filter: blur(15px);
}

.mobile-nav .row {
  height: 72px;
  align-items: center;
}

@media (min-width: 992px) {
  .mobile-nav {
    display: none;
  }
}

.menu-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: var(--mc-trans);
  color: var(--mc);
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 1000;
  bottom: 0px;
  left: 0px;
}

@media (min-width: 992px) {
  .header {
    height: 85px;
    padding: 5px 0 0 0;
    border-bottom: 1px solid #aebae2;
    top: 0;
    bottom: initial;
  }
}

.header .header-row {
  align-items: center;
}

@media (min-width: 992px) {
  .header .header-row {
    height: 80px;
  }
}

@media (min-width: 992px) {
  .header.active {
    padding-top: 0;
    height: 90px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    transition: 0.14s ease;
  }

  .header.active .row {
    height: 90px;
  }

  .header.active .header-menu>li>a {
    padding: 0 10px
  }
}

.header .menu-toggle-close {
  display: none;
}

@media (max-width: 992px) {
  .header {
    background-color: var(--main-bg);
    padding: 20px 10px 30px 10px;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    max-height: calc(100vh - 100px);
    transform: translateY(100%);
    transition: 0.2s ease;
    z-index: 1987
  }

  .header.opened {
    transform: translateY(0);
  }

  .header .menu-toggle-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 24px;
    background-color: var(--mc-trans);
    color: var(--mc);
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 17px;
    right: 25px;
    z-index: 2222
  }

  .header .header-menu {
    padding-top: 30px;
    flex-direction: column;
    gap: 5px;
  }

  .header .header-menu li {
    padding: 0;
  }

  .header .header-menu li a {
		padding: 15px 10px;
        font-weight: 400;
        font-size: 15px;
        color: var(--tc);
        background: var(--second-bg);
        border-radius: 10px;
        text-align: center;
  }

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

  .header .header-menu li a::after {
    background-color: transparent !important;
  }
}

.header-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 40px;
  justify-content: center;
}

.header-menu>li {
  margin: 0;
  padding: 0;
}

.header-menu>li>a {
  display: block;
  margin: 0;
  /*padding: 0 10px;*/
  font-weight: 500;
  font-size: 15px;
  line-height: 100%;
  color: var(--tc);
  text-decoration: none;
  position: relative;
}

.header-menu>li>a.active, .header-menu>li>a:hover {
  color: var(--mc);
}

.header-btn {
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 9px 9px 30px;
  overflow: hidden;
  background: linear-gradient(to top, #0139ff, #4a72ff);
  color: var(--tw);
  text-decoration: none;
  transition: 500ms all
}

.header-btn:hover {
  	transform: translateY(-0.5rem);
 	transition: 500ms all;
 	color: var(--tw);
}

.header-btn:hover .icon::after {
  transform: scale(12);
}

.header-btn .text {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1004;
}

.header-btn .icon {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-btn .icon .icon-ri {
  z-index: 1003;
}

.header-btn .icon::after {
  content: "";
  z-index: 1002;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.4s ease;
}

.header-btn.without-icon {
    color: var(--tc)
}

@media (min-width: 992px) {
  .header-btn.without-icon {
    background: transparent;
    padding: 14px 30px
  }
  .header-btn.without-icon .text {
    font-weight: 600!important
  }
  .header-btn.without-icon .icon {
    display: none
  }
}

@media (max-width: 992px) {
  .header-btn.without-icon {
    color: var(--tw)
  }
}

.body-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.body-bg::after {
    top: 165px;
    right: calc(50% - 1200px);
    flex-shrink: 0;
    transform: rotate(164.7deg) scale(-1, 1);
    transform-origin: center center;
}

.body-bg::after {
    content: "";
    width: 2046.002px;
    height: 334.009px;
    background-image: url(https://storage.perfectcdn.com/lya1xn/c3o7jkkc7ticrgak.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
  	z-index: -1
}


.home-header {
	background: url(https://storage.perfectcdn.com/lya1xn/ch24bem682f8xqig.svg), var(--main-bg);
    background-position: center top;
    background-size: 1920px auto;
    background-repeat: no-repeat;
    min-height: 100vh;
    max-width: 100%;
  	padding-top: 175px
}

.home-header .header-top {
	position: relative;
	z-index: 5;
  	text-align: center
}

.hf-glow,
.home-fade {
	position: absolute
}

.home-fade {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none
}

.home-fade>div {
	position: relative;
	width: 100%
}

.hf-glow {
	position: absolute;
    width: 1276px;
    height: 850px;
    left: -669px;
    top: -886px;
	background: linear-gradient(180deg, rgba(255, 31, 0, 0), var(--mc));
	-webkit-filter: blur(239.122px);
	filter: blur(239.122px);
	-webkit-transform: rotate(-58.53deg);
	transform: rotate(-58.53deg)
}

.sh-label {
	display: inline-flex;
	padding: 1px;
	overflow: hidden;
	background: transparent;
  	border: 1px dashed var(--mc);
	border-radius: 50px;
	position: relative;
  	margin-bottom: 15px
}

.sh-content {
    z-index: 10;
    padding: 6px 18px 6px 6px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--mc);
    font-size: 12px;
}

.sh-content>.icon {
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: var(--mc);
	color: #fff;
	width: 24px;
	height: 24px;
	font-size: 12px;
  	line-height: 24px;
	margin: 0
}

.header-top h1 span {
	font-weight: 600;
	position: relative;
	background-image: linear-gradient(-225deg, var(--mc-trans) 0, var(--mc-hover) 29%, var(--mc) 67%, var(--mc-hover) 100%);
	background-size: 200% auto;
	color: #fff;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: 3s linear infinite textclip;
	display: inline-block
}

@keyframes textclip {
	to {
		background-position: 200% center
	}
}

@media (min-width: 992px) {
  .header-top p {
      max-width: 600px;
      margin: 10px auto
  }
}

.hero-review {
    display: flex;
    gap: 15px;
    align-items: center;
  	justify-content: center;
  	margin-top: 15px
}

.hero-review img {
    user-select: none;
    pointer-events: none;
}

.hero-review .list {
    display: flex;
    align-items: center
}

.hero-review .list img {
    min-width: 35px;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    margin-left: -10px;
    border: 3px solid var(--second-bg);
}

.hero-review .text {
    color: var(--tc);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -0.36px;
}

.hero-review .text span {
    color: #000;
}

.hero-review .icon {
    font-size: 24px;
    color: #ff912b;
}

.gap-5 {
    gap: 15px;
}

.ht-btn-group .header-btn {
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 9px 9px 20px;
    overflow: hidden;
    color: var(--tw) !important;
    text-decoration: none;
    transition: 0.14s ease;
    min-width: 225px;
}

.header-btn.hb-green {
	background: linear-gradient(to top, #13c143, #22ff5f)
}

@media (min-width: 991.98px) {
    .ht-btn-group .header-btn {
        margin: 0 15px;
    }
    .header .header-btn.hb-green {
        background: transparent
    }
}

.login-box-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-box-wrapper .form-group {
    position: relative;
    margin-bottom: 0;
    width: 100%;
}

.login-box-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
}

.login-box {
    background: #ffffffa1;
    border-radius: 20px;
    border: 1px solid #606f8521;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 45px;
    margin: 25px 0 50px 0
}

.login-box, .login-box-item input, .login-btn, .login-section {
    width: -webkit-fill-available;
}

.login-box-wrapper .fg-pass {
    position: absolute;
    right: 10px;
  	top: 13px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(183deg, #31befe, var(--mc));
    color: #fff;
    height: 30px;
    border-radius: 10px;
    font-size: 11px;
    padding: 12px;
}

.login-box-remember {
    min-width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--second-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 0;
    cursor: pointer;
}

.login-box-remember .lgn-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 18px;
    transition: 0.2s ease;
}

.login-box-remember input {
    display: none;
}

.login-box-remember .lgn-btn::before {
    content: "\f02e";
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.login-box-remember input:checked+.lgn-btn {
	background: var(--mc);
	color: var(--tw);
}


.main-logo, .logo-big {
	height: 55px
}

.footLogo img {
	height: 45px
}

@media only screen and (max-width: 962px) {
    .login-box-wrapper {
        flex-direction: column;
    }
	.login-box-btn {
        width: 100%;
    }
	.login-box-btn .login-box-signin {
        order: 1;
        width: 100%;
    }
    .login-box-btn .login-box-google {
        order: 2;
    }
    .login-box-btn .login-box-remember {
        order: 3;
    }
    .login-box-signin .btn {
        min-width: 100%;
    }
  .main-logo {
  	  height: 40px
  }
  .logo-big {
  	  height: 45px;
      margin-left: -100px
  }
  .login-box {
      padding: 19px;
      display: flex;
      margin-bottom: 50px;
  }
  .login-box form {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
  }
  .login-box form {
      width: -webkit-fill-available;
  }
  .ht-btn-group .header-btn {
      min-width: 150px;
  }  
  .home-header {
      padding-top: 100px
  }  
  .header-top h1 {
    font-size: 28px;
    line-height: 42px;  
  }
  .hero-review {
  	flex-direction: column
  }
  .hero-review .icon, .body-bg {
      display: none
  }  
}

.login-box-item {
    display: flex;
    position: relative;
    z-index: 2;
    gap: 20px;
    align-items: center;
}

.login-label-span {
    position: absolute;
    right: 10px;
    display: flex;
    align-items: center;
    background-image: linear-gradient(183deg, #31befe, var(--mc));
    color: #fff;
    height: 30px;
    border-radius: 10px;
    font-size: 11px;
    padding: 12px;
}

.login-label-span a {
	color: #fff;
}

.login-box-item {
    display: flex;
    position: relative;
    z-index: 2;
    gap: 20px;
    align-items: center;
}

.login-box-item input {
    height: 55px;
    border: 0;
	background: var(--second-bg);
    color: var(--tc);
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    border: 1px solid var(--border);
}

.login-remember-box {
    background: var(--second-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 55px;
    min-width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: .14s;
    color: var(--mc);
  	margin-bottom: 0
}

.checkbox-hidden input {
    display: none;
}

.login-box-item input:checked~.login-remember-box {
    background: var(--mc);
    color: #fff;
    transition: .14s;
}

.login-label:focus {
	border: 1px solid var(--mc)!important;
	outline: none;
	box-shadow: rgb(67 162 255 / 14%) 0px 10px 36px 0px, rgb(35 143 255 / 0%) 0px 0px 0px 1px;
}

.login-box .btn-primary.login-btn {
	height: 55px
}

.captcha-box .form-group {
    display: flex;
    margin-bottom: 0;
    position: relative;
    flex-direction: column;
    gap: 5px;
}

@media only screen and (min-width: 962px) {
    .captcha-box .g-recaptcha {
        height: 0 !important;
        margin-top: -8px;
    }
}

.highlight-title {
    transition: all .5s ease-in-out;
    margin-bottom: 0;
    font-style: normal;
    font-weight: 500;
    line-height: 148.5%;
    letter-spacing: -1px;
    color: var(--tc);
    position: relative;
    z-index: 2;
    font-size: 32px;
  	text-align: center
}

.highlight-title span {
    position: relative;
    display: inline-block;
    -webkit-text-fill-color: var(--mc);
  	font-weight: 600
}

.highlight-title span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 70%;
    transform: translate(-50%, -50%) scale(1);
    transition: .14s ease;
    background-color: var(--mc);
    border-radius: 100px;
    filter: blur(60px);
    z-index: 0;
}

.brands-wrapper {
    position: relative;
  	overflow: hidden;
	margin-top: 35px
}

.brands-wrapper .slick-slide {
    margin: 10px 15px;
}

.brands-item {
    background: #fff;
    border-radius: 15px;
    padding: 17px 34px;
}

.brands-icon {
    margin-right: 13px;
}

.brands-title {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--tc);
    margin-bottom: 0;
}

.brands-wrapper::before {
    top: 0;
    left: 0;
    background: linear-gradient(to left, var(--main-bg) 0%, rgba(255, 255, 255, 0) 30%);
}

.brands-wrapper::after {
    top: 0;
    left: 0;
    background: linear-gradient(to right, var(--main-bg) 0%, rgba(255, 255, 255, 0) 30%);
}

.brands-wrapper::before, .brands-wrapper::after {
    content: " ";
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.brands-left {
	text-align: center
}

.brands-left .bl-content h3 {
	font-size: 36px;
	font-weight: 600
}

.brands-left .bl-content h3 span {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-gradient(linear, left top, right top, from(#df0000), color-stop(30%, #ff0000), color-stop(30%, #ff0000), color-stop(73%, #ff3d3d), to(#ff3d3d));
    background-image: -webkit-linear-gradient(left, #df0000 0%, #ff0000 30%, #ff0000 30%, #ff3d3d 73%, #ff3d3d 100%);
    background-image: -o-linear-gradient(left, #df0000 0%, #ff0000 30%, #ff0000 30%, #ff3d3d 73%, #ff9a61 100%);
    background-image: linear-gradient(to right, #df0000 0%, #ff0000 30%, #ff0000 30%, #ff3d3d 73%, #ff3d3d 100%);	
	font-weight: 700
}

.brands-item .fa-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.brands-item .fa-twitter {
	background: #1da1f2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-telegram-plane {
	background: #2b9fd2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 14px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-soundcloud {
	background: #ff5836;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-spotify {
	background: #1DB954;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-tiktok {
	background: #ff0042;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-twitch {
	background: #4b367c;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 14px;
	-webkit-text-fill-color: transparent;
}

.brands-item .fa-reddit-alien {
	background: #F43708;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
}

.brands-item .fab.fa-linkedin-in {
	background: #0077b0;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 14px;
	-webkit-text-fill-color: transparent;
}

.brands-item .fa-snapchat-ghost {
	background: #FFFC00;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
}

.brands-item .fa-discord {
	background: #1090F3;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
}

.brands-item .fa-facebook-square {
	background: #207eff;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-youtube {
	background: #ff0042;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-tumblr {
	background: #34526f;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-steam {
	background: #00adee;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-pinterest {
	background: #E60023;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.brands-item .fa-apple {
	background: #555555;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.banner-bg {
    background-image: url(https://storage.perfectcdn.com/85b6og/tm8m8n4yhgg8al98.png);
    background-size: cover;
    background-position: center;
    height: 500px;
}

.banner-title {
    text-align: center;
    font-size: 36px;
    color: #fff;
    font-weight: 600;
    padding-top: 150px;
}

.btn-white {
	background: #fff;
  	color: var(--tc);
  	width: max-content;
  	margin: 25px auto;
  	padding: 11px 25px 11px 10px
}

.btn-white .icon {
	background: var(--mc-trans);
  	border-radius: 50px;
  	color: var(--mc);
  	width: 32px;
  	height: 32px;
  	line-height: 32px;
  	font-size: 18px;
  	text-align: center;
 	transition: 500ms all
}

.btn-white:hover {
  	transform: translateY(-0.5rem);
 	transition: 500ms all
}

.section-header {
	display: flex;
    flex-direction: column;
    gap: 20px;
  	margin-bottom: 75px
}

.section-header .sh-label {
	margin: auto
}

.section-header .sh-content>.icon {
	text-align: center
}

.section-header p {
	max-width: 500px;
  	text-align: center;
  	margin: auto;
  	color: #9aacbd
}

.hmc {
  position: relative;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #fff;
  -webkit-transition: 0.14s ease;
  transition: 0.14s ease;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0px 34px 35px rgba(160, 171, 191, 0.21)
}

.hmc::before {
  content: "";
  background: linear-gradient(214.66deg, #587dff 36.98%, rgba(59, 129, 255, 0) 87.99%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: absolute;
  bottom: -60%;
  right: -60%;
  z-index: 5;
  -webkit-transform: translateX(100%) translateY(100%);
          transform: translateX(100%) translateY(100%);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.hmc:hover::before {
  -webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
}

.hmc .hmc-body {
  position: relative;
  padding: 20px 16px;
  z-index: 10;
}

.hmc:hover {
  background: var(--mc);
  cursor: pointer
}

.hmc:hover .hmc-icon {
  border: 1px solid #fff;
  background: transparent;
}

.hmc:hover .hmc-title,
.hmc:hover .hmc-text {
  color: #fff;
}

.hmc .hmc-icon {
  background: #00B14D;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: var(--radius);
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 36px;
  width: 75px;
  height: 75px;
}

.hmc .hmc-title {
  margin-top: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--tc);
}

.hmc .hmc-text {
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
  	color: #9aacbd;
}

.card {
    background: #ffffff;
    border: 1px solid #606f8521;
    border: none;
    background: #fff;
    border-radius: var(--radius)
}

.card-body {
	padding: 25px 35px
}

@media (max-width: 992px) {
  .card-body {
      padding: 25px 15px
  }
}

.c-reviews .slick-track {
	display: flex;
	align-items: center;
	gap: 30px
}

.review-item {
    background: var(--main-bg);
	border: 1px solid var(--border);
	padding: 20px 30px 10px 30px;
    border-radius: 20px;
    position: relative;
	max-width: 400px
}

.review-item .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: var(--tc);
	border-bottom: 1px solid var(--border)
}

.review-item .head .r-user {
    display: flex;
	align-items: center;
	gap: 10px
}

.review-item .head .r-user .avatar {
    background: var(--second-bg);
    width: 42px;
    height: 42px;
    border-radius: 100px;
    font-size: 24px;
  	line-height: 46px;
    text-align: center;
}

.review-item .head .r-user .name {
    font-weight: 500;
    font-size: 15px;
}

.review-item .head .r-user .name span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--mc);
}

.review-item .head .rate {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    color: #f47133;
	 background: rgba(251, 145, 47, .1);
    padding: 5px 10px;
    border-radius: 10px;
} 

.review-item .text p {
  	font-size: 13px;
  	font-weight: 400;
    color: #9aacbd
}

@media (max-width: 992px) {
	.review-item {
		max-width: 400px
	}
    .banner-bg {
        height: 400px;
    }  
  .banner-title {
      font-size: 18px;
      padding-top: 115px;
  }  
  .highlight-title {
      font-size: 23px;
  }  
  .h-section {
  		margin: 50px 0
  }
}

.c-reviews:before {
    top: 0;
    left: 0;
    background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 30%);
    content: " ";
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
}


.c-reviews:after {
    top: 0;
    right: 0;
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 30%);
    content: " ";
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.hpw-box-r {
	z-index: 35;
	position: relative
}

.hpw-box-r::before {
	content: '';
    left: 80px;
    right: 80px;
    position: absolute;
    z-index: 31;
    top: calc(38% - 1.5px);
    height: 2px;
    background: #aebae2
}

.hpw-box-r>.row {
	z-index: 32
}

.hpw-item {
	text-align: center;
	z-index: 33;
	margin: 20px 0
}

.hpw-item .hpw-icon {
	height: 87px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.hpw-item .hpw-icon img {
	max-height: 87px
}

.hpw-item .hpw-num {
	position: relative;
	display: inline-block
}

.hpw-item .hpw-num::after {
	content: '';
	z-index: 34;
	position: absolute;
	left: -50px;
	right: -50px;
	top: 0;
	background-color: var(--main-bg);
	height: 100%
}

.hpw-item .hpw-num span {
	height: 74px;
	width: 74px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #00B14D;
	border-radius: 12px;
	margin-top: 40px;
	position: relative;
	z-index: 36;
	font-size: 30px;
	color: #fff;
	font-weight: 900
}

.hpw-item .hpw-num::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	width: 0;
	height: 0;
	border-top: solid 12px #00B14D;
	border-left: solid 12px transparent;
	border-right: solid 12px transparent
}

.hpw-item .hpw-title {
	margin-top: 35px;
	font-size: 19px;
	font-weight: 600;
	color: var(--tc)
}

.hpw-item .hpw-text {
	margin-top: 12px;
	font-size: 13px;
	line-height: 23px;
	color: #9aacbd
}
.payments-area {
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px
}

.p-cards {
	position: relative;
    z-index: 10;
    background: #fff;
  	box-shadow: 0px 34px 35px rgba(160, 171, 191, 0.21);
    border-radius: 15px;
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: -0.28px;
    text-align: center;
	height: 80px;
	border: 1px solid var(--border);
 	transition: 500ms all
}

.p-cards:hover {
  	transform: translateY(-0.5rem);
 	transition: 500ms all;
  	cursor: pointer
}

.p-cards img {
	max-height: 50px
}

.hs-footer {
    position: relative;
  	margin-top: 250px
}

.hs-footer > div::before {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50%;
    height: 440px;
    background-image: url(https://storage.perfectcdn.com/85b6og/xz8nupjmegw1td5m.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.hs-footer > div::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50%;
    height: 440px;
    background-image: url(https://storage.perfectcdn.com/85b6og/eiulsxcszqri7x2g.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
}

.hs-footer .btn-secondary {
    background: linear-gradient(to top, #13c143, #22ff5f);
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
    color: var(--tw) !important;
    text-decoration: none;
    transition: 0.14s ease;
    min-width: 225px;
  	position: relative;
  	z-index: 1000;
  	border: none
}

#aboutUsCount {
    position: relative;
    background: var(--mc);
    padding: 25px 0;
}

.usCount {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#aboutUsCount::after {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    bottom: -14px;
    width: 40px;
    height: 15px;
    background: var(--mc);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
}

.usCount .item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.usCount .item .icon {
  	background: #ffffff22;
    min-width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 26px;
    color: #fff;
}

.usCount .item .text {
    color: #b4c5ff;
    font-size: 18px;
    line-height: 25px;
}

.usCount .item .text span {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
}

footer {
    background: var(--main-bg);
  	box-shadow: 5px 3px 35px rgba(160, 171, 191, 0.21)
}

footer .footerTop {
    padding: 25px 0;
}

footer .footerTop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footerTop .action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footerTop .action > :is(a, button) {
    background: rgb(204 204 204 / 25%);
    color: var(--mc);
    font-size: 20px;
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    transition: 0.2s;
    cursor: pointer;
}

.footerTop .action > :is(a, button):hover {
    background: var(--mc);
    color: #fff
}

footer .footBottom {
    background: #222637
}

footer .footBottom .container .copyright {
    color: #a7afd0;
}

footer .footBottom .container {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footer-menu {
    display: flex;
    gap: 40px;
    padding-left: 0;
  	margin-bottom: 0
}

footer .footer-menu a {
    color: var(--tw)
}

footer .footer-menu a:hover {
    color: var(--mc)
}

@media (max-width: 992px) {
	.payments-area {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}	
    .hs-footer > div::before, .hs-footer > div::after, .hpw-box-r::before {
          display: none
    }
    .p-cards img {
        max-height: 40px;
    }  
  .section-header {
      margin-bottom: 15px;
  }  
  .hs-footer {
  		margin-top: 75px
  }
    .usCount {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }  
      .usCount .item {
        background: #ffffff10;
        border-radius: 12px;
        padding: 10px;
    }
      .usCount .item .icon {
        min-width: 40px;
        height: 40px;
        font-size: 20px;
    }
      .usCount .item .text {
        line-height: 18px;
        font-size: 14px;
    }
      .usCount .item .text span {
        font-size: 18px;
    }
    .usCount .item .icon {
        border: none;
        border-radius: 7px;
        background: #ffffff12;
    }
  footer .footerTop .container, footer .footBottom .container {
      flex-direction: column;
      gap: 15px
  }  
  footer .footBottom .container .copyright {
  		text-align: center;
    	order: 2
  }
  footer .footer-menu {
  		text-align: center;
    	gap: 15px;
    	order: 1
  }
}

.form-control, .form-control:disabled, .form-control[readonly] {
    display: block;
    width: 100%;
    height: 55px;
    font-size: 14px;
    border: 1px solid var(--border);
    font-weight: 400;
    line-height: 1.75;
    color: #606f85;
    background: var(--main-bg);
    background-clip: padding-box;
    border-radius: var(--radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control:focus {
	border: 1px solid var(--mc)!important;
  	background: transparent;
	outline: none;
	box-shadow: rgb(67 162 255 / 14%) 0px 10px 36px 0px, rgb(35 143 255 / 0%) 0px 0px 0px 1px;
}

.dark .form-control {
	color: var(--tw)
}

.hlight-box {
    margin-bottom: 30px;
    padding: 25px;
    background: #fff;
    border-radius: var(--radius);
}

.hlight-box .icon {
    font-size: 42px;
    width: 50px;
    text-align: center;
}

.hlight-box:nth-child(1) .icon {
    color: #FFB645;
}

.hlight-box:nth-child(2) .icon {
    color: var(--mc);
}

.hlight-box:nth-child(3) .icon {
    color: #00B14D;
}

.hlight-box .hlight-first {
    font-size: 19px;
    line-height: 24px;
    color: var(--tc);
    font-weight: 600;
}

.hlight-box .hlight-second {
    font-size: 14px;
    line-height: 25px;
    color: #9aacbd;
    margin: 0;
}

.already-account {
    background: #a3b7ff40;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid var(--mc);
    color: var(--mc)
}

.outside-title {
	margin: -50px auto 50px auto;
  	text-align: center;
  	width: max-content
}

@media (max-width: 992px) {
  .outside-title {
      margin: 0 auto 25px auto
  }
}

.outside-title {
  	position: relative;
    font-weight: 700;
}

.outside-title:after {
    content: '';
    position: absolute;
    background-color: #00B14D30;
    border-radius: 0.375rem;
    left: 0;
    height: 7px;
    width: 100%;
    bottom: 0
}

/* APP */

.app {
  background: var(--second-bg);
  min-height: 100vh;
  min-width: 100%;
}

.app .btn.btn-primary {
  -webkit-box-shadow: none!important;
          box-shadow: none!important;
}

.sidebar {
  width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0px;
  left: 0px;
  height: 100vh;
  z-index: 100;
  position: fixed;
  background-color: var(--white-bg);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}

@media (min-width: 992px) {
  .sidebar {
    z-index: 99
  }
}

.sidebar .sidebar-dismiss {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: #e5f1ff;
  border-radius: 50%;
  padding: 0 !important;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #1967ff;
}

.sb-head {
  padding: 25px 24px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sb-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
}

.sb-balance {
  background: #f2f8ff;
  border: 1px solid #e5f1ff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 15px;
  padding: 9px;
  margin: 20px 34px;
  display: block;
  color: var(--tc);
}

.sb-balance .icon {
  width: 46px;
  height: 46px;
  background: var(--mc);
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sb-balance .icon img {
  width: 22px;
}

.sb-balance .b-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
}

.smenu {
  list-style: none;
  margin: 0px;
  padding: 20px 15px 125px 15px;
}

.smenu .smenu-item {
  position: relative;
}

.smenu .smenu-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  color: var(--tc);
  margin-bottom: 10px;
  -webkit-transition: 0.14s ease;
  transition: 0.14s ease;
  border-radius: var(--radius);
}

.smenu .smenu-link.active {
  background: linear-gradient(to top, #0139ff, #4a72ff);
  border: 1px solid #508bff;
  color: #fff;
  margin-bottom: 10px;
}

.smenu .smenu-link:hover {
  background-color: #f2f8ff;
}

.dark .smenu .smenu-link:hover {
  background-color: var(--main-bg);
}

.smenu .smenu-link .smenu-icon {
  	width: 34px;
    height: 34px;
    line-height: 20px;
    font-size: 16px;
    background: var(--second-bg);
    margin-right: 15px;
    text-align: center;
    line-height: 34px;
    border-radius: 7px;
}


.smenu .smenu-link.active .smenu-icon {
    background: var(--mc-hover)
}

.smenu .smenu-link .smenu-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
}

.app .app-header {
  position: fixed;
  left: 300px;
  padding: 15px 40px;
  z-index: 99;
  right: 0px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

.app .app-header.active {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  padding-top: 14px;
  padding-bottom: 14px;
}

.app .app-header.active .hd-info {
  display: none;
}

.app .app-header.active::after {
  opacity: 0;
}

.app .app-header .row {
  min-height: 50px;
}

.app .app-header::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 40px;
  right: 40px;
  height: 1px;
  background-color: var(--border);
}

.hd-title {
  font-weight: bold;
  font-size: 19px;
  line-height: 24px;
  color: #25396f;
  margin-bottom: 0px;
}

.hd-info {
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #8f96aa;
  margin-bottom: 0px;
  margin-top: 8px;
}

.page {
  	padding: 100px 0px 40px 300px;
}

.page .container-fluid {
  padding: 0 40px;
}

.hd-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.hd-btn {
  display: none;
}

.mobHid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 640px) {
  .hd-right {
    text-align: right;
  }
  .hd-right.mobHid {
    display: none;
  }
  .hd-right .hd-shadow {
    content: '';
    position: absolute;
    right: -500px;
    top: -500px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: transparent;
    -webkit-box-shadow: -160px 260px 300px rgba(0, 0, 0, 0.3);
            box-shadow: -160px 260px 300px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    -webkit-transition: .14s ease;
    transition: .14s ease;
  }
  .hd-right .hdi {
    z-index: 1002;
    position: relative;
  }
  .hd-btn {
    display: block;
    z-index: 1004;
    position: relative;
  }
}

@media (max-width: 1199.98px) {
  .sidebar {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  .sidebar.active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .sidebar .sidebar-dismiss {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .app .app-header {
    left: 0px;
    padding: 15px 0;
  }
  .page {
    padding-left: 0px;
  }
  .sidebar {
    width: 280px;
  }
  .smenu {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sb-balance {
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .sidebar {
    width: 260px;
  }
  .app .app-header {
    left: 260px;
  }
  .page {
    padding-left: 260px;
  }
  .smenu {
    padding-left: 20px;
    padding-right: 20px;
  }
  .sb-balance {
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media (max-width: 1399.98px) {
  .page .container-fluid {
    padding: 0 15px;
  }
}

.switcher {
  height: 50px;
  border-radius: 15px;
  background-color: #fff;
  padding: 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  position: relative;
}

.switcher .active-bg {
  content: "";
  position: absolute;
  background: var(--mc);
  -webkit-box-shadow: 0px 4px 16px rgba(25, 103, 255, 0.25);
          box-shadow: 0px 4px 16px rgba(25, 103, 255, 0.25);
  border-radius: 15px;
  left: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
  z-index: 1;
  -webkit-transition: 0.14s ease;
  transition: 0.14s ease;
}

.switcher .switcher-item {
  position: relative;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: transparent;
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
  font-size: 19px;
  line-height: 19px;
  color: #6a7b91;
  -webkit-transition: 0.14s ease;
  transition: 0.14s ease;
}

.switcher .switcher-item.active {
  color: #fff;
}

.hbtn {
  font-size: 19px;
  line-height: 26px;
  padding: 12px 20px;
  background: #fff;
  border-radius: 15px;
  color: #6A7B91;
  height: 50px;
  width: 50px
}

.hbtn.hbtn-currency {
	width: auto
}

.hbtn:focus {
	outline: 0!important;
  	border: transparent!important;
  	box-shadow: none!important
}

.sidebar .btn-danger {
    background: rgba(238, 91, 91, 0.05);
    color: #EE5B5B!important
}

.sidebar .btn-danger:hover {
    background: #EE5B5B;
    color: #fff!important
}



@media only screen and (max-width: 1024px) {
  .hdi .btn {
  		display: inline
  }
  .hdi .hbtn {
      padding: 12px 10px;
  }
}

.app .card {
	background: var(--white-bg);
  	border: 1px solid var(--border)
}

.app .card-body {
	padding: 15px
}

.nav-custom {
  margin: 0 -7px;
}

.nav-custom .nav-item {
  padding: 4px 7px;
}

.nav-custom .nav-link {
  background: #f4f9ff;
  border-radius: 15px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: var(--tc);
}

.dark .nav-custom .nav-link {
  background: #020527;
  color: var(--tw);
}

.nav-custom .nav-link.active {
  background: var(--mc);
  color: var(--tw);
}

.nav-custom .nav-link, .nav-custom .nav-link:hover, .nav-custom .nav-link:focus {
    width: 100%;
    border: 0;
    outline: 0;
}

.dark .app .app-header.active {
    background: rgba(9, 16, 30, 0.8);
}

.dark .sb-balance {
    background: #020527;
    border: 1px solid var(--border);
}

.select2-selection__icon .fab.fa-instagram, .nwo-categories .fab.fa-instagram, .brands-icon .fab.fa-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-twitter, .nwo-categories .fab.fa-twitter, .brands-icon .fab.fa-twitter {
  background: #1da1f2;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.select2-selection__icon .fab.fa-youtube, .nwo-categories .fab.fa-youtube, .brands-icon .fab.fa-youtube {
  background: #ff0042;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-whatsapp, .nwo-categories .fab.fa-whatsapp, .brands-icon .fab.fa-whatsapp {
  background: #25D366;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-android, .nwo-categories .fab.fa-android, .brands-icon .fab.fa-android {
  background: #3DDC84;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.select2-selection__icon .fab.fa-facebook-f, .nwo-categories .fab.fa-facebook-f, .brands-icon .fab.fa-facebook-f {
  background: #207eff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-soundcloud, .nwo-categories .fab.fa-soundcloud, .brands-icon .fab.fa-soundcloud {
  background: #ff5836;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-spotify, .nwo-categories .fab.fa-spotify, .brands-icon .fab.fa-spotify {
  background: #1DB954;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-tiktok, .nwo-categories .fab.fa-tiktok, .brands-icon .fab.fa-tiktok {
  background: #524f4f;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-twitch, .nwo-categories .fab.fa-twitch, .brands-icon .fab.fa-twitch {
  background: #4b367c;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-telegram-plane, .nwo-categories .fab.fa-telegram-plane, .brands-icon .fa-telegram-plane {
  background: #2b9fd2;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-snapchat-ghost, .nwo-categories .fab.fa-snapchat-ghost, .brands-icon .fab.fa-snapchat-ghost {
  background: #FFFC00;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-discord, .nwo-categories .fab.fa-discord, .brands-icon .fab.fa-discord {
  background: #1090F3;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-reddit-alien, .nwo-categories .fab.fa-reddit-alien, .brands-icon .fab.fa-reddit-alien {
  background: #F43708;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-linkedin-in, .nwo-categories .fab.fa-linkedin-in, .brands-icon .fab.fa-linkedin-in {
  background: #0077b0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-steam, .nwo-categories .fab.fa-steam, .brands-icon .fab.fa-steam {
  background: #00adee;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-pinterest, .nwo-categories .fab.fa-pinterest, .brands-icon .fab.fa-pinterest {
  background: #ff5858;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-selection__icon .fab.fa-tumblr, .nwo-categories .fab.fa-tumblr, .brands-icon .fab.fa-tumblr {
  background: #1c3764;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.select2-container {
    width: 100% !important;
}

.select2.select2-container .select2-selection {
	-webkit-border-radius: var(--radius);
	-moz-border-radius: var(--radius);
	border-radius: var(--radius);
	padding: 12px 24px;
	color: var(--tc);
	display: flex;
	background: var(--main-bg);
	outline: 0;
	transition: .15s ease-in-out;
	align-items: center;
	border: 1px solid var(--border);
	width: 100%
}

.select2.select2-container .select2-selection .select2-selection__rendered {
	line-height: 32px;
	padding-right: 33px;
	color: var(--tc);
	border: 0;
	width: 100%;
	display: flex
}

.select2.select2-container .select2-selection .select2-selection__arrow {
	-webkit-border-radius: 0 var(--radius) var(--radius) 0;
	-moz-border-radius: 0 var(--radius) var(--radius) 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	height: 100%;
	width: 26px
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
	background: var(--second-bg);
	border-radius: var(--radius)
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
	-webkit-border-radius: 0 var(--radius) 0 0;
	-moz-border-radius: 0 var(--radius) 0 0
}

.select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
	border: 0 solid #34495e
}

.select2.select2-container.select2-container--focus .select2-selection {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex;
	align-items: center
}

.select2-container .select2-dropdown {
	border-radius: var(--radius) !important;
	background: #fff;
	border: 0;
	margin-top: 8px !important;
	overflow: hidden
}

.dark .select2-container .select2-dropdown {
	background: var(--main-bg)
}

.select2-container .select2-dropdown .select2-results ul {
	background: 0 0;
	color: var(--tc);
	display: flex;
	flex-direction: column;
	max-height: 350px;
	padding: 5px
}

.select2-results__option[aria-selected] {
	cursor: pointer;
	transition: .2s;
	padding: 6px;
	font-size: 12px
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--main-bg) !important;
	padding: 6px
}

.select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar {
	width: 6px
}

.select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar-track {
	background: 0
}

.select2-container .select2-dropdown .select2-results ul::-webkit-scrollbar-thumb {
	background-color: var(--border);
	border-radius: var(--radius)
}

.select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
	background-color: var(--border) !important;
	transition: .2s;
	color: var(--tc);
	border-radius: 8px
}

.search-dropdown .input-wrapper .input-wrapper__prepend {
	color: var(--tc)
}

.select2-results__option {
	color: var(--tc) !important;
	font-size: 14px !important
}

.select2-results__option a {
	color: var(--tc) !important;
  	padding: 3px!important
}

.select2-container--open .select2-dropdown--below {
	border: 1px solid var(--border);
	-webkit-box-shadow: 0 5px 35px rgb(49, 156, 255, .15);
	box-shadow: 0 5px 35px rgb(49, 156, 255, .15);
}

.select2-search--dropdown {
    display: none!important
}

.noi-title {
    background: var(--mc);
    border-radius: var(--radius);
    border-radius: 10px;
    text-align: center;
    padding: 22px 14px;
    color: var(--tw);
    margin-bottom: 10px;
}

.noi-title h2 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0px;
}

.noii-content {
    color: var(--tc);
    font-size: 14px;
}

.noi-card .alert {
	margin-bottom: 0
}
.noi-item {
    position: relative;
    background: var(--main-bg);
  	border: 1px solid var(--border);
    border-radius: 10px;
    display: block;
    padding: 12px;
}

@keyframes key-animation {
	0% {
		opacity: 0;
		transform: translateY(10px)
	}

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

@keyframes dropdown-active {
	0% {
		opacity: 0;
		transform: translateY(-50px);
		max-height: 0
	}

	100% {
		opacity: 1;
		transform: translateY(0) skewY(0)
	}
}

.dropdown-menu {
	background: var(--main-bg);
	border: 1px solid var(--border);
	border-radius: 7px;
	padding: 10px 0;
	-webkit-animation: .3s cubic-bezier(.25, .1, .15, 1.34) forwards dropdown-active;
	animation: .3s cubic-bezier(.25, .1, .15, 1.34) forwards dropdown-active;
	margin-top: 60px
}

.dropdown-menu .dropdown-item {
	color: var(--tc);
	padding: 6px 24px;
	font-size: 14px
}

.dropdown-menu .dropdown-item:hover {
	background-color: rgba(255, 255, 255, .1)
}

.tab-content>.active {
	-webkit-animation: .3s ease-in-out key-animation;
	animation: .3s ease-in-out key-animation
}

.no-widget {
    background: var(--main-bg);
    border-radius: 15px;
    border: 1px solid var(--border);
    padding: 15px 25px 15px 25px;
    position: relative;
    z-index: 4;
    height: 100%;
  	overflow: hidden
}

.no-widget .border-1 {
    padding: 5px 10px;
}

.no-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.no-icon, .no-widget button:hover {
    background: var(--mc-trans);
    color: var(--mc);
}

.no-widget h5 {
    font-size: 18px;
  	font-weight: 600;
    margin-bottom: 0;
}

.no-widget button {
    background: #00B14D;
    color: var(--tw);
    border-radius: 15px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    transition: .3s;
    margin-top: -5px;
}

.card-shadow::before {
    content: "";
    position: absolute;
    top: 95%;
    right: 80%;
    width: 60%;
    height: 50%;
    transform: translate(100%, 60%) scale(1);
    transition: .14s ease;
    background: rgb(40, 203, 105);
    background: linear-gradient(120deg, var(--mc) 0%, var(--mc-trans) 100%);
    border-radius: 100px;
    filter: blur(60px);
    z-index: 0;
}

.nwo-cat-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--main-bg);
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 15px;
    justify-content: center;
    width: 50px;
    height: 50px;
  	color: var(--tc)
}

.nwo-cat-btn:hover {
    background: var(--mc-trans);
  	border-color: var(--mc)
}

.nwo-cat-btn:focus {
	outline: 0
}

.redeem-btn.disabled {
  	pointer-events: none;
    cursor: not-allowed;
    opacity: .6
}

#new-order-cats .swiper-slide {
  width: auto;
}

@media (max-width: 992px) {
  .page .home-fade {
  		display: none
  }
}

.c-title {
    padding: 15px 25px
}

.c-title h2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: var(--mc);
    margin-bottom: 0px;
}

.divider {
    border-bottom: 1px solid var(--border);
}

.last-payments {
  position: relative;
}

.last-payments .last-payment {
  margin-bottom: 20px;
}

.last-payments .last-payment .lp-id {
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  color: var(--tw);
  padding: 16px 22px;
  width: 100%;
  border-radius: 14px;
  text-align: center;
  background: var(--mc);
  display: block;
}

.last-payments .last-payment .lp-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--tc)
}

.last-payments .last-payment .lp-text {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #8598b5;
}

pre {
    background: var(--mc-trans);
    color: var(--mc);
    padding: 15px;
    border-radius: 15px;
}

.order-status .os-widget {
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 13px;
}

.os-widget.completed {
  background: #28a74521;
  border: 1px solid #28a745;
  color: #28a745
}

.os-widget.processing {
  background: #4a5cf621;
  border: 1px solid #4a5cf6;
  color: #4a5cf6
}

.os-widget.partial {
  background: #6a7b9121;
  border: 1px solid #6a7b91;
  color: #6a7b91
}

.os-widget.pending {
  background: #ffc10721;
  border: 1px solid #ffc107;
  color: #ffc107;
}

.os-widget.inprogress {
  background: var(--mc-trans);
  border: 1px solid var(--mc);
  color: var(--mc)
}

.os-widget.canceled {
  background: #ff000021;
  border: 1px solid #ff0000;
  color: #ff0000
}

.card-af-top {
    margin-bottom: 30px;
}

.dh-icon {
    background-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 50%;
    position: relative;
    height: 64px;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 400;
}

.dh-icon.icon-info {
    color: #5AD7FF;
    background-color: rgba(90, 215, 255, 0.25);
}

.dh-icon.icon-secondary {
    color: #ff5aa5;
    background-color: rgba(255, 90, 165, 0.25);
}

.dh-icon.icon-primary {
    color: #2dfad5;
    background-color: rgba(45, 250, 213, 0.25);
}

.af-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--tc);
    margin-bottom: 0px;
}

.s-color {
    color: #ff5aa5 !important;
}

.p-color {
    color: #2dfad5 !important;
}

.i-color {
    color: #5AD7FF !important;
}

.payment-history {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    max-height: 450px;
    overflow-x: auto;
    gap: 10px;
}

.history-item {
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    background: var(--main-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    width: 100%;
}

.history-item-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 10px;
}

.history-status .os-widget, .ticket-status .os-widget, .updates-status .os-widget {
    padding: 3px 10px;
    border-radius: 7px;
    font-size: 14px;
    min-width: 100px;
    text-align: center;
    font-weight: 500;
  	white-space: nowrap
}

.hit-first, .hit-last {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.hit-first .history-id {
    background: var(--border);
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 8px;
    text-align: center;
    color: var(--tc);
}

.history-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 7px;
    font-size: 13px;
    font-weight: 600;
}

.history-item-bottom .hib-first {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.history-item-bottom .hib-first .date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--tc);
    background: var(--border);
    padding: 5px 10px;
    border-radius: 8px;
}

.api-box,
.api-code,
.api-item,
.api-list,
.api-list .api-item,
.api-top-item,
.ns-box,
pre[class*=language-] {
	display: flex
}

.payment-history {
  	display: grid;
	grid-template-columns: repeat(1, 1fr);
  	gap: 10px
}

.api-item,
.api-list,
.api-top-item {
	background: var(--main-bg)
}

.api-title {
	font-size: 18px;
	color: var(--tc);
	margin-top: 10px;
	margin-bottom: 10px
}

.api-box {
	flex-direction: column
}

.api-top-item {
	padding: 10px;
	border: 1px solid var(--border);
	justify-content: space-between;
	align-items: center;
	color: var(--tc);
	border-radius: 12px
}

.api-top-item a {
	color: var(--tc);
	margin-left: 10px
}

.api-code {
	flex-direction: column;
	margin-bottom: 10px
}

.api-item,
.api-list .api-item {
	padding: 10px 15px;
	color: var(--tc)
}

.api-item {
	justify-content: space-between;
	border-radius: var(--radius) var(--radius) 0 0;
	font-weight: 700;
	border: 1px solid var(--border);
	border-bottom: 0
}

.api-list {
	flex-direction: column;
	overflow: hidden;
	border-radius: 0 0 var(--radius) var(--radius);
	border: 1px solid var(--border);
	border-top: 0
}


.api-list .api-item,
.panel-top {
	justify-content: space-between
}

.ns-box,
code {
	flex-direction: column
}

.api-list .api-item {
	border-top: 1px solid var(--border);
	background: 0;
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
	border-left: 0;
	border-right: 0
}

.api-baslik {
	background: var(--tc) !important;
	border-radius: var(--radius) var(--radius) 0 0 !important
}

.ns-box,
pre {
	background: var(--tc);
	border-radius: var(--radius);
	padding: 10px
}

pre {
	color: var(--tc);
	overflow: auto
}

.api-item b {
	width: 50%;
	color: var(--tc)
}

.ns-box {
	margin-bottom: 20px;
	border: 1px solid var(--border)
}

pre[class*=language-] {
	color: var(--mc);
	background: var(--mc-trans);
	margin: 0;
	overflow: auto
}

code {
	padding: 0;
	margin-top: -20px
}

@media print {

	code[class*=language-],
	pre[class*=language-] {
		text-shadow: none
	}
}

:not(pre)>code[class*=language-] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal
}

@media (min-width: 991.98px) {
	.api-top {
		grid-template-columns: 1fr 1fr;
		display: grid;
		gap: 10px
	}
}


@media (max-width: 991.98px) {
	.api-top {
		grid-template-columns: 1fr;
		gap: 10px;
		display: grid;
		font-size: 12px
	}	
}

.custom-table tbody tr:nth-of-type(odd) {
    background-color: var(--main-bg)
}

.custom-table tbody tr:nth-of-type(even) {
    background-color: var(--white-bg)
}

.custom-table tbody th, .custom-table tbody td {
    color: var(--tc);
    padding-bottom: 15px;
    padding-top: 15px;
    font-weight: 500;
    border: none;
    font-size: 13px;
}

.custom-table td, .custom-table th {
    border-color: #ffffff05;
    vertical-align: inherit;
    padding-bottom: 10px;
    padding-top: 10px;
  	border-top: none
}

.custom-table tbody tr:first-child {
    border-radius: var(--radius) var(--radius) 0 0
}

.custom-table tbody tr:first-child td:first-child {
    border-radius: var(--radius) var(--radius) 0 0
}

.custom-table tbody tr:first-child td:last-child {
    border-radius: 0 var(--radius) 0 0
}

.custom-table tbody tr:last-child {
    border-radius: 0 0 var(--radius) 0
}

.custom-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--radius)
}

.custom-table tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--radius) 0
}

.custom-table .cat-id {
	background: var(--mc)!important;
	color: var(--tw);
}

.custom-table .cat-id td {
	font-size: 18px;
  	color: var(--tw)
}

.custom-table .services-id {
	background: var(--mc-trans);
    text-align: -webkit-center;
    padding: 5px 10px;
    border-radius: 10px;
    color: var(--mc);
    font-weight: 700;
    cursor: pointer;
}

.custom-table thead th {
	border: none
}

.custom-table {
	color: var(--tc)
}

.custom-table thead tr.cat-id th:first-child {
	border-radius: 10px 0 0 10px
}

.custom-table thead tr.cat-id th:last-child {
	border-radius: 0 10px 10px 0
}

.custom-table thead tr.cat-id {
	border-radius: 10px
}

.custom-table .btn:focus {
	box-shadow: none!important;
  	outline: 0!important;
  	border: none!important
}

.dropdown .dropdown-toggle {
	min-height: 50px
}

.input-group .form-control {
	height: 50px
}

.input-group-btn .btn-primary {
	height: 50px;
  	border-radius: 0 15px 15px 0;
}

.modal-content {
    background: var(--main-bg);
	border-radius: 25px;
    max-width: 600px;
    width: 100%;
    position: relative;
  	border: none
}

.modal-header {
    background: url(https://storage.perfectcdn.com/85b6og/d8ijbe0djpq1c32z.png), var(--mc);
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 35px 30px 75px;
    border-radius: 25px 25px 0 0;
}

.modal-header, .modal-footer {
	border-color: var(--border)
}

.modal-title {
	font-size: 20px;
  	color: var(--tw)
}

.modal-body .modal-body-content {
	background: var(--white-bg);
    border: 1px solid var(--border);
    box-sizing: border-box;
    border-radius: 15px;
    padding: 28px;
    margin-top: -50px;
    z-index: 2;
    position: relative;
    color: var(--tc);
}

.pagination .page-item {
	margin: 0 2px
}

.pagination .page-item.active .page-link::before {
	content: "";
	bottom: 0;
	height: 3px;
	width: 14px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: #253cff
}

.pagination .page-item:first-child {
	border-right: 1px solid var(--border)
}

.pagination .page-item:first-child .page-link {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	font-weight: 400
}

.pagination .page-item:last-child {
	border-left: 1px solid var(--border)
}

.pagination .page-item:last-child .page-link {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-weight: 400
}

.pagination .page-item .page-link {
	background: var(--main-bg);
	border: none;
	margin: 0;
	height: 50px;
	padding: 0;
	min-width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 15;
	line-height: 18px;
	color: var(--tc) !important;
	position: relative
}

.pagination .page-item .page-link:focus {
	z-index: 2
}

.pagination .page-item.active .page-link {
	background-color: var(--mc);
	color: var(--tw)
}

.nav-custom-2 {
	gap: 10px
}

.nav-custom-2 .nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--main-bg);
    border: 1px solid var(--border);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 15px;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: var(--tc);
    padding: 18px 20px;
}

.nav-custom-2 .nav-link .icon {
    font-size: 14px;
    width: 26px;
    text-align: left;
}

.nav-custom-2 .nav-link.active {
    background: var(--mc);
    border: 1px solid var(--mc-hover);
}

.services-search {
	position: relative
}

.services-search .icon {
	position: absolute;
  	right: 15px;
  	top: 17px
}

@media (max-width: 992px) {
  .nav-custom-2 {
      gap: 10px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
  }
}

.dark .hbtn, .dark .switcher {
    background: var(--white-bg);
    color: var(--tw);
}

.ticket-detail-box {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 10px;
    background: var(--main-bg);
}

.ticket-detail-box .sup-item {
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ticket-detail-box .sup-item .icon {
    background: var(--mc);
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    border-radius: 10px;
    font-size: 28px;
    color: #fff;
}

.ticket-detail-box .sup-item .content, .updates-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticket-detail-box .sup-item-title {
    color: var(--tc);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.409px;
    letter-spacing: -.57px;
}

.ticket-detail-box .sup-item-value {
    color: #9eabc5;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 18.182px;
    letter-spacing: -.64px;
}

.ticket-header {
    display: flex;
    align-items: center;
    gap: 23px;
}

.ticket-header .item.item-title {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
}

.ticket-header .item.item-title .title {
    color: var(--tc);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.547px;
}

.ticket-header .item.item-title .value {
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.42px;
}

.ticket-header .ticket-id-title {
    background: var(--second-bg);
    border-radius: var(--border);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    padding: 8px 14px;
    min-height: 35px;
    display: flex;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}

.ticket-header .text {
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: -.032px;
}

.ticket-body {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    border-radius: 15px;
    max-height: 500px;
    margin: 15px 0;
}

.ticket-body .ticket-message.ticket-message-support {
    align-self: flex-end;
}

.ticket-body .ticket-message-box {
    border-radius: 15px 15px 15px 0;
    border: 1px solid var(--mc);
    background: var(--mc-trans);
    padding: 14px 22px;
    color: var(--mc);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: .4px;
}

.light .ticket-body .ticket-message-box {
	background: var(--mc);
  	color: var(--tw)
}

.light .ticket-body .ticket-message.ticket-message-support .ticket-message-box {
	background: #fafafa
}

.ticket-body .ticket-message.ticket-message-support .ticket-message-box {
    border: 1px solid var(--border);
    background: var(--second-bg);
    border-radius: 15px 15px 0;
    color: var(--tc);
}

.ticket-body .ticket-message-info {
    padding-top: 5px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    color: #9eabc5;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -.443px;
}

.ticket-body .ticket-message {
    max-width: 450px;
    width: 100%;
}

.ticket-body .ticket-message-info .ticket-owner.support {
    color: var(--tc);
  	font-weight: 600
}

.ticket-body .ticket-message-info .ticket-owner .verified {
    color: #e2b719;
}

.ticket-footer .message-send {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.ticket-footer .message-send textarea {
    flex: 1;
    min-height: 1lh;
    resize: none;
    padding-top: 18px;
    padding-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    outline: 0;
    box-shadow: none;
    background: var(--main-bg);
}

.ticket-footer .message-send .tickets-uploader {
    padding: 15px;
    border-radius: 15px;
}

.files-wrapper a {
    color: var(--mc);
}

.ticket-footer .message-send .files-label {
    display: none;
}

@media (max-width: 992px) {
  .ticket-body {
  		padding: 25px 10px
  }
}

.flex-col {
	display: flex;
  	flex-direction: column
}

.flex-col .primary-color {
	font-size: 13px;
  	font-weight: 300
}

.card .card-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: var(--main-bg);
    padding: 0px;
    margin-left: 0px;
}

.card .card-header .card-custom-title {
    padding: 20px 0px;
    position: relative;
    margin-left: 35px;
    display: inline-block;
}

.card .card-header .d-head-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    background-color: var(--mc);
    color: var(--tw)
}

.card .card-header .card-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0;
}

.card .card-header .card-custom-title::after {
    content: "";
    position: absolute;
    background-color: var(--border);
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--mc);
}

.cp-exclamation {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #EE5B5B;
    font-size: 12px;
    font-weight: 700;
}

.card.card-shadow {
	overflow: hidden
}

.aft-item {
    display: flex;
    gap: 17px;
    align-items: center;
    margin: 5px 0;
}

.aft-item .title {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    color: #4e5d7c;
    margin-bottom: 4px;
}

.aft-item .text {
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--tc)
}

.aft-box {
    background: var(--main-bg);
    border-radius: 10px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.aft-box .title {
    font-weight: 500;
    font-size: 13px;
    line-height: 17px;
    color: var(--tc);
}

.aft-box .text {
    font-weight: 600;
    font-size: 25px;
    line-height: 25px;
    color: var(--tc)
}

.aft-box::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 5px;
    background-color: #fff;
    transition: 0.14s ease;
}

.aft-box-row {
  margin: 0 -8px -10px;
}

.aft-box-row>.col {
  padding: 0 8px;
}

.aft-box-row>.col-lg:nth-child(1n) .aft-box::after {
  background-color: #ff5aa5;
}

.aft-box-row>.col-lg:nth-child(2n) .aft-box::after {
  background-color: #2dfad5;
}

.aft-box-row>.col-lg:nth-child(3n) .aft-box::after {
  background-color: #ED7E58;
}

.aft-box-row>.col:nth-child(4n) .aft-box::after {
  background-color: #2dfad5;
}

.aft-box-row>.col-lg:nth-child(5n) .aft-box::after {
  background-color: #5AD7FF;
}

.aft-box-row>.col-lg:nth-child(6n) .aft-box::after {
  background-color: #EE5B5B;
}

.aft-box:hover::after {
  height: 10px;
}

.cp-sns-dns {
    background: var(--mc-trans);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--mc);
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 20px;
}

.cp-sns-title {
    font-weight: 600;
    font-size: 19px;
    line-height: 23px;
    color: var(--tc);
    margin-bottom: 30px;
}

.aq {
  position: relative;
}

.aq .aq-item {
  background: var(--main-bg);
  border: 1px solid var(--border);
  border-radius: 15px;
  transition: 0.32s cubic-bezier(0.17, 0.67, 0.71, 1.34);
  margin-bottom: 10px;
}

.aq .aq-item:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(103, 103, 103, 0.16);
}

.aq .aq-item .aq-content {
  padding: 0px 26px 0px;
  overflow: hidden;
  max-height: 0px;
  transition: 0.32s ease;
}

.aq .aq-item .i-1 {
  display: block;
}

.aq .aq-item .i-2 {
  display: none;
}

.aq .aq-item.active .i-1 {
  display: none;
}

.aq .aq-item.active .i-2 {
  display: block;
}

.aq .aq-item.active .aq-content {
  padding: 8px 26px 24px;
  max-height: 1000px;
}

.aq .aq-btn {
  width: 100%;
  display: block;
  font-size: 16px;
  line-height: 20px;
  display: flex;
  color: var(--tc);
  align-items: center;
  padding: 24px 0px;
  border: none;
  outline: none;
  background-color: transparent;
}

.aq .aq-btn .aq-btn-text {
  font-weight: 500;
  padding-left: 20px;
  text-align: left;
}

.aq .aq-btn .aq-btn-right {
  color: var(--mc);
  font-size: 20px;
  margin-left: auto;
  width: 72px;
  opacity: 0.6;
}

@media (max-width: 991.98px) {
    .no-widget button {
        padding: 0 7px;
        height: 20px;
        line-height: 20px;
        margin-top: -2px;
      	border-radius: 5px
    }
    .no-widget button span {
        display: none;
    }  
    .no-widget h5 {
        font-size: 14px;
    }
    .no-icon {
        width: 18px;
        height: 18px;
        border-radius: 5px;
        font-size: 10px;
    }  
    .no-widget .border-1 {
        padding: 5px 10px 5px 0;
    }  
    .order-end {
          order: 2
    }
  	.card-af-top {
  		margin-bottom: 10px
  	}
}

.card-blog {
    margin-bottom: 30px;
}

.card-blog .blog-img-wrapper {
    overflow: hidden;
    position: relative;
    padding-top: 48%;
}

.card-blog .blog-img-wrapper img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  	border-radius: var(--radius) var(--radius) 0 0 
}

.card-blog .blog-title {
    padding: 15px 30px;
}

.blog-border {
    position: relative;
}

.card-blog .blog-title h2 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.blog-border::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;
    right: 30px;
    height: 1px;
    background: var(--border);
}

.card-blog .blog-footer {
    padding: 15px 30px;
}

.blog-share-wrapper {
    display: flex;
    gap: 10px;
}

.blog-share-btn {
    display: inline-block;
    background: var(--main-bg);
    border: 1px solid var(--border);
    box-sizing: border-box;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tc);
    transition: 0.14s ease;
}

.blog-share-btn i {
    transition: 0.14s ease;
}

.card-blog .blog-read-more {
    font-size: 16px;
    line-height: 14px;
    letter-spacing: -0.02em;
    color: var(--mc);
    display: flex;
    align-items: center;
}

.card-blog .blog-read-more span {
    font-weight: 600;
}

.card-blog .blog-read-more i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-blog .blog-content {
    padding: 10px 30px 0px 30px;
    font-size: 14px;
    line-height: 21px;
  	font-weight: 400;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bi-head-wrapper {
    padding: 15px 0 30px 0;
}

.bi-head-box {
    background: var(--mc-trans);
    border: 1px solid var(--tw);
    box-sizing: border-box;
    border-radius: var(--radius);
    position: relative;
}

.card-blog .bi-content p {
    font-weight: 400
}

.bi-head-box .bi-head-bg {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.15;
}

.bi-head-box .bi-head-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bi-head-box .bi-head-content {
    position: relative;
    z-index: 5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bi-head-box .bi-head-content .bi-cat-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
}

.bi-head-box .bi-head-content .bi-cat-wrapper .bi-cat {
    display: inline-block;
    background: var(--mc-trans);
    border: 1px solid var(--mc);
    box-sizing: border-box;
    color: var(--mc);
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.04em;
    padding: 15px 45px;
}

.bi-head-box .bi-head-content .user-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bi-head-box .bi-head-content .user-wrapper .blog-head {
    padding: 24px 0 0 0;
}

.blog-head {
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-head .blog-head--username {
    font-weight: 600;
    font-size: 19px;
    line-height: 22px;
    color: var(--tc)
}

@media (min-width: 992px) {
    .bi-head-box .bi-head-content {
        padding: 60px 30px;
    }
}


.currencies-box {
    display: grid;
    align-items: center;
    gap: 10px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr)
}

.currencies-box .currency-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--second-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	width: 100%;
	padding: 13px 10px;
	transition: 300ms all;
	color: var(--tc)
}

.currencies-box .currency-box b {
	background: var(--mc);
	width: 50px;
	text-align: center;
	border-radius: 7px;
  	color: var(--tw)
}

.currencies-box .currency-box:hover {
	border-color: var(--mc)
}

.currencies-box .currency-box.active {
	border-color: var(--mc)
}

.b-text {
    display: inline-block;
    max-width: 10ch; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.b-text::after {
    content: attr(data-text);
    display: block;
    max-width: 10ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    visibility: hidden;
    position: absolute;
    height: 0;
}

.sidebar-bottom {
	position: absolute;
  	bottom: 0;
  	background: var(--white-bg);
    border-color: var(--border) !important;
    width: 100%;
    box-shadow: 0 0 50px 25px var(--second-bg);
}

.sidebar-bottom .sidebar-user-box {
    display: flex;
    padding: 10px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px;
    min-height: 40px;
    background: var(--second-bg);
    margin: 10px;
    cursor: pointer;
}

.sidebar-bottom .user-box-left {
    display: flex;
    flex-direction: column;
}

.sidebar-bottom .user-box-title {
    font-size: 16px;
    margin-bottom: 7px
}

.sidebar-bottom .user-box-username {
	background: var(--mc);
    color: var(--tw);
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 10px;
}

.sidebar-bottom .user-box-right {
    font-size: 24px;
}

@media (min-width: 992px) {
  .nwo-categories .swiper-wrapper {
      justify-content: center
  }
}

.card-point .info {
    position: relative;
    font-size: 16px;
    padding-left: 5px;
    border-radius: 15px;
    transition: all .2s ease;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--mc);
  	margin-top: 0
}

.card-point .info:hover .extra-info {
  display: block;
}

.card-point .info:hover {
  background-color: var(--white-bg);
  padding: 0 0 0 5px;
  width: 135px;
  text-align: left !important;
  transition: all .2s ease;
}


.card-point .info:hover, .card-point .info:focus {
   border: none;
   outline: 0;
   box-shadow: 0
}

.card-point .extra-info {
  display: none;
  line-height: 30px;
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 25px;
  color: var(--tc)
}

.dash-header {
    background: var(--mc);
    text-align: center;
    color: var(--tw);
    border-radius: 7px;
    padding: 10px 0;
    background-position: bottom center;
    background-size: cover;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.dbc-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.db-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius);
    background: var(--main-bg);
    padding: 15px 20px;
}

.db-card .db-card-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 42px;
    border-radius: 10px;
    background: var(--mc-trans);
    color: var(--mc);
    text-align: center;
}

.db-card .db-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 18px;
}

.db-card .db-card-content span {
	font-size: 13px
}

@media (max-width: 991.98px) {
    .dbc-box {
        grid-template-columns: repeat(1, 1fr);
    }
}

.card-point ul {
    padding-left: 0;
    margin-bottom: 0;
}

.card-point ul li i {
    font-size: 7px;
    color: var(--mc);
}

.card-point .btn-primary {
    width: max-content !important;
    padding: 7px 25px;
    border-radius: 7px;
    height: 40px;
}

.u-points {
    background: var(--mc-trans);
    width: max-content;
    padding: 3px 10px 3px 3px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.u-points i {
    background: var(--mc);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    text-align: center;
    line-height: 24px;
}

.account_status_wraper .account_status_btn.active {
	background: var(--mc)
}

.progress {
    background-color: var(--second-bg);
    border: 1px solid var(--border);
    border-radius: 15px;
}

.progress-bar {
	border-radius: 15px
}

.account_status_wraper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 5px
}

.account_status_wraper .account_status_btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 20px;
	background: var(--second-bg);
	border-radius: 10px;
	min-height: 45px;
	height: 45px;
	position: relative !important
}

.account_status_wraper .account_status_btn .status_icon {
	width: 25px
}

.account_status_wraper .account_status_btn.active .status_icon,
.account_status_wraper .account_status_btn.passed .status_icon {
	filter: brightness(0) invert(1)
}

.account_status_wraper .account_status_btn .status_text {
	font-size: 18px;
	color: var(--tc);
	margin-bottom: 0
}

.account_status_wraper .account_status_btn.active .status_text {
	color: var(--tw)
}

.account_status_wraper .account_status_btn.passed .status_icon img,
.benifit_item .benifit_text,
.benifit_item .icon {
	opacity: .3
}

.account_status_wraper .account_status_btn.passed .status_text {
	text-decoration: line-through;
	opacity: .3
}

.account_status_wraper .account_status_btn .status_text small {
	font-size: 10px;
	opacity: .5;
	transition: 1s
}

.status_btn__badges {
	background: #28a745 !important;
	position: absolute;
	font-weight: 500;
	top: -7px;
	right: 20px;
	padding: 5px 10px
}

.benifit_item {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 11fr;
	gap: 10px;
	margin-bottom: 17px;
  	font-size: 15px
}

.account_status_wraper .account_status_btn:hover .status_text small,
.benifit_item.active .benifit_text,
.benifit_item.active .icon {
	opacity: 1
}

.benifit_item.active .icon i {
    color: var(--mc);
}

.dash-header {
    background: var(--mc);
    text-align: center;
    color: #fff;
    border-radius: 7px;
    padding: 10px 0;
    background-position: bottom center;
    background-size: cover;
    margin-bottom: 15px;
  	font-size: 18px;
  	font-weight: 600
}

.captchaContent {
	display: flex;
	justify-content: center
}

.bottom-bar {
	display: none;
	grid-template-columns: repeat(5, 1fr);
	position: fixed;
	bottom: 0;
	z-index: 200;
	width: -webkit-fill-available;
	box-shadow: 0 5px 5px var(--mc-trans);
	justify-items: center;
	background: var(--main-bg);
	align-items: center;
	padding: 10px 15px;
	margin: 10px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.bottom-bar .bottom-item {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	align-items: center;
}

.bottom-bar .bottom-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tc);
	text-decoration: none;
}

.bottom-bar .bottom-item a i {
	font-size: 18px;
	color: var(--mc);
}

.bottom-bar .bottom-item.bottom-center a {
	box-shadow: rgb(255 255 255 / .1) -3px -3px 9px inset, rgb(255 255 255 / .15) 0 3px 9px inset, rgb(255 255 255 / .6) 0 1px 1px inset, rgb(46 131 195 / .3) 0 -8px 36px inset, rgb(255 255 255 / .6) 0 1px 5px inset, rgb(0 0 0 / .2) 2px 19px 31px;
	border: 2px solid rgb(255 255 255 / .063);
	background: var(--mc);
	color: var(--tw);
	margin-top: -35px;
	padding: 12px;
	border-radius: 50px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom-bar .bottom-item.bottom-center i {
	color: var(--tw);
}

@media (max-width: 991.98px) {
	.bottom-bar {
		display: grid
	}
  .sidebar {
        width: 280px;
        overflow: hidden;
        transition: all .3s ease 0;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
  }
  .sidebar-bottom {
      box-shadow: none;
      order: 1
  }  
  .sb-content {
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: all .3s ease 0;
      order: 2
  }
  .sidebar-bottom {
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 1;
      position: relative;
      transition: .3s ease;
  }  
}

@media (max-width: 767.98px) {
	.custom-table thead tr.thead-tr {
		display: none;
	}
	.custom-table tr {
		border: none;
	}
	.custom-table tr.table-mobile-cards {
		display: block;
		border-radius: 10px;
		border: 1px solid var(--second-bg);
		padding: 14px 24px;
		margin-bottom: 24px;
		background: var(--second-bg);
        margin: 15px
	}
	.custom-table tr.table-mobile-cards td {
		display: block;
		border: none;
		padding: 0px;
		font-size: 13px;
        word-break: break-all;
	}
	.custom-table tr.table-mobile-cards td+td {
		margin-top: 12px;
	}
	.custom-table tr.table-mobile-cards td::before {
		content: attr(data-title);
		font-size: 14px;
		color: var(--mc);
		font-weight: 500;
		display: block;
	}
    .custom-table tbody tr:first-child td:last-child {
        border-radius: 0
    }
    .custom-table .services-id {
        padding: 5px 20px;
        border-radius: 7px;
        width: max-content;
    }
}

.width-40 {
    max-width: 400px;
    word-break: break-all;
}

@media (max-width: 767.98px) {
	.table-mobile-cards thead {
		display: none;
	}
	.table-mobile-cards tr {
		border: none;
	}
	.table-mobile-cards tr.table-mobile-card {
		display: block;
		border-radius: 10px;
		border: 1px solid var(--border);
		padding: 14px 24px;
		margin-bottom: 24px;
		background: var(--second-bg);
	}
	.table-mobile-cards tr.table-mobile-card td {
		display: block;
		border: none;
		padding: 0px;
		font-size: 13px;
        word-break: break-all;
	}
	.table-mobile-cards tr.table-mobile-card td+td {
		margin-top: 12px;
	}
	.table-mobile-cards tr.table-mobile-card td::before {
		content: attr(data-title);
		font-size: 14px;
		color: var(--mc);
		font-weight: 500;
		display: block;
	}
    .custom-table tbody tr:last-child {
        border-radius: 10px;
    }
}

.panel-body.border-solid {
    background: var(--main-bg);
    border: 1px solid #f2f2f2;
    border-radius: 10px;
    padding: 15px 10px;
}

.addBalance {
	margin-bottom: 9px;
	margin-top: 0;
	display: flex;
	border-radius: 10px;
	justify-content: space-between;
}

.addBalanceBtn {
	width: 24%;
	background: var(--main-bg);
	padding: 20px 16px;
	border-radius: 10px;
	text-align: center;
	border: 1px solid var(--color-4);
	color: var(--color-5);
	font-weight: 600;
}





/* Container grid layout */
.payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.payment-box {
  background: var(--main-bg);
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  padding-top: 20px; /* เว้นพื้นที่ด้านบนสำหรับ badge */
  
}

.payment-box:hover {
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0,123,255,0.15);
}

.payment-box.active {
  border-color: #007bff;
  background: var(--main-bg);
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.payment-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.payment-icon-wrapper {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.payment-icon-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.payment-label {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 576px) {
  .payment-grid {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }

  .payment-label {
    font-size: 14px;
  }
}

.payment-box img {
  
  width: auto;
  max-width: 100px;
  max-height: 50px;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@keyframes pulse {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes popIn {
  0% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

.payment-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: gold;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 10;

  /* Animation */
  animation: popIn 0.4s ease-out, pulse 2s infinite ease-in-out;
}

.tickets-uploader,
.tickets-uploader * {
  color: var(--tc) !important;
}

.hd-right1{
display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
  }