/* General layout and container styling */
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 /* Sidebar navigation styling */
 .sidebar {
     width: 200px;
     background-color: #f0f0f0;
     padding-top: 20px;
 }
 

 .sidebar ul {
     list-style-type: none;
     padding: 0;
     margin: 0;
 }
 

 .sidebar li a {
     display: block;
     padding: 10px 20px;
     text-decoration: none;
     color: #333;
 }
 

 .sidebar li a:hover {
     background-color: #ddd;
 }

 .container {
     display: flex;
     min-height: 100vh;
 }
 

 /* Main content area styling */
 .content {
     flex: 1;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }
 

 .content h1 {
     margin-top: 0;
 }
 

 /* Image container styling */
 .content .image-container {
     margin-top: 0; /* Push to the bottom */margin-top: auto;*/
     width: 100%; /* Full width of content area */
     display: flex;
     justify-content: center; /* Center images horizontally */
     align-items: flex-end; /* Align items to the end of the container */
 }
 

 .content .image-container img {
     max-width: 80%;
     height: fixed;
     margin-top: 10px;
 }
 
/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack sidebar and content vertically */
    }

    .sidebar {
        width: 100%;
        padding: 10px;
    }

    .content {
        padding: 10px;
    }

    .content .image-container img {
        max-width: 100%; /* Make image full width on small screens */
    }
}