/* Universal reset and font setup */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Body styling */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* Ensure the body takes full height of the viewport */
    padding-bottom: 100px;  /* Adjust height to leave room for footer */
}

.set_container{
    padding :1%;
}

/* Navbar styling */
.navbar1 {
    display: flex;
    align-items: center;
    padding: 0 3%;
    background-color: black;
}

.logo1 img {
    max-width: 100%;
}

.listing1 {
    flex: 1;
    text-align: right;
    transition: 0.5s;
}

.listing1 ul li {
    display: inline-block;
    margin: 20px;
}

a {
    text-decoration: none;
    color: darkturquoise;
}

a:hover .hover11,
a:hover .hover22,
a:hover .hover33,
a:hover .hover44,
a:hover .hover55 {
    color: #fff;
    text-shadow: 0 0 10px #fff,
                 0 0 20px #fff,
                 0 0 40px #fff,
                 0 0 80px #fff,
                 0 0 120px #fff;
}

/* Main content area */
.main-content {
    flex: 1;  /* Takes the available space in the middle */
}

/* Footer styling */
.footer {
    background-color: #333333;
    text-align: center;
    width: 100%;
    padding: 20px 0;
    position: relative;
}
#group {
    font-size: 20px;
    color: mintcream;
}
#names {
    color: mintcream;
    font-style: italic;
    font-size: 15px;
    font-family:'Poppins', sans-serif;
    word-spacing: 20px;
    margin-top: 20px;
}
#course {
    font-size: 12.5px;
    font-style: italic;
    color: mintcream;
    margin-top: 30px;
}
/* Center content */
.container {
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Heading and paragraph styling */
h1 {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}

p {
    font-size: 16px;
    color: #666;
    margin-top: 20px;
}

/* Button container styling */
.button-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    text-align: center;
}

button {
    font-size: 20px;
    padding: 15px 30px;
    border-radius: 5px;
}

.active {
    background-color: #4CAF50;
    color: white;
}

/* Line styling */
.line {
    fill: none;
    stroke: slategrey;
    stroke-width: 0.5;
}

.map-legend-container {
    display: flex;
    align-items: flex-start;
    gap: 20px; /* Spacing between map and legend */
}

.map-container {
    width: 80%;  /* Increase the width to 80% or any value that suits your design */
    max-width: 800px;  /* Set a larger max-width for the map */
    margin: 0 auto;  /* Keep the centering */
    height: 800px;  /* Set a fixed height for the map */
    order: 1;
}

/* Legend styling */
.legend {
    display: flex;
    flex-direction: column; /* Stack the items vertically */
    align-items: flex-start;
    width: 30%;  /* Adjust the width of the legend */
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 8px;
    order: 2; /* Make the legend come second (on the right) */
}

.legend h4 {
    margin: 0 0 10px;
    font-weight: bold;
    color: #333;
}

.legend-item {
    display: block;  /* Make each item a block-level element */
    width: 100%;  /* Make each item take full width */
    padding: 8px;
    margin: 5px 0;
    color: #333;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
}

/* Custom colors based on your updated HTML */
.legend-item:nth-child(1) { background-color: #d4f4dd; } /* 0-20%: Light Green */
.legend-item:nth-child(2) { background-color: #a8e6b1; } /* 21-40%: Soft Green */
.legend-item:nth-child(3) { background-color: #70d492; } /* 41-60%: Medium Green */
.legend-item:nth-child(4) { background-color: #36b3b1; } /* 61-80%: Teal */
.legend-item:nth-child(5) { background-color: #0066cc; } /* 81-100%: Blue */

/* Map container styling */
.map-container {
    width: 70%;  /* Adjust the width of the map */
    order: 2; /* Make the map come second */
    /* Any other styling for your map goes here */
}
h2 {
    text-align: center;
    margin-top: 30px;
}

article {
    background-color: rgb(162, 162, 165);
    float: right;
    color: white;
    text-align: left;
    padding: 80px 70px;
    margin-right: 120px;
    margin-top: 50px;
}

#description {
    color: white;
    line-height: 25px;
    margin-top: 15px;
}