:root {
    --bg-color-light: #transparent;
    --text-color-light: #000000;
    --bg-color-dark: #121212;
    --text-color-dark: #f1f1f1;
  }
  @font-face {
    font-family: 'worldofsmm-sans';
    src: url('https://storage.perfectcdn.com/f045pc/37615udn032ua6lz.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'worldofsmm-sans';
    src: url('https://storage.perfectcdn.com/f045pc/py5mx8yrh427yn58.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'worldofsmm-sans';
    src: url('https://storage.perfectcdn.com/f045pc/dc9xrcodtpkack70.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'worldofsmm-sans';
    src: url('https://storage.perfectcdn.com/f045pc/c479jcdl6jfeubl6.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }
  @font-face {
    font-family: 'worldofsmm-sans';
    src: url('https://storage.perfectcdn.com/f045pc/zqqbrlzjplsz3j21.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }
  
  
  /* Optional example usage */
  body {
    font-family: 'TikTok Sans', sans-serif;
    font-weight: 400;
    transition: background-color 0.3s, color 0.3s;
  }
  body.userbody {
    background-color: #f6f7f9;
  }
  .backgroundGradis {
    display: none;
  }
  body[data-theme="light"] {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
    transition: background-color 0.3s, color 0.3s;
  }
  body[data-theme="dark"] {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
    transition: background-color 0.3s, color 0.3s;
  }
  h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: 'worldofsmm-sans',sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1.5px;
  }
  .btn.btn-primary {
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 600;
    background-color: #F43936 !important;
    border: 0 !Important;
    text-transform: uppercase;
    box-shadow: none;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn.btn-primary:hover {
    background-color: #e0302d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 57, 54, 0.22);
  }
  .btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
  }
  .btn.btn-primary:focus-visible {
    outline: 2px solid #f4393680;
    outline-offset: 2px;
  }
.btn.btn-secondary {
    background-color: #17181c !important;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 600;
    border: 0 !Important;
    text-transform: uppercase;
    box-shadow: none;
    position: relative;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn.btn-secondary:hover {
    background-color: #26272c !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }
  .btn.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
  }
/*@keyframes dots {
  0% {
  background-position:
  0 0,
  4px 4px;
  }
  100% {
  background-position:
  8px 0,
  12px 4px;
  }
  }*/
  
  .topCont .topSubheading {
    display: inline-block;
    color: #fff;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding-right: 15px;
    font-weight: 500;
    font-size: 14px;
    background-color: #17181c !important;
    box-shadow: none;
  }
  .topCont ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    list-style: none;
    gap: 6px;
  }
  .topCont h1 span {
    color: #F43936;
    white-space: nowrap;
    font-weight: 800;
  }
  .topCont ul i {
    margin-right: 6px;
    color: #fff;
    padding: 8px;
    border-radius: 20px;
    font-size: small;
    background-color: #F43936 !important;
  }
  
  #topBuyingNotifier {
    width: 300px;
    height: 80px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #ffffff 70%, #ffffff00 100%);
    border-radius: 10px;
    padding: 0 20px;
  }
  .buyingNotif {
    position: absolute;
    width: calc(100% - 30px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: slideUp 12s infinite;
    opacity: 0;
  }
  .buyingNotif:nth-child(1) { animation-delay: 0s; }
  .buyingNotif:nth-child(2) { animation-delay: 3s; }
  .buyingNotif:nth-child(3) { animation-delay: 6s; }
  .buyingNotif:nth-child(4) { animation-delay: 9s; }
  
  .buyingNotif {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
  }
  .buyingNotif > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .buyingNotif strong {
    font-size: 14px;
    color: #000;
    line-height: 1;
  }
  .buyingNotif span {
    font-size: 12px;
    color: #47bc86;
    margin-left: auto;
    font-weight: bold;
  }
  .buyingNotif small {
    background: linear-gradient(91deg, #F43B34 5.59%, #EC195E 99.05%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    line-height: 1;
    margin-top: 4px;
  }
  
  @keyframes slideUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    5% {
      transform: translateY(0);
      opacity: 1;
    }
    20% {
      transform: translateY(0);
      opacity: 1;
    }
    25% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
  .pulse {
    width: 10px;
    height: 10px;
    background-color: #0a0; /* deeper green */
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 150, 0, 0.7);
    animation: pulseEffect 1.5s infinite;
  }
  @keyframes pulseEffect {
    0% {
      box-shadow: 0 0 0 0 rgba(0, 150, 0, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(0, 150, 0, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(0, 150, 0, 0);
    }
  }
  
  .prfoleGrp p {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .prfoleGrp img {
    max-width: 120px;
  }
  .prfoleGrp {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 300px;
    height: 80px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #ffffff 70%, #ffffff00 100%);
    border-radius: 10px;
    padding: 0 20px;
  }
  .topSecfoother {
    display: flex;
    margin-top: 20px;
  }
  
  .loginCardtop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
  }
  .loginCardtop h3 {
    margin-bottom: 5px;
    margin-top: 20px;
    color: #fff;
  }
  .loginCardtop p {
    color: #ffffff99;
  }
  .loginCardtop img {
    background: linear-gradient(91deg, #F43B34 5.59%, #EC195E 99.05%) !important;
    border: 1px solid #ffffff20 !important;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: none;
    width: 45px;
    padding: 10px;
    margin-bottom: 15px;
  }
  .loginCard {
    background: #fff;
    border-radius: 20px;
    padding: 40px 25px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .loginCard .form-control {
    background: #fff2f3;
    border: 1px solid #dc354530;
    padding: 10px;
    box-shadow: 0 0 0px 2px #dc354520;
    margin: 2px 0;
  }
  .form-group {
    margin-bottom: 8px;
  }
  .googleBtngrp {
    max-width: 250px;
    margin: auto;
    margin-bottom: 25px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    border-radius: 20px;
  }
  img.formLogotop {
    display: block;
    width: 300px;
    margin: auto;
    margin-bottom: 25px;
  }
  .topDeisng {
    display: block;
    height: 300px;
    width: 200%;
    background-color: #F43936 !important;
    position: absolute;
    left: -50%;
    top: -55px;
    border-radius: 0 0 50% 50%;
    z-index: -1;
  }
  
  .dividerLogn:before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: #F4393620;
  }
  .dividerLogn:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background: #F4393620;
  }
  .dividerLogn {
    color: #F43936;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 70%;
    white-space: nowrap;
    gap: 15px;
    margin-bottom: 15px;
    min-width: 300px;
  }
  
  .checkValidsection small {
    margin-bottom: 4px;
    display: block;
    font-weight: bold;
  }
  
  .checkValidsection div p span {
    color: green;
    margin-left: 4px;
  }
  .checkValidsection div p {
    margin: 0;
  }
  .checkValidsection div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .checkValidsection {
    background: #efefef;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 1;
  }
  
  .regustercta p {
    margin: 0;
  }
  .regustercta {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
  }
  .loginformMiddl {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  section.topSec {
    padding: 60px 0;
    background: url(https://storage.perfectcdn.com/oezfqb/ulty8w4pm4rpy172.png);
    background-size: cover;
    background-position: center;
    margin-top: -90px;
    padding-top: 150px;
  }
  
  @media (max-width: 767px) {
    .topSecfoother > div {
      background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #ffffff 70%, #ffffff00 100%) !important;
      width: 100% !important;
    }
    .topSecfoother {
      flex-direction: column;
      gap: 10px;
    }
  }
  
  nav.guestnav a.navbar-brand img {
    max-width: 200px;
    height: auto;
  }
  nav.guestnav a.navbar-brand {
    padding: 0;
  }
  nav.guestnav {
    padding: 15px;
  }
  .blurredloader {
    display: block;
    width: 100%;
    height: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(2px);
    z-index: 2;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  }
  
  
  section.brandSlidesec {
    padding: 40px 0;
    overflow: hidden;
  }
  .brand-slider {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    padding: 15px 0;
    transform: rotate(2deg);
  }
  .brand-slider-track {
    display: flex;
    width: max-content; /* 10 logos duplicated */
    animation: scroll 30s linear infinite;
  }
  .brand-slide {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    font-size: 18px;
    color: #000;
  }
  .brand-slide img {
    width: 35px;
    object-fit: contain;
    transition: filter 0.3s ease;
    margin-right: 10px;
  }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes scrollinv {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
  
  .statsRow {
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: 10px;
  }
  .statsInscard {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    overflow: hidden;
  }
  .statsInscardwrap {
    padding: 40px 25px;
  }
  .statsInscard.redbgstats {
    background-color: #F43936 !important;
    border: 1px solid #ffffff20;
  }
  .statsInscard.redbgstats p {
    color: #ffffff99;
    font-size: 16px;
    text-align: center;
  }
  .statsInscard.redbgstats h3 {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: xx-large;
  }
  .statsInscard.redbgstats {
    background-color: #F43936 !important;
    border: 1px solid #ffffff20;
    overflow: hidden;
  }
.starsRev {
    color: #ffbf00;
    text-align: center;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #ffffff20;
    padding: 10px;
    width: fit-content;
    margin: auto;
    border-radius: 40px;
    border: 1px solid #ffffff20;
    backdrop-filter: blur(14px);
  }
  
  img.cartBasketord {
    max-width: 100%;
    margin-top: -80px;
    opacity: 0.7;
  }
  .statsInscardwrap.ordComp {
    padding: 30px;
  }
  .statsInscard.redbgstats {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .statsInscardwrap p {
    color: #F43936;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .statsRow.invRowstat {
    grid-template-columns: 1.5fr 2fr;
  }
  
  .statsInscard.blackbgstats {
    background-color: #17181c !important;
    font-weight: 600;
    border: 1px solid #ffffff20;
    overflow: hidden;
  }
.statsInscard.blackbgstats {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    flex-direction: column;
  }
  
  section.statsSec {
    padding: 50px 0;
  }
  .icon-slider-wrapper.invscrollin {
    transform: rotate(-2deg);
    margin-bottom: 15px;
  }
  .icon-slider-wrapper {
    overflow: hidden;
    width: 105%;
    background-color: #ffffff10;
    border: 1px solid #ffffff20;
    padding: 10px 0;
    transform: rotate(2deg);
    backdrop-filter: blur(14px);
    margin: 8px 0;
  }
  .icon-slider {
    display: flex;
    width: max-content;
    animation: scroll 20s linear infinite;
  }
  .icon-slider-wrapper.invscrollin .icon-slider {
    animation: scrollinv 15s linear infinite;
  }
  .icon-slider i {
    font-size: 24px;
    color: white;
    margin: 0 20px;
    transition: transform 0.3s;
  }
  .icon-slider i:hover {
    transform: scale(1.3);
    color: #00acee;
  }
  
  .clock {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    border: 3px solid #000;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: auto;
    margin-bottom: 15px;
  }
  .clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  .hour-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 15px;
    background: #000;
    transform-origin: bottom center;
    animation: rotateHour 12s linear infinite;
    border-radius: 4px;
  }
  .minute-hand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 23px;
    background: #333;
    transform-origin: bottom center;
    animation: rotateMinute 1s linear infinite;
    border-radius: 3px;
  }
  @keyframes rotateHour {
    from { transform: translate(-50%, -100%) rotate(0deg); }
    to { transform: translate(-50%, -100%) rotate(360deg); }
  }
  @keyframes rotateMinute {
    from { transform: translate(-50%, -100%) rotate(0deg); }
    to { transform: translate(-50%, -100%) rotate(360deg); }
  }
  
  .achievementCont div.subheads {
    display: inline-block;
    color: #fff;
    padding: 5px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    background-color: #17181c !important;
    box-shadow: none;
  }
  .achievementCont h2 span {
    color: #F43936;
    white-space: nowrap;
    font-weight: 800;
    font-size: xxx-large;
  }
  
  section.servcSec {
    padding: 50px 0;
  }
  .socialMediaCardWrap {
    background: red;
    display: flex;
    padding: 10px;
    padding-top: 40px;
    border-radius: 16px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
  }
  .socialMediaCard h3 {
    margin-bottom: 15px;
  }
  .socialMediaCard {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
  }
  .socialMediaCard img {
    max-width: 60px;
    border: 2px solid #fff;
    border-radius: 50px;
    margin-bottom: 15px;
    margin-top: -50px;
  }
  .serviceSpesc div i {
    padding: 8px;
    border-radius: 22px;
    font-weight: 600;
    background-color: #F43936 !important;
    border: 0 !Important;
    text-transform: uppercase;
    box-shadow: none;
    position: relative;
    color: #fff;
  }
  .serviceSpesc div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #000000;
    font-weight: bold;
  }
  .serviceSpesc {
    display: flex;
    gap: 25px;
    align-items: center;
  }
  .socialMediaCardWrap {
    margin: 10px;
  }
  .socialMediaCard p {
    display: block;
    height: 100px;
    overflow: auto;
  }
  .socialMediaCard p::-webkit-scrollbar {
    display: none;
  }
  .socialMediaCardWrap.spotifyCard {
    background: linear-gradient(180deg, #1ed760, #fff, #fff); /* Spotify Green */
  }
  .socialMediaCardWrap.youtubeCard {
    background: linear-gradient(180deg, #ff0000, #fff, #fff); /* YouTube Red */
  }
  .socialMediaCardWrap.twitterCard {
    background: linear-gradient(180deg, #1da1f2, #fff, #fff); /* Twitter Blue */
  }
  .socialMediaCardWrap.linkedinCard {
    background: linear-gradient(180deg, #0077b5, #fff, #fff); /* LinkedIn Blue */
  }
  .socialMediaCardWrap.telegramCard {
    background: linear-gradient(180deg, #0088cc, #fff, #fff); /* Telegram Blue */
  }
  .socialMediaCardWrap.soundcloudCard {
    background: linear-gradient(180deg, #ff7700, #fff, #fff); /* SoundCloud Orange */
  }
  .secHeading {
    max-width: 600px;
    margin: auto;
    margin-bottom: 40px;
    text-align: center;
  }
  .secHeading p {
    margin: 0;
  }
  .secHeading h2 span {
    color: #F43936;
  }
  
  .logoGrp {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
  }
  .logoGrp img {
    max-width: 160px;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
  }
  
  .lgootop p {
    max-width: 800px;
    margin: auto;
    margin-bottom: 20px;
  }
  .lgootop h2 {
    text-transform: capitalize;
    max-width: 700px;
    margin: auto;
    margin-bottom: 15px;
  }
  .lgootop {
    text-align: center;
    color: #fff;
  }
  .lgootop h2 span {
    color: #ffc3c2;
    white-space: nowrap;
    font-weight: 800;
  }
  
  .testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .embla {
    overflow: hidden;
  }
  .embla__container {
    display: flex;
    margin-bottom: 50px;
  }
  .embla__slide {
    position: relative;
    flex: 0 0 380px;
    min-width: 0;
    padding: 0 10px;
  }
  .fa-heart {
    color: #ff4757;
    font-size: 24px;
    margin-bottom: 20px;
    display: block;
  }
  .embla__controls {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 15px;
  }
  .embla__button {
    background: white;
    border: 1px solid #dfe4ea;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  .embla__button:hover {
    background: #ff4757;
    color: white;
    border-color: #ff4757;
  }
  .embla__dots {
    display: flex;
    justify-content: center;
    margin-top: 25px;
  }
  .embla__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dfe4ea;
    margin: 0 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .embla__dot--selected {
    background: #ff4757;
    transform: scale(1.3);
  }
  
  @media (max-width: 768px) {
    .embla__slide {
      flex: 0 0 100%;
    }
  }
.lgootop {
    background-color: #F43936 !important;
    border: 1px solid #ffffff20;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
  }
  .lgootopWrap {
    padding: 50px 30px;
  }
  .SoclCard {
    background: #ffffff30;
    border: 1px solid #ffffff20;
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    text-align: left;
  }
  .SoclCard p {
    margin: 0;
    height: 140px;
    overflow: auto;
  }
  .SoclCard p::-webkit-scrollbar {
    display: none;
  }
  .SoclCard img {
    max-width: 50px;
    border-radius: 50px;
    margin-bottom: 15px;
    border: 2px solid #fff;
  }
  
  /*section.tabsocSec {
  padding: 50px 0;
  min-height: 70vh;
  background: url(https://storage.perfectcdn.com/oezfqb/dm38axoa08oe50kq.webp);
  background-size: cover;
  border-radius: 0 0 20px 20px;
  }
  .tabsSocial {
  background: #ffffff60;
  backdrop-filter: blur(14px);
  border: 1px solid #ffffff20;
  border-radius: 15px;
  padding: 30px;
  }*/
  .tabsSocial ul#smmTabs {
    border: 0;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: auto;
  }
  .tabsSocial ul#smmTabs li button.active {
    background: #ffffff;
    color: #000;
  }
  .tabsSocial ul#smmTabs li button {
    background: #ffffff40;
    border: 0;
    border-radius: 12px;
    padding: 5px 15px 5px 5px;
    font-weight: 600;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    border: 1px solid #ffffff20 !important;
    margin: 2px 0;
    backdrop-filter: blur(1px);
    transition: all 0.5s ease;
  }
  .tabsSocial ul#smmTabs li button i {
    height: 35px;
    width: 35px;
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
  }
  /* Instagram */
  #instagram-tab i {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  /* Twitter */
  #twitter-tab i {
    background: linear-gradient(135deg, #1DA1F2, #0e71c8);
  }
  /* Spotify */
  #spotify-tab i {
    background: linear-gradient(135deg, #1DB954, #1ed760);
  }
  /* LinkedIn */
  #linkedin-tab i {
    background: linear-gradient(135deg, #0077B5, #00a0dc);
  }
  /* Facebook */
  #facebook-tab i {
    background: linear-gradient(135deg, #1877f2, #3b5998);
  }
  /* YouTube */
  #youtube-tab i {
    background: linear-gradient(135deg, #FF0000, #cc0000);
  }
  /* TikTok */
  #tiktok-tab i {
    background: linear-gradient(135deg, #69C9D0, #EE1D52);
  }
  /* Telegram */
  #telegram-tab i {
    background: linear-gradient(135deg, #0088cc, #229ed9);
  }
  /* Twitch */
  #twitch-tab i {
    background: linear-gradient(135deg, #9146FF, #a970ff);
  }
  /* Pinterest */
  #pinterest-tab i {
    background: linear-gradient(135deg, #E60023, #bd081c);
  }
  div#smmTabsContent p {
    margin: 0;
  }
  .tabsSocial {
    padding: 25px !important;
    border-radius: 20px !important;
    background-color: #F43936 !important;
    border: 1px solid #ffffff20 !important;
    color: #fff;
    position: relative;
  }
div#smmTabsContent {
    border-radius: 20px !important;
    border: 1px solid #ffffff20 !important;
    color: #fff;
  }
  .tabsSocial ul#smmTabs::-webkit-scrollbar {
    display: none;
  }
  
  .bottomDeisngtabs {
    display: grid;
    gap: 20px;
    grid-template-columns: 2.5fr 1fr;
  }
  .bestSquareTo p {
    margin: 0;
  }
  .bestSquareTo {
    background: #ffffff50;
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    position: relative;
    text-align: center;
  }
  .bestSquareTo:before {
    content: url(https://storage.perfectcdn.com/f045pc/ayxo8rmaotfycg5d.webp);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .bestSquareTo:after {
    content: url(https://storage.perfectcdn.com/f045pc/37lf7eythbw5m96r.webp);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
  .WrapTabssoci h2 {
    text-align: center;
    text-transform: capitalize;
    margin: auto;
    margin-top: 30px;
    max-width: 600px;
    margin-bottom: 30px;
  }
  .WrapTabssoci h2 span {
    color: #ffc3c2;
    white-space: nowrap;
    font-weight: 800;
  }
  
  /* FAQ Accordion Styles */
  .faqAccordion {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .faqAccordion .accordion-item {
    border: none;
    border-radius: 8px !important;
    overflow: hidden;
    margin-bottom: 16px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .faqAccordion .accordion-item:hover {
    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.08);
  }
  
  .faqAccordion .accordion-button {
    padding: 12px 15px;
    font-weight: 600;
    color: #000000;
    background-color: #ffffff;
    border: none;
    box-shadow: none;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 10px;
  }
  .faqAccordion .accordion-button:not(.collapsed) {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
    box-shadow: none;
  }
  .faqAccordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
  }
  .faqAccordion .accordion-button::after {
    width: 24px;
    height: 24px;
    background-size: 24px;
  }
  .faqAccordion .accordion-body {
    padding: 20px 24px;
    color: #495057;
    line-height: 1.6;
    background-color: white;
  }
  /* Add some spacing between items */
  .faqAccordion .accordion-item:not(:last-of-type) {
    margin-bottom: 16px;
  }
  /* Optional: Animation for smoother opening/closing */
  .faqAccordion .accordion-collapse {
    transition: all 0.3s ease;
  }
  .faqAccordion .accordion-button::before {
    content: '';
    height: 110%;
    width: 100px;
    display: block;
    position: absolute;
    left: -48px;
    border-radius: 70px;
    transform: rotateZ(10deg);
    z-index: 0;
    background-color: #F43936 !important;
    transition: all 250ms ease;
  }
  .faqAccordion .accordion-button span {
    color: #ffffff;
    margin-right: 30px;
    z-index: 2;
  }
  .faqAccordion .accordion-button:not(.collapsed)::before, .accordion-button:hover::before {
    width: 100%;
    transform: none;
  }
  .faqAccordion .accordion-button:not(.collapsed), .accordion-button:hover p {
    color: #fff;
  }
  .faqAccordion .accordion-button p {
    margin: 0;
    z-index: 1;
    transition: all 0.3s ease;
  }
  .faqHeading h2 span {
    color: #F43936;
    white-space: nowrap;
    font-weight: 800;
    font-size: xxx-large;
  }
  section.faqSec {
    padding: 60px 0;
  }
  .faqAccordion .accordion-button:not(.collapsed) {
    background: #ffebea;
  }
  .faqAccordion .accordion-button::after {
    height: 20px;
    width: 20px;
    background-size: 20px;
    filter: hue-rotate(150deg) saturate(1.3);
  }
  .faqHeading {
    position: sticky;
    top: 10px;
  }
  section.xtraSec {
    padding: 60px 0;
  }
  
  iframe.iframeVid {
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    border-radius: 15px;
    border: 2px solid #fff;
  }
  .xtraCont h2 span {
    color: #F43936;
    white-space: nowrap;
    font-weight: 800;
    font-size: xxx-large;
  }

  .topmobGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }
  .topmobGrid div {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .topmobGrid .gridCardmobMockup {
    background-color: #F43936 !important;
    border: 1px solid #ffffff20;
  }
  .topmobGrid .gridCardmobMockup img {
    width: 100%;
    margin: -20px;
    margin-top: -70px;
  }
  
  .animated-hand img {
    opacity: 0;
    transform: translateY(10px) rotateZ(-3deg);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    transform-origin: bottom left;
  }
  .animated-hand.animate img {
    transform: translateY(0px) rotateZ(0deg);
    opacity: 1;
  }
  
  .topmobGrid .gridCardmob img {
    max-width: 100px;
    margin-bottom: 20px;
  }
  .topmobGrid .gridCardmob {
    padding: 30px;
  }
  .gridCardmob p {
    max-width: 500px;
    margin: 0;
  }
  
  @keyframes pick-up {
    0% {
      transform: translateY(20px) rotateZ(-10deg);
      opacity: 0;
    }
    50% {
      transform: translateY(-5px) rotateZ(3deg);
      opacity: 0.7;
    }
    100% {
      transform: translateY(0px) rotateZ(0deg);
      opacity: 1;
    }
  }
  
  .btnGridmob img {
    max-width: 300px;
  }
  .btnGridmob {
    background-color: #17181c !important;
    font-weight: 600;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 50px;
    color: #fff;
    border-radius: 20px;
    border: 1px solid #ffffff20;
    margin-top: 15px;
    position: relative;
  }
.btnGridmob p {
    margin: 0;
    color: #ffffff99;
  }
  
  .smm-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
  }
  .smm-carousel__viewport {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
  }
  .smm-carousel__container {
    display: flex;
    will-change: transform;
  }
  .smm-carousel__slide {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    margin-right: 20px;
  }
  .benefit-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .benefit-box::before {
    content: '';
    display: block;
    height: 60px;
    width: 135%;
    background-color: #F43936 !important;
    position: absolute;
    top: -5px;
    left: 0;
    border-radius: 0 0 50% 50%;
    z-index: 0;
  }
  .benefit-box::after {
    content: '';
    height: 10px;
    width: 100px;
    background-color: #F43936 !important;
    border-radius: 20px 20px 0 0;
    position: absolute;
    bottom: 0;
  }
  .benefit-icon {
    font-size: 20px;
    margin-bottom: 12px;
    z-index: 1;
    background-color: #F43936 !important;
    height: 60px;
    width: 60px;
    border-radius: 50px;
    border: 4px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .benefit-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .benefit-txt {
    font-size: 14px;
    color: #555;
  }
  
  /* Responsive Fix */
  @media (max-width: 768px) {
    .smm-carousel__slide {
      max-width: 85%;
    }
  }
  @media (max-width: 480px) {
    .smm-carousel__slide {
      max-width: 95%;
    }
  }
  
  img.xteaimg {
    margin: -50px;
    width: -webkit-fill-available;
  }
  
  .xtraSeccont h2 span {
    color: #F43936;
    white-space: nowrap;
    font-weight: 800;
    font-size: xxx-large;
    margin-top: 10px;
    display: block;
  }
  
  section.alldivsSec {
    padding: 60px 0;
  }
  .secHeading h2 span {
    font-weight: 800;
    font-size: xxx-large;
  }
  .secHeading h2 {
    text-transform: capitalize;
  }
  
  /* Base styles for the grid containers */
  .xtraservGridlft, .xtraservGridrght {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  /* Card styles with equal height */
  .xtraservCard {
    background: #fff;
    border-radius: 20px;
    padding: 50px 30px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1; /* This makes cards grow to fill available space */
    margin-bottom: 20px;
    overflow: hidden;
    justify-content: center;
  }
  
  /* Remove bottom margin from last card to avoid double spacing */
  .xtraservCard:last-child {
    margin-bottom: 0;
  }
  
  /* Responsive adjustments */
  @media (min-width: 768px) {
    .row-equal-height {
      display: flex;
      flex-wrap: wrap;
    }
    .row-equal-height > [class*="col-"] {
      display: flex;
      flex-direction: column;
    }
  }
  
  /* Mobile adjustments */
  @media (max-width: 767px) {
    .xtraservGridlft, .xtraservGridrght {
      padding: 0 15px;
    }
    .xtraservCard {
      margin-bottom: 15px;
    }
  }
  
  .xtraservCard h2 span {
    color: #F43936;
    white-space: nowrap;
    font-weight: 800;
    font-size: xxx-large;
    display: block;
  }
  
  .xtraservCard.ytxtraServ {
    background-color: #F43936 !important;
    border: 1px solid #ffffff20;
    color: #fff;
  }
  .xtraservCard.ttxtraServ {
    background-color: #17181c !important;
    border: 1px solid #ffffff20;
    color: #fff;
  }
  img.instaredimg {
    margin: -50px;
    margin-top: 0;
    opacity: 0.8;
  }
  .xtraservCard.ytxtraServ h2 span, .xtraservCard.ttxtraServ h2 span {
    color: #ffffff99;
  }
  
  .paymentFlex img {
    height: 100px;
    width: 100px;
    background: #fff;
    padding: 15px;
    border-radius: 50%;
  }
  .paymentFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: auto
  }
  
  section.paymentSec {
    padding: 100px 0;
    background: url(https://storage.perfectcdn.com/f045pc/1x7tzbfgbh6t3znb.png);
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  }
  
  .abtusCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .abtusCard h2 span {
    font-weight: 800;
    font-size: xxx-large;
    color: #F43936;
  }
  .button-row a.btn.btn-primary.icon {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
  }
  
  section.abutSec {
    padding: 50px 0;
  }
  
  .topHwadtesti p i {
    color: #F43936;
  }
  .topHwadtesti p {
    font-weight: bold;
    font-size: 18px;
  }
  .topHwadtesti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
  }
  .topHwadtesti img {
    max-width: 50px;
  }
  .testimonialCards {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    overflow: hidden;
    padding: 20px;
  }
  .testiFotrwad h3 {
    margin: 0;
    font-size: 20px;
  }
  .testiFotrwad small {
    color: #dc3545;
    font-size: 14px;
    font-weight: 600;
  }
  .testibody {
    margin: 20px 0;
    text-align: justify;
  }
  .testimonialWraps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }
  section.testiSec {
    padding: 60px 0;
  }
  
  nav.guestnav a.nav-link {
    color: #000;
    font-weight: 500;
    margin: 0 10px;
  }
  nav.guestnav a.nav-link.active {
    border-radius: 10px;
    font-weight: 600;
    background-color: #F43936 !important;
    border: 0 !Important;
    box-shadow: none;
    position: relative;
    color: #fff;
    padding: 10px 20px;
  }
/* FAQ's */
  .hero-section {
    padding: 60px 0;
    background: url(https://storage.perfectcdn.com/oezfqb/ulty8w4pm4rpy172.png);
    background-size: cover;
    background-position: center;
    background-color: #F43936 !important;
    border: 1px solid #ffffff20;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    margin: 20px;
    margin-top: 0;
    color: #fff;
    padding-bottom: 100px;
  }
.search-container {
    position: relative;
  }
  .search-container i {
    position: absolute;
    left: 16px;
    top: 16px;
    color: #ffffff;
    z-index: 1;
    font-size: 12px;
  }
  .search-container input::placeholder {
    color: #fff;
    font-weight: 500;
  }
  .search-container input {
    padding: 12px;
    padding-left: 40px;
    border-radius: 40px;
    background: #ffffff50;
    color: #fff;
    border: 0;
  }
  .category-card {
    transition: transform 0.3s;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #ececef;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .category-card:hover {
    transform: translateY(-5px);
  }
  .category-icon {
    height: 50px;
    width: 50px;
    background-color: #F43936 !important;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin: auto;
    margin-bottom: 20px;
  }
  .faq-item {
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
  }
  .faq-question {
    padding: 1rem;
    background-color: #f8f9fa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }
  .faq-answer {
    padding: 1rem;
    background-color: white;
    border-top: 1px solid #dee2e6;
  }
  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: #0d6efd;
    color: white;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    z-index: 1000;
  }
  .category-badge {
    font-size: 0.7rem;
    margin-left: 10px;
    vertical-align: middle;
  }
  section.faqCater {
    margin-top: -70px;
  }
  
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: -webkit-fill-available;
    z-index: 2;
    width: 260px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ececef;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    margin: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.25s ease;
  }
  
  .profileTop p {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
  }
  .profileTop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .profInitial {
    background-color: #0F172A !important;
    box-shadow: none;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .profileTop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    border: 1px solid #00000010;
  }
  .topDeisngsidebar {
    display: block;
    height: 300px;
    width: 200%;
    background-color: #F43936 !important;
    position: absolute;
    left: -50%;
    top: -170px;
    border-radius: 0 0 50% 50%;
    z-index: -1;
    overflow: hidden;
  }
ul.sideul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 10px;
    flex-direction: column;
    height: -webkit-fill-available;
    overflow: auto;
  }
  ul.sideul a.nav-link {
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    color: #292929;
    border-left: 4px solid transparent;
    transition: all 250ms ease;
  }
  ul.sideul a.nav-link.active, ul.sideul a.nav-link.active:hover {
    background-color: #0F172A;
    color: #fff;
    border-color: #dc3545;
  }
  ul.sideul a.nav-link i {
    display: inline-flex;
    height: 30px;
    width: 30px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 20px;
    font-size: 16px;
  }
  ul.sideul a.nav-link:hover {
    background: #efefef;
    border-color: #efefef;
    color: #000;
  }
  
  .sidebarBtngrp button {
    flex: 1;
    background: #fff;
    border: 0;
    padding: 8px;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    position: relative;
    overflow: hidden;
  }
  .sidebarBtngrp {
    margin: 10px;
    display: flex;
    gap: 10px;
  }
  
  .sidebarBtngrp button i {
    color: #F43936;
    margin-right: 2px;
    font-size: 18px;
    line-height: 1;
    position: relative;
    top: 1px;
  }
  
  ul.sidebarBtmul li a i {
    font-size: 17px;
  }
  
  ul.sidebarBtmul li a {
    color: #292929;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 5px;
  }
  ul.sidebarBtmul {
    padding: 10px;
    margin: 10px;
    margin-top: auto;
    background: #efefef;
    border-radius: 12px;
    list-style: none;
    border: 1px solid #00000010;
  }
  .usernav {
    margin: 10px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: all 0.25s 
      ease;
    padding: 10px;
    position: sticky;
    top: 10px;
    z-index: 10;
  }
  img.shapebackdesign {
    position: absolute;
    height: 100%;
    right: 0;
    border-radius: 0 10px 10px 0;
    z-index: -1;
    width: 220px;
    pointer-events: none;
  }
  .userWrap {
    transition: all 0.25s ease;
  }
  @media (min-width: 991px) {
    .userWrap, .usernav {
      margin-left: 280px;
    }
    #hamburgerToggle {
      display: none !important;
    }
  }
  @media (max-width: 991px) {
    .sidebar {
      transform: translateX(-280px);
    }
    .pageBreadcrmb, a.fundTopvar {
      display: none !important;
    }
    .righttopBar {
      margin-left: auto;
      margin-right: 10px;
    }
    img.shapebackdesign {
      width: 120px;
    }
  }
  
  /* Custom CSS for the Hamburger Icon */
  #hamburgerToggle {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    gap: 5px; 
    padding: 8px; 
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    position: relative; 
    margin: 0;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  
  #hamburgerToggle span {
    display: block;
    height: 4px; 
    width: 100%;
    background: #F43936 !important;
    border-radius: 5px;
    opacity: 1;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
  }
  
  /* --- CLOSED STATE (Hamburger) --- */
  
  /* Middle Bar (Modern, narrower width) */
  #hamburgerToggle span:nth-child(2) {
    width: 70%; 
    align-self: center;
  }
  
  /* --- OPEN STATE (X) using Flexbox and Transform --- */
  
  /* Bar 1 (Top) moves down and rotates 45deg */
  #hamburgerToggle.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg); 
    transform-origin: center center;
  }
  
  /* Bar 2 (Middle) disappears */
  #hamburgerToggle.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
    transform: scaleX(0);
  }
  
  /* Bar 3 (Bottom) moves up and rotates -45deg */
  #hamburgerToggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    transform-origin: center center;
  }
  
  
  ul.servFiltr {
    list-style: none;
    transition: all 0.25s 
      ease;
    display: flex;
    gap: 10px;
    background-color: #0F172A !important;
    border: 1px solid #ffffff20;
    padding: 10px;
    border-radius: 10px;
    overflow: auto;
  }
  ul.servFiltr::-webkit-scrollbar {
    display: none;
  }
  ul.servFiltr li button {
    width: 100%;
    border: 1px solid #00000010;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    font-weight: 500;
  }
  .well {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    padding: 20px;
  }
  /* Dashboard-only: flatter, borderless well (guest .well left untouched) */
  body.userbody .well {
    box-shadow: none;
    border: 1px solid #ececef;
  }
  
  .form-control, .form-control:focus {
    background: #fff9f9;
    padding: 10px;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    transition: all 0.25s ease;
  }
  .form-control:focus {
    border-color: #F43936 !important;
  }
  .panel-body {
    background: #fff9f9;
    padding: 20px;
    border: 1px solid #fff2f3;
    outline: 0;
    box-shadow: 0 0 0 0.25rem #fff2f3;
    border-radius: 10px !important;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    border-left: 5px solid #dc3545;
  }
  .well.redhighlightborder {
    border: 1px solid #dc3545;
  }
  
  .select2-results__option .badge, span.select2-selection.select2-selection--single .badge {
    background-color: #F43936 !important;
  }
  .select2-container .select2-dropdown {
    animation: slideDown 0.2s ease-out;
  }
  /* Slide-down animation */
  @keyframes slideDown {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  small.help-block.min-max {
    background-color: #F43936 !important;
    color: #fff;
    padding: 2px;
    display: block;
    text-align: center;
    font-weight: 500;
    border-radius: 6px;
    margin-top: 7px;
  }
  .orderSummary .deliveryTime i {
    color: #F43936;
  }
  .orderSummary .deliveryTime {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-bottom: 1px solid #00000015;
  }
  .orderSummary span#inputQuan {
    font-weight: bold;
  }
  
  input#charge {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
    color: #000;
    font-weight: 900;
    font-size: 20px;
    margin-top: -6px;
  }
  
  .amountHave span {
    font-weight: bold;
    font-size: 16px;
  }
  .amountHave {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .mainBalsecmidl {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #00000015;
  }
  .mainBalsecmidl {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .orderSummary {
    background: #ffdfdf;
    border: 1px solid #00000015;
    border-radius: 8px !important;
    outline: 0;
  }
  /*.orderSummary label {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 7px 7px 0 0;
  color: #fff;
  background-color: #F43936 !important;
  font-weight: bold;
  }*/
  .orderSummary label {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    color: #fff;
    background-color: #F43936 !important;
    font-weight: bold;
    margin: 5px;
  }
  .orderSummary label i {
    display: inline-flex;
    height: 30px;
    width: 30px;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #f43936;
    border-radius: 20px;
    font-size: 14px;
  }
  .orderSummary button.btn.btn-primary {
    margin: 10px;
    width: -webkit-fill-available;
  }
  .panel-body {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    background: #fff9f9;
    padding: 10px;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    max-height: 200px;
    overflow: auto;
  }
  
  marquee.news-scroll {
    background: #ffffff;
    padding: 5px;
    margin-left: -10px;
  }
  marquee.news-scroll a {
    color: #000;
    text-decoration: none;
  }
  marquee.news-scroll i {
    margin: 0 15px;
  }
  
  .wellHead {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
  }
  .wellHead small {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #00000099;
    line-height: 1;
  }
  .wellHead h2 {
    font-size: 20px;
    margin: 0;
  }
  .wellHead i {
    display: inline-flex;
    height: 45px;
    width: 45px;
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 35px;
    font-size: 16px;
  }
  
  label.control-label {
    margin-bottom: 3px;
    font-weight: 500;
  }
  
  .welcomCardtop {
    display: block;
    background-color: #F43936 !important;
    overflow: hidden;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    position: relative;
  }
  
  .welcomCardtop > span {
    background: #ffffff20;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 10px;
    padding-right: 15px;
    margin-bottom: 10px;
    font-weight: 600;
    border: 1px solid #ffffff20;
    font-size: 13px;
  }
  .welcomCardtop > span i {
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    color: #f43936;
  }
  .welcomCardtop h2 {
    margin-bottom: 5px;
    font-size: 2.5rem;
    margin-top: 10px;
  }
  
  .welcomCardtop a {
    background-color: #0F172A !important;
    border: 1px solid #ffffff20;
    padding: 10px 15px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .welcomCardtop p {
    color: #ffffff99;
  }
  
  .welcomCardtop:before {
    content: '';
    background: url(https://storage.perfectcdn.com/oezfqb/a9eahxnzupbqngtd.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-position: center;
    z-index: 0;
    background-size: cover;
    opacity: 0.7;
  }
  .welcomCardtop * {
    position: relative;
  }
  
  .neworder-tabs {
    margin-bottom: 10px;
    background: #fff9f9;
    padding: 10px;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  ul.servFiltr li button {
    transition: all 250ms ease;
  }
  button.CatFltr.act {
    background-color: #fff9f9 !important;
    color: #000;
  }
  
  .profileCardno {
    background-color: #0F172A !important;
    height: 100%;
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
  }
  .usernameTopno span {
    margin-left: auto;
  }
  .usernameTopno {
    background: #ffffff20;
    border: 1px solid #ffffff10;
    padding: 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-left: 15px;
    width: -webkit-fill-available;
  }
  
  .usernameGrptop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }
  .usernameGrptop p {
    margin: 0;
    font-weight: 600;
    text-transform: capitalize;
    display: block;
  }
  .usernameGrptop small {
    display: block;
    line-height: 1;
    color: #ffffff99;
  }
  .usernameGrptop i {
    display: inline-flex;
    height: 35px;
    width: 35px;
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 35px;
    font-size: 18px;
    margin-left: -25px;
  }
  
  .bottomProfstats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 0;
  }
  .bottomProfstatsStat {
    background: #ffffff20;
    color: #fff;
    padding: 10px;
    flex: 1;
    border-radius: 10px;
    border: 1px solid #ffffff10;
  }
  .bottomProfstatsStat p {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    margin-top: -2px;
  }
  .bottomProfstatsStat small {
    color: #ffffff99;
  }
  .bottomProfstatsStat > div {
    display: flex
      ;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.2;
    gap: 6px;
    margin-bottom: 5px;
  }
  .bottomProfstatsStat > div i {
    display: inline-flex;
    min-height: 25px;
    min-width: 25px;
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 35px;
    font-size: 13px;
  }
  
  .topcardHeading a {
    margin-left: auto;
  }
  .topcardHeading i {
    color: #f43936;
    font-size: large;
  }
  .topcardHeading a i {
    color: #ffffff99;
  }
  .topcardHeading {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .whatsAppcard {
    background: url(https://storage.perfectcdn.com/oezfqb/618r4ncjm2b4finz.jpg);
    border-radius: 20px;
    border: 1px solid #ececef;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    background-size: cover;
    background-position: center;
    padding: 20px;
  }
  .whatsappCardchild {
    padding: 15px;
    background: #ffffff20;
    border-radius: 10px;
  }
  .whatsappCardchild h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .whatsappCardchild a {
    background: radial-gradient(circle, #09933c 0%, #20B253 100%);
    padding: 8px 14px;
    font-weight: 600;
    border-radius: 10px;
    display: inline-block;
    color: #fff !important;
  }
  
  .whatsappCardchild h3 span {
    background: -webkit-radial-gradient(circle, #09933c 0%, #20B253 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 2px;
  }
  
  .rankbar {
    background: #efefef;
    height: 10px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }
  span.rankIndic {
    background-color: #F43936 !important;
    height: 100%;
    display: block;
    position: absolute;
  }
  
  .levlCard {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ececef;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    background-size: cover;
    background-position: center;
    padding: 20px;
  }
  .topLevl i {
    color: #f43936;
    font-size: large;
  }
  .topLevl span.rankLev {
    margin-left: auto;
    background: #F43936 !important;
    padding: 2px 10px;
    display: inline-block;
    color: #fff;
    border-radius: 30pc;
    font-weight: 500;
  }
  .topLevl {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
  }
  .lasttopStat {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
  }
  button.rankInfo {
    background-color: #0F172A !important;
    border: 1px solid #ffffff20;
    padding: 8px 14px;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: auto;
    margin-top: 10px;
  }
  
  @media (min-width: 567px) {
    .whatsappCardchild {
      padding: 15px;
      background: #ffffff20;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
    }
    .whatsappCardchild h3 {
      margin: 0;
      text-align: left;
    }
  }
  
  .neworder-tabs li a.nav-link {
    background: #fff;
    width: 100%;
    border: 1px solid #00000010;
    border-radius: 35px;
    font-weight: 600;
    padding: 5px;
    padding-right: 15px;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    color: #000;
    transition: all 0.25s ease;
    text-align: left;
  }
  .neworder-tabs li a.nav-link.active i {
    background-color: #0F172A !important;
  }
  
  .neworder-tabs li a.nav-link i {
    background-color: #F43936 !important;
    box-shadow: none;
    height: 30px;
    width: 30px;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
  }
  .neworder-tabs {
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
    overflow: auto;
  }
  .neworder-tabs::-webkit-scrollbar {
    display: none;
  }
  .neworder-tabs li a.nav-link.active {
    background-color: #F43936 !important;
    border: 1px solid #ffffff50;
    color: #fff;
  }
  .neworder-tabs li {
    flex: 1;
  }
  
  
  ul#payUl li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: #efefef;
    border-radius: 10px;
    font-weight: 500;
    gap: 5px;
  }
  ul#payUl li img {
    max-width: 40px;
    border-radius: 35px;
  }
  ul#payUl {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 15px;
  }
  
  ul#payUl li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
    gap: 5px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    transition: all 0.25s 
      ease;
  }
  ul#payUl li.active {
    border-color: #F43936 !important;
  }
  
  .choices {
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    transition: all 0.25s 
      ease;
    border-radius: 8px;
  }
  .choices .choices__inner {
    background: #fff9f9;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    transition: all 0.25s 
      ease;
    border: 0 !important;
    padding: 5px !important;
    min-height: auto;
  }
  .choices__list.choices__list--single img {
    border-radius: 20px;
  }
  .choices__list--dropdown,.choices__list[aria-expanded] {
    background: #fff9f9 !important;
    padding: 10px;
    border: 2px solid #ff000020 !important;
    border-radius: 12px !important;
    margin-top: 5px !important
  }
  .choices[data-type*=select-one] .choices__input {
    background-color: #fff !important;
    border: 1px solid #00000020 !important;
    color: #000;
    border: 0 !important;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .choices__list--dropdown .choices__list img,.choices__list[aria-expanded] .choices__list img {
    border-radius: 20px;
    margin-right: 10px
  }
  .choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list {
    color: #000;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: #ffffff20;
    border-radius: 10px;
    margin-top: 10px
  }
  
  .choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
    background-color: #fff !important;
    border: 1px solid #00000020 !important;
    color: #000;
    border: 0 !important;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 0px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  ul#payUl {
    overflow: auto;
    padding: 5px;
  }
  ul#payUl::-webkit-scrollbar {
    display: none;
  }
  
  .fundsHist {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 20px;
  }
  
  .insideFunds i {
    background-color: #F43936 !important;
    color: #fff;
    height: 50px;
    width: 50px;
    border-radius: 35px;
    margin-bottom: 10px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .insideFunds p {
    margin: 0;
  }
  .insideFunds h3 {
    font-size: 22px;
    margin: 0;
  }
  .insideFunds {
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px;
    border-radius: 10px;
  }
  .paymentGridwrap {
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    border-radius: 10px;
  }
  .transCard {
    padding: 15px;
    border-bottom: 2px solid #fff;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  .firstTrans {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .firstTrans span {
    font-weight: bold;
  }
  .firstTrans b {
    background-color: #F43936 !important;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 2px;
  }
  
  .orderGriod {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
  }
  
  @media(min-width: 992px) {
    .orderGriod {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  
  .orderCard {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: none;
    border: 1px solid #ececef;
    outline: 0;
  }
  
  /* Base badge style */
  span.badge.ordStat {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    display: inline-flex;
    font-size: 12px;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
    letter-spacing: -1px;
    border: 1px solid;
  }
  span.badge.ordStat {
    background-color: #0F172A;
  }
  
  /* Status colors 
  span.badge.ordStat.odPending {
  color: #f59e0b;
  background-color: #fef3c7;
  }
  
  span.badge.ordStat.odIn.progress {
  color: #3b82f6;
  background-color: #dbeafe;
  height: auto;
  }
  
  span.badge.ordStat.odCompleted {
  color: #16a34a;
  background-color: #d1fae5;
  }
  
  span.badge.ordStat.odPartial {
  color: #f97316; 
  background-color: #ffedd5;
  }
  
  span.badge.ordStat.odProcessing {
  color: #0ea5e9;   
  background-color: #e0f2fe;
  }
  
  span.badge.ordStat.odCanceled {
  color: #ef4444;      
  background-color: #fee2e2;
  }
  
  span.badge.ordStat.odRejected {
  color: #b91c1c;     
  background-color: #fef2f2;
  }
  
  span.badge.ordStat.odError {
  color: #dc2626;       
  background-color: #fee2e2;
  }
  
  span.badge.ordStat.odActive {
  color: #059669;       
  background-color: #d1fae5;
  }
  
  span.badge.ordStat.odPaused {
  color: #facc15;      
  background-color: #fef9c3;
  }
  
  span.badge.ordStat.odExpired {
  color: #6b7280;         
  background-color: #f3f4f6;
  }*/
  
  /* Enhanced Status Colors with gradients and effects */
  span.badge.ordStat.odPending {
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
  }
  
  span.badge.ordStat.odIn.progress {
    color: #1e40af;
    background: linear-gradient(135deg, #dbeafe, #93c5fd);
    border-color: #3b82f6;
    height: auto;
  }
  
  span.badge.ordStat.odCompleted {
    color: #065f46;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #16a34a;
  }
  
  span.badge.ordStat.odPartial {
    color: #9a3412;
    background: linear-gradient(135deg, #ffedd5, #fdba74);
    border-color: #f97316;
  }
  
  span.badge.ordStat.odProcessing {
    color: #0c4a6e;
    background: linear-gradient(135deg, #e0f2fe, #7dd3fc);
    border-color: #0ea5e9;
  }
  
  span.badge.ordStat.odCanceled {
    color: #991b1b;
    background: linear-gradient(135deg, #fee2e2, #fca5a5);
    border-color: #ef4444;
  }
  
  span.badge.ordStat.odRejected {
    color: #7f1d1d;
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    border-color: #b91c1c;
  }
  
  span.badge.ordStat.odError {
    color: #991b1b;
    background: linear-gradient(135deg, #fee2e2, #fca5a5);
    border-color: #dc2626;
  }
  
  span.badge.ordStat.odActive {
    color: #064e3b;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #059669;
  }
  
  span.badge.ordStat.odPaused {
    color: #854d0e;
    background: linear-gradient(135deg, #fef9c3, #fde047);
    border-color: #facc15;
  }
  
  span.badge.ordStat.odExpired {
    color: #374151;
    background: linear-gradient(135deg, #f3f4f6, #d1d5db);
    border-color: #6b7280;
  }
  
  .iddgrp h4 {
    font-size: 16px;
    margin: 0;
  }
  .iddgrp p {
    margin: 0;
    font-size: 13px;
  }
  .topOrdgrp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #00000010;
  }
  span.badge.ordStat:before {
    content: '';
    display: inline-block;
    height: 5px;
    width: 5px;
    background-color: #fff;
    border-radius: 10px;
    margin-right: 5px;
    animation: blink 1s infinite ease-in-out;
  }
  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
  }
  /* Specific status colors */
  span.badge.ordStat.odPending::before { background-color: #f59e0b; }       /* amber */
  span.badge.ordStat.odIn.progress::before { background-color: #3b82f6; }   /* blue */
  span.badge.ordStat.odCompleted::before { background-color: #16a34a; }    /* green */
  span.badge.ordStat.odPartial::before { background-color: #f97316; }      /* orange */
  span.badge.ordStat.odProcessing::before { background-color: #0ea5e9; }   /* sky blue */
  span.badge.ordStat.odCanceled::before { background-color: #ef4444; }     /* red */
  span.badge.ordStat.odRejected::before { background-color: #b91c1c; }     /* dark red */
  span.badge.ordStat.odError::before { background-color: #dc2626; }        /* red-600 */
  span.badge.ordStat.odActive::before { background-color: #059669; }       /* emerald */
  span.badge.ordStat.odPaused::before { background-color: #facc15; }       /* yellow */
  span.badge.ordStat.odExpired::before { background-color: #6b7280; }      /* gray */
  
  .servgrp {
    margin: 15px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  .servgrp p {
    margin: 0;
  }
  .servgrp p b {
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    margin-right: 5px;
  }
  .linkGrp {
    margin: 15px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  .linkGrp a {
    display: flex;
  }
  .linkGrp small {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .linkGrp small a {
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    display: inline-flex;
    border-radius: 25px;
    font-size: 12px;
    margin-left: auto;
    gap: 5px;
    padding: 6px 10px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
  }
  .statGrp {
    padding: 15px;
    padding-top: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }
  .statGrp .statGrpchild {
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    text-align: center;
  }
  .statGrp .statGrpchild p {
    margin: 0;
  }
  
  .prcactionGrp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid #00000010;
  }
  .prcactionGrp .prcGrp p {
    font-size: 18px;
    margin: 0;
    font-weight: bold;
    letter-spacing: -1px;
  }
  .prcactionGrp .actionGrp p {
    margin: 0;
    color: #f33835;
  }
  
  .iddgrp h4 {
    font-size: 14px;
    margin: 0;
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    display: inline-flex;
    padding: 5px 10px 2px;
    border-radius: 15px;
    margin-bottom: 5px;
  }
  .servgrp p b {
    background-color: #0F172A !important;
    box-shadow: none;
  }
  
  .servgrp {
    padding: 5px 20px;
    border-radius: 10px;
    background: #fff9f9;
    outline: 0;
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 0;
    margin: -4px;
    margin-bottom: 10px;
    box-shadow: none;
    border: 0;
  }
  span.badge.ordStat {
    min-width: 100px;
    padding: 10px;
    border-radius: 8px;
  }
  
  .topWrap {
    background: #fff9f9;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  
  ul.nav.ordPills.nav-pills .nav-link {
    background: #fff;
    border: 1px solid #00000010;
  }
  
  form#history-search .form-control {
    margin: 0 !important;
    background: #fff;
    border: 2px solid #00000010;
    box-shadow: none;
    padding-right: 45px;
  }
  form#history-search {
    position: relative;
  }
  form#history-search button.btn.btn-outline-secondary {
    background-color: #F43936 !important;
    color: #fff;
    border: 1px solid #ffffff20;
    height: 35px;
    width: 35px;
    position: absolute;
    right: 5px;
    top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 6px;
  }
  
  .cardHeaderAllpage {
    display: block;
    text-align: center;
    color: rgb(255, 255, 255);
    position: relative;
    background-color: rgb(244, 57, 54) !important;
    overflow: hidden;
    padding: 40px;
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  
  .cardHeaderAllpage p {
    margin: 0;
    color: #ffffff99;
  }
  .AllpageCont span {
    background: #ffffff20;
    padding: 4px 15px;
    display: inline-flex;
    border-radius: 15px;
    margin-bottom: 10px;
    text-transform: capitalize;
    border: 1px solid #ffffff20;
  }
  .AllpageCont h2 {
    margin-bottom: 5px;
    text-transform: uppercase;
    margin-top: 5px;
  }
  
  ul.sideul a.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  ul.sideul a.nav-link i.caretTed {
    background: transparent !important;
    padding: 0 !important;
    margin-left: auto !important;
    height: auto;
    width: auto;
    color: #292929;
    line-height: 1;
  }
  ul.sideul a.nav-link.active i.caretTed {
    color: #F43936;
    font-weight: 600;
  }
  ul.sidebarBtmul {
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  
  ul#ticket-category-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: auto;
    padding: 5px;
  }
  ul#ticket-category-tabs::-webkit-scrollbar {
    display: none;
  }
  ul#ticket-category-tabs li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    font-weight: 600;
    padding: 10px;
    padding-right: 15px;
    font-size: 13px;
    color: #000;
    transition: all 0.25s 
      ease;
    text-align: left;
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 10px;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    min-width: 245px;
  }
  ul#ticket-category-tabs li a i {
    background-color: #F43936 !important;
    box-shadow: none;
    min-height: 30px;
    min-width: 30px;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  ul#ticket-category-tabs li a div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    line-height: 1.2;
    gap: 3px;
    color: #000;
  }
  ul#ticket-category-tabs li a div span {
    font-weight: 600;
    font-size: 15px;
  }
  ul#ticket-category-tabs li a div small {
    color: #00000099;
  }
  ul#ticket-category-tabs li a.active {
    border-color: #f43936;
  }

  .tickets-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ticket-card {
    display: block;
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s 
      ease;
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 10px;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  .ticket-card:hover {
    border-color: #d32f2f;
    transform: translateY(-2px);
  }
  .ticket-content {
    display: flex;
    flex-direction: column;
  }
  .ticket-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 5px;
  }
  .ticket-meta {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    justify-content: flex-start;
  }
  .ticket-id {
    font-weight: bold;
    color: #d32f2f;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ticket-theme {
    font-size: 14px;
    line-height: 1.2;
    color: #292929;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
  }
  .ticket-theme.new-ticket {
    font-weight: bold;
    color: #d32f2f;
  }
  .ticket-arrow {
    color: #f43936;
    font-size: 14px;
    flex-shrink: 0;
  }
  .ticket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-top: 1px solid #00000010;
  }
  .update-time {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #292929;
    font-weight: 500;
  }
  .update-time i {
    color: #f43936;
    font-size: 12px;
    font-weight: 600;
  }
  .ticket-status {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
  }
  .status-open {
    background-color: #ffebee;
    color: #d32f2f;
    border: 1px solid #d32f2f;
  }
  .status-closed {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
  }
  .status-pending {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #f57c00;
  }
  .ticket-meta span.ticket-id {
    background-color: #F43936 !important;
    box-shadow: none;
    color: #fff;
    padding: 2px 10px;
    border-radius: 30px;
    font-size: 12px;
  }
  
  .tickets-uploader {
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  .sendmsgGrp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    white-space: nowrap;
  }
  .chat-input-area .sendmsgGrp button.btn.btn-primary {
    width: auto;
    height: auto;
    border-radius: 10px;
    gap: 15px;
    margin: 0;
    padding: 10px;
    font-size: 12px;
    width: 100%;
  }
  
  .chat-message-bubble.user-message {
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 10px 10px 0px 10px !important;
  }
  .chat-message-bubble.support-message {
    border-radius: 10px 10px 10px 0px !important;
  }
  
  .profileCardsets {
    display: flex;
    background-color: #F43936 !important;
    border: 0 !Important;
    text-transform: uppercase;
    box-shadow: none;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 10px;
    color: #fff;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
  .profileCardsets p {
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    font-size: 16px;
  }
  .profileCardsets small {
    text-transform: lowercase;
    color: #ffffff99;
    font-size: 14px;
  }
  ul.nav.nav-pills.settingsTab {
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    margin-left: auto;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 12px;
  }
  
  .usernav a.navbar-brand {
    padding: 0;
  }
  .usernav a.navbar-brand img {
    height: auto;
    width: 180px;
  }
  
  .maininitialppnav {
    display: inline-flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    background-color: #F43936 !important;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border-radius: 30px;
  }
  .dropdown.ppdropdown a#profileDropdown {
    background: #efefef;
    border-radius: 30px;
    padding: 5px;
  }
  ul.profdd.dropdown-menu {
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    border-radius: 15px;
    overflow: hidden;
    padding: 0;
  }
  .profficard {
    display: flex;
    padding: 10px;
    gap: 10px;
    background-color: #F43936 !important;
    border: 1px solid #ffffff50;
    color: #fff;
    align-items: center;
  }
  .profficard p {
    margin: 0;
    font-weight: 500;
    line-height: 1;
    font-size: 14px;
    text-transform: capitalize;
  }
  .profficard small {
    display: block;
    margin: 0;
    color: #ffffff99;
  }
  .profficard .maininitialppnav {
    background-color: #0F172A !important;
    box-shadow: none;
  }
  ul.profdd.dropdown-menu a.dropdown-item {
    padding: 8px 10px;
    font-size: 14px;
    border-bottom: 1px solid #00000010;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    gap: 5px;
    font-weight: 500;
  }
  ul.profdd.dropdown-menu a.dropdown-item:hover {
    background: #fff9f9;
  }
  ul.profdd.dropdown-menu a.dropdown-item i {
    color: #f43936;
  }
  
  
  a.mainFunds i {
    background-color: #0F172A !important;
    color: #fff;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 10px;
  }
  
  a.mainFunds {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #efefef;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    gap: 10px;
    border-radius: 35px;
    padding: 3px;
    padding-left: 8px;
    background-color: #F43936 !important;
    color: #fff;
  }
  .pageBreadcrmb {
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
    padding: 6px 10px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  .pageBreadcrmb span {
    font-weight: 700;
    text-transform: capitalize;
  }
  
  a.fundTopvar {
    margin-right: 10px;
    display: flex;
    align-items: center;
    line-height: 1.3;
    padding: 5px;
    background: #efefef;
    border: 2px solid #ffffff;
    border-radius: 40px;
    outline: 0;
    justify-content: flex-start;
    gap: 7px;
    text-decoration: none;
    color: #000;
    padding-right: 20px;
  }
  a.fundTopvar i {
    background-color: #F43936 !important;
    color: #fff;
    height: 35px;
    width: 35px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  a.fundTopvar div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-weight: 600;
    line-height: 1.2;
  }
  a.fundTopvar small {
    color: #292929;
    font-size: 10px;
    margin-bottom: 2px;
  }
  
  .marqueeWrapper p {
    margin: 0;
    white-space: nowrap;
    display: block;
    padding: 6px 12px;
    background-color: #F43936 !important;
    color: #fff;
    position: relative;
    padding-right: 5px;
  }
  .marqueeWrapper {
    border-radius: 8px;
    border: 1px solid #ececef;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  marquee.news-scroll {
    margin: 0;
    z-index: -2;
  }
  .marqueeWrapper p:after {
    content: '';
    background: #F43936;
    height: 110%;
    width: 12px;
    position: absolute;
    transform: rotate(8deg);
    top: -2px;
    right: -5px;
    z-index: -1;
  }
  .sidebar.open {
    transform: translate(0);
  }
  .sidebar {
    z-index: 10;
  }
  .topcardHeading {
    margin-bottom: 20px;
  }
  
  thead {
    /*background-color: #F43936 !important;
*/
    border: 0;
    color: #fff;
    background-color: #0F172A;
  }
  
  tr.service-category-header {
    border-color: transparent;
  }
  tbody.spacer {
    height: 3px;
  }
  tr.service-category-header td {
    padding: 0 !important;
  }
  tr.service-category-header td div {
    background: #fff;
    padding: 15px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    margin: 3px;
    background-color: #F43936 !important;
    color: #fff;
  }
  table#service-table thead tr th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  table#service-table thead tr th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  table#service-table thead tr th {
    border-color: transparent;
  }
  
  span.badge.bg-secondary.service-count-badge {
    background-color: #F43936 !important;
    border-radius: 25px;
    margin-left: auto !important;
  }
  i.category-chevron {
    margin-left: 10px !important;
    color: #f43936;
  }
  table#service-table tbody tr td {
    background: #fff;
    border: 1px solid #00000010;
  }
  table#service-table tbody tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  table#service-table tbody tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  table#service-table tbody tr td {
    background: #fff;
    border: 0;
  }
  tr.spacer {
    height: 7px;
  }
  
  td.service-name b {
    background-color: #F43936 !important;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    vertical-align: text-bottom;
    margin-right: 3px;
  }
  span.badge.bg-secondary.service-count-badge {
    background-color: #ffffff30 !important;
    border-radius: 25px;
    margin-left: auto !important;
    border: 1px solid #FFFFFF20;
  }
  i.category-chevron {
    margin-left: 10px !important;
    color: #ffffff;
  }
  
  .quantitiesWrap span {
    font-weight: 700;
    margin-left: 10px;
  }
  .quantitiesWrap div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-weight: 500;
    font-size: small;
    background: #fff9f9;
    border: 2px solid #ffffff;
    border-radius: 34px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    padding: 2px;
    color: #000;
    font-size: 12px;
    padding-right: 8px;
  }
  .quantitiesWrap p {
    margin: 0;
    margin-right: auto;
  }
  .quantitiesWrap {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }
  .quantitiesWrap div i {
    background-color: #F43936 !important;
    color: #fff;
    height: 20px;
    width: 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }
  td.favStar > span {
    background: transparent;
    padding: 5px;
    display: flex;
    height: 30px;
    width: 30px;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    color: #ff7007;
    border: 1px solid;
    transition: all 0.3s ease;
  }
  td.favStar > span.favorite-active {
    background: #ff7007;
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  
  .catdd ul.dropdown-menu {
    background: #fff9f9;
    border: 1px solid #f4d9d8;
    outline: 0;
    border-radius: 15px;
    padding: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    font-size: 13px;
    max-height: 400px;
    overflow: auto;
  }
  tr.spacer td.service-name {
    background: transparent !important;
    padding: 0;
    font-size: 0;
  }
  
  .catdd .dropdown-item:hover, .catdd .dropdown-item:focus {
    color: #ffffff;
    background-color: #f43936;
  }
  .dropdown.catdd .btn.btn-primary {
    font-weight: 600;
    text-transform: capitalize;
    padding: 12px 20px;
  }
  tbody.spacer.collapse.show {
    height: 0;
  }
  button#toggle-all-categories {
    font-weight: 600;
    text-transform: capitalize;
    padding: 12px 20px;
  }
  .input-group.servSearch button.btn.btn-primary {
    height: 45px;
    width: 45px;
    padding: 0;
    border-radius: 10px !important;
    margin-left: 10px !important;
    box-shadow: 0px 0px 0px 2px #da2522;
  }
  
  .modal-content {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    border: 1px solid #00000020;
  }
  /* Dashboard-only: flatter modal (guest language/currency modal left untouched) */
  body.userbody .modal-content {
    box-shadow: none;
    border: 1px solid #ececef;
  }
  .modal-header {
    box-shadow: 0 0 0 0.20rem #fca5a552;
    margin: 10px;
    background-color: #F43936 !important;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
  }
  .modal-header h5 {
    font-size: 16px;
    position: relative;
    top: 1px;
  }
  div.recentOrdsgrid .orderCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }
  div.recentOrdsgrid .servgrp {
    margin-bottom: 0;
    margin-top: 0;
  }
  .topOrdgrp {
    padding: 10px;
    border: 0;
    margin-bottom: 0;
  }
  .orderGriod.recentOrdsgrid {
    grid-template-columns: 1fr;
  }
  .modal-header button.btn-close {
    opacity: 1;
    filter: invert(1);
    margin-right: 0px !important;
  }
  
  .skiptranslate.goog-te-gadget span {
    display: none;
  }
  .skiptranslate.goog-te-gadget {
    font-size: 0;
  }
  select.goog-te-combo {
    width: 100%;
    background: #fff9f9;
    padding: 10px;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    font-family: 'TikTok Sans', sans-serif;
  }
  .skiptranslate iframe {
    display: none;
  }
  body {
    top: 0 !important;
  }
  button.btn.btn-primary.view-details-btn {
    padding: 10px;
    font-size: 12px;
    border-radius: 7px;
    background: #ff7507 !important;
  }
  a.btn.btn-primary.buy-now-btn {
    padding: 10px;
    font-size: 12px;
    border-radius: 7px;
    background: #5ea722 !important;
    flex: auto;
  }
  .serActbtn {
    display: flex;
    gap: 5px;
    white-space: nowrap;
    background: #fff9f9;
    padding: 5px;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  
  td.service-name i {
    background-color: #F43936 !important;
    padding: 5px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff !important;
    margin: 0;
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /*section.servicSeceful {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  margin-top: -85px;
  position: relative;
  border: 1px solid #ffffff;
  backdrop-filter: blur(10px);
  box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
  }
  
  .servCards {
  background: #fff9f9;
  border: 1px solid #f4d9d8;
  border-radius: 8px !important;
  outline: 0;
  box-shadow: none;
  margin: 10px 0;
  }
  .topFlexserv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid #00000020;
  }
  .topFlexservleft {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  }
  .servId {
  background-color: #F43936 !important;
  border: 0 !Important;
  text-transform: uppercase;
  box-shadow: none;
  color: #fff;
  padding: 2px 10px;
  border-radius: 15px;
  margin-right: 5px;
  font-weight: 700;
  font-size: small;
  display: inline-block;
  }
  .service-name.servName {
  font-weight: 500;
  }
  .priceServ span, .priceServ p {
  margin: 0;
  padding: 8px 10px;
  color: #595959;
  }
  .priceServ span {
  border-right: 1px solid #00000020;
  color: #000;
  }
  .priceServ {
  display: flex;
  background: #fff;
  border: 1px solid #00000020;
  border-radius: 8px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .bottomFlexserv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  }
  .bottomFlexservleft .statBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  padding: 5px 7px;
  padding-right: 12px;
  border: 1px solid #00000020;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .bottomFlexservleft .statBox div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  }
  .bottomFlexservleft .statBox i {
  background-color: #F43936 !important;
  border: 0 !Important;
  text-transform: uppercase;
  box-shadow: none;
  color: #fff;
  height: 35px;
  width: 35px;
  border-radius: 7px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  }
  .bottomFlexservleft .statBox.minbox i {
  background-color: #6464c2 !important;
  }
  .bottomFlexservleft .statBox.maxbox i {
  background-color: #ff5318 !important;
  }
  .bottomFlexservleft .statBox.avgbox i {
  background-color: #1ab7a1 !important;
  background-image: radial-gradient(
  93% 87% at 87% 89%,
  rgb(66 200 180 / 35%) 0%,
  transparent 86.18%
  ),
  radial-gradient(
  66% 87% at 26% 20%,
  rgb(150 255 230 / 50%) 0%,
  rgba(255, 255, 255, 0) 69.79%,
  rgba(255, 255, 255, 0) 100%
  ) !important;
  }
  .bottomFlexservleft .statBox small {
  color: #595959;
  font-size: 10px;
  font-weight: 500;
  }
  .bottomFlexservleft .statBox span {
  font-weight: 500;
  line-height: 1.2;
  }
  .bottomFlexservleft {
  display: flex;
  gap: 20px;
  }
  .topFlexservleft button.btn.btn-copy {
  background-color: #0F172A !important;
  border: 1px solid #ffffff20;
  color: #fff;
  height: 30px;
  width: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 10px;
  line-height: 1;
  }
  button.btn.btn-description {
  background-color: #0F172A !important;
  border: 1px solid #ffffff10;
  box-shadow: none;
  color: #fff;
  border-radius: 30px;
  }
  a.btn.btn-buy {
  background-color: #F43936 !important;
  border: 1px solid #ffffff10;
  box-shadow: none;
  color: #fff;
  border-radius: 30px;
  }
  .servBtngroup .btn {
  padding: 10px 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  }
  .servBtngroup {
  display: flex;
  gap: 10px;
  }
  .categoryHeading {
  background: url(https://storage.perfectcdn.com/oezfqb/ulty8w4pm4rpy172.png);
  background-size: cover;
  background-position: center;
  background-color: #F43936 !important;
  border: 1px solid #ffffff20;
  padding: 15px;
  border-radius: 10px;
  color: #fff;
  overflow: hidden;
  position: relative;
  }
@media (max-width: 856px) {
  .bottomFlexserv, .topFlexserv {
  flex-direction: column;
  }
  .bottomFlexservleft {
  flex-wrap: wrap;
  justify-content: center;
  }
  .bottomFlexservleft .statBox {
  flex: auto;
  }
  }*/
  
  
  .servCardwraps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
  }
  
  .servCards {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 20px;
    border: 1px solid #e1e5eb;
  }
  
  .topFlexserv {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
  }
  
  .topFlexservleft {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .mainwrapServ {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .mainwrapServ span {
    background: #e8f1ff;
    color: #201C3F;
    height: 25px;
    width: 25px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .favorite-active {
    color: #ffc107;
  }
  .mainwrapServ span.favorite-active span {
    background: #ffc107;
  }
  
  .btn-copy {
    border: none;
    cursor: pointer;
  }
  button.btn.btn-copy {
    width: 25px;
    height: 25px;
    background: linear-gradient(180deg, #EC1A5C 0%, #F43936 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #fff;
    border-radius: 100px;
    font-size: 12px;
    margin-right: 5px;
    padding: 0;
  }
  
  .servId {
    font-size: 15px;
    color: #6c757d;
  }
  
  .servId b {
    color: #333;
  }
  
  .service-name {
    font-size: 16px;
    color: #6c757d;
  }
  
  .service-name b {
    color: #333;
    font-weight: 600;
  }
  .service-name.servName {
    position: relative;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #00000020;
    max-width: -webkit-fill-available;
  }
  
  .bottomFlexserv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #00000020;
    padding-top: 10px;
  }
  
  .bottomFlexservleft {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .statBox {
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    font-weight: 500;
    border-right: 1px solid #00000020;
    padding: 10px;
    padding-left: 0;
  }
  .statBox.avgbox {
    border: 0;
  }
  
  .statBox span {
    color: #6c757d;
  }
  
  .statBox b {
    color: #333;
    font-weight: 600;
  }
  
  .servBtngroup {
    display: flex;
    gap: 10px;
  }
  
  .servBtngroup .btn {
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.2s;
  }
  .servBtngroup .btn-description {
    border: 0;
    background: #e8f1ff;
    color: #201C3F;
    border-radius: 10px;
  }
  .servBtngroup .btn-description:hover {
    background-color: #e9ecef;
  }
  .servBtngroup .btn-buy {
    background-color: #28a745;
    border: 0;
    color: white;
    border-radius: 10px;
  }
  .servBtngroup .btn-buy:hover {
    background-color: #218838;
    border-color: #1e7e34;
  }
  
  /* Responsive styles */
  @media (max-width: 768px) {
    .topFlexserv {
      flex-direction: column;
      gap: 10px;
    }
  
    .bottomFlexserv {
      flex-direction: column;
      gap: 15px;
      align-items: flex-start;
    }
  
    .servBtngroup {
      width: 100%;
      justify-content: flex-end;
    }
  
    .bottomFlexservleft {
      width: 100%;
      justify-content: space-between;
    }
  }
  
  @media (max-width: 576px) {
    .bottomFlexservleft {
      flex-direction: column;
      gap: 0px;
    }
    .statBox {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      border: 0;
      padding: 5px 0;
    }
    .servBtngroup {
      width: 100%;
    }
    .servBtngroup button, .servBtngroup a {
      flex: 1;
    }
    .bottomFlexservright {
      width: -webkit-fill-available;
    }
    .topFlexservleft {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 10px;
    }
    .service-name.servName {
      padding: 0;
      border: 0;
      margin: 0;
    }
  }
  .categoryHeading {
    background: #161719 !important;
    padding: 12px;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
    text-transform: capitalize;
  }
  
  section.blogSec {
    padding: 50px 0;
  }
  
  
  .footer-section {
    background-color: #17181c !important;
    color: #fff;
    display: flex;
    flex-direction: column;
    margin-top: 70px;
    margin-bottom: -50px;
    position: relative;
  }
.cta-box {
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.10);
    padding: 2.5rem;
    margin: 15px;
    margin-top: -60px;
    border-radius: 20px !important;
    background-color: #F43936 !important;
    border: 1px solid #ffffff20 !important;
    color: #fff;
    position: relative;
  }
.footer-dark {
  }
  .footer-dark .text-muted {
    color: #aaa !important;
  }
  .social-icons .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .social-icons .btn i {
    font-size: 16px;
  }
  .footer-section a {
    text-decoration: none;
    white-space: nowrap;
  }
  .footer-section .cta-box a {
    padding: 15px 25px !important;
    font-size: 16px;
  }
  .footer-section a:hover {
    color: #f43936;
  }

  section.topSec.alttpSec .topCont {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
  }
  section.topSec.alttpSec .topCont h1 {
    font-size: 4rem;
  }
  section.topSec.alttpSec .topCont p {
    font-size: 16px;
    margin-bottom: 30px;
  }
  section.topSec.alttpSec .topCont ul {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 5px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    overflow: auto;
    width: 100%;
    margin-bottom: 20px;
  }
  section.topSec.alttpSec .topCont ul::-webkit-scrollbar {
    display: none;
  }
  section.topSec.alttpSec .topCont ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 130px;
    min-width: 130px;
    line-height: 1.2;
  }
  section.topSec.alttpSec .topCont ul i {
    margin-right: 6px;
    color: #fff;
    padding: 8px;
    border-radius: 50px;
    font-size: 20px;
    background-color: #F43936 !important;
    height: 55px;
    width: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  section.topSec.alttpSec .topCont .topSubheading {
    margin-bottom: 15px;
  }
  
  canvas#particleCanvas {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: -1;
    width: 100%;
  }
  
  .cardnewlogin {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .inlineForminps div.form-group {
    flex: 1;
  }
  .inlineForminps {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
  }
  
  .linesanim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: -webkit-fill-available;
    margin: auto;
    width: 90vw;
    pointer-events: none;
    z-index: -1;
  }
  .linesan {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
  }
  .linesan::after {
    content: '';
    display: block;
    position: absolute;
    height: 15vh;
    width: 100%;
    top: -50%;
    left: 0;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, #f43936 75%, #f43936 100%);
    animation: drop 7s 0s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  }
  .linesan:nth-child(1) {
    margin-left: -50%;
  }
  .linesan:nth-child(1)::after {
    animation-delay: 2s;
  }
  .linesan:nth-child(2) {
    margin-left: -25%;
  }
  .linesan:nth-child(2)::after {
    animation-delay: 5.3s;
  }
  .linesan:nth-child(3) {
    margin-left: 25%;
  }
  .linesan:nth-child(3)::after {
    animation-delay: 2.7s;
  }
  .linesan:nth-child(4) {
    margin-left: 50%;
  }
  .linesan:nth-child(4)::after {
    animation-delay: 4.2s;
  }
  @keyframes drop {
    0% {
      top: -50%;
    }
    100% {
      top: 110%;
    }
  }
  h4#modalServiceName {
    font-size: 15px;
    line-height: 1;
    background: #fff9f9;
    padding: 10px;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  div#modalServiceDescription {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    background: rgb(255, 249, 249);
    padding: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
    outline: 0px;
    border-radius: 8px !important;
  }
  
  
  @media (max-width: 767px) {
    .achievementCont, .xtraCont {
      margin-bottom: 50px;
      text-align: center;
    }
    .topmobGrid {
      grid-template-columns: 1fr;
    }
    .btnGridmob {
      flex-direction: column;
      text-align: center;
    }
    .xtraSeccont {
      text-align: center;
    }
    .xtraservCard:last-child {
      margin-bottom: 15px;
    }
    .bottomDeisngtabs {
      grid-template-columns: 1fr;
    }
    .testimonialWraps {
      grid-template-columns: 1fr;
    }
    section.topSec.alttpSec .topCont h1 {
      font-size: 40px;
    }
    section.topSec.alttpSec .topCont p {
      font-size: 14px;
    }
    section.topSec.alttpSec .topCont ul {
      justify-content: flex-start;
      gap: 0;
    }
    section.topSec.alttpSec .topCont ul li {
      background: #ffe7e7;
      backdrop-filter: blur(10px);
      border: 1px solid #f439362b;
      padding: 15px;
      margin-right: 10px;
      border-radius: 10px;
    }
    .inlineForminps .form-group {
      width: 100%;
    }
    .inlineForminps {
      flex-direction: column;
      gap: 0;
    }
    ul.navbar-nav {
      background: #fff;
      border-radius: 20px;
      border: 1px solid #ececef;
      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
      padding: 10px;
      margin-top: 20px;
      margin-bottom: 0 !important;
    }
    nav.guestnav a.nav-link {
      margin: 0;
      padding: 10px 20px;
    }
    button.navbar-toggler {
      padding: 8px;
      border-radius: 22px;
      font-weight: 600;
      background-color: #F43936 !important;
      border: 0 !Important;
      text-transform: uppercase;
      box-shadow: none !important;
    }
    span.navbar-toggler-icon {
      background: url(https://storage.perfectcdn.com/oezfqb/c5nximj8ashncotj.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
  
  
  .mainCompFlex {
    display: flex;
    gap: 10px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    overflow: hidden;
    padding: 20px;
  }
  
  .mainCompFlex .compFlexcard {
    flex: 1;
    padding: 45px;
  }
  .compFlexcard.wosCard {
    border-radius: 20px !important;
    background-color: #17181c !important;
    border: 1px solid #ffffff20;
    color: #fff;
    position: relative;
  }
  .compFlexcard.competitorCard .headerCardcomp h3 i {
    color: red;
    font-weight: 600;
  }
  .resultBox h2 {
    margin: 0;
    font-size: 25px;
  }
  .resultBox h3 {
    color: #f43936;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin: 7px 0;
  }
  .resultBox small {
    font-weight: 500;
    font-size: 15px;
    color: #292929;
  }
  
  .bodyCardcomp ul li i {
    height: 25px;
    width: 25px;
    background: #ffdede;
    color: red;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-right: 5px;
  }
  
  .bodyCardcomp ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    list-style: none;
    gap: 15px;
    font-size: 15px;
    color: #595959;
    margin: 0;
  }
  .resultBox {
    margin: 30px 0 50px 0;
  }
  .compFlexcard.wosCard .resultBox h3 {
    color: #92da5a;
  }
  .compFlexcard.wosCard .resultBox small {
    color: #ffffff99;
    line-height: 1;
  }
  .compFlexcard.wosCard .bodyCardcomp ul li i {
    background: #92da5a1a;
    color: #80e433;
  }
  .compFlexcard.wosCard .bodyCardcomp ul {
    color: #ffffff99;
  }
  section.compSection {
    padding: 60px 0;
  }
  
  @media (max-width: 765px) {
    .mainCompFlex {
      flex-direction: column;
      margin-top: 50px;
    }
  }

  /* Main Process Section */
  .procssSec #autoTabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
  }
  
  /* Tab Items - White Card Theme for inactive, Red for active */
  .procssSec #autoTabs .nav-item {
    margin-bottom: 0;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
  }
  
  .procssSec #autoTabs .nav-item:hover {
    transform: translateY(-2px);
    box-shadow: rgba(16, 24, 40, 0.08) 0px 4px 8px 0px, rgba(16, 24, 40, 0.10) 0px 2px 4px 0px;
  }
  
  /* Active Tab - Red Card Theme */
  .procssSec #autoTabs .nav-link.active {
    background-color: #17181c !important;
    border: 1px solid #ffffff20;
    color: #fff;
  }
  
  /* Tab Links */
  .procssSec #autoTabs .nav-link {
    padding: 24px;
    border: none !important;
    border-radius: 20px;
    background: transparent !important;
    position: relative;
    transition: all 0.3s ease;
  }
  
  /* Step Cards */
  .procssSec .stepCard {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 2;
  }
  
  .procssSec .stepCard h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    min-width: 60px;
  }
  
  /* Inactive tab text colors */
  .procssSec #autoTabs .nav-item:not(.active) .stepCard h2 {
    background: linear-gradient(135deg, #F43936 0%, #e03532 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .procssSec #autoTabs .nav-item:not(.active) .stepCard p {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    line-height: 1.2;
  }
  
  .procssSec #autoTabs .nav-item:not(.active) .stepCard span {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
    display: block;
  }
  
  /* Active tab text colors */
  .procssSec #autoTabs .nav-link.active .stepCard h2 {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .procssSec #autoTabs .nav-link.active .stepCard p {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  .procssSec #autoTabs .nav-link.active .stepCard span {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
  .procssSec .stepCard div {
    flex: 1;
  }
  
  /* Progress Bar - Only visible for active tab */
  .procssSec .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.8));
    width: 0%;
    border-radius: 0 0 20px 20px;
    transition: width 15s linear;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
    opacity: 0;
  }
  
  /* Show progress bar only for active tab */
  .procssSec .nav-link.active .progress-bar {
    opacity: 1;
    width: 100%;
  }
  
  /* Hide progress bar for inactive tabs */
  .procssSec .nav-link:not(.active) .progress-bar {
    display: none;
  }
  
  /* Content Area - White Card Theme */
  .procssSec .tab-content {
    background: #fff;
    border-radius: 20px;
    padding: 50px 30px;
    border: 1px solid #ffffff;
    backdrop-filter: blur(10px);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    height: -webkit-fill-available;
  }
  
  .procssSec .contentStepcard {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  /* Headings */
  .procssSec .sectionHeads.faqHeads {
    text-align: center;
  }
  
  .procssSec .subheadSec {
    font-size: 0.875rem;
    font-weight: 600;
    color: #F43936;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
  }
  
  .procssSec .sectionHeads.faqHeads h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  
  .procssSec .highlighted {
    color: #F43936;
    background: none;
    -webkit-text-fill-color: #F43936;
  }
  
  .procssSec .sectionHeads.faqHeads p {
    font-size: 1.125rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 32px;
  }
  
  /* Buttons - Red Theme */
  .procssSec .btn-danger {
    background-color: #F43936 !important;
    border: 1px solid #ffffff20 !important;
    color: #fff !important;
    padding: 12px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    position: relative;
    overflow: hidden;
  }
  
  .procssSec .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 57, 54, 0.20);
    background-color: #e03532 !important;
    border-color: #ffffff40 !important;
    color: #fff !important;
  }
  
  .procssSec .btn-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  .procssSec .btn-danger:hover::before {
    left: 100%;
  }
  
  /* Animations */
  .procssSec .tab-pane.fade {
    transition: opacity 0.5s ease-in-out;
  }
  
  .procssSec .tab-pane.fade.show.active {
    animation: slideInUp 0.6s ease-out;
  }
  
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Active state indicator */
  .procssSec #autoTabs .nav-link.active::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    70% {
      box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }
  
  /* Hover effects for white cards */
  .procssSec #autoTabs .nav-item:not(.active):hover {
    background: #f8f9fa;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .procssSec .tab-content {
      padding: 32px 24px;
      margin-top: 24px;
    }
  
    .procssSec .sectionHeads.faqHeads h2 {
      font-size: 2rem;
    }
  
    .procssSec .stepCard {
      gap: 12px;
    }
  
    .procssSec .stepCard h2 {
      font-size: 2rem;
      min-width: 50px;
    }
  
    .procssSec #autoTabs .nav-link {
      padding: 20px;
    }
    .procssSec .tab-content {
      margin-top: 20px !important;
    }
  }
  section.procssSec {
    padding: 60px 0;
  }
  
  @media (min-width: 991px) {
    footer.footer-section.userfooter {
      padding-left: 280px;
    }
  }
  
  i.mailIconcheck {
    background-color: #F43936 !important;
    color: #fff;
    display: flex;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    font-size: 25px;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 20px;
  }
  .absPass {
    position: relative;
  }
  button#showPass {
    background: transparent;
    border: 0;
    font-size: 20px;
    position: absolute;
    top: 7px;
    right: 7px;
  }
  
  .servNewer p {
    margin: 0;
  }
  
  .servlinktw {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  table.ordtable td {
    background: #ffeded;
    vertical-align: middle;
    font-size: 13px;
  }
  table.ordtable tr th {
    white-space: nowrap;
    vertical-align: middle;
    font-size: 13px;
  }
  tr.spacertr {
    height: 8px;
  }
  
  table.ordtable tr td:first-child, table.ordtable tr th:first-child  {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  table.ordtable tr td:last-child, table.ordtable tr th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  span.orddetbox b {
    background-color: rgb(244, 57, 54) !important;
    border-radius: 25px;
    color: #fff;
    padding: 2px 10px;
  }
  span.orddetbox b.copyBtnord {
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background-color: #0F172A !important;
  }
  .cardHeaderAllpage {
    background-color: #0F172A !important;
  }
  
  .ordtable .btn-group a, .subscription-actions a {
    padding: 3px 5px;
    border-radius: 35px;
    padding-right: 10px;
    font-size: 12px;
    font-weight: bold;
  }
  .ordtable .btn-group {
    margin-top: 5px;
  }
  .alert button.close {
    background: #fff;
    border: 0;
    border-radius: 40px;
    height: 26px;
    width: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid #00000020;
    margin-right: 5px;
  }
  
  span.orddetbox {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .cnabox {
    white-space: nowrap;
  }
  
  .statGrp .statGrpchild small {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    line-height: 1;
  }
  .statGrp .statGrpchild {
    text-align: left;
  }
  @media (min-width: 992px) {
    .orderGriod {
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
  }
  
  .view-toggle-group button i {
    background-color: #F43936 !important;
    box-shadow: none;
    height: 30px;
    width: 30px;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
  }
  
  .view-toggle-group button {
    background: #fff !important;
    border: 1px solid #00000020 !important;
    color: #000 !important;
    border-radius: 40px;
    padding: 5px;
    padding-right: 15px;
  }
  .view-toggle-group .btn.active i {
    background-color: #0F172A !important;
  }
  .view-toggle-group .btn.active {
    background-color: #F43936 !important;
    border: 1px solid #ffffff10 !important;
    color: #fff !important;
  }
  
  .subscription-actions a.btn.btn-primary {
    padding: 5px 10px;
    font-size: 12px;
    gap: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
  }
  
  @media (min-width: 992px) {
    .navbar-nav .dropdown-menu {
      right: 0;
      left: auto;
    }
  }
  .servBtngroup .btn-description {
    background: #ffe4e4;
    border: 1px solid #ffd7d6;
    color: #f43936;
  }
  
  
  .welcomCardtop {
    display: block;
    background-color: #0F172A !important;
    overflow: hidden;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    position: relative;
    background-image: url(https://storage.perfectcdn.com/f045pc/imwljz1w6i4j4o4e.png) !important;
    background-size: cover;
    background-position: center;
    background-blend-mode: luminosity;
  }
  .welcomCardtop:before {
    content: '';
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.15)) !important;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-position: center;
    z-index: 0;
    background-size: cover;
    opacity: 1;
  }
  .welcomCardtop a {
    background-color: #F43936 !important;
  }
  
  /* animate using the CSS variable */
  .rankbar .rankIndic {
    transition: width .6s 
      cubic-bezier(.2, .8, .2, 1);
    width: var(--p);
    transform-origin: left center;
    transform: scaleX(0);
    animation: growBar 1.2s cubic-bezier(.2, .8, .2, 1) forwards;
  }
  @keyframes growBar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  
  .bottomBar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin: 15px 10px;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 100;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  .bottomBar .bottomBarclilds a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    padding: 9px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    color: #000;
  }
  .bottomBar .bottomBarclilds a i {
    color: #dc3545;
    font-size: 20px;
  }
  .bottomBarclilds.Activeone a {
    background-color: #0F172A !important;
    color: #fff !important;
    border-radius: 20px;
    transform: scale(1.8);
  }
  .bottomBarclilds.Activeone {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottomBarclilds.Activeone a i {
    color: #fff;
    font-size: 14px;
    padding: 4px;
  }
  
  @media (min-width: 567px) {
    .bottomBar {
      display: none;
    }
  }
  
  .select2-container .select2-dropdown {
    background: #fff9f9;
    padding: 0;
    overflow: hidden;
    border: 2px solid #ffffff;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    margin-top: 10px !important;
  }
  .select2-container--default .select2-results > .select2-results__options {
    border: 0;
    background: transparent;
  }
  .select2-results__option a {
    font-size: 14px;
    padding: 5px;
    transition: all 0.3s 
      ease-in-out;
  }
  .select2-results__option[aria-selected] {
    border-radius: 0;
    border-bottom: 1px solid #00000010;
    transition: all 0.3s 
      ease-in-out;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #0F172A !important;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected] a, .select2-container--default .select2-results__option[aria-selected=true] a {
    color: #fff;
  }
  
  .actionGrp.btn-group .btn-danger {
    padding: 5px 10px;
    border-radius: 35px;
    font-size: 12px;
    font-weight: bold;
  }
  .actionGrp.btn-group a.btn.btn-secondary.btn-buy {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 30px !important;
    text-transform: capitalize;
    margin-right: 10px;
  }
  
  .view-toggle-group {
    display: flex;
    width: 100%;
    gap: 10px;
  }
  .view-toggle-group button {
    flex: 1;
    text-align: left;
  }

  .panel-body {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    background: #fff9f9;
    padding: 10px;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    max-height: 200px;        /* collapsed state */
    overflow: hidden;
    transition: max-height 300ms ease;
  }
  
  /* expanded state */
  .panel-body.expanded {
    max-height: none;
    overflow: visible;
  }
  
  .read-more-btn {
    margin-top: 0;
    cursor: pointer;
    border-radius: 0 0 8px 8px;
    background: #fee2e2;
    font-weight: 600;
    border: 0;
    width: -webkit-fill-available;
    margin: 0 -3px;
  }

  .choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list {
    padding: 0;
  }
  
  .choices__list[aria-expanded] .choices__list .undefined.undefined.undefined {
    border-bottom: 1px solid #00000010;
    padding: 5px 8px;
  }
  
  .topServflex {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px;
    align-items: center;
  }
  span.prcSpan {
    margin-left: auto;
  }
  .middlServflex {
    display: flex;
    gap: 5px;
  }
  .desktopWeap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    flex-wrap: wrap;
  }
  .newServcards {
    border-radius: 10px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  .statsServwraped span {
    background: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #00000020;
    font-weight: 500;
    flex: 1;
  }
  span.minquan {
    color: #107526eb;
    background: #f1fff1;
    border-color: #107526eb;
  }
  span.maxquan {
    color: red;
    background: #ffefef;
    border-color: red;
  }
  span.avgTime {
    background: #fff7e7;
    color: #c17807;
    border-color: #c17807;
  }
  .mainTagswraped span {
    background: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #00000020;
    font-weight: 500;
    flex: 1;
  }
  span.exclusiveServ {
    background: red;
    color: #fff;
    border: 1px solid red;
  }
  span.favoriteServ {
    background: #ff7800;
    color: #fff;
    border: 1px solid #ff7800;
  }
  span.reccmServ {
    background: #0087ff;
    color: #fff;
    border: 1px solid #0087ff;
  }
  .btmServflex .servBtngroup .btn-description, .btmServflex .servBtngroup a.btn-buy {
    padding: 10px 20px;
    font-size: 14px;
    text-transform: capitalize;
    border-radius: 8px;
    line-height: 1;
  }
  
  span.btnFav {
    background: #fff;
    color: #cbcbcb;
    min-height: 30px;
    min-width: 30px;
    border: 1px solid #00000010;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  }
  span.btnFav.favorite-active {
    background: #ffc107;
    color: #fff;
  }
  
  .servNamenid b {
    background-color: #F43936 !important;
    padding: 2px 10px;
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 4px;
  }
  span.prcSpan b {
    background: #24c17a4f;
    color: #198754;
    padding: 3px 10px;
    border-radius: 35px;
  }
  .statsServwraped {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
    flex-wrap: wrap;
  }
  .mainTagswraped {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
  }
  .middlServflex {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .servBtngroup button, .servBtngroup a {
    flex: 1;
  }
  
  @media (max-width: 991px) {
    .btmServflex {
      flex: 1;
    }
  }
  
  .servCardwraps.GridView {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
  }
  .servCardwraps.GridView .btmServflex {
    flex: 1;
  }
  
  span.prcSpan {
    margin-left: auto;
    white-space: nowrap;
    font-size: 13px;
  }
  .servNamenid {
    font-weight: bold;
  }
  button.copy-btn {
    border: 0;
    background: #ffe4e4;
    color: #f43936;
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
  }
  button.copy-btn i {
    transition: all 0.2s ease;
  }
  button.copy-btn.copied {
    background: #25d52f;
    color: #fff;
  }
  
  .read-more-btn {
    margin-top: 0;
    cursor: pointer;
    border-radius: 0 0 8px 8px;
    background: transparent;
    font-weight: 600;
    border: 0;
    width: -webkit-fill-available;
    margin-top: -23px;
    display: block;
  }
  button.read-more-btn[aria-expanded="true"] {
    margin-top: 5px;
    border-radius: 20px;
    background: #fee2e2;
    font-weight: 600;
    border: 0;
    width: -webkit-fill-available;
  }
  
  .dashboardRedirector {
    background-color: #0F172A !important;
    box-shadow: none;
    padding: 10px;
    display: flex;
    margin-bottom: 15px;
    border-radius: 15px;
    color: #fff;
    justify-content: space-between;
    gap: 10px;
  }
  .dashboardRedirector .leftContprofdr p {
    margin: 0;
  }
  .dashboardRedirector .leftContprofdr {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .dashboardRedirector .leftContprofdr span.usernameinti {
    background-color: #F43936 !important;
    color: #fff;
    height: 40px;
    width: 40px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
  }
  .dashboardRedirector a.btn.btn-primary {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 10px;
    font-weight: 600;
    text-transform: capitalize;
  }
  
  div#modalServiceDescription a.btn.btn-secondary.btn-buy {
    display: block;
    padding: 8px;
    margin-top: 10px;
  }
  
  .topServflex div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
  
  @media (max-width: 768px) {
    .topServflex {
      flex-direction: column;
    }
    span.prcSpan b {
      width: 100%;
      display: block;
      text-align: center;
    }
    span.prcSpan {
      width: 100%;
    }
  }
  .servCardwraps.GridView .topServflex {
    flex-direction: column;
  }
  .servCardwraps.GridView span.prcSpan b {
    width: 100%;
    display: block;
    text-align: center;
  }
  .servCardwraps.GridView span.prcSpan {
    width: 100%;
  }
  
  .whatsAppcard.tGcard {
    background: url(https://storage.perfectcdn.com/f045pc/tnj8rljehaqahqma.png);
    background-size: cover;
  }
  .whatsAppcard.tGcard .whatsappCardchild h3 span {
    background: linear-gradient(45deg, #00c2ff, #0097f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .whatsAppcard.tGcard .whatsappCardchild a {
    background: linear-gradient(45deg, #00c2ff, #0097f6);
  }
  a.logoutMainprof {
    margin-left: auto;
    padding: 5px;
    background: #ef3636;
    color: #fff;
    height: 30px;
    width: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
  }
  
  .categoryHeading {
    position: sticky;
    top: 10px;
    z-index: 9;
  }
  span.refillSerc {
    background: #18bf18;
    color: #fff;
  }

  [data-bs-theme="dark"] body.userbody {
    background: #050d20;
  }
  [data-bs-theme="dark"] body.userbody .well {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .backgroundGradis {
    display: none;
  }
  [data-bs-theme="dark"] body.userbody .sidebar {
    background: #050d20;
    border-color: #11224b;
  }
  [data-bs-theme="dark"] body.userbody .profileTop {
    background: #161b33;
    border: 1px solid #ffffff10;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .profInitial {
    background-color: #F43936 !important;
  }
  [data-bs-theme="dark"] body.userbody a.mainFunds {
    background: #ffffff10 !important;
    border: 1px solid #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link.active, [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link.active:hover {
    color: #fff;
    background-color: #F43936 !important;
    border-color: #ff9593;
  }
  [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link.active i.caretTed {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link {
    color: #ffffff99;
    font-weight: 400;
  }
  [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link i.caretTed {
    color: #f43936;
  }
  [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link.active i.navbar-icon {
    background: #fff !important;
    color: #f43936;
  }
  [data-bs-theme="dark"] body.userbody ul.sideul a.nav-link:hover {
    background: #ffffff10;
    border-color: #ffffff20;
  }
  [data-bs-theme="dark"] body.userbody ul.sidebarBtmul {
    background: #161b33;
    border: 1px solid #ffffff10;
    color: #fff;
    box-shadow: 0 0 0 3px #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody ul.sidebarBtmul li a {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .sidebarBtngrp button {
    background: #161b33;
    border: 1px solid #ffffff10;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .usernav {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .pageBreadcrmb {
    background: #161b33;
    border: 1px solid #ffffff10;
    color: #ffffff99;
    box-shadow: 0 0 0 3px #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody .marqueeWrapper {
    background: #161b33;
    border: 2px solid #11224b;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody marquee.news-scroll {
    background: #050d20;
  }
  [data-bs-theme="dark"] body.userbody marquee.news-scroll a {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody .dashboardRedirector {
    background-color: #F43936 !important;
  }
  [data-bs-theme="dark"] body.userbody .dashboardRedirector .leftContprofdr span.usernameinti {
    background-color: #0F172A !important;
    border: 1px solid #ffffff20;
  }
  [data-bs-theme="dark"] body.userbody .dashboardRedirector a.btn.btn-primary {
    background-color: #0F172A !important;
  }
  [data-bs-theme="dark"] body.userbody .dashboardRedirector a.btn.btn-primary::before {
    opacity: 0.05;
  }
  [data-bs-theme="dark"] body.userbody .neworder-tabs {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .neworder-tabs li a.nav-link {
    background: #161b33;
    color: #fff;
    border: 1px solid #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody .wellHead small {
    color: #ffffff99;
    margin-top: 5px;
  }
  [data-bs-theme="dark"] body.userbody ul.servFiltr {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody ul.servFiltr li button {
    background: #0f172a;
    border: 1px solid #ffffff10;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody ul.servFiltr li button.CatFltr.act {
    background-color: #F43936 !important;
  }
  [data-bs-theme="dark"] body.userbody input.select2-selection.select2-selection--single.form-control {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .form-control, [data-bs-theme="dark"] body.userbody .form-control:focus {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .orderSummary {
    background: #191f41;
  }
  [data-bs-theme="dark"] body.userbody .orderSummary input#charge {
    background: #191f41 !important;
    color: #f43936;
  }
  [data-bs-theme="dark"] body.userbody .deliveryTime {
    border-bottom: 1px solid #ffffff10 !important;
  }
  [data-bs-theme="dark"] body.userbody .select2-container .select2-dropdown {
    background: #161b33;
    border: 2px solid #11224b;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .select2-results__option a {
    color: #ffffff99;
    border-bottom: 1px solid #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody .select2-container--default .select2-results__option--highlighted[aria-selected], [data-bs-theme="dark"] body.userbody .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #F43936 !important;
  }
  [data-bs-theme="dark"] body.userbody .select2-container--default .select2-results__option--highlighted[aria-selected] a, [data-bs-theme="dark"] body.userbody .select2-container--default .select2-results__option[aria-selected=true] a {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .categoryHeading {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody .newServcards {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .topServflex {
    border-bottom: 1px solid #11224b;
  }
  [data-bs-theme="dark"] body.userbody .servBtngroup .btn-description {
    background: #c5312f;
    border: 1px solid #ff6b67;
    color: #ffffff;
  }
  [data-bs-theme="dark"] body.userbody .secHeading {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .secHeading p {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody span.prcSpan b {
    color: #ffffffeb;
    background: #20a320;
    border: 1px solid #52f776eb;
  }
  
  [data-bs-theme="dark"] body.userbody table.ordtable td {
    background: #161b33;
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody thead {
    background-color: #F43936 !important;
  }
  [data-bs-theme="dark"] body.userbody .cardHeaderAllpage {
    background-color: #122249 !important;
  }
  a.btn.btn-secondary.btn-buy {
    white-space: nowrap;
    font-size: 14px;
    padding: 10px;
    overflow: hidden;
  }
  .btn.btn-secondary:before {
    opacity: 0.05;
  }
  [data-bs-theme="dark"] body.userbody .orderCard {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .topOrdgrp {
    border-bottom: 1px solid #11224b;
  }
  [data-bs-theme="dark"] body.userbody .statGrp .statGrpchild {
    background: #161b33;
    color: #fff;
    border: 1px solid #ffffff10;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .prcactionGrp {
    border-top: 1px solid #11224b;
  }
  [data-bs-theme="dark"] body.userbody ul#payUl {
    padding: 0;
    gap: 10px;
  }
  [data-bs-theme="dark"] body.userbody ul#payUl li {
    background: #0f172a;
    border: 2px solid #ffffff10;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .choices {
    box-shadow: none;
    border: 1px solid #ffffff20;
  }
  [data-bs-theme="dark"] body.userbody .choices .choices__inner {
    background: #161b33;
    box-shadow: none !important;
    border-radius: 8px !Important;
  }
  [data-bs-theme="dark"] body.userbody .choices__list--dropdown, [data-bs-theme="dark"] body.userbody .choices__list[aria-expanded] {
    border: 2px solid #11224b !important;
    background: #050d20 !important;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .choices[data-type*=select-one] .choices__input {
    background: #161b33 !important;
    box-shadow: none;
    border: 1px solid #ffffff20 !important;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .choices__list--dropdown .choices__list, [data-bs-theme="dark"] body.userbody .choices__list[aria-expanded] .choices__list {
    background: #161b33 !important;
    box-shadow: none;
    border: 1px solid #ffffff20 !important;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .fundsHist {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .paymentGridwrap {
    background: #161b33 !important;
    box-shadow: none;
    border: 1px solid #ffffff20 !important;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .transCard {
    border-bottom: 1px solid #ffffff20;
  }
  [data-bs-theme="dark"] body.userbody .transCard:last-child {
    border-bottom: 0px;
  }
  
  [data-bs-theme="dark"] body.userbody .api-card-body.topapicardbody .param-row {
    background: #0f172a;
    border: 1px solid #ffffff10;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .api-card-body.topapicardbody .param-row div {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .param-name {
    color: #ffffff99 !important;
  }
  [data-bs-theme="dark"] body.userbody .api-card {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .api-card-header {
    background: #161b33 !important;
    border-bottom: 2px solid #11224b;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .api-card-body tr td:last-child {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .api-card-body tr td:first-child {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody .api-card-body .section-title {
    color: #fff;
    border-bottom: 0;
    margin: 0;
    background: #f43936;
    border-radius: 10px 10px 0 0;
    font-size: 12px;
    line-height: 1;
    padding: 10px;
  }
  [data-bs-theme="dark"] body.userbody .api-card-body :not(pre)>code[class*=language-], pre[class*=language-] {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    margin: 0;
    border-radius: 0 0 10px 10px;
  }
  
  [data-bs-theme="dark"] body.userbody ul#ticket-category-tabs li a {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody ul#ticket-category-tabs {
    padding: 0;
  }
  [data-bs-theme="dark"] body.userbody ul#ticket-category-tabs li a div {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody ul#ticket-category-tabs li a div small {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody ul#ticket-category-tabs li a.active {
    border-color: #f43936;
  }
  [data-bs-theme="dark"] body.userbody .tickets-uploader {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .files-wrapper span {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody a.ticket-card {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .ticket-theme {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .ticket-footer {
    border-top: 1px solid #11224b;
  }
  [data-bs-theme="dark"] body.userbody .update-time {
    color: #ffffff99;
  }
  
  [data-bs-theme="dark"] body.userbody .statElm {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .chat-messages {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .chat-message-bubble.support-message {
    background: #ffffff20 !important;
    border: 1px solid #ffffff10 !important;
  }
  [data-bs-theme="dark"] body.userbody .date-separator .badge {
    background: #ffffff20 !important;
    color: #ffffff99 !important;
    padding: 6px 10px;
    font-weight: 500;
    border-radius: 16px;
    font-size: 10px;
  }
  
  [data-bs-theme="dark"] body.userbody .stat-card {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .stat-value {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .stat-label {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody .profile-section, .rules-card {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .table-card {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .membership-card, [data-bs-theme="dark"] body.userbody .rules-card {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .profile-name, [data-bs-theme="dark"] body.userbody .progress-title, [data-bs-theme="dark"] body.userbody .table-title, [data-bs-theme="dark"] body.userbody .rules-title, [data-bs-theme="dark"] body.userbody .rank-title {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .profile-id {
    background: #f439364f;
  }
  [data-bs-theme="dark"] body.userbody .profile-detail {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody .card-icon-wrapper {
    background: #ffffff;
  }
  [data-bs-theme="dark"] body.userbody .rules-list li {
    border-color: #ffffff20;
  }
  
  [data-bs-theme="dark"] body.userbody span.discount-badge {
    background: #dc3545;
    color: #fff;
    opacity: 1 !important;
  }
  [data-bs-theme="dark"] body.userbody .bottomBar {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .bottomBar .bottomBarclilds a {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody p.rank-requirement {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .card-divider {
    background: #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody .benefit-list li {
    color: #ffffff99;
  }
  
  [data-bs-theme="dark"] body.userbody .program-card {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .user-profile {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .program-title h2 {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .referral-link-card {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .commission-card {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .step-card {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
    border-top: 4px solid var(--primary);
  }
  [data-bs-theme="dark"] body.userbody .earnings-section {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .payout-card {
    color: rgb(255, 255, 255);
    border-width: 2px;
    border-style: solid;
    border-color: rgb(17, 34, 75);
    border-image: initial;
    background: rgb(5, 13, 32);
  }
  [data-bs-theme="dark"] body.userbody .header-title h1 {
    color: #fff;
  }
  .link-container button.copy-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 24px 42px;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: 600;
    height: 48px;
    display: flex;
    gap: 7px;
  }
  [data-bs-theme="dark"] body.userbody .referral-link-card h3 {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .step-title, [data-bs-theme="dark"] body.userbody .earnings-header, [data-bs-theme="dark"] body.userbody .payout-title, [data-bs-theme="dark"] body.userbody .earnings-title {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .earnings-item, [data-bs-theme="dark"] body.userbody .payout-item {
    border-color: #ffffff20;
    background: #ffffff10;
    padding: 12px;
    border-radius: 10px;
  }
  [data-bs-theme="dark"] body.userbody .alert.alert-light {
    background: #ffffff20;
    border: 1px solid #ffffff20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .panel-body {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .form-container, [data-bs-theme="dark"] body.userbody .accordion-container {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody label.control-label {
    color: #fff;
    letter-spacing: 1px;
    font-size: 12px;
  }
  [data-bs-theme="dark"] body.userbody .accordion .card-header button {
    background: #161b33 !important;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .accordion .card-header {
    box-shadow: none;
    background: rgb(22, 27, 51) !important;
  }
  [data-bs-theme="dark"] body.userbody .accordion .card {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .card-body {
    color: #ffffff99;
    border-top: 1px solid #ffffff10;
  }
  [data-bs-theme="dark"] body.userbody .read-more-btn {
    color: #fff;
    border-top: 1px solid #ffffff20;
    margin-left: 0px;
    margin-right: 0;
  }
  
  [data-bs-theme="dark"] body.userbody span.data-label {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody .data-value {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .data-value.drop-negative {
    color: red;
  }
  [data-bs-theme="dark"] body.userbody .data-value.drop-positive {
    color: #4CAF50;
  }
  ul.dropcheckpills li {
    flex: 1;
    font-weight: 600;
  }
  ul.dropcheckpills li button {
    width: 100%;
  }
  ul.dropcheckpills {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 10px;
    display: flex;
  }
  [data-bs-theme="dark"] body.userbody ul.dropcheckpills {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
    box-shadow: none;
  }
  [data-bs-theme="dark"] body.userbody .modal-content {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  .modal-header {
    border: 1px solid #ffffff30;
  }
  [data-bs-theme="dark"] body.userbody select.goog-te-combo {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .toc-container {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .content-card {
    border: 2px solid #11224b;
    background: #050d20;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .content-card h2 {
    border-color: #11224b;
  }
  [data-bs-theme="dark"] body.userbody .rule-content p {
    color: #ffffff99;
  }
  [data-bs-theme="dark"] body.userbody .highlight-box {
    color: #f43936;
  }
  [data-bs-theme="dark"] body.userbody .language-note {
    color: #000;
  }
  [data-bs-theme="dark"] body.userbody .toc-list a {
    color: #fff;
  }
  .userWrap .toc-container {
    top: 100px;
  }
  
  .nameserver-item button.copy-btn {
    background: #dc3545;
    width: auto;
    height: auto;
    color: #fff;
    font-size: 12px;
  }
  
  span.price-amount:before {
    content: '- ';
  }
  span.price-amount {
    font-size: 15px;
    color: #dc3545;
    font-weight: 900;
  }
  span.subper {
    color: #fff;
    font-size: 12px;
  }
  .select2-container--default .select2-results__option--highlighted[aria-selected] a span.price-amount, .select2-container--default .select2-results__option[aria-selected=true] a span.price-amount {
    color: #fff;
  }
  
  html { opacity: 0; }
  html, body {
    transition: none !important;
  }
  
  .theme-selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    padding: 10px;
    background-color: #F43936 !important;
    border: 1px solid #ffffff50;
    color: #fff;
  }
  .theme-option img {
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.5s ease;
  }
  .theme-option.active img {
    border: 2px solid #fff;
  }
  .theme-option {
    position: relative;
    cursor: pointer;
  }
  .theme-option small {
    font-size: 12px;
    display: block;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .navbar-brand.Darklog {
    display: none;
  }
  [data-bs-theme="dark"] body.userbody .navbar-brand {
    display: none;
  }
  [data-bs-theme="dark"] body.userbody .navbar-brand.Darklog {
    display: block;
  }
  .grid-view .servNewer div a {
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552;
    color: #f43936;
    display: block;
    margin-top: 10px;
  }
  
  [data-bs-theme="dark"] body.userbody .grid-view .servNewer div a {
    background: #161b33;
    color: #fff;
    border: 1px solid #ffffff10;
    box-shadow: none;
    display: block;
  }
  [data-bs-theme="dark"] body.userbody .servNewer {
    border-bottom: 1px solid #11224b;
  }

  .livecountiframewrapper {
    max-width: 100%;
    overflow: hidden;
    height: 130px;
    background: #e19aa0;
    padding: 15px;
    border-radius: 18px;
  }
  
  .topSecAff h1 b {
    color: #f43936;
  }
  .topSecAff p {
    margin: 0;
  }
  .topSecAff {
    padding: 20px 0;
  }
  [data-bs-theme="dark"] body.userbody .topSecAff {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .topSecAff p {
    color: #ffffff99;
  }
  
  .userWrap .categoryHeading {
    top: 90px;
  }
  .servNamenid {
    font-size: 15px;
  }
  
  [data-bs-theme="dark"] body.userbody .statsServwraped span {
    background: #161b33;
    border: 0;
    font-size: 13px;
  }
  [data-bs-theme="dark"] body.userbody span.minquan {
    color: #22c8fe;
  }
  [data-bs-theme="dark"] body.userbody span.maxquan {
    color: #dc3545;
  }
  [data-bs-theme="dark"] body.userbody span.avgTime {
    color: #bfd5fd;
  }
  [data-bs-theme="dark"] body.userbody .mainTagswraped span {
    border: 0;
    font-size: 13px;
  }
  [data-bs-theme="dark"] body.userbody span.favoriteServ {
    background: #FFD700;
    color: #000;
  }
  
  .achievementCont .subheads i {
    color: #4ada4a;
  }
  .SoclCard {
    height: 100%;
  }
  
  .topHwadtesti img {
    max-width: 50px;
    border-radius: 7px;
  }
  .topHwadtesti p {
    margin: 0;
  }
  
  
  ul.servFiltr, #ticket-category-tabs {
    scroll-behavior: smooth;
  }
  .scroll-wrapper ul.servFiltr {
    margin: 0;
  }
  /* Wrapper to position buttons relative to the list */
  .scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
  }
  /* Button Styles */
  .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Appearance */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: #F43936 !important;
    border: 0;
    transition: all 0.25s ease;
  }
  /* Tabler Icon Size */
  .scroll-btn i {
    font-size: 20px;
    color: #fff;
  }
  .scroll-btn:hover {
    background-color: #f8f9fa;
    transform: translateY(-50%) scale(1.05); /* Slight zoom on hover */
  }
  /* Positioning */
  .prev-btn {
    left: -10px; /* Pulls button slightly out to the left */
  }
  .next-btn {
    right: -10px; /* Pulls button slightly out to the right */
  }
  /* Hide Class (via JS) */
  .scroll-btn.hidden {
    opacity: 0;
    pointer-events: none; /* Prevents clicking when hidden */
  }
  
  /* Optional: Mobile adjustment so buttons don't overlap content too much on small screens */
  @media (max-width: 600px) {
    .prev-btn { left: 5px; }
    .next-btn { right: 5px; }
  }
  
  [data-bs-theme="dark"] body.userbody .insideFunds {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .search-dropdown .input-wrapper .input-wrapper__prepend {
    color: #fff;
  }
  .footerflexgrp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .footerflexgrp > p {
    max-width: 300px;
    text-align: right;
  }
  .mainFooterblock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 400px;
    text-align: left;
  }
  
  @media (max-width: 768px) {
    .footerflexgrp {
      margin-bottom: 20px;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .mainFooterblock {
      align-items: center;
      text-align: center;
    }
    .footerflexgrp > p {
      max-width: 300px;
      text-align: center;
    }
  }
  
  .maininitialppnav, .profInitial {
    text-transform: uppercase;
  }
  
  ul.sideul {
    scrollbar-width: thin;
  }
  
  .offerCardtop {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
    padding: 10px;
  }
  .offerCardtop img {
    max-width: 35px;
  }
  .offerCardtop p b {
    background-color: #F43936 !important;
    padding: 4px 6px;
    font-size: small;
    border-radius: 10px;
    line-height: 1;
    display: inline-flex;
    margin-right: 2px;
    color: #fff;
  }
  .offerCardtop p {
    margin-bottom: 5px;
  }
  .offerCardtop ul {
    padding: 0;
    list-style: none;
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #ffffff99;
    margin: 0;
  }
  .offerCardbtm {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #00000020;
  }
  [data-bs-theme="dark"] body.userbody .offerCardbtm {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #ffffff20;
  }
  .offerCardbtm .offerPrcs b {
    font-size: 18px;
  }
  .offerCardbtm .offerPrcs strike {
    color: #00000099;
    font-size: 12px;
  }
  [data-bs-theme="dark"] body.userbody .offerCardbtm .offerPrcs strike {
    color: #ffffff99;
    font-size: 12px;
  }
  .offerCardbtm .offerPrcs {
    display: flex;
    flex-direction: column;
  }
  a.offerBtnbuy.btn.btn-primary {
    padding: 6px 15px;
    text-transform: capitalize;
    font-size: 13px;
    color: #fff;
  }
  .offerCard {
    margin-bottom: 15px;
    background: #fff9f9;
    border: 2px solid #ffffff;
    outline: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 0.20rem #fca5a552;
  }
  [data-bs-theme="dark"] body.userbody .offerCard {
    background: #161b33 !important;
    border: 1px solid #ffffff10;
    box-shadow: none;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .offerCard:last-child {
    margin: 0;
  }
  
  div#currencyModal ul#currencies-list li a span {
    background: #dc3545;
    color: #fff;
    height: 25px;
    width: 25px;
    border-radius: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }
  div#currencyModal ul#currencies-list li a {
    background: #ffcece;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 10px;
    padding-right: 10px;
    text-decoration: none;
  }
  div#currencyModal ul#currencies-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 10px;
  }
  div#currencyModal ul#currencies-list li {
    flex: auto;
  }
  ul#payUl li {
    min-width: 200px;
    text-align: center;
  }
  
  form.paymentForm .panel-body {
    max-height: inherit;
  }
  
  .currencydd button.btn.btn-primary.dropdown-toggle {
    padding: 12px 20px;
  }
  
  @media (max-width: 992.2px) {
    .serviceTabspillsser {
      flex-wrap: wrap;
    }
    .serviceTabspillsser {
      flex: auto;
    }
    .serviceTabspillsser .catdd button, .serviceTabspillsser .currencydd button {
      width: 100%;
    }
  }
  @media (max-width: 992.2px){
    .servlinktwtd {
      width: 28%;
    }
  }
  
  [data-bs-theme="dark"] body.userbody .rules-list li {
    color: #fff;
  }
  [data-bs-theme="dark"] body.userbody .membership-card.active-rank ul.benefit-list li:last-child {
    color: #f43936 !important;
  }
  .membershipHeading {
    color: #001f3f; 
    font-weight: bold;
  }
  [data-bs-theme="dark"] body.userbody .membershipHeading {
    color: #fff; 
    font-weight: bold;
  }
  .paymentRecent {
    max-height: 400px;
    overflow: auto;
  }
  .paymentRecent::-webkit-scrollbar {
    display: none;
  }
  .paymentGridwrap {
    max-height: 600px;
    overflow: auto;
  }
  .paymentGridwrap::-webkit-scrollbar {
    display: none;
  }
  
  section {
    overflow: hidden;
  }

  /* ══════════════════════════════════════════
  POPUP CONTAINER  —  override inline styles
  ══════════════════════════════════════════ */
  .popup-container {
    /* Override inline padding/radius/shadow entirely */
    padding: 40px 28px 28px !important;
    border-radius: 15px !important;
    box-shadow:
      rgba(16,24,40,.08) 0 2px 8px -1px,
      rgba(16,24,40,.06) 0 1px 3px -1px !important;
    background: #ffffff !important;
    border: 1px solid #00000018 !important;
    position: relative !important;
    overflow: visible !important;   /* lets × float above */
    max-width: 480px !important;
    width: 90% !important;
    max-height: none !important;
    transition:
      background 0.4s ease,
      border 0.4s ease,
      box-shadow 0.4s ease;
  }
  
  /* ── h2 ── */
  .popup-container h2 {
    font-family: 'Syne', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    letter-spacing: -0.01em;
    margin-bottom: 14px !important;
    transition: color 0.4s ease;
  }
  
  /* ── Image ── */
  .popup-container img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
    background: #fff9f9;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 0.20rem #fca5a552 !important;
    outline: 0;
    transition: background 0.4s, border 0.4s, box-shadow 0.4s;
  }
  
  /* ── Text body div (first inner div) ── */
  .popup-container > div:first-of-type {
    background: #fff9f9 !important;
    padding: 14px 16px !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    outline: 0;
    box-shadow: 0 0 0 0.20rem #fca5a552 !important;
    margin-bottom: 0 !important;
    transition: background 0.4s, border 0.4s, box-shadow 0.4s, color 0.4s;
  }
  .popup-container > div:first-of-type p {
    font-size: 14.5px;
    line-height: 1.65;
    color: #444 !important;
    transition: color 0.4s;
  }
  
  /* ── Footer div ── */
  .popup-container > div:last-of-type {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-top: 16px !important;
    margin-top: 20px !important;
    border-top: 1px solid #00000012 !important;
    gap: 10px !important;
    transition: border-color 0.4s;
  }
  
  /* ── × BUTTON — float it on top of the card ── */
  .popup-container > div:last-of-type button {
    position: absolute !important;
    top: -16px !important;
    right: -16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    font-size: 18px !important;
    line-height: 36px !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10;
    /* primary gradient */
    background-color: #F43936 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(244,57,54,.22) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .popup-container > div:last-of-type button:hover {
    transform: scale(1.12) rotate(90deg) !important;
    box-shadow: 0 4px 12px rgba(244,57,54,.28) !important;
  }
  
  /* ══════════════════════════════════════════
  DARK MODE  [data-bs-theme="dark"]
  ══════════════════════════════════════════ */
  [data-bs-theme="dark"] .popup-container {
    background: #050d20 !important;
    border: 2px solid #11224b !important;
    box-shadow:
      0 8px 24px rgba(0,0,0,.35),
      0 0 0 1px rgba(255,255,255,.03) !important;
    border-radius: 16px !important;
    color: #fff !important;
  }
  
  [data-bs-theme="dark"] .popup-container h2 {
    color: #e8eaf6 !important;
  }
  
  [data-bs-theme="dark"] .popup-container img {
    background: #161b33 !important;
    border: 1px solid #ffffff10 !important;
    box-shadow: none !important;
  }
  
  [data-bs-theme="dark"] .popup-container > div:first-of-type {
    background: #161b33 !important;
    border: 1px solid #ffffff10 !important;
    box-shadow: none !important;
  }
  [data-bs-theme="dark"] .popup-container > div:first-of-type p {
    color: #9aa3c8 !important;
  }
  
  [data-bs-theme="dark"] .popup-container > div:last-of-type {
    border-top: 1px solid #ffffff0d !important;
  }
  a.popup-action-btn {
    background-color: #F43936 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(244, 57, 54, .22) !important;
    font-weight: 600;
    border-radius: 20px !important;
  }

  @media (max-width: 991px) {
    img.shapebackdesign {
      width: 120px;
      top: 0;
    }
  }
  .bottomMobile button {
    background: #fff;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
  }
  .bottomMobile a {
    background: #fff;
    height: 25px;
    width: 25px;
    max-height: 25px;
    max-width: 25px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 13px;
  }
  .bottomMobile {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    margin-top: 7px;
    background: #ffffff20;
    padding: 3px;
    border-radius: 34px;
    backdrop-filter: blur(14px);
    border: 1px solid #FFF;
  }
  .bottomMobilehidn {
    display: none !important;
  } 
  .bottomMobile button, .bottomMobile a {
    flex: auto;
  }
  @media (max-width: 567px) {
    .bottomMobilehidn {
      display: block !important;
    } 
    .bottomMobile {
      display: flex;
    }
    .usernav a.navbar-brand img {
      width: 150px;
    }
    div#hamburgerToggle {
      width: 35px;
      height: 35px;
    }
    .maininitialppnav {
      height: 30px;
      width: 30px;
      font-size: 15px;
    }
    nav.navbar.navbar-expand-lg.usernav {
      padding: 5px 0px 7px;
    }
  }
  
  .dashboardRedirector {
    padding: 5px;
    border-radius: 12px;
  }
  
  @media (max-width: 567px) {
    .dashboardRedirector {
      flex-direction: column;
    }
  }
  
  .neworder-tabs {
    padding: 5px;
  }
  ul#filterList {
    padding: 5px;
  }
  ul.servFiltr li button {
    padding: 5px;
  }
  .scroll-btn {
    height: 30px;
    width: 30px;
  }
  .scroll-btn i {
    font-size: 15px;
  }
  .neworder-tabs li a.nav-link {
    padding: 3px;
    padding-right: 15px;
  }
  .neworder-tabs li a.nav-link i {
    height: 25px;
    width: 25px;
  }
  
  .offerCardtop ul li {
    color: #000;
  }
  [data-bs-theme="dark"] .offerCardtop ul li {
    color: #fff;
  }
  .bottomBar {
    margin: 0;
    border-radius: 0;
    border: 0 !important;
    border-top: 2px solid #11224b !important;
    width: 100%;
  }
  .bottomBar .bottomBarclilds a small {
    font-size: 10px !important;
  }
  .bottomBarclilds.Activeone a {
    position: relative;
    top: -15px;
    transform: scale(1.5);
  }
  .scroll-btn {
    z-index: 4;
  }
  
  
  .form-control, .form-control:focus {
    border-radius: 13px !important;
    padding: 15px;
    padding-right: 30px;
  }
  label.control-label {
    font-weight: 600;
    margin-bottom: 6px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  label.control-label i {
    color: #f43936;
    margin-right: 5px;
  }
  .form-control, .form-control:focus {
    box-shadow: none;
    margin: 0 !important;
    border: 1px solid #f4393620;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }
  video.iframeVid {
    box-shadow: rgba(16, 24, 40, 0.06) 0px 1px 2px 0px, rgba(16, 24, 40, 0.08) 0px 1px 3px 0px;
    border-radius: 15px;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: none;
  }