:root {
 --primary-color: #3f51b5; /* Indigo */
 --primary-light-color: #7986cb;
 --primary-dark-color: #303f9f;
 --secondary-color: #ff9800; /* Orange */
 --secondary-dark-color: #f57c00;
 --text-color: #333;
 --light-text-color: #666;
 --inverted-text-color: #fff;
 --background-color: #f7f9fc;
 --light-background-color: #e0e0e0;
 --border-color: #ddd;
 --card-background: #ffffff;
 --shadow-light: rgba(0, 0, 0, 0.08);
 --shadow-medium: rgba(0, 0, 0, 0.15);
 --hover-effect-duration: 0.3s;

 --font-serif: 'Merriweather', serif;
 --font-sans: 'Open Sans', sans-serif;
}

/* Reset and Base Styles */
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
}

body {
 font-family: var(--font-sans);
 line-height: 1.6;
 color: var(--text-color);
 background-color: var(--background-color);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

a {
 color: var(--primary-color);
 text-decoration: none;
 transition: color var(--hover-effect-duration), border-color var(--hover-effect-duration);
}

a:hover {
 color: var(--primary-dark-color);
}

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

ul {
 list-style: none;
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-serif);
 margin-bottom: 1rem;
 color: var(--text-color);
 line-height: 1.2;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }

p {
 margin-bottom: 1rem;
}

.section {
 padding: 4rem 0;
 overflow: hidden; /* For fade-in animations */
}

.section-title {
 text-align: center;
 margin-bottom: 3rem;
 font-size: 2.5rem;
 position: relative;
 padding-bottom: 0.5rem;
}

.section-title::after {
 content: '';
 position: absolute;
 left: 50%;
 bottom: 0;
 transform: translateX(-50%);
 width: 60px;
 height: 3px;
 background-color: var(--primary-color);
}

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

/* Buttons */
.btn {
 display: inline-block;
 padding: 0.75rem 1.5rem;
 border-radius: 5px;
 font-weight: 600;
 text-align: center;
 transition: all var(--hover-effect-duration) ease;
 border: 2px solid transparent;
 cursor: pointer;
 font-size: 1rem;
}

.primary-btn {
 background-color: var(--primary-color);
 color: var(--inverted-text-color);
 border-color: var(--primary-color);
}

.primary-btn:hover {
 background-color: var(--primary-dark-color);
 border-color: var(--primary-dark-color);
 color: var(--inverted-text-color);
 transform: translateY(-2px);
 box-shadow: 0 4px 8px var(--shadow-light);
}

.secondary-btn {
 background-color: transparent;
 color: var(--primary-color);
 border-color: var(--primary-color);
}

.secondary-btn:hover {
 background-color: var(--primary-color);
 color: var(--inverted-text-color);
 transform: translateY(-2px);
 box-shadow: 0 4px 8px var(--shadow-light);
}

.btn.ml-3 {
 margin-left: 1rem;
}

/* Header & Navigation */
header {
 background-color: var(--card-background);
 padding: 1rem 0;
 box-shadow: 0 2px 10px var(--shadow-light);
 position: sticky;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 transition: background-color 0.3s ease;
}

header.scrolled {
 background-color: rgba(255, 255, 255, 0.95);
 box-shadow: 0 2px 15px var(--shadow-medium);
}

nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.logo {
 font-family: var(--font-serif);
 font-size: 1.8rem;
 font-weight: 700;
 color: var(--primary-dark-color);
 text-decoration: none;
 transition: color var(--hover-effect-duration);
}

.logo:hover {
 color: var(--primary-color);
}

.nav-links {
 display: flex;
 gap: 1.5rem;
}

.nav-links li a {
 color: var(--text-color);
 font-weight: 400;
 padding: 0.5rem 0;
 position: relative;
 font-size: 1.05rem;
}

.nav-links li a::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 0;
 height: 2px;
 background-color: var(--primary-color);
 transition: width var(--hover-effect-duration) ease-out;
}

.nav-links li a:hover::after,
.nav-links li a.active::after {
 width: 100%;
}

.nav-toggle {
 display: none;
 flex-direction: column;
 justify-content: space-between;
 width: 30px;
 height: 20px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0;
 z-index: 1100;
}

.nav-toggle span {
 display: block;
 width: 100%;
 height: 3px;
 background-color: var(--text-color);
 transition: all var(--hover-effect-duration) ease-in-out;
 border-radius: 2px;
}

.nav-toggle.active span:nth-child(1) {
 transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
 opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
 transform: rotate(-45deg) translate(5px, -5px);
}

/* Hero Section */
.hero-section {
 position: relative;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #000;
 overflow: hidden;
 padding:0;
 text-align: center;
}

.hero-image-wrapper {
 position: absolute;
 top: 5%; /* White border top */
 left: 5%; /* White border left */
 right: 5%; /* White border right */
 bottom: 5%; /* White border bottom */
 width: 90%;
 height: 90%;
 background-color: var(--card-background); /* White border color */
 pointer-events: none; /* Make wrapper click-through */
}

.hero-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(0.65); /* Darken image for better text contrast */
 transition: filter 0.5s ease-in-out;
}

.hero-plaque {
 position: absolute;
 bottom: 10%;
 left: 50%;
 transform: translateX(-50%) translateY(20px);
 background-color: rgba(255, 255, 255, 0.95);
 padding: 1.5rem 2.5rem;
 border-radius: 8px;
 box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 max-width: 700px;
 width: calc(100% - 3rem);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s ease-out;
 border-left: 5px solid var(--primary-color);
 text-align: left;
}

.hero-plaque h1 {
 font-size: 2.5rem;
 color: var(--primary-dark-color);
 margin-bottom: 0.8rem;
 font-family: var(--font-serif);
}

.hero-plaque p {
 font-size: 1.1rem;
 color: var(--light-text-color);
 margin-bottom: 1.5rem;
 line-height: 1.5;
}

.hero-section.active .hero-plaque {
 opacity: 1;
 visibility: visible;
 transform: translateX(-50%) translateY(0);
}

/* Exhibition Current Section */

.exhibition-current .section-title {
 margin-bottom: 3rem;
}

.exhibition-item {
 display: flex;
 flex-wrap: wrap;
 gap: 3rem;
 align-items: center;
 background-color: var(--card-background);
 padding: 2rem;
 border-radius: 8px;
 box-shadow: 0 5px 20px var(--shadow-light);
 border: 1px solid var(--border-color);
}

.exhibition-item img {
 flex: 1 1 40%;
 min-width: 300px;
 border-radius: 4px;
 border: 1px solid var(--border-color);
 object-fit: cover;
}

.exhibition-description {
 flex: 1 1 50%;
 min-width: 300px;
}

.exhibition-description h3 {
 font-family: var(--font-serif);
 color: var(--primary-dark-color);
 font-size: 2rem;
 margin-bottom: 1rem;
}

.exhibition-description p {
 color: var(--light-text-color);
 margin-bottom: 1rem;
}

.read-more-link {
 display: inline-block;
 margin-top: 1rem;
 font-weight: 500;
 position: relative;
 padding-bottom: 5px;
}

.read-more-link::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 0;
 height: 2px;
 background-color: var(--secondary-color);
 transition: width var(--hover-effect-duration) ease-out;
}

.read-more-link:hover::after {
 width: 100%;
}

/* Collection Grid (Features) */
.collection-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2.5rem;
}

.collection-item {
 background-color: var(--card-background);
 border: 1px solid var(--border-color);
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 4px 15px var(--shadow-light);
 transition: transform var(--hover-effect-duration) ease, box-shadow var(--hover-effect-duration) ease;
}

.collection-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 25px var(--shadow-medium);
}

.collection-item img {
 height: 220px;
 object-fit: cover;
 width: 100%;
 border-bottom: 1px solid var(--border-color);
}

.collection-item .card-body {
 padding: 1.5rem;
}

.collection-item h3 {
 font-family: var(--font-serif);
 color: var(--primary-dark-color);
 font-size: 1.5rem;
 margin-bottom: 0.8rem;
}

.collection-item p {
 color: var(--light-text-color);
 font-size: 0.95rem;
 margin-bottom: 1rem;
}

/* Artist Statement (Mission) */
.artist-statement {
 background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('https://picsum.photos/seed/bg-texture/1920/1080');
 background-size: cover;
 background-attachment: fixed;
 text-align: center;
 padding: 6rem 0;
}

.artist-statement blockquote {
 font-family: var(--font-serif);
 font-size: 1.8rem;
 line-height: 1.5;
 color: var(--primary-dark-color);
 max-width: 800px;
 margin: 0 auto 2rem;
 position: relative;
 padding: 1rem 0;
}

.artist-statement blockquote::before {
 content: "“";
 font-size: 6rem;
 color: var(--border-color);
 position: absolute;
 top: -2rem;
 left: 50%;
 transform: translateX(-50%);
 font-family: var(--font-serif);
 z-index: 1;
 line-height: 1;
}

.artist-statement blockquote p {
 margin-bottom: 1rem;
 position: relative;
 z-index: 2;
}

.artist-statement footer {
 font-family: var(--font-sans);
 font-size: 1.1rem;
 font-weight: 400;
 color: var(--light-text-color);
 margin-top: 1.5rem;
 display: block;
}

/* Testimonials Section */
.testimonials {
 background-color: var(--light-background-color);
 padding: 4rem 0;
}

.testimonial-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 2rem;
}

.testimonial-card {
 background-color: var(--card-background);
 padding: 2rem;
 border-radius: 8px;
 box-shadow: 0 3px 10px var(--shadow-light);
 border-left: 4px solid var(--primary-color);
 transition: transform var(--hover-effect-duration) ease, box-shadow var(--hover-effect-duration) ease;
}

.testimonial-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 15px var(--shadow-medium);
}

.testimonial-card .quote {
 font-style: italic;
 color: var(--light-text-color);
 margin-bottom: 1rem;
 line-height: 1.7;
}

.testimonial-card .author {
 font-weight: 600;
 color: var(--text-color);
 text-align: right;
 margin-top: 1rem;
}

/* CTA Section */
.cta {
 background: linear-gradient(to right, var(--primary-dark-color) 0%, var(--primary-color) 100%);
 color: var(--inverted-text-color);
 padding: 5rem 0;
 text-align: center;
}

.cta h2 {
 color: var(--inverted-text-color);
 font-size: 2.5rem;
 margin-bottom: 1.5rem;
}

.cta p {
 font-size: 1.1rem;
 opacity: 0.9;
 max-width: 800px;
 margin: 0 auto 2.5rem;
}

.cta .btn.secondary-btn {
 background-color: var(--inverted-text-color);
 color: var(--primary-color);
 border-color: var(--inverted-text-color);
}

.cta .btn.secondary-btn:hover {
 background-color: var(--light-background-color);
 color: var(--primary-dark-color);
 border-color: var(--light-background-color);
}

/* Press & Recognition */
.press-recognition {
 text-align: center;
 padding: 3rem 0;
 border-top: 1px solid var(--border-color);
}

.press-recognition .section-title {
 font-size: 2rem;
 margin-bottom: 2rem;
}

.press-logos {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 2rem 3rem;
 margin-bottom: 2rem;
}

.press-logos img {
 height: 40px; /* Adjust as needed */
 width: auto;
 filter: grayscale(100%);
 opacity: 0.6;
 transition: filter var(--hover-effect-duration), opacity var(--hover-effect-duration);
}

.press-logos img:hover {
 filter: grayscale(0%);
 opacity: 1;
}

.press-text {
 max-width: 800px;
 margin: 0 auto;
 color: var(--light-text-color);
 font-size: 0.95rem;
}

/* Footer */
.footer {
 background-color: var(--primary-dark-color);
 color: rgba(255, 255, 255, 0.9);
 padding: 3rem 0 1.5rem;
 font-size: 0.95rem;
}

.footer .footer-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 2rem;
 margin-bottom: 2rem;
}

.footer-col h3 {
 color: var(--secondary-color);
 font-size: 1.1rem;
 margin-bottom: 1rem;
 font-weight: 600;
}

.footer-col ul {
 padding: 0;
}

.footer-col ul li {
 margin-bottom: 0.6rem;
}

.footer-col ul li a {
 color: rgba(255, 255, 255, 0.7);
 text-decoration: none;
 transition: color var(--hover-effect-duration);
}

.footer-col ul li a:hover {
 color: var(--secondary-color);
}

.footer-logo {
 font-family: var(--font-serif);
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--inverted-text-color);
 margin-bottom: 1rem;
 display: block;
}

.footer-logo:hover {
 color: var(--secondary-color);
}

.footer-col p {
 color: rgba(255, 255, 255, 0.7);
 margin-bottom: 0.7rem;
}

.footer-col.contact-info a {
 color: rgba(255, 255, 255, 0.7);
}

.footer-col.contact-info a:hover {
 color: var(--secondary-color);
}

.footer-bottom {
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: 1.5rem;
 text-align: center;
 color: rgba(255, 255, 255, 0.6);
 font-size: 0.85rem;
}

/* Generic Card Style */
.card {
 background-color: var(--card-background);
 border-radius: 8px;
 box-shadow: 0 2px 10px var(--shadow-light);
 border: 1px solid var(--border-color);
 overflow: hidden;
}

.card-header {
 padding: 1.5rem;
 border-bottom: 1px solid var(--border-color);
}

.card-body {
 padding: 1.5rem;
}

.card-footer {
 padding: 1.5rem;
 border-top: 1px solid var(--border-color);
 background-color: var(--background-color);
}

/* Forms */
.form-group {
 margin-bottom: 1.5rem;
}

.form-group label {
 display: block;
 margin-bottom: 0.5rem;
 font-weight: 600;
 color: var(--text-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
 width: 100%;
 padding: 0.8rem 1rem;
 border: 1px solid var(--border-color);
 border-radius: 5px;
 font-family: var(--font-sans);
 font-size: 1rem;
 color: var(--text-color);
 background-color: var(--card-background);
 transition: border-color var(--hover-effect-duration), box-shadow var(--hover-effect-duration);
}

.form-group input:focus,
.form-group textarea:focus {
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
 outline: none;
}

.form-group textarea {
 resize: vertical;
 min-height: 120px;
}

.submit-btn {
 width: auto;
 display: block; /* Ensures it takes full width on small screens */
 margin: 0 auto; /* Centers it on larger screens */
}

.error-message {
 color: #d32f2f; /* Red */
 font-size: 0.85rem;
 margin-top: 0.5rem;
 display: block;
}

/* Team Section for about.html */
.team-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2rem;
}

.team-member {
 text-align: center;
 background-color: var(--card-background);
 padding: 1.5rem;
 border-radius: 8px;
 box-shadow: 0 3px 10px var(--shadow-light);
 transition: transform var(--hover-effect-duration);
 border: 1px solid var(--border-color);
}

.team-member:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 15px var(--shadow-medium);
}

.team-member img {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
 margin: 0 auto 1rem;
 border: 3px solid var(--primary-color);
 box-shadow: 0 2px 8px var(--shadow-light);
}

.team-member h3 {
 margin-bottom: 0.5rem;
 color: var(--primary-dark-color);
 font-size: 1.4rem;
}

.team-member p.role {
 color: var(--secondary-color);
 font-weight: 500;
 margin-bottom: 1rem;
 font-size: 0.95rem;
}

.team-member p.bio {
 color: var(--light-text-color);
 font-size: 0.9rem;
 line-height: 1.6;
}

/* Services Page - Process Section */
.process-steps {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 2rem;
 margin-top: 3rem;
}

.process-step {
 flex: 1 1 300px;
 background-color: var(--card-background);
 padding: 2rem;
 border-radius: 8px;
 box-shadow: 0 4px 15px var(--shadow-light);
 text-align: center;
 position: relative;
 border: 1px solid var(--border-color);
}

.process-step .step-number {
 display: inline-block;
 width: 50px;
 height: 50px;
 line-height: 50px;
 background-color: var(--primary-color);
 color: var(--inverted-text-color);
 border-radius: 50%;
 font-size: 1.5rem;
 font-weight: 700;
 margin-bottom: 1rem;
 box-shadow: 0 2px 5px var(--shadow-medium);
}

.process-step h4 {
 color: var(--primary-dark-color);
 margin-bottom: 0.8rem;
 font-size: 1.3rem;
}

.process-step p {
 color: var(--light-text-color);
 font-size: 0.95rem;
}

/* Blog Page */
.blog-list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 2.5rem;
}

.blog-post-card {
 background-color: var(--card-background);
 border-radius: 8px;
 box-shadow: 0 4px 15px var(--shadow-light);
 transition: transform var(--hover-effect-duration) ease, box-shadow var(--hover-effect-duration) ease;
 overflow: hidden;
 border: 1px solid var(--border-color);
}

.blog-post-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 25px var(--shadow-medium);
}

.blog-post-card img {
 height: 220px;
 width: 100%;
 object-fit: cover;
 border-bottom: 1px solid var(--border-color);
}

.blog-post-card .card-body {
 padding: 1.5rem;
}

.blog-post-card .category {
 display: inline-block;
 background-color: var(--secondary-color);
 color: var(--inverted-text-color);
 font-size: 0.75rem;
 padding: 0.3rem 0.8rem;
 border-radius: 3px;
 margin-bottom: 0.8rem;
 font-weight: 600;
 text-transform: uppercase;
}

.blog-post-card h3 {
 font-size: 1.6rem;
 color: var(--primary-dark-color);
 margin-bottom: 0.8rem;
}

.blog-post-card p {
 color: var(--light-text-color);
 font-size: 0.95rem;
 margin-bottom: 1.5rem;
}

.blog-post-card .meta {
 font-size: 0.85rem;
 color: var(--light-text-color);
}

.blog-post-card .meta span {
 margin-right: 1rem;
}

/* Single Blog Post */
.blog-article {
 background-color: var(--card-background);
 padding: 3rem;
 border-radius: 8px;
 box-shadow: 0 5px 20px var(--shadow-light);
 border: 1px solid var(--border-color);
 max-width: 900px;
 margin: 2rem auto;
}

.blog-article img {
 margin-bottom: 2rem;
 border-radius: 6px;
 border: 1px solid var(--border-color);
}

.blog-article h1 {
 font-size: 2.8rem;
 color: var(--primary-dark-color);
 margin-bottom: 1.5rem;
}

.blog-article .article-meta {
 font-size: 0.9rem;
 color: var(--light-text-color);
 margin-bottom: 2rem;
 border-bottom: 1px solid var(--border-color);
 padding-bottom: 1.5rem;
}

.blog-article .article-meta span {
 margin-right: 1.5rem;
}

.blog-article .article-content p {
 margin-bottom: 1.5rem;
 line-height: 1.8;
 font-size: 1.05rem;
 color: var(--text-color);
}

.blog-article .article-content h2,
.blog-article .article-content h3 {
 margin-top: 2rem;
 margin-bottom: 1rem;
 color: var(--primary-dark-color);
}

.blog-article .author-info {
 display: flex;
 align-items: center;
 background-color: var(--light-background-color);
 padding: 1.5rem;
 border-radius: 8px;
 margin-top: 3rem;
 border: 1px solid var(--border-color);
}

.blog-article .author-info img {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 margin-right: 1.5rem;
 border: 2px solid var(--primary-color);
 flex-shrink: 0;
}

.blog-article .author-info .details h4 {
 margin-bottom: 0.3rem;
 font-size: 1.2rem;
 color: var(--primary-dark-color);
}

.blog-article .author-info .details p {
 margin-bottom: 0;
 font-size: 0.9rem;
 color: var(--light-text-color);
}

/* Gallery Page */
.gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 1rem;
}

.gallery-item {
 position: relative;
 overflow: hidden;
 cursor: pointer;
 border-radius: 5px;
 border: 1px solid var(--border-color);
 box-shadow: 0 2px 8px var(--shadow-light);
}

.gallery-item img {
 display: block;
 width: 100%;
 height: 250px;
 object-fit: cover;
 transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover img {
 transform: scale(1.05);
 filter: brightness(0.8);
}

.gallery-item .overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(63, 81, 181, 0.6);
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
 opacity: 1;
}

.gallery-item .overlay span {
 color: var(--inverted-text-color);
 font-size: 1.2rem;
 font-weight: 600;
}

/* Lightbox styles */
.lightbox {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 2000; /* Sit on top */
 padding-top: 60px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.lightbox-content {
 margin: auto;
 display: block;
 max-width: 90%;
 max-height: 80%;
 object-fit: contain;
 animation-name: zoom;
 animation-duration: 0.6s;
 border: 5px solid var(--inverted-text-color);
 border-radius: 5px;
}

@keyframes zoom {
 from {transform: scale(0.1)}
 to {transform: scale(1)}
}

.close-lightbox {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
 cursor: pointer;
}

.close-lightbox:hover,
.close-lightbox:focus {
 color: var(--secondary-color);
 text-decoration: none;
 cursor: pointer;
}

/* FAQ Page */
.faq-accordion {
 max-width: 900px;
 margin: 2rem auto;
 border: 1px solid var(--border-color);
 border-radius: 8px;
 overflow: hidden;
 background-color: var(--card-background);
 box-shadow: 0 4px 15px var(--shadow-light);
}

.accordion-item {
 border-bottom: 1px solid var(--border-color);
}

.accordion-item:last-child {
 border-bottom: none;
}

.accordion-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1.2rem 1.5rem;
 cursor: pointer;
 background-color: var(--card-background);
 transition: background-color var(--hover-effect-duration);
}

.accordion-header:hover {
 background-color: var(--light-background-color);
}

.accordion-header h3 {
 margin: 0;
 font-size: 1.15rem;
 color: var(--primary-dark-color);
}

.accordion-icon {
 font-size: 1.5rem;
 color: var(--primary-color);
 transition: transform var(--hover-effect-duration);
}

.accordion-header.active .accordion-icon {
 transform: rotate(45deg);
}

.accordion-content {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s ease-out, padding 0.4s ease-out;
 padding: 0 1.5rem;
 color: var(--light-text-color);
}

.accordion-content.active {
 max-height: 500px; /* Adjust as needed */
 padding: 0.5rem 1.5rem 1.5rem;
}

.accordion-content p {
 margin-bottom: 0;
 line-height: 1.7;
}

/* Contact Page */
.contact-section {
 display: flex;
 flex-wrap: wrap;
 gap: 2rem;
 margin-top: 3rem;
}

.contact-form-container {
 flex: 2 1 500px;
}

.contact-info-container {
 flex: 1 1 300px;
 background-color: var(--card-background);
 padding: 2rem;
 border-radius: 8px;
 box-shadow: 0 4px 15px var(--shadow-light);
 border: 1px solid var(--border-color);
}

.contact-info-container h3 {
 color: var(--primary-dark-color);
 font-size: 1.5rem;
 margin-bottom: 1.5rem;
}

.contact-info-container p {
 display: flex;
 align-items: center;
 margin-bottom: 1rem;
 color: var(--light-text-color);
}

.contact-info-container p strong {
 color: var(--text-color);
 margin-right: 0.5rem;
}

.contact-info-container p a {
 color: var(--light-text-color);
 transition: color var(--hover-effect-duration);
}

.contact-info-container p a:hover {
 color: var(--primary-color);
}

.contact-info-container .icon {
 margin-right: 0.8rem;
 color: var(--primary-color);
 font-size: 1.2rem;
}

.map-container {
 margin-top: 3rem;
 border: 1px solid var(--border-color);
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 4px 15px var(--shadow-light);
}

.map-container iframe {
 width: 100%;
 height: 450px;
 display: block; /* Remove extra space below iframe */
}

/* Privacy, Terms, Refund, Disclaimer, Cookie Policy generic page styles */
.legal-content {
 background-color: var(--card-background);
 padding: 2rem 3rem;
 border-radius: 8px;
 box-shadow: 0 5px 20px var(--shadow-light);
 border: 1px solid var(--border-color);
 max-width: 900px;
 margin: 2rem auto;
}

.legal-content h1 {
 font-size: 2.5rem;
 color: var(--primary-dark-color);
 text-align: center;
 margin-bottom: 2rem;
}

.legal-content h2 {
 font-size: 1.8rem;
 color: var(--primary-color);
 margin-top: 2.5rem;
 margin-bottom: 1rem;
 border-bottom: 1px solid var(--border-color);
 padding-bottom: 0.5rem;
}

.legal-content h3 {
 font-size: 1.4rem;
 color: var(--primary-dark-color);
 margin-top: 1.8rem;
 margin-bottom: 0.8rem;
}

.legal-content p {
 margin-bottom: 1rem;
 line-height: 1.7;
 color: var(--text-color);
}

.legal-content ul {
 list-style-type: disc;
 margin-left: 1.5rem;
 margin-bottom: 1rem;
 color: var(--text-color);
}

.legal-content ol {
 list-style-type: decimal;
 margin-left: 1.5rem;
 margin-bottom: 1rem;
 color: var(--text-color);
}

.legal-content ul li,
.legal-content ol li {
 margin-bottom: 0.5rem;
 line-height: 1.6;
}

.legal-content strong {
 color: var(--primary-dark-color);
}

/* Thanks Page */
.thanks-container {
 text-align: center;
 padding: 5rem 1.5rem;
 background-color: var(--card-background);
 border-radius: 8px;
 box-shadow: 0 5px 20px var(--shadow-light);
 border: 1px solid var(--border-color);
 max-width: 700px;
 margin: 3rem auto;
}

.thanks-container h1 {
 color: var(--primary-color);
 font-size: 3rem;
 margin-bottom: 1.5rem;
}

.thanks-container p {
 font-size: 1.2rem;
 color: var(--text-color);
 margin-bottom: 2rem;
}

.thanks-container .icon {
 font-size: 4rem;
 color: var(--secondary-color);
 margin-bottom: 1.5rem;
}

/* 404 Page */
.error-404 {
 text-align: center;
 padding: 5rem 1.5rem;
 background-color: var(--background-color);
}

.error-404 h1 {
 font-size: 6rem;
 color: var(--primary-dark-color);
 line-height: 1;
 margin-bottom: 1rem;
}

.error-404 h2 {
 font-size: 2.5rem;
 color: var(--text-color);
 margin-bottom: 1.5rem;
}

.error-404 p {
 font-size: 1.2rem;
 color: var(--light-text-color);
 margin-bottom: 2rem;
}

/* Utility Classes */
.bg-light {
 background-color: var(--light-background-color);
}

/* Animations */
.fade-in {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.appear {
 opacity: 1;
 transform: translateY(0);
}

/* Media Queries */

/* Tablet & Mobile (max-width: 768px) */
@media (max-width: 768px) {
 h1 { font-size: 2.2rem; }
 h2 { font-size: 1.8rem; }
 h3 { font-size: 1.4rem; }
 .section { padding: 3rem 0; }
 .section-title { font-size: 2rem; margin-bottom: 2rem; }

 /* Header */
 .nav-toggle {
 display: flex;
 }

 .nav-links {
 flex-direction: column;
 position: fixed;
 top: 0;
 right: -100%; /* Start off-screen */
 width: 100%;
 height: 100%;
 background-color: var(--primary-dark-color); /* Overlay background */
 padding-top: 6rem;
 transition: right 0.4s ease-in-out;
 box-shadow: -5px 0 15px var(--shadow-medium);
 align-items: center;
 justify-content: flex-start;
 z-index: 999;
 }

 .nav-links.active {
 right: 0;
 }

 .nav-links li {
 width: 100%;
 text-align: center;
 margin-bottom: 1.5rem;
 opacity: 0; /* Hide links initially for staggered animation */
 transform: translateY(20px);
 transition: opacity 0.3s ease-out, transform 0.3s ease-out;
 }

 .nav-links.active li {
 opacity: 1;
 transform: translateY(0);
 }
 /* Staggered animation for menu items */
 .nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
 .nav-links.active li:nth-child(2) { transition-delay: 0.15s; }
 .nav-links.active li:nth-child(3) { transition-delay: 0.2s; }
 .nav-links.active li:nth-child(4) { transition-delay: 0.25s; }
 .nav-links.active li:nth-child(5) { transition-delay: 0.3s; }
 .nav-links.active li:nth-child(6) { transition-delay: 0.35s; }
 .nav-links.active li:nth-child(7) { transition-delay: 0.4s; }
 .nav-links.active li:nth-child(8) { transition-delay: 0.45s; }

 .nav-links li a {
 color: var(--inverted-text-color);
 font-size: 1.5rem;
 padding: 1rem 0;
 display: block;
 }

 .nav-links li a::after {
 background-color: var(--secondary-color);
 }

 /* Hero Section */
 .hero-plaque {
 max-width: 90%;
 padding: 1rem 1.5rem;
 bottom: 5%;
 }
 .hero-plaque h1 {
 font-size: 2rem;
 }
 .hero-plaque p {
 font-size: 1rem;
 }
 .hero-section.active .hero-plaque {
 transform: translateX(-50%) translateY(0); /* Less vertical shift on mobile */
 }

 /* Exhibition Item */
 .exhibition-item {
 flex-direction: column;
 text-align: center;
 }
 .exhibition-item img {
 min-width: unset;
 width: 100%;
 }
 .exhibition-description {
 min-width: unset;
 width: 100%;
 }

 /* Artist Statement */
 .artist-statement blockquote {
 font-size: 1.4rem;
 }
 .artist-statement blockquote::before {
 font-size: 5rem;
 top: -1rem;
 }

 /* Testimonials */
 .testimonial-grid {
 grid-template-columns: 1fr;
 }

 /* CTA */
 .cta h2 {
 font-size: 2rem;
 }
 .cta .btn.ml-3 {
 margin-left: 0;
 margin-top: 1rem;
 }
 .cta .primary-btn, .cta .secondary-btn {
 display: block;
 width: 100%;
 max-width: 300px;
 margin-left: auto;
 margin-right: auto;
 }

 /* Press Logos */
 .press-logos {
 gap: 1.5rem;
 }
 .press-logos img {
 height: 35px;
 }

 /* Footer */
 .footer-grid {
 grid-template-columns: 1fr;
 text-align: center;
 }
 .footer-col ul {
 padding-left: 0;
 }

 /* Team */
 .team-grid {
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }

 /* Blog Article */
 .blog-article {
 padding: 2rem 1.5rem;
 margin: 1rem auto;
 }
 .blog-article h1 {
 font-size: 2.2rem;
 }
 .blog-article .author-info {
 flex-direction: column;
 text-align: center;
 }
 .blog-article .author-info img {
 margin-right: 0;
 margin-bottom: 1rem;
 }

 /* Legal Content */
 .legal-content {
 padding: 1.5rem;
 margin: 1rem auto;
 }
 .legal-content h1 {
 font-size: 2rem;
 }
 .legal-content h2 {
 font-size: 1.5rem;
 }

 /* Contact Page */
 .contact-section {
 flex-direction: column;
 }
 .map-container iframe {
 height: 300px;
 }

 /* Thanks Page */
 .thanks-container {
 padding: 3rem 1.5rem;
 margin: 2rem auto;
 }
 .thanks-container h1 {
 font-size: 2.5rem;
 }
 .thanks-container p {
 font-size: 1.1rem;
 }

 /* 404 Page */
 .error-404 h1 {
 font-size: 4rem;
 }
 .error-404 h2 {
 font-size: 2rem;
 }
 .error-404 p {
 font-size: 1rem;
 }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
 .container {
 padding: 0 1rem;
 }
 h1 { font-size: 1.8rem; }
 h2 { font-size: 1.5rem; }
 h3 { font-size: 1.2rem; }
 .section { padding: 2rem 0; }
 .section-title { font-size: 1.8rem; margin-bottom: 1.5rem; }

 .btn {
 padding: 0.6rem 1.2rem;
 font-size: 0.9rem;
 }

 .hero-plaque h1 {
 font-size: 1.6rem;
 }
 .hero-plaque p {
 font-size: 0.9rem;
 }

 .artist-statement blockquote {
 font-size: 1.2rem;
 }
 .artist-statement blockquote::before {
 font-size: 4rem;
 top: -0.5rem;
 }

 .blog-article h1 {
 font-size: 1.8rem;
 }
}