/* Custom styles to complement Tailwind CSS */

/* Ensure fonts load properly */
body {
    font-family: 'Satoshi', sans-serif;
}

/* Custom animations and transitions */
.group:hover .group-hover\:w-full {
    width: 100%;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
button:focus,
a:focus {
    outline: 2px solid #C2A75E;
    outline-offset: 2px;
}

/* Custom hover effects for mobile menu */
#mobile-menu {
    transition: all 0.3s ease;
}

/* Ensure proper backdrop blur support */
@supports (backdrop-filter: blur(10px)) {
    .backdrop-blur-sm {
        backdrop-filter: blur(10px);
    }
}

/* Custom radial gradient backgrounds */
.bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-stops));
}

/* Hero section enhancements */
.hero-bg-pattern {
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(196, 138, 122, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(194, 167, 94, 0.1) 0%, transparent 50%);
}

/* Subtle text shadow for better readability on background */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Custom gradient text */
.gradient-text {
    background: linear-gradient(135deg, #282828 0%, #C48A7A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}