@media screen and (min-width: 992px) and (max-width: 1200px) {
    body {
        font-size: 16px;
    }

    .logo-a:hover {
        scale: 1.1;
    }

    .contactbtn {
        padding: 1rem;
        font-size: 1rem;
    }
    .contactbtn:hover {
        background-color: var(--secondary-color);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    .buttonn i {
    }

    .buttonn i:hover {
        scale: 1.1;
    }

    /* hero-sec */

    #home {
        padding-top: 0.1vw;
    }

    .hero-sec {
        flex-direction: column; /* Stack elements vertically */
        margin: 10vw auto 0;
        padding: 5vw;
        align-items: center;
        justify-content: center;
    }

    .left-content {
        margin-top: 5vw;
    }

    .left-text h1 {
        font-size: 4.5rem; /* Smaller text size for mid-range screens */
        margin-top: -2vw;
        letter-spacing: -3px;
    }

    .left-text p {
        font-size: 1rem; /* Keep text readable */
        line-height: 1.3rem;
        margin-top: 2vw;
        text-align: left; /* Center text for smaller screens */
    }

    .left-text button {
        padding: 1rem 2.5rem;
        font-size: 1rem;
        margin-top: 2vw;
    }

    .middle-img {
        top: -20vw;
        width: 60%; /* Adjust image size for this range */
        right: 0;
        left: 0;
        margin: 0 auto;
        opacity: 0.3;
    }

    .middle-img img {
        max-width: 100%;
        height: auto;
        filter: blur(3px);
        border-radius: 10px;
    }

    .right-name h1 {
        font-size: 0.8rem;
        right: 30vw;
        top: -15vw;
        opacity: 0.2;
        letter-spacing: 0.5vw;
    }

    /* About-Sec */
    #about {
        padding-top: 5vw;
    }

    .about-content {
        flex-direction: column; /* Stack elements vertically for medium screens */
        justify-content: center;
        gap: 4vw; /* Reduce gap for more compact layout */
        margin: 2vw auto 0;
        padding: 0 4vw; /* Adjust padding for better fit */
        text-align: center; /* Center align text for improved readability */
    }

    .about-img {
        width: 250px; /* Slightly smaller image size */
        height: 250px;
        margin-bottom: 2vw;
    }

    .right-text h1 {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 1.5vw;
    }

    .right-text p {
        font-size: 1rem; /* Ensure text is readable */
        line-height: 1.6rem;
        margin-bottom: 2vw;
    }

    .about__btn {
        margin-top: 2vw; /* Adjust margin for a better layout */
    }

    /* education */
    #education {
        padding-top: 8vw;
    }
    .education-title h1 {
        font-size: 4vw;
    }
    .degree {
        font-size: 1rem;
    }

    /* portfolio */
    .portfolio-section {
        padding: 4rem 2rem; /* Adjust padding for medium screens */
    }

    .project-card {
        /* Stack items vertically */
        margin-bottom: 4rem; /* Adjust spacing */
    }

    .project-image img {
        max-width: 300px; /* Reduce max-width for medium screens */
    }

    .project-image-reverse img {
        max-width: 300px; /* Reduce max-width for reversed layout */
    }

    .project-details {
        max-width: 400px; /* Adjust width for details section */
    }

    .project-details h3 {
        font-size: 2rem; /* Adjust font size */
    }

    .tech-stack {
        /* Stack tech stack items vertically */
        gap: 10px; /* Adjust spacing */
    }

    .tech-stack li {
        padding: 8px; /* Adjust padding */
    }

    .project-features h4 {
        font-size: 1.3rem; /* Adjust font size */
    }

    .end-ine {
        font-size: 1.1rem; /* Adjust font size */
    }

    .Project-github {
        flex-direction: column; /* Stack elements vertically */
        gap: 8px; /* Adjust spacing */
    }
    .project-image-reverse::before {
        top: 52%;
        left: -60%;
        width: 70%;
    }
    .project-image::before {
        top: 52%;
        left: 90%;
        width: 70%;
    }
    /* Skills */
    #skills {
        padding-top: 0vw;
    }
    .skill-title {
        text-align: center;
    }
    .skill-title h1 {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .skill-bgc {
        height: 40vh;
        min-height: 20vh;
        max-width: 100%;
        width: 100%;
        gap: 2rem;
        flex-direction: row;
        flex-wrap: wrap;
        margin-right: 2vw;
        justify-content: center;
        align-items: center;
    }
    .contact-section {
        padding: 40px 15px; /* Adjust padding for medium screens */
    }

    .contact-header h1 {
        font-size: 2rem; /* Adjust font size */
    }

    .contact-header p {
        font-size: 1.1rem; /* Adjust font size */
        max-width: 500px; /* Adjust max-width */
    }

    .social-icon a {
        font-size: 1.6rem; /* Adjust icon size */
        margin: 0 10px; /* Adjust margin */
    }

    .contact-frm {
        max-width: 500px; /* Adjust max-width for form */
    }

    .contact-frm input,
    .contact-frm textarea {
        font-size: 0.9rem; /* Adjust font size */
    }

    .contact-frm .btn {
        padding: 12px; /* Adjust padding */
        font-size: 0.9rem; /* Adjust font size */
    }

    #result {
        font-size: 0.9rem; /* Adjust font size */
    }

    footer {
        padding: 0.8rem 0; /* Adjust padding */
        font-size: 0.8rem; /* Adjust font size */
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    /* Hide the menu button on larger screens */
    .menuBtn {
        display: block; /* Show the menu button */
    }

    /* Hide the navigation list by default */
    .ul-list {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: rgba(
            0,
            0,
            0,
            0.9
        ); /* Dark background for the dropdown */
        width: 100%;
        height: 100vh; /* Full height dropdown */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none; /* Disable interaction when hidden */
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Navigation list items */
    .ul-list li {
        margin-bottom: 1rem;
    }

    .ul-list li a {
        font-size: 1.2rem; /* Make links larger for mobile */
    }

    /* Show the ul-list when it has the "active" class */
    .ul-list.active {
        opacity: 1;
        pointer-events: all; /* Enable interaction */
        transform: translateY(0);
    }
    /* 
    HeroSection */

    .hero-sec {
        flex-direction: column; /* Stack content vertically on smaller screens */
        justify-content: center;
        min-height: 100vh; /* Ensure it still covers the full viewport */
        padding: 0 3vw;
        margin: 0 auto;
    }

    .left-text h1 {
        font-size: 4rem; /* Decrease font size for better readability */
        letter-spacing: -2px;
        margin-top: 0;
    }

    .left-text p {
        font-size: 0.9rem; /* Adjust paragraph font size */
        line-height: 1.2rem;
    }

    .left-text button {
        padding: 1.2rem 2.5rem; /* Adjust button padding */
        margin-top: 1.5rem;
    }

    .middle-img {
        top: -40%;
        left: 0;
        right: 0;
        bottom: 10%;
        z-index: -99;
    }

    .right-name h1 {
        right: 10vw; /* Adjust the positioning of the vertical text */
        font-size: 0.8rem; /* Smaller font size for vertical text */
        letter-spacing: 0.4vw;
    }

    /* Adjust animation timings to fit smaller screens */
    @keyframes headermovetop {
        0% {
            transform: translateX(
                50px
            ); /* Reduce initial translation for smaller screens */
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes headermoveside {
        0% {
            transform: translateX(-50px); /* Adjust side movement */
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes headermovee {
        0% {
            transform: translateX(50px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Adjust the space between items and layout for a smaller view */
    .left-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .right-name h1 {
        top: -10%;
        right: 10vw;
        width: 500px;
    }

    /* About-Section */

    #about {
        padding-top: 8vw; /* Adjusted top padding for medium screens */
    }

    .about-content {
        flex-direction: column; /* Stack content vertically for smaller screens */
        align-items: center; /* Center align the content */
        gap: 3vw; /* Reduce the gap between elements */
        padding: 0 5vw; /* Adjust padding to fit screen */
    }

    .img-box {
        margin-bottom: 3vw; /* Add some space below the image */
    }

    .about-img {
        width: 250px; /* Reduce image size */
        height: 250px; /* Maintain aspect ratio */
        border-radius: 50%; /* Keep the circular shape */
    }

    .bg1,
    .bg2 {
        max-width: 80px; /* Further reduce background size */
    }

    .bg1 {
        top: -5px; /* Adjust positioning for medium screens */
        left: -5px;
    }

    .bg2 {
        bottom: -5px;
        right: -5px;
    }

    .right-text h1 {
        font-size: 2rem; /* Reduce font size for heading */
        text-align: center; /* Center-align the text */
        margin-bottom: 1.5rem; /* Adjust margin */
    }

    .right-text p {
        font-size: 1rem; /* Adjust paragraph font size for readability */
        line-height: 1.4rem; /* Adjust line-height */
        text-align: center; /* Center the text */
        margin-bottom: 1.5rem; /* Adjust margin below paragraph */
    }

    .about__btn {
        padding: 0.8rem 1.5rem; /* Reduce padding for the button */
        font-size: 0.9rem; /* Adjust button font size */
        margin-top: 1.5rem; /* Adjust margin */
    }

    /* Education */

    #education {
        padding: 8vw 0; /* Reduce padding for better fit */
    }

    .education-container {
        max-width: 1000px; /* Adjust max-width to fit the medium screen */
        padding: 0 3vw; /* Adjust side padding for better fit */
    }

    .education-items {
        gap: 1.5rem; /* Reduce gap between education items */
    }

    .education-item {
        border-radius: 6px; /* Slightly reduce border-radius */
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Adjust shadow for medium screens */
        transition: transform 0.2s ease, box-shadow 0.2s ease; /* Adjust transition for smoother experience */
    }

    .education-item:hover {
        transform: translateY(-8px); /* Slightly reduce hover effect */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Adjust hover shadow */
    }

    .education-item-content {
        padding: 1.5rem; /* Reduce padding inside each education item */
    }

    .education-item-header {
        padding-bottom: 0.8rem; /* Adjust padding */
        margin-bottom: 0.8rem; /* Adjust margin */
    }

    .year {
        font-size: 1.1rem; /* Slightly reduce font size */
    }

    .degree {
        font-size: 1rem;
    }

    .major,
    .gpa,
    .institution {
        font-size: 0.9rem; /* Adjust font size for readability */
        margin: 0.4rem 0; /* Adjust margins */
    }

    .certificate {
        margin-top: 0.8rem; /* Adjust margin */
        padding: 0.4rem 0.8rem; /* Adjust padding for smaller screens */
        font-size: 0.9rem; /* Adjust font size */
        border-radius: 4px; /* Slightly reduce border radius */
    }

    .certificate:hover {
        background-color: #00509e; /* Slightly adjust hover color */
    }

    /* Projects */

    .portfolio-section {
        padding: 4rem; /* Reduced padding for smaller screens */
    }

    .line {
        display: none; /* Hide the vertical line for a cleaner look */
    }

    /* Project Card Layout */
    .project-card {
        flex-direction: column; /* Stack project image and details vertically */
        align-items: center;
        margin-bottom: 4rem;
    }
    .project-card .project-marker {
        display: none;
    }

    .project-image,
    .project-image-reverse {
        max-width: 100%; /* Make images take full width */
        margin-bottom: 2rem; /* Add space between image and text */
    }

    /* Remove line between project sections */
    .project-card:before {
        display: none; /* Hide line connecting projects */
    }
    .project-image-reverse::before {
        display: none;
    }
    .project-image::before {
        display: none;
    }

    /* Tooltip Link */

    /* Project Details for Medium Screens */
    .project-details {
        max-width: 100%; /* Full width for project details */
        text-align: center; /* Center align for smaller screens */
    }

    .project-details h3 {
        font-size: 2rem; /* Smaller title size */
    }

    .project-details p {
        font-size: 1rem; /* Adjust font size for readability */
        margin-bottom: 1.5rem;
    }

    .tech-stack {
        justify-content: center; /* Center the tech stack icons */
        gap: 10px; /* Smaller gap between tech icons */
    }

    .tech-stack li {
        padding: 8px; /* Adjust padding for smaller cards */
    }

    /* Features Section */
    .project-features {
        margin-top: 1rem;
    }

    .project-features h4 {
        font-size: 1.3rem;
    }

    .project-features ul {
        margin-left: 15px; /* Adjust indent for smaller screens */
    }
    .project-features ul {
        list-style-type: none;
    }

    /* GitHub Link Section */
    .Project-github {
        margin-top: 1.5rem; /* Reduced top margin */
    }
}

@media screen and (min-width: 600px) and (max-width: 768px) {
    .menuBtn {
        display: block; /* Show the menu button */
    }

    /* Hide the navigation list by default */
    .ul-list {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: rgba(
            0,
            0,
            0,
            0.9
        ); /* Dark background for the dropdown */
        width: 100%;
        height: 100vh; /* Full height dropdown */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none; /* Disable interaction when hidden */
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Navigation list items */
    .ul-list li {
        margin-bottom: 1rem;
    }

    .ul-list li a {
        font-size: 1.2rem; /* Make links larger for mobile */
    }

    /* Show the ul-list when it has the "active" class */
    .ul-list.active {
        opacity: 1;
        pointer-events: all; /* Enable interaction */
        transform: translateY(0);
    }

    /* HeroSection */

    .hero-sec {
        flex-direction: column; /* Stack content vertically on smaller screens */
        justify-content: center;
        min-height: 100vh; /* Ensure it still covers the full viewport */
        padding: 0 3vw;
        margin: 0 auto;
    }

    .left-text h1 {
        font-size: 4rem; /* Decrease font size for better readability */
        letter-spacing: -2px;
        margin-top: 0;
    }

    .left-text p {
        font-size: 0.9rem; /* Adjust paragraph font size */
        line-height: 1.2rem;
    }

    .left-text button {
        padding: 1rem 2rem; /* Adjust button padding */
        margin-top: 1.5rem;
    }

    .middle-img {
        top: -45%;
        left: 0;
        right: 0;
        bottom: 10%;
        z-index: -99;
    }

    .right-name h1 {
        right: 10vw; /* Adjust the positioning of the vertical text */
        font-size: 0.8rem; /* Smaller font size for vertical text */
        letter-spacing: 0.4vw;
    }

    /* Adjust animation timings to fit smaller screens */
    @keyframes headermovetop {
        0% {
            transform: translateX(
                50px
            ); /* Reduce initial translation for smaller screens */
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes headermoveside {
        0% {
            transform: translateX(-50px); /* Adjust side movement */
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes headermovee {
        0% {
            transform: translateX(50px);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .left-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .right-name h1 {
        top: -10%;
        right: 40vw;
    }

    /* About-section */
    #about {
        padding-top: 10vw;
    }

    .about-content {
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        padding: 0 4vw;
    }

    .img-box {
        margin-bottom: 2vw;
    }

    .about-img {
        width: 220px;
        height: 220px;
        border-radius: 50%;
    }

    .bg1,
    .bg2 {
        max-width: 70px;
    }

    .bg1 {
        top: 0;
        left: 0;
    }

    .bg2 {
        bottom: 0;
        right: 0;
    }

    .right-text h1 {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .right-text p {
        font-size: 0.95rem;
        line-height: 1.3rem;
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .about__btn {
        padding: 0.7rem 1.3rem;
        font-size: 0.85rem;
        margin-top: 1rem;
    }

    /* Education */
    #education {
        padding-top: 10vw;
    }

    .education-container {
        max-width: 900px;
        padding: 0 2.5vw;
    }

    .education-items {
        gap: 1rem;
    }

    .education-item {
        border-radius: 5px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .education-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
    }

    .education-item-content {
        padding: 1.2rem;
    }

    .education-item-header {
        padding-bottom: 0.6rem;
        margin-bottom: 0.6rem;
    }

    .year {
        font-size: 1rem;
    }

    .degree {
        font-size: 1rem;
    }

    .major,
    .gpa,
    .institution {
        font-size: 0.85rem;
        margin: 0.3rem 0;
    }

    .certificate {
        margin-top: 0.6rem;
        padding: 0.3rem 0.7rem;
        font-size: 0.85rem;
        border-radius: 3px;
    }

    .certificate:hover {
        background-color: #004d9c;
    }

    /* Project-section */
    .portfolio-section {
        padding-top: 10vw;
    }

    .line {
        display: none;
    }

    /* Project Card Layout */
    .project-card {
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    .project-card .project-marker {
        display: none;
    }

    .project-image,
    .project-image-reverse {
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    /* Remove line between project sections */
    .project-card:before,
    .project-image-reverse::before,
    .project-image::before {
        display: none;
    }

    /* Tooltip Link */
    .tooltip-link {
        font-size: 0.85rem;
        padding: 0.3rem 0.7rem;
    }

    /* Project Details for Medium Screens */
    .project-details {
        max-width: 100%;
        text-align: center;
    }

    .project-details h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .project-details p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    /* Tech Stack */
    .tech-stack {
        justify-content: center;
        gap: 8px;
    }

    .tech-stack li {
        padding: 6px;
    }

    /* Features Section */
    .project-features {
        margin-top: 0.8rem;
    }
    .project-features ul {
        list-style-type: none;
    }

    .project-features h4 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .project-features ul {
        margin-left: 10px;
        font-size: 0.9rem;
    }

    /* GitHub Link Section */
    .Project-github {
        margin-top: 1.2rem;
    }
    .skills-section {
        padding-top: 10vw;
    }
}

@media (max-width: 600px) {
    .menuBtn {
        display: block;
    }

    /* Hide the navigation list by default */
    .ul-list {
        position: absolute;
        top: 60px;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        width: 100%;
        height: 60vh; /* Adjusted to avoid full height for smaller screens */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 999;
    }

    .ul-list.active {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    /* Hero Section */
    .hero-sec {
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        padding: 0 3vw;
        margin: 0 auto;
    }

    .left-text h1 {
        font-size: 4rem;
        letter-spacing: -2px;
        margin-top: 0;
    }

    .left-text p {
        font-size: 0.9rem;
        line-height: 1.2rem;
    }

    .left-text button {
        padding: 0.8rem 1.2rem;
        margin-top: 1.5rem;
    }

    .middle-img {
        top: -45%;
        left: 0;
        right: 0;
        bottom: 10%;
        z-index: -99;
    }

    .right-name h1 {
        right: 10vw;
        font-size: 0.8rem;
        letter-spacing: 0.4vw;
        display: none;
    }

    /* Adjust animation timings to fit smaller screens */
    @keyframes headermovetop {
        0% {
            transform: translateX(30px);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes headermoveside {
        0% {
            transform: translateX(-30px);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes headermovee {
        0% {
            transform: translateX(30px);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .left-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .right-name h1 {
        top: -15%;
        right: 50vw;
    }

    /* About Section */
    #about {
        padding-top: 8vw;
    }

    .about-content {
        flex-direction: column;
        align-items: center;
        gap: 2vw;
        padding: 0 4vw;
    }

    .img-box {
        margin-bottom: 2vw;
    }

    .about-img {
        width: 220px;
        height: 220px;
        border-radius: 50%;
    }

    .bg1,
    .bg2 {
        max-width: 70px;
    }

    .bg1 {
        top: 0;
        left: 0;
    }

    .bg2 {
        bottom: 0;
        right: 0;
    }

    .right-text h1 {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .right-text p {
        font-size: 0.8rem;
        line-height: 1.3rem;
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .about__btn {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
        margin-top: 1rem;
    }

    /* Education */
    #education {
        padding-top: 10vw;
    }

    .education-container {
        max-width: 900px;
        padding: 0 2.5vw;
    }

    .education-items {
        gap: 1rem;
    }

    .education-item {
        border-radius: 5px;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .education-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
    }

    .education-item-content {
        padding: 1.2rem;
    }

    .education-item-header {
        padding-bottom: 0.6rem;
        margin-bottom: 0.6rem;
        justify-content: space-between;
    }

    .year {
        font-size: 1rem;
    }

    .degree {
        font-size: 0.7rem;
    }

    .major,
    .gpa,
    .institution {
        font-size: 0.85rem;
        margin: 0.3rem 0;
    }

    .certificate {
        margin-top: 0.6rem;
        padding: 0.3rem 0.7rem;
        font-size: 0.85rem;
        border-radius: 3px;
    }

    .certificate:hover {
        background-color: #004d9c;
    }

    /* Project Section */
    .portfolio-section {
        padding-top: 10vw;
    }

    .line {
        display: none;
    }

    .project-card {
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    .project-card .project-marker {
        display: none;
    }

    .project-image,
    .project-image-reverse {
        max-width: 100%;
        margin-bottom: 1.5rem;
    }

    .project-card:before,
    .project-image-reverse::before,
    .project-image::before {
        display: none;
    }

    .tooltip-link {
        font-size: 0.85rem;
        padding: 0.3rem 0.7rem;
    }

    .project-details {
        max-width: 100%;
        text-align: center;
    }

    .project-details h3 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    .project-details p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .tech-stack {
        justify-content: center;
        gap: 8px;
    }

    .tech-stack li {
        padding: 6px;
    }

    .project-features {
        margin-top: 0.8rem;
    }

    .project-features ul {
        list-style-type: none;
    }

    .project-features h4 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .project-features ul {
        margin-left: 10px;
        font-size: 0.9rem;
    }

    .Project-github {
        margin-top: 1.2rem;
    }

    .skills-section {
        padding-top: 10vw;
    }
    .skills-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}