/* Missing CSS for Hero Section 16:9 Layout - Voeg toe aan je bestaande style.css */

/* 16:9 Aspect Ratio - BELANGRIJK VOOR HERO IMAGE */
.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Grid 2-columns responsive - BELANGRIJK VOOR 2-KOLOMS LAYOUT */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
    .lg\:text-left { 
        text-align: left; 
    }
    .lg\:justify-start { 
        justify-content: flex-start; 
    }
    .lg\:mx-0 { 
        margin-left: 0; 
        margin-right: 0; 
    }
    .lg\:max-w-none { 
        max-width: none; 
    }
    .lg\:order-last { 
        order: 9999; 
    }
}

/* Extra spacing voor hero layout */
.gap-12 { 
    gap: 3rem; 
}

.max-w-lg { 
    max-width: 32rem; 
}

/* Extra borders en shadows */
.rounded-xl { 
    border-radius: 0.75rem; 
}

.shadow-2xl { 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Position utilities voor decorative elements */
.absolute { 
    position: absolute; 
}

.relative { 
    position: relative; 
}

.inset-0 { 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

/* Extra sizing */
.w-24 { 
    width: 6rem; 
}

.w-32 { 
    width: 8rem; 
}

.h-24 { 
    height: 6rem; 
}

.h-32 { 
    height: 8rem; 
}

/* Overflow */
.overflow-hidden { 
    overflow: hidden; 
}

/* Object fit voor images */
.object-cover { 
    object-fit: cover; 
}

/* Transitions */
.transition-colors { 
    transition-property: color, background-color, border-color; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 150ms; 
}

.duration-200 { 
    transition-duration: 200ms; 
}

/* Hover effects */
.hover\:bg-blue-700:hover { 
    background-color: #1d4ed8; 
}

.hover\:bg-gray-50:hover { 
    background-color: #f9fafb; 
}

/* Gradients voor placeholders */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-blue-50 { 
    --tw-gradient-from: #eff6ff; 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0)); 
}

.to-indigo-100 { 
    --tw-gradient-to: #e0e7ff; 
}

.from-primary\/10 { 
    --tw-gradient-from: rgba(37, 99, 235, 0.1); 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0.1)); 
}

.to-blue-100 { 
    --tw-gradient-to: #dbeafe; 
}

.from-black\/5 { 
    --tw-gradient-from: rgba(0, 0, 0, 0.05); 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); 
}

.to-transparent { 
    --tw-gradient-to: transparent; 
}

/* Animation pulse */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: .5; 
    }
}

.animate-pulse { 
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 
}

.delay-1000 { 
    animation-delay: 1000ms; 
}

/* Order utilities */
.order-first { 
    order: -9999; 
}

/* Pointer events */
.pointer-events-none { 
    pointer-events: none; 
}

/* Border utilities */
.border-transparent { 
    border-color: transparent; 
}

.border-gray-300 { 
    border-color: #d1d5db; 
}

/* Inline flex */
.inline-flex { 
    display: inline-flex; 
}

/* Additional padding */
.px-8 { 
    padding-left: 2rem; 
    padding-right: 2rem; 
}