/* Header-specific CSS */
        :root { --primary-green: #0A400C; --white: #ffffff; --black: #000000; --light-gray: #f8f9fa; --text-gray: #666; }
        body { margin:0; font-family:'Arial',sans-serif; background-color:var(--white); color:var(--black); line-height:1.6; }
        .navbar { background-color:#00000092 !important; padding:15px 0; box-shadow:0 2px 10px rgba(49, 45, 45, 0.1); }
        .navbar-brand { color:var(--white) !important; font-size:28px; font-weight:bold; text-decoration:none; }
        .navbar-nav .nav-link { color:var(--white) !important; font-weight:500; margin:0 15px; transition:all 0.3s ease; position:relative; }
        .navbar-nav .nav-link:hover { color:var(--white) !important; transform:translateY(-2px); }
        .navbar-nav .nav-link::after { content:''; position:absolute; width:0; height:2px; bottom:-5px; left:50%; background-color:var(--white); transition:all 0.3s ease; transform:translateX(-50%);}
        .navbar-nav .nav-link:hover::after { width:100%; }
        .dropdown-menu { background-color:var(--primary-green); border:none; border-radius:8px; box-shadow:0 5px 15px rgba(0,0,0,0.2); }
        .dropdown-item { color:var(--white) !important; transition:all 0.3s ease; }
        .dropdown-item:hover { background-color:rgba(255,255,255,0.1); color:var(--white) !important; }
        .navbar-toggler { border-color:var(--white); }
        .navbar-toggler-icon { filter:invert(1); }
        .main-content { min-height:calc(100vh - 76px); }
        .extra-left-space { padding-left:100px !important; padding-right:100px !important; }
        .logo-img {height: 60px; }
        @media (max-width:768px){ .hero-content h1{font-size:2.5rem;} .hero-content p{font-size:1.1rem;} .section-title{font-size:2rem;} }
        .navbar-nav .nav-link {
        font-size: 20px; /* Increase or decrease as you like */
        font-weight: 500; /* optional: make it slightly bolder */
    }

    /* ✅ Responsive header text only */
@media (max-width: 1200px) {
  .navbar-nav .nav-link {
    font-size: 16px;
  }
  .logo-img { height: 55px; }
}

@media (max-width: 992px) {
  .navbar-nav .nav-link {
    font-size: 15px;
  }
  .logo-img { height: 50px; }
}

@media (max-width: 768px) {
  .logo-img { height: 45px; }
}

@media (max-width: 576px) {
  .logo-img { height: 30px; }
}

/* Left slide-in menu for mobile and tablet */
/* Right slide-in menu for mobile and tablet */
@media (max-width: 768px) {
  #navbarNav {
    position: fixed;
    top: 0;
    right: -250px; /* hidden initially */
    height: 100%;
    width: 300px;
    background-color:#07351cbd !important;
    padding-top: 60px;
    transition: right 0.3s ease;
    z-index: 1050; /* on top of everything */
  }

  #navbarNav.show {
    right: 0; /* slide in when toggled */
  }

  .navbar-nav {
    flex-direction: column;
    margin-left: 0;
  }

  .navbar-nav .nav-link {
    margin: 10px 20px;
    font-size: 18px !important;           
    line-height: 2; 
  }

  .navbar-toggler {
    z-index: 1100; /* above the menu */
  }

  .extra-left-space {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

.navbar-toggler {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;              /* fixed box size */
  height: 48px !important;             /* fixed box size */
  padding: 0 !important;               /* avoid extra padding changing box */
  border: 2px solid #fff !important;   /* white box border */
  border-radius: 8px !important;       /* rounded corners */
  background-color: rgba(255,255,255,0.04) !important; /* subtle fill */
  z-index: 1200 !important;
}

/* keep the icon centered & scaled inside the box */
.navbar-toggler-icon {
  width: 22px !important;
  height: 22px !important;
  background-size: 22px 22px !important;
  background-position: center !important;
  filter: invert(1) !important; /* keeps the 3 lines white */
}

/* slightly smaller box for extra-small phones */
@media (max-width: 576px) {
  .navbar-toggler {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
  }
  .navbar-toggler-icon {
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
  }
}
@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important;
  }
}