/* Custom Styles for Central Florida Indian Connection
  This file contains styles that extend or override the default Tailwind CSS classes.
*/

/* Global body styles */
body {
    font-family: 'Poppins', sans-serif; /* Sets the default font for the entire page */
    background-color: #f8fafc; /* A light gray background color for a clean look */
}

/* Hero section gradient overlay */
/* This creates a dark overlay on top of the hero image to make the text more readable */
.hero-gradient {
    background-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.7) 100%);
}

/* Custom brand color classes */
/* Saffron color for text */
.brand-saffron { color: #FF9933; }
/* Saffron color for backgrounds */
.brand-saffron-bg { background-color: #FF9933; }
/* A slightly darker saffron for hover effects on buttons */
.brand-saffron-bg-hover:hover { background-color: #e68a2e; }

/* Green color for text */
.brand-green { color: #138808; }
/* Green color for backgrounds */
.brand-green-bg { background-color: #138808; }

/* Glassy background effect for buttons/elements */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Apply blur effect to content behind */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
}


/* Style for the newsletter subscription success message */
#successMessage {
    /* This allows for a smooth fade-in effect using JavaScript */
    transition: opacity 0.5s ease-in-out;
}