/* ===================================
   Mohamed Yusri Portfolio - Main Styles
   Professional Theme System v2.0
   =================================== */

/* ===== CSS Variables & Themes ===== */
:root {
    /* Font Families */
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Poppins', sans-serif;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-full: 50%;
    
    /* Spacing */
    --section-padding: 100px 0;
    --container-width: 1200px;
}

/* =================================================================
   THEME SYSTEM - Professional CSS Variables Architecture
   
   Variables Structure:
   - Background colors: --bg-primary, --bg-secondary, --bg-tertiary, --bg-card, --bg-card-hover
   - Text colors: --text-primary, --text-secondary, --text-muted
   - Accent colors: --accent-primary, --accent-secondary, --accent-gradient
   - Glow effects: --glow-primary, --glow-secondary, --glow-strong, --glow-text
   - Border colors: --border-color, --border-color-light, --border-accent
   - Shadow colors: --shadow-glow, --shadow-accent
   - Particles: --particles-color, --particles-lines
   - SVG/Icons: --icon-glow, --stroke-color
   - Animated BG: --bg-animated-1, --bg-animated-2, --bg-animated-3
   ================================================================= */

/* =============================================
   DARK THEME (Default) - Golden Glow
   Gold accent preserved for glow effects
   ============================================= */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-card: #15151f;
    --bg-card-hover: #1e1e2a;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0a0b0;
    --text-muted: #6a6a7a;
    
    /* Accent Colors (Gold) */
    --accent-primary: #d4af37;
    --accent-secondary: #f4d35e;
    --accent-rgb: 212, 175, 55;
    --accent-gradient: linear-gradient(135deg, #d4af37, #f4d35e);
    
    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.05);
    --border-accent: rgba(212, 175, 55, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(10, 10, 15, 0.9);
    --overlay-medium: rgba(10, 10, 15, 0.7);
    
    /* Glow Effects (Gold - Fixed for dark theme) */
    --glow-primary: rgba(212, 175, 55, 0.3);
    --glow-secondary: rgba(212, 175, 55, 0.1);
    --glow-strong: rgba(212, 175, 55, 0.6);
    --glow-text: 0 0 10px rgba(212, 175, 55, 0.8), 0 0 20px rgba(212, 175, 55, 0.4);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.3);
    --shadow-accent: 0 5px 20px rgba(212, 175, 55, 0.3);
    
    /* Particles */
    --particles-color: #d4af37;
    --particles-lines: rgba(212, 175, 55, 0.2);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
    --stroke-color: #d4af37;
    --stroke-glow: drop-shadow(0 0 5px rgba(212, 175, 55, 0.6));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(212, 175, 55, 0.1);
    --bg-animated-2: rgba(244, 211, 94, 0.08);
    --bg-animated-3: rgba(212, 175, 55, 0.05);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 30px rgba(212, 175, 55, 0.6);
    --orbit-glow-dim: 0 0 10px rgba(212, 175, 55, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(212, 175, 55, 0.4);
    --btn-glow-intense: 0 15px 40px rgba(212, 175, 55, 0.5);
}

/* =============================================
   LIGHT THEME - Golden Glow
   Gold accent preserved for glow effects
   ============================================= */
[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f1f3;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f5f7;
    
    /* Text Colors */
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #8a8a9a;
    
    /* Accent Colors (Gold) */
    --accent-primary: #b8860b;
    --accent-secondary: #daa520;
    --accent-rgb: 184, 134, 11;
    --accent-gradient: linear-gradient(135deg, #b8860b, #daa520);
    
    /* Border Colors */
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-light: rgba(0, 0, 0, 0.05);
    --border-accent: rgba(184, 134, 11, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(255, 255, 255, 0.95);
    --overlay-medium: rgba(255, 255, 255, 0.8);
    
    /* Glow Effects (Gold - Fixed for light theme) */
    --glow-primary: rgba(184, 134, 11, 0.3);
    --glow-secondary: rgba(184, 134, 11, 0.1);
    --glow-strong: rgba(184, 134, 11, 0.5);
    --glow-text: 0 0 10px rgba(184, 134, 11, 0.6), 0 0 20px rgba(184, 134, 11, 0.3);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(184, 134, 11, 0.25);
    --shadow-accent: 0 5px 20px rgba(184, 134, 11, 0.25);
    
    /* Particles */
    --particles-color: #b8860b;
    --particles-lines: rgba(184, 134, 11, 0.15);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 8px rgba(184, 134, 11, 0.4));
    --stroke-color: #b8860b;
    --stroke-glow: drop-shadow(0 0 5px rgba(184, 134, 11, 0.5));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(184, 134, 11, 0.08);
    --bg-animated-2: rgba(218, 165, 32, 0.06);
    --bg-animated-3: rgba(184, 134, 11, 0.04);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 25px rgba(184, 134, 11, 0.5);
    --orbit-glow-dim: 0 0 10px rgba(184, 134, 11, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(184, 134, 11, 0.35);
    --btn-glow-intense: 0 15px 40px rgba(184, 134, 11, 0.45);
}

/* =============================================
   NAVY THEME - Cyan Glow
   Theme color used for all glow effects
   ============================================= */
[data-theme="navy"] {
    /* Background Colors */
    --bg-primary: #0d1b2a;
    --bg-secondary: #1b263b;
    --bg-tertiary: #243447;
    --bg-card: #162234;
    --bg-card-hover: #1e3048;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a8b2c3;
    --text-muted: #6b7a8f;
    
    /* Accent Colors (Cyan) */
    --accent-primary: #00b4d8;
    --accent-secondary: #48cae4;
    --accent-rgb: 0, 180, 216;
    --accent-gradient: linear-gradient(135deg, #00b4d8, #48cae4);
    
    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.05);
    --border-accent: rgba(0, 180, 216, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(13, 27, 42, 0.95);
    --overlay-medium: rgba(13, 27, 42, 0.8);
    
    /* Glow Effects (Cyan - Theme color) */
    --glow-primary: rgba(0, 180, 216, 0.3);
    --glow-secondary: rgba(0, 180, 216, 0.1);
    --glow-strong: rgba(0, 180, 216, 0.6);
    --glow-text: 0 0 10px rgba(0, 180, 216, 0.8), 0 0 20px rgba(0, 180, 216, 0.4);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(0, 180, 216, 0.3);
    --shadow-accent: 0 5px 20px rgba(0, 180, 216, 0.3);
    
    /* Particles */
    --particles-color: #00b4d8;
    --particles-lines: rgba(0, 180, 216, 0.2);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 10px rgba(0, 180, 216, 0.5));
    --stroke-color: #00b4d8;
    --stroke-glow: drop-shadow(0 0 5px rgba(0, 180, 216, 0.6));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(0, 180, 216, 0.1);
    --bg-animated-2: rgba(72, 202, 228, 0.08);
    --bg-animated-3: rgba(0, 180, 216, 0.05);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 30px rgba(0, 180, 216, 0.6);
    --orbit-glow-dim: 0 0 10px rgba(0, 180, 216, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(0, 180, 216, 0.4);
    --btn-glow-intense: 0 15px 40px rgba(0, 180, 216, 0.5);
}

/* =============================================
   GRAY THEME - Silver/Steel Glow
   Elegant monochrome with silver accent
   ============================================= */
[data-theme="gray"] {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2d2d2d;
    --bg-card: #202020;
    --bg-card-hover: #2a2a2a;
    
    /* Text Colors */
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --text-muted: #707070;
    
    /* Accent Colors (Silver) */
    --accent-primary: #a0a0a0;
    --accent-secondary: #c8c8c8;
    --accent-rgb: 160, 160, 160;
    --accent-gradient: linear-gradient(135deg, #a0a0a0, #d0d0d0);
    
    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.05);
    --border-accent: rgba(160, 160, 160, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(26, 26, 26, 0.95);
    --overlay-medium: rgba(26, 26, 26, 0.8);
    
    /* Glow Effects (Silver - Theme color) */
    --glow-primary: rgba(160, 160, 160, 0.3);
    --glow-secondary: rgba(160, 160, 160, 0.1);
    --glow-strong: rgba(200, 200, 200, 0.5);
    --glow-text: 0 0 10px rgba(200, 200, 200, 0.7), 0 0 20px rgba(160, 160, 160, 0.4);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(160, 160, 160, 0.25);
    --shadow-accent: 0 5px 20px rgba(160, 160, 160, 0.25);
    
    /* Particles */
    --particles-color: #a0a0a0;
    --particles-lines: rgba(160, 160, 160, 0.2);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 10px rgba(160, 160, 160, 0.5));
    --stroke-color: #b0b0b0;
    --stroke-glow: drop-shadow(0 0 5px rgba(160, 160, 160, 0.6));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(160, 160, 160, 0.08);
    --bg-animated-2: rgba(200, 200, 200, 0.06);
    --bg-animated-3: rgba(160, 160, 160, 0.04);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 30px rgba(160, 160, 160, 0.5);
    --orbit-glow-dim: 0 0 10px rgba(160, 160, 160, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(160, 160, 160, 0.35);
    --btn-glow-intense: 0 15px 40px rgba(200, 200, 200, 0.45);
}

/* =============================================
   WARM THEME - Orange/Amber Glow
   Warm and inviting with sunset colors
   ============================================= */
[data-theme="warm"] {
    /* Background Colors */
    --bg-primary: #1a1410;
    --bg-secondary: #231c16;
    --bg-tertiary: #2d241c;
    --bg-card: #1e1813;
    --bg-card-hover: #2a211a;
    
    /* Text Colors */
    --text-primary: #fff8f0;
    --text-secondary: #c8b8a8;
    --text-muted: #8a7a6a;
    
    /* Accent Colors (Orange/Amber) */
    --accent-primary: #ff7b00;
    --accent-secondary: #ff9f40;
    --accent-rgb: 255, 123, 0;
    --accent-gradient: linear-gradient(135deg, #ff7b00, #ff9f40);
    
    /* Border Colors */
    --border-color: rgba(255, 200, 150, 0.1);
    --border-color-light: rgba(255, 200, 150, 0.05);
    --border-accent: rgba(255, 123, 0, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(26, 20, 16, 0.95);
    --overlay-medium: rgba(26, 20, 16, 0.8);
    
    /* Glow Effects (Orange - Theme color) */
    --glow-primary: rgba(255, 123, 0, 0.3);
    --glow-secondary: rgba(255, 123, 0, 0.1);
    --glow-strong: rgba(255, 159, 64, 0.6);
    --glow-text: 0 0 10px rgba(255, 123, 0, 0.8), 0 0 20px rgba(255, 159, 64, 0.4);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(255, 123, 0, 0.3);
    --shadow-accent: 0 5px 20px rgba(255, 123, 0, 0.3);
    
    /* Particles */
    --particles-color: #ff7b00;
    --particles-lines: rgba(255, 123, 0, 0.2);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 10px rgba(255, 123, 0, 0.5));
    --stroke-color: #ff7b00;
    --stroke-glow: drop-shadow(0 0 5px rgba(255, 123, 0, 0.6));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(255, 123, 0, 0.1);
    --bg-animated-2: rgba(255, 159, 64, 0.08);
    --bg-animated-3: rgba(255, 123, 0, 0.05);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 30px rgba(255, 123, 0, 0.6);
    --orbit-glow-dim: 0 0 10px rgba(255, 123, 0, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(255, 123, 0, 0.4);
    --btn-glow-intense: 0 15px 40px rgba(255, 159, 64, 0.5);
}

/* =============================================
   INDIGO THEME - Purple/Violet Glow
   Deep and creative with indigo accent
   ============================================= */
[data-theme="indigo"] {
    /* Background Colors */
    --bg-primary: #0f0a1a;
    --bg-secondary: #1a1228;
    --bg-tertiary: #241a36;
    --bg-card: #16102a;
    --bg-card-hover: #1e1638;
    
    /* Text Colors */
    --text-primary: #f8f5ff;
    --text-secondary: #b8a8d0;
    --text-muted: #7a6a90;
    
    /* Accent Colors (Indigo/Purple) */
    --accent-primary: #8b5cf6;
    --accent-secondary: #a78bfa;
    --accent-rgb: 139, 92, 246;
    --accent-gradient: linear-gradient(135deg, #8b5cf6, #a78bfa);
    
    /* Border Colors */
    --border-color: rgba(139, 92, 246, 0.15);
    --border-color-light: rgba(139, 92, 246, 0.08);
    --border-accent: rgba(139, 92, 246, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(15, 10, 26, 0.95);
    --overlay-medium: rgba(15, 10, 26, 0.8);
    
    /* Glow Effects (Indigo - Theme color) */
    --glow-primary: rgba(139, 92, 246, 0.3);
    --glow-secondary: rgba(139, 92, 246, 0.1);
    --glow-strong: rgba(167, 139, 250, 0.6);
    --glow-text: 0 0 10px rgba(139, 92, 246, 0.8), 0 0 20px rgba(167, 139, 250, 0.4);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.3);
    --shadow-accent: 0 5px 20px rgba(139, 92, 246, 0.3);
    
    /* Particles */
    --particles-color: #8b5cf6;
    --particles-lines: rgba(139, 92, 246, 0.2);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
    --stroke-color: #8b5cf6;
    --stroke-glow: drop-shadow(0 0 5px rgba(139, 92, 246, 0.6));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(139, 92, 246, 0.1);
    --bg-animated-2: rgba(167, 139, 250, 0.08);
    --bg-animated-3: rgba(139, 92, 246, 0.05);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 30px rgba(139, 92, 246, 0.6);
    --orbit-glow-dim: 0 0 10px rgba(139, 92, 246, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(139, 92, 246, 0.4);
    --btn-glow-intense: 0 15px 40px rgba(167, 139, 250, 0.5);
}

/* =============================================
   EMERALD THEME - Green/Teal Glow
   Fresh and natural with emerald accent
   ============================================= */
[data-theme="emerald"] {
    /* Background Colors */
    --bg-primary: #0a1a14;
    --bg-secondary: #12281e;
    --bg-tertiary: #1a3628;
    --bg-card: #102218;
    --bg-card-hover: #183020;
    
    /* Text Colors */
    --text-primary: #f0fff8;
    --text-secondary: #a8d0c0;
    --text-muted: #6a9080;
    
    /* Accent Colors (Emerald/Green) */
    --accent-primary: #10b981;
    --accent-secondary: #34d399;
    --accent-rgb: 16, 185, 129;
    --accent-gradient: linear-gradient(135deg, #10b981, #34d399);
    
    /* Border Colors */
    --border-color: rgba(16, 185, 129, 0.15);
    --border-color-light: rgba(16, 185, 129, 0.08);
    --border-accent: rgba(16, 185, 129, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(10, 26, 20, 0.95);
    --overlay-medium: rgba(10, 26, 20, 0.8);
    
    /* Glow Effects (Emerald - Theme color) */
    --glow-primary: rgba(16, 185, 129, 0.3);
    --glow-secondary: rgba(16, 185, 129, 0.1);
    --glow-strong: rgba(52, 211, 153, 0.6);
    --glow-text: 0 0 10px rgba(16, 185, 129, 0.8), 0 0 20px rgba(52, 211, 153, 0.4);
    
    /* Shadow Glow */
    --shadow-glow: 0 0 30px rgba(16, 185, 129, 0.3);
    --shadow-accent: 0 5px 20px rgba(16, 185, 129, 0.3);
    
    /* Particles */
    --particles-color: #10b981;
    --particles-lines: rgba(16, 185, 129, 0.2);
    
    /* Icon/SVG Effects */
    --icon-glow: drop-shadow(0 0 10px rgba(16, 185, 129, 0.5));
    --stroke-color: #10b981;
    --stroke-glow: drop-shadow(0 0 5px rgba(16, 185, 129, 0.6));
    
    /* Animated Background Colors */
    --bg-animated-1: rgba(16, 185, 129, 0.1);
    --bg-animated-2: rgba(52, 211, 153, 0.08);
    --bg-animated-3: rgba(16, 185, 129, 0.05);
    
    /* Orbit/Float Element Effects */
    --orbit-glow: 0 0 30px rgba(16, 185, 129, 0.6);
    --orbit-glow-dim: 0 0 10px rgba(16, 185, 129, 0.2);
    
    /* Button Glow on Hover */
    --btn-glow: 0 10px 30px rgba(16, 185, 129, 0.4);
    --btn-glow-intense: 0 15px 40px rgba(52, 211, 153, 0.5);
}

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

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

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

[lang="en"] body,
[lang="en"] *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad) {
    font-family: var(--font-en);
}

/* Language-specific body classes */
body.lang-en {
    font-family: var(--font-en);
}

body.lang-ar {
    font-family: var(--font-ar);
}

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

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

ul, ol {
    list-style: none;
}

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

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: var(--section-padding);
    position: relative;
}

/* ===== Loader ===== */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.logo-loader {
    width: 120px;
    height: 120px;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    position: relative;
    animation: logoRotate 2s ease-in-out infinite;
    background: var(--bg-secondary);
    padding: 10px;
    box-sizing: border-box;
}

.logo-loader::before {
    content: '';
    position: absolute;
    inset: -3px;
    border: 3px solid transparent;
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-lg);
    animation: spin 1s linear infinite;
}

.loader-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 90px;
    max-height: 90px;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .shape-1, .shape-2, .experience-badge {
        display: none !important;
    }
}

/* Responsive loader logo */
@media (max-width: 768px) {
    .logo-loader {
        width: 100px;
        height: 100px;
    }
    
    .loader-logo {
        max-width: 75px;
        max-height: 75px;
    }
}

@media (max-width: 480px) {
    .logo-loader {
        width: 90px;
        height: 90px;
    }
    
    .loader-logo {
        max-width: 65px;
        max-height: 65px;
    }
}

.logo-text {
    font-size: 2rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loader-bar {
    width: 200px;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.loader-progress {
    width: 0%;
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 2px;
    animation: loadProgress 2s ease-in-out forwards;
}

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

@keyframes logoRotate {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes loadProgress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* ===== Particles Background ===== */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* ===== Navigation ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    transition: all var(--transition-normal);
}

.navbar.scrolled {
    background: var(--overlay-dark);
    backdrop-filter: blur(20px);
    padding: 15px 0;
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: var(--icon-glow);
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

/* Logo switching based on theme */
/* Hide all logos by default, then show the appropriate one for each theme */
.logo-default,
.logo-navy,
.logo-gray,
.logo-warm,
.logo-indigo,
.logo-emerald {
    display: none;
}

/* Dark and Light themes use the gold logo */
[data-theme="dark"] .logo-default,
[data-theme="light"] .logo-default {
    display: block;
}

/* Navy theme - Cyan logo */
[data-theme="navy"] .logo-navy {
    display: block;
    filter: var(--icon-glow);
}

/* Gray theme - Gray/Silver logo */
[data-theme="gray"] .logo-gray {
    display: block;
    filter: var(--icon-glow);
}

/* Warm theme - Orange/Warm logo */
[data-theme="warm"] .logo-warm {
    display: block;
    filter: var(--icon-glow);
}

/* Indigo theme - Purple/Indigo logo */
[data-theme="indigo"] .logo-indigo {
    display: block;
    filter: var(--icon-glow);
}

/* Emerald theme - Green/Emerald logo */
[data-theme="emerald"] .logo-emerald {
    display: block;
    filter: var(--icon-glow);
}

/* Hover effects for all theme logos */
.nav-logo:hover .logo-img:not([style*="display: none"]),
.footer-logo:hover .logo-img:not([style*="display: none"]) {
    filter: var(--icon-glow);
    transform: scale(1.1);
}

.nav-logo:hover .logo-img {
    transform: scale(1.1);
    filter: var(--icon-glow);
}

.logo-name {
    font-size: 1.3rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    gap: 5px;
}

.nav-link {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    transition: all var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent-gradient);
    transition: width var(--transition-fast);
    border-radius: 1px;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 30px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Theme Switcher */
.theme-switcher,
.lang-switcher {
    position: relative;
}

.theme-btn,
.lang-btn {
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 1.1rem;
    transition: all var(--transition-fast);
}

.theme-btn:hover,
.lang-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.lang-btn {
    /* Square button like theme switcher */
}

/* Language dropdown - uses theme variables */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 150px;
    max-height: 350px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
}

/* Custom scrollbar for language dropdown */
.lang-dropdown::-webkit-scrollbar {
    width: 6px;
}

.lang-dropdown::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.lang-dropdown::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

.lang-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

[dir="ltr"] .lang-dropdown {
    right: auto;
    left: 0;
}

.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    width: 100%;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-size: 0.95rem;
    border: 1px solid transparent;
}

.lang-option:hover {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.lang-option.active {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    font-weight: 600;
    border: 1px solid var(--accent-primary);
}

/* =============================================
   THEME DROPDOWN - Independent from theme colors
   Fixed dark background with white text
   ============================================= */
.theme-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 150px;
    /* Fixed dark background - independent of theme */
    background: #1a1a25 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 1001;
}

[dir="ltr"] .theme-dropdown {
    right: auto;
    left: 0;
}

.theme-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Theme options - always white text on dark background */
.theme-option {
    width: 100%;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    /* Fixed white text - always visible regardless of theme */
    color: #ffffff !important;
    transition: all var(--transition-fast);
    font-size: 0.95rem;
    border: 1px solid transparent;
    background: transparent;
}

.theme-option i {
    /* Icons use accent color for visual distinction */
    color: var(--accent-primary);
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.theme-option:hover i {
    color: var(--accent-primary);
}

/* Active theme option - highlight with accent color border */
.theme-option.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--accent-primary) !important;
    font-weight: 600;
    border: 1px solid var(--accent-primary);
}

.theme-option.active i {
    color: var(--accent-primary);
}

/* lang-code styles removed */

/* Mobile Menu Toggle */
.nav-toggle {
    display: none;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    position: relative;
}

.hamburger {
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all var(--transition-fast);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    left: 0;
    transition: all var(--transition-fast);
}

.hamburger::before {
    top: -7px;
}

.hamburger::after {
    bottom: -7px;
}

.nav-toggle.active .hamburger {
    background: transparent;
}

.nav-toggle.active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle.active .hamburger::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: var(--accent-gradient);
    color: var(--bg-primary);
    box-shadow: 0 5px 20px var(--glow-primary);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--btn-glow);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--accent-primary);
    color: var(--accent-primary);
}

.btn-outline:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    transform: translateY(-3px);
}

.btn-lg {
    padding: 16px 40px;
    font-size: 1.1rem;
}

.btn-icon {
    transition: transform var(--transition-fast);
}

/* RTL - Icons move to the left */
[dir="rtl"] .btn:hover .btn-icon {
    transform: translateX(-5px);
}

/* LTR - Icons move to the right */
[dir="ltr"] .btn:hover .btn-icon {
    transform: translateX(5px);
}

/* Flip arrow icons based on direction */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .rtl-flip {
    transform: scaleX(-1) translateX(5px);
}

[dir="ltr"] .rtl-flip {
    transform: scaleX(1);
}

[dir="ltr"] .btn:hover .rtl-flip {
    transform: translateX(5px);
}

/* ===== Section Header ===== */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    padding: 8px 20px;
    background: var(--glow-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-xl);
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-line {
    display: none;
}

/* ===== Hero Section ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 100px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--glow-secondary) 0%, transparent 70%);
}

.floating-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: var(--radius-full);
    opacity: 0.1;
    animation: float 20s ease-in-out infinite;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: var(--accent-gradient);
    top: 10%;
    right: -10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 300px;
    height: 300px;
    background: var(--accent-primary);
    bottom: 20%;
    left: -5%;
    animation-delay: 2s;
}

.shape-3 {
    width: 200px;
    height: 200px;
    background: var(--accent-secondary);
    top: 50%;
    left: 30%;
    animation-delay: 4s;
}

.shape-4 {
    width: 150px;
    height: 150px;
    background: var(--accent-gradient);
    bottom: 10%;
    right: 20%;
    animation-delay: 6s;
}

.shape-5 {
    width: 100px;
    height: 100px;
    background: var(--accent-primary);
    top: 20%;
    left: 10%;
    animation-delay: 8s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -30px) rotate(5deg); }
    50% { transform: translate(-20px, 20px) rotate(-5deg); }
    75% { transform: translate(30px, 10px) rotate(3deg); }
}

.hero-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-visual {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    margin-bottom: 25px;
    animation: fadeInUp 0.8s ease;
}

.badge-icon {
    color: var(--accent-primary);
}

.hero-title {
    margin-bottom: 25px;
}

.greeting {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.name {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.name-highlight {
    display: inline-block;
    background: linear-gradient(180deg, var(--text-primary) 50%, transparent 50%);
    -webkit-background-clip: text;
}

.name-highlight.gold {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.4rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.typed-text {
    color: var(--accent-primary);
    font-weight: 600;
    min-width: 100px;
}

.cursor {
    color: var(--accent-primary);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 500px;
}

.hero-cta {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}

.hero-stats {
    display: flex;
    gap: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.stat-plus {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

/* Hero Visual */
.hero-visual {
    position: relative;
}

.hero-image-wrapper {
    position: relative;
}

.hero-image-frame {
    position: relative;
    width: 400px;
    height: 450px;
    margin: 0 auto;
    z-index: 10;
    transform: translateZ(10px);
}

.frame-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid var(--accent-primary);
}

.frame-corner.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.frame-corner.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.frame-corner.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.frame-corner.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.hero-image {
    position: absolute;
    inset: 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--accent-primary);
}

.image-placeholder i {
    font-size: 4rem;
    opacity: 0.5;
}

.image-placeholder span {
    font-size: 3rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== 3D Orbit Container - True 3D Rotation Behind Image ===== */
.hero-image-wrapper {
    position: relative;
}

.hero-image-frame {
    position: relative;
}

/* The 3D Scene - Both image and orbit share this space */
.orbit-3d-scene {
    position: absolute;
    inset: 0;
}

/* The image container */
.hero-image {
    position: absolute;
    inset: 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* The image sits at z-index 10 - icons will go behind (5) or in front (15) */
    z-index: 10;
}

/* Orbit container sits at center of the frame */
.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 15;
}

.orbit-scene {
    position: relative;
    width: 100%;
    height: 100%;
}

.orbit-item {
    position: absolute;
    transform-origin: center;
    transition: all 0.5s ease;
}

/* Position Definitions */
.pos-top-left { top: 10%; left: 10%; }
.pos-top-right { top: 10%; right: 10%; }
.pos-mid-left { top: 50%; left: -5%; transform: translateY(-50%); }
.pos-mid-right { top: 50%; right: -5%; transform: translateY(-50%); }
.pos-bottom-left { bottom: 10%; left: 10%; }
.pos-bottom-right { bottom: 10%; right: 10%; }
.pos-extra { bottom: -10%; left: 50%; transform: translateX(-50%); }

.orbit-item .float-element {
    width: 65px;
    height: 65px;
    background: var(--bg-card);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 1.8rem;
    box-shadow: var(--orbit-glow);
    position: relative;
    animation: floatAround 4s ease-in-out infinite;
}

/* Different speeds for different icons */
.el-1 .float-element { animation-duration: 3s; animation-delay: 0s; }
.el-2 .float-element { animation-duration: 4s; animation-delay: 0.5s; }
.el-3 .float-element { animation-duration: 3.5s; animation-delay: 1s; }
.el-4 .float-element { animation-duration: 4.5s; animation-delay: 1.5s; }
.el-5 .float-element { animation-duration: 5s; animation-delay: 2s; }
.el-6 .float-element { animation-duration: 3.8s; animation-delay: 0.2s; }
.el-7 .float-element { animation-duration: 4.2s; animation-delay: 0.7s; }

@keyframes floatAround {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

/* When icon is behind the image */
.orbit-item.behind .float-element {
    opacity: 0.35;
    filter: blur(1px);
    box-shadow: var(--orbit-glow-dim);
}

/* When icon is in front of the image */
.orbit-item.front .float-element {
    opacity: 1;
    filter: blur(0);
    box-shadow: var(--orbit-glow);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .orbit-item .float-element {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    .pos-top-left { top: 5%; left: 5%; }
    .pos-top-right { top: 5%; right: 5%; }
    .pos-mid-left { left: -10%; }
    .pos-mid-right { right: -10%; }
    .pos-bottom-left { bottom: 5%; left: 5%; }
    .pos-bottom-right { bottom: 5%; right: 5%; }
    .pos-extra { bottom: -15%; }
}

@media (max-width: 480px) {
    .orbit-item .float-element {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    .pos-top-left { top: 0%; left: 0%; }
    .pos-top-right { top: 0%; right: 0%; }
    .pos-mid-left { left: -15%; }
    .pos-mid-right { right: -15%; }
    .pos-bottom-left { bottom: 0%; left: 0%; }
    .pos-bottom-right { bottom: 0%; right: 0%; }
    .pos-extra { bottom: -20%; }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.scroll-down:hover {
    color: var(--accent-primary);
}

.scroll-arrow {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* ===== About Section ===== */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.about-img-wrapper {
    position: relative;
}

.about-img-bg {
    position: absolute;
    top: 20px;
    right: 20px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 3px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    z-index: -1;
}

[dir="ltr"] .about-img-bg {
    right: auto;
    left: 20px;
}

.about-img-main {
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder.large {
    font-size: 6rem;
}

.image-placeholder.large i {
    font-size: 6rem;
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: var(--accent-gradient);
    padding: 20px 30px;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

[dir="ltr"] .experience-badge {
    left: auto;
    right: -20px;
}

.exp-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--bg-primary);
}

.exp-text {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bg-primary);
}

.about-heading {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
}

.about-description,
.about-description-2 {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.8;
    min-height: 80px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Typewriter Line-by-Line Effect */
.typewriter-line {
    display: inline;
}

.typewriter-cursor {
    display: inline-block;
    color: var(--accent-primary);
    font-weight: bold;
    font-size: 1.1em;
    animation: cursorBlink 0.6s steps(1) infinite;
    margin-inline-start: 1px;
    vertical-align: middle;
}

@keyframes cursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.about-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 30px 0;
    padding: 30px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.info-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    background: var(--glow-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.info-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.info-value {
    font-weight: 600;
    color: var(--text-primary);
}

.info-value.email {
    font-size: 0.9rem;
}

.about-cta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* ===== Services Section ===== */
.services {
    background: var(--bg-secondary);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 35px;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    transform: scaleX(0);
    transition: transform var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card.featured {
    border-color: var(--accent-primary);
    background: linear-gradient(180deg, var(--glow-secondary), var(--bg-card) 50%);
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    background: var(--accent-gradient);
    color: var(--bg-primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

[dir="ltr"] .featured-badge {
    right: auto;
    left: 15px;
}

.service-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
}

.service-icon i {
    position: relative;
    z-index: 1;
    font-size: 2.2rem;
    color: var(--accent-primary);
    line-height: 80px;
}

.icon-bg {
    position: absolute;
    inset: 0;
    background: var(--glow-secondary);
    border-radius: var(--radius-full);
    transition: transform var(--transition-normal);
}

.service-card:hover .icon-bg {
    transform: scale(1.1);
}

.service-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.service-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.service-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.service-features span {
    padding: 5px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.services-cta {
    text-align: center;
    margin-top: 60px;
}

.services-cta p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* ===== Portfolio Section ===== */
.portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 25px;
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--accent-gradient);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.portfolio-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
}

.portfolio-item.hidden {
    display: none;
}

.portfolio-img {
    width: 100%;
    height: 100%;
    position: relative;
}

.portfolio-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow);
}

.portfolio-placeholder i {
    font-size: 4rem;
    color: var(--accent-primary);
    opacity: 0.3;
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-item:hover .portfolio-placeholder {
    transform: scale(1.1);
}

.overlay-content {
    text-align: center;
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.portfolio-item:hover .overlay-content {
    transform: translateY(0);
}

.overlay-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.overlay-content span {
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.overlay-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.overlay-btn {
    width: 45px;
    height: 45px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.overlay-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.portfolio-more {
    text-align: center;
    margin-top: 50px;
}

/* ===== Testimonials Section ===== */
.testimonials {
    background: var(--bg-secondary);
}

/* ===== Rating Breakdown Styles ===== */
.rating-breakdown {
    max-width: 700px;
    margin: 0 auto 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
}

/* Rating Hint Text */
.rating-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-color);
    opacity: 0.9;
}

/* Theme-Aware Glow Animation for Rating Rows */
@keyframes goldenGlowPulse {
    0% {
        box-shadow: 0 0 0 0 transparent;
        border-color: var(--border-color);
    }
    100% {
        box-shadow: 0 0 20px 3px var(--glow-strong), 
                    0 0 40px 6px var(--glow-primary),
                    inset 0 0 15px var(--glow-secondary);
        border-color: var(--accent-primary);
    }
}

.rating-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    position: relative;
}

/* Golden glow animation class */
.rating-row.golden-glow {
    animation: goldenGlowPulse 1.2s ease-in-out forwards;
    z-index: 10;
}

.rating-row.glow-fade-out {
    animation: goldenGlowFadeOut 1.2s ease-in-out forwards;
    z-index: 10;
}

@keyframes goldenGlowFadeOut {
    0% {
        box-shadow: 0 0 20px 3px var(--glow-strong), 
                    0 0 40px 6px var(--glow-primary),
                    inset 0 0 15px var(--glow-secondary);
        border-color: var(--accent-primary);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        border-color: transparent;
    }
}


/* Improved Rating Hint Animation - Fixed for Arabic Letter Connection & Smooth Fade */
.rating-hint {
    display: block; 
    text-align: center;
    min-height: 50px;
    margin: 30px auto 0;
    padding: 12px 35px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-md);
    cursor: default;
    font-weight: 600;
    color: var(--text-secondary);
    width: fit-content;
    direction: rtl;
    white-space: nowrap; 
}

.rating-hint .letter {
    display: inline; 
    opacity: 0.4; /* Slightly lower base opacity for better contrast */
    color: var(--text-secondary);
    transition: opacity 0.5s ease, color 0.5s ease, text-shadow 0.5s ease;
}

/* Theme-aware glow state */
.rating-hint .letter.glow {
    opacity: 1;
    color: var(--accent-primary); 
    text-shadow: var(--glow-text);
}

/* Fade out state */
.rating-hint .letter.fade-out {
    opacity: 0.4;
    color: var(--text-secondary);
    text-shadow: none;
}

/* Select All Button Style */
.rating-hint.btn-mode {
    display: flex; 
    background: var(--accent-gradient);
    color: var(--bg-primary) !important;
    cursor: pointer;
    font-weight: 700;
    opacity: 1;
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
    border: none;
    white-space: normal;
}

.rating-hint.btn-mode:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.rating-hint.btn-mode .letter {
    opacity: 1;
    color: var(--bg-primary) !important;
    text-shadow: none !important;
}

.rating-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 30px;
    align-items: center;
}

.rating-average {
    text-align: center;
    padding: 20px;
    border-left: 1px solid var(--border-color);
}

[dir="ltr"] .rating-average {
    border-left: none;
    border-right: 1px solid var(--border-color);
}

.average-score {
    display: block;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.average-stars {
    color: var(--accent-primary);
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.average-stars i {
    margin: 0 2px;
}

.total-reviews {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rating-row:hover {
    background: var(--bg-tertiary);
}

.rating-row.active {
    background: var(--glow-secondary);
    border-color: var(--accent-primary);
}

.rating-stars {
    color: var(--accent-primary);
    font-size: 0.9rem;
    display: flex;
    gap: 3px;
}

.rating-stars i.far {
    color: var(--text-muted);
}

.rating-bar-container {
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.rating-bar {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 5px;
    width: 0%;
    transition: width 0.8s ease-out;
}

.rating-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

/* Rating Filter Info */
.rating-filter-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.filter-rating {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.filter-stars-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.btn-show-all {
    padding: 8px 20px;
    background: var(--accent-gradient);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-right: 10px;
}

[dir="ltr"] .btn-show-all {
    margin-right: 0;
    margin-left: 10px;
}

.btn-show-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--glow-primary);
}

/* Responsive Styles for Rating Breakdown */
@media (max-width: 768px) {
    .rating-breakdown {
        padding: 20px;
    }
    
    .rating-summary {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .rating-average {
        border-left: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 20px;
    }
    
    [dir="ltr"] .rating-average {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .average-score {
        font-size: 2.8rem;
    }
    
    .rating-row {
        grid-template-columns: 80px 1fr 35px;
        gap: 10px;
        padding: 6px 8px;
    }
    
    .rating-stars {
        font-size: 0.75rem;
    }
    
    .rating-filter-info {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .rating-row {
        grid-template-columns: 70px 1fr 30px;
        gap: 8px;
    }
    
    .rating-stars {
        font-size: 0.7rem;
    }
    
    .rating-count {
        font-size: 0.8rem;
    }
}

.testimonials-slider {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.testimonial-card {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    opacity: 0;
    transform: translateX(50px);
    transition: all var(--transition-normal);
}

.testimonial-card.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

.quote-icon {
    width: 60px;
    height: 60px;
    background: var(--glow-secondary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--accent-primary);
    font-size: 1.5rem;
}

.testimonial-text {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.5rem;
}

.author-info h4 {
    font-weight: 700;
    margin-bottom: 3px;
}

.author-info span {
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.testimonial-rating {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.testimonial-rating i {
    margin: 0 2px;
}

/* ===== Translate Comment Button ===== */
.translate-comment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    margin-bottom: 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.translate-comment-btn:hover {
    background: var(--glow-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.translate-comment-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.translate-comment-btn i {
    font-size: 0.9rem;
}

.translate-comment-btn.translated {
    background: var(--glow-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.translate-comment-btn span {
    font-weight: 500;
}

/* RTL adjustments for translate button */
[dir="rtl"] .translate-comment-btn {
    font-family: var(--font-ar);
}

[dir="ltr"] .translate-comment-btn {
    font-family: var(--font-en);
}

/* Responsive styles for translate button */
@media (max-width: 768px) {
    .translate-comment-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    
    .translate-comment-btn i {
        font-size: 0.8rem;
    }
}

.testimonials-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    user-select: none;
}

.nav-arrow {
    width: 35px;
    height: 35px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 1.2rem;
}

.nav-arrow:hover {
    color: var(--accent-primary);
    transform: scale(1.2);
}

/* Flip navigation arrows for LTR */
[dir="ltr"] .nav-arrow i {
    transform: scaleX(-1);
}

[dir="ltr"] .lightbox-nav i {
    transform: scaleX(-1);
}

.testimonials-dots {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
}

.dot {
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-normal);
    opacity: 0.4;
}

.dot.active {
    background: var(--accent-primary);
    transform: scale(1.3);
    opacity: 1;
    box-shadow: var(--shadow-glow);
}

/* ===== Contact Section ===== */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
}

.info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
    height: 100%;
}

.info-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.info-card > p {
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.contact-details {
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.contact-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: var(--glow-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 1.2rem;
}

.contact-text .label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.contact-text a,
.contact-text span:not(.label) {
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.contact-text a:hover {
    color: var(--accent-primary);
}

.social-links h4 {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 45px;
    height: 45px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.social-icon:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-primary);
    transform: translateY(-3px);
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full {
    grid-column: span 2;
}

.form-group label {
    font-weight: 600;
    font-size: 0.95rem;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

[dir="ltr"] .input-wrapper i {
    right: auto;
    left: 15px;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: 15px 45px 15px 15px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

[dir="ltr"] .input-wrapper input,
[dir="ltr"] .input-wrapper select,
[dir="ltr"] .input-wrapper textarea {
    padding: 15px 15px 15px 45px;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-secondary);
}

.input-wrapper input:focus + i,
.input-wrapper select:focus + i,
.input-wrapper textarea:focus + i,
.input-wrapper:has(input:focus) i,
.input-wrapper:has(select:focus) i,
.input-wrapper:has(textarea:focus) i {
    color: var(--accent-primary);
}

.input-wrapper textarea {
    resize: none;
}

.input-wrapper:has(textarea) i {
    top: 18px;
    transform: none;
}

.input-wrapper select {
    cursor: pointer;
    appearance: none;
}

.submit-btn {
    grid-column: span 2;
    justify-self: start;
}

[dir="ltr"] .submit-btn {
    justify-self: end;
}

/* ===== Footer ===== */
.footer {
    background: var(--bg-secondary);
    position: relative;
    padding-top: 0;
}

.footer-wave {
    color: var(--bg-tertiary);
    margin-bottom: -1px;
}

.footer-wave svg {
    display: block;
    width: 100%;
}

.footer-content {
    background: var(--bg-tertiary);
    padding: 60px 0;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.footer-logo .logo-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo .logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-logo .logo-name {
    font-size: 1.1rem;
}

.footer-brand p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.footer-links h4,
.footer-services h4,
.footer-contact h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--accent-primary);
}

.footer-links ul li,
.footer-services ul li {
    margin-bottom: 12px;
}

.footer-links ul a,
.footer-services ul a {
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-links ul a:hover,
.footer-services ul a:hover {
    color: var(--accent-primary);
    padding-right: 10px;
}

[dir="ltr"] .footer-links ul a:hover,
[dir="ltr"] .footer-services ul a:hover {
    padding-right: 0;
    padding-left: 10px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.footer-contact-item i {
    color: var(--accent-primary);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.footer-social-large .social-icon {
    width: 55px;
    height: 55px;
    font-size: 1.5rem;
    border-width: 2px;
    animation: softFloat 3s ease-in-out infinite;
}

.footer-social-large .social-icon:nth-child(1) { animation-delay: 0s; }
.footer-social-large .social-icon:nth-child(2) { animation-delay: 0.2s; }
.footer-social-large .social-icon:nth-child(3) { animation-delay: 0.4s; }
.footer-social-large .social-icon:nth-child(4) { animation-delay: 0.6s; }
.footer-social-large .social-icon:nth-child(5) { animation-delay: 0.8s; }

@keyframes softFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    25% {
        transform: translateY(-4px) rotate(2deg);
    }
    50% {
        transform: translateY(-8px) rotate(0deg);
        box-shadow: var(--shadow-glow);
    }
    75% {
        transform: translateY(-4px) rotate(-2deg);
    }
}

.footer-social-large .social-icon:hover {
    animation-play-state: paused;
    transform: translateY(-10px) scale(1.15);
    box-shadow: var(--shadow-glow);
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.footer-bottom {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== Back to Top ===== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: 999;
    box-shadow: var(--shadow-md);
}

[dir="ltr"] .back-to-top {
    right: auto;
    left: 30px;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* ===== Lightbox ===== */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all var(--transition-fast);
}

.lightbox-close:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.lightbox-nav.prev {
    right: 20px;
}

.lightbox-nav.next {
    left: 20px;
}

[dir="ltr"] .lightbox-nav.prev {
    right: auto;
    left: 20px;
}

[dir="ltr"] .lightbox-nav.next {
    left: auto;
    right: 20px;
}

.lightbox-nav:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* ===== Responsive Design ===== */
@media (max-width: 1200px) {
    .hero-container {
        gap: 40px;
    }
    
    .hero-image-frame {
        width: 350px;
        height: 400px;
    }
    
    .name {
        font-size: 3rem;
    }
}

@media (max-width: 992px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background: var(--bg-secondary);
        padding: 100px 30px 30px;
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        z-index: 998;
    }
    
    [dir="ltr"] .nav-menu {
        right: auto;
        left: 0;
        transform: translateX(-100%);
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    .nav-list {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-visual {
        order: -1;
    }
    
    .hero-image-frame {
        width: 300px;
        height: 350px;
        margin: 0 auto;
    }
    
    .hero-description {
        margin: 0 auto 35px;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-subtitle {
        justify-content: center;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .about-img-wrapper {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-content {
        grid-template-columns: 1fr;
    }
    
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section {
        padding: 70px 0;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .name {
        font-size: 2.5rem;
    }
    
    .greeting {
        font-size: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: 25px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: 30px;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-form {
        grid-template-columns: 1fr;
    }
    
    .form-group.full {
        grid-column: span 1;
    }
    
    .submit-btn {
        grid-column: span 1;
        width: 100%;
    }
    
    .about-info {
        grid-template-columns: 1fr;
    }
    
    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 0 15px;
    }
    
    .nav-actions {
        gap: 5px;
    }
    
    .theme-btn,
    .lang-btn,
    .nav-toggle {
        width: 40px;
        height: 40px;
    }
    
    /* .lang-btn padding removed */
    
    .hero {
        padding-top: 80px;
    }
    
    .hero-image-frame {
        width: 250px;
        height: 280px;
    }
    
    .name {
        font-size: 2rem;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .about-cta {
        flex-direction: column;
    }
    
    .about-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .experience-badge {
        padding: 15px 20px;
    }
    
    .exp-number {
        font-size: 2rem;
    }
}

/* ===== Rating Input Styles ===== */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 5px;
}

.rating-input input {
    display: none;
}

.rating-input label {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label {
    color: var(--accent-primary);
}

.rating-input label i {
    pointer-events: none;
}

/* ===================================
   Profile Image 3D Flip Effect
   =================================== */

.profile-card {
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.profile-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: var(--radius-lg); /* Return to square shape with rounded corners as in original design */
  transition: transform 1s ease-in-out;
}

/* Auto-rotation when page first opens */
.auto-rotate .profile-inner {
  animation: spinOnce 1.2s ease-in-out forwards;
  animation-delay: 1.5s; /* Starts after page load and Loader appearance */
}

@keyframes spinOnce {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.profile-front,
.profile-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profile-front img,
.profile-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Back face */
.profile-back {
  transform: rotateY(180deg);
}

/* Flip on hover (desktop only) */
@media (hover: hover) {
  .profile-card:hover .profile-inner {
    transform: rotateY(180deg);
  }
}

/* Special adjustments to merge effect with current design */
.hero-image {
    border-radius: var(--radius-lg) !important;
    background: transparent !important;
}

/* Rotation effect on click */
.profile-card:active .profile-inner {
    animation: clickFlip 1s ease-in-out;
}

@keyframes clickFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}


/* Adjust frame size to return to original rectangular shape */
.hero-image-frame {
    width: 400px;
    height: 450px;
}

@media (max-width: 1200px) {
    .hero-image-frame {
        width: 350px;
        height: 350px;
    }
}

@media (max-width: 992px) {
    .hero-image-frame {
        width: 320px;
        height: 320px;
    }
}

@media (max-width: 768px) {
    .hero-image-frame {
        width: 280px;
        height: 280px;
    }
}

/* ===== Testimonials Action Button ===== */
.testimonials-action {
    text-align: center;
    margin-top: 40px;
}

.testimonials-action .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

/* ===== Modal Styles ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal-content {
    background-color: var(--bg-card);
    margin: auto;
    padding: 40px;
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 550px;
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-xl);
    transform: translateY(-20px);
    transition: transform var(--transition-normal);
}

.modal.active .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    line-height: 1;
    z-index: 10;
}

.close-modal:hover {
    color: var(--accent-primary);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header h3 {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.modal-header p {
    color: var(--text-secondary);
}

.modal-form .form-group {
    margin-bottom: 20px;
}

.modal-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
}

.modal-form input,
.modal-form textarea,
.modal-form select {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-secondary);
}

/* ===== Enhanced Select/Dropdown Styling for Modal ===== */
.modal-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 15px center;
    padding-left: 40px;
}

[dir="ltr"] .modal-form select {
    background-position: right 15px center;
    padding-left: 15px;
    padding-right: 40px;
}

.modal-form select:hover {
    border-color: var(--accent-primary);
}

/* Select option styling - Note: limited browser support */
.modal-form select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: 12px 15px;
}

.modal-form select option:hover,
.modal-form select option:focus,
.modal-form select option:checked {
    background-color: var(--glow-secondary);
    color: var(--accent-primary);
}

/* ===== Custom Select Dropdown - Theme Compatible ===== */
.custom-select-wrapper {
    position: relative;
    width: 100%;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 15px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.custom-select-trigger:hover {
    border-color: var(--accent-primary);
}

.custom-select.open .custom-select-trigger {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--glow-secondary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-trigger i {
    color: var(--text-muted);
    transition: transform var(--transition-fast);
    font-size: 0.85rem;
}

.custom-select.open .custom-select-trigger i {
    transform: rotate(180deg);
    color: var(--accent-primary);
}

.custom-select-trigger span {
    flex: 1;
    text-align: right;
}

[dir="ltr"] .custom-select-trigger span {
    text-align: left;
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-card);
    border: 1px solid var(--accent-primary);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 100;
    box-shadow: var(--shadow-lg);
}

.custom-select.open .custom-options {
    max-height: 300px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}

.custom-option {
    padding: 12px 15px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-color-light);
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: var(--glow-secondary);
    color: var(--accent-primary);
}

.custom-option.selected {
    background-color: var(--glow-secondary);
    color: var(--accent-primary);
    font-weight: 600;
    position: relative;
}

.custom-option.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 15px;
    color: var(--accent-primary);
}

[dir="ltr"] .custom-option.selected::after {
    left: auto;
    right: 15px;
}

/* Custom scrollbar for options */
.custom-options::-webkit-scrollbar {
    width: 6px;
}

.custom-options::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.custom-options::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

.custom-options::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* Star Rating in Modal */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
    margin-bottom: 0;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: var(--accent-primary);
}

.success-message {
    text-align: center;
    padding: 40px 0;
}

.success-message i {
    font-size: 4rem;
    color: #28a745;
    margin-bottom: 20px;
}

.success-message p {
    font-size: 1.2rem;
    color: var(--text-primary);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .modal-content {
        padding: 30px 20px;
    }
    
    .modal-header h3 {
        font-size: 1.5rem;
    }
}

/* ===== Updated Contact Section (Full Width) ===== */
.contact-content-full {
    max-width: 900px;
    margin: 0 auto;
}

.contact-info-full {
    width: 100%;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.contact-details-grid .contact-item {
    border-bottom: none;
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-fast);
}

.contact-details-grid .contact-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .contact-details-grid {
        grid-template-columns: 1fr;
    }
}

/* Typewriter Effect Styles */
.typewriter-text {
    min-height: 1.5em;
    opacity: 0; /* Start hidden until typewriter starts */
    transition: opacity 0.3s ease;
}

.typewriter-text.typing {
    opacity: 1;
    border-left: 2px solid var(--accent-primary);
    padding-left: 5px;
}

[dir="rtl"] .typewriter-text.typing {
    border-left: none;
    border-right: 2px solid var(--accent-primary);
    padding-left: 0;
    padding-right: 5px;
}

/* ===== Footer Description Animation Styles ===== */
.footer-desc-animated {
    display: block;
    text-align: center;
    direction: rtl;
    line-height: 1.8;
}

[dir="ltr"] .footer-desc-animated {
    direction: ltr;
}

.footer-desc-animated .footer-letter {
    display: inline;
    opacity: 0.4;
    color: var(--text-secondary);
    transition: opacity 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}

/* Glow state - letter is lit up */
.footer-desc-animated .footer-letter.glow {
    opacity: 1;
    color: var(--accent-primary);
    text-shadow: var(--glow-text);
}

/* Fade out state - letter is fading */
.footer-desc-animated .footer-letter.fade-out {
    opacity: 0.4;
    color: var(--text-secondary);
    text-shadow: none;
}

/* Remove all underlines from the website */
* {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Restore borders for elements that actually need them (like cards or inputs) if necessary, 
   but the user requested NO underlines at all. 
   If some borders are needed, they should be specifically re-enabled.
   However, to be safe and follow the "no underlines" strictly: */
a, span, p, h1, h2, h3, h4, h5, h6, div {
    text-decoration: none !important;
    border-bottom: none !important;
}