/* ===== NAVBAR BASE ===== */
.navbar {
    min-height: 72px !important;
    padding: 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    transition: background-color 0.35s ease !important,
                backdrop-filter 0.35s ease !important,
                box-shadow 0.35s ease !important;
  }
  
  /* ===== LOGO ===== */
  .navbar-logo {
    height: 42px !important;
    width: auto !important;
  }
  
  /* ===== MENU ===== */
  .navbar-nav .nav-link {
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  
  /* ======================================================
     HERO STATE – GLASSY TRANSPARENT (TOP)
     ====================================================== */
  .header-hero {
    background: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  
  .header-hero .nav-link,
  .header-hero .header-social-icon a {
    color: #302f2f !important;
    gap: 10px !important;
  }
  

.header-social-icon{
  gap: 10px !important;
}

  /* ======================================================
     STICKY STATE – GLASSY WHITE (AFTER HERO)
     ====================================================== */
  .header-sticky {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  }
  
  .header-sticky .nav-link,
  .header-sticky .header-social-icon a {
    color: #000 !important;
  }
  
  /* Hover */
  .nav-link:hover {
    color: #4b4b4b !important;
  }
  
  /* ===== PAGE CONTENT OFFSET (IMPORTANT) ===== */
  #page-content {
    padding-top: 72px !important;
  }
  
  /* ===== MOBILE ===== */
  @media (max-width: 991px) {
    .navbar {
      min-height: 64px !important;
    }
  
    .navbar-logo {
      height: 36px !important;
    }
  
    #page-content {
      padding-top: 64px !important;
    }
  
    .header-social-icon {
      display: none !important;
    }
  }