/**
 * Professional Color Scheme Override System
 * 
 * This comprehensive override system ensures all UI elements
 * use the active color scheme with professional design principles:
 * - Proper color hierarchy
 * - Smooth transitions and animations
 * - Professional button styles
 * - Consistent spacing and shadows
 * - Accessibility-focused contrast
 */

/* ============================================
   FOUNDATION: Logo & Branding
   ============================================ */

.note .logo,
.logo a {
    color: var(--color-logo, var(--color-accent)) !important;
    transition: color var(--transition-base) !important;
}

.logo a:hover {
    color: var(--color-primary) !important;
}

/* ============================================
   NAVIGATION & HEADER
   ============================================ */

header.navbar {
    background: var(--color-header-bg, var(--color-light)) none repeat scroll 0 0 !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--transition-base) !important;
}

header.navbar.sticky {
    box-shadow: var(--shadow-md) !important;
}

header.navbar.navbar-light .mainmenu .menu-item a {
    color: var(--color-text-primary) !important;
    transition: color var(--transition-fast) !important;
}

/* Header Gradient - Professional smooth gradient */
header:after {
    background: var(--color-gradient-start) !important;
    background: -moz-linear-gradient(left, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%) !important;
    background: -webkit-linear-gradient(left, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%) !important;
    background: linear-gradient(to right, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%) !important;
}

/* Top Menu */
.top-menu {
    background-color: var(--color-top-menu-bg, var(--color-dark)) !important;
}

/* Top Menu Social Icons - White with hover color change */
.top-menu .social a {
    color: var(--color-text-light) !important;
    transition: all var(--transition-base) !important;
}

.top-menu .social a:hover {
    color: var(--color-secondary) !important;
    transform: translateY(-2px) scale(1.1) !important;
}

.top-menu .social a .fa {
    color: var(--color-text-light) !important;
    transition: color var(--transition-base) !important;
}

.top-menu .social a:hover .fa {
    color: var(--color-secondary) !important;
}

/* Top Menu Email/Phone Links - White with hover color change */
.top-menu .pull-rihgt a,
.top-menu .float-end a {
    color: var(--color-text-light) !important;
    transition: all var(--transition-base) !important;
}

.top-menu .pull-rihgt a:hover,
.top-menu .float-end a:hover {
    color: var(--color-secondary) !important;
}

.top-menu .pull-rihgt a .fa,
.top-menu .float-end a .fa {
    color: var(--color-secondary) !important;
    transition: color var(--transition-base) !important;
}

.top-menu .pull-rihgt a:hover .fa,
.top-menu .float-end a:hover .fa {
    color: var(--color-secondary) !important;
}

/* Menu Hover States - Professional underline animation */
.mainmenu .menu-item a {
    position: relative !important;
    transition: color var(--transition-fast) !important;
}

.mainmenu .menu-item a:hover {
    color: var(--color-menu-hover, var(--color-primary-light)) !important;
}

.mainmenu .menu-item a::after {
    background-color: var(--color-menu-hover, var(--color-primary-light)) !important;
    transition: width var(--transition-base) !important;
}

/* Submenu */
.submenu {
    background: var(--color-dark) !important;
    box-shadow: var(--shadow-lg) !important;
}

.submenu-item {
    transition: all var(--transition-base) !important;
}

.submenu-item:hover,
.submenu-item.active {
    background: var(--color-secondary) none repeat scroll 0 0 !important;
    transform: translateX(4px) !important;
}

/* ============================================
   BUTTONS - Professional Design System
   ============================================ */

/* Base Button Styles - Material Design inspired */
.button.styl-material,
.btn-primary {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-primary) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
    min-width: 160px !important;
}

.button.styl-material:hover,
.button.styl-material:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-primary-darker) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary-hover) !important;
    outline: none !important;
}

.button.styl-material:active,
.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Secondary Button Style - Outlined */
.button.styl-material.secondary,
.btn-secondary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: none !important;
}

.button.styl-material.secondary:hover,
.btn-secondary:hover {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary) !important;
}

/* White/Outline Buttons - For dark backgrounds */
.button.styl-material.white {
    background: var(--color-light) !important;
    color: var(--color-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

.button.styl-material.white:hover {
    background: var(--color-secondary) !important;
    color: var(--color-text-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Buttons in specific sections */
.about .button.styl-material,
.about button.styl-material {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

.about .button.styl-material:hover,
.about button.styl-material:hover {
    background-color: var(--color-primary-darker) !important;
    transform: translateY(-2px) !important;
}

.services .button.styl-material,
.services button.styl-material {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

.services .button.styl-material:hover {
    background-color: var(--color-primary-darker) !important;
    transform: translateY(-2px) !important;
}

/* Footer Buttons - Premium styling */
.top-footer .button.styl-material {
    background: var(--color-light) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-light) !important;
    margin: 12px 16px !important;
    padding: 16px 40px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    transition: all var(--transition-base) !important;
    box-shadow: var(--shadow-lg) !important;
    min-width: 200px !important;
    border-radius: var(--radius-md) !important;
}

.top-footer .button.styl-material:hover,
.top-footer .button.styl-material:focus {
    background: var(--color-secondary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-secondary) !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) !important;
}

.top-footer .button.styl-material:active {
    transform: translateY(-1px) scale(1) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================
   LINKS & TYPOGRAPHY
   ============================================ */

a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

a:hover {
    color: var(--color-primary-dark) !important;
}

a:focus {
    outline: 2px solid var(--color-primary-light) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-sm) !important;
}

/* Text Colors */
.text-primary {
    color: var(--color-text-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-light {
    color: var(--color-text-light) !important;
}

/* ============================================
   BACKGROUNDS & SECTIONS
   ============================================ */

.bg-primary {
    background-color: var(--color-bg-primary) !important;
}

.bg-secondary {
    background-color: var(--color-bg-secondary) !important;
}

.bg-dark {
    background-color: var(--color-bg-dark) !important;
    color: var(--color-text-light) !important;
}

/* About Background Section */
.about-background {
    position: relative !important;
}

.about-background h2 {
    color: var(--color-text-light) !important;
}

.about-background h2 span {
    color: var(--color-primary-light) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* About Section */
.about h1::after {
    border-bottom: 3px solid var(--color-secondary) !important;
    transition: border-color var(--transition-base) !important;
}

.about h1::before {
    border: 3px solid var(--color-primary-light) !important;
    box-shadow: 0 0 10px var(--overlay-primary) !important;
}

.about .first strong {
    color: var(--color-primary-lighter) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
    transition: all var(--transition-base) !important;
    padding: 12px 16px !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary-light) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--overlay-primary) !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

.card,
.container-light {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-base) !important;
}

.card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.top-footer {
    background-color: var(--color-primary) !important;
    position: relative !important;
    overflow: visible !important;
    padding-top: 80px !important;
    z-index: 1 !important;
}

.top-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, var(--overlay-primary), transparent 70%);
    pointer-events: none;
}

.email-1 {
    background-color: var(--color-primary) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    height: 130px !important;
    line-height: 80px !important;
    padding: 25px !important;
    position: absolute !important;
    top: -145px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 130px !important;
    z-index: 100 !important;
    transition: transform var(--transition-base) !important;
}

.email-1:hover {
    transform: translateX(-50%) scale(1.05) rotate(5deg) !important;
}

/* Ensure top-footer has relative positioning for absolute child - consolidated with above */

.top-footer .container>h2 {
    margin-top: 0 !important;
    padding-top: 20px !important;
    color: #ffffff !important;
}

/* Footer and other sections - General footer links */
footer a,
.footer a {
    transition: color var(--transition-fast) !important;
}

/* Footer section headings */
.f-menu>h2,
.f-menu-1>h2 {
    color: var(--color-text-light) !important;
}

.f-menu>h2::after,
.f-menu-1>h2::after {
    border-bottom: 3px solid var(--color-secondary) !important;
}

.f-menu>h2::before,
.f-menu-1>h2::before {
    border: 3px solid var(--color-primary-light) !important;
    background-color: var(--color-bg-dark) !important;
}

/* Footer social icons - White icons with hover color change */
.footer-about .social-1 a,
footer .footer-about .social-1 a,
footer .social-1 a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--color-text-light) !important;
    color: var(--color-text-light) !important;
    transition: all var(--transition-base) !important;
}

.footer-about .social-1 a .fa,
footer .footer-about .social-1 a .fa,
footer .social-1 a .fa {
    color: var(--color-text-light) !important;
    transition: all var(--transition-base) !important;
}

.footer-about .social-1 a:hover,
footer .footer-about .social-1 a:hover,
footer .social-1 a:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    transform: translateY(-3px) rotate(5deg) scale(1.1) !important;
    box-shadow: var(--shadow-lg) !important;
}

.footer-about .social-1 a:hover .fa,
footer .footer-about .social-1 a:hover .fa,
footer .social-1 a:hover .fa {
    color: var(--color-text-primary) !important;
}

/* Footer menu links - White with hover color change */
.f-menu a {
    color: var(--color-text-light) !important;
    transition: all var(--transition-base) !important;
}

.f-menu a::after {
    background-color: var(--color-secondary) !important;
    transition: width var(--transition-base) !important;
}

.f-menu a:hover {
    color: var(--color-secondary) !important;
    padding-left: 8px !important;
}

.f-menu a .fa {
    color: var(--color-text-light) !important;
    transition: color var(--transition-base) !important;
}

.f-menu a:hover .fa {
    color: var(--color-secondary) !important;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */

/* Go to top button */
.go-to-top {
    background-color: var(--color-primary-dark) !important;
    box-shadow: var(--shadow-primary) !important;
    transition: all var(--transition-base) !important;
}

.go-to-top:hover {
    background-color: var(--color-primary-darker) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-primary-hover) !important;
}

.go-to-top:focus {
    outline: 2px solid var(--color-secondary) !important;
    outline-offset: 2px !important;
}

/* Ripple effect */
.ripple-obj {
    fill: var(--color-primary-darker) !important;
}

/* Slider and hero section */
.view-btn>a {
    color: var(--color-primary-lighter) !important;
    transition: all var(--transition-base) !important;
}

.view-btn>a:hover {
    color: var(--color-primary) !important;
    transform: translateX(5px) !important;
}

#slider .col-sm-7>h1 {
    color: var(--color-primary-lightest) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

#slider .col-sm-7>h2 {
    color: var(--color-dark-alt) !important;
}

.note h1 span {
    color: var(--color-secondary) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Portfolio & Services */
.portfolio-wrapper ul.filter li a.active,
.portfolio-wrapper ul.filter li a:hover {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary) !important;
}

/* Enhanced features section */
.enhanced-features {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    position: relative !important;
}

/* Social icons */
.social a {
    transition: all var(--transition-base) !important;
}

.social a:focus {
    outline: 2px solid var(--color-secondary) !important;
    outline-offset: 2px !important;
}

.social a:hover {
    transform: translateY(-3px) scale(1.1) !important;
}

/* Focus states for accessibility */
.btn:focus,
.button:focus {
    outline: 2px solid var(--color-secondary) !important;
    outline-offset: 3px !important;
    border-radius: var(--radius-sm) !important;
}

/* ============================================
   BORDERS & DIVIDERS
   ============================================ */

.border-primary {
    border-color: var(--color-border-primary) !important;
}

.border-secondary {
    border-color: var(--color-border-secondary) !important;
}

.border-light {
    border-color: var(--color-border-light) !important;
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */

/* Smooth fade-in for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover lift effect */
.hover-lift {
    transition: transform var(--transition-base) !important;
}

.hover-lift:hover {
    transform: translateY(-4px) !important;
}

/* ============================================
   COMPONENT.CSS OVERRIDES
   ============================================ */

/* Override component.css hardcoded colors */
.view-btn button {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
    box-shadow: var(--shadow-primary) !important;
    transition: all var(--transition-base) !important;
}

.view-btn button:hover {
    background: var(--color-primary-darker) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary-hover) !important;
}

/* Theme variants in component.css */
.theme-2 .button.styl-material {
    background: var(--color-primary-dark) !important;
}

.theme-2 .button.styl-material:hover {
    background: var(--color-primary-darker) !important;
}

.theme-3 .button.styl-material {
    background: var(--color-primary-dark) !important;
}

.theme-3 .button.styl-material:hover {
    background: var(--color-primary-darker) !important;
}

.theme-3 .ripple-obj {
    fill: var(--color-primary-darker) !important;
}

/* ============================================
   ENHANCED FEATURES OVERRIDES
   ============================================ */

/* Page Progress Bar */
#page-progress-bar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)) !important;
}

/* Override enhanced-features.css hardcoded colors */
.enhanced-features-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

.enhanced-feature-item {
    background: var(--color-bg-primary) !important;
    border-color: var(--color-border-light) !important;
    transition: all var(--transition-base) !important;
}

.enhanced-feature-item:hover {
    border-color: var(--color-primary-light) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-4px) !important;
}

.enhanced-feature-button {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

.enhanced-feature-button:hover {
    background: var(--color-primary-darker) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   CAROUSEL INDICATORS
   ============================================ */

/* Home carousel indicators - Professional styling */
#home-carousel .carousel-indicators {
    bottom: 30px !important;
    margin-bottom: 0 !important;
    z-index: 15 !important;
}

#home-carousel .carousel-indicators [data-bs-target] {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    margin: 0 6px !important;
    transition: all var(--transition-base) !important;
    opacity: 0.7 !important;
}

#home-carousel .carousel-indicators [data-bs-target]:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

#home-carousel .carousel-indicators .active {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    opacity: 1 !important;
    width: 30px !important;
    border-radius: 6px !important;
}

/* ============================================
   PORTFOLIO MODERN CSS OVERRIDES
   ============================================ */

/* Portfolio filter buttons */
.filter-btn {
    border-color: var(--color-border-light) !important;
    color: var(--color-text-muted) !important;
}

.filter-btn:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.filter-btn.active {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
    box-shadow: 0 4px 15px var(--overlay-primary) !important;
}

/* Portfolio detail content */
.portfolio-detail-content h1 {
    color: var(--color-dark) !important;
}

.portfolio-detail-content .lead {
    color: var(--color-text-muted) !important;
}

/* Portfolio tags */
.portfolio-tags .tag {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

/* Portfolio description */
.portfolio-description h3 {
    color: var(--color-dark) !important;
}

.portfolio-description p {
    color: var(--color-text-muted) !important;
}

/* Challenge and solution boxes */
.challenge-box,
.solution-box {
    background: var(--color-bg-secondary) !important;
    border-left-color: var(--color-primary) !important;
}

.solution-box {
    border-left-color: var(--color-accent) !important;
}

.challenge-box h4,
.solution-box h4 {
    color: var(--color-dark) !important;
}

.challenge-box p,
.solution-box p {
    color: var(--color-text-muted) !important;
}

/* Portfolio action buttons */
.portfolio-actions .btn-primary {
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

.portfolio-actions .btn-primary:hover {
    background: var(--color-primary-darker) !important;
    border-color: var(--color-primary-darker) !important;
    box-shadow: 0 4px 15px var(--overlay-primary) !important;
}

.portfolio-actions .btn-outline-primary {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.portfolio-actions .btn-outline-primary:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-light) !important;
}

/* ============================================
   ENHANCED FEATURES CSS - COMPREHENSIVE OVERRIDES
   ============================================ */

/* Cookie consent */
#cookie-consent {
    background: var(--color-bg-dark) !important;
    color: var(--color-text-light) !important;
}

#cookie-consent p {
    color: #ffffff !important;
}

#cookie-consent button {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

#cookie-consent #cookie-decline {
    border-color: var(--color-text-light) !important;
}

#cookie-consent #cookie-decline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Social share buttons */
.social-share-btn {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-primary) !important;
}

.social-share-btn:hover {
    background: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

/* Search toggle */
.search-toggle {
    color: var(--color-text-primary) !important;
}

.search-toggle:hover {
    color: var(--color-primary) !important;
}

/* Site search */
#search-box {
    background: rgba(255, 255, 255, 0.98) !important;
}

#search-input {
    border-color: var(--color-primary) !important;
}

#search-close {
    color: var(--color-text-primary) !important;
}

/* Breadcrumb */
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--color-text-muted) !important;
}

.breadcrumb-item a {
    color: var(--color-primary) !important;
}

.breadcrumb-item.active {
    color: var(--color-text-muted) !important;
}

/* Reading progress */
#reading-progress {
    background: var(--color-primary) !important;
}

/* Lightbox */
#lightbox-close {
    color: var(--color-text-light) !important;
}

/* Form validation */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    /* Keep error color as is */
}

.form-control.is-valid {
    border-color: #28a745 !important;
    /* Keep success color as is */
}

.invalid-feedback {
    color: #dc3545 !important;
    /* Keep error color as is */
}

/* ============================================
   STYLE.CSS - ADDITIONAL HARDCODED COLOR OVERRIDES
   ============================================ */

/* View button links */
.view-btn>a {
    background-color: var(--color-light) !important;
    color: var(--color-primary-lighter) !important;
}

.view-btn>a:hover {
    color: var(--color-primary) !important;
}

/* Slider text colors */
#slider .col-sm-7>h1 {
    color: var(--color-primary-lightest) !important;
}

#slider .col-sm-7>h2 {
    color: var(--color-dark-alt) !important;
}

#slider .col-sm-7>p {
    color: var(--color-text-light) !important;
}

/* Note section */
.note h1 {
    color: var(--color-text-light) !important;
}

.note p {
    color: var(--color-text-light) !important;
}

/* About section strong text */
.about .first strong {
    color: var(--color-primary-lighter) !important;
}

.about .first p strong span {
    color: var(--color-text-muted) !important;
}

/* Services section */
.services .col-sm-4 .inner-1 {
    /* Layout preserved, colors handled by other overrides */
}

/* Portfolio wrapper */
.portfolio-wrapper ul.filter li a {
    color: var(--color-text-primary) !important;
}

.portfolio-wrapper ul.filter li a:hover,
.portfolio-wrapper ul.filter li a.active {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

/* Footer menu headings */
.f-menu>h2,
.f-menu-1>h2 {
    color: var(--color-text-light) !important;
}

/* Testimonial section */
.testimonial #fade-quote-carousel.carousel .carousel-indicators>li {
    background-color: var(--color-primary) !important;
}

/* Sitemap social icons */
.sitemap .col-sm-4 .social-1 a {
    background-color: var(--color-light) !important;
    color: var(--color-primary-lighter) !important;
}

.sitemap .col-sm-4 .social-1 a:hover {
    background-color: var(--color-primary-lighter) !important;
    color: var(--color-text-light) !important;
}

/* ============================================
   MENU STYLE CSS OVERRIDES
   ============================================ */

/* Menu style - submenu items already handled above, but ensuring consistency */
.submenu-item {
    color: var(--color-text-primary) !important;
}

.submenu-item .text {
    color: var(--color-text-light) !important;
}

.submenu-item .text small {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   COMPONENT.CSS - ADDITIONAL OVERRIDES
   ============================================ */

/* Component.css button themes - already handled but ensuring all variants */
.theme-2 .ripple-obj {
    fill: var(--color-primary-darker) !important;
}

/* ============================================
   FOOTER SOCIAL FIX CSS OVERRIDES
   ============================================ */

/* Footer social fix - override hardcoded colors in footer-social-fix.css */
.footer-about .social-1 a,
footer .footer-about .social-1 a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--color-text-light) !important;
    color: var(--color-text-light) !important;
}

.footer-about .social-1 a .fa,
footer .footer-about .social-1 a .fa {
    color: var(--color-text-light) !important;
}

/* ============================================
   ADDITIONAL STYLE.CSS OVERRIDES
   ============================================ */

/* Inner email button */
.inner-email {
    background-color: var(--color-light) !important;
}

/* Stats section - our project */
.our-project {
    /* Background image preserved, no color override needed */
}

.inner-project {
    /* Layout preserved */
}

/* Copy right text */
.copy-right p {
    color: #ffffff !important;
}

/* Social media section */
.social-media a {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Email section */
.email- {
    /* Layout preserved */
}

/* Additional button styles */
.services .button.styl-material,
.services button.styl-material {
    background-color: var(--color-primary-dark) !important;
    color: var(--color-text-light) !important;
}

.services .button.styl-material:hover {
    background-color: var(--color-primary-darker) !important;
}

/* Our works section */
#our-works .button.styl-material {
    /* Layout preserved, colors handled by general button styles */
}

/* Testimonial carousel */
.testimonial .carousel-indicators li {
    background-color: var(--color-primary) !important;
}

/* Blog and contact sections */
.blog-inner,
.contact-form {
    /* Layout preserved */
}

/* Form elements - additional overrides */
.contact-form input,
.contact-form textarea {
    border-color: var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-primary-light) !important;
    box-shadow: 0 0 0 3px var(--overlay-primary) !important;
}

/* ============================================
   DEMO.CSS OVERRIDES (Portfolio/Demo Pages)
   ============================================ */

.codrops-header h1 span {
    color: var(--color-text-muted) !important;
}

.codrops-demos a.current-demo {
    color: var(--color-text-secondary) !important;
}

.media-item__title {
    color: var(--color-text-muted) !important;
}

.media-item:hover .media-item__title,
.media-item:focus .media-item__title {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {

    .button.styl-material,
    .btn-primary {
        padding: 12px 24px !important;
        font-size: 13px !important;
        min-width: 140px !important;
    }

    .top-footer .button.styl-material {
        margin: 8px 12px !important;
        padding: 14px 28px !important;
        min-width: 160px !important;
    }

    .about-background h2 {
        font-size: 28px !important;
    }

    .about-background h2 span {
        font-size: 28px !important;
    }
}