@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .hamburger-nav {
        display: flex;
        justify-content: flex-end; /* Align items to the right */
        align-items: center; /* Center items vertically */
        padding: 0 1rem; /* Add some horizontal padding */
        width: 100%; /* Ensure the navbar takes the full width */
    }

    .hamburger-icon {
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        padding: 10px;
    }

    .hamburger-icon span {
        width: 30px;
        height: 3px;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    .language-toggle {
        display: flex;
        gap: 0.5rem; /* Add spacing between language buttons */
        margin-left: 1rem;
    }

    .section {
        padding: 40px 0;
    }

    .container {
        padding: 0 1rem;
    }

    #profile {
        align-items: center;
        text-align: left;
    }

    .profile-content {
        max-width: 100%;
    }

    .profile-title-1 {
        font-size: 4rem;
    }

    .profile-title-2 {
        font-size: 1.5rem;
    }

    #about {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-content {
        flex-direction: column;
        align-items: center;
    }

    .about-text {
        text-align: left;
    }

    .about-image-container {
        max-width: 80%;
        margin-top: 2rem;
    }

    #projects .projects-grid {
        display: flex;
        flex-direction: column; /* Stack project cards vertically */
        gap: 2rem; /* Add spacing between project cards */
    }

    #projects .project-card {
        flex-direction: column; /* Stack image and text vertically */
        align-items: flex-start; /* Align content to the left */
        text-align: left; /* Align text to the left */
        padding: 0rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Keep shadow for better visibility */
    }

    .project-image-container i {
        display: block; /* Ensure the icon behaves like a block element */
        margin-left: 1rem; /* Reset any extra left margin */
        margin-top: 2rem; /* Keep the top margin */
        margin-bottom: 1rem; /* Keep the bottom margin */
        font-size: 3rem; /* Keep the font size */
        text-align: left; /* Align the content inside the icon to the left */
    }

    #projects .project-details {
        text-align: left; /* Align text to the left */
        padding: 1; 
    }

    #projects .project-title-card {
        font-size: 1.2rem; /* Adjust font size for smaller screens */
        margin-bottom: 0.5rem; /* Add spacing below the title */
        color: rgb(221, 192, 29); /* Optional: Add color to the title */
    }

    #projects .project-description {
        font-size: 1rem; /* Adjust font size for readability */
        line-height: 1.5; /* Improve readability */
        margin-bottom: 1rem; /* Add spacing below the description */
    }

    #projects .project-tech-list {
        display: flex;
        flex-wrap: wrap; /* Allow tech items to wrap to the next line */
        justify-content: flex-start; /* Align the tech list to the left */
        gap: 0.5rem; /* Add spacing between tech items */
        margin-bottom: 1rem; /* Add spacing below the tech list */
    }

    #projects .project-tech-list li {
        background-color: rgba(255, 255, 255, 0.1); /* Add a subtle background */
        color: rgb(221, 192, 29); /* Yellow text color */
        padding: 0.5rem 0.75rem; /* Add padding for better spacing */
        border-radius: 1rem; /* Add rounded corners */
        font-size: 0.8rem; /* Adjust font size */
    }

    #projects .project-links {
        display: flex;
        flex-direction: row; /* Display links horizontally */
        gap: 1rem; /* Add spacing between links */
        justify-content: flex-start; /* Align links to the left */
        margin-bottom: 1rem;
    }

    #projects .project-github-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem; /* Add spacing between the icon and text */
        color: white;
        font-size: 1rem; /* Adjust font size */
        text-decoration: none;
        transition: color 0.3s ease;
    }

    #projects .project-github-link:hover {
        color: rgb(221, 192, 29); /* Change color on hover */
    }

    #contact {
        text-align: center;
    }

    .menu-links.open {
        max-height: 500px;
    }

    #impressum {
        width: 100%; /* Make the content take up the full width */
        padding: 1rem; /* Add padding for spacing */
        margin: 0; /* Remove any horizontal margins */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }

    #datenschutz {
        width: 100%; /* Make the content take up the full width */
        padding: 1rem; /* Add padding for spacing */
        margin: 0; /* Remove any horizontal margins */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }
}

@media (min-width: 769px) {
    header {
        width: 100%; /* Stelle sicher, dass die Navbar die gesamte Breite einnimmt */
        padding: 0; /* Entferne unnötige Abstände */
    }

    .hamburger-nav {
        display: none;
    }

    .desktop-nav {
        display: flex;
        justify-content: flex-end; /* Positioniere die Links und den Language Switch ganz rechts */
        align-items: center; /* Zentriere die Elemente vertikal */
        gap: 3rem; /* Füge Abstand zwischen den Links hinzu */
        width: 100%; /* Stelle sicher, dass die Navbar die volle Breite einnimmt */
    }

    .desktop-nav .nav-links a {
        font-size: 1rem; /* Reduce the font size */
        color: white; /* Ensure the text color is visible */
        text-decoration: none; /* Remove underline */
    }

    .desktop-nav .nav-links a:hover {
        color: rgb(221, 192, 29); /* Optional: Add hover effect */
    }

    .nav-container {
        max-width: 1900px; /* Vergrößere die maximale Breite des Inhalts */
        margin: 0 auto; /* Zentriere den Inhalt der Navbar */
        padding: 0 3rem; /* Füge horizontalen Abstand hinzu */
        display: flex;
        justify-content: space-between; /* Verteile das Logo und die Links */
        align-items: center; /* Zentriere die Elemente vertikal */
    }

    .nav-links a {
        opacity: 0; /* Start hidden */
        transform: translateY(-80px); /* Start slightly above */
        animation: slideDown 0.8s ease forwards; /* Apply the animation */
    }

    .language-toggle {
        display: flex;
        gap: 0.5rem; /* Add spacing between language buttons */
        margin-left: 2rem; /* Optional: Add spacing between the nav-links and language switcher */
    }

    .logo {
        margin-right: auto; /* Positioniere das Logo ganz links */
    }

    .logo img {
        width: 80px; /* Passe die Breite des Logos an */
        height: auto; /* Behalte das Seitenverhältnis bei */
    }

    .section {
        padding: 2rem 0; /* Reduziere den vertikalen Abstand zwischen allen Sektionen */
    }

    .container {
        max-width: 1900px; /* Adjust as needed */
        margin: 0 auto;
        padding: 0 3rem;
        box-sizing: border-box;
    }

    #profile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start; /* Align content to the left */
        padding: 0 2rem; /* Add padding for spacing */
        margin: 0 auto; /* Center the section horizontally */
        margin-left: -2rem; /* Move the section 2rem to the left */
        margin-top: 5rem;
        width: 100%; /* Ensure the section takes the full width */
        max-width: 1400px; /* Increase the maximum width */
        box-sizing: border-box; /* Include padding in the width calculation */
    }

    .profile-title-1 {
        font-family: Lato, sans-serif;
        font-weight: 600;
        font-size: 6rem;
        margin-bottom: 1rem;
    }
    
    .profile-title-2 {
        font-family: Lato, sans-serif;
        font-weight: 600;
        font-size: 3rem;
        margin-bottom: 1rem;
        width: 100%; /* Ensure the title takes the full width */
        white-space: nowrap; /* Prevent the text from breaking into multiple lines */
        box-sizing: border-box; /* Include padding in the width calculation */
    }

    .section-text {
        max-width: 680px; /* Begrenze die Breite des Inhalts */
        line-height: 1.7;
        font-size: 1.2rem;
    }

    .profile-content {
        max-width: 700px; /* Begrenze die Breite des Inhalts */
        text-align: left; /* Text linksbündig ausrichten */
    }

    #about {
        margin-top: 0; /* Entferne den oberen Abstand der About Section */
    }

    .about-content {
        flex-direction: row; /* Display text and image side by side */
        align-items: center; /* Align items vertically */
        justify-content: space-between; /* Add space between text and image */
        gap: 1rem; /* Add spacing between text and image */
        max-width: 1000px; /* Reduce the overall width of the About section */
        margin: 0 auto; /* Center the section horizontally */
    }

    .about-text {
        text-align: left; /* Align text to the left */
        max-width: 60%; /* Limit the text container to half the width */
    }

    .about-image-container {
        max-width: 45%; /* Reduce the width of the image container */
        margin-top: 5rem;
        margin-right: 2rem;
    }

    .about-image-container img {
        width: 100%; /* Ensure the image scales properly */
        height: auto; /* Maintain aspect ratio */
        max-height: 300px; /* Limit the height of the image */
        border-radius: 0.75rem; /* Optional: Add rounded corners */
    }


    #projects {
        padding-top: 10rem; /* Optional: Fügt Abstand innerhalb der Other Projects hinzu */
    }


    #projects .container {
        max-width: 1200px; /* Reduce the maximum width of the projects section */
        margin: 0 auto; /* Center the section horizontally */
        padding: 0 2rem; /* Add horizontal padding for spacing */
    }

    .project-item {
        position: relative; /* Ensure the project item is positioned relative to its content */
        display: flex;
        flex-direction: column; /* Stack the title and details vertically */
        width: 100%; /* Ensure the project item spans the full width */
        gap: 1rem; /* Add spacing between the title and details */
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .project-title {
        position: relative; /* Ensure the title stays within the project item */
        display: flex;
        justify-content: space-between; /* Align the arrow icon to the right */
        align-items: center; /* Vertically center the text and arrow */
        width: 100%; /* Make the title span the full width */
        color: rgb(221, 192, 29);
        font-size: 1rem;
        border: none;
        cursor: pointer;
        outline: none;
        transition: background-color 0.3s ease;
    }
    
    .project-title:hover {
        background-color: rgb(34, 36, 78);
    }
    
    .project-list {
        display: flex;
        flex-direction: column; /* Stack project items vertically */
        gap: 1.5rem; /* Add spacing between project items */
    }

    .project-content {
        flex-direction: row; /* Align text and image side by side */
        align-items: flex-start; /* Align text and image at the top */
        gap: 2rem; /* Add spacing between text and image */
    }

    .project-text {
        flex: 1; /* Allow the text to take up available space */
        font-size: 0.9rem;
    }

    .project-image-container {
        perspective: 1000px; /* Enable 3D perspective */
        display: flex;
        flex: 1; /* Allow the image to take up available space */
        flex-direction: column; /* Stack images vertically */
        gap: 1rem;
        max-width: 50%; /* Limit the width of the image container */
        justify-content: center; /* Center the image horizontally */
        align-items: flex-start; /* Align the image at the top */
    }

    .project-image {
        width: 100%; /* Ensure the image fills the container */
        height: auto; /* Maintain aspect ratio */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .project-image:hover {
        transform: rotateY(10deg) rotateX(5deg); /* Add a 3D tilt */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
}