/* ===== 1. GLOBAL VARIABLES ===== */
body {
    font-family: 'Raleway', sans-serif;
}

:root {
    --login-width: 100px; /* Adjust as needed */
}

/* ===== 2. GLOBAL STYLES ===== */
/* Apply Bootstrap's max-width */
.container {
    max-width: 960px; /* Ensures same width as Bootstrap default */
}

/* Navigation Link Styling */
.nav-link {
    color: #fff;
}

.nav-link:active,
.nav-link:hover {
    color: #079CDB;
}

/* ===== 3. HEADER & NAVIGATION ===== */
.header {
    background: #343F48;
    padding: 0; /* Same as body */
}

/* Flex container for the header */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Login section on the left with fixed width */
.nav-left {
    flex: 0 0 var(--login-width);
    text-align: left;
}

/* Login Link Styling */
.nav-left .nav-item {
    width: var(--login-width);
    text-align: center;
}

.nav-left .nav-link {
    display: block; /* Ensures it takes the full width */
    color: #F4BC1C;
}

/* Logo is placed next to login */
.logo-container {
    flex-grow: 0;
}

/* Right side nav menu */
.nav-right {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

/* Navbar Styling */
.navbar {
    position: relative;
}

/* Change the color of the hamburger icon */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    filter: invert(1); /* Makes the icon white */
}

/* Ensure right navigation stays visible on desktop */
.navbar-collapse {
    justify-content: flex-end;
}

/* Overlay menu when collapsed (Only applies to mobile) */
@media (max-width: 992px) {
    .navbar-overlay {
        position: absolute;
        top: 100%;
        right: 0;
        width: 250px; /* Adjust as needed */
        background: #343F48;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
        padding: 10px;
        transition: all 0.2s ease-in-out; /* Faster opening */
        opacity: 0;
        transform: translateY(-10px);
        display: none;
    }

    /* Ensure mobile menu toggles smoothly */
    .navbar-collapse.show {
        display: block !important;
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== 4. MAIN CONTENT & SECTIONS ===== */
.main-section {
    padding: 15px 0; /* Same as header */
}

.body-container {
    max-width: 730px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .body-container {
        max-width: 960px;
        padding: 20px;
    }
}


/* Ensure the main content matches the header width + fixed login width */
.content-wrapper {
    max-width: 960px; /* Same as Bootstrap's container */
    margin: 0 auto;
    padding-left: 110px; /* Same padding as login width */
}

/* ===== 5. CAROUSEL (SLIDER) ===== */
/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    overflow: hidden;
    height: auto; /* Responsive height initially */
}

/* Ensure slideshow expands after 1000px but keeps height fixed */
@media (min-width: 1000px) {
    .slideshow-container {
        max-width: 100%;
        height: 300px;
    }
}

/* Individual slides */
.mySlides {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Keep height fixed after 1000px */
@media (min-width: 1000px) {
    .mySlides {
        height: 300px;
    }
}

/* Ensure images scale correctly */
.mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 120px;
}

/* Make the first slide visible initially */
.mySlides:first-child {
    opacity: 1;
    position: relative;
}

/* NEW: Container to align text with logo */
.text-container {
    position: absolute;
    top: 20px; /* Adjust text position */
    width: 100%;
    display: flex;
    justify-content: center; /* Center within the Bootstrap container */
}

/* Caption text inside a fixed-width Bootstrap-style container */
.text {
    color: #000;
    font-size: 18px;
    text-align: left;
    max-width: 960px; /* Matches Bootstrap container width */
    width: 100%;
    padding-left: 110px; /* Adjust alignment */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .text {
        padding-left: 20px;
    }
}

@media (max-width: 768px) {
    .text {
        padding-left: 10px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .text {
        left: 1vw;
        font-size: 12px;
    }
}

/* ===== 6. FOOTER ===== */
.footer {
    background: #343F48;
}

/* ===== 7. RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 992px) {
    :root {
        --login-width: 60px; /* Reduce login width for smaller screens */
    }

    .content-wrapper {
        padding-left: 20px;
    }

    .nav-left {
        margin-right: 20px;
    }

    /* Overlay menu only active in mobile */
    .navbar-overlay {
        position: absolute;
        top: 100%;
        right: 0;
        width: 250px;
        background: #343F48;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
        padding: 10px;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.2s ease-in-out; /* Smooth and fast */
        display: none;
    }

    /* Fix: Ensure menu opens and closes without delay */
    .navbar-collapse.show {
        display: block !important;
        opacity: 1;
        transform: translateY(0);
    }

    /* Adjust carousel text placement */
    .carousel-text-container {
        padding-left: 22px;
    }
}