@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap');

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

@layer base {
    body {
        font-family: 'Inter', sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Lora', serif;
    }
}

.policy-content h2 {
    @apply text-2xl font-bold mt-8 mb-4 pb-2 border-b;
}
.policy-content h3 {
    @apply text-xl font-semibold mt-6 mb-2;
}
.policy-content p, .policy-content li {
    @apply text-gray-700 leading-relaxed;
}
.policy-content ul {
    @apply list-disc pl-6 space-y-2;
}
.policy-content strong {
    @apply font-semibold text-gray-800;
}

.logo {
    border-radius: 0.5rem; /* Rounded corners */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out;
}

.logo:hover {
    transform: scale(1.1);
}

.fancy-title {
    background: -webkit-linear-gradient(45deg, #22c55e, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: text-shadow 0.2s ease-in-out;
}

.fancy-title:hover {
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}