/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(#30351e, #505539 );
    background-size: cover;
    background-position: center;
    margin: 0;
    background-attachment: fixed;
    color: #F8F3DE;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* Align content to the top */
    min-height: 100vh;
    flex-direction: column;
}

/* Header and Navigation Bar */
header {
    width: 100%;
}

nav {
    background: #1c2010;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

nav a {
    text-decoration: none;
    color: #BEC4A0;
    font-weight: bold;
}

#farm{
    display: flex;
    justify-content: right;
    align-items: right;
}

#title {
    font-family:Baskerville;
    margin: 0;
    color: #BEC4A0;
    font-size: 2.2rem;
}

h4 {
    font-family:Baskerville;
    color: #BEC4A0;
    font-size: 1.1rem;
}

nav a {
    text-decoration: none;
    color: #BEC4A0;
    font-size:1.2em;
    font-weight:bold;
}

/* Button Styles */
button {
    font-family: Candara;
    background-color: #30351e;
    border-radius: 10px;
    height: 30px;
    width: 90px;
    border: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
    margin: 5px;
    transition: 1s;
    font-size: 1rem;
}

button:hover {
    background-color: #685C46;
    transition: 1s;
}


/* Centering buttons */


/* Main Content Area */
main {
    font-family: Candara;
    width: 100%;
    max-width: 700px; /* Further reduce the width of the main content */
    background-color: #505539;
    padding: 10px 20px; /* Reduce padding for a smaller feel */
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 60px; /* Space below the nav */
    margin-left: auto;
    margin-right: auto; /* Center the main content */
}

/* Home Section */
#contact {
    display: flex;
    justify-content: center;
    color: #BEC4A0;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

/* Welcome Section */
#thanks {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

#thanks h3 {
    font-size: 19px;
    color: #121308;
    margin-bottom: 15px;
    font-family: Candara;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
}

/* Center the image inside its container */
#thanks img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;  /* Increase margin-top for more space between image and paragraph */
    margin-bottom: 20px;  /* Optional: Add margin-bottom to create more space if necessary */
}

img {
    width: 100%;
    max-width: 600px; /* Reduce image width further */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.02);
}

/* #info styles (parent container) */
#info {
    font-size: 19px;
    color: #121308;
    margin-bottom: 15px;
    font-family: Candara;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:#121308;
}

#info a{
    text-decoration: none;
    color:#1c2010;
}

#info a:hover{
    color:#685C46;
}

#address {
    font-size: 19px;
    color: #121308;
    margin-bottom: 15px;
    font-family: Candara;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column; /* Keep text in column */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #121308;
}

#address h3 {
    margin: 10px 0; /* Add margin to space out the text */
}

#socials {
    font-size: 19px;
    color: #121308;
    margin-bottom: 15px;
    font-family: Candara;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column; /* Keep text in column */
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #121308;
}

/* Footer Styles */
/* Footer Styles */
footer {
    background-color: #1c2010;  /* Match nav background color */
    color: #BEC4A0;             /* Match nav text color */
    padding: 30px 20px;         /* Vertical padding, with some horizontal padding */
    text-align: center;
    width: 100%;                /* Ensures it takes up the full width of the viewport */
    box-sizing: border-box;    /* Include padding and borders in the total width */
    margin: 0;                  /* Remove any margin to touch the edges */
    position: relative;         /* Makes it behave normally in document flow */
}

/* Footer heading and icons */
footer h3 {
    font-family: Candara;
    font-size: 1.25rem;
    margin-bottom: 15px;
}

footer .ico {
    margin: 0 12px;
    display: inline-block;
}

footer .ico img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s ease;
}

footer .ico img:hover {
    transform: scale(1.1);
}


@media screen and (max-width: 578px) {
    nav {
        padding: 10px 10px; 
        display: flex;  
        justify-content: center;  
        align-items: center;  
        flex-direction: column;  
        width: 100%;  
    }

    #title {
        font-size: 1.9rem; 
        text-align: center;  
        margin-bottom: 10px;  
    }

    h4 {
        display: block;
        text-align: center;  
    }

    nav > section {
        width: 100%;  
        display: flex;
        flex-direction: column;  
        align-items: center;  
        gap: 10px;  
    }

    button {
        height: 35px; 
        width: 70%;   
        font-size: 1rem;  
        margin: 5px 0;  
        display: block;
        text-align: center;
    }
}