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

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

/* Custom Animation for floating elements */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes bounceSide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

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

.hover-slide-right:hover {
    transition: transform 0.3s ease;
    transform: translateX(5px);
}

/* Custom Red Color Utility if Tailwind config is not enough */
.text-brand-red { color: #D72323; }
.bg-brand-red { background-color: #D72323; }
.border-brand-red { border-color: #D72323; }
.hover-bg-brand-dark:hover { background-color: #b01b1b; }

/* Upload Area Dashed Border */
.upload-area {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23CCC' stroke-width='2' stroke-dasharray='10%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    transition: all 0.3s ease;
}

.upload-area.active {
    background-color: #fcebeb;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23D72323' stroke-width='3' stroke-dasharray='10%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

/* Navigation Link Active State */
.nav-link.active {
    color: #D72323;
    font-weight: 600;
}