/*
Theme Name: Bel-Sal
Theme URI: https://knops.com/beta
Author: IWG-IT
Author URI: https://knops.com
Description: A custom theme created from scratch.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bel-sal
*/
html {
    font-family: europa, "Helvetica Neue", "Helvetica", sans-serif;
    font-weight: 400;
    color: #1D1D1D;
    font-size: 62.5%;
}
.horizontal-scroll-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden; /* Hide vertical scroll */
    white-space: nowrap;
    width: 100vw; /* Make it fit the screen width */
    height: 100vh; /* Optional: adjust height to your needs */
}
/* Sidebar styling */
.sidebar {
    background-color: white;
    padding: 20px;
    text-align: left;
    height: 100%;
    width: 300px;
}

.sidebar-content p {
    text-wrap: auto;
	width: 300px;
}

/* Logo styling */
.sidebar-logo {
    margin-bottom: 20px;
}

.logo img{
    width: 270px;
    height: 270px;
    margin: 0 auto;
}

/* Welcome text */
.sidebar-content p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

.sidebar-content a {
    color: #1D1D1D;
    text-decoration: underline;
}

.sidebar-content a:hover {
    color: #9B9B9B;
    text-decoration: underline;
}

/* Adjustments for the clock hands */
.clock .minute-hand {
    transform-origin: 50% 50%;
    animation: rotate-minutes 3600s linear infinite;
}

.clock .second-hand {
    transform-origin: 50% 50%;
    animation: rotate-seconds 60s linear infinite;
}

/* Animations for the clock hands */
@keyframes rotate-minutes {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-seconds {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* main content */
.main-content {
    display: flex;
}
.grid-item {
    background: #fff;
    text-align: left;
    width: 100%;
    
}
.grid-item-img img {
    max-width: 512px;
    height: auto;
}

.grid-item h2 {
    font-size: 2.5em;
    line-height: 1.25em;
    margin: 10px 0;
    font-weight: normal;
}
.grid-item p {
    font-size: 1em;
    color: #666;
}
.grid-item a {
    color: #333;
    text-decoration: none;
}
.grid-item a:hover {
    text-decoration: underline;
}
.pagination {
    text-align: center;
    margin-top: 20px;
}
.pagination a {
    color: #333;
    padding: 8px 12px;
    margin: 0 4px;
    background-color: #eee;
    text-decoration: none;
    border-radius: 4px;
}
.pagination a:hover {
    background-color: #ddd;
}

/* General Header Styling */
.site-header {
    padding: 10px 20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
}

.header-content {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Logo Styling */
/* .logo img {
    height: 40px;
    width: auto;
} */

/* Language Selector Styling */
.language-selector {
    display: flex;
    gap: 10px;
    margin-left: 20px;
}

.language-selector .lang-option {
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid #D1D1D1;
    border-radius: 50%;
    color: #D1D1D1;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.language-selector .lang-option.active {
    background-color: #fff;
    color: #1D1D1D;
    border-color: #1D1D1D;
}

.language-selector .lang-option:hover {
    background-color: #f0f0f0;
}

/* Header Buttons Styling */
.header-buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.header-button {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    background-color: #000;
    transition: background-color 0.3s ease;
}

.header-button:hover {
    background-color: #333;
}

.tickets-button {
    background-color: #000;
}

.shop-button {
    background-color: #000;
}

/* Main Navigation Menu Styling */
.main-navigation {
    /*margin-left: 20px;*/
    right: 0px;
}

.primary-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 1px;
    font-size: 3.6em;
    line-height: 1em;
}

.primary-menu li a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

.primary-menu li a:hover {
    color: #9B9B9B;
}

.primary-menu li::after {
    content: ',';
    padding-right: 5px; /* Adjust as needed */
}

.primary-menu li:last-child::after {
    content: ''; /* Remove the comma for the last item */
}