style.css

/* Add a custom font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Set the font for the entire page */
body {
    font-family: 'Montserrat', sans-serif;
}

/* Style the navigation bar */
.navbar {
    background-color: #3498db; /* Change the background color */
    box-shadow: 2px 2px 10px #333; /* Add a subtle shadow */
}

.navbar a {
    color: #fff; /* Change the text color */
}

/* Style the header */
header {
    background-image: url(header-bg.jpg); /* Add a background image */
    background-size: cover; /* Make the image cover the entire header */
    background-position: center; /* Center the image */
    min-height: 350px; /* Increase the height of the header */
    display: flex; /* Center the content
/* Add a custom font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Set the font for the entire page */
body {
    font-family: 'Montserrat', sans-serif;
}

/* Style the navigation bar */
.navbar {
    background-color: #3498db; /* Change the background color */
    box-shadow: 2px 2px 10px #333; /* Add a subtle shadow */
}

.navbar a {
    color: #fff; /* Change the text color */
}

/* Style the header */
header {
    background-image: url(header-bg.jpg); /* Add a background image */
    background-size: cover; /* Make the image cover the entire header */
    background-position: center; /* Center the image */
    min-height: 350px; /* Increase the height of the header */
    display: flex; /* Center the content
    background-color: #3498db; /* Change the background color */
    color: #fff; /* Change the text color */
    padding: 25px 0; /* Add some padding to the top and bottom */
}

/* Style the copyright text */
footer p {
    margin-bottom: 0; /* Remove the bottom margin */
}

/* Style the social links */
footer .social-links {
    display: flex; /* Display the links in a row */
    justify-content: flex-end; /* Align the links to the right */
}

footer .social-links li {
    list-style: none; /* Remove the bullet points */
    margin-left: 10px; /* Add some space between the links */
}

footer .social-links a {
    color: #fff; /* Change the link color */
    text-decoration: none; /* Remove the underline */
    transition: color 0.2s; /* Add a transition to the color change on hover */
}

footer .social-links a:hover {
    color: #3498db; /* Change the link color on hover */
}