body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            color: #1c1e21;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            overflow-y: auto; /* Allow scrolling for content */
        }

        header, footer {
            flex-shrink: 0; /* Prevent header/footer from shrinking */
        }

        main {
            flex-grow: 1; /* Allow main content to take available space */
            overflow-y: auto; /* Allow main content to scroll if needed */
            padding-top: 1rem; /* Space below header */
            padding-bottom: 1rem; /* Space above footer */
        }

        .container {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .hero-gradient {
            background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%); /* Green to Blue gradient */
        }

        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
        }

        /* Hide sections by default */
        .app-section {
            display: none;
        }

        /* Show active section */
        .app-section.active {
            display: block;
        }