@media (max-width: 768px) {

    body {
        background: linear-gradient(to left, rgba(88, 8, 142, 0.864), rgb(64, 101, 187), rgb(41, 83, 233));
    }


    nav {
        justify-content: center;
        height: 7.5vmax;
    }

    .nav-links {
        display: none;
        background: linear-gradient(to right, #2a41a3, #8319ec);
        padding: 1rem;
        z-index: 10;
        border-radius: 10px;
        position: absolute;
        top: 62px;
        left: 8px;
        width: 25vmax;
        transition: transform 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    nav .nav-links a {
        font-size: 2.5vmax;
    }

    nav .nav-links ul {
        gap: 3vmax;
    }

    .nav-links a:active .nav-links {
        display: none;
    }

    .nav-links.active {
        display: flex;
    }

    nav #menu-icon {
        display: block;
        position: absolute;
        left: 25px;
    }

    nav #menu-icon i {
        font-size: 3.5vmax;
    }

    nav ul {
        flex-direction: column;
    }

    nav #logo-img {
        width: 8vmax;
        position: relative;
        margin-right: 37px;
    }

    /* hero / profile section */

    header {
        margin-top: 8vmax;
    }

    .profile {
        padding: 3vmax 0 2vmax 0;
        gap: 2.3vmax;
    }

    .profile img {
        width: 17vmax;
    }


    .profile h1 {
        font-size: 4vmax;
    }

    .profile p {
        width: 85%;
        font-size: 2vmax;
    }

    .profile button {
        font-size: 1.5vmax;
    }


    /* education */

    /* education card styling */

    .education .edu {
        width: 85%;
    }

    .edu-top {
        gap: 1vmax;
    }

    .edu-top .vertical-line {
        height: 5vmax;
    }

    .edu-logo {
        margin-right: 1.5vmax;
    }

    .edu-logo img {
        width: 5.5vmax;
    }


    /* skills */
    .skills .skills-container {
        width: 82%;
        padding: 1vmax 1.5vmax;
    }

    .items a img {
        filter: grayscale(35%) brightness(1);
    }

    /* certifications */

    .certificate {
        width: 80%;
        display: flex;
        flex-direction: column;
        padding: 1.4vmax;
    }

    .certificate .cert-pic {
        width: 100%;
    }

    .certificate .cert-detail {
        width: 100%;
        gap: 1.8vmax;
    }

    .cert-detail .vertical-line {
        /* display: none; */
    }

    .cert-detail .cert-logo {
        /* width: none; */

    }

    .cert-logo img {
        width: 4vmax;
        /* display: none; */
    }

    .sub-detail button {
        font-size: 1.1vmax;
        margin-top: 3vmax;
    }




    /* project.. */

    /* project card styling*/

    .projects .proj {
        width: 82%;
        flex-direction: column;
    }

    .proj #projPic {
        width: 98%;
    }

    .proj #projPic img {
        height: 100%;
        width: 100%;
    }

    .proj #projDescription {
        width: 98%;
        gap: 0.5vmax;
        padding: 1vmax;
    }

    .proj-techStack {
        width: 92%;
    }

    .proj-techStack .tools {
        gap: 1.6vmax;
    }

    .git-link i {
        font-size: 3.5vmax;
    }


    .proj .proj-techStack button {
        font-size: 1.2vmax;
        padding: 0.3rem 0.5rem;
    }


    /* Footer */



    footer .contact {
        flex-direction: column;
        width: 83%;
        gap: 4vmax;
        padding: 2vmax 0 2vmax 0;
    }


    .contact .left {
        width: 90%;
        text-align: center;
    }

    .contact .left img {
        width: 7vmax;
    }

    .contact .right {
        width: 60%;
    }

    .contact .social-links {
        gap: 2vmax;
    }

    .contact .social-links .icon {
        font-size: 3vmax;
    }

    .contact .right .email button {
        font-size: 1.5vmax;
        padding: 1vmax;
    }



}