body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;

}

/* Container Styles */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Header Styles */
.main-header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

/* Header Text Styles */
.main-header h1 {
    margin: 0;
}

.main-header p {
    margin: 5px 0 0;
}

/* Navigation */

.navbar {
    background-color: #333;
    overflow: hidden;
    display: flex;
    justify-content: center; /* Center the items horizontally */
}

.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
    margin-right: 30px;
}

.navbar a:hover {
    background-color: #ddd; /* Change the background color on hover */
    color: black;
}

/* Styling for the footer */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

/* Styling for individual columns within the footer */
.column {
    width: 30%; /* Each column takes up 30% of the width */
    display: inline-block; /* Display columns side by side */
    vertical-align: top; /* Align columns to the top */
    text-align: left; /* Left-align text within columns */
    padding: 10px; /* Add padding for spacing */
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
.column {
width: 100%; /* Make columns take up full width on small screens */
display: block; /* Display columns as blocks (stacked) */
  }
}