body {
    background-color: #0A1119;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 20px;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* iframe styles */
iframe {
width: 100%;
max-width: 1200px;
height: 600px;
border: none;
border-top-left-radius: 10px;  /* Rounded top corners */
border-top-right-radius: 10px; /* Rounded top corners */
box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Remove shadow from iframe */
margin-bottom: 0; /* Ensure there's no margin between iframe and fullscreen bar */
}

/* fullscreen bar styles */
.fullscreen-bar {
width: 100%;
max-width: 1200px;
background-color: #2b2b2b;
padding: 0; /* No padding to prevent extra space */
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2); /* Optional shadow */
margin: 0 auto;
margin-top: -4px; /* Reset margin-top */
display: flex;
justify-content: flex-start; /* Align the content to the left */
align-items: center;       /* Center the button vertically */
height: 60px;              /* Set a fixed height for the bar */
position: relative;        /* Ensures buttons align properly */
}

/* fullscreen button styles */
.fullscreen-bar button {
padding: 10px 20px;
font-size: 1rem;
color: #fff;
background-color: #2b2b2b;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px; /* Add a little margin to move the button away from the right edge */
}

.fullscreen-bar button:hover {
background-color: #3a3a3a;
}

.fullscreen-bar button i {
font-size: 1.5rem;
}

/* Maximized mode for iframe */
iframe.maximize {
width: 100% !important;  /* Full width */
height: calc(100vh - 210px) !important; /* Adjust height to take full viewport minus the bar */
max-width: 100% !important;
border-radius: 10px 10px 0 0; /* Keep rounded corners only at the top */
box-shadow: none; /* Remove the shadow when maximized */
transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */
}

/* Maximized mode for fullscreen bar */
.fullscreen-bar.maximize {
width: 100% !important;
height: 60px !important;  /* Keep the fullscreen bar at a fixed height */
max-width: 100% !important;
transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */
}

iframe {
transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */
}

.fullscreen-bar {
transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */
}
.button-container {
display: flex;
justify-content: center;
width: 100%; /* Ensure button takes up full width */
margin-top: 0; /* No margin between iframe and button */
}

.button-container button {
padding: 10px 20px;
font-size: 1rem;
color: #fff;
background-color: #2b2b2b;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

.button-container button:hover {
    background-color: #3a3a3a;
}

.button-container button i {
font-size: 1.5rem; /* Adjust icon size */
}

/* Left Menu Bar */
.left-menu {
position: fixed;
top: 60px;
left: 0;
width: 225px;
height: calc(100% - 60px);
background-color: #1f1f1f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* Ensure content aligns from top */
padding-top: 20px;
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.3);
z-index: 999;
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0; /* Make sure it's invisible when hidden */
}

/* Menu items */
.left-menu .menu-item {
color: white;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 30px;
margin-bottom: 10px;
background-color: #2b2b2b;
border-radius: 5px;
transition: background-color 0.3s ease;
width: 90%;
text-align: center; /* Ensures text is centered even with multi-line items */
}

.left-menu .menu-item:hover {
background-color: #3a3a3a;
}

/* Initially hide the menu on smaller screens */
.left-menu.hidden {
transform: translateX(-100%);
opacity: 0;
}

/* Show the menu on smaller screens */
.left-menu.visible {
transform: translateX(0);
opacity: 1;
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
.left-menu {
transform: translateX(-100%); /* Hide the menu by default on small screens */
opacity: 0; /* Hide the menu by default */
display: flex; /* Keep flex layout */
justify-content: flex-start; /* No vertical centering */
}

.left-menu.visible {
transform: translateX(0); /* Slide in */
opacity: 1; /* Make it visible */
}
}

/* On larger screens, ensure menu is visible */
@media (min-width: 769px) {
.left-menu {
left: 0;
transform: translateX(0); /* Ensure it's visible */
}
}

/* Menu items */
.left-menu .menu-item {
    color: white;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    margin-bottom: 10px;
    background-color: #2b2b2b;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 90%;
}

.left-menu .menu-item:hover {
    background-color: #3a3a3a;
}

.left-menu .menu-item .slot-icon {
    font-size: 20px;
    margin-left: 15px;
}


/* Navbar (Top Bar) */
.navbar {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
background-color: #1f1f1f;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 1000;
padding: 0;
box-sizing: border-box;
}

/* Body content should have space to avoid overlap with the left menu */
body {
margin-left: 250px; /* Adjusted according to the increased left menu width */
padding-top: 60px;  /* Ensure content starts below the navbar */
transition: margin-left 0.3s ease; /* Smooth transition */
}

/* When the left menu is hidden (larger screens), center the content */
body.menu-hidden {
margin-left: 0; /* No left margin, so content is centered */
display: flex;
justify-content: center; /* Horizontally center the content */
padding-top: 60px; /* Ensure content stays below the navbar */
}

/* Adjust container when menu is hidden */
.container {
max-width: 1400px;
margin: 0 auto;
padding-top: 20px;
width: 100%; /* Allow container to stretch fully */
}

/* For larger screens where the menu is visible, keep the content pushed */
@media (min-width: 769px) {
.container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding-top: 80px;
}
}

/* Additional media queries for responsiveness */
@media (max-width: 768px) {
body {
margin-left: 0; /* No left margin on smaller screens */
}
}

.navbar img {
height: 40px;
max-height: 100%;
object-fit: contain;
}

/* Menu button position */
.navbar .menu-button {
position: absolute;
left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 20px;
width: 25px;
cursor: pointer;
z-index: 2000;  /* Ensure the button is above other elements */
}

.navbar .menu-button div {
height: 4px;
background-color: white;
width: 100%;
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
body {
margin-left: 0; /* No left margin on smaller screens */
}

/* Left menu bar visibility for small screens */
.left-menu.hidden {
transform: translateX(-100%); /* Hide the menu by default */
}

.left-menu.visible {
transform: translateX(0); /* Show the menu when it's visible */
}
}

@media (min-width: 769px) {
/* On larger screens, ensure menu is visible and the button works */
.left-menu {
transform: translateX(0); /* Make sure it's visible */
}
}
/* Divider between the logo and menu items */
.navbar .divider {
    border-left: 2px solid #ccc;
    height: 30px;
    margin-right: 20px;
}

/* Menu items */
.menu-items {
    display: flex;
    align-items: center;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    margin-left: 20px;
}

.navbar a:hover {
    color: #2b2b2b;
}

/* Menu Button Styling */
.menu-button {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    height: 20px;
    width: 25px;
    cursor: pointer;
}

.menu-button div {
    height: 4px;
    background-color: white;
    width: 100%;
}

/* Media Queries for smaller screens */
@media (max-width: 1200px) {
    .slots-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 1000px) {
    .slots-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 800px) {
    .slots-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
.navbar {
padding: 0 10px; /* Less padding on smaller screens */
}

.navbar img {
height: 35px; /* Resize logo on smaller screens */
}
}

/* Menu items visible when the menu button is clicked */
.navbar.open .menu-items {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    background-color: #1f1f1f;
    width: 100%;
    padding: 10px;
}

.navbar.open .menu-items a {
    margin: 10px 0;
}

/* Increase the container width */
.container {
justify-content: center;
max-width: 1500px; /* Increased width */
margin: 0 auto;    /* Ensure it is centered */
text-align: center;
padding-top: 20px;
width: 100%;       /* Stretch the container */
}

/* Slot info text alignment */
.slot-info {
color: #fff;
font-size: 1rem;
padding-left: 20px; /* Space from the left edge */
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: auto; /* Ensure it stays left of the fullscreen buttons */
}

/* Style for the Slot Name */
.slot-name {
font-size: 16px;
font-weight: bold;
}

/* Style for the Slot Provider */
.slot-provider {
font-size: 16px;
color: #d3d3d3; /* Green color for slot name */
}

/* Additional styles for the "Other Slots" section */
.other-slots {
    margin-top: 20px;
}

.other-slots h2 {
    text-align: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
}