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

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



.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: 80px;
  font-weight: 100;
}

.vertical-text .bold-big {
  font-size: 140px;
  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-image: url('../images/abt_us_bg.jpg'); /* adjust path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 144vh;
  padding: 4rem 0;
}

/*css for scripture reading page*/
.hero-section-scripture-reading {
  background-image: url('../images/SE_Read_BG.jpg'); /* adjust path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* fills full screen height */
}

.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: 1440px) {
    .responsive-navbar-bg {
      background-color: transparent;
    }
  }