/* areas index: county headings and city cards */

@media(min-width: 1366px) {
    .areas-county {
        font-size: 34px;
        font-weight: 700;
        color: #0c0c0c;
        margin: 40px 0 16px 0;
        padding: 0 0 10px 0;
        border-bottom: 2px solid #00007E;
    }
    .areas-county:first-of-type {
        margin-top: 0;
    }
    .areas-county i {
        color: #EB1C24;
        margin-right: 8px;
    }
    .areas-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 20px;
    }
    .areas-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
        padding: 22px 22px 20px 22px;
        transition: 0.2s all ease-out;
        box-shadow: 0 10px 30px rgba(0, 0, 126, 0.08);
    }
    .areas-card:hover {
        border-color: #00007E;
        box-shadow: 0 16px 36px rgba(0, 0, 126, 0.14);
        transform: translateY(-3px);
    }
    .areas-card h4 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 6px 0;
    }
    .areas-card h4 a {
        color: #0c0c0c;
        text-decoration: none;
    }
    .areas-card h4 a:hover {
        color: #00007E;
    }
    .areas-card p {
        font-size: 14px;
        font-weight: 500;
        color: #515151;
        line-height: 1.5;
        margin: 0 0 12px 0;
        flex: 1 1 auto;
    }
    .areas-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .areas-card li {
        margin: 0;
    }
    .areas-card li a {
        display: inline-block;
        padding: 6px 11px;
        border-radius: 100px;
        background: #f3f4f9;
        color: #00007E;
        font-family: proxima-nova, sans-serif;
        font-style: normal;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.15s all ease-out;
    }
    .areas-card li a:hover {
        background: #00007E;
        color: #fff;
    }
}

@media(max-width: 1366px) and (min-width: 1024px) {
    .areas-county {
        font-size: 34px;
        font-weight: 700;
        color: #0c0c0c;
        margin: 40px 0 16px 0;
        padding: 0 0 10px 0;
        border-bottom: 2px solid #00007E;
    }
    .areas-county:first-of-type {
        margin-top: 0;
    }
    .areas-county i {
        color: #EB1C24;
        margin-right: 8px;
    }
    .areas-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 20px;
    }
    .areas-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
        padding: 22px 22px 20px 22px;
        transition: 0.2s all ease-out;
        box-shadow: 0 10px 30px rgba(0, 0, 126, 0.08);
    }
    .areas-card:hover {
        border-color: #00007E;
        box-shadow: 0 16px 36px rgba(0, 0, 126, 0.14);
        transform: translateY(-3px);
    }
    .areas-card h4 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 6px 0;
    }
    .areas-card h4 a {
        color: #0c0c0c;
        text-decoration: none;
    }
    .areas-card h4 a:hover {
        color: #00007E;
    }
    .areas-card p {
        font-size: 14px;
        font-weight: 500;
        color: #515151;
        line-height: 1.5;
        margin: 0 0 12px 0;
        flex: 1 1 auto;
    }
    .areas-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .areas-card li {
        margin: 0;
    }
    .areas-card li a {
        display: inline-block;
        padding: 6px 11px;
        border-radius: 100px;
        background: #f3f4f9;
        color: #00007E;
        font-family: proxima-nova, sans-serif;
        font-style: normal;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.15s all ease-out;
    }
    .areas-card li a:hover {
        background: #00007E;
        color: #fff;
    }
}

@media(max-width: 1024px) and (min-width: 769px) {
    .areas-county {
        font-size: 34px;
        font-weight: 700;
        color: #0c0c0c;
        margin: 40px 0 16px 0;
        padding: 0 0 10px 0;
        border-bottom: 2px solid #00007E;
    }
    .areas-county:first-of-type {
        margin-top: 0;
    }
    .areas-county i {
        color: #EB1C24;
        margin-right: 8px;
    }
    .areas-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-gap: 20px;
    }
    .areas-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
        padding: 22px 22px 20px 22px;
        transition: 0.2s all ease-out;
        box-shadow: 0 10px 30px rgba(0, 0, 126, 0.08);
    }
    .areas-card:hover {
        border-color: #00007E;
        box-shadow: 0 16px 36px rgba(0, 0, 126, 0.14);
        transform: translateY(-3px);
    }
    .areas-card h4 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 6px 0;
    }
    .areas-card h4 a {
        color: #0c0c0c;
        text-decoration: none;
    }
    .areas-card h4 a:hover {
        color: #00007E;
    }
    .areas-card p {
        font-size: 14px;
        font-weight: 500;
        color: #515151;
        line-height: 1.5;
        margin: 0 0 12px 0;
        flex: 1 1 auto;
    }
    .areas-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .areas-card li {
        margin: 0;
    }
    .areas-card li a {
        display: inline-block;
        padding: 6px 11px;
        border-radius: 100px;
        background: #f3f4f9;
        color: #00007E;
        font-family: proxima-nova, sans-serif;
        font-style: normal;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.15s all ease-out;
    }
    .areas-card li a:hover {
        background: #00007E;
        color: #fff;
    }
}

@media(max-width: 769px) {
    .areas-county {
        font-size: 28px;
        font-weight: 700;
        color: #0c0c0c;
        margin: 40px 0 16px 0;
        padding: 0 0 10px 0;
        border-bottom: 2px solid #00007E;
    }
    .areas-county:first-of-type {
        margin-top: 0;
    }
    .areas-county i {
        color: #EB1C24;
        margin-right: 8px;
    }
    .areas-card-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-gap: 20px;
    }
    .areas-card {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e3e6ee;
        border-radius: 16px;
        padding: 22px 22px 20px 22px;
        transition: 0.2s all ease-out;
        box-shadow: 0 10px 30px rgba(0, 0, 126, 0.08);
    }
    .areas-card:hover {
        border-color: #00007E;
        box-shadow: 0 16px 36px rgba(0, 0, 126, 0.14);
        transform: translateY(-3px);
    }
    .areas-card h4 {
        font-size: 28px;
        font-weight: 700;
        margin: 0 0 6px 0;
    }
    .areas-card h4 a {
        color: #0c0c0c;
        text-decoration: none;
    }
    .areas-card h4 a:hover {
        color: #00007E;
    }
    .areas-card p {
        font-size: 14px;
        font-weight: 500;
        color: #515151;
        line-height: 1.5;
        margin: 0 0 12px 0;
        flex: 1 1 auto;
    }
    .areas-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .areas-card li {
        margin: 0;
    }
    .areas-card li a {
        display: inline-block;
        padding: 6px 11px;
        border-radius: 100px;
        background: #f3f4f9;
        color: #00007E;
        font-family: proxima-nova, sans-serif;
        font-style: normal;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
        transition: 0.15s all ease-out;
    }
    .areas-card li a:hover {
        background: #00007E;
        color: #fff;
    }
}