.block-clipped {
    height: 100%;
    position: relative;
    padding: 1px;
    z-index: 1;
    overflow: clip;
}
.block-clipped::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 24px 40px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s;
    -webkit-transition: box-shadow 0.2s;
    z-index: -1;
}
.block-clipped::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background-color: #4AC18E;
    opacity: 0.3;
    clip-path: polygon(0 0%, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 2.5rem 100%, 0% calc(100% - 2.5rem));
    transition: background-color 0.2s;
    -webkit-transition: background-color 0.2s;
    z-index: 0;
}
@media (max-width: 767px) {
    .block-clipped::after {
        clip-path: polygon(0 0%, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 1.5rem 100%, 0% calc(100% - 1.5rem));
    }
}
.block-clipped__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    padding: 0;
    border-radius: 4px;
    background-color: #292C3D;
    clip-path: polygon(0 0%, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 2.5rem 100%, 0% calc(100% - 2.5rem));
    color: #fff;
    z-index: 2;
}
@media (max-width: 767px) {
    .block-clipped__inner {
        clip-path: polygon(0 0%, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 1.5rem 100%, 0% calc(100% - 1.5rem));
    }
}
.block-clipped.reverse::after {
    clip-path: polygon(2.5rem 0%, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%, 0% 2.5rem);
}
@media (max-width: 767px) {
    .block-clipped.reverse::after {
        clip-path: polygon(1.5rem 0%, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%, 0% 1.5rem);
    }
}
.block-clipped.reverse > .block-clipped__inner {
    clip-path: polygon(2.5rem 0%, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%, 0% 2.5rem);
}
@media (max-width: 767px) {
    .block-clipped.reverse > .block-clipped__inner {
        clip-path: polygon(1.5rem 0%, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%, 0% 1.5rem);
    }
}

.block-clipped__content {
    position: relative;
    z-index: 0;
    display: flex;
    height: 100%;
}

.block-clipped .ellipse-blue {
    left: 0;
    bottom: -100%;
    width: 950px;
    height: 950px;
}
.block-clipped .ellipse-green {
    left: 50%;
    top: 100%;
    transform: translateY(-50%);
    width: 1100px;
    height: 1100px;
    z-index: 0;
}
.block-clipped .ellipse-green + .ellipse-green {
    left: -50%;
    top: 0;
    width: 950px;
    height: 950px;
}


.block-clipped-line {
    position: relative;
    display: flex;
    z-index: -1;
}
.block-clipped-line.start {
    padding-top: 16px;
}
.block-clipped-line.end {
    padding-bottom: 16px;
    align-items: flex-end;
}


.clipped-angle {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background-color: rgba(74, 193, 142, 0.3);
    clip-path: polygon(2.7rem 0%, 100% 0%, calc(100% - 2.7rem) 100%, 0% 100%);
}
.clipped-angle {
    width: 32%;
    min-height: 32px;
}
@media (max-width: 991px) {
    .clipped-angle {
        width: 38%;
    }
}
@media (max-width: 767px) {
    .clipped-angle {
        width: 44%;
    }
}
@media (max-width: 575px) {
    .clipped-angle {
        width: 50%;
    }
}
.block-clipped-line.start .clipped-angle {
    padding: 0 1px 1px 0;
    margin-top: -1px;
    top: 1px;
    align-items: flex-end;
    justify-content: flex-end;
    order: 1;
}
.block-clipped-line.end .clipped-angle {
    padding: 0 0 1px 0;
    margin-top: -1px;
    justify-content: flex-start;
    order: 2;
    margin-left: 0;
    transform: scaleY(-1);
    clip-path: polygon(0% 0%, calc(100% - 2.7rem - 1px) 0%, 100% 100%, calc(2.7rem + 1px) 100%);
}

.clipped-angle::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    background-color: #292C3D;
    clip-path: polygon(2.7rem 0%, 100% 0%, calc(100% - 2.7rem) 100%, 0% 100%);
    z-index: -1;
}
.block-clipped-line.start .clipped-angle::before {
    clip-path: polygon(calc(2.7rem - 1px) 0%,100% 0%,calc(100% - 2.7rem) 100%,0% 100%);
}
.block-clipped-line.end .clipped-angle::before {
    clip-path: polygon(0% 0%,calc(100% - 2.7rem + 1px) 0%,100% 100%, 2.7rem 100%);
}

.clipped-angle-item {
    position: relative;
    background-color: rgba(74, 193, 142, 0.1);
    cursor: pointer;
}
.clipped-angle-item {
    width: 48%;
    min-height: 16px;
}
.block-clipped-line.start .clipped-angle-item {
    clip-path: polygon(1.35rem 0%, 100% 0%, calc(100% - 1.35rem) 100%, 0% 100%);
    margin-right: calc(1.35rem - 2px);
}
.block-clipped-line.end .clipped-angle-item {
    clip-path: polygon(0% 0%,calc(100% - 1.35rem) 0%,100% 100%,1.35rem 100%);
    margin-left: 1.35rem;
}

.clipped-angle-line {
    height: 1px;
    flex: 1 1 auto;
    background-color: rgba(74, 193, 142, 0.3);
}
.block-clipped-line.start .clipped-angle-line {
    order: 2;
}
.block-clipped-line.end .clipped-angle-line {
    order: 1;
}

.block-clipped-line.reversed .clipped-angle {
    justify-content: flex-start;
}
.block-clipped-line.reversed .clipped-angle-item {
    width: 79%;
}
.block-clipped-line.reversed .clipped-angle,
.block-clipped-line.start.reversed .clipped-angle::before,
.block-clipped-line.start.reversed .clipped-angle-item {
    clip-path: polygon(0 0%, calc(100% - 2.5rem) 0, 100% 2.5rem, 100% 100%, 2.5rem 100%, 0% calc(100% - 2.5rem));
}


.block-transparent {
    position: relative;
    z-index: 1;
    height: 100%;
}
.block-transparent::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
    border: 1px solid rgba(74,193,142,.5);
    clip-path: polygon(2.5rem 0%,100% 0,100% calc(100% - 2.5rem),calc(100% - 2.5rem) 100%,0 100%,0% 2.5rem);
    transition: background-color 0.2s;
    z-index: 0;
}
.block-transparent__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    background-color: rgb(104 236 255 / 7%);
    clip-path: polygon(2.5rem 0%,100% 0,100% calc(100% - 2.5rem),calc(100% - 2.5rem) 100%,0 100%,0% 2.5rem);
}
.block-transparent__inner::before,
.block-transparent__inner::after {
    content: "";
    display: inline-block;
    width: 1.5px;
    height: 3.75rem;
    position: absolute;
    background-color: #4AC18E;
    opacity: .3;
    transform: rotate(45deg);
}
.block-transparent__inner::before {
    top: -0.688rem;
    left: 1.313rem;
}
.block-transparent__inner::after {
    bottom: -0.688rem;
    right: 1.313rem;
}
.block-transparent__inner__bg {
    height: 100%;
    background-color: rgb(41 44 61 / 50%);
}
.no-bg {
    background: none;
}
.block-transparent__content {
    position: relative;
    z-index: 0;
    display: flex;
    height: 100%;
}