.courses-section {
     padding: 80px 0;
     background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
     position: relative;
 }

 .courses-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23000" opacity="0.02"/><circle cx="75" cy="75" r="1" fill="%23000" opacity="0.02"/><circle cx="25" cy="75" r="1" fill="%23000" opacity="0.02"/><circle cx="75" cy="25" r="1" fill="%23000" opacity="0.02"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>') repeat;
     pointer-events: none;
 }

 .courses-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     position: relative;
     z-index: 1;
 }

 .courses-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .courses-header h2 {
     font-size: 2.5rem;
     font-weight: 700;
     color: #2c3e50;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
 }

 .header-line {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
 }

 .line-decoration {
     width: 80px;
     height: 3px;
     background: linear-gradient(90deg, transparent, #4a90e2, transparent);
     border-radius: 2px;
 }

 .center-icon {
     width: 40px;
     height: 40px;
     background: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 4px 15px rgba(168, 191, 218, 0.3);
     }

     50% {
         transform: scale(1.1);
         box-shadow: 0 6px 20px rgba(171, 185, 202, 0.5);
     }
 }

 .courses-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .course-card {
     background: white;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     height: 280px;
 }

 .course-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .course-image {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .course-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .course-card:hover .course-image img {
     transform: scale(1.1);
 }

 .course-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(44, 62, 80, 0.85) 0%, rgba(52, 152, 219, 0.85) 100%);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: all 0.4s ease;
     text-align: center;
     padding: 20px;
 }

 .course-card:hover .course-overlay {
     opacity: 1;
 }

 .course-overlay h3 {
     color: white;
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 10px;
     transform: translateY(20px);
     transition: transform 0.4s ease 0.1s;
 }

 .course-card:hover .course-overlay h3 {
     transform: translateY(0);
 }

 .course-overlay p {
     color: rgba(255, 255, 255, 0.9);
     font-size: 1rem;
     margin-bottom: 25px;
     transform: translateY(20px);
     transition: transform 0.4s ease 0.2s;
 }

 .course-card:hover .course-overlay p {
     transform: translateY(0);
 }

 .course-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     border: 2px solid rgba(255, 255, 255, 0.3);
     padding: 12px 25px;
     border-radius: 30px;
     color: white;
     font-weight: 600;
     transition: all 0.3s ease;
     cursor: pointer;
     transform: translateY(20px);
     transition: all 0.4s ease 0.3s;
 }

 .course-card:hover .course-btn {
     transform: translateY(0);
     background: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
 }

 .course-btn:hover {
     background: white;
     color: #8199b1;
     transform: translateY(-2px);
 }

 .course-btn svg {
     transition: transform 0.3s ease;
 }

 .course-btn:hover svg {
     transform: translateX(5px);
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .courses-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .courses-header h2 {
         font-size: 2rem;
     }

     .course-card {
         height: 250px;
     }
 }

 @media (max-width: 480px) {
     .courses-container {
         padding: 0 15px;
     }

     .courses-header h2 {
         font-size: 1.8rem;
     }

     .course-overlay h3 {
         font-size: 1.3rem;
     }
 }