/*starting header*/
body {
            font-family: 'Times New Roman', Times, serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .header {
            background-color: white;
            color: black;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
        }
        .nav-links a {
            color: black;
            text-decoration: none;
            padding: 10px 15px;
            transition: background-color 0.3s;
        }
        .nav-links a:hover {
            background-color: #004494;
            border-radius: 5px;
        }
        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }
        .sidebar {
            position: fixed;
            top: 0;
            left: -250px;
            height: 100%;
            width: 250px;
            background-color: #2c3e50;
            padding-top: 60px;
            transition: 0.3s;
            z-index: 1;
        }
        .sidebar a {
            padding: 15px;
            text-decoration: none;
            color: white;
            display: block;
            transition: background-color 0.3s;
        }
        .sidebar a:hover {
            background-color: #004494;
        }
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            .hamburger {
                display: block;
            }
        }


            .logo {
    display: flex;
    align-items: center;
    font-size: 30px; /* Base font size */
    color: green; /* Text color */
    padding: 10px 20px; /* Padding around the logo */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    text-align: center;
}

.logo img {
    height: 65px; /* Logo height */
    width: auto; /* Maintain aspect ratio */
    margin-right: 150px; /* Space between logo and text */
    transition: transform 0.3s ease; /* Smooth scaling on hover */
}

.logo:hover img {
    transform: scale(1.1); /* Scale effect on hover */
}

.logo:hover {
    color: #ffcc00; /* Change text color on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logo {
        font-size: 30px; /* Smaller font size on mobile */
        padding: 5px; /* Reduced padding */
        
    }
    .logo img {
        height: 60px; /* Smaller logo height on mobile */
        margin-right: 28px; /* Space between logo and text */
    }
}

.image-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
}

.left-image {
    flex: 1; /* Takes up 1 part of the space */
    margin-right: 20px; /* Space between left and right images */
}

.right-images {
    flex: 1; /* Takes up 1 part of the space */
    display: flex;
    flex-direction: column; /* Stack images vertically */
}

.right-images img {
    margin-bottom: 10px; /* Space between the images */
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
}

.left-image img {
    width: 100%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .image-container {
        flex-direction: column; /* Stack images vertically on small screens */
    }

    .left-image {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Space below the left image */
    }
}