/* style.css */
/*
  Design System: Creative
  Trend: Hyperrealistic Textures
  Color Scheme: Complementary (Primary: Deep Blue, Accent: Amber/Gold)
  Animation Style: Hand-drawn Animations
  Fonts: Oswald (Headings), Nunito (Body)
*/

/* -------------------------------------------------------------------------- */
/*                               CSS Variables                                */
/* -------------------------------------------------------------------------- */
:root {
  /* Primary Palette (Complementary: Blue and Yellow/Orange) */
  --primary-color: #0A2B4C;
  /* Deep Blue - Space Cadet */
  --primary-color-darker: #071f38;
  --primary-color-lighter: #1a4a7c;
  /* A slightly lighter blue for gradients or subtle backgrounds */

  --accent-color: #FFC107;
  /* Amber/Gold */
  --accent-color-darker: #e0a800;
  --accent-color-text: var(--primary-color);
  /* Text color for elements with accent background */

  /* Neutral Palette */
  --text-color-darkest: #1a1a1a;
  /* For very important headings, max contrast */
  --text-color-dark: #222222;
  /* For main headings, strong contrast */
  --text-color-medium: #333333;
  /* For general body text */
  --text-color-light: #555555;
  /* For secondary text, card text */
  --text-color-on-dark-bg: #E0E0E0;
  /* For text on dark backgrounds like footer */
  --text-color-on-dark-bg-hover: var(--accent-color);
  --text-color-white: #FFFFFF;

  --bg-color-page: #F8F9FA;
  /* Neutral Light - Page background */
  --bg-color-section-alt: #FFFFFF;
  /* Alternative section background (e.g., cards) */
  --bg-color-dark: var(--primary-color);
  /* For dark sections like footer */

  --border-color-light: #dee2e6;
  --border-color-medium: #ced4da;
  --border-color-strong: #adb5bd;

  /* Gradients & Textures (Placeholders - actual textures via url()) */
  --gradient-primary-diagonal: linear-gradient(135deg, var(--primary-color-lighter), var(--primary-color));
  --gradient-accent-diagonal: linear-gradient(135deg, var(--accent-color), #ffdb58);
  /* Lighter gold */

  /* data-prompt for texture-subtle-paper: "Seamless, high-quality, light cream or off-white, subtly textured paper background." */
  /* --texture-subtle-paper: url('image/textures/subtle-paper-light.jpg'); */
  /* data-prompt for texture-concrete-wall: "Neutral gray, hyperrealistic concrete wall texture, suitable for background of a modern section." */
  /* --texture-concrete-wall: url('image/textures/concrete-wall.jpg'); */
  /* data-prompt for texture-brushed-metal-light: "Clean, light silver or gray brushed aluminum texture, horizontal grain, for navigation or accent panels." */
  /* --texture-brushed-metal-light: url('image/textures/brushed-metal-light.jpg'); */

  /* Fonts */
  --font-family-headings: 'Oswald', sans-serif;
  --font-family-body: 'Nunito', sans-serif;

  /* Spacing & Sizing */
  --spacing-unit: 1rem;
  /* 16px base */
  --border-radius-sm: 0.25rem;
  /* 4px */
  --border-radius-md: 0.375rem;
  /* 6px - For buttons, inputs */
  --border-radius-lg: 0.5rem;
  /* 8px - For cards */

  /* Transitions & Animations */
  --transition-short: all 0.2s ease-in-out;
  --transition-medium: all 0.3s ease-in-out;
  --transition-long: all 0.5s ease-in-out;
  --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  /* Common easing for smooth animations */

  /* Shadows - Subtle for hyperrealism, more pronounced for creative depth */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  /* Softer shadow */
  --box-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.12);
  /* Deeper shadow for hover or prominent elements */
  --box-shadow-accent-glow: 0 0 15px rgba(255, 193, 7, 0.3);
  /* Glow for accent elements on hover */
  --text-shadow-subtle: 1px 1px 3px rgba(0, 0, 0, 0.3);
  --text-shadow-strong: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------------------------- */
/*                               Global Styles                                */
/* -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-body);
  color: var(--text-color-medium);
  background-color: var(--bg-color-page);
  line-height: 1.7;
  /* Improved readability */
  font-size: 1rem;
  /* 16px */
  overflow-x: hidden;
  /* Prevent horizontal scroll from animations */
}

/* Ensure main content of legal pages (privacy, terms) doesn't overlap fixed header */
body.page-legal main {
  /* Add class="page-legal" to body of privacy.html and terms.html */
  padding-top: 100px;
}

/* Fallback if body class is not added, targets first section after a page-header */
.page-header+.content-section,
main>section:first-child:not(.page-header):not(#hero):not(.parallax-section) {
  /* For pages without page-header but need top padding */
  padding-top: 100px;
}


/* Success page specific styling */
body.page-success {
  /* Add class="page-success" to body of success.html */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page-success main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The success.html already has inline styles achieving this, this CSS ensures it if those are removed */
.success-container {
  padding: var(--spacing-unit);
}


/* -------------------------------------------------------------------------- */
/*                                 Typography                                 */
/* -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-family-headings);
  color: var(--primary-color);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

h1,
.h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

/* Responsive font size */
h2,
.h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

h3,
.h3 {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
}

h4,
.h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

p {
  margin-bottom: var(--spacing-unit);
  color: var(--text-color-light);
}

p.lead {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-color-medium);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: var(--transition-short);
}

a:hover {
  color: var(--accent-color-darker);
  text-decoration: underline;
}

.section-title {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 3);
  /* 48px */
  color: var(--text-color-dark);
  font-weight: 700;
  padding-top: calc(var(--spacing-unit) * 1.25);
  /* 20px */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  /* Creative touch */
  position: relative;
}

/* "Hand-drawn" underline effect for section titles */
.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background-color: var(--accent-color);
  margin: calc(var(--spacing-unit) * 0.5) auto 0;
  border-radius: 2px;
  /* Animation potential: draw in on scroll */
}

/* -------------------------------------------------------------------------- */
/*                            Global Components                               */
/* -------------------------------------------------------------------------- */

/* Buttons */
.btn,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-family-headings);
  padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.875);
  /* Approx 12px 30px */
  font-size: calc(var(--spacing-unit) * 1.1);
  /* Approx 1.1rem */
  border-radius: var(--border-radius-md);
  transition: var(--transition-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 2px solid transparent;
  /* Slightly thicker border for a bolder look */
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  display: inline-block;
  /* Ensure proper spacing and hover effects */
  line-height: 1.5;
  /* Standard Bootstrap line-height for buttons */
}

.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-color), 0.5);
  /* Focus ring with accent color */
}

/* Primary Button (Bootstrap class enhanced) */
.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-color-text);
  box-shadow: var(--box-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-color-darker);
  border-color: var(--accent-color-darker);
  color: var(--accent-color-text);
  transform: translateY(-3px) scale(1.02);
  /* More dynamic hover */
  box-shadow: var(--box-shadow-md), var(--box-shadow-accent-glow);
}

/* Outline Primary Button */
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary-color);
  color: var(--text-color-white);
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-sm);
}

/* Outline Secondary Button (for "Read More" or less emphasis) */
.btn-outline-secondary {
  color: var(--text-color-light);
  border-color: var(--border-color-medium);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--text-color-light);
  color: var(--text-color-white);
  border-color: var(--text-color-light);
  transform: translateY(-2px);
  box-shadow: var(--box-shadow-sm);
}

/* Styling for "Read More" type links if they use .btn-sm */
.card-body .btn-sm.btn-outline-primary,
.card-body .btn-sm.btn-outline-secondary {
  font-family: var(--font-family-headings);
  color: var(--accent-color);
  border-color: transparent;
  /* Make it look more like a link */
  padding: 0.25rem 0;
  /* Minimal padding */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  /* For ::after pseudo-element */
}

.card-body .btn-sm.btn-outline-primary::after,
.card-body .btn-sm.btn-outline-secondary::after {
  content: '→';
  margin-left: 8px;
  transition: transform 0.2s var(--ease-out-cubic);
  display: inline-block;
}

.card-body .btn-sm.btn-outline-primary:hover,
.card-body .btn-sm.btn-outline-secondary:hover {
  color: var(--accent-color-darker);
  background-color: transparent;
  border-color: transparent;
  transform: none;
  /* Remove button default transform */
  box-shadow: none;
}

.card-body .btn-sm.btn-outline-primary:hover::after,
.card-body .btn-sm.btn-outline-secondary:hover::after {
  transform: translateX(5px);
}


/* Cards */
.card {
  border: none;
  border-radius: var(--border-radius-lg);
  background-color: var(--bg-color-section-alt);
  box-shadow: var(--box-shadow-md);
  transition: var(--transition-medium);
  display: flex;
  /* For consistent structure and centering if needed */
  flex-direction: column;
  /* Stack image, body, footer */
  height: 100%;
  /* Ensure cards in a row are same height if using Bootstrap's .h-100 */
  /* Hyperrealistic texture: subtle paper or material texture could be applied as background */
  /* background-image: var(--texture-subtle-paper); */
  /* background-size: cover; */
  /* If texture is not seamless tile */
  text-align: center;
  /* Center inline/inline-block children and text by default */
}

.card:hover {
  transform: translateY(-8px) scale(1.01);
  /* Slightly more pronounced hover */
  box-shadow: var(--box-shadow-lg);
}

.card-image {
  /* Wrapper for <img> tag */
  width: 100%;
  height: 200px;
  /* Fixed height for consistent card image sizes */
  overflow: hidden;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  margin: 0 auto;
  /* Center block element if its width is less than parent */
  display: flex;
  /* Center the image itself if it's smaller than container */
  align-items: center;
  justify-content: center;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crucial for fixed height containers */
  transition: transform var(--transition-long) var(--ease-out-cubic);
  display: block;
  /* Remove extra space below image */
}

.card:hover .card-image img {
  transform: scale(1.1);
  /* Zoom effect on image */
}

/* For circular images like team members */
.card-image.rounded-circle {
  height: 150px;
  /* Adjust as needed for team member */
  width: 150px;
  border-radius: 50% !important;
  /* Override Bootstrap's general .card-img-top */
  margin: var(--spacing-unit) auto;
  /* Center and add space */
}

.card-image.rounded-circle img {
  border-radius: 50%;
}


.card-body {
  padding: calc(var(--spacing-unit) * 1.5);
  /* 24px */
  flex-grow: 1;
  /* Allow card body to take remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center content vertically if card height is fixed/constrained */
  text-align: center;
  /* Default for content */
}

.card-title {
  /* Already defined in HTML, enhancing here */
  font-size: 1.5rem;
  /* Oswald */
  color: var(--primary-color);
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

.card-text {
  color: var(--text-color-light);
  font-size: 0.95rem;
  /* Nunito */
  line-height: 1.6;
  margin-bottom: var(--spacing-unit);
}

.card-text:last-child {
  margin-bottom: 0;
}

/* For cards in pricing section or similar where header/footer is distinct */
.card-header {
  background-color: var(--primary-color);
  color: var(--text-color-white);
  border-bottom: none;
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
}

.card-header .card-title {
  color: var(--text-color-white);
}

.pricing-card-title {
  font-size: 2.5rem;
  /* Larger price */
  color: var(--text-color-dark);
}

.pricing-card-title small {
  font-size: 1rem;
  color: var(--text-color-light);
}

/* Forms */
.form-control {
  border-radius: var(--border-radius-md);
  padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
  border: 1px solid var(--border-color-medium);
  transition: var(--transition-short);
  font-family: var(--font-family-body);
  background-color: var(--bg-color-section-alt);
  /* Light background for inputs */
  color: var(--text-color-medium);
}

.form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
  /* Using accent color for focus */
  background-color: var(--bg-color-section-alt);
  /* Ensure bg doesn't change drastically */
}

.form-control-lg {
  padding: calc(var(--spacing-unit) * 0.8) var(--spacing-unit);
  font-size: calc(var(--spacing-unit) * 1.1);
}

.form-label {
  font-family: var(--font-family-body);
  /* Nunito for labels */
  font-weight: 700;
  color: var(--text-color-dark);
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* Accordion (FAQ) Styling - Enhancing Bootstrap */
.accordion-item {
  margin-bottom: calc(var(--spacing-unit) * 0.75);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color-light);
  background-color: var(--bg-color-section-alt);
}

.accordion-button {
  font-family: var(--font-family-headings);
  font-size: 1.2rem;
  color: var(--primary-color);
  background-color: transparent;
  /* Let item bg show */
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.25);
}

.accordion-button:not(.collapsed) {
  color: var(--text-color-white);
  background-color: var(--primary-color);
  box-shadow: var(--box-shadow-inset);
}

.accordion-button:not(.collapsed)::after {
  /* Customizing Bootstrap's arrow */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.accordion-button:focus {
  z-index: 3;
  border-color: var(--accent-color);
  /* Accent focus */
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

.accordion-body {
  font-family: var(--font-family-body);
  padding: calc(var(--spacing-unit) * 1.25);
  color: var(--text-color-light);
  background-color: var(--bg-color-section-alt);
}

/* Progress Bars (Enhancing Bootstrap) */
.progress {
  height: 12px;
  /* Slightly thicker */
  border-radius: var(--border-radius-md);
  background-color: var(--border-color-light);
  /* More defined track */
}

.progress-bar {
  border-radius: var(--border-radius-md);
  /* Colors are Bootstrap contextual (bg-success, etc.) */
  /* Can add subtle texture or gradient */
  /* background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); */
  /* background-size: 1rem 1rem; */
}


/* List group for external resources (Enhancing Bootstrap) */
.list-group-item {
  transition: var(--transition-medium);
  border-left: 5px solid transparent;
  /* Thicker accent border on hover */
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.25);
}

.list-group-item:hover {
  background-color: #eef1f3;
  /* Slightly different light hover */
  transform: translateX(5px) scale(1.005);
  /* Subtle pop */
  border-left-color: var(--accent-color);
  box-shadow: var(--box-shadow-sm);
}

.list-group-item .card-title {
  /* Re-using .card-title for consistency if HTML uses it */
  color: var(--primary-color);
  margin-bottom: calc(var(--spacing-unit) * 0.25);
}

.list-group-item p {
  color: var(--text-color-light);
  font-size: 0.9rem;
  margin-bottom: calc(var(--spacing-unit) * 0.25);
}


/* -------------------------------------------------------------------------- */
/*                             Section Styling                                */
/* -------------------------------------------------------------------------- */
section {
  padding-top: calc(var(--spacing-unit) * 4);
  /* Default top/bottom padding for sections: 64px */
  padding-bottom: calc(var(--spacing-unit) * 4);
  position: relative;
  /* For pseudo-elements or absolute positioning within sections */
}

section.bg-light {
  /* Bootstrap class */
  background-color: var(--bg-color-page) !important;
  /* Ensuring our variable takes precedence */
}

.textured-background {
  /* Example for a concrete texture on a specific section */
  /* background-image: var(--texture-concrete-wall); */
  /* background-size: cover; */
  /* background-position: center center; */
  /* background-repeat: no-repeat; */
}

/* Hero Section */
#hero {
  min-height: 85vh;
  /* Adjust as needed, avoid fixed large min-height */
  color: var(--text-color-white);
  /* Ensures all direct text children are white */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--spacing-unit) * 3) var(--spacing-unit);
  /* 48px 16px */
  /* Parallax effect is applied via JS or inline style background-attachment: fixed */
  /* data-prompt for hero background (from HTML): "Expansive, panoramic view of a Canadian city skyline like Vancouver or Toronto at dusk, with subtle digital overlay of business growth charts and network connections, conveying innovation and success in the Canadian market. Hyperrealistic, sharp details." */
}

#hero .container {
  /* Bootstrap container inside hero */
  position: relative;
  /* To ensure content is above overlay */
  z-index: 2;
}

#hero h1 {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  /* Responsive hero title */
  color: var(--text-color-white);
  /* Explicitly white */
  text-shadow: var(--text-shadow-strong);
  /* Enhanced readability */
  font-weight: 700;
}

#hero p.lead {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  /* Responsive hero lead text */
  color: var(--text-color-white);
  /* Explicitly white */
  text-shadow: var(--text-shadow-subtle);
  max-width: 800px;
  margin: calc(var(--spacing-unit) * 1.5) auto;
  /* 24px auto */
}

#hero .btn-primary {
  /* Ensure hero button stands out */
  padding: calc(var(--spacing-unit) * 0.85) calc(var(--spacing-unit) * 2.5);
  /* Larger padding */
  font-size: calc(var(--spacing-unit) * 1.2);
}

/* Text on image overlay (general utility, also used in hero) */
.image-text-overlay {
  position: relative;
  color: var(--text-color-white);
}

.image-text-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.65));
  /* Dark overlay for readability */
  z-index: 1;
  /* Ensure overlay is behind text but above image */
  border-radius: inherit;
  /* Inherit border-radius if parent has it (e.g. cards) */
}

.image-text-overlay>* {
  /* All direct children of overlay div */
  position: relative;
  z-index: 2;
}

/* Parallax sections might also use this if text is directly on them */
.parallax-section {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Ensure parallax image has a prompt if text is overlayed */
/* e.g., style="background-image: url('image/some-bg.jpg');" data-prompt="Relevant description of background image for parallax effect" */


/* Page Headers for internal pages (About, Contact, etc.) */
.page-header {
  padding: calc(var(--spacing-unit) * 5) 0;
  /* 80px */
  color: var(--text-color-white);
  text-align: center;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  /* For overlay */
}

.page-header::before {
  /* Overlay for readability */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(10, 43, 76, 0.75), rgba(10, 43, 76, 0.85));
  /* Primary color based overlay */
  z-index: 1;
}

.page-header .container {
  position: relative;
  z-index: 2;
}

.page-header h1 {
  color: var(--text-color-white);
  text-shadow: var(--text-shadow-subtle);
  font-size: clamp(2.5rem, 5vw, 3.2rem);
}

.page-header p.lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}


/* -------------------------------------------------------------------------- */
/*                          Navigation / Header                               */
/* -------------------------------------------------------------------------- */
.navbar.sticky-top {
  /* background-color is bg-light from Bootstrap by default */
  transition: padding var(--transition-medium), background-color var(--transition-medium), box-shadow var(--transition-medium);
  /* data-prompt for navbar background if using texture: "Clean, light brushed aluminum texture for a modern website navigation bar." */
}

.navbar-brand {
  font-family: var(--font-family-headings);
  font-size: 1.8rem;
  color: var(--primary-color) !important;
  font-weight: 700;
}

.navbar-nav .nav-link {
  font-family: var(--font-family-headings);
  color: var(--text-color-dark) !important;
  margin-left: calc(var(--spacing-unit) * 0.5);
  margin-right: calc(var(--spacing-unit) * 0.5);
  padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit) !important;
  font-size: 1.05rem;
  /* Slightly smaller for nav */
  text-transform: uppercase;
  transition: color var(--transition-short);
  position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--accent-color) !important;
}

/* "Hand-drawn" underline for active/hover nav links */
.navbar-nav .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-medium) var(--ease-out-cubic);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 70%;
  /* Adjust width of underline */
}

/* Scrolled state for navbar (add with JS) */
.navbar-scrolled {
  padding-top: calc(var(--spacing-unit) * 0.5) !important;
  padding-bottom: calc(var(--spacing-unit) * 0.5) !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  /* Slightly transparent white */
  box-shadow: var(--box-shadow-md) !important;
  backdrop-filter: blur(8px);
  /* Glassmorphism effect */
  -webkit-backdrop-filter: blur(8px);
}

/* Navbar toggler icon - using Bootstrap's default structure but can be customized */
.navbar-toggler {
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon {
  /* SVG from Bootstrap, but color can be influenced */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(10, 43, 76, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* -------------------------------------------------------------------------- */
/*                                  Footer                                    */
/* -------------------------------------------------------------------------- */
footer {
  background-color: var(--bg-color-dark);
  /* Primary color */
  color: var(--text-color-on-dark-bg);
  padding-top: calc(var(--spacing-unit) * 3.5);
  padding-bottom: calc(var(--spacing-unit) * 2);
}

footer h5,
footer h6 {
  color: var(--text-color-white);
  font-family: var(--font-family-headings);
  margin-bottom: var(--spacing-unit);
}

footer p,
footer li {
  font-family: var(--font-family-body);
  color: var(--text-color-on-dark-bg);
  font-size: 0.9rem;
}

footer a {
  color: var(--text-color-on-dark-bg);
  text-decoration: none;
  transition: var(--transition-short);
}

footer a:hover {
  color: var(--text-color-on-dark-bg-hover);
  /* Accent color on hover */
  text-decoration: none;
  /* Keep no underline, or add subtle one */
}

footer hr {
  border-color: var(--primary-color-lighter);
  /* Darker separator within footer */
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

footer .list-unstyled li {
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* Footer Social Links (Text-based as requested) */
footer .list-unstyled a[target="_blank"] {
  /* Style external links slightly differently if needed */
  /* For text-based social links, ensure they are clear */
  font-weight: 500;
  /* Make them slightly bolder */
}

footer .list-unstyled a[target="_blank"]::after {
  /* Optional: add external link icon */
  /* content: ' ↗'; */
  /* Example, or use an SVG icon font if available */
  /* font-size: 0.8em; */
}

/* -------------------------------------------------------------------------- */
/*                             Utility Classes                                */
/* -------------------------------------------------------------------------- */
.text-primary {
  color: var(--primary-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.bg-primary-custom {
  background-color: var(--primary-color) !important;
}

.bg-accent-custom {
  background-color: var(--accent-color) !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

/* Glassmorphism utility class (can be applied to cards or panels) */
.glassmorphism-panel {
  background: rgba(255, 255, 255, 0.15);
  /* Very light, semi-transparent background */
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Subtle border */
  padding: calc(var(--spacing-unit) * 1.5);
}

/* -------------------------------------------------------------------------- */
/*                                Animations                                  */
/* -------------------------------------------------------------------------- */
/* Keyframes for "hand-drawn" style animations (use with AOS or GSAP) */
@keyframes sketchIn {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
    filter: blur(3px);
  }

  70% {
    transform: scale(1.02) rotate(2deg);
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.animate-sketch-in {
  animation: sketchIn 0.8s var(--ease-out-cubic) forwards;
}

/* AOS Customization (if needed beyond script.js init) */
[data-aos="fade-up-hand-drawn"] {
  opacity: 0;
  transform: translateY(40px) rotate(-2deg);
  transition-property: transform, opacity, rotate;
}

[data-aos="fade-up-hand-drawn"].aos-animate {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* -------------------------------------------------------------------------- */
/*                            Responsive Adjustments                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* Medium devices (tablets, less than 992px) */
  .section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    /* Adjust responsive font size */
    margin-bottom: calc(var(--spacing-unit) * 2.5);
  }

  #hero h1 {
    font-size: clamp(2.2rem, 5vw, 3rem);
  }

  #hero p.lead {
    font-size: clamp(1rem, 2vw, 1.3rem);
  }

  .navbar-nav .nav-link {
    padding: calc(var(--spacing-unit) * 0.8) var(--spacing-unit) !important;
    /* More tap space */
    text-align: left;
    /* Align left in collapsed menu */
  }

  .navbar-nav .nav-link::after {
    /* Adjust underline for mobile menu */
    left: var(--spacing-unit);
    transform: translateX(0);
  }

  section {
    padding-top: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 3);
  }

  body.page-legal main,
  .page-header+.content-section,
  main>section:first-child:not(.page-header):not(#hero):not(.parallax-section) {
    /* Adjust for smaller navbar height potentially */
  }
}

@media (max-width: 767.98px) {

  /* Small devices (landscape phones, less than 768px) */
  .section-title {
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

  #hero {
    min-height: 70vh;
    /* Reduce hero height */
  }

  #hero h1 {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }

  #hero p.lead {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
  }

  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    padding: calc(var(--spacing-unit) * 0.65) calc(var(--spacing-unit) * 1.5);
    /* Smaller buttons */
    font-size: calc(var(--spacing-unit) * 1);
  }

  #hero .btn-primary {
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 2);
    font-size: calc(var(--spacing-unit) * 1.1);
  }

  .card-title {
    font-size: 1.3rem;
  }

  .card-text {
    font-size: 0.9rem;
  }

  .accordion-button {
    font-size: 1.1rem;
  }

  .pricing-card-title {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {

  /* Extra small devices (portrait phones, less than 576px) */
  body {
    font-size: 0.95rem;
    /* Slightly smaller base font for very small screens */
  }

  #hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
  }

  #hero p.lead {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .display-3 {
    font-size: calc(1.775rem + 1.5vw);
  }

  /* Adjust Bootstrap display headings */
  .display-4 {
    font-size: calc(1.625rem + 1.2vw);
  }
}

/* Cookie Consent Popup Styling (from HTML, ensuring consistency) */
#cookieConsentPopup {
  /* Styles are mostly inline in HTML, but key aspects can be here */
  font-family: var(--font-family-body);
}

#cookieConsentPopup p a {
  color: var(--accent-color);
  /* Link color in cookie popup */
  text-decoration: underline;
}

#cookieConsentPopup button#acceptCookie {
  background-color: var(--accent-color);
  color: var(--accent-color-text);
  font-family: var(--font-family-headings);
  /* Other styles are inline */
}

/* Final check for element centering in cards and similar items */
.card,
.card-body,
.text-center,
/* Bootstrap class */
.team-member

/* If a custom class is used */
  {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centers flex items horizontally */
  justify-content: center;
  /* Centers flex items vertically if height is constrained */
  text-align: center;
  /* Centers inline content like text */
}

.card-image {
  /* Already styled with flex for centering content */
  margin-left: auto;
  /* Ensure block itself is centered if its width is < 100% */
  margin-right: auto;
}

/* Ensure direct children of card-body that need to be centered are if they are block elements */
.card-body>*:not(.btn):not(ul):not(ol) {
  /* Example: if a div is inside card-body */
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* max-width: 100%; /* Prevent overflow */
}

header ul{
  flex-wrap: wrap;
}