/* 🔥 WORLD-CLASS FLUID COURSE UI - COMPLETE VERSION 🔥 */
.expert-courses-wrap { 
    position: relative;
    padding: 80px 0 100px; 
    background: linear-gradient(-45deg, #f8fafc, #e0e7ff, #f3e8ff, #f1f5f9);
    background-size: 400% 400%;
    animation: courseBgMove 15s ease infinite;
    font-family: 'Plus Jakarta Sans', sans-serif; 
    overflow: hidden;
}
@keyframes courseBgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sec-header { text-align: center; margin-bottom: 50px; padding: 0 20px; position: relative; z-index: 2;}
.sec-title { font-size: 36px; font-weight: 900; color: #1e293b; text-transform: uppercase; margin-bottom: 8px; letter-spacing: -0.5px;}
.sec-title span { color: #4f46e5; background: linear-gradient(90deg, #4f46e5, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.sec-sub { font-size: 16px; color: #64748b; max-width: 600px; margin: 0 auto; font-weight: 500;}

/* 🔥 FLUID PERCENTAGE-BASED GRID 🔥 */
.expert-grid { 
    max-width: 1400px; 
    width: 96%; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 35px; 
    padding: 0 15px; 
    position: relative;
    z-index: 2;
}

/* 💎 Premium Floating Card */
.pro-card { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(12px); 
    border-radius: 26px; 
    padding: 20px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.06); 
    border: 1px solid rgba(255,255,255,0.8); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}
.pro-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(79, 70, 229, 0.15); border-color: #c7d2fe; }

.clickable-area { cursor: pointer; flex-grow: 1; display: flex; flex-direction: column; }
.pro-img-box { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; position: relative; margin-bottom: 20px; background: #f1f5f9; box-shadow: inset 0 0 10px rgba(0,0,0,0.05);}
.pro-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pro-card:hover .pro-img-box img { transform: scale(1.08); }

.pro-badge { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); color: #0f172a; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.discount-badge { position: absolute; top: 12px; left: 12px; background: linear-gradient(45deg, #ef4444, #f97316); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4); }

.pro-content { padding: 0 8px 10px; flex-grow: 1; display: flex; flex-direction: column;}
.pro-title { font-size: 22px; font-weight: 900; color: #0f172a; margin-bottom: 12px; line-height: 1.3; }
.pro-desc { font-size: 15px; color: #475569; margin-bottom: 20px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pro-footer { border-top: 1px solid rgba(226, 232, 240, 0.8); padding: 15px 8px 5px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.offer-price { font-size: 20px; font-weight: 900; color: #10b981; }

.btn-main-buy { background: linear-gradient(45deg, #4f46e5, #3b82f6); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 6px; }

@media (max-width: 600px) {
    .expert-grid { grid-template-columns: 1fr; gap: 20px; }
    .pro-card { padding: 15px; }
}