html, body {
    margin: 0;
    background-color: #ededed;
    color: #424242;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.43;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    line-height: 1.1;
    color: #333;
}

h1 { font-size: 45px; line-height: 48px; }
h2 { font-size: 36px; line-height: 42px; }
h3 { font-size: 28px; line-height: 36px; }
h4 { font-size: 24px; line-height: 25px; }
h5 { font-size: 20px; line-height: 24px; }
h6 { font-size: 18px; line-height: 24px; }

a {
    color: #3282e6;
    text-decoration: none;
}
a:hover, a:focus {
    color: #165db5;
    text-decoration: underline;
}

.text-center {
    text-align: center;
}

/* Header Styles */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #C00;
    color: white;
    padding: 10px 20px;
}

header img {
    height: 40px;
}

header .icons {
    display: flex;
    align-items: center;
    gap: 15px; /* Added spacing between icons */
}

header .icons img {
    height: 30px; /* Optimized size for better visibility */
    width: auto;
}

header a {
    color: white;
    text-decoration: none;
}

#header-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

nav {
    background-color: #C00;
    color: #000;
	padding: 4px 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: sticky;
	text-align: center;
    top: 0;
    z-index: 1000;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 5px;
}

nav a:hover {
    background-color: white;
    color: #C00;
}

/* Responsive Design */
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                text-align: center;
            }
            nav {
                position: initial;
           }
}

/* Footer Styles */

footer {
    background-color: #FFF;
    color: #000;
    text-align: center;
    max-width: 1240px;
    margin: 0 auto;
}

footer > div { 
	border-top: 20px solid #C00;
}

footer nav a {
    color: #c00;
    margin: 0 10px;
}
footer nav a:hover {
    text-decoration: underline;
}

footer p {
    text-align: center;
    margin: 10px 0;
    line-height: 1.6;
}

footer .social-icons img {
    width: 35px;
    height: 35px;
    margin: 0 10px;
    transition: transform 0.3s ease;
}
footer .social-icons img:hover {
    transform: scale(1.2);
}

footer .copyright {
    font-size: 12px;
    color: #aaa;
    margin-top: 10px;
}

/* Page Styles */

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            color: #000000;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
        }
     
        .container_images {
             display: flex;
             justify-content: center;
             align-items: center;
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
             background-color: #fff;
        }

        .gt-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #000;
        }

        .highlight-price, .highlight-group-size, .booking-info {
            text-align: center;
        }

        .highlight-price span {
            color: #ff4500;
            font-size: 1.2em;
        }

        .highlight-group-size {
            font-weight: bold;
            color: #FFA500;
        }

        .booking-info {
            margin-top: 20px;
            font-weight: bold;
            color: #FFA500;
        }

        .booking-info a {
            color: #ff4500;
            text-decoration: none;
        }

        .images {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        .images img {
            flex: 1 1 calc(30% - 10px);
            max-width: 30%;
            min-width: 100px;
            border-radius: 2px;
        }

        .vol_images {
            flex: 1 1 calc(30% - 10px);
            max-width: 32%;
            min-width: 75px;
            padding: 0px 3px;
            border-radius: 2px;
        }

        a {
            color: #c00;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        button {
            padding: 12px 24px;
            font-size: 18px;
            background-color: #8B0000;
            border: none;
            cursor: pointer;
            color: white;
            border-radius: 8px;
        }

        button:hover {
            background-color: #a00000;
        }
        
        .whats-on-container {
            display: flex;

        }
        .whats-on-left-section {
            width: 25%;
            background-color: #f4f4f4;
            padding: 5px;
            box-sizing: border-box;
        }
        .whats-on-right-section {
            width: 75%;
            background-color: #e8e8e8;
            padding: 5px;
            box-sizing: border-box;
        }
        
        p {
            text-align: justify;
            color: #000000;
        }

        .gt_p {
            text-align: justify;
            color: #ffffff;
        }

        .highlight-price {
            display: flex;
            justify-content: center;
            color: #ffffff;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .card {
            border: 3px solid #c00;
            border-radius: 8px;
            background-color: #fff;
            text-align: center;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: scale(1.05);
        }

        .card h3 {
            margin-bottom: 10px;
        }

        .overlay {
            position: absolute;
            inset: 0;
            background-color: #C00(200, 17, 21, 0.9);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card:hover .overlay {
            opacity: 1;
        }

.testimonial-section {
  max-width: 1200px;  
  margin: 0 auto; /* Centers the section horizontally */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 20px;
  background-color: #ffffff;
  background-image: url('/media/slides/test_bg.jpg'); /* Replace 'your-image.jpg' with the path to your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; /* Adjust text color for better contrast */
}

/* Main heading for the section */
.testimonial-section h2 {
  width: 100%;
  font-size: 2em;
  margin-bottom: 20px;
  color: #fff; /* Makes the text white */
}

/* Main heading for the section */
.testimonial-section h2 {
  width: 100%;
  font-size: 2em;
  margin-bottom: 20px;
  color: #000000;
}

/* Individual testimonial card */
.testimonial {
  flex: 1 1 calc(33.333% - 20px); /* Ensures three columns with responsive behavior */
  max-width: 300px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

/* Stars section */
.testimonial .stars {
  font-size: 1.2em;
  color: #f4b400; /* Gold color for stars */
  margin-bottom: 10px;
}

/* Quote text */
.testimonial p {
  font-size: 1em;
  color: #000000;
  margin: 10px 0;
  font-style: italic;
}

/* Person's name */
.testimonial .name {
  font-size: 1em;
  font-weight: bold;
  color: #000000;
  margin-top: 10px;
}

/* Vision Section Styling */
/* Vision Section Styling */
.vision-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  color: #000000;
  line-height: 1.6;
}

.vision-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  text-align: center;
  color: #000000;
}

.vision-section ul {
  list-style-type: disc;
  margin: 20px 0;
  padding-left: 20px;
}

.vision-section ul li {
  margin-bottom: 10px;
}

.vision-section strong {
  color: #000000;
}

.vision-section .cta-section {
  margin-top: 30px;
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vision-section .cta-section h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #000000;
}

.vision-section .cta-section p {
  margin: 0;
  font-size: 1em;
  color: #000000;
}

.vision-section .cta-link {
  color: #007BFF;
  text-decoration: none;
  font-weight: bold;
}

.vision-section .cta-link:hover {
  text-decoration: underline;
}

/* Image Row Styling */
.image-row {
  display: flex;
  flex-wrap: wrap; /* Allow images to wrap on smaller screens */
  gap: 10px; /* Add spacing between images */
  justify-content: center; /* Center images */
}

.image-row img {
  width: calc(20% - 10px); /* Each image takes 20% of the row minus the gap */
  max-width: 200px; /* Limit the maximum width of each image */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure images are cropped properly */
  border-radius: 4px; /* Optional: Add slight rounding to corners */
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .image-row img {
    width: calc(50% - 10px); /* Each image takes 50% of the row on smaller screens */
    max-width: 100%; /* Allow images to scale down */
  }
}

/* Styling for the image row container */
.image-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  gap: 10px;
}

/* Styling for the images */
.image-row img {
  width: 25%;
  max-width: 232px;
  height: auto; 
  border-radius: 5px; /* Optional: Add rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for images */
.image-row img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}


/* Community Service Section Styling */
/* Community Service Section Styling */
.seal-community-service-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  text-align: center; /* Center-align the heading */
}

.seal-community-service-section h2 {
  font-size: 2rem;
  color: #000000;
  margin-bottom: 20px;
}

.seal-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center; /* Align content to the center */
  text-align: left; /* Align text content to the left */
}

.seal-image-placeholder {
  flex: 1 1 40%; /* Adjusts to 40% of the container */
  max-width: 240px; /* Reduced image size by 20% */
  display: flex;
  align-items: center; /* Vertically center the image */
}

.seal-image-placeholder img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.seal-text-content {
  flex: 1 1 60%; /* Adjusts to 60% of the container */
}

.seal-text-content p {
  font-size: 1rem;
  color: #000000;
  line-height: 1.6;
  margin-bottom: 15px;
}

.seal-text-content ul {
  margin: 15px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.seal-text-content ul li {
  font-size: 1rem;
  color: #000000;
  margin-bottom: 10px;
}

.seal-text-content strong {
  color: #000000;
  font-weight: bold;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .seal-content-wrapper {
    flex-direction: column; /* Stack content vertically */
    text-align: center; /* Center-align text on smaller screens */
  }

  .seal-image-placeholder {
    max-width: 200px; /* Further reduce image size for mobile */
    margin: 0 auto; /* Center the image */
  }

  .seal-text-content {
    flex: 1 1 100%; /* Full width for text content */
  }

  .seal-text-content ul {
    text-align: left; /* Keep bullet points left-aligned */
  }
}

/* Donate Bar Styling */
.donate-bar {
  max-width: 1200px;  
  margin: 0 auto; /* Centers the section horizontally */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color:#C00;
  padding: 0px 20px;
  text-align: center;
}

.donate-link {
  font-size: 1.5rem; /* Larger font size for visibility */
  color: #ffffff; /* White text for contrast */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Make the text bold */
  transition: color 0.3s ease; /* Smooth hover effect */
}

.donate-link:hover {
  color: #ffd700; /* Change text color to gold on hover */
}

.donate-bar h2 {
  width: 100%;
  font-size: 2em;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Museum Intro Section Styling */
.museum-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  color: #333; /* Dark text for readability */
  line-height: 1.6;
  text-align: center; /* Center-align all text */
  background-color: #ffffff; /* Light background for contrast */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.museum-intro h1 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #000; /* Bold black for the heading */
}

.museum-intro p {
  margin-bottom: 15px;
  font-size: 1rem;
}

.museum-intro .museum-details {
  display: flex; /* Use flexbox for side-by-side layout */
  justify-content: center; /* Center the columns horizontally */
  gap: 20px; /* Add space between the columns */
  margin: 20px auto; /* Center the details box */
  padding: 15px;
  background-color: #ffffff; /* White background for details */
  border: 1px solid #ddd; /* Light border for separation */
  border-radius: 8px;
}

.museum-intro .museum-details .column {
  flex: 1; /* Each column takes up equal space */
  text-align: center; /* Center-align text inside each column */
}

.museum-intro .museum-details p {
  margin: 10px 0;
  font-size: 1rem;
  color: #000000; /* Slightly lighter text for details */
}

.museum-intro .museum-invite {
  font-size: 1.2rem;
  font-weight: bold;
  color: #C00; /* Red for emphasis */
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .museum-intro {
    padding: 15px;
  }

  .museum-intro h1 {
    font-size: 1.8rem;
  }

  .museum-intro p {
    font-size: 0.95rem;
  }

  .museum-intro .museum-details {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    gap: 10px; /* Reduce gap between stacked columns */
  }

  .museum-intro .museum-details .column {
    text-align: center; /* Ensure text remains centered */
  }

  .museum-intro .museum-invite {
    font-size: 1rem;
  }
}

/* Banners Section */
#banners {
  background-color: #f4f4f4;
  padding: 20px 0;
}

.banner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gt_banner {
  display: block; /* Ensure the image behaves like a block element */
  max-width: 100%; /* Make the image responsive */
  height: auto; /* Maintain the aspect ratio */
  margin: 0 auto; /* Center the image horizontally */
  border-radius: 8px; /* Optional: Add rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}

.banner {
  flex: 1;
  min-width: 300px;
  max-width: 32%;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.banner h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.banner p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin: 10px 0;
}

/* Image Placeholder */
.banner-image {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ddd;
}

/* Banner Buttons */
.banner-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold; /* Make the text bold */
  color: #ffffff; /* White text */
  background-color: #C00; /* Red background */
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.banner-button:hover {
  background-color: rgb(163, 0, 0); /* Darker red on hover */
  transform: scale(1.05); /* Slightly enlarge the button on hover */
}

/* Responsive Design for Banners */
@media (max-width: 768px) {
  .banner-container {
    flex-direction: column;
    gap: 15px;
  }

  .banner {
    max-width: 100%;
  }
}

/* General Styles for Pumpkin Patch Express Page */

/* Hero Section */
.ppx-hero {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppx-hero-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.ppx-hero h1 {
    font-size: 3rem;
    margin: 0;
}

/* Container */
.ppx-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

/* Event Details Section */
.ppx-event-details {
    background-color: #f9f9f9;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    border-radius: 8px;
    margin-top: 15px;
}

.ppx-event-details img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ppx-event-details p {
    margin: 5px 0;
    color: #424242;
}

.ppx-event-details strong {
    color: #C00;
    font-weight: bold;
}

/* Book Now Button Wrapper */
.ppx-book-now {
    text-align: center;
    margin-top: 20px;
}

/* Book Now Button */
.ppx-button {
    display: inline-block;
    padding: 12px 24px;
    background-color: #C00;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.ppx-button:hover {
    background-color: #a00000;
    transform: scale(1.05);
}

/* Content Wrapper */
.ppx-content-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .ppx-content-wrapper {
        flex-direction: column;
        text-align: center;
    }
}

/* Image Placeholder */
.ppx-image-placeholder {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ppx-image-placeholder img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .ppx-image-placeholder {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/* Text Content */
.ppx-text-content {
    flex: 1;
    max-width: 60%;
}

.ppx-text-content p {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .ppx-text-content {
        max-width: 100%;
        flex: 1 1 100%;
    }
}