/* Dark Mode Stylesheet */

body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

/* Header & Navigation */
body.dark-mode header {
    background-color: #222;
    border-bottom: 1px solid #333;
}

body.dark-mode .site-logo h1 a {
    color: #fff;
}

body.dark-mode .Navigation ul li a {
    color: #e0e0e0;
    border-radius: 8px;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode .Navigation ul li a:hover {
    color: #ffffff;
    background-color: rgba(0, 123, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(120, 190, 255, 0.25);
}

body.dark-mode .Navigation ul li a:active {
    color: #ffffff;
    background-color: rgba(120, 190, 255, 0.34);
    box-shadow: inset 0 0 0 1px rgba(180, 225, 255, 0.45);
}

body.dark-mode .Navigation ul li.active a {
    color: #7fc0ff;
}

/* Container & Content */
body.dark-mode #Container {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .Center {
    background-color: #1a1a1a;
}

/* About Page */
body.dark-mode .About_sec {
    background-color: #1a1a1a;
}

body.dark-mode .About_sec .About_header {
    background-color: #222;
    color: #e0e0e0;
    border-bottom: 2px solid #333;
}

body.dark-mode .About_sec .tabs_container #cont-1,
body.dark-mode .About_sec .tabs_container #cont-2,
body.dark-mode .About_sec .tabs_container #cont-3 {
    background-color: #222;
    color: #e0e0e0;
    border: 1px solid #333;
}

body.dark-mode .About_sec .tabs_container .tabcontent {
    background-color: #222;
    color: #e0e0e0;
    border: 1px solid #333;
    border-top: none;
}

body.dark-mode .About_sec .tabs_container button {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #444;
}

body.dark-mode .About_sec .tabs_container button:hover {
    background-color: #444;
}

body.dark-mode .About_sec .tabs_container button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #0056b3;
}

/* Pricing Page */
body.dark-mode .Pricing_sec {
    background-color: #1a1a1a;
}

body.dark-mode .Pricing_sec .Pricingside {
    background-color: #1a1a1a;
}

body.dark-mode .Pricing_sec .Pricingside ul {
    background-color: #222;
    border: 1px solid #333;
    color: #e0e0e0;
}

body.dark-mode .Pricing_sec .Pricingside ul li {
    border-bottom: 1px solid #333;
    color: #e0e0e0;
}

body.dark-mode .Pricing_sec .Pricingside ul li.Dollar {
    background-color: #007bff;
    color: #fff;
    border-color: #0056b3;
}

body.dark-mode .Pricing_sec .Pricingside ul li.Basic {
    background-color: #333;
    color: #e0e0e0;
    font-weight: 600;
}

body.dark-mode .Pricing_sec .Pricingside ul li.Band {
    background-color: #444;
    color: #fff;
}

/* Contact Page */
body.dark-mode .Contact_sec {
    background-color: #1a1a1a;
}

body.dark-mode .Leftside {
    background-color: #222;
    color: #e0e0e0;
}

body.dark-mode .Leftside form input,
body.dark-mode .Leftside form textarea {
    background-color: #333;
    color: #e0e0e0;
    border: 1px solid #444;
}

body.dark-mode .Leftside form input::placeholder,
body.dark-mode .Leftside form textarea::placeholder {
    color: #999;
}

body.dark-mode .Leftside form input:focus,
body.dark-mode .Leftside form textarea:focus {
    background-color: #444;
    border-color: #007bff;
    outline: none;
}

body.dark-mode .Rightside {
    background-color: #222;
    color: #e0e0e0;
}

body.dark-mode .Rightside h3 {
    color: #fff;
}

body.dark-mode .Rightside a {
    color: #007bff;
}

body.dark-mode .Rightside a:hover {
    color: #0056b3;
}

/* Footer */
body.dark-mode .page-footer {
    background-color: #222;
    color: #e0e0e0;
    border-top: 1px solid #333;
}

body.dark-mode .page-footer h6 {
    color: #fff;
}

body.dark-mode .page-footer p,
body.dark-mode .page-footer a {
    color: #e0e0e0;
}

body.dark-mode .page-footer a:hover {
    color: #fff;
}

body.dark-mode .page-footer .footer-copyright {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
}

body.dark-mode .page-footer hr {
    border-color: #333;
}

/* Buttons */
body.dark-mode button {
    background-color: #2f7fe6;
    color: #ffffff;
    border: 1px solid #2b6fbe;
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode button:hover {
    background-color: #4a96f5;
    border-color: #5aa4ff;
    box-shadow: 0 0 0 2px rgba(90, 164, 255, 0.2);
}

body.dark-mode button:active {
    background-color: #74b5ff;
    border-color: #86c0ff;
    box-shadow: 0 0 0 2px rgba(134, 192, 255, 0.28);
}

body.dark-mode .btn,
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"] {
    background-color: #2f7fe6 !important;
    color: #ffffff !important;
    border: 1px solid #2b6fbe !important;
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dark-mode .btn:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode input[type="button"]:hover {
    background-color: #4a96f5 !important;
    border-color: #5aa4ff !important;
    box-shadow: 0 0 0 2px rgba(90, 164, 255, 0.2);
}

body.dark-mode .btn:active,
body.dark-mode input[type="submit"]:active,
body.dark-mode input[type="button"]:active {
    background-color: #74b5ff !important;
    border-color: #86c0ff !important;
    box-shadow: 0 0 0 2px rgba(134, 192, 255, 0.28);
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #e0e0e0;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: #444;
    border-color: #666;
}

body.dark-mode .theme-toggle {
    background-color: #555;
    border-color: #777;
    color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}