.service-banner{
  background: url(/assets/img/images/service/implementation/implementation-banner-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.custom-card{
  box-shadow: 2px 2px 9.9px -2px #00000026!important;
  border: 1px solid #91CBFF!important;
  /* background: linear-gradient(180deg, #EFF8FF 0%, #EDF1F5 100%); */
}

.sec2{
  height: 745px;
}

.sec2-img::after{
  content: url(/assets/img/images/service/customization/bg-round-shade.png);
  position: relative;
  display: inline-block;
  bottom: 115px;
  left: 452px;
  z-index: 1;
}

.service-card{
  left: 100px;
  position: relative;
  z-index: 5;
}

.service-card::before{
  content: url(/assets/img/images/service/customization/ellipse-fill.png);
  position: relative;
  display: inline-block;
  z-index: 1;
  top: 100px;
  right: 80px;
}

.service-card::after{
  content: url(/assets/img/images/service/customization/Rectangle-fill.png);
  position: relative;
  display: inline-block;
  z-index: 1;
  bottom: 291px;
  right: 52px;
}

.arrows {
  position: relative; /* Ensures images stay in the same place */
  height: 20px; /* Set consistent height */
  width: 20px; /* Set consistent width */
}

.arrow-up,
.arrow-down {
  position: absolute; /* Stack images on top of each other */
  top: 0;
  right: 0;
  height: 100%; /* Match parent height */
  width: 16%; /* Match parent width */
  object-fit: cover; /* Maintain image aspect ratio */
}

.arrow-down {
  display: none; /* Hide by default */
}

.text-card{
  color: #fff;
}

.btn-card:hover{
  box-shadow: 0px 4px 4px 0px #00000040!important;
  border-bottom: 1px solid var(--Blue, #2C7EBB)!important;
}

.btn-card:hover .text-card{
  color: #2C7EBB!important;
}

.btn-card:hover .arrow-up {
  display: none; /* Hide arrow-up on hover */
}

.btn-card:hover .arrow-down {
  display: block; /* Show arrow-down on hover */
}

@media (max-width: 1300px){
  .sec2-img::after{
    display: none;
  }
}

@media (max-width: 992.98px){
  .sec2{
    height: auto;
  }

  .service-card{
    left: 0;
    height: 743px;
  }

  .sec2-img{
    width: 500px;
  }
}

@media (max-width: 576px){
  .sec2-img{
    display: none;
  }
}

.light-banner-card{
  background: url(/assets/img/images/light-banner-card.png);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 12px;
}