/* DO NOT override background on body directly */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

/* Proper parallax-style background on .home section for server page */
.home.server-itad-bg {
  background-image: url('../images/server-itad.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  color: #fff;
  padding-top: 100px;
}

/* Transparent navbar over image */
.main_menu_bg .navbar-default {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* Navbar overlay bar */
.main_menu_bg {
  background-color: rgba(0, 0, 0, 0.6);
  height: 75px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.service-box {
  position: relative;
  overflow: hidden;
}

.service-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 120px; /* make it a bit larger for a smoother gradient */
  height: 80px;
  background: linear-gradient(
  to bottom right,
  rgba(0, 188, 212, 0.05) 55%,  /* barely blue */
  rgba(0, 188, 212, 1) 100%     /* strong blue in corner */
);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.service-box:hover::after {
  opacity: 1;
}