.asseticon,
.serviceicon {
    width: 200px;
    aspect-ratio: 1;
    position: relative;
}

.asseticon svg { fill: var(--textcolor)}

.serviceicon i {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    font-size: 100px;
}

.serviceicon i.red {
    color: var(--static-maincolor);
    margin: -4px 0 0 -4px;
    filter: var(--blur);
}

.serviceicon i.blue {
    color: var(--static-seccolor);
    margin: 4px 0 0 4px;
    filter: var(--blur);
}


/** SERVICES **/
.svkholder {
    margin-bottom: 15px;
    position: relative;
}

.svk {
    width: 100%;
    position: relative;
    aspect-ratio: 16/9;
    box-shadow: 0 0 43px rgba(0, 0, 0, 0);
}

@media (min-width: 576px) {
    .svk {
        aspect-ratio: 4/3;
    }
}
@media (min-width: 768px) {
    .svk {
        aspect-ratio: 1;
    }
}

div:has(>.svkholder) {
    z-index: 1;
}

div:has(>.svkholder:hover) {
    z-index: 2;
}

.servicegroup {
    padding-top: calc(var(--padding) * 3);
    padding-bottom: calc(var(--padding) * 3);
}


.svk:after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--gridcolor);
    transition: all ease .5s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.svk:hover:after {
    clip-path: polygon(86% 0, 86% 0, 24% 100%, 24% 100%);
}

.svkouter {
    position: absolute;
    inset: 0;
    transform: translateZ(0);
    transition: filter ease 1s;
    backdrop-filter:  calc(var(--blurvalue) * 3);
}


.svkouter .svkouterbackdrop {
    position: absolute;
    inset: 0;
    transition: background-color ease 1s, inset ease 1s;
    z-index: 1;
    /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);*/
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
}

.svkholder:hover .svkouter .svkouterbackdrop {
    background-color: var(--static-seccolor) !important;
    /* animation-play-state: running;*/
    inset: -14%;
    transform: translateZ(-40px);
}


.svkinner h3 {
    font-weight: 700;
    font-size: 2rem;
    hyphens: auto;
    hyphenate-character: '';
    text-align: left;
    letter-spacing: -.05em;
    font-family: "pragmatica-extended", sans-serif;
}

@media (min-width: 567px) {
    .svkinner h3 {
        font-size: 4rem;
    }
}

@media (min-width: 768px) {
    .svkinner h3 {
        font-size: 4rem;
    }
}

@media (min-width: 992px) {
    .svkinner h3 {
        font-size: 4.5rem;
    }
}

@media (min-width: 1200px) {
    .svkinner h3 {
        font-size: 3.5rem;
    }
}

@media (min-width: 1400px) {
    .svkinner h3 {
        font-size: 4rem;
    }
}

@media (min-width: 1600px) {
    .svkinner h3 {
        font-size: 4.5rem;
    }
}


.svkinner {
    position: absolute;
    inset: calc(var(--padding) / 2);
    transition: all ease .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;;
    transform-style: preserve-3d;;
    -moz-transform: perspective(500px);
    -webkit-perspective: 500px;
    perspective: 500px;
    transition: all ease 3s;
    padding: calc(var(--padding));
}

.svkinner .svkinnerborder {
    content: '';
    position: absolute;
    inset: calc(var(--padding));
    border: 2px solid var(--gridcolor);
    clip-path: polygon(86% 0, 86% 0, 24% 100%, 24% 100%);
    transition: all ease .5s;
}


.svkinner > .row,
.svkinner > .row div {
    transform-style: preserve-3d;
}

.svkinner:before {
    content: '';
    position: absolute;
    inset: 0px;
    top: 100%;
    transition: all ease .3s;
    background-color: var(--gridcolor-0);
}

.svkinner i {
    position: absolute;
    left: var(--padding);
    top: var(--padding);
    transform: translateZ(0px);
    font-size: 4.3rem;
    text-align: center;
    line-height: 1;
    transform-origin: top left;
}

@media (min-width: 768px) {
    .svkinner i {
        font-size: 8.6rem;
    }
}

.svkinner i.main {
    color: var(--gridcolor);
}

.svkinner i.red {
    color: var(--static-maincolor);
    margin: -4px 0 0 -4px;
    filter: var(--blur)
}

.svkinner i.blue {
    color: var(--static-seccolor);
    margin: 4px 0 0 4px;
    filter: var(--blur)

}

.svkholder .svkinner,
.svkholder .svkinner i,
.svkholder .svkinner h3 {
    transition: all ease .3s;
}

.svkholder:hover .svkinner,
.svkholder:hover .svkinner h3,
.svkholder:hover .svkinner p {
    text-shadow: var(--textshadow);
    color: var(--bgcolor);
}

.svkholder:hover .svkinner .svkinnerborder {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    border-color: var(--bgcolor);
    transform: translateZ(60px) scale(1);
}

.svkholder:hover .svkinner i {
    transform: translateZ(60px) translateX(30px) translateY(30px);
}

.svkholder:hover .svkinnercontentholder {
    transform: translateZ(80px);
    scale: 83%;
}

.svkholder:hover .svkinner:before {
    background-color: var(--gridcolor-14);
    top: 0px;
}


.svkinnercontentholder {
    position: absolute;
    inset: var(--padding);
    transition: top ease .3s;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;;
    transform-style: preserve-3d;;
    -moz-transform: perspective(500px);
    -webkit-perspective: 500px;
    perspective: 500px;
    display: flex;
    flex-direction: column;
    transform: translateZ(20px);
    z-index: 10;
    overflow: hidden;
    padding: 15px;
    transition: all ease .5s;

}

.svkinnercontentholder h3 {
    /*transform: translateY(calc(100% * -1 - 30px))*/
    margin-top: auto;
    transition: all ease 1s;
}

.svkholder:hover .svkinnercontentholder h3 {
    /*transform: translateY(calc(100% * -1 - 30px))*/
}

.svkinnercontentholder p {
    max-height: 0;
    display: block;
    transition: all ease 1s !important;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 30px;
    margin-right: -32px;
    text-align: justify;
    -webkit-mask-image: linear-gradient(to bottom, var(--bgcolor) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, var(--bgcolor) 80%, transparent 100%);
    font-size: 14px;

}

.svkholder:hover .svkinnercontentholder p {
    max-height: 500px;
}