.service-areas {
    background: url('../../../library/images/red-pattern.svg') center / cover no-repeat;
    box-shadow: 7px 1px 10.8px 0 rgba(0, 0, 0, 0.44);
    padding: 65px 0 80px 0;
    position: relative;
    overflow: hidden;
}

.service-areas h2,
.service-areas .areas-map,
.service-areas .area-list {
    position: relative;
    z-index: 2;
}

.service-areas h2 {
    color: var(--white);
    letter-spacing: -1.14px;
    margin-bottom: 32px;
    text-align: center;
}

.areas-map img {
    width: 100%;
    height: 674px;
    object-fit: cover;
    border: 6px solid var(--blue);
    border-radius: 25px;
    box-shadow: 7px 7px 6.4px 0 rgba(0, 0, 0, 0.57);
}

.area-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 65px 92px 0px 92px;
    column-gap: 69px;
    row-gap: 22px;
}

.single-area a {
    color: var(--white);
    text-align: center;
    font-size: 19.571px;
    font-weight: 600;
    line-height: 31.804px;
    letter-spacing: 0.476px;
    transition: all .3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 11px;
}

.single-area a span {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.single-area a:hover {
    color: var(--blue);
}

.single-area a svg path {
    transition: all .3s ease-in-out;
}

.single-area a:hover svg path {
    stroke: var(--blue);
}

section.service-areas.white-bg {
    background: var(--white);
    box-shadow: none;
    padding-bottom: 77px;
}

section.service-areas.white-bg h2 {
    color: var(--blue);
}

section.service-areas.white-bg .single-area a {
    color: var(--black);
}

section.service-areas.white-bg .single-area a:hover svg path {
    stroke: var(--red);
}

section.service-areas.white-bg .single-area a:hover {
    color: var(--red);
}

@media (max-width:1400px) {
    .area-list {
        grid-template-columns: repeat(4, 1fr);
        margin: 65px 0 0px 0;
        column-gap: 60px;
    }

    .areas-map img {
        height: auto;
    }
}

@media (max-width:992px) {
    .area-list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 30px;
    }
}

@media (max-width:992px) {
    .area-list {
        column-gap: 20px;
    }
}

@media (max-width:767px) {

    .area-list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10px;
        margin: 22px 0 0px 0;
    }

    .service-areas {
        padding: 74px 0;
    }

    .service-areas h2 {
        text-shadow: 1px 1px 4.5px rgba(0, 0, 0, 0.66);
    }

    section.service-areas.white-bg h2{
        text-shadow: none;
    }

    .areas-map img {
        border: 1.773px solid var(--blue);
        box-shadow: 2.068px 2.068px 1.891px 0 rgba(0, 0, 0, 0.57);
        border-radius: 7.387px;
        height: 300px;
    }

    .single-area a {
        font-size: 16px;
        line-height: 20px;
    }

    .single-area a svg {
        width: 25px;
    }
}