/* Dark Mode Variables */

body.dark-mode {

    --color-primary: #2A4D7A;

    --color-secondary: #fc8181;

    --color-accent: #e53e3e;

    /* --color-accent: #f6ad55; */

    --color-light: #1a202c;

    --color-dark: #f7fafc;

    --color-gray: #a0aec0;

    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.dark-mode {

    background-color: #171923;

    color: #e2e8f0;

}



.dark-mode .main-header {

    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);

}



.dark-mode .hero-section {

    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);

}



.dark-mode .recruiter-message,

.dark-mode .value-card,

.dark-mode .feature,

.dark-mode .company-logo {

    background: #2d3748;

    color: #e2e8f0;

}



.dark-mode .history-section {

    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);

}



.dark-mode .portfolio-section,

.dark-mode .other-services {

    background: #1a202c;

}



.dark-mode .mobile-sidebar {

    background: #2d3748;

    color: #e2e8f0;

}



.dark-mode .sidebar-nav li a {

    color: #e2e8f0;

}



.dark-mode .sidebar-nav li a:hover {

    background: #4a5568;

}



.dark-mode .user-dropdown {

    background: #2d3748;

    color: #e2e8f0;

}



.dark-mode .dropdown-header {

    background: #4a5568;

}



.dark-mode .dropdown-menu li a:hover {

    background: #4a5568;

}



/* Dark Mode Toggle Button */

.dark-mode-toggle {

    background: rgba(255, 255, 255, 0.1);

    border: none;

    color: white;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: var(--transition);

}



.dark-mode-toggle:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: rotate(30deg);

}