/* General Body and Main Container Styling */
body {
    background-color: #f7f3e9; /* Background */
    font-family: 'Inter', sans-serif;
    color: #2b1b11; /* Logo Brown as general text color */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header and Hero Section */
.hero-section {
    position: relative;
    height: 60vh; /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #f7f3e9; /* Light text for contrast */
    background-image:
        linear-gradient(rgba(180, 105, 59, 0.5),rgba(32, 18, 8, 0.5)),
        url(img/riverscenelg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.logo {
    width: 300px;
    height: auto;
    margin-bottom: 5px;
}

.hero-content {
    /* background-color: rgba(43, 27, 17, 0.7); Semi-transparent overlay for text readability */
    padding: 20px 40px;
    border-radius: 15px;
}

.hero-section h1 {
    font-family: 'Cabin Sketch', cursive;
    font-size: 2rem;
    margin-bottom: 0;
}

/* Main Content Sections */
.content-section {
    background-color: #e0d8c9; /* Light beige background */
    padding: 40px;
    border: 1px solid #c0b299; /* Subtle separator line */
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
}
/* Subtle Separator Line */
.separator-line {
    width: 100%;
    height: 1px;
    background-color: #c0b299; /* Subtle separator line */
    margin: 15px auto;
}

.section-title {
    font-size: 2.5rem;
    color: #2b1b11;
    margin-top: 0;
    text-align: center;
}

.cabin-sketch {
    font-family: 'Cabin Sketch', cursive;
}

/* Button Styling */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2b1b11; /* Logo Brown */
    color: #f7f3e9;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #55771a; /* Darker olive green on hover */
}

/* Video Section Specifics */
.video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

.video-item {
    flex: 1 1 300px; /* Flexbox item that grows and shrinks, with a base width of 300px */
    max-width: 350px;
    text-align: center;
}

.video-item iframe {
    width: 100%;
    height: 200px;
    border-radius: 8px;
}

/* Styling for the content with text and image */
.content-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 20px; /* Adds space between the image and text */
    margin-top: 20px;
    text-align: left; /* Aligns the text to the left */
}

/* Image Styling */
.section-image {
    width: 200px; /* Adjust the image size as needed */
    height: auto;
    border-radius: 8px; /* Optional: adds rounded corners to the image */
    float: left; /* This is what creates the text wrap effect */
    margin-right: 20px; /* Space between the image and the text */
}
.section-icon {
    width: 32px; /* Adjust the icon size as needed */
    height: auto;
}

/* For smaller screens, we'll stack the image and text */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
        align-items: center; /* Centers items when stacked */
    }

    .section-image {
        margin: 0 0 15px 0; /* Adjust margin for stacking */
    }

    .content-wrapper p {
        text-align: center;
    }
}