.table {
    color: black;
}
#navbar, .headerNav.py-3{
    background: white;
    box-shadow: unset;
}

.form-control.description {
    font-weight: 400;
    border: none;
    border-radius: 12px;
}

.breadcrumb {
    display: none !important;
}
.discounts h6 {
    font-size: 14px !important;
    text-transform: unset !important;
}
.login-signup-page {
    display: none !important;
}
.container-fluid.px-md-5 {
    padding-left: unset !important;
    padding-right: unset !important;
}
.faq-title {
    background: #273fdf !important;
    font-size: 20px !important;
    text-align: center !important;
}
.faq-p {
    font-size: 16px !important;
}
.navbar.navbar-expand-lg.mx-lg-5 {
    /*height: 65px;*/
    padding: 9px 7px !important;
    /*padding: unset !important;*/
}
.navbar.navbar-expand-xl.navbar-light.mx-lg-5 {
    height: 3.5rem;
}
@media screen and (max-width: 600px){
 table td {
    text-align: left;
    font-size: 16px;
 }   
}
.menu-icon {
    color: white;
    font-size: 1.5rem !important;
}
.sidebar-content {
    padding: unset !important;
}
.layout .header {
    box-shadow: unset !important;
}
@media (max-width: 768px){
     .sidebar-toggler.break-point-lg {
        display: initial;
    }
}
.sidebar-toggler {
    display: none;
}
.header {
    display: inline-block;
}
.modal-body {
    color: black;
}
.layout .content {
    padding: unset !important;
}
@media (min-width: 1200px){
    .login-box {
        height: 22rem !important;
        border-right-width: 1rem !important;
        border-bottom-width: 1rem !important;
        flex: 0 0 27% !important;
        max-width: 27% !important;
        margin-left: 3.5%;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
.login-box{
    margin-left: -15px;
    height: 22rem !important;
    margin-top: 6rem !important;
    border-right-width: 1rem !important;
    border-bottom-width: 1rem !important;
}
}
.nav-registration-loggedout {
    color: #22a3dd !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding-left: 0.5rem !important;
}
.page-wrapper>.container-fluid {
    padding: 0px !important;
}
.addFund:hover {
    background-color: #04092d !important;
}
.col-sm-12.discounts{
    padding-left: 25px !important;
    padding-top: 10px;
}
@media (max-width: 768px){
    .login-box {
        width: 86%;
        margin-left: 7%;
        border-right-width: 1rem !important;
        border-bottom-width: 1rem !important;
        margin-top: 3rem;
        border-radius: 5rem;
    }
    .headerNav .navbar-brand {
        order: 2;
    }
    .headerNav .push-notification {
        order: 3;
    }
    #navbarSupportedContent {
        order: 4 !important;
    }
}
.loginbtn::before {
    border-top: unset !important;
    border-left: unset !important;
}
.loginbtn::after {
    border-bottom: unset !important;
    border-right: unset !important;
}
#feature {
    padding: 50px 0 66px 0;
}
.form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
@media (min-width: 1200px){
    .container {
        max-width: 1600px;
    }
}
#smmnavbar .nav-registration .nav-link::before {
    border-radius: 50px !important;
    color: #fff;
}
.hero-content {
    margin-top: 1.7rem;
    margin-bottom: 1.7rem;
}
.card-type-1.card {
    border-radius: 50px !important;
    height: 100%;
    padding: 2rem 1rem;
    border: 0;
    border-radius: 0;
    background-color: var(--allbg);
    box-shadow: var(--allshadow) !important;
}
.workwith svg {
    max-width: 100px;
}
@media (max-width: 575px){
    .workwith svg {
        margin-right: 0;
    }
    
}
@media (max-width: 991px){
    .workwith svg {
        margin: 0 15px 30px;
    }    
}
.register-form {
    padding: 30px;
    border-top: 3px rgba(34, 34, 34, .15) solid;
    border-left: 3px rgba(34, 34, 34, .15) solid;
    border-right: 15px rgba(34, 34, 34, .15) solid;
    border-bottom: 15px rgba(34, 34, 34, .15) solid;
    border-radius: 5rem;
    background-color: white;
  }

    @media (max-width: 600px){
        .register-form {
            padding: 10px !important;
        }

}
.login-form {
    border: solid #e0e0e0;
    border-radius: 5rem;
    padding: 25px !important;
    border-right-width: 1rem;
    border-bottom-width: 1rem;
}
.table.categories-show-table.table.table-striped.text-dark th:first-child {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
.table.categories-show-table.table.table-striped.text-dark th:last-child {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
table.categories-show-table.table.table-striped.text-center th:first-child {
    border-top-left-radius: 1rem;
}
table.categories-show-table.table.table-striped.text-center th:last-child {
    border-top-right-radius: 1rem !important;
}
.service-list .card {
    border-radius: 1.5rem !important;
}
.btn-danger {
    border-radius: 2rem !important;
}
ul.nav.nav-pills li.nav-item a.nav-link.active {
    background: #0D1238 !important;
    color: white !important;
    border-radius: 2rem !important;
    border: none;
}
table tr {
    border: none !important;
}
.bg-primary {
    background-color: #0D1238 !important;
    border-top-right-radius: 2rem !important;
    border-top-left-radius: 2rem !important;
}
.modal-content {
    border-radius: 1rem !important;
}
.page-item.active .page-link {
    background-color: #0D1238 !important;
    border-color: #0D1238 !important;
    color: #fff !important;
}
.page-link {
    color: #0D1238;
}
#footer {
    background: #0d1238; 
}
.copy-rights {
    background: #0d1238;
}
.form-group.price {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.fixedsidebar {
    display: none;
}
@media (min-width: 421px) and (max-width: 575px){
    .login-box {
        width: 86%;
        margin-left: 7%;
        border-right-width: 1rem !important;
        border-bottom-width: 1rem !important;
        margin-top: 3rem;
        border-radius: 5rem;
        padding-left: 5px;
        padding-right: 5px;
    }
}
.h1 {
    line-height: 1.2 !important;
}
.how-it-works .content-wrapper::after{right: -148.5px;}
.api-details {margin-top: 20px;background: #fff;border-radius: 12px;overflow: hidden;-webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);margin-right: 1rem;margin-left: 1rem;border-radius: 1rem;}
.menu-icon span{
    width: 1.5rem;
    height: 2px;
    background-color: #22a3dd;
}
@media (min-width: 300px) and (max-width: 350px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 351px) and (max-width: 399px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 400px) and (max-width: 450px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 451px) and (max-width: 499px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 500px) and (max-width: 550px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 551px) and (max-width: 599px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 600px) and (max-width: 699px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 700px) and (max-width: 799px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 800px) and (max-width: 899px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
@media (min-width: 899px) and (max-width: 991px){
#navbar .navbar .navbar-brand {
  padding-left: 0%;
  padding-right: 0%;
    }
}
.navbar-toggler{line-height: 0 !important;}
.copy-rights p {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.offset-4 {
    margin-left: 0 !important;
}
@media (min-width: 300px) and (max-width: 350px){
.homepage-title-one {
    font-size: 36px !important;
}
.homepage-title-two {
    font-size: 3.5rem !important;
}
.hero-bg-image {
    height: 25rem !important;
    margin-top: -3rem;
}
}
@media (min-width: 351px) and (max-width: 400px){
.homepage-title-one {
    font-size: 40px !important;
    margin-top: 10rem !important;
}
.homepage-title-two {
    font-size: 3.5rem !important;
}
.hero-bg-image {
    height: 26rem !important;
    margin-top: -3rem;
}
}
@media (min-width: 401px) and (max-width: 450px){
.homepage-title-one {
    font-size: 46px !important;
    margin-top: 10rem !important;
}
.homepage-title-two {
    font-size: 3.5rem !important;
}
.hero-bg-image {
    height: 27rem !important;
    margin-top: -3rem;
}
}
@media (min-width: 451px) and (max-width: 500px){
.homepage-title-one {
    font-size: 3rem !important;
    margin-top: 10rem !important;
}
.homepage-title-two {
    font-size: 4rem !important;
}
.hero-bg-image {
    height: 27rem !important;
    margin-top: -3rem;
}
}
@media (min-width: 501px) and (max-width: 550px){
.homepage-title-one {
    font-size: 3rem !important;
    margin-top: 10rem !important;
}
.homepage-title-two {
    font-size: 4rem !important;
}
.hero-bg-image {
    height: 28rem !important;
    margin-top: -3rem;
}
}
@media (min-width: 1301px) and (max-width: 5000px){
.homepage-title-one {
    font-size: 5rem !important;
    line-height: 1.2 !important;
}
.homepage-title-two {
    font-size: 5rem !important;
}

}
@media (min-width: 992px) and (max-width: 5000px){
.nav-registration-loggedout{
    Display: none;
}
}
.addQuantity {
    font-size: 14px!important;
    width: 8rem !important;
    font-weight: 400;
    padding: 0;
}
.changespeed {
    font-size: 1rem !important;
}
.footer-links h5 {
    color: white;
    padding-bottom: 16px !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}
.text-uppercase {
    text-transform: none !important;
}
.heading{
    display: none;
}
@media (min-width: 1200px) and (max-width: 1299px){
    .top-menu {
        margin-right: 15% !important;
      }
}
@media (min-width: 1300px) and (max-width: 1399px){
    .top-menu {
        margin-right: 20% !important;
      }
}
@media (min-width: 1400px) and (max-width: 1499px){
    .top-menu {
        margin-right: 20% !important;
      }
}
@media (min-width: 1500px) and (max-width: 1599px){
    .top-menu {
        margin-right: 25% !important;
      }
}
.media-small-item {
    margin-bottom: 1rem;
}
@media (min-width: 1200px) and (max-width: 3000px){
.login-margin {
    margin-left: 30% !important;
}
}
.hidden {
    display: none;
}
@media (min-width: 50px) and (max-width: 768px){
    .login-box {
        margin-top: 3rem;
    }
}

@media (min-width: 768px) and (max-width: 992px){
    .login-box {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-right: 10rem !important;
        margin-left: 10rem !important;
    }

}


@media (min-width: 800px){
.reset-pass-col {flex: 0 0 50% !important;max-width: 50% !important;margin-left: 25% !important;}
.justify-content-start{
    display: none;
}
.more-button {
    font-weight: 400;
}
.service-font-size{
    font-size: 16px;
}
.catagories-table-width tr{
    height: 45px;
}.catagories-table-width td{
    vertical-align: inherit !important;
}
  /* Media query for mobile devices */
  @media (max-width: 768px) {
    .icon-container {
        display: flex;
        justify-content: center; /* Horizontally center */
        align-items: center; /* Vertically center */
        width: 100%;
        flex-direction: column;
    }
  }
    /* Media query for mobile devices */
       @media (max-width: 768px) {
        .h1 {
            font-size: 35px;
          }
      }

      /* Media query for mobile devices */
      @media (max-width: 768px) {
        .hero-bg-image {
          background-size: 150%; /* Adjust the zoom level as needed */
        }
      }

      .footer-column h3 {
        margin-bottom: 15px !important;
      }
      body {
        transition: background-color 0.3s, color 0.3s;
    }

    body.dark-mode {
        background-color: #121212;
        color: #ffffff;
    }

    .header, .footer {
        transition: background-color 0.3s;
    }

    .header.dark-mode, .footer.dark-mode {
        background-color: #1a1a1a;
    }

    #dark-mode-toggle {
        cursor: pointer;
        border: none;
        background-color: transparent;
        color: inherit;
        font-size: 18px;
    }
    /* Default light mode styles */
#hero-banner {
color: #333;
}

#hero-banner .shape-rectangle {
background-color: #ffffff;
}


#hero-banner .login-box {
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#hero-banner .form-wrapper {
background-color: transparent;
}

#hero-banner .form-control {
background-color: #ffffff;
color: #333;
border: 1px solid #ccc;
}

#hero-banner .loginbtn {
background-color: #22A3DD;
color: #ffffff;
}

#hero-banner .btn-forgetpass {
color: #22A3DD;
}

/* Dark mode styles */
body.dark-mode #hero-banner {
background-color: #0d1238;
color: #ffffff;
}
/* Dark mode styles */
body.dark-mode .homepage-title-one {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Dark mode styles */
body.dark-mode .hero-bg-image {
background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20841.9%20595.3%22%20style%3D%22enable-background%3Anew%200%200%20841.9%20595.3%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3Argb(34%2C163%2C221)%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpolygon%20id%3D%22XMLID_40_%22%20class%3D%22st0%22%20points%3D%22349.1%2C572.9%20416%2C573.2%20531.4%2C59%20343.3%2C208.9%20436.3%2C208.4%20%22%2F%3E%0A%3Cpolygon%20id%3D%22XMLID_41_%22%20class%3D%22st0%22%20points%3D%22638.3%2C185.9%20660.8%2C186%20699.7%2C12.8%20636.3%2C63.3%20667.7%2C63.1%20%22%2F%3E%0A%3Cpolygon%20id%3D%22XMLID_43_%22%20class%3D%22st0%22%20points%3D%22206.2%2C280.4%20224.2%2C280.5%20255.4%2C141.6%20204.6%2C182.1%20229.7%2C182%20%22%2F%3E%0A%3Cpolygon%20id%3D%22XMLID_44_%22%20class%3D%22st0%22%20points%3D%22644.2%2C511.6%20662.2%2C511.6%20693.4%2C372.8%20642.6%2C413.3%20667.7%2C413.1%20%22%2F%3E%0A%3Cpolygon%20id%3D%22XMLID_42_%22%20class%3D%22st0%22%20points%3D%2267.5%2C566.5%2090%2C566.6%20128.9%2C393.4%2065.5%2C443.9%2096.9%2C443.7%20%22%2F%3E%0A%3C%2Fsvg%3E');
}
body.dark-mode #hero-banner .shape-rectangle {
background-color: #333333;
}


body.dark-mode #hero-banner .login-box {
background-color: #2a2a2a;
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

body.dark-mode #hero-banner .form-wrapper {
background-color: transparent;
}

body.dark-mode #hero-banner .form-control {
background-color: #333333;
color: #ffffff;
border: 1px solid #555;
}

body.dark-mode #hero-banner .loginbtn {
background-color: #555555;
color: #ffffff;
}

body.dark-mode #hero-banner .btn-forgetpass {
color: #888888;
}

body.dark-mode #hero-banner .btn-forgetpass:hover {
color: #22A3DD;
}
/* Default light mode styles */
#navbar {
background-color: #ffffff;
color: #333;
}

#navbar .navbar-brand svg .st0 {
fill: #22A3DD; /* Logo color */
}

#navbar .navbar-nav .nav-link {
transition: color 0.3s;
}


/* Dark mode styles */
body.dark-mode #navbar {
background-color: #0d1238;
color: #ffffff;
}

body.dark-mode #navbar .navbar-brand svg .st0 {
fill: #22a3dd; /* Change logo color for dark mode */
}

body.dark-mode #navbar .navbar-nav .nav-link {
color: #ffffff;
}

body.dark-mode #navbar .navbar-toggler .menu-icon span {
background-color: #ffffff;
}

body.dark-mode #dark-mode-toggle i {
color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 767px) {
#dark-mode-toggle {
    font-size: 20px; /* Smaller icon size for mobile */
}

body.dark-mode #navbar .navbar-toggler {
    border-color: #ffffff;
}
}
/* Default light mode styles */
#feature {
color: #333;
}
.btn-forgetpass {
    color: #22a3dd !important;
  }
#feature .card-type-1 {
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

#feature .card-title {
color: #333;
}

#feature .card-text {
color: #666;
}

#feature .card-icon img {
filter: none; /* No filter for images in light mode */
}

/* Dark mode styles */
body.dark-mode #feature {
background-color: #121212;
color: #ffffff;
}

body.dark-mode #feature .card-type-1 {
background-color: #1e1e1e;
border: 1px solid #444;
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode #feature .card-title {
color: #ffffff;
}

body.dark-mode #feature .card-text {
color: #bbbbbb;
}


/* Responsive adjustments */
@media (max-width: 767px) {
#feature .card-type-1 {
    margin-bottom: 20px;
}
}
/* Default light mode styles */
#work-with {
color: #333;
}

#work-with .heading-container h3 {
color: #333;
}

#work-with .workwith svg {
filter: none; /* No filter for SVGs in light mode */
}

#work-with .workwith img {
filter: none; /* No filter for images in light mode */
}

/* Dark mode styles */
body.dark-mode #work-with {
background-color: #121212;
color: #ffffff;
}

body.dark-mode #work-with .heading-container h3 {
color: #ffffff;
}

/* Dark mode styles */
body.dark-mode .st54 {
fill: #22a3dd; /* Change fill to white for dark mode */
}

body.dark-mode .st55 {
fill: #fffff; /* Change fill to dark blue for dark mode */
}

body.dark-mode .st56 {
stroke: #fffff; /* Change stroke to dark blue for dark mode */
}

/* Default SVG styles (Light Mode) */
/* No changes are needed here unless you have different default styles. */

/* Dark mode styles */
body.dark-mode .st57 {
fill: #22a3dd; /* Change fill to white for dark mode */
}

body.dark-mode .st58 {
stroke: #fffff; /* Change stroke to dark for dark mode */
}

body.dark-mode .st59 {
fill: #fffff; /* Change fill to dark blue for dark mode */
}

body.dark-mode .st161 {
fill: #22a3dd; /* Change fill to white for dark mode */
}

body.dark-mode .st62 {
stroke: #fffff; /* Change stroke to dark for dark mode */
}

body.dark-mode .st63 {
fill: #fffff; /* Change fill to dark for dark mode */
}

body.dark-mode .st64 {
fill: #22a3dd; /* Change fill to white for dark mode */
}

body.dark-mode .st65 {
fill: none;
stroke: #fffff; /* Change stroke to dark for dark mode */
stroke-miterlimit: 10;
}

body.dark-mode .st66 {
fill: #fffff; /* Change fill to dark for dark mode */
}

body.dark-mode .st67 {
fill: #22a3dd; /* Change fill to white for dark mode */
}

body.dark-mode .st68 {
stroke: #fffff; /* Change stroke to dark for dark mode */
}

body.dark-mode .st69 {
fill: #fffff; /* Change fill to dark for dark mode */
}

body.dark-mode .st170 {
fill: #22a3dd; /* Change fill to white for dark mode */
}

body.dark-mode .st171 {
stroke: #fffff; /* Change stroke to dark for dark mode */
}

body.dark-mode .st172 {
fill: #fffff; /* Change fill to dark for dark mode */
}
/* Dark mode styles */
body.dark-mode #faq .faq-item {
background-color: #1e1e1e;
color: #e0e0e0;
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

body.dark-mode #faq .faq-item h4 {
color: #ffffff;
}

body.dark-mode #faq .faq-item p {
color: #cccccc;
}

body.dark-mode #faq .faq-item a {
color: #bb86fc;
}

/* Responsive adjustments */
@media (max-width: 767px) {
#faq .faq-item h4 {
    font-size: 16px;
}

#faq .faq-item p {
    font-size: 14px;
}
}
/* Responsive adjustments */
@media (max-width: 767px) {
#work-with .heading-container h3 {
    font-size: 28px; /* Adjust font size for mobile */
}

#work-with .workwith img {
    width: 100px; /* Adjust image size for mobile */
    height: auto;
}
}
/* Default light mode styles */
#how-it-works {
color: #333;
padding: 75px 0;
}

#how-it-works .heading-container .heading,
#how-it-works .heading-container .sub-heading,
#how-it-works .slogan {
color: #333;
}

#how-it-works .content-wrapper {
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

#how-it-works .content-wrapper .icon i {
color: #22a3dd;
}

#how-it-works .icon-container path {
fill: #22a3dd;
}

/* Dark mode styles */
body.dark-mode #how-it-works {
background-color: #0d1238;
color: #ffffff;
padding: 75px 0;
}

body.dark-mode #how-it-works .heading-container .heading,
body.dark-mode #how-it-works .heading-container .sub-heading,
body.dark-mode #how-it-works .slogan {
color: #ffffff;
}

body.dark-mode #how-it-works .content-wrapper {
background-color: #1e1e1e;
border: 1px solid #444;
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

body.dark-mode #how-it-works .content-wrapper .icon i {
color: #22a3dd;
}

body.dark-mode #how-it-works .icon-container path {
fill: #bb86fc;
}

/* Responsive adjustments */
@media (max-width: 767px) {
#how-it-works .heading-container .heading {
    font-size: 24px; /* Adjust heading size for mobile */
}

#how-it-works .content-wrapper {
    margin-bottom: 20px; /* Add spacing between items for mobile */
}
}
/* Dark mode styles */
body.dark-mode .h6 {
color: #ffffff; /* White text color for dark mode */
font-weight: 500; /* Keeping the same weight */
}
/* Default light mode styles */
#faq {
background-color: #f8f9fa;
color: #333;
}

#faq .heading-container .slogan {
color: #333;
margin-bottom: 20px;
}

#faq .faq-content {
border-top: 1px solid #ddd;
}

#faq .faq-item {
padding: 15px 0;
border-bottom: 1px solid #ddd;
}

#faq .faq-item h4 {
color: #222;
font-size: 18px;
margin-bottom: 10px;
}

#faq .faq-item a {
color: #22a3dd;
text-decoration: underline;
}

/* Dark mode styles */
body.dark-mode #faq {
background-color: #121212;
color: #ffffff;
}

body.dark-mode #faq .heading-container .slogan {
color: #ffffff;
}

body.dark-mode #faq .faq-content {
border-top: 1px solid #333;
}

body.dark-mode #faq .faq-item {
border-bottom: 1px solid #333;
}

body.dark-mode #faq .faq-item h4 {
color: #ffffff;
}

body.dark-mode #faq .faq-item p {
color: #dddddd;
}

body.dark-mode #faq .faq-item a {
color: #bb86fc;
}

/* Responsive adjustments */
@media (max-width: 767px) {
#faq .faq-item h4 {
    font-size: 16px;
}

#faq .faq-item p {
    font-size: 14px;
}
}