.academic-hero {
     /* background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://source.unsplash.com/random/1600x600?about'); */

     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../../assets/img/all-images/academic/academic.jpg');


     background-size: cover;
     background-position: center;
     color: white;
     text-align: center;
     padding: 50px 0;
     margin-bottom: 60px;

 }

 .academic-hero h1 {
     font-size: 48px;
     margin-bottom: 20px;
     /* font-family: var(--font-heading); */
     font-family: "DM Sans", sans-serif;
 }

 .academic-hero p {
     font-size: 20px;
     max-width: 700px;
     margin: 0 auto;
     opacity: 0.9;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 /* Course Card Design  */
 .academic .course-card {
     border-radius: 16px;
     overflow: hidden;
     border: none;
     background: #fff;
     transition: 0.4s all ease;
 }

 .academic .course-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
 }

 .academic .course-image {
     position: relative;
 }

 .academic .course-image img {
     height: 200px;
     width: 100%;
     object-fit: cover;
 }

 .academic .time-badge {
     position: absolute;
     top: 12px;
     left: 12px;
     background: var(--primary-color);
     color: #fff;
     font-size: 12px;
     padding: 4px 10px;
     border-radius: 20px;
 }
 .academic .card-title{
    font-size: 20px;
    font-weight: 700;
 }

 .academic .heart-icon {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 32px;
     height: 32px;
     background: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ff5a5f;
     font-size: 17px;
 }

 .academic .course-meta {
     font-size: 13px;
     color: #6c757d;
 }

 .academic .rating {
     color: #f4c150;
     font-size: 14px;
 }

 .academic .price {
     color: #ff6b00;
     font-weight: 700;
 }

 .academic .enroll-btn {
     color: var(--primary-color);
 }

 .academic .enroll-btn:hover {
     color: var(--primary-hover-color);
 }