p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

/* Add this to the end of your style.css file */
.zoomable {
  transition: transform .2s; /* Animation */
  width: 50%; /* Display width */
  height: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Centering */
}
.zoomable:hover {
  transform: scale(4); /* Zoom effect on hover */
}

.book-logo {
  position: absolute;
  top: 10px; /* Adjust based on your header's size */
  left: 10px; /* Adjust for spacing from the left edge */
  z-index: 1000; /* Ensure it's above other elements */
}




/* Style the navbar to ensure it's visually integrated */

.navbar {
  background-color: #fff; 
/* Adjust if your header needs a different color */

box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* Adds space between navigation links and styles them */

.navbar .navbar-nav .nav-item {
  margin-left: 15px; /* 
Adds space between links */
}
navbar .navbar-nav .nav-item .nav-link {
  color: #808080; 
/* Default color for links */
  
transition: color 0.2s ease-in-out; /* Smooth transition for hover effect */
}


/* Changes the on-hover color of the links to red */

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: #ff0000 !important; /* Red color on hover */
}


/* Styles for the 'Contact Us' button to make it stand out */
.navbar .navbar-nav .nav-item .nav-link[href*="contact-us"] {
  background-color: #ff0000; 
/* Vibrant background color */
  
color: #fff !important; 
/* Ensures text is white */
  
padding: 5px 10px; 
/* Internal spacing */
  
border-radius: 5px; 
/* Rounded corners */
  
transition: background-color 0.2s ease-in-out; 
/* Smooth transition for hover effect */
}


/* Ensures the 'Contact Us' button doesn't change to black text on hover */

.navbar .navbar-nav .nav-item .nav-link[href*="contact-us"]:hover {
  background-color: #cc0000; 
/* Darker shade on hover */
  
color: #fff !important; 
/* Text remains white */
}

footer.bg-primary {
  display: none !important;
}

/* Footer base styling */
.custom-footer {
  background-color: black;
  color: white;
  padding: 15px 20px; /* Adjusted padding for increased height */
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px; /* Adds spacing between items within the footer */
}

/* Link styling */
.custom-footer a.footer-link {
  color: white; /* White text for links */
  text-decoration: none;
}

.custom-footer a.footer-link:hover {
  color: red; /* Red text on hover for links */
}

/* 'Contact Us' button specific styling */
.custom-footer a.btn {
  background-color: red; /* Red background for 'Contact Us' button */
  border-color: red; /* Red border */
  color: white; /* White text, ensuring it doesn’t change on hover */
  text-decoration: none;
}

.custom-footer a.btn:hover {
  background-color: darkred; /* Darker red on hover for the background */
  border-color: darkred; /* Darker red on hover for the border */
  color: white; /* Maintain white text color on hover */
}

.custom-footer {
  clear: both; /* Ensures the footer is not affected by floating elements */
  width: 100vw; /* Sets the footer width relative to the viewport width */
  margin-left: calc(-50vw + 50%); /* Centers the footer if inside a centered container */
  box-sizing: border-box; /* Ensures padding does not add to the width */
}

/* Adjust margin between links */
.custom-footer .footer-link + .footer-link, .custom-footer .btn + .footer-link, .custom-footer .footer-link + .btn {
  margin-left: 20px; /* Adds space between links and button */
}


/* Assuming both 'custom-footer' and 'chapter-nav' are direct children of <main> */
main {
  display: flex;
  flex-direction: column;
}

.custom-footer {
  order: 2; /* Will visually render after chapter-nav */
}

.chapter-nav {
  order: 1; /* Will visually render before custom-footer */
}

.chapter-nav { /* Adjust the selector to target your main content area */
  padding-bottom: 30px; /* Adjust based on your footer's height */
}