/* About Section Styles */
.about-section {
    padding: 100px 0;
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.blob-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.blob-image {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;
    background-image: url('assets/imgs/team_comenwork.webp');
    background-size: cover;
    background-position: center;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    border: 8px solid white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease-in-out;
    animation: splash-ripple 10s infinite alternate;
}

@keyframes splash-ripple {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    33% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    66% {
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

.about-features-minimal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.about-mini-card {
    background: #fbfbfb;
    padding: 20px;
    border-radius: 15px;
    border-left: 4px solid var(--primary-pink);
}

@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-content {
        text-align: center;
    }
}

/* Community & Stats */
.community-overlay {
    max-width: 100%;
    padding: 40px;
}

.community-overlay h2 {
    font-size: 3rem;
    color: white;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    font-weight: 800;
}

.community-stats {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.about-section {
    width: 100%;
    margin: 0;
    padding: 100px 0;
    clear: both;
}