:root {
     --primary: #4d4c46;
     --secondary: #fc9023;
     --dark: #1a1a1a;
     --light: #f8f8f8;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Montserrat', sans-serif;
     color: var(--dark);
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 .serif {
     font-family: 'Playfair Display', serif;
 }

 .text-primary {
     color: var(--primary);
 }

 .bg-primary {
     background-color: var(--primary);
 }

 .text-secondary {
     color: var(--secondary);
 }

 .bg-secondary {
     background-color: var(--secondary);
 }

 .hero-gradient {
     background: var(--secondary);
     opacity: 0.4;
 }

 .nav-glass {
     background: rgba(26, 26, 26, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .card-glass {
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .parallax-bg {
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 .service-card {
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     transform-style: preserve-3d;
 }

 .service-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 .gold-border {
     position: relative;
 }

 .gold-border:after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--secondary);
     transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .gold-border:hover:after {
     width: 100%;
 }

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

 @keyframes floating {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-15px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 .floating-2 {
     animation: floating-2 8s ease-in-out infinite;
 }

 @keyframes floating-2 {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 .text-stroke {
     -webkit-text-stroke: 1px var(--primary);
     color: transparent;
 }

 .timeline-item:before {
     content: '';
     position: absolute;
     left: -38px;
     top: 0;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: var(--secondary);
     border: 3px solid white;
 }

 .timeline-line:before {
     content: '';
     position: absolute;
     left: -32px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: rgba(255, 255, 255, 0.2);
 }

 .scroll-down {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     width: 30px;
     height: 50px;
     border: 2px solid white;
     border-radius: 15px;
 }

 .scroll-down:before {
     content: '';
     position: absolute;
     top: 8px;
     left: 50%;
     width: 6px;
     height: 6px;
     background: white;
     border-radius: 50%;
     transform: translateX(-50%);
     animation: scrollDown 2s infinite;
 }

 @keyframes scrollDown {
     0% {
         opacity: 1;
         top: 8px;
     }

     100% {
         opacity: 0;
         top: 24px;
     }
 }

 .grid-overlay {
     background-image: linear-gradient(rgba(77, 76, 70, 0.1) 1px, transparent 1px),
         linear-gradient(90deg, rgba(77, 76, 70, 0.1) 1px, transparent 1px);
     background-size: 40px 40px;
 }

 .video-container {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
 }

 .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .glow-on-hover {
     transition: all 0.3s ease;
 }

 .glow-on-hover:hover {
     box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
 }

 .rotate-on-hover {
     transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .rotate-on-hover:hover {
     transform: rotate(5deg);
 }

 .hexagon {
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }

 .perspective-3d {
     perspective: 1000px;
 }

 .transform-3d {
     transform-style: preserve-3d;
 }

 .hover-3d:hover {
     transform: rotateY(10deg) rotateX(5deg) translateZ(20px);
 }

 .text-gradient {
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }



 /* Additional styles specific to projects page */
 .project-filter {
     transition: all 0.3s ease;
 }

 .project-filter:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }

 .project-card {
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     transform-style: preserve-3d;
 }

 .project-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 .project-modal {
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .project-modal.active {
     opacity: 1;
     visibility: visible;
 }

 .magnificent-border {
     position: relative;
 }

 .magnificent-border::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 3px;
     background: var(--secondary);
     transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .magnificent-border:hover::after {
     width: 100%;
 }


 /* Additional styles for contact page */
 .contact-card {
     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     transform-style: preserve-3d;
 }

 .contact-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .input-group {
     position: relative;
     margin-bottom: 2rem;
 }

 .form-input {
     width: 100%;
     padding: 1rem 0;
     border: none;
     border-bottom: 2px solid #d1a054;
     background-color: transparent;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 .form-input:focus {
     outline: none;
     border-bottom-color: #4d4c46;
 }

 .form-label {
     position: absolute;
     top: 1rem;
     left: 0;
     color: #666;
     transition: all 0.3s ease;
     pointer-events: none;
 }

 .form-input:focus+.form-label,
 .form-input:not(:placeholder-shown)+.form-label {
     top: -0.5rem;
     font-size: 0.8rem;
     color: #4d4c46;
 }

 .map-container {
     position: relative;
     overflow: hidden;
     border-radius: 1rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .map-container iframe {
     width: 100%;
     height: 100%;
     min-height: 400px;
     border: none;
 }


 /* Additional styles for legal page */
 .legal-nav {
     position: sticky;
     top: 100px;
     align-self: start;
 }

 .legal-nav a {
     display: block;
     padding: 0.75rem 1rem;
     margin-bottom: 0.5rem;
     border-left: 3px solid transparent;
     transition: all 0.3s ease;
 }

 .legal-nav a:hover,
 .legal-nav a.active {
     border-left-color: var(--secondary);
     color: var(--secondary);
     background-color: rgba(209, 160, 84, 0.1);
 }

 .legal-section {
     scroll-margin-top: 120px;
 }

 .legal-section h2 {
     position: relative;
     padding-left: 1.5rem;
 }

 .legal-section h2::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0.6em;
     height: 0.5em;
     width: 0.5em;
     background: var(--secondary);
     border-radius: 50%;
 }

 .legal-section h3 {
     color: var(--primary);
     margin-top: 2rem;
     margin-bottom: 1rem;
 }

 .legal-content {
     line-height: 1.8;
 }

 .legal-content p {
     margin-bottom: 1.2rem;
 }

 .legal-content ul {
     margin-bottom: 1.5rem;
     padding-left: 1.5rem;
 }

 .legal-content li {
     margin-bottom: 0.8rem;
     position: relative;
 }

 .legal-content li::before {
     content: '•';
     color: var(--secondary);
     position: absolute;
     left: -1rem;
 }

 .last-updated {
     background-color: rgba(77, 76, 70, 0.1);
     padding: 1rem;
     border-radius: 0.5rem;
     margin-bottom: 2rem;
 }

 @media (max-width: 1023px) {
     .legal-nav {
         position: static;
         margin-bottom: 2rem;
     }

     .legal-nav-container {
         display: flex;
         overflow-x: auto;
         padding-bottom: 1rem;
     }

     .legal-nav a {
         white-space: nowrap;
         border-left: none;
         border-bottom: 3px solid transparent;
         margin-bottom: 0;
         margin-right: 1rem;
     }

     .legal-nav a:hover,
     .legal-nav a.active {
         border-left: none;
         border-bottom-color: var(--secondary);
     }
 }




 /* Add these styles to your existing stylesheet */
 .market-dot {
     width: 16px;
     height: 16px;
     background: var(--secondary);
     border: 3px solid white;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     cursor: pointer;
     transition: all 0.3s ease;
     position: absolute;
 }

 .market-dot:hover {
     transform: translate(-50%, -50%) scale(1.5);
     z-index: 10;
 }

 .market-dot::after {
     content: attr(data-percent);
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--primary);
     color: white;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 12px;
     font-weight: bold;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .market-dot:hover::after {
     opacity: 1;
 }

 .dot-tooltip {
     position: absolute;
     top: -60px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--primary);
     color: white;
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: bold;
     white-space: nowrap;
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
 }

 .market-dot:hover .dot-tooltip {
     opacity: 1;
 }