/* Gold Color Theme */
.text-gold {
    color: #CC9933 !important;
}

/* Offcanvas Customization */
.offcanvas {
    width: 300px !important;
    z-index: 2000 !important;
}

.offcanvas .nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    transition: 0.3s;
}

.offcanvas .nav-link:hover {
    color: #CC9933 !important;
    padding-left: 10px;
}
/* Custom Black Hamburger Bars */
.hamburger-icon {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger-icon .bar {
    height: 3px;
    width: 100%;
    background-color: #000000; /* Solid Black */
    border-radius: 2px;
    transition: 0.3s;
}
/* Add this to your CSS */

/* Push the main content down so the logo doesn't overlap the text too much */
body {
    padding-top: 40px; 
    display: flex;
    flex-direction: column; /* This is the "Magic" line */
    min-height: 100vh;      /* Ensures the body takes the full screen height */
    margin: 0;
}

/* Ensure the logo image doesn't get clipped */
.navbar-brand img {
    max-width: 100%;
    object-fit: contain;
}

/* Make sure the hamburger icon is easily clickable */
.navbar-toggler {
    z-index: 1060; /* Sits above the logo container */
}

/* Animated Menu Links */
.offcanvas .nav-link {
    position: relative;
    display: inline-block;
    transition: all 0.4s ease; /* Smooth transition for everything */
    padding-left: 15px; /* Initial padding */
}

/* The Animation: Slide right and turn Gold */
.offcanvas .nav-link:hover {
    color: #CC9933 !important; /* Gold color */
    padding-left: 25px; /* Slides the text slightly to the right */
}

/* The Underline Animation (Optional but classy) */
.offcanvas .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 5px;
    left: 25px;
    background-color: #CC9933;
    transition: width 0.4s ease;
}

.offcanvas .nav-link:hover::after {
    width: 40px; /* The line grows outward on hover */
}

.offcanvas-backdrop {
    z-index: 1900 !important;
}

/* 3. Ensure the fixed header stays below the menu when it's open */
.fixed-top {
    z-index: 1030; /* Standard Bootstrap fixed-top z-index */
}

/* 4. Luxury Touch: Hide the logo and hamburger when the menu is open */
/* Bootstrap adds the .offcanvas-open class to the body automatically */
body.offcanvas-open .navbar-brand, 
body.offcanvas-open .hamburger-icon {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
/* Smooth fade for the Hamburger Bars */
.hamburger-icon .bar {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.navbar-toggler:hover .bar {
    background-color: #CC9933; /* Hamburger turns gold on hover */
}
/* Ensure the slider doesn't get hidden behind the 100px logo on start */
.underwriting-cinema-slider {
    margin-top: 0;
    padding-top: 20px; /* Gives logo some breathing room */
}
footer {
    width: 100% !important;
    display: block !important;
    clear: both;
    margin: 0;
    padding: 20px 0; /* Add some padding so text isn't hitting the edges */
}

/* Adjustments for Mobile */
@media (max-width: 768px) {
    .navbar-brand img {
        height: 70px !important; /* Slightly smaller on phones */
    }
}