@media (prefers-color-scheme: dark) {
    #main-banner,
    #section-footer,
    a > .svg-inline--fa,
    li > .svg-inline--fa,
    .siteNotification,
    section,
    .intro-box,
    .svg-inline--fa,
    .section-heading h2,
    .pricing-box,
    .section-heading h2::after,
    .pricing-box h4,
    .overlay::before,
    .feature-inner p,
    #demo-number {
        color: #fff !important;
    }

    #main-banner,
    #section-footer {
        background-color: #ffc91d !important;
    }

    a > .svg-inline--fa,
    li > .svg-inline--fa {
        color: #222 !important;
    }

    .siteNotification,
    section {
        background-color: #222 !important;
    }

    .intro-box h4 {
        color: #ffcd00 !important;
    }

    .svg-inline--fa {
        color: #e1e1e1 !important;
    }

    .section-heading h2 {
        color: #dbdbdb !important;
    }

    .pricing-box,
    .section-heading h2::after {
        background: #ffcd00 !important;
    }

    .pricing-box h4 {
        background: #222 !important;
        color: #dbdbdb;
    }

    .pricing-box p,
    span {
        color: #222;
    }

    .form-control {
        background-color: #e8e8e8 !important;
    }

    ul {
        color: #fff !important;
    }

    .overlay::before {
        background-color: rgba(10, 10, 10, 0.25) !important;
    }

    li > .fa-monero  {
        color: #ff6600 !important;
    }

    li > .fa-bitcoin {
        color: #f7931a !important;
    }

    li > .fa-ethereum {
        color: #05adff !important;
    }

    .col-md-12 > h3,
    .col-md-12 > span {
        color: #fff !important; 
    }

    pre {
        background-color: #222 !important;
        border: 2px solid #000 !important;
        color: #fff !important;
    }

    .btn-grey:hover {
        background-color: #FFF !important;
        border-color: #C8C8C8 !important;
    }

    #termynal > span {
        color: #fff !important;
    }

    th, td {
      color: #fff !important;  
    }
    
    /* Branding page styles */
    #section-branding .bg-light {
        background-color: #333 !important;
        color: #fff !important;
    }
    
    #section-branding .bg-light p {
        color: #fff !important;
    }
    
    #section-branding h3, 
    #section-branding h4 {
        color: #ffcd00 !important;
    }
    
    #section-branding .bg-light div[style*="font-family"] {
        color: #fff !important;
    }
    
    /* Fix logo visibility in dark mode */
    #section-branding .col-md-6 div[style*="background-color: #ffcd00"] {
        background-color: #ffcd00 !important;
        border-color: #444 !important;
    }
    
    /* Fix color palette cards in dark mode */
    #section-branding div[style*="border: 2px solid #222"] {
        border-color: #444 !important;
    }
    
    /* Ensure color description boxes are visible in dark mode */
    #section-branding div[style*="background-color: #f0f0f0"] {
        background-color: #333 !important;
        color: #fff !important;
    }
    
    #section-branding div[style*="background-color: #f0f0f0"] div {
        color: #fff !important;
    }
    
    /* Fix usage rules in dark mode */
    #section-branding div[style*="background-color: #f5f5f5"] {
        background-color: #444 !important;
    }
    
    #section-branding div[style*="background-color: #f5f5f5"] p {
        color: #fff !important;
    }
}