/* HOMEPAGE SERVICE CARDS
   Scoped to the Avada container .service-card_wrapper.
   Sprites are 322 × 345. The original rules show a 128px-tall window:
   boxes 1 and 2 sit at top -177px, box 3 at top -127px, hover at top 0.
   background-size: 100% auto scales that window with the column.
   Percentage position aligns the same crop because
   (element height − scaled image height) × (offset / (345 − 128))
   equals the scaled pixel offset. 345 − 128 = 217, so the resting
   positions are 177/217 = 81.56682028% and 127/217 = 58.52534562%.
   Heading box is 322:128, the sprite’s own visible frame. The old 330px
   width is the fixed box these rules replace. */

.service-card_wrapper .box1 .fusion-title,
.service-card_wrapper .box2 .fusion-title,
.service-card_wrapper .box3 .fusion-title {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Avada sets margin-bottom: 20px !important below 800px. */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.service-card_wrapper .box1 h3,
.service-card_wrapper .box2 h3,
.service-card_wrapper .box3 h3 {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 322 / 128;
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    line-height: 32px;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.service-card_wrapper .box1 h3 p,
.service-card_wrapper .box2 h3 p,
.service-card_wrapper .box3 h3 p {
    margin: 0;
}

.service-card_wrapper .box1 h3 {
    background-image: url(/wp-content/uploads/2019/10/bc11.jpg);
    background-position: center 81.56682028%;
}

.service-card_wrapper .box2 h3 {
    background-image: url(/wp-content/uploads/2019/10/bc13.jpg);
    background-position: center 81.56682028%;
}

.service-card_wrapper .box3 h3 {
    background-image: url(/wp-content/uploads/2019/10/bc14.jpg);
    background-position: center 81.56682028%;
}

.service-card_wrapper .box1:hover h3,
.service-card_wrapper .box2:hover h3,
.service-card_wrapper .box3:hover h3 {
    background-position: center top;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

.service-card_wrapper .learn {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none;
}

/* Avada writes padding-left/right: 0px inline on this container. */
@media (max-width: 767px) {
    .service-card_wrapper {
        box-sizing: border-box;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* The column link's only child is absolutely positioned, so the anchor
   collapses to 0×0 and clicks miss it. Stretch the anchor over the card. */
.service-card_wrapper .box1,
.service-card_wrapper .box2,
.service-card_wrapper .box3 {
    position: relative;
}

.service-card_wrapper .fusion-column-anchor {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

/* FOOTER LOCATIONS
   The custom HTML widget still has the older two-office float rules in
   Additional CSS. These selectors are more specific, so three offices
   share the middle column and the phone and copyright stay on the right. */

.site_details {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr) 250px;
    column-gap: 32px;
    align-items: start;
    box-sizing: border-box;
    padding: 8px 0 12px;
    margin-bottom: 12px;
}

.site_details .footer_logo {
    float: none;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 165px;
    margin: 12px 0 0;
}

.site_details .address {
    float: none;
    grid-column: 2;
    grid-row: 1 / span 2;
    box-sizing: border-box;
    width: auto;
    padding: 10px 0 0;
    text-align: center;
}

.site_details .telphone,
.site_details .copyright {
    float: none;
    grid-column: 3;
    box-sizing: border-box;
    width: auto;
    border-left: 1px solid #1e3865;
    padding-left: 28px;
    padding-right: 0;
    text-align: center;
}

.site_details .telphone {
    grid-row: 1;
    padding-top: 10px;
}

.site_details .copyright {
    grid-row: 2;
    padding-top: 4px;
}

.site_details .address h3,
.site_details .telphone h3 {
    margin-top: 0;
}

.site_details .address ul {
    display: flex;
    justify-content: center;
    gap: 16px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site_details .address ul li,
.site_details .address ul li:first-child,
.site_details .address ul li:last-child {
    float: none;
    flex: 1 1 0;
    width: auto;
    margin: 0;
}

.site_details .address ul li p,
.site_details .telphone p {
    margin: 0;
}

@media (max-width: 900px) {
    .site_details {
        grid-template-columns: 1fr;
    }

    .site_details .footer_logo,
    .site_details .address,
    .site_details .telphone,
    .site_details .copyright {
        grid-column: 1;
        grid-row: auto;
        width: 100% !important;
        border-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site_details .footer_logo {
        margin: 0 auto 8px !important;
    }

    .site_details .telphone,
    .site_details .copyright {
        border-top: 1px solid #1e3865 !important;
        margin-top: 8px;
        padding-top: 22px !important;
    }

    .site_details .address ul {
        flex-direction: column;
        align-items: center;
    }

    .site_details .address ul li,
    .site_details .address ul li:first-child,
    .site_details .address ul li:last-child {
        flex: none;
        width: min(280px, 100%);
    }
}