/* Navbar background and styles */
#ftco-navbar {
    background: linear-gradient(90deg, #4b6cb7, #182848); /* Gradient background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Adds a nice divider */
  }
  
  /* Navbar links */
  #ftco-navbar .nav-link {
    color: #fff; /* White text */
    font-size: 16px; /* Slightly larger font for readability */
    font-weight: 500; /* Semi-bold text for better emphasis */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
  }
  
  /* Navbar links hover */
  #ftco-navbar .nav-link:hover {
    color: #ffd700; /* Gold text color on hover */
    background: rgba(255, 255, 255, 0.1); /* Slightly transparent background */
    border-radius: 5px; /* Rounded corners for hover effect */
  }
  
  /* Dropdown menu styling */
  #ftco-navbar .dropdown-menu {
    background: #2c3e50; /* Dark background for dropdown menu */
    border: none; /* Removes default border */
    border-radius: 8px; /* Rounded dropdown */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds depth to the dropdown */
  }
  
  /* Dropdown menu links */
  #ftco-navbar .dropdown-menu .nav-link {
    color: #fff; /* White text for dropdown */
    padding: 10px 15px; /* Spacing for dropdown items */
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Dropdown menu links hover */
  #ftco-navbar .dropdown-menu .nav-link:hover {
    color: #ffd700; /* Gold text color on hover */
    background: rgba(255, 255, 255, 0.1); /* Highlight effect */
    border-radius: 5px;
  }
  
  /* Profile image in the navbar */
  #ftco-navbar .dropdown img {
    border: 2px solid #fff; /* White border around the profile image */
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  
  #ftco-navbar .dropdown img:hover {
    transform: scale(1.1); /* Slight zoom-in effect on hover */
    border-color: #ffd700; /* Gold border on hover */
  }
  
  /* Navbar button (mobile view) */
  #ftco-navbar .navbar-toggler {
    border: none; /* Removes the button border */
    background: #ffd700; /* Gold background for button */
    color: #182848; /* Dark color for the menu icon */
    padding: 8px 12px; /* Adjust padding for better click area */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease;
  }
  
  #ftco-navbar .navbar-toggler:hover {
    background: #f39c12; /* Slightly darker gold on hover */
  }
  

  .circle {
    border-radius: 50%;
    /* Make image circular */
  }

  .ftco-navbar-light {
    background: #4582af !important;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 3; }

    /* Navbar container styling */
#ftco-navbar {
    background: linear-gradient(90deg, #4b6cb7, #182848); /* Gradient background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  }
  
  /* Left-aligned links */
  #ftco-navbar .navbar-nav.mr-auto .nav-link {
    color: #fff; /* White text */
    margin-right: 20px; /* Spacing between links */
    font-weight: 500; /* Semi-bold text */
    transition: color 0.3s ease;
  }
  
  #ftco-navbar .navbar-nav.mr-auto .nav-link:hover {
    color: #ffd700; /* Gold text color on hover */
  }
  
  /* Right-aligned links */
  #ftco-navbar .navbar-nav.ml-auto .nav-link {
    color: #fff; /* White text */
    font-weight: 500; /* Semi-bold text */
    margin-left: 10px; /* Spacing between links */
  }
  
  #ftco-navbar .navbar-nav.ml-auto .nav-link:hover {
    color: #ffd700; /* Gold text color on hover */
  }
  
  /* Profile image */
  #ftco-navbar .dropdown img {
    border: 2px solid #fff; /* Border around the profile image */
    border-radius: 50%; /* Circle profile image */
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  
  #ftco-navbar .dropdown img:hover {
    transform: scale(1.1); /* Slight zoom-in effect */
    border-color: #ffd700; /* Gold border on hover */
  }
  
  /* Responsive toggler button */
  .navbar-toggler {
    border: none;
    background: #ffd700;
    color: #182848;
    padding: 8px 12px;
    border-radius: 5px;
  }
  
  .navbar-toggler:hover {
    background: #f39c12; /* Slightly darker gold */
  }

  .navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 140px;
    margin-bottom: 0;
    list-style: none; }

    /* Style for Resume Builder button */
.resume-builder-container {
  display: block;
  text-align: center;
  margin-top: 10px; /* Add space between the bottom of the navbar and the button */
}

.resume-builder-btn {
  background-color: #4b6cb7;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  padding: 12px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

.resume-builder-btn:hover {
  background-color: #182848;
  color: #fff;
}
/* Initially hide the Resume Builder button */
#resume-builder-button {
  display: none;
}

/* Show the Resume Builder button after login */
.logged-in #resume-builder-button {
  display: block;
}

/* Style for the profile icon and email */
.navbar-nav .nav-item .dropdown {
  display: flex;
  align-items: center;  /* Vertically center the profile icon and email */
}

/* Style for the email text next to the profile picture */
.navbar-nav .nav-item .dropdown span {
  font-size: 14px;       /* Set font size for the email */
  color: #fff;           /* White color for the email */
  margin-left: 10px;     /* Space between profile picture and email */
  font-weight: bold;     /* Make the email text bold */
}

/* Optionally, you can style the profile image as well */
.navbar-nav .nav-item .dropdown img {
  border: 2px solid #fff; /* Border around the profile image */
  padding: 2px;            /* Add padding to the image */
}
/* Styling for the entire user navigation (ul) */
.user-nav {
  display: flex;
  justify-content: flex-end;  /* Align the items to the right */
  align-items: center;
  padding-right: 40px;
  list-style-type: none;
}

/* Styling for the user info section (profile image and email) */
.user-info {
  display: flex;
  align-items: center;
}

/* Styling for the dropdown container */
.user-dropdown {
  display: flex;
  align-items: center;
  position: relative;
}

/* Profile image styling */
.profile-image {
  border-radius: 50%;
  border: 2px solid #fff;  /* Optional: Add a border around the profile image */
}

/* Email text styling */
.user-email {
  font-size: 14px;
  color: #fff;  /* Set the color of the email text */
  font-weight: bold;
  margin-left: 10px;
}

/* Styling for the user dropdown links */
.user-link, .logout-link {
  color: #000;
  padding: 10px;
}

.user-link:hover, .logout-link:hover {
  color: #4b6cb7;  /* Change color on hover */
}

/* Styling for login and employee login links */
.login-link, .employee-login-link {
  font-size: 14px;
  color: #4b6cb7;
  font-weight: bold;
}

.login-link:hover, .employee-login-link:hover {
  color: #182848;
}
/* Dropdown menu styling */
#ftco-navbar .dropdown-menu {
  background: #2c3e50; /* Dark background for dropdown menu */
  border: none; /* Removes default border */
  border-radius: 8px; /* Rounded dropdown */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds depth to the dropdown */
  display: none; /* Hide dropdown by default */
}

/* Show dropdown menu when "show" class is added by JS */
#ftco-navbar .dropdown-menu.show {
  display: block;
}

/* Dropdown menu links */
#ftco-navbar .dropdown-menu .nav-link {
  color: #fff; /* White text for dropdown */
  padding: 10px 15px; /* Spacing for dropdown items */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dropdown menu links hover */
#ftco-navbar .dropdown-menu .nav-link:hover {
  color: #ffd700; /* Gold text color on hover */
  background: rgba(255, 255, 255, 0.1); /* Highlight effect */
  border-radius: 5px;
}

/* Dropdown menu styling */
#ftco-navbar .dropdown-menu {
  background: #2c3e50; /* Dark background for dropdown menu */
  border: none; /* Removes default border */
  border-radius: 8px; /* Rounded dropdown */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adds depth to the dropdown */
  display: none; /* Hide dropdown by default */
}

/* Show dropdown menu when "show" class is added by JS */
#ftco-navbar .dropdown-menu.show {
  display: block;
}
/* Ensures the email color remains white */
.user-email {
  color: #fff !important; /* Force white color */
  font-size: 14px;
  font-weight: bold;
  margin-left: 10px;
}

/* If your navbar is fixed or sticky, ensure text stays white on scroll */
#ftco-navbar {
  background: linear-gradient(90deg, #4b6cb7, #182848) !important; /* Maintain gradient background */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  position: sticky; /* Make navbar sticky */
  top: 0;
  z-index: 1000; /* Keep navbar on top */
}

/* When navbar is scrolled */
#ftco-navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.7); /* Darken the background if needed */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* If navbar is fixed */
.fixed-nav .user-email {
  color: #fff !important; /* Ensure email stays white even on scroll */
}

/* Apply when user scrolls */
#ftco-navbar.scrolled .user-email {
  color: #fff !important; /* Keep email white even on scroll */
}
@media (min-width: 768px) {
  .mr-md-2, .mx-md-2 {
      margin-right: -0.5rem !important;
  }
}