.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.courses-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-items: center;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .courses-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tutors-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-items: center;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .tutors-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tutor-card {
  background: white;
  border: 2px solid #5e0190;
  border-radius: 8px;
  padding: 20px;
  width: 220px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tutor-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.tutor-card h3 {
  margin: 12px 0 4px;
}

.tutor-card p.tutor-subject {
  color: #777;
}

.tutor-card p.tutor-quote {
  font-size: 14px;
  font-style: italic;
}

.tutor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 8px 4px #cbb26a, 0 10px 20px rgba(203, 178, 106, 0.65);
  border-color: #cbb26a;
}

/* Button style */
.tutor-section-btn {
  background-color: #5e0190;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: inline-block;
  text-align: center;
  max-width: 90%;
  width: auto;
  margin: 0 auto;
  word-wrap: break-word;
  line-height: 1.4;
}

@media (max-width: 400px) {
  .tutor-section-btn {
    font-size: 15px;
    padding: 10px 16px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .tutor-section-btn:hover {
    background-color: #cbb26a;
    color: black;
  }
}

.tutor-section-btn:active {
  transform: scale(0.98);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  justify-items: center;
  margin-top: 40px;
}

.blog-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #5e0190;
  max-width: 300px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card {
  padding: 16px;
  max-width: 280px;
}

.blog-card img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 16px;
}

.blog-card img {
  border-radius: 6px;
  margin-bottom: 12px;
  height: auto;
  max-height: 160px;
  object-fit: cover;
}

.blog-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #333;
  min-height: 40px; /* Helps alignment when titles wrap */
}

.blog-card p {
  font-size: 14px;
  color: #555;
  max-height: 4.5em; /* More scalable than 60px */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* Safe fallback */
  text-overflow: ellipsis;
}

.blog-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;

  display: box; /* legacy */
  box-orient: vertical;
  line-clamp: 3;

  font-size: 14px;
  color: #555;
  max-height: 4.5em;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  border-color: #cbb26a; /* gold border on hover */
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Featured Courses section */
.courses-section{ background:#f8f8f8; padding:60px 20px; }
.courses-section .section-title{ text-align:center; color:#5e0190; margin:0 0 24px; }

/* 4 / 2 / 1 column responsive grid */
.courses-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:30px;
  justify-items:center;
}
@media (max-width: 1024px){
  .courses-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .courses-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.course-card{
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  padding:20px;
  width:100%;
  max-width:260px;
  text-align:left;
}
.course-thumb{
  width:100%;
  aspect-ratio:16/9;
  border-radius:6px;
  overflow:hidden;
  background:#eee;
  display:flex; align-items:center; justify-content:center;
}
.course-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.course-thumb svg{ width:85%; height:auto; display:block; }

.course-title{ margin:16px 0 6px; font-size:18px; line-height:1.3; }
.course-meta{ font-size:14px; color:#777; margin:0 0 6px; }
.course-price{ color:#5e0190; font-weight:700; margin:0 0 8px; }
.course-link{ color:#cbb26a; font-weight:700; text-decoration:none; }
.course-link:hover{ text-decoration:underline; }

.thumb-placeholder{ width:100%; height:100%; background:#eee; border-radius:6px; }

/* Subtle hover + tighter layout polish */
.course-card{
  display:flex;               /* lets us pin the link to bottom */
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.course-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.course-link{ margin-top:auto; }   /* pushes the link to the bottom for even card heights */