.course-card-container {
     display: flex;
     gap: 40px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .course-cards {
     background: #fff;
     width: 400px;
     /* BIGGER CARD */
     border-radius: 18px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
     overflow: hidden;
     position: relative;
     transition: transform 0.35s ease, box-shadow 0.35s ease;
 }

 .course-cards:hover {
     transform: translateY(-10px);
     box-shadow: 0 28px 60px rgba(0, 0, 0, 0.16);
 }

 .course-cards img {
     width: 100%;
     height: 250px;
     /* BIGGER IMAGE */
     object-fit: cover;
     display: block;
 }

 /* GRADIENT BUTTON */
 .badge {
     position: absolute;
     top: 224px;
     right: 24px;
     background: transparent linear-gradient(90deg, #FDBC11 0%, #D91F3D 100%) 0% 0% no-repeat padding-box;
     color: #fff;
     padding: 10px 22px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 700;
     letter-spacing: 0.4px;
 }

 .course-card-content {
     padding: 32px;
 }

 .course-card-content h3 {
     margin: 0 0 16px;
     font-size: 24px;
     color: #1b1b1b;
     line-height: 1.35;
 }

 .course-card-content p {
     margin: 0 0 24px;
     font-size: 16px;
     color: #555;
     line-height: 1.7;
 }

 .course-card-read-more {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: #1a4ed8;
     font-weight: 700;
     text-decoration: none;
     font-size: 16px;
 }

 .course-card-read-more span {
     display: inline-flex;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     border: 2px solid #1a4ed8;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     transition: transform 0.3s ease;
 }

 .course-card-read-more:hover span {
     transform: translateX(4px);
 }

 @media (max-width: 1200px) {
     .course-card-container {
         gap: 30px;
     }
 }