body {
  background: radial-gradient(ellipse at center, #e6ecf7 0%, #93a8ce 100%);
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  color: #193155;
  font-size: 18px;
}

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main card flex layout */
.hero-card-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 4px 32px #bdc8e144;
  width: calc(100vw - 4vw);
  max-width: 1600px;
  margin: 5vh auto 64px auto;
  padding: 0;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.knight-col {
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.knight {
  width: 340px;
  max-width: 28vw;
  min-width: 120px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 38px #25407733) brightness(1.12);
  align-self: center;
  margin-left: 3vw;    /* This gives the knight space from the edge!! */
  margin-right: 3vw;
  
}
.knight-right { transform: scaleX(-1); }

.hero-content-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  padding: 62px 2vw 54px 2vw;
  min-width: 0;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  font-size: 1.22em;
}

.hero-content-flex h1 {
  font-size: 2.7rem;
  color: #223374;
  font-weight: 900;
  margin-bottom: 19px;
  letter-spacing: 0.01em;
}

.hero-invitation {
  text-align: center;
  margin: 32px auto;
  width: 100%;
  max-width: 700px;
  color: #e8b200;
  font-size: 1.18rem;
  font-weight: 650;
  line-height: 1.4;
}

.armour-scripture { width: 100%; margin-bottom: 29px; text-align: center; }
.scripture-title { font-size: 1.22em; color: #1b345e; font-weight: bold; margin-bottom: 7px; }
.scripture-main { font-size: 1.15em; color: #2e3557; font-weight: 500; margin-bottom: 3px; }
.scripture-ref { font-size: 1.1em; color: #3c5783; font-style: italic; }

.hero-content-flex h2 {
  font-size: 1.32rem;
  color: #3f4c61;
  font-weight: 700;
  margin: 2em 0 0.6em 0;
}
.countdown {
  font-size: 2.06rem;
  font-weight: 800;
  color: #263267;
  margin: 22px 0 26px 0;
  letter-spacing: .02em;
}
.text-center {
  font-size: 1.17rem;
  color: #31435e;
  margin-top: 2px;
}

#hero + .scroll-down-cue,
#hero + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Scroll cue: visible and big on mobile, not on desktop */
.scroll-down-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px 0 0 0;
  opacity: 0.92;
  animation: bounce-down 1.5s infinite;
  font-size: 1.2rem;
  z-index: 10;
}
.scroll-down-text {
  color: #223374;
  font-weight: 700;
  margin-bottom: 4px;
}
.scroll-chevron {
  font-size: 2.8em;
  color: #223374;
  animation: pulse-down 1.3s infinite;
  margin-top: -5px;
}
@media (min-width:900px) { .scroll-down-cue { display: none; } }
@keyframes bounce-down { 0%, 100% { transform: translateY(0);} 30% { transform: translateY(7px);} }
@keyframes pulse-down { 0%, 100% { transform: translateY(0);} 60% { transform: translateY(14px);} }

/* Tablet: a little less padding, keep gap, shrink knights */
@media (max-width: 1200px) {
  .hero-card-flex { max-width: 99vw; }
  .knight-col { min-width: 100px; padding-left: 5vw; padding-right: 5vw; }
  .knight { width: 180px; }
  .hero-content-flex { max-width: 730px; }
}

/* Mobile: stack knights above/below, keep edge gap and shrink knights */
@media (max-width: 800px) {
  body, .hero-content-flex, .footer-card, .wide-footer-card { font-size: 1.13em; }
  .hero-card-flex {
    flex-direction: column;
    align-items: center;
    width: 99vw;
    padding: 0;
    min-height: auto;
  }
  .knight-col {
    min-width: 0;
    padding-left: 13vw;
    padding-right: 13vw;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
  }
  .knight {
    width: 64vw;
    max-width: 180px;
    min-width: 90px;
    margin: 16px auto 10px auto;
    display: block;
  }
  .hero-content-flex { max-width: 98vw; padding: 8vw 4vw 8vw 4vw; }
  .hero-content-flex h1 { font-size: 1.22em; }
}

@media (max-width: 500px) {
  .knight { display: none; }
  .hero-content-flex { padding: 5vw 2vw; font-size: 1.17em;}
  .hero-content-flex h1 { font-size: 1.06em; }
  .countdown { font-size: 1em; }
}

/* Podcast/Contact/Footer */
#podcast-section {
  margin-top: 0;
  padding-top: 0;
}
.podcast-title {
  text-align: center;
  font-size: 2.3rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 36px;
}
.podcast-iframe {
  width: 100%;
  height: 1400px;
  border: none;
  background: transparent;
  margin: 0 auto 0 auto;
  display: block;
  max-width: 100%;
}
@media (max-width: 768px) {
  .podcast-title { font-size: 1.35rem; }
  .podcast-iframe { height: 900px; }
}
@media (max-width: 480px) {
  .podcast-iframe { height: 700px; }
}

/* Footer card matches hero width, with new bottom margin */
.footer-card,
.wide-footer-card {
  background: #484848;
  color: #d5e8ee;
  border-radius: 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.20);
  padding: 36px 0;
  width: calc(100vw - 4vw);
  max-width: 1600px;
  margin: 40px auto 44px auto;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .018em;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transition: width .3s;
  white-space: normal;        /* allows wrap! */
  word-break: break-word;     /* ensures wrap of long words */
  overflow-wrap: break-word;  /* wraps long emails */
  padding-left: 18px;         /* more comfortable on mobile */
  padding-right: 18px;
  min-height: 0;              /* allows it to shrink/expand */
  flex-wrap: wrap;
}
.footer-card p,
.wide-footer-card p {
  margin: 0;
  line-height: 1.5;           /* better spacing for wrapped email */
}
.footer-card a,
.wide-footer-card a {
  display: inline;            /* use inline or inline-block, NOT block */
  word-break: break-all;      /* or 'break-word', both are ok */
  overflow-wrap: anywhere;    /* this is KEY for modern browsers */
  box-sizing: border-box;
  max-width: 100%;            /* keep in card */
}
.footer-card a:hover, .wide-footer-card a:hover { color: #ffde65; background: #1b2740; }
@media (max-width:600px) {
  .footer-card, .wide-footer-card, .hero-card-flex {
    width: 98vw;
    font-size: 1.18rem;
    padding: 0;
    margin: 30px auto 26px auto;
  }
}

#footer {
  background: #0d182d;
  padding: 30px 0;
  color: #fff;
  font-size: 16px;
  font-family: "Montserrat", Arial, sans-serif;
}
#footer .copyright { text-align: center; }
#footer .credits { text-align: center; font-size: 13px; color: #fff; }
#footer .credits a { color: #72a8bf; }

.responsive { width: 100%; height: auto; }
.box2 img { object-fit: contain; }
.fa { padding: 20px; font-size: 30px; width: 30px; text-align: center; margin: 5px 2px; border-radius: 50%; }
.fa:hover { opacity: 0.7; }
.fa-facebook { background: #3B5998; color: white; }
.fa-twitter { background: #55ACEE; color: white; }
.fa-google { background: #dd4b39; color: white; }
.fa-linkedin { background: #007bb5; color: white; }
.fa-youtube { background: #bb0000; color: white; }
.fa-instagram { background: #125688; color: white; }
.fas, .fab { font-size: 24px; }

.footer-card, .wide-footer-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #484848;
  color: #d5e8ee;
  border-radius: 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.20);
  padding: 18px 6vw;
  width: calc(100vw - 4vw);
  max-width: 1600px;
  margin: 40px auto 44px auto;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.22rem;
  letter-spacing: .018em;
  box-sizing: border-box;
  transition: width .3s;
}

.footer-envelope {
  font-size: 2em;
}

.footer-email-text {
  word-break: break-all;
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 1em;
}

@media (max-width: 700px) {
  .footer-card, .wide-footer-card {
    flex-direction: column;
    gap: 6px;
    font-size: 1.07em;
    padding: 16px 4vw;
    width: 97vw;
  }
  .footer-envelope {
    font-size: 1.8em;
    margin-bottom: 0;
  }
  .footer-email-text {
    font-size: 1.13em;
    width: 100%;
  }
}

@media (max-width: 700px) {
  .back-to-top-btn {
    width: 38px;
    height: 38px;
    font-size: 1.3em;
    opacity: 0.85;
  }
}