/* Reset defaults */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   margin: 0;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f8f8f8;
    color: #111827;
    padding-top: 70px;
}

/* Top Bar Styling */
.top-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000; /* makes sure it stays on top of other stuff */
   display: flex;
   align-items: center;
   background-color: #001f5a;
   padding: 10px 30px;
   height: 70px;
}




/* Left Section: logo, name, divider */
.left-section {
   display: flex;
   align-items: center;
}


.home-link {
   display: flex;
   align-items: center;
   text-decoration: none;
}


.logo {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   object-fit: cover;
   margin-right: 10px;
}


.company-name {
   color: white;
   font-weight: bold;
   font-size: 22px; /* Slightly bumped for better readability, or keep at 20px if you prefer */
   line-height: 45px; /* Align text vertically with logo */
   margin-right: 20px;
   white-space: nowrap; /* Prevents it from wrapping */
}


/* Divider between company name and nav links */
.divider {
   width: 2px;
   height: 40px; /* Match logo height for a cleaner look */
   background-color: white;
   margin: 0 20px 0 10px;
}


/* Center Section: navigation links */
.center-section {
   display: flex;
   align-items: center;
   margin-left: 5px;
}


.center-section a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-size: 18px;
  position: relative;
  padding: 8px 0;
  transition: color 0.3s;
  display: flex;
  align-items: center;
}



/* Hover underline effect */
.center-section a::after {
   content: "";
   position: absolute;
   width: 0%;
   height: 2px;
   left: 0;
   bottom: 0;
   background-color: white;
   transition: width 0.3s ease;
}


.center-section a:hover::after {
   width: 100%;
}


.center-section a.active::after {
   width: 100%;
}


.center-section a.active {
   font-weight: bold;
}


/* Right Section: reserved */
.right-section {
   margin-left: auto;
   display: flex;
   align-items: center;
}


.login-btn {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-size: 18px;
  position: relative;
  padding: 8px 0;
  transition: color 0.3s;
  display: flex;
  align-items: center;
}

/* Hover underline effect for Log in link */
.login-btn::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: white;
  transition: width 0.3s ease;
}

.login-btn:hover::after {
  width: 100%;
}

.login-btn:hover {
  color: white;
}

/* Sign Up button consistent alignment */
.signup-btn {
  text-decoration: none;
  color: #001f5a;
  background-color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  border: 2px solid white;
  margin-right: 10px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.signup-btn:hover {
  background-color: #01b871;
  color: white;
  border: 2px solid #01b871;
}

/*#224e78*/

.site-footer {
    background-color: #001f5a;
    color: #9ca3af;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
}