.about-section {
    background-color: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
}

.about-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.section-title {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--color-secondary);
    border-radius: var(--radius-full);
}

.about-text p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-main);
    line-height: 1.8;
}

.about-list {
    margin-top: var(--spacing-md);
    padding-left: var(--spacing-md);
}

.about-list li {
    margin-bottom: var(--spacing-xs);
    position: relative;
    list-style: none;
}

.about-list li::before {
    content: '•';
    color: var(--color-secondary);
    font-weight: bold;
    position: absolute;
    left: -15px;
}

.about-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.about-image {
    width: 100%;
    max-width: 350px;
    object-fit: contain;
    border-radius: var(--radius-md);
    display: block;
}

/* Decorative element behind image */
.about-image-wrapper::before {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100%;
    max-width: 350px;
    height: 100%;
    border: 2px solid var(--color-primary-light);
    border-radius: var(--radius-md);
    z-index: -1;
    transform: translate(15px, 15px);
}

@media (max-width: 768px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .about-image-wrapper {
        order: -1;
        /* Image first on mobile? Or keep text first? Keeping text first is usually better for story flow, but image establishes connection. Let's try image top or inline. For now standard order. */
        order: 0;
    }
}