:root {
            --primary-color: #4CAF50;
            --secondary-color: #2196F3;
            --light-primary: #E8F5E9;
            --light-secondary: #E3F2FD;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, var(--light-primary), var(--light-secondary));
            color: #333;
            min-height: 100vh;
        }

        .bg-primary {
            background-color: var(--primary-color);
        }

        .bg-secondary {
            background-color: var(--secondary-color);
        }

        .text-primary {
            color: var(--primary-color);
        }

        .text-secondary {
            color: var(--secondary-color);
        }

        .border-primary {
            border-color: var(--primary-color);
        }

        .border-secondary {
            border-color: var(--secondary-color);
        }

        .calculator-container {
            background-color: white;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
        }

        .calculator-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath fill='%234CAF50' fill-opacity='0.05' d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'%3E%3C/path%3E%3Cpath fill='%232196F3' fill-opacity='0.05' d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'%3E%3C/path%3E%3Cpath fill='%234CAF50' fill-opacity='0.05' d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'%3E%3C/path%3E%3Cpath fill='%232196F3' fill-opacity='0.05' d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'%3E%3C/path%3E%3Cpath fill='%234CAF50' fill-opacity='0.05' d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'%3E%3C/path%3E%3C/svg%3E");
            z-index: 0;
        }

        .vector-graphic {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0.08;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%234CAF50' d='M128 0C92.8 0 64 28.8 64 64v64h128V64c0-35.2-28.8-64-64-64zm0 160H64v192h64V160zm64 0v192h128V160H192zm192 0v192h64V160h-64zM304 0c-35.2 0-64 28.8-64 64v64h128V64c0-35.2-28.8-64-64-64zm80 64v96h64V64c0-35.2-28.8-64-64-64-3.7 0-7.4.3-10.9.9C392.1 8.4 400 27.5 400 48c0 5.5-.9 10.7-2.5 15.6 6.5-4.3 10.5-11.6 10.5-19.6zM64 384v64c0 35.2 28.8 64 64 64s64-28.8 64-64v-64H64zm192 0v64c0 35.2 28.8 64 64 64s64-28.8 64-64v-64H256zm192 0v64c0 35.2 28.8 64 64 64h32c17.7 0 32-14.3 32-32V384H448z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            z-index: 0;
        }

        .custom-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234CAF50' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 12px;
            padding-right: 2rem;
        }

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

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

        .animated-icon {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

        .chart-container {
            position: relative;
            height: 350px;
            width: 100%;
        }

        .formula {
            font-family: "Courier New", monospace;
            background-color: #f7f7f7;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
        }

        /* Utensil Graphics */
        .utensil {
            position: absolute;
            opacity: 0.1;
            z-index: 0;
        }

        .utensil-1 {
            top: 10%;
            left: 5%;
            transform: rotate(-15deg);
        }

        .utensil-2 {
            bottom: 10%;
            right: 5%;
            transform: rotate(30deg);
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 1s ease-in;
        }

        .slide-in {
            animation: slideIn 0.7s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        /* Progress bar animation */
        .progress-bar-animation {
            width: 0%;
            transition: width 1s ease-in-out;
        }

        /* For hero section */
        .hero-container {
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(33, 150, 243, 0.2));
            z-index: -1;
        }

        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234CAF50' fill-opacity='0.1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            z-index: -1;
        }