/* ========================================
        Base & Font Styles
        ========================================
        */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8f9fa;
        }

        /* Applying the cursive font to specific elements */
        .font-cursive {
            font-family: 'Dancing Script', cursive;
        }

        /* ========================================
        Page Navigation & Display
        ========================================
        */
        /* Hide all page content by default */
        .page-content {
            display: none;
        }

        /* Show the active page */
        .page-content.active {
            display: block;
        }
        
        /* ========================================
        Header Styles & Animations
        ========================================
        */
        header {
            background: linear-gradient(-45deg, #a8d5ba, #b3e0d2, #c7e8dd, #d3ece5);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            border-bottom: 4px solid #82c4a1;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .nav-link {
            transition: transform 0.3s ease, color 0.3s ease;
        }
        .nav-link:hover {
            transform: translateY(-3px);
            color: #2c5282;
        }
        
        /* ========================================
        Text & Element Animations
        ========================================
        */
        .animated-text-container .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: revealChar 1s forwards;
        }
        
        @keyframes revealChar {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .service-circle {
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
        }
        .service-circle:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        .service-circle .circle-text {
            transition: opacity 0.4s ease;
        }
        .service-circle:hover .circle-text {
            opacity: 1;
        }
        
        /* NEW: Scroll Animation Styles */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ========================================
        Footer Styles (Separated for clarity)
        ========================================
        */
        .footer-main {
            background-color: #34495e;
            color: #ecf0f1;
        }
        .footer-main a {
            color: #a8d5ba;
            transition: color 0.3s ease, text-decoration 0.3s ease;
        }
        .footer-main a:hover {
            color: #ffffff;
            text-decoration: underline;
        }
        .footer-bottom {
            background-color: #2c3e50;
            color: #bdc3c7;
        }