.service-cards .card {

    box-shadow: 3px 3px 9px #0000006e;
}

.service-cards .card-body {
    background-color: black; 
    position: relative;
    bottom:0;
}

.service-cards .card-body p{
    color: white;
    font-size: 1.23rem;
    padding-bottom: 9px;
    border-top: 1px solid white;
    line-height: 1.654321rem;
    min-height:24px;
}

.service-cards .card-body .more{
    margin-top: 9px;
    text-align: right; 
    right: 8px;
    position: absolute;
}

.service-cards .card-cont {
    padding-bottom: 15px;
    padding-top: 15px;
    margin-bottom: 51px;
}

.service-cards .card-cont i.title {
    font-size: 3.33rem; 
    color: #51a1c7; 
    text-align: center; 
    position: absolute;
    bottom: 6px;
    z-index: 10;
    left: 6px;
}
.service-cards .card-cont h2.title {
    font-family:  'Century Gothic',Verdana, sans-serif;
    text-transform: uppercase;
    display: inline; 
}
.service-cards .card-cont h2.title .s1 {
    font-size: .96rem;
    padding: 6px;
} 

.container.cards .card img {
    width:100%;
}
.container.cards .card .card-body h3{
    color:white;
}

/* [1] The container */
.img-hover-zoom {
 
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
  }
  
  /* [2] Transition property for smooth transformation of images */
  .img-hover-zoom img {
    transition: transform .5s ease;
  }
  
  /* [3] Finally, transforming the image when container gets hovered */
  .img-hover-zoom:hover img {
    transform: scale(1.5);
  }


  section .card img.topMain {
      width: 100%;
  }

  .beelocal .card-body {
    padding: 2rem;
} 

#sec-card-1 {
    animation-name: color-change;
    animation-duration: 5s;
    
}
 



@media (max-width: 400px) {
    .beelocal .card h3{
        font-size: 2.22rem;
    }

  .beelocal .card-body {
    padding: 1rem;
    } 

}

@media (min-width: 600px) {
    .beelocal .card h3{
        font-size: 2.11rem;
    }
}

@media (min-width: 900px) {
    .beelocal .card h3{
         font-size: 1.33rem;
    }
} 

@media (min-width: 1200px) {
    .beelocal .card h3{
         font-size: 2.010rem;
    }
} 

@media (min-width: 1600px) {
    .beelocal .card h3{
         font-size: 2.366rem;
    }
}