.fixedcompile {
  color: white;
}

#services {
  padding-top: 20px;
  padding-bottom: 20px;
}

#services .services-list .service-item {
  position: relative;
  padding-right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
}

#services .services-list .service-item .overlay {
  border-radius: 5px;
  opacity: 0.8;
  background: linear-gradient(69deg, #525A60 0.44%, #243F52 100.21%), #525A60;
}

#services .services-list .service-item:last-of-type {
  margin-bottom: 0;
}

#services .services-list .service-item .service-text {
  position: relative;
  z-index: 3;
  margin-top: 11rem;
  padding: 2rem;
  max-width: 800px;
}

#services .services-list .service-item .service-text p {
  margin-bottom: 0;
}

#services .services-list .service-item .service-text * {
  color: #F5F1EA;
}

#services .services-list .service-item .service-link {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  height: 100%;
  background: rgba(16, 31, 41, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  transition: all 200ms ease;
}

#services .services-list .service-item .service-link span {
  text-align: center;
  color: #F5F1EA;
}

#services .services-list .service-item .service-link svg {
  width: 70px;
  height: auto;
  margin-top: 10px;
}

#services .services-list .service-item:hover .overlay {
  opacity: 0.9;
}

#services .services-list .service-item:hover .service-link {
  background: rgba(225, 174, 125, 0.6);
}

#services .services-list .service-item:hover .service-link svg * {
  transition: all 150ms ease;
}

#services .services-list .service-item:hover .service-link svg rect {
  stroke: #F5F1EA;
}

#services .services-list .service-item:hover .service-link svg path {
  fill: #F5F1EA;
  transform: translateX(2px);
}

@media only screen and (max-width: 1050px) {
  #services .services-list .service-item {
    display: flex;
    flex-direction: column;
  }
  #services .services-list .service-item .service-text {
    width: 100%;
    max-width: 100%;
  }
  #services .services-list .service-item .service-link {
    width: 100%;
    max-width: 100%;
    position: relative;
    height: auto;
    padding: 2rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #services .services-list .service-item .service-link svg {
    margin-left: 15px;
    width: 60px;
    margin-top: 2px;
  }
}