@media only screen and (max-width: 576px) and (min-width: 0px) {
    /* Main */
    #main {
        height: 800px !important;
    }

    #main-subtitle {
        font-size: 20px !important;
    }

    /* About */
    #about-card {
        grid-template-columns: 1fr !important;
        height: fit-content !important;
    }

    #about-card-description {
        text-align: center !important;
        margin-top: 50px !important;
    }

    #about-card-description h2 {
        text-align: center !important;
    }

    #about-card-avatar {
        width: calc(100% - 50px) !important;
        height: fit-content !important;
    }

    #about-card-avatar img{
        width: calc(100%) !important;
        height: auto !important;
    }

    /* Education */
    #education-main {
        flex-direction: column !important;
        gap: 25px !important;
    }

    .education-card {width: 90% !important;}

    /* SHGM */
    #shgm-main {
        width: 90% !important;
    }

    /* Header */
    #header-nav {
        display: none !important;
    }

    #header-logo {
        left: 0px !important;
    }

    #header-mobile {
        display: flex !important;
    }

    #header-lang-div {
        margin-right: 25px !important;
    }

    /* Experience */
    #experience-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
    }

    .experience-card {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        height: fit-content !important;
        text-align: center !important;
    }

    .experience-card-description p {
        padding: 0 !important;
    }

    .experience-card::after {
        display: none !important;
    }

    .experience-card::before {
        display: none !important;
    }

    /* Skills */
    #skills-main {
        flex-direction: column !important;
        max-width: 450px !important;
        margin: auto !important;
    }

    .skills-bar {
        margin: 0px !important;
        padding: 0px 25px !important;
    }

    /* Portfolio */
    #portfolio-main {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .portfolio-card {
        width: 90% !important;
    }

    /* Projects */
    #projects-search input {
        width: 100% !important;
        height: 35px !important;
        text-indent: 40px !important;
    }

    #projects-search img {
        width: 35px !important;
        height: 35px !important;
        top: 7px !important;
        left: 7px !important;
    }

    /* Contact */
    #contact-main {
        width: fit-content !important;
        display: block !important;
        border-radius: 25px !important;
    }

    #contact-side-left {
        display: none !important;
    }

    /* Footer */
    footer {
        height: fit-content !important;
        padding: 25px 0px !important;
    }

    #footer-main {
        flex-direction: column !important;
        justify-content: center !important;
        height: fit-content !important;
        gap: 20px !important;
    }

    #footer-social {
        margin: 0 !important;
    }

    #footer-info {
        margin: 0 !important;
    }
}

@media only screen and (max-width: 768px) and (min-width: 577px) {

    /* About */
    #about-card {
        grid-template-columns: 1fr !important;
        height: fit-content !important;
    }

    #about-card-avatar {
        width: calc(100% - 50px) !important;
        height: auto;
    }

    #about-card-description {
        text-align: center !important;
    }

    #about-card-description h2 {
        text-align: center !important;
    }

    /* Education */
    #education-main {
        flex-direction: column !important;
        gap: 25px !important;
    }

    /* SHGM */
    #shgm-main {
        width: 90% !important;
    }

    /* Header */
    #header-nav {
        display: none !important;
    }

    #header-logo {
        left: 0px !important;
    }

    #header-mobile {
        display: flex !important;
    }

    #header-lang-div {
        margin-right: 25px !important;
    }

    /* Experience */
    #experience-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
    }

    .experience-card {
        width: 100% !important;
    }

    .experience-card::after {
        display: none !important;
    }

    .experience-card::before {
        display: none !important;
    }

    /* Skills */
    #skills-main {
        flex-direction: column !important;
        max-width: 450px !important;
        margin: auto !important;
    }

    .skills-bar {
        margin: 0px !important;
        padding: 0px 25px !important;
    }

    /* Portfolio */
    #portfolio-main {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    /* Projects */
    #projects-search input {
        width: 100% !important;
        height: 35px !important;
        text-indent: 40px !important;
    }

    #projects-search img {
        width: 35px !important;
        height: 35px !important;
        top: 7px !important;
        left: 7px !important;
    }

    /* Contact */
    #contact-main {
        width: fit-content !important;
        display: block !important;
        border-radius: 25px !important;
    }

    #contact-side-left {
        display: none !important;
    }

    /* Footer */
    footer {
        height: fit-content !important;
        padding: 25px 0px !important;
    }

    #footer-main {
        flex-direction: column !important;
        justify-content: center !important;
        height: fit-content !important;
        gap: 20px !important;
    }

    #footer-social {
        margin: 0 !important;
    }

    #footer-info {
        margin: 0 !important;
    }
}

@media only screen and (max-width: 992px) and (min-width: 769px) {

    /* Header */
    #header-nav {
        display: none !important;
    }

    #header-logo {
        left: 0px !important;
    }

    #header-mobile {
        display: flex !important;
    }

    #header-lang-div {
        margin-right: 25px !important;
    }

    /* Experience */
    #experience-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
    }

    .experience-card::after {
        display: none !important;
    }

    .experience-card::before {
        display: none !important;
    }

    /* Skills */
    #skills-main {
        flex-direction: column !important;
        max-width: 450px !important;
        margin: auto !important;
    }

    .skills-bar {
        margin: 0px !important;
        padding: 0px 25px !important;
    }

    /* Portfolio */
    #portfolio-main {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    /* Contact */
    #contact-main {
        width: fit-content !important;
        display: block !important;
        border-radius: 25px !important;
    }

    #contact-side-left {
        display: none !important;
    }
}

@media only screen and (max-width: 1399px) and (min-width: 993px) {

    /* Header */
    #header-nav {
        display: none !important;
    }

    #header-logo {
        left: 0px !important;
    }

    #header-mobile {
        display: flex !important;
    }

    #header-lang-div {
        margin-right: 25px !important;
    }

    /* Skills */
    #skills-main {
        flex-direction: column !important;
        max-width: 450px !important;
        margin: auto !important;
    }

    .skills-bar {
        margin: 0px !important;
        padding: 0px 25px !important;
    }

    /* Experience */
    #experience-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
    }

    .experience-card::after {
        display: none !important;
    }

    .experience-card::before {
        display: none !important;
    }

    /* Portfolio */
    #portfolio-main {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

@media only screen and (max-width: 1400px) {}