/* --- section 2 classes section */
/* --- class section */
.classes-section {
    width: 100%;
    /* Note: 60vh is 60% of the screen height. If you want 130%, use 130vh! */
    height: 80vh; 

    background-image: url('../images/student/Image_20260822_1.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    overflow: hidden;

}

/* --- classes card section */
.card {
    width:  calc(100% - 2 * 6vw);
    height: calc(100% - 2 * 8vh);
    background: #fdffe6;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    
    /* This flexbox setup centers content *inside* the card itself */
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    gap:5%;

    border: 2px solid #000000;

    z-index: 2;
    margin-top: -1px; /* avoids a sub-pixel gap */
}

.classes-section .card .card-top {
    height: 48%;
    width: 100%;
    padding: 24px 24px;
}

.classes-section .card .card-divider {
    margin: 0;
    border: none;
    height: 2px; /* Thickness of the line */
    background-color: #000000; /* Color of the line */
    width: 100%;
}

.classes-section .card .card-bottom {
    flex-grow: 1; /* automatically takes up the remaining ~40% */
    width: 100%;
    padding: 24px 24px
}

/*classes card text */


.classes-title {
    font-size: 24px;
    margin-bottom: 5%;
}

.classes-text{
    font-size: 12px;
    margin-left: 5%;
}

@media (max-width: 768px) {
.classes-section {
    width: 100%;
    height: 100vh; 

    background-image: url('../images/student/Image_20260822_1.JPG');

    flex-direction: column; 
    
    /* ADD THESE TWO LINES TO CENTER THE CHILD */
    justify-content: center; /* Centers the card vertically */
    align-items: center;     /* Centers the card horizontally */
    
    position: relative; 
    overflow: hidden;
}
}