:root {
  --primary-color: #000;
  --secondary-color: #333;
  --accent-color: #fff;
  --text-color: #333;
  --text-light: #777;
  --bg-color: #fff;
  --bg-dark: #0f0f0f;
  --font-primary: "Poppins", sans-serif;
  --transition: all 0.3s ease;
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --border-radius: 4px;
  --container-width: 1200px;
  --header-height: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-primary);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  /* Removed scroll-behavior: smooth; */
}

body {
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

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

section {
  padding: 80px 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.page-container {
  display: none; /* Hide pages by default */
  margin-top: var(
    --header-height
  ); /* Ensure content starts below fixed header */
}

.page-container.active {
  display: block; /* Show the active page */
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: var(--primary-color);
  color: var(--accent-color);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--border-radius);
  font-weight: 600;
  text-align: center;
  font-family: inherit;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--accent-color);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

p {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

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

.form-group input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

/* Form General Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 0.9rem; /* Slightly smaller labels */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px; /* Minimum height for textarea */
}

/* Readonly input styling */
.form-group input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--bg-dark);
  color: var(--accent-color);
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Added subtle shadow */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1rem; /* Added gap */
}

.logo-container {
  display: flex;
  flex-direction: column;
  flex: 1; /* Added flex: 1 */
  min-width: 150px; /* Ensure minimum width */
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-color);
}

.header-subtitle {
  font-size: 0.8rem;
  color: var(--accent-color);
  opacity: 0.8;
  margin-top: -5px;
  font-weight: 300;
}

.main-nav {
  /* flex-grow: 1; Removed this line */
  display: flex;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.nav-link {
  position: relative;
  padding: 5px 0;
  font-weight: 500;
  transition: var(--transition);
  color: var(--accent-color);
}

.nav-link:hover,
.nav-link.active {
  color: #ddd;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: var(--transition);
}

.nav-link.active::after,
.nav-link:hover::after {
  width: 100%;
}

.header-cta {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  min-width: 150px;
}

.language-switcher {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.language-btn {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 5px;
  transition: var(--transition);
}

.language-btn:hover {
  opacity: 0.8;
}

.language-btn.active {
  text-decoration: underline;
  font-weight: 700;
}

.language-divider {
  margin: 0 5px;
  color: var(--accent-color);
  opacity: 0.7;
}

.header-cta .btn-outline {
  padding: 8px 15px;
  min-width: 215px; /* Increased min-width for Dutch text */
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1000; /* Ensure it's above overlay */
}

.hamburger-line {
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 5px;
  background-color: var(--accent-color);
  transition: all 0.3s ease-in-out;
  border-radius: 1px; /* Slightly rounded lines */
}

.hamburger-line:last-child {
  margin-bottom: 0;
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--bg-dark);
  z-index: 99;
  overflow: hidden;
  transition: height 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.menu-open .mobile-menu-overlay {
  height: 100%;
  overflow-y: auto;
}

.mobile-menu-container {
  text-align: center;
  padding: 2rem;
  width: 100%;
  max-width: 500px;
  margin-top: var(--header-height);
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav ul li a {
  color: var(--accent-color);
  font-size: 1.5rem;
  font-weight: 600;
  transition: opacity 0.3s ease;
  display: block;
  padding: 10px 0;
}

.mobile-nav ul li a:hover {
  opacity: 0.7;
}

.mobile-language-switcher {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-cta {
  padding: 12px 30px;
  font-size: 1.1rem;
  display: inline-block;
  margin-top: 10px;
}

@media screen and (min-width: 993px) {
  /* Changed from 769px */
  .mobile-menu-overlay {
    display: none;
  }
}

.hero {
  height: calc(100vh - var(--header-height)); /* Adjusted height */
  position: relative;
  display: flex; /* Keep flex for potential future use, though overlay is absolute */
  overflow: hidden;
  margin-top: var(--header-height); /* Add margin-top */
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Removed duplicate part */

/* Removed duplicate part */

.hero-overlay {
  position: absolute;
  width: auto; /* Changed from fixed width */
  min-width: 420px; /* Set a minimum width */
  max-width: 500px; /* Allow it to grow slightly */
  background-color: rgba(255, 255, 255, 0.95);
  padding: 30px 35px;
  right: 15%; /* Changed from left */
  top: 18%;
  height: auto;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.hero-overlay h1 {
  font-size: 3.5rem; /* Slightly smaller */
  margin-bottom: 15px; /* Reduced margin */
  color: var(--primary-color);
}

.hero-overlay .hero-title-1 {
  font-size: 1.2rem; /* New title size */
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 5px; /* Space between titles */
  line-height: 1.4;
}

.hero-overlay .hero-title-2 {
  font-size: 1rem; /* New subtitle size */
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 20px; /* Space before divider */
  line-height: 1.4;
}

.hero-overlay .hero-title-1 {
  font-size: 1.2rem; /* New title size */
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 5px; /* Space between titles */
  line-height: 1.4;
}

.hero-overlay .hero-title-2 {
  font-size: 1rem; /* New subtitle size */
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 20px; /* Space before divider */
  line-height: 1.4;
}

.hero-overlay p {
  color: var(--text-color);
  font-size: 0.95rem; /* Adjusted size */
  margin-bottom: 15px; /* Adjusted margin */
  line-height: 1.5;
}

.hero-intro-text {
  font-size: 0.95rem;
  margin-bottom: 15px;
}

.hero-benefits-list {
  list-style: none;
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.hero-benefits-list li {
  position: relative;
  margin-bottom: 8px;
}

.hero-benefits-list li::before {
  /* content: "✓"; */ /* Removed to prevent double checkmarks with dynamic lists */
  position: absolute;
  left: -20px;
  color: var(--primary-color); /* Changed from green */
  font-weight: bold;
}

.hero-buttons-container {
  margin-top: 15px; /* Space above buttons */
  display: flex; /* Use flexbox */
  flex-wrap: nowrap; /* Keep buttons on one line */
  gap: 10px; /* Add gap between buttons */
  justify-content: center; /* Center the buttons horizontally */
}

.hero-quote-standalone {
  position: absolute;
  top: 18%;
  left: 15%;
  width: 30%;
  max-width: 400px;
  padding: 35px 25px 25px 40px;
  background-color: rgba(
    255,
    255,
    255,
    0.95
  ); /* Changed background to match CTA card */
  font-style: italic;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.6;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  z-index: 5;
}

/* Hide based on language - REMOVED specific rules for p[lang] */

.hero-quote-standalone p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

.hero-quote-standalone::before {
  content: "“"; /* Changed to curly opening quote */
  font-family: Georgia, serif;
  font-size: 8rem;
  font-weight: bold;
  position: absolute;
  left: -5px; /* Moved further left */
  top: -25px; /* Moved higher */
  color: var(--primary-color); /* Changed to fully black */
  line-height: 1;
  z-index: 1;
  /* Removed opacity: 0.1; */
}

@media screen and (max-width: 992px) {
  .hero-quote-standalone {
    display: none;
  }
}

.hero-intro-text {
  font-size: 0.95rem;
  margin-bottom: 15px;
}

.hero-benefits-list {
  list-style: none;
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.hero-benefits-list li {
  position: relative;
  margin-bottom: 8px;
}

.hero-benefits-list li::before {
  /* content: "✓"; */ /* Removed to prevent double checkmarks with dynamic lists */
  position: absolute;
  left: -20px;
  color: var(--primary-color); /* Changed from green */
  font-weight: bold;
}

.hero-buttons-container {
  margin-top: 15px; /* Space above buttons */
  display: flex; /* Use flexbox */
  flex-wrap: nowrap; /* Keep buttons on one line */
  gap: 10px; /* Add gap between buttons */
  justify-content: center; /* Center the buttons horizontally */
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .hero-overlay {
    display: none !important; /* Hide desktop overlay on mobile */
  }
}

/* Removed as .hero-overlay is hidden on mobile */

/* Removed as .hero-overlay is hidden on mobile */

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .hero-overlay {
    display: none !important; /* Hide desktop overlay on mobile */
  }
}

/* Removed as .hero-overlay is hidden on mobile */

/* Removed as .hero-overlay is hidden on mobile */

.hero-divider {
  width: 100px;
  height: 3px;
  background: var(--primary-color);
  margin: 20px 0;
}

.cta-button {
  background-color: var(--primary-color);
  color: var(--accent-color);
  padding: 12px 25px;
  display: inline-block;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: var(--transition);
  margin-top: 5px;
  /* margin-right: 10px; Removed, use gap in container */
  font-size: 0.9rem;
  border: 1px solid var(--primary-color);
  white-space: nowrap; /* Prevent text wrapping inside button */
  font-family: inherit; /* Ensure font is inherited */
  line-height: inherit;
  cursor: pointer;
}

.cta-button:last-child {
  margin-right: 0;
}

.cta-button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.cta-button-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.cta-button-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.cta-button-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.cta-button-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 5vh; /* Lowered */
  left: 50%;
  transform: translateX(-50%);
  display: flex; /* Use flex for text and arrow */
  flex-direction: column; /* Stack text and arrow */
  align-items: center; /* Center items horizontally */
  cursor: pointer;
  z-index: 10;
  animation: bounce 2.5s infinite; /* Slowed down animation */
  color: var(--accent-color); /* Set text color */
  font-size: 0.9rem; /* Text size */
  font-weight: 500;
  text-align: center;
}

/* Mobile Specific Adjustment */
@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .hero-scroll-indicator {
    bottom: 10vh; /* Adjusted mobile bottom */
  }
  /* Hide desktop text on mobile */
  .hero-scroll-indicator .scroll-text-desktop {
    display: none;
  }
}
/* Hide mobile text on desktop */
@media screen and (min-width: 993px) {
  /* Changed from 769px */
  .hero-scroll-indicator .scroll-text-mobile {
    display: none;
  }
}

.hero-scroll-indicator .arrow {
  /* Target a specific element for the arrow */
  width: 30px; /* Adjusted size */
  height: 15px; /* Adjusted size */
  position: relative; /* Needed for pseudo-elements */
  margin-top: 5px; /* Add space between text and arrow */
}

.hero-scroll-indicator .arrow::before,
.hero-scroll-indicator .arrow::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px; /* Thin arrow */
  height: 100%;
  background-color: var(--accent-color);
  transform-origin: bottom center;
}

.hero-scroll-indicator .arrow::before {
  left: calc(50% - 1px); /* Adjusted for connection */
  transform: translateX(0) rotate(-45deg); /* Point down-left */
}

.hero-scroll-indicator .arrow::after {
  left: calc(50% + 1px); /* Adjusted for connection */
  transform: translateX(-2px) rotate(45deg); /* Point down-right */
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(-50%) translateY(0); /* Keep centered */
  }
  40% {
    transform: translateX(-50%) translateY(5px); /* Reduced bounce height */
  }
  60% {
    transform: translateX(-50%) translateY(2px); /* Reduced bounce height */
  }
}

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

.floating-cta {
  position: absolute;
  bottom: 25vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 15px 30px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  z-index: 5;
  display: none;
  width: 85vw;
  max-width: 300px;
}

.floating-cta:hover {
  transform: translateX(-50%) translateY(-3px);
  background-color: #333;
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .floating-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    padding: 15px 25px;
    height: 50px;
  }
}

.mobile-intro-section {
  display: none; /* Hidden by default */
  padding: 40px 20px;
  background-color: #f9f9f9; /* Light background */
  text-align: center;
}

.mobile-intro-section h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--primary-color);
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .mobile-intro-section {
    display: block; /* Show on mobile */
  }
}

.mobile-intro-section p {
  font-size: 0.95rem;
  color: var(--text-light);
  max-width: 600px; /* Limit width for readability */
  margin: 0 auto 20px; /* Center and add bottom margin */
  line-height: 1.6;
}
/* Hide based on language - REMOVED specific rules for p[lang] */

.mobile-intro-section p {
  font-size: 0.95rem;
  color: var(--text-light);
  max-width: 600px; /* Limit width for readability */
  margin: 0 auto 20px; /* Center and add bottom margin */
  line-height: 1.6;
}
/* Hide based on language - REMOVED specific rules for p[lang] */

.mobile-intro-section ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 20px;
  max-width: 300px; /* Limit width */
  text-align: left;
  font-size: 0.9rem;
}

.mobile-intro-section li {
  position: relative;
  margin-bottom: 10px;
  /* padding-left: 25px; */
}

.mobile-intro-section li::before {
  /* content: "✓"; */
  position: absolute;
  left: 0;
  color: var(--primary-color); /* Changed from green */
  font-weight: bold;
}

.mobile-intro-section .hero-buttons-container {
  margin-top: 25px; /* Add space above buttons */
  justify-content: center; /* Center buttons */
  gap: 15px; /* Space between buttons */
  display: flex; /* Ensure flex layout */
  flex-wrap: nowrap; /* Keep buttons on one row */
}

.mobile-intro-section .cta-button {
  padding: 10px 15px; /* Slightly reduced padding */
  font-size: 0.9rem;
  white-space: nowrap; /* Prevent text wrapping */
  flex: 1 1 auto; /* Allow buttons to take space but also shrink */
  /* Removed max-width to allow them to fit side-by-side */
  min-height: 50px; /* Ensure consistent height */
  display: flex; /* Center text vertically */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
}

.floating-tagline {
  font-size: 0.8rem;
  opacity: 1;
  margin-bottom: 0;
  font-weight: 400;
  max-width: 100%;
  text-align: center;
  color: var(--text-color);
  background-color: #fff;
  padding: 15px 25px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  width: 85vw;
  max-width: 300px;
  position: absolute;
  bottom: calc(25vh + 50px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  height: auto;
  box-sizing: border-box;
}

@media screen and (max-width: 992px) {
  .floating-tagline {
    display: block;
  }
}

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

/* Removed - Replaced by hero-scroll-indicator */

.floating-tagline {
  font-size: 0.8rem;
  opacity: 1;
  margin-bottom: 0;
  font-weight: 400;
  max-width: 100%;
  text-align: center;
  color: var(--text-color);
  background-color: #fff;
  padding: 15px 25px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  width: 85vw;
  max-width: 300px;
  position: absolute;
  bottom: calc(25vh + 50px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  height: auto;
  box-sizing: border-box;
}

@media screen and (max-width: 992px) {
  .floating-tagline {
    display: block;
  }
}

.floating-cta {
  position: absolute;
  bottom: 25vh;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 15px 30px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  z-index: 5;
  display: none;
  width: 85vw;
  max-width: 300px;
}

.floating-cta:hover {
  transform: translateX(-50%) translateY(-3px);
  background-color: #333;
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .floating-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    padding: 15px 25px;
    height: 50px;
  }
}

/* Removed - Replaced by hero-new-titles */

/* Removed - Replaced by hero-new-titles */

.features {
  padding: 100px 0;
  background-color: #f9f9f9;
}

.features-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* Added text-center class */
.section-header.text-center {
  text-align: center;
}

.section-header h2 {
  margin-bottom: 10px; /* Reduced margin */
}

.section-header p {
  max-width: 700px;
  margin: 0 auto 50px; /* Center and add bottom margin */
  color: var(--text-light);
}

/* Hide features section on mobile */
@media screen and (max-width: 768px) {
  .features {
    display: none;
  }
}

.feature-card {
  flex: 1 1 300px;
  background-color: var(--bg-color);
  padding: 30px;
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.feature-card p {
  color: var(--text-light);
}

/* Combined with pricing-styles as they are similar */

.pricing {
  padding: 80px 0;
}

.pricing-grid {
  display: grid; /* Changed to grid */
  grid-template-columns: repeat(
    auto-fit,
    minmax(250px, 1fr)
  ); /* Responsive columns */
  gap: 30px;
  justify-content: center; /* Keeps cards centered */
}

/* Specific style for 4 cards */
.pricing-grid.four-cards {
  grid-template-columns: repeat(4, 1fr); /* Force 4 columns */
}

/* Responsive adjustments for 4 cards */
@media screen and (max-width: 1200px) {
  .pricing-grid.four-cards {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}
@media screen and (max-width: 576px) {
  .pricing-grid.four-cards {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }
}

.pricing-card {
  /* Removed flex properties, using grid now */
  /* max-width: 300px; Removed max-width */
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  /* overflow: hidden; Removed to show badge */
  overflow: visible; /* Ensure badge is visible */
  box-shadow: var(--shadow);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative; /* Added for badge positioning */
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}

.pricing-card.featured {
  border: 2px solid var(--primary-color);
  transform: scale(1.05);
}

.pricing-card.featured:hover {
  transform: scale(1.05) translateY(-5px);
}

/* Popular Badge Styling */
.popular-badge {
  position: absolute;
  top: 15px; /* Adjust top position */
  left: -30px; /* Position off-card to the left */
  background-color: var(--primary-color);
  color: var(--accent-color);
  padding: 5px 30px; /* Wider padding for banner effect */
  font-size: 0.8rem;
  font-weight: 600;
  transform: rotate(-25deg); /* Rotate the other way */
  transform-origin: top left;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  white-space: nowrap; /* Prevent wrapping */
}

/* Adjust badge position on featured card */
/* Not needed anymore with left positioning */

.pricing-header {
  background-color: #f9f9f9;
  padding: 25px 20px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.pricing-header h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.pricing-price {
  font-size: 1.2rem;
  font-weight: 700;
  min-height: 48px; /* Ensure consistent height for price area */
  display: flex; /* Align items vertically */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}

.pricing-price .currency {
  font-size: 1.5rem;
  vertical-align: top;
  position: relative;
  top: -5px;
}

.pricing-price .amount {
  font-size: 2.5rem;
}

.pricing-price .period {
  font-size: 1rem;
  color: var(--text-light);
}

.pricing-body {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.pricing-features {
  margin-bottom: 30px;
  flex-grow: 1;
}

.pricing-features li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.pricing-features li:before {
  /* This will be handled by iconContent or CSS for numbered lists */
  /* content: "✓"; */
  position: absolute;
  left: 0;
  color: var(--primary-color);
}

/* Styling for dynamically rendered lists */
.dynamic-list-placeholder ul,
.dynamic-list-placeholder ol {
  list-style: none; /* Reset default list style */
  padding-left: 0; /* Reset default padding */
  margin-bottom: 30px; /* Keep consistent margin from original .pricing-features */
  flex-grow: 1; /* Keep consistent flex behavior from original .pricing-features */
}

.dynamic-list-placeholder li {
  margin-bottom: 10px;
  position: relative;
  display: flex; /* For aligning icon and text */
  align-items: flex-start; /* Align icon to top of text */
}

.dynamic-list-placeholder .list-item-icon {
  margin-right: 8px; /* Space between icon and text */
  color: var(--primary-color); /* Icon color */
  line-height: inherit; /* Match text line height */
}

.dynamic-list-placeholder ol {
  list-style-type: decimal; /* Use decimal for ordered lists */
  padding-left: 20px; /* Indent ordered lists */
}

.dynamic-list-placeholder ol li::marker {
  color: var(--primary-color); /* Style the number color */
  font-weight: bold;
}

.pricing-cta {
  text-align: center;
  margin-top: auto; /* Push button to bottom */
  display: flex; /* Use flex for buttons */
  flex-direction: column; /* Stack buttons */
  gap: 10px; /* Add gap between buttons */
}

.pricing-cta .btn {
  width: 100%;
}

/* Combined with pricing-layout, pricing-card-* parts */

/* Combined with contact-layout-base */

/* Removed - No contact form on Visit Us page */

/* Removed - No contact form on Visit Us page */

.contact-content {
  padding: 80px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start; /* Align items to the top */
}

.contact-info h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  margin-top: 0; /* Remove top margin */
}

/* Removed .contact-info-row as it's not used */

.map-container {
  height: 450px; /* Default height */
  min-height: 300px; /* Minimum height */
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow); /* Add shadow */
}

.map-container iframe {
  border: 0; /* Ensure no border */
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 25px;
  margin-bottom: 30px; /* Added margin below details */
}

.contact-item {
  display: flex;
  align-items: flex-start; /* Align icon with top of text */
  gap: 15px;
}

.contact-icon {
  width: 40px;
  height: 40px;
  background-size: 20px; /* Adjusted size */
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5f5f5;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0; /* Align with title */
}

.contact-text {
  line-height: 1.5;
}

.contact-text strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0; /* Remove margin */
  color: var(--primary-color);
}

.contact-cta-container {
  margin-top: 30px; /* Space above the buttons */
  display: flex; /* Use flexbox */
  gap: 10px; /* Add space between buttons */
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  justify-content: flex-start; /* Align buttons to the start */
}

.contact-cta-button {
  /* width: 100%; Removed */
  /* max-width: 300px; Removed */
  /* display: block; Removed */
  /* margin: 0 auto; Removed */
  padding: 12px 25px; /* Ensure consistent padding */
  flex: 0 1 auto; /* Allow buttons to shrink but not grow excessively */
}

/* Style for the new outline button */
.contact-cta-button.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.contact-cta-button.btn-outline:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

@media screen and (max-width: 992px) {
  /* Adjust breakpoint if needed */
  .contact-cta-container {
    justify-content: center; /* Center buttons on mobile */
  }
  .contact-cta-button {
    flex: 1 1 150px; /* Allow buttons to take more space on mobile */
    text-align: center;
  }
}

.building-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23333' d='M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z'/%3E%3C/svg%3E");
}

.phone-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}

.whatsapp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23333' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
}

.email-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}

.opening-times-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333' d='M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.3-208-208S141.3 48 256 48s208 93.3 208 208S370.7 464 256 464zm48-208h-48V128c0-8.8-7.2-16-16-16s-16 7.2-16 16v144c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16z'/%3E%3C/svg%3E");
}

.opening-times-note {
  font-size: 0.85em;
  font-style: italic;
  color: var(--text-light);
  margin-top: 5px;
  display: block;
  line-height: 1.3;
  margin-bottom: 0; /* Override default p margin if needed */
}

.contact-text-footer .opening-times-note {
  color: #aaa; /* Match footer text color */
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .contact-item {
    flex-direction: row; /* Keep row layout */
    align-items: flex-start; /* Align icon with title */
    gap: 10px;
  }

  .contact-icon {
    width: 30px; /* Smaller icon */
    height: 30px;
    background-size: 16px; /* Smaller icon graphic */
  }
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .contact-item {
    flex-direction: row; /* Keep row layout */
    align-items: flex-start; /* Align icon with title */
    gap: 10px;
  }

  .contact-icon {
    width: 30px; /* Smaller icon */
    height: 30px;
    background-size: 16px; /* Smaller icon graphic */
  }
}

.tour-content {
  padding: 80px 0;
}

.tour-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.tour-info h2,
.tour-form h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.tour-info h3 {
  font-size: 1.3rem;
  margin-top: 30px;
  margin-bottom: 15px;
}

.tour-info ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.tour-info ul li {
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;
}

.tour-info ul li::before {
  /* content: "✓"; */ /* Removed to prevent double checkmarks with dynamic lists */
  position: absolute;
  left: 0;
  color: var(--primary-color); /* Changed from green */
  font-weight: bold;
}

.tour-form {
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow); /* Add shadow */
}

/* Removed - No gallery on tour page */

.tour-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.tour-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

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

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

.tour-form {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 8px;
}

.tour-form-group {
  margin-bottom: 1.5rem;
}

.tour-form input,
.tour-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.page-header {
  background-color: var(--bg-dark);
  color: var(--accent-color);
  padding: 100px 0 60px;
  text-align: center;
  /* Removed margin-top: var(--header-height); - Handled by page container */
}

.page-header h1 {
  font-size: 3rem;
  margin-bottom: 15px;
}

.page-header p {
  font-size: 1.2rem;
  opacity: 0.8;
  max-width: 700px; /* Limit width of subheader */
  margin: 0 auto; /* Center subheader */
}

/* Spaces Page Navigation (Mobile/Fallback) */
.spaces-nav {
  position: sticky;
  top: var(--header-height); /* Stick below main header */
  background-color: var(--bg-color);
  z-index: 90; /* Below main header, above content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0; /* Removed padding */
  height: 50px; /* Adjusted height for mobile consistency */
  /* border-bottom: 1px solid #eee; Removed border */
}

/* Hide horizontal nav on desktop */
@media screen and (min-width: 993px) {
  .spaces-nav {
    display: none;
  }
}

/* Wrapper for arrows and scroll container */
.spaces-nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--container-width); /* Limit width */
  margin: 0 auto; /* Center wrapper */
  padding: 0 40px; /* Add padding for arrows */
  height: 100%; /* Take full height of parent */
}

/* Container for the scrolling UL */
.spaces-nav-scroll-container {
  overflow-x: auto;
  /* padding: 10px 0; Removed vertical padding */
  flex-grow: 1; /* Allow container to take available space */
  /* Hide scrollbar styling */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  height: 100%; /* Take full height */
  display: flex; /* Align list items vertically */
  align-items: center; /* Align list items vertically */
}
.spaces-nav-scroll-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

.spaces-nav ul {
  display: flex;
  align-items: center; /* Vertically center items */
  justify-content: flex-start; /* Align left for mobile scroll */
  gap: 30px;
  list-style: none;
  padding: 0 15px; /* Add padding inside scroll container */
  margin: 0;
  width: max-content; /* Allow list to exceed container width */
  height: 100%; /* Take full height */
}

.spaces-nav-link {
  padding: 8px 10px; /* Mobile padding */
  font-weight: 500;
  color: var(--text-light);
  transition:
    color 0.3s ease,
    border-bottom 0.3s ease;
  border-bottom: 3px solid transparent; /* Thicker border */
  display: block;
  white-space: nowrap; /* Prevent link text wrapping */
  line-height: calc(
    50px - 16px - 3px
  ); /* Adjust line-height for vertical centering */
  font-size: 0.9rem; /* Mobile font size */
}

.spaces-nav-link:hover,
.spaces-nav-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Removed redundant @media query wrapper */
/* Styles inside are now the base styles or moved to specific mobile/desktop rules */
.spaces-nav {
  height: 50px; /* Default height for mobile */
}
.spaces-nav-wrapper {
  padding: 0 35px; /* Mobile padding for arrows */
}

.spaces-nav-link {
  line-height: calc(50px - 16px - 3px); /* Mobile line-height */
}

/* Show horizontal nav only on mobile */
@media screen and (max-width: 992px) {
  .spaces-nav {
    display: block; /* Or flex, depending on implementation */
  }
}

/* Removed redundant @media query wrapper */
/* Styles inside are now the base styles or moved */
.spaces-nav ul {
  gap: 20px; /* Mobile gap */
  justify-content: flex-start; /* Align items to start on mobile */
  width: max-content;
}
.spaces-nav-link {
  padding: 8px 10px; /* Mobile padding */
  font-size: 0.9rem; /* Mobile font size */
}

/* Spaces Nav Arrows - Layout and Initial State */
.spaces-nav-arrow {
  display: none; /* Hidden by default */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; /* Adjusted size */
  height: 24px; /* Adjusted size */
  z-index: 10;
  opacity: 0; /* Start hidden */
  pointer-events: none; /* Prevent interaction when hidden */
}

/* Spaces Nav Arrows - Styling and Appearance */
.spaces-nav-arrow {
  background-color: transparent; /* Changed */
  border: none; /* Removed border */
  /* Removed border-radius */
  font-size: 1.2rem; /* Removed - Using SVG size */
  font-weight: bold; /* Removed - Using SVG */
  color: var(--primary-color); /* Removed - Using SVG fill */
  cursor: pointer;
  transition: opacity 0.3s ease; /* Simplified transition */
  /* Removed line-height and text-align */
  background-repeat: no-repeat; /* Added */
  background-position: center; /* Added */
  background-size: 16px 16px; /* Added */
}

/* Spaces Nav Arrows - Left/Right Variants */
.spaces-nav-arrow.left {
  left: 5px;
  /* Added SVG background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='%23000000'%3E%3Cpath d='M192 448c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L77.25 256l137.4 137.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448z'/%3E%3C/svg%3E");
  /* Removed ::before content */
}
/* Removed ::before rule for left arrow */

.spaces-nav-arrow.right {
  right: 5px;
  /* Added SVG background */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512' fill='%23000000'%3E%3Cpath d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'/%3E%3C/svg%3E");
  /* Removed ::before content */
}
/* Removed ::before rule for right arrow */

/* Spaces Nav Arrows - Hover State */
.spaces-nav-arrow:hover {
  opacity: 0.7; /* Changed hover effect */
  /* Removed background-color change */
}

/* Spaces Nav Arrows - Responsive Visibility */
/* Show arrows only on mobile/tablet when needed */
/* This rule now correctly applies only when the nav is visible (mobile) */
.spaces-nav.show-left-arrow .spaces-nav-arrow.left,
.spaces-nav.show-right-arrow .spaces-nav-arrow.right {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Ensure arrows are hidden by default on desktop (where .spaces-nav is hidden) */
@media screen and (min-width: 993px) {
  .spaces-nav-arrow {
    display: none;
  }
}

/* Apply background and padding directly to the nav element */
.spaces-side-nav {
  position: fixed;
  left: 0; /* Position at the left edge */
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  background-color: var(--bg-dark); /* Black background for the whole nav */
  padding: 0; /* Remove padding, handled by items */
  border-radius: 0 var(--border-radius) var(--border-radius) 0; /* Round right corners */
  display: none; /* Hidden by default, shown via media query */
  transition: background-color 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Clip corners */
}

/* Add margin specifically for desktop */
@media screen and (min-width: 993px) {
  .spaces-side-nav {
    /* margin-left: 20px; /* Removed left margin for desktop */
  }
}

@media screen and (min-width: 993px) {
  .spaces-side-nav {
    display: block;
  }
}

.spaces-side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Removed gap, handled by item margin/padding */
}

.spaces-side-nav li {
  position: relative;
}

/* Main Scroll Dots */
.scroll-dot {
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  cursor: pointer;
}

.side-nav-item a:hover .scroll-dot {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

.scroll-dot.active {
  background-color: var(--accent-color);
  transform: scale(1.3);
  border: 1px solid var(--accent-color);
}

/* Meeting Room Sub-Dots List Styling */
.sub-dots {
  list-style: none;
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  display: flex;
  flex-direction: column;
  /* Removed gap, handled by item margin/padding */
  /* Hidden state */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease-in-out,
    opacity 0.3s ease-in-out;
  /* Removed padding/margin transitions */
}

/* Meeting Room Sub-Dot Item Styling */
.meeting-room-dot {
  display: block;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
  cursor: pointer;
}

.sub-dots a:hover .meeting-room-dot {
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

.meeting-room-dot.active {
  background-color: var(--accent-color);
  transform: scale(1.2);
  border: 1px solid var(--accent-color);
}

/* Show sub-dots when parent LI has 'show-sub-dots' class */
.side-nav-item.has-sub-dots.show-sub-dots .sub-dots {
  max-height: 200px; /* Adjust as needed */
  opacity: 1;
  /* Removed margin/padding changes */
}

/* Indentation for sub-dots items */
.sub-dots li a .dot-container {
  padding-left: 25px; /* Indent dot container */
}
.sub-dots li a .label-container {
  /* No extra indent needed for label container */
}

.dot-label {
  /* Removed absolute positioning and background styling */
  /* position: absolute; */
  /* left: 100%; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
  /* margin-left: 20px; */
  /* background-color: rgba(0, 0, 0, 0.7); */
  /* color: var(--accent-color); */
  /* padding: 4px 8px; */
  /* border-radius: var(--border-radius); */
  padding: 0; /* Remove padding, handled by container */
  font-size: 0.8rem;
  white-space: nowrap;
  /* opacity: 1; */ /* Controlled by label-container now */
  /* visibility: visible; */ /* Controlled by label-container now */
  pointer-events: none;
}

.dot-label.sub-label {
  /* margin-left: 15px; */ /* Removed */
  font-size: 0.75rem;
  /* padding: 3px 6px; */ /* Removed */
}

.side-nav-item a,
.sub-dots li a {
  display: flex; /* Use flex to align dot and label containers */
  align-items: stretch; /* Make containers same height */
  /* padding: 5px; */ /* Removed */
  /* margin: -5px; */ /* Removed */
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease; /* Add transition for hover */
}

/* Hover effect for the entire link area */
.side-nav-item a:hover .label-container,
.sub-dots li a:hover .label-container {
  background-color: #f0f0f0; /* Slightly off-white on hover */
}

/* Container for the dot */
.dot-container {
  background-color: var(--bg-dark); /* Black background */
  padding: 10px 15px; /* Padding around the dot */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* Container for the label */
.label-container {
  background-color: var(--accent-color); /* White background */
  color: var(--primary-color); /* Black text */
  padding: 10px 15px;
  display: flex;
  align-items: center;
  flex-grow: 1; /* Allow label container to take remaining width */
  transition: background-color 0.2s ease;
}

/* Workspace Section Styles */
.workspace-section {
  /* padding: 60px 0; Removed padding */
  /* border-bottom: 1px solid #f0f0f0; Removed border */
}

/* Keep h2 styling for potential future use, but it's styled within fullscreen now */
.workspace-section h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  color: var(--primary-color);
}

@media screen and (max-width: 768px) {
  .workspace-section h2 {
    font-size: 1.6rem;
  }
}

.fullscreen-space-section {
  height: calc(100vh - var(--header-height));
  min-height: 600px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  color: var(--accent-color);
  scroll-snap-align: start;
  overflow: hidden;
}

@media screen and (max-width: 992px) {
  .fullscreen-space-section {
    height: auto; /* Allow natural height based on content or min-height */
    min-height: calc(
      100vh - var(--header-height) - 50px
    ); /* 50px for top spaces nav */
    /* align-items: flex-end; This is for the space-layout-container, fixed box will overlay */
    padding-bottom: 0; /* Ensure no extra padding if fixed box is present */
  }
}

.space-title-container {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 30px 35px;
  border-radius: var(--border-radius);
  text-align: left;
  box-shadow: var(--shadow);
  max-width: 500px;
  margin-bottom: 20px;
  color: var(--text-color);
}

.space-title-container h2 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--primary-color);
  text-shadow: none;
}

.space-title-container p {
  font-size: 0.95rem;
  margin-bottom: 15px;
  line-height: 1.6;
  opacity: 1;
  color: var(--text-color);
}

/* Styling for inline images within space content boxes */
.space-inline-image {
  max-width: 100%; /* Ensure it doesn't overflow */
  height: auto;
  border-radius: var(--border-radius);
  margin-top: 15px; /* Add some space above the image */
  margin-bottom: 15px; /* Add some space below the image */
  display: block; /* Ensure it takes block layout */
}

.space-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.space-actions .cta-button,
.space-actions .btn {
  margin: 0;
  flex-shrink: 0;
}

@media screen and (min-width: 993px) {
  #page-spaces .content-group .space-actions {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 993px) {
  #page-spaces .content-group .space-actions {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 993px) {
  #page-spaces .content-group[data-space-id="spaces-private"] .space-actions {
    justify-content: flex-end;
  }
}

@media screen and (max-width: 400px) {
  .space-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media screen and (min-width: 993px) {
  .space-title-container {
    order: 1; /* Changed from 2 to 1 */
    margin-bottom: 0;
    margin-left: 0; /* Removed left margin */
    max-width: 450px;
    align-self: flex-end;
  }

  .space-features {
    order: 1; /* Keep both containers with same order to position them together */
    margin-bottom: 0;
    margin-top: 20px; /* Add top margin to separate from title container */
    align-self: flex-end;
    max-width: 450px; /* Match the title container width */
  }
}

@media screen and (min-width: 993px) {
  /* Container for both title and features on desktop */
  .content-group {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    position: fixed;
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Vertically center */
    right: 0; /* Hug right side with some padding - CHANGED from 40px */
    z-index: 10;
    border-right: 42px solid var(--primary-color); /* Thick black right edge */
    /* background-color and box-shadow are handled by combined-space-desktop-content-group-appearance-fade (transparent) 
       and combined-space-desktop-inner-box-styling (for inner elements) */
  }
}

@media screen and (min-width: 993px) {
  .content-group {
    /* Keep background/shadow from individual containers */
    background-color: transparent; /* Make group transparent */
    box-shadow: none; /* Remove shadow from group */

    /* Initial state for fade effect */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.5s ease,
      visibility 0s 0.5s; /* Delay visibility change */
  }
}

@media screen and (min-width: 993px) {
  /* Apply background/padding/shadow to individual boxes within the fixed group */
  .content-group .space-title-container,
  .content-group .space-features {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 30px 35px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%; /* Make them fill the fixed container width */
    margin-bottom: 0; /* Reset margin */
    margin-top: 0; /* Reset margin */
  }

  .content-group .space-features {
    margin-top: 15px; /* Add space between title and features */
  }
}

@media screen and (min-width: 993px) {
  /* Ensure individual containers don't have fixed/absolute positioning */
  .space-title-container,
  .space-features {
    position: static; /* Override any potential absolute/relative */
    order: unset; /* Reset order */
    align-self: auto; /* Reset align-self */
    max-width: 100%; /* Allow them to fill the content-group */
  }
}

@media screen and (max-width: 992px) {
  .content-group {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.5s ease,
      visibility 0s 0.5s;
    border-right: none; /* Override desktop border */
    max-height: 45vh; /* Adjusted max-height */
    overflow-y: auto;
    box-sizing: border-box; /* Include padding in width/height */
    /* Reset desktop-specific fixed positioning */
    top: auto;
    right: auto;
    transform: none;
  }

  .content-group.is-visible {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.5s ease,
      visibility 0s 0s;
  }
}

/* Fade effect for fixed content group on Spaces page (Desktop) */
@media screen and (min-width: 993px) {
  /* Target the content group directly when it has the 'is-visible' class */
  .content-group.is-visible {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.5s ease,
      visibility 0s 0s; /* Make visible immediately when fading in */
  }
}

@media screen and (max-width: 992px) {
  .content-group {
    width: 100%; /* This is fine, matches space-mobile-fixed-content-group */
    max-width: 100%; /* This is fine */
    /* align-self: flex-end; Removed, ineffective for fixed */
    /* position: relative; Removed, was causing the issue */
    /* bottom: auto; Removed as requested */
    right: auto; /* Fine, reset */
  }
}

@media screen and (max-width: 992px) {
  /* Styles for .space-title-container when inside the mobile fixed .content-group */
  .content-group .space-title-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    padding: 0; /* Padding is now on the .content-group itself */
    background-color: transparent; /* Background is on .content-group */
    box-shadow: none; /* Shadow is on .content-group */
    border-radius: 0; /* No border-radius needed for the inner container */
    text-align: left; /* Align text to left for consistency */
  }

  /* Styles for .space-features are effectively unused as features were removed from HTML */
  .content-group .space-features {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    margin-top: 0; /* No margin needed if it were present */
    padding: 0;
    background-color: transparent;
    box-shadow: none;
  }
}

@media screen and (max-width: 992px) {
  .mobile-title-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--text-color);
    font-family: inherit;
  }

  .mobile-title-header .mobile-space-title {
    font-size: 1.2rem;
    margin-bottom: 0;
    flex-grow: 1;
    font-weight: 600;
    color: var(--primary-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

@media screen and (max-width: 992px) {
  .fold-out-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid currentColor; /* Points UP */
    border-top: none; /* Clear top border */
    transition: transform 0.3s ease;
    margin-left: 10px;
  }

  .mobile-title-header[aria-expanded="true"] .fold-out-icon {
    transform: rotate(180deg); /* Flips UP arrow to DOWN */
  }
}

@media screen and (max-width: 992px) {
  .mobile-collapsible-content {
    max-height: 1.6rem;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
    position: relative;
  }

  .mobile-collapsible-content.open {
    max-height: 40vh;
  }
}

@media screen and (max-width: 992px) {
  .mobile-collapsible-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6rem;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.95) 80%
    );
    pointer-events: none;
  }

  .mobile-collapsible-content.open::after {
    display: none;
  }
}

@media screen and (max-width: 992px) {
  .mobile-collapsible-content .space-actions {
    margin-top: 15px;
  }

  .mobile-collapsible-content .space-actions .cta-button {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
}

@media screen and (min-width: 993px) {
  .mobile-title-header {
    display: block;
    width: auto;
    cursor: default;
    margin-bottom: 0;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
  }

  .mobile-title-header .mobile-space-title {
    flex-grow: 0;
  }

  .fold-out-icon {
    display: none;
  }

  .mobile-collapsible-content {
    display: block;
    max-height: none;
    overflow: visible;
  }
}

@media screen and (max-width: 992px) {
  .fullscreen-space-section {
    align-items: flex-end; /* Aligns space-layout-container to bottom if it's in flow */
  }
  /* .space-layout-container was removed, its styles are no longer needed */
  /* .space-layout-container {
    padding: 0; 
  } */

  /* These styles for .space-title-container are largely overridden by 
     .content-group .space-title-container in combined-space-mobile-inner-box-styling on mobile */
  .space-title-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    /* padding: 20px; */ /* Overridden */
    /* border-radius: var(--border-radius) var(--border-radius) 0 0; */ /* Overridden */
    /* text-align: center; */ /* Overridden */
  }
  .space-title-container h2 {
    /* Font size for h2 elements NOT specifically targeted by .mobile-space-title */
    font-size: 1.8rem;
  }
  .space-title-container p {
    font-size: 0.9rem;
  }
  .space-actions {
    justify-content: center;
  }
}

/* Section Divider Styles */
.section-divider {
  padding: 60px 0;
  background-color: #f4f4f4; /* Light gray background */
  text-align: center;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  margin: 0; /* Remove default margins if any */
}

.section-divider .container {
  max-width: 900px; /* Limit width for better readability */
}

.section-divider h2 {
  font-size: 2.2rem; /* Slightly smaller than main section titles */
  color: var(--primary-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.section-divider p {
  font-size: 1.05rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 700px; /* Max width for the paragraph */
  margin: 0 auto; /* Center the paragraph */
}

@media screen and (max-width: 768px) {
  .section-divider {
    padding: 40px 0;
  }
  .section-divider h2 {
    font-size: 1.8rem;
  }
  .section-divider p {
    font-size: 1rem;
  }
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
}

.modal-content {
  background-color: #fff;
  margin: 10vh auto; /* Centered with margin from top */
  padding: 30px;
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 700px; /* Max width for the modal */
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: slideInModal 0.3s ease-out;
}

.modal-content.large {
  max-width: 900px; /* Wider modal for image selection */
}

@keyframes slideInModal {
  /* Renamed animation to avoid conflict */
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 1; /* Ensure proper vertical alignment */
  padding: 0 5px; /* Add some padding for easier clicking */
}

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

.modal-content h2 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 1.8rem;
  color: var(--primary-color);
  text-align: center;
}

/* Styles for the form inside the modal */
#bookingModal .booking-form-container {
  padding: 0; /* Remove extra padding if modal-content already has it */
  box-shadow: none; /* Remove shadow if modal-content has it */
  background-color: transparent; /* Form container itself is transparent */
}

#bookingModal .booking-form {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Spacing between form groups */
}

#bookingModal .form-row {
  display: flex;
  gap: 15px;
}

#bookingModal .form-group.half {
  flex: 1;
}

#bookingModal .booking-submit-btn {
  margin-top: 10px;
  width: 100%; /* Full width button */
  background-color: var(--primary-color); /* Ensure consistent button styling */
  color: var(--accent-color);
  border: none;
  padding: 12px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}
#bookingModal .booking-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Responsive adjustments for modal form */
@media screen and (max-width: 576px) {
  .modal-content {
    padding: 20px;
    margin: 5vh auto; /* Less top margin on small screens */
    max-height: 90vh; /* Ensure modal is scrollable if content overflows */
    overflow-y: auto; /* Allow vertical scrolling within modal content */
  }
  #bookingModal .form-row {
    flex-direction: column;
    gap: 15px;
  }
  .modal-content h2 {
    font-size: 1.5rem;
  }
}

/* Form Feedback Styles (Loading Spinner & Success Message) */
.btn .spinner {
  display: none; /* Hidden by default */
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, 0.3); /* Light border for dark buttons */
  border-radius: 50%;
  border-top-color: #fff; /* Active part of spinner */
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

.btn.loading .spinner {
  display: inline-block;
}

.btn.loading .btn-text {
  /* display: none; Optionally hide text, or just show spinner alongside */
}

.btn.loading {
  cursor: wait;
  opacity: 0.8;
}

.form-status-message {
  margin-top: 15px;
  padding: 10px;
  border-radius: var(--border-radius);
  text-align: center;
  font-weight: 500;
}

.form-status-message.success {
  background-color: #e6ffed;
  color: #006421;
  border: 1px solid #b3ffc6;
}

.form-status-message.error {
  background-color: #ffe6e6;
  color: #cc0000;
  border: 1px solid #ffb3b3;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.about-content {
  padding: 80px 0;
}

/* Removed old .about-grid styles */
/* Styles for the new main grid */
.about-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 50px;
  align-items: center; /* Vertically center content */
}

/* Responsive adjustment for the main grid */
@media screen and (max-width: 992px) {
  .about-main-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
    gap: 30px;
  }
  /* Ensure image comes after text on mobile */
  .about-image {
    order: 2;
  }
  .about-text {
    order: 1;
    text-align: center; /* Center text on mobile */
  }
}

.about-main-section {
  padding: 80px 0; /* Add padding like other sections */
}

/* Updated selector to target the new h2 */
.about-text h2 {
  font-size: 2rem;
  margin-top: 0; /* Ensure no extra top margin */
  margin-bottom: 20px;
  color: var(--primary-color); /* Match catering title color */
}

.about-text h2:first-child {
  margin-top: 0;
}

.about-image img {
  width: 100%;
  max-width: 500px; /* Limit max width */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin: 0 auto; /* Center the image */
  display: block; /* Ensure margin auto works */
}

.team {
  padding: 40px 0 80px;
  background-color: var(--bg-color); /* Changed background to white */
}

.team h2 {
  text-align: center;
  margin-bottom: 50px;
}

.team-grid {
  display: flex; /* Changed from grid */
  flex-wrap: wrap; /* Added */
  justify-content: center; /* Changed from justify-items */
  gap: 40px;
  /* Removed grid-template-columns */
  /* Removed justify-items */
}

.team-member {
  text-align: center;
  flex: 0 1 300px; /* Added flex basis for flex layout */
}

.team-member-image {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  box-shadow: var(--shadow);
  border: 4px solid var(--bg-color); /* Add border */
}

.team-member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Added grayscale style */
.team-member-image img.grayscale {
  filter: grayscale(100%);
}

.team-member h3 {
  font-size: 1.3rem;
  margin-bottom: 5px;
}

.team-member p {
  color: var(--text-light);
  font-size: 0.95rem; /* Slightly smaller role text */
  margin-bottom: 10px; /* Add margin below role */
}

.team-member-description {
  font-size: 0.9rem; /* Smaller description */
  margin-bottom: 15px; /* Space before socials */
  max-width: 90%; /* Limit width */
  margin-left: auto;
  margin-right: auto;
}

/* Team Member Socials Container */
.team-member-socials {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* Base Team Member Social Icon */
.social-icon-team {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f0f0f0; /* Lighter background */
  display: inline-block;
  transition: var(--transition);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px; /* Adjust icon size */
}

/* Team Member Social Icon Hover State */
.social-icon-team:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

/* Specific Team Member Social Icons */
/* Use existing icons but with different fill color */
.social-icon-team.email-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333333' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}
.social-icon-team.x-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333333' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
}
/* Corrected LinkedIn SVG path encoding */
.social-icon-team.linkedin-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23333333' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
}

/* Team Member Socials */
.team-member-socials {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon-team {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f0f0f0; /* Lighter background */
  display: inline-block;
  transition: var(--transition);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px; /* Adjust icon size */
}

.social-icon-team:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

/* Use existing icons but with different fill color */
.social-icon-team.email-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333333' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}
.social-icon-team.x-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23333333' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
}
.social-icon-team.linkedin-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23333333' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E"); /* Re-pasted the correct path */
}

.catering-experience-section {
  padding: 80px 0;
  background-color: #f9f9f9; /* Light background */
}

.catering-experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Keep two columns */
  gap: 50px;
  align-items: center; /* Changed from start to center */
}

.catering-experience-text h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--primary-color);
}

.catering-experience-text p {
  margin-bottom: 30px;
  line-height: 1.7;
  color: var(--text-light);
}

/* NEW: Container for gallery and link */
.catering-gallery-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  height: 100%; /* Ensure container takes height for vertical centering */
}

.catering-image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns for the images */
  gap: 15px; /* Gap between images */
  align-items: center; /* Vertically align images if heights differ */
  width: 100%; /* Ensure gallery takes available width */
  max-width: 600px; /* Optional: Limit max width */
}

/* Wrap images in links */
.catering-image-gallery a {
  display: block; /* Ensure link takes up space */
  transition: transform 0.3s ease;
  border-radius: var(--border-radius); /* Apply radius to link */
  overflow: hidden; /* Ensure image stays within radius */
  box-shadow: var(--shadow);
}
.catering-image-gallery a:hover {
  transform: scale(1.05);
}

.catering-image-gallery img {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover; /* Cover the area */
  display: block; /* Remove extra space below image */
  /* Removed radius/shadow/transition - applied to link now */
}

/* Catering Instagram Link */
.catering-instagram-link {
  text-align: center; /* Center the link */
  margin-top: 20px; /* Add space above the link */
  /* Removed grid-column */
  width: 100%; /* Ensure it takes width for centering */
}

.catering-instagram-link a {
  color: var(--text-light); /* Lighter color */
  font-weight: 500; /* Slightly less bold */
  text-decoration: none; /* Remove underline */
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
  opacity: 0.8; /* Make it slightly faded */
  font-size: 0.9rem; /* Slightly smaller */
}

.catering-instagram-link a:hover {
  color: var(--primary-color);
  opacity: 1; /* Full opacity on hover */
  text-decoration: underline; /* Add underline on hover */
}

/* Responsive adjustments */
@media screen and (max-width: 992px) {
  .catering-experience-grid {
    grid-template-columns: 1fr; /* Stack text and gallery on mobile */
    gap: 30px;
  }
  .catering-image-gallery {
    grid-template-columns: repeat(3, 1fr); /* Keep 3 columns on tablet */
    margin-top: 30px; /* Add space above gallery */
  }
  .catering-experience-text h2,
  .catering-experience-text p {
    text-align: center;
  }
  .catering-experience-text .btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }
}

@media screen and (max-width: 576px) {
  .catering-image-gallery {
    grid-template-columns: 1fr; /* Stack images on small mobile */
  }
  .catering-image-gallery img {
    height: 250px; /* Slightly taller images when stacked */
  }
}

.catering-experience-text .btn {
  background-color: var(--primary-color);
  color: var(--accent-color);
}

.catering-experience-text .btn:hover {
  opacity: 0.9;
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .contact-grid,
  .tour-grid,
  .about-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pricing-card.featured {
    transform: scale(1); /* Reset featured scale on mobile */
  }

  .pricing-card.featured:hover {
    transform: translateY(-5px); /* Keep hover effect */
  }

  .page-header {
    /* margin-top: var(--header-height); Removed, handled by base */
    padding: 60px 0 40px;
  }

  .page-header h1 {
    font-size: 2.2rem;
  }

  /* Adjust pricing grid for tablets */
  .pricing-grid {
    justify-content: center; /* Ensure cards are centered */
    /* Removed flex-basis and max-width, using grid now */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Already set */
  }
  /* Adjust 4-card grid for tablets */
  .pricing-grid.four-cards {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* Combined with page-header-base and responsive styles */

.footer {
  background-color: var(--bg-dark);
  color: #ccc;
  padding: 60px 0 0;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.footer-section {
  flex: 1 1 250px;
  min-width: 200px;
}

.footer-section h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  position: relative;
  color: var(--accent-color);
}

.footer-section h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 2px;
  background-color: var(--accent-color);
}

.footer-section p {
  font-size: 0.95rem;
  color: #aaa;
  margin-bottom: 0;
}

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

.footer-section ul li a {
  transition: var(--transition);
  color: #ccc;
  font-size: 0.95rem;
}

.footer-section ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

.footer-bottom {
  /* text-align: center; Removed as flex handles centering of container's children */
  padding: 20px 0;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom .container {
  /* Targeting the container within footer-bottom */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers flex items (footer-social, p) horizontally */
}

.footer-bottom p {
  /* Style for the copyright paragraph */
  margin-bottom: 0;
  font-size: 0.9rem;
  color: #aaa;
  text-align: center; /* Ensure text within p is centered */
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1); /* Slightly less transparent */
  display: inline-block; /* Changed from flex */
  transition: var(--transition);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  line-height: 40px; /* Vertically center (if needed, though background handles it) */
  text-align: center; /* Horizontally center (if needed) */
}

.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.facebook-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'%3E%3C/path%3E%3C/svg%3E");
}

.instagram-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'%3E%3C/path%3E%3C/svg%3E");
}

.linkedin-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'%3E%3C/path%3E%3C/svg%3E");
}

.x-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
}

.contact-details-footer {
  color: #aaa;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-text-footer {
  line-height: 1.5;
  font-size: 0.9rem; /* Applied to all text within contact-text-footer */
}

.contact-item-footer .contact-icon {
  width: 24px;
  height: 24px;
  background-size: 14px;
  background-color: transparent;
  margin-top: 0;
}

.contact-item-footer .building-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23cccccc' d='M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z'/%3E%3C/svg%3E");
}
.contact-item-footer .phone-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23cccccc' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/%3E%3C/svg%3E");
}
.contact-item-footer .whatsapp-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23cccccc' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
}
.contact-item-footer .email-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23cccccc' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}

/* Admin Actions Bar Styles */
#admin-actions-bar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--bg-dark);
  padding: 15px;
  border-radius: var(--border-radius);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1001; /* Above other content */
  display: flex;
  gap: 10px;
  align-items: center;
}

#admin-actions-bar .btn {
  margin: 0;
  color: var(--accent-color); /* Ensure button text is visible */
}
#admin-actions-bar .btn-outline {
  border-color: var(--accent-color);
}
#admin-actions-bar .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#admin-actions-bar #admin-save-status {
  margin-left: 10px;
  padding: 5px 10px;
  font-size: 0.9rem;
  color: var(
    --accent-color
  ); /* Default color, will be overridden by success/error */
  border-radius: var(--border-radius); /* Added for consistency */
}
#admin-actions-bar #admin-save-status.success {
  background-color: #4caf50; /* Green for success */
  border: 1px solid #388e3c;
  color: white; /* Ensure text is visible on green */
}
#admin-actions-bar #admin-save-status.error {
  background-color: #f44336; /* Red for error */
  border: 1px solid #d32f2f;
  color: white; /* Ensure text is visible on red */
}

/* Inline Edit Field Styles */
.inline-edit-field {
  display: inline-block; /* Or block, depending on original */
  width: auto; /* Default to auto, can be overridden by original classes */
  min-width: 100px; /* Ensure it's clickable */
  padding: 5px;
  margin: -5px; /* Counteract padding to maintain layout */
  font: inherit;
  color: var(--text-color);
  background-color: #f0f8ff; /* Light alice blue background to indicate editable */
  border: 1px dashed #a0a0a0;
  border-radius: 3px;
  box-sizing: border-box;
  resize: vertical; /* For textarea */
  vertical-align: baseline; /* Align with surrounding text */
}

/* Ensure inputs take full width of their container if original element did */
.inline-edit-field[style*="width: 100%"],
.inline-edit-field.full-width {
  /* Add a helper class if needed */
  width: 100%;
}

/* Specific styling for textarea to behave better */
textarea.inline-edit-field {
  display: block; /* Textareas are typically block */
  width: 100%; /* Textareas usually take full width of parent */
  overflow: hidden; /* To help with auto-resize */
  min-height: 1.5em; /* Minimum height for a single line */
  line-height: inherit; /* Inherit line height */
}

/* Style for variable placeholders in edit mode */
.variable-placeholder {
  background-color: #fffacd; /* Lemon chiffon for variables */
  border: 1px dashed #ccc;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: monospace;
  color: #555;
  cursor: default;
}

/* Editable image/background styles in Edit Mode */
.cms-editable-wrapper {
  /* Wrapper for img tags */
  position: relative;
  display: inline-block; /* Adjust if original img was block */
  cursor: pointer;
  line-height: 0; /* Prevent extra space if img is inline-block */
}

.cms-editable-bg {
  /* Class added to elements with data-cms-bg-key */
  position: relative; /* Ensure it's a positioning context for the overlay */
  cursor: pointer;
}

.cms-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* Slight tint by default */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Hidden by default, shown on hover */
  transition:
    opacity 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  z-index: 1; /* MODIFIED: Was 5, changed to 1 to be below space-layout-container (z-index: 2) */
  pointer-events: none; /* Overlay itself shouldn't capture clicks initially */
}

.cms-editable-wrapper:hover .cms-edit-overlay,
.cms-editable-bg:hover .cms-edit-overlay {
  opacity: 1;
  background-color: rgba(
    0,
    0,
    0,
    0.55
  ); /* Darker on hover to make icon stand out */
  pointer-events: auto; /* Allow clicks on the overlay's parent when visible */
}

.cms-edit-overlay i.fa-upload {
  color: white;
  font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive icon size */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* Make icon pop */
}

/* Dim the image slightly when its wrapper is hovered */
.cms-editable-wrapper:hover img {
  filter: brightness(0.7);
  transition: filter 0.2s ease-in-out;
}
/* For background elements, the overlay darkening should be sufficient */
/* as filtering the parent would affect all children (text, etc.) */
/* #endpart --> */

#admin-actions-bar .btn.btn-danger {
  background-color: #dc3545; /* A common red color for danger */
  border-color: #dc3545;
  color: white;
}

#admin-actions-bar .btn.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  opacity: 1; /* Override general btn hover opacity if needed */
}

/* Dynamic List Edit Mode Styles */
.list-edit-controls {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.list-edit-controls .btn-add-item,
.list-edit-controls .btn-remove-item {
  padding: 5px 10px;
  font-size: 0.8rem;
  background-color: #555;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  margin-left: 5px; /* For remove button next to item */
}
.list-edit-controls .btn-add-item {
  align-self: flex-start; /* Align Add button to the left */
  margin-left: 0;
}

.editable-list-item .btn-remove-item {
  /* Changed selector */
  padding: 0; /* Reset padding for X */
  font-size: 1.5rem; /* Adjust size of X */
  font-weight: bold;
  background-color: transparent; /* No background */
  color: #dc3545; /* Red color for X */
  border: none;
  cursor: pointer;
  margin-left: 8px; /* Space from textarea */
  line-height: 1; /* Ensure X is vertically centered */
  width: 20px; /* Explicit width for the X button area */
  height: 20px; /* Explicit height for the X button area */
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-edit-controls .btn-add-item:hover {
  /* Hover for Add Item button */
  opacity: 0.8;
}

.editable-list-item .btn-remove-item:hover {
  /* Hover for the red X remove button */
  opacity: 0.8;
}

.editable-list-item textarea {
  width: calc(
    100% - 25px
  ); /* Adjust width considering icon and potential remove button */
  padding: 5px;
  border: 1px dashed #ccc;
  border-radius: 3px;
  font: inherit;
  resize: vertical;
  min-height: 1.5em; /* Ensure at least one line height */
  line-height: inherit;
  background-color: #f0f8ff;
  margin-left: 5px; /* If icon is present */
  flex-grow: 1; /* Allow textarea to take available space */
}

.editable-list-item {
  display: flex; /* Align textarea and remove button */
  align-items: flex-start;
  margin-bottom: 10px;
}

.editable-list-item .list-item-icon {
  margin-top: 5px; /* Align icon with first line of textarea */
}

/* Variables Editor Modal Styles */
#variables-editor-modal .modal-content {
  max-width: 800px; /* Wider modal for variables */
  max-height: 80vh;
  overflow-y: auto;
}

#variables-list-container {
  margin-bottom: 0; /* Removed margin as "add new" section is gone */
  max-height: 60vh; /* Increased max-height slightly */
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: var(--border-radius);
}

.variable-item {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}
.variable-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.variable-item label {
  flex-basis: 200px; /* Fixed width for variable name */
  font-weight: 500;
  word-break: break-all;
  margin-bottom: 0; /* Override default label margin if any */
}

.variable-item input[type="text"] {
  flex-grow: 1;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.variable-item input[type="text"]:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Removed styles for .delete-variable-btn and .variable-add-new-section */

/* Image Selection Modal Styles */
#image-selection-modal .modal-content {
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.image-modal-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.image-modal-tabs .tab-link {
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-light);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px; /* Overlap with container border */
}

.image-modal-tabs .tab-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.image-modal-tabs .tab-link:hover {
  color: var(--primary-color);
}

.tab-content {
  display: none;
  padding: 15px 0;
  animation: fadeIn 0.3s;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#image-upload-input {
  margin-top: 5px;
}

.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: var(--border-radius);
}

.gallery-item {
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1; /* Square items */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item:hover,
.gallery-item.selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.gallery-item .gallery-item-filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 0.75rem;
  padding: 3px 5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-preview-container {
  margin-top: 20px;
  text-align: center;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: var(--border-radius);
  background-color: #f9f9f9;
}

.image-preview-container h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--text-color);
}

#image-modal-preview {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
  border-radius: var(--border-radius);
  border: 1px solid #ddd;
}

.image-modal-actions {
  margin-top: 25px;
  text-align: right;
}

#use-selected-image-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}
#use-selected-image-btn:disabled:hover {
  transform: none;
}

/* Space Image List Editor Styles */
.space-image-list-editor {
  margin-top: 20px;
  padding: 15px; /* Changed from padding-top */
  background-color: #f0f0f0; /* Added background color */
  border-top: 1px solid #eee;
  border-radius: var(--border-radius); /* Added border radius */
}

.space-image-list-editor h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-color);
}

.image-editor-list {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-editor-item {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: #f0f0f0;
}

.image-editor-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-editor-remove-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: rgba(220, 53, 69, 0.8); /* Red with some transparency */
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
  font-weight: bold;
}

.image-editor-remove-btn:hover {
  background-color: #dc3545; /* Solid red on hover */
}

.image-editor-remove-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
}

.image-editor-add-btn {
  padding: 8px 15px;
  font-size: 0.9rem;
}

.contact-item-footer .opening-times-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23cccccc' d='M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.3-208-208S141.3 48 256 48s208 93.3 208 208S370.7 464 256 464zm48-208h-48V128c0-8.8-7.2-16-16-16s-16 7.2-16 16v144c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16z'/%3E%3C/svg%3E");
}

.footer-admin-links {
  margin-top: 15px;
}

.footer-admin-links a {
  color: #ccc;
  font-size: 0.95rem;
  text-decoration: none;
  transition: var(--transition);
}

.footer-admin-links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Combined with footer-contact-details */

@media screen and (max-width: 992px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2rem;
  }

  .hero-overlay {
    width: 320px;
    padding: 30px 30px; /* Adjusted padding */
    left: 10%; /* Adjust position */
    top: 18%; /* Adjust position */
  }

  .hero-overlay h1 {
    font-size: 3rem;
  }

  .main-nav ul {
    gap: 20px; /* Reduce gap */
  }
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  .header-container {
    padding: 0 20px;
  }

  .header {
    /* height: var(--header-height); Already set */
    /* position: fixed; Already set */
  }

  .main-nav,
  .header-cta {
    display: none; /* Hide desktop nav/cta */
  }

  .menu-toggle {
    display: block; /* Show hamburger */
  }

  .hero {
    /* margin-top: var(--header-height); Already set */
    height: calc(
      100vh - var(--header-height)
    ); /* Adjust height for mobile header */
  }
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  body.menu-open {
    overflow: hidden; /* Prevent background scroll */
  }

  /* Hamburger to X animation */
  body.menu-open .menu-toggle .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  body.menu-open .menu-toggle .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .menu-toggle .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@media screen and (max-width: 992px) {
  /* Changed from 768px */
  /* Removed hero-overlay styles as it's hidden */

  .footer-container {
    flex-direction: column;
    gap: 30px;
    text-align: center; /* Center footer content */
  }

  .footer-section {
    flex: 1 1 100%;
    min-width: unset; /* Reset min-width */
  }

  .footer-section h3::after {
    /* Center underline */
    left: 50%;
    transform: translateX(-50%);
  }

  .contact-details-footer {
    align-items: center; /* Center contact items */
  }

  .contact-item-footer {
    justify-content: center; /* Center icon and text within item */
  }
}

@media screen and (max-width: 576px) {
  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  /* Removed hero-overlay h1 style */

  section {
    padding: 60px 0;
  }

  .btn {
    padding: 10px 20px; /* Smaller buttons */
    font-size: 0.9rem;
  }

  .header-logo .logo {
    font-size: 1.5rem; /* Smaller logo */
  }

  .header-subtitle {
    font-size: 0.7rem; /* Smaller subtitle */
  }

  /* Ensure pricing cards stack on small mobile */
  .pricing-card {
    /* Removed flex-basis and max-width */
    /* grid handles stacking */
  }

  /* Adjust 4-card grid for mobile */
  .pricing-grid.four-cards {
    grid-template-columns: 1fr; /* 1 column */
  }
}