.navbar {
    position: sticky; /* Makes the navbar sticky */
    top: 0; /* Sticks at the top */
    z-index: 1020; /* Ensures it stays above other content */
    background: linear-gradient(to right, #111, #222); /* Background gradient */
    border-bottom: 2px solid #ffc107; /* Bottom border for styling */
  }
  .navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffc107; /* Golden */
    text-transform: uppercase;
    display: inline-block;
    position: relative; /* For pseudo-element positioning */
    overflow: hidden; /* Hide the shine effect overflow */
    perspective: 1000px; /* Add depth for the 3D effect */
    transition: transform 0.3s ease; /* Smooth scaling effect */
  }
  
  .navbar-brand:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
  }
  
  .navbar-brand::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Start outside the text */
    width: 100%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 193, 7, 0.6),
      transparent
    );
    transform: skewX(-20deg); /* Create a diagonal shine effect */
    transition: left 0.7s ease-in-out; /* Smooth entry and exit */
  }
  
  .navbar-brand:hover::before {
    left: 100%; /* Move the shine effect across the text */
  }
  
  .navbar-brand span {
    color: #ffc107;
    transition: all 0.3s ease;
  }
  
  .nav-link {
    color: #fff;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .nav-link:hover {
    color: #ffc107;
  }
  
  /* Add lines above and below the link */
  .nav-link::before,
  .nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background: #ffc107;
    transition: width 0.4s ease, left 0.4s ease;
  }
  
  /* Top line (above the text) */
  .nav-link::before {
    top: 0; /* Position above the link */
    left: 50%;
  }
  
  /* Bottom line (below the text) */
  .nav-link::after {
    bottom: 0; /* Position below the link */
    left: 50%;
  }
  
  /* Animate both lines on hover */
  .nav-link:hover::before,
  .nav-link:hover::after {
    width: 100%; /* Full width */
    left: 0;
  }
  
  .nav-link.active {
    color: #ffc107; /* Active link is golden */
  }
  
  .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ffc107;
    transition: width 0.4s ease, left 0.4s ease;
  }
  
  .nav-link:hover::after {
    width: 100%;
    left: 0;
  }
  
  /* Sidebar for Mobile */
  .offcanvas {
    background: #111;
    color: #fff;
  }
  
  .offcanvas-header {
    border-bottom: 1px solid #ffc107;
  }
  
  .offcanvas-body a {
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    font-weight: bold;
    position: relative; /* Required for pseudo-elements */
    transition: color 0.3s ease;
  }
  
  .offcanvas-body a:hover,
  .offcanvas-body a.active {
    color: #ffc107; /* Hover and active color */
  }
  
  /* Add lines above and below the link */
  .offcanvas-body a::before,
  .offcanvas-body a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background: #ffc107;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s ease;
    transform: scaleX(0);
    transform-origin: center; /* Animates from center */
  }
  
  /* Overline (top) */
  .offcanvas-body a::before {
    top: 0; /* Position above the link text */
    left: 50%;
  }
  
  /* Underline (bottom) */
  .offcanvas-body a::after {
    bottom: 0; /* Position below the link text */
    left: 50%;
  }
  
  /* Animate lines on hover or active */
  .offcanvas-body a:hover::before,
  .offcanvas-body a:hover::after,
  .offcanvas-body a.active::before,
  .offcanvas-body a.active::after {
    width: 100%; /* Lines expand fully */
    left: 0; /* Reset left alignment */
    transform: scaleX(1); /* Scale back to normal */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s ease;
  }
  
  /* Add timing differences for staggered effect */
  .offcanvas-body a:hover::before {
    transition-delay: 0.2s; /* Overline finishes later */
  }
  
  .offcanvas-body a:hover::after {
    transition-delay: 0s; /* Underline starts immediately */
  }
  .custom-close-btn {
    background-color: gold; /* Change button background color */
    border-radius: 50%;    /* Optional: make it circular */
    width: 30px;           /* Adjust size */
    height: 30px;          /* Adjust size */
    border: 2px solid gold; /* Add a gold border */
}