/* Default navbar style: Transparent background and white text */
.navbar {
  background: transparent !important;
  color: white;
  transition: background 0.3s, color 0.3s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;

}
/* Center align navbar items */
.navbar-nav {
  margin: auto; /* Centers the navigation items */
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* Ensures the container behaves correctly */
.navbar .container {
  display: flex;
  justify-content: center;
}

.nav-close-btn{
  display: none;}

/* Optional: Ensure equal spacing for items */
.navbar-nav .nav-item {
  padding: 0 5px; /* Adjust spacing between links */
}
/* Ensure nav links are white initially */
.navbar-nav .nav-link {
  color: white !important;
}

.navbar-brand img {
  height: 7vh;
    width: auto;
}

.book-karen{ background: #752763; border-radius: 4px; color: #ffffff; margin-left: 15px;}

.navbar.scrolled .navbar-nav .book-karen .nav-link {
  color: #fff !important;
}

.navbar.scrolled .navbar-nav .book-karen .nav-link:hover {
  color: #fff !important;
}

/* Scrolled state: White background with black text */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.9) !important; /* White with 80% opacity */
    color: black !important;
    backdrop-filter: blur(5px); /* Optional: Adds slight blur for better visibility */
}

.navbar.scrolled .navbar-nav .nav-link {
  color: #000 !important;
}

.navbar.scrolled .navbar-nav .nav-link:hover {
  color: #752763 !important;
}

.navbar.scrolled .navbar-brand img {
  filter: invert(0); /* Restore logo color */
}


   .navbar-toggler {
      position: absolute;
      right:10px;
      color:#fff;
      z-index: 10000;
      border: none;
   }

   .navbar-toggler .navbar-toggler-icon {
      filter: brightness(0) invert(1); /* Makes it white */
    }

  /* When scrolled: purple toggler */
  .scrolled .navbar-toggler .navbar-toggler-icon {
      filter: none; /* Resets the white filter */
      color: #6A1B9A; /* Example purple */
  }


  /* tablet and phones */
  @media (max-width: 1024px) {

      #hero .container {
         text-align: left !important;
     }

     .sub-page #hero h1,
     .sub-page #hero h2 {
         text-align: left !important;
     }

      #navbarNav{
        background: #fff; position: absolute; top:0; left: 0; width: 100%; height: 100vh;
        flex-direction: column;
      }

      #navbarNav hr{ border:0;border-bottom: 1px solid #ccc; width: 80%; margin: auto; padding-top: 30px; margin-bottom: 30px;}

      #navbarNav .navbar-nav  {
        width: 100%;
        justify-content: center;
        z-index: 9000;

      }



      .book-karen{ background: #752763; border-radius: 4px; color: #ffffff; margin: auto; margin-top: 30px;display: block; width: 150px;}

        #navbarNav  .navbar-nav  .book-karen .nav-link {
        color: #fff !important;
      }

        #navbarNav  .navbar-nav  .book-karen .nav-link:hover {
        color: #fff !important;
      }



      #navbarNav .navbar-nav .nav-link {
        color: #752763 !important;
      }


      .navbar-collapse {

          justify-content: center;
              transition: none !important;
        }


     .nav-close-btn{
       display: none;
        background: none;
        border: none;
        padding: 5px; /* Optional: Adjust padding */
        cursor: pointer;
        position: absolute;
        right: 10px;
        top:18px;
        z-index: 100000;
      }

     body.removeScroll {
      overflow: hidden;
      }



    .podcast-episode{margin-bottom: 30px;}
  }







/* tablet portrait */
@media screen and (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {

  .navbar{ height: 7vh;}

  .navbar-brand {
    position: absolute;
    left:10px;
    top:0.5vh;
  }

  .navbar-brand img {
    height: 5vh;
    width: auto;
  }

  .navbar-toggler {
    top:2vh;
  }

  .navbar-toggler-icon {
      transform: scale(1.5); /* Scale the toggle icon */
  }

  .navbar-nav .nav-item {
    padding: 0 10px;
    font-size: 3vh;
  }



}

@media screen and (max-width: 599px) {

  .navbar.scrolled {
      background: rgba(255, 255, 255, 0.9) !important; /* White with 80% opacity */
      color: black !important;
      backdrop-filter: blur(5px); /* Optional: Adds slight blur for better visibility */
  }


  .navbar{ height: 8vh;}
  .navbar-toggler {
    top:2.5vh;
  }

  .navbar-brand {
    position: absolute;
    left:10px;
    top:0.3vh;
  }

  .navbar-brand img {
    height: 6vh;
  }




}