/* ==================== General Styles ==================== */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

/* Hero Section */
#hero {
    background: linear-gradient(rgba(0, 128, 0, 0.7), rgba(0, 128, 0, 0.7)), url('./images/img101.jpg') center/cover no-repeat;
    color: white;
    text-align: center;
    padding: 80px 20px;
}

#hero h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
}

#hero p {
    font-size: 1.25rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    color: whitesmoke;
}

/* About Section */
#about {
    padding: 60px 20px;
}

/* Section Title */
.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #006400; /* Dark Green */
    margin-bottom: 30px;
    text-align: center;
}

/* Section Description */
.section-description {
    font-size: 1.1rem;
    color: #555;
    text-align: center;
    margin-bottom: 40px;
}

/* Row Styling for Images and Text */
.row {
    margin-bottom: 40px;
}

.row img {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 100%; /* Scale images within their container */
    height: auto;
    object-fit: cover;
}

.row .col-md-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* Responsive Design */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }

    #hero p {
        font-size: 1rem;
    }

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

    .section-description {
        font-size: 1rem;
    }

    .row img {
        max-width: 100%; /* Ensure images scale properly */
        height: auto;
    }

}

/* //////////Activity Codes////////////// */
/* //////////Activity Codes////////////// */

/* Activity Section */
#activity {
    padding: 60px 20px;
}

.custom-activity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust the gap between items */
    justify-content: center;
}

.custom-activity-item {
    width: 450px; /* Set the width of each activity item */
    max-width: 100%; /* Ensure videos scale properly */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.custom-activity-video {
    width: 100%; /* Ensure videos take the full width of their container */
    height: 250px; /* Set a specific height for the videos to make them large enough */
    object-fit: cover;
    border: none;
}

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