.all-course {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0;
list-style-type: none;
} .single_course {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.single_course:hover {
transform: translateY(-10px); } .info {
text-align: center;
} .course-label {
display: inline-block;
margin-bottom: 10px;
padding: 5px 15px;
background-color: #ff9800;
color: #fff;
font-size: 14px;
border-radius: 5px;
} .course-image img {
width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
} .course-title a {
font-size: 13px;
font-weight: 600;
text-decoration: none;
color: #333;
display: block;
margin-bottom: 15px;
} .course-link {
display: flex;
justify-content: space-between;
} .course-link a {
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 12px;
color: #fff;
transition: background-color 0.3s ease;
display: inline-block;
width: 48%; text-align: center;
} .courseware-button {
background-color: #0a6fb5;
} .start-button {
background-color: #0bb27a;
} .course-link a:hover {
opacity: 0.9;
} @media screen and (max-width: 768px) {
.all-course {
grid-template-columns: 1fr; }
.course-link {
flex-direction: row; gap: 10px; }
.course-link a {
width: 48%; text-align: center; }
.courseware-button {
background-color: #0a6fb5; }
.start-button {
background-color: #0bb27a; }
} .pagination {
display: flex;
justify-content: center; align-items: center;
margin: 30px 0;
}
.pagination a, .pagination span {
color: #0bb27a;
padding: 10px 20px;
text-decoration: none;
margin: 0 10px;
border-radius: 10px;
transition: background-color 0.3s ease, color 0.3s ease;
border: 1px solid #ddd;
font-size: 16px;
font-weight: 500;
}
.pagination a:hover {
background-color: #0bb27a;
color: white;
border-color: #0bb27a;
}
.pagination .current {
background-color: #0bb27a;
color: white;
font-weight: bold;
border: 1px solid #0bb27a;
}
.pagination a.prev, .pagination a.next {
font-weight: bold;
padding: 10px 16px;
}
.pagination a.prev:hover, .pagination a.next:hover {
background-color: #0bb27a;
color: white;
}