/* Contact page styles */
.contact-hero h2 { color:#ffffff; font-weight:900; }
.contact-left .contact-thumb { width:180px; height:120px; object-fit:cover; }
.contact-left .lead { color:#4b4b52; }

.contact-form-card { background:#fff7f6; border:1px solid #f3e7e689; }
.btn-orange { background:#ef6b3a; color:#fff; border:none; }
.btn-orange:hover { background:#e45f2f; }

/* Full-page background image layer for contact hero + entrance animation */
.contact-hero {
  position: relative;
  overflow: hidden;
  /* fill the available main content area (between header and footer) */
  min-height: 100%;
  display: flex;
  align-items: center;
  color: #fff; /* fallback text color */
}

.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/media/miscellaneous/contact_bg_img.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.25; /* requested opacity */
  z-index: 0;
  pointer-events: none;
  transform: scale(1.03);
  animation: contactHeroEnter 700ms ease-out both;
}

@keyframes contactHeroEnter {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

/* Ensure content sits above background layer */
.contact-hero > .container { position: relative; z-index: 1; }

/* make form card slightly blend with the background */
.contact-form-card {
  background: rgba(153, 216, 214, 0.17); /* semi-opaque so background shows through */
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  color: #2e2a3a;
}

@media (max-width:767px) {
  .contact-left { text-align:center; }
  .contact-left .contact-thumb { margin:0 auto; }
}
.btn-white:hover {
  
  background-color: #d11010bb; /* A lighter shade of orange on hover */
  border-color: #853a05b4; /* Optional: Change the border color too */
  color: rgb(233, 233, 233);
}