/* ===================================
TRENDING COURSES - PROFESSIONAL UI
===================================*/

.trending-section{
padding:50px 0;
background:#ffffff;
}

.trending-header{
text-align:center;
margin-bottom:70px;
}

.trending-header h2{
font-size:42px;
font-weight:700;
color:#111827;
}

.trending-header p{
margin-top:10px;
color:#6b7280;
font-size:16px;
}

/* GRID */

.trending-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

/* CARD */
.trending-card{

background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;

}

.trending-card:hover{

transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);

}

.course-stats{

display:flex;
justify-content:space-between;
margin-top:10px;
font-size:14px;
color:#555;

}

.course-card{
width:320px;
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.course-card:hover{
transform:translateY(-5px);
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

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

.course-body{
padding:18px;
}

.badge{
font-size:12px;
background:#ede9fe;
color:#7c3aed;
padding:4px 8px;
border-radius:5px;
}

.course-body h4{
font-size:18px;
margin:10px 0;
}

.duration{
color:#6b7280;
font-size:14px;
}

.rating{
margin-top:8px;
color:#fbbf24;
font-size:14px;
}

.course-footer{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
padding-top:10px;
border-top:1px solid #eee;
}

.call{
color:#ef4444;
text-decoration:none;
font-weight:500;
}
.heart{
position:absolute;
right:15px;
top:15px;
color:red;
font-size:18px;
}

/* IMAGE */

.trending-image{
position:relative;
height:220px;
overflow:hidden;
}

.trending-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* BOOKMARK */

.bookmark{
position:absolute;
top:15px;
right:15px;
background:#fff;
width:34px;
height:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
cursor:pointer;
border:1px solid #e5e7eb;
}

/* RIBBON */

.ribbon{
position:absolute;
top:15px;
left:0;
background:#ffffff;
padding:6px 14px;
font-size:12px;
font-weight:600;
color:#111827;
clip-path:polygon(0 0,100% 0,85% 100%,0% 100%);
}

/* BODY */

.trending-body{
padding:28px;
display:flex;
flex-direction:column;
flex:1;
}

.badges{
display:flex;
gap:10px;
margin-bottom:15px;
}

.badge{
font-size:12px;
padding:6px 12px;
border-radius:20px;
font-weight:500;
}

.badge.blue{
background:#e0ecff;
color:#2563eb;
}

.badge.dark{
background:#111827;
color:#fff;
}

/* TITLE */

.trending-body h4{
font-size:20px;
font-weight:600;
color:#111827;
margin-bottom:14px;
}

/* DESCRIPTION */

.desc{
font-size:14px;
color:#6b7280;
margin-bottom:18px;
line-height:1.6;
}

/* META */

.meta{
display:flex;
gap:20px;
font-size:14px;
color:#374151;
margin-bottom:20px;
}

.meta i{
margin-right:6px;
color:#ef4444;
}

/* FOOTER */

.bottom{
margin-top:auto;
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid #e5e7eb;
padding-top:14px;
font-size:14px;
}

/* CALL */

.call-link{
color:#22c55e;
font-weight:600;
text-decoration:none;
}

.call-link:hover{
text-decoration:underline;
}

/* RESPONSIVE */

@media(max-width:992px){

.trending-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.trending-grid{
grid-template-columns:1fr;
}

}
@media(max-width:992px){

.trending-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.trending-grid{
grid-template-columns:1fr;
}

}