.op-services{
  margin-top: -108px;
}

.op-services .service{
  padding: 28px;
  position: relative;
  color: white;
  text-align: center;
  transition: all ease-in-out .5s;
}
.op-services .service.num-0{
  background: var(--color-secondary);
}
.op-services .service.num-1{
  background: var(--color-blue);
}
.op-services .service.num-2{
  background: var(--color-primary);
}

.op-services .service.num-0:hover{
  background: #97a3ac;
}
.op-services .service.num-1:hover{
  background:   #00b4ff;
}
.op-services .service.num-2:hover{
  background: #0078ff;
}



.op-services .service i{
  font-size: 44px;
}

.op-services .service .caption{
  padding-top: 12px;
  padding-bottom: 48px;
}

.op-services .service .caption h4{
  padding-bottom: 12px;
}

.op-services .service .caption p{
  
}

.op-services .service .button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.op-services .service .button a{
  border-width: 1px;
}

.op-services .service.num-0 .button a:hover{
  color: var(--color-secondary);
}
.op-services .service.num-1 .button a:hover{
  color: var(--color-blue);
}
.op-services .service.num-2 .button a:hover{
  color: var(--color-primary);
}

@media (min-width: 768px) { 
.op-services{
  margin-top: --130px;
}
}


@media (min-width: 992px) { 
.op-services{
  margin-top: -300px;
}
}