:root {
     --bg: #f7f2ea;
     --pill: #ababab;
     --pill-hover: #6f6a60;
     --text: #000;
 }

 /* RESET */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: var(--bg);
 }

 /* ================= HEADER ================= */
 .main-header {
     background: var(--bg);
     padding: 22px 0;
     position: relative;
     border-bottom: 1px solid #e3cfaf;
 }

 .header-container {
     max-width: 1200px;
     margin: auto;
     padding: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 /* LOGO */
 .logo-box img {
     width: 260px;
 }

 /* NAV MENU */
 .nav-menu {
     display: flex;
     gap: 18px;
 }

 /* NAV PILLS */
 .nav-pill {
     padding: 10px 26px;
     background: var(--pill);
     border-radius: 20px;
     color: var(--text);
     font-weight: 600;
     font-size: 14px;
     text-decoration: none;
     transition: .3s;
 }

 .nav-pill:hover {
     background: var(--pill-hover);
     color: #fff;
 }

 .nav-pill.active {
     box-shadow: inset 0 -3px 0 #000;
 }

 /* HAMBURGER */
 .menu-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
 }

 .menu-toggle span {
     width: 26px;
     height: 3px;
     background: #000;
     border-radius: 3px;
     transition: .3s;
 }

 .footer-margin {
     margin-top: 0 !important;
 }

 /* ================= MOBILE ================= */

 @media(max-width:1200px) {
     .nav-pill {
         padding: 10px 16px;

         font-size: 13px;

     }

     .nav-menu {
         gap: 8px;
     }
 }

 @media(max-width:900px) {

     .menu-toggle {
         display: flex;
     }

     .nav-menu {
         position: absolute;
         top: 100%;
         right: 20px;
         background: var(--bg);
         flex-direction: column;
         gap: 12px;
         padding: 20px;
         border-radius: 16px;
         box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
         display: none;
         z-index: 1000;
     }

     .nav-menu.show {
         display: flex;
     }

     .nav-pill {
         width: 100%;
         text-align: center;
         font-size: 14px;
         padding: 10px 20px;
     }
 }