/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; background: #f4f4f4; }

/* Header & container */
.headerf1 { background: #1a202c; color: #fff; padding:1rem 0; position: sticky; top:0; z-index:100; }
.containerf1 { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; }

/* Logo */
.logof1 { font-size:1.8rem; font-weight:bold; }

/* Navbar */
.navf1 { display:flex; gap:1rem; transition: max-height 0.3s ease-in-out; }
.navf1 a {
  color: #cbd5e0;
  text-decoration:none;
  padding:0.5rem 0.8rem;
  border-radius:8px;
  transition: background 0.3s, color 0.3s;
}
.navf1 a:hover { background: #2d3748; color:#fff; }

/* Hamburger menu button */
.menubtnf1 {
  display:none;
  font-size:1.5rem;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* Responsive */
@media (max-width:768px){
  .navf1 {
    position:absolute;
    top:60px;
    left:0;
    width:100%;
    flex-direction:column;
    gap:0;
    background:#1a202c;
    overflow:hidden;
    max-height:0; /* hide by default */
  }
  .navf1 a { padding:1rem; border-bottom:1px solid #2d3748; }
  .navf1.active { max-height:500px; /* show menu when active */ }

  .menubtnf1 { display:block; }
}