/* Custom CSS for Animations and Gradients */
        .page-content {
            display: none;
            min-height: calc(100vh - 180px); /* Account for header and footer */
        }
        .active-page {
            display: block;
        }
        .btn-gradient {
            background-image: linear-gradient(90deg, var(--tw-electric-blue) 0%, var(--tw-soft-teal) 100%);
            background-size: 200% auto;
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            background-position: right center; /* Shift the gradient */
            box-shadow: 0 4px 15px rgba(30, 144, 255, 0.4);
            transform: scale(1.02);
        }
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border-color: #00CFC1;
        }
        .hero-bg {
            background-image: linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(248, 249, 250, 0.7) 100%),
                              url('https://i.pinimg.com/736x/c2/cf/9a/c2cf9a64ebacae1377c275cfdfe2df29.jpg');
            background-size: cover;
            background-position: center;
        }
        /* Scroll Animation Setup */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in {
            opacity: 1;
            transform: translateY(0);
        }