@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

.partnercode {
	text-align: center;
    line-height: 18px;
}
body {
	/* font-family: "DM Sans", sans-serif !important; */
	font-family: "Inter", sans-serif !important;
	/* font-family: "Nunito", sans-serif !important; */
	font-size: 14px !important;
}
.navbar-menu .navbar-nav .nav-link {
    /* font-family: "Nunito", sans-serif !important; */
    font-weight: 550;
    color: #000;
    border-bottom: .1px solid #dddddd94;
}
.navbar-menu .navbar-nav .nav-link i {
    display: inline-block;
    min-width: 1.75rem;
    font-size: 18px;
    line-height: inherit;
    color: #707070;
}
.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true]:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    color: #000;
}
.navbar-landing .navbar-nav .nav-item .nav-link {
	font-family: "DM Sans", sans-serif !important;
}
.partnercode .span2 {
    color: #000;
    font-weight: 700;
}
[data-layout=horizontal] .navbar-menu .navbar-nav .nav-link i {
    line-height: 1;
    display: none;
}
.countdown {
  display: flex;
  justify-content: center;
  font-family: Arial, sans-serif;
  padding: 6px 0px;
}
.time-box {
	text-align: center;
    border: 1px solid #f5463352;
    padding: 10px;
    margin-left: 1px;
    height: 65px;
    width: 80px;
    background: #f4433626;
    border-radius: 0;
}
.time-box span {
	color: #F44336;
    display: block;
    font-size: 2em;
    font-weight: 700;
}
.btn-verified-ac {
    background: #f2fff7 !important;
    color: #009688 !important;
    border: 0px solid;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 90px;
    padding: 5px 10px;
}
.socialiocns a {
	padding: 10px;
    margin-right: 10px;
}
.socialiocns .facebook {
	border: 1px solid #ddd;
    background: #3f5596;
    color: #fff;
}
.socialiocns .facebook:hover {
	border: 1px solid #ddd;
    background: #fff;
    color: #3f5596;
}
.socialiocns .twitter {
	border: 1px solid #ddd;
    background: #000;
    color: #fff;
}
.socialiocns .twitter:hover {
	border: 1px solid #ddd;
    background: #000;
    color: #fff;
}
.socialiocns .instagram {
	border: 1px solid #ddd;
    background: #f09433; 
	background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
	background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    color: #fff;
}
.socialiocns .instagram:hover {
	border: 1px solid #ddd;
    background: #000;
    color: #fff;
}
.help-box {
    border-radius: .6rem;
	padding: 20px;
	margin: 75px 20px 20px;
	background-color: #fff;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .help-box {
    display:none;
}
.help-box img {
    position: relative;
    margin-top: -70px;
    height: 120px;
}
[data-layout=horizontal] .help-box {
    display: none;
}
[data-layout=vertical] .help-box-vertical {
    display: none;
}
.mrp-price {
	text-decoration: line-through;
}
.billing-sidebar {
	/* background-color: #242e46; */
	border-right: 0px solid #ddd !important;
}
.billing-sidebar .navbar-nav .nav-link {
    color: #000 !important;
}
[data-layout=horizontal]  .billing-sidebar .navbar-nav .nav-link {
    color: #242e46 !important;
}

/* width */
::-webkit-scrollbar {
  height: 8px;
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 90px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
  cursor:pointer;
}
#ITRTable {
    width: 100%;
    overflow: auto;
    border: 1px solid var(--vz-border-color);
}
thead, tbody, tfoot, tr, td, th {
    border: 1px solid #ddd;
}
[data-bs-theme=dark] thead, tbody, tfoot, tr, td, th {
    border: 1px solid #dddddd63;
}
#TablePagination button {
    margin: 0 3px;
    padding: 5px 12px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #000;
    cursor: pointer;
    border-radius: 3px;
}
#TablePagination button.active {
    background-color: #4a5aa3;
    color: white;
}
#TablePagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
#TablePagination .ellipsis {
    margin: 0 5px;
    font-weight: bold;
    color: #666;
}

.custom-menu {
	display: none;
	position: absolute;
    background-color: #fff;
    z-index: 9999;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
	width: 300px;
}
.custom-menu ul li a {
	color: #333;
}
.custom-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.custom-menu ul li {
	padding: 10px 10px;
	cursor: pointer;
	border-bottom: 1px solid #dddddd7d;
}
.custom-menu ul li:hover {
	background-color: #f3eef2;
}
.custom-menu ul li:hover a {
	color: #333;
}
.custom-menu ul li a i {
	position: absolute;
}
.custom-menu ul li a span {
	color: #333;
    padding-left: 25px;
}
@media (min-width: 576px){
.modal {
    --pk-modal-margin: 1.75rem;
    --pk-modal-box-shadow: 0 1px 2px rgba(56, 65, 74, .15);
    background: rgb(0 0 0 / 10%);
    --Modal-backdrop: rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}}
.modal-backdrop.show {
    opacity: 0 !important;
}
.modal-backdrop {
    z-index: auto !important;
}
.serviceSearch.sticky {
    position: sticky;
    top: 0;
    z-index: 999999;
    width: 100%;
    margin-left: 0;
    background: #fff;
    padding: 10.4px;
    border-radius: 0px 0px 30px 30px;
}
[data-layout=horizontal] .horizontal-logo {
    padding-left: calc(1.5rem * .5);
    background: #fff;
}
@media (min-width: 1024.1px) {
    [data-layout=horizontal] .container-fluid, [data-layout=horizontal] .layout-width {
        max-width: 100%;
        margin: 0 auto;
    }
}
.quickbtn{
    position:fixed;
    top:50%;
    right:0;
    transform:translateY(-50%);
    z-index:999;
    padding:5px 2px;
    background:#2b73ff;
    color:#fff;
    border:none;
    border-radius:12px 0 0 12px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    box-shadow:-4px 4px 15px rgba(0,0,0,.18);
    transition:all .3s ease;
}
.quickbtn:hover{
    background:#1458e0;
    box-shadow:-6px 8px 20px rgba(0,0,0,.25);
}
.service-card{
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px;
    background:#fff;
    border-radius:18px;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #edf2f7;
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(43,115,255,.18);
    border-color:#2b73ff;
}

.service-icon{
    width:72px;
    height:72px;
    min-width:72px;
    border-radius:18px;
    background:linear-gradient(135deg,#eef5ff,#ffffff);
    display:flex;
    align-items:center;
    justify-content:center;
}

.service-icon img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.service-content{
    flex:1;
}

.service-content h5{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#222;
}

.service-content span{
    font-size:13px;
    color:#7d8797;
}

.service-arrow{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#f4f7ff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2b73ff;
    font-size:22px;
    transition:.3s;
}

.service-card:hover .service-arrow{
    background:#2b73ff;
    color:#fff;
    transform:translateX(5px);
}
.detail-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 28px;
    letter-spacing: -.4px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ddd;
    padding: 10px 0px;
    border-radius: 8px;
}
.detail-title:before {
    content: "";
    width: 3px;
    height: 20px;
    border-radius: 99px;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    flex-shrink: 0;
}
.app_title{
    font-size: 13px;
    font-weight: 600;
    color: rgb(26, 40, 64);
    line-height: 1.3;
    margin-bottom: 8px !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app_desc{
    font-size: 10.5px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 768px){
    .app_title{
        font-size:13px;
    }

    .app_desc{
        font-size:10.5px;
    }
}
:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover > a.menu-link {
    position: relative;
    width: calc(200px + var(--vz-vertical-menu-width-sm));
    transition: none;
    background: #fff;
}
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown {
    display: block;
    left: var(--vz-vertical-menu-width-sm);
    position: absolute;
    width: 200px;
    background: #fff;
    height: auto !important;
    padding: .5rem 0;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
    box-shadow: 0 2px 4px rgba(15, 34, 58, .12);
}
/*==============================
    WALLET SECTION
==============================*/

.wallet_sec{
    max-width:900px;
    margin:30px auto;
}

/*==============================
    WALLET CARD
==============================*/

.wallet-card{
    background:linear-gradient(135deg,#198754,#20c997);
    border-radius:20px;
    padding:35px 30px;
    color:#fff;
    text-align:center;
    position:relative;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(25,135,84,.25);
}

.wallet-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-80px;
    right:-70px;
}

.wallet-card::after{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    left:-60px;
    bottom:-60px;
}

.wallet-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:#fff;
    color:#198754;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
}

.wallet-title{
    font-size:30px;
    font-weight:700;
    margin-top:20px;
}

.wallet-text{
    font-size:15px;
    opacity:.95;
    margin-top:5px;
}

.wallet-balance{
    font-size:46px;
    font-weight:700;
    margin:18px 0;
}

.wallet-date{
    font-size:13px;
    opacity:.9;
}

/*==============================
    TRANSACTION CARD
==============================*/

.transaction-card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.transaction-card .card-header{
    background:#fff;
    border-bottom:1px solid #eee;
    padding:18px 25px;
}

.transaction-card h5{
    margin:0;
    font-size:18px;
    font-weight:600;
}

/*==============================
    TABLE
==============================*/

.transaction-card table{
    margin-bottom:0;
}

.transaction-card thead{
    background:#f8f9fa;
}

.transaction-card th{
    font-size:13px;
    font-weight:600;
    color:#6c757d;
    text-transform:uppercase;
    border-bottom:1px solid #eee;
}

.transaction-card td{
    font-size:14px;
    vertical-align:middle;
    padding:14px;
}

/*==============================
    BADGES
==============================*/

.badge-credit{
    background:#d1fae5;
    color:#198754;
    padding:7px 15px;
    border-radius:30px;
    font-weight:600;
}

.badge-debit{
    background:#fde2e2;
    color:#dc3545;
    padding:7px 15px;
    border-radius:30px;
    font-weight:600;
}

/*==============================
    AMOUNT
==============================*/

.amount-credit{
    color:#198754;
    font-weight:700;
}

.amount-debit{
    color:#dc3545;
    font-weight:700;
}

/*==============================
    HOVER
==============================*/

.transaction-card tbody tr{
    transition:.25s;
}

.transaction-card tbody tr:hover{
    background:#f8fff9;
}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:768px){

    .wallet-card{
        padding:25px 20px;
    }

    .wallet-title{
        font-size:24px;
    }

    .wallet-balance{
        font-size:36px;
    }

    .transaction-card .table{
        min-width:750px;
    }

}
.co_services{
    position: relative;
    padding-left: 20px;
    margin-left: 35px;
}

.co_services::before{
    content: "";
    position: absolute;
    left: -47px;
    top: 0;
    width: 60px;
    height: 60px;
    background: #fff url(https://cdn-icons-gif.flaticon.com/7740/7740661.gif) center center no-repeat;
    background-size: 28px;
    border: 0px solid #3f68fb;
    border-radius: 50%;
    box-shadow: none;
    rotate: -90deg;
}
.counter-value {
	font-size:17px;
	font-weight:700;
}
.form-control,
.form-select {
    min-height: 42px;
    border: 1px solid #dcdfe4;
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    color: #212529;
    font-size: 14px;
    transition: all .2s ease;
}

.form-control::placeholder {
    color: #9aa0a6;
}

.form-control:hover,
.form-select:hover {
    border-color: #bfc4cb;
}

.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .08);
}