:root {
      --color-primary: #D3952B;
      --color-primary-light: #E4BF80;
      --color-primary-dark: #94681E;
      --font-body: 'Nunito', sans-serif;
      --font-heading: 'Nunito', sans-serif;
    }
    body {
      font-family: var(--font-body);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      font-weight: 600;
    }
    .gradient-bg {
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    }
    .gradient-btn {
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
      color: #fff;
      border: none;
      transition: opacity 0.2s;
    }
    .gradient-btn:hover {
      opacity: 0.9;
      color: #fff;
    }
    .border-left-accent {
      border-left: 4px solid var(--color-primary) !important;
    }
    .shadow-grow {
      transition: box-shadow 0.3s ease-in-out;
    }
    .shadow-grow:hover {
      box-shadow: 0 1rem 3rem rgba(211, 149, 43, 0.2) !important;
    }
    .rounded-20 {
      border-radius: 20px !important;
    }
    .hex-shape {
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      background: var(--color-primary);
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
    #mobileNavMenu {
      transition: all 0.3s ease;
      display: none;
    }
    #mobileNavMenu.show-menu {
      display: flex;
    }
    .hero-overlay-container {
      position: relative;
      min-height: 600px;
      overflow: hidden;
    }
    .hero-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    .hero-gradient-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(211, 149, 43, 0.85), rgba(148, 104, 30, 0.9));
      z-index: 2;
    }
    .hero-content {
      position: relative;
      z-index: 3;
    }