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


body {
   font-family: 'Roboto', sans-serif;
}


/* 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: #326ba7;
   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;
}


/* Content Styling */
.content {
   padding: 50px;
   text-align: center;
   scroll-margin-top: 80px; /* Same or slightly more than your navbar height */
}


.content h1 {
   font-size: 36px;
   color: #326ba7;
   margin-bottom: 20px;
}


.content p {
   font-size: 20px;
   color: #333;
}

.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: #326ba7;
  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: #00b894;
  color: white;
  border: 2px solid #00b894;
}

/*#224e78*/

body {
   padding-top: 70px; /* same as your .top-bar height */
}