.cat--boxitem {
    position:relative;
    cursor:pointer;
    max-width:324px;
    min-width:300px;
    flex:1;
    background:center #fff;
    border-radius:20px;
    box-shadow:0 2px 5px #0000001a;
    margin:11px;
    overflow:hidden;
    transition:.4s
}
.cat--boxitem::after,.cat--boxitem::before {
    content:'';
    position:absolute;
    width:87px;
    height:88%;
    bottom:-125px;
    background:#e5eaef36;
    right:105px;
    z-index:0;
    transition:.4s;
    transform:rotate(45deg)
}

.cat--boxitem:hover::after,.cat--boxitem:hover::before {
    background:#5d606236
}
.cat--boxitem i {
    z-index:1;
    font-size:34px;
    position:relative;
    transition:.4s
}.cat--boxitem:after {
    bottom:53px;
    right:105px;
    transform:rotate(-45deg)
}

.Cat-Grid.--full-archived-cats .cat--boxitem:hover {
    box-shadow:var(--box-shadow-hover);
    border-color:var(--border-defult-hover);
    transform:translateY(-1px)
}



.cat--boxitem .-p-category-desc {
    font-size:17px;
    font-weight:400;
    line-height:1.6;
    text-align:center;
    position:relative;
    transition:.2s;
    display:block
}.cat-cin:before {
    top:-25px;
    width:3px;
    background:#e2e5dc
}
.cat--boxitem>a {
    font-size:20px;
    line-height:1.3;
    font-weight:500;
    color:var(--Text-color);
    transition:.2s;
    display:block;
    padding:25px 25px 15px
}
.cat-cin a {
    font-size:28px;
    margin-bottom:25px;
    display:block;
    color:#000
}

.content-box a {
    font-size:24px;
    margin-bottom:10px;
    display:block;
    text-align:center;
    transform:translateZ(60px);
    font-weight: 400;
}
span.read_more {
    position:relative;
    display:inline-block;
    font-size:17px;
    line-height:28px;
    font-weight:400;
    transition:.4s;
    color:#fff;
    z-index:1
}

.category_icon {
    width:80px;
    height:80px;
    background:var(--uicolor);
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    color: white;
    border:5px solid #fff;
    margin-top:-67px;
    transition:.4s;
    z-index:3;
    margin-bottom:18px
}

.cat--boxitem:hover .category_icon {
    border-color:var(--uicolor-2)
}
.cat-content {
    padding:25px;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:center;
    z-index:3;
    align-items:center;
    position:relative
}
.cat--boxitem:hover .cat-cin {
    color:#fff
}
.icon_cat {
    text-align: center;
    clip-path: polygon(100% 0, 100% 63%, 53% 100%, 52% 100%, 0 63%, 0% 0%);
    position: relative;
    z-index: 1;
    width: 100%;
    height: 191px;
    background: var(--dark-color);
}.cat--boxitem:hover {
    background:var(--uicolor-2)
}
.cat--boxitem:hover .content-box a, .cat--boxitem:hover .top-box a {
    color: #fff;
}