/* General Styles */
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f0f0f0; /* Light grey background for contrast */
}
/* Header Styles */
.header-content {
display: flex;
justify-content: space-between; /* Aligns items on left and right */
align-items: center;
padding: 20px; /* Padding around header content */
background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
color: #ffffff; /* Text color */
border-radius: 25px; /* Rounded corners for capsule look */
margin: 10px; /* Space around the header */
position: relative; /* Ensure it stays at the top */
z-index: 1000; /* Ensure it stays above other elements */
}
.logo img {
height: 60px; /* Adjust size as needed */
border-radius: 12.5px; /* Round the logo corners for capsule style */
}
.menu {
display: flex;
flex: 1;
justify-content: flex-end; /* Ensure the menu aligns to the right */
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* Keeps items in a row */
}
.menu ul li {
margin-left: 20px; /* Space between menu items */
}
.menu ul li a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
/* Hamburger Menu Styles */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger div {
width: 25px;
height: 3px;
background-color: #ffffff;
margin: 5px;
}
@media (max-width: 768px) {
.menu ul {
display: none;
flex-direction: column;
width: 100%;
position: absolute;
top: calc(100% + 10px); /* Ensure space below the header */
left: 0;
background: rgba(0, 0, 0, 0.8);
text-align: center;
z-index: 1000;
border-radius: 0 0 25px 25px; /* Round bottom corners for capsule look */
}
.menu ul.show {
display: flex; /* Show menu when toggled */
}
.menu ul li {
margin: 10px 0;
}
.hamburger {
display: flex;
}
}
/* General Styles */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* Footer Styles */
.site-footer {
background-color: #141414;
color: #fff;
padding: 20px 0;
text-align: center;
}
.footer-container {
display: flex;
flex-direction: column;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-logo img {
width: 150px; /* Adjust as needed */
margin-bottom: 20px;
}
.footer-about {
margin-bottom: 20px;
text-align: center;
}
.footer-about h2 {
margin-bottom: 10px;
font-size: 1.5rem;
}
.footer-about p {
margin: 0;
max-width: 500px;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.footer-links ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.footer-social {
margin-bottom: 20px;
}
.footer-social a {
color: #fff;
margin: 0 10px;
text-decoration: none;
font-weight: bold;
}
.footer-newsletter {
display: none; /* Hide the newsletter section */
}
.footer-contact p {
margin: 0;
padding: 5px 0;
line-height: 1.2; /* Adjust line-height for closer spacing */
}
.footer-contact a {
color: #fff; /* Ensures the email link matches the footer color */
text-decoration: none;
}
.footer-copyright {
margin-top: 20px;
}
.footer-copyright p {
margin: 0;
font-size: 0.875rem;
}
/* Responsive Styles */
@media (max-width: 768px) {
.footer-links ul {
flex-direction: column;
gap: 10px;
}
}