body {
    font-family: 'EB Garamond';
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.container {
    box-shadow: 0 4px 8px rgb(0 0 0 / 43%);
    padding: 55px 0;
    margin-top: -30px !important;
}

h1, h2, h3, h4, .page-header {
    font-family: 'Courier Prime';
    text-transform: uppercase;
}

a.home-link {
    color: unset;
    text-decoration: none;
}

h1 {
    color: #6D6FAD !important;
}

h4 {
    font-size: 1rem;
}

.nav-tabs-wrapper {
    overflow: hidden;
}

.signature img {
    max-width: 100%;
}

.nav-tabs .nav-link {
    margin: 0;
    padding: 0;
    border: 0;
}

.sm {list-style:none; max-width:760px; height:200px; display:block; overflow:hidden; padding:0px;margin:0px !important;}
.sm li {float:left; display:inline; overflow:hidden;padding:0px !important;margin:0px !important;}

.tab-pane img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

.gallery {
    perspective: 1000px;
    display: inline-block;
    margin: 20px;
    text-align: center;
}

.gallery-item {
    max-width: 400px;
    width: auto;
    height: auto;
    position: relative;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    display: inline-block;
    text-decoration: none !important;
    padding: 10px;
    margin: 1%;
    vertical-align: top;
    min-width: 310px;
}

.gallery-item p {
    margin-bottom: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 500px;
}

.lucite-plaque {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(200, 200, 200, 0.5);
    border-radius: 10px;
    padding: 3% 7%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: rgb(0 0 0 / 52%);
    width: auto;
    margin-top: 2rem;
}

.lucite-plaque::before,
.lucite-plaque::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(200, 200, 200, 0.8); /* Mock screw cap color */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.lucite-plaque::before {
    top: 50%;
    margin-top: -10px;
    left: 10px; /* Top-left corner */
}

.lucite-plaque::after {
    top: 50%;
    margin-top: -10px;
    right: 10px; /* Top-right corner */
}

.lucite-plaque::before:nth-of-type(2),
.lucite-plaque::after:nth-of-type(2) {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(200, 200, 200, 0.8); /* Mock screw cap color */
    border-radius: 50%; /* Circular shape */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Base styles for the navigation bar */
.nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 200px; /* Fixed height */
}

.nav-tabs {
    width: 100%; /* Ensures full-width navigation */
    height: 202px; /* Matches the image height */
}

/* Base styles for each nav-item */
.nav-item {
    flex: 1; /* Equal initial width distribution */
    height: 200px; /* Fixed height to match the image */
    transition: flex 0.3s ease; /* Smooth transition for width adjustment */
    position: relative;
    overflow: hidden; /* Hide content outside the container */
    position: relative;
}

/* Expand the hovered or active nav-item */
.nav-item:hover,
.nav-item.active {
    flex: 0 0 175px; /* Expand to show the full 175px width */
}

/* Contract the non-hovered nav-items */
.nav-item:not(:hover):not(.active) {
    flex: 1; /* Shrink proportionally */
}

/* Links styling */
.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%; /* Ensure the link takes up the full height */
    text-decoration: none;
    color: inherit;
}

/* Image styles */
.nav-link img {
    width: 175px; /* Full image width */
    height: 200px; /* Full image height */
    object-fit: cover; /* Ensure the image fits without distortion */
}

#tab-1 {
    z-index: 0;
}

#tab-1 {
    z-index: 1;
}

#tab-2 {
    z-index: 2;
}

#tab-3 {
    z-index: 3;
}

#tab-4 {
    z-index: 4;
}

#tab-5 {
    z-index: 5;
}

#tab-6 {
    z-index: 6;
}

#tab-7 {
    z-index: 7;
}

#tab-8 {
    z-index: 8;
}