#logo {cursor: pointer;}
/* CSS for the mega menu */
  .mega-menu {
    display: none;
    position: absolute;
    top: 68px;
    left: 20px;
    padding:12px;
    background: #fff
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 999999;
    border-radius: 10px; /* Rounded corners */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Fade-in transition */
    background-color:#fcfafa;
  }
  .mega-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mega-menu ul li {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center items */
    padding: 10px;
  }

  /* Menu links */
  .mega-menu ul li a {
    text-decoration: none;
    color: #646464;
    transition: text-decoration-color 0.3s ease;
  }
  .mega-menu ul li a:hover {
    text-decoration: underline;
    text-decoration-color: #E63946;
    color:#E63946;
    text-underline-offset: 6px;
  }
  .profile-image-box-mega {
    margin-right: 8px; /* Adjust spacing between image and text */
  }
   .profile-img-small {
    width: 32px; /* Adjust image size as needed */
    height: auto;
    border-radius: 50%; /* Make image round */
  }
/* Divider line */
  .menu-divider {
    width: 92%; /* Adjust the width of the line */
    border-top: 1px solid #e0e0e0; /* Color and style of the line */
    margin: 6px auto; /* Center the line horizontally */
  }
  
#arrow.up {
    transform: rotate(180deg);
  }

  /* Set arrow color to white */
  #arrow, #arrow.up {
    color: #fff;
  }


  /* CSS for mobile */
  @media only screen and (max-width: 600px) {
    #logo {
      display: block;
      text-align: center;
    }
    .mega-menu {
      position: absolute;
      display: none;
      width: 100%;
    margin: 0px;
    left: 0px;
    }
  }