:root {
    --black: #000000;
    --gold: #D4AF37;
    --deep-burgundy: #7B2C3B;
    --silver: #C0C0C0;
    --cream: #F2E8DC;
    --white: #ffffff;
}

@font-face {
    font-family: 'Inoxida';
    src: url('fonts/Inoxida.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Instory';
    src: url('fonts/Instory.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
} /* font-family: 'Instory', sans-serif; */

@font-face {
    font-family: 'HalisR-SBook';
    src: url('fonts/Ahmet Altun - HalisR-SBook.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
} /*  font-family: 'HalisR-SBook', serif; */

body, html {
    background-color: var(--cream);
    color: var(--black);
    margin: 0;
    padding: 0;
    /* height: 100%; */
    overflow-x: hidden;
}

/* Video background styling */
.video-background {
    position: relative; 
    top: 0;
    left: 0;
    width: 100%;
    height: 95vh;
    overflow: hidden;
    z-index: 1;
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    background-size: cover;
}

/* Header and navigation */
header {
    position: absolute;
    z-index: 3;
    width: 100%;
    padding: 20px;
    background-color: transparent;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative; 
    padding: 30px 0px 0px;
} 
.logo-container {
    position: absolute;
    left: 50%; /* Positioning from the left */
    transform: translateX(-50%); /* Pull it back by half its width */
}

.logo-container img {
    max-width: 50px;
    height: auto;
    display: inline-block;
    margin: 0 auto;

}

.nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.nav-right ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
}

.nav-right ul li {
    display: inline;
}

.nav-right ul li a {
    text-decoration: none;
    color: var(--white);
    font-family: 'HalisR-SBook', serif; 
    font-size: 1.2em;
}

/* Container to hold content */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.header-container img {
    max-width: 50px;
    height: auto;
}

/* Next section below the video */
.next-section {
    background-color: var(--cream);
    color: var(--black);
    padding: 0px;
    text-align: center;
    margin-top: 0px;
}

.next-section h2 {
    font-size: 2.5em;
    color: var(--gold);
}

.next-section p {
    font-size: 1.2em;
}

.header-title {
    position: absolute; 
    left: 400px; /* Align text to the left */
    top: 600%; /* Adjust this for vertical alignment */
    transform: translateY(-50%); /* Center vertically */
    font-family: 'Instory', sans-serif;
    font-size: 8em;
    color: var(--cream);
    line-height: 1;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Pas de alpha waarde aan voor donkerder/lichtgelijker */
    z-index: 2; /* Zorg ervoor dat deze boven de video zit, maar onder de tekst */
}

/* Nieuw wit blok stijl */
.white-block {
    background-color: var(--white); /* Of gewoon #ffffff */
    padding: 0px;
    text-align: center;
    min-height: 30vh; /* Pas de hoogte aan naar wens */
}

.white-block h2, .white-block p {
    color: var(--black); /* Zwarte tekst op het witte blok */
}

body.indexbackground {
    background-image: url('images/marble.jpg'); /* Update with your marble background image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    height: 100vh; /* Make sure background covers the full height */
}

.text-block-above p {
    font-family: 'HalisR-SBook', serif;
    font-size: 1em;
    color: var(--cream); 
    margin-bottom: 20px; /* Adds space between the text block and the h1 */
    top: 180px;
    left: 25%;
    z-index: 3;
    position: relative;
}
.h1-and-video {
    display: flex;
    justify-content: space-betwen;
    align-items: center;
    position: relative;
    padding: 20px; /* Adjust padding as necessary */
    flex-direction: row; /* Adjusts layout to row for text and video */
    z-index: 2; /* Make sure this is above the background */

}

.small-video-box {
    position: absolute; 
    right: 150px; /* Adjust this value to control how far right you want the video */
    top: 800%; /* Adjust this to center vertically if needed */
    transform: translateY(-50%); /* Centers the video vertically */
    width: 400px; /* Adjust the video width */
    height: 500px; /* Keep the video aspect ratio */
}

.small-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
 /*   border-radius: 10px; */
}

/* Keyframes for fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Apply fade-in to the H1 */
.header-title {
    animation: fadeIn 2s ease-in-out; /* Adjust timing as needed */
    animation-delay: 1s; /* Delay if you want */
    animation-fill-mode: both; /* Keeps the element in its final state after the animation */
}

.header-title2 {
    animation: fadeIn 2s ease-in-out; /* Adjust timing as needed */
    animation-delay: 0.8s; /* Delay if you want */
    animation-fill-mode: both; /* Keeps the element in its final state after the animation */
}

/* Apply fade-in to the video box */
.small-video-box {
    animation: fadeIn 2s ease-in-out;
    animation-delay: 2s; /* Delays the fade-in of the video box */
    animation-fill-mode: both;
}

/* Apply fade-in to the text above the H1 */
.text-block-above {
    animation: fadeIn 2s ease-in-out;
    animation-delay: 0.3s; /* Slight delay for staggered effect */
    animation-fill-mode: both;
}

.text-block-above2 {
    animation: fadeIn 2s ease-in-out;
    animation-delay: 0.1s; /* Slight delay for staggered effect */
    animation-fill-mode: both;
}

.text-section {
    background-color: #F2E8DC; /* Achtergrondkleur */
    padding: 50px;
  }
  
  .text-block {
    margin-bottom: 30px;
  }
  
  .text-block p {
    font-family: 'HalisR-SBook', sans-serif;
    color: #006039; /* Kleur voor eerste tekstblok */
    font-size: 18px;
  }
  
  .text-block h2 {
    font-family: 'Instory', sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #000000;
    text-transform: uppercase;
  }
  
  .text-block:last-child p {
    font-family: 'HalisR-SBook', sans-serif;
    font-size: 18px;
    color: #000000; /* Zwarte tekst */
  }

  .photo-container {
    display: flex;
    justify-content: space-between;
    margin-top: 0px;
  }
  
  @media (max-width: 768px) {
    .photo-item {
        width: 40%; /* Voor 3 items per rij op middelgrote schermen */
    }
}

  .photo-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed */
    justify-content: center; /* Align items to the start */
    margin-top: 40px;
    padding: 0 20px; /* Space on the sides */
    margin-left: -5px; /* Compensate for padding */
    margin-right: -5px; /* Compensate for padding */
}

.photo-item {
    width: 25%; /* Adjust as needed */
    position: relative;
    text-align: center;
    margin: 0 40px; /* Reset margin */
}

.image-container {
    height: 550px; /* Set a fixed height for the image container */
    overflow: hidden; /* Hide overflow to keep images contained */
}

.image-container img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensures the whole image is visible */
    display: block;
    margin: auto; /* Center the image within the container */
    transition: transform 0.3s ease-in-out;
}

.image-container:hover img {
    transform: scale(1.1); /* Zoom the image on hover */
}

.caption {
    background-color: var(--cream);
    color: black;
    padding: 10px;
    position: center;
    bottom: 0;
    width: 50%;
    text-align: center;
    font-family: 'HalisR-SBook', sans-serif;
    position: absolute;
    bottom: 0px; /* Adjust this value to move the caption higher */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Offset to center */
    width: auto; /* Optional: make the width automatic */
    text-align: center; /* Center the text */
}

.footer {
    color: black;
    padding: 20px 20px 0px;
    text-align: left;
    position: relative;
    overflow: hidden;
    clear: both;
}

.footer-content {
    display: flex;
    justify-content: left; /* Space out the sections */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
}

.footer-section {
   
    margin: 30px; /* Space between sections */
    text-align: left; /* Align text to the left in each section */
    z-index: 2;
}

.footer-section h3 {
    margin-bottom: 10px; /* Space below section titles */
    font-family: 'HalisR-SBook', sans-serif;
    text-align: left; /* Align text to the left in each section */
}

.footer-section ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    text-align: left; /* Align text to the left in each section */
}

.footer-section ul li {
    margin-bottom: 5px; /* Space between list items */
    font-family: 'HalisR-SBook', sans-serif;
}

.footer-section ul li a {
    color: black; /* Link color */
    text-decoration: none; /* Remove underline */
}

.footer-section ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

.footer-bottom {
    text-align: left; /* Center copyright text */
    margin-top: -40px; /* Space above copyright */
    font-family: 'HalisR-SBook', sans-serif;
    font-size: 14px;
    padding-bottom: 3px;
    padding-left: 20px;
}

.social-media img {
    width: 24px; /* Adjust the width as needed */
    height: 24px; /* Adjust the height as needed */
    margin-right: 10px; /* Space between icons */
}

.sushi-image {
    position: absolute;
    bottom: 10px; /* Adjust the distance from the bottom edge */
    right: 50px; /* Adjust the distance from the right edge */
    width: 120px; /* Set the width as needed */
    height: auto; /* Maintain aspect ratio */
}

.header-title2 {
    position: absolute; 
    left: 100px; /* Align text to the left */
    top: 40%; /* Adjust this for vertical alignment */
    transform: translateY(110%); /* Center vertically */
    font-family: 'Instory', sans-serif;
    font-size: 8em;
    color: var(--white);
    line-height: 1;
}

.text-block-above2 p {
    font-family: 'HalisR-SBook', serif;
    font-size: 1.5em;
    color: var(--cream); 
    margin-bottom: 10px; /* Adds space between the text block and the h1 */
    top: 250px;
    left: 5%;
    z-index: 3;
    position: relative;
}

/* Styling for the menu section */
.menu-section {
    display: flex;
    align-items: center;
    padding: 50px 100px;
    background-color: #F2E8DC; /* Cream white background */
}

/* Image styling */
.menu-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.navbar, .text-block-above2, .header-title2 {
    position: relative; /* Keep content above the background */
    z-index: 2; /* Ensure it stays above the background */
    color: white; /* Adjust text color for readability */
}

/* Burger icon styling */
.hamburger-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hamburger-menu i {
    font-size: 3rem; /* Pas de grootte aan */
    color: var(--white);    /* Pas de kleur aan */
    margin-top: 10px;
}


/* Side menu styling */
.side-menu {
    width: 33%;
    height: 100%;
    background-color: var(--cream);
    position: fixed;
    top: 0;
    left: -100%;
    transition: left 0.5s ease;
    z-index: 1000;
    padding: 20px;
    font-family: 'HalisR-SBook', serif;
}

.side-menu ul {
    list-style-type: none;
    padding: 0;
}

.side-menu ul li {
    margin: 20px 0;
}

.side-menu ul li a {
    text-decoration: none;
    font-size: 2rem;
    color: black;
    font-weight: bold;
}

/* Close button */
.close-menu {
    background: none;
    border: none;
    font-size: 3rem;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 20px;
}

/* Overlay for the rest of the screen */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 6, 6, 0.5);
    display: none;
    z-index: 999;
}

.social-icons img {
    width: 24px; /* Adjust the width as needed */
    height: 24px; /* Adjust the height as needed */
    margin-right: 10px; /* Space between icons */
}

.burger-icon:hover span {
    background-color: #e7ded3; /* Change color on hover */
}

.menu-logo {
    max-width: 150px; /* Adjust the size as needed */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 0px; /* Space below the logo */
}

.footer-content2 {
    position: absolute;
    bottom: 80px; /* Voeg dit toe om het naar de onderkant te duwen */
    left: 20px; /* Optionele margin aan de linkerzijde */
    right: 20px; /* Optionele margin aan de rechterzijde */
    text-align: left; /* Centreer de tekst */
}

.wine-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
}

.wine-item {
/*    border: 1px solid #D4AF37; /* Goudkleurig */
    border-radius: 10px;
    padding: 15px;
    width: calc(33% - 20px); /* Drie items per rij */
    margin: 10px;
    text-align: center;
    background-color: #F2E8DC; /* Cream White */
    box-sizing: border-box;
}

.wine-item img {
    max-width: 80%;
    height: auto;
    height: 200px;
}

.wine-item h3 {
    color: #7B2C3B; /* Deep Burgundy Red */
}

.wine-item span {
    font-weight: bold;
    color: #000; /* Zwart voor de prijs */
}


.footer-bottom {
    margin-bottom: 0;
}

.dummy-text h3 {
    color: var(--cream);
}

.footer-bottom a {
    color: inherit; /* Neemt de kleur over van de omringende tekst */
    text-decoration: none; /* Verwijdert de onderstreping */
}

.attracties-section {
    padding: 0px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin: 0; /* Reset de marges */
}

.attractie-item {
    position: relative;
    width: 520px;
    height: 700px;
    overflow: hidden;
    border-radius: 10px;
}

.attractie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.text-overlay1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px;
    text-align: center;
    color: white !important;;
    font-size: 18px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.text-overlay h2 {
    margin: 0;
    font-size: 20px;
}