:root {
  /* Color variables - Split-Complementary Scheme (Deep Blue, Deep Orange, Green, Light Blue) */
  --color-primary: #0d47a1; /* Deep Blue - Main Dark Background */
  --color-accent-orange: #ff5722; /* Deep Orange - Complementary Accent */
  --color-accent-green: #4caf50; /* Green - Split Complementary Accent */
  --color-accent-blue: #03a9f4; /* Light Blue - Split Complementary Accent */

  --color-text-dark: #222222; /* Very Dark Grey for readability on light backgrounds */
  --color-text-light: #ffffff; /* White for readability on dark backgrounds */

  --color-background-light: #f0f4f8; /* Light Greyish Blue - Main Light Background */
  --color-background-dark: var(
    --color-primary
  ); /* Dark Background is Primary Color */
  --color-background-light-alt1: #e8f5e9; /* Light Greenish Grey - Alternative Light Background */
  --color-background-light-alt2: #fce4ec; /* Light Pink - Alternative Light Background */

  /* Font variables */
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "DM Sans", sans-serif;

  /* Glassmorphism variables */
  --glass-blur: 15px; /* Increased blur for stronger effect */
  --glass-bg-opacity: 0.15; /* Slightly more opaque */
  --glass-border-opacity: 0.25; /* Slightly more visible border */
  --glass-shadow-opacity: 0.4; /* Stronger shadow */
  --glass-border-radius: 12px; /* Slightly larger border radius */

  /* Transitions */
  --transition-duration: 0.4s; /* Slightly longer duration */
  --transition-spring: cubic-bezier(
    0.175,
    0.885,
    0.32,
    1.275
  ); /* Standard Springy */
  --transition-ease-in-out: ease-in-out;
}

/* Basic styling for the cookie consent popup */
#cookieConsentPopup {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
  color: #ffffff;
  padding: 15px;
  text-align: center;
  z-index: 9999; /* High z-index to be on top */
}
#cookieConsentPopup p {
  margin: 0 0 10px 0;
  font-size: 0.9em;
  line-height: 1.4;
}
#cookieConsentPopup button {
  background-color: #4caf50; /* Example button color */
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9em;
}
#cookieConsentPopup button:hover {
  background-color: #45a049;
}

/* General Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-dark); /* Default text color for light backgrounds */
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
  background-color: var(--color-background-light); /* Default body background */
}

/* Base typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(
    --color-text-dark
  ); /* Default heading color for light backgrounds */
  text-align: center;
  margin-bottom: 1.5rem; /* Consistent spacing below titles */
}

.title {
  font-family: var(--font-heading);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.subtitle {
  font-family: var(--font-body);
  margin-bottom: 2.5rem; /* Increased spacing below subtitles */
  font-weight: 400;
}

p {
  margin-bottom: 1rem; /* Spacing for paragraphs */
}

a {
  color: var(--color-primary); /* Default link color */
  transition: color var(--transition-duration) var(--transition-ease-in-out);
}

a:hover {
  color: var(--color-accent-orange); /* Hover color */
}

/* Bulma Overrides/Extensions */
.section {
  padding: 4rem 1.5rem; /* Increased section padding */
}

.section-light {
  background-color: var(--color-background-light);
  color: var(--color-text-dark);
}

.section-dark {
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: var(--color-text-light);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Subtle shadow for dark backgrounds */
}

.section-dark .subtitle {
  color: rgba(
    255,
    255,
    255,
    0.9
  ); /* Slightly lighter white for subtitle on dark background */
}

.section-dark p {
  color: rgba(255, 255, 255, 0.8); /* Lighter white for text */
}

.section-dark a:not(.button) {
  color: var(--color-accent-blue); /* Accent color for links in dark sections */
}

.section-dark a:not(.button):hover {
  color: var(--color-accent-orange);
}

/* Header */
.header {
  position: sticky; /* Make header sticky */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* High z-index */
  background-color: rgba(13, 71, 161, 0.9); /* Semi-transparent dark blue */
  backdrop-filter: blur(5px); /* Light blur for header */
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color var(--transition-duration) ease-in-out;
}

.header .navbar {
  padding: 0.75rem 0; /* Adjust padding */
  background-color: transparent; /* Bulma navbar background becomes transparent */
}

.header .navbar-brand .navbar-item {
  padding: 0.5rem 0.75rem; /* Adjust brand padding */
}

.header .navbar-item {
  color: var(--color-text-light); /* Text color for navbar items */
  font-weight: 600;
  transition: color var(--transition-duration) var(--transition-ease-in-out);
  padding: 0.75rem 1rem; /* Adjust item padding */
}

.header .navbar-item:hover {
  color: var(--color-accent-orange);
  background-color: transparent; /* Ensure background doesn't change on hover */
}

.header .navbar-burger {
  color: var(--color-text-light);
  transition: color var(--transition-duration) var(--transition-ease-in-out);
}

.navbar-burger:hover {
  color: var(--color-accent-orange);
}

.navbar-menu {
  background-color: #2356a8;
}

.navbar-menu .navbar-item {
  color: var(--color-text-light);
  padding: 0.75rem 1rem;
}

.navbar-menu .navbar-item:hover {
  color: var(--color-accent-orange);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Responsive Navbar adjustments */
@media screen and (max-width: 1023px) {
  .header .navbar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    padding-bottom: 1rem;
  }
}

img {
  object-fit: cover;
}

/* Hero Section */
.hero {
  position: relative;
  overflow: hidden;
  /* background-image, data-prompt, background-attachment, background-size, background-repeat, background-position are in HTML style attribute */
}

#contactForm {
  width: 100%;
}

/* Use the .hero-overlay div from HTML */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background gradient defined in HTML style attribute */
  z-index: 1;
}

.hero-body {
  width: 100%;
  position: relative;
  z-index: 2;
}

.hero h1,
.hero h2 {
  color: var(--color-text-light); /* White text for hero */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* Stronger shadow for better contrast */
}

/* Buttons (Global Styles) */
.button {
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 50px; /* Pill shape */
  padding: 1rem 2rem;
  transition: all var(--transition-duration) var(--transition-spring); /* Springy transition */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.button.is-primary {
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
  color: var(--color-text-light);
  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3);
}

.button.is-primary:hover {
  background-color: #e04e1b; /* Slightly darker orange */
  border-color: #e04e1b;
  transform: translateY(-5px) scale(1.02); /* Lift and slightly enlarge */
  box-shadow: 0 8px 20px rgba(255, 87, 34, 0.4);
}

.button.is-outlined.is-light {
  border-color: var(--color-text-light);
  color: var(--color-text-light);
  background-color: transparent;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.button.is-outlined.is-light:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Slight white background */
  border-color: var(--color-text-light);
  color: var(--color-text-light);
  transform: translateY(-5px) scale(1.02); /* Lift and slightly enlarge */
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* Form Elements (Global Styles) */
.input,
.textarea {
  font-family: var(--font-body);
  border-radius: 8px; /* Slightly rounded corners */
  padding: 12px 15px; /* Increased padding */
  border: 1px solid #dbdbdb;
  box-shadow: none;
  transition: all var(--transition-duration) ease-in-out;
  background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--color-text-dark); /* Ensure dark text in input */
}

.input:focus,
.textarea:focus {
  border-color: var(--color-accent-orange);
  box-shadow: 0 0 8px rgba(255, 87, 34, 0.4); /* Stronger subtle glow */
  background-color: #ffffff; /* Solid white on focus */
}

.modern-input::placeholder,
.modern-textarea::placeholder {
  color: #aaa;
  font-family: var(--font-body);
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text-dark);
}

/* Glassmorphism Styles */
.card-glassmorphism {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur)); /* Safari support */
  background-color: rgba(255, 255, 255, var(--glass-bg-opacity));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, var(--glass-shadow-opacity));
  border-radius: var(--glass-border-radius);
  color: var(--color-text-dark); /* Default text for light glass cards */
  overflow: hidden;
  transition: transform var(--transition-duration) var(--transition-spring),
    box-shadow var(--transition-duration) ease-in-out;
  display: flex; /* Use flex for internal layout */
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* Distribute space */
  height: fit-content; /* Ensure cards in columns have same height */
}

.card-glassmorphism:hover {
  transform: translateY(-7px); /* Lift effect */
  box-shadow: 0 15px 40px 0 rgba(0, 0, 0, var(--glass-shadow-opacity) * 1.3);
}

.card-glassmorphism .card-content {
  text-align: center; /* Center content in cards */
  padding: 1.5rem;
  flex-grow: 1; /* Allow content to grow */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dark theme glassmorphism for dark sections */
.card-dark-theme {
  background-color: rgba(0, 0, 0, var(--glass-bg-opacity));
  border: 1px solid rgba(0, 0, 0, var(--glass-border-opacity));
  color: var(--color-text-light);
}

.card-dark-theme .title,
.card-dark-theme h3 {
  color: var(--color-text-light);
  text-shadow: none; /* No extra shadow on dark cards */
}

.card-dark-theme .content p {
  color: rgba(255, 255, 255, 0.8); /* Lighter white for text */
}

/* Card Images */
.card-image {
  width: 100%;
  height: 220px; /* Fixed height for consistency */
  overflow: hidden; /* Hide overflow */
  display: flex; /* Use flex to center */
  align-items: center;
  justify-content: center;
  position: relative; /* For overlay */
  background-color: #eee; /* Placeholder background */
}

.card-image figure {
  margin: 0; /* Reset Bulma figure margin */
  width: 100%;
  height: 100%;
  display: flex; /* Use flex to center content inside figure */
  align-items: center;
  justify-content: center;
}

.card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the area */
  object-position: center; /* Center the image */
  transition: transform var(--transition-duration) ease-in-out;
}

.card-glassmorphism:hover .card-image img {
  transform: scale(1.08); /* Slight zoom on hover */
}

.image-overlay {
  /* Overlay for image text readability (if text was on image) - applies via JS or specific CSS if text is dynamic */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.5)
  ); /* Subtle dark overlay */
  opacity: 0;
  transition: opacity var(--transition-duration) ease-in-out;
  pointer-events: none; /* Allow clicks to pass through */
}

/* Testimonials Section */
#testimonials .card-content {
  /* Text color handled by card-dark-theme */
  text-align: center; /* Ensure testimonial text is centered */
  padding: 2rem; /* Increased padding */
}

#testimonials .card-content p {
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

#testimonials .card-content .has-text-weight-bold {
  font-family: var(--font-heading); /* Use heading font for name */
  color: var(--color-accent-orange); /* Accent color for name */
  font-size: 1.1em;
}

/* Clientele Section */
.client-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all var(--transition-duration) ease-in-out;
  display: flex; /* Use flex to center */
  align-items: center;
  justify-content: center;
  width: 128px; /* Larger logos */
  height: 128px;
  margin: 0 auto; /* Center the figure */
  padding: 10px; /* Internal padding */
}

.client-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.client-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Use contain to show entire logo */
  margin: 0 auto; /* Ensure image inside figure is centered */
}

/* External Resources Section */
.external-link-card {
  display: block; /* Make the whole panel clickable */
  text-decoration: none;
  transition: transform var(--transition-duration) var(--transition-spring),
    box-shadow var(--transition-duration) ease-in-out;
  border-radius: var(--glass-border-radius); /* Apply glass border radius */
  overflow: hidden; /* Ensure internal elements respect radius */
}

.external-link-card:hover {
  transform: translateY(-7px); /* Lift effect */
  box-shadow: 0 15px 40px 0 rgba(0, 0, 0, var(--glass-shadow-opacity) * 1.3);
}

.external-link-card .panel-heading {
  background-color: rgba(
    255,
    255,
    255,
    0.1
  ); /* Lighter background for heading */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-light);
  padding: 1em 1.5em; /* Increased padding */
  font-size: 1.1em;
}

.external-link-card .panel-block {
  background-color: rgba(0, 0, 0, var(--glass-bg-opacity));
  color: var(--color-text-light);
  padding: 1.5em; /* Increased padding */
  font-size: 0.95em;
  line-height: 1.7;
  flex-grow: 1; /* Allow content to grow */
}

/* Footer */
.footer {
  padding: 4rem 1.5rem 2rem; /* Increased padding */
  background-color: var(--color-background-dark);
  color: var(--color-text-light);
}

.footer .title {
  color: var(--color-text-light);
  font-size: 1.6em;
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li {
  margin-bottom: 0.75rem; /* Increased spacing */
}

.footer a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition-duration) var(--transition-ease-in-out),
    text-decoration var(--transition-duration) ease;
  font-weight: 400; /* Regular weight for links */
}

.footer a:hover {
  color: var(--color-accent-orange);
  text-decoration: underline;
}

/* Footer Contact Info */
.footer p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.footer .content p {
  margin-bottom: 0; /* Remove margin for copyright */
}

/* Reveal Animations (handled by ScrollReveal JS) */
.reveal-item {
  visibility: hidden; /* Initially hidden */
}

/* Specific Page Styles (about, terms, privacy, success) */
body.page-body {
  /* Placeholder class for body on specific pages */
  background-color: var(
    --color-background-light
  ); /* Ensure a default background */
  color: var(--color-text-dark);
}

.page-content-section {
  padding-top: 120px; /* Ensure content is below fixed header */
  padding-bottom: 4rem;
  min-height: calc(
    100vh - 180px
  ); /* Ensure decent height, considering header and footer */
  display: flex; /* Use flex to potentially center content vertically if it's short */
  flex-direction: column;
}

.page-content-section .container {
  flex-grow: 1; /* Allow container to fill space */
}

.page-content-section h1.title {
  margin-bottom: 2rem;
  color: var(--color-primary); /* Use primary color for page titles */
}

.page-content-section p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* Style for success.html */
.success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  background-color: var(
    --color-background-light-alt1
  ); /* Light Greenish Grey background */
  color: var(--color-text-dark);
  padding: 2rem; /* Ensure padding on small screens */
}

.success-box {
  max-width: 600px;
  padding: 3rem; /* Increased padding */
  border-radius: 15px; /* Larger border radius */
  background-color: rgba(255, 255, 255, 0.95); /* Almost opaque white */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.success-box h1 {
  color: var(--color-accent-green);
  font-size: 2.5em;
  margin-bottom: 1rem;
}

.success-box p {
  font-size: 1.1em;
  margin-bottom: 2rem;
}

.success-box .button {
  margin-top: 1rem; /* Adjust margin */
}

/* Utility Classes */
.has-text-grey-darker {
  color: #4a4a4a !important; /* Bulma default, good contrast */
}

.has-text-grey-light {
  color: #dbdbdb !important; /* Bulma default, good contrast on dark backgrounds */
}

.image-container {
  position: relative; /* For image overlay */
  /* Centering handled in card-image styles */
}