.blue-bar::before {
    clip-path: polygon(0 0px, 100% 0px, 100% 100%, 50% calc(100% - 40px), 0 100%);
}

.blue-bar::after {
    content: "";
    position: absolute;          /* fixed to viewport so it spans the screen */
    top: 0;
    left: 50%;                /* start at the horizontal center */
    transform: translateX(-50%); /* shift back by half its width */
    width: 100vw;             /* span entire viewport width */
    min-width: 1250px;
    height: 100%;             /* or desired height */
    z-index: -1;
    background-color: #7898b6;
    clip-path: polygon(
        0 100%,
        50% calc(100% - 80px),
        100% 100%,
        50% calc(100% - 40px),
        0 100%
    );
}

.expert-card-bg {
    width: calc(1250px / 3.2);
    height: 320px;
    background-color: #123e69;
    margin-left: calc(((1250px / 3) - (1250px / 3.2)) / 2);
    margin-right: calc(((1250px / 3) - (1250px / 3.2)) / 2);
    position: relative;
    top: 100px;
    z-index: 1;
}

.expert-card-design {
    width: calc(1250px / (3.2 * 2));
    height: 120px;
    position: relative;
    top: 208px;
    left: calc(1250px / 3.2 - 1250px / (3.2 * 2));
    background-color: #7898b6;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    z-index: 2;
}

.expert-card:hover {
    cursor: pointer;
}

.expert-card h1 {
    font-size: 32px;
    margin-left: 15px;
    font-weight: normal;
    z-index: 5;
    margin-bottom:4px;
    padding-top: 100px;
}

.expert-card h2 {
    font-size:22px;
    margin-left: 15px;
    font-weight:bold;
    color:#cecece;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom:12px;
    margin-top: 0px;
}

.expert-card a {
    font-size:20px;
    font-weight:normal;
    color:#cecece;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom:0px;
    margin-left: 15px;
    margin-top:7px;
    margin-right: 30px;
    line-height: 1;
    display: inline-block;
}
.expert-card a:hover {
    font-weight:bold;
    color:#ffffff;
}

.expert-card .squared-image {
    position: absolute;
    position: 0 0;
    top: 0;
    left: 30px;
    width: 320px;
    height: 320px;
    border-radius: 40px;
    border-color: transparent;
    z-index: 10;
}

.expert-card a img {
    width: 25px; 
    height: 25px; 
    filter: brightness(0.808);
    transition-timing-function: linear;
    transition-duration: 0.25s;
    transform: translate(15px, calc(25px / 3.5));
}