.sms-angled-panel {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center center;
    --sms-shape-offset-x: 0px;
    --sms-image-position-x: 50%;
    --sms-image-position-y: 50%;
    --sms-main-background: #06133f;
    background-repeat: no-repeat;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
}

.sms-angled-panel *,
.sms-angled-panel *::before,
.sms-angled-panel *::after {
    box-sizing: border-box;
}

.sms-angled-panel__shape-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Neutralise the old v1.4 wrapper translation if Elementor has cached page CSS. */
    transform: none !important;
}

.sms-angled-panel__shape {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sms-angled-panel__main {
    fill: #06133f;
}

.sms-angled-panel__accent {
    fill: #2d1b9a;
}

.sms-angled-panel.sms-angled-panel--position-custom {
    background-position: var(--sms-image-position-x) var(--sms-image-position-y) !important;
}

/* Move the cut-out and chevrons, but keep the main background rectangle fixed. */
.sms-angled-panel--image-right .sms-angled-panel__cutout,
.sms-angled-panel--image-right .sms-angled-panel__accent,
.sms-angled-panel--image-right .sms-angled-panel__third {
    transform: translateX(var(--sms-shape-offset-x));
}

.sms-angled-panel--image-left .sms-angled-panel__cutout,
.sms-angled-panel--image-left .sms-angled-panel__accent,
.sms-angled-panel--image-left .sms-angled-panel__third {
    transform: translateX(calc(0px - var(--sms-shape-offset-x)));
}

.sms-angled-panel__content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.sms-angled-panel--image-right .sms-angled-panel__content {
    margin-right: auto;
}

.sms-angled-panel--image-left .sms-angled-panel__shape {
    transform: scaleX(-1);
}

.sms-angled-panel--image-left .sms-angled-panel__content {
    margin-left: auto;
}


.sms-angled-panel__third {
    fill: none;
    stroke: #ffffff;
    stroke-width: 18;
    stroke-linecap: butt;
    stroke-linejoin: round;
    opacity: 0.35;
}

/* =========================================================
   FULL WIDTH ANGLED HERO
========================================================= */

.sms-full-width-angled-hero {
    position: relative;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
    --sms-full-hero-shape-offset: 0px;
    --sms-full-hero-image-x: 50%;
    --sms-full-hero-image-y: 50%;
    --sms-full-hero-main-background: #06133f;
}

.sms-full-width-angled-hero *,
.sms-full-width-angled-hero *::before,
.sms-full-width-angled-hero *::after {
    box-sizing: border-box;
}

.sms-full-width-angled-hero--position-custom {
    background-position: var(--sms-full-hero-image-x) var(--sms-full-hero-image-y) !important;
}

.sms-full-width-angled-hero__shape-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.sms-full-width-angled-hero__shape {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sms-full-width-angled-hero__main {
    fill: #06133f;
}

.sms-full-width-angled-hero__accent {
    fill: #2d1b9a;
}

.sms-full-width-angled-hero--image-right .sms-full-width-angled-hero__cutout,
.sms-full-width-angled-hero--image-right .sms-full-width-angled-hero__accent,
.sms-full-width-angled-hero--image-right .sms-full-width-angled-hero__third {
    transform: translateX(var(--sms-full-hero-shape-offset));
}

.sms-full-width-angled-hero--image-left .sms-full-width-angled-hero__shape {
    transform: scaleX(-1);
}

.sms-full-width-angled-hero--image-left .sms-full-width-angled-hero__cutout,
.sms-full-width-angled-hero--image-left .sms-full-width-angled-hero__accent,
.sms-full-width-angled-hero--image-left .sms-full-width-angled-hero__third {
    transform: translateX(calc(0px - var(--sms-full-hero-shape-offset)));
}

.sms-full-width-angled-hero__third {
    fill: none;
    stroke: #ffffff;
    stroke-width: 18;
    stroke-linecap: butt;
    stroke-linejoin: round;
    opacity: 0.35;
}

.sms-full-width-angled-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.sms-full-width-angled-hero__content {
    position: relative;
    width: 43%;
    max-width: 100%;
    color: #ffffff;
}

.sms-full-width-angled-hero--image-right .sms-full-width-angled-hero__content {
    margin-right: auto;
}

.sms-full-width-angled-hero--image-left .sms-full-width-angled-hero__content {
    margin-left: auto;
}

.sms-full-width-angled-hero__title {
    margin: 0 0 10px;
    color: #ffffff;
    font-family: var(--e-global-typography-primary-font-family, 'Manrope'), sans-serif;
    font-size: 42px;
    font-weight: var(--e-global-typography-primary-font-weight, 800);
    line-height: 1;
}

.sms-full-width-angled-hero__html,
.sms-full-width-angled-hero__html p,
.sms-full-width-angled-hero__html li {
    color: inherit;
}

.sms-full-width-angled-hero__html p:first-child {
    margin-top: 0;
}

.sms-full-width-angled-hero__html p:last-child {
    margin-bottom: 0;
}

.sms-full-hero__highlight {
    color: #d72d72;
    font-weight: 800;
}

.sms-full-hero__highlight span {
    color: #169fdb;
}

@media (max-width: 767px) {
    /*
     * Mobile treatment: keep the content and selected main colour only.
     * The angled SVG, chevrons and background photography are deliberately
     * removed so the panels become simple, readable content blocks.
     */
    .sms-angled-panel,
    .sms-full-width-angled-hero {
        background-image: none !important;
    }

    .sms-angled-panel {
        min-height: 0 !important;
        background-color: var(--sms-main-background, #06133f);
        align-items: stretch !important;
    }

    .sms-angled-panel__shape-wrap,
    .sms-full-width-angled-hero__shape-wrap {
        display: none;
    }

    .sms-angled-panel__content {
        width: 100% !important;
        max-width: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sms-full-width-angled-hero {
        min-height: 0 !important;
        background-color: var(--sms-full-hero-main-background, #06133f);
    }

    .sms-full-width-angled-hero__inner {
        min-height: 0 !important;
        display: block;
    }

    .sms-full-width-angled-hero__content {
        width: 100% !important;
        max-width: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}