/* Gradient section background */
section {
    background: linear-gradient( 135deg, var(--light-gray) 0%, rgba(13, 110, 253, 0.1) 100% );
    padding: 2rem 0; /* Optional: adds breathing room */
}

/* Custom colored bullet points for unordered lists */
ul li::marker {
    color: var(--primary);
    font-size: 1.2em; /* Slightly larger for visibility */
}

/* Center card within .card1 container */
.card1 .card {
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Optional: subtle depth */
    border-radius: 12px;
    overflow: hidden;
}

/* Mobile-first: Stack columns in reverse on small screens */
@media (max-width: 767px) {
    section .row {
        flex-direction: column-reverse;
        text-align: center; /* Now uncommented for better mobile UX */
    }

    .card1 {
        margin-top: 4rem;
        margin-bottom: 3rem;
    }
}

/* Small circular icon with centered content */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0; /* Prevents shrinking in flex containers */
}

/* Text Wrapping & Font Best Practices */
.text-content {
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}