@font-face {
  font-family: 'Nort';
  src: url('../fonts/Nort_Medium.otf') format('woff2');
  font-weight: 500;
  font-style: normal;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
}

.bg-dark-green {
  background-color: #03484e !important;
}


.bg-yellow {
  background-color: #fff3cd;
}

h1, h2, h3 {
  font-family: 'Nort', sans-serif;
  color: #03484e;
  font-size: 500;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  margin-block-end: 0px !important;
}

.new-christian-book-header {
  padding-top: 30px;
  padding-bottom: 25px;
}

.nav-link {
  font-family: 'Nort', sans-serif;
  color: #ffffff;
}

/* HERO needs to allow overflow and create a stacking context */
.hero {
  background: linear-gradient(
  to top right,
  #d5f0f6 0%,   
  #d5f0f6 40%,  
  #fdf5c7 100%  
);
  padding: 60px 0;
  position: relative;
  overflow: visible;   /* critical so the image can hang below */
  z-index: 2;          /* sits above the next section */
}

/* Base image size + shadow */
.book-cover {
  width: clamp(220px, 28vw, 380px);
  height: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  max-width: 400px;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width: 992px) {
  .book-cover-holder {
    position: absolute;
    right: min(4vw, 48px);
    top: -180px;    
    z-index: 3;      
  }

  .hero {
    min-height: 350px;
  }
}

@media (max-width: 991.98px) {
  .book-cover-holder {
    position: static;
    margin-top: 24px;
  }
}

/* --- Testimonial carousel layout --- */
.testimonial {
  position: relative;
  padding-top: 100px !important; /* space for the overhanging book */
  z-index: 1;
  color: #03484e;
}

/* Keep full width centered on mobile */
@media (max-width: 992.98px) {
  .testimonial .blockquote {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }
}

/* On desktop, keep text on the left half so the book can overlap on the right */
@media (min-width: 993px) {
  .testimonial .blockquote {
    max-width: 50%;
    text-align: left;
    margin: 0; /* left aligned to container */
  }
}

.blockquote-gray {
  background-color: #eeeeee;
  padding: 40px;
}

/* Optional cosmetics for carousel controls & indicators */
.testimonial .carousel-control-prev,
.testimonial .carousel-control-next {
  width: 3rem;
  filter: invert(1) grayscale(100%);
  opacity: 0.6;
}
.testimonial .carousel-control-prev:hover,
.testimonial .carousel-control-next:hover {
  opacity: 0.9;
}

.testimonial .carousel-indicators [data-bs-target] {
  background-color: #03484e;
}
.testimonial .carousel-indicators .active {
  background-color: #d0b04f;
}

.testimonial .carousel-indicators {
  position: relative;
  bottom: -10px; 
}

@media (max-width: 1550px) {
  .testimonial .carousel-control-prev {
    left: -35px; 
  }

  .testimonial .carousel-control-next {
    right: -35px;
}
}

.btn {
  padding: 10px 25px;
  min-height: 48px;
  color: #ffffff;
  background-color: #d0b04f;
  border-color: #d0b04f;
  text-transform: uppercase;
}

p {
  color: #000000;
}

.bg-gold {
  background-color: #f9e8a0; 
}

.bg-gray {
  background-color: #eeeeee;
}

.gold-container {
  max-width: 775px;
  padding: 60px 60px 60px 60px;
}

.white-container {
  max-width: 775px;
  padding: 60px 60px 60px 60px;
}

@media (min-width: 993px) {
  .gold-container {
    margin-left: auto;
    margin-right: 0;
    max-width: 675px;
  }

  .white-container {
    margin-right: auto;
    margin-left: 0;
    max-width: 675px;
  }
}

.full-width-white {
  background-color: #ffffff;
  padding: 60px 60px;
}

.full-width-white-short {
  padding: 20px 60px;
}

.full-width-white-short-top {
  padding: 60px 60px 20px 60px;
}

.full-width-white .container {
  max-width: 1320px; 
}

.full-width-white h2 {
  color: #03484e; 
  font-family: 'Nort', sans-serif;
  font-weight: 500;
}

.full-width-white p {
  color: #000;
}


.info-section h3 {
  font-family: 'Nort', sans-serif;
}

.info-section p {
  margin-bottom: 0;
}

.bio-photo {
  float: right;
  width: 280px;          
  max-width: 40%;         
  margin: 0 0 1rem 1.25rem; 
  object-fit: cover;
  border-radius: 8px;  
}

.promo-photo {
  float: right;
   width: 350px;
}

.buy-note {
  font-size: 12px !important;
}

.full-width-white p {
  line-height: 1.7;
}

@media (max-width: 767.98px) {
  .bio-photo {
    float: none;
    display: block;
    margin: 0 auto 1rem auto; /* center on mobile */
    max-width: 320px;
    width: 100%;
  }

  .promo-photo {
    float: none;
    margin: 0 auto 1rem auto; /* center on mobile */
    max-width: 450px;
    width: 100%;
    display: block;
  }

}

.buy-section {
  background-color: #dddddd;
}

.buy-section-2 {
  background-color: #e6ebf7;
}

/* Footer Styling */
.bg-dark-green {
  background-color: #03484e;
}

.footer-link {
  color: #ffffff;
  text-decoration: none;
  margin: 0 12px;
  font-weight: 500;
}

.footer-link:hover {
  text-decoration: underline;
  color: #ffd700; 
}

.footer span {
  font-size: 1.1rem;
}

.footer p {
  color: #ffffff;
}

/* Mobile STyles */

@media (max-width: 499px) {
  h1 {
    font-size: 36px;
    margin-bottom: 20px;  
  }

  .testimonial {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .full-width-white, .full-width-white-short, .full-width-white-short-top {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .gold-container, .white-container {
    padding: 60px 36px 60px 36px !important;
  }

  .blockquote {
    margin-bottom: 1rem;
    font-size: 1.0rem;
    line-height: 1.2rem;
}

  .blockquote-gray {
    background-color: #eeeeee;
    padding: 24px;
  }

  .me-2 {
    width: 215px;
  }

  .buy-blurb {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  .buy-big-links {
    font-size: 18px;
  }

  .fs-4 {
    font-size: calc(1.275rem) !important;
    line-height: 1.7rem !important;
  }

  .desktop {
    display: none;
  }
}

@media (min-width: 500px) {
  .mobile {
    display: none;
  }
}

nav .container {
  max-width: 1320px;
}

.mb-3p {
    font-size: 2rem !important;
}