/* -- 8. Community Square Section -- */
.section-community {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.community-header {
    text-align: left;
    margin-bottom: 60px;
}

.community-header .title {
    font-size: 36px;
    font-weight: 300;
    color: #333;
    margin-bottom: 20px;
}

.community-header .subtitle {
    font-size: 16px;
    font-weight: 300;
    color: #666;
    line-height: 1.8;
    max-width: 600px;
    letter-spacing: 1px;
}

.community-content-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f4f8fb;
    /* Light blue background */
}

/* Left: Image */
.community-image-col {
    flex: 1.2;
    position: relative;
    /* overflow: hidden; */
}

.community-image-col img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Right: Content */
.community-info-col {
    flex: 1;
    padding: 60px;
    background: #f4f8fb;
    /* Match background */
}

.community-info-title {
    font-size: 24px;
    font-family: serif;
    color: #333;
    margin-bottom: 40px;
}

.community-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}

.community-feature-item {
    background: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    /* Optional rounded corners */
}

.community-feature-item .icon {
    font-size: 18px;
    color: #333;
    width: 24px;
    text-align: center;
}

.community-feature-text {
    font-size: 14px;
    color: #555;
    font-weight: 400;
}

.btn-community {
    display: inline-block;
    background: #1a2b3c;
    /* Dark navy */
    color: #fff;
    padding: 15px 50px;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-community:hover {
    background: #2c4256;
    color: #fff;
}

/* Bubbles on image (Optional: can be part of image or HTML overlaid) 
   Since we generated the image, we might rely on the image itself, 
   or add HTML overlays if the image is cleaner. 
   The generated image has "skyscrapers" but maybe no text. 
   Let's assume we rely on the image for visual.
*/

@media (max-width: 768px) {
    .community-content-wrapper {
        flex-direction: column;
    }

    .community-image-col {
        width: 100%;
    }

    .community-info-col {
        width: 100%;
        padding: 40px 20px;
    }
}