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

@layer base {
    :root {
        --primary: #0A2540;
        --secondary: #0055FF;
        --accent: #FF6B00;
        --dark: #0F172A;
        --gray-light: #F5F7FA;
    }

    html {
        scroll-padding-top: 120px;
    }

    @media (min-width: 1024px) {
        html {
            scroll-padding-top: 180px;
        }
    }
}

@layer components {
    .nav-link {
        @apply relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute bottom-[-4px] left-0 w-0 h-[2px] bg-[var(--secondary)] transition-all duration-300;
    }
    
    .nav-link:hover::after {
        @apply w-full;
    }
    
    .card-hover {
        @apply transition-all duration-300;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .card-hover:hover {
        @apply -translate-y-[6px] shadow-[0_20px_40px_rgba(0,85,255,0.12)];
    }
    
    /* Service card content alignment */
    .card-hover > div.p-6 {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    .card-hover > div.p-6 > div:first-child {
        min-height: 2rem;
        margin-bottom: 0.75rem;
    }
    
    .card-hover > div.p-6 > p.text-gray-600 {
        min-height: 2.5rem;
        margin-bottom: 1rem;
    }
    
    .card-hover > div.p-6 > .flex.flex-wrap.gap-2 {
        min-height: 5rem;
        max-height: 5rem;
        margin-bottom: 1.5rem;
        align-content: flex-start;
        overflow: hidden;
    }
    
    .card-hover > div.p-6 > .flex.gap-3 {
        margin-top: auto;
    }
    
    .equal-height-rows {
        grid-auto-rows: 1fr;
    }
    
    .bg-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
}