/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

/* Define Custom Font */
@font-face {
    font-family: 'CustomFont';
    src: url('Font/walibi-holland.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LogoFont';
    src: url('Font/walibi-holland.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Set font for Headers */
h1, h2, h3, h4, h5, h6 {
    font-family: 'CustomFont', 'Roboto', sans-serif; 
    margin: 0;
    letter-spacing: 0.1rem;
}

h1 {
    font-size: 30px;
}

/* General Styles */
body {
    margin: 0;
    font-family: 'Verdana', sans-serif;
}

.filler {
    height: 50px;
}

/* Sticky Menu */
.sticky-menu {
    position: sticky;
    top: 0;
    background-color: #231F20; /* Main color */
    padding: 10px 0;
    z-index: 100;
    display: flex;
    justify-content: center; /* Center the entire menu on larger screens */
    align-items: center;
}

/* Logo Styles */
.logo img {
    max-height: 50px; /* Adjust the height of the logo */
    width: auto; /* Maintain aspect ratio */
    margin-left: 20px; /* Add some spacing on the left side */
}

/* Navigation list styles */
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Align the navigation items evenly */
.nav-list li {
    margin: 0 20px;
    justify-content: center;
    text-align: center;
}

/* Navigation list styles */
.nav-list li a {
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Roboto', sans-serif; /* Default font */
    font-size: 16px; /* Fix the size */
    line-height: 1.5; /* Ensure consistent line height */
    letter-spacing: 0.5px; /* Add some letter spacing for consistency */
    display: inline-block; /* Ensure width applies correctly */
    min-width: 100px; /* Set a minimum width to avoid jumping */
    padding: 10px 15px; /* Add padding for consistency */
    text-align: center; /* Ensure the text is centered in the block */
    transition: font-family 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.nav-list li a:hover {
    font-family: 'LogoFont', 'Roboto', sans-serif; /* On hover, switch to custom font */
    color: #F39E19; /* Tertiary color for hover */
    font-size: 16px; /* Keep the size consistent */
    line-height: 1.5;
    letter-spacing: 0.5px;
    /* Ensure the width stays the same on hover */
    min-width: 100px;
}


/* Hamburger menu icon (hidden on larger screens) */
.menu-toggle {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    transition: 0.4s;
}


/* Hero Section with Overlay */
.hero {
    position: relative;
    height: 60vh;
    background: url('Images/Hero-Image.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-title{
    z-index: 2; /* Ensures logo appears above the overlay */
    text-align: center;
    width: 60vw; /* 60% of the viewport width */
    max-width: 100%; /* Ensures it doesn't overflow its container */
    margin: 0 auto; /* Centers the text inside the container */
    text-align: justify; /* Adjusts the text alignment to fill space evenly */
}

.hero-title-text {
    font-family: 'LogoFont', 'Roboto', sans-serif; 
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: clamp(3rem, 8vw, 7rem);
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(45, 52, 54, 0.8); /* Main color with 70% transparency */
    z-index: 1; /* Ensures overlay is above background but below content */
}

.hero-logo {
    position: relative;
    z-index: 2; /* Ensures logo appears above the overlay */
    max-height: 60%;
    animation: bob 3s infinite ease-in-out;
}

@keyframes bob {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
}

/* Carousel */
.carousel {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.carousel-image.active {
  opacity: 1;
}


/* Text Section */
.text-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    text-align: left;
    justify-content: center;
}

.text-section-note {
    max-width: 700px;
    margin: 40px auto;
    padding: 20px;
    font-size: 0.8em;
    text-align: center;
    color: #616161;
}

.text-section h2, .text-section h1 {
    margin-top: 0;
    text-transform: uppercase;
    color: #F39E19; /* Secondary color */
    text-align: center;
}

.text-section p {
    color: #2d3436;
    font-size: 1.1em;
}

.text-section ul {
    color: #2d3436;
    text-align: left;
    list-style: disc inside;
}

.text-section li {
    font-size: 1em;
}

/* 3 Column Section */
.column-view {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

.column-two {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px; /* Add space between columns when stacked */
}

.column-single {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px; /* Add space between columns when stacked */
}

.column {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px; /* Add space between columns when stacked */
}

.column-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures even spacing between elements */
    height: 100%; /* Ensures the column fills the available height */
}

.column-content h2{
    color: #F39E19;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
    padding-bottom: 5px;
}

.column img {
    width: 100%;           /* Ensures the image takes the full width of the column */
    height: 200px;          /* Sets a fixed height for the image (adjustable as needed) */
    object-fit: cover;      /* Ensures the image covers the area, cropping where necessary */
}

.column h2, .column-two h2, .column-single h2{
    color: #F39E19; /* Secondary color */
    display: flex;
    align-items: center;
    justify-content: center;  /* This centers the text horizontally */
    min-height: 50px;         /* Adjust this height if needed */
    text-align: center;       /* This ensures the text itself is centered if it's longer */
}

.column p, .column-two p, .column-single p{
    color: #2d3436;
    text-align: justify;
    text-justify: inter-word;
    flex-grow: 1; /* Allows the text to grow and ensure even spacing */
}

.column p2, .column-two p2, .column-single p2{
    color: #2d3436;
    text-align: center;
    flex-grow: 1; /* Allows the text to grow and ensure even spacing */
}

.column .btn{
    display: inline-block;
    background-color: white;
    color: #2d3436;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    align-self: center; /* Centers the button horizontally */
}

.column .btn:hover {
    color: white;
    background-color: #F39E19; /* Tertiary color */
}

/* About Us Section */
.about-us {
    background-color: #FAE5BC; /* Default background color (Secondary color), change as needed */
    padding: 40px 0;
    height: auto; /* Adjust as needed, or set a fixed height */
}

.about-content {
    max-width: 600px; /* Now the content width is limited to 600px */
    margin: 0 auto;   /* Center the content */
    text-align: center;
    color: #231F20    /* Text color */
}

.about-content h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    line-height: 3rem;
    color: #F39E19;   /* Tertiary color */
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1rem;
    line-height: 1.5;
}

.about-content-terms {
    max-width: 900px; /* Now the content width is limited to 600px */
    padding: 40px;
    margin: 0 auto;   /* Center the content */
    text-align: left;
    color: #231F20    /* Text color */
}

.about-content-terms h2 {
    font-family: 'Verdana', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 3rem;
    color: #F39E19;   /* Tertiary color */
    margin-bottom: 20px;
}

.about-content-terms h3, h4 {
    font-family: 'Verdana', sans-serif;
}

.about-content-terms p, li {
    font-family: 'Verdana', sans-serif;
    font-size: 0.8rem;
    line-height: 1.5;
}

.about-content-terms ol{
    list-style-type: decimal;
}


/* Contact Me Section */
.contact-me {
    background-color: #231F20; /* Main background color */
    padding: 40px 0;
    text-align: center;
}

.contact-content {
    max-width: 700px;
    margin: 0 auto;
    color: white;
}

.contact-content h2 {
    color: #F39E19; /* Tertiary color */
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 2.5rem;
    line-height: 2.6rem;
}

.contact-content form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-content label {
    font-family: 'Roboto', sans-serif; 
    text-align: left;
    font-weight: bold;
    color: white;
}

.contact-content input,
.contact-content textarea {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
}

.contact-content textarea {
    height: 80px;
    resize: none;
}

.contact-top {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 30px 0;
  }
  
  .contact-info {
    flex: 1;
    min-width: 250px;
    text-align: left;
    font-size: 0.95rem;
  }
  
  .contact-info h3 {
    padding-top: 10px;
    margin-top: 0;
  }
  
  .map-container {
    flex: 1;
    min-width: 300px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

button {
    background-color: #F39E19; /* Secondary color */
    color: white;
    width: 150px; /* Set the button width to 150px */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center; /* Left-align the text inside the button */
    font-family: 'LogoFont', 'Roboto', sans-serif; /* On hover, switch to custom font */
    letter-spacing: 0.15rem;
    text-transform: uppercase;
}

button:hover {
    background-color: #FAE5BC; /* Tertiary color */
    color: #F39E19;
    font-family: 'LogoFont', 'Roboto', sans-serif; /* On hover, switch to custom font */
}

/* Full-width Footer */
footer {
    width: 100%; /* Make the footer full width */
    background-color: #231F20; /* Background color */
    padding: 20px 0; /* Padding for top and bottom */
    color: white;
}

/* Footer Content (Centered, 800px Max Width) */
.footer-content {
    max-width: 800px; /* Limit the content width */
    margin: 0 auto; /* Center the content */
    display: flex;
    justify-content: space-between; /* Space between text and icons */
    align-items: center;
}

/* Left Column: Footer Text */
.footer-text {
    flex: 1; /* Take up available space */
}

.footer-text p {
    margin: 5px 0;
}

/* Right Column: Social Media Icons */
.footer-icons {
    display: flex;
    gap: 15px; /* Spacing between icons */
}

.footer-icons a {
    text-decoration: none;
}

.footer-icons img {
    width: 32px; /* Set width for icons */
    height: 32px; /* Set height for icons */
    /*filter: invert(1);  Invert colors to make the SVG white */
    filter: brightness(0) saturate(100%) invert(72%) sepia(33%) saturate(1001%) hue-rotate(330deg) brightness(108%) contrast(103%);
}

.footer-icons :hover {
    filter: brightness(0) saturate(100%) invert(34%) sepia(88%) saturate(1086%) hue-rotate(353deg) brightness(94%) contrast(104%);
}


/* Menu Section */
.content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    text-align: center;
}

h1 {
    font-size: 2rem;
    color: #231F20;
}

/* Menu Item - 2 Column Layout */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensure both columns are stretched to the same height */
    margin-bottom: 40px;
}

/* Image Column */
.menu-image {
    flex-basis: 50%; /* Make the left column take up half of the width */
    position: relative; /* Positioning for the image to cover the column */
}

.menu-image img {
    width: 100%; /* Take up the full width of the column */
    height: 100%; /* Take up the full height of the column */
    object-fit: cover; /* Ensure the image covers the column */
    border-radius: 0px; /* No rounded corners */
}

/* Info Column */
.menu-info {
    flex-basis: 50%; /* Make the right column take up the other half */
    padding: 20px; /* Add some padding for the content */
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
}

.menu-info h2 {
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #F39E19; /* Secondary color */
    text-align: left;
}

.menu-info p {
    color: #231F20;
}

.price {
    font-weight: bold;
    color: #FAE5BC; /* Secondary color */
    margin-top: 10px;
    text-align: center;
}

.contact-button {
    background-color: #F39E19; /* Tertiary color */
    color: white;
    padding: 10px 15px;
    font-size: 1rem;
    border-radius: 0px; /* Ensure the button is not rounded either */
    text-decoration: none; /* Remove underline */
    display: inline-block;
    text-align: center;
    margin-top: 10px; /* Add some margin to separate the button from other content */
    transition: background-color 0.3s ease;
    font-family: 'LogoFont', 'Roboto', sans-serif; /* On hover, switch to custom font */
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

.contact-button:hover {
    background-color: #FAE5BC; /* Secondary color */
    color: #F39E19;
    font-family: 'LogoFont', 'Roboto', sans-serif; /* On hover, switch to custom font */
}

/* Board Games List */
.boardgames-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
    gap: 20px; /* Spacing between grid items */
    margin-top: 20px;
}

.boardgame {
    /* border: 1px solid #ddd;
    background-color: #f5f5f5;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

.boardgame img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    padding: 0px;
}

.boardgame-info {
    text-align: center;
    padding: 15px;
}

.boardgame-info h2 {
    font-size: 1.5rem;
    color: #2d3436;
}

.boardgame-info p {
    font-size: 1rem;
    color: #2d3436;
    margin-top: 5px;
}

/* Moodboard */
.fullwidth-moodboard {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    width: 100%;
}

.moodboard-image {
    flex: 1 1 33.33%; /* Allow each div to take 1/3 of the space */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.moodboard-image img {
    width: 100%; /* Image fills the div width */
    height: 100%; /* Image fills the div height */
    object-fit: cover; /* Ensures image covers the div without distortion */
}

.footer-peek {
    position: fixed;
    bottom: -100px; /* Start mostly hidden */
    left: 70%;
    transform: translateX(10%);
    pointer-events: none;
    z-index: 999;
}

.footer-peek img {
    transform: translate(-30%, 120%);
    width: 350px; /* Adjust size as needed */
    transition: transform 0.2s ease-out;
}

.column-two, .column-single {
    position: relative;
}

.discount-badge {
    position: absolute;
    top: 0;
    right: 10px;
    background-image: url('Images/discount-badge.png'); /* Change to your actual image */
    background-size: cover;
    background-position: center;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 1rem;
    padding: 10px;
    z-index: 10;

    /* Rotation */
    transform: rotate(25deg);
    transform-origin: center right;
}

.discount-badge span {
    display: block;
}



@media (max-width: 1366px) {

    .footer-peek {
        display: none;
    }
}

/* Responsive adjustments */
@media (max-width: 700px) {

    .moodboard-image {
        flex: 1 1 100%; /* Each image takes full width on small screens */
    }

    .hero {
        height: 30vh;
    }

    .hero-title-text {
        font-family: 'LogoFont', 'Roboto', sans-serif; 
        color: white;
        text-transform: uppercase;
        text-align: center;
        justify-content: center;
        font-size: clamp(3rem, 8vw, 4rem);
        line-height: clamp(3rem, 8vw, 4rem);
    }

    .hero-logo {
        position: relative;
        z-index: 2; /* Ensures logo appears above the overlay */
        max-width: 70%;
        animation: bob 8s infinite ease-in-out;
    }

    .boardgames-list {
        grid-template-columns: 1fr; /* Stack the games in 1 column on small screens */
    }

    .boardgame img {
        width: 100px; /* Smaller image on mobile */
        height: 100px;
    }

    .boardgame-info h2 {
        font-size: 1.3rem; /* Adjust font size for smaller screens */
    }

    .nav-list {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: 50px; /* Adjust based on your header height */
        right: 0;
        background-color: #231F20; /* Same background color as the header */
        width: 100%;
        text-align: center;
    }

    .nav-list li {
        margin: 15px 0;
    }

    /* Show the hamburger icon on mobile */
    .menu-toggle {
        display: flex;
    }

    /* When the menu is active (after click), show it */
    .nav-list.active {
        display: flex;
    }

    /* Stack columns vertically on smaller screens */
    .three-column {
        flex-direction: column;
    }

    .column, .column-two, .column-single {
        width: 100%; /* Columns take full width */
        align-self: center; /* Centers the button horizontally */
    }

    /* Ensure the image stays at full width without being affected by padding */
    .column img {
        width: 100%;           /* Image stays at full width */
        height: 200px;          /* Keeps the fixed height for images */
        object-fit: cover;      /* Ensures the image covers the area, cropping where necessary */
    }

    /* Padding for text (h3, p) within the column content */
    .column-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 0; /* Remove padding here to prevent it from affecting the image */
    }

    /* Apply padding only to the text within the .column-content */
    .column h3, .column p, .column-two h3, .column-two p, .column-single p{
        padding-left: 40px; /* Add padding to the header and body text */
        padding-right: 40px; /* Add padding to the header and body text */
    }

    .contact-content,
    .text-section,
    .about-content {
        max-width: 90%; /* Ensure sections scale down on smaller screens */
    }

    /* Contact form inputs and textarea width adjustment */
    .contact-content input,
    .contact-content textarea {
        width: 90%; /* Adjust input fields to 90% width on mobile */
        margin: 0 auto; /* Center the input fields */
    }

    /* Ensure sections scale down nicely */
    .contact-content,
    .text-section,
    .about-content {
        max-width: 90%; /* Ensure sections scale down on smaller screens */
    }

    .content {
        width: 100vw;
        padding: 0px;
        text-align: center;
    }

    .menu-item {
        width: 100%; /* Ensures the image takes the full width of the column */  
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center content */
    }

    .menu-image {
        order: -1; /* Move the image above the title */
        flex-basis: 100%; /* Image takes full width */
        height: auto; /* Allow the height to adjust */
        width: 100%;
    }

    .menu-image img {
        max-height: 200px; /* Set a maximum height for the image */
        width: 100%;
        object-fit: cover; /* Ensure it scales proportionally */
    }

    .menu-info {
        flex-basis: 100%; /* Info section takes full width */
        padding: 0px;
        text-align: justify; /* Center text for a cleaner look */
    }

    .menu-info h2 {
        text-align: center;
        font-size: 1.6rem; /* Adjust font size for smaller screens */
        padding-left: 40px; /* Add padding to the header and body text */
        padding-right: 40px; /* Add padding to the header and body text */
    }

    .menu-info p, .price {
        text-align: center;
        padding-left: 40px; /* Add padding to the header and body text */
        padding-right: 40px; /* Add padding to the header and body text */
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-icons {
        margin-top: 15px;
    }

}