:root { --emerald:#063d35; --emerald-dark:#022d28; --golden:#c79b4b; --ivory:#faf8f2; }
body {
  background-color: var(--ivory);
  background-image: radial-gradient(rgba(199,155,75,.075) 1px, transparent 1px);
  background-size: 17px 17px;
  overflow-x:hidden;
}
.site-header { box-shadow: 0 2px 18px rgba(3,48,41,.09); background:#fff; position:relative; z-index:3; }
.topline { background:linear-gradient(100deg,#063d35,#082e29); border-top:4px solid rgba(199,155,75,.26); }
.topline .container { height:42px; }
.top-date { display:flex; align-items:center; gap:9px; font:13px Cairo, sans-serif; color:#e8efe9; }
.top-date b { color:#edc978; font-weight:700; }
.top-date i { color:#c79b4b; font-style:normal; }
.social { gap:22px; }
.social a { color:#f1ddaa; font-weight:700; }
.masthead { height:84px; }
.masthead .brand { gap:22px; }
.masthead .brand > span:last-child { min-width:120px; padding-right:18px; border-right:1px solid #e7dfce; }
.masthead .brand b { color:#073d35; font-size:18px; }
.masthead .brand small { color:#a17a3e; }
.masthead nav a { font-weight:600; padding:30px 0 25px; position:relative; }
.masthead nav a:hover::after { content:""; position:absolute; bottom:13px; right:0; left:0; height:2px; background:var(--golden); }
.hero {
  min-height: 410px;
  background-position:center;
  position:relative;
  border-bottom: 5px solid rgba(199,155,75,.55);
  box-shadow: inset 0 -70px 90px rgba(0,0,0,.22);
}
.hero::before,.hero::after {
  content:""; position:absolute; inset:14px; border:1px solid rgba(228,191,112,.27); pointer-events:none;
}
.hero::after { inset:28px; border-color:rgba(255,255,255,.12); }
.hero-content { position:relative; z-index:1; }
.hero-logo { width:min(610px,82vw); max-height:200px; }
.quick-search {
  border-radius:30px; padding:6px; max-width:590px;
  box-shadow:0 9px 25px rgba(0,0,0,.25);
}
.quick-search input { border-radius:25px; background:transparent; }
.quick-search button { border-radius:24px; background:linear-gradient(135deg,#c79b4b,#a97930); padding:11px 25px; }
.newsbar { background:#fffdf8; box-shadow:0 4px 15px rgba(2,45,40,.05); }
.section { padding:62px 0; }
.section-head { border-bottom:1px solid #e5e2d8; padding-bottom:13px; }
.section-head h2,.category-pane h2 { color:var(--emerald-dark); }
.section-head h2::after,.category-pane h2::after {
  content:"✦"; display:block; color:var(--golden); font:15px Amiri; margin-top:3px;
}
.stats-grid { gap:22px; }
.stat-card {
  background:rgba(255,255,255,.94); border:0; border-radius:18px; padding:22px;
  box-shadow:0 10px 28px rgba(8,54,46,.1); position:relative; overflow:hidden;
}
.stat-card::after { content:""; position:absolute; width:110px; height:110px; border-radius:50%; border:18px solid rgba(199,155,75,.06); left:-42px; bottom:-52px; }
.stat-card i { width:48px; height:48px; font-size:23px; color:var(--emerald); background:#f5efe3; }
.soft-section { background:rgba(255,255,255,.72); border-top:1px solid #eee9dc; border-bottom:1px solid #eee9dc; }
.material-card { background:#fffdfa; }
.card-image { background:linear-gradient(135deg,#e9e2d1,#b9995e); }
.cards-slider { gap:20px; }
.category-pane {
  border-radius:20px; overflow:hidden; box-shadow:0 18px 35px rgba(3,45,38,.2);
  background:linear-gradient(145deg,#075047,#022f2a);
}
.category-pane>a:hover { color:#f5cf85; padding-right:7px; }
.book-area { background:linear-gradient(115deg,#063d35,#092f29); }
.site-footer { background:linear-gradient(135deg,#052f2a,#011f1c); }
@media (max-width:800px) {
  .hero { min-height:380px; }
  .hero::before { inset:8px; } .hero::after { display:none; }
  .stats-grid { gap:13px; }
  .top-date b { display:none; }
  .masthead .brand { gap:10px; }
  .masthead .brand > span:last-child { padding-right:10px; }
}