body { font-family: 'Montserrat', sans-serif; scroll-behavior: smooth; }
        .bg-navy { background-color: #002147; }
        .text-gold { color: #C5A059; }
        .bg-gold { background-color: #C5A059; }
        .luxury-line { height: 3px; width: 60px; background-color: #C5A059; margin-top: 10px; }
        
        #hero-bg {
            transition: background-image 1.5s ease-in-out;
            background-size: cover;
            background-position: center;
        }

        .section-title { position: relative; padding-bottom: 15px; margin-bottom: 25px; }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #C5A059;
        }
        .section-title-center::after { left: 50%; transform: translateX(-50%); }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-up { animation: fadeInUp 0.8s ease-out forwards; }



        /* For product Section */
        @keyframes spin-orbit { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(360deg); } 
        }
        .animate-spin-orbit { 
            animation: spin-orbit 60s linear infinite; 
        }
        
        @keyframes counter-spin { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(-360deg); } 
        }
        .node-counter-rotate { 
            animation: counter-spin 60s linear infinite; 
        }

        .bg-navy-deep { background-color: #000f1f; }
    .text-gold { color: #C5A059; }
    .bg-gold { background-color: #C5A059; }

    /* Navbar Photo decrease at border */
    .logo-fade {
    /* Set the size of your logo */
    height: 80px; 
    width: auto;
    }

    /* Radial gradient mask: opaque in center, transparent at edges */
  .logo-vignette {
    height: 80px; /* Adjust size as needed */
    width: auto;
    border-radius: 24px; /* Matches the rounded shape in your photo */
    
    /* The Mask: Center is solid, edges fade to transparent */
    mask-image: radial-gradient(
        circle at center, 
        black 30%, 
        transparent 95%
    );
    -webkit-mask-image: radial-gradient(
        circle at center, 
        black 30%, 
        transparent 95%
    );
}   
#mobile-menu ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#mobile-menu ul li a {
    display: block;
    width: 100%;
    padding: 10px 0;
}