/*
Custom CSS for TemplateMo 561 Annai Fabrics

https://templatemo.com/tm-561-purple-buzz

*/


/* Ensure all service cards have a fixed size */
.service-work {
    width: 250px;
    height: 300px;
    display: block;
    position: relative;
    overflow: hidden;
}

/* Style the image wrapper to maintain aspect ratio */
.card-img-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Adjust content positioning */
.card-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
}











/* Fix image size and wrapper */
.image-wrapper {
    position: relative;
    width: 248.667px;
    height: 248.667px;
    overflow: hidden;
  }
  
  .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Overlay on hover */
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
    transition: background-color 0.3s ease;
  }
  
  /* Card body transition */
  .custom-card .card-body {
    transition: transform 0.3s ease;
  }
  
  /* Hover effect */
  .custom-card:hover .card-body {
    transform: translateY(-200px); /* Slide up */
  }
  
  .custom-card:hover .image-overlay {
    background-color: rgba(255, 255, 255, 0.8); /* 80% white overlay */
  }