* {
     font-family: "Archivo", sans-serif;
     margin: 0;
     padding: 0;
}

:root {
     --primary-font: "Archivo", sans-serif;
     --primary-color: #ff3c38;
     --bs-primary:#ff3c38 ;
     --primary-color-deep: #cc2f2c;
     --bg-redial: radial-gradient(#2a2a2a, #0e0e0e);
     --bs-body-bg: #0a0a0a;
     --bs-dropdown-border-color: #121212;
     --form-input-bg: #141414;
     --black-pure: #000000;
     --card-bg: #1a1a1a;
     --card-border: #4c4c4c;
     --footer-bg: #1b1b1b;
     --white: #ffffff;
     --sidebar-color: #2e2e2e;
     --header-bg: #333333;
}

.daymode .mini-card {
     background-color: #ffede0;
}

html body.index form .form-group .badge.bg-primary {
     background-color: var(--primary-color) !important;
}

html body.index span.select2-container.select2-container--default.select2-container--open li .badge.bg-primary {
     background-color: var(--primary-color) !important;
}

body {
     font-family: "Archivo", sans-serif;
     background: var(--black-pure) !important;
     background-color: var(--black-pure) !important;
     font-size: 16px;
     font-weight: normal;
     color: var(--white);
}

a {
     text-decoration: none;
}

.d-none-desk {
     display: none !important;
}

main.no_auth {
     padding-top: 80px;
}

.hidden {
     display: none;
}

.btn-primary {
     font-family: var(--primary-font);
     position: relative;
     font-size: 22px;
     font-weight: bold;
     color: var(--white);
     background: var(--primary-color);
     border-color: var(--primary-color);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: 0.5s ease;
     height: 60px;
     min-width: 200px;
     padding: 15px 30px;
}

.auth .btn-primary {
     height: 50px;
}

.btn-primary:hover {
     background: var(--primary-color-deep);
     border-color: var(--primary-color-deep);
}

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

.card {
     background: var(--card-bg);
     border-color: var(--card-border);
     border-radius: 10px;
     color: var(--text-white);
}

.modal-body h3,
.card .card-body h3 {
     font-family: var(--primary-font);
     font-size: 25px;
     font-weight: bold;
}

.panel-body.border-solid {
     background: var(--form-input-bg);
     border: 1px solid var(--card-border);
     border-radius: 10px;
     padding: 15px 10px;
     color: var(--white);
}

.panel-body.border-solid>* {
     color: var(--white) !important;
}

.card.card_chat {
     background: url(https://cdn.mypanel.link/ob5eq3/6brszdgdh34b7wdj.png),
          var(--bg-redial);
     background-repeat: repeat;
     background-size: contain;
     background-position: center;
     min-height: 800px;
}

#payment_section .payment_img {
     width: 400px;
     margin: 0 auto;
}

#payment_section h2 {
     font-family: var(--primary-font);
     font-size: 28px;
     font-weight: 800;
     color: var(--white);
}

.ticket-message-left.admin_ticket,
.ticket-message-right.user_ticket {
     margin-bottom: 20px;
}

.ticket-message-right.user_ticket .ticket-message {
     background: var(--primary-color);
     padding: 20px 20px;
     border-radius: 15px;
     margin-bottom: 5px;
     color: var(--white);
}

.ticket-message-left.admin_ticket .ticket-message {
     background: var(--form-input-bg);
     padding: 20px 20px;
     border-radius: 15px;
     margin-bottom: 5px;
     color: var(--white);
}

.card.card_chat .tickets-uploader {
     padding: 10px;
     background: #2c1a0a;
     border-radius: 10px;
     border: 1px dashed #5c5c5c;
     height: 60px;
     display: flex;
     align-items: center;
}

.card.card_chat .files-wrapper #uploader-button {
     width: 100%;
}

.card.card_chat .card-body {
     display: flex;
     gap: 20px;
     flex-direction: column;
     justify-content: space-between;
}

.submit_area_message {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 10px;
     align-items: center;
}

/* Navbar Design */
header {
     z-index: 999999;
}

header.nav-scrolled {
     background: #00000067;
     backdrop-filter: blur(10px);
}

.navbar-login .navbar-nav .nav-item .nav-link {
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: 400;
     color: var(--white);
     padding: 5px 15px;
}

.navbar-login .navbar-nav .nav-item .nav-link.active {
     color: var(--primary-color);
}

.navbar-brand .logo_navbar img {
     width: 180px;
}

.nav_right .nav_right_btn {
     font-family: var(--primary-font);
     font-size: 18px;
     margin: 0px 5px;
     color: var(--white);
     font-weight: 700;
     padding: 5px 20px;
     border: 1.5px solid var(--white);
     border-radius: 10px;
}

.nav_right .nav_right_btn:last-child {
     margin-right: 0px;
}

.nav_right .btn_white_outline {
     border-color: var(--white);
}

.nav_right .btn_signup {
     border-color: var(--primary-color);
     background: var(--primary-color);
}

/* Global CSS */
.def_content {
     margin-bottom: 40px;
}

.def_content.no-m {
     margin-bottom: 0px;
}

.def_content h1,
.def_content h2 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 48px;
     font-weight: 800;
     line-height: 1.3;
     margin-bottom: 0px;
}

.def_content p {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: normal;
     color: var(--white);
     margin-bottom: 0px;
}

.def_image {
     text-align: center;
}

.box_item {
     padding: 30px 20px;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 10px;
     height: 100%;
}

.box_item .box_icon {
     width: 100px;
     margin-bottom: 15px;
}

.box_item .box_content h3 {
     font-family: var(--primary-font);
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 5px;
     color: var(--white);
}

.box_item .box_content p {
     font-family: var(--primary-font);
     font-size: 16px;
     line-height: 1.4;
     color: var(--white);
     font-weight: 400;
     margin-bottom: 0px;
}

/*
  Sign In Page Design
*/

#banner {
     padding: 70px 0px;
     padding-bottom: 100px;
     position: relative;
     /* overflow-y: hidden; */
}

#banner .banner_bg_effect .bg_banner_left_effect {
     position: absolute;
     left: 0px;
     top: -70px;
     pointer-events: none;
     z-index: -1;
}

#banner .banner_bg_effect .bg_banner_right_effect {
     position: absolute;
     right: 0px;
     pointer-events: none;
}

.login_box_area .login_image_right,
.login_box_area .login_image_left {
     position: absolute;
     pointer-events: none;
}

.login_box_area .login_image_right {
     right: 110px;
     top: 180px;
}

.login_box_area .login_image_left {
     top: 140px;
     left: 180px;
}

.login_box_area .login_image_left .main_effect {
     position: absolute;
     top: -150px;
     pointer-events: none;
}

.login_box_area .login_image_left .main_image {
     position: relative;
     top: 0px;
     right: -230px;
     pointer-events: none;
}

.login_box_area .login_image_right .main_image {
     position: relative;
     top: 0px;
     left: -230px;
     pointer-events: none;
}

.login_box_area .login_image_right .main_effect {
     position: absolute;
     top: 50px;
     left: -10px;
     pointer-events: none;
}

.banner_content {
     margin-bottom: 50px;
}

.banner_content h1 small {
     font-family: var(--primary-font);
     font-size: 24px;
     font-weight: 600;
     line-height: 1.3;
     margin-bottom: 0;
}

.banner_content h1 {
     font-family: var(--primary-font);
     font-size: 48px;
     font-weight: 700;
     margin-bottom: 0;
}

.banner_content p {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: 400;
     margin-bottom: 0;
     color: var(--white);
}

.banner_login_part {
     background: var(--bg-redial);
     border: 1px solid var(--card-border);
     width: 570px;
     margin: 0 auto;
     border-radius: 15px;
     padding: 45px 45px;
}

.banner_login_part h2 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 38px;
     margin-bottom: 15px;
     font-weight: 700;
}

.f_group * {
     font-family: var(--primary-font);
     color: var(--white);
}

.f_group .form_link {
     text-decoration: underline;
}

/* #loginForm .form-group {
  margin-bottom: 15px;
} */
#loginForm .has_icon {
     position: relative;
}

#loginForm .has_icon .icon {
     width: 47px;
     height: 47px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary-color);
     position: absolute;
     border-radius: 5px;
     top: 7px;
     left: 7px;
}

#loginForm .has_icon .icon img {
     width: 30px;
     height: auto;
}

#loginForm .form-control {
     font-family: var(--primary-font);
     font-size: 18px;
     height: 60px;
     padding-left: 60px;
     outline: none !important;
     border: none !important;
     border-radius: 10px;
     color: var(--white);
}

#loginForm .form-control::placeholder {
     color: #ddd;
     /* opacity: 1; Firefox */
}

#loginForm .btn-primary .btn_icon {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-color);
     background: var(--white);
     border-radius: 5px;
     position: absolute;
     right: 7px;
}

.pass_eye {
     position: absolute;
     right: 0;
     top: 7px;
}

.pass_eye .pss-btn-sh {
     background: none;
     color: var(--white);
     padding: 10px 15px;
     border: none;
     font-size: 25px;
     line-height: 0;
     cursor: pointer;
}

.pass_eye .pss-btn-sh .eye-close {
     display: none;
}

.pass_eye .pss-btn-sh.active .eye-close {
     display: inline-block;
}

.pass_eye .pss-btn-sh.active .eye-open {
     display: none;
}

/* insights */
#insights {
     padding: 70px 0px;
}

#insights .insight_item {
     display: flex;
     align-items: center;
     gap: 15px;
}

#insights .insight_item .icon {
     width: 86px;
     height: auto;
}

#insights .insight_item .text_content h4 {
     font-family: var(--primary-font);
     font-size: 34px;
     font-weight: 800;
     margin-bottom: 5px;
}

#insights .insight_item .text_content p {
     margin-bottom: 0;
}

/* About Us Sections */
#about_us {
     padding: 50px 0px;
     position: relative;
}

.about_us_effect img {
     /* position: absolute; */
     z-index: -1;
     pointer-events: none;
}

.about_us_effect .effect_left {
     position: absolute;
     left: 0px;
     top: -350px;
     opacity: 0.8;
}

.about_us_effect .effect_right {
     position: absolute;
     top: -100px;
     right: 0px;
     opacity: 0.8;
}

/* How It Works */
#howItWorks {
     padding: 70px 0px;
     position: relative;
}

.how_it_effect .effect_it_img {
     position: absolute;
     right: 0px;
     top: -200px;
     z-index: -1;
     pointer-events: none;
}

.how_it_item_wrap {
     text-align: center;
     display: grid;
     grid-template-columns: 1fr;
     justify-content: center;
     align-items: center;
     padding: 28px 20px;
     background: var(--card-bg);
     border-radius: 15px;
     gap: 10px;
     height: 100%;
     transition: 0.5s ease;
}

.how_it_item_wrap:hover {
     transform: scale(1.03);
}

.how_it_item_wrap.item_1 {
     background: linear-gradient(180deg, #6c3bf7 0%, #c200d2 100%);
}

.how_it_item_wrap.item_2 {
     background: linear-gradient(129deg, #f50 3.49%, #ffc806 99.16%);
}

.how_it_item_wrap.item_3 {
     background: linear-gradient(308deg, #09d2de 0%, #005bff 100%);
}

.how_it_item_wrap.item_4 {
     background: linear-gradient(308deg, #27ed5f 0%, #109d59 100%);
}

.how_it_item_wrap .icon {
     width: 120px;
     height: 130px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     background: var(--white);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     border-radius: 10px;
}

.how_it_content h3 {
     font-family: var(--primary-font);
     font-weight: 700;
     font-size: 24px;
     color: var(--white);
     line-height: 1.3;
     margin-bottom: 3px;
}

.how_it_content p {
     font-family: var(--primary-font);
     font-weight: normal;
     font-size: 16px;
     color: var(--white);
     line-height: 1.4;
}

/* Wholesale Section */
#wholesale {
     padding: 70px 0px;
     position: relative;
     padding-bottom: 90px;
}

.wholesale_effect .effect-image {
     position: absolute;
     width: 100%;
     z-index: -1;
     top: 170px;
     pointer-events: none;
}

/* Testimonials Sections */
#testimonials {
     padding: 100px 0px;
     position: relative;
}

.testimonial_effect .test_effect {
     position: absolute;
     pointer-events: none;
     top: -400px;
}

.testimonial_box {
     text-align: center;
     height: auto;
     margin: 0 auto;
}

.testimonialSlider {
     position: relative;
     padding: 20px 0px;
}

.box_item.testimonial_box .box_icon {
     width: 100px;
     margin: 0 auto;
     margin-bottom: 10px;
}

.testimonials_slider_button {
     position: relative;
     top: -180px;
}

.swiper-prev,
.swiper-next {
     position: absolute;
     top: 45%;
     z-index: 99999;
}

.swiper-prev img,
.swiper-next img {
     width: 40px;
}

.swiper-prev.swiper-button-disabled,
.swiper-next.swiper-button-disabled {
     opacity: 0.4;
     cursor: not-allowed;
}

.swiper-prev {
     left: 40px;
}

.swiper-next {
     right: 40px;
}

/* Why Choose Us */
#whyChooseUs {
     padding: 70px 0px;
     position: relative;
}

.why_choose_effect {
     position: relative;
     z-index: -1;
}

.why_choose_effect .choose_effect_left {
     position: absolute;
     top: -150px;
     pointer-events: none;
     z-index: -1;
}

.why_choose_effect .choose_effect_right {
     position: absolute;
     right: 0px;
     top: -500px;
}

.type_item_1 {
     display: grid;
     grid-template-columns: 90px 1fr;
     gap: 15px;
     align-items: center;
}

.type_item_1 .icon {
     width: 80px;
     height: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--white);
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.type_item_1 .icon img {
     width: 50px;
}

.type_item_1 .type_content h3 {
     font-family: var(--primary-font);
     font-size: 26px;
     color: var(--primary-color);
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 3px;
}

.type_item_1 .type_content p {
     font-family: var(--primary-font);
     font-size: 14px;
     line-height: 1.5;
     font-weight: 400;
     margin-bottom: 0px;
}

/* Easy and Accessible */
#easyAndAccessible {
     /* padding: 50px 0px; */
}

/* Features of SMM Panel */
#featuresOfSmmpanel {
     padding: 70px 0px;
     position: relative;
}

.feature_effect {
     position: relative;
     z-index: -1;
}

.feature_effect .feature_effect_left {
     position: absolute;
     top: -400px;
}

.feature_effect .feature_effect_right {
     position: absolute;
     top: 0px;
     right: 0px;
}

#featuresOfSmmpanel .box_item {
     height: auto;
}

.box_item.features_box_item .type_item_1 {
     align-items: start;
}

/* services */
#services {
     padding: 50px 0px;
     position: relative;
}

.service_effect {
     position: relative;
     pointer-events: none;
}

.service_effect .services_effect_img {
     position: absolute;
     z-index: -1;
     top: -600px;
     left: 0px;
     pointer-events: none;
}

.nav_services .nav-link {
     display: flex;
     flex-direction: row;
     gap: 5px;
     text-align: center;
     justify-content: start;
     width: 95%;
     margin-bottom: 15px;
     color: var(--black-pure);
     background: var(--white) !important;
     border: 1px solid var(--white);
     border-radius: 8px;
}

.nav_services .nav-link.active {
     border-color: var(--primary-color);
}

.nav_services .nav-link .text {
     color: var(--black-pure);
     font-size: 18px;
     font-weight: bold;
}

#services .service_content h2 {
     font-family: var(--primary-font);
     font-size: 36px;
     line-height: 1.3;
     font-weight: 800;
     margin-bottom: 5px;
}

#services .service_content hr {
     border-width: 2px;
     opacity: 1;
     border-color: var(--primary-color);
}

#services .service_icon {
     text-align: right;
}

/* Payment Methods */
#payment_methods {
     padding: 120px 0px;
     position: relative;
     overflow: hidden;
}

.payment_methods_effect {
     position: relative;
}

.payment_methods_effect .payment_effect {
     position: absolute;
     right: -220px;
     top: -120px;
     z-index: -1;
     pointer-events: none;
}

.payment_methods_logo {
     display: flex;
     justify-content: center;
     gap: 20px 30px;
     flex-wrap: wrap;
}

.payment_methods_logo img {
     width: 170px;
     height: auto;
}

/* Benifits */
#benifits {
     padding: 50px 0px;
     position: relative;
}

.benifits_effects {
     position: relative;
     pointer-events: none;
     z-index: -1;
}

.benifits_effects .benifits_left_img {
     position: absolute;
     left: 0;
     top: -300px;
}

.benifits_effects .benifits_right_img {
     position: absolute;
     right: 0;
}

.mid_box {
     border-width: 3px;
     border-color: var(--primary-color);
}

#benifits .box_item .box_icon {
     margin: 0 auto;
     margin-bottom: 10px;
}

.mid_box .has_underline {
     display: inline-block;
}

.mid_box h3 {
     position: relative;
}

.mid_box h3 .text {
     position: relative;
     z-index: 99;
}

.mid_box h3::before {
     content: "";
     width: 100%;
     height: 3px;
     display: inline-block;
     background: var(--primary-color);
     margin: 0px;
     position: absolute;
     left: 0;
     bottom: 1px;
     z-index: 0;
     opacity: 1;
}

/* Faq section */
#faq {
     padding: 50px 0px;
}

.faq_accordion .accordion-item {
     margin-bottom: 15px;
     border-radius: 10px;
     border: 2px solid var(--card-border);
     background: var(--card-bg);
}

.faq_accordion .accordion-item .accordion-header button {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: 800;
     background: transparent;
     color: var(--white);
     outline: none !important;
     box-shadow: none !important;
}

.auth .faq_accordion .accordion-item {
     background: var(--form-input-bg);
     border: none;
}

.faq_accordion .accordion-item .accordion-header .accordion-button::after {
     --bs-accordion-btn-icon: url(https://res.cloudinary.com/sol-0123456789/image/upload/v1733288277/20240612panelbt/arrow_z14d8g.png);
}

.faq_accordion .accordion-item .accordion-button:not(.collapsed)::after {
     background-image: url(https://res.cloudinary.com/sol-0123456789/image/upload/v1733288277/20240612panelbt/arrow_z14d8g.png);
}

.faq_accordion .accordion-item p {
     font-family: var(--primary-font);
     font-size: 14px;
     font-weight: normal;
     line-height: 1.4;
     color: var(--white);
     margin-bottom: 0px;
}

/* What We Do */
#whatWeDo {
     padding: 50px 0px;
}

/* Footer */
footer {
     background: var(--card-bg);
     padding: 15px 0px;
     padding-top: 50px;
}

footer hr {
     border-width: 3px;
     opacity: 1;
     border-color: var(--primary-color);
}

footer .logo {
     margin-bottom: 10px;
}

footer .footer_c_item {
     display: flex;
     gap: 5px;
     margin-bottom: 10px;
     color: var(--white);
}

footer .footer_info .logo img {
     width: 200px;
}

footer .footer_links_wrap h4 {
     font-family: var(--primary-font);
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 20px;
}

footer .footer_links_wrap .footer_links {
     padding: 0px;
     list-style-type: none;
}

footer .footer_links_wrap .footer_links li a {
     display: inline-block;
     font-family: var(--primary-font);
     font-size: 16px;
     color: var(--white);
     margin-bottom: 10px;
     cursor: pointer;
     transition: 0.5s ease;
}

footer .footer_links_wrap .footer_links li a:hover {
     transform: translateX(5px);
}

/* Services Page Design */
.search_filter_wrap {
     display: grid;
     grid-template-columns: 6fr 1fr 1fr;
     gap: 20px;
     align-items: center;
}

.search_inputs .search,
.search_filter_wrap .search {
     position: relative;
}

.search_inputs .search input,
.search_filter_wrap .search input {
     width: 100%;
     height: 60px;
     padding: 15px 15px;
     font-size: 16px;
     border: 1px solid var(--black-pure);
     border-radius: 10px;
     outline: none !important;
     background: var(--white);
     color: var(--black-pure) !important;
}

.search_inputs .search .icon,
.search_filter_wrap .search .icon {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     right: 7.5px;
     top: 7.5px;
     background: var(--primary-color);
     font-size: 25px;
     border-radius: 5px;
     color: var(--white);
}

.search_inputs .search .icon {
     border: none;
     cursor: pointer;
}

.filter_currency>button,
.search_filter_wrap .filter_btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 60px;
     font-family: var(--primary-font);
     font-size: 16px;
     background: var(--primary-color);
     font-weight: bold;
     color: var(--white);
     border-radius: 10px;
     border-color: var(--primary-color);
     min-width: 200px;
     padding: 10px 20px;
}

.filter_btn.dropdown-toggle::after {
     display: none;
}

.search_filter_wrap .filter_btn .filter_service_text {
     display: flex;
     align-items: center;
     gap: 3px;
     margin: 0;
     padding: 0;
}

.search_filter_wrap .filter_btn .filter_service_text .icon {
     font-size: 25px;
     position: relative;
     top: 5px;
}

.social_media_wrap {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 20px;
}

.social_media_wrap .social_media_btn {
     display: flex;
     gap: 5px;
     justify-content: center;
     align-items: center;
     padding: 12px 20px;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 8px;
     color: var(--white);
     transition: 0.5s ease;
}

.daymode .social_media_wrap .social_media_btn.activeItem,
.social_media_wrap .social_media_btn.activeItem {
     background: var(--primary-color);
     border-color: var(--primary-color);
}

.social_media_wrap .social_media_btn .icon img {
     pointer-events: none;
     width: 25px;
     min-width: 25px;
}

.social_media_wrap .social_media_btn .media_name {
     pointer-events: none;
     font-size: 16px;
     font-weight: 400;
     color: var(--white);
     margin-bottom: 0px;
     line-height: 1;
}

.social_media_wrap .social_media_btn:hover {
     background: var(--primary-color);
     border-color: var(--primary-color);
}

/* Service Table */
.serv_category_card {
     background: var(--card-bg);
     border: 1px solid var(--primary-color);
     box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.03);
     border-radius: 10px;
     margin-bottom: 25px;
     overflow: hidden;
}

.serv_category_card .serv_cat_card_header {
     text-align: center;
     background: var(--primary-color);
     padding: 15px 30px;
}

.serv_category_card .serv_cat_card_header .category_name {
     font-family: var(--primary-font);
     font-size: 25px;
     font-weight: 500;
     color: var(--white);
     text-align: center;
}

.serv_category_card .serv_cat_card_body {
     padding: 20px;
}

.serv_category_card .serv_cat_card_body .service_item,
.serv_category_card .serv_cat_card_body .service_item.service_table_header {
     display: flex;
     flex-direction: row;
     gap: 15px;
     margin-bottom: 10px;
}

.serv_category_card .serv_cat_card_body .service_item.service_table_header {
     margin-bottom: 25px;
}

.serv_category_card .serv_cat_card_body .service_item.service_table_header>span {
     font-family: var(--primary-font);
     font-weight: 800;
     color: var(--white);
}

.serv_category_card .serv_cat_card_body .service_item .id {
     width: 8%;
}

.serv_category_card .serv_cat_card_body .service_item .services_name {
     width: 40%;
}

.serv_category_card .serv_cat_card_body .service_item .rate {
     width: 15%;
}

.serv_category_card .serv_cat_card_body .service_item .max_order,
.serv_category_card .serv_cat_card_body .service_item .min_order {
     width: 10%;
}

.serv_category_card .serv_cat_card_body .service_item .avg_time {
     width: 20%;
}

.serv_category_card .serv_cat_card_body .service_item .descriptions {
     width: 10%;
}

.serv_category_card .serv_cat_card_body .service_item.service {
     border-bottom: 1px solid var(--card-border);
     padding-top: 10px;
     padding-bottom: 10px;
}

.serv_category_card .serv_cat_card_body .service_item .descriptions {
     text-align: end;
}

.serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
.serv_category_card .serv_cat_card_body .service_item.service>span.min_order>span,
.serv_category_card .serv_cat_card_body .service_item.service>span.max_order>span,
.serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
     display: inline-flex;
     font-family: var(--primary-font);
     font-weight: 700;
     color: var(--white);
     text-align: center;
     justify-content: center;
     align-items: center;
     padding: 8px 20px;
     border-radius: 10px;
     background-color: #2b2b2b;
}

.serv_category_card .serv_cat_card_body .service_item:last-child {
     border-bottom: none !important;
     margin-bottom: 0px;
     padding-bottom: 0px;
}

.serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
.serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
     background: var(--form-input-bg);
     color: var(--white);
}

.serv_category_card .serv_cat_card_body .service_item.service>span.avg_time {
     display: flex;
     align-items: center;
     max-height: 35px;
}

.serv_category_card .serv_cat_card_body .service_item.service .services_name {
     font-size: 16px;
     font-weight: 400;
     color: var(--white);
}

.serv_category_card .serv_cat_card_body .service_item.service>span.min_order,
.serv_category_card .serv_cat_card_body .service_item.service>span.max_order {
     display: flex;
     align-items: center;
     max-height: 35px;
}

.btn_descriptions {
     background: var(--primary-color);
     color: var(--white);
     font-weight: 700;
     font-size: 16px;
     padding: 8px 25px;
     border-radius: 10px;
     transition: 0.8s;
}

.btn_descriptions:hover {
     background: var(--primary-color-deep);
     color: var(--primary-color);
     scale: 1.05;
}

/* Blog Page Design */
.blog_card {
     border-radius: 10px;
}

.blog_card img {
     width: 100%;
     height: 215px;
     object-fit: cover;
     border-bottom: 1px solid var(--card-border);
     background: #4a4a4a;
}

.blog_card .card-title {
     font-family: var(--primary-font);
     font-size: 24px;
     color: var(--white);
     padding-bottom: 10px;
     margin-bottom: 10px;
     border-bottom: 2px solid var(--primary-color);
     transition: 0.5s ease;
}

.blog_card .card-title:hover {
     color: var(--primary-color);
}

.blog_card .card-text>*,
.blog_card .card-text {
     font-family: var(--primary-font) !important;
     font-size: 16px !important;
     line-height: 1.5 !important;
     color: var(--white) !important;
}

.blog_card .btn_blog {
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: bold;
     color: var(--primary-color);
     display: flex;
     align-items: center;
     transition: 0.5s;
}

.blog_card .btn_blog:hover .icon {
     transform: translatex(5px);
}

.btn_blog .icon {
     line-height: 0;
     font-size: 20px;
     transition: 0.5s;
}

/* How It Works Page */
#how_it_works {
     padding: 70px 0px;
}

.how_it_works_timeline {
     display: flex;
     justify-content: space-between;
     gap: 15px;
     margin: 0px 200px;
     margin-bottom: 50px !important;
     position: relative;
}

.how_it_works_timeline::before {
     content: "";
     width: calc(100% - 200px);
     height: 5px;
     background: var(--card-border);
     position: absolute;
     top: 25px;
     z-index: -1;
     left: 100px;
}

.video_part {
     text-align: center;
     width: 700px;
     margin: 0 auto;
}

.how_it_works_timeline .nav-link {
     font-family: var(--primary-font);
     font-size: 20px;
     font-weight: bold;
     color: var(--white);
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 15px;
     min-width: 210px;
     width: 210px;
}

.how_it_works_timeline .nav-link .step_text {
     opacity: 0.5;
}

.how_it_works_timeline .nav-link.active {
     background: none;
     color: var(--white);
}

.how_it_works_timeline .nav-link.active .step_text {
     opacity: 1;
}

.how_it_works_timeline .nav-link .step_number {
     width: 40px;
     height: 40px;
     background: var(--card-border);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50px;
     margin: 0 auto;
}

.how_it_works_timeline .nav-link.active .step_number {
     background: var(--primary-color);
}

#how_it_works .card.card-logo-image .card-body {
     height: 350px;
     display: flex;
     align-items: center;
     justify-content: center;
}

#watch_the_video {
     padding: 70px 0px;
}

/* About Page */
#contactArea {
     padding: 70px 0px;
}

.contact_box_inner {
     text-align: center;
     background: var(--card-bg);
     border-radius: 15px;
     padding: 40px 20px;
     border: 1px solid var(--card-border);
}

.contact_box_inner.mid_box {
     padding: 70px 20px;
}

.contact_box_inner .c_icon {
     width: 100px;
     margin: 0 auto;
     margin-bottom: 10px;
}

.contact_box_inner.first_box .c_icon {
     width: 130px;
}

.contact_box_inner h4 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 21px;
     font-style: normal;
     font-weight: 700;
}

.contact_box_inner a {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 16px;
     font-weight: 400;
     margin-bottom: 0px;
}

/* About Us Page*/
.auth .about_us_effect,
#our_single_blog .about_us_effect,
#how_it_works .about_us_effect,
#api_page .about_us_effect,
#faqPage .about_us_effect,
#blog_page .about_us_effect,
#about_us .about_us_effect {
     position: relative;
     z-index: -1;
     pointer-events: none;
}

.auth .about_us_img_left,
#our_single_blog .about_us_img_left,
#how_it_works .about_us_img_left,
#api_page .about_us_img_left,
#faqPage .about_us_img_left,
#blog_page .about_us_img_left,
#about_us .about_us_img_left {
     position: absolute;
     left: 0px;
     z-index: -1;
     top: -300px;
}

.auth .about_us_img_right,
#our_single_blog .about_us_img_right,
#how_it_works .about_us_img_right,
#api_page .about_us_img_right,
#faqPage .about_us_img_right,
#blog_page .about_us_img_right,
#about_us .about_us_img_right {
     position: absolute;
     right: 0px;
     z-index: -1;
}

.auth .about_us_img_right {
     top: -270px;
}

#faqPage .about_us_img_right {
     top: -100px;
}

#blog_page .contact_effect,
#contactArea .contact_effect {
     position: relative;
     z-index: -1;
     pointer-events: none;
}

#blog_page .contact_effect .contact_effect_img,
#contactArea .contact_effect .contact_effect_img {
     position: absolute;
     right: 0px;
     top: -400px;
     z-index: -1;
     pointer-events: none;
}

#blog_page .contact_effect .contact_effect_img {
     top: -800px;
}

#our_single_blog,
#blog_page {
     padding: 50px 0px;
     overflow: hidden;
}

#faqPage {
     padding: 50px 0px;
     padding-bottom: 100px;
}

#our_single_blog .blog_content h1 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 48px;
     font-weight: 800;
     line-height: 1.3;
     margin-bottom: 10px;
}

#our_single_blog .blog_content>* {
     color: var(--white) !important;
}

#our_single_blog .blog_content .blog_post_content {
     margin-bottom: 10px;
}

#api_page {
     padding: 70px 0px;
}

.auth #api_page {
     padding-top: 0;
}

#auth_banner {
     padding: 20px 40px;
}

#auth_banner .banner_content h2 {
     font-family: var(--primary-font);
     font-size: 48px;
     font-weight: 600;
     color: var(--white);
     line-height: 1.3;
}

#auth_banner .banner_content p {
     font-size: 16px;
     color: var(--white);
     line-height: 1.4;
     font-weight: 400;
     margin-bottom: 15px;
}

#auth_banner .banner_image {
     text-align: right;
}

#auth_banner .banner_image img {
     width: 60%;
     margin: auto;
}

#affiliate_page .affiliate_users_data {
     display: flex;
     gap: 50px;
     flex-wrap: wrap;
}

#affiliate_page .affiliate_users_data .aff_item {
     display: flex;
     align-items: center;
     gap: 10px;
}

#affiliate_page .affiliate_users_data .aff_item .aff_item_left .icon {
     width: 70px;
     min-width: 70px;
     height: 70px;
     border-radius: 50px;
     background: var(--primary-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     color: var(--white);
}

.aff_item .aff_item_right h4 {
     font-size: 14px;
}

.service_itemscard {
     background: var(--card-bg);
     padding: 20px 20px;
     border-radius: 10px;
     border: 1px solid var(--card-border);
}

.service_itemscard .service_card_inner .serv_card_top {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 10px;
}

.service_itemscard .service_card_inner .serv_card_top h3 {
     font-family: var(--primary-font);
     font-size: 28px;
     font-weight: bold;
}

#messageFromCEO {
     padding: 50px 0px;
     text-align: center;
}

.ceo_inner img {
     width: 200px;
     margin: 0 auto;
}

.card_join_us h2 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 34px;
     margin-bottom: 10px;
     font-weight: bold;
}

.card_join_us {
     padding: 40px 0px;
}

.privacy_content h4 {
     font-family: var(--primary-font);
     font-size: 24px;
     font-weight: bold;
     color: var(--white);
}

.card_join_us p,
.privacy_content ul li,
.privacy_content p {
     font-family: var(--font-text);
     font-size: 16px;
     color: var(--white);
}

.privacy_content a {
     color: var(--primary-color);
}

/*
*
*
*
*
*
*
*
  Responsive For Home Page
*
*
*
*
*
*
*
*/
@media only screen and (max-width: 1900px) {
     .login_box_area .login_image_right {
          right: 70px;
     }

     .login_box_area .login_image_left {
          left: 120px;
     }

     .def_content h1,
     .def_content h2 {
          font-size: 40px;
          margin-bottom: 5px;
     }

     .service_itemscard .service_card_inner .serv_card_top .icon img {
          width: 90px;
     }

     .service_itemscard .service_card_inner .serv_card_top h3 {
          font-size: 24px;
     }
}

@media only screen and (max-width: 1800px) {
     .login_box_area .login_image_left .main_image {
          right: -180px;
     }

     .login_box_area .login_image_right .main_image {
          left: -185px;
     }

     .login_box_area .login_image_right .main_effect {
          left: 15px;
     }
}

@media only screen and (max-width: 1700px) {
     .login_box_area .login_image_left .main_image {
          right: -130px;
     }

     .login_box_area .login_image_right .main_image {
          left: -140px;
     }

     .login_box_area .login_image_right .main_effect {
          left: 60px;
     }
}

@media only screen and (max-width: 1600px) {
     .login_box_area .login_image_left .main_image {
          right: -80px;
     }

     .login_box_area .login_image_right .main_image {
          left: -80px;
     }

     .login_box_area .login_image_right .main_effect {
          left: 120px;
     }

     .login_box_area .login_image_left .main_effect {
          left: -70px;
     }
}

@media only screen and (max-width: 1500px) {
     .login_box_area .login_image_left .main_image {
          right: -30px;
     }

     .login_box_area .login_image_right .main_image {
          left: -30px;
     }

     .login_box_area .login_image_right .main_effect {
          left: 170px;
     }

     .login_box_area .login_image_left .main_effect {
          left: -120px;
     }
}

@media only screen and (max-width: 1400px) {
     .login_box_area .login_image_left .main_image {
          right: 20px;
     }

     .login_box_area .login_image_right .main_image {
          left: 20px;
     }

     .login_box_area .login_image_right .main_effect {
          left: 220px;
     }

     .login_box_area .login_image_left .main_effect {
          left: -180px;
     }
}

@media only screen and (max-width: 1200px) {
     #banner {
          overflow: hidden;
     }

     .login_box_area .login_image_left .main_image {
          right: 140px;
     }

     .login_box_area .login_image_right .main_image {
          left: 140px;
     }

     .login_box_area .login_image_right .main_effect {
          left: 320px;
     }

     .login_box_area .login_image_left .main_effect {
          left: -280px;
     }

     .how_it_works_timeline {
          margin: 0px 10px;
     }

     .def_content h1,
     .def_content h2 {
          font-size: 38px;
     }
}

@media only screen and (max-width: 992px) {
     #banner {
          overflow: hidden;
     }

     .navbar-toggler {
          display: flex;
          gap: 5px;
          align-items: center;
          color: var(--primary-color);
          border-color: transparent;
          outline: none;
     }

     .navbar-toggler .icon {
          font-size: 25px;
          line-height: 0;
     }

     .navbar-toggler .text {
          font-size: 14px;
          line-height: auto;
          color: var(--white);
     }

     .mobile_menu_sidebar {
          background: var(--card-bg);
          width: 300px !important;
     }

     .mobile_menu_sidebar .offcanvas-header .btn-close {
          background-color: var(--primary-color);
     }

     .mobile_menu_body .nav-item .nav-link {
          color: var(--white);
     }

     .login_box_area .login_image_right,
     .login_box_area .login_image_left {
          position: inherit;
          /* display: none; */
          z-index: -1;
     }

     .login_box_area .login_image_right .main_effect,
     .login_box_area .login_image_right .main_image,
     .login_box_area .login_image_left .main_image,
     .login_box_area .login_image_left .main_effect {
          position: inherit;
     }

     .login_top_image {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          position: inherit;
     }

     .login_box_area .login_image_right {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: -30px;
     }

     .login_box_area .login_image_left {
          display: flex;
          align-items: center;
          justify-content: center;
     }

     .login_box_area .login_image_left .main_image {
          width: 200px;
          position: relative;
          right: 10px;
     }

     .login_box_area .login_image_right .main_effect,
     .login_box_area .login_image_left .main_effect {
          width: 180px;
     }

     .login_box_area .login_image_right .main_image {
          width: 220px;
          position: relative;
          left: 50px;
     }

     .banner_login_part {
          width: 100%;
          padding: 35px;
     }

     #insights {
          padding: 20px 0px;
     }

     #insights .insight_item {
          margin-bottom: 20px;
     }

     #insights .insight_item .text_content h4 {
          font-size: 28px;
          margin-bottom: 0px;
     }

     #insights .insight_item .icon {
          min-width: 86px;
     }

     .blog_card .btn_blog,
     #insights .insight_item .text_content p {
          font-size: 16px;
          font-weight: 400;
     }

     .nav_services .nav-link {
          width: 100%;
     }

     .nav_services {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0px 15px;
     }

     .payment_methods_logo {
          gap: 10px;
     }

     #our_single_blog,
     #banner {
          padding: 30px 0px;
     }

     #blog_page,
     #contactArea,
     #services,
     #featuresOfSmmpanel,
     #whatWeDo,
     #benifits,
     #payment_methods,
     #whyChooseUs,
     #testimonials,
     #wholesale,
     #howItWorks,
     #api_page,
     #about_us {
          padding: 30px 0px;
     }

     #blog_page {
          overflow: inherit;
     }

     .def_content {
          margin-bottom: 20px;
     }

     #our_single_blog .blog_content h1,
     #services .service_content h2,
     .def_content h1,
     .def_content h2 {
          font-size: 34px;
     }

     .def_content h2 br {
          display: none;
     }

     .blog_card .card-text>*,
     .blog_card .card-text,
     .box_item .box_content p,
     .how_it_content p,
     .def_content p {
          font-size: 14px;
     }

     .def_content p>br {
          display: none;
     }

     .btn-primary {
          font-size: 20px;
          height: 50px;
          min-width: 180px;
     }

     .def_image>img {
          width: 50%;
     }

     .how_it_item_wrap .icon {
          width: 100px;
          height: 110px;
     }

     .blog_card .card-title,
     .type_item_1 .type_content h3,
     .box_item .box_content h3,
     .how_it_content h3 {
          font-size: 22px;
     }

     .box_item .box_icon {
          width: 80px;
          margin-bottom: 10px;
     }

     .testimonial_box {
          width: 90%;
     }

     #services .service_icon {
          text-align: center;
     }

     .def_content p.w-75 {
          width: 100% !important;
     }

     .how_it_works_timeline .nav-link {
          font-size: 16px;
          min-width: inherit;
          max-width: 100px;
          width: 100px;
     }

     .how_it_works_timeline::before {
          width: calc(100% - 100px);
          left: 60px;
     }

     .video_part {
          width: 100%;
     }
}

@media only screen and (max-width: 768px) {
     .mobile_menu_sidebar {
          width: 80%;
     }

     .select2-results__option {
          font-size: 14px;
     }

     .select2-container--default .select2-selection--single .select2-selection__rendered {
          font-size: 14px;
     }
}

@media only screen and (max-width: 550px) {
     .logo_navbar img {
          width: 130px;
     }

     .modal-body h3,
     .card .card-body h3,
     .contact_box_inner h4,
     .type_item_1 .type_content h3,
     .box_item .box_content h3,
     .how_it_content h3,
     .card h4,
     .banner_content h4 {
          font-size: 18px;
     }

     .banner_content h1 {
          font-size: 40px;
          line-height: 1.3;
     }

     .point_notes li,
     .feature_item .text,
     .contact_box_inner a,
     .box_item .box_content p,
     .how_it_content p,
     .def_content p,
     #insights .insight_item .text_content p,
     .banner_content p {
          font-size: 14px;
          font-weight: 400;
     }

     .banner_content p br {
          display: none;
     }

     #banner .banner_bg_effect .bg_banner_left_effect {
          top: 15px;
     }

     .login_box_area .login_image_right .main_effect,
     .login_box_area .login_image_left .main_effect {
          width: 80px;
     }

     .login_box_area .login_image_left .main_image {
          width: 160px;
     }

     .login_box_area .login_image_right .main_image {
          width: 180px;
     }

     .banner_login_part h2 {
          font-size: 28px;
     }

     .banner_login_part {
          padding: 25px 20px;
     }

     #loginForm .form-control {
          height: 50px;
          padding-left: 50px;
          color: var(--white);
          font-size: 16px;
     }

     #loginForm .has_icon .icon {
          width: 37px;
          height: 37px;
          top: 6px;
          left: 6px;
     }

     .pass_eye {
          top: 2px;
     }

     #loginForm .btn-primary .btn_icon {
          width: 35px;
          height: 35px;
          top: 6px;
          right: 6px;
     }

     #insights .insight_item .icon {
          min-width: 60px;
          width: 60px;
          max-width: 60px;
     }

     #insights .insight_item {
          gap: 8px;
     }

     #insights .insight_item .text_content h4 {
          font-size: 22px;
     }

     .def_content {
          text-align: center;
     }

     #our_single_blog .blog_content h1,
     #services .service_content h2,
     .def_content h2 {
          font-size: 34px;
          text-align: center;
     }

     .def_content {
          margin-bottom: 10px;
     }

     .def_image>img {
          width: 70%;
     }

     .btn-primary {
          font-size: 18px;
          height: 45px;
          min-width: 150px;
     }

     .about_us_effect .effect_left {
          top: -420px;
     }

     .about_us_effect .effect_right {
          display: none;
     }

     .how_it_effect {
          z-index: -1;
     }

     .wholesale_effect .effect-image {
          top: inherit;
          bottom: -20px;
     }

     .testimonial_effect .test_effect {
          display: none;
     }

     .testimonials_slider_button {
          top: 0px;
          display: flex;
          gap: 10px;
          justify-content: center;
     }

     .swiper-prev,
     .swiper-next {
          display: block;
          position: inherit !important;
          left: inherit;
          right: inherit;
     }

     .testimonial_content img {
          width: 150px;
          margin: 10px 0px;
     }

     #whyChooseUs .def_content {
          margin-bottom: 30px;
     }

     .type_item_1 {
          gap: 10px;
     }

     #featuresOfSmmpanel .box_item {
          background: transparent;
          border-color: transparent;
          padding: 10px 0px;
     }

     .nav_services {
          grid-template-columns: repeat(2, 1fr);
          width: 100%;
          gap: 0px 10px;
     }

     .service_content {
          text-align: center;
          margin-bottom: 15px;
     }

     #services .service_content hr {
          margin: 5px 0px;
     }

     .service_content p {
          text-align: center;
     }

     #whatWeDo .col-lg-6.col-md-6.col-12 {
          margin-bottom: 10px;
     }

     .contact_box_inner,
     .contact_box_inner.mid_box {
          padding: 30px 20px;
     }

     .payment_methods_logo .payment_logo {
          max-width: 140px;
     }

     .how_it_works_timeline {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 5px;
     }

     .how_it_works_timeline::before {
          width: calc(100% - 100px);
          left: 40px;
          top: 17px;
     }

     .how_it_works_timeline .nav-link {
          font-size: 14px;
          min-width: inherit;
          max-width: 70px;
          width: 70px;
          margin: 0px;
          padding: 0;
     }

     #how_it_works .card.card-logo-image .card-body {
          height: 200px;
     }
}

/*
 *
 *
 * Dashboard CSS Files
 * Here
 *
 *
*/
#dashboard {
     transition: 0.5s ease;
}

#dashboard #sidebar {
     position: fixed;
     width: 300px;
     height: 100%;
     background-color: var(--sidebar-color);
     overflow: auto;
     z-index: 9;
     transition: 0.5s;
}

.dropdown-menu {
     max-height: 400px;
     overflow: auto;
}

/* width */
.dropdown-menu::-webkit-scrollbar,
.select2-dropdown .dropdown-menu::-webkit-scrollbar,
#dashboard #sidebar::-webkit-scrollbar {
     width: 5px;
}

/* Track */
.dropdown-menu::-webkit-scrollbar-track,
.select2-dropdown .dropdown-menu::-webkit-scrollbar-track,
#dashboard #sidebar::-webkit-scrollbar-track {
     background: #393939;
}

/* Handle */
.dropdown-menu::-webkit-scrollbar-thumb,
.select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb,
#dashboard #sidebar::-webkit-scrollbar-thumb {
     background: var(--primary-color);
     border-radius: 50px;
}

/* Handle on hover */
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover,
#dashboard #sidebar::-webkit-scrollbar-thumb:hover {
     background: var(--primary-color-deep);
}

#dashboard #content {
     padding-left: 300px;
     transition: 0.5s;
}

#dashboard #content #header {
     position: fixed;
     background: var(--header-bg);
     top: 0;
     width: calc(100% - 300px);
     max-height: 65px;
     height: 65px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
     z-index: 2;
     transition: 0.5s;
}

#dashboard #content .auth {
     /* padding-left: 15px; */
     padding-top: 80px;
}

#dashboard #sidebar .sider_logo {
     display: block;
     text-align: center;
     padding: 20px 5px;
}

#dashboard #sidebar .sider_logo img {
     width: 180px;
     margin: 0 auto;
}

.sider_logo img.logo-color {
     display: none;
}

.daymode .sider_logo img.logo-white,
.daymode #dashboard #sidebar .sider_logo img.logo-white,
#dashboard #sidebar .sider_logo img.logo-color {
     display: none;
}

.daymode .sider_logo img.logo-color,
.daymode #dashboard #sidebar .sider_logo img.logo-color {
     display: block;
}

.offcanvas-body .user_box,
#dashboard #sidebar .user_box {
     margin: 10px 30px;
     text-align: center;
     padding: 20px 15px;
     border-radius: 15px;
     border: 1px solid #f70;
     background: url(https://res.cloudinary.com/sol-0123456789/image/upload/v1733288310/20240612panelbt/effect-user-bg_q9cxkb.png);
     background-color: #161616;
     background-repeat: no-repeat;
     background-size: cover;
     overflow: hidden;
     position: relative;
     margin-bottom: 20px;
}

.offcanvas-body .user_box .user_avatar,
#dashboard #sidebar .user_box .user_avatar {
     width: 80px;
     border-radius: 80px;
     margin: 0 auto;
     margin-bottom: 5px;
     background-color: var(--white);
}

.avatar_images {
     border-radius: 500px;
}

.offcanvas-body .user_box h4,
#dashboard #sidebar .user_box h4 {
     font-family: var(--primary-font);
     font-size: 18px;
     font-weight: 400;
     color: var(--white);
     margin-bottom: 5px;
}

.offcanvas-body .user_box h6,
#dashboard #sidebar .user_box h6 {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: 600;
     color: var(--white);
     margin-bottom: 5px;
}

#dashboard #sidebar .sidebar_menu {
     list-style-type: none;
     padding: 0;
     margin: 0;
     width: 90%;
}

#dashboard #sidebar .sidebar_menu .menu_item .menu_link {
     display: flex;
     align-items: center;
     gap: 8px;
     justify-content: start;
     padding: 10px 30px;
     color: var(--white);
     /* border-bottom: 1px solid #5c5c5c; */
     border-radius: 0px 50px 50px 0px;
     transition: 0.5s background;
}

#dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover {
     background: #393939;
}

#dashboard #sidebar .sidebar_menu .menu_item .menu_link.active {
     background: var(--primary-color);
     border-bottom: none;
     border-radius: 0px 50px 50px 0px;
}

#dashboard #sidebar .sidebar_menu .menu_item:last-child .menu_link {
     border-bottom: none;
}

#dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon {
     font-size: 25px;
     line-height: 0;
}

#dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon i {
     font-size: 20px;
}

#dashboard #sidebar .sidebar_menu .menu_item .menu_link .menu_text {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: 400;
}

#dashboard #content #header .user_access_btn {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--white);
     border-color: var(--white);
     border-radius: 50px;
     width: 40px;
     height: 40px;
     padding: 0px;
}

#dashboard #content #header .user_access_btn .user_avatar {
     width: 100%;
}

.user_access_btn.dropdown-toggle::after {
     display: none;
}

.user_menu_wrap .dropdown-item {
     display: flex;
     align-items: center;
     gap: 5px;
     justify-content: start;
}

.user_menu_wrap .dropdown-item .icon {
     font-size: 20px;
     line-height: 0;
}

.user_menu_wrap .dropdown-item .text {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: 400;
}

#SidebarButton {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     background: none;
     border: none;
     box-shadow: none;
     color: var(--white);
     padding: 10px 10px;
     padding-left: 0px;
     cursor: pointer;
}

#dashboard #content #header .header_left {
     display: flex;
     align-items: center;
     gap: 0px;
}

#dashboard #content #header .header_right {
     display: flex;
     align-items: center;
     gap: 10px;
}

#dashboard #content #header .header_right .menu_btn {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
}

#dashboard #content #header .header_right .menu_btn img {
     width: 40px;
}

#dashboard #content #header .header_right .menu_btn.telegram img {
     width: 50px;
}

.user_sidebar .currency_btn .currency_button,
#dashboard #content #header .currency_btn .currency_button {
     border-radius: 50px;
     padding: 5px 18px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--black-pure);
     border-color: var(--card-border);
     font-size: 14px;
     line-height: 0;
}

#dashboard.activeSidebar #sidebar {
     transform: translateX(-300px);
}

#dashboard.activeSidebar #content {
     padding-left: 0px;
}

#dashboard.activeSidebar #content #header {
     width: 100%;
}

.offcanvas {
     background: var(--sidebar-color);
}

.card_auth_1 .card-body {
     background: var(--bg-redial);
}

.user_data_info {
     position: relative;
     display: grid;
     grid-template-columns: 1fr 2fr;
     align-items: center;
     gap: 10px;
}

.user_data_info .settings_icon_btn {
     position: absolute;
     color: var(--primary-color);
     font-size: 24px;
     right: 10px;
}

.user_data_info .user_d_right {
     display: flex;
     flex-direction: column;
     justify-content: center;
}

.user_data_info .user_d_right h4 {
     font-size: 20px;
     color: var(--white);
     letter-spacing: 3px;
     margin-bottom: 10px;
}

.user_data_info .user_d_right h6 {
     font-size: 18px;
     color: #43b9fe;
     font-weight: normal;
     margin-bottom: 0px;
}

.user_data_info .user_d_left {
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: start;
     border-right: 3px solid var(--primary-color);
     padding-right: 10px;
}

.user_data_info .user_d_left .icon {
     width: 50px;
     height: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.user_data_info .user_d_left .text h6 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 16px;
     margin-bottom: 3px;
}

.user_data_info .user_d_left .text h3 {
     font-family: var(--primary-font);
     font-size: 24px;
     margin-bottom: 0;
     font-weight: 700;
     color: var(--white);
}

.user_data_info .user_d_right {
     padding-left: 15px;
}

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

.statics_card_inner .icon {
     width: 70px;
     min-width: 70px;
     height: 70px;
     border-radius: 50px;
     background: var(--primary-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 25px;
     color: var(--white);
}

.statics_card_inner .icon.iconify_icon {
     font-size: 34px;
}

.statics_card_inner .icon img {
     width: 40px;
}

.statics_card_inner .text h6 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 16px;
     margin-bottom: 3px;
}

.statics_card_inner .text h3 {
     font-family: var(--primary-font);
     color: var(--white);
     font-size: 28px;
     font-weight: 800;
     margin-bottom: 0px;
}

.cat_filter_wrap {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 15px 20px;
}

.cat_filter_wrap .filter_item {
     display: flex;
     gap: 5px;
     align-items: center;
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     padding: 8px 15px;
     border-radius: 8px;
}

.cat_filter_wrap .filter_item>* {
     pointer-events: none !important;
}

.cat_filter_wrap .filter_item.activeItem {
     background: var(--primary-color) !important;
     border-color: var(--primary-color) !important;
     color: var(--white) !important;
}

.cat_filter_wrap .filter_item .icons img {
     pointer-events: none;
     width: 25px;
     min-width: 25px;
     pointer-events: none;
}

.filter_item img {
     pointer-events: none;
}

.cat_filter_wrap .filter_item .text {
     font-size: 14px;
     font-weight: 500;
     color: var(--white);
     pointer-events: none;
}

.card_auth_1 {
     border: none;
}

.card_auth_1 .card-header {
     background: var(--primary-color);
     border-radius: 10px 10px 0px 0px;
     height: 75px;
     max-height: 75px;
}

.card_auth_1 .card-header h3 {
     font-family: var(--primary-font);
     font-size: 22px;
     margin-bottom: 0px;
     font-weight: 600;
     color: var(--white);
}

.card_auth_1 .card-header p {
     font-family: var(--primary-font);
     font-size: 14px;
     margin-bottom: 0px;
     font-weight: 400;
     color: var(--white);
}

.card_auth_1 .card-body {
     border: 1px solid var(--card-border);
     border-top: 0px;
     border-radius: 0 0 10px 10px;
}

.card_auth_1 .card-header .card_text h4 {
     font-family: var(--primary-font);
     font-size: 18px;
     color: var(--white);
     margin-bottom: 0px;
}

.header_buttons .nav-item button {
     background: var(--white);
}

.header_buttons .nav-pills .nav-item .nav-link {
     display: flex;
     align-items: center;
     padding: 8px 10px;
     gap: 2px;
     border-radius: 8px;
}

.header_buttons .nav-pills .nav-item .icon {
     color: var(--black-pure);
     font-size: 22px;
     line-height: 0;
}

.header_buttons .nav-pills .nav-item .text {
     font-size: 14px;
     font-weight: bold;
     color: var(--black-pure);
     display: none;
}

.header_buttons .nav-pills .nav-item .nav-link.active .text {
     display: block;
}

.header_buttons .nav-pills .nav-item .nav-link.active {
     background: var(--white);
}

.header_buttons .nav-pills {
     gap: 5px;
}

.service_descriptions label,
.card-body .lebel {
     font-family: var(--primary-font);
     font-size: 14px;
     margin-bottom: 5px;
     color: var(--white);
}

.example_link .example_set {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #0a0a0a;
     padding: 10px 18px;
     border-radius: 10px;
     color: var(--white);
}

.service_infos {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
}

.service_descriptions #service_descriptions,
.infos_item .info_box {
     display: flex;
     align-items: center;
     gap: 5px;
     background: #0a0a0a;
     padding: 8px 10px;
     border-radius: 10px;
     color: var(--white);
     overflow: auto;
}

/* Day Night Mode btn */
.day_night_btn {
     position: relative;
     display: flex;
     font-size: 22px;
     line-height: 0;
     height: 32px;
     gap: 12px;
     justify-content: space-between;
     align-items: center;
     background: var(--black-pure);
     padding: 6px 10px;
     border-radius: 50px;
     color: var(--white);
     border: 1px solid var(--card-border);
}

.day_night_btn .night_mode {
     color: var(--primary-color);
}

.daymode .day_night_btn .night_mode {
     color: var(--white);
}

.day_night_btn .active_circle {
     position: absolute;
     width: 40px;
     height: 40px;
     background: var(--white);
     border-radius: 50px;
     transform: translateX(26px);
     top: -5px;
     z-index: 0;
     transition: 0.8s ease;
}

.daymode .day_night_btn .active_circle {
     right: inherit;
     transform: translateX(-10px);
}

.day_night_btn .night_mode,
.day_night_btn .day_mode {
     position: relative;
     z-index: 2;
}

.card_header_2 {
     display: flex;
     align-items: center;
     gap: 8px;
}

.card_header_2 .icon {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--white);
     font-size: 24px;
     border-radius: 5px;
     color: var(--black-pure);
}

.card_header_2 .text {
     font-size: 18px;
     font-weight: bold;
     color: var(--white);
}

#api_page .example_response {
     font-family: var(--primary-font);
     color: var(--white);
     font-weight: 400;
}

#api_page pre {
     background: #141414;
     border-radius: 15px;
     padding: 20px 20px;
     color: #fff;
}

#api_page .table-bordered> :not(caption)>*>* {
     background: transparent;
     color: var(--white);
}

.header_logo .sider_logo>img {
     width: 180px;
}

.header_logo .sider_logo .logo-color {
     display: none;
}

.auth .form-group {
     margin-bottom: 1rem !important;
}

.auth .form-control {
     background-color: var(--form-input-bg);
     border-color: var(--form-input-bg);
     padding: 10px 15px;
     border-radius: 10px;
     margin-top: 5px;
     outline: none !important;
     box-shadow: none !important;
}

.auth label {
     font-family: var(--primary-font);
     font-size: 16px;
     font-weight: 600;
     color: var(--white);
}

.select2-container .dropdown-menu>li>a {
     color: var(--white);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
     background-color: var(--primary-color) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] .badge.badge-secondary {
     background: var(--black-pure);
}

.select2-container .badge.badge-secondary {
     min-width: 30px;
     background: var(--primary-color);
     color: var(--white);
}

.select2-results__option {
     border-bottom: 1px solid var(--card-border);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
     background: #2e2e2e;
}

.ticket_history .tickets_his_item {
     display: grid;
     grid-template-columns: 50px repeat(3, 1fr);
     background: var(--form-input-bg);
     gap: 15px;
     padding: 13px 15px;
     margin-bottom: 10px;
     border-radius: 10px;
     border: 1px solid transparent;
     transition: 0.5s;
}

.ticket_history.paymentTable .tickets_his_item {
     grid-template-columns: 50px repeat(4, 1fr) !important;
}

.ticket_history .tickets_his_item.unread_item {
     animation: unreadEffect 3s infinite;
}

@keyframes unreadEffect {
     0% {
          border-color: transparent;
     }

     50% {
          border-color: var(--primary-color);
          background: #180b00;
     }

     100% {
          border-color: transparent;
     }
}

.ticket_history .tickets_his_item h5 {
     font-family: var(--primary-font);
     font-size: 16px;
     color: var(--white);
     font-weight: 400;
     margin-bottom: 0;
}

.ticket_history .tickets_his_sub h5 {
     color: var(--primary-color);
}

.ticket_history .tickets_his_item .tickets_his_id::before {
     content: "Id";
}

.ticket_history .tickets_his_item .tickets_his_sub::before {
     content: "Subject";
}

.ticket_history .tickets_his_item .tickets_his_status::before {
     content: "Status";
}

.ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
     content: "Last Update";
}

.ticket_history .tickets_his_item .payment_methods_name::before {
     content: "Payment Methods";
}

.ticket_history .tickets_his_item .payment_amount::before {
     content: "Amount";
}

.ticket_history .tickets_his_item .payment_time::before {
     content: "Date";
}

.ticket_history .tickets_his_item .tickets_his_status .ticket_Pending {
     color: #00b9cb;
}

.ticket_history .tickets_his_item .tickets_his_status .ticket_Answered {
     color: #1dcb00;
}

.ticket_history .tickets_his_item .tickets_his_status .ticket_Closed {
     color: #ff0202;
}

.ticket_history .tickets_his_item .payment_methods_name::before,
.ticket_history .tickets_his_item .payment_amount::before,
.ticket_history .tickets_his_item .payment_time::before,
.ticket_history .tickets_his_item .tickets_his_id::before,
.ticket_history .tickets_his_item .tickets_his_sub::before,
.ticket_history .tickets_his_item .tickets_his_status::before,
.ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
     display: block;
     font-size: 16px;
     margin-bottom: 5px;
     font-weight: 700;
     color: #ddd;
}

.ticket_history .tickets_his_item .payment_amount,
.ticket_history .tickets_his_item .tickets_his_status {
     text-align: center;
}

.addFundHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 5px;
}

.btn.btn_history {
     font-family: var(--primary-font);
     font-weight: 700;
     background: var(--white);
     color: var(--black-pure);
}

/* Services modal Design */
.services_dsc_modal {
     border-radius: 22px;
     border: none;
     overflow: hidden;
}

.modal__close {
     position: absolute;
     top: 10px;
     right: 10px;
}

.modal__close .btn_modal_close {
     width: 40px;
     background: #ff2c2c;
     font-size: 18px;
     color: var(--white);
     border-radius: 50px;
     height: 40px;
     cursor: pointer;
}

.services_dsc_modal .service_header {
     background: var(--primary-color);
     background-repeat: no-repeat;
     background-position: right center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 20px 20px 0px 0px;
     padding: 10px 10px;
     min-height: auto;
     height: auto;
     color: var(--white);
}

.more_info_btn {
     width: 30px;
     height: 30px;
     display: flex;
     background: var(--primary-color);
     color: var(--white) !important;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
     cursor: pointer;
     font-size: 14px;
}

.service_header #service_name {
     display: block;
     font-family: var(--font-text);
     font-size: 20px;
     font-weight: 700;
     text-align: start;
     color: var(--text-white);
     margin-top: 10px;
}

.services_dsc_modal .services_body {
     padding: 20px 25px;
     background: var(--card-bg);
}

.services_body .other_info {
     display: flex;
     justify-content: space-around;
     text-align: center;
     margin-bottom: 25px;
}

.services_body .other_info .info_item {
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.services_body .other_info .info_item .icon {
     width: 40px;
     height: 40px;
     background: var(--primary-color);
     color: var(--text-white);
     font-size: 18px;
     border-radius: 50px;
     margin: 0 auto;
     line-height: 40px;
}

.services_body .other_info .info_item .text {
     font-family: var(--primary-font);
     color: var(--white);
}

.services_body .other_info .info_item .text h4 {
     font-size: 18px;
     text-align: center;
     margin-bottom: 5px;
}

.services_body .other_info .info_item .text>span {
     font-size: 16px;
     display: block;
}

.services_body #service_des {
     font-size: 16px;
     font-weight: var(--primary-font);
     background: var(--bs-body-bg);
     padding: 15px;
     border-radius: 10px;
     margin-bottom: 20px;
     color: var(--text-black);
}

.services_action {
     text-align: center;
}

.services_action .btn-block {
     min-width: 300px;
}

.orders__filter__btn .order__filters {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
}

.orders__filter__btn .order__filters .btn__orders__filter {
     background: var(--card-bg);
     display: flex;
     align-items: center;
     padding: 10px 15px;
     border-radius: 10px;
     gap: 10px;
     border: none;
     border: 1px solid var(--card-border);
     box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.13);
     color: var(--white);
}

.orders__filter__btn .order__filters .btn__orders__filter.active {
     background: var(--primary-color) !important;
     border-color: var(--primary-color) !important;
}

.orders__filter__btn .order__filters .btn__orders__filter .icon {
     font-size: 23px;
     line-height: 0;
}

.orders__filter__btn .order__filters .btn__orders__filter .text {
     color: var(--white);
     font-family: var(--primary-font);
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
}

.orders__filter__btn .order__filters .btn__orders__filter.active .text {
     color: var(--white);
}

.pagination {
     display: flex;
     gap: 5px;
     margin-top: 20px;
     margin-bottom: 25px;
}

.pagination li a {
     width: 40px;
     height: 40px;
     background: var(--card-bg);
     display: block;
     line-height: 40px;
     font-size: 18px;
     text-align: center;
     color: #fff;
     border-radius: 7px;
     transition: 0.5s;
}

.pagination li a:hover,
.pagination li.active a {
     background: var(--primary-color);
}

/* Order Page Table */

.subs__table,
.refill__table,
.subs__table,
.refill__table,
.order__table {
     margin-bottom: 50px;
     background: var(--bg-redial);
     border-radius: 15px;
}

.refill__table .refill_table_head,
.refill__table .refill_table_row,
.refill__table .refill_table_head,
.refill__table .refill_table_row,
.order__table .order_table_head,
.order__table .order_table_row {
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     /* grid-template-columns: 4em 5em 3fr 6em 7em 6em 6em 17em 12em 1fr; */
     width: 100%;
     gap: 10px;
     text-align: left;
     /* margin-bottom: 20px; */
     border-bottom: 1px solid var(--card-border);
     /* background: var(--card-bg); */
     box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
     padding: 15px;
     border-radius: 0px;
}

.order__table .order_table_row:last-child,
.refill__table .refill_table_row:last-child,
.subs__table .order_table_row:last-child {
     border-bottom: none;
}

.subs__table .subs_table_head>div,
.refill__table .refill_table_head>div,
.order__table .order_table_head>div {
     font-size: 14px;
     font-weight: 600;
     color: var(--primary-color);
     opacity: 0.8;
}

.subs__table .subs_table_row>div,
.refill__table .refill_table_row>div,
.order__table .order_table_row>div {
     font-size: 15px;
     color: var(--text-black);
     font-weight: normal;
}

.subs__table .subs_table_row .body__id>span,
.refill__table .refill_table_row .body__id>span,
.order__table .order_table_row .body__id>span {
     display: inline-flex;
     gap: 4px;
     font-size: 16px;
     background: var(--primary-color);
     color: var(--white);
     padding: 5px 15px;
     border-radius: 10px;
     cursor: pointer;
}

.order__table .order_table_head .head__link,
.order__table .order_table_row .body__link {
     width: 25em;
}

.refill__table .refill_table_row .body__link .link__order,
.order__table .order_table_row .body__link .link__order {
     display: inline;
     color: var(--white);
     transition: 0.5s ease;
}

.refill__table .refill_table_row .body__link .link__order:hover,
.order__table .order_table_row .body__link .link__order:hover {
     color: var(--primary-color);
}

.refill__table .refill_table_row .body__link .link__order>a,
.order__table .order_table_row .body__link .link__order>a {
     color: var(--text-black);
     text-decoration: underline;
     font-weight: 600;
     word-break: break-all;
}

.order__table .order_table_row .body__quantity,
.order__table .order_table_row .body__price {
     font-weight: 600;
}

.order__table .order_table_head .head__price,
.order__table .order_table_row .body__price {
     text-align: center;
}

.order__table .order_table_head .head__services,
.order__table .order_table_row .body__services {
     width: 20em;
}

.order__table .order_table_head .head__status,
.order__table .order_table_row .body__status {
     width: 8em;
}

.order__table .order_table_row .body__quickaction>.dropdown>.btn-action {
     background: var(--primary-color);
     border: none;
     border-radius: 50px;
     color: var(--white);
     padding: 6px 15px;
}

.subs__table .subs_table_head .body__status>.status_capsule,
.subs__table .subs_table_row .body__status>.status_capsule,
.refill__table .refill_table_row .body__status>.status_capsule,
.order__table .order_table_row .body__status>.status_capsule {
     background: #6400ff;
     color: var(--white);
     padding: 6px 15px;
     border-radius: 50px;
     text-align: center;
     min-height: 30px;
     justify-content: center;
}

.body__services {
     cursor: pointer;
     transition: 0.5s;
}

.body__services:hover {
     color: var(--primary-color) !important;
}

.status_capsule.status_Completed {
     background: #1cb474 !important;
}

.status_capsule.status_Active {
     background: #795af6 !important;
}

.status_capsule.status_Pending {
     background: #eda417 !important;
}

.status_capsule.status_Processing {
     background: #795af6 !important;
}

.status_capsule.Rejected,
.status_capsule.status_Canceled {
     background: #ec3d3d !important;
}

.status_capsule.status_Partial {
     background: #d116bf !important;
}

.status_capsule.status_Paused {
     background: #ff5721 !important;
}

.status_capsule.status_Expired {
     background: #795af6 !important;
}

.status_capsule.status_Error {
     background: #878f99;
}

/* ###### Order Page Table */

/* Refill page table */
.refill__table .refill_table_head,
.refill__table .refill_table_row {
     grid-template-columns: repeat(6, minmax(auto, 1fr));
     gap: 25px;
}

.refill__table .refill_table_head .head__link,
.refill__table .refill_table_row .body__link {
     width: 25em;
}

.refill__table .refill_table_head .head__services,
.refill__table .refill_table_row .body__services {
     width: 25em;
}

.refill__table .refill_table_head .head__status,
.refill__table .refill_table_row .body__status {
     width: 8em;
}

/* ### Refill page table */

/* Subscriptions */
.subs__table .subs_table_head,
.subs__table .subs_table_row {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     width: 100%;
     gap: 15px;
     text-align: left;
     margin-bottom: 20px;
     border: 1px solid #d9d9d9;
     background: #fafbff;
     box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
     padding: 15px;
     border-radius: 15px;
}

.subs__table .subs_table_head .head__id,
.subs__table .subs_table_row .body__id {
     width: 5em;
}

.subs__table .subs_table_head .head__username,
.subs__table .subs_table_row .body__username {
     width: 13em;
}

.subs__table .subs_table_head .head__services,
.subs__table .subs_table_row .body__services {
     width: 15em;
}

.subs__table .subs_table_head .head__action,
.subs__table .subs_table_row .body__action {
     width: auto;
}

.subs__table .subs_table_head .body__details,
.subs__table .subs_table_row .body__details {
     width: 7rem;
}

.subs__table .subs_table_row .body__details .btn__details {
     border: 1px solid var(--card-border);
     color: var(--primary-color);
     border-radius: 50px;
     padding: 5px 15px;
     cursor: pointer;
     transition: 0.5s ease-in-out;
}

.subs__table .subs_table_row .body__action .actions__btn {
     display: inline-flex;
     gap: 5px;
     background: var(--primary-color);
     border: none;
     color: var(--white);
     border-radius: 50px;
     padding: 5px 15px;
     cursor: pointer;
     transition: 0.5s ease-in-out;
}

.subs__table .subs_table_row .body__action .btn__cancel {
     display: inline-flex;
     gap: 5px;
     border: 1px solid var(--dark-btn-bg);
     color: var(--dark-btn-bg);
     border-radius: 50px;
     padding: 5px 15px;
     cursor: pointer;
     transition: 0.5s ease-in-out;
}

.subs__table .subs_table_row .body__details .btn__details:hover {
     background: var(--primary-color-deep);
     color: var(--text-white);
}

/* ### Subscriptions */

.user_sidebar_menu ul {
     list-style-type: none;
     padding-left: 0px;
}

.user_sidebar_menu ul li .sidebar-user-item {
     display: flex;
     gap: 5px;
     align-items: center;
     padding: 5px 10px;
     background: var(--bs-body-bg);
     margin-bottom: 5px;
     border-radius: 5px;
     color: var(--white);
}

.user_sidebar_menu ul li .sidebar-user-item .icon {
     line-height: 0;
}

#myAccount .user_card_wrap {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
}

.user_card_wrap .user_card_left {
     display: flex;
     align-items: center;
     gap: 10px;
}

.user_card_wrap .user_card_left .icon {
     width: 70px;
     height: 70px;
     background: var(--primary-color);
     justify-content: center;
     display: flex;
     align-items: center;
     border-radius: 50px;
     font-size: 25px;
}

.user_card_left .text h6 {
     font-size: 14px;
     margin-bottom: 0px;
}

.level_badges {
     background: var(--bs-body-bg);
     font-size: 14px;
     padding: 10px 15px;
     border-radius: 50px;
}

#myAccount h3 {
     font-family: var(--primary-font);
     font-size: 24px;
     font-weight: 700;
     color: var(--white);
}

.acc_features {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px 20px;
}

.feature_item {
     display: flex;
     gap: 6px;
     align-items: center;
}

.feature_item .icon {
     width: 25px;
     min-width: 25px;
     max-height: 25px;
     height: 25px;
     background: #e7ecf9;
     border-radius: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #525252;
     line-height: 0;
}

.feature_item.active .icon {
     background: var(--primary-color);
     color: var(--white);
}

.feature_item .icon .activeIcon {
     display: none;
}

.feature_item.active .icon .activeIcon {
     display: block;
}

.feature_item.active .icon .inactiveIcon {
     display: none;
}

.ticket_info_item {
     display: flex;
     justify-content: space-between;
     border-bottom: 1px dashed var(--primary-color);
     padding: 10px 5px;
     margin-bottom: 10px;
}

.account_badges {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 70%;
     margin: 0 auto;
     background: #000000;
     padding: 10px 25px;
     border-radius: 50px;
}

.account_badges.next_level {
     background: var(--primary-color);
}

.account_badges .icon {
     line-height: 0;
}

.acc_point {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 15px;
}

.acc_point .icon {
     font-size: 31px;
     color: var(--primary-color);
}

.info_icon_box {
     position: absolute;
     right: 15px;
     top: 15px;
     font-size: 20px;
     color: var(--primary-color);
}

#levelModal .nav-item {
     margin-right: 5px;
     margin-bottom: 5px;
}

#levelModal .nav-item .nav-link {
     display: flex;
     align-items: center;
     gap: 5px;
     background: #ff77003d;
     color: var(--white);
}

.user-spending-info-box {
     background: #302d2d;
     padding: 15px;
     position: relative;
     top: -20px;
     right: 10px;
     border-radius: 9px;
}

.daymode .user-spending-info-box {
     background: #e4f1ff;
}

.daymode #levelModal .nav-item .nav-link {
     color: var(--black-pure);
}

.user-spending-info-box .user-spending-txt {
     margin-bottom: 5px;
}

#levelModal .nav-item .nav-link .icon {
     line-height: 0;
}

#levelModal .nav-item .nav-link.active {
     background: var(--primary-color);
}

/* Responsive Area For dashboard */

@media only screen and (max-width: 1900px) {

     .order__table .order_table_head .head__link,
     .order__table .order_table_row .body__link {
          width: 17em;
     }

     .order__table .order_table_head .head__services,
     .order__table .order_table_row .body__services {
          width: 13em;
          font-size: 12px;
     }

     #dashboard.activeSidebar #sidebar_active_blur {
          display: block !important;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 5;
          background: #ffffff0f;
          display: block;
          width: 100%;
          height: 100%;
          backdrop-filter: blur(5px);
          opacity: 1;
     }

     #dashboard #sidebar {
          width: 275px;
          transform: translateX(-300px);
     }

     #dashboard.activeSidebar #sidebar {
          transform: translateX(0px);
     }

     #dashboard #content {
          padding-left: 0;
     }

     #dashboard #content #header {
          width: calc(100%);
     }

     .refill__table .refill_table_row .body__link .link__order>a,
     .order__table .order_table_row .body__link .link__order>a {
          font-size: 13px;
          font-weight: 400;
     }
}

@media only screen and (max-width: 1550px) {

     .order__table .order_table_head .head__link,
     .order__table .order_table_row .body__link {
          width: 14rem;
     }

     .auth .btn-primary,
     .serv_category_card .serv_cat_card_header .category_name,
     .card_auth_1 .card-header h3,
     .user_data_info .user_d_right h4,
     .user_data_info .user_d_left .text h3,
     .statics_card_inner .text h3 {
          font-size: 18px;
     }

     .card_auth_1 .card-header .card_text h4 {
          font-size: 16px;
     }

     .def_content h1,
     .def_content h2,
     #payment_section h2,
     #auth_banner .banner_content h2 {
          font-size: 28px;
     }
}

@media only screen and (max-width: 1300px) {
     .header_logo.d-none-desk {
          display: block !important;
     }

     #dashboard #sidebar {
          transform: translateX(-300px);
     }

     #dashboard #content {
          padding-left: 0px;
     }

     #dashboard #content #header {
          width: 100%;
     }

     #dashboard.activeSidebar #sidebar {
          transform: translateX(0px);
     }

     #dashboard #sidebar_active_blur {
          opacity: 0;
          transition: 1s;
     }

     #dashboard.activeSidebar #sidebar_active_blur {
          display: block !important;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 5;
          background: #ffffff0f;
          display: block;
          width: 100%;
          height: 100%;
          backdrop-filter: blur(5px);
          opacity: 1;
     }

     #dashboard.activeSidebar #content .auth,
     #dashboard.activeSidebar #content {
          overflow: hidden;
     }

     #dashboard #content .auth {
          padding-left: 0px;
     }

     .statics_card_inner .icon img {
          width: 30px;
     }

     #affiliate_page .affiliate_users_data .aff_item .aff_item_left .icon,
     .statics_card_inner .icon {
          width: 60px;
          min-width: 60px;
          height: 60px;
     }

     #affiliate_page .affiliate_users_data .aff_item .aff_item_right h5,
     .statics_card_inner .text h3 {
          font-size: 18px;
     }

     .user_data_info .user_d_left .icon {
          height: 60px;
     }

     #affiliate_page .affiliate_users_data {
          display: flex;
          flex-wrap: wrap;
          gap: 10px 10px;
          justify-content: space-between;
     }
}

@media only screen and (max-width: 992px) {
     .mb-ph-3 {
          margin-bottom: 10px;
     }

     .user_data_info .user_d_left .text h3 {
          font-size: 20px;
     }

     .cat_filter_wrap {
          grid-template-columns: repeat(4, 1fr);
     }

     .user_data_info .user_d_right h4 {
          letter-spacing: 0px;
          margin-bottom: 5px;
     }

     .card_auth_1 .card-header .card_text h4 br {
          display: none;
     }

     .d-none-tab {
          display: none !important;
     }

     .d-none-desk {
          display: block !important;
     }

     .card_auth_1 .card-header h3 {
          font-size: 18px;
          margin-bottom: 0px;
     }

     .social_media_wrap {
          grid-template-columns: repeat(4, 1fr);
          gap: 10px;
     }

     #auth_banner {
          padding: 20px;
     }

     #auth_banner .banner_content h2 {
          font-size: 28px;
     }

     #affiliate_page .affiliate_users_data {
          display: grid;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 15px;
     }

     #dashboard #sidebar {
          width: 300px;
     }

     /* Order Table */
     .order_table_row .body__id {
          grid-area: id;
          text-align: center;
     }

     .order_table_row .body__date {
          grid-area: date;
          text-align: center;
     }

     .order_table_row .body__link {
          grid-area: link;
          width: 100% !important;
     }

     .order_table_row .body__price {
          grid-area: price;
          text-align: center;
     }

     .order_table_row .body__price::before {
          content: "Charges";
     }

     .order_table_row .body__startcount {
          grid-area: statcount;
          text-align: center;
     }

     .order_table_row .body__startcount::before {
          content: "Start Count";
     }

     .order_table_row .body__quantity {
          grid-area: quantity;
          text-align: center;
     }

     .order_table_row .body__quantity::before {
          content: "Quantity";
     }

     .order_table_row .body__remain {
          grid-area: remain;
          text-align: center;
     }

     .order_table_row .body__remain::before {
          content: "Remain";
     }

     .order_table_row .body__services {
          grid-area: services;
          width: 100% !important;
          text-align: center;
     }

     .order_table_row .body__status {
          grid-area: status;
          text-align: center;
     }

     .order_table_row .body__quickaction {
          grid-area: actions;
          text-align: center;
     }

     .order__table .order_table_head {
          display: none;
     }

     .order__table {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          /* gap: 15px; */
     }

     .order__table .order_table_row {
          border: 1px solid var(--card-border);
     }

     .order__table .order_table_row {
          margin-bottom: 0;
     }

     .subs__table .subs_table_row .body__newpost,
     .subs__table .subs_table_row .body__quantity,
     .order_table_row .body__price,
     .order_table_row .body__remain,
     .order_table_row .body__startcount,
     .order_table_row .body__quantity {
          position: relative;
          padding-top: 20px;
     }

     .subs__table .subs_table_row .body__newpost::before,
     .subs__table .subs_table_row .body__quantity::before,
     .order_table_row .body__price::before,
     .order_table_row .body__remain::before,
     .order_table_row .body__startcount::before,
     .order_table_row .body__quantity::before {
          font-size: 12px;
          color: var(--primary-color);
          position: absolute;
          text-align: center;
          top: 0px;
          width: 100%;
          margin: 0;
          padding: 0;
          left: 0;
     }

     .refill__table .refill_table_head,
     .refill__table .refill_table_row,
     .refill__table .refill_table_head,
     .refill__table .refill_table_row,
     .order__table .order_table_head,
     .order__table .order_table_row {
          grid-template-areas:
               "id id id id id id id id id id id id "
               "date date date date date date date date date date date date"
               "link link link link link link link link link link link link"
               "price price price statcount statcount statcount quantity quantity quantity remain remain remain"
               " services services services services services services services services services services services services"
               "status status status status status status actions actions actions actions actions actions";
          gap: 10px;
     }

     .dripfeed__table .order_table_row .body__startcount::before {
          content: "Quantity";
     }

     .dripfeed__table .order_table_row .body__quantity::before {
          content: "Total quantity";
     }

     .dripfeed__table .order_table_row .body__remain::before {
          content: "Runs ~ Interval";
     }

     .refill__table .order_table_row .body__price::before {
          content: "Order Id";
     }

     .refill__table .order_table_row .body__price {
          grid-column: span 12;
     }

     .refill__table .order_table_row .body__status {
          width: 100%;
          grid-column: span 12;
     }

     .dripfeed__table .order_table_row .body__status {
          width: 100%;
          grid-column: span 12;
     }

     .orders__filter__btn .order__filters .btn__orders__filter .icon {
          width: 20px;
     }

     .subs__table .subs_table_head {
          display: none;
     }

     .subs__table .subs_table_row .body__id {
          grid-area: subId;
          width: auto;
     }

     .subs__table .subs_table_row .body__username {
          grid-area: subUsername;
          width: 100%;
     }

     .subs__table .subs_table_row .body__quantity {
          grid-area: subquan;
     }

     .subs__table .subs_table_row .body__newpost {
          grid-area: subpost;
     }

     .subs__table .subs_table_row .body__services {
          grid-area: subserv;
          width: 100%;
     }

     .subs__table .subs_table_row .body__status {
          grid-area: substatus;
     }

     .subs__table .subs_table_row .body__details {
          grid-area: subsdetail;
     }

     .subs__table .subs_table_row .body__action {
          grid-area: subaction;
     }

     .subs__table .subs_table_row .body__quantity::before {
          content: "Quantity";
     }

     .subs__table .subs_table_row .body__newpost::before {
          content: "New posts";
     }

     .subs__table {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
     }

     .subs__table .subs_table_row {
          grid-template-columns: none;
          text-align: center;
          grid-template-areas:
               "subId subId subId subId subId subId"
               "subUsername subUsername subUsername subUsername subUsername subUsername"
               "subquan subquan subquan subpost subpost subpost"
               "subserv subserv subserv subserv subserv subserv"
               "substatus substatus subsdetail subsdetail subaction subaction";
     }

     .acc_features {
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
     }
}

@media only screen and (max-width: 768px) {
     .social_media_wrap {
          grid-template-columns: repeat(6, 1fr);
     }

     .search_filter_wrap {
          grid-template-columns: 1fr;
          gap: 10px;
     }

     .filter_currency>button,
     .search_filter_wrap .filter_btn {
          width: 100%;
     }

     .filter_currency>button,
     .search_filter_wrap .filter_btn {
          height: 45px;
     }

     .social_media_wrap {
          gap: 5px;
     }

     .social_media_wrap .social_media_btn {
          padding: 8px 10px;
     }

     .social_media_wrap .social_media_btn .media_name {
          display: none;
     }

     .fav {
          position: absolute;
          top: 13px;
          right: 60%;
     }

     .serv_category_card .serv_cat_card_header .category_name {
          font-size: 18px;
     }

     .serv_category_card .serv_cat_card_body .service_item,
     .serv_category_card .serv_cat_card_body .service_item.service_table_header {
          display: grid;
     }

     .serv_category_card .serv_cat_card_body .service_item.service_table_header {
          display: none !important;
     }

     .serv_category_card .serv_cat_card_body .service_item .id {
          grid-area: id;
          width: 100%;
          text-align: center;
     }

     .serv_category_card .serv_cat_card_body .service_item.service .services_name {
          font-size: 14px;
          grid-area: services;
          width: 100%;
          text-align: center;
          margin-bottom: 20px;
     }

     .serv_category_card .serv_cat_card_body .service_item .rate {
          position: relative;
          grid-area: price;
          width: 100%;
          text-align: center;
     }

     .serv_category_card .serv_cat_card_body .service_item .rate::before {
          content: "Rate Per 1000";
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.min_order {
          display: block;
          position: relative;
          grid-area: min;
          width: 100%;
          text-align: center;
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.max_order {
          display: block;
          position: relative;
          grid-area: max;
          width: 100%;
          text-align: center;
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.min_order::before {
          content: "Min Order";
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.max_order::before {
          content: "Max Order";
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.min_order::before,
     .serv_category_card .serv_cat_card_body .service_item.service>span.max_order::before,
     .serv_category_card .serv_cat_card_body .service_item .rate::before {
          font-family: var(--font-text);
          font-size: 12px;
          color: #8f8f8f;
          position: absolute;
          top: -20px;
          text-align: center;
          display: block;
          width: 100%;
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.avg_time {
          font-size: 14px;
          grid-area: avgTime;
          display: block;
          width: 100%;
          text-align: center;
     }

     .serv_category_card .serv_cat_card_body .service_item .descriptions {
          grid-area: desc;
          width: 100%;
          text-align: center;
     }

     .serv_category_card .serv_cat_card_body .service_item.service {
          position: relative;
          display: grid;
          grid-template-areas:
               "id id id id id id"
               "services services services services services services"
               " price price min min max max"
               " avgTime avgTime avgTime avgTime avgTime avgTime"
               " desc desc desc desc desc desc";
          gap: 10px;
     }

     .serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
     .serv_category_card .serv_cat_card_body .service_item.service>span.min_order>span,
     .serv_category_card .serv_cat_card_body .service_item.service>span.max_order>span,
     .serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
          font-size: 14px;
          padding: 5px 18px;
     }

     .serv_category_card .serv_cat_card_body {
          padding: 10px;
     }

     .btn_descriptions {
          font-size: 14px;
          padding: 5px 30px;
     }

     .services_dsc_modal .service_header {
          padding: 15px;
     }

     .services_dsc_modal .services_body {
          padding: 20px 10px;
     }

     .service_header #service_name {
          font-size: 16px;
     }

     .services_body .other_info .info_item .text h4 {
          font-size: 14px;
          margin-bottom: 0px;
     }

     .services_body .other_info .info_item .text>span {
          font-size: 14px;
          font-weight: var(--font-extra-bold);
     }

     .services_body .other_info .info_item {
          gap: 5px;
     }

     .service_header .btn_scondary {
          padding: 5px 20px;
          font-size: 14px;
     }

     .services_body #service_des {
          font-size: 12px;
     }

     #affiliate_page .affiliate_users_data {
          grid-template-columns: 1fr !important;
     }

     #auth_banner .banner_content h2 {
          font-size: 32px;
     }

     #auth_banner .banner_image {
          text-align: center;
     }

     .acc_features {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
     }

     .user-spending-info-box {
          top: 5px;
          right: inherit;
     }
}

@media only screen and (max-width: 550px) {
     .mb-ph-3 {
          margin-bottom: 0.5rem;
     }

     .cat_filter_wrap {
          grid-template-columns: repeat(6, 1fr);
     }

     .header_logo .sider_logo>img {
          width: 150px;
     }

     .cat_filter_wrap {
          gap: 5px;
     }

     .cat_filter_wrap .filter_item {
          justify-content: center;
          align-items: center;
     }

     .cat_filter_wrap .filter_item .text {
          display: none;
     }

     .user_data_info .user_d_left {
          border-right: none;
          padding-right: none;
          border-bottom: 2px solid var(--primary-color);
          padding-bottom: 10px;
     }

     .user_data_info .settings_icon_btn {
          top: 10px;
     }

     .user_data_info {
          grid-template-columns: 1fr;
     }

     .user_data_info .user_d_right {
          padding-left: 0px;
     }

     .user_data_info .user_d_right h4 {
          font-size: 18px;
     }

     .statics_card_inner .text h6,
     .user_data_info .user_d_right h6 {
          font-size: 14px;
     }

     .statics_card .card-body {
          padding: 10px 10px;
     }

     #affiliate_page .affiliate_users_data .aff_item .aff_item_left .icon,
     .statics_card_inner .icon {
          width: 50px;
          min-width: 50px;
          height: 50px;
          font-size: 24px;
     }

     .statics_card_inner .text h6 .statics_card_inner .icon img {
          width: 25px;
     }

     .statics_card_inner {
          gap: 5px;
     }

     .neworder_statistics_row .col-lg-3:nth-child(3),
     .neworder_statistics_row .col-lg-3:first-child {
          padding-right: 5px;
     }

     .neworder_statistics_row .col-lg-3:nth-child(2),
     .neworder_statistics_row .col-lg-3:nth-child(4) {
          padding-left: 5px;
     }

     .d-none-ph {
          display: none !important;
     }

     .example_set .text,
     .infos_item .info_box .text {
          font-size: 12px;
     }

     .card_auth_1 .card-header {
          height: auto;
          max-height: inherit;
     }

     .infos_item .info_box .icon {
          width: 30px;
          min-width: 30px;
     }

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

     .service_descriptions #service_descriptions {
          font-size: 14px;
     }

     .ticket_history .tickets_his_item {
          grid-template-areas:
               "tickId tickId tickId tickId tickId tickId"
               "ticketSub ticketSub ticketSub ticketSub ticketSub ticketSub"
               "ticketStatus ticketStatus LastUpdate LastUpdate LastUpdate LastUpdate";
          gap: 20px 5px;
     }

     .ticket_history.paymentTable .tickets_his_item {
          grid-template-areas:
               "tickId tickId tickId tickId tickId tickId"
               "ticketSub ticketSub ticketSub ticketSub ticketSub ticketSub"
               "ticketStatus ticketStatus LastUpdate LastUpdate LastUpdate LastUpdate"
               "Invoice Invoice Invoice Invoice Invoice Invoice";
          gap: 20px 5px;
     }

     .ticket_history .tickets_his_id {
          grid-area: tickId;
          text-align: center;
     }

     .ticket_history.paymentTable .invoice {
          grid-area: Invoice;
          text-align: center;
     }

     .payment_methods_name,
     .ticket_history .tickets_his_sub {
          grid-area: ticketSub;
          text-align: center;
     }

     .payment_amount,
     .ticket_history .tickets_his_status {
          grid-area: ticketStatus;
          text-align: center;
     }

     .payment_time,
     .ticket_history .tickets_his_lastUpdate {
          grid-area: LastUpdate;
          text-align: center;
     }

     .ticket_history .tickets_his_item .payment_methods_name::before,
     .ticket_history .tickets_his_item .payment_amount::before,
     .ticket_history .tickets_his_item .payment_time::before,
     .ticket_history .tickets_his_item .tickets_his_id::before,
     .ticket_history .tickets_his_item .tickets_his_sub::before,
     .ticket_history .tickets_his_item .tickets_his_status::before,
     .ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
          font-size: 14px;
     }

     .ticket_history .tickets_his_item h5 {
          font-size: 15px;
     }

     .social_media_wrap {
          grid-template-columns: repeat(4, 1fr);
     }

     #auth_banner {
          padding: 20px 0px;
     }

     #myAccount h3 {
          font-size: 18px;
     }

     #myAccount p {
          font-size: 14px;
     }

     .level_badges {
          font-size: 10px;
     }

     .user_card_wrap .user_card_left .icon {
          width: 45px;
          height: 45px;
          font-size: 20px;
     }

     #auth_banner .banner_content h2 {
          font-size: 24px;
     }

     .auth .btn-primary {
          height: 40px;
          font-size: 14px;
     }

     #auth_banner .banner_content p {
          font-size: 14px;
     }

     .service_itemscard .service_card_inner .serv_card_top .icon img {
          width: 75px;
     }

     .service_itemscard .service_card_inner .serv_card_top h3 {
          font-size: 20px;
     }

     .service_itemscard .service_card_inner .serv_card_top {
          font-size: 14px;
     }

     .order__table {
          grid-template-columns: 1fr;
     }

     .orders__filter__btn .order__filters .btn__orders__filter {
          padding: 6px 15px;
          border-radius: 7px;
          gap: 10px;
     }

     .orders__filter__btn .order__filters .btn__orders__filter .text {
          font-size: 16px;
     }

     .orders__filter__btn .order__filters .btn__orders__filter .icon {
          width: 16px;
     }

     .serv_category_card {
          margin-bottom: 20px;
     }

     .serv_category_card .serv_cat_card_body .service_item.service {
          position: relative;
     }

     .serv_category_card .serv_cat_card_body .service_item .fav {
          position: absolute;
          top: 15px;
          font-size: 18px;
     }

     .service_filter_wraper {
          padding: 15px 5px;
     }

     .subs__table {
          display: grid;
          grid-template-columns: 1fr;
     }

     .subs__table .subs_table_row {
          grid-template-columns: none;
          text-align: center;
          grid-template-areas:
               "subId subId subId subId subId subId"
               "subUsername subUsername subUsername subUsername subUsername subUsername"
               "subquan subquan subquan subpost subpost subpost"
               "subserv subserv subserv subserv subserv subserv"
               "substatus substatus substatus substatus substatus substatus"
               " subsdetail subsdetail  subsdetail subaction subaction subaction";
     }

     .order__table .order_table_row {
          border: none;
          border-bottom: 1px solid var(--card-border);
     }

     #dashboard #content #header .header_right {
          gap: 5px;
     }

     #dashboard #content #header .currency_btn .currency_button {
          padding: 5px 10px;
          font-size: 12px;
     }

     #dashboard #sidebar .sidebar_menu .menu_item .menu_link {
          padding: 5px 30px;
     }

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

@media only screen and (max-width: 400px) {
     .cat_filter_wrap {
          grid-template-columns: repeat(4, 1fr);
     }

     .statics_card_inner .text h6 {
          font-size: 11px;
     }

     #affiliate_page .affiliate_users_data .aff_item .aff_item_right h5,
     .statics_card_inner .text h3 {
          font-size: 14px;
     }
}

/* Day Mode colors */
.daymode #myAccount h3,
.daymode h1,
.daymode h2,
.daymode h3,
.daymode h4,
.daymode h5,
.daymode h6,
.daymode p,
.daymode div {
     color: var(--black-pure);
}

.daymode .level_badges,
.daymode #dashboard #sidebar {
     background: #ffede0;
}

.daymode {
     background: #f5fcff !important;
     background-color: #f5fcff !important;
}

.daymode .offcanvas,
.daymode #dashboard #content #header {
     background: #ffede0;
}

.offcanvas .user_sidebar {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
}

.offcanvas a.menu_btn.telegram {
     width: 50px;
     position: relative;
     top: 2px;
}

.offcanvas a.menu_btn.telegram img {
     width: 50px;
}

.daymode .user_sidebar_menu ul li .sidebar-user-item {
     background: var(--white);
}

.daymode #SidebarButton {
     color: var(--primary-color);
}

.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link {
     color: var(--black-pure);
}

.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon {
     color: var(--primary-color);
}

.daymode #api_page .example_response,
.daymode #api_page .table-bordered> :not(caption)>*>*,
.daymode .table tr td,
.daymode .table tr th,
.daymode .faq_accordion .accordion-item p,
.daymode .faq_accordion .accordion-item .accordion-header button,
.daymode .serv_category_card .serv_cat_card_body .service_item.service .services_name,
.daymode .serv_category_card .serv_cat_card_body .service_item.service_table_header>span,
.daymode .social_media_wrap .social_media_btn .media_name,
.daymode .ticket_history .tickets_his_item h5,
.daymode .ticket_history .tickets_his_item .payment_methods_name::before,
.daymode .ticket_history .tickets_his_item .payment_amount::before,
.daymode .ticket_history .tickets_his_item .payment_time::before,
.daymode .ticket_history .tickets_his_item .tickets_his_id::before,
.daymode .ticket_history .tickets_his_item .tickets_his_sub::before,
.daymode .ticket_history .tickets_his_item .tickets_his_status::before,
.daymode .ticket_history .tickets_his_item .tickets_his_lastUpdate::before,
.daymode #payment_section h2,
.daymode #auth_banner .banner_content p,
.daymode #auth_banner .banner_content h2,
.daymode .example_link .example_set,
.daymode .service_descriptions #service_descriptions,
.daymode .infos_item .info_box,
.daymode .service_descriptions label,
.daymode .card-body .lebel,
.daymode .statics_card_inner .text h3,
.daymode .statics_card_inner .text h6,
.daymode .user_data_info .user_d_left .text h3,
.daymode .cat_filter_wrap .filter_item .text,
.daymode .user_data_info .user_d_left .text h6,
.daymode .user_data_info .user_d_right h4 {
     color: var(--black-pure);
}

.daymode .ticket_history .tickets_his_item .tickets_his_sub h5 {
     color: var(--primary-color);
}

.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active {
     color: var(--white);
}

.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active .icon {
     color: var(--white);
}

.daymode .services_dsc_modal .services_body {
     background: var(--white);
}

.daymode .services_body #service_des {
     background: #ffede0;
     border-color: var(--primary-color);
}

.daymode .table> :not(caption)>*>*,
.daymode .social_media_wrap .social_media_btn,
.daymode .cat_filter_wrap .filter_item,
.daymode .card {
     background-color: var(--white);
     border-color: #e1e1e1;
}

.daymode .card_auth_1 .card-body {
     background: var(--white);
     border-color: var(--primary-color);
}

.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover {
     background: transparent;
}

.daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active:hover {
     background: var(--primary-color);
}

.daymode .select2-container .select2-selection__text,
.daymode label,
.daymode .service_descriptions label {
     color: var(--black-pure);
}

.daymode .user_sidebar .currency_btn .currency_button,
.daymode #dashboard #content #header .currency_btn .currency_button {
     background: var(--white);
     border-color: var(--primary-color);
     color: var(--black-pure);
}

.daymode .day_night_btn {
     background: var(--white);
     border-color: var(--primary-color);
}

.daymode .day_night_btn .night_mode {
     color: var(--primary-color);
}

.daymode .day_night_btn .active_circle {
     background: var(--primary-color);
     color: var(--white);
}

.daymode .orders__filter__btn .order__filters .btn__orders__filter {
     background: #ffede0;
     color: var(--black-pure);
     border-color: #ff770052;
}

.daymode .orders__filter__btn .order__filters .btn__orders__filter .text {
     color: var(--black-pure);
}

.daymode .service_descriptions #service_descriptions,
.daymode .infos_item .info_box,
.daymode .example_link .example_set {
     background: #ffede0;
     border-color: #ff770052;
}

.daymode .card.card_chat .tickets-uploader,
.daymode .ticket_history .tickets_his_item,
.daymode .panel-body.border-solid,
.daymode .search_inputs .search input,
.daymode .search_filter_wrap .search input,
.daymode .auth .form-control {
     border-color: #ff770052;
     background-color: #ffede0;
}

.daymode .dropdown-menu {
     background: var(--white);
}

.daymode .header_logo .sider_logo .logo-white {
     display: none;
}

.daymode .header_logo .sider_logo .logo-color {
     display: block;
}

.daymode .account_badges {
     background: #dcf5ff;
}

.daymode .account_badges.next_level {
     background: var(--primary-color);
     color: var(--white);
}

/* width */
.daymode .dropdown-menu::-webkit-scrollbar,
.daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar,
#dashboard #sidebar::-webkit-scrollbar {
     width: 5px;
}

/* Track */
.daymode .dropdown-menu::-webkit-scrollbar-track,
.daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar-track,
.daymode #dashboard #sidebar::-webkit-scrollbar-track {
     background: #e5e5e5;
}

/* Handle */
.daymode .dropdown-menu::-webkit-scrollbar-thumb,
.daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb,
.daymode #dashboard #sidebar::-webkit-scrollbar-thumb {
     background: var(--primary-color);
     border-radius: 50px;
}

/* Handle on hover */
.daymode .dropdown-menu::-webkit-scrollbar-thumb:hover,
.daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover,
.daymode #dashboard #sidebar::-webkit-scrollbar-thumb:hover {
     background: var(--primary-color-deep);
}

.daymode .select2-container--default .select2-results__option[aria-selected="true"] .select2-selection__text {
     color: var(--white);
}

.daymode .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background: #d5d5d5;
}

.daymode .select2-results__option {
     border-color: #ffede0;
}

.daymode .orders__filter__btn .order__filters .btn__orders__filter.active .text,
.daymode .orders__filter__btn .order__filters .btn__orders__filter.active {
     color: var(--white);
}

.daymode .subs__table,
.daymode .refill__table,
.daymode .subs__table,
.daymode .refill__table,
.daymode .order__table {
     background: var(--white);
}

.daymode .orders__filter__btn .order__filters .btn__orders__filter.active .icon {
     color: var(--white);
}

.daymode .refill__table .refill_table_row .body__link .link__order,
.daymode .order__table .order_table_row .body__link .link__order {
     color: var(--black-pure);
}

.daymode .refill__table .refill_table_head,
.daymode .refill__table .refill_table_row,
.daymode .refill__table .refill_table_head,
.daymode .refill__table .refill_table_row,
.daymode .order__table .order_table_head,
.daymode .order__table .order_table_row {
     border-color: var(--primary-color);
}

.daymode .user_menu_wrap .dropdown-item.bg-danger .icon,
.daymode .user_menu_wrap .dropdown-item.bg-danger .text,
.daymode .user_menu_wrap .dropdown-item.bg-danger {
     color: var(--white) !important;
}

.daymode .ticket_history .tickets_his_item.unread_item {
     animation: unreadEffect2 3s infinite;
}

@keyframes unreadEffect2 {
     0% {
          border-color: transparent;
     }

     50% {
          border-color: var(--primary-color);
          background: #efd2bd;
     }

     100% {
          border-color: transparent;
     }
}

.daymode .card.card_chat {
     background: url(https://cdn.mypanel.link/ob5eq3/6brszdgdh34b7wdj.png),
          radial-gradient(#fff, #fff);
}

.daymode .ticket-message-left.admin_ticket .ticket-message {
     background: #ffcaca;
}

.daymode .social_media_wrap .social_media_btn.activeItem {
     background: var(--primary-color);
     border-color: var(--primary-color);
}

.daymode .serv_category_card .serv_cat_card_body {
     background: var(--white);
}

.daymode .serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
.daymode .serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
     background: #ffede0;
     color: var(--primary-color);
}

.daymode .auth .faq_accordion .accordion-item {
     background: #ffede0;
}

.daymode .modal-content {
     background: var(--white);
}

.dropdown-menu {
     z-index: 2;
}

.separator {
     display: flex;
     align-items: center;
     text-align: center;
}

.separator::before,
.separator::after {
     content: "";
     flex: 1;
     border-bottom: 1px solid #c9c9c9;
}

.separator:not(:empty)::before {
     margin-right: 0.25em;
}

.separator:not(:empty)::after {
     margin-left: 0.25em;
}

.invoice_btn {
     padding: 5px 20px;
     border: none;
     background: var(--primary-color);
     border-radius: 5px;
}

.daymode .select2-container .dropdown-menu>li>a {
     color: var(--black-pure);
}

.ticket-message blockquote {
     border-left: 2px solid var(--primary-color);
     background: #ff770033;
     padding: 0px 10px;
}

.select2-container .dropdown-menu>li>a {
     color: var(--white);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
     background-color: var(--primary-color) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] .badge.badge-secondary {
     background: var(--black-pure);
}

.select2-container .badge.badge-secondary {
     min-width: 30px;
     background: var(--primary-color);
     color: var(--white);
}

.select2-results__option {
     border-bottom: 1px solid var(--card-border);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
     background: #2e2e2e;
}

.select2-container--default .select2-selection--single {}

.select2-container .select2-selection--single {
     box-sizing: border-box;
     cursor: pointer;
     display: block;
     user-select: none;
     -webkit-user-select: none;
     height: auto;
}

.auth .form-control {
     background-color: var(--form-input-bg);
     border-color: var(--form-input-bg);
     padding: 10px 15px;
     border-radius: 10px;
     margin-top: 5px;
     outline: none !important;
     box-shadow: none !important;
}

.select2-container--default .select2-selection--single {
     background-color: var(--form-input-bg) !important;
     border-color: var(--form-input-bg) !important;
     padding: 10px 15px !important;
     border-radius: 10px !important;
     margin-top: 5px !important;
     outline: none !important;
     box-shadow: none !important;
}

@media only screen and (min-width: 1300px) {
     #dashboard.activeSidebar #sidebar_active_blur {
          display: block !important;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 5;
          background: #ffffff0f;
          display: block;
          width: 100%;
          height: 100%;
          backdrop-filter: blur(5px);
          opacity: 1;
     }

     html body #dashboard.activeSidebar #sidebar {
          transform: translateX(0px) !important;
     }

     html body #dashboard #sidebar {
          transform: translateX(-100%) !important;
     }

     html body #dashboard #content {
          padding-left: 0px;
     }

     html body.active #dashboard #content {
          padding-left: 300px !important;
     }

     html body #dashboard #content #header {
          width: 100% !important;
     }

     html body.active #dashboard #content #header {
          width: calc(100% - 300px) !important;
     }

     /* html body  #dashboard #content #header{
      width: 100% !important;
    }
    #dashboard.activeSidebar #content #header{
      width: 100% !important;
    } */
}


/* ===== Additional mobile & performance enhancements ===== */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
     * {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
          scroll-behavior: auto !important;
     }
}

/* Improve tap interactions and accessibility */
:where(button, a, [role="button"]) {
     touch-action: manipulation;
}

:where(*) {
     -webkit-tap-highlight-color: transparent;
}

/* Tighten vertical rhythm on mobile for denser layout */
@media (max-width:640px) {

     .container,
     .csmm-wrap,
     .sh-wrapper {
          padding-left: 12px !important;
          padding-right: 12px !important;
     }

     h1 {
          font-size: clamp(22px, 7vw, 28px);
     }

     h2 {
          font-size: clamp(18px, 5.6vw, 24px);
     }

     h3 {
          font-size: clamp(16px, 5vw, 20px);
     }

     p,
     li {
          font-size: 14px;
     }

     .section-subtitle,
     .def_content p {
          font-size: 14px;
     }

     /* Reduce inter-card gaps */
     .blog-section,
     .services-hub .sh-grid,
     #free-services .services-grid,
     #payment_methods .pay-grid,
     #country-smm .country-grid {
          gap: 10px !important;
     }

     /* Constrain long labels */
     .svc-name,
     .srv-title,
     #payment_methods .pay-label,
     #country-smm .country-link .label {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
          display: block;
     }
}

/* Prevent images from exceeding their cards and reserve space to fight CLS */
img {
     max-width: 100%;
     height: auto;
}

.blog-image-wrapper {
     aspect-ratio: 16 / 9;
     height: auto !important;
}

#payment_methods .pay-logo,
#payment_methods .pay-svg {
     width: auto;
}

/* De-emphasize heavy hover effects on touch to reduce paint cost */
@media (hover: none) {

     .blog_card:hover,
     .blog-box:hover,
     #payment_methods .pay-card:hover,
     #free-services .srv:hover {
          box-shadow: none !important;
          transform: none !important;
     }
}

/* Ensure hidden overflow on chip containers to avoid wrapping artifacts */
.services-hub .svc-chip {
     overflow: hidden;
}


/* ===== PAYMENT METHODS Optimized ===== */
#payment_methods .pay-card {
     min-height: 96px;
     padding: 12px;
}

#payment_methods .pay-logo,
#payment_methods .pay-svg {
     max-width: 110px;
     max-height: 28px;
     width: auto;
     height: auto;
     object-fit: contain;
     display: block;
}

@media (max-width:640px) {
     #payment_methods .pay-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     #payment_methods .pay-card {
          min-height: 82px;
          padding: 10px;
     }

     #payment_methods .pay-logo,
     #payment_methods .pay-svg {
          max-width: 78px;
          max-height: 22px;
     }

     #payment_methods .pay-label {
          font-size: .8rem;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
     }
}

@media (max-width:360px) {
     #payment_methods .pay-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }

     #payment_methods .pay-label {
          white-space: normal;
          overflow-wrap: anywhere;
     }
}

#payment_methods .pay-card.is-broken .pay-logo,
#payment_methods .pay-card.is-broken .pay-svg {
     display: none;
}

#payment_methods .pay-card.is-broken .pay-label::after {
     content: " (logo unavailable)";
     font-size: .75em;
     opacity: .65;
}



/* ===== Mobile-Only Grid Adjustments ===== */

/* Services Section: 3 per row on mobile, 2 on very small */
@media (max-width:640px) {
     .services-hub .sh-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }
}

@media (max-width:360px) {
     .services-hub .sh-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}

/* Countries Section: 3 per row on mobile, 2 on very small */
@media (max-width:640px) {
     #country-smm .country-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }
}

@media (max-width:360px) {
     #country-smm .country-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}

/* Free Services Section: 3 per row on mobile, 2 on very small */
@media (max-width:640px) {
     #free-services .services-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }
}

@media (max-width:360px) {
     #free-services .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}



/* ============================
   MOBILE FIX PACK (≤640px)
   - Keep desktop unchanged
   - Make missed sections compact
   - Ensure names are readable
============================ */
@media (max-width:640px) {

     /* Grid safety so text can actually shrink/clip correctly */
     .services-hub .sh-grid>*,
     #country-smm .country-grid>*,
     #free-services .services-grid>*,
     #payment_methods .pay-grid>*,
     .blog-section>* {
          min-width: 0;
     }

     /* Services Section — 3-up & readable names */
     .services-hub .sh-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     .services-hub .svc-chip {
          padding: 10px;
          gap: 8px;
          overflow: hidden;
     }

     .services-hub .svc-name {
          color: #e5e7eb;
          font-size: 13px;
          line-height: 1.25;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
     }

     .services-hub .svc-see {
          padding: 6px 10px;
          font-size: 11px;
     }

     /* Countries — 3-up & readable labels */
     #country-smm .country-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     #country-smm .country-link {
          --card-h: 92px;
          padding: 10px;
          gap: 8px;
     }

     #country-smm .flag-img {
          width: 34px;
     }

     #country-smm .country-link .label {
          color: #f3f4f6;
          font-size: 12.5px;
          line-height: 1.25;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
     }

     /* Free Services — 3-up & readable titles */
     #free-services .services-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     #free-services .srv {
          padding: 12px;
          gap: 8px;
     }

     #free-services .srv-title {
          font-size: 13.5px;
          line-height: 1.25;
          margin: 0;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
     }

     #free-services .platform {
          font-size: 11.5px;
     }

     /* Payment Methods — keep 3-up but make labels visible (2 lines) */
     #payment_methods .pay-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     #payment_methods .pay-card {
          min-height: 82px;
          padding: 10px;
     }

     #payment_methods .pay-logo,
     #payment_methods .pay-svg {
          max-width: 78px;
          max-height: 22px;
          object-fit: contain;
     }

     #payment_methods .pay-label {
          font-size: 12.5px;
          line-height: 1.2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
     }

     /* Blog tiles / misc cards */
     .blog-section {
          gap: 10px !important;
     }

     .blog_card,
     .blog-box {
          padding: 12px !important;
     }

     .blog_card:hover,
     .blog-box:hover {
          box-shadow: none !important;
          transform: none !important;
     }

     /* Slightly smaller headings & tighter containers */
     h1 {
          font-size: clamp(20px, 6.6vw, 26px);
     }

     h2 {
          font-size: clamp(18px, 5.4vw, 22px);
     }

     h3 {
          font-size: clamp(16px, 5vw, 19px);
     }

     .container,
     .csmm-wrap,
     .sh-wrapper {
          padding-left: 12px !important;
          padding-right: 12px !important;
     }
}

/* Ultra-small safety (≤360px): fall back to 2-up for dense grids */
@media (max-width:360px) {

     .services-hub .sh-grid,
     #country-smm .country-grid,
     #free-services .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}



/* =========================================
   ADDITIONAL FINAL UPDATES FOR MOBILE ONLY
   ========================================= */

/* 1) Free SMM Panel Services Section: 4 per row on mobile */
@media (max-width:640px) {
     #free-services .services-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
          gap: 8px !important;
     }

     #free-services .srv-title {
          font-size: 12px;
          line-height: 1.2;
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
     }
}

@media (max-width:360px) {
     #free-services .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}

/* 2) Services Section Titles visible and readable */
@media (max-width:640px) {
     .services-hub .svc-name {
          font-size: 13px;
          line-height: 1.3;
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #fff;
     }

     .services-hub .svc-chip {
          align-items: flex-start;
          padding: 10px;
     }
}

/* 3) How Our Panel Works Section smaller on mobile */
@media (max-width:640px) {
     #how-it-works {
          padding: 20px 12px !important;
     }

     #how-it-works h2 {
          font-size: 18px !important;
          line-height: 1.2;
          margin-bottom: 10px;
     }

     #how-it-works .step {
          padding: 10px;
          font-size: 13px;
          line-height: 1.3;
     }

     #how-it-works .step-title {
          font-size: 14px;
          margin-bottom: 6px;
     }
}



/* ===========================
   MOBILE FIX PATCH (≤ 640px)
   - Services: show titles fully + 3-up
   - Free Services: 4-up (then 3/2 on smaller widths)
   - Trim tall sections on mobile
   =========================== */
@media (max-width:640px) {

     /* Grid safety so text can actually shrink/clip correctly */
     .services-hub .sh-grid>*,
     #country-smm .country-grid>*,
     #free-services .services-grid>*,
     #payment_methods .pay-grid>*,
     .blog-section>* {
          min-width: 0;
     }

     /* --- SERVICES (tabs grid) --- */
     .services-hub .sh-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     .services-hub .svc-chip {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: center;
          gap: 8px;
          padding: 10px;
          overflow: hidden;
     }

     .services-hub .svc-chip>* {
          min-width: 0;
     }

     .services-hub .svc-name {
          font-size: 13px;
          line-height: 1.25;
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
     }

     .services-hub .svc-see {
          padding: 6px 10px;
          font-size: 11px;
     }

     /* --- FREE SMM PANEL SERVICES --- */
     #free-services .services-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
          gap: 8px !important;
     }

     #free-services .srv {
          padding: 10px;
          gap: 6px;
     }

     #free-services .srv-title {
          font-size: 12px;
          line-height: 1.25;
          white-space: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
     }

     #free-services .platform {
          font-size: 11px;
     }

     #free-services .see-btn {
          padding: 6px 10px;
          font-size: 11px;
     }

     /* --- Trim tall sections (titles & spacing) --- */
     h1 {
          font-size: clamp(20px, 6.6vw, 26px);
     }

     h2 {
          font-size: clamp(18px, 5.4vw, 22px);
     }

     h3 {
          font-size: clamp(16px, 5vw, 19px);
     }

     /* “How Our Panel Works” specifically */
     #how-it-works {
          padding: 20px 12px !important;
     }

     #how-it-works h2 {
          margin-bottom: 10px;
     }

     #how-it-works .step {
          padding: 10px;
          font-size: 13px;
          line-height: 1.3;
     }

     #how-it-works .step-title {
          font-size: 14px;
          margin-bottom: 6px;
     }

     /* Common insights icon list */
     .insight_item {
          gap: 10px;
     }

     .insight_item .icon img {
          width: 56px;
          height: auto;
     }

     /* Containers a bit tighter on mobile */
     .container,
     .csmm-wrap,
     .sh-wrapper {
          padding-left: 12px !important;
          padding-right: 12px !important;
     }
}

/* Finer breakpoints for Free Services grid */
@media (max-width:400px) {
     #free-services .services-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
     }
}

@media (max-width:340px) {
     #free-services .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}



/* ========== MOBILE ENFORCER (≤640px) ========== */
@media (max-width:640px) {

     /* Services hub: 3-up, titles 2 lines */
     .services-hub .sh-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     .services-hub .svc-chip {
          display: grid !important;
          grid-template-columns: 1fr auto !important;
          gap: 8px !important;
          padding: 10px !important;
          overflow: hidden;
     }

     .services-hub .svc-chip>* {
          min-width: 0 !important;
     }

     .services-hub .svc-name {
          font-size: 13px !important;
          line-height: 1.25 !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          overflow: hidden !important;
          white-space: normal !important;
     }

     .services-hub .svc-see {
          padding: 6px 10px !important;
          font-size: 11px !important;
     }

     /* Make common "free services" lists tighter; CSS-only guess */
     #free-services .services-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
          gap: 8px !important;
     }

     #free-services .srv {
          padding: 10px !important;
          gap: 6px !important;
     }

     #free-services .srv-title {
          font-size: 12px !important;
          line-height: 1.25 !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          overflow: hidden !important;
     }

     /* General text sizing to shorten sections */
     h1 {
          font-size: clamp(20px, 6.6vw, 26px);
     }

     h2 {
          font-size: clamp(18px, 5.4vw, 22px);
     }

     h3 {
          font-size: clamp(16px, 5vw, 19px);
     }

     .container,
     .csmm-wrap,
     .sh-wrapper {
          padding-left: 12px !important;
          padding-right: 12px !important;
     }
}

/* Under 400px -> 3-up; under 340 -> 2-up for free services */
@media (max-width:400px) {
     #free-services .services-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
     }
}

@media (max-width:340px) {
     #free-services .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}



/* ===========================
   RULES VISIBILITY FIX PACK
   =========================== */
#rules,
.rules,
.rules-section,
[id*="rules-section"],
[id*="panel-rules"] {
     position: relative;
     z-index: 1;
}

#rules h1,
#rules h2,
#rules h3,
.rules h1,
.rules h2,
.rules h3,
.rules-section h1,
.rules-section h2,
.rules-section h3 {
     margin: 0 0 .6rem;
     line-height: 1.25;
     text-wrap: balance;
}

#rules p,
#rules li,
#rules div,
#rules span,
.rules p,
.rules li,
.rules div,
.rules span,
.rules-section p,
.rules-section li,
.rules-section div,
.rules-section span {
     max-height: none !important;
     -webkit-line-clamp: unset !important;
     display: block;
     overflow: visible !important;
     white-space: normal !important;
     text-overflow: clip !important;
     word-break: break-word;
     overflow-wrap: anywhere;
     line-height: 1.55;
     color: #e5e7eb;
}

#rules ul li,
#rules ol li,
.rules ul li,
.rules ol li,
.rules-section ul li,
.rules-section ol li {
     margin: .4rem 0;
     padding-left: .25rem;
}

#rules p,
.rules p,
.rules-section p {
     margin: .6rem 0;
}

#rules,
.rules,
.rules-section {
     padding-bottom: calc(env(safe-area-inset-bottom, 0) + 88px);
}

#rules .accordion-content,
.rules .accordion-content,
.rules-section .accordion-content,
#rules .collapse,
.rules .collapse,
.rules-section .collapse {
     max-height: none !important;
     height: auto !important;
     overflow: visible !important;
     opacity: 1 !important;
     visibility: visible !important;
}

@media (max-width:640px) {

     #rules,
     .rules,
     .rules-section {
          padding-left: 12px;
          padding-right: 12px;
     }

     #rules h1 {
          font-size: clamp(20px, 6vw, 26px);
     }

     #rules h2 {
          font-size: clamp(18px, 5.2vw, 22px);
     }

     #rules h3 {
          font-size: clamp(16px, 4.8vw, 19px);
     }

     body:has(#rules) {
          padding-bottom: 90px;
     }
}

#rules [class*="fade"]:after,
.rules [class*="fade"]:after,
.rules-section [class*="fade"]:after {
     content: none !important;
     display: none !important;
}




/* ===== Assistant Mobile Overrides (forceful, desktop untouched) ===== */
@media (max-width:640px) {

     /* Ensure grid children can shrink */
     .services-hub .sh-grid>*,
     #free-services .services-grid>*,
     #payment_methods .pay-grid>*,
     #country-smm .country-grid>*,
     .blog-section>* {
          min-width: 0 !important;
     }

     /* Generic small padding and text sizes */
     h1 {
          font-size: clamp(20px, 6.6vw, 26px);
     }

     h2 {
          font-size: clamp(18px, 5.4vw, 22px);
     }

     h3 {
          font-size: clamp(16px, 5vw, 19px);
     }

     .container,
     .csmm-wrap,
     .sh-wrapper {
          padding-left: 12px !important;
          padding-right: 12px !important;
     }

     /* Payment methods (keep at 3-up) */
     #payment_methods .pay-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 10px !important;
     }

     #payment_methods .pay-card {
          min-height: 82px !important;
          padding: 10px !important;
     }

     #payment_methods .pay-logo,
     #payment_methods .pay-svg {
          max-width: 78px !important;
          max-height: 22px !important;
     }

     #payment_methods .pay-label {
          font-size: 12.5px !important;
          line-height: 1.2 !important;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          overflow: hidden !important;
          white-space: normal !important;
     }
}

/* Free services fallback grid widths for very small phones */
@media (max-width:400px) {
     #free-services .services-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
     }
}

@media (max-width:340px) {
     #free-services .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
}

/* Rules: disable clamping/overflow universally */
#rules,
.rules,
.rules-section,
[id*="rules"] {
     position: relative;
     z-index: 1;
}

#rules *,
.rules *,
.rules-section * {
     max-height: none !important;
     -webkit-line-clamp: unset !important;
     overflow: visible !important;
     text-overflow: clip !important;
     white-space: normal !important;
}




/* ===========================
   TOKENS / FALLBACKS
=========================== */
:root {
     --accent: #e01111;
     --primary: #6e1fff;
     --card-bg: #121212;
     --card-border: #232323;
     --text: #e5e7eb;
     --muted: #cfcfcf;
     --container-max: 1200px;
}

/* =========================================================
   BLOG PAGE – CARD LISTING (image, title, snippet, button)
========================================================= */
.blog_card {
     border-radius: 10px;
     background: #111;
     border: 1px solid var(--card-border);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     height: 100%;
}

.blog-image-wrapper {
     position: relative;
     width: 100%;
     height: 215px;
     background: #222;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 1px solid var(--card-border);
}

.blog-image-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.blog-image-wrapper .title-fallback {
     position: absolute;
     text-align: center;
     padding: 16px;
     width: 100%;
     display: none;
}

.blog-image-wrapper.no-image {
     background: #111;
}

.blog-image-wrapper.no-image .title-fallback {
     display: block;
}

.blog-image-wrapper.no-image .fallback-title {
     color: #fff;
     font-size: 1.2rem;
     font-weight: 700;
}

/* hide title under image unless no image present */
.blog_card .card-title {
     display: none;
     font-size: 1rem;
     font-weight: 600;
     color: #fff;
     transition: color .3s;
}

.blog_card .card-title:hover {
     color: var(--primary);
}

.blog-image-wrapper.no-image~.card-body .card-title {
     display: block;
}

/* normalize & clamp post preview */
.line-clamp {
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 1.5;
     color: #ccc;
     font-size: .95rem;
}

.blog_card .post-snippet * {
     display: inline !important;
     margin: 0 !important;
     padding: 0 !important;
     font-size: inherit !important;
     color: inherit !important;
}

.blog_card .post-snippet img,
.blog_card .post-snippet iframe,
.blog_card .post-snippet table,
.blog_card .post-snippet pre,
.blog_card .post-snippet code,
.blog_card .post-snippet blockquote,
.blog_card .post-snippet h1,
.blog_card .post-snippet h2,
.blog_card .post-snippet h3,
.blog_card .post-snippet h4,
.blog_card .post-snippet h5,
.blog_card .post-snippet h6 {
     display: none !important;
}

.blog_card .post-snippet {
     max-height: 6.2em;
     overflow: hidden;
     position: relative;
}

.blog_card .post-snippet::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 1.5em;
     background: linear-gradient(to bottom, rgba(17, 17, 17, 0), rgba(17, 17, 17, .95));
}

/* Read More button (force visible) */
.btn_blog {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 16px;
     background: var(--accent);
     color: #fff !important;
     font-weight: 700;
     text-transform: uppercase;
     font-size: .92rem;
     line-height: 1.2;
     text-decoration: none;
     border-radius: 6px;
     transition: background .3s, transform .2s;
}

.btn_blog *,
.btn_blog .icon {
     color: #fff !important;
}

.btn_blog:hover {
     background: #c90a00;
     transform: translateY(-2px);
}

.btn_blog .icon {
     margin-left: 6px;
     font-size: 14px;
}

.blog_card:hover {
     transform: translateY(-4px);
     transition: transform .25s, box-shadow .25s;
     box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

@media (max-width: 992px) {
     .blog-image-wrapper {
          height: 180px;
     }
}

@media (max-width: 768px) {
     .blog-image-wrapper {
          height: 150px;
     }
}

@media (max-width: 576px) {
     .blog-image-wrapper {
          height: 130px;
     }
}

/* =========================================================
   UNIFORM BLOG TILES (grid cards like “How it works”)
   — neutralizes any old accordion styles
========================================================= */
.blog-box-content {
     max-height: none !important;
}

.blog-box-header::after {
     content: none !important;
}

.blog-box.expanded {
     grid-column: auto !important;
}

/* ============ Expandable Blog Tiles ============ */
.blog-section {
     --teaser-lines: 3;
     /* how many lines to show when collapsed */
     --lh: 1.55;
     /* line-height used for the calc */
     --tile-min: 330px;
     --gap: 22px;
     --accent: #e01111;

     max-width: 1200px;
     margin: 20px auto;
     padding: 0 18px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr));
     gap: var(--gap);
}

.blog-box {
     background: #121212;
     border: 1px solid #232323;
     border-radius: 14px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     /* allow growth when expanded */
     min-height: 230px;
     /* was height:230px;  -> changed to min-height */
     transition: transform .2s, box-shadow .25s, border-color .25s;
}

.blog-box::before {
     content: "";
     position: absolute;
     inset: 0 0 auto 0;
     height: 4px;
     background: linear-gradient(90deg, var(--accent), #ff5a3d);
}

.blog-box:hover {
     transform: translateY(-3px);
     box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
     border-color: rgba(224, 17, 17, .55);
}

/* Header (click target) */
.blog-box-header {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 14px 16px 8px;
     cursor: pointer;
}

.blog-box-header .icon {
     width: 28px;
     height: 28px;
     min-width: 28px;
     display: inline-grid;
     place-items: center;
     border-radius: 8px;
     color: var(--accent);
     background: rgba(224, 17, 17, .10);
     border: 1px solid rgba(224, 17, 17, .35);
     font-size: 14px;
}

.blog-box-header h2 {
     margin: 0;
     color: #fff;
     font-weight: 800;
     font-size: 1.02rem;
     line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

/* caret */
.blog-box-header::after {
     content: "â–¾";
     margin-left: auto;
     color: #9b9b9b;
     font-size: 14px;
     transition: transform .2s ease, color .2s ease;
}

.blog-box.expanded .blog-box-header::after {
     transform: rotate(180deg);
     color: var(--accent);
}

/* Collapsed body (teaser) — uses !important to beat any old override */
.blog-box-content {
     padding: 6px 16px 14px;
     color: #cfcfcf;
     font-size: .96rem;
     line-height: var(--lh);
     max-height: calc(var(--teaser-lines) * var(--lh) * 1em) !important;
     overflow: hidden;
     transition: max-height .35s ease;
     position: relative;
}

/* soft fade on collapse */
.blog-box:not(.expanded) .blog-box-content::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 2.1em;
     background: linear-gradient(to bottom, rgba(18, 18, 18, 0), rgba(18, 18, 18, 1));
     pointer-events: none;
}

/* Optional: make expanded card span full row for comfy reading. 
   If you prefer it to stay in its column, comment this out. */
.blog-box.expanded {
     grid-column: 1 / -1;
}

@media (max-width:640px) {
     .blog-box {
          min-height: 220px;
     }
}

/* =========================================================
   SERVICES HUB (tabs + chips)
========================================================= */
#services-hub {
     position: relative;
}

.services-hub .sh-wrapper {
     max-width: 1180px;
     margin: 0 auto;
     padding: 24px 16px;
     background: #0b0b0f;
     color: #fff;
     border-radius: 14px;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 12px 32px rgba(0, 0, 0, .35);
}

.services-hub .sh-title {
     margin: 0 0 14px;
     font-size: clamp(22px, 3vw, 32px);
     font-weight: 800;
}

.services-hub .sh-platforms {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     gap: 14px;
     overflow-x: auto;
     padding: 10px 4px 18px;
     margin-bottom: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, .08);
     scrollbar-width: thin;
}

.services-hub .sh-tab {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: #16161c;
     color: #fff;
     border-radius: 999px;
     font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
     transition: .2s;
}

.services-hub .sh-tab .ico {
     font-size: 18px;
     line-height: 1;
     filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2));
}

.services-hub .sh-tab[aria-selected="true"] {
     background: #6e1fff;
     border-color: #6e1fff;
     box-shadow: 0 6px 18px rgba(110, 31, 255, .35);
}

.services-hub .sh-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 12px 16px;
     margin-top: 16px;
}

@media (max-width:1024px) {
     .services-hub .sh-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
     }
}

@media (max-width:640px) {
     .services-hub .sh-grid {
          grid-template-columns: 1fr;
     }
}

.services-hub .svc-chip {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     padding: 12px;
     min-height: 48px;
     border-radius: 10px;
     background: #121218;
     border: 1px solid rgba(255, 255, 255, .10);
     color: #fff;
     text-decoration: none;
     transition: transform .15s, box-shadow .15s, border-color .15s;
}

.services-hub .svc-chip:hover {
     transform: translateY(-2px);
     border-color: #6e1fff;
     box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

.services-hub .svc-name {
     font-size: 14px;
     font-weight: 600;
     line-height: 1.25;
}

.services-hub .svc-see {
     flex: 0 0 auto;
     padding: 6px 12px;
     border-radius: 999px;
     background: #6e1fff;
     color: #fff;
     font-weight: 700;
     font-size: 12px;
     border: 1px solid rgba(255, 255, 255, .15);
     box-shadow: 0 6px 14px rgba(110, 31, 255, .4);
}

/* =========================================================
   COUNTRY LINKS GRID (flags)
========================================================= */
#country-smm {
     padding: 32px 0;
}

#country-smm .csmm-wrap {
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 12px;
}

#country-smm .csmm-title {
     font-size: clamp(24px, 2.6vw, 34px);
     font-weight: 800;
     margin: 0 0 .25rem;
}

#country-smm .csmm-sub {
     color: #6b7280;
     font-size: clamp(14px, 1.3vw, 16px);
     margin: 0 0 16px;
}

.country-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 12px;
     margin: 0;
     padding: 0;
     list-style: none;
}

.country-card {
     margin: 0;
}

.country-link {
     --card-h: 120px;
     display: grid;
     place-items: center;
     text-align: center;
     gap: 10px;
     padding: 14px;
     height: var(--card-h);
     border-radius: 12px;
     text-decoration: none;
     background: #0b1220;
     border: 1px solid rgba(255, 255, 255, .08);
     color: #fff;
     transition: transform .15s, background .15s, border-color .15s;
}

.country-link:hover {
     transform: translateY(-2px);
     background: #111a2a;
     border-color: rgba(255, 255, 255, .16);
}

.country-link:focus-visible {
     outline: 2px solid #8b5cf6;
     outline-offset: 2px;
}

.flag-img {
     width: 44px;
     aspect-ratio: 4/3;
     height: auto;
     border-radius: 4px;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
}

.country-link .label {
     color: var(--text);
     font-size: 15px;
     line-height: 1.3;
}

@media (min-width:800px) {
     .country-link .label {
          font-size: 16px;
     }

     .flag-img {
          width: 50px;
     }
}

/* =========================================================
   PAYMENT METHODS GRID
========================================================= */
#payment_methods {
     padding: 32px 0;
}

#payment_methods .def_content h2 {
     margin: 0 0 14px;
     font-size: clamp(22px, 2.6vw, 30px);
     color: #fff;
     text-align: center;
}

#payment_methods .pay-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
     gap: 10px !important;
}

#payment_methods .pay-card {
     display: grid;
     place-items: center;
     row-gap: 8px;
     min-height: 110px;
     padding: 14px 16px;
     text-decoration: none;
     border-radius: 14px;
     background: #121212;
     color: #fff;
     border: 1px solid rgba(110, 31, 255, .26);
     transition: transform .18s, box-shadow .18s, border-color .18s;
}

#payment_methods .pay-card:hover {
     transform: translateY(-3px);
     border-color: #6e1fff;
     box-shadow: 0 6px 18px rgba(110, 31, 255, .3);
}

#payment_methods .pay-logo,
#payment_methods .pay-svg {
     height: 34px;
     width: auto;
     display: block;
     object-fit: contain;
}

#payment_methods .pay-label {
     font-size: .92rem;
     opacity: .92;
     text-align: center;
     line-height: 1.2;
}

/* =========================================================
   FREE SERVICES (turn raw list into neat cards)
========================================================= */
#free-services {
     background: linear-gradient(180deg, #0b0f1a 0%, #0f1221 100%);
     color: #e7e9f3;
     padding: 24px 0;
}

#free-services .services-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
     gap: 12px !important;
}

#free-services .srv {
     background: #11152b;
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 14px;
     padding: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     transition: transform .2s, box-shadow .2s, border-color .2s;
}

#free-services .srv:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 18px rgba(0, 0, 0, .35);
     border-color: rgba(110, 31, 255, .55);
}

#free-services .srv-title {
     margin: 0;
     font-size: 15px;
     line-height: 1.3;
     font-weight: 600;
     color: #e7e9f3;
}

#free-services .platform {
     display: block;
     font-size: 12px;
     color: #aab0c0;
     margin-top: 2px;
}

#free-services .see-btn {
     appearance: none;
     border: 0;
     background: #6e1fff;
     color: #fff;
     padding: 8px 14px;
     border-radius: 10px;
     font-weight: 700;
     text-decoration: none;
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
     gap: 8px;
}

#free-services .see-btn:hover {
     filter: brightness(1.08);
}
.blog-post .blog-post-content {
     color: #fff !important;
}

.blog-post .blog-post-title {
     color: #fff !important;
}

@media only screen and (max-width: 992px) {
     #header .header_right.d-none-ph.d-none-tab {
          display: flex !important
     }

     #dashboard #content #header .header_right.d-none-ph.d-none-tab .menu_btn.telegram {
          display: none !important;
     }

     #dashboard #content #header .header_right.d-none-ph.d-none-tab .day_night_btn {
          display: none !important;
     }

     #dashboard #content #header .header_right.d-none-ph.d-none-tab .btn-group.user_menu_wrap {
          display: none !important;
     }

}

.daymode .panel-body.border-solid p {
     color: #000000 !important;
}

.blog.unauthorized .card-body {
     color: #fff !important;
}

.blog.unauthorized .container-fluid {}

html body .panel_icon_class {
     width: 180px !important;
}

#orders_type_order_13_average:hover {
     display: block;
     position: absolute;
     width: 100%;
     left: 0;
     padding: 0px 18px;
}

#addon .tooltip.fade.top.in {
     opacity: 1 !important;
     height: 78px !important;

}

.service_id_badge {

     min-width: 30px;
     background: var(--primary-color);
     color: var(--white);
}

#settings_addon_fields {
     padding-left: 15px !important;
     padding-right: 15px !important;
}

.authorized #dropdown_for_search {
     background-color: #222;
     color: #fff;
}

html .index.authorized #dropdown_for_search {
     background-color: #222;
     color: #fff;
}

html .index.authorized #dropdown_for_search .dropdown-item {
     background-color: #222;
     color: #fff;
}

html .index.authorized #dropdown_for_search .dropdown-item:hover {
     background-color: #ffc806;
     color: #fff;
}

.authorized footer {
     display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 26px;
     position: absolute;
     top: 16px;
     right: 8px;
     width: 20px;
}

.select2-dropdown {
     display: block !important;
     position: absolute;
     left: -100000px;
     width: 100%;
     z-index: 5;
     margin-top: 0px !important;
     max-height: 400px;
}

.select2-container--open .select2-dropdown {
     left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
     color: var(--bs-body-color) !important;
}

.select2-container--default .select2-results>.select2-results__options {
     max-height: 320px;
     overflow-y: auto;
}

.select2-results__options {
     list-style: none;
     margin: 0;
     padding: 0;
     display: block;
     width: 100%;
     position: relative;
     box-shadow: none;
     border-radius: 0px;
     border: none;
}

.select2-search--dropdown .select2-search__field {
     display: none;
}

.select2-results__options.dropdown-menu {
     background-color: var(--bs-dropdown-bg);
}

.select2-container--open .select2-dropdown {
     background-color: #222;
}

.daymode .select2-results__option {
     color: #222;
}

.daymode .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #ff7700 !important;
}

.daymode .select2-results__options.dropdown-menu {
     background-color: #fff;
}

.daymode .select2-container--open .select2-dropdown {
     background-color: #fff;
}

.select2-container--default .select2-selection--single {
     color: var(--bs-body-color) !important;
}

.daymode .auth .form-control {
     border-color: #ff770052 !important;
     background-color: #ffede0 !important;
     color: var(--bs-body-color) !important;
}

.daymode .panel-body.border-solid {
     color: #222 !important;
}

.daymode .auth .select2-selection--single {
     border-color: #ff770052 !important;
     background-color: #ffede0 !important;
     color: var(--bs-body-color) !important;
}

        .blog-post  .blog-post-content{
          color: #fff !important;
        }
      .blog-post  .blog-post-title {
           color: #fff !important;
        }
          @media only screen and (max-width: 992px) {
               #header .header_right.d-none-ph.d-none-tab {
                    display: flex !important
               }

               #dashboard #content #header .header_right.d-none-ph.d-none-tab .menu_btn.telegram {
                    display: none !important;
               }

               #dashboard #content #header .header_right.d-none-ph.d-none-tab .day_night_btn {
                    display: none !important;
               }

               #dashboard #content #header .header_right.d-none-ph.d-none-tab .btn-group.user_menu_wrap {
                    display: none !important;
               }

          }

          .daymode .panel-body.border-solid p {
               color: #000000 !important;
          }

          .blog.unauthorized .card-body {
               color: #fff !important;
          }

          .blog.unauthorized .container-fluid {}

          html body .panel_icon_class {
               width: 180px !important;
          }

          #orders_type_order_13_average:hover {
               display: block;
               position: absolute;
               width: 100%;
               left: 0;
               padding: 0px 18px;
          }

          #addon .tooltip.fade.top.in {
               opacity: 1 !important;
               height: 78px !important;

          }

          .service_id_badge {

               min-width: 30px;
               background: var(--primary-color);
               color: var(--white);
          }

          #settings_addon_fields {
               padding-left: 15px !important;
               padding-right: 15px !important;
          }

          .authorized #dropdown_for_search {
               background-color: #222;
               color: #fff;
          }

          html .index.authorized #dropdown_for_search {
               background-color: #222;
               color: #fff;
          }

          html .index.authorized #dropdown_for_search .dropdown-item {
               background-color: #222;
               color: #fff;
          }

          html .index.authorized #dropdown_for_search .dropdown-item:hover {
               background-color: #ffc806;
               color: #fff;
          }

          .authorized footer {
               display: none;
          }

          .select2-container--default .select2-selection--single .select2-selection__arrow {
               height: 26px;
               position: absolute;
               top: 16px;
               right: 8px;
               width: 20px;
          }

          .select2-dropdown {
               display: block !important;
               position: absolute;
               left: -100000px;
               width: 100%;
               z-index: 5;
               margin-top: 0px !important;
               max-height: 400px;
          }

          .select2-container--open .select2-dropdown {
               left: 0;
          }

          .select2-container--default .select2-selection--single .select2-selection__rendered {
               color: var(--bs-body-color) !important;
          }

          .select2-container--default .select2-results>.select2-results__options {
               max-height: 320px;
               overflow-y: auto;
          }

          .select2-results__options {
               list-style: none;
               margin: 0;
               padding: 0;
               display: block;
               width: 100%;
               position: relative;
               box-shadow: none;
               border-radius: 0px;
               border: none;
          }

          .select2-search--dropdown .select2-search__field {
               display: none;
          }

          .select2-results__options.dropdown-menu {
               background-color: var(--bs-dropdown-bg);
          }

          .select2-container--open .select2-dropdown {
               background-color: #222;
          }

          .daymode .select2-results__option {
               color: #222;
          }

          .daymode .select2-container--default .select2-results__option--highlighted[aria-selected] {
               background-color: #ff7700 !important;
          }

          .daymode .select2-results__options.dropdown-menu {
               background-color: #fff;
          }

          .daymode .select2-container--open .select2-dropdown {
               background-color: #fff;
          }

          .select2-container--default .select2-selection--single {
               color: var(--bs-body-color) !important;
          }

          .daymode .auth .form-control {
               border-color: #ff770052 !important;
               background-color: #ffede0 !important;
               color: var(--bs-body-color) !important;
          }

          .daymode .panel-body.border-solid {
               color: #222 !important;
          }

          .daymode .auth .select2-selection--single {
               border-color: #ff770052 !important;
               background-color: #ffede0 !important;
               color: var(--bs-body-color) !important;
          }

          * {
               font-family: "Archivo", sans-serif;
               margin: 0;
               padding: 0;
          }

          :root {
               --primary-font: "Archivo", sans-serif;
               --primary-color: #ff3c38;
               --bs-primary: var(--primary-color);
               --primary-color-deep: #cc2f2c;
               --bg-redial: radial-gradient(#2a2a2a, #0e0e0e);
               --bs-body-bg: #0a0a0a;
               --bs-dropdown-border-color: #121212;
               --form-input-bg: #141414;
               --black-pure: #000000;
               --card-bg: #1a1a1a;
               --card-border: #4c4c4c;
               --footer-bg: #1b1b1b;
               --white: #ffffff;
               --sidebar-color: #2e2e2e;
               --header-bg: #333333;
          }

          .daymode .mini-card {
               background-color: #ffede0;
          }

          html body.index form .form-group .badge.bg-primary {
               background-color: var(--primary-color) !important;
          }

          html body.index span.select2-container.select2-container--default.select2-container--open li .badge.bg-primary {
               background-color: var(--primary-color) !important;
          }

          body {
               font-family: "Archivo", sans-serif;
               background: var(--black-pure) !important;
               background-color: var(--black-pure) !important;
               font-size: 16px;
               font-weight: normal;
               color: var(--white);
          }

          a {
               text-decoration: none;
          }

          .d-none-desk {
               display: none !important;
          }

          main.no_auth {
               padding-top: 80px;
          }

          .hidden {
               display: none;
          }

          .btn-primary {
               font-family: var(--primary-font);
               position: relative;
               font-size: 22px;
               font-weight: bold;
               color: var(--white);
               background: var(--primary-color);
               border-color: var(--primary-color);
               display: inline-flex;
               align-items: center;
               justify-content: center;
               cursor: pointer;
               transition: 0.5s ease;
               height: 60px;
               min-width: 200px;
               padding: 15px 30px;
          }

          .auth .btn-primary {
               height: 50px;
          }

          .btn-primary:hover {
               background: var(--primary-color-deep);
               border-color: var(--primary-color-deep);
          }

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

          .card {
               background: var(--card-bg);
               border-color: var(--card-border);
               border-radius: 10px;
               color:var(--text-white);
          }

          .modal-body h3,
          .card .card-body h3 {
               font-family: var(--primary-font);
               font-size: 25px;
               font-weight: bold;
          }

          .panel-body.border-solid {
               background: var(--form-input-bg);
               border: 1px solid var(--card-border);
               border-radius: 10px;
               padding: 15px 10px;
               color: var(--white);
          }

          .panel-body.border-solid>* {
               color: var(--white) !important;
          }

          .card.card_chat {
               background: url(https://cdn.mypanel.link/ob5eq3/6brszdgdh34b7wdj.png),
                    var(--bg-redial);
               background-repeat: repeat;
               background-size: contain;
               background-position: center;
               min-height: 800px;
          }

          #payment_section .payment_img {
               width: 400px;
               margin: 0 auto;
          }

          #payment_section h2 {
               font-family: var(--primary-font);
               font-size: 28px;
               font-weight: 800;
               color: var(--white);
          }

          .ticket-message-left.admin_ticket,
          .ticket-message-right.user_ticket {
               margin-bottom: 20px;
          }

          .ticket-message-right.user_ticket .ticket-message {
               background: var(--primary-color);
               padding: 20px 20px;
               border-radius: 15px;
               margin-bottom: 5px;
               color: var(--white);
          }

          .ticket-message-left.admin_ticket .ticket-message {
               background: var(--form-input-bg);
               padding: 20px 20px;
               border-radius: 15px;
               margin-bottom: 5px;
               color: var(--white);
          }

          .card.card_chat .tickets-uploader {
               padding: 10px;
               background: #2c1a0a;
               border-radius: 10px;
               border: 1px dashed #5c5c5c;
               height: 60px;
               display: flex;
               align-items: center;
          }

          .card.card_chat .files-wrapper #uploader-button {
               width: 100%;
          }

          .card.card_chat .card-body {
               display: flex;
               gap: 20px;
               flex-direction: column;
               justify-content: space-between;
          }

          .submit_area_message {
               display: grid;
               grid-template-columns: 2fr 1fr;
               gap: 10px;
               align-items: center;
          }

          /* Navbar Design */
          header {
               z-index: 999999;
          }

          header.nav-scrolled {
               background: #00000067;
               backdrop-filter: blur(10px);
          }

          .navbar-login .navbar-nav .nav-item .nav-link {
               font-family: var(--primary-font);
               font-size: 18px;
               font-weight: 400;
               color: var(--white);
               padding: 5px 15px;
          }

          .navbar-login .navbar-nav .nav-item .nav-link.active {
               color: var(--primary-color);
          }

          .navbar-brand .logo_navbar img {
               width: 180px;
          }

          .nav_right .nav_right_btn {
               font-family: var(--primary-font);
               font-size: 18px;
               margin: 0px 5px;
               color: var(--white);
               font-weight: 700;
               padding: 5px 20px;
               border: 1.5px solid var(--white);
               border-radius: 10px;
          }

          .nav_right .nav_right_btn:last-child {
               margin-right: 0px;
          }

          .nav_right .btn_white_outline {
               border-color: var(--white);
          }

          .nav_right .btn_signup {
               border-color: var(--primary-color);
               background: var(--primary-color);
          }

          /* Global CSS */
          .def_content {
               margin-bottom: 40px;
          }

          .def_content.no-m {
               margin-bottom: 0px;
          }

          .def_content h1,
          .def_content h2 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 48px;
               font-weight: 800;
               line-height: 1.3;
               margin-bottom: 0px;
          }

          .def_content p {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: normal;
               color: var(--white);
               margin-bottom: 0px;
          }

          .def_image {
               text-align: center;
          }

          .box_item {
               padding: 30px 20px;
               background: var(--card-bg);
               border: 1px solid var(--card-border);
               border-radius: 10px;
               height: 100%;
          }

          .box_item .box_icon {
               width: 100px;
               margin-bottom: 15px;
          }

          .box_item .box_content h3 {
               font-family: var(--primary-font);
               font-size: 24px;
               font-weight: 700;
               margin-bottom: 5px;
               color: var(--white);
          }

          .box_item .box_content p {
               font-family: var(--primary-font);
               font-size: 16px;
               line-height: 1.4;
               color: var(--white);
               font-weight: 400;
               margin-bottom: 0px;
          }

          /*
  Sign In Page Design
*/

          #banner {
               padding: 70px 0px;
               padding-bottom: 100px;
               position: relative;
               /* overflow-y: hidden; */
          }

          #banner .banner_bg_effect .bg_banner_left_effect {
               position: absolute;
               left: 0px;
               top: -70px;
               pointer-events: none;
               z-index: -1;
          }

          #banner .banner_bg_effect .bg_banner_right_effect {
               position: absolute;
               right: 0px;
               pointer-events: none;
          }

          .login_box_area .login_image_right,
          .login_box_area .login_image_left {
               position: absolute;
               pointer-events: none;
          }

          .login_box_area .login_image_right {
               right: 110px;
               top: 180px;
          }

          .login_box_area .login_image_left {
               top: 140px;
               left: 180px;
          }

          .login_box_area .login_image_left .main_effect {
               position: absolute;
               top: -150px;
               pointer-events: none;
          }

          .login_box_area .login_image_left .main_image {
               position: relative;
               top: 0px;
               right: -230px;
               pointer-events: none;
          }

          .login_box_area .login_image_right .main_image {
               position: relative;
               top: 0px;
               left: -230px;
               pointer-events: none;
          }

          .login_box_area .login_image_right .main_effect {
               position: absolute;
               top: 50px;
               left: -10px;
               pointer-events: none;
          }

          .banner_content {
               margin-bottom: 50px;
          }

          .banner_content h1 small {
               font-family: var(--primary-font);
               font-size: 24px;
               font-weight: 600;
               line-height: 1.3;
               margin-bottom: 0;
          }

          .banner_content h1 {
               font-family: var(--primary-font);
               font-size: 48px;
               font-weight: 700;
               margin-bottom: 0;
          }

          .banner_content p {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: 400;
               margin-bottom: 0;
               color: var(--white);
          }

          .banner_login_part {
               background: var(--bg-redial);
               border: 1px solid var(--card-border);
               width: 570px;
               margin: 0 auto;
               border-radius: 15px;
               padding: 45px 45px;
          }

          .banner_login_part h2 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 38px;
               margin-bottom: 15px;
               font-weight: 700;
          }

          .f_group * {
               font-family: var(--primary-font);
               color: var(--white);
          }

          .f_group .form_link {
               text-decoration: underline;
          }

          /* #loginForm .form-group {
  margin-bottom: 15px;
} */
          #loginForm .has_icon {
               position: relative;
          }

          #loginForm .has_icon .icon {
               width: 47px;
               height: 47px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: var(--primary-color);
               position: absolute;
               border-radius: 5px;
               top: 7px;
               left: 7px;
          }

          #loginForm .has_icon .icon img {
               width: 30px;
               height: auto;
          }

          #loginForm .form-control {
               font-family: var(--primary-font);
               font-size: 18px;
               height: 60px;
               padding-left: 60px;
               outline: none !important;
               border: none !important;
               border-radius: 10px;
               color: var(--white);
          }

          #loginForm .form-control::placeholder {
               color: #ddd;
               /* opacity: 1; Firefox */
          }

          #loginForm .btn-primary .btn_icon {
               width: 45px;
               height: 45px;
               display: flex;
               align-items: center;
               justify-content: center;
               color: var(--primary-color);
               background: var(--white);
               border-radius: 5px;
               position: absolute;
               right: 7px;
          }

          .pass_eye {
               position: absolute;
               right: 0;
               top: 7px;
          }

          .pass_eye .pss-btn-sh {
               background: none;
               color: var(--white);
               padding: 10px 15px;
               border: none;
               font-size: 25px;
               line-height: 0;
               cursor: pointer;
          }

          .pass_eye .pss-btn-sh .eye-close {
               display: none;
          }

          .pass_eye .pss-btn-sh.active .eye-close {
               display: inline-block;
          }

          .pass_eye .pss-btn-sh.active .eye-open {
               display: none;
          }

          /* insights */
          #insights {
               padding: 70px 0px;
          }

          #insights .insight_item {
               display: flex;
               align-items: center;
               gap: 15px;
          }

          #insights .insight_item .icon {
               width: 86px;
               height: auto;
          }

          #insights .insight_item .text_content h4 {
               font-family: var(--primary-font);
               font-size: 34px;
               font-weight: 800;
               margin-bottom: 5px;
          }

          #insights .insight_item .text_content p {
               margin-bottom: 0;
          }

          /* About Us Sections */
          #about_us {
               padding: 50px 0px;
               position: relative;
          }

          .about_us_effect img {
               /* position: absolute; */
               z-index: -1;
               pointer-events: none;
          }

          .about_us_effect .effect_left {
               position: absolute;
               left: 0px;
               top: -350px;
               opacity: 0.8;
          }

          .about_us_effect .effect_right {
               position: absolute;
               top: -100px;
               right: 0px;
               opacity: 0.8;
          }

          /* How It Works */
          #howItWorks {
               padding: 70px 0px;
               position: relative;
          }

          .how_it_effect .effect_it_img {
               position: absolute;
               right: 0px;
               top: -200px;
               z-index: -1;
               pointer-events: none;
          }

          .how_it_item_wrap {
               text-align: center;
               display: grid;
               grid-template-columns: 1fr;
               justify-content: center;
               align-items: center;
               padding: 28px 20px;
               background: var(--card-bg);
               border-radius: 15px;
               gap: 10px;
               height: 100%;
               transition: 0.5s ease;
          }

          .how_it_item_wrap:hover {
               transform: scale(1.03);
          }

          .how_it_item_wrap.item_1 {
               background: linear-gradient(180deg, #6c3bf7 0%, #c200d2 100%);
          }

          .how_it_item_wrap.item_2 {
               background: linear-gradient(129deg, #f50 3.49%, #ffc806 99.16%);
          }

          .how_it_item_wrap.item_3 {
               background: linear-gradient(308deg, #09d2de 0%, #005bff 100%);
          }

          .how_it_item_wrap.item_4 {
               background: linear-gradient(308deg, #27ed5f 0%, #109d59 100%);
          }

          .how_it_item_wrap .icon {
               width: 120px;
               height: 130px;
               display: flex;
               align-items: center;
               justify-content: center;
               margin: 0 auto;
               background: var(--white);
               clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
               border-radius: 10px;
          }

          .how_it_content h3 {
               font-family: var(--primary-font);
               font-weight: 700;
               font-size: 24px;
               color: var(--white);
               line-height: 1.3;
               margin-bottom: 3px;
          }

          .how_it_content p {
               font-family: var(--primary-font);
               font-weight: normal;
               font-size: 16px;
               color: var(--white);
               line-height: 1.4;
          }

          /* Wholesale Section */
          #wholesale {
               padding: 70px 0px;
               position: relative;
               padding-bottom: 90px;
          }

          .wholesale_effect .effect-image {
               position: absolute;
               width: 100%;
               z-index: -1;
               top: 170px;
               pointer-events: none;
          }

          /* Testimonials Sections */
          #testimonials {
               padding: 100px 0px;
               position: relative;
          }

          .testimonial_effect .test_effect {
               position: absolute;
               pointer-events: none;
               top: -400px;
          }

          .testimonial_box {
               text-align: center;
               height: auto;
               margin: 0 auto;
          }

          .testimonialSlider {
               position: relative;
               padding: 20px 0px;
          }

          .box_item.testimonial_box .box_icon {
               width: 100px;
               margin: 0 auto;
               margin-bottom: 10px;
          }

          .testimonials_slider_button {
               position: relative;
               top: -180px;
          }

          .swiper-prev,
          .swiper-next {
               position: absolute;
               top: 45%;
               z-index: 99999;
          }

          .swiper-prev img,
          .swiper-next img {
               width: 40px;
          }

          .swiper-prev.swiper-button-disabled,
          .swiper-next.swiper-button-disabled {
               opacity: 0.4;
               cursor: not-allowed;
          }

          .swiper-prev {
               left: 40px;
          }

          .swiper-next {
               right: 40px;
          }

          /* Why Choose Us */
          #whyChooseUs {
               padding: 70px 0px;
               position: relative;
          }

          .why_choose_effect {
               position: relative;
               z-index: -1;
          }

          .why_choose_effect .choose_effect_left {
               position: absolute;
               top: -150px;
               pointer-events: none;
               z-index: -1;
          }

          .why_choose_effect .choose_effect_right {
               position: absolute;
               right: 0px;
               top: -500px;
          }

          .type_item_1 {
               display: grid;
               grid-template-columns: 90px 1fr;
               gap: 15px;
               align-items: center;
          }

          .type_item_1 .icon {
               width: 80px;
               height: 90px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: var(--white);
               clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          }

          .type_item_1 .icon img {
               width: 50px;
          }

          .type_item_1 .type_content h3 {
               font-family: var(--primary-font);
               font-size: 26px;
               color: var(--primary-color);
               font-weight: 700;
               line-height: 1.2;
               margin-bottom: 3px;
          }

          .type_item_1 .type_content p {
               font-family: var(--primary-font);
               font-size: 14px;
               line-height: 1.5;
               font-weight: 400;
               margin-bottom: 0px;
          }

          /* Easy and Accessible */
          #easyAndAccessible {
               /* padding: 50px 0px; */
          }

          /* Features of SMM Panel */
          #featuresOfSmmpanel {
               padding: 70px 0px;
               position: relative;
          }

          .feature_effect {
               position: relative;
               z-index: -1;
          }

          .feature_effect .feature_effect_left {
               position: absolute;
               top: -400px;
          }

          .feature_effect .feature_effect_right {
               position: absolute;
               top: 0px;
               right: 0px;
          }

          #featuresOfSmmpanel .box_item {
               height: auto;
          }

          .box_item.features_box_item .type_item_1 {
               align-items: start;
          }

          /* services */
          #services {
               padding: 50px 0px;
               position: relative;
          }

          .service_effect {
               position: relative;
               pointer-events: none;
          }

          .service_effect .services_effect_img {
               position: absolute;
               z-index: -1;
               top: -600px;
               left: 0px;
               pointer-events: none;
          }

          .nav_services .nav-link {
               display: flex;
               flex-direction: row;
               gap: 5px;
               text-align: center;
               justify-content: start;
               width: 95%;
               margin-bottom: 15px;
               color: var(--black-pure);
               background: var(--white) !important;
               border: 1px solid var(--white);
               border-radius: 8px;
          }

          .nav_services .nav-link.active {
               border-color: var(--primary-color);
          }

          .nav_services .nav-link .text {
               color: var(--black-pure);
               font-size: 18px;
               font-weight: bold;
          }

          #services .service_content h2 {
               font-family: var(--primary-font);
               font-size: 36px;
               line-height: 1.3;
               font-weight: 800;
               margin-bottom: 5px;
          }

          #services .service_content hr {
               border-width: 2px;
               opacity: 1;
               border-color: var(--primary-color);
          }

          #services .service_icon {
               text-align: right;
          }

          /* Payment Methods */
          #payment_methods {
               padding: 120px 0px;
               position: relative;
               overflow: hidden;
          }

          .payment_methods_effect {
               position: relative;
          }

          .payment_methods_effect .payment_effect {
               position: absolute;
               right: -220px;
               top: -120px;
               z-index: -1;
               pointer-events: none;
          }

          .payment_methods_logo {
               display: flex;
               justify-content: center;
               gap: 20px 30px;
               flex-wrap: wrap;
          }

          .payment_methods_logo img {
               width: 170px;
               height: auto;
          }

          /* Benifits */
          #benifits {
               padding: 50px 0px;
               position: relative;
          }

          .benifits_effects {
               position: relative;
               pointer-events: none;
               z-index: -1;
          }

          .benifits_effects .benifits_left_img {
               position: absolute;
               left: 0;
               top: -300px;
          }

          .benifits_effects .benifits_right_img {
               position: absolute;
               right: 0;
          }

          .mid_box {
               border-width: 3px;
               border-color: var(--primary-color);
          }

          #benifits .box_item .box_icon {
               margin: 0 auto;
               margin-bottom: 10px;
          }

          .mid_box .has_underline {
               display: inline-block;
          }

          .mid_box h3 {
               position: relative;
          }

          .mid_box h3 .text {
               position: relative;
               z-index: 99;
          }

          .mid_box h3::before {
               content: "";
               width: 100%;
               height: 3px;
               display: inline-block;
               background: var(--primary-color);
               margin: 0px;
               position: absolute;
               left: 0;
               bottom: 1px;
               z-index: 0;
               opacity: 1;
          }

          /* Faq section */
          #faq {
               padding: 50px 0px;
          }

          .faq_accordion .accordion-item {
               margin-bottom: 15px;
               border-radius: 10px;
               border: 2px solid var(--card-border);
               background: var(--card-bg);
          }

          .faq_accordion .accordion-item .accordion-header button {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: 800;
               background: transparent;
               color: var(--white);
               outline: none !important;
               box-shadow: none !important;
          }

          .auth .faq_accordion .accordion-item {
               background: var(--form-input-bg);
               border: none;
          }

          .faq_accordion .accordion-item .accordion-header .accordion-button::after {
               --bs-accordion-btn-icon: url(https://res.cloudinary.com/sol-0123456789/image/upload/v1733288277/20240612panelbt/arrow_z14d8g.png);
          }

          .faq_accordion .accordion-item .accordion-button:not(.collapsed)::after {
               background-image: url(https://res.cloudinary.com/sol-0123456789/image/upload/v1733288277/20240612panelbt/arrow_z14d8g.png);
          }

          .faq_accordion .accordion-item p {
               font-family: var(--primary-font);
               font-size: 14px;
               font-weight: normal;
               line-height: 1.4;
               color: var(--white);
               margin-bottom: 0px;
          }

          /* What We Do */
          #whatWeDo {
               padding: 50px 0px;
          }

          /* Footer */
          footer {
               background: var(--card-bg);
               padding: 15px 0px;
               padding-top: 50px;
          }

          footer hr {
               border-width: 3px;
               opacity: 1;
               border-color: var(--primary-color);
          }

          footer .logo {
               margin-bottom: 10px;
          }

          footer .footer_c_item {
               display: flex;
               gap: 5px;
               margin-bottom: 10px;
               color: var(--white);
          }

          footer .footer_info .logo img {
               width: 200px;
          }

          footer .footer_links_wrap h4 {
               font-family: var(--primary-font);
               font-size: 20px;
               font-weight: bold;
               margin-bottom: 20px;
          }

          footer .footer_links_wrap .footer_links {
               padding: 0px;
               list-style-type: none;
          }

          footer .footer_links_wrap .footer_links li a {
               display: inline-block;
               font-family: var(--primary-font);
               font-size: 16px;
               color: var(--white);
               margin-bottom: 10px;
               cursor: pointer;
               transition: 0.5s ease;
          }

          footer .footer_links_wrap .footer_links li a:hover {
               transform: translateX(5px);
          }

          /* Services Page Design */
          .search_filter_wrap {
               display: grid;
               grid-template-columns: 6fr 1fr 1fr;
               gap: 20px;
               align-items: center;
          }

          .search_inputs .search,
          .search_filter_wrap .search {
               position: relative;
          }

          .search_inputs .search input,
          .search_filter_wrap .search input {
               width: 100%;
               height: 60px;
               padding: 15px 15px;
               font-size: 16px;
               border: 1px solid var(--black-pure);
               border-radius: 10px;
               outline: none !important;
               background: var(--white);
               color: var(--black-pure) !important;
          }

          .search_inputs .search .icon,
          .search_filter_wrap .search .icon {
               width: 45px;
               height: 45px;
               display: flex;
               align-items: center;
               justify-content: center;
               position: absolute;
               right: 7.5px;
               top: 7.5px;
               background: var(--primary-color);
               font-size: 25px;
               border-radius: 5px;
               color: var(--white);
          }

          .search_inputs .search .icon {
               border: none;
               cursor: pointer;
          }

          .filter_currency>button,
          .search_filter_wrap .filter_btn {
               display: flex;
               align-items: center;
               justify-content: space-between;
               height: 60px;
               font-family: var(--primary-font);
               font-size: 16px;
               background: var(--primary-color);
               font-weight: bold;
               color: var(--white);
               border-radius: 10px;
               border-color: var(--primary-color);
               min-width: 200px;
               padding: 10px 20px;
          }

          .filter_btn.dropdown-toggle::after {
               display: none;
          }

          .search_filter_wrap .filter_btn .filter_service_text {
               display: flex;
               align-items: center;
               gap: 3px;
               margin: 0;
               padding: 0;
          }

          .search_filter_wrap .filter_btn .filter_service_text .icon {
               font-size: 25px;
               position: relative;
               top: 5px;
          }

          .social_media_wrap {
               display: grid;
               grid-template-columns: repeat(6, 1fr);
               gap: 20px;
          }

          .social_media_wrap .social_media_btn {
               display: flex;
               gap: 5px;
               justify-content: center;
               align-items: center;
               padding: 12px 20px;
               background: var(--card-bg);
               border: 1px solid var(--card-border);
               border-radius: 8px;
               color: var(--white);
               transition: 0.5s ease;
          }

          .daymode .social_media_wrap .social_media_btn.activeItem,
          .social_media_wrap .social_media_btn.activeItem {
               background: var(--primary-color);
               border-color: var(--primary-color);
          }

          .social_media_wrap .social_media_btn .icon img {
               pointer-events: none;
               width: 25px;
               min-width: 25px;
          }

          .social_media_wrap .social_media_btn .media_name {
               pointer-events: none;
               font-size: 16px;
               font-weight: 400;
               color: var(--white);
               margin-bottom: 0px;
               line-height: 1;
          }

          .social_media_wrap .social_media_btn:hover {
               background: var(--primary-color);
               border-color: var(--primary-color);
          }

          /* Service Table */
          .serv_category_card {
               background: var(--card-bg);
               border: 1px solid var(--primary-color);
               box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.03);
               border-radius: 10px;
               margin-bottom: 25px;
               overflow: hidden;
          }

          .serv_category_card .serv_cat_card_header {
               text-align: center;
               background: var(--primary-color);
               padding: 15px 30px;
          }

          .serv_category_card .serv_cat_card_header .category_name {
               font-family: var(--primary-font);
               font-size: 25px;
               font-weight: 500;
               color: var(--white);
               text-align: center;
          }

          .serv_category_card .serv_cat_card_body {
               padding: 20px;
          }

          .serv_category_card .serv_cat_card_body .service_item,
          .serv_category_card .serv_cat_card_body .service_item.service_table_header {
               display: flex;
               flex-direction: row;
               gap: 15px;
               margin-bottom: 10px;
          }

          .serv_category_card .serv_cat_card_body .service_item.service_table_header {
               margin-bottom: 25px;
          }

          .serv_category_card .serv_cat_card_body .service_item.service_table_header>span {
               font-family: var(--primary-font);
               font-weight: 800;
               color: var(--white);
          }

          .serv_category_card .serv_cat_card_body .service_item .id {
               width: 8%;
          }

          .serv_category_card .serv_cat_card_body .service_item .services_name {
               width: 40%;
          }

          .serv_category_card .serv_cat_card_body .service_item .rate {
               width: 15%;
          }

          .serv_category_card .serv_cat_card_body .service_item .max_order,
          .serv_category_card .serv_cat_card_body .service_item .min_order {
               width: 10%;
          }

          .serv_category_card .serv_cat_card_body .service_item .avg_time {
               width: 20%;
          }

          .serv_category_card .serv_cat_card_body .service_item .descriptions {
               width: 10%;
          }

          .serv_category_card .serv_cat_card_body .service_item.service {
               border-bottom: 1px solid var(--card-border);
               padding-top: 10px;
               padding-bottom: 10px;
          }

          .serv_category_card .serv_cat_card_body .service_item .descriptions {
               text-align: end;
          }

          .serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
          .serv_category_card .serv_cat_card_body .service_item.service>span.min_order>span,
          .serv_category_card .serv_cat_card_body .service_item.service>span.max_order>span,
          .serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
               display: inline-flex;
               font-family: var(--primary-font);
               font-weight: 700;
               color: var(--white);
               text-align: center;
               justify-content: center;
               align-items: center;
               padding: 8px 20px;
               border-radius: 10px;
               background-color: #2b2b2b;
          }

          .serv_category_card .serv_cat_card_body .service_item:last-child {
               border-bottom: none !important;
               margin-bottom: 0px;
               padding-bottom: 0px;
          }

          .serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
          .serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
               background: var(--form-input-bg);
               color: var(--white);
          }

          .serv_category_card .serv_cat_card_body .service_item.service>span.avg_time {
               display: flex;
               align-items: center;
               max-height: 35px;
          }

          .serv_category_card .serv_cat_card_body .service_item.service .services_name {
               font-size: 16px;
               font-weight: 400;
               color: var(--white);
          }

          .serv_category_card .serv_cat_card_body .service_item.service>span.min_order,
          .serv_category_card .serv_cat_card_body .service_item.service>span.max_order {
               display: flex;
               align-items: center;
               max-height: 35px;
          }

          .btn_descriptions {
               background: var(--primary-color);
               color: var(--white);
               font-weight: 700;
               font-size: 16px;
               padding: 8px 25px;
               border-radius: 10px;
               transition: 0.8s;
          }

          .btn_descriptions:hover {
               background: var(--primary-color-deep);
               color: var(--primary-color);
               scale: 1.05;
          }

          /* Blog Page Design */
          .blog_card {
               border-radius: 10px;
          }

          .blog_card img {
               width: 100%;
               height: 215px;
               object-fit: cover;
               border-bottom: 1px solid var(--card-border);
               background: #4a4a4a;
          }

          .blog_card .card-title {
               font-family: var(--primary-font);
               font-size: 24px;
               color: var(--white);
               padding-bottom: 10px;
               margin-bottom: 10px;
               border-bottom: 2px solid var(--primary-color);
               transition: 0.5s ease;
          }

          .blog_card .card-title:hover {
               color: var(--primary-color);
          }

          .blog_card .card-text>*,
          .blog_card .card-text {
               font-family: var(--primary-font) !important;
               font-size: 16px !important;
               line-height: 1.5 !important;
               color: var(--white) !important;
          }

          .blog_card .btn_blog {
               font-family: var(--primary-font);
               font-size: 18px;
               font-weight: bold;
               color: var(--primary-color);
               display: flex;
               align-items: center;
               transition: 0.5s;
          }

          .blog_card .btn_blog:hover .icon {
               transform: translatex(5px);
          }

          .btn_blog .icon {
               line-height: 0;
               font-size: 20px;
               transition: 0.5s;
          }

          /* How It Works Page */
          #how_it_works {
               padding: 70px 0px;
          }

          .how_it_works_timeline {
               display: flex;
               justify-content: space-between;
               gap: 15px;
               margin: 0px 200px;
               margin-bottom: 50px !important;
               position: relative;
          }

          .how_it_works_timeline::before {
               content: "";
               width: calc(100% - 200px);
               height: 5px;
               background: var(--card-border);
               position: absolute;
               top: 25px;
               z-index: -1;
               left: 100px;
          }

          .video_part {
               text-align: center;
               width: 700px;
               margin: 0 auto;
          }

          .how_it_works_timeline .nav-link {
               font-family: var(--primary-font);
               font-size: 20px;
               font-weight: bold;
               color: var(--white);
               text-align: center;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               gap: 15px;
               min-width: 210px;
               width: 210px;
          }

          .how_it_works_timeline .nav-link .step_text {
               opacity: 0.5;
          }

          .how_it_works_timeline .nav-link.active {
               background: none;
               color: var(--white);
          }

          .how_it_works_timeline .nav-link.active .step_text {
               opacity: 1;
          }

          .how_it_works_timeline .nav-link .step_number {
               width: 40px;
               height: 40px;
               background: var(--card-border);
               display: flex;
               align-items: center;
               justify-content: center;
               border-radius: 50px;
               margin: 0 auto;
          }

          .how_it_works_timeline .nav-link.active .step_number {
               background: var(--primary-color);
          }

          #how_it_works .card.card-logo-image .card-body {
               height: 350px;
               display: flex;
               align-items: center;
               justify-content: center;
          }

          #watch_the_video {
               padding: 70px 0px;
          }

          /* About Page */
          #contactArea {
               padding: 70px 0px;
          }

          .contact_box_inner {
               text-align: center;
               background: var(--card-bg);
               border-radius: 15px;
               padding: 40px 20px;
               border: 1px solid var(--card-border);
          }

          .contact_box_inner.mid_box {
               padding: 70px 20px;
          }

          .contact_box_inner .c_icon {
               width: 100px;
               margin: 0 auto;
               margin-bottom: 10px;
          }

          .contact_box_inner.first_box .c_icon {
               width: 130px;
          }

          .contact_box_inner h4 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 21px;
               font-style: normal;
               font-weight: 700;
          }

          .contact_box_inner a {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 16px;
               font-weight: 400;
               margin-bottom: 0px;
          }

          /* About Us Page*/
          .auth .about_us_effect,
          #our_single_blog .about_us_effect,
          #how_it_works .about_us_effect,
          #api_page .about_us_effect,
          #faqPage .about_us_effect,
          #blog_page .about_us_effect,
          #about_us .about_us_effect {
               position: relative;
               z-index: -1;
               pointer-events: none;
          }

          .auth .about_us_img_left,
          #our_single_blog .about_us_img_left,
          #how_it_works .about_us_img_left,
          #api_page .about_us_img_left,
          #faqPage .about_us_img_left,
          #blog_page .about_us_img_left,
          #about_us .about_us_img_left {
               position: absolute;
               left: 0px;
               z-index: -1;
               top: -300px;
          }

          .auth .about_us_img_right,
          #our_single_blog .about_us_img_right,
          #how_it_works .about_us_img_right,
          #api_page .about_us_img_right,
          #faqPage .about_us_img_right,
          #blog_page .about_us_img_right,
          #about_us .about_us_img_right {
               position: absolute;
               right: 0px;
               z-index: -1;
          }

          .auth .about_us_img_right {
               top: -270px;
          }

          #faqPage .about_us_img_right {
               top: -100px;
          }

          #blog_page .contact_effect,
          #contactArea .contact_effect {
               position: relative;
               z-index: -1;
               pointer-events: none;
          }

          #blog_page .contact_effect .contact_effect_img,
          #contactArea .contact_effect .contact_effect_img {
               position: absolute;
               right: 0px;
               top: -400px;
               z-index: -1;
               pointer-events: none;
          }

          #blog_page .contact_effect .contact_effect_img {
               top: -800px;
          }

          #our_single_blog,
          #blog_page {
               padding: 50px 0px;
               overflow: hidden;
          }

          #faqPage {
               padding: 50px 0px;
               padding-bottom: 100px;
          }

          #our_single_blog .blog_content h1 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 48px;
               font-weight: 800;
               line-height: 1.3;
               margin-bottom: 10px;
          }

          #our_single_blog .blog_content>* {
               color: var(--white) !important;
          }

          #our_single_blog .blog_content .blog_post_content {
               margin-bottom: 10px;
          }

          #api_page {
               padding: 70px 0px;
          }

          .auth #api_page {
               padding-top: 0;
          }

          #auth_banner {
               padding: 20px 40px;
          }

          #auth_banner .banner_content h2 {
               font-family: var(--primary-font);
               font-size: 48px;
               font-weight: 600;
               color: var(--white);
               line-height: 1.3;
          }

          #auth_banner .banner_content p {
               font-size: 16px;
               color: var(--white);
               line-height: 1.4;
               font-weight: 400;
               margin-bottom: 15px;
          }

          #auth_banner .banner_image {
               text-align: right;
          }

          #auth_banner .banner_image img {
               width: 60%;
               margin: auto;
          }

          #affiliate_page .affiliate_users_data {
               display: flex;
               gap: 50px;
               flex-wrap: wrap;
          }

          #affiliate_page .affiliate_users_data .aff_item {
               display: flex;
               align-items: center;
               gap: 10px;
          }

          #affiliate_page .affiliate_users_data .aff_item .aff_item_left .icon {
               width: 70px;
               min-width: 70px;
               height: 70px;
               border-radius: 50px;
               background: var(--primary-color);
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 30px;
               color: var(--white);
          }

          .aff_item .aff_item_right h4 {
               font-size: 14px;
          }

          .service_itemscard {
               background: var(--card-bg);
               padding: 20px 20px;
               border-radius: 10px;
               border: 1px solid var(--card-border);
          }

          .service_itemscard .service_card_inner .serv_card_top {
               display: flex;
               align-items: center;
               gap: 5px;
               margin-bottom: 10px;
          }

          .service_itemscard .service_card_inner .serv_card_top h3 {
               font-family: var(--primary-font);
               font-size: 28px;
               font-weight: bold;
          }

          #messageFromCEO {
               padding: 50px 0px;
               text-align: center;
          }

          .ceo_inner img {
               width: 200px;
               margin: 0 auto;
          }

          .card_join_us h2 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 34px;
               margin-bottom: 10px;
               font-weight: bold;
          }

          .card_join_us {
               padding: 40px 0px;
          }

          .privacy_content h4 {
               font-family: var(--primary-font);
               font-size: 24px;
               font-weight: bold;
               color: var(--white);
          }

          .card_join_us p,
          .privacy_content ul li,
          .privacy_content p {
               font-family: var(--font-text);
               font-size: 16px;
               color: var(--white);
          }

          .privacy_content a {
               color: var(--primary-color);
          }

          /*
*
*
*
*
*
*
*
  Responsive For Home Page
*
*
*
*
*
*
*
*/
          @media only screen and (max-width: 1900px) {
               .login_box_area .login_image_right {
                    right: 70px;
               }

               .login_box_area .login_image_left {
                    left: 120px;
               }

               .def_content h1,
               .def_content h2 {
                    font-size: 40px;
                    margin-bottom: 5px;
               }

               .service_itemscard .service_card_inner .serv_card_top .icon img {
                    width: 90px;
               }

               .service_itemscard .service_card_inner .serv_card_top h3 {
                    font-size: 24px;
               }
          }

          @media only screen and (max-width: 1800px) {
               .login_box_area .login_image_left .main_image {
                    right: -180px;
               }

               .login_box_area .login_image_right .main_image {
                    left: -185px;
               }

               .login_box_area .login_image_right .main_effect {
                    left: 15px;
               }
          }

          @media only screen and (max-width: 1700px) {
               .login_box_area .login_image_left .main_image {
                    right: -130px;
               }

               .login_box_area .login_image_right .main_image {
                    left: -140px;
               }

               .login_box_area .login_image_right .main_effect {
                    left: 60px;
               }
          }

          @media only screen and (max-width: 1600px) {
               .login_box_area .login_image_left .main_image {
                    right: -80px;
               }

               .login_box_area .login_image_right .main_image {
                    left: -80px;
               }

               .login_box_area .login_image_right .main_effect {
                    left: 120px;
               }

               .login_box_area .login_image_left .main_effect {
                    left: -70px;
               }
          }

          @media only screen and (max-width: 1500px) {
               .login_box_area .login_image_left .main_image {
                    right: -30px;
               }

               .login_box_area .login_image_right .main_image {
                    left: -30px;
               }

               .login_box_area .login_image_right .main_effect {
                    left: 170px;
               }

               .login_box_area .login_image_left .main_effect {
                    left: -120px;
               }
          }

          @media only screen and (max-width: 1400px) {
               .login_box_area .login_image_left .main_image {
                    right: 20px;
               }

               .login_box_area .login_image_right .main_image {
                    left: 20px;
               }

               .login_box_area .login_image_right .main_effect {
                    left: 220px;
               }

               .login_box_area .login_image_left .main_effect {
                    left: -180px;
               }
          }

          @media only screen and (max-width: 1200px) {
               #banner {
                    overflow: hidden;
               }

               .login_box_area .login_image_left .main_image {
                    right: 140px;
               }

               .login_box_area .login_image_right .main_image {
                    left: 140px;
               }

               .login_box_area .login_image_right .main_effect {
                    left: 320px;
               }

               .login_box_area .login_image_left .main_effect {
                    left: -280px;
               }

               .how_it_works_timeline {
                    margin: 0px 10px;
               }

               .def_content h1,
               .def_content h2 {
                    font-size: 38px;
               }
          }

          @media only screen and (max-width: 992px) {
               #banner {
                    overflow: hidden;
               }

               .navbar-toggler {
                    display: flex;
                    gap: 5px;
                    align-items: center;
                    color: var(--primary-color);
                    border-color: transparent;
                    outline: none;
               }

               .navbar-toggler .icon {
                    font-size: 25px;
                    line-height: 0;
               }

               .navbar-toggler .text {
                    font-size: 14px;
                    line-height: auto;
                    color: var(--white);
               }

               .mobile_menu_sidebar {
                    background: var(--card-bg);
                    width: 300px !important;
               }

               .mobile_menu_sidebar .offcanvas-header .btn-close {
                    background-color: var(--primary-color);
               }

               .mobile_menu_body .nav-item .nav-link {
                    color: var(--white);
               }

               .login_box_area .login_image_right,
               .login_box_area .login_image_left {
                    position: inherit;
                    /* display: none; */
                    z-index: -1;
               }

               .login_box_area .login_image_right .main_effect,
               .login_box_area .login_image_right .main_image,
               .login_box_area .login_image_left .main_image,
               .login_box_area .login_image_left .main_effect {
                    position: inherit;
               }

               .login_top_image {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    position: inherit;
               }

               .login_box_area .login_image_right {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: -30px;
               }

               .login_box_area .login_image_left {
                    display: flex;
                    align-items: center;
                    justify-content: center;
               }

               .login_box_area .login_image_left .main_image {
                    width: 200px;
                    position: relative;
                    right: 10px;
               }

               .login_box_area .login_image_right .main_effect,
               .login_box_area .login_image_left .main_effect {
                    width: 180px;
               }

               .login_box_area .login_image_right .main_image {
                    width: 220px;
                    position: relative;
                    left: 50px;
               }

               .banner_login_part {
                    width: 100%;
                    padding: 35px;
               }

               #insights {
                    padding: 20px 0px;
               }

               #insights .insight_item {
                    margin-bottom: 20px;
               }

               #insights .insight_item .text_content h4 {
                    font-size: 28px;
                    margin-bottom: 0px;
               }

               #insights .insight_item .icon {
                    min-width: 86px;
               }

               .blog_card .btn_blog,
               #insights .insight_item .text_content p {
                    font-size: 16px;
                    font-weight: 400;
               }

               .nav_services .nav-link {
                    width: 100%;
               }

               .nav_services {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 0px 15px;
               }

               .payment_methods_logo {
                    gap: 10px;
               }

               #our_single_blog,
               #banner {
                    padding: 30px 0px;
               }

               #blog_page,
               #contactArea,
               #services,
               #featuresOfSmmpanel,
               #whatWeDo,
               #benifits,
               #payment_methods,
               #whyChooseUs,
               #testimonials,
               #wholesale,
               #howItWorks,
               #api_page,
               #about_us {
                    padding: 30px 0px;
               }

               #blog_page {
                    overflow: inherit;
               }

               .def_content {
                    margin-bottom: 20px;
               }

               #our_single_blog .blog_content h1,
               #services .service_content h2,
               .def_content h1,
               .def_content h2 {
                    font-size: 34px;
               }

               .def_content h2 br {
                    display: none;
               }

               .blog_card .card-text>*,
               .blog_card .card-text,
               .box_item .box_content p,
               .how_it_content p,
               .def_content p {
                    font-size: 14px;
               }

               .def_content p>br {
                    display: none;
               }

               .btn-primary {
                    font-size: 20px;
                    height: 50px;
                    min-width: 180px;
               }

               .def_image>img {
                    width: 50%;
               }

               .how_it_item_wrap .icon {
                    width: 100px;
                    height: 110px;
               }

               .blog_card .card-title,
               .type_item_1 .type_content h3,
               .box_item .box_content h3,
               .how_it_content h3 {
                    font-size: 22px;
               }

               .box_item .box_icon {
                    width: 80px;
                    margin-bottom: 10px;
               }

               .testimonial_box {
                    width: 90%;
               }

               #services .service_icon {
                    text-align: center;
               }

               .def_content p.w-75 {
                    width: 100% !important;
               }

               .how_it_works_timeline .nav-link {
                    font-size: 16px;
                    min-width: inherit;
                    max-width: 100px;
                    width: 100px;
               }

               .how_it_works_timeline::before {
                    width: calc(100% - 100px);
                    left: 60px;
               }

               .video_part {
                    width: 100%;
               }
          }

          @media only screen and (max-width: 768px) {
               .mobile_menu_sidebar {
                    width: 80%;
               }

               .select2-results__option {
                    font-size: 14px;
               }

               .select2-container--default .select2-selection--single .select2-selection__rendered {
                    font-size: 14px;
               }
          }

          @media only screen and (max-width: 550px) {
               .logo_navbar img {
                    width: 130px;
               }

               .modal-body h3,
               .card .card-body h3,
               .contact_box_inner h4,
               .type_item_1 .type_content h3,
               .box_item .box_content h3,
               .how_it_content h3,
               .card h4,
               .banner_content h4 {
                    font-size: 18px;
               }

               .banner_content h1 {
                    font-size: 40px;
                    line-height: 1.3;
               }

               .point_notes li,
               .feature_item .text,
               .contact_box_inner a,
               .box_item .box_content p,
               .how_it_content p,
               .def_content p,
               #insights .insight_item .text_content p,
               .banner_content p {
                    font-size: 14px;
                    font-weight: 400;
               }

               .banner_content p br {
                    display: none;
               }

               #banner .banner_bg_effect .bg_banner_left_effect {
                    top: 15px;
               }

               .login_box_area .login_image_right .main_effect,
               .login_box_area .login_image_left .main_effect {
                    width: 80px;
               }

               .login_box_area .login_image_left .main_image {
                    width: 160px;
               }

               .login_box_area .login_image_right .main_image {
                    width: 180px;
               }

               .banner_login_part h2 {
                    font-size: 28px;
               }

               .banner_login_part {
                    padding: 25px 20px;
               }

               #loginForm .form-control {
                    height: 50px;
                    padding-left: 50px;
                    color: var(--white);
                    font-size: 16px;
               }

               #loginForm .has_icon .icon {
                    width: 37px;
                    height: 37px;
                    top: 6px;
                    left: 6px;
               }

               .pass_eye {
                    top: 2px;
               }

               #loginForm .btn-primary .btn_icon {
                    width: 35px;
                    height: 35px;
                    top: 6px;
                    right: 6px;
               }

               #insights .insight_item .icon {
                    min-width: 60px;
                    width: 60px;
                    max-width: 60px;
               }

               #insights .insight_item {
                    gap: 8px;
               }

               #insights .insight_item .text_content h4 {
                    font-size: 22px;
               }

               .def_content {
                    text-align: center;
               }

               #our_single_blog .blog_content h1,
               #services .service_content h2,
               .def_content h2 {
                    font-size: 34px;
                    text-align: center;
               }

               .def_content {
                    margin-bottom: 10px;
               }

               .def_image>img {
                    width: 70%;
               }

               .btn-primary {
                    font-size: 18px;
                    height: 45px;
                    min-width: 150px;
               }

               .about_us_effect .effect_left {
                    top: -420px;
               }

               .about_us_effect .effect_right {
                    display: none;
               }

               .how_it_effect {
                    z-index: -1;
               }

               .wholesale_effect .effect-image {
                    top: inherit;
                    bottom: -20px;
               }

               .testimonial_effect .test_effect {
                    display: none;
               }

               .testimonials_slider_button {
                    top: 0px;
                    display: flex;
                    gap: 10px;
                    justify-content: center;
               }

               .swiper-prev,
               .swiper-next {
                    display: block;
                    position: inherit !important;
                    left: inherit;
                    right: inherit;
               }

               .testimonial_content img {
                    width: 150px;
                    margin: 10px 0px;
               }

               #whyChooseUs .def_content {
                    margin-bottom: 30px;
               }

               .type_item_1 {
                    gap: 10px;
               }

               #featuresOfSmmpanel .box_item {
                    background: transparent;
                    border-color: transparent;
                    padding: 10px 0px;
               }

               .nav_services {
                    grid-template-columns: repeat(2, 1fr);
                    width: 100%;
                    gap: 0px 10px;
               }

               .service_content {
                    text-align: center;
                    margin-bottom: 15px;
               }

               #services .service_content hr {
                    margin: 5px 0px;
               }

               .service_content p {
                    text-align: center;
               }

               #whatWeDo .col-lg-6.col-md-6.col-12 {
                    margin-bottom: 10px;
               }

               .contact_box_inner,
               .contact_box_inner.mid_box {
                    padding: 30px 20px;
               }

               .payment_methods_logo .payment_logo {
                    max-width: 140px;
               }

               .how_it_works_timeline {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 5px;
               }

               .how_it_works_timeline::before {
                    width: calc(100% - 100px);
                    left: 40px;
                    top: 17px;
               }

               .how_it_works_timeline .nav-link {
                    font-size: 14px;
                    min-width: inherit;
                    max-width: 70px;
                    width: 70px;
                    margin: 0px;
                    padding: 0;
               }

               #how_it_works .card.card-logo-image .card-body {
                    height: 200px;
               }
          }

          /*
 *
 *
 * Dashboard CSS Files
 * Here
 *
 *
*/
          #dashboard {
               transition: 0.5s ease;
          }

          #dashboard #sidebar {
               position: fixed;
               width: 300px;
               height: 100%;
               background-color: var(--sidebar-color);
               overflow: auto;
               z-index: 9;
               transition: 0.5s;
          }

          .dropdown-menu {
               max-height: 400px;
               overflow: auto;
          }

          /* width */
          .dropdown-menu::-webkit-scrollbar,
          .select2-dropdown .dropdown-menu::-webkit-scrollbar,
          #dashboard #sidebar::-webkit-scrollbar {
               width: 5px;
          }

          /* Track */
          .dropdown-menu::-webkit-scrollbar-track,
          .select2-dropdown .dropdown-menu::-webkit-scrollbar-track,
          #dashboard #sidebar::-webkit-scrollbar-track {
               background: #393939;
          }

          /* Handle */
          .dropdown-menu::-webkit-scrollbar-thumb,
          .select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb,
          #dashboard #sidebar::-webkit-scrollbar-thumb {
               background: var(--primary-color);
               border-radius: 50px;
          }

          /* Handle on hover */
          .dropdown-menu::-webkit-scrollbar-thumb:hover,
          .select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover,
          #dashboard #sidebar::-webkit-scrollbar-thumb:hover {
               background: var(--primary-color-deep);
          }

          #dashboard #content {
               padding-left: 300px;
               transition: 0.5s;
          }

          #dashboard #content #header {
               position: fixed;
               background: var(--header-bg);
               top: 0;
               width: calc(100% - 300px);
               max-height: 65px;
               height: 65px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 10px 20px;
               z-index: 2;
               transition: 0.5s;
          }

          #dashboard #content .auth {
               /* padding-left: 15px; */
               padding-top: 80px;
          }

          #dashboard #sidebar .sider_logo {
               display: block;
               text-align: center;
               padding: 20px 5px;
          }

          #dashboard #sidebar .sider_logo img {
               width: 180px;
               margin: 0 auto;
          }

          .sider_logo img.logo-color {
               display: none;
          }

          .daymode .sider_logo img.logo-white,
          .daymode #dashboard #sidebar .sider_logo img.logo-white,
          #dashboard #sidebar .sider_logo img.logo-color {
               display: none;
          }

          .daymode .sider_logo img.logo-color,
          .daymode #dashboard #sidebar .sider_logo img.logo-color {
               display: block;
          }

          .offcanvas-body .user_box,
          #dashboard #sidebar .user_box {
               margin: 10px 30px;
               text-align: center;
               padding: 20px 15px;
               border-radius: 15px;
               border: 1px solid #f70;
               background: url(https://res.cloudinary.com/sol-0123456789/image/upload/v1733288310/20240612panelbt/effect-user-bg_q9cxkb.png);
               background-color: #161616;
               background-repeat: no-repeat;
               background-size: cover;
               overflow: hidden;
               position: relative;
               margin-bottom: 20px;
          }

          .offcanvas-body .user_box .user_avatar,
          #dashboard #sidebar .user_box .user_avatar {
               width: 80px;
               border-radius: 80px;
               margin: 0 auto;
               margin-bottom: 5px;
               background-color: var(--white);
          }

          .avatar_images {
               border-radius: 500px;
          }

          .offcanvas-body .user_box h4,
          #dashboard #sidebar .user_box h4 {
               font-family: var(--primary-font);
               font-size: 18px;
               font-weight: 400;
               color: var(--white);
               margin-bottom: 5px;
          }

          .offcanvas-body .user_box h6,
          #dashboard #sidebar .user_box h6 {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: 600;
               color: var(--white);
               margin-bottom: 5px;
          }

          #dashboard #sidebar .sidebar_menu {
               list-style-type: none;
               padding: 0;
               margin: 0;
               width: 90%;
          }

          #dashboard #sidebar .sidebar_menu .menu_item .menu_link {
               display: flex;
               align-items: center;
               gap: 8px;
               justify-content: start;
               padding: 10px 30px;
               color: var(--white);
               /* border-bottom: 1px solid #5c5c5c; */
               border-radius: 0px 50px 50px 0px;
               transition: 0.5s background;
          }

          #dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover {
               background: #393939;
          }

          #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active {
               background: var(--primary-color);
               border-bottom: none;
               border-radius: 0px 50px 50px 0px;
          }

          #dashboard #sidebar .sidebar_menu .menu_item:last-child .menu_link {
               border-bottom: none;
          }

          #dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon {
               font-size: 25px;
               line-height: 0;
          }

          #dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon i {
               font-size: 20px;
          }

          #dashboard #sidebar .sidebar_menu .menu_item .menu_link .menu_text {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: 400;
          }

          #dashboard #content #header .user_access_btn {
               display: flex;
               align-items: center;
               justify-content: center;
               background: var(--white);
               border-color: var(--white);
               border-radius: 50px;
               width: 40px;
               height: 40px;
               padding: 0px;
          }

          #dashboard #content #header .user_access_btn .user_avatar {
               width: 100%;
          }

          .user_access_btn.dropdown-toggle::after {
               display: none;
          }

          .user_menu_wrap .dropdown-item {
               display: flex;
               align-items: center;
               gap: 5px;
               justify-content: start;
          }

          .user_menu_wrap .dropdown-item .icon {
               font-size: 20px;
               line-height: 0;
          }

          .user_menu_wrap .dropdown-item .text {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: 400;
          }

          #SidebarButton {
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 30px;
               background: none;
               border: none;
               box-shadow: none;
               color: var(--white);
               padding: 10px 10px;
               padding-left: 0px;
               cursor: pointer;
          }

          #dashboard #content #header .header_left {
               display: flex;
               align-items: center;
               gap: 0px;
          }

          #dashboard #content #header .header_right {
               display: flex;
               align-items: center;
               gap: 10px;
          }

          #dashboard #content #header .header_right .menu_btn {
               width: 40px;
               height: 40px;
               display: flex;
               align-items: center;
               justify-content: center;
          }

          #dashboard #content #header .header_right .menu_btn img {
               width: 40px;
          }

          #dashboard #content #header .header_right .menu_btn.telegram img {
               width: 50px;
          }

          .user_sidebar .currency_btn .currency_button,
          #dashboard #content #header .currency_btn .currency_button {
               border-radius: 50px;
               padding: 5px 18px;
               height: 40px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: var(--black-pure);
               border-color: var(--card-border);
               font-size: 14px;
               line-height: 0;
          }

          #dashboard.activeSidebar #sidebar {
               transform: translateX(-300px);
          }

          #dashboard.activeSidebar #content {
               padding-left: 0px;
          }

          #dashboard.activeSidebar #content #header {
               width: 100%;
          }

          .offcanvas {
               background: var(--sidebar-color);
          }

          .card_auth_1 .card-body {
               background: var(--bg-redial);
          }

          .user_data_info {
               position: relative;
               display: grid;
               grid-template-columns: 1fr 2fr;
               align-items: center;
               gap: 10px;
          }

          .user_data_info .settings_icon_btn {
               position: absolute;
               color: var(--primary-color);
               font-size: 24px;
               right: 10px;
          }

          .user_data_info .user_d_right {
               display: flex;
               flex-direction: column;
               justify-content: center;
          }

          .user_data_info .user_d_right h4 {
               font-size: 20px;
               color: var(--white);
               letter-spacing: 3px;
               margin-bottom: 10px;
          }

          .user_data_info .user_d_right h6 {
               font-size: 18px;
               color: #43b9fe;
               font-weight: normal;
               margin-bottom: 0px;
          }

          .user_data_info .user_d_left {
               display: flex;
               gap: 10px;
               align-items: center;
               justify-content: start;
               border-right: 3px solid var(--primary-color);
               padding-right: 10px;
          }

          .user_data_info .user_d_left .icon {
               width: 50px;
               height: 70px;
               display: flex;
               justify-content: center;
               align-items: center;
          }

          .user_data_info .user_d_left .text h6 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 16px;
               margin-bottom: 3px;
          }

          .user_data_info .user_d_left .text h3 {
               font-family: var(--primary-font);
               font-size: 24px;
               margin-bottom: 0;
               font-weight: 700;
               color: var(--white);
          }

          .user_data_info .user_d_right {
               padding-left: 15px;
          }

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

          .statics_card_inner .icon {
               width: 70px;
               min-width: 70px;
               height: 70px;
               border-radius: 50px;
               background: var(--primary-color);
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 25px;
               color: var(--white);
          }

          .statics_card_inner .icon.iconify_icon {
               font-size: 34px;
          }

          .statics_card_inner .icon img {
               width: 40px;
          }

          .statics_card_inner .text h6 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 16px;
               margin-bottom: 3px;
          }

          .statics_card_inner .text h3 {
               font-family: var(--primary-font);
               color: var(--white);
               font-size: 28px;
               font-weight: 800;
               margin-bottom: 0px;
          }

          .cat_filter_wrap {
               display: grid;
               grid-template-columns: repeat(6, 1fr);
               gap: 15px 20px;
          }

          .cat_filter_wrap .filter_item {
               display: flex;
               gap: 5px;
               align-items: center;
               background: var(--card-bg);
               border: 1px solid var(--card-border);
               padding: 8px 15px;
               border-radius: 8px;
          }

          .cat_filter_wrap .filter_item>* {
               pointer-events: none !important;
          }

          .cat_filter_wrap .filter_item.activeItem {
               background: var(--primary-color) !important;
               border-color: var(--primary-color) !important;
               color: var(--white) !important;
          }

          .cat_filter_wrap .filter_item .icons img {
               pointer-events: none;
               width: 25px;
               min-width: 25px;
               pointer-events: none;
          }

          .filter_item img {
               pointer-events: none;
          }

          .cat_filter_wrap .filter_item .text {
               font-size: 14px;
               font-weight: 500;
               color: var(--white);
               pointer-events: none;
          }

          .card_auth_1 {
               border: none;
          }

          .card_auth_1 .card-header {
               background: var(--primary-color);
               border-radius: 10px 10px 0px 0px;
               height: 75px;
               max-height: 75px;
          }

          .card_auth_1 .card-header h3 {
               font-family: var(--primary-font);
               font-size: 22px;
               margin-bottom: 0px;
               font-weight: 600;
               color: var(--white);
          }

          .card_auth_1 .card-header p {
               font-family: var(--primary-font);
               font-size: 14px;
               margin-bottom: 0px;
               font-weight: 400;
               color: var(--white);
          }

          .card_auth_1 .card-body {
               border: 1px solid var(--card-border);
               border-top: 0px;
               border-radius: 0 0 10px 10px;
          }

          .card_auth_1 .card-header .card_text h4 {
               font-family: var(--primary-font);
               font-size: 18px;
               color: var(--white);
               margin-bottom: 0px;
          }

          .header_buttons .nav-item button {
               background: var(--white);
          }

          .header_buttons .nav-pills .nav-item .nav-link {
               display: flex;
               align-items: center;
               padding: 8px 10px;
               gap: 2px;
               border-radius: 8px;
          }

          .header_buttons .nav-pills .nav-item .icon {
               color: var(--black-pure);
               font-size: 22px;
               line-height: 0;
          }

          .header_buttons .nav-pills .nav-item .text {
               font-size: 14px;
               font-weight: bold;
               color: var(--black-pure);
               display: none;
          }

          .header_buttons .nav-pills .nav-item .nav-link.active .text {
               display: block;
          }

          .header_buttons .nav-pills .nav-item .nav-link.active {
               background: var(--white);
          }

          .header_buttons .nav-pills {
               gap: 5px;
          }

          .service_descriptions label,
          .card-body .lebel {
               font-family: var(--primary-font);
               font-size: 14px;
               margin-bottom: 5px;
               color: var(--white);
          }

          .example_link .example_set {
               display: flex;
               align-items: center;
               justify-content: space-between;
               background: #0a0a0a;
               padding: 10px 18px;
               border-radius: 10px;
               color: var(--white);
          }

          .service_infos {
               display: grid;
               grid-template-columns: repeat(2, 1fr);
               gap: 15px;
          }

          .service_descriptions #service_descriptions,
          .infos_item .info_box {
               display: flex;
               align-items: center;
               gap: 5px;
               background: #0a0a0a;
               padding: 8px 10px;
               border-radius: 10px;
               color: var(--white);
               overflow: auto;
          }

          /* Day Night Mode btn */
          .day_night_btn {
               position: relative;
               display: flex;
               font-size: 22px;
               line-height: 0;
               height: 32px;
               gap: 12px;
               justify-content: space-between;
               align-items: center;
               background: var(--black-pure);
               padding: 6px 10px;
               border-radius: 50px;
               color: var(--white);
               border: 1px solid var(--card-border);
          }

          .day_night_btn .night_mode {
               color: var(--primary-color);
          }

          .daymode .day_night_btn .night_mode {
               color: var(--white);
          }

          .day_night_btn .active_circle {
               position: absolute;
               width: 40px;
               height: 40px;
               background: var(--white);
               border-radius: 50px;
               transform: translateX(26px);
               top: -5px;
               z-index: 0;
               transition: 0.8s ease;
          }

          .daymode .day_night_btn .active_circle {
               right: inherit;
               transform: translateX(-10px);
          }

          .day_night_btn .night_mode,
          .day_night_btn .day_mode {
               position: relative;
               z-index: 2;
          }

          .card_header_2 {
               display: flex;
               align-items: center;
               gap: 8px;
          }

          .card_header_2 .icon {
               width: 40px;
               height: 40px;
               display: flex;
               align-items: center;
               justify-content: center;
               background: var(--white);
               font-size: 24px;
               border-radius: 5px;
               color: var(--black-pure);
          }

          .card_header_2 .text {
               font-size: 18px;
               font-weight: bold;
               color: var(--white);
          }

          #api_page .example_response {
               font-family: var(--primary-font);
               color: var(--white);
               font-weight: 400;
          }

          #api_page pre {
               background: #141414;
               border-radius: 15px;
               padding: 20px 20px;
               color: #fff;
          }

          #api_page .table-bordered> :not(caption)>*>* {
               background: transparent;
               color: var(--white);
          }

          .header_logo .sider_logo>img {
               width: 180px;
          }

          .header_logo .sider_logo .logo-color {
               display: none;
          }

          .auth .form-group {
               margin-bottom: 1rem !important;
          }

          .auth .form-control {
               background-color: var(--form-input-bg);
               border-color: var(--form-input-bg);
               padding: 10px 15px;
               border-radius: 10px;
               margin-top: 5px;
               outline: none !important;
               box-shadow: none !important;
          }

          .auth label {
               font-family: var(--primary-font);
               font-size: 16px;
               font-weight: 600;
               color: var(--white);
          }

          .select2-container .dropdown-menu>li>a {
               color: var(--white);
          }

          .select2-container--default .select2-results__option[aria-selected="true"] {
               background-color: var(--primary-color) !important;
          }

          .select2-container--default .select2-results__option[aria-selected="true"] .badge.badge-secondary {
               background: var(--black-pure);
          }

          .select2-container .badge.badge-secondary {
               min-width: 30px;
               background: var(--primary-color);
               color: var(--white);
          }

          .select2-results__option {
               border-bottom: 1px solid var(--card-border);
          }

          .select2-container--default .select2-results__option--highlighted[aria-selected] {
               background: #2e2e2e;
          }

          .ticket_history .tickets_his_item {
               display: grid;
               grid-template-columns: 50px repeat(3, 1fr);
               background: var(--form-input-bg);
               gap: 15px;
               padding: 13px 15px;
               margin-bottom: 10px;
               border-radius: 10px;
               border: 1px solid transparent;
               transition: 0.5s;
          }

          .ticket_history.paymentTable .tickets_his_item {
               grid-template-columns: 50px repeat(4, 1fr) !important;
          }

          .ticket_history .tickets_his_item.unread_item {
               animation: unreadEffect 3s infinite;
          }

          @keyframes unreadEffect {
               0% {
                    border-color: transparent;
               }

               50% {
                    border-color: var(--primary-color);
                    background: #180b00;
               }

               100% {
                    border-color: transparent;
               }
          }

          .ticket_history .tickets_his_item h5 {
               font-family: var(--primary-font);
               font-size: 16px;
               color: var(--white);
               font-weight: 400;
               margin-bottom: 0;
          }

          .ticket_history .tickets_his_sub h5 {
               color: var(--primary-color);
          }

          .ticket_history .tickets_his_item .tickets_his_id::before {
               content: "Id";
          }

          .ticket_history .tickets_his_item .tickets_his_sub::before {
               content: "Subject";
          }

          .ticket_history .tickets_his_item .tickets_his_status::before {
               content: "Status";
          }

          .ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
               content: "Last Update";
          }

          .ticket_history .tickets_his_item .payment_methods_name::before {
               content: "Payment Methods";
          }

          .ticket_history .tickets_his_item .payment_amount::before {
               content: "Amount";
          }

          .ticket_history .tickets_his_item .payment_time::before {
               content: "Date";
          }

          .ticket_history .tickets_his_item .tickets_his_status .ticket_Pending {
               color: #00b9cb;
          }

          .ticket_history .tickets_his_item .tickets_his_status .ticket_Answered {
               color: #1dcb00;
          }

          .ticket_history .tickets_his_item .tickets_his_status .ticket_Closed {
               color: #ff0202;
          }

          .ticket_history .tickets_his_item .payment_methods_name::before,
          .ticket_history .tickets_his_item .payment_amount::before,
          .ticket_history .tickets_his_item .payment_time::before,
          .ticket_history .tickets_his_item .tickets_his_id::before,
          .ticket_history .tickets_his_item .tickets_his_sub::before,
          .ticket_history .tickets_his_item .tickets_his_status::before,
          .ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
               display: block;
               font-size: 16px;
               margin-bottom: 5px;
               font-weight: 700;
               color: #ddd;
          }

          .ticket_history .tickets_his_item .payment_amount,
          .ticket_history .tickets_his_item .tickets_his_status {
               text-align: center;
          }

          .addFundHeader {
               display: flex;
               justify-content: space-between;
               align-items: center;
               gap: 5px;
          }

          .btn.btn_history {
               font-family: var(--primary-font);
               font-weight: 700;
               background: var(--white);
               color: var(--black-pure);
          }

          /* Services modal Design */
          .services_dsc_modal {
               border-radius: 22px;
               border: none;
               overflow: hidden;
          }

          .modal__close {
               position: absolute;
               top: 10px;
               right: 10px;
          }

          .modal__close .btn_modal_close {
               width: 40px;
               background: #ff2c2c;
               font-size: 18px;
               color: var(--white);
               border-radius: 50px;
               height: 40px;
               cursor: pointer;
          }

          .services_dsc_modal .service_header {
               background: var(--primary-color);
               background-repeat: no-repeat;
               background-position: right center;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               border-radius: 20px 20px 0px 0px;
               padding: 10px 10px;
               min-height: auto;
               height: auto;
               color: var(--white);
          }

          .more_info_btn {
               width: 30px;
               height: 30px;
               display: flex;
               background: var(--primary-color);
               color: var(--white) !important;
               justify-content: center;
               align-items: center;
               border-radius: 10px;
               cursor: pointer;
               font-size: 14px;
          }

          .service_header #service_name {
               display: block;
               font-family: var(--font-text);
               font-size: 20px;
               font-weight: 700;
               text-align: start;
               color: var(--text-white);
               margin-top: 10px;
          }

          .services_dsc_modal .services_body {
               padding: 20px 25px;
               background: var(--card-bg);
          }

          .services_body .other_info {
               display: flex;
               justify-content: space-around;
               text-align: center;
               margin-bottom: 25px;
          }

          .services_body .other_info .info_item {
               display: flex;
               flex-direction: column;
               gap: 10px;
          }

          .services_body .other_info .info_item .icon {
               width: 40px;
               height: 40px;
               background: var(--primary-color);
               color: var(--text-white);
               font-size: 18px;
               border-radius: 50px;
               margin: 0 auto;
               line-height: 40px;
          }

          .services_body .other_info .info_item .text {
               font-family: var(--primary-font);
               color: var(--white);
          }

          .services_body .other_info .info_item .text h4 {
               font-size: 18px;
               text-align: center;
               margin-bottom: 5px;
          }

          .services_body .other_info .info_item .text>span {
               font-size: 16px;
               display: block;
          }

          .services_body #service_des {
               font-size: 16px;
               font-weight: var(--primary-font);
               background: var(--bs-body-bg);
               padding: 15px;
               border-radius: 10px;
               margin-bottom: 20px;
               color: var(--text-black);
          }

          .services_action {
               text-align: center;
          }

          .services_action .btn-block {
               min-width: 300px;
          }

          .orders__filter__btn .order__filters {
               display: flex;
               gap: 10px;
               flex-wrap: wrap;
          }

          .orders__filter__btn .order__filters .btn__orders__filter {
               background: var(--card-bg);
               display: flex;
               align-items: center;
               padding: 10px 15px;
               border-radius: 10px;
               gap: 10px;
               border: none;
               border: 1px solid var(--card-border);
               box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.13);
               color: var(--white);
          }

          .orders__filter__btn .order__filters .btn__orders__filter.active {
               background: var(--primary-color) !important;
               border-color: var(--primary-color) !important;
          }

          .orders__filter__btn .order__filters .btn__orders__filter .icon {
               font-size: 23px;
               line-height: 0;
          }

          .orders__filter__btn .order__filters .btn__orders__filter .text {
               color: var(--white);
               font-family: var(--primary-font);
               font-size: 18px;
               font-style: normal;
               font-weight: 400;
               line-height: normal;
          }

          .orders__filter__btn .order__filters .btn__orders__filter.active .text {
               color: var(--white);
          }

          .pagination {
               display: flex;
               gap: 5px;
               margin-top: 20px;
               margin-bottom: 25px;
          }

          .pagination li a {
               width: 40px;
               height: 40px;
               background: var(--card-bg);
               display: block;
               line-height: 40px;
               font-size: 18px;
               text-align: center;
               color: #fff;
               border-radius: 7px;
               transition: 0.5s;
          }

          .pagination li a:hover,
          .pagination li.active a {
               background: var(--primary-color);
          }

          /* Order Page Table */

          .subs__table,
          .refill__table,
          .subs__table,
          .refill__table,
          .order__table {
               margin-bottom: 50px;
               background: var(--bg-redial);
               border-radius: 15px;
          }

          .refill__table .refill_table_head,
          .refill__table .refill_table_row,
          .refill__table .refill_table_head,
          .refill__table .refill_table_row,
          .order__table .order_table_head,
          .order__table .order_table_row {
               display: grid;
               grid-template-columns: repeat(10, 1fr);
               /* grid-template-columns: 4em 5em 3fr 6em 7em 6em 6em 17em 12em 1fr; */
               width: 100%;
               gap: 10px;
               text-align: left;
               /* margin-bottom: 20px; */
               border-bottom: 1px solid var(--card-border);
               /* background: var(--card-bg); */
               box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
               padding: 15px;
               border-radius: 0px;
          }

          .order__table .order_table_row:last-child,
          .refill__table .refill_table_row:last-child,
          .subs__table .order_table_row:last-child {
               border-bottom: none;
          }

          .subs__table .subs_table_head>div,
          .refill__table .refill_table_head>div,
          .order__table .order_table_head>div {
               font-size: 14px;
               font-weight: 600;
               color: var(--primary-color);
               opacity: 0.8;
          }

          .subs__table .subs_table_row>div,
          .refill__table .refill_table_row>div,
          .order__table .order_table_row>div {
               font-size: 15px;
               color: var(--text-black);
               font-weight: normal;
          }

          .subs__table .subs_table_row .body__id>span,
          .refill__table .refill_table_row .body__id>span,
          .order__table .order_table_row .body__id>span {
               display: inline-flex;
               gap: 4px;
               font-size: 16px;
               background: var(--primary-color);
               color: var(--white);
               padding: 5px 15px;
               border-radius: 10px;
               cursor: pointer;
          }

          .order__table .order_table_head .head__link,
          .order__table .order_table_row .body__link {
               width: 25em;
          }

          .refill__table .refill_table_row .body__link .link__order,
          .order__table .order_table_row .body__link .link__order {
               display: inline;
               color: var(--white);
               transition: 0.5s ease;
          }

          .refill__table .refill_table_row .body__link .link__order:hover,
          .order__table .order_table_row .body__link .link__order:hover {
               color: var(--primary-color);
          }

          .refill__table .refill_table_row .body__link .link__order>a,
          .order__table .order_table_row .body__link .link__order>a {
               color: var(--text-black);
               text-decoration: underline;
               font-weight: 600;
               word-break: break-all;
          }

          .order__table .order_table_row .body__quantity,
          .order__table .order_table_row .body__price {
               font-weight: 600;
          }

          .order__table .order_table_head .head__price,
          .order__table .order_table_row .body__price {
               text-align: center;
          }

          .order__table .order_table_head .head__services,
          .order__table .order_table_row .body__services {
               width: 20em;
          }

          .order__table .order_table_head .head__status,
          .order__table .order_table_row .body__status {
               width: 8em;
          }

          .order__table .order_table_row .body__quickaction>.dropdown>.btn-action {
               background: var(--primary-color);
               border: none;
               border-radius: 50px;
               color: var(--white);
               padding: 6px 15px;
          }

          .subs__table .subs_table_head .body__status>.status_capsule,
          .subs__table .subs_table_row .body__status>.status_capsule,
          .refill__table .refill_table_row .body__status>.status_capsule,
          .order__table .order_table_row .body__status>.status_capsule {
               background: #6400ff;
               color: var(--white);
               padding: 6px 15px;
               border-radius: 50px;
               text-align: center;
               min-height: 30px;
               justify-content: center;
          }

          .body__services {
               cursor: pointer;
               transition: 0.5s;
          }

          .body__services:hover {
               color: var(--primary-color) !important;
          }

          .status_capsule.status_Completed {
               background: #1cb474 !important;
          }

          .status_capsule.status_Active {
               background: #795af6 !important;
          }

          .status_capsule.status_Pending {
               background: #eda417 !important;
          }

          .status_capsule.status_Processing {
               background: #795af6 !important;
          }

          .status_capsule.Rejected,
          .status_capsule.status_Canceled {
               background: #ec3d3d !important;
          }

          .status_capsule.status_Partial {
               background: #d116bf !important;
          }

          .status_capsule.status_Paused {
               background: #ff5721 !important;
          }

          .status_capsule.status_Expired {
               background: #795af6 !important;
          }

          .status_capsule.status_Error {
               background: #878f99;
          }

          /* ###### Order Page Table */

          /* Refill page table */
          .refill__table .refill_table_head,
          .refill__table .refill_table_row {
               grid-template-columns: repeat(6, minmax(auto, 1fr));
               gap: 25px;
          }

          .refill__table .refill_table_head .head__link,
          .refill__table .refill_table_row .body__link {
               width: 25em;
          }

          .refill__table .refill_table_head .head__services,
          .refill__table .refill_table_row .body__services {
               width: 25em;
          }

          .refill__table .refill_table_head .head__status,
          .refill__table .refill_table_row .body__status {
               width: 8em;
          }

          /* ### Refill page table */

          /* Subscriptions */
          .subs__table .subs_table_head,
          .subs__table .subs_table_row {
               display: grid;
               grid-template-columns: repeat(8, 1fr);
               width: 100%;
               gap: 15px;
               text-align: left;
               margin-bottom: 20px;
               border: 1px solid #d9d9d9;
               background: #fafbff;
               box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.03);
               padding: 15px;
               border-radius: 15px;
          }

          .subs__table .subs_table_head .head__id,
          .subs__table .subs_table_row .body__id {
               width: 5em;
          }

          .subs__table .subs_table_head .head__username,
          .subs__table .subs_table_row .body__username {
               width: 13em;
          }

          .subs__table .subs_table_head .head__services,
          .subs__table .subs_table_row .body__services {
               width: 15em;
          }

          .subs__table .subs_table_head .head__action,
          .subs__table .subs_table_row .body__action {
               width: auto;
          }

          .subs__table .subs_table_head .body__details,
          .subs__table .subs_table_row .body__details {
               width: 7rem;
          }

          .subs__table .subs_table_row .body__details .btn__details {
               border: 1px solid var(--card-border);
               color: var(--primary-color);
               border-radius: 50px;
               padding: 5px 15px;
               cursor: pointer;
               transition: 0.5s ease-in-out;
          }

          .subs__table .subs_table_row .body__action .actions__btn {
               display: inline-flex;
               gap: 5px;
               background: var(--primary-color);
               border: none;
               color: var(--white);
               border-radius: 50px;
               padding: 5px 15px;
               cursor: pointer;
               transition: 0.5s ease-in-out;
          }

          .subs__table .subs_table_row .body__action .btn__cancel {
               display: inline-flex;
               gap: 5px;
               border: 1px solid var(--dark-btn-bg);
               color: var(--dark-btn-bg);
               border-radius: 50px;
               padding: 5px 15px;
               cursor: pointer;
               transition: 0.5s ease-in-out;
          }

          .subs__table .subs_table_row .body__details .btn__details:hover {
               background: var(--primary-color-deep);
               color: var(--text-white);
          }

          /* ### Subscriptions */

          .user_sidebar_menu ul {
               list-style-type: none;
               padding-left: 0px;
          }

          .user_sidebar_menu ul li .sidebar-user-item {
               display: flex;
               gap: 5px;
               align-items: center;
               padding: 5px 10px;
               background: var(--bs-body-bg);
               margin-bottom: 5px;
               border-radius: 5px;
               color: var(--white);
          }

          .user_sidebar_menu ul li .sidebar-user-item .icon {
               line-height: 0;
          }

          #myAccount .user_card_wrap {
               display: flex;
               justify-content: space-between;
               align-items: center;
               gap: 10px;
          }

          .user_card_wrap .user_card_left {
               display: flex;
               align-items: center;
               gap: 10px;
          }

          .user_card_wrap .user_card_left .icon {
               width: 70px;
               height: 70px;
               background: var(--primary-color);
               justify-content: center;
               display: flex;
               align-items: center;
               border-radius: 50px;
               font-size: 25px;
          }

          .user_card_left .text h6 {
               font-size: 14px;
               margin-bottom: 0px;
          }

          .level_badges {
               background: var(--bs-body-bg);
               font-size: 14px;
               padding: 10px 15px;
               border-radius: 50px;
          }

          #myAccount h3 {
               font-family: var(--primary-font);
               font-size: 24px;
               font-weight: 700;
               color: var(--white);
          }

          .acc_features {
               display: grid;
               grid-template-columns: repeat(4, 1fr);
               gap: 20px 20px;
          }

          .feature_item {
               display: flex;
               gap: 6px;
               align-items: center;
          }

          .feature_item .icon {
               width: 25px;
               min-width: 25px;
               max-height: 25px;
               height: 25px;
               background: #e7ecf9;
               border-radius: 50px;
               display: flex;
               align-items: center;
               justify-content: center;
               color: #525252;
               line-height: 0;
          }

          .feature_item.active .icon {
               background: var(--primary-color);
               color: var(--white);
          }

          .feature_item .icon .activeIcon {
               display: none;
          }

          .feature_item.active .icon .activeIcon {
               display: block;
          }

          .feature_item.active .icon .inactiveIcon {
               display: none;
          }

          .ticket_info_item {
               display: flex;
               justify-content: space-between;
               border-bottom: 1px dashed var(--primary-color);
               padding: 10px 5px;
               margin-bottom: 10px;
          }

          .account_badges {
               display: flex;
               align-items: center;
               gap: 10px;
               width: 70%;
               margin: 0 auto;
               background: #000000;
               padding: 10px 25px;
               border-radius: 50px;
          }

          .account_badges.next_level {
               background: var(--primary-color);
          }

          .account_badges .icon {
               line-height: 0;
          }

          .acc_point {
               display: flex;
               align-items: center;
               gap: 10px;
               margin-bottom: 15px;
          }

          .acc_point .icon {
               font-size: 31px;
               color: var(--primary-color);
          }

          .info_icon_box {
               position: absolute;
               right: 15px;
               top: 15px;
               font-size: 20px;
               color: var(--primary-color);
          }

          #levelModal .nav-item {
               margin-right: 5px;
               margin-bottom: 5px;
          }

          #levelModal .nav-item .nav-link {
               display: flex;
               align-items: center;
               gap: 5px;
               background: #ff77003d;
               color: var(--white);
          }

          .user-spending-info-box {
               background: #302d2d;
               padding: 15px;
               position: relative;
               top: -20px;
               right: 10px;
               border-radius: 9px;
          }

          .daymode .user-spending-info-box {
               background: #e4f1ff;
          }

          .daymode #levelModal .nav-item .nav-link {
               color: var(--black-pure);
          }

          .user-spending-info-box .user-spending-txt {
               margin-bottom: 5px;
          }

          #levelModal .nav-item .nav-link .icon {
               line-height: 0;
          }

          #levelModal .nav-item .nav-link.active {
               background: var(--primary-color);
          }

          /* Responsive Area For dashboard */

          @media only screen and (max-width: 1900px) {

               .order__table .order_table_head .head__link,
               .order__table .order_table_row .body__link {
                    width: 17em;
               }

               .order__table .order_table_head .head__services,
               .order__table .order_table_row .body__services {
                    width: 13em;
                    font-size: 12px;
               }

               #dashboard.activeSidebar #sidebar_active_blur {
                    display: block !important;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    background: #ffffff0f;
                    display: block;
                    width: 100%;
                    height: 100%;
                    backdrop-filter: blur(5px);
                    opacity: 1;
               }

               #dashboard #sidebar {
                    width: 275px;
                    transform: translateX(-300px);
               }

               #dashboard.activeSidebar #sidebar {
                    transform: translateX(0px);
               }

               #dashboard #content {
                    padding-left: 0;
               }

               #dashboard #content #header {
                    width: calc(100%);
               }

               .refill__table .refill_table_row .body__link .link__order>a,
               .order__table .order_table_row .body__link .link__order>a {
                    font-size: 13px;
                    font-weight: 400;
               }
          }

          @media only screen and (max-width: 1550px) {

               .order__table .order_table_head .head__link,
               .order__table .order_table_row .body__link {
                    width: 14rem;
               }

               .auth .btn-primary,
               .serv_category_card .serv_cat_card_header .category_name,
               .card_auth_1 .card-header h3,
               .user_data_info .user_d_right h4,
               .user_data_info .user_d_left .text h3,
               .statics_card_inner .text h3 {
                    font-size: 18px;
               }

               .card_auth_1 .card-header .card_text h4 {
                    font-size: 16px;
               }

               .def_content h1,
               .def_content h2,
               #payment_section h2,
               #auth_banner .banner_content h2 {
                    font-size: 28px;
               }
          }

          @media only screen and (max-width: 1300px) {
               .header_logo.d-none-desk {
                    display: block !important;
               }

               #dashboard #sidebar {
                    transform: translateX(-300px);
               }

               #dashboard #content {
                    padding-left: 0px;
               }

               #dashboard #content #header {
                    width: 100%;
               }

               #dashboard.activeSidebar #sidebar {
                    transform: translateX(0px);
               }

               #dashboard #sidebar_active_blur {
                    opacity: 0;
                    transition: 1s;
               }

               #dashboard.activeSidebar #sidebar_active_blur {
                    display: block !important;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    background: #ffffff0f;
                    display: block;
                    width: 100%;
                    height: 100%;
                    backdrop-filter: blur(5px);
                    opacity: 1;
               }

               #dashboard.activeSidebar #content .auth,
               #dashboard.activeSidebar #content {
                    overflow: hidden;
               }

               #dashboard #content .auth {
                    padding-left: 0px;
               }

               .statics_card_inner .icon img {
                    width: 30px;
               }

               #affiliate_page .affiliate_users_data .aff_item .aff_item_left .icon,
               .statics_card_inner .icon {
                    width: 60px;
                    min-width: 60px;
                    height: 60px;
               }

               #affiliate_page .affiliate_users_data .aff_item .aff_item_right h5,
               .statics_card_inner .text h3 {
                    font-size: 18px;
               }

               .user_data_info .user_d_left .icon {
                    height: 60px;
               }

               #affiliate_page .affiliate_users_data {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px 10px;
                    justify-content: space-between;
               }
          }

          @media only screen and (max-width: 992px) {
               .mb-ph-3 {
                    margin-bottom: 10px;
               }

               .user_data_info .user_d_left .text h3 {
                    font-size: 20px;
               }

               .cat_filter_wrap {
                    grid-template-columns: repeat(4, 1fr);
               }

               .user_data_info .user_d_right h4 {
                    letter-spacing: 0px;
                    margin-bottom: 5px;
               }

               .card_auth_1 .card-header .card_text h4 br {
                    display: none;
               }

               .d-none-tab {
                    display: none !important;
               }

               .d-none-desk {
                    display: block !important;
               }

               .card_auth_1 .card-header h3 {
                    font-size: 18px;
                    margin-bottom: 0px;
               }

               .social_media_wrap {
                    grid-template-columns: repeat(4, 1fr);
                    gap: 10px;
               }

               #auth_banner {
                    padding: 20px;
               }

               #auth_banner .banner_content h2 {
                    font-size: 28px;
               }

               #affiliate_page .affiliate_users_data {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr) !important;
                    gap: 15px;
               }

               #dashboard #sidebar {
                    width: 300px;
               }

               /* Order Table */
               .order_table_row .body__id {
                    grid-area: id;
                    text-align: center;
               }

               .order_table_row .body__date {
                    grid-area: date;
                    text-align: center;
               }

               .order_table_row .body__link {
                    grid-area: link;
                    width: 100% !important;
               }

               .order_table_row .body__price {
                    grid-area: price;
                    text-align: center;
               }

               .order_table_row .body__price::before {
                    content: "Charges";
               }

               .order_table_row .body__startcount {
                    grid-area: statcount;
                    text-align: center;
               }

               .order_table_row .body__startcount::before {
                    content: "Start Count";
               }

               .order_table_row .body__quantity {
                    grid-area: quantity;
                    text-align: center;
               }

               .order_table_row .body__quantity::before {
                    content: "Quantity";
               }

               .order_table_row .body__remain {
                    grid-area: remain;
                    text-align: center;
               }

               .order_table_row .body__remain::before {
                    content: "Remain";
               }

               .order_table_row .body__services {
                    grid-area: services;
                    width: 100% !important;
                    text-align: center;
               }

               .order_table_row .body__status {
                    grid-area: status;
                    text-align: center;
               }

               .order_table_row .body__quickaction {
                    grid-area: actions;
                    text-align: center;
               }

               .order__table .order_table_head {
                    display: none;
               }

               .order__table {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    /* gap: 15px; */
               }

               .order__table .order_table_row {
                    border: 1px solid var(--card-border);
               }

               .order__table .order_table_row {
                    margin-bottom: 0;
               }

               .subs__table .subs_table_row .body__newpost,
               .subs__table .subs_table_row .body__quantity,
               .order_table_row .body__price,
               .order_table_row .body__remain,
               .order_table_row .body__startcount,
               .order_table_row .body__quantity {
                    position: relative;
                    padding-top: 20px;
               }

               .subs__table .subs_table_row .body__newpost::before,
               .subs__table .subs_table_row .body__quantity::before,
               .order_table_row .body__price::before,
               .order_table_row .body__remain::before,
               .order_table_row .body__startcount::before,
               .order_table_row .body__quantity::before {
                    font-size: 12px;
                    color: var(--primary-color);
                    position: absolute;
                    text-align: center;
                    top: 0px;
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    left: 0;
               }

               .refill__table .refill_table_head,
               .refill__table .refill_table_row,
               .refill__table .refill_table_head,
               .refill__table .refill_table_row,
               .order__table .order_table_head,
               .order__table .order_table_row {
                    grid-template-areas:
                         "id id id id id id id id id id id id "
                         "date date date date date date date date date date date date"
                         "link link link link link link link link link link link link"
                         "price price price statcount statcount statcount quantity quantity quantity remain remain remain"
                         " services services services services services services services services services services services services"
                         "status status status status status status actions actions actions actions actions actions";
                    gap: 10px;
               }

               .dripfeed__table .order_table_row .body__startcount::before {
                    content: "Quantity";
               }

               .dripfeed__table .order_table_row .body__quantity::before {
                    content: "Total quantity";
               }

               .dripfeed__table .order_table_row .body__remain::before {
                    content: "Runs ~ Interval";
               }

               .refill__table .order_table_row .body__price::before {
                    content: "Order Id";
               }

               .refill__table .order_table_row .body__price {
                    grid-column: span 12;
               }

               .refill__table .order_table_row .body__status {
                    width: 100%;
                    grid-column: span 12;
               }

               .dripfeed__table .order_table_row .body__status {
                    width: 100%;
                    grid-column: span 12;
               }

               .orders__filter__btn .order__filters .btn__orders__filter .icon {
                    width: 20px;
               }

               .subs__table .subs_table_head {
                    display: none;
               }

               .subs__table .subs_table_row .body__id {
                    grid-area: subId;
                    width: auto;
               }

               .subs__table .subs_table_row .body__username {
                    grid-area: subUsername;
                    width: 100%;
               }

               .subs__table .subs_table_row .body__quantity {
                    grid-area: subquan;
               }

               .subs__table .subs_table_row .body__newpost {
                    grid-area: subpost;
               }

               .subs__table .subs_table_row .body__services {
                    grid-area: subserv;
                    width: 100%;
               }

               .subs__table .subs_table_row .body__status {
                    grid-area: substatus;
               }

               .subs__table .subs_table_row .body__details {
                    grid-area: subsdetail;
               }

               .subs__table .subs_table_row .body__action {
                    grid-area: subaction;
               }

               .subs__table .subs_table_row .body__quantity::before {
                    content: "Quantity";
               }

               .subs__table .subs_table_row .body__newpost::before {
                    content: "New posts";
               }

               .subs__table {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
               }

               .subs__table .subs_table_row {
                    grid-template-columns: none;
                    text-align: center;
                    grid-template-areas:
                         "subId subId subId subId subId subId"
                         "subUsername subUsername subUsername subUsername subUsername subUsername"
                         "subquan subquan subquan subpost subpost subpost"
                         "subserv subserv subserv subserv subserv subserv"
                         "substatus substatus subsdetail subsdetail subaction subaction";
               }

               .acc_features {
                    grid-template-columns: repeat(3, 1fr);
                    gap: 10px;
               }
          }

          @media only screen and (max-width: 768px) {
               .social_media_wrap {
                    grid-template-columns: repeat(6, 1fr);
               }

               .search_filter_wrap {
                    grid-template-columns: 1fr;
                    gap: 10px;
               }

               .filter_currency>button,
               .search_filter_wrap .filter_btn {
                    width: 100%;
               }

               .filter_currency>button,
               .search_filter_wrap .filter_btn {
                    height: 45px;
               }

               .social_media_wrap {
                    gap: 5px;
               }

               .social_media_wrap .social_media_btn {
                    padding: 8px 10px;
               }

               .social_media_wrap .social_media_btn .media_name {
                    display: none;
               }

               .fav {
                    position: absolute;
                    top: 13px;
                    right: 60%;
               }

               .serv_category_card .serv_cat_card_header .category_name {
                    font-size: 18px;
               }

               .serv_category_card .serv_cat_card_body .service_item,
               .serv_category_card .serv_cat_card_body .service_item.service_table_header {
                    display: grid;
               }

               .serv_category_card .serv_cat_card_body .service_item.service_table_header {
                    display: none !important;
               }

               .serv_category_card .serv_cat_card_body .service_item .id {
                    grid-area: id;
                    width: 100%;
                    text-align: center;
               }

               .serv_category_card .serv_cat_card_body .service_item.service .services_name {
                    font-size: 14px;
                    grid-area: services;
                    width: 100%;
                    text-align: center;
                    margin-bottom: 20px;
               }

               .serv_category_card .serv_cat_card_body .service_item .rate {
                    position: relative;
                    grid-area: price;
                    width: 100%;
                    text-align: center;
               }

               .serv_category_card .serv_cat_card_body .service_item .rate::before {
                    content: "Rate Per 1000";
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.min_order {
                    display: block;
                    position: relative;
                    grid-area: min;
                    width: 100%;
                    text-align: center;
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.max_order {
                    display: block;
                    position: relative;
                    grid-area: max;
                    width: 100%;
                    text-align: center;
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.min_order::before {
                    content: "Min Order";
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.max_order::before {
                    content: "Max Order";
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.min_order::before,
               .serv_category_card .serv_cat_card_body .service_item.service>span.max_order::before,
               .serv_category_card .serv_cat_card_body .service_item .rate::before {
                    font-family: var(--font-text);
                    font-size: 12px;
                    color: #8f8f8f;
                    position: absolute;
                    top: -20px;
                    text-align: center;
                    display: block;
                    width: 100%;
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.avg_time {
                    font-size: 14px;
                    grid-area: avgTime;
                    display: block;
                    width: 100%;
                    text-align: center;
               }

               .serv_category_card .serv_cat_card_body .service_item .descriptions {
                    grid-area: desc;
                    width: 100%;
                    text-align: center;
               }

               .serv_category_card .serv_cat_card_body .service_item.service {
                    position: relative;
                    display: grid;
                    grid-template-areas:
                         "id id id id id id"
                         "services services services services services services"
                         " price price min min max max"
                         " avgTime avgTime avgTime avgTime avgTime avgTime"
                         " desc desc desc desc desc desc";
                    gap: 10px;
               }

               .serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
               .serv_category_card .serv_cat_card_body .service_item.service>span.min_order>span,
               .serv_category_card .serv_cat_card_body .service_item.service>span.max_order>span,
               .serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
                    font-size: 14px;
                    padding: 5px 18px;
               }

               .serv_category_card .serv_cat_card_body {
                    padding: 10px;
               }

               .btn_descriptions {
                    font-size: 14px;
                    padding: 5px 30px;
               }

               .services_dsc_modal .service_header {
                    padding: 15px;
               }

               .services_dsc_modal .services_body {
                    padding: 20px 10px;
               }

               .service_header #service_name {
                    font-size: 16px;
               }

               .services_body .other_info .info_item .text h4 {
                    font-size: 14px;
                    margin-bottom: 0px;
               }

               .services_body .other_info .info_item .text>span {
                    font-size: 14px;
                    font-weight: var(--font-extra-bold);
               }

               .services_body .other_info .info_item {
                    gap: 5px;
               }

               .service_header .btn_scondary {
                    padding: 5px 20px;
                    font-size: 14px;
               }

               .services_body #service_des {
                    font-size: 12px;
               }

               #affiliate_page .affiliate_users_data {
                    grid-template-columns: 1fr !important;
               }

               #auth_banner .banner_content h2 {
                    font-size: 32px;
               }

               #auth_banner .banner_image {
                    text-align: center;
               }

               .acc_features {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 10px;
               }

               .user-spending-info-box {
                    top: 5px;
                    right: inherit;
               }
          }

          @media only screen and (max-width: 550px) {
               .mb-ph-3 {
                    margin-bottom: 0.5rem;
               }

               .cat_filter_wrap {
                    grid-template-columns: repeat(6, 1fr);
               }

               .header_logo .sider_logo>img {
                    width: 150px;
               }

               .cat_filter_wrap {
                    gap: 5px;
               }

               .cat_filter_wrap .filter_item {
                    justify-content: center;
                    align-items: center;
               }

               .cat_filter_wrap .filter_item .text {
                    display: none;
               }

               .user_data_info .user_d_left {
                    border-right: none;
                    padding-right: none;
                    border-bottom: 2px solid var(--primary-color);
                    padding-bottom: 10px;
               }

               .user_data_info .settings_icon_btn {
                    top: 10px;
               }

               .user_data_info {
                    grid-template-columns: 1fr;
               }

               .user_data_info .user_d_right {
                    padding-left: 0px;
               }

               .user_data_info .user_d_right h4 {
                    font-size: 18px;
               }

               .statics_card_inner .text h6,
               .user_data_info .user_d_right h6 {
                    font-size: 14px;
               }

               .statics_card .card-body {
                    padding: 10px 10px;
               }

               #affiliate_page .affiliate_users_data .aff_item .aff_item_left .icon,
               .statics_card_inner .icon {
                    width: 50px;
                    min-width: 50px;
                    height: 50px;
                    font-size: 24px;
               }

               .statics_card_inner .text h6 .statics_card_inner .icon img {
                    width: 25px;
               }

               .statics_card_inner {
                    gap: 5px;
               }

               .neworder_statistics_row .col-lg-3:nth-child(3),
               .neworder_statistics_row .col-lg-3:first-child {
                    padding-right: 5px;
               }

               .neworder_statistics_row .col-lg-3:nth-child(2),
               .neworder_statistics_row .col-lg-3:nth-child(4) {
                    padding-left: 5px;
               }

               .d-none-ph {
                    display: none !important;
               }

               .example_set .text,
               .infos_item .info_box .text {
                    font-size: 12px;
               }

               .card_auth_1 .card-header {
                    height: auto;
                    max-height: inherit;
               }

               .infos_item .info_box .icon {
                    width: 30px;
                    min-width: 30px;
               }

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

               .service_descriptions #service_descriptions {
                    font-size: 14px;
               }

               .ticket_history .tickets_his_item {
                    grid-template-areas:
                         "tickId tickId tickId tickId tickId tickId"
                         "ticketSub ticketSub ticketSub ticketSub ticketSub ticketSub"
                         "ticketStatus ticketStatus LastUpdate LastUpdate LastUpdate LastUpdate";
                    gap: 20px 5px;
               }

               .ticket_history.paymentTable .tickets_his_item {
                    grid-template-areas:
                         "tickId tickId tickId tickId tickId tickId"
                         "ticketSub ticketSub ticketSub ticketSub ticketSub ticketSub"
                         "ticketStatus ticketStatus LastUpdate LastUpdate LastUpdate LastUpdate"
                         "Invoice Invoice Invoice Invoice Invoice Invoice";
                    gap: 20px 5px;
               }

               .ticket_history .tickets_his_id {
                    grid-area: tickId;
                    text-align: center;
               }

               .ticket_history.paymentTable .invoice {
                    grid-area: Invoice;
                    text-align: center;
               }

               .payment_methods_name,
               .ticket_history .tickets_his_sub {
                    grid-area: ticketSub;
                    text-align: center;
               }

               .payment_amount,
               .ticket_history .tickets_his_status {
                    grid-area: ticketStatus;
                    text-align: center;
               }

               .payment_time,
               .ticket_history .tickets_his_lastUpdate {
                    grid-area: LastUpdate;
                    text-align: center;
               }

               .ticket_history .tickets_his_item .payment_methods_name::before,
               .ticket_history .tickets_his_item .payment_amount::before,
               .ticket_history .tickets_his_item .payment_time::before,
               .ticket_history .tickets_his_item .tickets_his_id::before,
               .ticket_history .tickets_his_item .tickets_his_sub::before,
               .ticket_history .tickets_his_item .tickets_his_status::before,
               .ticket_history .tickets_his_item .tickets_his_lastUpdate::before {
                    font-size: 14px;
               }

               .ticket_history .tickets_his_item h5 {
                    font-size: 15px;
               }

               .social_media_wrap {
                    grid-template-columns: repeat(4, 1fr);
               }

               #auth_banner {
                    padding: 20px 0px;
               }

               #myAccount h3 {
                    font-size: 18px;
               }

               #myAccount p {
                    font-size: 14px;
               }

               .level_badges {
                    font-size: 10px;
               }

               .user_card_wrap .user_card_left .icon {
                    width: 45px;
                    height: 45px;
                    font-size: 20px;
               }

               #auth_banner .banner_content h2 {
                    font-size: 24px;
               }

               .auth .btn-primary {
                    height: 40px;
                    font-size: 14px;
               }

               #auth_banner .banner_content p {
                    font-size: 14px;
               }

               .service_itemscard .service_card_inner .serv_card_top .icon img {
                    width: 75px;
               }

               .service_itemscard .service_card_inner .serv_card_top h3 {
                    font-size: 20px;
               }

               .service_itemscard .service_card_inner .serv_card_top {
                    font-size: 14px;
               }

               .order__table {
                    grid-template-columns: 1fr;
               }

               .orders__filter__btn .order__filters .btn__orders__filter {
                    padding: 6px 15px;
                    border-radius: 7px;
                    gap: 10px;
               }

               .orders__filter__btn .order__filters .btn__orders__filter .text {
                    font-size: 16px;
               }

               .orders__filter__btn .order__filters .btn__orders__filter .icon {
                    width: 16px;
               }

               .serv_category_card {
                    margin-bottom: 20px;
               }

               .serv_category_card .serv_cat_card_body .service_item.service {
                    position: relative;
               }

               .serv_category_card .serv_cat_card_body .service_item .fav {
                    position: absolute;
                    top: 15px;
                    font-size: 18px;
               }

               .service_filter_wraper {
                    padding: 15px 5px;
               }

               .subs__table {
                    display: grid;
                    grid-template-columns: 1fr;
               }

               .subs__table .subs_table_row {
                    grid-template-columns: none;
                    text-align: center;
                    grid-template-areas:
                         "subId subId subId subId subId subId"
                         "subUsername subUsername subUsername subUsername subUsername subUsername"
                         "subquan subquan subquan subpost subpost subpost"
                         "subserv subserv subserv subserv subserv subserv"
                         "substatus substatus substatus substatus substatus substatus"
                         " subsdetail subsdetail  subsdetail subaction subaction subaction";
               }

               .order__table .order_table_row {
                    border: none;
                    border-bottom: 1px solid var(--card-border);
               }

               #dashboard #content #header .header_right {
                    gap: 5px;
               }

               #dashboard #content #header .currency_btn .currency_button {
                    padding: 5px 10px;
                    font-size: 12px;
               }

               #dashboard #sidebar .sidebar_menu .menu_item .menu_link {
                    padding: 5px 30px;
               }

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

          @media only screen and (max-width: 400px) {
               .cat_filter_wrap {
                    grid-template-columns: repeat(4, 1fr);
               }

               .statics_card_inner .text h6 {
                    font-size: 11px;
               }

               #affiliate_page .affiliate_users_data .aff_item .aff_item_right h5,
               .statics_card_inner .text h3 {
                    font-size: 14px;
               }
          }

          /* Day Mode colors */
          .daymode #myAccount h3,
          .daymode h1,
          .daymode h2,
          .daymode h3,
          .daymode h4,
          .daymode h5,
          .daymode h6,
          .daymode p,
          .daymode div {
               color: var(--black-pure);
          }

          .daymode .level_badges,
          .daymode #dashboard #sidebar {
               background: #ffede0;
          }

          .daymode {
               background: #f5fcff !important;
               background-color: #f5fcff !important;
          }

          .daymode .offcanvas,
          .daymode #dashboard #content #header {
               background: #ffede0;
          }

          .offcanvas .user_sidebar {
               display: flex;
               align-items: center;
               justify-content: center;
               gap: 10px;
          }

          .offcanvas a.menu_btn.telegram {
               width: 50px;
               position: relative;
               top: 2px;
          }

          .offcanvas a.menu_btn.telegram img {
               width: 50px;
          }

          .daymode .user_sidebar_menu ul li .sidebar-user-item {
               background: var(--white);
          }

          .daymode #SidebarButton {
               color: var(--primary-color);
          }

          .daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link {
               color: var(--black-pure);
          }

          .daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link .icon {
               color: var(--primary-color);
          }

          .daymode #api_page .example_response,
          .daymode #api_page .table-bordered> :not(caption)>*>*,
          .daymode .table tr td,
          .daymode .table tr th,
          .daymode .faq_accordion .accordion-item p,
          .daymode .faq_accordion .accordion-item .accordion-header button,
          .daymode .serv_category_card .serv_cat_card_body .service_item.service .services_name,
          .daymode .serv_category_card .serv_cat_card_body .service_item.service_table_header>span,
          .daymode .social_media_wrap .social_media_btn .media_name,
          .daymode .ticket_history .tickets_his_item h5,
          .daymode .ticket_history .tickets_his_item .payment_methods_name::before,
          .daymode .ticket_history .tickets_his_item .payment_amount::before,
          .daymode .ticket_history .tickets_his_item .payment_time::before,
          .daymode .ticket_history .tickets_his_item .tickets_his_id::before,
          .daymode .ticket_history .tickets_his_item .tickets_his_sub::before,
          .daymode .ticket_history .tickets_his_item .tickets_his_status::before,
          .daymode .ticket_history .tickets_his_item .tickets_his_lastUpdate::before,
          .daymode #payment_section h2,
          .daymode #auth_banner .banner_content p,
          .daymode #auth_banner .banner_content h2,
          .daymode .example_link .example_set,
          .daymode .service_descriptions #service_descriptions,
          .daymode .infos_item .info_box,
          .daymode .service_descriptions label,
          .daymode .card-body .lebel,
          .daymode .statics_card_inner .text h3,
          .daymode .statics_card_inner .text h6,
          .daymode .user_data_info .user_d_left .text h3,
          .daymode .cat_filter_wrap .filter_item .text,
          .daymode .user_data_info .user_d_left .text h6,
          .daymode .user_data_info .user_d_right h4 {
               color: var(--black-pure);
          }

          .daymode .ticket_history .tickets_his_item .tickets_his_sub h5 {
               color: var(--primary-color);
          }

          .daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active {
               color: var(--white);
          }

          .daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active .icon {
               color: var(--white);
          }

          .daymode .services_dsc_modal .services_body {
               background: var(--white);
          }

          .daymode .services_body #service_des {
               background: #ffede0;
               border-color: var(--primary-color);
          }

          .daymode .table> :not(caption)>*>*,
          .daymode .social_media_wrap .social_media_btn,
          .daymode .cat_filter_wrap .filter_item,
          .daymode .card {
               background-color: var(--white);
               border-color: #e1e1e1;
          }

          .daymode .card_auth_1 .card-body {
               background: var(--white);
               border-color: var(--primary-color);
          }

          .daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link:hover {
               background: transparent;
          }

          .daymode #dashboard #sidebar .sidebar_menu .menu_item .menu_link.active:hover {
               background: var(--primary-color);
          }

          .daymode .select2-container .select2-selection__text,
          .daymode label,
          .daymode .service_descriptions label {
               color: var(--black-pure);
          }

          .daymode .user_sidebar .currency_btn .currency_button,
          .daymode #dashboard #content #header .currency_btn .currency_button {
               background: var(--white);
               border-color: var(--primary-color);
               color: var(--black-pure);
          }

          .daymode .day_night_btn {
               background: var(--white);
               border-color: var(--primary-color);
          }

          .daymode .day_night_btn .night_mode {
               color: var(--primary-color);
          }

          .daymode .day_night_btn .active_circle {
               background: var(--primary-color);
               color: var(--white);
          }

          .daymode .orders__filter__btn .order__filters .btn__orders__filter {
               background: #ffede0;
               color: var(--black-pure);
               border-color: #ff770052;
          }

          .daymode .orders__filter__btn .order__filters .btn__orders__filter .text {
               color: var(--black-pure);
          }

          .daymode .service_descriptions #service_descriptions,
          .daymode .infos_item .info_box,
          .daymode .example_link .example_set {
               background: #ffede0;
               border-color: #ff770052;
          }

          .daymode .card.card_chat .tickets-uploader,
          .daymode .ticket_history .tickets_his_item,
          .daymode .panel-body.border-solid,
          .daymode .search_inputs .search input,
          .daymode .search_filter_wrap .search input,
          .daymode .auth .form-control {
               border-color: #ff770052;
               background-color: #ffede0;
          }

          .daymode .dropdown-menu {
               background: var(--white);
          }

          .daymode .header_logo .sider_logo .logo-white {
               display: none;
          }

          .daymode .header_logo .sider_logo .logo-color {
               display: block;
          }

          .daymode .account_badges {
               background: #dcf5ff;
          }

          .daymode .account_badges.next_level {
               background: var(--primary-color);
               color: var(--white);
          }

          /* width */
          .daymode .dropdown-menu::-webkit-scrollbar,
          .daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar,
          #dashboard #sidebar::-webkit-scrollbar {
               width: 5px;
          }

          /* Track */
          .daymode .dropdown-menu::-webkit-scrollbar-track,
          .daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar-track,
          .daymode #dashboard #sidebar::-webkit-scrollbar-track {
               background: #e5e5e5;
          }

          /* Handle */
          .daymode .dropdown-menu::-webkit-scrollbar-thumb,
          .daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb,
          .daymode #dashboard #sidebar::-webkit-scrollbar-thumb {
               background: var(--primary-color);
               border-radius: 50px;
          }

          /* Handle on hover */
          .daymode .dropdown-menu::-webkit-scrollbar-thumb:hover,
          .daymode .select2-dropdown .dropdown-menu::-webkit-scrollbar-thumb:hover,
          .daymode #dashboard #sidebar::-webkit-scrollbar-thumb:hover {
               background: var(--primary-color-deep);
          }

          .daymode .select2-container--default .select2-results__option[aria-selected="true"] .select2-selection__text {
               color: var(--white);
          }

          .daymode .select2-container--default .select2-results__option--highlighted[aria-selected] {
               background: #d5d5d5;
          }

          .daymode .select2-results__option {
               border-color: #ffede0;
          }

          .daymode .orders__filter__btn .order__filters .btn__orders__filter.active .text,
          .daymode .orders__filter__btn .order__filters .btn__orders__filter.active {
               color: var(--white);
          }

          .daymode .subs__table,
          .daymode .refill__table,
          .daymode .subs__table,
          .daymode .refill__table,
          .daymode .order__table {
               background: var(--white);
          }

          .daymode .orders__filter__btn .order__filters .btn__orders__filter.active .icon {
               color: var(--white);
          }

          .daymode .refill__table .refill_table_row .body__link .link__order,
          .daymode .order__table .order_table_row .body__link .link__order {
               color: var(--black-pure);
          }

          .daymode .refill__table .refill_table_head,
          .daymode .refill__table .refill_table_row,
          .daymode .refill__table .refill_table_head,
          .daymode .refill__table .refill_table_row,
          .daymode .order__table .order_table_head,
          .daymode .order__table .order_table_row {
               border-color: var(--primary-color);
          }

          .daymode .user_menu_wrap .dropdown-item.bg-danger .icon,
          .daymode .user_menu_wrap .dropdown-item.bg-danger .text,
          .daymode .user_menu_wrap .dropdown-item.bg-danger {
               color: var(--white) !important;
          }

          .daymode .ticket_history .tickets_his_item.unread_item {
               animation: unreadEffect2 3s infinite;
          }

          @keyframes unreadEffect2 {
               0% {
                    border-color: transparent;
               }

               50% {
                    border-color: var(--primary-color);
                    background: #efd2bd;
               }

               100% {
                    border-color: transparent;
               }
          }

          .daymode .card.card_chat {
               background: url(https://cdn.mypanel.link/ob5eq3/6brszdgdh34b7wdj.png),
                    radial-gradient(#fff, #fff);
          }

          .daymode .ticket-message-left.admin_ticket .ticket-message {
               background: #ffcaca;
          }

          .daymode .social_media_wrap .social_media_btn.activeItem {
               background: var(--primary-color);
               border-color: var(--primary-color);
          }

          .daymode .serv_category_card .serv_cat_card_body {
               background: var(--white);
          }

          .daymode .serv_category_card .serv_cat_card_body .service_item.service>span.id>span,
          .daymode .serv_category_card .serv_cat_card_body .service_item.service>span.rate>span {
               background: #ffede0;
               color: var(--primary-color);
          }

          .daymode .auth .faq_accordion .accordion-item {
               background: #ffede0;
          }

          .daymode .modal-content {
               background: var(--white);
          }

          .dropdown-menu {
               z-index: 2;
          }

          .separator {
               display: flex;
               align-items: center;
               text-align: center;
          }

          .separator::before,
          .separator::after {
               content: "";
               flex: 1;
               border-bottom: 1px solid #c9c9c9;
          }

          .separator:not(:empty)::before {
               margin-right: 0.25em;
          }

          .separator:not(:empty)::after {
               margin-left: 0.25em;
          }

          .invoice_btn {
               padding: 5px 20px;
               border: none;
               background: var(--primary-color);
               border-radius: 5px;
          }

          .daymode .select2-container .dropdown-menu>li>a {
               color: var(--black-pure);
          }

          .ticket-message blockquote {
               border-left: 2px solid var(--primary-color);
               background: #ff770033;
               padding: 0px 10px;
          }

          .select2-container .dropdown-menu>li>a {
               color: var(--white);
          }

          .select2-container--default .select2-results__option[aria-selected="true"] {
               background-color: var(--primary-color) !important;
          }

          .select2-container--default .select2-results__option[aria-selected="true"] .badge.badge-secondary {
               background: var(--black-pure);
          }

          .select2-container .badge.badge-secondary {
               min-width: 30px;
               background: var(--primary-color);
               color: var(--white);
          }

          .select2-results__option {
               border-bottom: 1px solid var(--card-border);
          }

          .select2-container--default .select2-results__option--highlighted[aria-selected] {
               background: #2e2e2e;
          }

          .select2-container--default .select2-selection--single {}

          .select2-container .select2-selection--single {
               box-sizing: border-box;
               cursor: pointer;
               display: block;
               user-select: none;
               -webkit-user-select: none;
               height: auto;
          }

          .auth .form-control {
               background-color: var(--form-input-bg);
               border-color: var(--form-input-bg);
               padding: 10px 15px;
               border-radius: 10px;
               margin-top: 5px;
               outline: none !important;
               box-shadow: none !important;
          }

          .select2-container--default .select2-selection--single {
               background-color: var(--form-input-bg) !important;
               border-color: var(--form-input-bg) !important;
               padding: 10px 15px !important;
               border-radius: 10px !important;
               margin-top: 5px !important;
               outline: none !important;
               box-shadow: none !important;
          }

          @media only screen and (min-width: 1300px) {
               #dashboard.activeSidebar #sidebar_active_blur {
                    display: block !important;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 5;
                    background: #ffffff0f;
                    display: block;
                    width: 100%;
                    height: 100%;
                    backdrop-filter: blur(5px);
                    opacity: 1;
               }

               html body #dashboard.activeSidebar #sidebar {
                    transform: translateX(0px) !important;
               }

               html body #dashboard #sidebar {
                    transform: translateX(-100%) !important;
               }

               html body #dashboard #content {
                    padding-left: 0px;
               }

               html body.active #dashboard #content {
                    padding-left: 300px !important;
               }

               html body #dashboard #content #header {
                    width: 100% !important;
               }

               html body.active #dashboard #content #header {
                    width: calc(100% - 300px) !important;
               }

               /* html body  #dashboard #content #header{
      width: 100% !important;
    }
    #dashboard.activeSidebar #content #header{
      width: 100% !important;
    } */
          }

          /* ===== Additional mobile & performance enhancements ===== */

          /* Respect users who prefer reduced motion */
          @media (prefers-reduced-motion: reduce) {
               * {
                    animation-duration: 0.001ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.001ms !important;
                    scroll-behavior: auto !important;
               }
          }

          /* Improve tap interactions and accessibility */
          :where(button, a, [role="button"]) {
               touch-action: manipulation;
          }

          :where(*) {
               -webkit-tap-highlight-color: transparent;
          }

          /* Tighten vertical rhythm on mobile for denser layout */
          @media (max-width:640px) {

               .container,
               .csmm-wrap,
               .sh-wrapper {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
               }

               h1 {
                    font-size: clamp(22px, 7vw, 28px);
               }

               h2 {
                    font-size: clamp(18px, 5.6vw, 24px);
               }

               h3 {
                    font-size: clamp(16px, 5vw, 20px);
               }

               p,
               li {
                    font-size: 14px;
               }

               .section-subtitle,
               .def_content p {
                    font-size: 14px;
               }

               /* Reduce inter-card gaps */
               .blog-section,
               .services-hub .sh-grid,
               #free-services .services-grid,
               #payment_methods .pay-grid,
               #country-smm .country-grid {
                    gap: 10px !important;
               }

               /* Constrain long labels */
               .svc-name,
               .srv-title,
               #payment_methods .pay-label,
               #country-smm .country-link .label {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    display: block;
               }
          }

          /* Prevent images from exceeding their cards and reserve space to fight CLS */
          img {
               max-width: 100%;
               height: auto;
          }

          .blog-image-wrapper {
               aspect-ratio: 16 / 9;
               height: auto !important;
          }

          #payment_methods .pay-logo,
          #payment_methods .pay-svg {
               width: auto;
          }

          /* De-emphasize heavy hover effects on touch to reduce paint cost */
          @media (hover: none) {

               .blog_card:hover,
               .blog-box:hover,
               #payment_methods .pay-card:hover,
               #free-services .srv:hover {
                    box-shadow: none !important;
                    transform: none !important;
               }
          }

          /* Ensure hidden overflow on chip containers to avoid wrapping artifacts */
          .services-hub .svc-chip {
               overflow: hidden;
          }
          
     <meta name="color-scheme" content="dark light">
     <meta name="theme-color" content="#0b0f1a">
     <link rel="preload" as="image"
          href="https://res.cloudinary.com/sol-0123456789/image/upload/v1731930583/20240612panelbt/phone-icon_h6ijsa.png"
          imagesrcset="" fetchpriority="high">

          /* ===== PAYMENT METHODS Optimized ===== */
          #payment_methods .pay-card {
               min-height: 96px;
               padding: 12px;
          }

          #payment_methods .pay-logo,
          #payment_methods .pay-svg {
               max-width: 110px;
               max-height: 28px;
               width: auto;
               height: auto;
               object-fit: contain;
               display: block;
          }

          @media (max-width:640px) {
               #payment_methods .pay-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               #payment_methods .pay-card {
                    min-height: 82px;
                    padding: 10px;
               }

               #payment_methods .pay-logo,
               #payment_methods .pay-svg {
                    max-width: 78px;
                    max-height: 22px;
               }

               #payment_methods .pay-label {
                    font-size: .8rem;
                    line-height: 1.2;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
               }
          }

          @media (max-width:360px) {
               #payment_methods .pay-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }

               #payment_methods .pay-label {
                    white-space: normal;
                    overflow-wrap: anywhere;
               }
          }

          #payment_methods .pay-card.is-broken .pay-logo,
          #payment_methods .pay-card.is-broken .pay-svg {
               display: none;
          }

          #payment_methods .pay-card.is-broken .pay-label::after {
               content: " (logo unavailable)";
               font-size: .75em;
               opacity: .65;
          }

          /* ===== Mobile-Only Grid Adjustments ===== */

          /* Services Section: 3 per row on mobile, 2 on very small */
          @media (max-width:640px) {
               .services-hub .sh-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }
          }

          @media (max-width:360px) {
               .services-hub .sh-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* Countries Section: 3 per row on mobile, 2 on very small */
          @media (max-width:640px) {
               #country-smm .country-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }
          }

          @media (max-width:360px) {
               #country-smm .country-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* Free Services Section: 3 per row on mobile, 2 on very small */
          @media (max-width:640px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }
          }

          @media (max-width:360px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* ============================
   MOBILE FIX PACK (≤640px)
   - Keep desktop unchanged
   - Make missed sections compact
   - Ensure names are readable
============================ */
          @media (max-width:640px) {

               /* Grid safety so text can actually shrink/clip correctly */
               .services-hub .sh-grid>*,
               #country-smm .country-grid>*,
               #free-services .services-grid>*,
               #payment_methods .pay-grid>*,
               .blog-section>* {
                    min-width: 0;
               }

               /* Services Section — 3-up & readable names */
               .services-hub .sh-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               .services-hub .svc-chip {
                    padding: 10px;
                    gap: 8px;
                    overflow: hidden;
               }

               .services-hub .svc-name {
                    color: #e5e7eb;
                    font-size: 13px;
                    line-height: 1.25;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
               }

               .services-hub .svc-see {
                    padding: 6px 10px;
                    font-size: 11px;
               }

               /* Countries — 3-up & readable labels */
               #country-smm .country-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               #country-smm .country-link {
                    --card-h: 92px;
                    padding: 10px;
                    gap: 8px;
               }

               #country-smm .flag-img {
                    width: 34px;
               }

               #country-smm .country-link .label {
                    color: #f3f4f6;
                    font-size: 12.5px;
                    line-height: 1.25;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
               }

               /* Free Services — 3-up & readable titles */
               #free-services .services-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               #free-services .srv {
                    padding: 12px;
                    gap: 8px;
               }

               #free-services .srv-title {
                    font-size: 13.5px;
                    line-height: 1.25;
                    margin: 0;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
               }

               #free-services .platform {
                    font-size: 11.5px;
               }

               /* Payment Methods — keep 3-up but make labels visible (2 lines) */
               #payment_methods .pay-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               #payment_methods .pay-card {
                    min-height: 82px;
                    padding: 10px;
               }

               #payment_methods .pay-logo,
               #payment_methods .pay-svg {
                    max-width: 78px;
                    max-height: 22px;
                    object-fit: contain;
               }

               #payment_methods .pay-label {
                    font-size: 12.5px;
                    line-height: 1.2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
               }

               /* Blog tiles / misc cards */
               .blog-section {
                    gap: 10px !important;
               }

               .blog_card,
               .blog-box {
                    padding: 12px !important;
               }

               .blog_card:hover,
               .blog-box:hover {
                    box-shadow: none !important;
                    transform: none !important;
               }

               /* Slightly smaller headings & tighter containers */
               h1 {
                    font-size: clamp(20px, 6.6vw, 26px);
               }

               h2 {
                    font-size: clamp(18px, 5.4vw, 22px);
               }

               h3 {
                    font-size: clamp(16px, 5vw, 19px);
               }

               .container,
               .csmm-wrap,
               .sh-wrapper {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
               }
          }

          /* Ultra-small safety (≤360px): fall back to 2-up for dense grids */
          @media (max-width:360px) {

               .services-hub .sh-grid,
               #country-smm .country-grid,
               #free-services .services-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* =========================================
   ADDITIONAL FINAL UPDATES FOR MOBILE ONLY
   ========================================= */

          /* 1) Free SMM Panel Services Section: 4 per row on mobile */
          @media (max-width:640px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                    gap: 8px !important;
               }

               #free-services .srv-title {
                    font-size: 12px;
                    line-height: 1.2;
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
               }
          }

          @media (max-width:360px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* 2) Services Section Titles visible and readable */
          @media (max-width:640px) {
               .services-hub .svc-name {
                    font-size: 13px;
                    line-height: 1.3;
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    color: #fff;
               }

               .services-hub .svc-chip {
                    align-items: flex-start;
                    padding: 10px;
               }
          }

          /* 3) How Our Panel Works Section smaller on mobile */
          @media (max-width:640px) {
               #how-it-works {
                    padding: 20px 12px !important;
               }

               #how-it-works h2 {
                    font-size: 18px !important;
                    line-height: 1.2;
                    margin-bottom: 10px;
               }

               #how-it-works .step {
                    padding: 10px;
                    font-size: 13px;
                    line-height: 1.3;
               }

               #how-it-works .step-title {
                    font-size: 14px;
                    margin-bottom: 6px;
               }
          }

          /* ===========================
   MOBILE FIX PATCH (≤ 640px)
   - Services: show titles fully + 3-up
   - Free Services: 4-up (then 3/2 on smaller widths)
   - Trim tall sections on mobile
   =========================== */
          @media (max-width:640px) {

               /* Grid safety so text can actually shrink/clip correctly */
               .services-hub .sh-grid>*,
               #country-smm .country-grid>*,
               #free-services .services-grid>*,
               #payment_methods .pay-grid>*,
               .blog-section>* {
                    min-width: 0;
               }

               /* --- SERVICES (tabs grid) --- */
               .services-hub .sh-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               .services-hub .svc-chip {
                    display: grid;
                    grid-template-columns: 1fr auto;
                    align-items: center;
                    gap: 8px;
                    padding: 10px;
                    overflow: hidden;
               }

               .services-hub .svc-chip>* {
                    min-width: 0;
               }

               .services-hub .svc-name {
                    font-size: 13px;
                    line-height: 1.25;
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
               }

               .services-hub .svc-see {
                    padding: 6px 10px;
                    font-size: 11px;
               }

               /* --- FREE SMM PANEL SERVICES --- */
               #free-services .services-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                    gap: 8px !important;
               }

               #free-services .srv {
                    padding: 10px;
                    gap: 6px;
               }

               #free-services .srv-title {
                    font-size: 12px;
                    line-height: 1.25;
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
               }

               #free-services .platform {
                    font-size: 11px;
               }

               #free-services .see-btn {
                    padding: 6px 10px;
                    font-size: 11px;
               }

               /* --- Trim tall sections (titles & spacing) --- */
               h1 {
                    font-size: clamp(20px, 6.6vw, 26px);
               }

               h2 {
                    font-size: clamp(18px, 5.4vw, 22px);
               }

               h3 {
                    font-size: clamp(16px, 5vw, 19px);
               }

               /* “How Our Panel Works” specifically */
               #how-it-works {
                    padding: 20px 12px !important;
               }

               #how-it-works h2 {
                    margin-bottom: 10px;
               }

               #how-it-works .step {
                    padding: 10px;
                    font-size: 13px;
                    line-height: 1.3;
               }

               #how-it-works .step-title {
                    font-size: 14px;
                    margin-bottom: 6px;
               }

               /* Common insights icon list */
               .insight_item {
                    gap: 10px;
               }

               .insight_item .icon img {
                    width: 56px;
                    height: auto;
               }

               /* Containers a bit tighter on mobile */
               .container,
               .csmm-wrap,
               .sh-wrapper {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
               }
          }

          /* Finer breakpoints for Free Services grid */
          @media (max-width:400px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
               }
          }

          @media (max-width:340px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* ========== MOBILE ENFORCER (≤640px) ========== */
          @media (max-width:640px) {

               /* Services hub: 3-up, titles 2 lines */
               .services-hub .sh-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               .services-hub .svc-chip {
                    display: grid !important;
                    grid-template-columns: 1fr auto !important;
                    gap: 8px !important;
                    padding: 10px !important;
                    overflow: hidden;
               }

               .services-hub .svc-chip>* {
                    min-width: 0 !important;
               }

               .services-hub .svc-name {
                    font-size: 13px !important;
                    line-height: 1.25 !important;
                    display: -webkit-box !important;
                    -webkit-box-orient: vertical !important;
                    -webkit-line-clamp: 2 !important;
                    overflow: hidden !important;
                    white-space: normal !important;
               }

               .services-hub .svc-see {
                    padding: 6px 10px !important;
                    font-size: 11px !important;
               }

               /* Make common "free services" lists tighter; CSS-only guess */
               #free-services .services-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                    gap: 8px !important;
               }

               #free-services .srv {
                    padding: 10px !important;
                    gap: 6px !important;
               }

               #free-services .srv-title {
                    font-size: 12px !important;
                    line-height: 1.25 !important;
                    display: -webkit-box !important;
                    -webkit-box-orient: vertical !important;
                    -webkit-line-clamp: 2 !important;
                    overflow: hidden !important;
               }

               /* General text sizing to shorten sections */
               h1 {
                    font-size: clamp(20px, 6.6vw, 26px);
               }

               h2 {
                    font-size: clamp(18px, 5.4vw, 22px);
               }

               h3 {
                    font-size: clamp(16px, 5vw, 19px);
               }

               .container,
               .csmm-wrap,
               .sh-wrapper {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
               }
          }

          /* Under 400px -> 3-up; under 340 -> 2-up for free services */
          @media (max-width:400px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
               }
          }

          @media (max-width:340px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* ===========================
   RULES VISIBILITY FIX PACK
   =========================== */
          #rules,
          .rules,
          .rules-section,
          [id*="rules-section"],
          [id*="panel-rules"] {
               position: relative;
               z-index: 1;
          }

          #rules h1,
          #rules h2,
          #rules h3,
          .rules h1,
          .rules h2,
          .rules h3,
          .rules-section h1,
          .rules-section h2,
          .rules-section h3 {
               margin: 0 0 .6rem;
               line-height: 1.25;
               text-wrap: balance;
          }

          #rules p,
          #rules li,
          #rules div,
          #rules span,
          .rules p,
          .rules li,
          .rules div,
          .rules span,
          .rules-section p,
          .rules-section li,
          .rules-section div,
          .rules-section span {
               max-height: none !important;
               -webkit-line-clamp: unset !important;
               display: block;
               overflow: visible !important;
               white-space: normal !important;
               text-overflow: clip !important;
               word-break: break-word;
               overflow-wrap: anywhere;
               line-height: 1.55;
               color: #e5e7eb;
          }

          #rules ul li,
          #rules ol li,
          .rules ul li,
          .rules ol li,
          .rules-section ul li,
          .rules-section ol li {
               margin: .4rem 0;
               padding-left: .25rem;
          }

          #rules p,
          .rules p,
          .rules-section p {
               margin: .6rem 0;
          }

          #rules,
          .rules,
          .rules-section {
               padding-bottom: calc(env(safe-area-inset-bottom, 0) + 88px);
          }

          #rules .accordion-content,
          .rules .accordion-content,
          .rules-section .accordion-content,
          #rules .collapse,
          .rules .collapse,
          .rules-section .collapse {
               max-height: none !important;
               height: auto !important;
               overflow: visible !important;
               opacity: 1 !important;
               visibility: visible !important;
          }

          @media (max-width:640px) {

               #rules,
               .rules,
               .rules-section {
                    padding-left: 12px;
                    padding-right: 12px;
               }

               #rules h1 {
                    font-size: clamp(20px, 6vw, 26px);
               }

               #rules h2 {
                    font-size: clamp(18px, 5.2vw, 22px);
               }

               #rules h3 {
                    font-size: clamp(16px, 4.8vw, 19px);
               }

               body:has(#rules) {
                    padding-bottom: 90px;
               }
          }

          #rules [class*="fade"]:after,
          .rules [class*="fade"]:after,
          .rules-section [class*="fade"]:after {
               content: none !important;
               display: none !important;
          }

          /* ===== Assistant Mobile Overrides (forceful, desktop untouched) ===== */
          @media (max-width:640px) {

               /* Ensure grid children can shrink */
               .services-hub .sh-grid>*,
               #free-services .services-grid>*,
               #payment_methods .pay-grid>*,
               #country-smm .country-grid>*,
               .blog-section>* {
                    min-width: 0 !important;
               }

               /* Generic small padding and text sizes */
               h1 {
                    font-size: clamp(20px, 6.6vw, 26px);
               }

               h2 {
                    font-size: clamp(18px, 5.4vw, 22px);
               }

               h3 {
                    font-size: clamp(16px, 5vw, 19px);
               }

               .container,
               .csmm-wrap,
               .sh-wrapper {
                    padding-left: 12px !important;
                    padding-right: 12px !important;
               }

               /* Payment methods (keep at 3-up) */
               #payment_methods .pay-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                    gap: 10px !important;
               }

               #payment_methods .pay-card {
                    min-height: 82px !important;
                    padding: 10px !important;
               }

               #payment_methods .pay-logo,
               #payment_methods .pay-svg {
                    max-width: 78px !important;
                    max-height: 22px !important;
               }

               #payment_methods .pay-label {
                    font-size: 12.5px !important;
                    line-height: 1.2 !important;
                    display: -webkit-box !important;
                    -webkit-box-orient: vertical !important;
                    -webkit-line-clamp: 2 !important;
                    overflow: hidden !important;
                    white-space: normal !important;
               }
          }

          /* Free services fallback grid widths for very small phones */
          @media (max-width:400px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
               }
          }

          @media (max-width:340px) {
               #free-services .services-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
               }
          }

          /* Rules: disable clamping/overflow universally */
          #rules,
          .rules,
          .rules-section,
          [id*="rules"] {
               position: relative;
               z-index: 1;
          }

          #rules *,
          .rules *,
          .rules-section * {
               max-height: none !important;
               -webkit-line-clamp: unset !important;
               overflow: visible !important;
               text-overflow: clip !important;
               white-space: normal !important;
          }

.icon::before {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
}
.blog-box-header .icon {
	display: inline-grid !important;
	place-items: center !important;
}
.navbar-login .navbar-nav .nav-item .nav-link {
	font-size: 17px !important;
}
.tab-content > .active {
	opacity: 1;
}
.signup #banner .row::before, 
.signup #banner .row::after,
.signup #banner .container::before, 
.signup #banner .container::after {
	display: none;
}
.pagination li a {
	border: 0 !important;
	border-radius: 7px !important;
	display: flex;
	justify-content: center;
	align-items: center;
}
.offcanvas.show {
	display: flex !important;
}
.mobile_nav_menu .navbar-nav {
	margin: 0 !important;
}
.mobile_nav_menu .navbar-nav > li > a {
	padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
	line-height: unset;
}
.unauthorized {
	padding-bottom: 0 !important;
}
.unauthorized #about_us {
	padding-bottom: 0;
}
.unauthorized .paddingbody {
	display: none;
}
@media (max-width:550px) {
  .unauthorized .logo_navbar .panel_icon_class {
      max-width: 100px;
  }
  .unauthorized .navbar-brand {
      height: auto;
  }
}