@media (max-width: 1550px) {
    .activities-expand {
        width: 1000px;
    }
    .activities-expand .homework-heading {
        width: 1000px;
    }
}

@media (max-width: 1250px) {
    .activities-container {
        width: 700px;
    }
    .recommended-display {
        width: 235px;
    }
    .expand-homework.btn {
        right: -200px;
    }
    .activities-expand {
        width: 790px;
    }
    .activities-expand .homework-heading {
        width: 790px;
    }

    .activities.recommended-section{
    /* ✅ Enable smooth scrolling */
    overflow-x: auto;
    }
    .activities-background-video {
        left: -350px;
    }
    .recommended {
    overflow-x: scroll;
    }
}

@media (max-width: 970px) {
    .subject-homework p{
        display: none;
    }
    .homework-piece.activities-expand .homework-heading {
        gap: 0rem;
    }
    .activities-container {
        width: 650px;
    }
    .expand-homework.btn {
        right: -160px;
    }
    .activities-expand {
        width: 680px;
    }
    .activities-expand .homework-heading {
        width: 680px;
    }
}
@media (max-width: 880px) {

    .close-icon.icon {
        left: 20px;
        top: -120px;
        z-index: 2;
        width: 24px;
        height: 24px;
    }
}
@media (max-width: 830px) {
    .activities-container {
        width: 600px;
    }
    .expand-homework.btn {
        right: -130px;
    }
}
@media (max-width: 790px) {
    .expand-homework.btn {
        top: 14px;
        right: -50px;
    }
}

@media (max-width: 700px) {
    .activities-expand {
        width: 98%;
    }
    .activities-expand .homework-heading {
        width: 102%;
    }
}

@media (max-width: 670px) {
    .subject-homework{
        display: none;
    }
    .homework-expand .subject-homework {
        display: flex;
        flex: 0;
        margin-right: 4px;
    }
    .activities-container {
        width: 600px;
    }
    .header-student.header {
        margin-top: 1rem;
    }
    .main {
        height: fit-content;
    }
    #navProfileImg img{
            height: 60px;
            border-radius: 50px;
            border: 1px solid black;
    }
    .subjects-background-video {
        top: -115px;
    }

}
@media (max-width: 610px) {
    .activities-container {
        width: 96%;
    }
    .expand-homework.btn {
        top: 14px;
        right: -70px;
    }
    .select-container {
        width: 400px;
    }
    .select {
        gap: 2rem;
    }
    .select::after{ 
        transform: translateX(-100px);
        transition: all 600ms ease;
    }
    .select.underline-homework::after{
        transform: translateX(100px);
        transition: all 600ms ease;
    }
    .activities-expand .homework-display .due-homework {
        width: 100px;
    }
}

@media (max-width: 550px) {
    .homework-heading {
        font-size: 12px;
    }
    .expand-homework.btn {
        top: 14px;
        right: -50px;
    }
    .select {
        gap: 0rem;
    }
    .select::after{ 
        transform: translateX(-85px);
        transition: all 600ms ease;
        width: 130px;
    }
    .select.underline-homework::after{
        transform: translateX(85px);
        transition: all 600ms ease;
        width: 130px;
    }
    .user-plan-icon {
        width: 148px;
        height: 70px; /* height: 18%;  for other ones*/
        transform: translate(60px, -35px) rotate(-36deg); /* transform: translate(100px, -100px) rotate(-30deg); */
    }
    
}
@media (max-width: 510px) {
    .expand-homework.btn {
        top: 12px;
        right: -15px;
    }
    .select-homework, .select-recommended {
        position: relative;
        font-size: 18px;
    }
    .select-homework {
        right: 10px;
    }
    .select-recommended{
        left: 10px;
    }
    .select::after{ 
        transform: translateX(-75px);
        transition: all 600ms ease;
        width: 120px;
    }
    .select.underline-homework::after{
        transform: translateX(75px);
        transition: all 600ms ease;
        width: 120px;
    }
}

@media (max-width: 440px) {
    .name-homework {
        flex: 3;
        font-size: smaller;
    }
    .class-homework, .due-homework {
        flex: 1;
        font-size: 12px;
    }
    .expand-homework.btn {
        top: 14px;
        right: 10px;
        padding: 0.70rem 0.55rem;
    }
    .select-homework, .select-recommended {
        font-size: 16px;
    }
    .select-homework {
        right: 20px;
    }
    .select-recommended {
        left: 20px;
    }
    .select::after{ 
        transform: translateX(-65px);
        transition: all 600ms ease;
        width: 100px;
    }
    .select.underline-homework::after{
        transform: translateX(65px);
        transition: all 600ms ease;
        width: 110px;
    }
    .header::after {
        width: 350px; /* Width of the line */
    }
    .user-plan-text {
        transform: translate(150px, -10px);
    }
    .user-plan-icon {
        position: absolute;
        width: 116px;
        height: 55px; /* height: 18%;  for other ones*/
        transform: translate(55px, -20px) rotate(-36deg); /* transform: translate(100px, -100px) rotate(-30deg); */
    }
}

@media (max-width: 400px) {
    .select-homework {
        right: -5px;
        width: 100px;
    }
    .select-recommended {
        left: -5px;
        width: 100px;
    }
    .select::after{ 
        transform: translateX(-55px);
        transition: all 600ms ease;
        width: 100px;
    }
    .select.underline-homework::after{
        transform: translateX(55px);
        transition: all 600ms ease;
        width: 100px;
    }
    .expand-homework.btn {
        top: 14px;
        right: 25px;
        padding: 0.70rem 0.55rem;
    }
    .name-homework {
        flex: 7;
        font-size: 12px;
    }
    .class-homework, .due-homework {
        flex: 3;
        font-size: 12px;
    }
    .class-homework {
        flex: 2;
    }
    .homework-display {
        margin-left: 0;
        margin-right: 0;
    }
}
@media (max-width: 360px) {
    .select-homework {
        right: 4px;
        font-size: 14px;
    }
    .select-recommended {
        left: 4px;
        font-size: 14px;
    }
    .select::after{ 
        transform: translateX(-45px);
        transition: all 600ms ease;
        width: 90px;
    }
    .select.underline-homework::after{
        transform: translateX(45px);
        transition: all 600ms ease;
        width: 90px;
    }
    .expand-homework.btn {
        top: 10px;
        right: 45px;
    }
    .expand-homework.btn h4 {
        font-size: 12px;
    }
    .homework-display.homework-piece{
        padding: 5px;
    }       .homework-display.homework-piece div{
        font-size: 12px;
    }   .homework-display.activities-expand .homework-heading {
        padding: 5px;
    }
}

@media (max-height: 900px) {
    .main {
        height: 90vh;
    }
    .activities-container {
        min-height: 300px;
    }
}
@media (max-height: 850px) {
    .main {
        height: 90vh;
    }
    .activities-container {
        min-height: 300px;
    }
    .header::after {
        margin: 0px;
    }
    .select-container {
        margin-top: -1rem;
    }
}
@media (max-height: 800px) {
    .box-container {
        margin-top: 30px;
    }
    .main {
        min-height: 0px;
        height: calc(100vh - 80px);
    }
    .select-container {
        margin-top: -2rem;
    }
}
@media (max-height: 720px) {
    .main {
        height: fit-content;
    }
    .activities-container {
        margin-bottom: 3rem;
    }
}