/* -------------------------------
   GLOBAL STYLES
--------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  color: #1e2a3a;
  background-color: #f9f9f9;
  line-height: 1.6;
}

/* Container for centered layouts */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Headings */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Buttons */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
}

.btn-primary {
  background-color: #d4af37;
  color: #1e2a3a;
}

.btn-primary:hover {
  background-color: #b9962f;
}

.btn-secondary {
  border: 2px solid #d4af37;
  color: #d4af37;
}

.btn-secondary:hover {
  background-color: #d4af37;
  color: #1e2a3a;
}

/* -------------------------------
   NAVBAR
--------------------------------*/
.navbar {
  background-color: #1e2a3a;
  color: #fff;
  padding: 1rem 0; /* Increased slightly for visual breathing room */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 60px;    /* You can adjust 50–70px depending on taste */
  width: auto;     /* Keeps proportions correct */
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: #fff;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
  color: #d4af37;
}

/* -------------------------------
   HERO SECTION
--------------------------------*/
.hero {
  background: linear-gradient(rgba(30,42,58,0.75), rgba(30,42,58,0.75)), 
              url('../images/backgrounds/hero-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero .subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #d4af37;
}

.hero-buttons a {
  margin: 0.5rem;
}

/* -------------------------------
   INTRO SECTION (Homepage About)
--------------------------------*/
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 5rem 0;
  background-color: #f9f9f9;
  flex-wrap: wrap;
}

.intro .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  gap: 2.5rem;
}

.intro-text {
  flex: 1 1 55%;
  max-width: 600px;
}

.intro-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #1e2a3a;
  margin-bottom: 1rem;
}
.intro-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #1e2a3a;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.intro-text h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #d4af37;
  border-radius: 2px;
}

.intro-text p {
  color: #333;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.intro-text .btn-primary {
  background-color: #d4af37;
  color: #1e2a3a;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.intro-text .btn-primary:hover {
  background-color: #b9962f;
}

.intro-image {
  flex: 1 1 35%;
  text-align: center;
}

.intro-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  object-fit: cover;
  max-height: 450px;
}

/* Responsive layout */
@media (max-width: 900px) {
  .intro .container {
    flex-direction: column;
    text-align: center;
  }

  .intro-text {
    max-width: 100%;
  }

  .intro-image img {
    max-width: 80%;
    max-height: 380px;
  }

  .intro-text h2 {
    font-size: 1.75rem;
  }
}
/* -------------------------------
   FEATURED BOOK (Enhanced)
--------------------------------*/
.featured-book {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  padding: 5rem 1rem;
}

.featured-book .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3rem;
}

.book-cover {
  flex: 1 1 40%;
  text-align: center;
}

.book-cover img {
  width: 100%;
  max-width: 350px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-cover img:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
/* ---------------------------------------
   BOOK COVER CAPTION OVERLAY
--------------------------------------- */
.book-image-wrapper {
  position: relative;
  display: inline-block;
}

.book-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(30, 42, 58, 0.8); /* translucent navy */
  color: #fff;
  text-align: center;
  padding: 0.6rem 0;
  border-radius: 0 0 12px 12px;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.book-caption .author-name {
  font-weight: 600;
  margin-right: 0.5rem;
}

.book-caption .edition {
  background-color: #d4af37;
  color: #1e2a3a;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
}

.book-text {
  flex: 1 1 50%;
}

.book-text h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.book-text h3 {
  color: #555;
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  font-style: italic;
}

.book-text p {
  color: #333;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 550px;
}

.book-text .btn-primary {
  background-color: #d4af37;
  color: #1e2a3a;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.book-text .btn-primary:hover {
  background-color: #b9962f;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Responsive layout */
@media (max-width: 768px) {
  .featured-book .container {
    flex-direction: column;
    text-align: center;
  }

  .book-text {
    padding: 0;
  }

  .book-text h2 {
    font-size: 1.75rem;
  }
}
/* -------------------------------
   YOUTUBE SECTION (Enhanced)
--------------------------------*/
.youtube {
  background-color: #f5f5f5;
  padding: 4rem 1rem;
  text-align: center;
  border-top: 2px solid #d4af37;
  border-bottom: 2px solid #d4af37;
}

.youtube h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #1e2a3a;
  margin-bottom: 0.75rem;
}

.youtube p {
  color: #333;
  font-size: 1.1rem;
  max-width: 650px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* Responsive video wrapper */
.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .youtube h2 {
    font-size: 1.75rem;
  }

  .youtube p {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

/* -------------------------------
   NEWSLETTER
--------------------------------*/
.newsletter {
  background-color: #1e2a3a;
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
}

.newsletter input[type="email"] {
  padding: 0.75rem;
  width: 250px;
  border: none;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.newsletter button {
  background-color: #d4af37;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  color: #1e2a3a;
  font-weight: bold;
  cursor: pointer;
}

.newsletter button:hover {
  background-color: #b9962f;
}

/* -------------------------------
   FOOTER
--------------------------------*/
footer {
  background-color: #1e2a3a;
  color: #fff;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-right a {
  color: #d4af37;
  margin-left: 1rem;
}

.footer-right a:hover {
  color: #fff;
}

/* -------------------------------
   RESPONSIVE DESIGN
--------------------------------*/
@media (max-width: 768px) {
  .intro, .featured-book {
    flex-direction: column;
    text-align: center;
  }

  .intro-text, .book-text {
    padding: 0;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero h1 {
    font-size: 2rem;
  }
} 
/* -------------------------------
   MOBILE MENU TOGGLE
--------------------------------*/
.menu-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  display: none;
}

@media (max-width: 768px) {
  .menu-btn {
    display: block;
    margin-left: 1rem;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #1e2a3a;
    width: 100%;
    text-align: center;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    margin: 1rem 0;
  }
}
<section class="about">
  <div class="container about-layout">
    <div class="about-image">
      <img src="assets/images/matthias-key.jpg" alt="Matthias Key portrait">
    </div>

    <div class="about-text">
      <h1>About Matthias Key</h1>
      <p>
        Matthias Key is a former laser physicist who, at the age of 29, turned to Jesus Christ as his Lord and Savior.
        Born in the U.S. to persecuted Christians who had escaped Soviet communism, Matthias excelled academically and
        began his career in advanced physics before sensing a divine call to ministry.
      </p>
      <blockquote>
        <em>“Revelation isn’t chaos—it’s code. Once you see its divine sequence, everything becomes clear.”</em>
      </blockquote>
    </div>
  </div>
</section>
/* -------------------------------
   ABOUT PAGE (Refined, Balanced Layout)
--------------------------------*/
.about {
  background-color: #ffffff;
  padding: 5rem 1rem 4rem;
}

.about .container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

.about-image {
  flex: 0 0 300px;
  text-align: center;
}

.about-image img {
  width: 100%;
  height: auto;
  max-width: 280px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

.about-text {
  flex: 1;
  min-width: 300px;
  max-width: 650px;
}

.about-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.25rem;
  color: #1e2a3a;
  margin-bottom: 1rem;
}

.about-text p {
  color: #333;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.about-text blockquote {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background-color: #f9f9f9;
  border-left: 4px solid #d4af37;
  font-style: italic;
  color: #1e2a3a;
  border-radius: 6px;
  font-size: 1rem;
}

/* Gray transition sections */
.about-journey {
  background-color: #f7f7f7;
  padding: 4rem 1rem;
  text-align: left;
}

.about-ministry {
  background-color: #ffffff;
  padding: 4rem 1rem 5rem;
  text-align: left;
}

.about-journey h2,
.about-ministry h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.about-journey p,
.about-ministry p {
  color: #333;
  line-height: 1.7;
  max-width: 850px;
  margin: 0.75rem auto;
  font-size: 1.05rem;
}

.about-ministry .btn-primary {
  display: inline-block;
  margin-top: 2rem;
}

/* Responsive layout */
@media (max-width: 900px) {
  .about .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-image img {
    max-width: 240px;
  }

  .about-text h1 {
    font-size: 1.9rem;
  }

  .about-journey,
  .about-ministry {
    text-align: center;
  }
}
/* -------------------------------
   BOOKS PAGE
--------------------------------*/
.books-header {
  background: #f7f7f2; /* Light, warm neutral */
  padding: 6rem 0 5rem;
  text-align: center;
}

.books-header h1 {
  color: #1c2431; /* Your dark navy */
  font-size: 3rem;
}

.books-header p {
  color: #b5962f; /* Your gold accent */
  font-size: 1.4rem;
  margin-top: 1rem;
}

/* Upcoming Titles Section */
.upcoming {
  background-color: #f7f7f7;
  padding: 4rem 1rem;
  text-align: center;
}

.upcoming h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #1e2a3a;
  margin-bottom: 1rem;
}

.upcoming p {
  color: #333;
  max-width: 800px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.upcoming-placeholder {
  background-color: #fff;
  border: 2px dashed #d4af37;
  padding: 2rem;
  border-radius: 10px;
  display: inline-block;
}
/* -------------------------------
   BOOK DETAIL PAGE
--------------------------------*/
.book-hero {
  background: linear-gradient(rgba(30,42,58,0.85), rgba(30,42,58,0.85)),
              url('../images/backgrounds/books-bg.jpg') center/cover no-repeat;
  color: #fff;
  padding: 5rem 1rem;
}

.book-hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.hero-text {
  flex: 1 1 55%;
}

.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.hero-text h3 {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.hero-text p {
  font-style: italic;
  font-size: 1.1rem;
  color: #fff;
}

.hero-image {
  flex: 1 1 35%;
  text-align: center;
}

.hero-image img {
  max-width: 300px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.book-summary, .book-themes, .book-cta {
  padding: 4rem 1rem;
  text-align: center;
}

.book-summary h2, .book-themes h2, .book-cta h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  margin-bottom: 1rem;
}

.book-themes ul {
  list-style: none;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.book-themes li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.75rem;
}

.book-themes li::before {
  content: "★";
  color: #d4af37;
  position: absolute;
  left: 0;
  top: 0;
}

/* -------------------------------
   WHAT MAKES THIS BOOK UNIQUE
--------------------------------*/
.book-unique {
  background-color: #f7f7f7;
  padding: 4rem 1rem;
  text-align: center;
}

.book-unique h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 2rem;
  margin-bottom: 2.5rem;
}

.unique-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.unique-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  flex: 1 1 300px;
  max-width: 340px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unique-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.unique-item h3 {
  color: #d4af37;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.unique-item p {
  color: #333;
  line-height: 1.6;
  font-size: 1rem;
}
.book-cta {
  background-color: #1e2a3a;
  color: #fff;
}

.book-cta p {
  margin-bottom: 1.5rem;
}

.book-cta .btn-primary {
  background-color: #d4af37;
  color: #1e2a3a;
  font-weight: 600;
}

@media (max-width: 768px) {
  .book-hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-image img {
    max-width: 220px;
  }
}
/* -------------------------------
   SPEAKING PAGE
--------------------------------*/
.speaking-hero {
  background: linear-gradient(rgba(30,42,58,0.85), rgba(30,42,58,0.85)),
              url('../images/backgrounds/speaking-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 1rem;
}

.speaking-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.speaking-hero p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
}

.speaking-about {
  padding: 4rem 1rem;
  text-align: center;
  background-color: #ffffff;
}

.speaking-about h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.speaking-about p {
  max-width: 850px;
  margin: 0 auto;
  color: #333;
  line-height: 1.7;
}

.speaking-topics {
  background-color: #f7f7f7;
  padding: 4rem 1rem;
  text-align: center;
}

.speaking-topics h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.topics-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.topic {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  flex: 1 1 300px;
  max-width: 340px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topic:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.topic h3 {
  color: #d4af37;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.topic p {
  color: #333;
  line-height: 1.6;
  font-size: 1rem;
}

.speaking-cta {
  background-color: #1e2a3a;
  color: #fff;
  text-align: center;
  padding: 5rem 1rem;
}

.speaking-cta h2 {
  font-family: 'Playfair Display', serif;
  color: #d4af37;
  margin-bottom: 1rem;
}

.speaking-cta p {
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* -------------------------------
   SPEAKING VIDEO
--------------------------------*/
.speaking-video {
  background-color: #f0f0f0;
  padding: 4rem 1rem;
  text-align: center;
}

.speaking-video h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #1e2a3a;
  margin-bottom: 0.75rem;
}

.speaking-video p {
  max-width: 800px;
  margin: 0 auto 2rem;
  color: #333;
  font-size: 1.05rem;
  line-height: 1.6;
}

.speaking-video .video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.speaking-video .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
/* -------------------------------
   CONTACT PAGE
--------------------------------*/
.contact-hero {
  background: linear-gradient(rgba(30,42,58,0.85), rgba(30,42,58,0.85)),
              url('../images/backgrounds/contact-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 1rem;
}

.contact-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.contact-hero p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
}

.contact-form {
  padding: 4rem 1rem;
  background-color: #ffffff;
}

.form {
  max-width: 700px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1e2a3a;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 4px rgba(212, 175, 55, 0.5);
}

.contact-info {
  background-color: #f7f7f7;
  text-align: center;
  padding: 3rem 1rem 4rem;
}

.contact-info h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-info p {
  font-size: 1.05rem;
  color: #333;
  line-height: 1.6;
}

.contact-info a {
  color: #d4af37;
  font-weight: 600;
}

.contact-info a:hover {
  text-decoration: underline;
}
.coming-soon-banner {
  background-color: #fff8e1;
  border: 2px dashed #d4af37;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

.coming-soon-banner h2 {
  color: #1e2a3a;
  font-family: 'Playfair Display', serif;
  margin-bottom: 0.5rem;
}

.coming-soon-banner p {
  color: #333;
  font-size: 1rem;
}

.disabled-form {
  opacity: 0.5;
  pointer-events: none;
}
/* -------------------------------
   BLOG PAGE
--------------------------------*/
.blog-hero {
  background: linear-gradient(rgba(30,42,58,0.85), rgba(30,42,58,0.85)),
              url('../images/backgrounds/blog-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 1rem;
}

.blog-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.blog-hero p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
}

.blog-list {
  padding: 4rem 1rem;
  background-color: #f7f7f7;
}

.blog-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.blog-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  flex: 1 1 320px;
  max-width: 360px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.blog-card img {
  width: 100%;
  height: 350px; /* was 220px */
  object-fit: cover;
}

.blog-content {
  padding: 1.5rem;
  text-align: left;
}

.blog-content h2 {
  color: #1e2a3a;
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  font-family: 'Playfair Display', serif;
}

.blog-content p {
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-content .btn-secondary {
  font-size: 0.95rem;
}
/* -------------------------------
   BLOG POST TEMPLATE
--------------------------------*/
.post-hero {
  background: linear-gradient(rgba(30,42,58,0.85), rgba(30,42,58,0.85)),
              url('../images/backgrounds/blog-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 6rem 1rem;
}

.post-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: #d4af37;
  margin-bottom: 0.5rem;
}

.post-meta {
  font-size: 1rem;
  color: #e0e0e0;
  font-style: italic;
}

.post-content {
  padding: 4rem 1rem;
  background-color: #ffffff;
}

.post-content .container {
  max-width: 850px;
}

.post-header-image {
  width: 60%;
  max-width: 500px;
  display: block;
  margin: 1.5rem auto;
  border: 2px solid #d4af37;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.post-content h2 {
  color: #1e2a3a;
  font-family: 'Playfair Display', serif;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.post-content p {
  color: #333;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}

.post-content blockquote {
  border-left: 4px solid #d4af37;
  background-color: #fff8e1;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: #1e2a3a;
}

.closing-line {
  text-align: center;
  color: #555;
  font-style: italic;
  margin-top: 2rem;
}

.back-link {
  text-align: center;
  margin-top: 2.5rem;
}

/* -------------------------------
   BOOK PURCHASE SECTION
--------------------------------*/
.book-purchase {
  text-align: center;
  background-color: #f7f7f7;
  padding: 4rem 1rem;
}

.book-purchase h2 {
  font-family: 'Playfair Display', serif;
  color: #1e2a3a;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.book-purchase p {
  color: #333;
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.coming-soon-box {
  display: inline-block;
  text-align: center;
}

.disabled-btn {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

.coming-soon-text {
  margin-top: 0.75rem;
  font-weight: 600;
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* -------------------------------
   BUY NOW BUTTON (Reusable)
--------------------------------*/
.buy-now {
  display: inline-block;
  background-color: #d4af37;
  color: #1e2a3a;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.buy-now:hover {
  background-color: #b9962f;
  color: #fff;
}

.buy-now.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
  position: relative;
}

.buy-now.disabled::after {
  content: "Coming Soon";
  display: block;
  font-size: 0.8rem;
  color: #d4af37;
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.book-hero .hero-text .buy-now {
  margin-top: 1.5rem;
  display: inline-block;
}
/* ============================================
   GLOBAL DARK SECTION THEME UPGRADE (HIGH CONTRAST)
   ============================================ */

.hero,
.book-hero,
.section-dark,
.featured-book-dark,
footer,
.newsletter,
.youtube,
.speaking-hero,
.podcast-hero {
  background-color: #1e2a3a !important;
  color: #ffffff !important;
}

.hero h1, .hero h2, .hero h3,
.book-hero h1, .book-hero h2, .book-hero h3,
.section-dark h1, .section-dark h2, .section-dark h3,
footer h1, footer h2, footer h3,
.newsletter h1, .newsletter h2, .newsletter h3,
.youtube h1, .youtube h2, .youtube h3,
.podcast-hero h1, .podcast-hero h2, .podcast-hero h3 {
  color: #ffffff !important;
}

.hero p,
.book-hero p,
.section-dark p,
footer p,
.newsletter p,
.youtube p,
.podcast-hero p {
  color: #f0f0f0 !important;
}

.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;

  border: 2px solid #d4af37;   /* gold border */
  color: #d4af37;              /* gold text */
  background-color: rgba(212, 175, 55, 0.15); /* soft gold tint so it doesn’t disappear */
}

/* Make buttons contrast well on dark backgrounds */
.dark-button,
.hero .btn-primary,
.book-hero .btn-primary,
.podcast-hero .btn-primary {
  background-color: #d4af37 !important;
  color: #1e2a3a !important;
  border: none;
}

.dark-button:hover,
.hero .btn-primary:hover,
.book-hero .btn-primary:hover,
.podcast-hero .btn-primary:hover {
  background-color: #b9962f !important;
}

/* === ABOUT SECTION REDESIGN === */
.about {
  padding: 6rem 0;
  background: #f9f9f6;
}

.about-flex {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.about-image img {
  width: 360px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

.about-text {
  flex: 1;
  max-width: 650px;
}

.about-text h1 {
  font-size: 2.8rem;
  margin-bottom: 1.4rem;
  color: #1c2431;
}

.about-text p {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 1.4rem;
  color: #444;
}

/* QUOTE STYLE */
.about-quote {
  margin-top: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-left: 4px solid #c9a43e;
  background: #ffffff;
  border-radius: 8px;
  font-size: 1.25rem;
  font-style: italic;
  color: #222;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  max-width: 600px;
}