body {
  /* Add padding to the top of the body to account for the fixed navbar */
  /* This prevents the main content scrollbar from overlapping with the navbar */
  padding-top: 56px; /* Adjust if your navbar height is different */
}

.bg-teal {
    background-color: #67ea94; /* Custom teal color */
}

/* Add hover effect */
.btn-tealdark:hover {
    background-color: #0aad49; /* Slightly darker teal */
    color: white;
}

.navbar {
  z-index: 10; /* Ensure the navbar stays on top */
}

.navbar-brand, .nav-link {
  color: black !important;
  font-weight: bold; 
}

.navbar-nav .nav-link.active {
  color: white;
}

#navbar-placeholder .navbar { /* Assuming your navbar.html has a .navbar class */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* Bootstrap's default z-index for fixed navbars */
}

/* Custom styles for fixed sidebar */
#sidebar {
  position: fixed;
  /* Set top to the height of the navbar */
  top: 56px; /* Adjust if your navbar height is different */
  left: 0;
  bottom: 0;
  /* width: inherit; <- This can be tricky with fixed positioning.
      It's better to use the Bootstrap column width directly or a fixed width.
      Let's rely on the col-md-2 for width and adjust margin for content. */
  width: 16.66666667%; /* Corresponds to col-md-2. Adjust if you change the column. */
  overflow-y: auto;
  z-index: 1000;
  /* The p-3 class from Bootstrap provides padding.
      If you need specific padding on top *within* the sidebar (below navbar offset),
      you can add it here or ensure the content inside has margin. */
  /* padding-top: 1rem; /* Example: if you want extra space at the top of sidebar content */
}

/* Adjust main content margin to prevent it from being hidden behind the sidebar */
#doc-content {
  margin-left: 16.6667%; /* Adjust this based on the sidebar's column width (col-md-2 is 16.6667%) */
  padding-top: 56px; /* Add padding to account for a fixed top navbar */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    #sidebar {
        position: static; /* Revert to static position on mobile */
        height: auto; /* Auto height on mobile */
        overflow-y: visible; /* No scrollbar on mobile */
        padding-top: 0; /* Remove top padding on mobile */
    }

    #doc-content {
        margin-left: 0; /* Remove left margin on mobile */
        padding-top: 0; /* Remove top padding on mobile */
    }
}

.float-right-image {
    float: right;       /* Float the image to the right */
    max-width: 30%;     /* Adjust this percentage to control the image size */
    height: auto;       /* Maintain aspect ratio */
    margin-left: 20px;  /* Add space between the image and the text wrapping on its left */
    margin-bottom: 15px; /* Add space below the image */
    /* The existing 'rounded' class should still work for corners */
    /* The existing 'mb-3' class *might* add bottom margin, but explicitly adding
       margin-bottom here ensures spacing regardless of Bootstrap usage. */
}

.float-left-image {
    float: left;       /* Float the image to the left */
    max-width: 30%;     /* Adjust this percentage to control the image size */
    height: auto;       /* Maintain aspect ratio */
    margin-right: 20px; /* Add space between the image and the text wrapping on its right */
    margin-bottom: 15px; /* Add space below the image */
}

/* Fix anchor offset for sections below a fixed navbar */
.doc-section {
    scroll-margin-top: 80px; /* Adjust based on your navbar height */
}
/* Place carousel arrows on the far sides */
.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5); /* optional */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-control-prev.custom-arrow {
    left: 0;  /* flush to left edge of page */
}

.carousel-control-next.custom-arrow {
    right: 0; /* flush to right edge of page */
}
h2[id]::before {
  content: "";
  display: block;
  height: 50px; /* Adjust this to the height of your navbar */
  margin-top: -50px; /* Adjust this to the height of your navbar */
  visibility: hidden;
}