body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    text-align: center;
}

.navbar a {
    float: left;
    font-size: 1rem; /* Converted to rem */
    color: white;
    text-align: center;
    padding: 1.4vh 1.6vh; /* Converted to vh for vertical responsiveness */
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 1rem; /* Converted to rem */
    border: none;
    outline: none;
    color: white;
    padding: 1.4vh 1.6vh; /* Converted to vh */
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #ff0000;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 10rem; /* Converted to rem */
    box-shadow: 0px 0.8vh 1.6vh 0px rgba(0,0,0,0.2); /* Converted to vh */
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 1.2vh 1.6vh; /* Converted to vh */
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.container {
    max-width: 80vw; /* Use vw for max-width */
    margin: 5vh auto; /* Use vh for margin */
    background-color: rgb(225, 243, 243);
    padding: 2%; /* Use percentage for padding */
    overflow: hidden; /* Prevent overflow from the container */
    max-height: 80vh; /* Adjust this value as needed */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
}

.strip-image-bottom {
    gap: 2%; /* Use percentage for gap */
    margin-bottom: 2%; /* Use percentage for margin */
    padding: 2%; /* Use percentage for padding */
    box-shadow: 0 0 1vh rgba(0,0,0,0.1); /* Convert px to vh */
    background-color: #ffffff;
    clear: both; /* Ensure strips don't overlap */
    width: 96%; /* Ensure the strip spans the full width of the container with padding */
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.text-content {
    flex: 2; /* Use flex to manage width proportions */
    text-align: left;
}

.image-content {
    flex: 1; /* Use flex to manage width proportions */
    text-align: right;
}

.image-content img {
    max-width: 100%;
    height: auto;
    display: block; /* Ensure the image does not exceed its container */
}

h1 {
    font-size: 5vh; /* Convert px to vh for font size */
    margin-bottom: 2%; /* Use percentage for margin */
    color: #444;
    text-align: center;
    width: 100%; /* Ensure the header spans the container width */
}

h2 {
    font-size: 3.6vh; /* Convert px to vh for font size */
    margin-top: 2%; /* Use percentage for margin */
    margin-bottom: 1%; /* Use percentage for margin */
    color: #555;
    text-align: center; /* Center the section headers */
    width: 100%; /* Ensure the header spans the container width */
}

p {
    font-size: 2.4vh; /* Convert px to vh for font size */
    margin-top: 1%; /* Use percentage for margin */
    margin-bottom: 2%; /* Use percentage for margin */
    color: #000000;
    text-align: left;
}

/* Center text-content when there is no image */
.no-image {
    text-align: center;
    flex: 1 0 100%;
}

/* Add this class to ensure no strips overlap */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}