html, body {
    height: 100%;
    margin: 0;
    line-height: 1.6;
    font-family: "Phudu", sans-serif;
    font-weight: 400;
    background-color: white;
    
  }

  .empty-space {
  height: 10vh;
}

  /* General styling for the wrapper to center content */
.e-header-wrapper {
    position: relative; 
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 1;
}

.e-header-wrapper::before {
  content: '';
  background-image: url('../Images/header-bg.jpg');
  background-size: cover;
  background-position: center;
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  opacity: 0.4;
  filter: blur(2px);

  z-index: -1;
}

/* Styles the content container */
.e-header-upper {
    /* Uses flexbox to stack items vertically and center them */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* Adds space between the child elements */
    text-align: center; /* Ensures text is centered */
}

.first-title {
    color: #000000;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 1px; 
    margin-top: 10%;
}

.second-title {
    color: #000000;
    font-size: clamp(3rem, 1.5rem + 5vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    max-width: 800px;
}

.cta-button {
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #EAEAEA;
    border-radius: 50px;
    padding: 14px 28px;
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Phudu", sans-serif;
}

.cta-button:hover {
    background-color: #F5F5F5;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.title-divider {
  display: flex; /* Changed from 'block' to 'flex' */
  align-items: center; /* This now correctly vertically centers the items */
  width: 100%; 
  gap: 1.5rem; /* This now correctly adds space between the title and the line */
}

.title-divider h2 {
  margin: 0; /* Removes default heading margin */
  color: black; /* Sets a dark gray color for the text */
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem);
  font-weight: 600;
  white-space: nowrap;
  padding-bottom: 1%;
}

.title-divider .line {
  flex-grow: 1; /* Allows the line to grow and fill all available space */
  height: 2px; /* Sets the thickness of the line */
  background-color: gray; /* Sets a light gray color for the line */
}

.e-header-lower {
    width: 100%;
    padding-top: 1.5rem; /* Adds space above the blog cards */
}

.p-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Make the entire card a clickable link without underlines */
.p-blog-link {
    text-decoration: none; /* Removes the default link underline */
    color: inherit; /* Makes the title inherit its color */
    display: block; /* Ensures the link takes up the whole grid space */
}

/* A single, reusable style for ANY blog card */
.p-blog-item {
    background-color: transparent;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* The hover effect now targets the single class */
.p-blog-item:hover {
    transform: translateY(-5px);
}

/* Image and title styles remain the same */
.blog-image img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.blog-title {
    padding: 2% 2% 2% 0%;
    font-size: clamp(1rem, 1rem + 0.5vw, 1rem);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

@media (max-width: 900px) {
.e-header-lower{
  display: none;
}

.title-divider{
  display: none;
}
}



.post-list {
    max-width: 1140px;
    width: 100% !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}


.post-search-bar-wrapper {
  display: flex;
  justify-content: flex-end; /* Aligns items to the end (right) */
  padding: 0 0%; /* Optional: Adds space from the screen edges */

}

.post-search-container {
  display: flex;
  align-items: center; 
  max-width: 400px; 
  margin-top: 5%;
  margin-bottom: 3%;
  background-color: white;
  border-radius: 50px; /* Creates the pill shape */
  padding-left:2%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  font-family: 'Montserrat', sans-serif; /* Using a font from your existing list */
}

/* Styling for the text input field */
.post-search-input {
  flex-grow: 1; /* Allows the input to take up available space */
  border: none; /* Removes the default border */
  outline: none; /* Removes the focus outline */
  padding: 3% 5%; /* Adds space inside the input field */
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  color: #000 !important;
}

/* Styling for the placeholder text */
.post-search-input::placeholder {
  color: #aaa;
  font-weight: 500;
}

/* Styling for the search button */
.post-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a39cd8;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  border: none;
  border-radius: 50px;
  padding: 15px 35px; /* Space inside the button */
  cursor: pointer; /* Changes cursor to a pointer on hover */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Changes button color slightly on hover */
.post-search-button:hover {
  background-color: #8c82c5;
  transform: scale(1.05); /* Makes the button 5% bigger */
}

/* Styling for the SVG magnifying glass icon */
.post-search-icon {
  width: 22px;
  height: 22px;
  margin-left: 10px; /* Space between "SEARCH" text and the icon */
}

.post-list-container{
  margin-top: 1rem;
}

/* ======================================= */
/* ======   Individual Post Styles  ====== */
/* ======================================= */

.list-post-wrapper {
    display: flex; /* Aligns image and content side-by-side */
    align-items: center; /* Vertically centers the content with the image */
    gap: 2rem; /* Creates space between the image and the content */
    background-color: rgb(245, 245, 245); /* Sets a white background */
    margin-bottom: 2rem; /* Adds space between this post and the next one */
    overflow: hidden; /* Ensures content respects the rounded corners */
    transition: transform 0.3s ease;
    padding: 1rem;
}

.list-post-wrapper:hover {
    transform: translateY(-5px); /* Lifts the card slightly on hover */
}

/* --- Image specific styles --- */
.list-post-image-wrapper {
    flex-shrink: 0; /* Prevents the image from shrinking */
    width: 50%;
    max-width: 600px; /* Sets a fixed width for the image container */
}

.list-post-image {
    width: 100%;
    height: auto;
    display: block; /* Removes any extra space below the image */
    border: none;
    border-color: gray;
    border-width: 1px;
    border-radius: 10px; /* Slightly rounds the image corners */
}

/* --- Content specific styles --- */
.list-post-content-wrapper {
    display: flex;
    flex-direction: column; /* Stacks the content vertically */
    align-items: flex-start; /* Aligns content to the left */
}

.published-date {
    color: black;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0; 
}

.post-list-title {
    /* Clamps the font size between 1rem and 2rem for smooth scaling */
    font-size: clamp(0.5rem, 0.5rem + 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 0.75rem 0; /* Top, Right, Bottom, Left margins */
    font-family: 'Montserrat', sans-serif;
}

.post-list-title a {
    color: inherit; /* This makes the link's color the same as the parent h2 */
    text-decoration: none; /* This removes the underline */
}

.post-list-title a:hover {
    /* Optional: Add a hover effect if you like */
    color: gray;
}

.post-list-descriptions {
    /* Clamps the font size between 1rem and 1.15rem */
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
    color: black;
    padding-right: 10%;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif;
}

.post-list-readmore {
    /* Clamps the font size between 1rem and 1.1rem */
    font-size: clamp(1rem, 0.95rem + 0.5vw, 1.1rem);
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    background: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.post-list-readmore:hover {
    color: gray; /* Darker highlight on hover */
}

.post-meta-container {
    display: flex;
    align-items: center; /* Vertically aligns date and tag */
    gap: 0.5rem; /* Creates space between date, separator, and tag */
    margin-bottom: 0.75rem; /* The margin that used to be on the date */
}

/* --- ADDED: Style for the tag itself --- */
.post-tag {
    font-size: 0.7rem; /* Make the tag text slightly smaller */
    font-weight: 700;
    color: white;
    background-color: #4A90E2; /* A nice blue, feel free to change */
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- ADDED: A small dot separator between the date and tag --- */
.post-tag-separator {
    background-color: black;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

/* ======================================= */
/* ======   RESPONSIVE MEDIA QUERIES ====== */
/* ======================================= */

/* Hide descriptions on medium screens and below */
@media screen and (max-width: 1050px) {
    .post-list-container .post-list-descriptions,
    .list-post-wrapper .post-list-descriptions {
        display: none !important;
    }
}

/* Hide published date on small screens and below */
@media screen and (max-width: 768px) {
    .post-list-container .published-date,
    .list-post-wrapper .published-date {
        display: none !important;
    }
    
    /* Stack content vertically on mobile */
    .list-post-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    
    .list-post-image-wrapper {
        width: 100%;
        max-width: none;
    }
    
    .post-list-descriptions {
        padding-right: 0;
    }
}


/* ======================================= */
/* ====== Newsletter Banner Styles ====== */
/* ======================================= */

.newsletter-section{
  max-width: 1140px;
    width: 100% !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.newsletter-banner {
    display: flex;
    flex-direction: row; 
    align-items: center;           
    justify-content: space-between;
    gap:2rem;
    background-color: #a39cd8;
    border-radius: 10px;
    padding: 3rem 4rem;          /* Adjust padding for the new layout */
    margin-top: 2%;
    border: solid;
    border-color: gray;
    margin-bottom: none;
}

.newsletter-banner h2 {
    color: white;
    font-size: clamp(2rem, 1rem + 4vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.2;
    margin: 0;
    text-align: left;
    flex-shrink: 0;
}

.newsletter-banner form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
}

.newsletter-banner input[type="email"] {
    background-color: #EFEFEF;
    border: none;
    border-radius: 10px;
    padding: 1rem;
    width: 100%;                    /* 🔥 Change: Make input fill the form width */
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;               /* Align placeholder text to the left */
    color: #333;
    box-sizing: border-box;         /* Ensures padding doesn't affect width */
}

.newsletter-banner input[type="email"]::placeholder {
    color: #888;
    font-weight: 600;
}

/* --- 🔥 REVERTED TO SOLID BUTTON STYLE --- */
.newsletter-btn {
    background-color: #000 !important;
    color: white;
    font-weight: 700;
    font-size: clamp(1.5rem, 0.5rem + 0.5vw, 2rem) !important;
    font-family: "Phudu", sans-serif;
    border: none !important;                   /* Remove border */
    border-radius: 10px;
    padding: 1rem;                  /* Match padding with input field */
    cursor: pointer;
    transition: transform 0.5s ease !important;
    width: 100%;                    /* Make button fill the form width */
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
}

.newsletter-btn:hover {
    transform: scale(1.05);
    color: black !important;
    background-color: rgb(245, 245, 245) !important;
}

/* Newsletter message styles */
.newsletter-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    animation: slideDown 0.3s ease;
}

.newsletter-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.newsletter-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1225px) {
  .newsletter-banner {
    /* 1. Stacks the content vertically */
    flex-direction: column;
    align-items: flex-start; /* Aligns items to the left */
    
    /* 2. Reduces padding for smaller screens */
    padding: 2.5rem 1.5rem;
    
    /* 3. Increases the gap for better vertical spacing */
    gap: 2rem;
  }

  .newsletter-banner h2 {
    text-align: center; /* Center the heading on mobile */
    width: 100%;
  }

  .newsletter-banner form {
    max-width: none; /* Allows the form to fill the container width */
    align-items: center;
  }
}


/* ======================================= */
/* ======    Pagination Styles      ====== */
/* ======================================= */

/* The main container for the pagination links */
.pagination-container {
    display: flex; /* Aligns links in a row */
    justify-content: center; /* Centers the links on the page */
    align-items: center;
    padding: 1rem 0;
    margin-top: 2rem; /* Space above the pagination bar */
    background-color: #f0f2f5; /* Light grey background for the bar */
    border-radius: 50px; /* Fully rounded ends */
    width: fit-content; /* Makes the container only as wide as its content */
    margin-left: auto;
    margin-right: auto;
}

/* Individual page links (numbers and "NEXT") */
.pagination-link {
    font-weight: 600;
    font-size: 1rem;
    color: #333; /* Dark text color for numbers */
    text-decoration: none;
    padding: 0.75rem 1rem; /* Vertical and horizontal space inside the link */
    margin: 0 0.25rem; /* Small space between numbers */
    border-radius: 50px; /* Makes each link's background a circle/oval */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* The style for the currently active page */
.pagination-link.active {
    background-color: #d1d5db; /* Grey background for the active number */
    color: #000; /* Black text for the active number */
}

/* The style when you hover over a link */
.pagination-link:not(.active):hover {
    background-color: #e5e7eb; /* Slightly darker grey on hover */
}


.popular-section{
  max-width: 1180px;
  width: 100% !important;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.single-line {
  height: 2px;
  background-color: gray;
  width: 100%; /* Ensure the line takes the full width of its container */
  margin-top: 2%;
  margin-bottom: 5%;
}



/* ======================================= */
/* ======   All Events Styles  ====== */
/* ======================================= */



.event-background{
    background: white;
    padding: 4rem 2rem; /* Add padding for spacing */
}

.event-wrapper {
    font-family: "Phudu", sans-serif;
    background-color: #f5f1e6;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 32px;
    margin: 2rem 1rem;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2rem;
    padding-top: 1.5rem;
    margin-top: 7rem;
}

.event-upper {
    text-align: center;
    margin-bottom: 20px;
}

.event-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #000;
}

.event-grid {
    display: grid;
    gap: 30px;
}

.event-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #efeeea;
    border-radius: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    gap: 0px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.card-content {
    display: flex;
    flex-direction: column;
    padding: 3%;
    max-width: 100%; /* Prevents the container from expanding beyond its grid column */
    overflow: hidden; /* Ensures nothing spills out */
}

.event-card-title {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 0px 0;
    color: #333;
}

.event-location, .event-time {
    font-size: 1rem;
    font-weight: 700;
    color: black;
    margin: 0 0 0px 0;
}

.event-description {
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #555;
    margin: 10px 0 20px 0;
    overflow-wrap: break-word; /* Allows long words or strings to break and wrap */
    word-wrap: break-word;     /* Legacy fallback for older browsers */
}


.signup-button {
    background-color: #c2deff !important;
    color: #000000 !important;
    border: none;
    border-radius: 20px;
    padding: 10px 40px;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
    font-weight: bold;
    font-family: "Phudu", sans-serif;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    display: none;
}

.signup-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.signup-button:hover::before {
    width: 200px;
    height: 200px;
}

.signup-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.signup-button:active {
    transform: scale(0.98);
}

.event-actions {
    display: flex;
    align-items: center; /* Vertically aligns buttons if they are different heights */
    flex-wrap: wrap;     /* Allows buttons to wrap on very small screens */
    gap: 15px;           /* Creates space between the buttons */
    margin-top: 10px;    /* Adds space above the button group */
}

/* Styling for the "Read more" / "See less" button */
.read-more-button {
    background-color: transparent;
    color: #555; /* A subtle text color */
    border: 2px solid #d1d1d1; /* A light grey border */
    border-radius: 20px; /* Match the signup button's roundness */
    padding: 8px 20px; /* A little smaller than the main button */
    font-weight: bold;
    font-family: "Phudu", sans-serif; /* Use the same font */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.read-more-button:hover {
    background-color: #e0e0e0; /* A light grey fill on hover */
    border-color: #e0e0e0;
    color: #000;
    transform: scale(1.05);
}

.image-placeholder {
    background-color: #afd0ff; /* Light blue background */
    border-radius: 40px 40px 40px 10px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 1rem;
    background-clip: padding-box;
    border: 1rem solid #afd0ff; 
}


.more-events-container {
    text-align: center;
    margin-top: 40px;
}

.more-events-button {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 35px;
    padding: 5px 10px 5px 20px;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-family: "Phudu", sans-serif;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.more-events-button:hover {
    transform: scale(1.00);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    
}


.more-events-icon {
  background-color: #e6defb;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  font-weight: bold;
  font-size: 1.5rem;
  transition: transform 0.2s ease-in-out;
}

.more-events-icon:hover{
  transform: scale(1.02);
}

.less-events-container {
    text-align: center;
    margin-top: 40px;
}

.less-events-button {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 35px;
    padding: 5px 10px 5px 20px;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap:20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    font-family: "Phudu", sans-serif;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.less-events-button:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Styling for the main countdown container */
.event-countdown {
    display: flex;
    justify-content: flex-start; /* Aligns timer to the left on desktop */
    gap: 15px; /* Space between segments */
    margin: 10px 0; /* Space above and below the timer */
    font-family: "Phudu", sans-serif;
}

/* Styling for each segment (e.g., the "Days" block) */
.countdown-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    /* Add a minimum width to prevent segments from becoming too narrow */
    min-width: 50px;
}

/* Styling for the large numbers (00) */
.countdown-number {
    /* This clamp() function is already making the font size responsive! */
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700;
    color: #333;
}

/* Styling for the small labels (Days, Hours, etc.) */
.countdown-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #666;
}

/* Styling for the message when an event has started */
.event-ended {
    font-weight: bold;
    color: #c44d56; /* A reddish color */
    background-color: #fdd;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

/* ## Sign-up Form Styling ## */

/* This will be the container for our new form */
.signup-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Adds space between the form fields */
    padding: 10px 0; /* Some vertical spacing */
}

.signup-form-wrapper, .event-details {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

.event-details.hidden {
    display: none !important;
    opacity: 0;
    transform: scaleY(0.8);
}

.event-details:not(.hidden) {
    opacity: 1;
    transform: scaleY(1);
    animation: slideInDetails 0.3s ease-out;
}

.signup-form-wrapper.hidden {
    display: none !important;
    opacity: 0;
    transform: scaleY(0.8);
}

.signup-form-wrapper:not(.hidden) {
    opacity: 1;
    transform: scaleY(1);
    animation: slideInForm 0.3s ease-out;
}

@keyframes slideInForm {
    from {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@keyframes slideInDetails {
    from {
        opacity: 0;
        transform: translateY(-10px) scaleY(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Styling for the input fields to match the 'after' image */
.form-input {
    width: 100%;
    padding: 15px;
    border: 2px solid transparent;
    border-radius: 8px;
    background-color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #000000 !important; /* Explicitly set text color to black */
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: #c2deff;
    background-color: #fff;
    transform: scale(1.01);
    box-shadow: 0 2px 10px rgba(194, 222, 255, 0.3);
}

.form-input::placeholder {
    color: #999;
    transition: color 0.2s ease-in-out;
}

.form-input:focus::placeholder {
    color: #ccc;
}


/* Styling for the new black submit button */
.form-submit-button {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none;
    font-size: clamp(1.25rem, 0.5vw, 4.5rem) !important;
    border-radius: 20px;
    padding: 15px 40px;
    font-weight: bold;
    cursor: pointer;
    align-self: flex-start;
    font-family: "Phudu", sans-serif;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.form-submit-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease;
    transform: translate(-50%, -50%);
}

.form-submit-button:hover::before {
    width: 120px;
    height: 120px;
}

.form-submit-button:hover {
    background-color: #7d7db8 !important;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.form-submit-button.loading {
    background-color: #666;
    cursor: not-allowed;
    position: relative;
}

.form-submit-button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Success message styling */
.success-message {
    background: linear-gradient(135deg, #afd0ff, #afd0ff);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    animation: successSlide 0.5s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
}

@keyframes successSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A simple utility class to hide elements */
.hidden {
    display: none !important;
}

/* Container to hold both form buttons */
.form-button-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between the two buttons */
}

/* Styling for the new close button */
.form-close-button {
    background-color: none;
    color: #000000;
    font-size: clamp(1.25rem, 0.5vw, 4.5rem);
    border: none;
    border-radius: 20px;
    margin-top: 2.5%;
    padding: 15px 30px;
    font-weight: bold;
    cursor: pointer;
    font-family: "Phudu", sans-serif;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

.form-close-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.form-close-button:hover::before {
    width: 100px;
    height: 100px;
}

.form-close-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.form-close-button:active {
    transform: scale(0.98);
}




/* On mobile, make buttons stack vertically for better usability */
@media (max-width: 800px) {
    .form-button-container {
       flex-direction: column;
       align-items: center; /* Center the stacked buttons */
       width: 100%;
    }

    .form-submit-button, .form-close-button {
        width: 80%; /* Make buttons take up more width */
        text-align: center;
    }
}

/* Minor adjustment for responsiveness */
@media (max-width: 800px) {
    .form-submit-button {
        /* Center the button on mobile, like the original button */
        align-self: center;
    }
}

/* ---------------------------------- */
/* ## Responsive Adjustments ## */
/* ---------------------------------- */
/* For screens smaller than 800px */
@media (max-width: 800px) {
    .event-card {
        /* Switch to a single-column layout */
        grid-template-columns: 1fr;
    }

    .image-placeholder {
        /* Hide the image completely */
        display: none;
    }

    .card-content {
        /* Center all content horizontally */
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 3%;
        
        max-width: 100%; /* Prevents the container from expanding beyond its grid column */
        overflow: hidden; /* Ensures nothing spills out */
    }

    .event-description{
      max-width: 95%;
        word-break: break-word; /* Add this */
        hyphens: auto; /* Add this for better hyphenation */
    }
    .event-countdown {
        /* Ensure the countdown segments are centered */
        justify-content: center;
    }

    .signup-button {
        /* Override the default left-alignment to center the button */
        align-self: center;
    }
}

/* For screens smaller than 576px (tablets and mobile phones) */
@media (max-width: 576px) {
    .event-countdown {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .event-description {
        font-size: 0.8rem;
        line-height: 1.5;
        max-width: 95%;
    }
}

/* For screens smaller than 420px (very narrow mobile phones) */
@media (max-width: 420px) {
    .event-countdown {
        gap: 8px;
    }

    .countdown-segment {
        padding: 4px 8px;
        min-width: 45px;
    }

    .countdown-label {
        font-size: 0.65rem;
    }
}

/* Mobile responsive enhancements */
@media (max-width: 800px) {
    .signup-button, .form-submit-button {
        align-self: center;
        width: auto;
        min-width: 60%;
        text-align: center;
    }
    
    .form-button-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .form-submit-button, .form-close-button {
        width: 80%;
        text-align: center;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .signup-form-wrapper, .event-details, 
    .signup-button, .form-submit-button, 
    .form-close-button, .event-card {
        transition: none;
        animation: none;
    }
}

/* Focus indicators for accessibility */
.signup-button:focus, 
.form-submit-button:focus, 
.form-close-button:focus {
    outline: 3px solid #c2deff;
    outline-offset: 2px;
}

.form-close-button:focus {
    outline: 3px solid #a8c8ff;  /* Slightly darker outline since button is same color */
    outline-offset: 2px;
}

.form-input:focus {
    outline: 3px solid #c2deff;
    outline-offset: 2px;
}


/* Event Toggle Buttons Container */
.event-toggle-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

/* Toggle Button Base Styles */
.toggle-button {
    padding: 10px 20px;
    border: 2px solid #007bff;
    background: transparent;
    color: #007bff;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 14px;
}

/* Active Toggle Button */
.toggle-button.active,
.toggle-button:hover {
    background: #007bff;
    color: white;
}

/* Toggle Button Focus State */
.toggle-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Past Event Card Styling */
.event-card.past-event {
    position: relative;
}

.event-card.past-event .image-placeholder {
    opacity: 0.7;
}

/* Past Event Date Display */
.event-date-display {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
    border-left: 4px solid #6c757d;
}

.event-date-display span:first-child {
    font-size: 18px;
    font-weight: bold;
    color: #6c757d;
}

.event-date-display span:last-child {
    color: #6c757d;
    font-size: 14px;
    margin-top: 5px;
    display: inline-block;
}

/* Responsive Design for Toggle Buttons */
@media (max-width: 768px) {
    .event-toggle-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .toggle-button {
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 480px) {
    .toggle-button {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .event-date-display {
        padding: 15px;
        margin: 10px 0;
    }
    
    .event-date-display span:first-child {
        font-size: 16px;
    }
    
    .event-date-display span:last-child {
        font-size: 12px;
    }
}

.countdown-wrapper {
    margin: 15px 0;
}

.countdown-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #666;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.activity-question{
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-top: 40px;
}