/* FIX: New rule for tablet and smaller screens to stack the project layout */
@media screen and (max-width: 992px) {
    .project {
        flex-direction: column;
    }
    .project img {
        flex-basis: auto; /* Reset flex basis */
        width: 100%; /* Take full width of the card */
        max-width: 400px; /* But don't get too huge */
        margin: 0 auto 20px; /* Center the image when stacked */
    }
}

@media screen and (max-width:750px) {
    .about-img {
        border-radius: 35px;
        width: 70%
    }

    .fly.b3 {
        left: 68%;
        width: 130px
    }

    .techs-front {
        display: none
    }

    .layout .content .techs {
        display: grid;
        gap: 10px
    }

    .layout .content .techs .line {
        height: 500px;
        left: 49%;
        width: 15px
    }

    .layout .about {
        font-size: 20px;
        width: 100%
    }

    .layout #bio {
        padding: 18px 5px 10px 5px;
        width: 90%;
        background: #000;
        height: 75vh;
        margin-left: 1%;
        margin-right: 1%;
        overflow: scroll;
        top: 9%
    }

    .layout #projects {
        position: absolute;
        height: 80vh; /* Adjusted */
        left: 5%;
        width: 90%;
        top: 10vh;
    }

    .layout #projects .project {
        padding: 12px 8px 8px 8px
    }

    .layout #projects .list {
        height: 100%;
    }
}

@media screen and (max-width:450px) {
    .about-img {
        border-radius: 35px;
        width: 100%
    }

    .bg-gif {
        height: 240px
    }

    html[lang=ar] .layout .intro {
        font-size: 37px;
        line-height: 25px;
        margin-top: 0
    }

    html[lang=ar] .layout .about .desc {
        direction: rtl;
        font-size: 12px;
        line-height: 22px
    }

    .layout #bio {
        width: 91%;
        background: #000
    }

    .layout #projects h1 {
        margin-left: 0
    }

    .fly.b1 {
        animation: flyAnimationB1 20s linear infinite;
        animation-delay: 7s
    }

    .fly.b2 {
        animation: flyAnimationB2 40s linear infinite;
        animation-delay: 17s
    }

    .fly.b3 {
        animation: flyAnimationCar 20s forwards
    }

    .layout .intro {
        font-size: 27px;
        line-height: 24px
    }

    .tag {
        display: none;
        top: 48px
    }

    .tag .info {
        width: 90%
    }
}