/* Previous styles remain the same until .project */
         {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
      	    background-color: white; 
            font-family: 'Georgia', serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }

        .header {
            background: white;
            padding: 0.7rem;
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .site-title {
            font-size: 1rem;
            color: #2c3e50;
            text-decoration: none;
        }

/* Default Navigation Menu (Desktop View) */
.nav {
    display: flex; /* Show the menu by default on desktop */
    gap: 1rem;
    position: static; /* Normal flow for desktop */
    flex-direction: row; /* Horizontal menu */
    background: none; /* No background for desktop */
    box-shadow: none; /* No shadow for desktop */
    padding: 0;
}
        .nav a {
            color: #2c3e50;
            text-decoration: none;
            padding: 0.5rem;
            cursor: pointer;
        }

        .nav a:hover {
            color: #3498db;
        }

  .nav a.active {
    color:black;
    font-weight:600;
  }

        .burger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 10px;
            background: none;
            border: none;
        }

        .burger span {
            width: 25px;
            height: 3px;
            background: #2c3e50;
            margin: 2px 0;
            transition: all 0.3s ease;
        }

        main {
            max-width: 1000px;
            margin: 80px auto 0;
            padding: 1rem;
            min-height: calc(100vh - 80px);
        }

        .project {
            background: white;
            padding: 2rem;
            margin-bottom: 0.3rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .project-title {
            font-size: 1.5rem;
            color: #2c3e50;
            margin-bottom: 1rem;
        }
	.image-container {
            margin: 2rem 0;
            text-align: center;
        }

        .image-container img {
            max-width: 500px;
            height: auto;
            border-radius: 4px;
        }

        .image-caption {
            font-style: italic;
            color: #666;
        }

	.entry {
            	margin-bottom: 1rem;
            	padding-left: 1rem;
            	position: relative;
            }

        .entry::before {
            position: absolute;
            left: 0;
            color: #3498db;
        }
/* Sub Navigation */
    .sub-nav {
      background-color: black;
      padding: 10px 20px;
      a {color:white;};
      text-align:center;
      border-bottom: 1px solid #ddd;
    }

    .sub-nav a {
      color: white;
      text-decoration: none;
      margin: 0 10px;
    }

    .sub-nav a:hover {
      text-decoration: underline;
    }

    .year {
            font-weight: bold;
            color: #2c3e50;
            margin-right: 0.5rem;
        }
        footer {
            text-align: center;
            padding: 2rem;
            background: #f5f5f5;
        }        

/* Gallery Styles */
.gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px;
}

.gallery img {
    max-height: 250px;
    border-radius: 5px;
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel {
    display: none; /* Hidden by default */
    position: fixed; /* Ensure it's on top of everything */
    z-index: 1000;
    top: 0;
    left: 0;
    width: 95%;
    height: 100%;
    background-color: white;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack image, caption, and buttons */
    padding: 20px;
    text-align: center;
}
.carousel img {
    max-width: 90%; /* Fit image within the viewport */
    max-height: 80%; /* Prevent image from exceeding the screen height */
    object-fit: contain; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for better aesthetics */
    margin-bottom: 10px; /* Reduce the space below the image */
}

.carousel-caption {
    font-size: 18px; /* Adjust caption font size */
    margin-top: 5px; /* Further reduce the space above the caption if needed */
    text-align: center; /* Center-align caption text */
    max-width: 90%; /* Keep caption width responsive */
    word-wrap: break-word; /* Handle long captions gracefully */
}

.carousel-controls {
    display: flex; /* Position buttons beside each other */
    justify-content: center; /* Center the buttons horizontally */
    align-items: center; /* Center the buttons vertically */
    gap: 20px; /* Space between buttons */
}

.carousel .close {
    position: absolute; /* Position it relative to the carousel */
    top: 10px; /* Distance from the top */
    right: 50px; /* Distance from the right */
    background: none; /* No background color */
    color: black; /* Make the close icon black */
    border: none; /* Remove borders */
    font-size: 2rem; /* Adjust the size of the close button */
    cursor: pointer; /* Show a pointer on hover */
    z-index: 1100; /* Ensure it appears above everything else */
}

.carousel .close:hover {
    color: rgba(255, 255, 255, 0.7); /* Slightly dim on hover */
}

/* Desktop View: Arrows on the sides of the image */
@media (min-width: 768px) {
    .carousel .prev,
    .carousel .next {
        position: absolute; /* Position relative to the carousel container */
        top: 50%; /* Center vertically on the image */
        transform: translateY(-50%); /* Adjust for perfect centering */
        border: none;
	background-color:white;
        color: rgba(0, 0, 0, 0.6);
        font-size: 2rem;
        cursor: pointer;
    }

    .carousel .prev {
        left: 5%; /* Position to the left of the image */
    }

    .carousel .next {
        right: 5%; /* Position to the right of the image */
    }
    /* Default: Hide the burger menu on desktop */
.burger {
    display: none; /* Hidden on larger screens */
}
}

@media (max-width: 768px) {
            .burger {
                display: flex;
            }

            .nav {
                position: fixed;
                top: 60px;
                left: 0;
                right: 0;
                flex-direction: column;
                gap: 0;
                transform: translateX(100%);
                transition: transform 0.3s ease;
                padding: 0.5rem;
            }

            .nav.active {
                transform: translateX(0);
            }

            .nav a {
                padding: 0.5rem;
                border-bottom: 1px solid #eee;
            }

            .nav a:last-child {
                border-bottom: none;
            }

            .burger.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .burger.active span:nth-child(2) {
                opacity: 0;
            }

            .burger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }        

            .burger {
                display: flex;
            }
	    
	   .image-container img {
               max-width: 95%;
               height: auto;
	    }

	   .gallery img {
		max-width: 90%;
		height: auto;
	    }

            .nav {
                position: fixed;
                top: 60px;
                left: 0;
                right: 0;
                background: white;
                flex-direction: column;
                gap: 0;
                transform: translateX(100%);
                transition: transform 0.3s ease;
                padding: 0.5rem;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .nav.active {
                transform: translateX(0);
            }

            .nav a {
                padding: 0.5rem;
                border-bottom: 1px solid #eee;
            }

            .nav a:last-child {
                border-bottom: none;
            }

            .burger.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .burger.active span:nth-child(2) {
                opacity: 0;
            }

            .burger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }

	.entry {
    		 padding-left: 0px; /* Reduce indentation for smaller screens */
    		 margin-left: 0px;
  	}

        main ul {
    padding-left: 0px; /* Reduce indentation for smaller screens */
    margin-left:10px; /* Optional: Adjust the margin */
  }
    .carousel .close {
    	right: 25px; /* Distance from the right */
    }

    .carousel .prev,
    .carousel .next {
        position: static; /* No absolute positioning */
        margin: 10px; /* Space between buttons */
        font-size: 1rem; /* Adjust size for smaller screens */
	background-color:white;
	border:none;
	color:black;
   	bottom: 10px; /* Place arrows at the bottom of the image */
     }

    .carousel-controls {
        display: flex; /* Ensure buttons are aligned horizontally */
        justify-content: center; /* Center the buttons */
        gap: 15px; /* Space between Next/Prev buttons */
    }

}