:root {
            --bg-green: #DDEB9D;
            --text-black: #000000;
            --box-white: #FFFFFF;
            --font-edu: 'Edu SA Beginner', cursive;
        }

        * {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: var(--font-edu);
            background-color: var(--bg-green);
            color: var(--text-black);
            margin: 0;
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Luxury Layout Components */
        .white-box {
            background-color: var(--box-white);
            padding: 3.5rem;
            border-radius: 0;
            box-shadow: 20px 20px 60px rgba(0,0,0,0.03);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Page Transitions */
        .page-node {
            display: none;
            min-height: 100vh;
            padding-bottom: 100px;
        }

        .page-node.active {
            display: block;
            animation: pageSlideIn 0.6s ease-out forwards;
        }

        @keyframes pageSlideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Navigation */
        header {
            background-color: var(--box-white);
            height: 150px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5%;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }

        .nav-link {
            text-decoration: none;
            color: black;
            font-size: 1.1rem;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .nav-link:hover, .nav-link.active {
            background-color: var(--bg-green);
        }

        /* Portfolio Specifics */
        .portfolio-card {
            transition: all 0.4s ease;
            cursor: pointer;
        }
        
        .portfolio-card img {
            transition: transform 0.6s ease;
        }

        .portfolio-card:hover img {
            transform: scale(1.03);
        }

        /* Hero Background Animation */
        .hero-bg-anim {
            background: linear-gradient(-45deg, #DDEB9D, #fdfdfd, #e9f5bc);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }

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

        /* Floating Animation */
        .floating {
            animation: floatY 5s ease-in-out infinite;
        }

        @keyframes floatY {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-30px); }
        }

        /* Custom Modal */
        #modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
            backdrop-filter: blur(8px);
            padding: 2rem;
            overflow-y: auto;
        }

        .modal-inner {
            background: var(--box-white);
            width: 100%;
            max-width: 1100px;
            margin: auto;
            position: relative;
            padding: 4rem;
        }

        /* Form Styling */
        input, textarea, select {
            border: none;
            border-bottom: 2px solid #eee;
            padding: 1rem 0;
            width: 100%;
            font-family: inherit;
            outline: none;
            transition: border-color 0.3s;
        }

        input:focus {
            border-bottom-color: var(--bg-green);
        }

        /* Typography */
        h1, h2, h3 { font-weight: 700; }
        p { font-weight: 400; font-size: 1.15rem; }

            /* Floating Animation for Image */
    @keyframes float-left {
        0%, 100% { transform: translateY(0) translateX(0); }
        50% { transform: translateY(-20px) translateX(-5px); }
    }

    .floating-left {
        animation: float-left 6s ease-in-out infinite;
    }

    /* Fade-in animation for content boxes */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-fadeIn {
        animation: fadeIn 1s ease forwards;
    }

    .delay-200 { animation-delay: 0.2s; }
    .delay-400 { animation-delay: 0.4s; }