/* Global Styles */
        body {
            background-color: var(--cloud-white);
            color: var(--deep-ink);
            font-family: var(--font-body);
            scroll-behavior: smooth;
        }

        /* Subtle film grain texture effect using background image */
        .film-grain {
            position: relative;
        }
        .film-grain::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGUlEQVQY02NgYGBgYGBgYGDQv//+BwQAAADwAQEAAW/tO2sAAAAASUVORK5CYII=');
            opacity: 0.1;
            pointer-events: none;
            z-index: 1;
        }

        /* Hero Image Slow Zoom */
        .hero-img {
            transition: transform 15s ease-out;
            transform: scale(1.05);
        }
        .hero-img-loaded {
            transform: scale(1);
        }

        /* Scroll Reveal Animation */
        .scrolling-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .scrolling-reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Scrollbar for aesthetic */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--cloud-white); }
        ::-webkit-scrollbar-thumb { background: var(--sand-beige); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--sunset-peach); }
        
        /* Utility for hiding scrollbar on the testimonial container */
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

        /* Animation Keyframe for Floating Icons */
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        .animate-float {
            animation: float 10s ease-in-out infinite;
        }
        
        /* Animation Keyframe for Hero Text */
        @keyframes fadeInSlideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in-up {
            opacity: 0;
            animation: fadeInSlideUp 0.8s ease-out forwards;
        }