* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Hide overflow initially */
    font-family: 'Merriweather', serif; /* Apply Merriweather by default */
}

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.95); /* Darken the video by 5% */
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh; /* Ensure the content takes at least the full viewport height */
    color: white;
    text-align: center;
    margin-top: 5%;
    padding: 0 5%; /* Add padding for responsiveness */
}

.project-container {
    background: rgba(0, 0, 0, 0.95); /* More opaque black background */
    border-radius: 50px; /* Circular border */
    padding: 20px;
	margin-top: 100px;
    margin-bottom: 20px;
    width: 80%; /* Ensure the container fits within the viewport */
    max-width: 600px; /* Ensure the container does not touch the edges of the viewport */
    min-width: 300px; /* Ensure the container has a minimum width */
    display: flex; /* Make container responsive */
    justify-content: center; /* Center the content */
}

.project-title {
    font-family: 'Merriweather', serif; /* Apply Merriweather */
    margin: 0;
    font-size: calc(1.5em + 1vw); /* Dynamically adjust font size */
    white-space: nowrap; /* Ensure text does not wrap */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    max-width: 100%; /* Ensure text fits within the container */
}

.navbar {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000; /* Ensure the menu stays on top of everything */
    width: 100%; /* Ensure the navbar is responsive */
    max-width: 90vw; /* Ensure the navbar fits within the viewport */
    padding: 0 5%;
}

.navbar .menu-button {
    background: black; /* Change background to black */
    color: white;
    border: none;
    cursor: pointer;
    padding: 15px; /* Ensure button padding adjusts */
    font-size: calc(1em + 1vw); /* Dynamically adjust font size */
    max-width: 100%; /* Ensure button fits within the viewport */
}

.navbar .dropdown {
    display: none;
    background: #333;
    position: absolute;
    top: 50px;
    left: 10px;
    list-style: none;
    padding: 0;
    width: 30%; /* Ensure the dropdown fits within the viewport */
    max-width: 90vw; /* Ensure the dropdown fits within the viewport */
    max-height: 70vh; /* Limit the height of the dropdown */
    overflow-y: auto; /* Add vertical scroll if needed */
}

.navbar .dropdown li {
    padding: 15px; /* Make dropdown items larger */
    text-align: center; /* Center-align the text */
}

.navbar .dropdown li a {
    color: white;
    text-decoration: none;
    font-size: calc(0.75em + 1vw); /* Dynamically adjust font size */
    white-space: nowrap; /* Ensure text does not wrap */
}

.placeholders-container {
    margin-top: 20px; /* Add margin to separate from content above */
    background: rgba(0, 0, 0, 0.95); /* More opaque black background */
    border-radius: 20px; /* Circular border for the container */
    padding: 30px; /* Adjust padding */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Adjust gap for larger texts */
    width: 800%; /* Ensure container fits within the viewport */
    max-width: 40%; /* Ensure container does not touch the edges of the viewport */
    min-width: 300px; /* Ensure the container has a minimum width */
    align-self: center; /* Center align the container */
}

.responsive-title {
    font-family: 'Merriweather', serif; /* Apply Merriweather */
    color: white;
    margin: 0 0 10px 0;
    font-size: calc(1em + 1vw); /* Dynamically adjust font size */
    white-space: nowrap; /* Ensure text does not wrap */
    overflow: hidden; /* Hide overflow text */
    max-width: 100%; /* Ensure text fits within container */
}

.project {
    font-size: calc(0.75em + 1vw); /* Dynamically adjust font size */
    padding: 10px;
    display: block;
    font-family: 'Zain', sans-serif; /* Apply Zain */
    color: #233EA9; /* Change color to #233EA9 */
    white-space: nowrap; /* Ensure text does not wrap */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    max-width: 100%; /* Ensure text fits within container */
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
    .navbar .menu-button {
        font-size: 0.75em; /* Adjust font size for smaller screens */
        padding: 10px; /* Adjust padding for smaller screens */
    }
    .project-container {
        padding: 15px; /* Adjust padding for smaller screens */
        max-width: 90%; /* Ensure container fits within the viewport */
    }
    .project-title {
        font-size: 1em; /* Adjust font size for smaller screens */
    }
    .placeholders-container {
        padding: 20px; /* Adjust padding for smaller screens */
        max-width: 90%; /* Ensure container fits within the viewport */
    }
}