.interactive-map-container {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
    @media (min-width: 992px) {
       width: 50%;
   }
}
.section-wales,
.section-ireland,
.section-n-ireland,
.section-scotland,
.section-england,
.section-uk-south,
.section-uk-midlands,
.section-uk-east {
    position: relative;
    cursor: pointer;
    &:hover,
    &:hover .st4,
    &:hover .letters .st5,
    &.active,
    &.active .st4,
    &.active .letters .st5 {
        fill: #004e97 !important;
    }
}
.letters:hover .st5 {
    fill: #004e97 !important;
}

.map-card {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(0,18,56);
    padding: 16px 24px;
    border-radius: 16px;
    display: none;
    color: #fff;
    .close-card {
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 0;
    }
    h3 {
        font-family: MyriadPro-Bold;
        font-size: 32px;
        margin-bottom: 0;
        line-height: 100%;
    }
    span {
        font-family: MyriadPro-Regular;
        text-transform: uppercase;
        font-size: 23px;
        margin-bottom: 8px;
        display: block;
    }
    ul {
        list-style: none;
        li {
          margin-bottom: 4px;
        }
        li:last-child {
            margin-bottom: 0;
        }
    }
    a {
        position: relative;
        line-height: 100%;
        color: #fff;
        padding-left: 32px;
        font-size: 18px;
        &:hover {
          color: #b7b7b7;
        }
    }
    a[href^="mailto:"] {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    a[href^="mailto:"]::before,
    a[href^="tel:"]::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }
    a[href^="mailto:"]::before {
        background-image: url("./mail-icon.svg");
    }
    a[href^="tel:"]::before {
        background-image: url("./phone-icon.svg");
    }
    &.active {
        display: block;
    }
    &.card-scotland {
        top: 15%;
        left: 30%;
         @media (min-width: 992px) {
            left: 54%;
        }
    }
    &.card-ireland {
        top: 36%;
        left: 0%;
        @media (min-width: 992px) {
            left: -13%;
        }
    }
    &.card-uk-south {
        top: 65%;
        left: 30%;
         @media (min-width: 992px) {
            left: 55%;
        }
    }
    &.card-uk-midlands {
        top: 52%;
        left: 35%;
        @media (min-width: 992px) {
            left: 67%;
        }
    }
    &.card-uk-east {
        top: 52%;
        left: 35%;
    }
}