/* Custom Styles for Bridgeway Manpower Services */

/* Update primary brand color if needed */

/* Keep the active background orange, but change text to black on hover */
/* 1. Base hover state: Background turns orange, text turns white */
.navbar-default .navbar-nav > li > a:hover {
    color: #ffffff !important;           
    background-color: #f7691f !important; 
    transition: all 0.3s ease-in-out;    
}

/* 2. Active state remains consistent */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    color: #ffffff !important;           
    background-color: #f7691f !important;
}

/* 3. Base navigation link styling to ensure they match the theme */
.navbar-default .navbar-nav > li > a {
    transition: all 0.3s ease-in-out;
}


/* overrides.css */

/* Target the home section button specifically */
#home .btn:hover {
    background: #000000 !important; /* Forces the black hover color */
    color: #ffffff !important;      /* Keeps the text readable (white on black) */
    transition: all 0.4s ease-in-out;
}

#home .btn, 
#work .bg-red,
#team .team-des,
#price .plan,
#contact input[type="submit"] {
    /* Example: Changing red to a professional blue */
    background-color: #f7691f !important; 
}

.navbar-default .navbar-nav li a:hover,
footer .copyright a {
    color: #f7691f !important;
}

/* Hide or make invisible until scrolled */
.navbar-brand {
    color: #ffffff !important; 
    transition: all 0.4s ease-in-out;
}

/* Ensure the M is also white/transparent at the start */
.navbar-brand .brand-highlight {
    color: #ffffff !important; 
    transition: all 0.4s ease-in-out;
}

/* When scrolled, show the brand with your custom colors */
.navbar-default.scrolled .navbar-brand {
    color: #333333 !important;
}

.navbar-default.scrolled .navbar-brand .brand-highlight {
    color: #f7691f !important;
}

#home {
    /* Use the path relative to the CSS folder to find your images folder */
    background: url('../images/bms_banner_v2.4.png') no-repeat center center fixed !important;
    
    /* This ensures the image fills the screen even if it's a different aspect ratio */
    /* -webkit-background-size: cover !important; */
    /* -moz-background-size: cover !important; */
    /* -o-background-size: cover !important; */
    /* background-size: cover !important; */
    /* -webkit-box-pack: end; */
    /* -webkit-justify-content: flex-end; */
    /* -ms-flex-pack: end; */
    /* justify-content: flex-end; */
    
    /* Change vertical alignment to bottom */
    /* -webkit-box-align: end; */
    /* -webkit-align-items: flex-end; */
    /* -ms-flex-align: end; */
    /* align-items: flex-end; */

    /* Add padding so the button doesn't touch the very bottom */
    padding-bottom: 120px; 
    
    /* Optional: If your new image is too bright and makes the white text hard to read, 
       uncomment the line below to add a slight dark overlay */
    /* background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/YOUR_NEW_IMAGE.jpg') !important; */
	
	min-height: 100vh !important;
	background-size: contain !important; /* Shows the FULL logo/image */
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: #ffffff; /* Match this to your image's background color to avoid white bars */
	
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end; /* Vertical center */
	align-items: center;     /* Horizontal center */
	text-align: center;
}


/* .btn-bottom {

    font-size: 18px;
    padding: 12px 30px;
    transition: all 0.3s ease;
} 
*/

.btn-bottom {
    background: transparent !important;
    border: 2px solid #ffffff !important; /* White border */
    color: #ffffff !important;
    padding: 15px 40px !important;       /* Slightly larger for impact */
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease-in-out !important;
    border-radius: 0;                     /* Keep it sharp/modern */
}

.btn-bottom:hover {
    background: #f7691f !important;      /* Your brand orange */
    border-color: #f7691f !important;    /* Matches background */
    color: #000000 !important;           /* Black text on hover */
    transform: translateY(-5px);         /* Slight lift effect */
}


.navbar-brand .brand-highlight {
    color: #f7691f !important;
}


/* nvaigatio overwirte */

/* overrides.css */

/* overrides.css */

/* 1. Reset: Initial state (Transparent, No Shadow) */
.navbar-default {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.4s ease-in-out !important;
    min-height: 80px !important;
    padding: 20px 0 !important;
    overflow: visible !important;
}

/* 2. Scrolled state: Adds background and shadow on scroll */
.navbar-default.scrolled {
    background: #ffffff !important;
    padding: 10px 0 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* 3. Link colors: White initially, Dark when scrolled */
.navbar-default .navbar-nav > li > a {
    color: #ffffff !important;
    transition: all 0.4s ease-in-out;
}

.navbar-default.scrolled .navbar-nav > li > a {
    color: #333333 !important;
}

/* 4. Logo/Brand styling: Hidden/White initially, Dark/Orange when scrolled */
.navbar-brand {
    color: #ffffff !important;
    transition: all 0.4s ease-in-out;
}

.navbar-default.scrolled .navbar-brand {
    color: #333333 !important;
}

.navbar-brand .brand-highlight {
    color: #ffffff !important;
}

.navbar-default.scrolled .navbar-brand .brand-highlight {
    color: #f7691f !important;
}

/* overrides.css */

/* 1. Transparent and non-interactive at start */
.navbar-default .navbar-collapse {
    opacity: 0; 
    pointer-events: none; /* Prevents clicking links when hidden */
    transition: opacity 0.4s ease-in-out;
}

/* 2. Fade in fully when scrolled */
.navbar-default.scrolled .navbar-collapse {
    opacity: 1;
    pointer-events: auto; /* Allows clicking links when visible */
}
/* 4. Fix content overlap */
/* body {
    padding-top: 0px !important; 
} */


/* Styling the About Us "Box" */
#about {    
    /* Alignment Fix */
    padding-top: 100px !important; 
    margin-top: -100px !important; 
        padding-bottom: 60px;
}

/* Heading Sizes */
#about h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #333333;
}

#about h4 {
    font-size: 20px;
    color: #f7691f;
    font-style: italic;
    margin-bottom: 20px;
}


#about .content-segment {
    margin-bottom: 40px; /* Space between the About/Services/Topics blocks */
}

#about hr {
    width: 60px;
    border-top: 2px solid #f7691f;
    margin: 20px auto 40px auto;
}

#about h2, 
#about h3 {
    text-align: center !important;
    margin-top: 40px; /* Adds space above each heading for better flow */
}

/* Optional: If you want to keep the lists and paragraphs left-aligned for readability */
#about p, 
#about ul {
    /* text-align: left !important; */
	text-align: justify !important;
	hyphens: auto;
	word-spacing: -1px;
}


/* Force a clean white background for the Contact section */
#contact {
    background-image: none !important;      /* Removes any background image */
    background-color: #ffffff !important;   /* Sets a solid white background */
    padding: 100px 0 !important;            /* Maintains vertical breathing room */
    margin-top: 0 !important;               /* Resets margins */
}

/* Ensure all text within the section is readable against white */
#contact h2, 
#contact h3, 
#contact p, 
#contact label {
    color: #333333 !important;
}

/* Consistent HR styling for the Contact section */
#contact hr {
    width: 60px;
    border-top: 2px solid #f7691f;
    margin: 20px auto 40px auto;
}

/* Footer text headers */
footer h4 {
    color: #f7691f !important;
    transition: 0.3s;
}

/* Social media icon circles */
.social-icon a {
    background-color: #f7691f !important; /* Default Orange */
    color: #ffffff !important;
    border-radius: 50%;
    transition: 0.3s;
}

/* Hover effect */
.social-icon a:hover {
    background-color: #000000 !important; /* Hover Black */
}

/* Optional: Make the text-headers on hover turn black too if desired */
footer h4:hover {
    color: #000000 !important;
}

#home .btn{
	margin-top:1px !important;
}