:root {
  --primary-color: #015351;
  --secondary-color: #feb238;
  --background-color: #f8f9fa;
  --text-color: #343a40;
}

/* Logo */
.site-logo {
  height: 29px;
  width: auto;
  margin-right: 8px;
}

/* SECTION */
#home {
  padding-top: 0;
  margin-top: 58px; /* navbar */
}

.section {
  padding: 80px 0 40px 0;
  clear: both;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
  font-weight: bold;
}

/* SERVICE */

.service-header {
  margin-top: -2.8rem;
  position: relative;
}
.service-category {
  color: var(--secondary-color);
  background-color: var(--primary-color);
  border: 2px solid var(--secondary-color);
  text-align: center;
}
.service-category-photo {
  z-index: 900;
}
.service-category-description {
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: var(--secondary-color);
  margin-bottom: 0;
}

.service-card {
  border: 1px solid #ccc;
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-10px);
}

/* CAROUSEL */
.carousel-caption {
  text-shadow: #015351 1px 1px 2px;
}

/* CUSTOM */

h1 {
  text-transform: uppercase;
  color: var(--primary-color);
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--secondary-color) !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--secondary-color) !important;
}

.social-icon {
  font-size: 2rem;
  margin: 0 10px;
  color: var(--secondary-color);
  transition: color 0.3s;
}

.social-icon:hover {
  color: var(--primary-color);
}