.service-page h2 {
  color: var(--color-teal);
}
.service-page a {
  color: var(--color-dark-blue-light);
}

.service-intro {
  padding: 1rem 0;
}

.service-cta a {
  color: #f9f9f9;
}

/* PAGE DECORATION SHAPES */
 .shapes {
  z-index: -1;  
  position: fixed;
  opacity: 0.1;
} 

#polygon-one {
  position: fixed;
  top: 140px;
  left: 215px;
  z-index: -1;  
}

#polygon-two {
  position: fixed;
  top: 10px;
  left: 8px;
  z-index: -1;
  fill: var(--color-orange);  
}

#ellipese-one {
  position: fixed;
  top: 600px;
  left: 128px;
  z-index: -1;  
}

#ellipese-two {
  position: fixed;
  top: 100px;
  left: 160px;
  z-index: -1;  
  width: 34px;
  height: auto;
}


#spinner-one {
  position: fixed;
  top: 400px;
  left: 70px;
  z-index: -1;  
  /* width: 34px; */
  height: auto;
  /* opacity: 0.4; */
  animation: slow-spin 40s linear infinite;
}

@keyframes slow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#right-polygon-one {
  position: fixed;
  top:300px;
  right:220px;
}


#right-polygon-two {
  position: fixed;
  top:628px;
  right:22px;
}

#spinner-two {
  position: fixed;
  top: 400px;
  right: 70px;
  z-index: -1;  
  height: auto;
  animation: slow-spin 40s linear infinite;
}

#right-ellipse-one {
  position: fixed;
  top:100px;
  right: 128px;
  z-index: -1;  
}

#right-ellipse-two {
  position: fixed;
  top: 300px;
  right: 60px;
  z-index: -1;  
  width: 34px;
  height: auto;
}

#right-ellipse-three {
  position: fixed;
  top: 650px;
  right: 260px;
  z-index: -1;  
  width: 34px;
  height: auto;
}

.service-page {
  margin: auto;
  background-color: white;
  padding: 6rem 1rem;
}

.service-hero {
  display: flex;
  flex-direction: column;
  
}

.service-hero-heading {
  background-color: #f9f9f9;
  color: var(--color-teal);
  width: 100%;
  padding: 2% 0%;
  translate: rotate(45deg);
  box-shadow: 4px 4px 0px 0px var(--color-teal), 8px 8px 0px 0px #FF6F61,-4px -4px 0px 0px var(--color-teal), -8px -8px 0px 0px #FF6F61;
  text-align: center;
}


.service-hero img {
  max-width: 100%;
  height: 300px;
  object-fit:cover;
}


@media (min-width: 768px) {
  .service-page {
  width: 56vw;
  margin: auto;
  padding: 6rem 4rem;
}


}