/* Begin: Process CSS */
.processSec {
    position: relative;
}

.processSec .secTitle.center h2 {
    display: table;
    margin: 0 auto;
    position: relative;
}

.processSec .secTitle .left {
    top: -2rem;
}

.processSec .animBg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(../assets/images/shapes/5-dark.html) center bottom/100% no-repeat;
    animation: bgAnim infinite ease-in-out 2s;
}

@keyframes bgAnim {
    0% {
        background: url(../assets/images/shapes/5-dark.html) center bottom/100% no-repeat;
        mix-blend-mode: hard-light;
    }

    50% {
        background: url(../assets/images/shapes/5-light.html) center bottom/100% no-repeat;
        mix-blend-mode: normal;
    }

    100% {
        background: url(../assets/images/shapes/5-dark.html) center bottom/100% no-repeat;
        mix-blend-mode: hard-light;
    }
}

.processSec .processBox {
    position: relative;
    padding: 5rem;
}

.processSec .whoteBox {
    background: var(--white);
    box-shadow: 10px 0 60px #0001;
    border-radius: 10px;
    padding: 0 2rem 3rem;
    position: relative;
    z-index: 1;
    min-height: 14rem;
    transition: ease all 0.5s;
}

.processSec .processBox.active .whoteBox {
    background: var(--primary);
    transform: scale(1.2);

}

.processSec .whoteBox h5 {
    font-size: 4rem;
    font-weight: 900;
    margin: 0 0 -2rem;
    line-height: 1;
    text-align: right;
    position: relative;
    top: -2rem;
}

.processSec .whoteBox h4 {
    font-size: 1.875rem;
    font-weight: 700;
}

.processSec .whoteBox p {
    margin: 0
}

.processSec .processBox .square,
.processSec .processBox .circle {
    width: 6rem;
    height: 6rem;
    border-radius: 10px;
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    background: var(--secondry);
}

.processSec .processBox .circle {
    width: 8rem;
    height: 8rem;
    top: 2.5rem;
    left: 2.5rem;
    bottom: auto;
    right: auto;
    border-radius: 100px;
}

.processSec .processBox .square.yellow,
.processSec .processBox .circle.yellow {
    background: var(--primary);
}

.processSec .processBox .square.dark,
.processSec .processBox .circle.dark {
    background: var(--dark);
}

/* END: Process CSS */