:root {
    --primary-color: #EC7A5C;
    --secondary-color: #fa8869;
}


/*==============================categoreis styles==========================*/
.category-classic:hover .category-name {
    transition-property: opacity;
    opacity: 0;
}
.category-default1:hover .category-count {
    -webkit-transform: translateY(75%);
    transform: translateY(75%);
    
}
.category-default1:hover .category-name {
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateY(-75%);
    transform: translateY(-75%);
    padding-bottom: 0;
}
.category-icon .category-media{
    padding:0;
    border:none;
    overflow:hidden;
}
.category-icon .category-media img{
    transition:transform ease .3s;
    border-radius:50%;
}
    .category-icon .category-media:hover img{
        transform:scale(1.1);
    }
.top-categories-wrapper .category-name {
    margin-top: 0;
}
.category-classic .category-name{
    color:white;
    position:relative;
    z-index:30;
}
/*======================== moving circle stylings ==========================*/
.moving-circle-container {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin: 2rem 0;
}

.front-circle, .back-circle {
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    /*height: auto;*/
    background-color: var(--secondary-color);
    transition: transform ease-in-out .3s;
}
.back-circle {
   
    box-shadow: 0px 0px 10px 0px #969696;
  
}
.front-circle {
    position: absolute;
    z-index: 10;
    top: -.75rem;
  
}

.front-circle img {
    position:relative;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
   
}

    .front-circle .overlay {
        content: " ";
        position: absolute;
        border-radius: 50%;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background-color: rgb(0 0 0 / 39%);
        transition: background-color ease-in-out .3s;
    }
/*.moving-circle-container:hover .front-circle .overlay {
    background-color: rgb(250 136 105 / 20%);
}*/
.back-circle p{
    position:absolute;
    margin-bottom:0;
    bottom:3%;
    left:50%;
    transform:translateX(-50%);
    font-size:1.5rem;
    color:white;
}
.moving-circle-container .category-name {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate3d(-50%,-50%,0);
    z-index:30;
    color:white;
}
.moving-circle-container:hover .front-circle{
    transform:translateY(-7.5%);
}
.moving-circle-container:hover .back-circle {
    transform: translateY(7.5%);
}