.g-1{ 
  gap: 1px; /* Gap between books */
}

.book-bg {
  position: relative;
  width: 18px; 
    height: 34px;
  transition: all 0.5s ease; /* Smooth transition for opening */
  /*background-color: #C0392B; */
  perspective: 1000px; /* For 3D effect */
      box-shadow: 0 0 0px .5px #fff;
    border-radius: 2px; 
}

.book-bg .book {color: #fff; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center; 
  transform-origin: left;
  transform: rotateY(0deg); /* Initially flat (closed) */
  transition: all 0.5s ease;
  backface-visibility: hidden; border-radius: 2px;
  /*box-shadow: inset -0.35rem 0 0.5rem rgba(0, 0, 0, 0.4), inset 0.35rem 0 0.5rem rgba(0, 0, 0, 0.4);*/
/* background: radial-gradient(ellipse at top, rgb(231 17 17 / 63%), rgba(0, 0, 0, 0.75)), radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent) */
background:radial-gradient(ellipse at top, #474747, rgba(0, 0, 0, 0.75)), radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
}
.book-bg h1 span{display: none;transition: all 0.7s ease;}
.book-bg h1 {margin-bottom: 0px;
  font-size: 13px;    font-family: 'Poppins Regular';
  white-space: nowrap; 
  overflow: hidden;color: #fff;
  max-width: 18px; /* Show only 2 characters in closed view */
  transition: all 0.7s ease;
}

/* Book open effect on hover */
.book{position: relative;transition: all 0.5s ease;}
.book-bg:hover .book::before {content: '';position: absolute;top: 0%;left: 50%;transform: translateX(-50%);
height: 100%;width: 1px;
    box-shadow: 0 0 4px 0px #fdfdfd21;}
.book-bg:hover, .active.book-bg { 
  width: 48px;  
} 
.book-bg:hover h1 span,.book-bg.active h1 span{display:inline-block;}
.book-bg:hover h1,.book-bg.active h1 {
  max-width: 100px; /* Reveal full text when book opens */
} 

 @media (max-width:991px) {
.g-1 { margin-top: -8px;
    margin-right: 8px;
}
}