@charset "utf-8";
/* CSS Document */

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #1c1c1c;
  color: white;
}

/* Hero Banner */
.hero {
  background: url('images/banner.png') no-repeat center center/cover;
  background-color: #000000;
  height: 400px;
}

/* ------------------------------- Style the navbar --------------------------------*/
.navbar {
    display: flex;
    justify-content: flex-start;
    background-color: #333;
    padding: 8px 0; /* Reduce top and bottom padding */
    height: auto; /* Let it size naturally */
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    line-height: 1.2; /* Reduce spacing inside links */	
    font-size: 18px;
}

.navbar a:hover {
    background-color: #555;
    border-radius: 5px;
}


/* ---------------------------------- Starburst -------------------------------------*/
#starburst {
  position: fixed; /* Keep it in place */
  top: 50vh; /* Position below the menu bar */
  right: 20px; /* Move further to the right */
  left: auto; /* Ensure it's not stuck on the left */
  width: 80px; /* Keep consistent size */
  height: auto;
  z-index: 9999 !important; /* Ensure it's always on top */
  transition: transform 0.1s linear; /* Smooth rotation */
  animation: glowPulse 1.5s infinite alternate; /* Add pulse effect */
}


@keyframes rotateStar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0px 0px 8px gold); }
  50% { filter: drop-shadow(0px 0px 14px gold); } 
}

/* Shrink the starburst on smaller screens */
@media (max-width: 768px) {  
  #starburst {
    width: 65px;
    height: auto;
    will-change: transform; /* Optimize for smoother performance */
    z-index: 9999 !important; /* Ensure it stays on top even on mobile */	
  }

  #starburst-container {
    top: 165px; /* Adjust position slightly if needed */
    right: 15px;
  }  
}

/* ---------------------------------------------------------------------- */
/* Ensure grid is overridden on small screens */
@media (max-width: 768px) {
  .content-wrapper {
    display: flex !important;  /* Force flexbox instead of grid */
    flex-direction: column;    /* Stack items vertically */
    gap: 20px;                 /* Keep spacing consistent */
    padding: 10px;             /* Reduce padding for small screens */
    align-items: center;       /* Center items */
  }

  /* Ensure items inside stack correctly */
  .content-wrapper > * {
    width: 100%;  /* Make each column take full width */
    text-align: center; /* Center text */
  }
}

/* ------------------------- UPCOMING EVENTS ------------------------------- */
.upcoming-events {
    background-color: #333; /* Dark background */
    color: white; /* Ensure readable text */
    padding: 16px;
    border-radius: 8px; /* Optional rounded corners */
    text-align: left; /* Left-align content */
    max-width: 300px; /* Optional: Control width */
    margin: auto; /* Center the whole box */
}

.upcoming-events h2 {
    margin-top: 0;
    color: #f2f2f2; /* Ensure title is visible */
    text-align: center; /* Keep title centered */
}

.upcoming-events ul {
    list-style-type: disc; /* Restore bullets */
    padding-left: 20px; /* Indent bullets */
    margin: 10px 0;
}

.upcoming-events li {
    padding: 5px 0;
    font-size: 1.1em;
    text-align: left; /* Left-align text */
}


/* ----------------------------------- ABOUT ------------------------------ */

/* Left-align text in the About column */
.about-container {
    text-align: left; /* Align text to the left */
    padding: 20px; /* Adds spacing inside the container */
    margin-right: 20px; /* Adds spacing between the container and the edge */
}



/* Ensure the main content container has right margin */
@supports (display: grid) {
  .content-wrapper {
    display: grid;
    grid-template-columns: 30% 45% 20%;
    gap: 15px; /* Reduce gap slightly */
    padding: 20px;
    align-items: stretch; /* Ensures equal height */
    box-sizing: border-box; /* Prevents width overflow */
  }

  /* Ensure all columns match the tallest one */
  .content-wrapper > * {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    min-height: 100%;
    min-width: 0; /* Prevents content overflow */
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1); /* Light grey-transparent look */
    padding: 15px;
    border-radius: 8px; /* Smooth edges */
  }

  /* Fix right column spacing */
  .content-wrapper > *:last-child {
    margin-right: 0; /* Reset margin */
    justify-self: end;
  }

  /* Avoid exceeding 100% total width */
  .content-wrapper > *:first-child {
    max-width: 100%; /* Ensure it doesn't push others */
  }
}



.slideshow-container {
    max-width: 600px;   /* Control the slideshow width */
    position: relative; 
    margin: auto;       /* Center the slideshow */
}

.mySlides {
    display: none;  /* This ensures only one slide is visible at a time */
    width: 100%;    /* Adjust to fit the container */
}

.mySlides img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Slideshow Animation */
.fade {
  animation: fadeEffect 1.5s ease-in-out;
}

@keyframes fadeEffect {
  from {opacity: 0.4}
  to {opacity: 1}
}

/* ----------------------------------- FEATURED PRODUCTS ------------------------------ */

/* Featured Products Section */
.featured-product {
  max-width: 250px; /* Prevents large images */
  height: auto;
  border-radius: 10px;
  border: 2px solid #f1c40f;
  margin: 10px;
}

.featured-products img {
  width: 100%;
  max-width: 300px; /* Ensures they don't get too large */
  height: auto;
  border-radius: 10px;
  border: 2px solid #f1c40f;
  display: inline-block;
  margin: 10px;
}

/* Fixing Image Alignment */
.featured-products-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .featured-products-container {
    flex-direction: column;
  }
}

/* Dark-Themed Content Sections */
.content-section {
  background: #333333;
  color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
  transition: 0.3s ease-in-out;
  width: 100%;
  text-align: center;
}

.content-section h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #f1c40f;
}

/* Hover effect */
.content-section:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 10px rgba(255, 255, 255, 0.15);
}

/* Color Bars */
.color-bar {
  height: 10px;
  width: 100%;
}

.purple-bar {
  background-color: #800080;
}

.gold-bar {
  background-color: #f1c40f;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  .category-grid {
    justify-content: center;
  }
  .category-item {
    width: 100px;
  }
}

@media (max-width: 480px) {
  .category-grid {
    flex-direction: column;
    align-items: center;
  }
}

.view-products-container {
    text-align: center;
    margin-top: 20px;
}

.view-products-button {
    display: inline-block;
    padding: 12px 20px;
    font-size: 18px;
    color: black;
    background: radial-gradient(circle, #f1c40f 40%, #800080 100%);
    border: none;
    text-decoration: none;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
    text-align: center;
}

.view-products-button:hover {
    background: radial-gradient(circle, #800080 40%, #f1c40f 100%);
    color: white;
}