/* ====== خطوط ====== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Cairo:wght@400;700&display=swap');
body { font-family: 'Cairo', sans-serif; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { font-family: 'Poppins', sans-serif; }

/* ====== Hero ====== */
.hero {
  min-height: 90vh;
  background: url('../images/hero-bg.jpg') center/cover no-repeat fixed;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.hero .overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); }
.hero h1, .hero p, .hero a { position: relative; z-index:2; }

/* ====== Buttons ====== */
.btn-gradient { background: linear-gradient(45deg,#0d6efd,#6610f2); color:#fff; border:none; transition:0.3s; }
.btn-gradient:hover { opacity:0.85; }

/* ====== Hover Effects ====== */
.hover-scale:hover { transform: translateY(-7px) scale(1.02); transition: all 0.3s ease-in-out; }

/* ====== Cards ====== */
.project-img { height:250px; overflow:hidden; }
.project-img img { width:100%; height:100%; object-fit:cover; }
.service-card, .project-card, .blog-card { display:flex; flex-direction:column; height:100%; }

/* ====== Steps ====== */
.step { transition: all 0.3s ease; cursor: default; padding:20px 30px; background:#fff; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,0.1); }
.step:hover { transform: translateY(-5px); }

/* ====== Gradient CTA ====== */
.bg-gradient { background: linear-gradient(135deg, #0d6efd, #6610f2); }

/* ====== Text Colors ====== */
.text-muted { color:#6c757d; }

/* ====== Equal height columns ====== */
.row > [class*="col-"] { display:flex; }

/* ====== Line Clamp للنصوص ====== */
.line-clamp { display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* ====== لماذا نقطة تطوير مودرن ====== */
.why-modern h2 { font-weight:600; margin-bottom:50px; }
.feature-modern { 
  background:#fff; 
  border-radius:20px; 
  padding:30px 20px; 
  box-shadow:0 5px 20px rgba(0,0,0,0.1); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.feature-modern:hover { transform: translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,0.2); }
.icon-circle {
  width:70px; height:70px; line-height:70px; margin:0 auto 15px;
  background: linear-gradient(135deg,#0d6efd,#6610f2);
  border-radius:50%; font-size:32px; color:#fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-modern:hover .icon-circle { transform: scale(1.2) rotate(10deg); }
.feature-modern h5 { margin-bottom:10px; font-weight:600; }
.feature-modern p { font-size:0.9rem; color:#6c757d; flex-grow:1; }

/* ====== Responsive ====== */
@media (max-width:768px) {
  .feature-modern { padding:20px 15px; }
  .icon-circle { width:60px; height:60px; line-height:60px; font-size:28px; }
  .project-img { height:200px; }
  .workflow .step { margin-bottom:15px; }
}


/* ===== Blog Post Typography ===== */
.post-content{
    font-family: 'Cairo', sans-serif;
    font-size: 1.05rem;
    line-height: 2.1;
    color: #1f2937;
    direction: rtl;
}

/* الفقرات */
.post-content p{
    margin-bottom: 1.4rem;
}

/* العناوين داخل المقال */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4{
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    margin: 2.5rem 0 1.2rem;
    line-height: 1.4;
    color: #111827;
}

/* العنوان الرئيسي داخل النص */
.post-content h1{ font-size: 2rem; }
.post-content h2{ font-size: 1.6rem; }
.post-content h3{ font-size: 1.3rem; }

/* القوائم */
.post-content ul,
.post-content ol{
    padding-right: 1.5rem;
    margin: 1.5rem 0;
}

.post-content li{
    margin-bottom: .6rem;
}

/* الاقتباس */
.post-content blockquote{
    background: #f1f5f9;
    border-right: 5px solid #2563eb;
    padding: 1.2rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
}

/* الصور داخل المقال */
.post-content img{
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem auto;
    display: block;
}

/* الجداول */
.post-content table{
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.post-content table th,
.post-content table td{
    border: 1px solid #e5e7eb;
    padding: 12px;
    text-align: right;
}

.post-content table th{
    background: #f8fafc;
    font-weight: 700;
}

/* الروابط */
.post-content a{
    color: #2563eb;
    text-decoration: underline;
}
.post-content a:hover{
    color: #1e40af;
}