/* Custom Tailwind Configuration for Primary Color */
:root {
    --color-primary: #0D3BFF;
    --color-primary-dark: #0028e0;
}

/* Apply Inter font, which is clean and modern */
html {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Custom utility classes */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark); }
.border-primary { border-color: var(--color-primary); }

/* Custom gradient for use in background/CTA */
.bg-blue-gradient {
    background: linear-gradient(135deg, var(--color-primary), #00A3FF);
}

/* Simple SVG icon styles */
.icon-outline {
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hero background effect - simplified placeholder image description */
.hero-bg-overlay {
    background-image: url('img/Umum-06.jpg');
    background-size: cover;
    background-position: center;
    /* Applying a subtle filter/overlay for the blur effect */
    filter: brightness(0.9) blur(0.5px); 
    z-index: -1;
}

/* Sticky Header Transition */
.sticky-header {
    transition: background-color 0.3s ease;
}

/* Custom shadow for premium feel */
.shadow-premium {
    box-shadow: 0 10px 30px -5px rgba(13, 59, 255, 0.1), 0 4px 6px -2px rgba(13, 59, 255, 0.05);
}

/* Cara Kerja (How It Works) step circle style */
.step-circle {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}