/* ===== استيراد الخط ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* ===== إعدادات أساسية ===== */
* { 
    
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family:'Cairo',sans-serif;
}
body { 
  color:#222; 
  background:#f5f7fa; 
  overflow-x:hidden; /* منع التمرير الأفقي */
  position:relative; 
}

/* ===== الخلفية الزجاجية المتحركة ===== */
body::before {
  content:"";
  position:fixed; 
  top:0; left:0; 
  width:200%; height:200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(33,150,243,0.2), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(100,181,246,0.2), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(66,165,245,0.15), transparent 70%);
  background-size: 400% 400%;
  animation: moveBg 20s ease infinite;
  z-index:-1;
}
@keyframes moveBg {
  0% { transform:translate(0,0); }
  50% { transform:translate(-50px,-50px); }
  100% { transform:translate(0,0); }
}

/* ===== الهيدر ===== */
header {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  background: rgba(255,255,255,0.95); 
  padding:15px 20px;
  position:sticky; top:0; z-index:1000; 
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
header .logo { font-size:20px; font-weight:bold; color:#0d47a1; text-decoration:none; }
.menu-toggle { display:none; font-size:24px; cursor:pointer; }
.navigation { display:flex; align-items:center; gap:10px; }
.navigation a { color:#333; text-decoration:none; font-weight:500; transition:color 0.3s; }
.navigation a:hover { color:#0d47a1; }
.social-icons a { color:#0d47a1; margin-left:10px; font-size:20px; transition:color 0.3s; }
.social-icons a:hover { color:#1565c0; }

/* ===== السلايدر ===== */
.hero { position:relative; height:60vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.slides { position:absolute; top:0; left:0; width:100%; height:100%; }
.slide { position:absolute; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 1.5s ease-in-out; }
.slide.active { opacity:1; }
.hero-text {
  position:relative; text-align:center; color:white; z-index:2;
  background: rgba(0,0,0,0.3); padding:15px 20px; border-radius:10px;
  animation: fadeInUp 1.5s ease forwards; opacity:0;
}
.hero-text h2 { font-size:1.6rem; margin-bottom:10px; }
.hero-text p { font-size:1rem; margin-bottom:15px; }
.btn { background:white; color:#00bcd4; padding:8px 20px; border-radius:25px; font-weight:600; text-decoration:none; transition:0.3s; }
.btn:hover { background:#004d61; color:white; }
@keyframes fadeInUp{0%{opacity:0; transform:translateY(30px);}100%{opacity:1; transform:translateY(0);}}

/* ===== Cards ===== */
.cards .content, .projects .content {
  display:grid; 
  gap:15px; 
  padding:0 10px; 
  box-sizing:border-box;
}
.cards .content { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:rgba(255,255,255,0.85); border-radius:12px; padding:15px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,0.1); transition:transform 0.3s; opacity:0; transform:translateY(30px); }
.card.visible { opacity:1; transform:translateY(0); }
.card:hover { transform:translateY(-5px); }
.card .icon { font-size:28px; color:#0288d1; margin-bottom:10px; }
.card .info h3 { color:#013048; font-size:1rem; margin-bottom:8px; }

.projects .content { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.project-card { background:rgba(255,255,255,0.85); border-radius:8px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:transform 0.3s, box-shadow 0.3s; opacity:0; transform:translateY(30px); }
.project-card.visible { opacity:1; transform:translateY(0); }
.project-card:hover { transform:translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.15); }
.project-card img { width:100%; height:auto; display:block; }

/* ===== Rating Section ===== */
.rating-section { text-align:center; padding:15px; background:#f9f9f9; border-radius:10px; margin-top:15px; }
.stars i { font-size:22px; color:#ccc; cursor:pointer; margin:0 3px; transition:color 0.3s; }
.stars i.active, .stars i.fa-solid { color:#ffcc00; }

.stats-rating { display:flex; flex-direction:column; gap:20px; justify-content:center; align-items:center; margin:20px auto; max-width:95%; background:#fff; border-radius:12px; padding:20px; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.visitor-box, .rating-box { flex:1 1 100%; text-align:center; }
.visitor-box h3, .rating-box h3 { color:#2c3e50; margin-bottom:5px; }
.visitor-box p { font-size:28px; color:#27ae60; font-weight:bold; }
#comment { width:100%; margin-top:10px; border-radius:8px; padding:8px; border:1px solid #ddd; font-size:14px; }
#submit-rating { margin-top:10px; background:#27ae60; color:#fff; border:none; padding:10px 15px; border-radius:8px; cursor:pointer; width:100%; }
#submit-rating:hover { background:#219150; }

.rating-stats { text-align:right; margin-top:10px; border-top:1px solid #eee; padding-top:10px; }
.rating-stats li { font-size:14px; margin:3px 0; color:#555; }
.rating-stats span { font-weight:bold; color:#27ae60; float:left; }

.comments-list { margin-top:15px; text-align:right; border-top:1px solid #eee; padding-top:10px; }
.comment-item { background:#f9f9f9; margin-bottom:8px; padding:6px 10px; border-radius:8px; font-size:13px; color:#333; }

/* ===== Footer ===== */
/* ===== Footer ===== */
.footer {
  width: 100%;
  background: #1c1c1c;
  color: #fff;
  text-align: center;
  padding: 15px 10px;
  font-size: 13px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
  margin-top: 40px; /* حتى يكون بعد كل المحتوى */
  position: relative; /* لإزالته من الوضع الثابت */
  bottom: 0;
}
.footer a {
  color: #25d366;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}
.footer a:hover {
  color: #1ebc57;
}


/* ===== Fixed Contact (اتصال + واتساب) ===== */
.fixed-contact {
  position:fixed; bottom:20px; left:20px; display:flex; flex-direction:column; gap:12px; z-index:1000;
}
.fixed-contact a { width:50px; height:50px; font-size:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; transition:transform 0.3s, background 0.3s; }
.fixed-contact .call-btn { background-color:#27ae60; }
.fixed-contact .call-btn:hover { background-color:#1e874b; transform:scale(1.1); }
.fixed-contact .whatsapp-btn { background-color:#25d366; }
.fixed-contact .whatsapp-btn:hover { background-color:#1ebc57; transform:scale(1.1); }

/* ===== Media Queries ===== */
@media(max-width:768px){
  .navigation { display:none; flex-direction:column; background:rgba(255,255,255,0.95); position:absolute; top:60px; right:0; width:200px; padding:10px; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
  .navigation.active { display:flex; }
  .menu-toggle { display:block; }

  .fixed-contact { bottom:15px; left:10px; flex-direction:column; gap:10px; }
  .fixed-contact a { width:50px; height:50px; font-size:24px; }
}

@media(max-width:480px){
  .hero-text h2 { font-size:1.3rem; }
  .hero-text p { font-size:0.9rem; }
  .btn { padding:6px 15px; font-size:14px; }
  .card .icon { font-size:24px; }
  .card .info h3 { font-size:0.95rem; }
  .visitor-box p { font-size:24px; }
  .rating-stats li { font-size:12px; }
}
/* ===== قسم الأعمال الميدانية (Field Work) ===== */
/* ===== قسم الأعمال الميدانية ===== */
#field-work {
  text-align: center;
  padding: 30px 15px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  margin: 30px auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#field-work .title {
  color: #0d47a1;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

#field-work .description {
  color: #555;
  margin-bottom: 25px;
  font-size: 0.95rem;
}

/* الشبكة */
#field-work .content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: start;
}

/* الكروت */
#field-work .project-card,
#field-work .video-card {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  background: #fff;
  padding: 10px;
}

#field-work .project-card:hover,
#field-work .video-card:hover {
  transform: scale(1.03);
}

/* الصور */
#field-work .project-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* 🎥 الفيديو */
#field-work .video-card video {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain; /* ✅ يعرض الفيديو كامل بدون قصّ */
  max-height: 180px;   /* ✅ حجم صغير مناسب */
  background-color: #000; /* إطار أنيق للفيديو */
  display: block;
  margin: 0 auto;
}

/* على الجوال */
@media (max-width: 480px) {
  #field-work .content {
    grid-template-columns: 1fr;
  }

  #field-work .video-card video {
    max-width: 90%;
    max-height: 160px;
  }
}