.subject-page .header {
    width: 100%;
    height: 100%;
    color: var(--c2);
    font-size: 5vw;
    font-weight: 600;
    margin-top: 1.25%;
    margin-left: 0;
    padding-left: 5%;
}

.subject-page .subject-page-content {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 2.5vw; 
    position: relative;
    z-index: 1;
}

.subject-page .subject-page-content {
    width: 100%;
    height: 100%;
    border-radius: 2.5vw;
    margin-top: 2.5%;
    background-color: var(--c1);
}

.subject-1,
.subject-2,
.subject-3,
.subject-4,
.subject-5 {
    width: 80vw;
    height: 5.2vw;
    margin-left: 5vw;
    border-radius: 2.6vw;
    background-color: var(--c2); 
    font-size: 1.3vw;
    color: var(--c1);
    cursor: pointer;
    padding-left: 2.5vw;
    padding-top: 0.61vw;
    transition: border-radius 0.3s ease;
}

.subject-1 {
    margin-top: 2.5vw;
}

.subject-2,
.subject-3,
.subject-4,
.subject-5  {
    margin-top: 2%;
}

.subject-1.active,
.subject-2.active,
.subject-3.active,
.subject-4.active,
.subject-5.active {
    border-bottom-left-radius: 0vh;
    border-bottom-right-radius: 0vh;
}

.subject-1 img,
.subject-2 img,
.subject-3 img,
.subject-4 img,
.subject-5 img {
    position: absolute;
    width: 3.75%;
    margin-left: 73vw;
    margin-top: -3.8vw;
    background-color: var(--c2);
    transition: rotate 0.3s ease;
    border-radius: 50%;
}

.subject-1 img.active,
.subject-2 img.active,
.subject-3 img.active,
.subject-4 img.active,
.subject-5 img.active {
    rotate: 90deg;
}

.subject-1-second,
.subject-2-second,
.subject-3-second,
.subject-4-second,
.subject-5-second {
    width: 80%;
    height: 0;
    background-color: white;
    margin-left: 5%;
    border-bottom-left-radius: 2.5vw;
    border-bottom-right-radius: 2.5vw;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
}

.subject-1-second.active,
.subject-2-second.active,
.subject-3-second.active,
.subject-4-second.active,
.subject-5-second.active {
    padding-bottom: 2vw;
    height: 14vw;
}

.subject-page .option-1,
.subject-page .option-2,
.subject-page .option-3,
.subject-page .option-4,
.subject-page .option-5 {
    width: 100%;
    font-size: 0.8vw;
    padding-left: 5%;
    padding-top: 1%;
    cursor: pointer;
    color: var(--c2);
    transition: color 0.3s ease;
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.subject-page .option-1:hover,
.subject-page .option-2:hover,
.subject-page .option-3:hover,
.subject-page .option-4:hover,
.subject-page .option-5:hover {
    color: var(--a1);
    transform: scale(1.05);
}

/* Media query for smartphone viewing */
@media screen and (max-width: 768px) {
    .subject-page .header {
        font-size: 12vw;
        margin-top: 5%;
        padding-left: 5%;
    }
    
    .subject-page .subject-page-content {
        border-radius: 5vw;
        margin-top: 5%;
    }
    
    .subject-1,
    .subject-2,
    .subject-3,
    .subject-4,
    .subject-5 {
        width: 90vw;
        height: 12vw;
        margin-left: 5vw;
        border-radius: 6vw;
        font-size: 3.5vw;
        padding: 0.5vw 4vw;
    }
    
    .subject-1 {
        margin-top: 5vw;
    }
    
    .subject-2,
    .subject-3,
    .subject-4,
    .subject-5 {
        margin-top: 4vw;
    }
    
    .subject-1 img,
    .subject-2 img,
    .subject-3 img,
    .subject-4 img,
    .subject-5 img {
        width: 8vw;
        margin-left: 76vw;
        position: relative;
        top: -5.5vw;
    }

    .subject-1-second,
    .subject-2-second,
    .subject-3-second,
    .subject-4-second,
    .subject-5-second {
        width: 90vw;
        transition: height 0.3s ease-in-out;
        overflow: hidden;
    }
    
    .subject-1-second.active,
    .subject-2-second.active,
    .subject-3-second.active,
    .subject-4-second.active,
    .subject-5-second.active {
        height: auto;
        height: 40vw;
        padding-bottom: 5vw;
        opacity: 1;
    }
    
    .subject-page .option-1,
    .subject-page .option-2,
    .subject-page .option-3,
    .subject-page .option-4,
    .subject-page .option-5 {
        font-size: 3vw;
        padding-left: 5%;
        padding-top: 3vw;
        padding-bottom: 0vw;
    }
}