/* ===================================
   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: clip;
  overscroll-behavior: none;
}

body {
    font-family: var(--font-ar);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: clip;
    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;
    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;
    /* Show ALL languages at once - no scroll limit */
    max-height: none;
    overflow-y: visible;
}

/* Custom scrollbar for language dropdown (kept as fallback) */
.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: clip;
}

.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: 0;
    height: 0;
    pointer-events: none;
}

/* No CSS animation - JavaScript handles the orbit */
.orbit-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.orbit-item {
    position: absolute;
    top: 0;
    left: 0;
    /* JavaScript will set the position */
}

.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: absolute;
    /* Smooth transitions */
    transition: opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

/* 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;
    }
}

@media (max-width: 480px) {
    .orbit-item .float-element {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

/* 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;
}

/* ===== Enhanced Experience Badge with Icon ===== */
.experience-badge {
    position: absolute;
    bottom: -25px;
    left: -25px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    padding: 25px 35px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 30px var(--glow-primary),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: badgePulse 3s ease-in-out infinite;
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

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

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.3),
            0 0 30px var(--glow-primary),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 
            0 15px 50px rgba(0, 0, 0, 0.4),
            0 0 50px var(--glow-strong),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.exp-icon {
    font-size: 1.8rem;
    color: var(--bg-primary);
    animation: iconSpin 4s linear infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.exp-number {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 3rem;
    font-weight: 800;
    color: var(--bg-primary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.exp-number .plus {
    font-size: 1.8rem;
    font-weight: 700;
    animation: plusBounce 2s ease-in-out infinite;
}

@keyframes plusBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.exp-text {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bg-primary);
    opacity: 0.95;
    letter-spacing: 0.5px;
}

.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 styles removed */

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

/* Compact grid mode - when "All" filter is active: 3 columns always */
.portfolio-grid.grid-compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.portfolio-grid.grid-compact .portfolio-item {
    aspect-ratio: 1;
}

/* Single category mode - larger display */
.portfolio-grid.grid-single {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.portfolio-grid.grid-single .portfolio-item {
    aspect-ratio: auto;
}

.portfolio-grid.grid-single .portfolio-img {
    height: auto;
}

.portfolio-grid.grid-single .portfolio-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Individual portfolio item transition */
.portfolio-single-item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.portfolio-single-item .portfolio-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.portfolio-single-item .portfolio-overlay .overlay-content i {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Empty portfolio message */
.portfolio-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.portfolio-empty .empty-icon {
    font-size: 4rem;
    color: var(--accent-primary);
    opacity: 0.5;
    margin-bottom: 20px;
}

.portfolio-empty .empty-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.portfolio-empty .empty-subtext {
    font-size: 1rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

.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: transparent;
    }
    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: background-color var(--transition-fast);
    border: 2px solid transparent;
    box-shadow: 0 0 0 0 transparent;
    position: relative;
    will-change: box-shadow, border-color;
    transform: translateZ(0);
}

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

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

@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 with Liquid Fill Progress ===== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background: transparent;
    border-radius: 50%;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    z-index: 999;
    box-shadow: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
}

.back-to-top-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
}

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

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

.back-to-top-wrapper:hover {
    transform: translateY(-5px);
}

/* Outer container */
.back-to-top-container {
    position: relative;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--accent-primary);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-to-top-container:hover {
    box-shadow: 0 6px 25px var(--glow-primary);
    border-color: var(--accent-secondary);
}

/* Liquid fill effect */
.liquid-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, 
        var(--accent-primary) 0%, 
        color-mix(in srgb, var(--accent-primary) 70%, black) 100%);
    transition: height 0.15s ease-out;
    z-index: 1;
}

/* Wave effect on liquid */
.liquid-fill::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -50%;
    width: 200%;
    height: 16px;
    background: radial-gradient(ellipse at center, 
        var(--accent-primary) 0%, 
        transparent 70%);
    animation: wave 2s ease-in-out infinite;
    opacity: 0.8;
}

.liquid-fill::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -50%;
    width: 200%;
    height: 12px;
    background: radial-gradient(ellipse at center, 
        var(--accent-secondary) 0%, 
        transparent 70%);
    animation: wave 2s ease-in-out infinite reverse;
    animation-delay: 0.5s;
    opacity: 0.6;
}

@keyframes wave {
    0%, 100% {
        transform: translateX(-25%);
    }
    50% {
        transform: translateX(0%);
    }
}

/* Bubble effects */
.liquid-bubbles {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.bubble {
    position: absolute;
    bottom: -10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: bubbleRise 3s ease-in infinite;
    opacity: 0;
}

.bubble:nth-child(1) {
    left: 20%;
    width: 6px;
    height: 6px;
    animation-delay: 0s;
    animation-duration: 2.5s;
}

.bubble:nth-child(2) {
    left: 50%;
    width: 4px;
    height: 4px;
    animation-delay: 0.7s;
    animation-duration: 3s;
}

.bubble:nth-child(3) {
    left: 70%;
    width: 5px;
    height: 5px;
    animation-delay: 1.4s;
    animation-duration: 2.8s;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
}

/* Arrow icon */
.back-to-top-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: var(--accent-primary);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px var(--glow-primary);
}

/* When liquid fills, change icon color */
.back-to-top-container:hover .back-to-top-icon {
    transform: translate(-50%, -50%) translateY(-3px);
}

/* Icon color changes based on fill level */
.back-to-top-wrapper[data-fill-level="high"] .back-to-top-icon {
    color: var(--bg-primary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Percentage indicator (optional - hidden by default) */
.scroll-percentage {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.back-to-top-wrapper:hover .scroll-percentage {
    opacity: 1;
}

/* Legacy back-to-top button (hidden) */
[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);
    z-index: 10001;
    cursor: pointer;
    border: 1px solid var(--border-color);
    pointer-events: all;
}

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

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

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

.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);
}

/* ===== Portfolio Album Styles ===== */
.portfolio-album {
    cursor: pointer;
    transition: all 0.4s ease;
}

.portfolio-album:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 20px var(--glow-secondary);
}

.portfolio-album .portfolio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-album:hover .portfolio-img img {
    transform: scale(1.1);
}

.album-overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.85) 100%) !important;
    opacity: 1 !important;
    pointer-events: none;
}

.album-overlay .overlay-content {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    transform: none !important;
}

.album-overlay .album-icon {
    width: 50px;
    height: 50px;
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.2rem;
    color: var(--bg-primary);
    box-shadow: 0 5px 20px var(--glow-primary);
}

.album-overlay h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.album-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--accent-secondary);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    backdrop-filter: blur(5px);
}

/* ===== Category Gallery Modal ===== */
.category-gallery {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.category-gallery.active {
    opacity: 1;
    visibility: visible;
}

.gallery-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    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;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 10001;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

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

.gallery-close:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    transform: rotate(90deg);
}

.gallery-header {
    text-align: center;
    padding: 40px 20px 30px;
}

.gallery-header h3 {
    font-size: 2rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.gallery-counter {
    font-size: 1rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.gallery-grid {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg), 0 0 20px var(--glow-secondary);
    border-color: var(--accent-primary);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .gallery-header h3 {
        font-size: 1.5rem;
    }
    
    .gallery-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ===== 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);
    }

    /* Keep 3 columns in compact mode even on 992px */
    .portfolio-grid.grid-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .portfolio-grid.grid-single {
        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;
    }

    /* Keep 3 columns in compact mode on mobile */
    .portfolio-grid.grid-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .portfolio-grid.grid-compact .portfolio-item {
        border-radius: var(--radius-md);
    }

    .portfolio-grid.grid-compact .album-overlay .overlay-content {
        bottom: 8px;
    }

    .portfolio-grid.grid-compact .album-overlay .album-icon {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .portfolio-grid.grid-compact .album-overlay h4 {
        font-size: 0.65rem;
        margin-bottom: 2px;
    }

    .portfolio-grid.grid-compact .album-overlay .album-count {
        font-size: 0.55rem;
    }

    .portfolio-grid.grid-single {
        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;
    }
    
    .experience-badge {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@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;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .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;
}


/* ==========================================
   SCROLL EFFECTS & ENHANCED ANIMATIONS
   ========================================== */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Section reveal animations */
.section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section.reveal {
    opacity: 0;
    transform: translateY(60px);
}

.section.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax scroll effect for shapes */
.floating-shapes .shape {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* Scroll progress bar - HIDDEN (replaced by liquid fill button) */
.scroll-progress {
    display: none !important;
}

/* Enhanced service icons with 3D effects */
.service-icon {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.service-icon i {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    color: var(--accent-primary);
    line-height: 90px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 10px var(--glow-primary));
}

.icon-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--glow-secondary), transparent);
    border-radius: var(--radius-full);
    transition: all 0.4s ease;
    animation: iconBgPulse 3s ease-in-out infinite;
}

@keyframes iconBgPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.service-card:hover .icon-bg {
    transform: scale(1.2) rotate(10deg);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0.3;
}

.service-card:hover .service-icon i {
    transform: translateZ(30px) scale(1.2) rotateY(15deg);
    filter: drop-shadow(0 0 20px var(--glow-strong));
}

/* Enhanced info icons */
.info-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: linear-gradient(135deg, var(--glow-secondary), var(--bg-tertiary));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.info-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-icon i {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.info-item:hover .info-icon {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px var(--glow-primary);
}

.info-item:hover .info-icon::before {
    opacity: 1;
}

.info-item:hover .info-icon i {
    color: var(--bg-primary);
    transform: scale(1.2);
}

/* Enhanced quote icon */
.quote-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: var(--bg-primary);
    font-size: 1.8rem;
    box-shadow: 0 10px 30px var(--glow-primary);
    animation: quoteFloat 4s ease-in-out infinite;
    position: relative;
}

.quote-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-full);
    opacity: 0;
    animation: quoteRing 2s ease-out infinite;
}

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

@keyframes quoteRing {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Enhanced portfolio items with scroll reveal */
.portfolio-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.portfolio-item:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.portfolio-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.portfolio-placeholder i {
    font-size: 4rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.5;
    transition: all 0.5s ease;
}

.portfolio-item:hover .portfolio-placeholder i {
    opacity: 1;
    transform: scale(1.2) rotate(10deg);
}

/* Enhanced overlay buttons */
.overlay-btn {
    width: 50px;
    height: 50px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.overlay-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-gradient);
    transform: scale(0);
    transition: transform 0.3s ease;
    border-radius: var(--radius-full);
}

.overlay-btn i {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.overlay-btn:hover {
    border-color: var(--accent-primary);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 30px var(--glow-primary);
}

.overlay-btn:hover::before {
    transform: scale(1);
}

.overlay-btn:hover i {
    color: var(--bg-primary);
}

/* Enhanced filter buttons */
.filter-btn {
    padding: 12px 30px;
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* More .filter-btn styles removed */

/* Scroll-triggered stagger animations */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(50px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(-50px);
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(50px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(-50px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.8);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

/* Enhanced card hover effects */
.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 35px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

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

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--glow-secondary), transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.service-card:hover {
    transform: translateY(-15px) rotateX(5deg);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.3),
        0 0 40px var(--glow-secondary);
    border-color: var(--accent-primary);
}

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

.service-card:hover::after {
    opacity: 1;
}

/* Enhanced featured badge */
.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--bg-primary);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-xl);
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: badgeShine 2s ease-in-out infinite;
    box-shadow: 0 5px 20px var(--glow-primary);
}

@keyframes badgeShine {
    0%, 100% { 
        box-shadow: 0 5px 20px var(--glow-primary);
    }
    50% { 
        box-shadow: 0 5px 30px var(--glow-strong);
    }
}


/* ==========================================
   ANIMATED WAVY FOOTER
   ========================================== */

/* Enhanced Footer with multiple wave layers */
.footer {
    background: var(--bg-secondary);
    position: relative;
    padding-top: 0;
    overflow: hidden;
}

/* Wave container */
.footer-waves {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: transparent;
}

/* Multiple wave layers */
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    transform-origin: center bottom;
}

.wave-1 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231a1a25' fill-opacity='0.4' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 50% 100%;
    animation: waveMove1 15s linear infinite;
    opacity: 0.6;
    z-index: 1;
}

.wave-2 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231a1a25' fill-opacity='0.6' d='M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,106.7C672,117,768,171,864,176C960,181,1056,139,1152,122.7C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 50% 100%;
    animation: waveMove2 12s linear infinite;
    opacity: 0.8;
    z-index: 2;
}

.wave-3 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231a1a25' fill-opacity='1' d='M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,165.3C672,139,768,117,864,128C960,139,1056,181,1152,197.3C1248,213,1344,203,1392,197.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 50% 100%;
    animation: waveMove3 8s linear infinite;
    z-index: 3;
}

@keyframes waveMove1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes waveMove2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes waveMove3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Floating particles in footer */
.footer-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.footer-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: particleFloatUp 8s ease-in-out infinite;
}

.footer-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 10s; }
.footer-particle:nth-child(2) { left: 20%; animation-delay: 1s; animation-duration: 12s; }
.footer-particle:nth-child(3) { left: 30%; animation-delay: 2s; animation-duration: 9s; }
.footer-particle:nth-child(4) { left: 40%; animation-delay: 0.5s; animation-duration: 11s; }
.footer-particle:nth-child(5) { left: 50%; animation-delay: 1.5s; animation-duration: 10s; }
.footer-particle:nth-child(6) { left: 60%; animation-delay: 2.5s; animation-duration: 13s; }
.footer-particle:nth-child(7) { left: 70%; animation-delay: 0.8s; animation-duration: 9s; }
.footer-particle:nth-child(8) { left: 80%; animation-delay: 1.8s; animation-duration: 11s; }
.footer-particle:nth-child(9) { left: 90%; animation-delay: 3s; animation-duration: 10s; }
.footer-particle:nth-child(10) { left: 5%; animation-delay: 2.2s; animation-duration: 12s; }

@keyframes particleFloatUp {
    0% {
        transform: translateY(100%) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* Enhanced footer content */
.footer-content {
    background: var(--bg-tertiary);
    padding: 80px 0 40px;
    position: relative;
    z-index: 10;
}

/* Glowing border effect */
.footer-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--accent-primary), 
        var(--accent-secondary), 
        var(--accent-primary), 
        transparent
    );
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    position: relative;
    z-index: 10;
}

/* Enhanced footer logo */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

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

.footer-logo .logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 5px var(--glow-primary)); }
    50% { filter: drop-shadow(0 0 20px var(--glow-strong)); }
}

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

.footer-logo .logo-name {
    font-size: 1.2rem;
    font-weight: 700;
}

.footer-brand p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Enhanced footer links */
.footer-links h4,
.footer-services h4,
.footer-contact h4 {
    font-size: 1.1rem;
    margin-bottom: 25px;
    color: var(--accent-primary);
    position: relative;
    display: inline-block;
}

.footer-links h4::after,
.footer-services h4::after,
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

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

.footer-links ul a,
.footer-services ul a {
    color: var(--text-secondary);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 5px 0;
}

.footer-links ul a::before,
.footer-services ul a::before {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--accent-primary);
}

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

.footer-links ul a:hover::before,
.footer-services ul a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

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

/* Enhanced social icons */
.footer-social-large {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.footer-social-large .social-icon {
    width: 55px;
    height: 55px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.footer-social-large .social-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-gradient);
    transform: scale(0);
    transition: transform 0.4s ease;
    border-radius: var(--radius-md);
}

.footer-social-large .social-icon i {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

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

@keyframes socialFloat {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px var(--glow-primary);
    }
}

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

.footer-social-large .social-icon:hover::before {
    transform: scale(1);
}

.footer-social-large .social-icon:hover i {
    color: var(--bg-primary);
    transform: scale(1.2);
}

/* Enhanced footer bottom */
.footer-bottom {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    padding: 25px 0;
    text-align: center;
    position: relative;
    z-index: 10;
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-bottom .heart {
    color: #e74c3c;
    animation: heartbeat 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Responsive footer */
@media (max-width: 992px) {
    .footer-waves {
        height: 100px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .footer-waves {
        height: 80px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-links h4::after,
    .footer-services h4::after,
    .footer-contact h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-social-large {
        justify-content: center;
    }
}

/* ============================================================
   Scroll Deck Reveal Animation for Services
   ============================================================ */

.services-deck-container {
    position: relative;
    height: 700px; /* الارتفاع المناسب لمنطقة الأنيميشن */
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    perspective: 2000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-card {
    position: absolute;
    width: 320px;
    height: 450px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease, box-shadow 0.6s ease;
    cursor: pointer;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.deck-card.featured {
    border-color: var(--accent-primary);
    box-shadow: 0 0 30px var(--glow-primary);
}

.deck-card .service-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--accent-primary);
}

.deck-card .service-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.deck-card .service-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

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

.deck-card .service-features span {
    font-size: 0.8rem;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* حالة الكارت وهو داخل الرزمة (قبل الكشف) */
.deck-card.in-deck {
    opacity: 1;
    pointer-events: none;
}

/* حالة الكارت المكشوف */
.deck-card.revealed {
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}

/* حالة الكارت الذي تم تجاوزه (اختفى للأعلى أو الجانب) */
.deck-card.passed {
    opacity: 0;
    transform: translateZ(500px) translateY(-100px) rotateX(20deg) !important;
    pointer-events: none;
}

@media (max-width: 768px) {
    .services-deck-container {
        height: 600px;
    }
    .deck-card {
        width: 280px;
        height: 400px;
    }
}