/* ==========================================

AAA Hub - Ultimate Premium Stylesheet

Theme: Glassmorphism | Gold & Green Luxury

Version: 6.1 - MOBILE FIXES

========================================== */

/* ==========================================

1. ROOT VARIABLES & COLOR PALETTE

========================================== */

:root {
/* --- Brand Colors --- */
--primary-color: #2d8f4d; /* AAA Emerald Green */
--primary-dark: #1a5f2e; /* Deep Forest Green */
--primary-gradient: linear-gradient(135deg, #2d8f4d, #144d22);

/* --- Gold Luxury Accents --- */
--gold-color: #d4af37; /* Metallic Gold */
--gold-light: #f1d76e;
--gold-gradient: linear-gradient(135deg, #d4af37, #f1d76e, #b4942d);

/* --- Text Colors --- */
--text-main: #1a1a1a;
--text-secondary: #555555;
--text-inverse: #ffffff;

/* --- Glassmorphism (Light Mode) --- */
--glass-bg: rgba(255, 255, 255, 0.75);
--glass-border: rgba(255, 255, 255, 0.6);
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
--backdrop-blur: blur(12px);

/* --- Layout & Spacing --- */
--container-width: 1200px;
--header-height: 85px;
--border-radius: 20px;
--transition-fast: 0.3s ease;
--transition-bounce: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Dark Mode Overrides --- */
[data-theme="dark"] {
--text-main: #f0f0f0;
--text-secondary: #cccccc;
--glass-bg: rgba(18, 18, 18, 0.85);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* ==========================================

2. GLOBAL RESET & BASE STYLES

========================================== */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}

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

body {
font-family: 'Cairo', sans-serif;
color: var(--text-main);
line-height: 1.7;
overflow-x: hidden;
min-height: 100vh;
position: relative;
}

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

ul { list-style: none; }

img, video { 
max-width: 100%; 
display: block; 
border-radius: var(--border-radius); 
}

/* ==========================================

3. GLOBAL VIDEO BACKGROUND (FIXED)

========================================== */

#global-video-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -10;
}

#video-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(3px);
z-index: -9;
transition: background 0.5s ease;
}

[data-theme="dark"] #video-overlay {
background: rgba(0, 0, 0, 0.75);
}

/* ==========================================

4. UTILITIES & GLASS CLASSES

========================================== */

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

.section {
padding: 100px 0;
position: relative;
z-index: 1;
}

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

.glass-card {
background: var(--glass-bg);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--border-radius);
transition: var(--transition-bounce);
}

.glass-card:hover {
transform: translateY(-10px);
border-color: var(--gold-color);
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.2);
}

/* ==========================================

5. TYPOGRAPHY & TITLES

========================================== */

h1, h2, h3, h4 { 
line-height: 1.3; 
font-weight: 700; 
}

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

[data-theme="dark"] .section-title {
background: var(--gold-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.section-subtitle {
font-size: 1.2rem;
color: var(--text-main);
max-width: 700px;
margin: 0 auto 60px;
font-weight: 600;
}

/* ==========================================

6. PREMIUM BUTTONS

========================================== */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 15px 40px;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
z-index: 1;
transition: var(--transition-bounce);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}

.btn-primary {
background: var(--primary-gradient);
color: #fff;
box-shadow: 0 10px 20px rgba(45, 143, 77, 0.4);
}

.btn-primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(45, 143, 77, 0.6);
}

.btn-secondary {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(5px);
border: 2px solid var(--text-main);
color: var(--text-main);
}

.btn-secondary:hover {
background: var(--text-main);
color: var(--text-inverse);
transform: translateY(-5px);
}

.btn-accent {
background: var(--gold-gradient);
color: #000;
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.4);
}

.btn-accent:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(212, 175, 55, 0.6);
}

.btn-request {
flex: 1;
font-size: 0.9rem;
}

/* ==========================================

7. HEADER & NAVIGATION

========================================== */

.header {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: var(--container-width);
height: var(--header-height);
background: var(--glass-bg);
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 50px;
z-index: 1000;
box-shadow: var(--glass-shadow);
transition: var(--transition-fast);
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0 30px;
}

.logo img {
height: 55px;
transition: 0.3s;
}

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

.nav-link {
font-weight: 700;
color: var(--text-main);
position: relative;
font-size: 1.05rem;
white-space: nowrap;
}

.nav-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 3px;
background: var(--gold-gradient);
transition: 0.3s;
border-radius: 2px;
}

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

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

.control-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
background: rgba(255,255,255,0.2);
color: var(--text-main);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 1.2rem;
transition: 0.3s;
flex-shrink: 0;
}

.control-btn:hover {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
transform: rotate(20deg);
}

.hamburger { 
display: none; 
}

/* ==========================================

8. HERO SECTION

========================================== */

.hero {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding-top: 100px;
padding-bottom: 50px;
}

.hero-content {
background: var(--glass-bg);
backdrop-filter: blur(10px);
padding: 50px;
border-radius: 30px;
border: 1px solid var(--glass-border);
max-width: 900px;
margin: 0 20px;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
animation: fadeInUp 1s ease;
}

.hero-title {
font-size: 3.5rem;
margin-bottom: 20px;
color: var(--text-main);
line-height: 1.2;
}

.hero-subtitle {
font-size: 1.5rem;
margin-bottom: 40px;
color: var(--text-main);
line-height: 1.6;
}

.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}

/* ==========================================

9. SERVICES & FEATURES GRID

========================================== */

.services-grid, 
.features-grid, 
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}

.card {
background: var(--glass-bg);
backdrop-filter: var(--backdrop-blur);
border: 1px solid var(--glass-border);
border-radius: var(--border-radius);
padding: 35px;
position: relative;
overflow: hidden;
transition: var(--transition-bounce);
display: flex;
flex-direction: column;
}

.card:hover {
transform: translateY(-10px);
border-color: var(--gold-color);
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15);
}

.card-icon {
width: 80px;
height: 80px;
background: var(--primary-gradient);
color: #fff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin-bottom: 25px;
transition: 0.5s;
box-shadow: 0 10px 20px rgba(45, 143, 77, 0.3);
flex-shrink: 0;
}

.card:hover .card-icon {
transform: rotateY(180deg) scale(1.1);
background: var(--gold-gradient);
color: #000;
}

.card h3 {
margin-bottom: 15px;
font-size: 1.6rem;
}

.card p {
margin-bottom: 20px;
flex-grow: 1;
}

/* ==========================================

10. TESTIMONIALS SLIDER (MARQUEE)

========================================== */

.testimonials-section {
overflow: hidden;
padding: 50px 0;
background: var(--glass-bg);
backdrop-filter: blur(5px);
margin-top: 50px;
}

.testimonials-track {
display: flex;
gap: 30px;
width: max-content;
animation: scroll 40s linear infinite;
}

.testimonial-card {
background: rgba(255,255,255,0.5);
padding: 25px;
border-radius: 15px;
width: 350px;
border: 1px solid var(--glass-border);
flex-shrink: 0;
}

[data-theme="dark"] .testimonial-card { 
background: rgba(0,0,0,0.5); 
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-350px * 5 - 150px)); }
}

/* ==========================================

11. PORTFOLIO

========================================== */

.portfolio-item {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 300px;
cursor: pointer;
border: 2px solid transparent;
transition: 0.3s;
}

.portfolio-item:hover {
border-color: var(--gold-color);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.portfolio-media {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.6s ease;
}

.portfolio-item:hover .portfolio-media {
transform: scale(1.1) rotate(2deg);
}

.portfolio-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.4s;
padding: 20px;
text-align: center;
}

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

.portfolio-overlay h3 { 
color: var(--gold-color); 
margin-bottom: 10px; 
font-size: 1.8rem; 
}

.portfolio-overlay p { 
color: #fff; 
}

.filter-btn {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--text-main);
padding: 10px 25px;
border-radius: 30px;
margin: 5px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
font-family: 'Cairo', sans-serif;
}

.filter-btn.active,
.filter-btn:hover {
background: var(--gold-gradient);
color: #000;
border-color: transparent;
}

.faq-filter-btn {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--text-main);
padding: 10px 25px;
border-radius: 30px;
margin: 5px;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
font-family: 'Cairo', sans-serif;
}

.faq-filter-btn.active,
.faq-filter-btn:hover {
background: var(--primary-color);
color: #fff;
border-color: transparent;
}

/* ==========================================

12. MODALS & POPUPS

========================================== */

.modal {
position: fixed;
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 2000;
display: none;
justify-content: center;
align-items: center;
padding: 20px;
backdrop-filter: blur(10px);
overflow-y: auto;
}

.modal.active { 
display: flex; 
animation: fadeIn 0.4s ease; 
}

.modal-content {
background: #fff;
padding: 40px;
border-radius: 25px;
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
border: 2px solid var(--gold-color);
box-shadow: 0 0 50px rgba(212, 175, 55, 0.3);
margin: auto;
}

[data-theme="dark"] .modal-content {
background: #1a1a1a;
border-color: var(--primary-color);
}

.modal-close {
position: absolute; 
top: 20px; 
right: 20px;
font-size: 2rem; 
color: var(--text-main); 
cursor: pointer;
background: none; 
border: none; 
transition: 0.3s;
z-index: 10;
}

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

.modal-close:hover { 
color: var(--primary-color); 
transform: rotate(90deg); 
}

.service-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin: 20px 0;
}

.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--gold-color);
margin: 0 auto 25px;
}

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

.skill-tag {
display: inline-block;
background: var(--primary-gradient);
color: #fff;
padding: 8px 20px;
border-radius: 20px;
margin: 5px;
font-size: 0.9rem;
font-weight: 600;
}

/* ==========================================

13. FORMS

========================================== */

.contact-container {
background: var(--glass-bg);
backdrop-filter: var(--backdrop-blur);
border: 1px solid var(--glass-border);
border-radius: var(--border-radius);
padding: 50px;
box-shadow: var(--glass-shadow);
}

.form-control {
width: 100%;
padding: 18px;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 12px;
background: rgba(255,255,255,0.8);
font-size: 1rem;
transition: 0.3s;
margin-bottom: 20px;
font-family: 'Cairo', sans-serif;
}

[data-theme="dark"] .form-control {
background: rgba(0,0,0,0.3);
border-color: rgba(255,255,255,0.1);
color: #fff;
}

.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 15px rgba(45, 143, 77, 0.2);
}

textarea.form-control {
min-height: 150px;
resize: vertical;
}

/* ==========================================

14. FOOTER

========================================== */

.footer {
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(20px);
color: #fff;
padding: 80px 0 30px;
margin-top: 50px;
border-top: 1px solid var(--primary-dark);
}

.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px;
margin-bottom: 40px;
}

.footer-social {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}

.footer-social a {
width: 50px; 
height: 50px;
background: rgba(255,255,255,0.1);
display: inline-flex; 
justify-content: center; 
align-items: center;
border-radius: 50%; 
transition: 0.3s;
font-size: 1.2rem;
border: 1px solid transparent;
}

.footer-social a:hover {
background: var(--primary-color);
border-color: var(--gold-color);
transform: translateY(-5px) rotate(360deg);
}

/* ==========================================

15. FAQ ACCORDION

========================================== */

.faq-item {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 15px;
margin-bottom: 15px;
overflow: hidden;
transition: 0.3s;
}

.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 1.1rem;
}

.faq-question h3 {
margin: 0;
font-size: 1.1rem;
}

.faq-question:hover { 
background: rgba(45, 143, 77, 0.1); 
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
padding: 0 20px;
background: rgba(0,0,0,0.02);
}

.faq-item.active .faq-answer {
max-height: 500px;
padding: 20px;
border-top: 1px solid var(--glass-border);
}

.faq-item.active {
border-color: var(--primary-color);
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.toggle-icon { 
font-size: 1.5rem; 
transition: 0.3s; 
}

.faq-item.active .toggle-icon { 
transform: rotate(45deg); 
color: var(--primary-color); 
}

.faq-controls {
margin-bottom: 40px;
}

.search-box {
width: 100%;
max-width: 600px;
margin: 0 auto 30px;
position: relative;
}

.search-box input {
width: 100%;
padding: 15px 50px 15px 20px;
border-radius: 50px;
border: 2px solid var(--glass-border);
background: rgba(255,255,255,0.9);
font-size: 1.1rem;
font-family: 'Cairo', sans-serif;
transition: 0.3s;
}

[data-theme="dark"] .search-box input {
background: rgba(0,0,0,0.6);
color: #fff;
}

.search-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--primary-color);
font-size: 1.2rem;
}

[dir="rtl"] .search-box i {
right: auto;
left: 20px;
}

.faq-filters {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}

/* ==========================================

16. FLOATING ELEMENTS & ANIMATIONS

========================================== */

.whatsapp-float {
position: fixed; 
bottom: 30px; 
right: 30px;
width: 65px; 
height: 65px;
background: linear-gradient(135deg, #25d366, #128c7e);
color: #fff; 
border-radius: 50%;
display: flex; 
justify-content: center; 
align-items: center;
font-size: 2.2rem;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
z-index: 990; 
transition: 0.3s;
border: 2px solid #fff;
}

[dir="rtl"] .whatsapp-float { 
right: auto; 
left: 30px; 
}

.whatsapp-float:hover { 
transform: scale(1.1) rotate(15deg); 
}

.back-to-top {
position: fixed; 
bottom: 30px; 
left: 30px;
width: 50px; 
height: 50px;
border-radius: 50%;
background: var(--text-main);
color: var(--text-inverse);
border: none;
z-index: 990;
opacity: 0; 
visibility: hidden;
transition: 0.4s;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
}

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

.back-to-top:hover { 
background: var(--gold-color); 
color: #000; 
}

.preloader {
position: fixed; 
inset: 0;
background: #fff;
z-index: 99999;
display: flex; 
justify-content: center; 
align-items: center;
transition: opacity 0.6s ease;
flex-direction: column;
}

[data-theme="dark"] .preloader {
background: #1a1a1a;
}

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

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

.loader-line {
width: 250px; 
height: 6px; 
background: #eee;
border-radius: 10px; 
overflow: hidden; 
position: relative;
margin-top: 20px;
}

.loader-line::before {
content: ''; 
position: absolute; 
top: 0; 
left: 0;
width: 50%; 
height: 100%; 
background: var(--primary-gradient);
animation: loading 1.5s infinite ease-in-out;
}

@keyframes loading { 
0% { left: -50%; } 
100% { left: 100%; } 
}

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

@keyframes fadeIn { 
from { opacity: 0; } 
to { opacity: 1; } 
}

.hover-scale {
transition: transform 0.3s ease;
}

.hover-scale:hover {
transform: scale(1.02);
}

.mt-5 {
margin-top: 50px;
}

.mb-5 {
margin-bottom: 50px;
}

.video-wrapper {
max-width: 900px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.video-wrapper video {
width: 100%;
display: block;
}

/* ==========================================

17. RESPONSIVE DESIGN - MOBILE FIRST

========================================== */

/* ===== TABLETS & SMALL LAPTOPS (992px - 1200px) ===== */
@media (max-width: 1200px) {
.container {
padding: 0 30px;
}

.section {
padding: 80px 0;
}

.hero-title {
font-size: 3rem;
}

.section-title {
font-size: 2.5rem;
}
}

/* ===== TABLETS (768px - 992px) ===== */
@media (max-width: 992px) {
/* Header Responsive */
.header {
width: 100%;
top: 0;
border-radius: 0;
height: 70px;
--header-height: 70px;
}

.nav {
padding: 0 20px;
}

.logo img {
height: 45px;
}

.hamburger {
display: flex;
order: 3;
}

.nav-menu {
position: fixed;
top: 70px;
right: -100%;
width: 100%;
height: calc(100vh - 70px);
background: var(--glass-bg);
backdrop-filter: blur(20px);
flex-direction: column;
justify-content: flex-start;
align-items: center;
transition: 0.5s ease;
border-top: 1px solid var(--glass-border);
gap: 0;
padding-top: 50px;
overflow-y: auto;
}

[dir="rtl"] .nav-menu {
right: auto;
left: -100%;
}

.nav-menu.active {
right: 0;
}

[dir="rtl"] .nav-menu.active {
left: 0;
right: auto;
}

.nav-menu li {
width: 100%;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid var(--glass-border);
}

.nav-link {
font-size: 1.2rem;
display: block;
padding: 10px 20px;
}

.nav-link::after {
display: none;
}

.nav-controls {
order: 2;
gap: 8px;
}

.control-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}

/* Hero Section */
.hero {
min-height: 80vh;
padding-top: 100px;
}

.hero-content {
padding: 40px 30px;
}

.hero-title {
font-size: 2.5rem;
}

.hero-subtitle {
font-size: 1.2rem;
}

/* Grids */
.services-grid,
.features-grid,
.portfolio-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}

/* Section Spacing */
.section {
padding: 60px 0;
}

.section-title {
font-size: 2.2rem;
}

.section-subtitle {
font-size: 1.1rem;
}

/* Portfolio */
.portfolio-item {
height: 280px;
}

/* Footer */
.footer {
padding: 60px 0 30px;
}

.footer-content {
gap: 30px;
}
}

/* ===== MOBILE LANDSCAPE & SMALL TABLETS (576px - 768px) ===== */
@media (max-width: 768px) {
html {
font-size: 16px; /* زودته من 15px علشان النصوص تبقى أكبر */
}

.container {
padding: 0 20px;
}

/* Header */
.header {
height: 70px; /* زودته من 65px */
--header-height: 70px;
}

.nav {
padding: 0 18px; /* زودته من 15px */
}

.logo img {
height: 42px; /* زودته من 40px */
}

.nav-menu {
top: 70px;
height: calc(100vh - 70px);
padding-top: 40px;
background: var(--glass-bg);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
}

/* تحسين Nav Menu على الموبايل */
.nav-menu li {
width: 90%;
margin: 0 auto;
padding: 18px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
font-size: 1.15rem;
padding: 12px 25px;
border-radius: 12px;
display: block;
transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
background: var(--primary-gradient);
color: #fff;
transform: translateX(5px);
}

[dir="rtl"] .nav-link:hover,
[dir="rtl"] .nav-link.active {
transform: translateX(-5px);
}

.control-btn {
width: 42px; /* زودته من 38px */
height: 42px;
font-size: 1rem;
}

/* Hero Section */
.hero {
min-height: 75vh; /* زودته من 70vh */
padding-top: 90px;
}

.hero-content {
padding: 40px 28px; /* زودته من 35px 25px */
margin: 0 18px;
}

.hero-title {
font-size: 2.3rem; /* زودته من 2rem */
margin-bottom: 18px;
}

.hero-subtitle {
font-size: 1.15rem; /* زودته من 1.1rem */
margin-bottom: 35px;
}

.hero-buttons {
gap: 15px;
}

/* Buttons */
.btn {
padding: 14px 32px; /* زودته من 12px 30px */
font-size: 1rem; /* زودته من 0.95rem */
gap: 10px;
}

.btn-request {
font-size: 0.9rem; /* زودته من 0.85rem */
padding: 12px 22px;
}

/* Typography */
.section-title {
font-size: 2rem; /* زودته من 1.8rem */
}

.section-subtitle {
font-size: 1.08rem; /* زودته من 1rem */
margin-bottom: 45px;
}

h1 {
font-size: 2.3rem;
}

h2 {
font-size: 1.8rem;
}

h3 {
font-size: 1.4rem;
}

/* Grids */
.services-grid,
.features-grid,
.portfolio-grid {
grid-template-columns: 1fr;
gap: 22px;
}

/* Cards */
.card {
padding: 30px; /* زودته من 25px */
}

.card-icon {
width: 75px; /* زودته من 70px */
height: 75px;
font-size: 2.2rem;
margin-bottom: 22px;
}

.card h3 {
font-size: 1.5rem; /* زودته من 1.4rem */
margin-bottom: 15px;
}

.card p {
font-size: 1rem;
line-height: 1.7;
}

/* Portfolio */
.portfolio-item {
height: 260px; /* زودته من 250px */
}

.portfolio-overlay h3 {
font-size: 1.6rem;
}

/* Modal */
.modal-content {
padding: 35px 22px; /* زودته من 30px 20px */
max-height: 85vh;
}

.modal-close {
top: 18px;
right: 18px;
font-size: 1.7rem;
}

[dir="rtl"] .modal-close {
right: auto;
left: 18px;
}

.service-gallery {
grid-template-columns: 1fr;
gap: 18px;
}

.profile-img {
width: 160px; /* زودته من 150px */
height: 160px;
}

.skill-tag {
padding: 7px 17px;
font-size: 0.9rem;
}

/* Forms - تحسينات للموبايل */
.contact-container {
padding: 35px 22px; /* زودته من 30px 20px */
max-width: 100%;
}

.form-control {
padding: 16px; /* زودته من 15px */
font-size: 1rem; /* زودته من 0.95rem */
margin-bottom: 18px;
border-radius: 15px;
}

textarea.form-control {
min-height: 140px;
}

/* FAQ */
.faq-question {
padding: 18px; /* زودته من 15px */
font-size: 1.05rem;
}

.faq-question h3 {
font-size: 1.05rem;
line-height: 1.5;
}

.faq-answer {
padding: 0 18px;
font-size: 1rem;
line-height: 1.7;
}

.faq-item.active .faq-answer {
padding: 18px;
}

.search-box input {
padding: 14px 48px 14px 18px;
font-size: 1.05rem;
}

.search-box i {
right: 18px;
font-size: 1.15rem;
}

[dir="rtl"] .search-box i {
left: 18px;
}

.filter-btn,
.faq-filter-btn {
padding: 10px 20px; /* زودته من 8px 18px */
font-size: 0.95rem;
margin: 5px;
}

/* Footer - تحسينات للموبايل */
.footer {
padding: 55px 0 28px;
}

.footer-content > div {
flex: 1 1 100%;
min-width: 100%;
text-align: center;
}

/* Logo في الفوتر يكون في النص على الموبايل */
.footer-content > div:first-child img {
margin: 0 auto 20px;
display: block;
}

.footer-social {
justify-content: center;
margin-top: 20px;
}

.footer-social a {
width: 48px;
height: 48px;
font-size: 1.15rem;
}

/* Floating Buttons */
.whatsapp-float {
width: 58px; /* زودته من 55px */
height: 58px;
font-size: 1.9rem;
bottom: 22px;
right: 22px;
}

[dir="rtl"] .whatsapp-float {
left: 22px;
right: auto;
}

.back-to-top {
width: 48px; /* زودته من 45px */
height: 48px;
font-size: 1.15rem;
bottom: 22px;
left: 22px;
}

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

/* Testimonials */
.testimonial-card {
width: 320px; /* زودته من 300px */
padding: 22px;
font-size: 0.98rem;
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-320px * 5 - 150px)); }
}

/* Section Spacing */
.section {
padding: 55px 0; /* زودته من 50px */
}

/* Video Wrapper */
.video-wrapper {
border-radius: 18px;
}

/* Glass Card Hover Effect */
.glass-card:hover {
transform: translateY(-8px);
}

.card:hover {
transform: translateY(-8px);
}
}

/* ===== MOBILE PORTRAIT (480px - 576px) ===== */
@media (max-width: 576px) {
html {
font-size: 15px; /* زودته من 14px */
}

.container {
padding: 0 18px; /* زودته من 15px */
}

/* Header */
.header {
height: 65px; /* زودته من 60px */
--header-height: 65px;
}

.nav {
padding: 0 15px;
}

.logo img {
height: 38px; /* زودته من 35px */
}

.nav-menu {
top: 65px;
height: calc(100vh - 65px);
}

.nav-menu li {
padding: 16px 0;
}

.nav-link {
font-size: 1.1rem;
padding: 12px 20px;
}

.control-btn {
width: 38px; /* زودته من 35px */
height: 38px;
font-size: 0.95rem;
}

/* Hero Section */
.hero {
min-height: 65vh; /* زودته من 60vh */
padding-top: 80px;
}

.hero-content {
padding: 30px 22px; /* زودته من 25px 20px */
border-radius: 22px;
}

.hero-title {
font-size: 1.9rem; /* زودته من 1.7rem */
line-height: 1.3;
}

.hero-subtitle {
font-size: 1.08rem; /* زودته من 1rem */
line-height: 1.6;
}

.hero-buttons {
flex-direction: column;
width: 100%;
gap: 12px;
}

.hero-buttons .btn {
width: 100%;
justify-content: center;
}

/* Buttons */
.btn {
padding: 12px 28px; /* زودته من 10px 25px */
font-size: 0.95rem;
gap: 8px;
}

.btn-request {
font-size: 0.88rem;
padding: 10px 18px;
}

/* Typography */
.section-title {
font-size: 1.7rem; /* زودته من 1.5rem */
margin-bottom: 18px;
}

.section-subtitle {
font-size: 1.02rem; /* زودته من 0.95rem */
margin-bottom: 35px;
}

/* Cards */
.card {
padding: 25px; /* زودته من 20px */
}

.card-icon {
width: 68px; /* زودته من 60px */
height: 68px;
font-size: 2rem;
margin-bottom: 18px;
}

.card h3 {
font-size: 1.3rem; /* زودته من 1.2rem */
}

/* Card Buttons Container */
.card > div[style*="display: flex"] {
flex-direction: column;
gap: 10px !important;
}

.card > div[style*="display: flex"] button {
flex: none !important;
width: 100%;
font-size: 0.9rem;
padding: 11px 20px;
}

/* Portfolio */
.portfolio-item {
height: 240px; /* زودته من 220px */
}

.portfolio-overlay h3 {
font-size: 1.4rem;
}

.portfolio-overlay p {
font-size: 0.95rem;
}

/* Modal */
.modal {
padding: 18px;
}

.modal-content {
padding: 28px 18px; /* زودته من 25px 15px */
border-radius: 22px;
}

.modal-close {
top: 12px;
right: 12px;
font-size: 1.5rem;
}

[dir="rtl"] .modal-close {
left: 12px;
right: auto;
}

.modal-content h2 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.modal-content p {
font-size: 1rem;
line-height: 1.7;
}

.profile-img {
width: 140px; /* زودته من 120px */
height: 140px;
margin-bottom: 22px;
}

.skill-tag {
padding: 6px 14px;
font-size: 0.88rem;
margin: 4px;
}

/* Forms */
.contact-container {
padding: 28px 18px; /* زودته من 25px 15px */
}

.form-control {
padding: 14px; /* زودته من 12px */
font-size: 0.98rem;
border-radius: 14px;
}

textarea.form-control {
min-height: 130px;
}

/* FAQ */
.faq-controls {
padding: 25px 18px;
}

.search-box {
max-width: 100%;
}

.search-box input {
padding: 12px 42px 12px 15px;
font-size: 1rem;
}

.faq-question {
padding: 15px;
font-size: 1rem;
flex-wrap: wrap;
gap: 12px;
}

.faq-question h3 {
font-size: 1rem;
flex: 1;
text-align: right;
line-height: 1.5;
}

[dir="ltr"] .faq-question h3 {
text-align: left;
}

.toggle-icon {
font-size: 1.4rem;
}

.faq-answer {
font-size: 0.95rem;
line-height: 1.7;
}

.faq-item.active .faq-answer {
padding: 15px;
}

.filter-btn,
.faq-filter-btn {
padding: 8px 16px;
font-size: 0.9rem;
}

/* Footer */
.footer {
padding: 45px 0 25px;
font-size: 0.95rem;
}

.footer-social a {
width: 46px;
height: 46px;
font-size: 1.1rem;
}

/* Floating Buttons */
.whatsapp-float {
width: 54px; /* زودته من 50px */
height: 54px;
font-size: 1.75rem;
bottom: 18px;
right: 18px;
}

[dir="rtl"] .whatsapp-float {
left: 18px;
}

.back-to-top {
width: 44px; /* زودته من 40px */
height: 44px;
font-size: 1.08rem;
bottom: 18px;
left: 18px;
}

[dir="rtl"] .back-to-top {
right: 18px;
}

/* Testimonials */
.testimonial-card {
width: 290px; /* زودته من 280px */
padding: 20px;
font-size: 0.95rem;
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-290px * 5 - 150px)); }
}

/* Preloader */
.loader-line {
width: 220px;
height: 5px;
}

/* Section Spacing */
.section {
padding: 45px 0; /* زودته من 40px */
}

/* Glass Card Hover Effect - Reduce on mobile */
.glass-card:hover {
transform: translateY(-6px);
}

.card:hover {
transform: translateY(-6px);
}
}

/* ===== SMALL MOBILE (320px - 480px) ===== */
@media (max-width: 480px) {
html {
font-size: 14px; /* زودته من 13px */
}

.hero-title {
font-size: 1.7rem; /* زودته من 1.5rem */
}

.hero-subtitle {
font-size: 1rem;
}

.section-title {
font-size: 1.5rem; /* زودته من 1.3rem */
}

.card-icon {
width: 62px; /* زودته من 55px */
height: 62px;
font-size: 1.8rem;
}

.portfolio-item {
height: 220px; /* زودته من 200px */
}

.modal-content {
padding: 25px 15px;
}

.btn {
font-size: 0.9rem;
padding: 11px 22px;
}

.faq-question {
font-size: 0.95rem;
}

.testimonial-card {
width: 270px; /* زودته من 260px */
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-270px * 5 - 150px)); }
}
}

/* ===== VERY SMALL MOBILE (< 360px) ===== */
@media (max-width: 360px) {
.services-grid,
.features-grid,
.portfolio-grid {
grid-template-columns: 1fr;
gap: 18px;
}

.hero-content {
padding: 25px 18px;
}

.card {
padding: 22px;
}

.modal-content {
padding: 22px 12px;
}

.control-btn {
width: 35px;
height: 35px;
font-size: 0.9rem;
}

.whatsapp-float,
.back-to-top {
width: 48px;
height: 48px;
}

.testimonial-card {
width: 250px;
}

@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 5 - 150px)); }
}
}

/* ==========================================

18. RTL SPECIFIC ADJUSTMENTS

========================================== */

[dir="rtl"] .nav-link::after {
right: 0;
left: auto;
}

[dir="rtl"] .faq-question {
text-align: right;
}

[dir="rtl"] .hero-buttons {
direction: rtl;
}

[dir="rtl"] .nav-controls {
flex-direction: row-reverse;
}

/* ==========================================

19. PRINT STYLES

========================================== */

@media print {
.header,
.whatsapp-float,
.back-to-top,
.preloader,
.control-btn,
.hamburger {
display: none !important;
}

.hero {
min-height: auto;
padding: 20px 0;
}

.section {
padding: 30px 0;
page-break-inside: avoid;
}

.modal {
position: relative;
background: transparent;
padding: 0;
}

.modal-content {
box-shadow: none;
border: 1px solid #ccc;
page-break-inside: avoid;
}
}

/* ==========================================

END OF STYLESHEET

========================================== */