/* services.scss */
/* Header Styles for Services Page */
.header-services {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: flex-end; /* Align children towards the end (bottom) */
  background: url("/images/services.jpg") center center no-repeat;
  background-size: cover;
  height: 800px; /* Adjust height as needed */
  padding-bottom: 100px; /* Add some padding at the bottom */
}

.header-services .service-text {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: calc(12px + 3vw); /* Responsive font size */
  text-align: center;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Large Text Class Specific to Services Page */
.l-text {
  font-size: 30px;
}

/* Card Image Hover Effects Specific to Services Page */
.card img {
  transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.card img:hover {
  opacity: 0.8; /* Change opacity on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
}

/* Additional Styles Specific to Services Page */
/* Add any other styles that are only used in services.html here */

/*# sourceMappingURL=services.css.map */