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

body {
  font-family: Arial, sans-serif;
}

/* Prevent scrolling when sidebar is open */
body.no-scroll {
  overflow: hidden;
}

/* Header Styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  width: 100%;
  height: 150px;
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  transition: all 0.5s ease;
}

header.black {
  background-color: black;
  height: 100px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

header.hidden {
  display: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 20px; /* Add margin to move logo and heading to the right */
}

.logo img {
  height: 100px;
  transition: height 0.5s ease;
}

.logo h1 {
  font-size: 22px;
  font-weight: 600;
  color: white;
  margin: 0;
  text-align: left;
  transition: font-size 0.5s ease;
}

/* Shrink logo and heading on scroll */
header.black .logo img {
  height: 60px;
}

header.black .logo h1 {
  font-size: 14px;
}
header.black .logo {
  margin-left: 20px;
}

.menu-toggle {
  font-size: 38px;
  cursor: pointer;
  color: white;
  transition: font-size 0.5s ease;
  margin-right: 5px;
  margin-top: -20px;
}

header.black .menu-toggle {
  font-size: 30px;
  margin-right: 5px;
  margin-top: 10px;
}

/* Side Navigation Styles */
.side-nav {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100%; /* Ensure the side nav takes full height of the screen */
  background: rgba(100, 13, 107, 0.8);
  color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 1001;
  overflow-y: auto; /* Add scrollbar when content overflows */
  line-height: 1rem;
  border: 2px hidden red;
}

.side-nav.active {
  right: 0;
}

.side-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  margin: 15px 0;
  transition: color 0.3s ease;
}

.side-nav a:hover {
  color: #f49d1a;
}

/* Close Icon */
.close-btn {
  align-self: flex-end;
  font-size: 50px;
  cursor: pointer;
  color: #fff;
  margin-bottom: 30px;
  background-color: transparent;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  text-align: center;

}

/* Overlay when sidebar is open */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.overlay.active {
  display: block;
}


 /* SideNav */

        h1 {
          font-size: 35px;
          color: #f49d1a; /* Heading text color */
          font-weight: 800;
          text-align: center;
          margin-bottom: 20px;
          margin-top: -50px;
      }
      
      ul {
          padding: 0;
          margin: 0;
      }
      
      ul li {
          list-style:none;
      }
      
      ul li a {
        font-size: 15px;
          color: white;
          font-weight: 500;
          padding: 15px 20px;
          display: block;
          text-decoration: none;
          transition: color 0.2s ease-in-out;
         font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      }
      
      /* Hover Effect for Parent Menu Items */
      ul li:hover > a {
          color: #f49d1a; /* Change color to orange when hovered */
      }
      
      ul li a i {
          width: 40px;
          text-align: center;
          color: white;
          transition: color 0.3s ease;
          margin-right: 10px; /* ✅ Adds gap between icon and text */
      }
      
      /* Hover Effect for Icons */
      ul li:hover > a i {
          color: #f49d1a; /* Change icon color to orange when hovered */
      }
      
      /* Dropdown Menu */
      .has-submenu > a {
          display: flex;
          align-items: center;
          white-space: nowrap; /* ✅ Keeps text in one line */
      }
      .dropdown{
        margin-left: auto;  /* ✅ Pushes dropdown icon to the right */
        display: flex;
        align-items: center;      
      }
      .dropdown-icon {
          font-size: 12px;
          transition: transform 0.3s ease;
          margin-left: auto; /* Push icon to the far right */
      }
      
      /* Rotate dropdown icon when submenu is active */
      .has-submenu.active .dropdown-icon {
          transform: rotate(180deg);
      }
      
      /* Submenu */
      .submenu {
          display: none;
          max-height: 0; /* Initially hidden */
          overflow: hidden; /* Ensure nested menus are visible */
          background-color: #6a1571; /* Submenu background color */
          transition: max-height 0.3s ease;
          padding: 0;
          margin: 0;
      }
      
      /* Submenu Items */
      .submenu li {
          list-style: none;
          padding-left: 15%; /* Add space for alignment */
      }
      .submenu li a {
          padding: 10px 20px;
          font-size: 15px;
          color: white; /* Default submenu text color */
          text-decoration: none;
          display: flex;
          align-items: center;
          transition: color 0.2s ease; /* Smooth transition for color change */
      }
      
      .submenu.show {
          max-height: none; /* Allow submenu expansion */
      }
      
      /* Subsubmenu */
      .subsubmenu {
          display: none; /* Initially hidden */
          background-color: #640d6b; /* Background color for subsubmenu */
          padding-left: 20px; /* Align with parent submenu */
          position: relative; /* Allow stacking */
          overflow: visible; /* Ensure it doesn't clip */
      }
      
      .subsubmenu.show {
          display: block; /* Show when active */
          position: relative;
          padding: 10px 0; /* Space around options */
      }
      
      /* Remove scrollbar but allow scrolling */
      .subsubmenu {
          scrollbar-width: none; /* Firefox */
      }
      
      .subsubmenu::-webkit-scrollbar {
          display: none; /* Chrome, Safari, and Edge */
      }
      
      /* Hover Effect for Submenu and Subsubmenu */
      .submenu li a:hover, .subsubmenu li a:hover {
          color: #f49d1a; /* Change text color to orange */
      }
      
      .submenu li a i, .subsubmenu li a i {
          transition: color 0.3s ease;
      }
      
      .submenu li a:hover i, .subsubmenu li a:hover i {
          color: #f49d1a;
      }

    /* For Webkit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px; /* Scrollbar width */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background color */
}

::-webkit-scrollbar-thumb {
  background: #f49d1a; /* Scrollbar handle color */

}

::-webkit-scrollbar-thumb:hover {
  background: #640d6b ; /* Handle color on hover */
}

@media (max-width: 768px) {
  .side-nav {
    right: -350px;
    width: 350px;
    padding-right:10px;
}
  ul li a i{
    padding-right:20px;
}
}