body {
    font-family: 'Inter', sans-serif;
}

.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.aspect-h-9 > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-bg {
    background-image: linear-gradient(to right, rgba(0, 77, 128, 0.8), rgba(0, 21, 51, 0.8)), url('https://images.unsplash.com/photo-1543466835-00a7907e9de1?q=80&w=2874&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}
.section-title {
    @apply text-3xl font-bold text-center text-blue-900 mb-10;
}
.card {
    @apply bg-white p-8 rounded-xl border border-gray-100 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1;
}