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

body {
    font-family: Arial, sans-serif;
    background-color: #d4f3e3; /* Light green */
    margin: 0;
}

/* Main Container Grid Layout */
.container {
    display: grid;
    grid-template-rows: 100px auto auto auto 50px; /* Header, image, video, content, footer */
    grid-template-columns: 200px 1fr 300px; /* Sidebar + Content + Right Sidebar */
    grid-template-areas:
        "header header header"
        "sidebar image-section right-sidebar"
        "sidebar video-section right-sidebar"
        "sidebar content right-sidebar"
        "footer footer footer";
    gap: 10px;
    height: 100vh;
    padding: 10px;
}

/* Header Section */
header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #63b976; /* Complementary green */
    color: #ffffff; /* White text */
    padding: 10px 20px;
    border-radius: 5px;
}

header .title {
    font-size: 1.5em;
}

header .logo img {
    max-height: 60px;
    border-radius: 5px;
}

/* Sidebar Section */
.sidebar {
    grid-area: sidebar;
    background-color: #2d6a4f; /* Dark green */
    color: #ffffff;
    padding: 20px;
    border-radius: 5px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    background-color: #63b976;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.sidebar ul li a:hover {
    background-color: #95d5b2;
    color: #2d6a4f;
}

/* Image Section */
.image-section {
    grid-area: image-section;
    background-color: #ffffff;
    border: 1px solid #95d5b2;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.image-section img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Video Section */
.video-section {
    grid-area: video-section;
    background-color: #f4f4f4;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.video-section h2 {
    color: #2d6a4f;
    font-size: 1.2em;
}

.video-section video {
    width: 100%;
    border-radius: 5px;
    border: 2px solid #95d5b2;
}

.video-section p {
    color: #2d6a4f;
}

/* Content Section */
.content {
    grid-area: content;
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #95d5b2;
    border-radius: 5px;
    text-align: justify;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content h2 {
    color: #2d6a4f;
    font-size: 1.5em;
}

.content p {
    color: #555555;
    line-height: 1.6;
}

/* Right Sidebar - Latest News and Upcoming Events */
.right-sidebar {
    grid-area: right-sidebar;
    background-color: #ffffff;
    padding: 20px;
    display: grid;
    grid-template-rows: auto auto; /* Two rows for the news and events */
    gap: 20px; /* Added spacing between the two sections */
    border-radius: 5px;
    border: 1px solid #ddd;
}

.latest-news, .upcoming-events {
    margin-bottom: 20px; /* Adds spacing between the two sections */
}

.latest-news p, .upcoming-events p {
    margin-bottom: 15px; /* Adds spacing between paragraphs inside each section */
    line-height: 1.6; /* Increases line height for better readability */
}

.latest-news h3, .upcoming-events h3 {
    margin-bottom: 10px; /* Spacing between heading and paragraphs */
    color: #2d6a4f;
}

/* Footer Section */
footer {
    grid-area: footer;
    background-color: #2d6a4f;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}
@media (max-width: 768px) {
    .container {
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "image-section"
            "video-section"
            "content"
            "right-sidebar"
            "footer";
        gap: 15px;
    }
 
 
    .sidebar {
        display: none; /* Hide sidebar on small screens */
    }
 
 
    .right-sidebar {
        grid-template-rows: auto auto auto; /* Adjust grid to accommodate all content */
    }
 
 
    .right-sidebar .latest-news, .right-sidebar .upcoming-events {
        margin-bottom: 15px; /* Reduces space on smaller screens */
    }
    /* Hamburger Menu */
 .hamburger {
    display: none; /* Hide by default */
    cursor: pointer;
    width: 30px;
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
 }
 
 
 .hamburger div {
    background-color: #ffffff;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    transition: all 0.3s ease;
 }
 
 
 /* When the sidebar is open */
 .sidebar.open {
    display: block; /* Show sidebar */
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #2d6a4f;
    z-index: 999;
    padding: 20px;
 }
 
 
 /* Responsive for mobile */
 @media (max-width: 768px) {
    .hamburger {
        display: flex; /* Show hamburger menu */
    }
 
 
    .sidebar {
        display: none; /* Initially hide sidebar */
    }
 
 
    .sidebar ul li {
        margin: 10px 0;
    }
 
 
    .container {
        grid-template-areas:
            "header"
            "image-section"
            "video-section"
            "content"
            "right-sidebar"
            "footer"; /* Sidebar doesn't take space in mobile view */
    }
    .hamburger.hidden {
        display: none; /* Hide the hamburger menu */
    }
 }

 
 
 }
 
 /* Desktop-Specific Styles */
@media (min-width: 769px) {
    .hamburger {
        display: none; /* Hide the hamburger menu */
    }

    header {
        display: flex;
        justify-content: space-between; /* Separate title and logo */
        align-items: center;
        padding: 10px 20px;
    }

    header .left-header {
        display: flex;
        align-items: center;
    }

    header .title {
        font-size: 1.5em;
        margin-left: 10px; /* Space between the hamburger and title */
    }

    header .logo {
        display: flex;
        justify-content: flex-end;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    /* Adjust container grid for tablet */
    .container {
        grid-template-columns: 1fr 2fr 1fr; /* Wider middle column */
        grid-template-areas:
            "header header header"
            "sidebar content right-sidebar"
            "sidebar content right-sidebar"
            "footer footer footer";
    }

    /* Sidebar adjustments */
    .sidebar {
        display: block; /* Show the sidebar on tablets */
        font-size: 1rem; /* Scale font size for readability */
    }

    /* Content adjustments */
    .content {
        padding: 20px; /* Ensure enough spacing for text */
        font-size: 1rem; /* Scale up text size slightly */
    }

    /* Right sidebar adjustments */
    .right-sidebar {
        display: block; /* Keep visible but ensure proper spacing */
        font-size: 0.9rem; /* Slightly smaller text than content */
    }

    /* Video section scaling */
    .video-section {
        padding: 20px;
        video {
            max-width: 100%; /* Ensure video scales properly */
            height: auto;
        }
    }

    /* Image section scaling */
    .image-section img {
        max-width: 100%;
        height: auto;
        margin: 0 auto; /* Center align for better visual flow */
    }

    /* Header adjustments */
    header {
        padding: 15px 20px;
    }

    header .logo img {
        max-height: 50px; /* Reduce logo size slightly */
    }

    /* Footer adjustments */
    footer {
        font-size: 0.9rem;
        padding: 10px;
    }
}