@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --color-navy: #0d1b2a;
    --color-slate: #415a77;
    --color-white: #ffffff;
    --color-teal: #38bdf8;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-navy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

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

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

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

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

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

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

.btn-primary {
    @apply bg-[#38bdf8] text-[#0d1b2a] font-bold py-3 px-8 rounded-lg hover:bg-[#0ea5e9] transition-colors duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply bg-transparent border-2 border-[#38bdf8] text-[#38bdf8] font-bold py-3 px-8 rounded-lg hover:bg-[#38bdf8] hover:text-[#0d1b2a] transition-all duration-300;
}

.section-padding {
    @apply py-20 px-4 sm:px-6 lg:px-8;
}

/* Custom Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}