:root {
  --color-primary: #6e1f7d; /* Purple */
  --color-accent: #f04a24; /* Red-orange */
  --color-background-light: #f4f4f4; /* Light background */
  --color-background-dark: #1a1a1a; /* Dark background */
  --color-text-primary: #000000; /* Primary text color */
  --color-text-secondary: #555555; /* Secondary text color */
  --color-white: #ffffff; /* White for text */
}

/* Open dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* Classic Sticky Navbar */
.classic-sticky-navbar {
  position: fixed;
  top: 0;
  z-index: 10000;
  width: 100%;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  background-color: #f8f9fa; 
}

/* Navbar with solid background when scrolled */
.classic-sticky-navbar.scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Shadow effect */
  background-color: var(--color-primary) !important;
}

/* Navbar links default style */
.classic-sticky-navbar .nav-link {
  color: var(--navbar-link-color, #333); /* Default link color */
  font-weight: 500;
  padding: 8px 15px;
  transition: color 0.3s ease;
}

/* Navbar links when scrolled */
.classic-sticky-navbar.scrolled .nav-link {
  color: var(--color-white) !important; /* White link color on scroll */
}

/* Navbar link hover effect */
.classic-sticky-navbar .nav-link:hover {
  color: var(--navbar-link-hover-color, #dc3545); /* Hover color */
}

/* Mobile toggler button styling */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51, 51, 51, 0.5)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Adjust banner to align with navbar */
.banner-section {
  margin-top: -70px; /* Align banner with navbar */
}

/* Responsive adjustments for navbar */
@media (max-width: 991px) {
  .classic-sticky-navbar {
    padding: 10px 0;
  }

  .navbar-logo {
    height: 40px; /* Adjust logo size for smaller screens */
  }
}

/* Dark mode adjustments */
.dark-mode .classic-sticky-navbar .nav-link {
  color: #e0e0e0; /* Lighter link color for dark mode */
}

.dark-mode .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23e0e0e0' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(224, 224, 224, 0.5)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}