/* Custom CSS for Future of Music Website (Inspired by CreatorLaunch) */

/* General Body Styles */
body {
    font-family: 'Raleway', sans-serif;
    background-color: #F7F9FC; /* Light background as per example's 'light' color */
    text-rendering: optimizeLegibility;
}

/* Custom Tailwind utility classes defined here, or extended in tailwind.config.js */

/* Glassy Navigation Bar Effect */
.glass-nav {
    background-color: rgba(255, 255, 255, 0.8); /* White with transparency */
    backdrop-filter: blur(10px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* Animated Gradient Background for Hero Sections */
.animated-gradient {
    background: linear-gradient(-45deg, #F55F55, #f7b733, #387ADF, #23d5ab); /* Gradient from example */
    background-size: 400% 400%;
    animation: gradient 15s ease infinite; /* Animation duration and loop */
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Content Card Styling */
.content-card {
    background-color: white;
    border-radius: 1.5rem; /* Equivalent to Tailwind's rounded-3xl */
    padding: 2rem; /* Equivalent to Tailwind's p-8 */
    box-shadow: 0 10px 30px -15px rgba(0,0,0,0.05); /* Custom shadow */
}

/* Icon Box Styling */
.icon-box {
    background-color: #eef4ff; /* A very light blue derived from accent */
    color: #387ADF; /* Accent color */
    padding: 0.75rem; /* Equivalent to Tailwind's p-3 */
    border-radius: 0.75rem; /* Equivalent to Tailwind's rounded-xl */
    display: inline-flex; /* For inline-block behavior with flex alignment */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
}

/* Primary Solid Button Styling */
.btn-primary-solid {
    background-color: #F55F55; /* Primary color */
    color: white;
    transition: background-color 0.3s ease; /* Smooth transition for hover */
}
.btn-primary-solid:hover {
    background-color: #E44D41; /* Slightly darker primary on hover */
}

/* General Button Hover Effect */
.btn-primary:hover {
    transform: translateY(-3px); /* Lift button on hover */
    box-shadow: 0 10px 20px -10px rgba(245, 95, 85, 0.6); /* Shadow for lift effect */
}

/* Custom text shadow for light background */
.text-shadow-custom-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.text-shadow-custom-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
}

/* Hide scrollbar for a cleaner look but still allow scrolling */
body::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, Opera */
}
body {
    -ms-overflow-style: none;  /* For IE and Edge */
    scrollbar-width: none;  /* For Firefox */
}

/* Utility for min-height for full-page sections excluding header */
.min-h-screen-minus-header {
    min-height: calc(100vh - 80px); /* Assuming header height is around 80px */
}