/*!
 * Sterling Dental - Landing Page
 * Clean letter-card layout
 */

:root {
  --card-max-width: 780px;
}

/* ===== Global ===== */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #333333;
  background-color: #000000;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Merriweather", "Georgia", serif;
  font-weight: 700;
  margin: 0 0 0.5em 0;
}

/* ===== Hero section ===== */

.intro-header {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url(../img/background.jpeg) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;   /* vertically center */
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Dark overlay to soften image and help card stand out */
.bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.intro-message {
  position: relative;
  width: 100%;
  padding: 20px 0;
  z-index: 1;
}

/* White letter-style card */

.message-card {
  width: min(92%, var(--card-max-width));
  margin: 0 auto;
  padding: 2rem 2.25rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  text-align: left;
}

/* ===== Typography inside card ===== */

.thankyou-title {
  font-size: clamp(28px, 3vw + 16px, 40px);
  line-height: 1.2;
  color: #2b2b2b;
  text-align: center;
  margin-bottom: 1rem;
}

.lead-copy {
  font-size: clamp(17px, 1.1vw + 14px, 20px);
  line-height: 1.7;
  font-weight: 400;
  margin: 0 0 1.1em 0;
  color: #444444;
}

.signature {
  font-size: clamp(18px, 1vw + 14px, 20px);
  margin-top: 1.6em;
  color: #333333;
  text-align: center;
}

/* Divider inside card */

.intro-divider {
  border: 0;
  border-top: 1px solid #cccccc;
  margin-top: 1.8rem;
}

/* ===== Responsive tweaks ===== */

@media (max-width: 767px) {
  .message-card {
    padding: 1.5rem 1.25rem;
  }

  .thankyou-title {
    font-size: clamp(26px, 6vw, 34px);
  }

  .lead-copy {
    font-size: clamp(16px, 4.2vw, 19px);
    line-height: 1.6;
  }

  .signature {
    font-size: clamp(17px, 4vw, 19px);
  }
}

/* Footer (left here in case you add one later) */

footer {
  padding: 40px 0;
  background-color: #f8f8f8;
}

p.copyright {
  margin: 10px 0 0;
  color: #333333;
}

a.email-address {
  color: #333333;
}
a.email-address:hover {
  color: #000000;
}