/* Reset default margins and paddings */
.maintop * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    max-height: 55px;
  background-color: #000000 !important; /* Black background enforced */
  z-index: 1000 !important; /* Ensure header stays above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Body styling to ensure content spacing */
.maintop {
  padding-top: 40px; /* Height of the header to prevent content overlap */
  background: black;

}

/* Header container with increased specificity for black background */
.maintop .header-overline-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #000000 !important; /* Black background enforced */
  z-index: 1000 !important; /* Ensure header stays above other content */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

/* Site header */
.maintop .site-header {
  color: #ffffff; /* White text */
  padding: 15px 0; /* Vertical padding for header */
  background-color: #000000 !important; /* Black background enforced */
}

/* Navbar styling */
.maintop .site-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px; /* Horizontal padding for smaller screens */
}

/* Logo styling */
.maintop .brand-logo img {
  width: 120px; /* Fixed logo width */
  height: auto; /* Maintain aspect ratio */
}

/* Navigation links */
.maintop .navbar-nav-wrapper {
  flex-grow: 1;
}

.maintop .navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start; /* Left-align menu items */
}

.maintop .nav-item {
  margin-right: 40px; /* Spacing between nav items */
}

.maintop .nav-link {
  color: #ffffff; /* White text for links */
  text-decoration: none;
  font-size: 18px;
  letter-spacing: -0.5px;
    font-weight: 600;
 align-items: center;
  transition: color 0.3s ease, transform 0.3s ease;
}

.maintop .nav-link:hover {
  color: #cccccc; /* Slightly lighter on hover for effect */
  transform: translateY(-2px); /* Subtle lift effect */
}

/* Client area button */
.maintop .header-btn .btn-black {
  background-color: #ffffff; /* White background for contrast */
  color: #000000; /* Black text for readability */
  padding: 8px 15px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.maintop .header-btn .btn-black:hover {
  background-color: #e0e0e0; /* Lighter on hover */
  transform: translateY(-2px);
}
.maintop .header-btn .lock-icon {
  display: inline-block;
  vertical-align: middle; /* Align with text */
  margin-right: 3px; /* Reduced spacing for better fit */
  margin-bottom: 3px; /* Fine-tune vertical alignment */
  fill: none; /* Ensure fill is controlled by stroke */
  stroke: #000000; /* Black stroke to match button text */
}
/* Hamburger menu for mobile */
.maintop .navbar-toggler {
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* Hidden by default on larger screens */
}

.maintop .hamburger-icon .feather {
  color: #ffffff; /* White icon */
  font-size: 24px;
}

/* Mobile menu (off-canvas) */
@media (max-width: 991px) {
  .maintop .navbar-toggler {
    display: block; /* Show hamburger on mobile */
  }

  .maintop .navbar-collapse {
    display: none; /* Hidden by default */
    position: fixed;
    top: 80px; /* Below header */
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: #000000 !important; /* Black background for mobile menu */
    padding: 20px;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
  }

  .maintop .navbar-collapse.show {
    display: block; /* Show when toggled */
    transform: translateX(0);
  }

  .maintop .navbar-nav {
    flex-direction: column; /* Stack vertically */
    align-items: flex-start; /* Left-align in mobile */
  }

  .maintop .nav-item {
    margin: 10px 0; /* Vertical spacing for mobile */
  }

  .maintop .header-btn {
    margin-top: 20px; /* Spacing for client area button in mobile menu */
  }
}

/* Ensure content spacing from header */
.maintop main {
  margin-top: 20px; /* 20px spacing from blog content */
}

/* Container fluid for responsive padding */
.maintop .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

/* Larger screens */
@media (min-width: 992px) {
  .maintop .container-fluid {
    padding-left: 9rem; /* Match pr-lg-9 and pl-lg-9 from HTML */
    padding-right: 9rem;
  }
}

/* Smooth scrolling for better UX */
.maintop {
  scroll-behavior: smooth;
}