/* Icon & Text Component */
.md-icon-text {
    position: relative;
    height: 100%;
}

.md-icon-text__icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    /* Color is controlled via Bootstrap text-utilities (e.g. text-primary, text-secondary, …)
       on the icon wrapper. Default is set in the template. */
    color: currentColor;
}

.md-icon-text__icon--sm {
    font-size: 1.25rem;
}

.md-icon-text__icon--lg {
    font-size: 3rem;
}

.md-icon-text__icon--xl {
    font-size: 4rem;
}

/* NOTE:
   Background-based auto adjustments were removed so the chosen icon color is never overridden.
*/

/* Standard & Stacked variants */
.md-icon-text--stacked .md-icon-text__icon {
    margin-bottom: 0.75rem;
}

/* Feature box with hover effect */
.md-icon-text--feature {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0.5rem;
}

.md-icon-text--feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* H2 Title styling */
.md-icon-text__title {
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

h2.md-icon-text__title {
    font-size: 1.5rem;
    font-weight: 600;
}

h3.md-icon-text__title {
    font-size: 1.3rem;
    font-weight: 600;
}

h4.md-icon-text__title {
    font-size: 1.2rem;
    font-weight: 600;
}

h5.md-icon-text__title {
    font-size: 1.2rem;
    font-weight: 400;
}


/* Content spacing */
.md-icon-text__content {
    flex-grow: 1;
}

.md-icon-text__text {
    line-height: 1.6;
    margin-bottom: 0;
}

.md-icon-text__text p:last-child {
    margin-bottom: 0;
}

.md-icon-text__link {
    margin-top: 1rem;
}

/* Below section (when icon is with title only) */
.md-icon-text__below {
    margin-top: 1rem;
}

.md-icon-text__below .md-icon-text__text {
    margin-bottom: 0;
}

.md-icon-text__below .md-icon-text__link {
    margin-top: 1rem;
}

/* Center alignment - ensure icon is centered when stacked */
.text-center .md-icon-text__icon {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .md-icon-text__icon {
        font-size: 1.75rem;
    }

    .md-icon-text__icon--lg {
        font-size: 2.5rem;
    }

    .md-icon-text__icon--xl {
        font-size: 3rem;
    }

    .md-icon-text__title {
        font-size: 1.25rem;
    }
}