header {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 15px;  
}
#logo{
  height: 90px; 
  width: 350px;  
}

/* Style the navigation links */
.nav-link {
  color: black;
  padding: 10px;
  font-size: 6rem;
  text-align: center;
  font-style: bold;
}

/* Change color for the active link */
.nav-link.active {
  color: blue;
}

/* On hover, change the link color */
.nav-link:hover {
  background-color: #e9ecef;
}
.nav-link.highlighted {
  font-style: bold;
  border: 2px dotted blue; /* Blue dotted square border */
  border-radius: 5px; /* Slightly rounded corners for the border */
  transition: all 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect */
.nav-link.highlighted:hover {
  border-color: darkblue; /* Darker blue on hover */
  color: darkblue; /* Change text color to dark blue */
}

footer {
  padding: 10%;
    color: white;
    background-color: rgba(247,250,253,255);
    
    background-size: cover;
    padding: 10px 20px;
  
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
  
  }
  #logo2{
    height: 230px; 
    width: 300px;
  }
  .custom-footer h5 {
    color: black; /* Make all h5 tags black */
  }
  
  .custom-footer .nav-link {
    color: rgba(117, 148, 176, 1); /* Set the color of the list items to rgba(117,148,176,255) */
  }
  
  .custom-footer .nav-link:hover {
    color: rgba(117, 148, 176, 0.8); /* Optional: slightly lighter color on hover */
  }
  .custom-footer img {
    height: 80px; 
    width: 350px; 
  }
  .custom-footer p{
    color: rgba(117, 148, 176, 1);;

  }


  /* Move toggle button to top-right corner */
.navbar-toggler {
  position: absolute; /* Position the button */
  top: 10px; /* Adjust the vertical position */
  right: 15px; /* Adjust the horizontal position */
  border-radius: 5px; /* Rounded corners */
  padding: 5px 10px; /* Adjust padding */
  background-color: white; /* White background */
  transition: all 0.3s ease; /* Smooth hover transition */
  z-index: 1050; /* Ensure it stays on top */
}

/* Hover effect for toggle button */
.navbar-toggler:hover {
  
  border-color: darkblue; /* Darker border */
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Slimmer sliding offcanvas menu */
.offcanvas {
  width: 250px; /* Adjust the width to make it slimmer */
  background-color: white; /* Ensure background is white */
  transition: all 0.3s ease-in-out; /* Smooth sliding effect */
}

/* Style for the offcanvas-header */
.offcanvas-header {
  border-bottom: 1px solid #e9ecef;
  padding: 10px 20px; /* Adjust padding */
}

/* Style for the offcanvas-body */
.offcanvas-body {
  padding: 15px; /* Reduce padding */
}

/* Adjust navbar-toggler-icon for slimmer look */
.navbar-toggler-icon {
  width: 20px; /* Adjust width */
  height: 2px; /* Adjust height */
  background-color: black; /* Icon color */
  position: relative; /* For pseudo-elements */
  transition: all 0.3s ease; /* Smooth transition */
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: ''; /* Add pseudo-elements */
  width: 20px; /* Match the width of the main bar */
  height: 2px; /* Match the height */
  background-color: black; /* Same color as main bar */
  position: absolute; /* Position relative to the main bar */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Position the pseudo-elements */
.navbar-toggler-icon::before {
  top: -6px; /* Adjust spacing above the main bar */
}

.navbar-toggler-icon::after {
  top: 6px; /* Adjust spacing below the main bar */
}

/* Active state for toggler */
.navbar-toggler.collapsed .navbar-toggler-icon {
  background-color: transparent; /* Hide the main bar */
}

.navbar-toggler.collapsed .navbar-toggler-icon::before {
  transform: rotate(45deg); /* Rotate top bar to form X */
  top: 0; /* Align with center */
}

.navbar-toggler.collapsed .navbar-toggler-icon::after {
  transform: rotate(-45deg); /* Rotate bottom bar to form X */
  top: 0; /* Align with center */
}


  /* Adjust logo size for smaller screens */
@media (max-width: 768px) {
  #logo {
    height: 60px;
    width: auto;
  }
}

/* Style the offcanvas menu */
.offcanvas {
  background-color: white;
}

.offcanvas-header {
  border-bottom: 1px solid #e9ecef;
}

.offcanvas-body {
  padding: 1rem;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.nav-link {
  padding: 10px;
  font-size: 1rem;
}

.nav-link.active {
  color: blue;
}

.nav-link:hover {
  background-color: #e9ecef;
}