/*
Theme Name: Thru The Bible Child
Theme URI: https://understrap.com
Template: understrap
Author: Howard Development & Consulting
Author URI: https://howarddc.com
Description: The renowned WordPress starter theme framework that combined Underscores and Bootstrap. Trusted by more than 100,000 developers for building handcrafted, custom WordPress sites.
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,translation-ready,block-styles,wide-blocks,editor-style,threaded-comments,accessibility-ready
Version: 1.2.4.1758617391
Updated: 2025-09-23 08:49:51

*/
*{
  box-sizing: border-box;
}


body {
  font-family: "Source Sans 3", sans-serif !important;
	  margin: 0;
  padding: 0;
}


.logo {
  height: 6rem; /* Default height for small screens */
  transition: all 0.1s ease-in-out;
}



.logo-div {
  height: 7rem;
}

.carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  bottom: auto;
}

#h4{
  letter-spacing: 1rem;
}

.navbar.scrolled .logo {
  margin-top: 25px;
  height: 4rem;
  align-self: flex-end; /* or center, depending on your design */
}

.navbar.scrolled .ul {
 padding-top: 0rem;
}
 .ul {
 padding-top: 3rem;
 font-size: 18px;
}


.scrolled.navbar {
    background-color: #000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
   
  }

  
#nav{
  height: 7rem;
}
  .navbar-brand img {
    max-height: 60px;
    transition: all 0.3s ease-in-out;
  }

  
  .second-logo {
    display: none;
  }
  
  .navbar {
    height: 5rem;
    
  }
  .navbar.scrolled .logo {
    display: none;
    
  }

  .navbar.scrolled .second-logo {
    display: inline;
  }

.letter_spacing {
  letter-spacing: 1px;
}

.pb{
  padding-bottom: 50%;
}


#card{
    height: 40rem;
    border-radius: 20px;
    margin-top: 50px;
}

.card-section{
    background: linear-gradient(to bottom, #0D1F1A, #ffffff);
    height: 27rem;
}

.read-section{
    background-color:#f2eaff;
}

.read-text{
  color: #036e9d;
}

#watch-text{
    color: #e6ab24;
}    


#watch-button{
    background-color: #e6ab24;
    color: #ffffff;
}

.listen-section{
    background-color: #fff6d7;
}

.text-listen{
    color: #db7227;
}
#listen-button{
    background-color: #db7227;
    color: #ffffff;
}

.audio-img{
    width: 80%;
}

.app-icon{
    width: 40%;
}

.vertical-text {
  display: flex;
  flex-direction: column;
  align-items: center; /* center horizontally */
  margin: 0;
  padding-left: 30px;
  line-height: 0.8; /* reduce gap between lines */
  font-size: 55px;
  font-weight: 100;
}

.vertical-text .bold-big {
  font-size: 90px;
  font-weight: 400;
}


.custom-hr {
  border: none;
  border-top: 3px dotted black;
  width: 85%;
}


#card-color{
  border: 2px solid #036e9d;
  color: #036e9d
}

/*css for about page*/ 
.hero-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   height: auto-flow;
  padding: 21rem 0;
}


/*css for scripture reading page*/
.hero-section-scripture-reading {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* fills full screen height */
}

/* ✅ BACKGROUND CANVAS */
.page-bg {
  background-image: url(/wp-content/themes/understrap-child/photo/SE_Read_BG.jpg); /* change later */
   background-size: 100% auto;   /* ✅ full width, natural height */
  background-position: top center;
  background-repeat: no-repeat;
}

/* ✅ CREATE HERO SPACE (HEIGHT OF IMAGE AREA) */
.page-bg::before {
  content: "";
  display: block;
  height: 300px; /* 👈 control hero height */
}

/* ✅ OVERLAP EFFECT */
.overlap-card {
  margin-top: -150px; /* 👈 pulls content into image */
  position: relative;
  z-index: 2;
}

.read-page-reading-color {
  color: #0a3f62;
}



/* letter spacing for hero */
  .letter-spacing {
    letter-spacing: 0.8rem;
  }

 .custom-blue {
    color: #036e9d; /* Your Penpot deep blue or adjust as needed */
  }

  .carousel-item {
  position: relative;
}

/*responsive hamburger black-bg in small screen*/
.responsive-navbar-bg {
    background-color: black;
  }
  @media (min-width: 1100px) {
    .responsive-navbar-bg {
      background-color: transparent;
    }
  }