/* Scope every declaration so the widget does not change the WordPress theme. */
.ab-mv,
.ab-mv * { box-sizing: border-box; }

.ab-mv {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 30px 24px;
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(180deg, #f7fcff 0%, #eef8fc 100%);
}

.ab-mv .ab-mv-container {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.ab-mv .ab-mv-container.ab-mv-container--single { grid-template-columns: minmax(0, 1fr) !important; }

.ab-mv .ab-mv-card {
    position: relative;
    overflow: hidden;
    min-height: 235px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 34px 38px;
    box-shadow: 0 12px 30px rgba(7, 52, 92, .10);
    transition: background-image .35s ease, background-color .35s ease,
        color .35s ease, border-color .35s ease, box-shadow .35s ease,
        border-radius .35s ease, transform .35s ease;
    background-image: linear-gradient(
        var(--ab-mv-gradient-angle, 90deg),
        var(--ab-mv-overlay-start) 0%,
        var(--ab-mv-overlay-middle) 50%,
        var(--ab-mv-overlay-end) 100%
    ), var(--ab-mv-card-image, linear-gradient(transparent, transparent));
    background-size: cover, var(--ab-mv-bg-size, cover);
    background-position: center, var(--ab-mv-bg-position, center);
    background-repeat: no-repeat;
}

.ab-mv .ab-mission {
    --ab-mv-overlay-start: rgba(5, 50, 93, .97);
    --ab-mv-overlay-middle: rgba(5, 63, 109, .94);
    --ab-mv-overlay-end: rgba(5, 75, 117, .82);
    background-color: #05325d;
}

.ab-mv .ab-mission::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 360px;
    height: 260px;
    background: radial-gradient(circle, rgba(38, 182, 216, .18), transparent 65%);
    pointer-events: none;
}

.ab-mv .ab-vision {
    --ab-mv-overlay-start: rgba(249, 253, 255, .97);
    --ab-mv-overlay-middle: rgba(249, 253, 255, .93);
    --ab-mv-overlay-end: rgba(249, 253, 255, .66);
    --ab-mv-bg-position: right center;
    background-color: #f9fdff;
    border: 1px solid #deedf6;
}

.ab-mv .ab-mv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(7, 52, 92, .15);
    background-image: linear-gradient(
        var(--ab-mv-gradient-angle, 90deg),
        var(--ab-mv-hover-overlay-start, var(--ab-mv-overlay-start)) 0%,
        var(--ab-mv-hover-overlay-middle, var(--ab-mv-overlay-middle)) 50%,
        var(--ab-mv-hover-overlay-end, var(--ab-mv-overlay-end)) 100%
    ), var(--ab-mv-card-image, linear-gradient(transparent, transparent));
}

.ab-mv .ab-mv-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    width: 100%;
}
.ab-mv .ab-mv-inner.ab-mv-inner--no-visual { grid-template-columns: minmax(0, 1fr); }

.ab-mv .ab-mv-icon {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    overflow: hidden;
    flex-shrink: 0;
}

.ab-mv .ab-mv-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.ab-mv .ab-mv-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-mv .ab-mission .ab-mv-icon { color: #fff; background: rgba(255, 255, 255, .10); border: 2px solid rgba(255, 255, 255, .18); }
.ab-mv .ab-vision .ab-mv-icon { color: #168ce0; background: rgba(255, 255, 255, .76); border: 1px solid rgba(20, 142, 218, .12); }

.ab-mv .ab-mv-content { min-width: 0; }
.ab-mv .ab-mv-small {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    line-height: 1.45;
}
.ab-mv .ab-mission .ab-mv-small { color: #d7ecff; }
.ab-mv .ab-vision .ab-mv-small { color: #168cda; }

.ab-mv .ab-mv-title {
    margin: 0 0 10px;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 800;
}
.ab-mv .ab-mission .ab-mv-title { color: #fff; }
.ab-mv .ab-vision .ab-mv-title { color: #10284c; }

.ab-mv .ab-mv-desc {
    margin: 0;
    max-width: 600px;
    white-space: pre-line;
    font-size: 15px;
    line-height: 1.65;
}
.ab-mv .ab-mission .ab-mv-desc { color: #e5f0f8; }
.ab-mv .ab-vision .ab-mv-desc { color: #42546e; }

.ab-mv .ab-mv-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 21px;
    margin-top: 18px;
    border-radius: 7px;
    background: #168cda;
    border: 1px solid transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease,
        border-radius .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ab-mv .ab-mv-cta:hover,
.ab-mv .ab-mv-cta:focus-visible { color: #fff; background: #073d67; text-decoration: none; }
.ab-mv .ab-mv-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 1000px) {
    .ab-mv .ab-mv-container { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .ab-mv { padding: 24px 15px; }
    .ab-mv .ab-mv-card { padding: 28px 22px; min-height: auto; }
    .ab-mv .ab-mv-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 18px; }
    .ab-mv .ab-mv-icon { width: 75px; height: 75px; font-size: 34px; }
    .ab-mv .ab-mv-title { font-size: 25px; }
    .ab-mv .ab-mv-desc { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ab-mv .ab-mv-card, .ab-mv .ab-mv-cta { transition: none !important; }
    .ab-mv .ab-mv-card:hover { transform: none !important; }
}