body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    font-weight: bold;
    z-index: 1000; /* Ensures the header stays above other content */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for separation */
    padding: 10px 0; /* Adds padding for spacing */
}

.container {
    width: 100%; /* Full width */
    margin: 0;
    padding: 0 ; /* Adds padding to the left and right */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    margin-right: 5px;
}

.logo img {
    height: 60px;
    width: 300px;
    margin-left: 30px;
}

.nav-links {
    display: flex;
    gap: 15px;
}

.nav-links a {
    color: #28a745; /* Link color */
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.content {
    padding: 20px 0;
    margin-top: 80px; /* Space for the fixed header */
}

/* Styles for hamburger menu and sidebar */
.hamburger-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    cursor: pointer;
}

.hamburger-menu div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
}

/* Sidebar styles */
.sidebar {
    position: fixed;
    top: 0;
    left: -250px; /* Initially hidden */
    height: 100%;
    width: 250px;
    background-color: #333;
    transition: left 0.3s ease;
    padding: 20px;
    z-index: 1000;
}

.sidebar.open {
    left: 0; /* Show the sidebar when open */
}

.sidebar .nav-links {
    flex-direction: column;
    gap: 20px;
}

.sidebar .nav-links a {
    color: white;
    font-size: 18px;
}

.sidebar .nav-links a:hover {
    text-decoration: underline;
}
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 2;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background-color: #000000;
    margin: 3px 0;
    transition: all 0.3s ease;
}


/* Responsive Styles */
@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: center;
    }
    /* Sidebar active state */
.container.active .nav-links {
    display: flex; /* Ensure nav-links are visible */
    flex-direction: column;
    gap: 15px; /* Add some spacing between links */
}

.container.active .nav-links a {
    color: #333; /* Set the desired color for nav links */
    text-decoration: none;
    padding: 10px 0;
}

.container.active .nav-links a:hover {
    color: #00B3E6; /* Hover color */
}

/* Ensure nav-links are hidden when not active */
.nav-links {
    display: none; /* Hidden by default */
}



    .container.active {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 250px;
        z-index: 1;
        overflow: auto;
    }

    .logo {
        width: 90px;
        margin: 0;
        align-self: flex-start;
    }


    .hamburger {
        display: flex;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 3;
    }

    /* When hamburger is open */
    .hamburger.open .line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.open .line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open .line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }


    .navbar {
        display: none;
        width: 100%;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: block;
        padding: 10px;
        text-align: left;
        color: #000000;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .nav-links li a:hover {
        color: #00B3E6;
    }

}


/* Media query for small screens */
@media (max-width: 768px) {
    .container {
        justify-content: space-between;
        align-items: center;
    }

    /* Hide nav-links in normal layout */
    .nav-links {
        display: none;
    }

    /* Display hamburger menu on small screens */
    .hamburger-menu {
        display: flex; /* Show hamburger on small screens */
    }

    /* Style the header content when sidebar is active */
    .header .container {
        display: block;
    }

    .header .logo img {
        width: 150px; /* Adjust logo size for small screens */

    }
}

/* Style for the Marketplace button */
.marketplace-btn {
    display: block;


    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
margin-right: 30px;
    color: white;
    background-color: aliceblue;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.marketplace-btn:hover {
    background-color: #06402b; /* Darker green on hover */
}

.marketplace-btn i {
    margin-left: 8px;
}


.footer {
    background-color: #218838;
    color: white;
    padding: 20px 0;  /* Added padding for spacing */
}

.container-footer {
    display: flex;  /* Flexbox layout for the sections */
    justify-content: space-between;  /* Evenly distribute the sections */
    width: 100%;
    max-width: 1200px;  /* Optional: Limit the width of the container */
    margin: 0 auto;  /* Center the container horizontally */
}

.footer-section {
    width: 30%;  /* Each section takes up 30% of the container */
}

.footer-section h4 {
    font-size: 18px;  /* Adjusted font size for headings */
    margin-bottom: 10px;
}

.footer-section p,
.footer-section ul {
    font-size: 14px;
    line-height: 1.6;
}

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

.footer-section ul li {
    margin-bottom: 5px;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
}

.footer-section ul li a:hover {
    text-decoration: underline;
}

.footer-section form {
    display: flex;
    flex-direction: column;
}

.footer-section input[type="email"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.footer-section button {
    padding: 10px;
    background-color: #06402b;  /* Darker green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.footer-section button:hover {
    background-color: #218838;
}

.footer-section i {
    margin-right: 12px;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container-footer {
        flex-direction: column;  /* Stack sections vertically on smaller screens */
    }

    .footer-section {
        width: 100%;  /* Each section takes up full width on small screens */
        margin-bottom: 20px;  /* Add space between sections */
    }
}



.video-background {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
}

.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 1;
}

.overlay h1 {
    font-size: 3em;
    margin: 0;
}

.overlay p {
    font-size: 1.5em;
    margin: 20px 0;
}

.cta-button {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #28a745; /* Green background */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #218838; /* Darker green on hover */
}
/* who we are and video */

.content-media-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f4f4f4; /* Optional background color */
}

.text-content {
    width: 48%;
    padding-right: 2%;
}

.media {
    width: 48%;
    padding-left: 2%;
}

.text-content h2 {
    font-size: 2em;
    color: #06402b;
    margin-bottom: 20px;
}

.text-content p {
    font-size: 1.2em;
    line-height: 1.6;
}

.media video {
    width: 100%;
    height: auto;
}

/* Responsive design for small screens */
@media (max-width: 768px) {
    .content-media-section {
        flex-direction: column; /* Stack text and media vertically */
        padding: 10px; /* Reduce padding on smaller screens */
    }

    .text-content,
    .media {
        width: 100%; /* Make both sections full width on smaller screens */
        padding-right: 0;
        padding-left: 0;
    }

    .text-content h2 {
        font-size: 1.8em; /* Adjust heading size for smaller screens */
        margin-bottom: 15px; /* Reduce margin between heading and paragraph */
    }

    .text-content p {
        font-size: 1.1em; /* Adjust paragraph font size */
    }
}
/* READ MORE IN THE HOME PAGE THE GREEN SECTION WITH 2CARDVIEWS */
.read-more {
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    color: #06402b;
    text-decoration: none;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #218838; /* Darker green on hover */
}

.arrow {
    margin-left: 18px;
    font-size: 1.2em;
    color: white;
    background-color:#06402b ;
    transition: transform 0.3s ease;
}

.read-more:hover .arrow {
    transform: translateX(5px);
}
/* THE 3CARDS BELOW THE GREEN SECTION HOME PAGE */
/* Cards Container */
/* Default Styles (Desktop) */
.cards-container {
    display: flex;
    gap: 30px; /* Space between cards */
    justify-content: center;
    flex-wrap: wrap; /* Allow cards to wrap */
    margin-top: 30px;
}

/* Individual Card */
.card {
    background-color: white;
    color: #06402b;
    border-radius: 8px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    flex: 1;
    max-width: 550px; /* Adjusted for better scaling */
    min-height: 500px; /* Increase the card height on larger screens */
    margin: 15px;
    display: flex;
    flex-direction: column; /* Ensure consistent structure */
}

/* Card Image */
.card-top {
    background-size: cover; /* Scale image to cover the entire container */
    background-position: center; /* Center the image */
    height: 70%; /* Increase height of the image on both large and small screens */
    border-radius: 8px 8px 0 0; /* Rounded corners at the top */
    width: 100%; /* Ensure the image spans the card width */
    background-repeat: no-repeat; /* Prevent image tiling */
}

/* Card Content */
.card-content {
    padding: 25px;
    flex-grow: 1; /* Allows content to expand and fill space */
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content evenly */
}

/* Green Separator */
.green-separator {
    background-color: #28a745;
    height: 6px;
    width: 60px;
    margin: 15px 0;
}

/* Responsive Styles for Smaller Screens */
@media (max-width: 768px) {
    .cards-container {
        flex-direction: column; /* Stack cards vertically on small screens */
        align-items: center; /* Center the cards */
        gap: 20px; /* Add spacing between stacked cards */
    }

    .card {
        max-width: 90%; /* Reduce width to fit small screens */
        margin: 0 auto; /* Center the card */
        display: flex;
        flex-direction: column; /* Stack content vertically */
        height: auto; /* Let the height adjust based on content */
        min-height: 500px; /* Ensure enough height for content */
    }

    .card-top {
        background-size: cover; /* Ensure the image fills the container */
        background-position: center; /* Center the image */
        width: 100%; /* Ensure the image spans the card width */
        background-repeat: no-repeat; /* Prevent tiling */
        background-image: url('{{ asset('images/dark-background.jpg') }}'); /* Ensure correct path */

    }

    .card-content {
        padding: 20px; /* Maintain padding for text content */
        flex-grow: 1; /* Allow content to grow and fill space */
    }
}

/* Adjustments for Larger Screens */
@media (min-width: 1200px) {
    .card {
        min-height: 600px; /* Increase card height on larger screens */
    }

    .card-top {
        height: 80%; /* Ensure the image is bigger and takes up more space */
    }
}
/* OUR SERVICES PAGE */
/* Services Page Styles */
/* General Layout Styles */
.services-page {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}
/* Add background color to the services div */
.services {
    background-color: #28a745; /* Light blue background color */
    padding: 40px 20px; /* Add padding to give space around the content */
    border-radius: 8px; /* Optional: Adds rounded corners to the container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow around the container */
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
    color: white; /* Dark Green */
}

.intro-text {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: white; /* Dark text color */
}




.service-item {
    margin-bottom: 50px;
    display: flex; /* Use flexbox for side-by-side layout */
    align-items: center; /* Vertically center the content */
    justify-content: space-between; /* Space out the content and image */
}

.service-item h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #06402b; /* Dark Green */
}

.service-item ul {
    list-style: none;
    padding-left: 20px;
}

.service-item ul li {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.service-item .service-video {
    width: 50%; /* Set width to 50% so it takes half the container's width */
    height: auto;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ensure the content (text) takes up the remaining space */
.service-item .service-text {
    width: 45%; /* Give the text container a width */
    padding-right: 20px; /* Optional: Adds space between text and video */
}

/* Contact Section Styles */
.contact-section {
    text-align: center;
    margin-top: 50px;
}

.contact-button {
    background-color: #06402b;
    color: white;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}

.contact-button:hover {
    background-color: #1a5c3e;
}

/* Why Services Matter Section */
.why-services-matter {
    background-color: #f4f4f9;
    padding: 40px;
    text-align: center;
}

.why-services-matter h2 {
    font-size: 2rem;
    color: #2d3e50;
    margin-bottom: 20px;
}

.why-services-matter p {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 30px;
}

.impact-areas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.impact-item {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.impact-item h3 {
    font-size: 1.5rem;
    color: #2d3e50;
    margin-bottom: 10px;
}

.impact-item p {
    color: #6c757d;
    font-size: 1rem;
}

.impact-item:hover {
    transform: translateY(-10px);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .services-page {
        padding: 20px;
    }

    .section-title {
        font-size: 2rem;
    }

    .intro-text {
        font-size: 1rem;
    }

    .service-item {
        flex-direction: column; /* Stack text and video vertically */
        align-items: flex-start; /* Align items to the left */
        justify-content: flex-start; /* Align items to the top */
    }

    .service-item .service-video {
        width: 100%; /* Make video take up full width */
        margin-top: 20px;
    }

    .service-item .service-text {
        width: 100%; /* Make text container take up full width */
        padding-right: 0;
    }

    .contact-button {
        font-size: 1rem;
        padding: 12px 24px;
    }

    /* Why Services Matter Section */
    .impact-areas {
        grid-template-columns: 1fr; /* Stack impact items vertically */
    }

    .impact-item {
        padding: 15px;
    }

    .impact-item h3 {
        font-size: 1.3rem;
    }

    .impact-item p {
        font-size: 0.95rem;
    }
}

.blog-container {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}

.blog-header {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
    border-radius: 8px;
}

/* Background Video */
.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* Content Overlay */
.header-content {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
    padding: 20px;
    border-radius: 8px;
    width: 100%;
}

.header-content h1 {
    font-size: 2.5rem;
    color: #fff;
}

.header-content p {
    font-size: 1.2rem;
    color: #d1d1d1;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .blog-header {
        height: 40vh; /* Smaller height for mobile */
    }

    .header-content h1 {
        font-size: 2rem;
    }

    .header-content p {
        font-size: 1rem;
    }
}


.blog-intro p {
    text-align: center;
    margin: 20px 0;
    font-size: 1rem;
    line-height: 1.5;
}

.latest-posts,
.upcoming-events,
.featured-story,
.subscribe {
    margin-top: 40px;
}

.latest-posts h2,
.upcoming-events h2,
.featured-story h2,
.subscribe h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 20px;
}


.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px;
}

.post-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s;
}

.post-card:hover {
    transform: translateY(-10px);
}

.post-card img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
}

.read-more {
    color: #06402b;
    text-decoration: none;
    font-weight: bold;
}

.event {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.event i {
    font-size: 2rem;
    color: #06402b;
}

.featured-story .story {
    display: flex;
    gap: 20px;
    align-items: center;
}

.subscribe {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* Center text content */
    margin: 0 auto; /* Center the section horizontally */
    max-width: 600px; /* Limit the section's width for better alignment */
}

.subscribe h2 {
    font-size: 1.8rem;
    color: #06402b;
    margin-bottom: 20px;
}

.subscribe ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.subscribe li {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the list items */
    margin-bottom: 10px;
    font-size: 1rem;
}

.subscribe li i {
    color: #06402b;
    margin-right: 10px;
    font-size: 1.2rem;
}

.subscribe-button {
    display: inline-block;
    background-color: #06402b;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    margin-top: 20px;
}

.subscribe-button:hover {
    background-color: #1a5c3e;
}

@media (max-width: 768px) {
    .posts-grid {
        grid-template-columns: 1fr; /* One column for small screens */
    }
}
/* General styles */
.featured-story {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.featured-story h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 20px;
    text-align: center;
}

.story {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.story img {
    max-width: 40%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.story-content {
    flex: 1;
}

.story-content h3 {
    font-size: 1.5rem;
    color: #06402b;
    margin-bottom: 15px;
}

.story-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

.story-content blockquote {
    font-size: 1.2rem;
    font-style: italic;
    color: #555;
    border-left: 4px solid #06402b;
    padding-left: 15px;
    margin-bottom: 15px;
}

/* Small screen adjustments */
@media screen and (max-width: 768px) {
    .story {
        flex-direction: column; /* Stack the content vertically */
    }

    .story img {
        max-width: 100%; /* Full width for images */
        margin: 0 auto; /* Center the image */
    }

    .story-content h3 {
        font-size: 1.2rem;
    }

    .story-content p,
    .story-content blockquote {
        font-size: 0.9rem;
    }

    .featured-story {
        padding: 15px; /* Reduce padding for smaller screens */
    }
}

/* RESOURCES  */
.resources {
    padding: 40px;
    background-color: #f5f5f5;
}

.resources h1 {
    font-size: 2.5rem;
    color: #06402b;
    text-align: center;
    margin-bottom: 20px;
}

.resources .intro {
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    margin-bottom: 40px;
}

.resources-section {
    margin-bottom: 40px;
}

.resources-section h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 20px;
    text-align: center;
}

.resource-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;  /* Allow items to wrap on smaller screens */
}

.resource-item img {
    width: 100%;  /* Make the image fill the available width */
    max-width: 400px;  /* Limit the maximum width */
    height: auto;  /* Adjust height according to width */
    object-fit: cover;
    border-radius: 8px;
}

.resource-item h3 {
    font-size: 1.5rem;
    color: #06402b;
    margin-bottom: 10px;
}

.resource-item p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

.resource-item ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.resource-item ul li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 5px;
}

.cta-btn {
    background-color: #06402b;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    display: inline-block;
    margin-top: 10px;
}

.cta-btn:hover {
    background-color: #1a5c3e;
}

/* General Button Style */
.cta-btn {
    background-color: #06402b;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    display: inline-block;
    margin-top: 10px;
    text-align: center;
    max-width: 100%; /* Prevent the button from exceeding the card width */
}

.cta-btn:hover {
    background-color: #1a5c3e;
}

/* Responsive Style for Small Screens */
@media (max-width: 768px) {
    .cta-btn {
        font-size: 1rem; /* Reduce font size */
        padding: 8px 15px; /* Adjust padding */
        max-width: 90%; /* Reduce button width for better fit */
    }
}

/* Extra Small Screens (e.g., mobile phones) */
@media (max-width: 480px) {
    .resource-item {
        flex-direction: column; /* Stack images and text for smaller screens */
        align-items: center;
    }

    .resource-item img {
        max-width: 100%; /* Ensure image takes full width */
    }

    .cta-btn {
        width: 90%; /* Make the button responsive and proportional */
        font-size: 0.9rem; /* Further reduce button font size */
        padding: 8px 12px; /* Smaller padding for better appearance */
        text-align: center;
    }
}


.resources-section ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.resources-section ul li {
    font-size: 1rem;
    color: #06402b;
}

.resources-section ul li a {
    text-decoration: none;
    color: #06402b;
    font-weight: bold;
}

.resources-section ul li a:hover {
    color: #1a5c3e;
}

/* Media Queries for Small Screens */
@media (max-width: 768px) {
    .resources h1 {
        font-size: 2rem;  /* Smaller title font size */
    }

    .resources .intro {
        font-size: 1rem;  /* Adjust intro text font size */
    }

    .resources-section h2 {
        font-size: 1.5rem;  /* Smaller section title */
    }

    .resource-item {
        padding: 15px;  /* Reduce padding for smaller screens */
    }

    .resource-item h3 {
        font-size: 1.25rem;  /* Adjust title size */
    }

    .resource-item p, .resource-item ul li {
        font-size: 0.9rem;  /* Adjust text size */
    }

    .cta-btn {
        font-size: 1rem;  /* Smaller button text */
        padding: 8px 16px;  /* Reduce padding */
    }
}

@media (max-width: 480px) {
    .resource-item {
        flex-direction: column;  /* Stack images and text for smaller screens */
        align-items: center;
    }

    .resource-item img {
        max-width: 100%;  /* Ensure image takes full width */
    }

    .cta-btn {
        width: 100%;  /* Make the button full width */
        text-align: center;
    }
}
/* External Resources Section */
.external {
    background-color: #f9f9f9; /* Subtle background */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
}

.external h2 {
    font-size: 2rem;
    color: #06402b; /* Same green as other headings */
    text-align: center;
    margin-bottom: 20px;
}

.external-resources-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 600px; /* Center and constrain width */
}

.external-resources-list li {
    background-color: #fff;
    margin: 10px 0;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for list items */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.external-resources-list li:hover {
    transform: translateY(-5px); /* Hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.external-resources-list a {
    text-decoration: none;
    color: #06402b;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    justify-content: space-between; /* Space between text and arrow */
    align-items: center;
    transition: color 0.3s ease;
}

.external-resources-list a:hover {
    color: #1a5c3e; /* Darker green on hover */
}

.learn-more {
    font-size: 1rem;
    color: #555;
    font-weight: normal;
    margin-left: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .external h2 {
        font-size: 1.5rem;
    }

    .external-resources-list li {
        padding: 10px 15px;
    }

    .external-resources-list a {
        font-size: 1rem;
    }

    .learn-more {
        font-size: 0.9rem;
    }
}


/* General Styling for Reports Section */
.resources-section-reports {
    padding: 40px;
    background-color: #f5f5f5;
}

.resources-section-reports h2 {
    font-size: 2.5rem;
    color: #06402b;
    text-align: center;
    margin-bottom: 30px;
}

/* Flexbox Container for Horizontal Alignment */
.resource-reports-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; /* Ensures cards wrap on smaller screens */
}


/* Individual Report Items with Background Image */
.resource-report-item {
    flex: 1;
    min-width: 300px;
    max-width: 32%;
    padding: 20px;
    border-radius: 10px;
    color: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

/* Text Content Styling for Report Items */
.resource-report-item h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.resource-report-item p {
    font-size: 1rem;
    margin-bottom: 15px;
}

.resource-report-item ul {
    list-style: none;
    padding: 0;
    color: white;
    margin-bottom: 15px;
}

.resource-report-item ul li {
    font-size: 1rem;
    color: white;
    margin-bottom: 5px;
}

/* Call-to-Action Button Styling */
.cta-btn {
    background-color: #06402b;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    display: inline-block;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Positions the button neatly */
}

.cta-btn:hover {
    background-color: #1a5c3e;
}
/* Responsive Design */
@media (max-width: 768px) {
    .resource-reports-container {
        flex-direction: column;
        align-items: center;
    }

    .resource-report-item {
        max-width: 90%; /* Adjust card size for smaller screens */
        margin-bottom: 20px;
    }
}
/* General Small Page Adjustments */
@media (max-width: 768px) {
    /* Overall Padding and Font Size Adjustments */
    .resources, .resources-section-reports, .external {
        padding: 20px; /* Reduce padding for smaller screens */
    }

    h1, h2 {
        font-size: 1.8rem; /* Smaller title sizes */
    }

    p, ul li {
        font-size: 0.9rem; /* Reduce text size */
    }

    /* Resource Section Adjustments */
    .resources .intro {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .resource-item {
        flex-direction: column; /* Stack image and text vertically */
        padding: 10px; /* Reduce padding */
        gap: 10px;
        align-items: center;
    }

    .resource-item img {
        max-width: 100%; /* Ensure image fits the container width */
    }

    .resource-item h3 {
        font-size: 1.25rem;
    }

    .resource-item ul li {
        margin-bottom: 8px; /* Adjust spacing for list items */
    }

    .cta-btn {
        font-size: 1rem;
        padding: 8px 15px;
        width: 90%; /* Full-width buttons */
        text-align: center;
    }

    /* Reports Section Adjustments */
    .resource-reports-container {
        flex-direction: column; /* Stack report items vertically */
        gap: 15px;
    }

    .resource-report-item {
        max-width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height */
        padding: 15px;
    }

    .resource-report-item h3 {
        font-size: 1.5rem;
    }

    .resource-report-item p {
        font-size: 0.9rem;
    }

    .resource-report-item ul li {
        font-size: 0.9rem;
    }

    /* External Resources Adjustments */
    .external-resources-list {
        max-width: 100%; /* Full-width list */
    }

    .external-resources-list li {
        padding: 10px;
    }

    .external-resources-list a {
        font-size: 1rem;
    }

    .learn-more {
        font-size: 0.8rem;
    }
}

/* Very Small Screens (e.g., mobile phones) */
@media (max-width: 480px) {
    h1, h2 {
        font-size: 1.5rem; /* Further reduce heading sizes */
    }

    .resources .intro {
        font-size: 0.9rem;
    }

    .resource-item {
        padding: 8px; /* Compact padding */
    }

    .resource-item h3, .resource-report-item h3 {
        font-size: 1.2rem; /* Smaller titles */
    }

    .resource-item p, .resource-report-item p {
        font-size: 0.8rem; /* Reduce paragraph size */
    }

    .resource-item ul li, .resource-report-item ul li {
        font-size: 0.8rem;
    }

    .cta-btn {
        font-size: 0.9rem;
        padding: 8px 12px;
        width: 100%; /* Full width buttons */
    }

    .resource-report-item {
        padding: 10px;
        height: auto; /* Auto-adjust height */
    }

    .external-resources-list li {
        padding: 8px 10px; /* Compact list items */
    }

    .external-resources-list a {
        font-size: 0.9rem;
    }

    .learn-more {
        font-size: 0.7rem;
    }
}


/* FAQS */


.section-title {
    font-size: 2rem;
    color: #2d3748;
    text-align: center;
    justify-content: center;
    margin-bottom: 20px;
}

.section-description {
    font-size: 1rem;
    color: #4a5568;
    text-align: center;
    margin-bottom: 30px;
}

.faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 15px;
}

.faq-question {
    font-size: 1.2rem;
    color: #06402b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 25px;
}

.faq-icon {
    background-color: #06402b;
    color: white;
    font-size: 1.5rem;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-left: 10px;
}

.faq-answer {
    display: none;
    font-size: 1rem;
    color: #4a5568;
    margin-top: 10px;
}

.cta-btn {
    display: block;
    margin: 30px auto 0;
    background-color: #06402b;
    color: white;
    padding: 10px 20px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
}

.cta-btn:hover {
    background-color: #06402b;
}




/* MARKET PLACE */
/* MARKET PLACE */
/* Marketplace Header */
.marketplace-header {
    position: relative;
    text-align: center;
    color: white;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.marketplace-header h1,
.marketplace-header p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #06402b;
}

.marketplace-header h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.marketplace-header p {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Featured Listings Section */
.featured-listings-section {
    padding: 50px 20px;
    text-align: center;
    background-color: #f8f9fa;
}

.featured-listings-section h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 40px;
    font-weight: bold;
}

.listing-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.listing-card {
    flex: 0 0 calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
    box-sizing: border-box;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.listing-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.listing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #06402b;
    font-weight: bold;
}

.listing-card p {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #333;
}

.listing-card .view-details {
    display: inline-block;
    margin-top: 10px;
    color: #06402b;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.listing-card .view-details:hover {
    color: #042d1e;
    border-color: #042d1e;
}

/* CTA Section */
.cta-section {
    background-color: #f0f8ff;
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta-section h2 {
    font-size: 36px;
    color: #2d3e50;
}

.cta-section p {
    font-size: 18px;
    color: #333;
}

/* Features Section */
.features-section {
    text-align: center;
    padding: 50px;
    background-color: #f8f8f8;
}

.features-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.feature-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 350px;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.feature-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.feature-card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 1;
    padding: 20px;
    text-align: left;
    color: black;
    border-radius: 8px;
}

.feature-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.feature-card p {
    font-size: 1rem;
    line-height: 1.6;
    background-color: rgba(6, 64, 43, 0.8);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Benefits Section */
.benefits-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #f8f9fa;
}

.benefits-title {
    font-size: 2rem;
    margin-bottom: 40px;
    color: #06402b;
    font-weight: bold;
}

.benefits-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.benefit-card {
    width: 350px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #06402b;
    font-weight: bold;
}

.benefit-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.benefit-card li {
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #333;
}

.benefit-card li strong {
    color: #06402b;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* Join Marketplace Section */
.join-marketplace {
    padding: 50px 20px;
    text-align: center;
    background-color: #f8f9fa;
}

.join-marketplace h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 30px;
    font-weight: bold;
}

.join-steps {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.seller-steps, .buyer-steps {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    width: 45%;
    padding: 30px;
    text-align: left;
    max-width: 500px;
}

.seller-steps h3, .buyer-steps h3 {
    font-size: 1.5rem;
    color: #06402b;
    margin-bottom: 20px;
    font-weight: bold;
}

.seller-steps ol, .buyer-steps ol {
    padding-left: 20px;
    list-style-type: decimal;
    color: #333;
}

.seller-steps li, .buyer-steps li {
    font-size: 1rem;
    margin-bottom: 10px;
}

.seller-steps li strong, .buyer-steps li strong {
    color: #06402b;
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
    .features-card-container {
        grid-template-columns: 1fr;
    }

    .feature-card {
        width: 100%;
        height: auto;
    }

    .listing-container {
        flex-direction: column;
    }

    .listing-card {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .join-steps {
        flex-direction: column;
        align-items: center;
    }

    .seller-steps, .buyer-steps {
        width: 90%;
    }

    .cta-section h2 {
        font-size: 28px;
    }

    .cta-section p {
        font-size: 16px;
    }
}





/* Contact Section */
.contact {
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
}

.contact h1 {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 3rem;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* Contact Form Section */
.contact-form-section {
    padding: 50px 20px;
    background-color: #fff;
    text-align: center;
}

.contact-form-section h2 {
    margin-bottom: 20px;
    font-size: 2rem;
    color: #06402b;
}

.contact-form {
    max-width: 500px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
}

.form-group textarea {
    resize: none;
}

.btn-submit {
    width: 100%;
    padding: 10px;
    background-color: #06402b;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s ease;
}

.btn-submit:hover {
    background-color: #06402b;
}

/* Success Modal */
.modal-content {
    border-radius: 10px;
}

.modal-header {
    background: #06402b;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.modal-body {
    text-align: center;
    font-size: 1.1rem;
}

.modal-footer .btn {
    background-color: #06402b;
    color: #fff;
}

.modal-footer .btn:hover {
    background-color: #06402b;
}

/* Contact Info Section */
.contact-info-section {
    padding: 40px 20px;
    background: #fff;
    text-align: center;
}

.contact-info-section h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 20px;
}

.contact-info-section p {
    font-size: 1.2rem;
    margin: 10px 0;
}

/* Map Section */
.map-section {
    padding: 40px 20px;
    text-align: center;
}

.map-section h2 {
    font-size: 2rem;
    color: #06402b;
    margin-bottom: 20px;
}

.map-container {
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border-radius: 10px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .contact h1 {
        font-size: 2rem;
        padding: 15px;
    }

    .contact-form {
        max-width: 100%;
    }

    .btn-submit {
        font-size: 1rem;
    }
}