/* ——— 1. SUPER-HEADER ——— */
  body {
      font-family: 'Inter', Arial, sans-serif;
      background-color: #f5f5f5;

      color: #333;
  }

  .top-bar {

      top: 0;
      left: 0;
      width: 100%;
      height: 25px;
      /* fixed height */
      line-height: 30px;
      /* vertically center text background-color: #2a6e36; */
      background: linear-gradient(to right, #2a6e36, #43a047);

      color: #f1f1f1;
      font-size: 0.80rem;
      z-index: 1000;
  }

  a {

      font-weight: 600;
      text-decoration: none;
      transition: color 0.2s;
  }

  .top-bar .contact,
  .top-bar .slogan {
      display: inline-block;
      vertical-align: middle;
  }

  .top-bar .contact i,
  .top-bar .slogan i {
      margin-right: 6px;
  }

  /* ——— 2. MAIN NAVBAR ——— */
  #mainNavbar {
      position: fixed;
      top: 25px;
      /* push below super-header */
      width: 100%;
      z-index: 999;
      transition: background 0.3s ease;

  }

  #mainNavbar.scrolled {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
  }

  /* ——— 3. LINK SPACING & TOUCH TARGETS ——— */
  .navbar-nav .nav-link {
      position: relative;

      margin: 0 12px;
      font-size: 1.05rem;
  }

  /* ——— 4. UNDERLINE ON HOVER/ACTIVE (transform-based) ——— */
  .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0.4rem;
      width: 100%;
      height: 2px;
      background-color: #43a047;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
  }

  .navbar-nav .nav-link:hover::after,
  .navbar-nav .active .nav-link::after {
      transform: scaleX(1);
  }

  /* ——— 5. DROPDOWN CLEANUP ——— */
  .dropdown-menu {
      list-style: none;
      /* remove markers */
      margin: 0;
      padding: 0;
      font-size: 0.75rem;
      border-radius: 0;
      border: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transform-origin: top;
      animation: fadeIn 0.3s ease-in;
  }

  .dropdown-menu .dropdown-item {
      padding: 12px 16px;
      border-bottom: 1px solid #e9ecef;
  }

  .dropdown-menu .dropdown-item:last-child {
      border-bottom: none;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: scaleY(0.9);
      }

      to {
          opacity: 1;
          transform: scaleY(1);
      }
  }


  /* ——— 7. SOCIAL ICONS ——— */
  .social-icons a {
      color: #555;
      margin-left: 15px;
      font-size: 1.2rem;
  }

  .social-icons a:hover {
      color: #43a047;
  }

  .navbar-brand img {
      position: inherit;
      height: 72px;
      padding: 5px;
      position: absolute;
      transform: translateY(-50%);
      left: 0;
      top: 50%;

      /*transform: scale(1.2);
    transform-origin: left center;
    pointer-events: none;
    object-fit: contain;
    margin-top: -5px;
    margin-bottom: -5px;*/
  }

  /* ——— 6. LOGO SIZE ——— .navbar-brand img {
      min-height: 50px;
      max-height: 60px;
  } */

  /* Smaller logo and toggler for small screens */
  @media (max-width: 576px) {
      .navbar-brand img {
          height: 40px;


      }

      .navbar-brand {
          align-items: flex-start !important;

          position: relative;
      }

      .navbar-toggler {
          transform: scale(0.75);
          /* smaller hamburger icon */
          margin-right: 8px;
      }

      .top-bar {

          height: 20px;
          /* fixed height */
          line-height: 20px;
          font-size: 0.70rem;
          z-index: 1000;
      }


      /* ——— 2. MAIN NAVBAR ——— */
      #mainNavbar {

          top: 20px;

      }
  }