* {
    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;
    font-family:Candara;
    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{
    font-family: Baskerville;
    display: flex;
    justify-content: right;
    align-items: right;
}

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

h4 {
    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 {
    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 */
}

/* Title styling */
#top1 {
    font-family: Candara;
    display: flex;
    justify-content: center;
    color: #BEC4A0;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

/* Section for facts */
#first {
    font-family: Candara;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

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

#first p {
    font-size: 1rem;
    color: #121308;
    line-height: 1.5;
    margin-top: 15px;
}

/* Slider container */
/* Slider Container */
.container {
    padding: 2rem;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #808367;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Slider Wrapper (this holds the slides and hides the overflow) */
/* Ensure the height of the slider wrapper is defined */
/* Slider wrapper, which contains all the slides */
/* Slider wrapper */
/* Wrapper for the entire slider */
/* Wrapper for the entire slider */
/* Wrapper for the entire slider */
/* Wrapper for the entire slider */
.slider-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Hide overflow to show one slide at a time */
    display: flex;
    justify-content: center;
    height: 400px; /* Fixed height for the slider */
}

/* The slider itself (the row of images) */
.slider {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Smooth transition for sliding */
    width: 400%; /* Total width of the slider, based on the number of slides */
}

/* Each individual slide container */
.slide-container {
    flex: 0 0 100%; /* Each slide takes up 100% width */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center;     /* Center the image vertically */
    position: relative;
    height: 100%; /* Full height of the container */

}

/* Image styling */
.slide-container img {
    width: 70%;               /* Slightly smaller than before (just a little bit bigger than the container) */
    height: 70%;              /* Slightly smaller to maintain aspect ratio */
    object-fit: contain;       /* Maintain the aspect ratio without stretching */
    object-position: center;   /* Ensure the image is centered */
    transition: transform 0.3s ease-in-out; /* Smooth transition for zoom effect */
    
}

/* Title styling for each slide */
.slider-title {
    font-family: Candara;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 19px;
    color: #121308;
    text-align: center;
    font-weight: bold;
    z-index: 2; /* Ensure title stays on top */
}

#info-text{
    font-family: Candara;
    color:#121308;
}

/* Slider navigation dots */
.slider-nav {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.slider-nav a {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #121308;
    margin: 0 5px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.slider-nav a.active {
    opacity: 1;
}

#additional {
    font-family: Candara;
    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;
}

#additional h2, #additional h3, #additional h4 {
    color: #121308;
    margin: 10px 0; /* Add margin to space out the text */
    font-size:19px;
}

.video-container {
    display: flex; /* Use flexbox for videos */
    justify-content: space-between; /* Ensure there's space between the videos */
    gap: 10px; /* Optional: space between the videos */
    width: 100%; /* Allow container to take up full width */
    flex-wrap: nowrap; /* Prevent wrapping of videos */
}

#additional ul{
    list-style: none;
    padding:10px;
}
#additional iframe {
    flex: 1; /* Allow iframes to take up available space */
    height: 315px; /* Set a consistent height */
    margin: 0 5px; /* Add small margin between the videos */
    border-radius: 10px; /* Optional: Add border-radius for styling */
    padding:10px;
    border-radius:20px;
}
footer {
    background-color: #1c2010;
    color: #BEC4A0;
    padding: 30px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    position: relative;
}

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;
    }
}