:root {
    --icon-check: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5 13l4 4L19 7"/></svg>');
    --icon-cross: url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12"/></svg>');
    --icon-plus:  url('data:image/svg+xml;utf8,<svg fill="none" stroke="black" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14m-7-7h14"/></svg>');

    --grad-blue:  linear-gradient(135deg, #5B7CF7, #354CCB);
    --grad-green: linear-gradient(135deg, #4CAF50, #2E7D32);
    --grad-red:   linear-gradient(135deg, #EC5454, #C23333);
}

.icon-mask {
    mask-size: contain;
    -webkit-mask-size: contain;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    position: relative;
    margin-bottom: 0.4rem;
    line-height: 1.5;
    font-size: inherit;
    padding-left: 1.8rem;
}

.check-list li::before {
    content: '';
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 1.2rem;
    height: 1.2rem;

    background: var(--grad-blue);
    mask: var(--icon-check) no-repeat center;
    -webkit-mask: var(--icon-check) no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.check-list.cross li::before {
    background: var(--grad-red);
    mask: var(--icon-cross) no-repeat center;
    -webkit-mask: var(--icon-cross) no-repeat center;
}

.check-list.plus li::before {
    background: var(--grad-blue);
    mask: var(--icon-plus) no-repeat center;
    -webkit-mask: var(--icon-plus) no-repeat center;
}

.check-list.green li::before {
    background: var(--grad-green);
    mask: var(--icon-check) no-repeat center;
    -webkit-mask: var(--icon-check) no-repeat center;
}

.check-list.icon-sm li::before {
    width: 1rem;
    height: 1rem;
}

.check-list.icon-lg li::before {
    width: 2rem;
    height: 2rem;
    top: 0.05rem;
}

.check-list.space-tight li {
    padding-left: 1.5rem;
}

.check-list.space-loose li {
    padding-left: 2.5rem;
}

.check-list.text-lg li {
    font-size: 1.5rem;
}

.check-icon,
.cross-icon,
.plus-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    margin-right: 0.4rem;
    position: relative;
    top: -0.1rem;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.check-icon.green {
    background: var(--grad-green);
    mask: var(--icon-check) no-repeat center;
    -webkit-mask: var(--icon-check) no-repeat center;
}

.cross-icon {
    background: var(--grad-red);
    mask: var(--icon-cross) no-repeat center;
    -webkit-mask: var(--icon-cross) no-repeat center;
}

.plus-icon {
    background: var(--grad-blue);
    mask: var(--icon-plus) no-repeat center;
    -webkit-mask: var(--icon-plus) no-repeat center;
}

@media (max-width: 1120px) {
    .check-list.text-lg li {
        font-size: 1.4rem;
    }
}

@media (max-width: 768px) {
    .check-list.text-lg li {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .check-list.text-lg li {
        font-size: 1.15rem;
    }
}

.service-cards {
    display: flex;
    flex-direction: column;
    padding: 20px 25px 25px;
    border: 1px solid #0024ff;
    border-radius: 1.5rem;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    flex: 1 1 18rem;
    min-width: 18rem;
    max-width: 20rem;

    &.service-cards-wider {
        flex: 1 1 20rem;
        min-width: 20rem;
    }
}

.ct-div-block.service-cards-resp-lay {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(5rem, 7vw, 14rem);
    max-width: 100rem;
    margin: 0 auto;

    &.wider-cards {
        gap: clamp(2rem, 4vw, 13rem);
    }
}

.service-cards-resp-lay > .service-cards {
    flex: 0 0 calc(33.333% - 10rem);

    &.wider-cards {
        flex: 0 0 calc(33.333% - 2rem);
    }
}

@media (max-width: 1120px) {
    .ct-div-block.service-cards-resp-lay {
        justify-content: center;
        gap: clamp(2rem, 7vw, 4rem);

        &.wider-cards {
            gap: clamp(2rem, 4vw, 4rem);
        }
    }

    .service-cards-resp-lay > .service-cards {
        flex: 0 0 calc(50% - 2rem);
    }
}

@media (max-width: 703px) {
    .ct-div-block.service-cards-resp-lay {
        gap: clamp(1rem, 7vw, 2rem);
    }
}

@media (max-width: 480px) {
    .service-cards {
        &.service-cards-wider {
            flex: 1 1 18rem;
            min-width: 18rem;
        }
    }
}

#template-slider-shortcode {
    display: block;
}

#template-slider-shortcode,
#template-slider-tablet-shortcode,
#template-slider-mobile-shortcode {
    background: rgb(0 0 0 / 80%) linear-gradient(
            150deg,
            rgba(0, 196, 255, 0) 25%,
            rgba(0, 196, 255, 0.28) 75%,
            rgba(0, 196, 255, 0) 90%
    );
}

@media (max-width: 1050px) {
    #template-slider-shortcode,
    #template-slider-mobile-shortcode {
        display: none;
    }

    #template-slider-tablet-shortcode {
        display: block;
    }
}

@media (max-width: 700px) {
    #template-slider-shortcode,
    #template-slider-tablet-shortcode {
        display: none;
    }

    #template-slider-mobile-shortcode {
        display: block;
    }
}

body.oxygen-builder-body .element-hidden {
    display: block !important;
    opacity: 0.50;
}