html,
body {
  scroll-behavior: smooth !important;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}




#services-title {
  /* PC TRANSPARENCY EFFECT */
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-clip: text, padding-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  backdrop-filter: blur(8px);
  background: rgb(0 0 0 / 20%);
  display: flex;
  /* Enable Flexbox */
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  right: 3% !important;
  max-width: 107% !important;
  width: 107% !important;
}



@media only screen and (max-width: 1024px) {

  /* MOBILE CORRECTION FOR TITLE */
  #services-title {
    color: #fff !important;
  }
}

.service-pictures::after {
  /* OVERLAY FOR PICTURES */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  /* No overlay by default */
  transition: background 0.3s ease;
  /* Smooth transition for the overlay */
}


/* HOVER EFFECT */
.service-pictures:hover {
  transform: scale(1.1);
}

.service-pictures:hover::after {
  background: rgba(0, 0, 0, 0);
}




/* PIC HEADINGS CHANGE OPACITY*/
#heading-one {
  color: white;
}

.service-pictures:hover #heading-one {
  opacity: 0.1;
  transition: opacity 0.3s ease-out;
}

#heading-two {
  color: white;
}

.service-pictures:hover #heading-two {
  opacity: 0.1;
  transition: opacity 0.3s ease-out;
}


#heading-three {
  color: white;
}

.service-pictures:hover #heading-three {
  opacity: 0.1;
  transition: opacity 0.3s ease-out;
}


#heading-four {
  color: white;
}

.service-pictures:hover #heading-four {
  opacity: 0.1;
  transition: opacity 0.3s ease-out;
}


#heading-five {
  color: white;
}

.service-pictures:hover #heading-five {
  opacity: 0.1;
  transition: opacity 0.3s ease-out;
}