/* style.css */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
  /* Futuristic Triad-Inspired Color Palette */
  --primary-color: #0A7E8C; /* Deep Teal - Main interactive elements */
  --primary-color-darker: #075E68;
  --primary-color-lighter: #0FB0C4;

  --secondary-color: #6A0DAD; /* Vibrant Purple - Contrasting elements, backgrounds */
  --secondary-color-darker: #4B097A;
  --secondary-color-lighter: #8D3FD9;

  --accent-color: #FFD700; /* Bright Gold/Yellow - Highlights, CTAs, glows */
  --accent-color-darker: #CCAB00;

  /* Neutral & Text Colors */
  --bg-dark-primary: #12181b; /* Very dark, almost black - main page background */
  --bg-dark-secondary: #1f272b; /* Dark grey - card backgrounds, secondary sections */
  --bg-dark-tertiary: #2a3439; /* Slightly lighter dark grey */
  
  --bg-light-primary: #f8f9fa; /* Bootstrap light - for light sections */
  --bg-light-secondary: #ffffff; /* White - for cards on light background */

  --text-light-primary: #EAEAEA; /* Main text on dark backgrounds */
  --text-light-secondary: #b0bec5; /* Subdued text on dark backgrounds */
  --text-dark-primary: #212529;   /* Main text on light backgrounds */
  --text-dark-secondary: #495057; /* Subdued text on light backgrounds */

  --border-color-dark: rgba(255, 255, 255, 0.1);
  --border-color-light: rgba(0, 0, 0, 0.1);

  /* Fonts */
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Transitions & Shadows */
  --transition-speed: 0.3s;
  --transition-effect: ease-in-out;
  --transition-main: all var(--transition-speed) var(--transition-effect);

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-futuristic: 0 0 15px var(--primary-color-lighter), 0 0 30px var(--secondary-color-lighter);
  --shadow-glow-accent: 0 0 8px var(--accent-color), 0 0 12px var(--accent-color-darker);

  /* Border Radius */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.8rem;

  /* Header Height - for offsetting content */
  --header-height: 70px; /* Adjust if navbar height changes */
}

/*--------------------------------------------------------------
# Base Styles
--------------------------------------------------------------*/
body {
  font-family: var(--font-body);
  background-color: var(--bg-dark-primary);
  color: var(--text-light-primary);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-light-primary); /* Default for dark theme */
  margin-bottom: 0.75em;
}

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

.section-title {
  color: var(--primary-color-lighter);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 10px;
  position: relative;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.section-title::after {
  content: "";
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}

.section-title-light {
  color: var(--text-light-primary); /* For dark backgrounds */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.section-title-light::after {
  background: linear-gradient(90deg, var(--primary-color-lighter), var(--accent-color));
}

/* Ensure dark text on light backgrounds */
.bg-light-subtle, .bg-light {
  color: var(--text-dark-primary) !important;
}
.bg-light-subtle h1, .bg-light-subtle h2, .bg-light-subtle h3, .bg-light-subtle h4, .bg-light-subtle h5, .bg-light-subtle h6,
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6 {
  color: var(--text-dark-primary) !important;
}
.bg-light-subtle .section-title, .bg-light .section-title {
   color: var(--primary-color) !important;
}
.bg-light-subtle p, .bg-light p, .bg-light-subtle .lead, .bg-light .lead {
  color: var(--text-dark-secondary) !important;
}
.bg-light-subtle .text-muted, .bg-light .text-muted {
    color: #6c757d !important; /* Bootstrap's default text-muted */
}


a {
  color: var(--primary-color-lighter);
  text-decoration: none;
  transition: var(--transition-main);
}
a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Global Button Styles
--------------------------------------------------------------*/
.btn, button, input[type='submit'], input[type='button'] {
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 12px 30px;
  border-radius: var(--border-radius-md);
  transition: var(--transition-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary, .futuristic-button {
  background-color: var(--primary-color);
  color: var(--text-light-primary);
  border-color: var(--primary-color);
  box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); /* Assuming --primary-color-rgb is defined or use a static value */
}
.btn-primary:hover, .futuristic-button:hover {
  background-color: var(--primary-color-darker);
  border-color: var(--primary-color-darker);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4);
}

.btn-outline-primary, .futuristic-button-outline {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-primary:hover, .futuristic-button-outline:hover {
  background-color: var(--primary-color);
  color: var(--text-light-primary);
  box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.2);
}

/* Add this if you use --primary-color-rgb for box-shadow */
:root {
  --primary-color-rgb: 10, 126, 140; /* RGB for #0A7E8C */
}

/* Link-style buttons */
.btn-link.futuristic-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: bold;
  padding: 0;
  border: none;
  background: none;
}
.btn-link.futuristic-link:hover {
  color: var(--primary-color-lighter);
  text-decoration: underline;
}


/*--------------------------------------------------------------
# Header / Navbar
--------------------------------------------------------------*/
.navbar {
  background-color: rgba(18, 24, 27, 0.85); /* --bg-dark-primary with opacity */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.8rem 0;
  box-shadow: var(--shadow-md);
  height: var(--header-height);
}
.navbar-brand {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text-light-primary) !important;
  letter-spacing: 1px;
}
.navbar-brand .brand-accent {
  color: var(--primary-color);
}
.navbar .nav-link {
  color: var(--text-light-secondary) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  position: relative;
}
.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--accent-color);
  transition: width var(--transition-speed) var(--transition-effect);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--text-light-primary) !important;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 70%;
}

.navbar-toggler {
  border-color: var(--border-color-dark);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28234, 234, 234, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--bg-dark-secondary);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-top: 0.5rem;
  }
  .navbar .nav-link {
    margin-bottom: 0.5rem;
  }
  .navbar .nav-link::after {
    left: 0.5rem;
    transform: translateX(0);
  }
}

/* Offset for fixed header */
.page-content section, /* For standalone pages like about.html, terms.html, etc. */
main > section:first-child { /* For ./ sections, if not hero */
    padding-top: calc(var(--header-height) + 30px); /* Add some breathing room */
}
/* Hero specific offset if it's the first element after header */
#hero {
    padding-top: var(--header-height); /* Hero usually fills screen height from top */
}
.page-content {
    padding-top: var(--header-height); /* Base for all sub-pages main content */
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
  min-height: 85vh; /* Reduced from 100vh for less empty space */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-section .container {
  position: relative;
  z-index: 2;
}
.hero-section h1 {
  color: #FFFFFF !important; /* Strictly white text as per requirement */
  font-size: 3.5rem;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.hero-section p.lead {
  color: #FFFFFF !important; /* Strictly white text */
  font-size: 1.3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 70vh;
  }
  .hero-section h1 {
    font-size: 2.5rem;
  }
  .hero-section p.lead {
    font-size: 1.1rem;
  }
}


/*--------------------------------------------------------------
# Generic Card Styles
--------------------------------------------------------------*/
.card {
  background-color: var(--bg-dark-secondary);
  border: 1px solid var(--border-color-dark);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-main);
  display: flex; /* For flex properties like flex-direction */
  flex-direction: column; /* Stack image and content vertically */
  /* align-items: center; Centers card-image and card-body if they don't take full width */
  text-align: center; /* Center text content */
  overflow: hidden; /* Ensure content fits rounded corners */
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2), var(--shadow-futuristic);
}

.card-image {
  width: 100%;
  height: 200px; /* Fixed height for image container */
  overflow: hidden;
  /* margin-bottom: 1rem; Handled by card-body padding */
  /* display: flex; justify-content: center; align-items: center; Not needed if img is 100% */
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop and center image */
  transition: transform var(--transition-speed) var(--transition-effect);
  display: block; /* Remove extra space below image */
}
.card:hover .card-image img {
  transform: scale(1.08);
}

.card-body {
  padding: 1.5rem;
  flex-grow: 1; /* Allows card body to take remaining space for equal height cards in a row */
  display: flex;
  flex-direction: column;
}
.card-title {
  color: var(--primary-color-lighter);
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}
.card-text {
  color: var(--text-light-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  flex-grow: 1; /* Pushes elements below (like price/button) to the bottom */
}
.card .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-top: auto; /* Pushes price to bottom if card-text doesn't fill space */
    padding-top: 1rem; /* Space above price */
}

/* Cards on light background */
.bg-light-subtle .card, .bg-light .card {
    background-color: var(--bg-light-secondary);
    border-color: var(--border-color-light);
    box-shadow: var(--shadow-sm);
}
.bg-light-subtle .card:hover, .bg-light .card:hover {
    box-shadow: var(--shadow-md);
}
.bg-light-subtle .card-title, .bg-light .card-title {
    color: var(--primary-color);
}
.bg-light-subtle .card-text, .bg-light .card-text {
    color: var(--text-dark-secondary);
}
.bg-light-subtle .card .price, .bg-light .card .price {
    color: var(--secondary-color); /* Different price color on light bg */
}


/* Futuristic Card Style (Example for Pricing) */
.futuristic-card {
  border-left: 3px solid var(--primary-color);
  border-right: 3px solid var(--secondary-color);
}
.futuristic-card .card-title {
    text-shadow: 0 0 5px var(--primary-color-lighter);
}

/* For cards with background images and text overlay */
.card-bg-image-overlay {
  position: relative;
  color: #fff; /* Ensure text is white */
}
.card-bg-image-overlay .card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.card-bg-image-overlay .card-image::after { /* Overlay */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.7));
}
.card-bg-image-overlay .card-body {
  position: relative;
  z-index: 1;
}

/*--------------------------------------------------------------
# Sections Styling
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden; /* For animations that might go outside bounds temporarily */
}

/* Statistics Section */
#statistics .statistic-widget {
  background-color: var(--bg-dark-secondary);
  border-radius: var(--border-radius-lg);
  border-left: 4px solid var(--primary-color);
  transition: var(--transition-main);
}
#statistics .statistic-widget:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-glow-accent);
}
#statistics .statistic-widget .animated-icon i {
  font-size: 2.5rem;
  color: var(--accent-color);
  transition: var(--transition-main);
  /* Add actual animation via JS if 'animated-icon' means more than static */
}
#statistics .statistic-widget:hover .animated-icon i {
  transform: scale(1.1) rotate(5deg);
  color: var(--primary-color-lighter);
}
#statistics .statistic-widget h3 {
  color: var(--text-light-primary);
  font-size: 2.8rem;
}
#statistics .statistic-widget p {
  color: var(--text-light-secondary);
}
.bg-light-subtle #statistics .statistic-widget {
    background-color: var(--bg-light-secondary);
    border-color: var(--primary-color);
}
.bg-light-subtle #statistics .statistic-widget h3 {
    color: var(--text-dark-primary);
}
.bg-light-subtle #statistics .statistic-widget p {
    color: var(--text-dark-secondary);
}


/* History Section */
#history .progress-indicator .progress {
    height: 1.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--bg-dark-tertiary);
}
#history .futuristic-progress-bar {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: var(--border-radius-md);
    font-weight: bold;
    color: var(--text-light-primary);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.bg-light-subtle #history .progress-indicator .progress {
    background-color: #e9ecef; /* Bootstrap default light progress bg */
}


/* Behind the Scenes Section */
#behind-the-scenes {
    color: var(--text-light-primary); /* Ensuring text is light on this dark bg section */
}
#behind-the-scenes .section-title-light {
    color: var(--text-light-primary);
}
#behind-the-scenes p, #behind-the-scenes .lead {
    color: var(--text-light-secondary); /* Subtler text */
}
#behind-the-scenes .card {
    background-color: rgba(44, 44, 68, 0.7); /* --bg-dark-3 with transparency */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#behind-the-scenes .card-title {
    color: var(--primary-color-lighter);
}
#behind-the-scenes .card-text {
    color: var(--text-light-secondary);
}
#behind-the-scenes .form-check-label {
    color: var(--text-light-primary);
}
/* Switch styling */
.futuristic-switch .form-check-input {
  background-color: var(--bg-dark-tertiary);
  border-color: var(--border-color-dark);
  width: 3em;
  height: 1.5em;
}
.futuristic-switch .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.futuristic-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.3);
}

/* Team Section */
#team .team-card .card-image img {
  border: 4px solid var(--bg-dark-tertiary);
  box-shadow: var(--shadow-md);
}
#team .team-card:hover .card-image img {
  border-color: var(--primary-color);
}
.bg-light-subtle #team .team-card .card-image img {
    border-color: #dee2e6; /* Bootstrap's light border */
}
.bg-light-subtle #team .team-card:hover .card-image img {
    border-color: var(--primary-color);
}

/* News Section */
#news .news-card .card-text small {
    color: var(--text-light-secondary);
    font-style: italic;
}
.bg-light-subtle #news .news-card .card-text small {
    color: var(--text-dark-secondary);
}

/* External Links Section */
#external-links .list-group-item {
    background-color: var(--bg-dark-secondary);
    border-color: var(--border-color-dark);
    color: var(--text-light-secondary);
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-sm); /* Slight rounding */
}
#external-links .list-group-item:hover {
    background-color: var(--bg-dark-tertiary);
    color: var(--text-light-primary);
    transform: translateX(5px);
}
#external-links .list-group-item .badge {
    background-color: var(--primary-color) !important; /* Override Bootstrap if needed */
    color: white;
}
.bg-light-subtle #external-links .list-group-item {
    background-color: var(--bg-light-secondary);
    border-color: var(--border-color-light);
    color: var(--text-dark-secondary);
}
.bg-light-subtle #external-links .list-group-item:hover {
    background-color: #e9ecef;
    color: var(--text-dark-primary);
}


/* Contact Section */
.bg-gradient-contact {
  background: linear-gradient(135deg, var(--secondary-color-darker) 0%, var(--primary-color-darker) 100%);
  color: var(--text-light-primary); /* Ensure main text is light */
}
.bg-gradient-contact .section-title-light {
  color: #fff;
}
.bg-gradient-contact .lead {
  color: var(--text-light-secondary) !important; /* Ensure lead text is also light */
}
.futuristic-form {
  background-color: rgba(31, 39, 43, 0.7); /* --bg-dark-secondary with alpha */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 2rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color-dark);
}
.futuristic-form .form-label {
  color: var(--text-light-secondary);
  font-weight: 600;
}
.futuristic-form .form-control,
.futuristic-form .form-select {
  background-color: var(--bg-dark-tertiary);
  border: 1px solid var(--border-color-dark);
  color: var(--text-light-primary);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem 1rem;
}
.futuristic-form .form-control:focus,
.futuristic-form .form-select:focus {
  background-color: var(--bg-dark-tertiary);
  color: var(--text-light-primary);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}
.futuristic-form .form-control::placeholder {
  color: var(--text-light-secondary);
  opacity: 0.7;
}
.futuristic-form .form-check-label {
  color: var(--text-light-secondary);
}
.futuristic-form .form-check-input {
  background-color: var(--bg-dark-tertiary);
  border-color: var(--border-color-dark);
}
.futuristic-form .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.futuristic-form .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25);
}
.contact-info-item i {
    color: var(--accent-color);
}
.contact-info-item h4 {
    color: var(--primary-color-lighter);
}
.contact-info-item p {
    color: var(--text-light-secondary);
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  background-color: var(--bg-dark-primary);
  border-top: 3px solid var(--primary-color);
  padding: 40px 0;
  color: var(--text-light-secondary);
}
footer h5 {
  color: var(--text-light-primary);
  font-size: 1.3rem;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--primary-color);
}
footer .brand-accent {
  color: var(--primary-color);
}
footer p {
  font-size: 0.9rem;
}
footer .list-unstyled li {
  margin-bottom: 0.5rem;
}
footer .footer-link {
  color: var(--text-light-secondary);
  transition: var(--transition-main);
  font-weight: 500;
}
footer .footer-link:hover {
  color: var(--accent-color);
  text-decoration: none;
  padding-left: 5px;
}
footer .footer-divider {
  border-color: var(--border-color-dark);
  margin: 2rem 0;
}
footer .mt-3 i { /* Icons in contact info */
    color: var(--primary-color-lighter);
}

/*--------------------------------------------------------------
# Specific Page Styles
--------------------------------------------------------------*/
/* Success Page */
#success-message-content {
  /* Ensured by parent main in HTML: min-vh-100, d-flex, align-items-center, justify-content-center */
}
.futuristic-checkmark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: var(--accent-color);
  stroke-miterlimit: 10;
  margin: 0 auto 2rem;
  box-shadow: inset 0px 0px 0px var(--accent-color);
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.futuristic-checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: var(--accent-color);
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.futuristic-checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
  100% { stroke-dashoffset: 0; }
}
@keyframes scale {
  0%, 100% { transform: none; }
  50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
  100% { box-shadow: inset 0px 0px 0px 50px var(--accent-color); }
}

/* Privacy & Terms pages content offset - handled by .page-content and section specific padding-top */
#privacy-policy-content ul li,
#terms-conditions-content ul li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
}
#privacy-policy-content ul li::before,
#terms-conditions-content ul li::before {
  content: "\2022"; /* Bullet */
  color: var(--primary-color);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  position: absolute;
  left: 0;
}

/*--------------------------------------------------------------
# Animations on Scroll
--------------------------------------------------------------*/
.animate-on-scroll {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.8s; /* Slower, smoother animation */
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth with overshoot */
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none !important; /* Override specific transforms when visible */
}

.animate-on-scroll[data-animation="fadeIn"] {
    /* Opacity handled by base .animate-on-scroll */
}
.animate-on-scroll[data-animation="fadeInUp"] {
  transform: translateY(60px);
}
.animate-on-scroll[data-animation="fadeInDown"] {
  transform: translateY(-60px);
}
.animate-on-scroll[data-animation="fadeInLeft"] {
  transform: translateX(-60px);
}
.animate-on-scroll[data-animation="fadeInRight"] {
  transform: translateX(60px);
}
.animate-on-scroll[data-animation="zoomIn"] {
  transform: scale(0.8);
}

/* Apply delays if specified by JS or inline styles */
.animate-on-scroll[data-delay="100"].is-visible { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="200"].is-visible { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="300"].is-visible { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="400"].is-visible { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="500"].is-visible { transition-delay: 0.5s; }
.animate-on-scroll[data-delay="600"].is-visible { transition-delay: 0.6s; }


/*--------------------------------------------------------------
# Cookie Consent Popup
--------------------------------------------------------------*/
#cookieConsentPopup {
  /* Styles are mostly inline in HTML for simplicity as requested */
  /* Ensure it's above other content */
  z-index: 9999; 
  font-family: var(--font-body); /* Match site font */
}
#cookieConsentPopup p a {
  color: var(--primary-color-lighter); /* Brighter link in popup */
}
#acceptCookieButton:hover {
  background-color: var(--primary-color-darker) !important; /* Ensure hover works for inline style */
}

/*--------------------------------------------------------------
# Utility Classes (if needed beyond Bootstrap)
--------------------------------------------------------------*/
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }

/* Background image with overlay utility */
.bg-image-overlay {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust darkness */
    z-index: 1;
}
.bg-image-overlay > * { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    h1 { font-size: 2.4rem; }
    h2 { font-size: 2rem; }
    section { padding: 50px 0; }
    .page-content section, main > section:first-child {
        padding-top: calc(var(--header-height) + 20px);
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    .section-title { font-size: 1.8rem; }
    .btn, button, input[type='submit'] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .card-image {
        height: 180px;
    }
}