/* -- Service Areas -- */

.maincontent {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    border: none;
}
.content-wrapper {
    max-width: 1400px;
}
.global-wrapper {
    align-items: flex-start;
}
.global-col-top {
    width: 100%;
}

.service-areas {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 20px auto;
    padding: 0;
    gap: 2.5%;
}
.service-areas li {
	width: calc(33.3333333333% - (5% / 3));
}
.service-areas li a {
	display: block;
    padding: 15px;
	font-size: 1.05rem;
    color: #2d5f70;
    font-weight: 500;
	box-shadow: 0 4px 8px rgba(5, 5, 5, .15);
	margin-block: 15px;
	text-align: center;
    border-top: 3px solid #e2e4e8;
    transition: color .33s, border-color .33s;
}
.service-areas li a:hover,
.service-areas li a:focus {
    text-decoration: none;
    color: var(--accent-color);
    border-color: #2d5f70;
}

@media (max-width: 1300px) {
    .service-areas li {
        width: calc(50% - (2.5% / 2));
    }
}

@media (max-width: 981px) {
    .service-areas {
        margin-block: 5px;
    }
    .service-areas li {
	    width: calc(33.3333333333% - (5% / 3));
    }

    .global-col-top {
        order: 2;
    }
    .global-col-left {
        order: 1;
    }
    .global-col-right {
        order: 3;
    }
}

@media (max-width: 750px) {
    .service-areas li {
        width: calc(50% - (2.5% / 2));
    }
}

@media (max-width: 480px) {
    .service-areas li {
        width: 100%;
    }
}