:root {
        --m1-bg: #faf9f7;
        --m1-text: #1a1815;
        --m1-textMuted: #6b6560;
        --m1-accent: #c69d6f;
        --m1-accent-dark: #a87d4f;
        --ml-accent-better: #ff00ea;
        --m1-border: #e8e6e1;
        --m1-bg-warm: #fefaf6;
        --m1-bg-sand: #faf9f7;
        --m1-bg-alt: #f5f3f0;
        --m1-bgBlush: #d4a5a5;
        --m1-footer: #2a2520;
      }

      * {
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
      }

      body {
        font-family: "DM Sans", sans-serif;
        background-color: var(--m1-bg);
        color: var(--m1-text);
      }

      .serif {
        font-family: "Cormorant Garamond", serif;
      }

      .text-m1-bg {
        background-color: var(--m1-bg);
      }
      .text-m1-text {
        color: var(--m1-text);
      }
      .text-m1-textMuted {
        color: var(--m1-textMuted);
      }
      .text-m1-accent {
        color: var(--m1-accent);
      }
      .bg-m1-accent {
        background-color: var(--m1-accent);
      }
      .bg-m1-accent:hover {
        background-color: var(--m1-accent-dark);
      }
      .border-m1-border {
        border-color: var(--m1-border);
      }
      .bg-m1-bgWarm {
        background-color: var(--m1-bg-warm);
      }
      .bg-m1-bgSand {
        background-color: var(--m1-bg-sand);
      }

      @keyframes fade-in-up {
        from {
          opacity: 0;
          transform: translateY(2rem);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes bounce {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-0.5rem);
        }
      }

      @keyframes wave {
        0% {
          clip-path: polygon(0% 55%, 1% 54.5%, 2% 54%, 3% 53.5%, 4% 53%, 5% 52.8%, 6% 52.8%, 7% 53%, 8% 53.5%, 9% 54%, 10% 55%, 11% 56%, 12% 57%, 13% 57.8%, 14% 58.3%, 15% 58.5%, 16% 58.3%, 17% 57.8%, 18% 57%, 19% 56%, 20% 55%, 21% 54%, 22% 53.5%, 23% 53%, 24% 52.8%, 25% 52.8%, 26% 53%, 27% 53.5%, 28% 54%, 29% 55%, 30% 56%, 31% 57%, 32% 57.8%, 33% 58.3%, 34% 58.5%, 35% 58.3%, 36% 57.8%, 37% 57%, 38% 56%, 39% 55%, 40% 54%, 41% 53.5%, 42% 53%, 43% 52.8%, 44% 52.8%, 45% 53%, 46% 53.5%, 47% 54%, 48% 55%, 49% 56%, 50% 57%, 51% 57.8%, 52% 58.3%, 53% 58.5%, 54% 58.3%, 55% 57.8%, 56% 57%, 57% 56%, 58% 55%, 59% 54%, 60% 53.5%, 61% 53%, 62% 52.8%, 63% 52.8%, 64% 53%, 65% 53.5%, 66% 54%, 67% 55%, 68% 56%, 69% 57%, 70% 57.8%, 71% 58.3%, 72% 58.5%, 73% 58.3%, 74% 57.8%, 75% 57%, 76% 56%, 77% 55%, 78% 54%, 79% 53.5%, 80% 53%, 81% 52.8%, 82% 52.8%, 83% 53%, 84% 53.5%, 85% 54%, 86% 55%, 87% 56%, 88% 57%, 89% 57.8%, 90% 58.3%, 91% 58.5%, 92% 58.3%, 93% 57.8%, 94% 57%, 95% 56%, 96% 55%, 97% 54%, 98% 53.5%, 99% 53%, 100% 52.8%);
        }
        50% {
          clip-path: polygon(0% 53%, 1% 52.5%, 2% 52%, 3% 51.5%, 4% 51%, 5% 50.8%, 6% 50.8%, 7% 51%, 8% 51.5%, 9% 52%, 10% 53%, 11% 54%, 12% 55%, 13% 55.8%, 14% 56.3%, 15% 56.5%, 16% 56.3%, 17% 55.8%, 18% 55%, 19% 54%, 20% 53%, 21% 52%, 22% 51.5%, 23% 51%, 24% 50.8%, 25% 50.8%, 26% 51%, 27% 51.5%, 28% 52%, 29% 53%, 30% 54%, 31% 55%, 32% 55.8%, 33% 56.3%, 34% 56.5%, 35% 56.3%, 36% 55.8%, 37% 55%, 38% 54%, 39% 53%, 40% 52%, 41% 51.5%, 42% 51%, 43% 50.8%, 44% 50.8%, 45% 51%, 46% 51.5%, 47% 52%, 48% 53%, 49% 54%, 50% 55%, 51% 55.8%, 52% 56.3%, 53% 56.5%, 54% 56.3%, 55% 55.8%, 56% 55%, 57% 54%, 58% 53%, 59% 52%, 60% 51.5%, 61% 51%, 62% 50.8%, 63% 50.8%, 64% 51%, 65% 51.5%, 66% 52%, 67% 53%, 68% 54%, 69% 55%, 70% 55.8%, 71% 56.3%, 72% 56.5%, 73% 56.3%, 74% 55.8%, 75% 55%, 76% 54%, 77% 53%, 78% 52%, 79% 51.5%, 80% 51%, 81% 50.8%, 82% 50.8%, 83% 51%, 84% 51.5%, 85% 52%, 86% 53%, 87% 54%, 88% 55%, 89% 55.8%, 90% 56.3%, 91% 56.5%, 92% 56.3%, 93% 55.8%, 94% 55%, 95% 54%, 96% 53%, 97% 52%, 98% 51.5%, 99% 51%, 100% 50.8%);
        }
        100% {
          clip-path: polygon(0% 55%, 1% 54.5%, 2% 54%, 3% 53.5%, 4% 53%, 5% 52.8%, 6% 52.8%, 7% 53%, 8% 53.5%, 9% 54%, 10% 55%, 11% 56%, 12% 57%, 13% 57.8%, 14% 58.3%, 15% 58.5%, 16% 58.3%, 17% 57.8%, 18% 57%, 19% 56%, 20% 55%, 21% 54%, 22% 53.5%, 23% 53%, 24% 52.8%, 25% 52.8%, 26% 53%, 27% 53.5%, 28% 54%, 29% 55%, 30% 56%, 31% 57%, 32% 57.8%, 33% 58.3%, 34% 58.5%, 35% 58.3%, 36% 57.8%, 37% 57%, 38% 56%, 39% 55%, 40% 54%, 41% 53.5%, 42% 53%, 43% 52.8%, 44% 52.8%, 45% 53%, 46% 53.5%, 47% 54%, 48% 55%, 49% 56%, 50% 57%, 51% 57.8%, 52% 58.3%, 53% 58.5%, 54% 58.3%, 55% 57.8%, 56% 57%, 57% 56%, 58% 55%, 59% 54%, 60% 53.5%, 61% 53%, 62% 52.8%, 63% 52.8%, 64% 53%, 65% 53.5%, 66% 54%, 67% 55%, 68% 56%, 69% 57%, 70% 57.8%, 71% 58.3%, 72% 58.5%, 73% 58.3%, 74% 57.8%, 75% 57%, 76% 56%, 77% 55%, 78% 54%, 79% 53.5%, 80% 53%, 81% 52.8%, 82% 52.8%, 83% 53%, 84% 53.5%, 85% 54%, 86% 55%, 87% 56%, 88% 57%, 89% 57.8%, 90% 58.3%, 91% 58.5%, 92% 58.3%, 93% 57.8%, 94% 57%, 95% 56%, 96% 55%, 97% 54%, 98% 53.5%, 99% 53%, 100% 52.8%);
        }
      }

      /* @keyframes atmospheric-glow {
        0%, 100% {
          box-shadow: 0 20px 60px rgba(198, 157, 111, 0.15), inset 0 -50px 80px rgba(255, 255, 255, 0.05);
        }
        50% {
          box-shadow: 0 30px 80px rgba(198, 157, 111, 0.25), inset 0 -50px 100px rgba(255, 255, 255, 0.1);
        }
      } */

      .animate-fade-in-up {
        animation: fade-in-up 0.8s ease-out;
      }

      .animate-bounce {
        animation: bounce 2s infinite;
      }

      .wave-divider {
        animation: wave 8s ease-in-out infinite;
      }

      .atmospheric-glow {
        animation: atmospheric-glow 6s ease-in-out infinite;
      }

      .fade-in-section {
        opacity: 0;
        transform: translateY(2rem);
        transition: all 1s ease-out;
      }

      .fade-in-section.in-view {
        opacity: 1;
        transform: translateY(0);
      }

      header {
        transition: all 0.5s ease;
      }

      header.scrolled {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid var(--m1-border);
      }

      .nav-link {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--m1-textMuted);
        text-decoration: none;
        transition: color 0.3s ease;
        cursor: pointer;
      }

      .nav-link:hover {
        color: var(--m1-accent);
      }

      .btn-primary {
        padding: 0.875rem 2rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 500;
        background-color: var(--m1-accent);
        color: white;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        border: none;
        cursor: pointer;
      }

      .btn-primary:hover {
        background-color: var(--m1-accent-dark);
        box-shadow: 0 10px 30px rgba(198, 157, 111, 0.3);
        transform: translateY(-2px);
      }

      .btn-secondary {
        padding: 0.875rem 2rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--m1-text);
        border: 1px solid var(--m1-text);
        background-color: transparent;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
      }

      .btn-secondary:hover {
        border-color: var(--m1-accent);
        color: var(--m1-accent);
        transform: translateY(-2px);
      }

      .card {
        background-color: white;
        border: 1px solid var(--m1-border);
        border-radius: 1rem;
        padding: 2rem;
        transition: all 0.5s ease;
      }

      .card:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        transform: translateY(-0.5rem);
      }

      .img-border-radius {
        border-radius: 4rem;
      }

      .card-premium {
        background-color: white;
        border: 1px solid var(--m1-border);
        border-radius: 1rem;
        padding: 2rem;
        transition: all 0.6s ease;
        position: relative;
        overflow: hidden;
      }

      .card-premium::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at center, rgba(198, 157, 111, 0.05) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.6s ease;
      }

      .card-premium:hover {
        box-shadow: 0 30px 60px rgba(198, 157, 111, 0.2), 0 0 40px rgba(198, 157, 111, 0.1);
        transform: translateY(-1rem);
      }

      .card-premium:hover::before {
        opacity: 1;
      }

      .tilted-card {
        transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
      }

      .tilted-card:hover {
        transform: translateY(-20px) !important;
        filter: drop-shadow(0 30px 80px rgba(0,0,0,0.25));
      }

      .tilted-card-left {
        transform: rotateY(25deg) rotateZ(-8deg) !important;
      }

      .tilted-card-right {
        transform: rotateY(-25deg) rotateZ(8deg) !important;
      }
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        cursor: pointer;
        transition: transform 0.7s ease;
      }

      
      .gallery-item:hover img {
        transform: scale(1.05);
      }

      .gallery-item:hover .overlay {
        opacity: 1;
      }

      .gallery-item .overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(198, 157, 111, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.5s ease;
      }

      .gallery-item .overlay span {
        color: white;
        font-size: 0.875rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      input,
      textarea,
      select {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        border: 1px solid var(--m1-border);
        background-color: var(--m1-bg);
        color: var(--m1-text);
        font-size: 0.875rem;
        transition: all 0.3s ease;
      }

      input:focus,
      textarea:focus,
      select:focus {
        outline: none;
        border-color: var(--m1-accent);
        box-shadow: 0 0 0 2px rgba(198, 157, 111, 0.1);
      }

      .search-box {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        border-radius: 9999px;
        border: 1px solid var(--m1-border);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        overflow: hidden;
        max-width: 40rem;
        flex-wrap: wrap;
      }

      .search-box select {
        flex: 1;
        border: none;
        border-right: 1px solid var(--m1-border);
        border-radius: 0;
        padding: 1rem 1.25rem;
        background-color: transparent;
        appearance: none;
      }

      .search-box select:last-of-type {
        border-right: none;
      }

      .search-box button {
        padding: 1rem 1.5rem;
        font-size: 0.875rem;
        font-weight: 500;
        background-color: var(--m1-accent);
        color: white;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.3s ease;
      }

      .search-box button:hover {
        background-color: var(--m1-accent-dark);
      }

      .icon-circle {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
        color: white;
        background-color: var(--m1-accent);
      }

      footer {
        background-color: var(--m1-footer);
        color: white !important;
      }

      footer a {
        color: rgba(255, 255, 255, 0.6);
      }

      footer p {
        color: white !important;
      }

      /* Image Popup Modal Styles */
      #imageModal {
        animation: modalFadeIn 0.3s ease-in-out;
      }

      #imageModal.hidden {
        display: none;
      }

      @keyframes modalFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes modalSlideIn {
        from {
          transform: scale(0.95);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      .modal-content {
        animation: modalSlideIn 0.3s ease-in-out;
      }

      #modalClose {
        transition: all 0.2s ease;
        cursor: pointer;
      }

      #modalClose:hover {
        transform: rotate(90deg) scale(1.1);
        color: var(--m1-accent);
      }

      .modal-nav-btn {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        background-color: var(--m1-accent);
        color: white;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.875rem;
        font-weight: 500;
      }

      .modal-nav-btn:hover {
        background-color: var(--m1-accent-dark);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(198, 157, 111, 0.3);
      }

      .modal-nav-btn:active {
        transform: translateY(0);
      }

      #imageCounter {
        font-size: 0.875rem;
        color: var(--m1-textMuted);
        font-weight: 500;
        letter-spacing: 0.05em;
      }

      #modalImage {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 0.5rem;
      }

      .modal-info-section {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        overflow-y: auto;
        padding-right: 1rem;
      }

      .modal-info-section::-webkit-scrollbar {
        width: 6px;
      }

      .modal-info-section::-webkit-scrollbar-track {
        background: var(--m1-bg-alt);
        border-radius: 10px;
      }

      .modal-info-section::-webkit-scrollbar-thumb {
        background: var(--m1-accent);
        border-radius: 10px;
      }

      .modal-info-section::-webkit-scrollbar-thumb:hover {
        background: var(--m1-accent-dark);
      }

      /* Responsive adjustments for mobile */
      @media (max-width: 768px) {
        #imageModal {
          padding: 1rem;
        }

        .modal-content {
          flex-direction: column;
          max-height: 90vh;
        }

        #modalImage {
          max-height: 50vh;
          margin-bottom: 1rem;
        }

        .modal-info-section {
          max-height: 35vh;
        }

        #modalClose {
          top: 1rem;
          right: 1rem;
        }
      }