.class-header{
    font-size: 64px;
    font-family: Lora, Times New Roman, serif;;
    color: #42372D;
    text-align: center;
    padding: 0px 300px;
    padding-top: 200px;
    padding-bottom: 20px;
}

.class-desc{
    text-align: center;
    font-size: 24px;
    font-family: Roboto, Helvetica, Arial;
    color: #42372D;
}

.class-main-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-cards{
    width: 20%;
    align-items: start;
    margin: 40px 40px;
    padding: 30px 40px;
    font-family: Roboto, Helvetica, Arial;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    gap: 12px;
}

.class-name{
    padding-top: 15px;
    color: #42372D;
    font-size: 24px;
    text-align: left;
}

.info-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.class-info{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    font-size: 20px;
    color: #42372D;
    text-align: left;
    padding: 5px 0px;
}

.class-desc li{
    padding: 5px;
    word-wrap: break-word; 
    white-space: normal;
}

.center-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.sign-up-btn button{
    width: 100px;
    height: 45px;
    text-align: center;
    align-items: center;
    background-color: #2C4B2B;
    color: #FFFFFF;
    font-size: 17px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 0;
    cursor: pointer;
    margin-top: 18px;
}
.more-up-btn button{
    width: 100px;
    height: 45px;
    text-align: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #2C4B2B;
    color: #000;
    font-size: 17px;
    border-radius: 8px;
    margin-bottom: 15px;
    cursor: pointer;
    margin-top: 18px;
}

.info-icon {
    width: 18px;
}


.class-img {
    position: relative; /* Make this container the positioning context for the absolutely positioned span */
    width: 100%;
}

.class-img img {
    width: 100%;
    height: auto;
    display: block; /* Ensure the image takes up the full width of its container */
    
}

.class-img span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: left;
    padding: 20px;
    padding-right: 80px;
    width: 80%; /* Adjust width as needed */
}

.banner-title {
    font-family: Lora, Times New Roman, serif;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 10px;
}

.banner-desc {
    font-family: Roboto, Helvetica, Arial;
    font-size: 22px;
    line-height: 1.6;
    padding-right: 550px;
}

.more-info {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Adjust spacing between the blocks */
    margin-top: 80px;
    margin-bottom: 180px;
    padding: 0px 100px;
    color: #42372D;
}

.more-info-header {
    width: 100%;
    font-family: 'Lora', Times New Roman, serif;
    font-size: 40px;
    margin-bottom: 20px;
    text-align: left;
}

.info-block {
    flex: 1 1 calc(50% - 20px); /* Ensure two blocks per row with a gap of 20px */
    box-sizing: border-box;
    margin-bottom: 20px;
}

.more-info-title {
    font-family: Roboto, Helvetica, Arial;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.more-info-desc {
    font-family: Roboto, Helvetica, Arial;
    font-size: 20px;
    line-height: 1.6;
    padding-right: 80px;
}


.menu {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 500px;
    padding: 5px 20px;
    background-color: #ffff;
    border-radius: 12px;
    z-index: 99999;
    transform: translate(-50% , -50%);
    overflow-y: auto;
}

.shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #363636c0;
    z-index: 9999;
}


.p-to {
    font-family: Roboto, Helvetica, Arial;
    font-size: 14px;
    text-align: left;
    color: #42372D;
}



.main-close {
    display: flex;
    align-items: center; 
    justify-content: center;
}

.border {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ccc;
}

.div-to {
    color: #42372D;
    flex: 1; 
    font-size: 18px;
    font-family: Lora, Times New Roman, serif;
}

.close-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-icon img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}