/* Define Custom Colors */
        :root {
            --color-blush: #FCE4EC; /* Soft Blush Pink */
            --color-cream: #FAF0E6; /* Creamy Background */
            --color-ivory: #FFFFF0; /* Ivory/White Accents */
            --color-gold: #D4AF37; /* Champagne Gold Accent */
            --color-text-dark: #333333;
        }

        /* Apply Base Styles and Fonts */
        body {
            background-color: var(--color-cream);
            font-family: 'Inter', sans-serif;
            color: var(--color-text-dark);
            scroll-behavior: smooth;
        }

        /* Custom Cursive and Serif Classes */
        .font-serif-bold {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }
        .font-cursive {
            font-family: 'Allura', cursive;
            font-weight: 400;
        }

        /* Custom Glossy Card Effect */
        .glossy-card {
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .glossy-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        }

        /* Custom Button Styles */
        .btn-gold {
            background: linear-gradient(145deg, #FFD700, var(--color-gold));
            color: white;
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
            transition: all 0.3s ease;
        }
        .btn-gold:hover {
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.6);
            transform: translateY(-2px);
        }
        .btn-outline-cursive {
            border: 2px solid var(--color-gold);
            color: var(--color-gold);
            transition: all 0.3s ease;
        }
        .btn-outline-cursive:hover {
            background-color: rgba(212, 175, 55, 0.1);
        }

        /* Page Transition/Animation */
        .view-content {
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
        }
        .view-content.active {
            opacity: 1;
        }

        /* Floating Element - subtle movement on hover */
        .float-on-hover:hover {
            transform: translateY(-8px) rotate(1deg);
            transition: transform 0.4s ease-out;
        }

        /* Custom Scrollbar for Aesthetic */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--color-cream);
        }
        ::-webkit-scrollbar-thumb {
            background: var(--color-blush);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--color-gold);
        }