.elementor-283 .elementor-element.elementor-element-606f956{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-5c32ecf */:root {
      --color-primary: #2d5a4a;
      --color-secondary: #c9a96e;
      --color-accent: #e4b88c;
      --color-dark: #1a2921;
      --color-light: #f5f2ed;
      --color-white: #ffffff;
      --color-grey: #6b7c75;
      --font-serif: 'Libre Baskerville', serif;
      --font-sans: 'Inter', sans-serif;
      --header-height: 100px;
      --header-height-scrolled: 70px;
    }

/* ========== HEADER TRANSPARENT TO SOLID ========== */
    header {
      position: fixed;

      z-index: 1000;
      height: var(--header-height);
      background: transparent;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0;
    }

    header.scrolled {
      height: var(--header-height-scrolled);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    }

    nav {
      max-width: 1800px;
      margin: 0 auto;
      height: 100%;
      padding: 0 clamp(1rem, 5vw, 4rem);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 1rem;
      z-index: 1001;
    }

    .logo-mark {
      width: 45px;
      height: 45px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-serif);
      font-weight: 700;
      color: var(--color-white);
      font-size: 1.2rem;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      transition: all 0.4s ease;
    }

    header.scrolled .logo-mark {
      width: 38px;
      height: 38px;
      font-size: 1rem;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .logo-name {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-white);
      letter-spacing: 0.5px;
      transition: all 0.4s ease;
    }

    header.scrolled .logo-name {
      color: var(--color-primary);
      font-size: 1.3rem;
    }

    .logo-subtitle {
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 500;
      transition: all 0.4s ease;
    }

    header.scrolled .logo-subtitle {
      color: var(--color-grey);
      font-size: 0.65rem;
    }

    .nav-menu {
      display: flex;
      list-style: none;
      gap: clamp(1.5rem, 3vw, 3rem);
      align-items: center;
    }

    .nav-menu a {
      text-decoration: none;
      color: var(--color-white);
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.5px;
      position: relative;
      padding: 0.5rem 0;
      transition: all 0.3s ease;
    }

    header.scrolled .nav-menu a {
      color: var(--color-dark);
    }

    .nav-menu a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--color-accent);
      transition: width 0.3s ease;
    }

    .nav-menu a:hover::after {
      width: 100%;
    }

    .nav-menu a:hover {
      color: var(--color-accent);
    }

    /* ========== BURGER MENU ULTRA RESPONSIVE ========== */
    .burger {
      display: none;
      width: 45px;
      height: 45px;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      z-index: 1001;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }

    header.scrolled .burger {
      background: rgba(45, 90, 74, 0.1);
      border-color: rgba(45, 90, 74, 0.3);
    }

    .burger:hover {
      transform: scale(1.1);
      background: rgba(255, 255, 255, 0.2);
    }

    header.scrolled .burger:hover {
      background: rgba(45, 90, 74, 0.2);
    }

    .burger-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 14px;
    }

    .burger-line {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--color-white);
      border-radius: 2px;
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    header.scrolled .burger-line {
      background: var(--color-primary);
    }

    .burger-line:nth-child(1) {
      top: 0;
    }

    .burger-line:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }

    .burger-line:nth-child(3) {
      bottom: 0;
    }

    .burger.active .burger-line:nth-child(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    .burger.active .burger-line:nth-child(2) {
      opacity: 0;
      transform: translateX(20px);
    }

    .burger.active .burger-line:nth-child(3) {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
    }

    /* ========== MOBILE MENU ========== */
    .mobile-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(26, 41, 33, 0.95);
      backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s ease;
      z-index: 999;
    }

    .mobile-overlay.active {
      opacity: 1;
      visibility: visible;
    }/* End custom CSS */