.container { margin: 0 auto; padding: 0px; }
.tabs { display: flex; gap: 0px; margin-bottom: 30px; flex-wrap: wrap; justify-content:left;}
.tab { text-decoration: none; color: #666; padding: 10px 20px; border-radius: 5px; cursor: pointer;}
.tabs a { text-decoration: none!important; font-size: 22px; }
.tab.active { color: #000; font-weight: 700!important; }
.course-list { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; }
.course-card { border-radius: 10px; overflow: hidden; width: 32%; cursor: pointer; position: relative; margin-bottom: 20px; transition:transform .3s;}
.course-card:hover { transform:translateY(-5px);}
.course-card img { width: 100%; height: auto; }
.course-card .duration { position: absolute; bottom: 19%; right: 10px; color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 14px; }
.course-card h3 { padding: 10px; margin: 0; font-size: 16px; color: #333; }
@media(max-width: 900px){ .course-card{ width: 48%; } }
@media(max-width: 600px){ .course-card{ width: 100%; } }

/* Modal */
.cdp-modal { display:none; position:fixed; z-index:999; padding-top:60px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.8);}
.cdp-modal-content { margin:auto; background:#000000; max-width:700px; border-radius:10px; position:relative; padding:0; }
.cdp-close { position:absolute; top:10px; right:20px; color:#000; font-size:30px; font-weight:bold; cursor:pointer;}
.cdp-video-wrapper iframe, .cdp-video-wrapper video { width:100%; height:400px; border:none; border-radius:10px 10px 0 0; }