@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&display=swap');


.course-body {
    /* font-family: "Lexend", sans-serif; */
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1.5;
    display: flex;
    align-items: flex-start; /* Kartlar arasında düzgün sıralanma üçün */
    justify-content: center; /* Kartları mərkəzə yığır */
    flex-wrap: wrap; /* Kartların sarmasını təmin edir */
    gap: 20px; /* Kartlar arasındakı məsafəni artırır */
}

.course-card-list {
    margin-bottom: 50px !important; /* Kartlar arasındaki boşluğu artırır */
    display: flex; /* Flexbox istifadə edir */
    flex-direction: column; /* Kartları şaquli düzülməyə keçirir */
    align-items: center; /* Kartların mərkəzə düzülməsini təmin edir */
}

.course-card {
    background-color: #FFF;
    box-shadow: 0 0 0 1px rgba(#000, .05), 0 20px 50px 0 rgba(#000, .1);
    border-radius: 15px;
    overflow: hidden;
    padding: 1.25rem;
    position: relative;
    transition: .15s ease-in;
    display: flex;
    flex-direction: column; /* İçeriği dik tutmaq üçün */
    justify-content: space-between;
    height: 400px; /* Kartların hündürlüyünü eyni saxlamaq üçün */
    width: 300px; /* Kartların sabit genişliyi */
}

.course-card:hover, 
.course-card:focus-within {
    box-shadow: 0 0 0 2px #2C94EA, 0 10px 60px 0 rgba(#000, .1);
    transform: translateY(-5px);
}

.course-card-image {
    border-radius: 10px;
    overflow: hidden;
}

.course-card-image img {
    width: 100%;
    height: 200px; /* Şəkillərin sabit hündürlüyü */
    /* object-fit: cover; */ /* Şəkli kartın içərisinə tam yerləşdirir */
}

.course-card-header {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-icon-button {
    border: 0;
    background-color: #fff;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    transition: .25s ease;
    box-shadow: 0 0 0 1px rgba(#000, .05), 0 3px 8px 0 rgba(#000, .15);
    z-index: 1;
    cursor: pointer;
    color: #565656;
}

.course-icon-button:hover, 
.course-icon-button:focus {
    background: linear-gradient(15deg, #B900EF 0%, #2C94EA 100%);
    color: #FFF;
}

.course-card-footer {
    margin-top: 1.25rem;
    border-top: 1px solid #ddd;
    padding-top: 1.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.course-card-meta {
    display: flex;
    align-items: center;
    /* color: #787878; */
}