/* Font Face */
@font-face {
    font-family: 'LibreBaskerville';
    src: url('fonts/LibreBaskerville-Regular.ttf') format('truetype');
}

/* Root Variables */
:root {
    --background: #ede9ee;
    --text: #023C23;
    --font-family: 'LibreBaskerville', Arial, sans-serif;
}

/* Body Styles */
body {
    color: var(--text);
    margin: 0;
    padding: 0;
    background-color: var(--background);
    font-family: var(--font-family); 
}

/* Header Styles */
header {
    background-color: var(--background);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.header-content {
    display: flex;
    flex-direction: row; /* Align items in a row */
    justify-content: space-between; /* Space between logo and nav */
    align-items: center; /* Center items vertically */
    width: 100%; /* Full width */
    max-width: 1200px; /* Optional: Limit maximum width for larger screens */
    margin: 0 auto; /* Center align on larger screens */
    padding: 0 20px; /* Add padding for some space on smaller screens */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

.logo img {
    max-width: 100%; /* Ensure the logo scales properly */
    height: auto; /* Maintain aspect ratio */
}

nav {
    display: flex;
    flex-direction: column; /* Stack the links vertically */
    align-items: flex-end; /* Align links to the right */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack the links vertically */
    gap: 10px; /* Space between list items */
}

nav ul li {
    margin: 0;
}

nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 18px;
}

.banner {
    margin-top: 60px; /* Space between navigation and banner */
    margin-bottom: 60px;
    text-align: center; /* Center-align banner content */
}

/* Mobile Styles */
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .header-content {
        flex-direction: column; /* Stack logo and nav vertically */
        align-items: center; /* Center items horizontally */
    }

    nav ul {
        flex-direction: column; /* Stack nav items vertically */
        gap: 5px; /* Adjust space between items for mobile */
    }
}

/* Main Content Styles */
main {
    max-width: 100%; 
}

/* About Section */
.about {
    background-color: var(--background);
    color: var(--text);
    border-radius: 0; /* Remove rounded corners */
}

.quote {
    font-size: 52px;
    margin: 10px;
    text-align: center;
}

#about-text {
    color: var(--background);
}

.about-content {
    display: flex;
    gap: 20px;
    align-items: center; /* Vertically center the content */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the text vertically */
}

.right-column {
    flex: 2;
    max-width: 50%; /* Adjust this value as needed */
    margin: 100px; /* Adjust this value as needed */
}

/* Mobile Styles for About Section */
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .about-content {
        flex-direction: column; /* Stack items vertically */
        gap: 10px; /* Adjust gap for smaller screens */
    }

    .left-column, .right-column {
        max-width: 100%; /* Allow columns to take full width */
        margin: 20px; /* Adjust margin for smaller screens */
    }

    .right-column {
        margin: 20px 0; /* Adjust margin specifically for top and bottom */
    }
}

.about h1 {
    color: var(--text);
    text-align: center;
}

.about img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* Connect Section */
.connect-content {
    display: flex;
    gap: 20px;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Center content horizontally */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.connect {
    background-color: var(--background);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    color: var(--text);
    max-width: 100%; /* Ensure it doesn’t exceed container width */
    box-sizing: border-box; /* Include padding in width calculations */
}

/* Connect Text Styles */
#connect-text {
    color: var(--background);
}

/* Flexbox setup for divs inside .connect */
.connect > div {
    flex: 1;
    margin-right: 20px;
}

.connect div:last-child {
    margin-right: 0;
}

.connect a {
    color: var(--text);
    text-decoration: none;
    display: block; 
    margin-bottom: 10px;
}

.links, .form-container {
    flex: 1; /* Make both links and form-container take equal space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* Ensure links and form-container are centered */
.links p {
    margin: 0 0 10px 0;
    text-align: center;
}

/* Mobile Styles for Connect Section */
@media (max-width: 768px) { /* Adjust this breakpoint as needed */
    .connect {
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center align children */
        padding: 20px; /* Add padding for better spacing on small screens */
    }

    .connect > div {
        margin: 10px 0; /* Adjust margin for vertical stacking */
        margin-right: 0; /* Remove right margin */
    }
}


/* Footer Styles */
footer {
    background-color: var(--background);
    text-align: center;
    padding: 10px 10px;
    color: var(--text); /* Ensure text color is consistent */
}

/* Ensure images are responsive and fit within their container */
.content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images */
}

.banner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images */
}