.services-wrapper{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:520px;
}

@media (min-width:1024px){
  .services-wrapper{
    flex-direction:row;
    height:500px;
  }
}

.service-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  cursor:pointer;
  flex:1;
  transition: flex-grow 500ms ease, transform 500ms ease;
  min-height:240px;

}


@media (min-width:1024px){
  .service-card{
    flex: 1 1 0;
    flex-grow: 1;             
    min-width: 0;
  }
  .service-card.is-active{
    flex-grow: 6;             
  }
}

.service-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform 700ms ease;
}
@media (min-width:1024px){
  .service-card.is-active .service-bg{ transform:scale(1.03); }
}


.service-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(4, 41, 110, 0.95), rgba(4, 57, 154, 0.35), rgba(15,70,170,0));
  transition: opacity 300ms ease;
}


.service-expanded{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:28px;
  color:#fff;
  transition:opacity 250ms ease;
}

@media (min-width:1024px){
  .service-expanded{ padding:40px; }
}

.service-title{
  font-size:28px;
  line-height:1.2;
  font-weight:600;
  margin-bottom:10px;
  color: #fff;
}

.service-text{
  font-size:14px;
  line-height:1.6;
  max-width:800px;
  color:rgba(255,255,255,0.9);
  text-align: justify;
}


.service-collapsed{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:56px; 
  opacity:1;
  transition:opacity 250ms ease;
}

.service-collapsed-text{
  color:#fff;
  font-weight:800;
  font-size:30px;    
  letter-spacing:0.02em;
  line-height:1;
  text-shadow:0 8px 24px rgba(0,0,0,0.35);
}

@media (min-width:1024px){
  .service-collapsed-text{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
  }
}


@media (min-width:1024px){
  .service-card .service-expanded{ opacity:0; }
  .service-card .service-collapsed{ opacity:1; }

  .service-card.is-active .service-expanded{ opacity:1; }
  .service-card.is-active .service-collapsed{ opacity:0; }
}


@media (max-width:1023px){
  .service-collapsed{ display:none; }
  .service-expanded{ opacity:1; }
}