
html {
  scroll-behavior: smooth;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-teal: #2D7A7B;
            --primary-light: #4A9899;
            --secondary-purple: #7C3AED;
            --accent-yellow: #FDE047;
            --text-dark: #1F2937;
            --text-light: #6B7280;
            --bg-light: #F9FAFB;
            --bg-white: #FFFFFF;
            --success-green: #10B981;
            --warning-red: #EF4444;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

        @keyframes slideRight {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes countUp {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #E5E7EB;
    outline: none;
    --webkit-appearance: none;
    cursor: pointer;
}
.slider-value {
    position: absolute;
    top: -30px;
    right: 0;
    background: var(--primary-teal);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
}
.pos-relative {
    position: relative;
}
.bg-teel-light {
    background-color: #006b632b;
}
.bg-thyra {
    background-color: #0f766e;
}

.mbg-box {
    display: inline-block;
    background-color: #048232;
    padding: 10px 15px;
    margin-bottom: 8px;
}
.pathClass {
    margin: auto;
}