/* EgyptInfoTech Global Styles - Modern Steel & Copper Theme */

/* ============================
   CSS Variables - Theme Colors
   ============================ */
:root {
    /* Primary Brand Color - Copper */
    --primary: #B87333;
    --primary-light: #CD8544;
    --primary-dark: #8B5A2B;
    --primary-glow: rgba(184, 115, 51, 0.4);
    
    /* Secondary Color - Steel */
    --secondary: #71797E;
    --secondary-light: #9CA3A8;
    --secondary-dark: #4A555A;
    --secondary-glow: rgba(113, 121, 126, 0.4);
    
    /* Background Colors */
    --bg-dark: #1a1d23;
    --bg-darker: #0f1114;
    --bg-light: #f5f7f8;
    --bg-steel: #2d3238;
    
    /* Text Colors */
    --text-white: #ffffff;
    --text-muted: rgb(255 255 255 / 0.8);
    --text-slate: #94a3b8;
    --text-copper: #B87333;
    
    /* Border Colors */
    --border-white: rgba(255, 255, 255, 0.1);
    --border-white-light: rgba(255, 255, 255, 0.15);
    --border-primary: rgba(184, 115, 51, 0.2);
    --border-secondary: rgba(113, 121, 126, 0.2);
    
    /* Glass Panel */
    --glass-bg: rgba(26, 29, 35, 0.7);
    --glass-blur: 12px;
    
    /* Form Select */
    --select-bg: #1a1d23;
    --select-text: #e2e8f0;
}

/* ============================
   Form Elements Styling
   ============================ */
select {
    background-color: var(--select-bg) !important;
    color: var(--select-text) !important;
    border: 1px solid var(--border-white) !important;
}

select option {
    background-color: var(--bg-dark) !important;
    color: var(--text-white) !important;
    padding: 10px;
}

/* Firefox specific */
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--select-text);
}

/* ============================
   Font Definitions
   ============================ */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('assets/fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype');
    font-weight: 200 1000;
    font-display: swap;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-style: normal;
}

/* ============================
   Icon Filters
   ============================ */
img[src*='assets/img/icons/'] {
    filter: brightness(0) invert(1);
}

.icon-white {
    filter: brightness(0) invert(1);
}

/* ============================
   Glass Panel
   ============================ */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--border-primary);
}

/* ============================
   Text Glow Effect
   ============================ */
.text-glow {
    text-shadow: 0 0 15px var(--primary-glow);
}

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

#particles-js canvas {
    display: block;
}

/* ============================
   Body Base Styles
   ============================ */
body {
    background: var(--bg-darker) !important;
    font-family: 'Inter', 'Cairo', sans-serif;
}

/* Dark mode body */
body.bg-dark,
body.dark {
    background: var(--bg-dark) !important;
}

/* Light mode body (if used) */
body.bg-light {
    background: var(--bg-light) !important;
}

/* ============================
   Navigation
   ============================ */
nav .text-primary {
    color: var(--primary);
}

nav a:hover {
    color: var(--primary);
    transition: color 0.2s ease;
}

/* Dropdown menus */
nav .absolute {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================
   Buttons & Interactive Elements
   ============================ */
button,
a[class*="bg-primary"],
.bg-primary {
    background-color: var(--primary) !important;
}

button:hover,
a[class*="bg-primary"]:hover,
.bg-primary:hover {
    background-color: var(--primary-dark) !important;
}

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

/* Border colors using primary */
.border-primary,
.border-primary\/20,
.border-primary\/30,
.border-primary\/40,
.border-primary\/50 {
    border-color: var(--primary) !important;
}

/* Hover text colors */
.hover\:text-primary:hover {
    color: var(--primary) !important;
}

/* Hover background colors */
.hover\:bg-primary:hover,
.hover\:bg-primary\/90:hover,
.hover\:bg-primary\/80:hover {
    background-color: var(--primary) !important;
}

/* Ring colors */
.ring-primary {
    --tw-ring-color: var(--primary);
}

/* Gradient backgrounds */
.from-primary {
    --tw-gradient-from: var(--primary);
}

.to-primary {
    --tw-gradient-to: var(--primary);
}

/* Shadow colors */
.shadow-primary {
    --tw-shadow-color: var(--primary-glow);
}

/* Ping animation colors */
.animate-ping.bg-primary {
    background-color: var(--primary);
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--primary) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light) !important;
}

/* ============================
   Border Colors
   ============================ */
.border-primary {
    border-color: var(--primary);
}

.border-white\/10 {
    border-color: var(--border-white);
}

/* ============================
   Scrollbar Styles (Optional)
   ============================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
}

/* ============================
   Selection Color
   ============================ */
::selection {
    background: var(--primary);
    color: white;
}

/* ============================
   Animations
   ============================ */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--primary-glow);
    }
    50% {
        box-shadow: 0 0 20px var(--primary-glow), 0 0 30px var(--primary-glow);
    }
}

.animate-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* ============================
   Responsive Utilities
   ============================ */
@media (max-width: 768px) {
    .glass-panel {
        background: rgba(16, 23, 34, 0.8);
    }
}

/* ============================
   Service Card Hover Animation
   ============================ */
.service-card {
    position: relative;
    text-decoration: none;
    display: block;
}

.service-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary));
    transition: width 0.3s ease;
}

[dir="ltr"] .service-card::before,
.service-card:not([dir="rtl"])::before {
    background: linear-gradient(90deg, var(--primary), #10b981);
}

[dir="rtl"] .service-card::before {
    background: linear-gradient(270deg, var(--primary), #10b981);
    left: auto;
    right: 0;
}

.service-card:hover::before {
    width: 100%;
}

.service-card:hover .card-content {
    transform: translateY(-2px);
}

.card-content {
    transition: transform 0.3s ease;
}