*{
  margin:0;
  padding:0;
  box-sizing:border-box
}
body{
  font-family:system-ui,sans-serif;
  line-height:1.6;
  color:#333
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px
}
.site-header{
  background:#fff;
  color:#fff;
  padding:1rem 0
}
.site-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.logo h1{
  font-size:1.5rem
}
.logo span{
  color:#fbbf24
}
nav a{
  color:#b9529f;
  text-decoration:none;
  margin-left:1.5rem;
	font-weight:bold;
}
.flash{
  padding:1rem;
  margin:1rem auto;
  max-width:1200px;
  border-radius:4px
}
.flash.success{
  background:#d1fae5;
  color:#065f46
}
.flash.error{
  background:#fee2e2;
  color:#991b1b
}
.hero{
  background:#2a3590;
  color:#fff;
  padding:4rem 0;
  text-align:center
}
.hero h1{
  font-size:3rem
}
.hero2{
  background:#b9529f;
  color:#fff;
  padding:4rem 0;
  text-align:center
}
.hero2 h1{
  font-size:3rem
}
.search-form{
  margin-top:2rem;
  display:flex;
  gap:1rem;
  justify-content:center
}
.search-form input{
  padding:1rem;
  border:none;
  border-radius:8px;
  width:300px
}
.search-form button{
  padding:1rem 2rem;
  background:#b9529f;
  border:none;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer
}
.sponsors{
  padding:2rem 0;
  background:#f9fafb;
  text-align:center
}
.sponsors img{
  max-height:90px;
  margin:0 1rem
}
.categories,.events{
  padding:3rem 0
}
.cat-grid,.event-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.5rem;
  margin-top:2rem
}
.cat-card{
  background:#fff;
 /* padding:2rem;*/
	overflow:hidden;
  text-align:center;
  border-radius:8px;
  text-decoration:none;
  color:#2a3590;
	
  border:2px solid #e5e7eb
}
.cat-card span{
  font-size:2rem
}
.event-card{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  border:1px solid #e5e7eb
}
.event-card.sponsored{
  border:2px solid #fbbf24
}
.event-card img{
  width:100%;
  height:200px;
  object-fit:cover
}
.event-card h3{
  padding:1rem
}
.event-card p{
  padding:0 1rem 1rem;
  color:#6b7280
}
.event-detail{
  padding:3rem 0
}
.event-image{
  width:100%;
  max-width:800px;
  margin:2rem 0;
  border-radius:8px
}
.event-body{
  max-width:800px;
  line-height:1.8
}
.event-meta{
  display:flex;
  gap:2rem;
  margin:1rem 0;
  color:#6b7280
}
.cat-tag{
  display:inline-block;
  padding:0.25rem 0.75rem;
  background:#f3f4f6;
  border-radius:20px;
  margin-right:0.5rem
}
.auth{
  padding:3rem 0
}
.auth form{
  max-width:400px;
  margin:2rem auto
}
.auth input{
  width:100%;
  padding:0.75rem;
  margin-bottom:1rem;
  border:1px solid #e5e7eb;
  border-radius:4px
}
.auth button{
  width:100%;
  padding:0.75rem;
  background:#2a3590;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer
}
.create-event{
  padding:3rem 0
}
.form-group{
  margin-bottom:0.5rem
}
.form-group label{
  display:block;
  margin-bottom:0.1rem;
  font-weight:600
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;
  padding:0.75rem;
  border:1px solid #e5e7eb;
  border-radius:4px
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.btn{
  padding:0.75rem 2rem;
  background:#b9529f;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:1rem
}
.site-footer{
  background:#1f2937;
  color:#fff;
  padding:2rem 0;
  text-align:center;
  margin-top:4rem
}
.sponsor-banner{
  margin:2rem 0;
  text-align:center
}
.sponsor-banner img{
  max-width:728px;
  width:100%
}
@media(max-width:768px){
  .search-form{
    flex-direction:column
  }
  .hero h1{
    font-size:2rem
  }
  .form-row{
    grid-template-columns:1fr
  }
}




/* 1. Hide the actual input element */
#actual-file-input {
  /* Hides the element visually and ensures it takes no space */
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

/* 2. Style the custom label (which now acts as the button) */
.custom-button-style {
  /* General Button Styles */
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer; /* Important to indicate it's clickable */
  
  /* Your desired styles to override the default */
  background-color: #007bff; /* Custom Blue Background */
  color: #ffffff;           /* Custom White Text */
  border: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

.custom-button-style:hover {
  background-color: #0056b3; /* Darker blue on hover */
}
.upload-image-input {
  /* Add your unique styles here */
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ttdt-button {
  background-color: #2a3590; /* Green background */
  color: white; /* White text */
  padding: 10px 20px; /* Space inside the button */
  border: none; /* No default border */
  border-radius: 8px; /* Slightly rounded corners */
  font-size: 16px;
  cursor: pointer; /* Changes the mouse icon to a hand */
  transition: background-color 0.3s; /* Smooth color change on hover */
}

.ttdt-button:hover {
  background-color: #b9529f; /* Darker green on hover */
}


/* Style for the category card container */
.cat-card {
    /* Set a specific size for the container or let flex/grid define it */
    display: flex;
    flex-direction: column; /* Stacks the icon and title */
    align-items: center; /* Centers items horizontally */
    justify-content: center; /* Centers items vertically if needed */
    /* ... other styling for the card itself (border, padding, etc.) */
}

/* Style for the span holding the image */
.cat-card span {
    /* Define the size of the icon container */
    width: 100%;  /* Example: set a fixed width for the icon area */
   /* height: 80px;  Example: set a fixed height for the icon area */
    display: block;
    overflow: hidden; /* Crucial: Hides any part of the image that spills over */
    margin-bottom: 10px; /* Spacing between icon and title */
}

/* Style for the image itself */
.cat-card span img {
    width: 100%; /* Make the image take 100% of the parent <span>'s width */
    height: 100%; /* Make the image take 100% of the parent <span>'s height */
    object-fit: cover; /* CRITICAL: This tells the image how to scale */
    /* 'cover' scales the image to maintain its aspect ratio while filling the element's entire content box. If the aspect ratio of the image does not match the aspect ratio of its box, then the object will be clipped to fit. */
    /* You could also use 'contain' if you prefer the whole image to be visible, but it might leave blank space. */
}

/* Styling for the main footer elements */
.site-footer {
    background-color: #2a3590; /* Dark background color (example) */
    color: #ffffff; /* Light text color (example) */
    padding: 20px 0;
}

.container {
    max-width: 1200px; /* Max width for content (example) */
    margin: 0 auto;
    padding: 0 15px;
}

/* --- 4-Column Layout for Desktop (Default) --- */

.footer-grid {
    display: flex; /* Enables flexbox layout */
    flex-wrap: wrap; /* Allows columns to wrap if necessary */
    gap: 20px; /* Space between columns and rows */
    margin-bottom: 20px;
}

.footer-col {
    /* Each column takes up roughly 1/4 of the space, allowing for the gap */
    flex: 1 1 22%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 22% */
    min-width: 150px; /* Ensures minimum readable width before wrapping */
}

/* Basic styling for content */
.footer-col h3, .footer-col h4 {
    color: #b9529f; /* A contrasting color for headings (example) */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 5px;
}

.footer-col a {
    color: #bdc3c7; /* Lighter link color */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #ecf0f1;
}

.footer-bottom {
    border-top: 1px solid #2a3590; /* Separator line (example) */
    padding-top: 10px;
    text-align: center;
    font-size: 0.9em;
    color: #ffffff;
}

/* --- 1-Column Layout for Mobile (using a Media Query) --- */

/* Adjusts the layout for screens smaller than 768px */
@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column; /* Stacks all columns vertically */
        gap: 10px; /* Reduce gap on mobile */
    }

    .footer-col {
        /* On mobile, each column takes up the full available width */
        flex: 1 1 100%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 100% */
        padding-bottom: 15px; /* Add padding between stacked columns */
        border-bottom: 1px dashed #2a3590; /* Subtle separator */
    }

    /* Remove the separator from the last column */
    .footer-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}