/* ============================================= */
/* === Comprehensive Learner Dashboard Section === */
/* ============================================= */
.learner-dashboard-section {
    background-color: #FAF8F5; /* Light beige background */
    padding: 60px 0;
}

.learner-dashboard-section h2 {
    font-size: 2.2rem;
    color: #3E593C; /* Dark green/charcoal text */
    margin-bottom: 50px;
    font-weight: 600;
    text-align: left; /* Title is left-aligned */
    /* Aligning with .container's effective content area by being inside a .container or matching padding */
    /* The h2 is inside a .container in the HTML, so specific padding here might not be needed if .container handles it.
       If you want to ensure it matches other sections that use padding on the h2 itself:
       max-width: 1100px;
       padding-left: 5%;
       margin-left: auto;
       margin-right: auto;
    */
}

.dashboard-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three equal columns on desktop */
    gap: 30px; /* Space between columns */
    /* max-width: 1100px; /* This should be handled by the parent .container */
    /* margin: 0 auto; /* This also should be handled by the parent .container */
    /* padding: 0 5%; /* If .container doesn't have padding, add it here */
}

.feature-item {
    /* text-align: left; /* Text within each item is left-aligned by default */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center icon and text block content */
    text-align: center; /* Center text below icon */
}

.feature-icon { /* This is an <img> tag in the HTML */
    width: 48px;
    height: 48px;
    margin-bottom: 20px; /* Space below icon */
    /* color: #3E593C; /* Target color for SVGs if they use currentColor - apply to SVG directly or use filter */
}

.feature-item h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.feature-item p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Responsive adjustments for Learner Dashboard section */
@media (max-width: 992px) { /* Tablet */
    .learner-dashboard-section h2 {
        font-size: 2rem;
        /* text-align: center; /* Optional: Center title on tablet */
        /* padding-left: 0; */
        /* padding-right: 0; */
    }
    .dashboard-features-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns */
        gap: 40px 30px; /* row-gap column-gap */
    }
    /* Feature items are already centered, which works for 2 columns */
}

@media (max-width: 768px) { /* Smaller Tablets / Mobile */
    .learner-dashboard-section h2 {
        text-align: center; /* Center title on small screens */
        padding-left: 0; /* Reset padding if it was set for left alignment */
        padding-right: 0;
        font-size: 1.8rem;
    }
    .dashboard-features-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 40px;
    }
    /* Feature items are already centered, which is good for single column */
}