.gsc-box-hover .backend {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #204099;
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  padding: 20px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0s !important;
}

.gsc-box-hover:hover .backend {
  opacity: 1;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

/* Assuming box-title and be-desc are the title and text classes respectively */

.gsc-box-hover .backend .box-title,
.gsc-box-hover .backend .be-desc {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.gsc-box-hover:hover .backend .box-title,
.gsc-box-hover:hover .backend .be-desc {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.gsc-box-hover:hover .backend .box-title {
  transition-delay: 0.5s; /* Adjust this delay as per your needs */
}

.gsc-box-hover:hover .backend .be-desc {
  transition-delay: 0.75s; /* Adjust this delay as per your needs */
}


/*
.gsc-box-hover {
    position: relative;
    overflow: hidden;
}

.gsc-box-hover .backend {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background: #5773b2;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    padding: 20px;
    color: #fff;
}

*/





/* slide up */
/*
.gsc-box-hover .backend {
    opacity: 0; 
    transform: translateY(90%); 
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-out; 
}

.gsc-box-hover:hover .backend {
    opacity: 1; 
    transform: translateY(0);
}
*/


/* slide left 

.gsc-box-hover .backend {
    transform: translateX(100%); 
    transition: transform 0.5s ease-out;
}

.gsc-box-hover:hover .backend {
    transform: translateX(0); 
}
*/

/* scale up */
/*
.gsc-box-hover .backend {
    transform: scale(0); 
    transition: transform 0.5s ease-out; 
}

.gsc-box-hover:hover .backend {
    transform: scale(1); 
}





.gsc-box-hover .backend .content-be {
    height: 100%;
}
*/