@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --accent-blue: #005A9C;
    --accent-blue-light: #E6F0F9;
    --text-dark: #1f2937;
    --text-light: #f9fafb;
    --bg-light: #f9fafb;
    --bg-dark: #111827;
}

body {
    font-family: 'Poppins', sans-serif;
}

body.lang-ar {
    font-family: 'Cairo', sans-serif;
}

[data-lang="ar"] { display: none; }

body.lang-ar [data-lang="en"] { display: none; }
body.lang-ar [data-lang="ar"] { display: inline-block; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.nav-link {
    @apply text-gray-600 font-medium hover:text-accent-blue transition-colors duration-300 relative;
}

.nav-link.active {
    @apply text-accent-blue;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-blue);
    transition: width 0.3s ease-in-out;
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

.hero-section {
    background-image: url('../assets/modern_office_building_exterior.jpeg');
    background-size: cover;
    background-position: center;
    height: 60vh;
    min-height: 400px;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold text-text-dark;
}

.stat-card {
    @apply bg-white p-6 rounded-lg;
}

.client-logo {
    @apply max-h-16 w-auto mx-auto grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all duration-300 object-contain;
}

.client-logo-text {
    @apply h-16 flex items-center justify-center text-center text-gray-500 font-semibold grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all duration-300;
}
.client-logo-text-lg {
    @apply h-24 flex items-center justify-center text-center text-gray-600 font-bold text-lg;
}
.client-logo-lg {
    @apply max-h-24 w-auto mx-auto object-contain;
}

.client-card {
    @apply bg-white p-6 rounded-lg shadow-sm flex items-center justify-center h-40;
}

.testimonial-item {
    @apply p-6;
}

.service-card {
    @apply bg-white p-8 rounded-lg shadow-md text-center transition-transform transform hover:-translate-y-2;
}

.project-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-shadow hover:shadow-xl;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm;
}

.btn-primary {
    @apply bg-accent-blue text-white font-bold py-3 px-8 rounded-lg hover:bg-opacity-90 transition-colors duration-300;
}

footer a {
    @apply text-gray-400 hover:text-white transition-colors;
}

.text-accent-blue { color: var(--accent-blue); }
.bg-accent-blue { background-color: var(--accent-blue); }
.bg-accent-blue-light { background-color: var(--accent-blue-light); }
.border-accent-blue { border-color: var(--accent-blue); }
.focus\:ring-accent-blue:focus { --tw-ring-color: var(--accent-blue); }
.focus\:border-accent-blue:focus { border-color: var(--accent-blue); }
.hover\:text-accent-blue:hover { color: var(--accent-blue); }

body.lang-ar .nav-link::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}