/*
*
* Theme : Growfollows Version 4
* Theme Author: Growfollows Dev. Team
* Coded By : Yunus A. Polash
* Email: yunus.a.polash@gmail.com
* whatsapp: +8801303260848
* Website: www.fexpink.com
*
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: static;
}

:root {
  --primary-color: #e95fff;
  --primary-font: "Poppins", sans-serif;
  --gotham-font: "Gotham", sans-serif;
  --primary-gradient: linear-gradient(96deg, #d338ec 0%, #7516a9 100%);
  --white: #ffffff;
  --dark-card-bg: #1e1823;
  --dark-bg: #100c13;
  --dark-input-bg: rgba(255, 255, 255, 0.04);
  --dark-menu-item-bg: rgba(255, 255, 255, 0.08);
  --dark-icon-bg: rgba(255, 255, 255, 0.03);
  --dark-border-color: #372e3f;
  --hero-banner-bg: linear-gradient(rgba(23, 17, 27, 0.8),
      rgba(23, 17, 27, 0.8));
  --hero-card-bg: rgba(255, 255, 255, 0.04);
  --social-bar: #1e1823;
  --order-background: #17111b;
  --submit-button-bg: linear-gradient(96.06deg, #d338ec 0%, #7516a9 100%);
  --service-paragraph-color: rgba(195, 194, 195, 1);
  --box-bg: #ffffff0a;
  --details-button-bg: linear-gradient(96.06deg, #d338ec 0%, #7516a9 100%);
  --list-border: rgba(36, 29, 43, 1);
  --massOrder-button-bg: linear-gradient(176.54deg,
      rgba(211, 56, 236, 0.43) 2.83%,
      rgba(114, 24, 163, 0) 97.13%);
  --mass-box-bg: rgba(255, 255, 255, 0.03);
  --menu-bg: rgba(30, 24, 35, 0.7);
  --dark-border-color: rgba(108, 62, 124, 1);
  --accordion_bg: rgba(255, 255, 255, 0.03);
  --accordion-border-color: linear-gradient(180deg,
      rgba(255, 255, 255, 0.4) -20.37%,
      rgba(53, 38, 55, 0) 100%);
  --update-btn-green: rgba(34, 82, 26, 0.3);
  --update-btn-red: rgba(96, 26, 26, 0.3);
  --play-button-border: linear-gradient(180deg,
      rgba(255, 255, 255, 0.4) -20.37%,
      rgba(53, 38, 55, 0) 100%);
}

body#g_follow {
  font-family: var(--primary-font);
  background-color: var(--dark-bg);
  min-height: 100vh;
  color: #fff;
}

body#g_auth {
  font-family: var(--primary-font);
  background: var(--dark-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

header {
  background: var(--dark-card-bg);
}

.hidden {
  display: none;
}

header .top_navigations_menu {
  display: flex;
  justify-content: space-between;
  padding: 12px 0px;
  align-items: center;
  border-bottom: 2px dashed var(--dark-border-color);
}

header .top_navigations_menu .top_right {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* mobile menu  */
.mobile_menu_wrapper {
  display: none;
}

.top_navigations_menu .top_right .currency-menu button {
  height: 45px;
  font-family: var(--primary-font);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  background: var(--dark-menu-item-bg);
  border-color: var(--dark-border-color);
}

.top_navigations_menu .top_right .currency-menu button .icon {
  line-height: 0.8;
  font-size: 20px;
}

header .top_navigations_menu .top_right .user__menu {
  display: flex;
  gap: 10px;
}

.top_right .user__menu .user_menu_item {
  width: 45px;
  height: 45px;
  display: flex;
  background: var(--dark-menu-item-bg);
  border-radius: 50px;
  align-items: center;
  justify-content: center;
  transition: background 0.5s ease-in-out;
}

.top_right .user__menu .user_menu_item .icon {
  color: var(--white);
  font-size: 28px;
  line-height: 0;
}

.top_right .user__menu .user_menu_item .icon.logout_icon {
  transform: rotate(180deg);
}

.top_right .user__menu .user_menu_item:hover {
  background: var(--primary-gradient);
}

.dropdown-menu {
  background: var(--dark-card-bg);
  border-color: var(--dark-border-color);
  border-radius: 10px;
}

.dropdown-menu li a.active,
.dropdown-menu li a:hover {
  background: var(--primary-gradient);
}

.bottom_user_nav {
  padding: 24px 0px;
}

.bottom_user_nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 10px;
}

.bottom_user_nav .nav_item .nav-link {
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  background: var(--dark-menu-item-bg);
  width: 100%;
  padding: 15px 20px;
  border-radius: 10px;
  border: 1px solid #4a3a57;
  min-height: 55px;
  transition: background 0.5s;
}

.bottom_user_nav .nav_item .nav-link.active,
.bottom_user_nav .nav_item .nav-link:hover {
  border: none;
  background: var(--primary-gradient);
}

/* hero section col size set  */
.col-custom-3-5 {
  flex: 0 0 37.1%;
  /* 3.5 columns equivalent */
  max-width: 37.1%;
}

.col-custom-4-5 {
  flex: 0 0 34.33%;
  /* 4.5 columns equivalent */
  max-width: 34.33%;
}

.hero_left {
  height: 182px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 360px;
  padding: 0;
  margin-top: 20px;
  gap: 10px;
}

.hero_left .heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 32.4px;
}

.hero_left .heading .heading_label {
  color: #d338ec;
}

#hero-banner>.container {
  background: url("../images/rkaqb1jspeemtbsz.png"),
    radial-gradient(168.5% 121.04% at -13.71% 115.6%, #2b2133 0%, #0c0a0d 100%);
  border: 1px solid #231a29;
  border-radius: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 20px 40px;
  box-sizing: border-box;
  height: 253px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

#hero-banner p {
  font-size: 16px;
  line-height: 25.6px;
  color: #9a90a2;
}

div#hero-pay {
  width: 302px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.hero_pay_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  place-items: baseline;
  height: 30px;
}

.hero_pay_content p {
  margin-left: 10px;
}

.hero_pay_left h3,
.hero_pay_right h3 {
  font-size: 18px;
  line-height: 24.3px;
  font-weight: 500;
}

.pay_line {
  width: 1px;
  height: 46px;
  background: #d338ec;
}

/* Hero Middle section  */
.hero_middle h2 {
  font-size: 18px;
  line-height: 25.2px;
  margin-top: 6px;
}

.hero_right {
  padding: 0;
}

.hero_right_card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.hero_right_card_one,
.hero_right_card_Two {
  width: 190.5px;
  height: 205px;
  border-radius: 20px;
  background: var(--hero-card-bg);
  /* Apply opacity to the background */
  padding: 28px 30px;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.hero_right_card_one {
  padding: 38px 30px;
}

.card_img {
  width: 60px;
  height: 60px;
  font-size: 30px;
  line-height: 0;
  background: #2c2432;
  text-align: center;
  border-radius: 50%;
}

.card_img {
  width: 60px;
  height: 60px;
  background: #2c2432;
  text-align: center;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero_right_card_one h3,
.hero_right_card_Two h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 25.2px;
  color: #d338ec;
  margin-top: 15px;
}

.hero_right_card_one p {
  font-size: 12px;
  font-weight: 400;
  line-height: 19.2px;
}

.card_two_para {
  font-size: 12px;
  line-height: 19.2px;
  font-weight: 400;
  margin: 0;
}

/* social bar  */
#socialMediaFilter {
  background-color: var(--social-bar);
  width: full;
  height: auto;
  border-radius: 15px;
  padding: 0 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}


#socialMediaFilter .btn_service_filter {
  color: var(--white);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  padding: 0;
  border: 0;
  margin: 10px 0;
}

#socialMediaFilter .btn_service_filter.activeItem .icon{
  color: var(--primary-color);
}

#socialMediaFilter .btn_service_filter .icon {
  pointer-events: none;
  font-size: 35px;
  line-height: 0;
}

/* order form  */
.order-section,
.massOrder-section,
.addFund-section {
  margin: 20px 0px;
}

#order_sec {
  padding: 0;
}

#order_sec_left {
  padding-left: 2px;
}

section#order .ticket_select {
  display: none;
}

.order-form,
.ticket_order_form,
.mass-order-form {
  height: 747px;
  background: var(--order-background);
  border-radius: 20px;
  padding: 0;
}

.ticket_order_form {
  height: auto;
}

.mass-order-form {
  height: 558px;
}

.service-details,
.massOrder-details {
  height: 873px;
  background-color: var(--order-background);
  border-radius: 20px;
  padding: 0;
}

.massOrder-details {
  height: 666px;
}

/* new order  */

.order_head,
.service_head,
.massOrder_head {
  width: 100%;
  height: 103px;
  background: #1e1823;
  border-radius: 20px 20px 0px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card.card_type_2,
.card.card_type_1 {
  background: none;
  border: none;
}

#g_auth .modal-content {
  border: none;
  background: none;
}

#g_auth .modal-header,
.card.card_type_1 .card-header {
  background: #1e1823;
  padding: 20px 15px;
  border-radius: 20px 20px 0px 0px;
  border-bottom: none;
}

#g_auth .modal-body,
.card.card_type_2 .card-body,
.card.card_type_1 .card-body {
  border-radius: 0px 0px 10px 10px;
  padding: 15px 30px;
  background: #17111B;
}


.card.card_type_2 .card-body {
  border-radius: 20px;
  padding: 30px;
}

select.form-control,
.form-control {
  font-size: 16px;
  border: 1.5px solid #2C2531;
  background-color: rgba(255, 255, 255, 0.03);
  height: 45px;
  outline: none !important;
}

.form-control:disabled {
  background-color: #801ab114;
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.05);
}

label {
  color: var(--white);
  font-size: 16px;
  margin-bottom: 7px;
}


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

.select2-container--default .select2-selection--single {
  padding: 10px 10px !important;
}
.select2-results__option a{
  color: var(--white)!important;
}
.select2-container .select2-selection__text {
  color: var(--white)
}

.help-block.min-max {
  font-size: 14px;
  color: var(--primary-color);
}

.select2-container .badge {
  background: var(--primary-color);
}

.order_menu_bar,
.service_menu_bar,
.massOrder_menu_bar,
.transaction_menu_bar {
  border-bottom: 1px solid #483954;
  width: 531px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.newOrder,
.massOrder,
.favourite,
.service,
.contact_btn,
.massOrder,
.massOrder_btn {
  position: relative;
  width: 163px;
  height: 55px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 0%;
}

.ticketOrder_btn {
  width: 31%;
}

.newOrder::after,
.service::after,
.massOrder_btn::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #d338ec;
  border-radius: 50px;
}

.massOrder_btn::after {
  height: 3px;
}

.newOrder h2,
.massOrder h2,
.favourite h2,
.service h2,
.contact_btn h2,
.massOrder_btn h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
  margin-left: 8px;
}

.newOrder img .favourite img {
  height: 24px;
  width: 29px;
}

.service img {
  height: auto;
  width: 24px;
}

.contact_btn img {
  width: 24px;
  height: 18px;
}

/* order input  */
.order_form,
.massOrder_form,
.service_wrapper,
.massOrder_wrapper {
  display: flex;
  justify-content: center;
  padding: 15px 51px;
  width: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.massOrder_wrapper {
  align-items: flex-start;
}


/* .order_input,
.ticket_order_input,
.order_input_blank,
.ticket_order_input_blank { */
#g_auth .form-group {
  margin-bottom: 1.2rem;
}

#g_auth .form-group #g_auth .form-control {
  position: relative;
  display: flex;
  align-items: center;
  height: 45px;
  width: 100%;
  padding: 5px 10px;
  margin: 5px 0px;
  border: 1px solid #372e3f !important;
  background-color: #ffffff0a !important;
}

.search-dropdown .input-wrapper input {
  padding-left: 33px !important;
}

/* 
.order_input_blank,
.massOrder_input_blank,
.ticketOrder_input_blank {
  width: 100%;
  margin: 10px 0px;
  display: block;
} */

#g_auth textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #372e3f;
  background-color: #ffffff0a;
  outline: none;
}

#g_auth textarea {
  height: 350px;
}

#upload_box {
  position: relative;
}

img#file_upload_icon {
  position: absolute;
  top: 17px;
  left: 15px;
}

input[type="file"]::file-selector-button {
  display: none;
}

input#ticket_upload {
  padding-left: 45px;
  padding-top: 15px;
}

.massOrder_input_blank textarea {
  height: 296px;
  padding: 15px;
}

.ticketOrder_input_blank textarea {
  height: 166px;
  padding: 15px;
}

.order_input .search_icon,
.select_icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

.select_icon {
  position: absolute;
  pointer-events: none;
}

.ticket_search_icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}

.order_select,
.ticket_select {
  width: 100%;
  height: 55px;
  border-radius: 8px;
  border: 1px solid #372e3f;
  padding-left: 40px;
  padding-right: 30px;
  background-color: #ffffff0a;
  color: white;
  font-size: 16px;
}

.ticket_select {
  padding: 0px 15px;
}

.category-select,
.massOrder_title {
  width: 531px;
  margin-top: 5px;
}

.massOrder_title {
  margin-top: 0px;
}

.category-select label,
.massOrder_title label {
  font-size: 16px;
  color: #9a90a2;
  font-weight: 400;
}

.condition_order p {
  font-size: 14px;
  font-weight: 400;
  margin-top: 6px;
  margin-bottom: 0;
}

#g_auth .btn-primary,
.submit_button {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  background: var(--submit-button-bg);
  outline: none;
  border: none;
  margin: 10px 0px;
}

/* service section  */
.service_name,
.ticket_history,
.service_link,
.service_meter_box,
.service_description {
  width: 100%;
  height: auto;
  background-color: #ffffff0a;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #372e3f;
  margin-bottom: 10px;
  transition: 0.5s ease;
}

.ticket_history.unread_ticket {
  animation: blinkunread 3s infinite;
}

@keyframes blinkunread {
  0% {
    background-color: #ffffff0a;
    border-color: #372e3f;
  }

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

  100% {
    background-color: #ffffff0a;
    border-color: #372e3f;
  }
}

.ticket_history:hover {
  border-color: var(--primary-color);
  box-shadow: 0px 0px 8px 0px #9c27b094;
}

.service_meter_box {
  width: 50%;
}

.service_name h2,
.service_link h2 {
  font-size: 18px;
  font-weight: 500;
  line-height: 28.8px;
}

.service_name p,
.service_link p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--service-paragraph-color);
}

.service_meter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  /* align-items: center; */
}

.service_meter_box {
  width: 49%;
  height: auto;
}

.service_meter_box h2,
.service_description h2 {
  font-size: 16px;
  font-weight: 500;
  color: #c3c2c3;
}

.service_meter_box p,
.service_description p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
  margin-top: 5px;
  line-height: 25.6px;
}

.service_description {
  width: 100%;
  height: 290px;
}

/* service page css  */
section#service_filter {
  margin: 11px 0px;
}

.service_filter_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 784px;
  height: auto;
}

.filter {
  width: 49.5%;
}

input.search,
.selectService {
  width: 100%;
  padding: 0px 16px 0px 16px;
  height: 55px;
  border-radius: 8px;
  background: #302a34;
  border: none;
}

.service_list_heading,
.order_list_heading,
.update_list_heading,
.affiliates_list_heading,
.service_list,
.order_list,
.update_list,
.update_List,
.affiliate_list {
  width: 100%;
  height: 66px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px 20px 0px 0px;
  padding: 0px 30px;
}

.order_list_heading,
.update_list_heading {
  border: 1px solid var(--list-border);
}

.service_list_heading,
.order_list_heading,
.update_list_heading,
.affiliates_list_heading {
  background-color: var(--social-bar);
}

.service_list,
.order_list,
.update_list {
  border-radius: 0;
  padding: 15px 30px;
  height: auto;
  border-bottom: 1px solid var(--list-border);
}

.sl {
  width: 6%;
}

.title {
  width: 30%;
}

.rate {
  width: 8%;
}

.min_max {
  width: 8%;
}

.refill {
  width: 10%;
}

.time {
  width: 12%;
}

.desc {
  width: 12%;
}

.shop_logo {
  width: 5%;
}

.service_list_heading h4,
.order_list_heading h4,
.update_list_heading h4,
.affiliates_list_heading h4,
.service_list h4 {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
}

.service_list h4,
.order_list h4,
.update_list h4,
.affiliate_list h4 {
  font-size: 14px;
  font-weight: 400;
}

.order_list h4 a{
  word-wrap: break-word;
  display: block;
}

.service_list_title {
  background: #251f2a;
  width: 100%;
  height: 58px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.server_title_wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.server_title_wrapper img {
  width: 15px;
  height: 15px;
}

.server_title_wrapper p {
  padding: 0;
  margin: 0;
  margin-left: 10px;
}

.logo_wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c2432;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: 0.5s ease;
}

.logo_wrap:hover {
  background: var(--primary-gradient);
}

.service_list .sl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.service_list h4 {
  margin: 0;
  padding: 0;
}

.title h4 {
  width: 75%;
}

.refill button,
.order .re_order_btn {
  display: inline-block;
  width: 95px;
  height: 42px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  line-height: 42px;
  color: var(--white);
}

.order .re_order_btn {
  width: 105px;
  padding: 0px 20px;
}

.desc button,
.order_refill button {
  width: 100px;
  height: 42px;
  /* padding: 10px 26px 10px 26px; */
  border-radius: 8px;
  border: none;
  background: var(--details-button-bg);
}

.order_status button {
  width: 126px;
  height: 42px;
  /* padding: 10px 26px 10px 26px; */
  border-radius: 8px;
  border: none;
  background: #ec38c4;
}

#service_List_Wrapper,
#order_list_wrapper,
#update_list_wrapper {
  width: 100%;
  height: auto;
  padding: 0px;
  padding-bottom: 80px;
  background: -dar;
  border-radius: 20px;
  background-color: var(--order-background);
}

.sl h4 {
  margin-left: 10px;
}

/* service css close  */

/* Oder Filter  */
.selectOrder {
  display: none;
}

button.order_btn,
button.ticketOrder_btn,
.update_btn {
  padding: 11px 20px 11px 20px;
  border: none;
  background: none;
}

button.order_btn_active,
.update_btn_active {
  background: #372e3f;
  border-radius: 5px;
}

div#order_filter,
.ticketOrder_filter,
#update_filter {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 15px 0px;
}

#ticketOrder_filter {
  width: 100%;
  padding: 10px 10px;
}

.order_filter_btn,
.ticketOrder_filter_btn,
.update_filter_btn {
  width: auto;
  height: auto;
  display: flex;
  gap: 10px;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--list-border);
  background-color: var(--box-bg);
  border-radius: 8px;
  padding: 10px 12px;
}

.order_filter_btn{
  justify-content: space-between;
}

.order_filter_btn .order_btn {
  width: auto;
  min-width: 120px;
  text-align: center;
  color: var(--white);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px soild transparent;
}
.order_filter_btn .order_btn.order_btn_active,
.order_filter_btn .order_btn:hover{
  background: #42364C;
}

.ticketOrder_filter_btn {
  width: 100%;
}

.update_filter_btn {
  width: 70%;
}

.order_search {
  width: 23%;
  position: relative;
}

.order_search input {
  width: 300px;
  height: 45px;
  border: none;
  border: 1px solid var(--list-border);
  background-color: var(--box-bg);
  border-radius: 8px;
  padding: 0px 10px;
  max-width: 100%;
}

img.search_icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
}

.order_sl {
  display: grid;
  grid-template-columns: auto auto;
  /* Create two columns */
  align-items: center;
  /* Vertically center the content */
  gap: 10px;
  /* Add some space between the number and the image */
  width: 5%;
}

.order_date {
  width: 8%;
}

.order_date {
  width: 8%;
}

.order_link {
  width: 16%;
}

.order_charge {
  width: 5%;
}

.order_count {
  width: 8%;
}

.order_quantity {
  width: 6%;
}

.order_service {
  width: 11%;
}

.order_refill {
  width: 10%;
}

.order_remain {
  width: 6%;
}

.order_status {
  width: 11%;
}

.order {
  width: 8%;
}

.order_completed button {
  background-color: #19ab1e;
}

.order_processing button {
  background-color: #1f97bb;
}

.badges_partials button {
  background-color: #ff5252;
}
.order_canceled button {
  background-color: #d11c1c;
}

.order_progressing button {
  background-color: #d4a11f;
}

/* update page  */

.update_service {
  width: 55%;
}

.update_date {
  width: 15%;
}

.update {
  width: 30%;
}

.update_alert,
.update_alert_accept {
  max-width: 264px;
  height: 35px;
  border-radius: 8px;
  background-color: var(--update-btn-red);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(70, 29, 29, 1);
}

.update_alert_accept {
  background-color: var(--update-btn-green);
  border: 1px solid rgba(28, 63, 36, 1);
}

.update_alert h4,
.update_alert_accept h4 {
  font-size: 12px;
}

.update_service label {
  color: #d338ec;
}

/* Mass Order page  */
.massOrder_btn {
  background: var(--massOrder-button-bg);
  border-radius: 8px 8px 0px 0px;
}

.massOrder_btn img {
  height: 17px;
  width: 20px;
  margin-top: 5px;
}

.massOrder_question,
.faq_head {
  width: 100%;
  padding: 0px 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}

.mass_icon_box {
  width: 72px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--mass-box-bg);
  border-radius: 8px;
  border: 1px solid #372e3f;
  margin-right: 15px;
}

.massOrder_question h2,
.faq_head h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
}

.massOrder_wrapper p {
  font-size: 16px;
  margin-bottom: 10px;
}

label.mass_question_link {
  color: #d338ec;
  font-size: 16px;
  margin-bottom: 7px;
}

.massOrder_wrapper ul {
  padding-left: 15px;
}

.massOrder_wrapper ul li {
  margin: 10px 0px;
}

/* Account Page  */
section#account {
  padding: 35px 0px;
}

div#account_card {
  max-width: 630px;
  height: auto;
  background: var(--dark-card-bg);
  padding: 40px;
  border-radius: 20px;
}

div#account_card h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30.8px;
  margin-bottom: 10px;
}

div#account_card p {
  font-size: 16px;
  font-weight: 400;
  color: #c3c2c3;
}

.account_input {
  width: 100%;
}

.account_input input,
.account_input select {
  width: 100%;
  background: none;
  border: 1px solid var(--dark-border-color);
  padding: 16px;
  border-radius: 8px;
}

.account_input h5 {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  margin-bottom: 10px;
}

button.account_btn {
  /* width: 135px;
  height: 51px; */
  padding: 16px 40px;
  border: none;
  background: var(--primary-gradient);
  border-radius: 10px;
  margin-top: 30px;
}

/* Time Zone Setting Card  */
.time_zone_card {
  margin: 20px 0px;
}

/* api key setup  */

div#pass_input_box {
  position: relative;
}

img.copy-icon {
  position: absolute;
  top: 16px;
  right: 12px;
}

.alert_msg {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 353px;
  margin-top: 10px;
}

.alert_msg p {
  font-size: 14px !important;
  margin: 0;
  margin-left: 8px;
}

div#pass_recovery {
  margin: 15px 0px;
}

.account_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.account_info h5 {
  font-size: 16px;
}

h5.inputTitle {
  color: #c3c2c3;
}

div#account_up_sec {
  border-bottom: 1px solid #241d2b;
  padding-bottom: 15px;
}

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

.edit_pen_icon {
  margin-left: 10px;
}

/* Ticket Page  */
.ticket_link>* {
  color: var(--white);
}

.ticket_icon {
  min-width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #312b36;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ticket_icon img {
  min-width: 25px;
  height: 20px;
}

.ticket_status h4 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.ticket_transaction_details {
  width: 28%;
}

.ticket_transaction_details p {
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
  direction: rtl;
}

.ticket_history {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Fund Page  */
.instruction p {
  font-size: 16px;
  color: #c3c2c3;
  margin-bottom: 8px;
}

.fund_heading {
  font-size: 18px;
  line-height: 28.8px;
  font-weight: 500;
  color: #ffff;
}

#add_fund_info {
  color: #c3c2c3;
}

.transaction_menu_bar {
  justify-content: flex-start;
}

#transaction_btn {
  margin-left: 10px;
}

/* FAQ Section  */
section.faq {
  margin: 20px 0px;
  width: 100%;
  height: auto;
}

#faq_wrapper {
  background-image: url(../images/back_img.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#faq_wrapper,
#faq_wrapper_childpanel {
  background-color: var(--dark-card-bg);
  height: auto;
  border-radius: 20px;
  padding-bottom: 60px;
}

#faq_wrapper_childpanel {
  padding: 0;
}

.faq_accordion,
.faq_accordion_childpanel {
  padding: 20px 55px;
}

.faq_accordion_childpanel {
  padding: 30px 55px;
}

.accordion_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border: 1.5px solid var(--accordion-border-color);
  border-radius: 10px;
  background-color: var(--accordion_bg);
  margin-bottom: 10px;
}

select {
  padding-right: 35px;
  /* Moves text left, arrow appears to move right */
  width: 200px;
  /* Adjust as needed */
}

.accordion_head h2,
.accordion_body_head h2 {
  font-size: 18px;
  color: #c3c2c3;
  font-weight: 500;
}

.accordion_body_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.accordion_body {
  margin: 10px 0px;
  padding: 20px 24px;
  border-radius: 10px;
  border: 1.5px solid var(--accordion-border-color);
  background-color: var(--accordion_bg);
}

.accordion_body_data p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  margin-bottom: 5px;
  color: #c3c2c3;
}

/* Affiliate Page  */
.affiliates_list_heading {
  padding: 0px 60px;
}

.ref_link {
  width: 35%;
}

.com_rate {
  width: 20%;
}

.payout {
  width: 20%;
}

.affiliate_list {
  padding: 0px 60px;
  border-bottom: 1px solid var(--list-border);
  font-size: 14px;
}

.hero_heading {
  width: 57%;
  margin: auto;
  text-align: center;
}

section#hero_heading {
  margin-top: 40px;
  margin-bottom: 20px;
}

.hero_heading p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
}

.hero_title h4 {
  font-size: 22px;
  line-height: 30.8px;
}

.hero_title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 236px;
  align-items: center;
  margin: auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

.visit {
  width: 10%;
}

.reg {
  width: 15%;
}

.referral {
  width: 15%;
}

.conv_rate {
  width: 15%;
}

.total_earn {
  width: 15%;
}

.avail_earn {
  width: 15%;
}

/* term box  */
div#term_boxs_wrapper {
  background: #17111b;

  border-radius: 20px;
  padding: 0;
}

.term_box,
.term_box_bottom {
  padding: 40px 60px;
  border-bottom: 1px solid #241d2b;
}

.term_box_bottom {
  border: none;
}

#term_condition {
  margin-top: 40px;
  padding-bottom: 60px;
}

.term_box h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30.8px;
}

.term_details_box {
  margin-top: 15px;
  max-width: 956px;
  color: #c3c2c3;
}

.term_details_box p {
  font-size: 16px;
  font-weight: 400;
}

.term_details_box ul li {
  margin: 15px 0px;
}

.term_details_box ul {
  padding: 0px 22px;
}

/* child panel page  */
#video_player {
  margin: 30px 0px;
}

.video_box_wrapper {
  max-width: 1000px;
  height: 533px;
  background: #ffffff1c;
  margin: auto;
  border-radius: 20px;
  position: relative;
  /* display: inline-block; */
}

.video_box_wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(101, 83, 115, 1);
  /* Semi-transparent green */
  z-index: 1;
  /* Ensures it is above the image */
  pointer-events: none;
  /* Allows clicking through the overlay */
  border-radius: 20px;
  opacity: 0.6;
}

.video_box_wrapper img {
  width: 100%;
  /* Make the image responsive */
  display: block;
  height: 100%;
  /* Removes any inline spacing */
}

.play_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 101px;
  background: rgba(14, 15, 17, 0.06);
  border-radius: 100%;
  border: 2px solid var(--play-button-border);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  z-index: 333;
  padding: 27px;
}

.step_content_wrapper {
  display: flex;
  padding: 55px 30px;
  justify-content: flex-start;
  align-items: center;
}

.step_text {
  margin-left: 15px;
}

.step_text h3 {
  font-size: 24px;
  font-weight: 500;
  color: #d338ec;
}

.step_text p {
  color: #9a90a2;
  font-size: 14px;
  font-weight: 400;
  margin-top: 7px;
}

.step_img {
  width: 60px;
  height: 60px;
  background: #2c2432;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

div#step_box {
  /* width: 100%; */
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
}

.dotted_line {
  border-right: 1px dashed #583366;
  width: 1px;
  height: 60px;
}

div#step_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#step_box {
  background: rgba(255, 255, 255, 0.04);
}

section#description {
  margin: 30px 0px;
}

.description p {
  font-size: 16px;
  font-weight: 400;
  max-width: 1026px;
}

/* form  */
.form_card {
  width: 100%;
  height: 530px;
  background: var(--order-background);
  border-radius: 20px;
  padding: 50px 60px;
}

.input_box {
  width: 100%;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid #6c3e7c;
  height: 51px;
  margin-bottom: 10px;
}

.input_wrap_box label {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  color: #c3c2c3;
}

.box_text_content p {
  font-size: 14px;

  color: #c3c2c3;
}

.box_text_content {
  width: 80%;
  margin-bottom: 65px;
  margin-top: 10px;
}

.box_text_bottom {
  margin: 0;
}

.box_text_content ul {
  margin-top: 15px;
  padding: 0px 17px;
}

.box_text_content ul li {
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
}

button.submit_btn {
  width: 186px;
  height: 51px;
  padding: 10px 31px;
  border: none;
  border-radius: 10px;
  margin-top: 10px;
  background: var(--submit-button-bg);
}

/* Dashboard page  */
#dashboard_card {
  margin-top: 40px;
}

.card_wrapper,
.card_wrapper_next {
  width: 100%;
  height: auto;
  background: #17111b;
  border-radius: 20px;
  padding-bottom: 40px;
  margin-bottom: 20px;
}

.card_wrapper_next {
  padding-bottom: 20px;
}

.card_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #1e1823;
  height: 65px;
  align-items: center;
  padding: 0px 30px;
  border-radius: 20px 20px 0px 0px;
}

.card_wrapper h4,
.card_wrapper_next h4 {
  font-size: 16px;
  font-weight: 400;
}

.card_title {
  width: 70%;
}

.card_number {
  width: 30%;
  text-align: right;
}

.card_body,
.card_body_next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #241d2b;
}

.card_body_next {
  border: none;
}

.card_body h4,
.card_body_next h4 {
  font-size: 14px;
  font-weight: 400;
}

.card_body .card_number h4 {
  color: #d338ec;
}

.next_title {
  width: 50%;
}

.next_title h4 {
  line-height: 20px;
  color: #c3c2c3;
}

.you_title {
  width: 50%;
}

.you_number {
  width: 50%;
  text-align: right;
}

.card_name {
  width: 30%;
}

.card_new,
.card_junior,
.frequent,
.elite,
.vip,
.master {
  width: 11%;
}

.dotted_card {
  width: 25px;
  height: 3px;
  background: #646067;
  border-radius: 40px;
}

.note_content {
  padding: 30px;
}

.note_head {
  margin: 15px 0px;
}

.details p {
  margin: 13px 0px;
  color: #c3c2c3;
}

/* update page  */
.card_box_wrapper {
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: var(--order-background);
  padding: 30px 70px;
  margin: 25px 0px;
}

.card_box_wrapper h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
}

.apibox_wrapper h3 {
  margin: 20px 0px;
}

.apibox_wrapper h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 30.8px;
}

.api_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0px;
  border-bottom: 1px solid #241d2b;
}

.api_content h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
}

.api_card_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #1e1823;
  height: 65px;
  align-items: center;
  padding: 0px 30px;
}

.tag {
  width: 50%;
}

.description_title {
  width: 50%;
}

.tag_btn h4 {
  padding: 5px 10px;
  background: #251f2a;
  display: inline;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
}

.tag_btn {
  margin-left: 15px;
}

.example_box h3 {
  font-size: 20px;
  margin: 20px 0;
}

.example_box {
  width: 100%;
  height: auto;
}

.example_box img {
  max-width: 671px;
  height: auto;
  width: 100%;
}

.api_content_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api_content_flex img {
  margin-left: 10px;
}

.order_select_btn {
  display: none;
}

div#banner_layout {
  display: flex;
  justify-content: space-between;
}

.hero_middle {
  margin: auto;
  text-align: center;
}

/***************************** home page css *******************************/
.bg-image {
  background-image: url(../images/hero-banner-image.webp);
  float: left;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  background-attachment: fixed;
}

.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

.no-blur {
  position: relative;
}

.no-blur::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #100c137a;
  mix-blend-mode: hard-light;
  /* For Safari compatibility */
}

.bg-image::after {
  background: #291f31;
  mix-blend-mode: hard-light;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.custom-sign-btn {
  font-family: "Poppins";
  border-radius: 10px;
  font-size: 16px;
  background: var(--Button, linear-gradient(96deg, #d338ec 0%, #7516a9 100%));
  display: flex;
  padding: 10px 25px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  text-decoration: none;
  color: var(--white);
  transition: background-position 0.8s ease;
  border: none;
}

.custom-sign-btn:hover {
  background: var(--Button, linear-gradient(96deg, #7516a9 0%, #d338ec 100%));
}

.hover-border {
  position: relative;
}

.hover-border::after {
  content: "";
  position: absolute;
  width: 0;
  opacity: 0;
  height: 2px;
  background: linear-gradient(271deg, #7815f8 23.71%, #a84eff 99.16%);
  bottom: 0;
  left: 0;
  transition: 0.4s;
}

.hover-border:hover:after {
  width: 100%;
  opacity: 1;
}

.hover-border.active {
  position: relative;
}

.hover-border.active::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(271deg, #7815f8 23.71%, #a84eff 99.16%);
  bottom: 0;
  left: 0;
  transition: 0.4s;
}

.menu-text {
  color: var(--white);
  text-align: right;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.devider-margin {
  margin: 80px auto;
  float: left;
  width: 100%;
}

.hero-small-txt {
  font-family: "Gotham", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  background: var(--Greadint, linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-small-txt span {
  color: var(--white) !important;
}

.hero-title {
  color: var(--Text);
  font-family: "Gotham", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -1.6px;
  -webkit-text-fill-color: var(--white);
}

.hero-title-2 {
  background: linear-gradient(93deg, #d338ec 3.12%, #7c38ec 89.82%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Gotham", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -1.6px;
}

.hero-title-mdm {
  color: var(--white);
  font-family: "Gotham", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 5px;
}

.hero-title-pra {
  font-family: "Gotham", sans-serif;
  color: var(--white);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  margin-top: 15px;
  margin-bottom: 10px;
}

.reset-btn {
  color: #56ccf2;
}

.hero-small-text {
  font-family: Poppins;
  font-size: 14px;
  color: #c3c2c3;
}

button.sign-in-btn {
  border-radius: 10px;
  background: var(--Button, linear-gradient(96deg, #d338ec 0%, #7516a9 100%));
  padding: 8px 16px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 13px;
  font-family: Poppins;
  color: #fff !important;
}

.glass-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  padding: 85px 210px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  margin-top: -170px;
  box-sizing: border-box;
}

.social-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: auto;
}

#g_follow .icon {
  text-align: center;
  color: white;
  margin-right: 15px;
  font-size: 22px;
  line-height: 0;
}

#g_follow .icon p {
  font-size: 0.9rem;
  margin-top: 5px;
}

.bg-image-2 {
  background-image: url(../images/ceo-image-bg.webp);
  float: left;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.bg-image-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  z-index: -1;
}

.bg-image-2::after {
  background: #291f31;
  mix-blend-mode: hard-light;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.port-content-section {
  margin: 100px 200px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #352637;
  background: rgba(131, 104, 136, 0.1);
  backdrop-filter: blur(29px);
}

.port-content-small-txt {
  background: linear-gradient(90deg, #b625ff, #b625ff, #97ddf6, #97ddf6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Gotham", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.port-content-heading-txt {
  color: var(--white);
  text-align: center;
  font-family: "Gotham", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  line-height: 125%;
}

.port-content-paragraph {
  color: #c3c2c3;
  text-align: center;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 20px;
}

.port-content-medium-heading-txt {
  color: var(--white);
  text-align: center;
  font-family: "Gotham", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 35px;
}

.preson-name {
  color: var(--white);
  text-align: center;
  font-family: "Gotham", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
}

.preson-designation {
  color: #c3c2c3;
  text-align: center;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}

.responsive-svg {
  width: 489px;
  height: auto;
}

.time-line-img {
  position: relative;
  float: left;
  width: 100%;
}

.bg-image-3,
.bg-image-6,
.bg-image-5,
.footer-img,
.bg-image-4 {
  background-image: url("../images/ceo-image-bg.webp");
  float: left;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.bg-image-4::before,
.bg-image-6::before,
.footer-img::before,
.bg-image-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2e1c3b;
  mix-blend-mode: hard-light;
  z-index: -1;
}

.bg-image-4 {
  background-image: url(../images/bg-img-4.webp);
}

.bg-image-5 {
  background-image: url(../images/bg-img-5.webp);
  background-position: inherit;
}

.bg-image-6 {
  background-image: url(../images/bg-img-6.webp);
}

.bg-image-5::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%221728%22 height%3D%221418%22 viewBox%3D%220 0 1728 1418%22 fill%3D%22none%22%3E%3Cg style%3D%22mix-blend-mode%3Ahard-light%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M1366.43 1415.99C1155.21 1432.98 949.55 1331.69 751.054 1255.9C597.112 1197.13 489.402 1099.23 346.379 1026.53C167.867 935.791 -92.4074 913.218 -192.737 776.158C-293.257 638.837 -258.52 465.109 -151.679 346.136C-50.0227 232.938 207.271 257.764 350.742 170.97C506.467 76.763 504.574 -12.5707 721.279 1.54082C952.573 16.6024 943.076 135.495 1150.74 223.065C1346.23 305.504 1629.62 167.963 1790.61 283.458C1939.17 390.036 1800.26 558.526 1816.56 700.734C1834.62 858.36 1978.26 1026.41 1891.55 1164.19C1802.93 1305.01 1588.64 1398.12 1366.43 1415.99Z%22 fill%3D%22%232C183C%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: cover;

  /* clip-path: path("M1366.43 1415.99C1155.21 1432.98 949.55 1331.69 751.054 1255.9C597.112 1197.13 489.402 1099.23 346.379 1026.53C167.867 935.791 -92.4074 913.218 -192.737 776.158C-293.257 638.837 -258.52 465.109 -151.679 346.136C-50.0227 232.938 207.271 257.764 350.742 170.97C506.467 76.763 504.574 -12.5707 721.279 1.54082C952.573 16.6024 943.076 135.495 1150.74 223.065C1346.23 305.504 1629.62 167.963 1790.61 283.458C1939.17 390.036 1800.26 558.526 1816.56 700.734C1834.62 858.36 1978.26 1026.41 1891.55 1164.19C1802.93 1305.01 1588.64 1398.12 1366.43 1415.99Z"); */
}

.footer-img {
  background-image: url(../images/footer-img.webp);
}

.img-top-overlay {
  filter: blur(15px);
  float: left;
  width: 100%;
  background: #0000007a;
  mix-blend-mode: hard-light;
  height: 60px;
  position: absolute;
  z-index: 1;
  top: -40px;
  left: 0;
}

.img-bottom-overlay {
  filter: blur(15px);
  float: left;
  width: 100%;
  background: #0000007a;
  mix-blend-mode: hard-light;
  height: 50px;
  position: absolute;
  z-index: 1;
  bottom: -30px;
  left: 0;
}

.statistics-font-md {
  font-size: 20px;
}

.statistics-font-lg {
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
}

.statistics-font-sm {
  color: #c3c2c3;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
}

.custom-margin-top {
  height: 190px;
  width: 100%;
  float: left;
  background: #010002;
  backdrop-filter: blur(10px);
}

.custom-margin-top-2 {
  margin-top: 300px;
  float: left;
}

.footer-margin-top {
  margin-top: 100px;
}

.profile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #352637;
  background: rgba(131, 104, 136, 0.1);
  backdrop-filter: blur(29px);
}

.logo {
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
}

.profile-bar .d-flex {
  align-items: center;
}

.buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.button {
  padding: 8px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  color: #fff;
}

button.button.plays {
  border-radius: 6px;
  border: 1px solid #544a57;
  background: transparent;
  color: #fff;
}

button.button.plays:hover {
  background: #ffffff17;
}

.followers {
  border-radius: 6px;
  background: var(--Button, linear-gradient(96deg, #d338ec 0%, #7516a9 100%));
  color: var(--white);
}

.followers:hover {
  background: var(--Button, linear-gradient(96deg, #7516a9 0%, #d338ec 100%));
}

.card.custom-style-card {
  background: rgba(131, 104, 136, 0.1);
  backdrop-filter: blur(29px);
  color: #fff;
  border-radius: 10px;
  padding: 50px;
}

.section {
  text-align: center;
}

.divider {
  height: 1px;
  border-bottom: 1px dashed #583366;
  margin: 20px 0;
}

.card-number {
  font-family: Gotham, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  color: #c3c2c3;
}

form input::placeholder,
form .form-check-label {
  color: #c3c2c3 !important;
}

.card-sm-para {
  color: #c3c2c3;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

#g_follow .card-margin-top {
  margin-top: 178px;
}

#g_follow .custom-margin-left {
  margin-left: 80px;
}

.custom-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  margin-top: -100px;
}

.custom-card::after {
  content: "";
  position: ABSOLUTE;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 6px solid #cb35e6;
  transform: rotate(45deg);
}

.box-inner-arrow {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(0);
}

.custom-card::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 85%;
  background: #ffffff2e;
  transform: rotate(45deg);
  border-radius: 30px;
  z-index: -1;
}

.footer-icon .icon {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  margin-left: 0;
  background: rgb(14 14 14);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0px -2px 2px 0px #ffffff82;
  transition: 0.3s;
}

.footer-icon .icon:hover {
  background: #ededed26;
}

.footer-custom-space {
  float: left;
  width: 100%;
  margin-top: 160px;
}

.hover-color {
  transition: 0.3s;
}

.hover-color:hover {
  color: var(--white);
}

.small-card {
  width: 229px;
  height: 229px;
  margin: 30px;
  margin-top: 150px;
}

.small-card .box-inner-arrow {
  top: -15px;
}

.left-card {
  margin: 116px 0 0 96px;
}

.right-card {
  margin: 116px 0 0 -30px;
}

.timeline {
  position: relative;
  width: 100%;
  max-width: 900px;
}

.step {
  display: flex;
  margin: 20px 0;
  position: relative;
}

.step .icon {
  background-color: #422359;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 8px solid #1e1823;
  margin: -50px 0 0 -50px;
}

/* .step.left .icon {
  left: calc(50% - 75px);
}

.step.right .icon {
  left: calc(50% + 75px);
} */
.step.right .content {
  margin-right: -27px;
}

.step .content {
  padding: 20px;
  width: 285px;
  border-radius: 10px;
  border: 1px solid #352637;
  background: rgba(131, 104, 136, 0.1);
  backdrop-filter: blur(29px);
}

.step.left .content {
  margin-right: auto;
}

.step.right .content {
  margin-left: auto;
}

.step h2 {
  color: #d52afd;
  margin-bottom: 10px;
}

.step ul {
  list-style: none;
  padding-left: 0;
}

.step ul li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.step ul li:before {
  content: "•";
  color: limegreen;
  margin-right: 10px;
  font-size: 20px;
}

/* Timeline Dotted Line */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #d52afd 50%, transparent 50%);
  background-size: 8px 8px;
  transform: translateX(-50%);
}

.side-img-position img {
  margin-top: -200px;
}

.video-section {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

.video-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.play-button::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.play-button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.video-top-margin {
  margin-top: 100px;
}

.timeline-margin-top {
  margin-top: 200px;
}

.timeline-heading-margin-top {
  margin-top: 100px;
  line-height: 125%;
}

#g_follow .modal-backdrop {
  /* --bs-backdrop-zindex: unset !important; */
  z-index: -1 !important;
}

#g_follow .modal-content {
  background: #232323;
}

#g_follow .custom-modal-bg {
  background: #00000094;
}

.accordion-button {
  position: relative;
  padding-left: 1.5rem;
}

.accordion-button::after {
  display: none;
}

.accordion-icon {
  font-size: 28px;
}

#g_follow .accordion-item {
  background: none;
  backdrop-filter: blur(15px);
}

#g_follow button.accordion-button {
  background: transparent;
  color: var(--white);
}

#g_follow .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: var(--white);
}

#g_follow .accordion-item {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 0;
  box-shadow: 0px -1px 2px 0 #ffffff8a;
}

.gotham-small-txt {
  color: #fff;
  text-align: center;
  font-family: Gotham, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

.service-solution-box {
  text-align: center;
  width: 100%;
  height: 389px;
  border-radius: 55.603px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0px -2px 0px 1px #ffffff40;
}

.service-solution-box::after {
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(5px);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 55.603px;
}

.service-solution-icon svg {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 10px;
  left: 50%;
  z-index: 1;
}

#g_follow .service-solution-top-margin {
  margin-top: 70px;
}

.our-blog-section-card-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.our-blog-section-card-content {
  padding: 20px;
  /* background: #453C4C; */
  /* mix-blend-mode: hard-light; */
}

.our-blog-section-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #c3c2c3;
  margin-top: 20px;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

.our-blog-section-card-title {
  margin: 0 0 20px;
  font-family: Gotham, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  color: var(--white);
}

.our-blog-section-card-tags {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.our-blog-section-tag {
  padding: 6px 14px;
  color: #fff;
  font-size: 10px;
  margin-right: 5px;
  border-radius: 20px;
  border: 1px solid #4a2c11;
  background: linear-gradient(95deg, #825c3b 0%, #472a0f 95.77%);
}

.our-blog-section-card-text {
  margin-bottom: 15px;
  color: #c3c2c3;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.our-blog-section-read-more {
  color: #6fcf97;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  text-decoration-line: underline;
}

.custom-sign-btn.Pricing {
  border-radius: 10px;
  border: 1.5px solid #fff;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(5px);
}

.custom-width-btn {
  width: 184px;
}

.custom-margin-top-blog-section {
  margin-top: 150px;
}

.bg-image-6::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(to top,
      transparent 0%,
      #100c13 25% 75%,
      transparent 100%);
  z-index: -1;
}

.blog-custom-style {
  padding: 110px;
  border-radius: 20px;
  overflow: hidden;
}

.step.left .content::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #2c183c;
  right: -26px;
  border-radius: 50%;
  top: 50%;
  box-shadow: inset -1px -1px 0 0 #ffffff75;
}

.step.right .content::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #2c183c;
  left: -53px;
  border-radius: 50%;
  top: 50%;
  box-shadow: inset -1px -1px 0 0 #ffffff75;
}

.owl-nav {
  display: none;
}

.owl-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.owl-theme .owl-dots .owl-dot span {
  background: linear-gradient(90deg, #ca89d6 0%, #81d8bf 100%);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: linear-gradient(96deg, #d338ec 0%, #7516a9 100%);
  width: 14px;
  height: 14px;
}

/******************* ******************/
/******************* how it's work ******************/
/******************* ******************/

.work-sec-thumb-height {
  height: 533px;
}

.play-img img {
  position: absolute;
  width: 140px;
  height: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.custom-margin-bottom {
  margin-bottom: 100px;
}

.custom-tabs .tab-header {
  justify-content: space-around;
  padding: 30px;
  border-radius: 10px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(5px);
}

.custom-tabs .nav-link.active {
  background: var(--Greadint, linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-image-slice: 1;
  font-weight: bold;
}

.custom-tabs .nav-link {
  background-color: transparent !important;
  color: #fff !important;
}

.custom-tabs .nav-link:active,
.custom-tabs .nav-link:focus,
.custom-tabs .nav-link:hover {
  background-color: transparent !important;
  outline: none;
  box-shadow: none;
}

.custom-tabs li.nav-item {
  border-right: 1px dashed #583366;
  position: relative;
  padding: 0 25px;
  font-family: Gotham, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}

.tab-header {
  border-radius: 10px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(5px);
  margin-top: 90px;
  flex-wrap: nowrap;
}

.top-bottom-space {
  padding: 30px 15px;
}

.tab-custom-style li:last-child {
  border: 0;
}

.custom-active-border {
  position: relative;
}

.custom-tab-header .nav-link.active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -30px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(0.25turn, #d338ec, #7516a9) 1;
  left: 0;
}

.tab-header {
  position: relative;
}

.account-box {
  background: linear-gradient(135deg, #352641 0%, #1d1522 100%);
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.custom-tab-card-bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 40%;
  left: 0;
  right: 0;
  bottom: 0;
  background: #100c13;
  padding: 100px;
  z-index: -1;
}

.row.custom-tab-card-bg {
  margin-top: 100px;
}

.category-container {
  margin: 50px auto;
  padding: 80px 20px 20px;
  border-radius: 10px;
  position: relative;
  border: 1.5px solid #fff;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(5px);
}

.category-icon {
  position: absolute;
  top: -65px;
  width: 130px;
  height: 130px;
  background: linear-gradient(180deg, #180e17 0%, #3f3a43 100%);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #ededed47;
  left: 50%;
  transform: translateX(-50%);
}

.category-text {
  margin-bottom: 10px;
}

/******************************************************* */
/**************************** service page *************************** */
/******************************************************* */
#service_page.bg-image {
  background-size: contain;
}

.service-page-card-icon {
  top: unset;
  margin-bottom: 30px;
}

.service-card-bg {
  background: linear-gradient(179deg, #352641 0.74%, #1d1522 99.26%);
  padding: 30px !important;
}

.service-page-card-icon {
  top: unset;
  margin-bottom: 30px;
  box-shadow: 0px -2px 2px 0px #ffffff82;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(5px);
  border: 0;
}

.twentypx-text {
  color: #c3c2c3;
  text-align: center;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/****************************************/
/******************** terms page ********************/
/****************************************/
.tab-glass-bg {
  border-radius: 10px;
  border: 1px solid #352637;
  background: rgba(131, 104, 136, 0.1);
  backdrop-filter: blur(29px);
  padding: 55px;
}

.custom-tab-style {
  color: var(--white) !important;
  font-family: Gotham, sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 135%;
  display: flex;
  align-items: center;
  justify-content: start;
  border-bottom: 1px dashed #583366;
  padding: 30px 0;
}

.custom-tab-style.active {
  background: var(--Greadint, linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  float: left;
}

.custom-list {
  list-style: none;
  padding: 0;
}

.custom-marker {
  position: relative;
  padding-left: 20px;
  margin-bottom: 20px;
}

.custom-marker::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="5" fill="url(%23paint0_linear_1119_3700)"/><defs><linearGradient id="paint0_linear_1119_3700" x1="-2.5977e-08" y1="5.55556" x2="10" y2="5.55556" gradientUnits="userSpaceOnUse"><stop stop-color="%23CB36E6"/><stop offset="1" stop-color="%23BBFFEB"/></linearGradient></defs></svg>') no-repeat center center;
  background-size: contain;
}

button#v-pills-settings-tab:last-child {
  border: 0;
}

.tab-container {
  display: flex;
  align-items: flex-start;
  float: left;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 30px;
}

/****************************************/
/******************** blog page ********************/
/****************************************/
.custom-pagination-style {
  list-style-type: none;
  /* Remove bullet points */
  display: flex;
  /* Display the items in a row */
  justify-content: center;
  /* Center the pagination */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
}

.custom-pagination-style .page-item {
  margin: 0 5px;
  border-radius: 6px;
  border: 1.5px solid rgba(58, 43, 69, 0.4);
  background: rgba(34, 26, 41, 0.6);
}

.custom-pagination-style .page-item .page-link {
  border: none;
  padding: 5px 15px;
  background-color: transparent;
  color: var(--white);
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.custom-pagination-style .page-item.active .page-link {
  border-radius: 8px;
  background: var(--primary-gradient);
}

.custom-pagination-style .page-item.disabled .page-link {
  color: #ccc;
  pointer-events: none;
}

.custom-pagination-style .page-item .page-link:hover {
  background-color: rgb(255 255 255 / 10%);
  /* Add hover effect */
}

.custom-solid-bg {
  position: relative;
}

.custom-solid-bg::after,
.custom-solid-bg-2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 48%;
  background: #100c13;
  mix-blend-mode: hard-light;
  bottom: 0;
  z-index: -1;
}

.custom-solid-bg-2 {
  position: relative;
}

.custom-solid-bg-2::after {
  height: 94%;
}

.custom-blog-img-space {
  margin: 90px 0;
  gap: 3765px;
}

.sign-up-left-img img {
  float: left;
  width: 50%;
  height: 100vh;
  object-fit: contain;
  padding-top: 80px;
  transform: scaleX(-1);
  display: block;
  position: fixed;
}

.blur-bg-sign-up {
  background: rgba(131, 104, 136, 0.1);
  backdrop-filter: blur(29px);
  padding: 0 90px !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.sign-up-logo-space {
  margin: 0 0 30px 0;
}

.form-margin-top {
  margin-top: 35px;
}

form .sign-up-custom-input,
.hero-form-input {
  padding: 16px;
  background: transparent;
  border-color: #6c3e7c;
  color: #fff;
  height: 45px;
}

#g_follow .form-control {
  background: transparent;
  box-shadow: none;
  border-color: #6c3e7c;
  height: 45px;
  color: #fff !important;
  font-size: 16px;
}

form .custom-checkbox-style {
  position: relative;
  width: 20px;
  height: 20px;
  border: none;
  outline: none;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
}

form .custom-checkbox-style::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  /* Optional, can be changed */
  padding: 2px;
  background: linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

form .custom-checkbox-style:checked {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.custom-label-space {
  margin: 1px 5px 1px;
}

.slider-custom-width {
  width: 150px !important;
}

.vertical-swiper-container {
  width: 100%;
  height: 330px;
  overflow: hidden;
}

.swiper-slide.vertical-swiper-slide {
  margin-bottom: 5px !important;
}

/* .varticalSwiper .swiper-slide {
  height: 84px !important;
  margin-bottom: 10px;
} */

.swiper.varticalSwiper {
  padding-top: 33px;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text_gradient {
  background: linear-gradient(93deg, #d338ec 3.12%, #7c38ec 89.82%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Gotham", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

header.main_header {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9;
  background: transparent !important;
}

header.main_header .nav-link {
  color: var(--white);
}

header.main_header .nav-link.active {
  color: var(--white);
  font-weight: bold;
}

#service_page.bg-image {
  background-attachment: scroll;
  background-position: top center;
  padding-bottom: 100px;
}

#service_page .bg-image {
  padding-top: 170px;
  padding-bottom: 50px;
}

section#service_page .custom-space-upDown {
  padding: 100px 0;
}

#service_page .category-container {
  padding: 40px !important;
}

.profile-bar iconify-icon {
  font-size: 50px;
}

.category-icon iconify-icon {
  font-size: 70px;
}

.category-icon {
  color: #ffffff;
}

header.main_header.add_blured {
  backdrop-filter: blur(8px);
  background: #1d1b4242 !important;
}

#g_follow .modal-dialog.modal-lg {
  height: calc(100% - 70px);
  display: flex;
  align-items: center;
}

#g_follow button.btn-close {
  color: #fff;
}

#g_follow button.navbar-toggler {
  border-color: #fff;
}

.service-solution-content img {
  width: 100%;
}

#g_follow .custom-padding {
  padding: 100px !important;
  margin: 50px 0 150px 0;
}

.form-check-label {
  margin-left: 5px;
}

.form-check.py-1 {
  display: flex;
  align-items: center;
  line-height: normal;
}

#g_follow .glass-bg-btn {
  border-radius: 10px;
  border: 1.5px solid #fff;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(5px);
  transition: 0.3s;
}

#g_follow .glass-bg-btn:hover {
  background: #ffffff17;
}

.timeline-padding-bottom {
  padding-bottom: 100px;
}

.sign-up-custom-input:focus {
  border-image: linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%) 1;
  border-width: 1px;
  border-style: solid;
  height: 45px;
  background: #ffffff17 !important;
  box-shadow: none !important;
  color: #ffff !important;
}

.sign-up-custom-input:focus .form-control {
  border: none !important;
}

.hero-form-input:focus {
  border-image: linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%) 1;
  border-width: 1px;
  border-style: solid;
  background: #ffffff17 !important;
  box-shadow: none !important;
  color: #ffff !important;
}

.nav-link.active .icon {
  color: linear-gradient(90deg, #cb36e6 0%, #bbffeb 100%);
}

#g_follow .icon i {
  font-size: 2.5rem;
  margin-bottom: 5px;
}

.custom-tabs .nav-link {
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
}

.custom-tabs .nav-link .icon {
  width: 70px;
  height: 70px;
  background: #221a29;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 1px solid #3a2b45;
  font-size: 35px;
}

.video-section {
  z-index: 1;
}

.join-community {
  float: left;
  width: 100%;
}

a.custom-sign-btn .icon {
  margin: 0;
}

.custom-scroll {
  overflow-x: auto;
  -ms-overflow-style: none;
  /* Hide scrollbar on Internet Explorer and Edge */
  scrollbar-width: none;
  /* Hide scrollbar on Firefox */
}

.custom-scroll::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar on Chrome, Safari, and Opera */
}

/********************************************/
/********************************************/
/********************** Media Queries **********************/
/********************************************/
/********************************************/

@media only screen and (max-width: 1399px) {
  .timeline::before {
    display: none;
  }

  .step.right .content::after {
    display: none;
  }

  .step.right .content {
    margin: auto !important;
  }

  .step {
    margin: 50px 0 !important;
  }

  .step.left .content::after {
    display: none;
  }

  .side-img-control {
    width: 100%;
  }

  .glass-container {
    margin-top: 50px;
  }

  .step .content {
    width: 100% !important;
  }
}

@media only screen and (max-width: 1280px) {
  /* .order_service {
    display: none;
  }

  .order_refill {
    display: none;
  }

  .order_count {
    width: 9%;
  } */

  button.order_btn,
  button.ticketOrder_btn,
  .update_btn {
    padding: 11px 16px 11px 16px;
  }

  .ticket_icon {
    min-width: 50px;
    height: 50px;
  }

  .update_btn {
    padding: 11px 11px 11px 11px;
  }

  .transaction_menu_bar {
    width: 470px;
  }

  .service_meter_box p,
  .service_description p {
    font-size: 14px;
  }

  .service_name p,
  .service_link p {
    font-size: 12px;
  }

  .hero_middle {
    text-align: center;
    margin: 0;
  }

  .hero_right_card_one,
  .hero_right_card_Two {
    width: 170.5px;
  }

  .step_img {
    width: 70px;
    height: 60px;
  }
}

@media only screen and (max-width: 1024px) {
  .blur-bg-sign-up {
    padding: 25px !important;
  }

  .hero_left {
    width: 100%;
    /* Full width */
    height: auto;
    text-align: center;
  }

  .hero_left .heading {
    font-size: 22px;
    /* Slightly larger heading */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .hero_right {
    margin-top: 20px;
  }

  .hero_right_card {
    flex-direction: column;
    align-items: center;
  }

  .hero_right_card {
    display: flex;
    flex-direction: row;
  }

  #socialMediaFilter {
    justify-content: flex-start;
  }

  .hero_right_card_one,
  .hero_right_card_Two {
    width: 45%;
    /* Slightly narrower cards */
    height: auto;
    margin-bottom: 20px;
  }

  .hero_right_card_one h3,
  .hero_right_card_Two h3 {
    font-size: 18px;
    /* Adjust font size */
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 20px;
    margin: 0;
    margin-top: 10px;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 18px;
    line-height: 33px;
  }

  .card_img {
    width: 55px;
    /* Smaller icon */
    height: 55px;
  }

  /* menu section  */

  .order_menu_bar {
    width: 100%;
  }

  .newOrder,
  .massOrder h2,
  .favourite h2 {
    font-size: 15px;
  }

  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .order_form,
  .service_wrapper {
    padding: 25px 25px;
  }

  .service-details {
    height: auto;
  }

  .order_head,
  .service_head {
    padding: 10px 24px;
    flex-direction: column;
  }

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .service_menu_bar {
    width: 100%;
    display: flex;
  }

  .service {
    width: 50%;
  }

  .contact_btn {
    width: 40%;
  }

  .service::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #d338ec;
    border-radius: 50px;
  }

  .massOrder,
  .favourite,
  .service {
    width: 33%;
    margin: 5px 0;
    text-align: center;
  }

  .newOrder {
    width: 32%;
    margin: 5px 0;
    text-align: center;
  }

  .newOrder::after {
    bottom: -7px;

    height: 4px;
  }

  .order_menu_bar {
    justify-content: flex-start;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary,
  .submit_button {
    width: 100%;
    height: 70px;
    font-size: 20px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 10px 10px;
  }

  .service_link h2 {
    margin: 0;
  }

  .service_name {
    height: 192px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  /* Service Page Responsive  */

  .service_filter_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .filter {
    width: 48%;
  }

  .service_filter_wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .order_search {
    width: 335px;
    margin-bottom: 7px;
  }

  input.search,
  .selectService {
    height: 46px;
  }

  .sl {
    width: 8%;
  }

  .title {
    width: 25%;
  }

  .title h4 {
    font-size: 12px;
  }

  .rate {
    width: 12%;
  }

  .time {
    width: 15%;
  }

  .min_max {
    width: 10%;
  }

  .refill {
    width: 11%;
  }

  .refill button {
    width: 70px;
    height: 37px;

    border-radius: 5px;
    font-size: 12px;
  }

  .desc button {
    width: 70px;
    height: 39px;

    border-radius: 5px;

    font-size: 14px;
  }

  .service_list_heading h4,
  .service_list h4 {
    font-size: 13px;
  }

  .service_list h4 {
    font-size: 12px;
    line-height: 19px;
    font-size: 11px;
  }

  .service_list_heading,
  .service_list {
    padding: 6px 16px;
  }

  .service_list .sl {
    justify-content: flex-start;
  }

  .sl h4 {
    margin-left: 10px;
  }

  .service_list_title {
    justify-content: flex-start;
    padding: 0px 15px;
  }

  .server_title_wrapper {
    justify-content: center;
  }

  section#service_List {
    padding: 0px 12px;
  }


  .min_max,
  .refill,
  .time {
    display: block;
  }

  /* order list page  */
  /* .order_filter_btn {
    display: none;
  } */



  .order_sl {
    width: 7%;
  }

  .order_date {
    width: 12%;
  }

  .order_link {
    width: 25%;
  }

  .order_status {
    width: 23%;
  }

  .order_quantity {
    width: 12%;
  }

  .selectOrder {
    width: 335px;
    padding: 0px 16px 0px 16px;
    height: 46px;
    border-radius: 8px;
    background: v ar(--box-bg);
    border: none;
    display: block;
    margin-bottom: 10px;
  }

  .order_search input {
    width: 100%;
    height: 46px;
  }

  /* mass order  */
  .massOrder_form,
  .massOrder_wrapper {
    padding: 15px 20px;
  }

  .massOrder-details,
  .mass-order-form {
    height: auto;
  }

  .massOrder_menu_bar {
    width: 100%;

    margin: 0px 20px;
  }

  .massOrder_question {
    padding: 0px 20px;
  }

  .massOrder-details {
    margin: 20px 0px;
  }

  /* Update page  */
  .card_box_wrapper {
    padding: 30px 20px;
  }

  .card_box_wrapper h2 {
    font-size: 17px;
  }

  /* Dashboard Page  */
  .next_title {
    width: 100%;
  }

  .card_name {
    width: 45%;
  }

  .card_new,
  .card_junior,
  .frequent {
    width: 17%;
  }

  .elite,
  .vip,
  .master {
    display: none;
  }

  /* Ticket Page  */
  #order_sec_right,
  #order_sec_left {
    padding: 0;
  }

  .newOrder,
  .massOrder,
  .favourite,
  .service,
  .contact_btn,
  .massOrder,
  .massOrder_btn {
    height: 45px;
  }

  .order_head,
  .service_head,
  .massOrder_head {
    height: 90px;
  }

  .order_form,
  .service_wrapper {
    padding: 25px 25px;
  }

  .ticket_icon {
    min-width: 50px;
    height: 50px;
  }

  .ticket_history {
    height: 100px;
  }


  .ticket_status p {
    font-size: 14px;
  }

  .ticket_transaction_details p {
    font-size: 16px;
  }

  .order_input input,
  .order_input_blank input,
  .ticket_order_input input,
  .ticket_order_input_blank input,
  .massOrder_input_blank textarea,
  .ticketOrder_input_blank textarea {
    height: 70px;
  }

  .order_select,
  .ticket_select {
    height: 70px;
  }

  /* update Page  */
  .update_filter_btn {
    display: none;
  }

  .order_select_btn {
    display: block;
    width: 335px;
    margin-bottom: 7px;
    height: 46px;
    border: 1px solid var(--list-border);
    background-color: var(--box-bg);
    border-radius: 8px;
    padding: 0px 10px;
    max-width: 100%;
  }

  .update {
    width: 40%;
  }

  .update_date {
    width: 15%;
  }

  .update_service {
    width: 40%;
  }

  /* account page  */
  .account_right {
    margin-top: 20px;
  }

  div#account_card {
    max-width: 100%;
  }

  .newOrder,
  .massOrder h2,
  .favourite h2 {
    font-size: 20px;
  }

  .newOrder h2,
  .massOrder h2,
  .favourite h2,
  .service h2,
  .contact_btn h2,
  .massOrder_btn h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 25.6px;
    margin-left: 8px;
  }

  .transaction_menu_bar {
    width: 630px;
  }

  /* faq page  */
  .faq_head {
    width: 0px 55px !important;
  }

  #hero-banner>.container {
    height: auto;
  }

  #hero-banner p {
    font-size: 21px;
  }

  div#hero-pay {
    width: 500px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .hero_left .heading {
    font-size: 30px;
    margin-bottom: 15px;
  }

  /* tab menu  */
  .bottom_user_nav .nav_item .nav-link {
    font-size: 12px;

    padding: 19px 6px;
  }

  div#\32 nd_dot {
    display: none;
  }

  .step_img {
    width: 70px;
    height: 70px;
  }

  .step_text h3 {
    font-size: 28px;
  }

  .step_text p {
    font-size: 18px;
  }

  .form_card {
    width: 100%;
    padding: 50px 30px;
    height: 560px;
    margin-bottom: 15px;
  }

  .accordion_head {
    margin-top: 20px;
  }

  .video_box_wrapper img {
    width: 100%;
  }

  .video_box_wrapper {
    height: auto;
  }

  .play_btn {
    position: absolute;

    width: 60px;
    height: 60px;
    padding: 18px;
  }

  .video_box_wrapper::before {
    border-radius: 9px;
  }
}

@media only screen and (max-width: 991px) {
  .custom-tab-card-bg::after {
    height: 56%;
  }

  .work-sec-thumb-height {
    height: auto !important;
  }

  .video-section img {
    height: auto !important;
  }

  #g_follow .custom-margin-left {
    margin-left: auto;
  }

  .mobile-row-reverse {
    flex-direction: column-reverse;
    padding-top: 10px;
  }

  .custom-tab-header .nav-link.active::after {
    bottom: -15px;
  }

  .top-bottom-space {
    padding: 15px;
  }

  .modal.show .modal-dialog {
    transform: none;
    height: calc(100% - 56px);
    display: flex;
    align-items: center;
  }

  /* Navbar Styles */
  div#navbarNav {
    background: #00000057;
    backdrop-filter: blur(10px);
    padding: 40px 10px;
    border-radius: 8px;
  }

  .custom-tabs .nav-link .icon {
    width: 50px;
    height: 50px;
    font-size: 25px;
  }

  div#navbarNav ul li {
    display: flex;
    justify-content: center;
  }

  .card.custom-style-card {
    padding: 30px;
  }

  #g_follow .custom-padding {
    padding: 50px !important;
    margin: 40px 0 140px 0;
  }

  .sign-up-left-img img {
    height: auto;
    padding-top: 40px;
    position: relative;
    width: 50%;
  }
}

@media only screen and (max-width: 768px) {
  .custom-tab-card-bg::after {
    height: 65%;
  }

  .custom-tab-style svg {
    width: 50px;
  }

  .sign-up-logo-space {
    display: none;
  }

  .form-margin-top {
    margin-top: 35px !important;
  }

  .mobile-font-size {
    font-size: 22px;
  }

  .mobile-margin-remove {
    margin: 0;
  }

  .sign-up-custom-input,
  .hero-form-input {
    padding: 10px !important;
  }

  .custom-label-space {
    margin: 3px 5px 1px !important;
  }

  .mobile-transparent-bg {
    background: transparent !important;
  }

  .bg-image-5::after {
    background-size: contain;
    background-repeat: no-repeat;
  }

  .card-number {
    font-size: 18px;
  }

  .card-sm-para {
    font-size: 14px !important;
  }

  .footer-margin-top {
    margin-top: 0;
  }

  .port-content-section {
    margin: 20px !important;
    padding: 20px;
  }

  .glass-container {
    padding: 20px;
    margin-top: 20px;
  }

  button.sign-in-btn {
    font-size: 14px;
  }

  /* Blog Image and Footer Space */
  .custom-blog-img-space {
    margin: 30px 0;
  }

  .footer-custom-space {
    margin-top: 0;
  }

  /* Tab Container Styles */
  .tab-container {
    flex-direction: column;
  }

  .tab-glass-bg {
    margin-bottom: 50px;
    flex-direction: row !important;
    overflow: auto;
    flex-wrap: nowrap;
    padding: 25px;
  }

  .custom-tab-style {
    border-bottom: 0;
    padding: 0 15px;
    white-space: nowrap;
    font-size: 14px;
  }

  /* Text Sizing */
  .twentypx-text {
    font-size: 16px;
  }

  /* Category Container */
  .category-container {
    margin: 40px auto;
  }

  /* Tab Header */
  .tab-header {
    justify-content: unset;
  }

  /* Custom Tabs */
  .custom-tabs li.nav-item {
    font-size: 14px;
    white-space: nowrap;
    padding: 0 10px;
  }

  .custom-tabs li.nav-item svg {
    margin-right: 10px;
    width: 50px;
  }

  /* Custom Margin and Image Size */
  .custom-margin-bottom {
    margin-bottom: 0;
  }

  .play-img img {
    width: 70px;
    height: 70px;
  }

  /* Hero Section */
  .side-img-position img {
    margin: 0;
  }

  .devider-margin {
    margin: 50px;
  }

  .hero-title,
  .hero-title-2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
  }

  .custom-text-align {
    text-align: center;
  }

  .hero-title-pra {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    margin: 10px 0;
  }

  .hero-title-mdm {
    display: none;
  }

  .custom-position-mob {
    margin-top: -100px !important;
  }

  .hero-small-text {
    text-align: center;
    font-size: 12px;
  }

  .port-content-small-txt {
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }

  .port-content-heading-txt {
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 125%;
  }

  .responsive-svg {
    width: 65%;
  }

  .port-content-paragraph {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
  }

  .port-content-medium-heading-txt {
    color: var(--Text, #fff);
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
  }

  .preson-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
  }

  .preson-designation {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 160%;
  }

  .custom-margin-top {
    height: 0px;
  }

  .custom-width-btn {
    width: 150px;
  }

  .custom-sign-btn {
    padding: 11px 10px;
    margin-top: 15px;
    font-size: 14px;
  }

  .bg-image-5 {
    background-size: contain !important;
  }

  .profile-bar svg {
    width: 34.843px;
    height: 36px;
  }

  .logo {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
  }

  .button {
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 400;
  }

  /* Card and Blog Section */
  #g_follow .card-margin-top {
    margin-top: 0;
  }

  .timeline-margin-top {
    margin-top: 50px;
  }

  .timeline-heading-margin-top {
    display: none;
  }

  .left-card {
    margin: 0;
  }

  .service-solution-box {
    height: 300px;
    max-width: 300px;
    margin: 15px auto;
  }

  .service-solution-icon svg {
    width: 110px;
  }

  /* Blog Section Text */
  .our-blog-section-card-header {
    font-size: 14px;
  }

  .our-blog-section-card-title {
    font-size: 18px;
  }

  .our-blog-section-card-text {
    font-size: 12px;
  }

  .our-blog-section-read-more {
    font-size: 14px;
  }

  .custom-margin-top-blog-section {
    margin-top: 70px;
  }

  .blog-custom-style {
    padding: 35px;
  }

  /* Owl Carousel */
  .owl-item {
    transition: transform 0.3s ease;
  }

  .owl-stage {
    padding-left: 0 !important;
  }

  .owl-item.item {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .step .icon {
    margin: -15px 0 0 -20px;
  }

  .text_gradient {
    font-size: 60px;
  }

  .logo {
    font-size: 18px;
  }

  .side-img-position img {
    margin-top: unset;
    width: 100%;
  }

  .step.right .content {
    margin-right: unset;
  }

  #socialMediaFilter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--social-bar);
    padding: 0px 18px;
    justify-content: space-between;
  }

  #socialMediaFilter .btn_service_filter{
    width: 100%;
    height: 35px;
  }


  div#hero-pay {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .hero_left {
    width: 100%;
    /* Full width for tablets */
    height: auto;
    /* Let height adjust */
    text-align: center;
    /* Center text */
    gap: 0px;
  }

  .hero_left .heading {
    font-size: 20px;
    /* Slightly larger for tablets */
    line-height: 26px;
  }

  #hero-pay {
    width: 100%;
    /* Full width for tablets */
    justify-content: space-around;
    /* Spread content */
  }

  .hero_pay_left h3,
  .hero_pay_right h3 {
    font-size: 17px;
    /* Adjust font size for tablets */
  }

  .col-custom-3-5,
  .col-custom-4-5 {
    flex: 0 0 100%;
    /* Full width for tablets */
    max-width: 100%;
    margin-bottom: 20px;
    /* Add spacing between sections */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  /* menu section  */

  /* .massOrder h2,
.favourite h2 {
  display: none;
} */
  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .service-details {
    height: auto;
  }

  /* .order_head,
.service_head {
  padding: 10px;
  flex-direction: column;
} */

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary,
  .submit_button {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 16px 16px;
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 17px;
    margin: 0;
    margin-top: 10px;
  }

  .service_link h2 {
    margin: 0;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 15px;
    line-height: 25px;
  }

  .service_name {
    height: 145px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  /* Service Page  */
  .filter {
    width: 100%;
    margin-bottom: 7px;
  }

  .desc {
    width: 12%;
  }

  .title {
    width: 51%;
  }

  .server_title_wrapper p {
    font-size: 18px;
  }

  .rate {
    width: 15%;
  }

  .sl {
    width: 18%;
  }

  /* order list page  */

  .order_sl {
    width: 10%;
  }

  .order_date {
    width: 18%;
  }

  .order_link {
    width: 40%;
  }

  .order_status {
    width: 20%;
  }

  .order_status button {
    width: 100px;
    height: 39px;

    font-size: 13px;
  }


  /* mass order  */
  /* mass order  */
  .massOrder,
  .favourite,
  .service {
    width: 30%;
    margin: 5px 0;
    text-align: center;
  }

  .newOrder {
    width: 40%;
    margin: 5px 0;
    text-align: center;
  }

  .massOrder,
  .favourite,
  .service {
    width: 42%;
  }

  .order_form,
  .service_wrapper {
    padding: 25px 20px;
  }

  /* Ticket Page Section Code  */
  section#order .ticket_select {
    display: block;
  }

  .order_input input,
  .order_input_blank input,
  .ticket_order_input input,
  .ticket_order_input_blank input,
  .massOrder_input_blank textarea,
  .ticketOrder_input_blank textarea {
    height: 46px;
  }

  .order_select,
  .ticket_select {
    height: 46px;
  }


  .ticket_history {
    padding: 10px;
  }

  .ticket_status h4 {
    font-size: 14px;
  }

  .ticket_status p {
    font-size: 12px;
  }

  .ticket_transaction_details p {
    font-size: 12px;
  }

  #ticketOrder_filter {
    display: none;
  }

  section#order {
    padding: 0px 20px;
    padding-top: 15px;
  }

  .massOrder_form,
  .massOrder_wrapper {
    padding: 15px 51px;
  }

  .massOrder-section {
    padding: 0px 8px;
  }

  .massOrder_menu_bar {
    width: 100%;
    margin: 0px 51px;
  }

  .massOrder-details {
    height: auto;
    margin: 20px 0px;
  }

  /* mobile menu  */
  header {
    background: none;
  }

  .bottom_user_nav {
    display: none;
  }

  .mobile_menu_wrapper {
    position: relative;
    width: 100%;
    height: auto;
    background-color: var(--menu-bg);
    border-radius: 20px;
    margin-top: 15px;
    display: block;
    z-index: 999999;
  }

  .cancel_icon {
    width: 30px;
    height: 30px;
    background: #413547;
    border-radius: 100%;
  }

  .cancel_icon img {
    width: 100%;
    margin: auto;
    padding: 2px;
  }

  .menu_heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid var(--social-bar);
    padding: 0px 13px;
    background: #211a26;
    border-radius: 20px 20px 0px 0px;
  }

  .user_profile {
    width: 26%;
    height: auto;
  }

  .user_profile img {
    width: 100%;
  }

  .user_info {
    width: 70%;
    font-family: var(--gotham-font);
  }

  .logged_user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px;
    padding: 0px 13px;
  }

  .user_info h4 {
    font-family: var(--primary-font);
    color: var(--white);
    font-size: 18px;
    font-weight: 700;
    line-height: 24.3px;
  }

  .user_info p {
    font-size: 14px;
    line-height: 18.9px;
    margin: 0;
  }

  .menu_list {
    padding: 13px 13px;
  }

  .mobile_menu_btn,
  .mobile_menu_btn_see {
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: flex-start;
    text-decoration: none;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.5s ease;
  }

  .mobile_menu_btn_see {
    justify-content: space-between;
  }

  .mobile_menu_btn:hover,
  .mobile_menu_btn.btn_active {
    background: var(--submit-button-bg);
  }

  .mobile_menu_btn h3,
  .mobile_menu_btn_see h3 {
    font-size: 14px;
    color: var(--white);
    margin-bottom: 0px;
  }

  .mobile_menu_btn_see {
    background: #302935;
  }

  /* update response page  */
  .card_box_wrapper {
    padding: 30px 20px;
  }

  .apibox_wrapper h3 {
    font-size: 18px;
  }

  .api_content h4 {
    font-size: 14px;
  }

  .api_card_header {
    height: 45px;

    padding: 0px 12px;
  }

  .card_box_wrapper h2 {
    font-size: 14px;
  }

  .api_content h4 {
    font-size: 12px;
  }

  .tag_btn {
    margin-left: 5px;
  }

  .example_box h3 {
    font-size: 16px;
  }

  /* Dashboard Page  */
  .card_wrapper h4,
  .card_wrapper_next h4 {
    font-size: 15px;
  }

  .card_body h4 {
    font-size: 13px;
  }

  .card_junior,
  .frequent,
  .elite,
  .vip,
  .master {
    display: none;
  }

  .card_name {
    width: 70%;
  }

  .card_body h4 {
    font-size: 12px;
  }

  .details p {
    font-size: 14px;
  }

  /* update page  */
  #update_filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .update {
    display: none;
  }

  .update_date {
    width: 26%;
  }

  .update_list h4 {
    font-size: 12px;

    line-height: 20px;
  }

  /* Account page  */
  div#account_card {
    max-width: 630px;

    padding: 18px;
  }

  div#account_card p {
    font-size: 14px;
  }

  div#account_card h2 {
    font-size: 18px;
  }

  .account_input h5 {
    font-size: 14px;
  }

  button.account_btn {
    padding: 12px 37px;
  }

  .alert_msg {
    max-width: 100%;
  }

  .account_info h5 {
    font-size: 14px;
  }

  .massOrder h2 {
    display: none;
  }

  /* fund Page  */

  .transaction_menu_bar {
    max-width: 100%;
  }

  .instruction {
    width: 100%;
  }

  .instruction img {
    width: 100%;
  }

  .mass_icon_box img {
    width: 20px;
    height: auto;
  }

  .mass_icon_box {
    width: 40px;
    height: 40px;
  }

  .massOrder_question h2 {
    font-size: 16px;
  }

  .order_head,
  .service_head,
  .massOrder_head {
    height: 80px;
  }

  .hero_heading {
    width: 90%;
  }

  .hero_heading p {
    font-size: 16px;
  }

  .hero_title h4 {
    font-size: 18px;
  }

  .hero_title {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    gap: 10px;
  }

  .affiliates_list_heading {
    padding: 0px 16px;
  }

  .affiliate_list {
    padding: 0px 16px;
  }

  .affiliates_list_heading h4 {
    font-size: 14px;
  }

  .payout {
    display: none;
  }

  .ref_link {
    width: 60%;
  }

  .com_rate {
    width: 40%;
    text-align: center;
  }

  .affiliate_list h4 {
    font-size: 12px;
  }

  .conv_rate,
  .total_earn,
  .avail_earn {
    display: none;
  }

  .visit {
    width: 15%;
  }

  .reg {
    width: 30%;
  }

  .referral {
    width: 20%;
  }

  .term_box,
  .term_box_bottom {
    padding: 40px 15px;
    border-bottom: 1px solid #241d2b;
  }

  .term_box h2 {
    font-size: 18px;
  }

  .term_details_box p {
    font-size: 14px;
  }

  /* faq page  */
  .faq_accordion,
  .faq_accordion_childpanel {
    padding: 00px 15px;
  }

  .accordion_head h2,
  .accordion_body_head h2 {
    font-size: 16px;
  }

  .accordion_body_data p {
    font-size: 12px;
  }

  /* Child Panel  */

  #hero-banner .container {
    padding: 20px 25px;
    border-radius: 20px;
  }

  .hero_right_card_one {
    padding: 10px 10px;
    width: 49%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
  }

  .hero_right_card_Two {
    padding: 10px 10px;
    width: 49%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
  }

  .hero_right_card {
    flex-direction: row;
    align-items: center;
  }

  .hero_right_card_one h3,
  .hero_right_card_Two h3 {
    font-size: 14px;
    margin: 0;
  }

  .hero_right_card_one p,
  .hero_right_card_Two p {
    font-size: 12px !important;
  }

  .card_two_paragrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card_img img {
    width: 20px;
    height: 20px;
  }

  .card_img {
    width: 40px;
    height: 40px;
  }

  #hero-banner p {
    font-size: 16px;
  }

  .step_content_wrapper {
    padding: 25px 5px;
  }

  /* .step_img {
  width: 75px;
  height: 50px;
} */

  .step_text h3 {
    font-size: 18px;
  }

  .step_content_wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  div#step_wrapper {
    padding: 0;
  }

  .step_text {
    text-align: center;
    margin-top: 12px;
    margin-left: 0;
  }

  .step_text p {
    font-size: 12px;

    margin-top: 7px;
  }

  .video_box_wrapper::before {
    border-radius: 7px;
  }

  form .hero-form-input {
    font-size: 14px;
  }

  .profile-bar iconify-icon {
    font-size: 30px;
  }

  #service_page .category-container {
    padding: 20px !important;
  }

  #service_page.bg-image {
    padding-bottom: 50px;
  }

  section#service_page .custom-space-upDown {
    padding: 50px 0;
  }

  #service_page .bg-image {
    padding-top: 120px;
  }

  .category-icon iconify-icon {
    font-size: 50px;
  }

  .category-icon {
    width: 100px;
    height: 100px;
  }

  #g_follow .form-control,
  .form-check-label {
    font-size: 14px;
  }

  .timeline-padding-bottom {
    padding-bottom: 50px !important;
  }

  #g_follow .custom-padding {
    padding: 30px !important;
    margin: 30px 0 130px 0;
  }

  .sign-up-left-img img {
    width: 100%;
  }
}

@media only screen and (max-width: 425px) {
  a.navbar-brand img {
    width: 200px;
  }

  .custom-tab-card-bg::after {
    height: 70%;
  }
}

@media screen and (max-width: 375px) {
  .hero_left {
    width: 100%;
    /* Full width */
    margin-top: 10px;
    height: auto;
    text-align: center;
    /* Center content */
  }

  .hero_left .heading {
    font-size: 16px;
    /* Smaller heading for very small devices */
    line-height: 22px;
  }

  .hero_left p {
    font-size: 12px;
    /* Smaller font size */
    line-height: 18px;
  }

  .hero_pay_left h3,
  .hero_pay_right h3 {
    font-size: 14px;
    /* Smaller font size */
  }

  .col-custom-3-5,
  .col-custom-4-5 {
    flex: 0 0 100%;
    /* Full-width */
    max-width: 100%;
    margin-bottom: 15px;
    /* Add some spacing */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
    text-align: center;
  }

  .hero_middle h2 {
    font-size: 16px;
  }

  .card_img {
    width: 45px;
    height: 45px;
  }

  .service {
    width: 47%;
  }

  .newOrder h2 {
    font-size: 14px;
  }

  .service h2,
  .contact_btn h2 {
    font-size: 12px;
  }

  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .service-details {
    height: auto;
  }

  .order_head,
  .service_head {
    padding: 10px;
    flex-direction: column;
  }

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary,
  .submit_button {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 12px 10px;
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 14px;
    margin: 0;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 12px;
  }

  .service_name {
    height: 145px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  /* ## service page code ##  */
  .server_title_wrapper p {
    font-size: 14px;
  }

  .title {
    width: 50%;
  }

  .rate {
    width: 26%;
  }

  .sl {
    width: 23%;
  }

  .order_link {
    width: 53%;
  }

  .order_list_heading {
    padding: 0px 10px;
  }

  .order_list {
    padding: 10px 10px;
  }

  .order_list h4 {
    font-size: 12px;
  }

  .massOrder_question h2 {
    font-size: 15px;
  }
}

.sign-up-left-img {
  display: flex;
  justify-content: center;
}

/* menu icon  */
/* .money_item {
  display: none !important;
} */

.mobile_menu_icon {
  display: none;
}

.mobile_menu_box {
  position: relative;
}

.mobile_menu_wrapper {
  position: absolute;
  top: -16px;
  z-index: 999999;
  left: -1000px;
}

.mobile_menu_wrapper.active {
  left: 0;
  /* Move to visible when active */
}

.see_more_menu {
  display: none;
  cursor: pointer;
}

.see_more_menu.active {
  display: block;
  cursor: pointer;
}

select option {
  background-color: #17141a !important;
  outline: none;
  appearance: none;
  background-image: none;
  cursor: pointer;
}

.underline,
.underline_service {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  /* Initial position */
  width: 163px;
  height: 6px;
  background-color: #d338ec;
  border-radius: 50px;
  transition: left 0.3s ease;
  /* Smooth transition for the animation */
}

.demo_text {
  text-align: center;
  font-size: 15px;
  color: red;
  margin-top: 20px;
}

input {
  outline: none;
}

.image-tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #d338ec;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  top: 5;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.image-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#header_bottom {
  position: sticky;
  z-index: 99;
  top: 0;
}

.user_menu_dropdown {
  position: relative;
}

.custom-dropdown li {
  list-style: none;
}

.custom-dropdown {
  width: 250px;
  display: none;
  position: absolute;
  top: 103%;
  /* Position below the icon */
  left: -201px;
  color: var(--white);
  border: 1px solid #ccc;
  padding: 10px !important;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 9000000;
  background-color: var(--dark-card-bg) !important;
  border-color: var(--dark-border-color) !important;
  border-radius: 10px !important;
}

.user_menu_dropdown:hover .custom-dropdown {
  display: block;
}

#g_auth .custom-dropdown-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  padding: 8px 15px;
  text-decoration: none;
  color: var(--white);
  border-radius: 8px;
}

#g_auth .custom-dropdown-item .icon {
  font-size: 20px;
  line-height: 1;
}

#menu_position {
  z-index: 90000;
}

/* transaction card  */

.transaction_card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dddddd17;
  padding: 15px 20px;
  border-radius: 10px;
  background: #1e182394;
}

.transaction_person {
  width: 70px;
  height: 70px;
  background: #1e1823;
  border-radius: 50%;
  text-align: center;
  padding: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.transaction_type {
  width: 50%;
}

.transaction_type h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.transaction_type p {
  font-size: 12px;
  color: #a8a8a8cc;
}

.transaction_amount h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.transaction_amount p {
  font-size: 12px;
  color: #a8a8a8cc;
}

/* button after set  */
#massOrderBtn::after,
#newOrderBtn::after,
#favoriteBtn::after,
#contactBtn::after,
#serviceBtn::after,
#fund_ticket::after,
#transaction_btn::after,
.newOrder::after,
.service::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #d338ec;
  border-radius: 50px;
  opacity: 0;
  transition: all;
  transition-duration: 0.5s;
}

.activeBtn::after {
  opacity: 1 !important;
}

/* Existing desktop styles - No changes */
@media screen and (max-width: 1280px) {

  /* .order_service {
    display: none;
  }
  .order_refill {
    display: none;
  } */
  /* .order_count {
    width: 9%;
  } */
  button.order_btn,
  button.ticketOrder_btn,
  .update_btn {
    padding: 11px 16px 11px 16px;
  }

  .ticket_icon {
    min-width: 50px;
    height: 50px;
  }

  .update_btn {
    padding: 11px 11px 11px 11px;
  }

  .transaction_menu_bar {
    width: 470px;
  }

  .service_meter_box p,
  .service_description p {
    font-size: 14px;
  }

  .service_name p,
  .service_link p {
    font-size: 12px;
  }

  .hero_middle {
    text-align: center;
    margin: 0;
  }

  .hero_right_card_one,
  .hero_right_card_Two {
    width: 170.5px;
  }

  .step_img {
    width: 70px;
    height: 60px;
  }
}

/* Responsive for large mobile screens (lg and below) */
@media screen and (max-width: 1024px) {
  .hero_left {
    width: 100%;
    /* Full width */
    height: auto;
    text-align: center;
  }

  .hero_left .heading {
    font-size: 22px;
    /* Slightly larger heading */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }

  .hero_right {
    margin-top: 20px;
  }

  .hero_right_card {
    flex-direction: column;
    align-items: center;
  }

  .hero_right_card {
    display: flex;
    flex-direction: row;
  }

  #socialMediaFilter {
    justify-content: flex-start;
  }

  .hero_right_card_one,
  .hero_right_card_Two {
    width: 45%;
    /* Slightly narrower cards */
    height: auto;
    margin-bottom: 20px;
  }

  .hero_right_card_one h3,
  .hero_right_card_Two h3 {
    font-size: 18px;
    /* Adjust font size */
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 20px;
    margin: 0;
    margin-top: 10px;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 18px;
    line-height: 33px;
  }

  .card_img {
    width: 55px;
    /* Smaller icon */
    height: 55px;
  }

  .order_menu_bar {
    width: 100%;
  }

  .newOrder,
  .massOrder h2,
  .favourite h2 {
    font-size: 15px;
  }

  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .order_form,
  .service_wrapper {
    padding: 25px 25px;
  }

  .service-details {
    height: auto;
  }

  .order_head,
  .service_head {
    padding: 10px 24px;
    flex-direction: column;
  }

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .service_menu_bar {
    width: 100%;
    display: flex;
  }

  .service {
    width: 50%;
  }

  .contact_btn {
    width: 40%;
  }

  .newOrder,
  .massOrder,
  .favourite {
    width: 25%;
    margin: 5px 0;
    text-align: center;
  }

  .service,
  .contact_btn {
    width: 32%;
  }

  #massOrderBtn::after,
  #newOrderBtn::after,
  #favoriteBtn::after,
  #contactBtn::after,
  #serviceBtn::after,
  .newOrder::after,
  .service::after {
    bottom: -8px;
  }

  .order_menu_bar {
    justify-content: space-between;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary,
  .submit_button {
    width: 100%;
    height: 70px;
    font-size: 20px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 10px 10px;
  }

  .service_link h2 {
    margin: 0;
  }

  .service_name {
    height: 192px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  /* Service Page Responsive  */

  .service_filter_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .filter {
    width: 48%;
  }

  .service_filter_wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .order_search {
    width: 335px;
    margin-bottom: 7px;
  }

  input.search,
  .selectService {
    height: 46px;
  }

  /* .sl {
    width: 8%;
  }
  .title {
    width: 25%;
  }
  .title h4 {
    font-size: 12px;
  }
  .rate {
    width: 12%;
  }
  .time {
    width: 15%;
  }
  .min_max {
    width: 10%;
  }
  .refill {
    width: 11%;
  } */
  .refill button {
    width: 70px;
    height: 37px;

    border-radius: 5px;
    font-size: 12px;
  }

  .desc button {
    width: 70px;
    height: 39px;

    border-radius: 5px;

    font-size: 14px;
  }

  .service_list_heading h4,
  .service_list h4 {
    font-size: 13px;
  }

  .service_list h4 {
    font-size: 12px;
    line-height: 19px;
    font-size: 11px;
  }

  .service_list_heading,
  .service_list {
    padding: 6px 16px;
  }

  .service_list .sl {
    justify-content: flex-start;
  }

  .sl h4 {
    margin-left: 10px;
  }

  .service_list_title {
    justify-content: flex-start;
    padding: 0px 15px;
  }

  .server_title_wrapper {
    justify-content: center;
  }

  section#service_List {
    padding: 0px 12px;
  }

  /* .shop_logo {
    display: none;
  } */
  .min_max,
  .refill,
  .time {
    display: block;
  }

  /* order list page  */
  /* .order_filter_btn {
    display: none;
  } */

  /* .order_charge,
  .order_count,
  .order_service,
  .order_refill,
  .order_remain,
  .order {
    display: none;
  } */
  /* .order_sl {
    width: 7%;
  }
  .order_date {
    width: 12%;
  }
  .order_link {
    width: 25%;
  }
  .order_status {
    width: 23%;
  }
  .order_quantity {
    width: 12%;
  } */
  .selectOrder {
    width: 335px;
    padding: 0px 16px 0px 16px;
    height: 46px;
    border-radius: 8px;
    background: v ar(--box-bg);
    border: none;
    display: block;
    margin-bottom: 10px;
  }

  .order_search input {
    width: 100%;
    height: 46px;
  }

  /* mass order  */
  .massOrder_form,
  .massOrder_wrapper {
    padding: 15px 20px;
  }

  .massOrder-details,
  .mass-order-form {
    height: auto;
  }

  .massOrder_menu_bar {
    width: 100%;

    margin: 0px 20px;
  }

  .massOrder_question {
    padding: 0px 20px;
  }

  .massOrder-details {
    margin: 20px 0px;
  }

  /* Update page  */
  .card_box_wrapper {
    padding: 30px 20px;
  }

  .card_box_wrapper h2 {
    font-size: 17px;
  }

  /* Dashboard Page  */
  .next_title {
    width: 100%;
  }

  /* 
  .card_name {
    width: 45%;
  }
  .card_new,
  .card_junior,
  .frequent {
    width: 17%;
  } */
  /* .elite,
  .vip,
  .master {
    display: none;
  } */

  /* Ticket Page  */
  #order_sec_right,
  #order_sec_left {
    padding: 0;
  }

  .newOrder,
  .massOrder,
  .favourite,
  .service,
  .contact_btn,
  .massOrder,
  .massOrder_btn {
    height: 45px;
  }

  .order_head,
  .service_head,
  .massOrder_head {
    height: 90px;
  }

  .order_form,
  .service_wrapper {
    padding: 25px 25px;
  }

  .ticket_icon {
    min-width: 50px;
    height: 50px;
  }

  .ticket_history {
    height: 100px;
  }

  .ticket_status h4 {
    font-size: 23px;
  }

  .ticket_status p {
    font-size: 19px;
  }

  .ticket_transaction_details p {
    font-size: 18px;
  }

  .order_input input,
  .order_input_blank input,
  .ticket_order_input input,
  .ticket_order_input_blank input,
  .massOrder_input_blank textarea,
  .ticketOrder_input_blank textarea {
    height: 70px;
  }

  .order_select,
  .ticket_select {
    height: 70px;
  }

  /* update Page  */
  .update_filter_btn {
    display: none;
  }

  .order_select_btn {
    display: block;
    width: 335px;
    margin-bottom: 7px;
    height: 46px;
    border: 1px solid var(--list-border);
    background-color: var(--box-bg);
    border-radius: 8px;
    padding: 0px 10px;
    max-width: 100%;
  }

  /* .update {
    width: 40%;
  }
  .update_date {
    width: 15%;
  }
  .update_service {
    width: 40%;
  } */

  /* account page  */
  .account_right {
    margin-top: 20px;
  }

  div#account_card {
    max-width: 100%;
  }

  .newOrder,
  .massOrder h2,
  .favourite h2 {
    font-size: 20px;
  }

  .newOrder h2,
  .massOrder h2,
  .favourite h2,
  .service h2,
  .contact_btn h2,
  .massOrder_btn h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 25.6px;
    margin-left: 8px;
  }

  .transaction_menu_bar {
    width: 630px;
  }

  /* faq page  */
  .faq_head {
    width: 0px 55px !important;
  }

  #hero-banner p {
    font-size: 21px;
  }

  div#hero-pay {
    width: 500px;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .hero_left .heading {
    font-size: 30px;
    margin-bottom: 15px;
  }

  /* tab menu  */
  .bottom_user_nav .nav_item .nav-link {
    font-size: 12px;

    padding: 19px 6px;
  }

  div#\32 nd_dot {
    display: none;
  }

  .step_img {
    width: 70px;
    height: 70px;
  }

  .step_text h3 {
    font-size: 28px;
  }

  .step_text p {
    font-size: 18px;
  }

  .form_card {
    width: 100%;
    padding: 50px 30px;
    height: 560px;
    margin-bottom: 15px;
  }

  .accordion_head {
    margin-top: 20px;
  }

  .video_box_wrapper img {
    width: 100%;
  }

  .video_box_wrapper {
    height: auto;
  }

  .play_btn {
    position: absolute;

    width: 60px;
    height: 60px;
    padding: 18px;
  }

  .video_box_wrapper::before {
    border-radius: 9px;
  }

  /* all menu show  */
  .service_list_heading,
  .order_list_heading,
  .update_list_heading,
  .service_list,
  .order_list,
  .update_list,
  .update_List {
    width: 100%;
  }

  .affiliates_list_heading,
  .affiliate_list {
    width: 935px;
  }

  #service_List_Wrapper,
  #order_list_wrapper,
  #update_list_wrapper {
    overflow-x: auto;
  }

  .service_list_title {
    width: 100%;
  }

  .desc {
    width: 8%;
  }

  .update_list_heading,
  .update_list {
    width: 700px;
  }

  div#dashboard_card_header,
  #dashboard_card_body {
    width: 800px;
  }

  .affiliates_list_heading h4 {
    font-size: 13px;
  }

  .update_service {
    width: 28%;
  }

  .update {
    width: 42%;
  }
}

/* Responsive for medium screens (md and below) */
@media screen and (max-width: 768px) {
  #hero-banner {
    height: auto;
  }

  #socialMediaFilter {
    background-color: var(--social-bar);
    padding: 0px 18px;
    justify-content: space-between;
  }

  div#hero-pay {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .hero_left {
    width: 100%;
    /* Full width for tablets */
    height: auto;
    /* Let height adjust */
    text-align: center;
    /* Center text */
    gap: 0px;
  }

  .hero_left .heading {
    font-size: 20px;
    /* Slightly larger for tablets */
    line-height: 26px;
  }

  #hero-pay {
    width: 100%;
    /* Full width for tablets */
    justify-content: space-around;
    /* Spread content */
  }

  .hero_pay_left h3,
  .hero_pay_right h3 {
    font-size: 17px;
    /* Adjust font size for tablets */
  }

  .col-custom-3-5,
  .col-custom-4-5 {
    flex: 0 0 100%;
    /* Full width for tablets */
    max-width: 100%;
    margin-bottom: 20px;
    /* Add spacing between sections */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  /* menu section  */

  /* .massOrder h2,
  .favourite h2 {
    display: none;
  } */
  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .service-details {
    height: auto;
  }

  /* .order_head,
  .service_head {
    padding: 10px;
    flex-direction: column;
  } */

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary,
  .submit_button {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 16px 16px;
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 17px;
    margin: 0;
    margin-top: 10px;
  }

  .service_link h2 {
    margin: 0;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 15px;
    line-height: 25px;
  }

  .service_name {
    height: 145px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  /* Service Page  */
  .filter {
    width: 100%;
    margin-bottom: 7px;
  }

  /* mass order  */
  /* mass order  */
  .massOrder,
  .favourite,
  .service {
    width: 30%;
    margin: 5px 0;
    text-align: center;
  }

  .newOrder {
    width: 40%;
    margin: 5px 0;
    text-align: center;
  }

  .massOrder,
  .favourite,
  .service {
    width: 42%;
  }

  .order_form,
  .service_wrapper {
    padding: 25px 20px;
  }

  /* Ticket Page Section Code  */
  section#order .ticket_select {
    display: block;
  }

  .order_input input,
  .order_input_blank input,
  .ticket_order_input input,
  .ticket_order_input_blank input,
  .massOrder_input_blank textarea,
  .ticketOrder_input_blank textarea {
    height: 46px;
  }

  .order_select,
  .ticket_select {
    height: 46px;
  }

  .ticket_history {
    padding: 10px;
  }

  .ticket_status h4 {
    font-size: 14px;
  }

  .ticket_status p {
    font-size: 12px;
  }

  .ticket_transaction_details p {
    font-size: 14px;
  }

  #ticketOrder_filter {
    display: none;
  }

  section#order {
    padding: 0px 20px;
    padding-top: 15px;
  }

  .massOrder_form,
  .massOrder_wrapper {
    padding: 15px 51px;
  }

  .massOrder-section {
    padding: 0px 8px;
  }

  .massOrder_menu_bar {
    width: 100%;
    margin: 0px 51px;
  }

  .massOrder-details {
    height: auto;
    margin: 20px 0px;
  }

  /* mobile menu  */
  header {
    background: none;
  }

  .bottom_user_nav {
    display: none;
  }

  .mobile_menu_wrapper {
    width: 100%;
    height: auto;
    background-color: var(--menu-bg);
    border-radius: 20px;
    margin-top: 15px;
    display: block;
    backdrop-filter: blur(50px);
    transition: 0.3s;
    z-index: 999999;
  }

  .menu_heading h4 {
    font-family: var(--primary-font);
    color: var(--white);
    font-size: 16px;
    font-weight: 600 !important;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 0px;
  }

  .cancel_icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    background: #413547;
    border-radius: 100%;
    cursor: pointer;
  }

  .cancel_icon img {
    width: 100%;
    margin: auto;
    padding: 2px;
  }

  .menu_heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid var(--social-bar);
    padding: 0px 13px;
    background: #211a26;
    border-radius: 20px 20px 0px 0px;
  }

  .user_profile {
    width: 26%;
    height: auto;
  }

  .user_profile img {
    width: 100%;
  }

  .user_info {
    width: 70%;
    font-family: var(--gotham-font);
  }

  .logged_user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px;
    padding: 0px 30px;
  }

  .user_info h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 24.3px;
  }

  .user_info p {
    font-family: var(--primary-font);
    color: var(--white);
    font-size: 14px;
    line-height: 18.9px;
    margin: 0;
  }

  .menu_list {
    overflow: auto;
    height: 420px;
    padding: 13px 30px;
  }

  .mobile_menu_btn .btn_active {
    background: var(--submit-button-bg);
  }

  .mobile_menu_btn .btn_img {
    width: 30px;
  }

  /* update response page  */
  .card_box_wrapper {
    padding: 30px 20px;
  }

  .apibox_wrapper h3 {
    font-size: 18px;
  }

  .api_content h4 {
    font-size: 14px;
  }

  .api_card_header {
    height: 45px;

    padding: 0px 12px;
  }

  .card_box_wrapper h2 {
    font-size: 14px;
  }

  .api_content h4 {
    font-size: 12px;
  }

  .tag_btn {
    margin-left: 5px;
  }

  .example_box h3 {
    font-size: 16px;
  }

  /* Dashboard Page  */
  .card_wrapper h4,
  .card_wrapper_next h4 {
    font-size: 15px;
  }

  .card_body h4 {
    font-size: 13px;
  }

  /* .card_junior,
  .frequent,
  .elite,
  .vip,
  .master {
    display: none;
  } */
  /* .card_name {
    width: 70%;
  } */
  .card_body h4 {
    font-size: 12px;
  }

  .details p {
    font-size: 14px;
  }

  /* update page  */
  #update_filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  /* .update {
    display: none;
  } */
  /* .update_date {
    width: 26%;
  } */
  .update_list h4 {
    font-size: 12px;

    line-height: 20px;
  }

  /* Account page  */
  div#account_card {
    max-width: 630px;

    padding: 18px;
  }

  div#account_card p {
    font-size: 14px;
  }

  div#account_card h2 {
    font-size: 18px;
  }

  .account_input h5 {
    font-size: 14px;
  }

  button.account_btn {
    padding: 12px 37px;
  }

  .alert_msg {
    max-width: 100%;
  }

  .account_info h5 {
    font-size: 14px;
  }

  .massOrder h2 {
    display: none;
  }

  /* fund Page  */

  .transaction_menu_bar {
    max-width: 100%;
  }

  .instruction {
    width: 100%;
  }

  .instruction img {
    width: 100%;
  }

  .mass_icon_box img {
    width: 20px;
    height: auto;
  }

  .mass_icon_box {
    width: 40px;
    height: 40px;
  }

  .massOrder_question h2 {
    font-size: 16px;
  }

  .order_head,
  .service_head,
  .massOrder_head {
    height: 80px;
  }

  .hero_heading {
    width: 90%;
  }

  .hero_heading p {
    font-size: 16px;
  }

  .hero_title h4 {
    font-size: 18px;
  }

  .hero_title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;
  }

  .affiliates_list_heading {
    padding: 0px 16px;
  }

  .affiliate_list {
    padding: 0px 16px;
  }

  /* .payout {
    display: none;
  } */
  /* .ref_link {
    width: 60%;
  } */
  /* .com_rate {
    width: 40%;
    text-align: center;
  } */
  .affiliate_list h4 {
    font-size: 12px;
  }

  /* .conv_rate,
  .total_earn,
  .avail_earn {
    display: none;
  } */
  /* .visit {
    width: 15%;
  }
  .reg {
    width: 30%;
  }
  .referral {
    width: 20%;
  } */
  .term_box,
  .term_box_bottom {
    padding: 40px 15px;
    border-bottom: 1px solid #241d2b;
  }

  .term_box h2 {
    font-size: 18px;
  }

  .term_details_box p {
    font-size: 14px;
  }

  /* faq page  */
  .faq_accordion,
  .faq_accordion_childpanel {
    padding: 00px 15px;
  }

  .accordion_head h2,
  .accordion_body_head h2 {
    font-size: 16px;
  }

  .accordion_body_data p {
    font-size: 12px;
  }

  /* Child Panel  */

  #hero-banner {
    padding: 20px 10px;
    padding-bottom: 0px;
  }

  .hero_right_card_one {
    padding: 10px 10px;
    width: 49%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
  }

  .hero_right_card_Two {
    padding: 10px 10px;
    width: 49%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
  }

  .hero_right_card {
    flex-direction: row;
    align-items: center;
  }

  .hero_right_card_one h3,
  .hero_right_card_Two h3 {
    font-size: 14px;
    margin: 0;
  }

  .hero_right_card_one p,
  .hero_right_card_Two p {
    font-size: 12px !important;
  }

  .card_two_paragrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card_img img {
    width: 20px;
    height: 20px;
  }

  .card_img {
    width: 40px;
    height: 40px;
  }

  #hero-banner p {
    font-size: 16px;
  }

  .step_content_wrapper {
    padding: 25px 5px;
  }

  /* .step_img {
    width: 75px;
    height: 50px;
  } */

  .step_text h3 {
    font-size: 18px;
  }

  .step_content_wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  div#step_wrapper {
    padding: 0;
  }

  .step_text {
    text-align: center;
    margin-top: 12px;
    margin-left: 0;
  }

  .step_text p {
    font-size: 12px;

    margin-top: 7px;
  }

  .video_box_wrapper::before {
    border-radius: 7px;
  }

  #money_item {
    display: flex !important;
  }

  .currency-menu {
    display: none;
  }

  .top_right .user__menu .user_menu_item {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 5px var(--primary-color);
  }

  .top_right .user__menu .user_menu_item .icon {
    font-size: 20px;
  }

  header .top_navigations_menu .top_right .user__menu {
    gap: 8px;
  }

  .top_left {
    width: 42%;
  }

  .mobile_menu_icon {
    font-size: 35px;
    color: var(--white);
    display: block;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
    height: 5px;
  }

  .transaction_data {
    padding: 15px 15px;
  }

  .transaction_card {
    padding: 15px 10px;
    gap: 1;
  }

  .transaction_type h3,
  .transaction_amount h3 {
    font-size: 15px;
  }

  .transaction_type p,
  .transaction_amount p {
    font-size: 10px;
  }

  .transaction_person {
    width: 50px;
    height: 50px;
  }

  #g_auth .custom-dropdown-item {
    font-size: 14px;
    padding: 6px 10px;
  }

  #g_auth .custom-dropdown-item .icon {
    font-size: 18px;
  }
}

@media screen and (max-width: 640px) {
  #hero-banner>.container {
    height: auto;
  }

  .hero_left {
    width: 100%;
    /* Make full-width */
    margin-top: 10px;
    height: auto;
    text-align: center;
    /* Center text for mobile */
  }

  .hero_left .heading {
    font-size: 18px;
    /* Adjust heading font size */
    line-height: 24px;
  }

  .hero_left p {
    font-size: 14px;
    /* Smaller font size for mobile */
  }

  #hero-pay {
    width: 100% !important;
    /* Make full width */
    justify-content: space-around;
    /* Spread content */
    margin-top: 15px;
    /* Add margin for spacing */
  }

  .hero_pay_left h3,
  .hero_pay_right h3 {
    font-size: 16px;
    /* Adjust font size */
  }

  .col-custom-3-5,
  .col-custom-4-5 {
    flex: 0 0 100%;
    /* Make full-width for small screens */
    max-width: 100%;
    margin-bottom: 20px;
    /* Add spacing between sections */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
    text-align: center;
    /* Center align for mobile */
  }

  .card_img {
    width: 50px;
    /* Reduce image size */
    height: 50px;
  }

  .hero_right_card p,
  .card_two_para {
    font-size: 12px;
    /* Adjust font size */
  }

  section.social-bar {
    padding: 0px 10px;
  }

  /* menu section  */

  .massOrder,
  .favourite {
    width: 20%;
  }

  .massOrder h2,
  .favourite h2 {
    display: none;
  }

  .newOrder h2 {
    font-size: 14px;
  }

  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .service-details {
    height: auto;
  }

  .order_head,
  .service_head {
    padding: 10px;
    flex-direction: column;
  }

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary .submit_button {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 16px 16px;
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 17px;
    margin: 0;
    margin-top: 10px;
  }

  .service_link h2 {
    margin: 0;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 12px;
    line-height: 25px;
  }

  .service_name {
    height: 145px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  #order_filter {
    display: flex;
    justify-content: space-evenly !important;
  }

  section#order_List {
    padding: 0px 10px;
  }

  .massOrder_menu_bar {
    width: 507px;
  }

  .massOrder_form {
    padding: 15px;
    flex-direction: row;
  }

  .massOrder_question {
    padding: 0px 15px;
  }

  .massOrder_wrapper {
    padding: 15px;
  }

  .mass_icon_box {
    width: 50px;
    height: 50px;
  }

  .massOrder_wrapper p {
    font-size: 14px;
  }

  .massOrder_wrapper ul li {
    font-size: 14px;
  }

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

  .massOrder_menu_bar {
    width: 100%;
    margin: 0px 15px;
  }

  .service h2,
  .contact_btn h2 {
    font-size: 14px;
  }

  #hero-pay {
    width: 100% !important;
    /* Full width for small devices */
    justify-content: space-between;
    margin: 25px 0px;
  }
}

/* Responsive for small screens (sm and below) */
@media screen and (max-width: 375px) {
  .hero_left {
    width: 100%;
    /* Full width */
    margin-top: 10px;
    height: auto;
    text-align: center;
    /* Center content */
  }

  .hero_left .heading {
    font-size: 16px;
    /* Smaller heading for very small devices */
    line-height: 22px;
  }

  .hero_left p {
    font-size: 12px;
    /* Smaller font size */
    line-height: 18px;
  }

  .hero_pay_left h3,
  .hero_pay_right h3 {
    font-size: 14px;
    /* Smaller font size */
  }

  .col-custom-3-5,
  .col-custom-4-5 {
    flex: 0 0 100%;
    /* Full-width */
    max-width: 100%;
    margin-bottom: 15px;
    /* Add some spacing */
  }

  .hero_middle {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
    text-align: center;
    /* Center for small devices */
  }

  .hero_middle h2 {
    font-size: 16px;
    /* Adjust heading size */
  }

  .card_img {
    width: 45px;
    /* Reduce icon size */
    height: 45px;
  }

  .service {
    width: 47%;
  }

  .newOrder h2 {
    font-size: 14px;
  }

  .service h2,
  .contact_btn h2 {
    font-size: 12px;
  }

  .order-form {
    height: auto;
    margin-bottom: 15px;
  }

  .order-section {
    padding: 10px;
  }

  .service-details {
    height: auto;
  }

  .order_head,
  .service_head {
    padding: 10px;
    flex-direction: column;
  }

  .order_input .search_icon,
  .select_icon {
    left: 8px;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    padding-left: 25px !important;
  }

  .order_input,
  .order_input_blank,
  .category-select {
    width: 100%;
    margin: 10px 0;
  }

  .order_input input,
  .order_input_blank input,
  .order_select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  #g_auth .btn-primary,
  .submit_button {
    width: 100%;
    height: 50px;
    font-size: 16px;
  }

  .service_name,
  .service_meter_box,
  .service_description {
    padding: 12px 10px;
  }

  .service_name h2,
  .service_meter_box h2,
  .service_description h2 {
    font-size: 14px;
    margin: 0;
  }

  .service_name p,
  .service_meter_box p,
  .service_description p {
    font-size: 12px;
  }

  .service_name {
    height: 145px;
  }

  .service_link {
    height: 85px;
  }

  .service_description {
    height: auto;
  }

  /* ## service page code ##  */
  .server_title_wrapper p {
    font-size: 18px;
  }

  .order_list_heading {
    padding: 0px 10px;
  }

  .order_list {
    padding: 10px 10px;
  }

  .order_list h4 {
    font-size: 12px;
  }

  .massOrder_question h2 {
    font-size: 15px;
  }
}

/* REPAIR CODES */
.nav_menu_card {
  border-bottom: 2.5px solid #483954;
}

.nav_menu_card .nav-item .nav-link {
  color: #C3C2C3;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 0px;
  position: relative;
  bottom: -2.2px;
}

.nav_menu_card .nav-item .nav-link .icon {
  font-size: 25px;
  line-height: 0;
}

.nav_menu_card .nav-item .nav-link .text {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.nav-pills.nav_menu_card .nav-link.active {
  color: var(--white) !important;
  background: none;
  border: none;
  border-bottom: 3px solid #D338EC;
}

.card,
.hero {
  position: static;
  z-index: 0;
}

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

.card_info_text .icon {
  width: 50px;
  height: 50px;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 1px solid #372E3F;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(2.5px);
  border-radius: 10px;
}


#history-search {
  position: relative;
}

#history-search .input-group-btn button {
  position: absolute;
  right: 0px;
  top: 0px;
  background: #9C27B0;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 0 10px 10px 0px;
}

.select2-results__option {
  border-bottom: 0.5px solid #2f2f2f;
}
.row.ticket-message-block.ticket-message-left,
.row.ticket-message-block.ticket-message-right{
  margin-bottom: 15px;
}

.row.ticket-message-block.ticket-message-right .ticket-message {
  text-align: right;
  font-size: 14px;
  background: #1e1823;
  padding: 10px;
  border-radius: 10px;
}

.row.ticket-message-block.ticket-message-left .ticket-message {
  text-align: left;
  font-size: 14px;
  background: #7516a936;
  padding: 10px;
  border-radius: 10px;
}

.info.text-right{
  text-align: right;
}


/* Mobile Menu animations */
@media only screen and (max-width:992px) {
  header {
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  .top_nav_logo,
  .mobile_menu_icon {
    transition: 1s;
  }

  header.fix_header .top_navigations_menu {
    border-bottom: 0px;
    backdrop-filter: blur(5px);
    background: #100c1399;
  }

  header.fix_header .top_nav_logo {
    transform: translateX(50px);
  }

  header.fix_header .mobile_menu_icon {
    transform: translateY(-65px);
  }

  .card.card_type_1 .card-body {
    padding: 15px 15px;
  }

  .select2-container .select2-selection__text,
  .form-group select,
  .form-group input,
  .form-group label {
    font-size: 14px;
  }

  .nav_menu_card .nav-item .nav-link {
    gap: 4px;
  }

  .nav_menu_card .nav-item .nav-link .icon {
    font-size: 20px;
  }

  .nav_menu_card .nav-item .nav-link .text {
    font-size: 14px;
  }
  .blur-bg-sign-up{
    height: auto!important;
    min-height: auto!important;
  }
}

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

  /* Sevices Page Responsive */
  .service_list_heading {
    display: none;
  }

  .service_list_title {
    text-align: center;
  }

  .service_list {
    display: grid;
    position: relative;
    gap: 15px;
    grid-template-areas:
      "idFav idFav idFav idFav idFav idFav idFav idFav idFav idFav idFav idFav"
      "title title title title title title title title title title title title"
      "rate rate rate rate minmax minmax minmax minmax  refill refill  refill refill"
      " time time time time time time desc desc desc desc desc desc";
    padding: 15px 15px;
  }

  .service_list .sl {
    display: flex;
    gap: 5px;
    align-items: center;
    width: auto;
    grid-area: idFav;
    justify-content: center;
  }

  .service_list .title {
    width: auto;
    grid-area: title;
    justify-content: center;
  }

  .service_list .shop_logo {
    width: auto;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 25px;
  }

  .service_list .logo_wrap {
    width: 50px !important;
    height: 50px !important;
  }

  .service_list .rate {
    width: auto !important;
    display: flex;
    position: relative;
    grid-area: rate;
    justify-content: center;
    margin-top: 15px;
  }

  .service_list .min_max {
    width: auto !important;
    display: flex;
    position: relative;
    grid-area: minmax;
    justify-content: center;
    margin-top: 15px;
  }

  .service_list .refill {
    width: auto !important;
    display: flex;
    position: relative;
    grid-area: refill;
    justify-content: center;
    margin-top: 15px;
  }

  .service_list .time {
    width: auto !important;
    display: flex;

    grid-area: time;
    justify-content: center;
  }

  .service_list .desc {
    width: auto !important;
    display: flex;

    grid-area: desc;
    justify-content: center;
  }

  .service_list h4 {
    width: auto;
    font-size: 16px;
    padding: 5px 0px;
    text-align: center;
    line-height: 1.4;
  }

  .server_title_wrapper img {
    width: 45px;
    height: 45px;
  }

  .desc button {
    width: 80%;
  }

  .service_list .rate::before {
    content: "Rate/1000";
    position: absolute;
    color: var(--primary-color);
    top: -20px;
    font-size: 14px;
  }
  .service_list .min_max::before {
    content: "Min/Max";
    position: absolute;
    color: var(--primary-color);
    top: -20px;
    font-size: 14px;
  }
  .service_list .refill::before {
    content: "Refill";
    position: absolute;
    color: var(--primary-color);
    top: -20px;
    font-size: 14px;
  }

  /* Order Page */

  .order_filter_btn{
    width: 100%;
  }

  div#order_filter{
    gap: 15px;
  }

  #order_list_wrapper .order_list{
    display: grid;
    position: relative;
    gap: 10px;
    padding: 30px 20px;
     grid-template-areas:
    "orderNum orderNum orderNum orderNum orderNum orderNum orderDate orderDate orderDate orderDate orderDate orderDate"
    "orderLink orderLink orderLink orderLink orderLink orderLink orderLink orderLink orderLink orderLink orderLink orderLink"
    "orderCharg orderCharg orderCharg orderCharg  orderCount orderCount orderCount orderCount orderQunt orderQunt orderQunt orderQunt"
    "orderServ orderServ orderServ orderServ orderServ orderServ orderServ orderServ orderServ orderServ orderServ orderServ"
    "orderRefill orderRefill orderRefill orderRefill orderRefill orderRefill orderRemain orderRemain orderRemain orderRemain orderRemain orderRemain"
    "orderStats orderStats orderStats orderStats orderStats orderStats orderAction orderAction orderAction orderAction orderAction orderAction"
    ; 
  }

  #order_list_wrapper .order_list_heading{
    display: none;
  }

  /* grid-area: minmax; */
  .order_list .order_sl{
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderNum;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }

  .order_list .order_sl::before{
    content: 'Order Id';
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_date{
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderDate;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }

  .order_list .order_date::before{
    content: "Date";
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_link {
    grid-area: orderLink;
    width: 100%;
    border: 1px dashed #9c27b0;
    padding: 7px 10px;
    border-radius: 5px;
    margin: 10px 0px;
  }

  .order_list .order_charge {
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderCharg;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }

  .order_list .order_charge::before{
    content: "Charges";
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_count{
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderCount;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }

  .order_list .order_count::before{
    content: "Start Count";
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_quantity{
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderQunt;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }

  .order_list .order_quantity::before{
    content: "Quantity";
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_service{
    grid-area: orderServ;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
  }
  .order_list .order_refill{
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderRefill;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }
  .order_list .order_refill::before{
    content: 'Actions';
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_remain{
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: orderRemain;
    width: 100%;
    text-align: center;
    margin-top: 14px;
  }
  
  .order_list .order_remain::before{
    content: 'Remain';
    position: absolute;
    top: -19px;
    font-size: 12px;
  }

  .order_list .order_status{
    grid-area: orderStats;
    width: 100%;
    text-align: center;
  }

  .order_list .order{
    grid-area: orderAction;
    width: 100%;
    text-align: center;
  }

  .btn-sm {
    font-size: 12px !important;
    height: 30px !important;
    width: auto !important;
    padding: 5px 20px;
}
}