*{margin:0;padding:0;box-sizing:border-box;font-family:"Cairo",sans-serif;}
body{direction:rtl;background:#f4f6f9;color:#444;scroll-behavior:smooth;}
a{text-decoration:none;color:inherit;}

 /* ===== NAVBAR ===== */
 .navbar {
    background: linear-gradient(90deg, #1f2c9c, #2f80ed);
    padding: 15px 25px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }

  .navbar-brand {
    font-weight: 700;
    color: #ffffff !important;
    font-size: 1.8rem;
    letter-spacing: 1px;
  }

  .nav-link {
    font-weight: 500;
    color: #f1f5f9 !important;
    margin: 0px;
    transition: 0.3s ease;
  }

  .nav-link:hover {
    color: #caf0f8 !important;
  }


  .btnn {
    background-color: rgb(241, 240, 243);
    color: #3712bd;
    border: 1px solid rgb(67, 67, 248);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 5px;
    transition: 0.3s ease;
    text-decoration: none;
    font-weight: 500;

  }
  .btnn:hover {
    background: #3f22e0;
    transform: scale(1.05);
    color: white;
  }

/* Hero */
.hero{background:linear-gradient(to left,#0d6efd,#0b5ed7);color:#fff;text-align:center;padding:140px 20px;}
.hero h1{font-size:50px;margin-bottom:25px;opacity:0;transform:translateY(20px);transition:1s;}
.hero p{font-size:22px;max-width:900px;margin:auto;opacity:0;transform:translateY(20px);transition:1s;}
.btn-glow{margin-top:30px;background:#ffc107;color:#fff;padding:14px 40px;border:none;border-radius:10px;font-weight:bold;cursor:pointer;font-size:17px;box-shadow:0 0 25px rgba(255,193,7,0.6);transition:.5s;}
.btn-glow:hover{box-shadow:0 0 40px rgba(255,193,7,1);transform:scale(1.05);}

/* Articles Grid */
.articles{width:90%;margin:auto;padding:80px 0;}
.articles h2{color:#0d6efd;font-size:36px;margin-bottom:50px;text-align:center;opacity:0;transform:translateY(20px);transition:1s;}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:40px;}
.article-card{background:#fff;padding:35px;border-radius:25px;box-shadow:0 12px 30px rgba(0,0,0,0.12);opacity:0;transform:translateY(30px);transition:1s;position:relative;overflow:hidden;}
.article-card img{width:100%;border-radius:20px;margin-bottom:25px;}
.article-card h3{color:#0d6efd;font-size:24px;margin-bottom:15px;}
.article-card p{font-size:16px;line-height:2;color:#555;margin-bottom:20px;}
.article-card .btn-read{background:#0d6efd;color:#fff;padding:12px 28px;border:none;border-radius:10px;font-weight:bold;cursor:pointer;transition:.3s;}
.article-card .btn-read:hover{background:#0b5ed7;transform:scale(1.05);}

/* Overlay Hover effect */
.article-card .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(13,110,253,0.9);
  color:#fff;
  padding:25px;
  border-radius:25px;
  opacity:0;
  transition:opacity 0.5s ease, transform 0.5s ease;
  transform:translateY(20px);
  overflow:auto;
}
.article-card:hover .overlay{
  opacity:1;
  transform:translateY(0);
}
.article-card .overlay h3{color:#ffc107;margin-bottom:15px;}
.article-card .overlay p{font-size:16px;line-height:1.8;}
.article-card .overlay .btn-read{background:#ffc107;color:#0d6efd;margin-top:15px;}
.article-card .overlay .btn-read:hover{background:#e0a800;transform:scale(1.05);}

/* Categories */
.categories{width:90%;margin:auto;padding:80px 0;text-align:center;}
.categories h2{color:#0d6efd;font-size:36px;margin-bottom:50px;opacity:0;transform:translateY(20px);transition:1s;}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;}
.category-card{background:#fff;padding:25px;border-radius:20px;box-shadow:0 10px 25px rgba(0,0,0,0.10);opacity:0;transform:translateY(20px);transition:1s;}
.category-card h3{color:#0d6efd;font-size:22px;margin-bottom:15px;}
.category-card p{font-size:15px;color:#555;line-height:1.8;}

/* Popular Articles */
.popular{width:90%;margin:auto;padding:80px 0;text-align:center;background:#e6f0ff;border-radius:25px;}
.popular h2{color:#0d6efd;font-size:36px;margin-bottom:50px;opacity:0;transform:translateY(20px);transition:1s;}
.popular-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:35px;}
.popular-card{background:#fff;padding:30px;border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,0.12);opacity:0;transform:translateY(20px);transition:1s;}
.popular-card h3{color:#0d6efd;font-size:24px;margin-bottom:15px;}
.popular-card p{font-size:16px;line-height:2;color:#555;}

/* Subscribe Section */
.subscribe{width:90%;margin:auto;padding:100px 20px;text-align:center;background:#0d6efd;border-radius:25px;color:#fff;}
.subscribe h2{font-size:36px;margin-bottom:25px;}
.subscribe p{font-size:18px;line-height:1.8;margin-bottom:25px;}
.subscribe input[type="email"]{padding:15px 20px;border:none;border-radius:8px;width:300px;max-width:90%;margin-right:10px;}
.subscribe button{padding:15px 25px;background:#ffc107;color:#fff;border:none;border-radius:8px;font-weight:bold;cursor:pointer;transition:.3s;}
.subscribe button:hover{background:#e0a800;transform:scale(1.05);}

/* Responsive */
@media(max-width:768px){
  .hero h1{font-size:36px;}
  .hero p{font-size:18px;}
  .articles-grid{grid-template-columns:1fr;}
  .category-grid{grid-template-columns:1fr;}
  .popular-grid{grid-template-columns:1fr;}
}