section {
        font-family: 'Inter', sans-serif;
        background-color: #f0f2f5; /* Light gray background */
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Align to the top */
        min-height: 100vh;
        padding: 2rem;
        box-sizing: border-box;
    }

    /* Styles for the color palette section */
    .color-palette-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e0e0e0;
    }
    .color-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem; /* Increased gap for better spacing */
        margin-top: 1.5rem;
    }
    .color-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .color-box {
        width: 80px; /* Slightly larger boxes */
        height: 80px; /* Slightly larger boxes */
        border-radius: 50%; /* Perfect circles */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.8rem;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Keep shadow for text readability on all colors */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .color-box:hover {
        transform: translateY(-5px) scale(1.05); /* Lift and slightly enlarge on hover */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }

    /* Responsive adjustments for color palette */
    @media (max-width: 640px) {
        .color-box {
            width: 65px;
            height: 65px;
            font-size: 0.7rem;
        }
        .color-grid {
            gap: 1rem;
        }
    }