:root {
    --background: #f8fbfb;
    --foreground: #18222c;
    --primary: oklch(0.42 0.12 175);
    --primary-foreground: #ffffff;
    --border: #d9e4e6;
    --muted-foreground: #64748b;
    --accent: #e8f7f5;
}



html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar-scroll {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* ===========================
   Utility Classes
=========================== */

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

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

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

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

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

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

.text-muted-foreground {
    color: var(--muted-foreground);
}

.hover-accent:hover {
    background: var(--accent);
}

/* ===========================
   Text Gradient
=========================== */

.text-gradient {
    background: linear-gradient(135deg, #0f766e, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===========================
   Grid Background
=========================== */

.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ===========================
   Hero Glow
=========================== */

.hero-glow {
    background: radial-gradient(circle at 50% -10%,
            rgba(15, 118, 110, 0.15),
            transparent 60%);
}

/* ===========================
   Floating Animation
=========================== */

.float1 {
    animation: updown 4s ease-in-out infinite;
}

.float2 {
    animation: updown2 4s ease-in-out infinite;
}

@keyframes updown {
    50% {
        transform: translateY(-10px);
    }
}

@keyframes updown2 {
    50% {
        transform: translateY(10px);
    }
}

.text-gradient {
    background: linear-gradient(135deg, #0f766e, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.card {
    transition: .3s
}

.card:hover {
    transform: translateY(-4px)
}