:root {
  --primary-color: #d32f2f;   
  --accent-color: #d32f2f;    
  --Background: #fff8f1;
  --card-bg: #fdfdfd;
  --text: #212121;
}

body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--Background);
  margin: 0;
  padding: 0;
  direction: rtl;
  color: var(--text);
}

nav { text-align: center; padding: 20px; }
nav a { color: var(--primary-color); font-weight: bold; text-decoration: none; position: relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--primary-color); transition:width 0.3s; }
nav a:hover::after { width:100%; }

h1 { text-align:center; color:var(--primary-color); font-size:2rem; margin-top:10px; }
p.intro { text-align:center; max-width:600px; margin:10px auto 30px; line-height:1.8; }

.courses { display:flex; flex-wrap:wrap; justify-content:center; padding:0 20px 40px; }
.course-container { margin:20px; }

.card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.card:hover { transform: translateY(-8px); }

.title-line { font-size:1.1rem; font-weight:bold; margin-bottom:12px; color:var(--primary-color); }
.card span { display:inline-block; margin:4px 0; }

.btn {
  background: var(--primary-color);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  transition:all 0.3s ease;
  display:inline-block;
  padding: 10px;
  margin-right: 210px;
}
.btn:hover { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background:#fff8f1; color:var(--primary-color); }

/* ریسپانسیو */
@media (max-width:600px) {
    *{
        margin: 0;
        padding: 0;
    }
  h1 { font-size:1.6rem; }
  p.intro { font-size:14px; padding:0 10px; }
  .courses { flex-direction:column; align-items:center; }
  .card { width:90%; font-size:0.9em; }
}