/*
Theme Name: Security Core Professional Company
Theme URI: https://yourwebsite.com
Author: Your Name
Author URI: https://yourwebsite.com
Description: A modern, responsive WordPress theme for showcasing freelance IT & Networking services. Features include multilingual support (Arabic/English), dark mode, SEO optimization, and mobile-friendly design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freelance-it
Tags: responsive, custom-header, custom-menu, featured-images, flexible-header, rtl-language-support, translation-ready, blog, portfolio, two-columns

This theme, like WordPress, is licensed under the GPL.
*/

/* ===================================
   CSS Variables for Theme Customization
   =================================== */
:root {
    /* Light Mode Colors - Enhanced WCAG AA+ Compliant */
    --primary-color: #0066cc;
    --secondary-color: #00994d;
    --accent-color: #d94f00;
    --text-color: #1a1a1a;
    --text-light: #4d4d4d;
    --bg-color: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #e0e0e0;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.15);
    
    /* Button Colors */
    --btn-primary-bg: #0066cc;
    --btn-primary-text: #ffffff;
    --btn-whatsapp-bg: #25D366;
    --btn-whatsapp-text: #ffffff;
    
    /* Typography */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Arial', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Transitions */
    --transition: all 0.3s ease;
}

/* Font Awesome Optimization */
@font-face {
    font-display: swap;
}

/* Dark Mode Variables - Enhanced WCAG AA+ Compliant */
[data-theme="dark"] {
    --text-color: #f5f5f5;
    --text-light: #c0c0c0;
    --bg-color: #121212;
    --bg-secondary: #1e1e1e;
    --bg-card: #2a2a2a;
    --border-color: #404040;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.7);
    
    /* Button Colors - Dark Mode */
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #0066cc;
    --btn-whatsapp-bg: #25D366;
    --btn-whatsapp-text: #ffffff;
}

/* Dark Mode Header Text Color Fix */
[data-theme="dark"] .site-logo span {
    color: #ffffff !important;
}

/* RTL Support for Arabic */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    transition: var(--transition);
}

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

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
}

/* ===================================
   Typography
   =================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-light);
}

/* ===================================
   Layout
   =================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-sm);
}

.section-title .underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    margin: 0 auto;
}

/* ===================================
   Header & Navigation
   =================================== */
.site-header {
    background-color: var(--bg-card);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: var(--transition);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
}

.site-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.site-logo img {
    transition: transform 0.3s ease;
    display: block;
}

.site-logo:hover img {
    transform: scale(1.05);
}

/* Responsive logo */
@media (max-width: 768px) {
    .site-logo img {
        height: 40px;
    }
    
    .site-logo div {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .site-logo div span:first-child {
        font-size: 1.2rem;
    }
    
    .site-logo div span:last-child {
        font-size: 0.8rem;
    }
}

.main-navigation ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-lg);
}

.main-navigation a {
    color: var(--text-color);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 5px;
    transition: var(--transition);
}

.main-navigation a:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Header Controls */
.header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.lang-switcher,
.dark-mode-toggle {
    background: transparent;
    border: 2px solid var(--border-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-color);
    font-size: 0.9rem;
}

.lang-switcher:hover,
.dark-mode-toggle:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: white;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
}

/* ===================================
   Hero Section
   =================================== */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: var(--spacing-xl) 0;
    text-align: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content h1 {
    color: white;
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    animation: fadeInUp 1s ease;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-lg);
    color: rgba(255, 255, 255, 0.9);
    animation: fadeInUp 1s ease 0.2s both;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.4s both;
}

/* ===================================
   Buttons
   =================================== */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: white;
    color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--primary-color);
}

.btn-accent {
    background-color: var(--accent-color);
    color: white;
}

.btn-accent:hover {
    background-color: #ff7720;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* ===================================
   Cards
   =================================== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.card {
    background-color: var(--bg-card);
    border-radius: 10px;
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.card-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.card h3 {
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

.card p {
    color: var(--text-light);
}

/* ===================================
   Services Section
   =================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.service-card {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-left: 4px solid var(--primary-color);
}

.service-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-hover);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

/* Modern Service Cards (matching the dark design) */
.service-card-modern {
    background: linear-gradient(145deg, #1a1d29, #252837);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.service-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.3);
}

.service-card-title {
    color: #e0e6ed;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 123, 255, 0.3);
}

.service-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-features-list li {
    color: #a8b3c7;
    font-size: 0.9rem;
    line-height: 1.7;
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.service-features-list li:before {
    content: "•";
    color: #007bff;
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0.4rem;
}

/* Dark theme enhancements for service cards */
body.dark-mode .service-card-modern {
    background: linear-gradient(145deg, #0f1117, #1a1d29);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .service-card-title {
    color: #f0f4f8;
}

body.dark-mode .service-features-list li {
    color: #b8c5d6;
}

/* ===================================
   Pricing Section
   =================================== */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    border: 2px solid var(--border-color);
}

.pricing-card.featured {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.pricing-header h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.pricing-price {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: var(--spacing-md) 0;
}

.pricing-price span {
    font-size: 1.25rem;
    color: var(--text-light);
}

.pricing-features {
    list-style: none;
    margin: var(--spacing-lg) 0;
    text-align: left;
}

.pricing-features li {
    padding: var(--spacing-xs) 0;
    color: var(--text-light);
}

.pricing-features li:before {
    content: "✓ ";
    color: var(--secondary-color);
    font-weight: bold;
    margin-right: var(--spacing-xs);
}

/* ===================================
   Modern Pricing Cards (Dark Theme Style)
   =================================== */
.pricing-card-modern {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.pricing-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: var(--transition);
}

.pricing-card-modern:hover::before {
    opacity: 1;
}

.pricing-card-modern.featured {
    border: 2px solid var(--accent-color);
    box-shadow: 0 15px 50px rgba(0, 204, 102, 0.2);
    transform: scale(1.02);
}

.pricing-card-modern.featured::before {
    opacity: 1;
    height: 6px;
}

.pricing-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.pricing-card-modern .pricing-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.pricing-price-modern {
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-price-modern .price-amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    display: block;
    line-height: 1;
    letter-spacing: -2px;
}

.pricing-price-modern .price-period {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-top: 0.5rem;
    letter-spacing: 0.5px;
}

.pricing-features-modern {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    text-align: left;
}

.pricing-features-modern li {
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
}

.pricing-features-modern li i {
    color: var(--secondary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pricing-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    margin: 1.5rem 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5;
}

.pricing-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.pricing-actions .btn {
    flex: 1;
    min-width: 120px;
    padding: 0.875rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.pricing-actions .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0080ff);
}

.pricing-actions .btn-accent {
    background: linear-gradient(135deg, var(--accent-color), #ff8833);
}

.pricing-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* Billing Section Styling */
.billing-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-content ul li {
    color: rgba(255, 255, 255, 0.85);
}

.billing-content strong {
    color: #ffffff;
}

[data-theme="dark"] .pricing-card-modern {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

[data-theme="dark"] .billing-content {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

/* ===================================
   Portfolio Section
   =================================== */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.portfolio-item {
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.portfolio-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-hover);
}

.portfolio-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.portfolio-content {
    padding: var(--spacing-md);
}

.portfolio-tags {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

.tag {
    background: var(--bg-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 15px;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Portfolio Filter */
.portfolio-filter-container {
    text-align: center;
    margin: var(--spacing-xl) 0;
}

.portfolio-filter {
    display: inline-flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
    background: var(--bg-card);
    padding: var(--spacing-sm);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.filter-btn {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: var(--transition);
}

.filter-btn:hover {
    background: var(--primary-color);
    color: white;
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Portfolio Links */
.portfolio-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.9rem;
}

.no-portfolio {
    text-align: center;
    padding: var(--spacing-xl);
    grid-column: 1 / -1;
}

/* Single Portfolio Page */
.portfolio-single {
    padding: var(--spacing-lg) 0;
}

.breadcrumb {
    color: var(--text-light);
    margin-bottom: var(--spacing-sm);
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.project-header {
    margin-bottom: var(--spacing-xl);
}

.project-title {
    font-size: 2.5rem;
    margin: var(--spacing-md) 0;
}

.project-categories,
.category-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    margin-right: var(--spacing-xs);
    font-size: 0.9rem;
}

.project-featured-image {
    margin-bottom: var(--spacing-xl);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.project-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.project-content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
}

.project-main-content {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.content-section {
    margin-bottom: var(--spacing-xl);
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-color);
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.project-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.project-info-box {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.project-info-box h3 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.info-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--bg-secondary);
}

.info-item:last-child {
    border-bottom: none;
}

.info-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 3px;
}

.info-item strong {
    display: block;
    margin-bottom: var(--spacing-xs);
}

.info-item a {
    color: var(--primary-color);
    text-decoration: none;
}

.info-item a:hover {
    text-decoration: underline;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.project-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-block {
    width: 100%;
    text-align: center;
}

.related-projects {
    margin-top: var(--spacing-xxl);
}

.related-projects h2 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.archive-breadcrumb {
    margin-bottom: var(--spacing-xl);
}

/* ===================================
   Contact Form
   =================================== */
.contact-section {
    background: var(--bg-secondary);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.contact-form {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-color);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 2px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Dark Mode Form Inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #404040 !important;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: #999999 !important;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus {
    border-color: #0066cc !important;
    background: #333333 !important;
}

.contact-info {
    padding: var(--spacing-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.contact-icon {
    font-size: 2rem;
    color: var(--primary-color);
}

.whatsapp-button {
    background: #25D366;
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    margin-top: var(--spacing-md);
}

.whatsapp-button:hover {
    background: #20BA5A;
    color: white;
}

/* ===================================
   Blog Section
   =================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.blog-card {
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: var(--spacing-md);
}

.blog-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-sm);
}

.blog-excerpt {
    color: var(--text-light);
    margin: var(--spacing-sm) 0;
}

.read-more {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* ===================================
   Footer
   =================================== */
.site-footer {
    background: var(--bg-secondary);
    padding: var(--spacing-xl) 0 var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.footer-section h3 {
    margin-bottom: var(--spacing-md);
    color: var(--text-color);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-section a {
    color: var(--text-light);
}

.footer-section a:hover {
    color: var(--primary-color);
}

.footer-section p {
    color: var(--text-light);
}

/* Dark Mode Footer */
[data-theme="dark"] .site-footer {
    background: #1e1e1e;
}

[data-theme="dark"] .footer-section h3 {
    color: #ffffff !important;
}

[data-theme="dark"] .footer-section p {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .footer-section a {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .footer-section a:hover {
    color: #4db8ff !important;
}

[data-theme="dark"] .footer-bottom {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .footer-bottom p {
    color: #c0c0c0 !important;
}

/* Footer WhatsApp Icon - Always Green & Visible in Contact List */
.footer-section .fa-whatsapp,
.footer-section a .fa-whatsapp,
.footer-section li .fa-whatsapp,
.footer-whatsapp-link .fa-whatsapp {
    color: #25D366 !important;
    font-size: 1.1rem !important;
    opacity: 1 !important;
    margin-right: 5px;
}

[data-theme="dark"] .footer-section .fa-whatsapp,
[data-theme="dark"] .footer-section a .fa-whatsapp,
[data-theme="dark"] .footer-section li .fa-whatsapp,
[data-theme="dark"] .footer-whatsapp-link .fa-whatsapp {
    color: #25D366 !important;
    opacity: 1 !important;
}

/* Footer LinkedIn & Credly Icons */
.footer-section .fa-linkedin {
    color: #0077b5 !important;
}

.footer-section .fa-certificate {
    color: #ff9500 !important;
}

[data-theme="dark"] .footer-section .fa-linkedin {
    color: #4db8ff !important;
}

[data-theme="dark"] .footer-section .fa-certificate {
    color: #ffb84d !important;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
}

.social-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 50%;
    color: var(--text-color);
    font-size: 1rem;
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.social-icon:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* LinkedIn Icon - Blue Circle */
.social-icon[title*="LinkedIn"],
.social-icon[href*="linkedin"] {
    background: #0077b5;
    color: #ffffff;
}

.social-icon[title*="LinkedIn"]:hover,
.social-icon[href*="linkedin"]:hover {
    background: #005885;
}

/* Credly/Certificate Icon - Blue Circle */
.social-icon[title*="Credly"],
.social-icon[title*="Certifications"] {
    background: #0066cc;
    color: #ffffff;
}

.social-icon[title*="Credly"]:hover,
.social-icon[title*="Certifications"]:hover {
    background: #0052a3;
}

/* WhatsApp Icon - Green Rounded Square */
.social-icon[title*="WhatsApp"],
.social-icon[href*="wa.me"] {
    background: #25D366 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.social-icon[title*="WhatsApp"]:hover,
.social-icon[href*="wa.me"]:hover {
    background: #22c55e !important;
    transform: translateY(-2px);
}

/* Force WhatsApp Icon to be White - All Cases - COMPREHENSIVE */
.social-icon[title*="WhatsApp"] i,
.social-icon[href*="wa.me"] i,
.social-icon .fa-whatsapp,
a[href*="wa.me"] .fa-whatsapp,
a.social-icon[title*="WhatsApp"] .fab,
a.social-icon[href*="wa.me"] .fab {
    color: #ffffff !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* Dark Mode - WhatsApp Icon White */
[data-theme="dark"] .social-icon[title*="WhatsApp"] i,
[data-theme="dark"] .social-icon[href*="wa.me"] i,
[data-theme="dark"] .social-icon .fa-whatsapp,
[data-theme="dark"] a[href*="wa.me"] .fa-whatsapp,
[data-theme="dark"] a.social-icon[title*="WhatsApp"] .fab,
[data-theme="dark"] a.social-icon[href*="wa.me"] .fab {
    color: #ffffff !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .social-icon {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .social-icon:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Ensure WhatsApp Icon Always WHITE on Green Background in Footer Social Icons */
.social-links .fa-whatsapp,
.social-links a .fa-whatsapp,
.social-links .social-icon .fa-whatsapp {
    color: #ffffff !important;
    opacity: 1 !important;
}

[data-theme="dark"] .social-links .fa-whatsapp,
[data-theme="dark"] .social-links a .fa-whatsapp,
[data-theme="dark"] .social-links .social-icon .fa-whatsapp {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Footer Icon Visibility - Comprehensive Override */
footer .fa-whatsapp,
footer a[href*="wa.me"] .fa-whatsapp,
.footer-section .fa-whatsapp,
.footer-whatsapp-link .fa-whatsapp {
    color: #25D366 !important;
    opacity: 1 !important;
}

/* Social Icon WhatsApp - White on Green - ALL SECTIONS */
footer .social-icon .fa-whatsapp,
footer .social-icon[title*="WhatsApp"] i,
.social-icon .fa-whatsapp,
.social-icon[title*="WhatsApp"] i,
.social-icon[href*="wa.me"] i,
header .social-icon .fa-whatsapp,
.hero-section .social-icon .fa-whatsapp,
.contact-header .social-icon .fa-whatsapp {
    color: #ffffff !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* Dark Mode - Same Rules */
[data-theme="dark"] footer .fa-whatsapp,
[data-theme="dark"] footer a[href*="wa.me"] .fa-whatsapp,
[data-theme="dark"] .footer-section .fa-whatsapp,
[data-theme="dark"] .footer-whatsapp-link .fa-whatsapp {
    color: #25D366 !important;
    opacity: 1 !important;
}

[data-theme="dark"] footer .social-icon .fa-whatsapp,
[data-theme="dark"] footer .social-icon[title*="WhatsApp"] i,
[data-theme="dark"] .social-icon .fa-whatsapp,
[data-theme="dark"] .social-icon[title*="WhatsApp"] i,
[data-theme="dark"] .social-icon[href*="wa.me"] i,
[data-theme="dark"] header .social-icon .fa-whatsapp,
[data-theme="dark"] .hero-section .social-icon .fa-whatsapp,
[data-theme="dark"] .contact-header .social-icon .fa-whatsapp {
    color: #ffffff !important;
    opacity: 1 !important;
    background: transparent !important;
}

/* ULTIMATE WhatsApp Icon Override - Ensure White on Green Everywhere */
a[href*="wa.me"].social-icon i.fa-whatsapp,
a[href*="wa.me"].social-icon .fab.fa-whatsapp,
.social-icon[title*="WhatsApp"] i.fa-whatsapp,
.social-icon[title*="WhatsApp"] .fab.fa-whatsapp {
    color: #ffffff !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

[data-theme="dark"] a[href*="wa.me"].social-icon i.fa-whatsapp,
[data-theme="dark"] a[href*="wa.me"].social-icon .fab.fa-whatsapp,
[data-theme="dark"] .social-icon[title*="WhatsApp"] i.fa-whatsapp,
[data-theme="dark"] .social-icon[title*="WhatsApp"] .fab.fa-whatsapp {
    color: #ffffff !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    color: var(--text-light);
}

/* ===================================
   Animations
   =================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease;
}

/* ===================================
   Utility Classes
   =================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    
    .header-container {
        flex-wrap: wrap;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .main-navigation {
        width: 100%;
        display: none;
    }
    
    .main-navigation.active {
        display: block;
    }
    
    .main-navigation ul {
        flex-direction: column;
        gap: 0;
    }
    
    .main-navigation li {
        border-bottom: 1px solid var(--border-color);
    }
    
    .main-navigation a {
        display: block;
        padding: var(--spacing-md);
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .contact-container {
        grid-template-columns: 1fr;
    }
    
    .card-grid,
    .services-grid,
    .pricing-grid,
    .portfolio-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .project-content-wrapper {
        grid-template-columns: 1fr;
    }
    
    .project-title {
        font-size: 1.75rem;
    }
    
    .portfolio-filter {
        flex-direction: column;
    }
    
    .filter-btn {
        width: 100%;
    }
}

/* ===================================
   Print Styles
   =================================== */
@media print {
    .site-header,
    .hero-section,
    .site-footer,
    .dark-mode-toggle,
    .lang-switcher {
        display: none;
    }
}

/* ===================================
   WhatsApp Icon Fixes - Always Green
   =================================== */
.whatsapp-button,
.whatsapp-contact-btn,
.whatsapp-link,
a[href*="wa.me"],
a[href*="whatsapp"] {
    color: #25D366 !important;
}

.whatsapp-button:hover,
.whatsapp-contact-btn:hover {
    background: #20BA5A !important;
    color: white !important;
    transform: translateY(-2px);
}

.whatsapp-link:hover {
    background: rgba(37, 211, 102, 0.2) !important;
    color: #25D366 !important;
}

/* WhatsApp Icon - Always Green in All Modes */
.fab.fa-whatsapp,
i.fab.fa-whatsapp {
    color: #25D366 !important;
}

/* Dark Mode WhatsApp Fixes */
[data-theme="dark"] .fab.fa-whatsapp,
[data-theme="dark"] i.fab.fa-whatsapp,
[data-theme="dark"] .whatsapp-button,
[data-theme="dark"] .whatsapp-link,
[data-theme="dark"] a[href*="wa.me"],
[data-theme="dark"] a[href*="whatsapp"] {
    color: #25D366 !important;
}

[data-theme="dark"] .whatsapp-contact-btn {
    background: #25D366 !important;
    color: white !important;
    border: none !important;
}

[data-theme="dark"] .whatsapp-contact-btn:hover {
    background: #20BA5A !important;
}

/* Contact Method Card Hover Effects */
.contact-method-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* ===================================
   Pricing Page - Enhanced Visibility
   =================================== */
/* Light Mode - Better Contrast */
.pricing-card-modern h3,
.pricing-card-modern h4 {
    color: #1a1a1a !important;
}

.pricing-card-modern .price-amount {
    color: #00994d !important;
    font-weight: 800 !important;
}

.pricing-card-modern .price-period {
    color: #595959 !important;
}

.pricing-card-modern .pricing-features-modern li {
    color: #1a1a1a !important;
}

.pricing-card-modern .pricing-note {
    color: #595959 !important;
}

.pricing-card-modern p {
    color: #1a1a1a !important;
}

/* Dark Mode - Better Contrast */
[data-theme="dark"] .pricing-card-modern h3,
[data-theme="dark"] .pricing-card-modern h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .pricing-card-modern .price-amount {
    color: #2ecc71 !important;
    font-weight: 800 !important;
}

[data-theme="dark"] .pricing-card-modern .price-period {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .pricing-card-modern .pricing-features-modern li {
    color: #f0f0f0 !important;
}

[data-theme="dark"] .pricing-card-modern .pricing-note {
    color: #c0c0c0 !important;
}

[data-theme="dark"] .pricing-card-modern p {
    color: #f0f0f0 !important;
}

/* Residential Pricing Section - Better Visibility */
.residential-pricing-section h3 {
    color: #ffffff !important;
}

.residential-pricing-section h4 {
    color: #ffffff !important;
}

.residential-pricing-section p {
    color: rgba(255, 255, 255, 0.95) !important;
}

.residential-pricing-section .pricing-note {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* One-Time Installation Cards */
.residential-pricing-section .card h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.residential-pricing-section .card p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ===================================
   PROFESSIONAL DUAL-MODE DESIGN SYSTEM
   Clean & Consistent Across Light & Dark Modes
   =================================== */

/* ===================================
   Base Text Colors - Content Areas
   =================================== */
/* Only apply to content, NOT buttons or special elements */
.section p,
.card p,
.container p,
article p,
.content p {
    color: var(--text-color);
}

.section li,
.card li,
.container li,
article li,
.content li {
    color: var(--text-color);
}

.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.container h1, .container h2, .container h3, .container h4, .container h5, .container h6 {
    color: var(--text-color);
    font-weight: 700;
}

.section strong,
.card strong,
.container strong {
    color: var(--text-color);
    font-weight: 700;
}

/* ===================================
   Card System - Enhanced Backgrounds
   =================================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

/* ===================================
   Links - Always Visible
   =================================== */
a:not(.btn) {
    color: var(--primary-color);
    transition: var(--transition);
}

a:not(.btn):hover {
    opacity: 0.8;
}

[data-theme="dark"] a:not(.btn) {
    color: #4db8ff;
}

/* ===================================
   Dark Mode Text Enhancement
   =================================== */
/* Ensure dark mode text is always visible */
[data-theme="dark"] .section,
[data-theme="dark"] .card,
[data-theme="dark"] .container {
    color: #f5f5f5;
}

[data-theme="dark"] .section p,
[data-theme="dark"] .card p,
[data-theme="dark"] .container p {
    color: #e8e8e8;
}

[data-theme="dark"] .section li,
[data-theme="dark"] .card li,
[data-theme="dark"] .container li {
    color: #e8e8e8;
}

[data-theme="dark"] .section h1, [data-theme="dark"] .section h2, [data-theme="dark"] .section h3,
[data-theme="dark"] .card h1, [data-theme="dark"] .card h2, [data-theme="dark"] .card h3,
[data-theme="dark"] .container h1, [data-theme="dark"] .container h2, [data-theme="dark"] .container h3,
[data-theme="dark"] .section h4, [data-theme="dark"] .section h5, [data-theme="dark"] .section h6,
[data-theme="dark"] .card h4, [data-theme="dark"] .card h5, [data-theme="dark"] .card h6,
[data-theme="dark"] .container h4, [data-theme="dark"] .container h5, [data-theme="dark"] .container h6 {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="dark"] .section strong,
[data-theme="dark"] .card strong,
[data-theme="dark"] .container strong {
    color: #ffffff;
    font-weight: 700;
}

/* ===================================
   Button System - Always Visible
   =================================== */
/* White buttons with colored text */
.btn,
a.btn {
    color: inherit;
    font-weight: 600;
}

/* Primary blue buttons */
.btn-primary,
.btn[style*="background: white"],
.btn[style*="background:white"] {
    color: #0066cc;
}

/* ===================================
   PROFESSIONAL WHATSAPP BUTTON DESIGN
   Unified across all pages
   =================================== */
.btn-whatsapp,
.btn-whatsapp-cta,
.whatsapp-button,
.whatsapp-contact-btn,
a[href*="wa.me"].btn,
a.btn-whatsapp {
    background: #25D366 !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-whatsapp:hover,
.btn-whatsapp-cta:hover,
.whatsapp-button:hover,
.whatsapp-contact-btn:hover,
a[href*="wa.me"].btn:hover {
    background: #22c55e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5) !important;
}

.btn-whatsapp i,
.btn-whatsapp-cta i,
.whatsapp-button i,
.whatsapp-contact-btn i,
a[href*="wa.me"].btn i,
.btn-whatsapp span,
.btn-whatsapp-cta span,
.whatsapp-button span,
.whatsapp-contact-btn span,
a[href*="wa.me"].btn span {
    color: #ffffff !important;
    font-size: 1.3rem !important;
}

/* Dark Mode - Keep WhatsApp buttons the same */
[data-theme="dark"] .btn-whatsapp,
[data-theme="dark"] .btn-whatsapp-cta,
[data-theme="dark"] .whatsapp-button,
[data-theme="dark"] .whatsapp-contact-btn,
[data-theme="dark"] a[href*="wa.me"].btn {
    background: #25D366 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-whatsapp i,
[data-theme="dark"] .btn-whatsapp-cta i,
[data-theme="dark"] .whatsapp-button i,
[data-theme="dark"] .whatsapp-contact-btn i,
[data-theme="dark"] a[href*="wa.me"].btn i,
[data-theme="dark"] .btn-whatsapp span,
[data-theme="dark"] .btn-whatsapp-cta span,
[data-theme="dark"] .whatsapp-button span,
[data-theme="dark"] .whatsapp-contact-btn span,
[data-theme="dark"] a[href*="wa.me"].btn span {
    color: #ffffff !important;
}

/* Ensure icons in buttons are visible */
.btn i,
a.btn i {
    color: inherit;
}

/* Dark mode button adjustments */
[data-theme="dark"] .btn,
[data-theme="dark"] a.btn {





    color: inherit;
}

[data-theme="dark"] .btn[style*="background: white"],
[data-theme="dark"] .btn[style*="background:white"] {
    background: #ffffff !important;
    color: #0066cc !important;
}

[data-theme="dark"] .btn-primary {
    background: #ffffff !important;
    color: #0066cc !important;
}

[data-theme="dark"] .btn-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #ffffff !important;
    color: #0066cc !important;
}

/* ===================================
   Pricing Cards - Enhanced Visibility
   =================================== */
.pricing-card-modern {
    background: var(--bg-card);
}

.pricing-card-modern h3,
.pricing-card-modern h4 {
    color: var(--text-color) !important;
}

.pricing-card-modern .price-amount {
    color: #00994d !important;
    font-weight: 800;
}

.pricing-card-modern .pricing-features-modern li {
    color: var(--text-color) !important;
}

.pricing-card-modern p {
    color: var(--text-color) !important;
}

/* Dark Mode Pricing Cards */
[data-theme="dark"] .pricing-card-modern {
    background: #2a2a2a !important;
}

[data-theme="dark"] .pricing-card-modern h3,
[data-theme="dark"] .pricing-card-modern h4 {
    color: #ffffff !important;
}

[data-theme="dark"] .pricing-card-modern .price-amount {
    color: #2ecc71 !important;
}

[data-theme="dark"] .pricing-card-modern .pricing-features-modern li {
    color: #f0f0f0 !important;
}

[data-theme="dark"] .pricing-card-modern p {
    color: #e0e0e0 !important;
}

/* ===================================
   Contact Page - Enhanced Cards
   =================================== */
.contact-method-card h3 {
    color: var(--text-color);
}

.contact-method-card p {
    color: var(--text-light);
}

.contact-method-card i {
    color: inherit;
}

[data-theme="dark"] .contact-method-card h3 {
    color: #ffffff;
}

[data-theme="dark"] .contact-method-card p {
    color: #c0c0c0;
}

/* ===================================
   About Page - Profile & Experience
   =================================== */
.profile-section p,
.experience-section p,
.education-section p {
    color: var(--text-color);
}

.profile-section li,
.experience-section li,
.education-section li {
    color: var(--text-color);
}

[data-theme="dark"] .profile-section p,
[data-theme="dark"] .experience-section p,
[data-theme="dark"] .education-section p {
    color: #e0e0e0;
}

[data-theme="dark"] .profile-section li,
[data-theme="dark"] .experience-section li,
[data-theme="dark"] .education-section li {
    color: #e0e0e0;
}

/* ===================================
   Services & Portfolio Pages
   =================================== */
.services-section p,
.portfolio-section p {
    color: var(--text-color);
}

.services-section li,
.portfolio-section li {
    color: var(--text-color);
}

[data-theme="dark"] .services-section p,
[data-theme="dark"] .portfolio-section p {
    color: #e0e0e0;
}

[data-theme="dark"] .services-section li,
[data-theme="dark"] .portfolio-section li {
    color: #e0e0e0;
}

/* ===================================
   Why Choose Section
   =================================== */
.why-choose p,
.why-choose-services p {
    color: var(--text-color);
}

[data-theme="dark"] .why-choose p,
[data-theme="dark"] .why-choose-services p {
    color: #e0e0e0;
}

/* ===================================
   Icons - Always Visible in Both Modes
   =================================== */
.card i,
.section i {
    font-size: inherit;
}

/* WhatsApp icons ALWAYS green */
.fa-whatsapp {
    color: #25D366 !important;
}

/* Other social/contact icons */
.fa-envelope,
.fa-phone {
    color: inherit;
}

[data-theme="dark"] .fa-envelope,
[data-theme="dark"] .fa-phone {
    color: #f0f0f0;
}

/* ===================================
   CTA Section Buttons - Enhanced Visibility
   =================================== */
.btn-email-cta:hover {
    background: #f8f9fa !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

.btn-email-cta:hover i,
.btn-email-cta:hover span {
    color: #0066cc !important;
}

.btn-whatsapp-cta {
    background: #25D366 !important;
}

.btn-whatsapp-cta:hover {
    background: #20BA5A !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.7) !important;
    border-color: #ffffff !important;
}

.btn-whatsapp-cta i,
.btn-whatsapp-cta span {
    color: #ffffff !important;
}

/* Force WhatsApp icon to always be white in CTA */
.btn-whatsapp-cta .fa-whatsapp {
    color: #ffffff !important;
}

/* Dark Mode CTA Button Fixes */
[data-theme="dark"] .btn-email-cta {
    background: #ffffff !important;
}

[data-theme="dark"] .btn-email-cta i,
[data-theme="dark"] .btn-email-cta span {
    color: #0066cc !important;
}

[data-theme="dark"] .btn-whatsapp-cta {
    background: #25D366 !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] .btn-whatsapp-cta i,
[data-theme="dark"] .btn-whatsapp-cta span {
    color: #ffffff !important;
}

/* ===================================
   Accessibility
   =================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ===================================
   Loading Animation
   =================================== */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===================================
   WhatsApp Floating Button
   =================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    z-index: 9999;
    text-decoration: none;
    animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
    background: linear-gradient(135deg, #128C7E, #25D366);
}

.whatsapp-float i {
    color: #ffffff !important;
    animation: whatsapp-shake 1s ease-in-out infinite;
}

.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background: #ffffff;
    color: #333;
    padding: 8px 15px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid #ffffff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    right: 80px;
}

@keyframes whatsapp-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(37, 211, 102, 0.7);
    }
}

@keyframes whatsapp-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(15deg);
    }
}

/* Dark Mode */
[data-theme="dark"] .whatsapp-tooltip {
    background: #2a2a2a;
    color: #ffffff;
}

[data-theme="dark"] .whatsapp-tooltip::after {
    border-left-color: #2a2a2a;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
        font-size: 1.75rem;
    }
    
    .whatsapp-tooltip {
        display: none;
    }
}

/* ===================================
   Live Chat Widget
   =================================== */
.live-chat-widget {
    position: fixed;
    bottom: 110px;
    right: 30px;
    z-index: 9998;
}

.chat-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    position: relative;
}

.chat-button:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
}

.chat-button i {
    color: #ffffff;
    font-size: 1.75rem;
}

.chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #e74c3c;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 2px solid white;
    animation: pulse 2s infinite;
}

.chat-box {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 350px;
    max-height: 500px;
    background: var(--bg-card);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00ff88;
    border-radius: 50%;
    margin-right: 5px;
    animation: pulse 2s infinite;
}

.chat-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.chat-close:hover {
    transform: scale(1.1);
}

.chat-messages {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
    max-height: 250px;
    background: var(--bg-color);
}

.chat-message {
    margin-bottom: 1rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.received {
    text-align: left;
}

.chat-message p {
    display: inline-block;
    background: var(--bg-card);
    padding: 0.75rem 1rem;
    border-radius: 15px;
    margin: 0 0 0.25rem 0;
    max-width: 80%;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: var(--text-color);
}

.chat-time {
    font-size: 0.7rem;
    color: var(--text-light);
    opacity: 0.7;
}

.chat-quick-actions {
    padding: 1rem;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-action-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
    font-size: 0.9rem;
    text-align: left;
}

.quick-action-btn:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-color: #667eea;
    transform: translateX(3px);
}

.quick-action-btn i {
    color: #667eea;
    font-size: 1.1rem;
}

.chat-footer {
    padding: 1rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.chat-whatsapp-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white !important;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 600;
}

.chat-whatsapp-btn:hover {
    background: linear-gradient(135deg, #128C7E, #25D366);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.chat-whatsapp-btn i {
    font-size: 1.25rem;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .chat-box {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .chat-message p {
    background: #2a2a2a;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .live-chat-widget {
        bottom: 90px;
        right: 20px;
    }
    
    .chat-button {
        width: 55px;
        height: 55px;
    }
    
    .chat-button i {
        font-size: 1.5rem;
    }
    
    .chat-box {
        width: calc(100vw - 40px);
        max-width: 350px;
        right: -10px;
    }
}