.services {
   width: 100%;
   background-image: url('../image/projects-bg.png');
   background-size: cover;
}

.services-section {
   width: 100%;
   height: 700px;
   background-size: cover;
   object-fit: cover;
   background-position: center;
   background-image: url('../image/service-img-min.jpg');
   color: #fff !important;
}

.title-tag-card {
   font-family: var(--secondary-font);
   font-size: 20px;
   font-weight: 500;

}

.services .row {
   gap: 30px 0;
}

.back-side .secondary-theme-btn:hover {
   border: 1px solid #fff;
}

.back-side .secondary-theme-btn:hover a {
   color: #fff;
}

.service-span-1,
.service-span-2,
.service-span-3,
.service-span-4 {
   height: 100%;
   width: 100%;
   overflow-y: hidden;
   position: relative;
}

.service-span-1,
.service-span-2,
.service-span-3 {
   border-right: 2px solid #fff;
}

.back-side {
   opacity: 0;
}

.service-box:hover .front-side>* {
   opacity: 0;
}

.service-box:hover .back-side {
   height: 100%;
   /* transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s; */
   position: relative;
   z-index: 999;
   opacity: 1;
   /* -webkit-animation: down-up 1s cubic-bezier(0.19, 1, 0.22, 1); */
   animation: down-up 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.service-box:hover {
   background-color: #4AAB3DCC;
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
}

/* .service-box:hover .front-side{} */
.service-span-1:hover .front-side {

   background: url('../image/solar-panel.svg');
   background-repeat: no-repeat;
   background-size: 250px;
   background-position: top 15% left 15%;
   backdrop-filter: blur(2px);
   width: 100%;
   height: 100%;
   opacity: 0.1;


}

.service-span-2:hover .front-side {

   background: url('../image/hydropower.svg');
   background-repeat: no-repeat;
   background-size: 250px;
   background-position: top 15% left 15%;
   backdrop-filter: blur(2px);
   width: 100%;
   height: 100%;
   opacity: 0.1;
}

.service-span-3:hover .front-side {

   background: url('../image/wind.svg');
   background-repeat: no-repeat;
   background-size: 250px;
   background-position: top 15% left 15%;
   backdrop-filter: blur(2px);
   width: 100%;
   height: 100%;
   opacity: 0.1;
}

.service-span-4:hover .front-side {

   background: url('../image/resource-fosil.svg');
   background-repeat: no-repeat;
   background-size: 250px;
   background-position: top 15% left 15%;
   backdrop-filter: blur(2px);
   width: 100%;
   height: 100%;
   opacity: 0.1;
}


@-webkit-keyframes down-up {
   from {
      transform: translateY(350px);
   }

   to {
      transform: translateY(0px);
   }
}

@keyframes down-up {
   from {
      transform: translateY(350px);
   }

   to {
      transform: translateY(0px);
   }
}




@media (max-width:991px) {
   .services-section {
      height: fit-content;
   }

   .service-box {
      height: 500px;
   }

   .service-span-2 {
      border-right: none;
   }

   .service-span-1,
   .service-span-2 {
      border-bottom: 2px solid #fff;
   }


}

@media (max-width:575px) {

   .service-span-1,
   .service-span-3 {
      border-right: none;
   }

   .service-span-3 {
      border-bottom: 2px solid #fff;
   }
}