.highlights-section {
    background-color: #eaeaeb;
}

.subjects {
    display: grid;
    grid-template-columns: repeat(4, auto);
    place-items: center;
    place-content: center;
    gap: 20px;

    a {
        text-decoration: none;
        color: var(--black);
    }
}

.subject-card {
    width: 250px;
    height: 250px;
}

.subject-card h4 {
    margin-top: 15px;
}

.pdf-section {
    width: 100%;
    height: auto;
}

.subject-area {
    padding: 20px;
}

.pdf-area {
    width: 100%;
    height: auto;
    display: grid;
    /* place-items: center; */
    grid-template-columns: repeat(4, auto);
    gap: 20px;
}

.pdf-card {
    background-color: var(--white);
    width: 250px;
    height: 250px;
    text-align: center;
    padding: 20px;
    border-radius: 20px;

    h6 {
        margin-top: 20px;
    }
}

/* .pdf-form{
    background-color: red;
    width: 100%;
    max-width: 300px;
    height: auto;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}
.pdf-form input, .pdf-form button{
    margin: 10px 0;
    width: 100%;
    outline : none;
    border : none;
} */


/* Fullscreen blur overlay */
#blur-pdf-form {
    display: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.4);
    /* dark tint */
    z-index: 999;
    /* ensure it's on top */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Form styles (already provided, included for completeness) */
.pdf-form {
    background-color: var(--yellow);
    width: 100%;
    max-width: 300px;
    height: auto;
    padding: 20px;
    border-radius: 20px;
    z-index: 1000;
    /* above the blur */
    position: relative;
}

.pdf-form input,
.pdf-form button {
    margin: 10px 0;
    width: 100%;
    outline: none;
    border: none;
}


@media screen and (max-width: 768px) {
    .subjects, .pdf-area {
        display: grid;
        grid-template-columns: repeat(2, auto);
    }
    
    .subject-card,
    .pdf-card {
        width: 100%;
        height: auto;
    }
    .subject-card img,
    .pdf-card img {
        width: 50px;
        height: auto;
    }
}