@font-face {
    font-family: 'playfairdisplay'; /* Choose a name for your font family */
    src: url('/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('ttf');
    font-weight: normal; /* Specify the font weight */
    font-style: normal;  /* Specify the font style */
    font-display: swap; /* Recommended for better perceived performance */
}
h1,h2,h3 {
    font-family: playfairdisplay, sans-serif;
} 
.tab-container{
    width: 100%;
    margin: 1% auto;
    border: 1px solid #ccc;
}

.tabs{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; 
    background-color: white;
} 
.tab-item{
    font-size: xx-large;
    flex-grow: 1;
}
.tab-item a {
    display: block;
    padding: 10px, 15px;
    text-decoration: none;
    color:black;
    text-align: center;
    /* border-right: 1px solid black; */
}
/* .tab-item:last-child a {
    border-right: none;
} */
.tab-item a:hover {
    color: rgb(85, 85, 85);
}  

.image-container {
    display: inline-grid; /* Or block */
    position: relative; 
}  
  .image-container img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    display: block;
}
  .overlay {
    /* Your existing styles for the text overlay */
    position: absolute; /* To position it over the background image */
    top: 10%;
    left: 50%;
    /* transform: translate(-50%, -50%); Center the text */
    /* color: black; Adjust text color for visibility */
    text-align: center;
    width: 50%; /* Make sure it spans the width */
}