/* =========================================================
COURSES PAGE
========================================================= */

:root {
--course-blue: #1688d9;
--course-blue-dark: #0870bd;
--course-cyan: #19b8e8;
--course-orange: #f26522;
--course-navy: #071528;
--course-text: #172235;
--course-muted: #6c7a8d;
--course-border: #e8edf3;
--course-bg: #f7faff;
}

/* =========================================================
COURSES SECTION
========================================================= */

.cs-courses-section {
padding: 90px 0;
background: #ffffff;
}

.cs-top-selling-section {
padding: 72px 0;
background: var(--course-bg);
}

.cs-top-selling-section .cs-courses-head {
margin-bottom: 30px;
}

.cs-top-selling-section .cs-courses-head h2 {
margin-bottom: 10px;
}

.cs-top-selling-swiper {
padding: 4px 4px 48px;
}

.cs-top-selling-swiper .swiper-wrapper {
align-items: stretch;
}

.cs-top-selling-swiper .swiper-slide {
height: auto;
}

.cs-top-selling-card {
height: 100%;
}

.cs-top-selling-card .cs-course-content {
display: flex;
flex: 1;
flex-direction: column;
}

.cs-top-selling-card .cs-course-content h3 {
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}

.cs-top-selling-card .cs-course-content p {
flex: 1;
}

.cs-top-selling-swiper .cs-top-selling-prev,
.cs-top-selling-swiper .cs-top-selling-next {
top: 42%;
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffffff;
color: var(--course-blue-dark);
box-shadow: 0 4px 16px rgba(7, 21, 40, .14);
}

.cs-top-selling-swiper .cs-top-selling-prev::after,
.cs-top-selling-swiper .cs-top-selling-next::after {
font-size: 15px;
font-weight: 800;
}

.cs-top-selling-swiper .cs-top-selling-pagination {
bottom: 8px;
}

.cs-top-selling-swiper .swiper-pagination-bullet-active {
background: var(--course-blue);
}

/* =========================================================
SECTION HEADING
========================================================= */

.cs-courses-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 42px;
}

.cs-section-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--course-blue);
}

.cs-section-kicker::before {
content: "";
width: 28px;
height: 2px;
background: var(--course-orange);
}

.cs-courses-head h2 {
margin: 0 0 12px;
font-size: 38px;
line-height: 1.2;
font-weight: 800;
color: var(--course-navy);
}

.cs-courses-head h2 span {
color: var(--course-blue);
}

.cs-courses-head p {
max-width: 650px;
margin: 0;
color: var(--course-muted);
font-size: 16px;
line-height: 1.7;
}

/* =========================================================
COURSE GRID
4 CARDS IN ONE ROW
========================================================= */

.cs-course-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}

/* =========================================================
COURSE CARD
========================================================= */

.cs-course-card {
position: relative;
overflow: hidden;
background: #ffffff;
border: 1px solid var(--course-border);
border-radius: 18px;
box-shadow: 0 10px 35px rgba(7, 21, 40, 0.07);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}

.cs-course-card:hover {
transform: translateY(-8px);
border-color: rgba(22, 136, 217, 0.25);
box-shadow: 0 20px 45px rgba(7, 21, 40, 0.12);
}

/* =========================================================
COURSE IMAGE
========================================================= */

.cs-course-image {
position: relative;
display: block;
width: 100%;
height: 220px;
overflow: hidden;
background:
linear-gradient(
135deg,
#eaf7ff,
#f4fbff
);
}

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

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

/* =========================================================
IMAGE PLACEHOLDER
========================================================= */

.cs-course-placeholder {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
#e8f6ff,
#f5fbff
);
}

.cs-course-placeholder i {
font-size: 52px;
color: var(--course-blue);
}

/* =========================================================
IMAGE BADGE
========================================================= */

.cs-course-badge {
position: absolute;
left: 15px;
top: 15px;


display: inline-flex;
align-items: center;
gap: 6px;

padding: 7px 12px;

border-radius: 50px;

background: rgba(255, 255, 255, 0.95);

color: var(--course-blue-dark);

font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;

box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);



}

.cs-course-badge i {
font-size: 13px;
}

/* =========================================================
COURSE CONTENT
========================================================= */

.cs-course-content {
padding: 23px 22px 24px;
}

/* =========================================================
COURSE LABEL
========================================================= */

.cs-course-label {
display: inline-flex;
align-items: center;
gap: 6px;


margin-bottom: 10px;

color: var(--course-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;

}

.cs-course-label i {
font-size: 13px;
}

/* =========================================================
COURSE TITLE
========================================================= */

.cs-course-content h3 {
margin: 0 0 11px;
font-size: 21px;
line-height: 1.3;
font-weight: 800;
}

.cs-course-content h3 a {
color: var(--course-navy);
text-decoration: none;
transition: color 0.3s ease;
}

.cs-course-content h3 a:hover {
color: var(--course-blue);
}

/* =========================================================
COURSE DESCRIPTION
========================================================= */

.cs-course-content p {
margin: 0 0 18px;

color: var(--course-muted);

font-size: 14px;
line-height: 1.7;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

min-height: 71px;

}

/* =========================================================
COURSE FEATURES
========================================================= */

.cs-course-features {
display: flex;
flex-wrap: wrap;
gap: 8px;

padding: 14px 0;

border-top: 1px solid var(--course-border);
border-bottom: 1px solid var(--course-border);

margin-bottom: 17px;

}

.cs-course-features span {
display: inline-flex;
align-items: center;
gap: 5px;

color: #566577;

font-size: 11px;
font-weight: 700;

}

.cs-course-features i {
color: var(--course-blue);
font-size: 13px;
}

/* =========================================================
COURSE LINK
========================================================= */

.cs-course-link {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;


width: 100%;

color: var(--course-blue-dark);

font-size: 13px;
font-weight: 800;

text-decoration: none;

transition:
    color 0.3s ease,
    gap 0.3s ease;

}

.cs-course-link i {
font-size: 16px;
transition: transform 0.3s ease;
}

.cs-course-link:hover {
color: var(--course-orange);
}

.cs-course-link:hover i {
transform: translateX(5px);
}

/* =========================================================
NO COURSES
========================================================= */

.cs-no-courses {
padding: 90px 0;
background: var(--course-bg);
}

.cs-no-course-box {
max-width: 600px;
margin: auto;

padding: 55px 30px;

text-align: center;

background: #ffffff;

border: 1px solid var(--course-border);
border-radius: 20px;

box-shadow: 0 12px 35px rgba(7, 21, 40, 0.06);


}

.cs-no-course-icon {
width: 70px;
height: 70px;

margin: 0 auto 20px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #eaf7ff;

color: var(--course-blue);

font-size: 30px;

}

.cs-no-course-box h2 {
margin: 0 0 10px;

color: var(--course-navy);

font-size: 28px;
font-weight: 800;

}

.cs-no-course-box p {
margin: 0 0 25px;

color: var(--course-muted);

line-height: 1.7;

}

.cs-no-course-box > a {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 12px 22px;

border-radius: 8px;

background: var(--course-blue);

color: #ffffff;

text-decoration: none;

font-size: 14px;
font-weight: 700;

transition: background 0.3s ease;

}

.cs-no-course-box > a:hover {
background: var(--course-blue-dark);
}

/* =========================================================
LARGE LAPTOP
========================================================= */

@media (max-width: 1200px) {

.cs-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 992px) {

.cs-courses-section {
    padding: 70px 0;
}

.cs-top-selling-section {
    padding: 60px 0;
}

.cs-courses-head h2 {
    font-size: 34px;
}

.cs-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 576px) {

.cs-courses-section {
    padding: 55px 0;
}

.cs-top-selling-section {
    padding: 48px 0;
}

.cs-courses-head {
    margin-bottom: 30px;
}

.cs-courses-head h2 {
    font-size: 29px;
}

.cs-courses-head p {
    font-size: 14px;
}

.cs-course-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.cs-course-image {
    height: 210px;
}

.cs-course-content {
    padding: 20px;
}

.cs-course-content h3 {
    font-size: 20px;
}


}