.card-box {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
}

.card-box:hover {
    transform: scale(1.05);
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay-text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /*background-color: rgba(57, 116, 132, 0.7);*/
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 10px;
    text-align: center;
}

.card-box:hover .overlay-text {
    opacity: 1;
}

/*customer review*/
#testimonialCarousel,
#testimonialCarousel .carousel-inner {
  overflow: visible;
}

.testi-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 24px 20px 26px;
  padding-top: 96px;     
  text-align: center;
  width: 100%;           
}

.testi-avatar{
  position: absolute;
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.testi-name { margin-top: 10px; font-weight: 700; }
.testi-role { font-size: 14px; color:#777; margin-bottom: 6px; }
.stars     { color:#f6b100; font-size:18px; letter-spacing:2px; margin-bottom:6px; }
.testi-text{ color:#444; line-height:1.6; }

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next{
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(0,0,0,.15);
  top: 50%; transform: translateY(-50%);
  opacity: 1;
}
#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon{ filter: invert(1); }

/* lg 미만( < 992px )에서는 3번째 카드 컬럼 강제 숨김 */
@media (max-width: 1200px){
  .lg-only{ display:none !important; }
}

/* 혹시 이전에 컬럼을 flex로 강제하던 규칙이 있다면 예외 처리(옵션) */
@media (max-width: 1200px){
  .row .lg-only{ display:none !important; }
}