.reveal{
    position: relative; 
    transition: 1s all ease;
    transform: translateX(35px);
    background: #f2f2f2; 
    color: #1e1e1e;
    font-size: 28px;
    border-right: 0px solid #ddd;
  }

  .reveal.active{
    transform: translateY(0);
    text-shadow: 2px 2px 0 #cacaca;
    opacity: 1;
    border-right: 2px solid #ddd;
    
  } 

  .cat_widget{
    background-color: #fcfcfc;
    padding: 10px;
    border-radius: 5px;
}

.all_cat {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 2vh;
    height: 150px;
}

.cat_new {
    position: relative;
    width: 8vw; 
    height: 8vw;
    min-width: 110px;
    min-height: 110px;
    aspect-ratio: 1 / 1;
}

.cat_back {
    cursor: pointer;
    border-radius: 50%;   
    width: 100%;
    height: 100%;
    transition: all .2s ease-in-out;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,243,251,1) 60%, rgba(204,219,242,1) 80%, rgba(148,181,227,1) 100%);
}

.img_back{  
   position: relative;
   margin: 0 auto;
}

/* .img_back:hover {

  transform: scale(1.2);
} */



.cat_back:hover {  
    transform: scale(1.1) ;
    background: linear-gradient(355deg, rgba(255,255,255,1) 0%, rgba(249,252,181,1) 60%, rgba(247,251,157,1) 80%, rgba(245,250,131,1) 100%);

}

.cat_title {   
    text-align: center;
    font-size: calc(1rem + 0.4vw);
    font-weight: 400;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;   
    color:#818181
} 

.cat_back:hover .cat_title {
    transform: translate(0,-8px);
    position: relative;
    border-radius: 5px;
    background-color: #363535;
    color: #eee;
  }

.img_back img{
    width:90%;
    display: block;
    margin: 0px auto;

}

.subContainer {
    max-width:100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .scroller{
    padding: 10px 2px !important;
  }