.cta {
    position: relative;
    z-index: 1;
}

.cta-image {
    width: 100%;
    height: 210px;
    position: relative;
    z-index: 1;
}

.cta-image img {
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(76% 0, 100% 16%, 100% 100%, 0 100%, 0 22%);
    clip-path: polygon(76% 0, 100% 16%, 100% 100%, 0 100%, 0 22%);
    position: relative;
    z-index: 1;
}

.cta-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(84% 0, 100% 10%, 100% 98%, 0 100%, 0 33%);
    clip-path: polygon(84% 0, 100% 10%, 100% 98%, 0 100%, 0 33%);
    background: #13307F;
    z-index: -1;
}

.cta__content {
    background: #13307F;
    color: #ffffff;
    padding: 30px 22px 60px;
}

.cta__content p a {
    color: #e1e1e1;
    background: linear-gradient(
        to bottom,
        rgba(148, 167, 220, 0.5) 0%,
        rgba(148, 167, 220, 0.5) 100%
    );
    background-position: 0 122%;
    background-repeat: repeat-x;
    background-size: 6px 6px;
}

.cta__content p a:hover {
    background-size: 4px 50px;
    color: #ffffff;
    background-position: 0 100%;
}

.cta__content h2,
.cta__content h3 {
    color: #ffffff;
}

/* .cta__content .btn-primary {
    color: #13307F;
    background: #FFFFFF;
} */

.cta__content .btn-secondary {
    border: 1px solid #ffffff;
    background: transparent;
    z-index: 1;
}

.cta__content .btn-secondary:hover {
    background: #ffffff;
    color: var(--darkgreen);
}

.cta__content .btn-secondary:hover {
    color: #13307F;
}

.cta__content .btn-secondary::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: -1;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    background-color: rgba(255, 255, 255, 0.15);
}

.cta__content .btn-secondary:hover::before {
    background: none;
}

.cta__content .btn-secondary:hover::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: -1;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 1);
}

.cta-skew-1 {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
    width: 460px;
    height: 107px;
    -webkit-transform: skew(70deg);
    transform: skew(70deg);
    opacity: 0.5;
    background: linear-gradient(
        to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
}

.cta-skew-2 {
    position: absolute;
    right: -120px;
    top: 100px;
    z-index: 1;
    width: 460px;
    height: 480px;
    -webkit-clip-path: polygon(0 0, 100% 28%, 160% 100%, 0 48%);
    clip-path: polygon(0 0, 100% 28%, 160% 100%, 0 48%);
    opacity: 0.5;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
}

.cta-skew-3 {
    position: absolute;
    right: 0px;
    top: 259px;
    z-index: 1;
    width: 157px;
    height: 240px;
    -webkit-clip-path: polygon(0px 10%, 100% 31%, 100% 100%, 0 79%);
    clip-path: polygon(0px 10%, 100% 31%, 100% 100%, 0 79%);
    opacity: 0.5;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
}

.cta-skew-4 {
    position: absolute;
    right: 0px;
    bottom: 23px;
    z-index: 1;
    width: 300px;
    height: 187px;
    -webkit-clip-path: polygon(0% 0%, 100% 56%, 119% 100%, 0 31%);
    clip-path: polygon(0% 0%, 100% 56%, 119% 100%, 0 31%);
    opacity: 0.5;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 100%
    );
}

.cta--inner .cta__content {
    width: 100%;
    padding: 100px 22px 60px;
    background: transparent;
    position: relative;
    z-index: 1;
}

.cta--inner .cta__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(85% 0, 100% 4%, 100% 100%, 0 100%, 0% 29%);
    clip-path: polygon(85% 0, 100% 4%, 100% 100%, 0 100%, 0% 29%);
    background: #13307F;
    z-index: -1;
}

.cta--inner .cta__content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(80% 0, 100% 6%, 100% 100%, 0 100%, 0 7%);
    clip-path: polygon(80% 0, 100% 6%, 100% 100%, 0 100%, 0 7%);
    background: #13307F;
    z-index: -1;
}

@media (min-width: 768px) {
    .cta-image {
        height: 425px;
    }

    .cta-image img {
        -webkit-clip-path: polygon(72% 0, 100% 16%, 100% 100%, 0 100%, 0 24%);
        clip-path: polygon(72% 0, 100% 16%, 100% 100%, 0 100%, 0 24%);
    }

    .cta-image::before {
        -webkit-clip-path: polygon(80% 0, 100% 11%, 100% 100%, 0 100%, 0 39%);
        clip-path: polygon(80% 0, 100% 11%, 100% 100%, 0 100%, 0 39%);
    }

    .cta__content {
        padding: 40px 52px 70px;
    }

    .cta--inner .cta__content {
        width: 100%;
        padding: 120px 52px 70px;
        background: transparent;
        position: relative;
        z-index: 1;
    }

    .cta--inner .cta__content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(79% 0, 100% 15%, 100% 100%, 0 100%, 0% 32%);
        clip-path: polygon(79% 0, 100% 15%, 100% 100%, 0 100%, 0% 32%);
        background: #13307F;
        z-index: -1;
    }

    .cta--inner .cta__content::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(70% 0, 100% 22%, 100% 100%, 0 100%, 0 11%);
        clip-path: polygon(70% 0, 100% 22%, 100% 100%, 0 100%, 0 11%);
        background: #464646;
        z-index: -1;
    }
}

@media (min-width: 1200px) {
    .cta-image {
        height: 560px;
    }

    .cta-image img,
    .cta-image::before {
        -webkit-clip-path: none;
        clip-path: none;
    }

    .cta-image::before {
        display: none;
    }

    .cta__wrap {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

    .cta-image {
        width: 50%;
        padding-right: 90px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
    }

    .cta__content {
        width: 100%;
        padding: 0;
        background: transparent;
        position: relative;
        z-index: 1;
    }

    .cta--inner .cta__content {
        padding-bottom: 100px;
    }

    .cta__content::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(73% 0, 100% 23%, 100% 100%, 0 100%, 0 35%);
        clip-path: polygon(73% 0, 100% 23%, 100% 100%, 0 100%, 0 35%);
        background: #464646;
        z-index: -1;
    }

    .cta__content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-clip-path: polygon(82% 0, 100% 15%, 100% 100%, 0 100%, 0% 40%);
        clip-path: polygon(82% 0, 100% 15%, 100% 100%, 0 100%, 0% 40%);
        background: #13307F;
        z-index: -1;
    }

    .cta__content__col {
        max-width: 1324px;
        margin: 0 auto;
    }

    .cta__content__wrap {
        max-width: 662px;
        margin: 0 0 0 auto;
        padding: 155px 0 100px;
    }

    .cta--inner .cta__content__wrap {
        max-width: 1098px;
        margin: 0 auto;
        padding: 30px 0 0;
        text-align: center;
    }

    .cta--inner .cta__content::after {
        -webkit-clip-path: polygon(73% 0, 100% 23%, 100% 100%, 0 100%, 0 24%);
        clip-path: polygon(73% 0, 100% 23%, 100% 100%, 0 100%, 0 24%);
    }
}