/* ===== NAVBAR (Skin / Light Yellow + Gold Look) ===== */
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff8e1; /* Skin tone background */
  padding:12px 30px;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#333; position:relative; z-index:100;
  border-bottom:1px solid #f0e6c9;
}

/* Left: logo + brand */
.navbar-left{ display:flex; align-items:center; gap:15px; }
.logo{
  width:55px; height:55px; border-radius:50%;
  border:2px solid #d4af37; /* Royal Gold */
  object-fit:cover; transition:transform .3s ease;
}
.logo:hover{ transform:scale(1.08); }

.brand-name{
  font-size:1.6rem; font-weight:700; white-space:nowrap; color:#d4af37;
}

/* Links */
.nav-links{
  display:flex; gap:28px; list-style:none; align-items:center;
}
.nav-links li a{
  color:#333; text-decoration:none; font-weight:600;
  padding:8px 12px; border-radius:6px; transition:all .3s ease;
}
.nav-links li a:hover, .nav-links li a.active{
  background:#d4af37; color:#fff;
}

/* CTA buttons (Call/WhatsApp) */
.call-btn, .whatsapp-btn{
  padding:10px 18px; border-radius:30px; font-weight:700; text-decoration:none;
  background:#d4af37; color:#fff !important; transition:all .3s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.call-btn:hover, .whatsapp-btn:hover{ background:#b68f2a; }

/* Hamburger */
.hamburger{
  display:none; flex-direction:column; cursor:pointer; gap:6px; padding:6px;
  border:1px solid #e5dbb5; border-radius:8px; transition:background .3s ease;
}
.hamburger:hover{ background:#f9f2d0; }
.hamburger .bar{
  width:26px; height:3px; background:#333; border-radius:2px; transition:all .3s ease;
}
/* Animated state */
.hamburger.active .bar:nth-child(1){ transform:rotate(45deg) translate(5px, 5px); }
.hamburger.active .bar:nth-child(2){ opacity:0; }
.hamburger.active .bar:nth-child(3){ transform:rotate(-45deg) translate(5px, -5px); }

/* ============== Desktop (>=1025px) defaults already set ============== */


/* ============== Tablet (769px–1024px): FIX for duplicate/odd CTA ============== */
@media (min-width:769px) and (max-width:1024px){
  /* Keep classic horizontal navbar; disable mobile dropdown behavior */
  .hamburger{ display:none; }

  .nav-links{
    position:static;        /* prevent absolute overlay */
    flex-direction:row;
    max-height:none !important;
    overflow:visible;
    background:transparent;
    border:0;
    gap:20px;
  }

  .nav-links li{ text-align:left; }

  .call-btn, .whatsapp-btn{
    font-size:.95rem; padding:8px 14px; border-radius:28px;
  }

  .brand-name{
    font-size:1.4rem; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* ============== Mobile (<=768px) ============== */
@media (max-width:768px){
  .navbar{ padding:10px 16px; }
  .logo{ width:44px; height:44px; }

  /* Brand visible with truncation */
  .brand-name{
    display:inline-block;
    font-size:1.25rem;
    max-width:55vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Show hamburger */
  .hamburger{ display:flex; }

  /* Collapse menu */
  .nav-links{
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:#fff8e1; border-top:1px solid #f0e6c9;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    gap:0; z-index:99;
  }
  .nav-links.active{ max-height:320px; }

  .nav-links li{ text-align:center; }
  .nav-links li a{ color:#333; display:block; padding:12px 16px; }

  /* CTA buttons full-width inside dropdown (if you keep them in .nav-links) */
  .nav-links .call-btn,
  .nav-links .whatsapp-btn{
    margin:8px 16px; justify-content:center;
  }
}

/* Optional: subtle focus styles */
.nav-links a:focus,
.call-btn:focus,
.whatsapp-btn:focus,
.hamburger:focus{
  outline:2px dashed #d4af37; outline-offset:3px;
}