:root {
            --color1: #d9d592;
            --color2: #fff5c2;
            --color3: #1f1d00;
            --color4: #787772;
            --color5: #e2e2e2;
        }

        body {
            background-color: var(--color2); 
            color: var(--color3);
            overflow-x: hidden;
            font-family: 'Inter', sans-serif;
        }

        
        .img-as-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -10;
        }

        
        
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        
        
        .deco-shape {
            position: absolute;
            background-color: var(--color1);
            opacity: 0.3;
            border-radius: 50%;
            filter: blur(20px);
            z-index: -5;
        }

        
        .clip-organic {
            clip-path: polygon(0% 15%, 15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%);
        }
        
        .clip-wave {
            clip-path: path("M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z");
            clip-path: path("M 0 100 C 200 200 400 0 600 100 L 600 0 L 0 0 Z");
            transform: scale(2); 
        }
        
        
        
        .parallax-element {
            transition: transform 0.2s ease-out; 
        }
        
        
        .burger-line {
            transition: all 0.3s ease-in-out;
            transform-origin: center;
        }

        
        .burger-open .line-1 {
            transform: translateY(8px) rotate(45deg);
        }
        .burger-open .line-2 {
            opacity: 0;
        }
        .burger-open .line-3 {
            transform: translateY(-8px) rotate(-45deg);
        }

        
        #mobile-menu {
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        
        .deco-line {
            width: 100px;
            height: 2px;
            background-color: var(--color1);
            margin: 2rem 0;
        }
