/* -------------------- TITLE BAR --------------------  */

/* Sticky Title Bar */
.title-bar {
    position: sticky;
    top: 0;
    z-index: 3000;
    transition: top 0.3s ease;
    /* Smooth hide/show transition */
    background-color: #000000;
    /* Ensure it's not transparent */
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Add a slight shadow */
}

/* Hide the title bar by moving it up */
.title-bar.hidden {
    top: -100px;
    /* Move it out of view */
}

.title-bar img {
    height: 50px;
}

/* Style for the hamburger menu button */
.hamburger {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    z-index: 2000;
}

/* Hamburger lines */
.hamburger span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
    /* Change line color to white */
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
    z-index: 2000; /* Ensure hamburger icon appears above the off-canvas */

}

/* Positioning the lines */
.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 10px;
}

.hamburger span:nth-child(3) {
    top: 20px;
}

/* Hamburger menu active state (X animation) */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    /* Hide middle line */
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
}

/* Optional: Set a height for the off-canvas menu */
.off-canvas {
    background-color: #f0f0f0;
}

/*----------------- Off-canvas background color (black) and text color (white) */
.off-canvas {
    background-color: #000;
    /* Black background */
    color: #fff;
    /* White text */
}

/* Menu links inside the off-canvas */
.off-canvas .menu a {
    color: #fff;
    /* White text for links */
}

.off-canvas .menu a:hover {
    color: #ddd;
    /* Slight color change on hover */
}

.margin-top-for-clearing-nav {
    margin-top: 100px;
}


/* Default state - off-canvas menu is hidden */
.off-canvas {
    transform: translateX(100%); /* Move off-canvas menu out of view */
    transition: transform 0.4s ease; /* Smooth slide-in effect */
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px; /* Adjust width as needed */
    background-color: #000; /* Set background color */
    color: #fff; /* Set text color */
    z-index: 1000; /* Ensure it appears above other content */
}

/* When menu is open, slide it into view */
.off-canvas.is-open {
    transform: translateX(0); /* Slide into view */
}