body{
  background-color: whitesmoke;
}  
.new-page {
        page-break-before: always;
}
.vertical-line {
  background-color: #f9cd6e; /* Or any desired color */
  width: 1px;
  height: 20px; /* Adjust height as needed */
}
@page {
        size: landscape; 
        margin: 1cm;
}
.content-container {
    padding-top: 0px;   /* e.g., if your top navbar is 56px tall */
    padding-bottom: 50px; /* e.g., if your bottom navbar is 48px tall */
}


h1 {
  text-align: center;
  margin:3rem;
}
.highlighted-field {
        font-weight: bold;
        text-decoration: underline;
        color: black; 
}
.spacing-4in {
        margin-bottom: 4in; /* Or margin-top, depending on placement */
}
.spacing-8in {
        margin-bottom: 4in; /* Or margin-top, depending on placement */
}
.image-container {
  width: 30%;   /* Set a fixed width for the container */
  height: auto;  /* Set a fixed height for the container */
  /*overflow: hidden; /* Hide overflowing parts of the image */
}

/* Center the main container on the page */
.gallery-container {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allows items to wrap to a new line/row */
    justify-content: center; /* Horizontally center the items within the container */
    max-width: 1200px; /* Optional: Prevents the gallery from getting too wide on large screens */
    margin: 0 auto; /* Centers the container block itself */
    gap: 20px; /* Adds space between gallery items */
}

/* Style for individual image items */
.gallery-item {
    /* Set a flexible width: 
       calc(100% / 4 - 20px) would be exactly 4 per row with 20px gaps.
       Using max-width here makes it responsive. */
    flex: 1 1 calc(25% - 20px); /* Tries to be 25% wide, allowing 4 per row */
    min-width: 200px; /* Ensures items don't get too small on mobile */
    max-width: 300px; /* Optional: Sets a maximum size for images */
    text-align: center; /* Centers the description and buttons below the image */
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Ensure the image itself scales nicely within its container */
.gallery-item img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto 10px auto; /* Center image within its div and add space below */
}
/* Target the specific navbar link containing the image */
.navbar .nav-link.dropdown-toggle img {
    /* Ensure the image stays within bounds if needed, 
       but primarily focus on the parent padding */
    height: auto; 
}

/* Reduce the vertical padding on the navbar links */
/* This is the key change to prevent the navbar from expanding */
.navbar .nav-link {
    padding-top: 0.2rem;   /* Smaller top padding */
    padding-bottom: 0.2rem; /* Smaller bottom padding */
    display: flex;         /* Use flexbox for fine-tuning alignment */
    align-items: center;   /* Vertically center content */
}
/* If the above doesn't work well, you might need to adjust the padding on the entire navbar-nav */
.navbar-nav {
    align-items: center; /* Ensures the list items center themselves vertically */
}