/* General styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Navigation of pages */
header {
    display: flex; /* Uses flexbox to align children side by side */
    flex-wrap: wrap; /* Ensures elements wrap if needed */
    align-items: center; /* Vertically centers the children */
    padding: 10px 20px; /* Add padding for aesthetic spacing */
    background-color: white; /* Sets the background color of the header to white */
}

header nav ul {
    list-style: none; /* Removes bullet points from list */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    display: flex; /* Aligns the navigation items in a row */
    justify-content: space-around; /* Spaces out the navigation items */
    width: 100%; /* Ensures the navigation items take up full width */
}

header nav ul li {
    margin: 0 100px; /* Adds spacing between the links */
}

header nav ul li a {
    text-decoration: none; /* Removes underline from links */
    color: black; /* color for links */
    font-size: 24px; /* Sets a smaller font size */
    font-family: Arial, sans-serif; /* Uses Arial font, with sans-serif as a fallback */
    font-weight: bold; /* Makes the font bold */
    padding: 10px 15px; /* Adds padding around the links */
}

header #logo {
    height: 130px; /* Adjust image dimensions for the logo */
    width: 130px; /* Adjust image dimensions for the logo */
    margin-right: 20px; /* Add space to the right of the logo */
}

h1 {
    text-align: center;
}

main {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

#paragraph {
    margin: 20px 100px;
    text-align: justify;
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: darkslategray;
    line-height: 1.5;
}

p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
    color: #333;
    margin-bottom: 15px;
}

.team-member {
    width: 70%;
    margin: 20px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    opacity: 0; /* Initially hide the team members */
    animation: fadeIn 1s forwards; /* Apply fade-in animation */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.team-member img {
    width: 40%;
    height: auto;
}

.member-details {
    width: 60%;
    padding-left: 10px;
    padding-right: 10px;
}

.member-details h2 {
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #paragraph {
        margin: 20px 10px;
        font-size: 16px;
    }

    .team-member {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .team-member img {
        width: 80%;
        margin-bottom: 10px;
    }

    .member-details {
        width: 90%;
        padding: 10px;
    }
}

@media (max-width: 768px) {
    header nav ul {
        flex-direction: column; /* Stacks navigation items vertically on smaller screens */
        align-items: center;
    }

    header nav ul li {
        margin: 10px 0; /* Adds spacing between the links vertically */
    }
}