/* ====== Navbar Styling ====== */
.navbar {
  background-color: #0f766e; /* clinic green */
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 999;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: auto;
}

.nav-logo {
  color: white;
  font-size: 1.3rem;
  font-weight: bold;
  text-decoration: none;
}

.nav-menu{
    position:absolute;
    top:60px;
    left:0;
    right:0;

    display:flex;
    flex-direction:column;

    width:100%;

    max-height:0;

    overflow-y:auto;

    background:#0f766e;

    transition:max-height .3s ease;
}

.nav-menu.active{
    max-height:calc(100vh - 60px);
}

.nav-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.nav-link:hover {
  color: #ffe600;
}

/* ====== Hamburger Menu ====== */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  height: 3px;
  width: 25px;
  background-color: white;
  margin: 4px 0;
  border-radius: 2px;
}

/* ====== Mobile View ====== */
@media screen and (max-width:768px){

  .nav-menu{

    position:absolute;

    top:60px;

    left:0;

    width:100%;

    background:#0f766e;

    display:flex;
    flex-direction:column;

    list-style:none;      /* Remove bullets */

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

  }

  .nav-menu.active{

    max-height:420px;      /* Enough for 7 menu items */

  }

  .nav-menu li{

    padding:0;

    margin:0;

    border-bottom:1px solid rgba(255,255,255,.15);

  }

  .nav-menu li:last-child{

    border-bottom:none;

  }

  .nav-link{

    display:block;

    padding:16px;

    color:white;

    text-decoration:none;

    font-size:18px;

    text-align:center;

  }

  .nav-toggle{

    display:flex;

  }

}



/* ===== Desktop ===== */

@media screen and (min-width:769px){

    .nav-menu{
        display:flex;
        position:static;
        width:auto;
        max-height:none;
        overflow:visible;
        background:transparent;
        flex-direction:row;
        gap:20px;
    }

    .nav-toggle{
        display:none;
    }

}