/* Fix for Service Card Alignment and Visibility */
.multicolumn-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: visible !important;
    /* Allow content to be seen if overflow occurs */
    position: relative !important;
    z-index: 1;
}

.multicolumn-card .text {
    flex-grow: 1;
    z-index: 5;
    position: relative;
    width: 100%;
    /* Ensure text takes full width */
}

.multicolumn-card .button {
    margin-top: auto;
    align-self: flex-start;
    z-index: 5;
    position: relative;
}

.multicolumn-card .card-icon {
    flex-shrink: 0;
    margin-bottom: 20px;
    /* Enforce spacing */
}

/* Ensure columns clear properly */
.col-xl-4,
.col-md-6 {
    display: flex;
    flex-direction: column;
}

/* Reduce font sizes by ~10% on Laptop and smaller screens */
@media (max-width: 1440px) {
    :root {
        /* Reduced h1-h6 sizes (~10%) */
        --font-h1--size: 47px;
        /* 52 -> 46.8 */
        --font-h2--size: 38px;
        /* 42 -> 37.8 */
        --font-h3--size: 29px;
        /* 32 -> 28.8 */
        --font-h4--size: 20px;
        /* 22 -> 19.8 */
        --font-h5--size: 16px;
        /* 18 -> 16.2 */
        --font-h6--size: 14px;
        /* 15 -> 13.5 */

        /* Reduced Button sizes */
        --font-button-size: 14px;
        /* 15 -> 13.5 -> 14 */
        --style-button-height: 50px;
        /* 56 -> 50.4 */
        --style-button-slim-height: 47px;
        /* 52 -> 46.8 */
    }

    /* Utility Class Overrides (~10%) */
    .text-90 {
        font-size: 81px;
    }

    .text-80 {
        font-size: 72px;
    }

    .text-50 {
        font-size: 45px;
    }

    .text-36 {
        font-size: 32px;
    }

    .text-32 {
        font-size: 29px;
    }

    .text-30 {
        font-size: 27px;
    }

    .text-28 {
        font-size: 25px;
    }

    .text-24 {
        font-size: 22px;
    }

    .text-22 {
        font-size: 20px;
    }

    .text-20 {
        font-size: 18px;
    }

    .text-18 {
        font-size: 16px;
    }

    .text-16 {
        font-size: 14.5px;
    }

    .text-14 {
        font-size: 13px;
    }

    .text-12 {
        font-size: 11px;
    }

    /* Icon sizes reduction (~10%) */
    .icon-80 {
        min-width: 72px;
        height: 72px;
    }

    .icon-62 {
        min-width: 56px;
        height: 56px;
    }

    .icon-50 {
        min-width: 45px;
        height: 45px;
    }

    .icon-32 {
        min-width: 29px;
        height: 29px;
    }

    .icon-28 {
        min-width: 25px;
        height: 25px;
    }

    .icon-24 {
        min-width: 22px;
        height: 22px;
    }

    .icon-20 {
        min-width: 18px;
        height: 18px;
    }

    .icon-18 {
        min-width: 16px;
        height: 16px;
    }

    .icon-14 {
        min-width: 13px;
        height: 13px;
    }

    /* Adjust specific elements if they have hardcoded sizes */
    .hero-banner .heading {
        font-size: 4.5rem !important;
        /* 5rem -> 4.5rem */
    }

    .hero-banner .decorated-text span {
        font-size: 3rem !important;
        /* 3.3rem -> 2.97rem */
    }
}