/* style.css */

/* -------------------------------------------------------------------------
   1. CSS Variables
------------------------------------------------------------------------- */
:root {
  /* Bright Color Scheme */
  --primary-color: #007AFF; /* Vibrant Blue */
  --primary-color-dark: #0056b3;
  --primary-color-light: #66b3ff;

  --accent-color: #FF9500; /* Vibrant Orange */
  --accent-color-dark: #cc7a00;
  --accent-color-light: #ffb766;

  --secondary-accent-color: #34C759; /* Bright Green */
  --secondary-accent-color-dark: #248a3d;

  --neutral-color: #F2F2F7; /* Light Gray for backgrounds */
  --neutral-color-dark: #E5E5EA;
  --neutral-color-light: #FFFFFF;

  --text-color-dark: #1C1C1E; /* Very Dark Gray for text on light backgrounds */
  --text-color-medium: #3A3A3C;
  --text-color-light: #FFFFFF; /* White text for dark backgrounds/overlays */

  --gradient-start: var(--primary-color);
  --gradient-end: var(--accent-color);
  --gradient-direction: 135deg;

  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: rgba(31, 38, 135, 0.1);
  --glass-blur: 10px;

  /* Typography */
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* Spacing & Sizing */
  --container-width: 1140px;
  --spacing-unit: 1rem; /* 16px */
  --border-radius: 8px;
  --card-border-radius: 15px;
  --header-height: 70px; /* Adjust as needed */
  --footer-height: auto; /* Will be determined by content */

  /* Transitions */
  --transition-speed-fast: 0.2s;
  --transition-speed-normal: 0.3s;
  --transition-speed-slow: 0.5s;
  --transition-timing: ease-in-out;

  /* Z-index */
  --z-index-header: 1000;
  --z-index-modal: 2000;
  --z-index-overlay: 900;
  --z-index-dropdown: 1100;
  --z-index-tooltip: 1200;
  --z-index-page-transition: 9999;
  --z-index-cookie-popup: 9999;
}

/* -------------------------------------------------------------------------
   2. Global Styles & Resets (Modern Normalize is used)
------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%; /* 16px base */
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-color-dark);
  background-color: var(--neutral-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: calc(var(--spacing-unit) * 1);
  color: var(--text-color-dark); /* Default dark for headings */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

h1 { font-size: 2.8rem; } /* ~44.8px */
h2 { font-size: 2.2rem; } /* ~35.2px */
h3 { font-size: 1.6rem; } /* ~25.6px */
h4 { font-size: 1.3rem; } /* ~20.8px */

@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.4rem; }
}

p {
  margin-bottom: calc(var(--spacing-unit) * 1);
  color: var(--text-color-medium);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed-normal) var(--transition-timing);
}
a:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

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

ul, ol {
  list-style: none;
  padding-left: 0;
}

/* Utility Classes */
.container {
  width: 90%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-unit);
  padding-right: var(--spacing-unit);
}

.text-center { text-align: center; }
.text-light { color: var(--text-color-light) !important; } /* For text on dark backgrounds */
.text-primary { color: var(--primary-color); }
.text-accent { color: var(--accent-color); }

.mb-1 { margin-bottom: var(--spacing-unit); }
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); }
.mt-1 { margin-top: var(--spacing-unit); }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2); }

.d-flex { display: flex; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }

/* -------------------------------------------------------------------------
   3. Buttons & Forms (GLOBAL STYLES)
------------------------------------------------------------------------- */
.btn, button, input[type="submit"], input[type="button"] {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.75); /* 12px 28px */
  border-radius: 50px; /* Modern pill shape */
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all var(--transition-speed-normal) var(--transition-timing);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  line-height: 1.5; /* Ensure text is vertically centered */
  letter-spacing: 0.5px;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.btn-primary,
input[type="submit"] { /* Default form submit to primary */
  background: linear-gradient(var(--gradient-direction), var(--primary-color), var(--accent-color));
  color: var(--text-color-light);
  background-size: 150% 150%; /* For hover animation */
  animation: dynamicButtonBg 8s ease infinite alternate;
}
@keyframes dynamicButtonBg {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.btn-primary:hover,
input[type="submit"]:hover {
  background-position: right center; /* Change gradient direction on hover */
}

.btn-secondary {
  background-color: var(--neutral-color-light);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border-color: var(--primary-color);
}

/* Form elements */
.form-group {
  margin-bottom: calc(var(--spacing-unit) * 1.25);
}

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: calc(var(--spacing-unit) * 0.5);
  color: var(--text-color-dark);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
  width: 100%;
  padding: calc(var(--spacing-unit) * 0.75);
  border: 1px solid var(--neutral-color-dark);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.7); /* Slightly transparent for glass effect */
  transition: border-color var(--transition-speed-normal), box-shadow var(--transition-speed-normal);
  color: var(--text-color-dark);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 122, 255), 0.25); /* Create --primary-color-rgb if needed */
}

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

/* -------------------------------------------------------------------------
   4. Glassmorphism & Backgrounds
------------------------------------------------------------------------- */
.glassmorphism {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--card-border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px 0 var(--glass-shadow);
  padding: calc(var(--spacing-unit) * 1.5);
}

.glassmorphism-bg { /* For sections with a glassmorphic background effect over an image */
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.glassmorphism-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  z-index: 0;
}
/* Ensure content in these sections is above the pseudo-element */
.glassmorphism-bg > .container {
  position: relative;
  z-index: 1;
}

/* Parallax backgrounds (basic setup, JS will enhance) */
.parallax-bg {
  background-attachment: fixed; /* Simple parallax effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.parallax-bg > .container,
.parallax-bg > .hero-content { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}


/* Dark overlay for text on background images (e.g., hero) */
.hero-overlay { /* Used in hero HTML */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
  z-index: 1;
}

/* Fallback for sections with background-image in style attr and text on top */
[style*="background-image"] {
    position: relative; /* Needed for ::before */
}
[style*="background-image"].content-section::before,
.page-header-section[style*="background-image"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    z-index: 0; /* Behind content, but above the actual background image */
}
[style*="background-image"].content-section > .container,
.page-header-section[style*="background-image"] > .container {
    position: relative;
    z-index: 1;
}
/* Ensure text in these sections is light */
[style*="background-image"].content-section h1,
[style*="background-image"].content-section h2,
[style*="background-image"].content-section h3,
[style*="background-image"].content-section p,
.page-header-section[style*="background-image"] h1,
.page-header-section[style*="background-image"] p {
    color: var(--text-color-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


/* -------------------------------------------------------------------------
   5. Header & Navigation
------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-index-header);
  transition: background-color var(--transition-speed-normal) var(--transition-timing),
              box-shadow var(--transition-speed-normal) var(--transition-timing),
              padding var(--transition-speed-normal) var(--transition-timing);
  padding: calc(var(--spacing-unit) * 0.5) 0; /* Reduced padding initially */
}
.site-header.scrolled {
  background: var(--glass-bg); /* Apply glassmorphism on scroll */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: calc(var(--spacing-unit) * 0.25) 0; /* Slightly shrink padding */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-color); /* Bright color for logo */
  text-decoration: none;
}
.logo-accent {
  color: var(--accent-color);
}
.site-header.scrolled .logo {
    color: var(--primary-color); /* Ensure visibility on glass bg */
}


.main-navigation .nav-list {
  display: flex;
  align-items: center;
}

.main-navigation .nav-list li {
  margin-left: calc(var(--spacing-unit) * 1.5);
}

.main-navigation .nav-link {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color-light); /* Default for hero overlay */
  text-decoration: none;
  padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 0.75);
  border-radius: var(--border-radius);
  transition: color var(--transition-speed-normal), background-color var(--transition-speed-normal);
  position: relative;
}
.main-navigation .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    transition: width var(--transition-speed-normal) var(--transition-timing);
}
.main-navigation .nav-link:hover::after,
.main-navigation .nav-link.active::after {
    width: 70%;
}

.main-navigation .nav-link:hover,
.main-navigation .nav-link.active {
  color: var(--accent-color); /* Highlight on hover/active */
}
.site-header.scrolled .main-navigation .nav-link {
  color: var(--text-color-dark); /* Change color on scrolled header */
}
.site-header.scrolled .main-navigation .nav-link:hover,
.site-header.scrolled .main-navigation .nav-link.active {
  color: var(--primary-color);
}
.site-header.scrolled .main-navigation .nav-link::after {
    background-color: var(--primary-color);
}


/* Hamburger Menu */
.nav-toggle {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: var(--z-index-header) + 1; /* Above nav list when absolute */
}
.hamburger-icon {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--text-color-light); /* Initial color */
  position: relative;
  transition: background-color var(--transition-speed-normal);
}
.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--text-color-light); /* Initial color */
  left: 0;
  transition: transform 0.3s ease, top 0.3s ease, background-color var(--transition-speed-normal);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

.site-header.scrolled .hamburger-icon,
.site-header.scrolled .hamburger-icon::before,
.site-header.scrolled .hamburger-icon::after {
  background-color: var(--text-color-dark); /* Color on scrolled header */
}

/* Active Hamburger State */
.nav-toggle[aria-expanded="true"] .hamburger-icon {
  background-color: transparent; /* Middle bar disappears */
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: rotate(45deg);
  top: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: rotate(-45deg);
  top: 0;
}


/* -------------------------------------------------------------------------
   6. Footer
------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(var(--gradient-direction), var(--text-color-dark), #2c2c2e); /* Dark gradient */
  color: var(--neutral-color-dark);
  padding: calc(var(--spacing-unit) * 3) 0;
  margin-top: calc(var(--spacing-unit) * 3); /* Ensure space from last content section */
}
.site-footer.glassmorphism { /* If applying glassmorphism to footer as well */
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border);
    color: var(--text-color-dark); /* Text color for glass footer */
}
.site-footer.glassmorphism a {
    color: var(--primary-color);
}
.site-footer.glassmorphism a:hover {
    color: var(--primary-color-dark);
}
.site-footer.glassmorphism h4 {
    color: var(--text-color-dark);
}


.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--spacing-unit) * 2);
}

.site-footer h4 {
  font-size: 1.2rem;
  color: var(--text-color-light); /* Brighter for dark bg */
  margin-bottom: var(--spacing-unit);
  position: relative;
  padding-bottom: calc(var(--spacing-unit) * 0.5);
}
.site-footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}


.site-footer ul {
  list-style: none;
  padding: 0;
}
.site-footer ul li {
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.site-footer ul li a {
  color: var(--neutral-color-dark);
  text-decoration: none;
  transition: color var(--transition-speed-normal);
}
.site-footer ul li a:hover {
  color: var(--primary-color-light);
  padding-left: 5px; /* Subtle hover effect */
}

.footer-social ul {
    display: flex;
    flex-direction: column; /* Text links, one per line */
}
.footer-social ul li a {
    font-weight: bold; /* Make social links stand out a bit */
}

.footer-copyright {
  grid-column: 1 / -1; /* Span full width */
  text-align: center;
  margin-top: calc(var(--spacing-unit) * 2);
  padding-top: calc(var(--spacing-unit) * 1.5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}
.footer-copyright .logo-accent {
    color: var(--accent-color);
}

/* -------------------------------------------------------------------------
   7. Content Sections (General)
------------------------------------------------------------------------- */
.content-section {
  padding: calc(var(--spacing-unit) * 3) 0; /* 48px top/bottom */
  overflow: hidden; /* For animations */
}
.content-section:nth-child(even) {
  /* background-color: var(--neutral-color-light); Optional alternating bg */
}

.section-title {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 2.5); /* 40px */
  font-size: 2.5rem; /* Slightly larger for section titles */
  color: var(--text-color-dark);
  position: relative;
  padding-bottom: calc(var(--spacing-unit) * 0.75);
}
.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-color-medium);
    margin-top: calc(var(--spacing-unit) * -1.5); /* Bring closer to title */
    margin-bottom: calc(var(--spacing-unit) * 2);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-note {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-color-medium);
    margin-top: calc(var(--spacing-unit) * 2);
    font-style: italic;
}


/* -------------------------------------------------------------------------
   8. Page-Specific Styles
------------------------------------------------------------------------- */
/* Hero Section */
.hero-section {
  min-height: 85vh; /* Responsive height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color-light); /* Text should be white */
  padding: calc(var(--spacing-unit) * 4) 0;
  position: relative; /* For overlay */
}

.hero-content {
  max-width: 800px;
  position: relative;
  z-index: 2; /* Above overlay */
}

.hero-title {
  font-size: 3.5rem; /* Large and impactful */
  font-weight: 700;
  margin-bottom: var(--spacing-unit);
  color: var(--text-color-light); /* Explicitly white */
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* Stronger shadow for readability */
  animation: fadeInDown 1s ease-out;
}
.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: calc(var(--spacing-unit) * 2);
  color: var(--text-color-light); /* Explicitly white */
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
  animation: fadeInUp 1s ease-out 0.3s;
  animation-fill-mode: backwards; /* Start animation even if element is initially hidden */
}
.hero-section .btn-primary {
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2.5); /* Larger hero button */
    font-size: 1.1rem;
    animation: zoomIn 0.8s ease-out 0.6s;
    animation-fill-mode: backwards;
}


/* Vision Section */
.vision-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-unit) * 3);
    align-items: center;
}
.vision-text p {
    margin-bottom: var(--spacing-unit);
    line-height: 1.7;
}
.vision-image img {
    border-radius: var(--card-border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
    .vision-content-wrapper {
        grid-template-columns: 1fr;
    }
    .vision-image {
        margin-top: calc(var(--spacing-unit) * 2);
    }
}


/* Cards (General Styles - apply to event-card, media-card, insight-card, pricing-card etc.) */
.card {
  background-color: var(--neutral-color-light);
  border-radius: var(--card-border-radius);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform var(--transition-speed-normal) var(--transition-timing),
              box-shadow var(--transition-speed-normal) var(--transition-timing);
  overflow: hidden; /* Ensure content respects border-radius */
  display: flex;
  flex-direction: column;
  height: 100%; /* For equal height cards in a grid/flex container */
  text-align: center; /* Center text content */
}
.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.card-image { /* Wrapper for image inside card */
  width: 100%;
  /* height: 200px; /* Example fixed height for image containers - adjust per card type */
  overflow: hidden;
  display: flex; /* For centering the image itself if it's smaller */
  justify-content: center;
  align-items: center;
  border-top-left-radius: var(--card-border-radius);
  border-top-right-radius: var(--card-border-radius);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Remove extra space */
  transition: transform var(--transition-speed-slow) var(--transition-timing);
}
.card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: calc(var(--spacing-unit) * 1.5);
  flex-grow: 1; /* Allows content to fill space if cards are different heights */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes button to bottom if present */
}
.card-content h3 {
  font-size: 1.4rem;
  margin-bottom: calc(var(--spacing-unit) * 0.75);
  color: var(--primary-color);
}
.card-content p {
  font-size: 0.95rem;
  margin-bottom: var(--spacing-unit);
  flex-grow: 1; /* Allow paragraph to take up space */
}
.card-content .btn {
  margin-top: auto; /* Pushes button to bottom */
  align-self: center; /* Center button */
}

/* Specific Card Heights for Image Containers */
.event-card .card-image,
.pricing-card .card-image {
    height: 220px;
}
.insight-card .card-image {
    height: 180px;
}
.media-card .card-image {
    height: 150px; /* Usually for logos */
    padding: var(--spacing-unit); /* Add padding for logos */
}
.media-card .card-image img {
    object-fit: contain; /* Logos should be contained */
}


/* Events Section (Uses a carousel) */
.events-carousel, .media-carousel, .testimonials-carousel, .client-logos-carousel {
  /* Placeholder - JS will initialize a carousel library (e.g., Swiper, Flickity) */
  /* Basic flex setup for items if no JS carousel is used for now */
  display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: calc(var(--spacing-unit) * 1.5);
  padding-bottom: var(--spacing-unit); /* For scrollbar visibility */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--neutral-color-dark);
}
.events-carousel > .card,
.media-carousel > .card,
.testimonials-carousel > .testimonial-item {
  min-width: 300px; /* Ensure cards have a minimum width in carousel */
  flex-shrink: 0;
}
.client-logos-carousel img {
    max-height: 60px;
    object-fit: contain;
    margin: 0 calc(var(--spacing-unit) * 1);
    opacity: 0.8;
    transition: opacity var(--transition-speed-normal);
}
.client-logos-carousel img:hover {
    opacity: 1;
}

.event-card .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
    margin-top: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
}

/* Accolades Section */
.accolades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
}
.accolade-item {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
}
.accolade-item h4 {
    font-size: 1.2rem;
    margin-top: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    color: var(--primary-color);
}
.animated-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(var(--gradient-direction), var(--primary-color-light), var(--accent-color-light));
  border-radius: 50%;
  margin: 0 auto calc(var(--spacing-unit) * 1) auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: var(--text-color-light);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Specific icons as placeholders */
.icon-learners::before { content: "🎓"; }
.icon-courses::before { content: "📚"; }
.icon-experts::before { content: "🌟"; }
.icon-email::before { content: "✉️"; }
.icon-phone::before { content: "📞"; }
.icon-location::before { content: "📍"; }
.icon-success::before {
    content: "✔";
    font-size: 3rem;
    color: var(--secondary-accent-color);
    background: none; box-shadow: none; /* Override default animated-icon */
}


.progress-bar-container {
  width: 100%;
  max-width: 200px; /* Or adjust as needed */
  margin: calc(var(--spacing-unit) * 0.5) auto 0 auto;
  background-color: var(--neutral-color-dark);
  border-radius: var(--border-radius);
  height: 12px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  border-radius: var(--border-radius);
  width: 0%; /* JS will set this based on data-progress */
  transition: width 1.5s var(--transition-timing);
  position: relative;
}
.progress-bar::after { /* Optional percentage text */
    /* content: attr(data-progress) '%';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--text-color-light);
    font-weight: bold; */
}


/* Insights Section */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
}
.read-more {
  display: inline-block;
  margin-top: auto; /* Pushes to bottom of card-content if in flex */
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
  padding: calc(var(--spacing-unit) * 0.5) 0;
  position: relative;
  align-self: flex-start; /* Align to left within centered card text */
}
.read-more::after {
  content: '→';
  margin-left: 8px;
  transition: transform var(--transition-speed-normal) ease;
  display: inline-block;
}
.read-more:hover {
  color: var(--accent-color);
}
.read-more:hover::after {
  transform: translateX(6px);
}
.insight-card .card-content {
    text-align: left; /* Insights might be better left-aligned */
}
.insight-card .card-content h3 {
    text-align: left;
}


/* Pricing Section */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    align-items: stretch; /* Make cards same height */
}
.pricing-card {
    position: relative; /* For badge */
    padding-bottom: calc(var(--spacing-unit) * 3); /* Extra space for button if needed */
}
.pricing-card.popular {
    border: 2px solid var(--primary-color);
    transform: scale(1.05); /* Make popular card stand out */
    box-shadow: 0 10px 30px rgba(var(--primary-color-rgb, 0,122,255), 0.3);
}
.pricing-card.popular:hover {
    transform: scale(1.07) translateY(-5px);
}
.pricing-card .badge {
    position: absolute;
    top: -1px; /* Adjust to sit nicely on border */
    right: 20px;
    background: linear-gradient(var(--gradient-direction), var(--primary-color), var(--accent-color));
    color: var(--text-color-light);
    padding: calc(var(--spacing-unit)*0.3) var(--spacing-unit);
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
}
.price-tag {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-accent-color);
    margin: var(--spacing-unit) 0;
}
.pricing-card .btn {
    width: 80%; /* Make button wider in pricing card */
    margin: var(--spacing-unit) auto 0 auto;
}


/* Testimonials Section */
.testimonial-item {
  padding: calc(var(--spacing-unit) * 2);
  text-align: center;
}
.testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--spacing-unit) auto;
  border: 3px solid var(--primary-color-light);
}
.testimonial-item p {
  font-style: italic;
  color: var(--text-color-medium);
  margin-bottom: var(--spacing-unit);
  font-size: 1.05rem;
  line-height: 1.7;
}
.testimonial-item h4 {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-bottom: calc(var(--spacing-unit) * 0.25);
}
.testimonial-item span {
  font-size: 0.9rem;
  color: var(--text-color-medium);
}

/* External Resources */
.resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-unit);
}
.resource-item {
    padding: var(--spacing-unit);
    background-color: rgba(255,255,255,0.7); /* Lighter glass for links */
    border-radius: var(--border-radius);
}
.resource-item a {
    font-weight: bold;
}

/* Contact Section */
.contact-form {
    max-width: 700px;
    margin: 0 auto calc(var(--spacing-unit) * 2) auto;
    padding: calc(var(--spacing-unit) * 2);
}
.contact-details {
    text-align: center;
    color: var(--text-color-medium); /* Default for sections without bg-image */
}
.contact-details p {
    margin-bottom: calc(var(--spacing-unit)*0.5);
}
.contact-section.glassmorphism-bg .contact-details p,
.contact-section.glassmorphism-bg .contact-details strong {
    color: var(--text-color-light); /* Light text if on bg image */
}
.contact-section.glassmorphism-bg .contact-form {
    /* Form is already glassmorphism from HTML */
}
.contact-section.glassmorphism-bg .form-group label {
    color: var(--text-color-light);
}


/* About Page Specifics */
body[data-barba-namespace="about"] .team-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 2);
}
.team-member-card .card-image {
    width: 150px; /* Smaller images for team members */
    height: 150px;
    border-radius: 50%; /* Circular team images */
    margin: 0 auto calc(var(--spacing-unit) * 1) auto;
    border: 4px solid var(--primary-color-light);
}
.team-member-card .card-image img {
    border-radius: 50%;
}
.team-member-card .card-content h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
}
.team-member-card .card-content p {
    font-size: 0.9rem;
    color: var(--text-color-medium);
    margin-bottom: 0;
}

/* Contacts Page Specifics */
body[data-barba-namespace="contact"] .contact-info-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--spacing-unit) * 2);
    margin-top: calc(var(--spacing-unit) * 3);
}
.contact-info-item {
    text-align: center;
    padding: calc(var(--spacing-unit) * 1.5);
}
.contact-info-item h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
}
.contact-info-item p {
    font-size: 0.95rem;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.contact-info-item p a {
    color: var(--text-color-medium); /* Match surrounding text color */
}
.contact-info-item p a:hover {
    color: var(--primary-color);
}


/* Legal Pages (Privacy, Terms) */
main[data-barba-namespace="legal"] .page-header-section,
main[data-barba-namespace="about"] .page-header-section,
main[data-barba-namespace="contact"] .page-header-section,
main[data-barba-namespace="success"] .page-header-section {
  padding-top: calc(var(--header-height) + var(--spacing-unit) * 2.5); /* 70px + 40px = 110px */
  padding-bottom: calc(var(--spacing-unit) * 2);
  text-align: center; /* Center title on subpages */
}
main[data-barba-namespace="legal"] .page-header-section h1,
main[data-barba-namespace="about"] .page-header-section h1,
main[data-barba-namespace="contact"] .page-header-section h1,
main[data-barba-namespace="success"] .page-header-section h1 {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.legal-text h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    padding-bottom: calc(var(--spacing-unit) * 0.5);
    border-bottom: 2px solid var(--neutral-color-dark);
}
.legal-text h2:first-of-type {
    margin-top: 0;
}
.legal-text ul {
    list-style: disc;
    padding-left: calc(var(--spacing-unit) * 1.5);
    margin-bottom: var(--spacing-unit);
}
.legal-text ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* Success Page */
body[data-barba-namespace="success"] .main-content {
    min-height: calc(100vh - var(--header-height) - 100px); /* Approximate footer height; adjust if footer has fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center; /* Horizontal centering */
}
body[data-barba-namespace="success"] .main-content .content-section {
    width: 100%; /* Ensure section takes full width for centering its content */
}
body[data-barba-namespace="success"] .text-center {
    max-width: 600px;
}
body[data-barba-namespace="success"] .text-link {
    font-weight: bold;
    color: var(--primary-color);
}


/* -------------------------------------------------------------------------
   9. Animations & Transitions (JS will trigger .is-visible)
------------------------------------------------------------------------- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--transition-timing), transform 0.7s var(--transition-timing);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keyframe animations for hero */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Barba.js Page Transitions (Basic Example) */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--primary-color);
  z-index: var(--z-index-page-transition);
  transform: translateY(-100%); /* Start off-screen */
  /* Transitions will be controlled by Barba hooks in script.js */
}

/* -------------------------------------------------------------------------
   10. Responsiveness
------------------------------------------------------------------------- */
@media (max-width: 992px) { /* Tablet landscape and below */
    .hero-title { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1.2rem; }
    .section-title { font-size: 2rem; }

    .pricing-card.popular {
        transform: scale(1); /* Reset popular card scale for smaller screens if needed */
    }
}

@media (max-width: 768px) { /* Tablet portrait and below */
  .header-container {
    height: auto; /* Allow header to wrap if needed */
    min-height: var(--header-height);
  }
  .nav-toggle { display: block; }
  .main-navigation .nav-list {
    display: none; /* Hidden by default on mobile */
    flex-direction: column;
    position: absolute;
    top: calc(var(--header-height) + 0px); /* Align below header */
    left: 0;
    width: 100%;
    background: #fff;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: var(--spacing-unit) 0;
    border-top: 1px solid var(--glass-border);
  }
  .main-navigation .nav-list.is-active {
    display: flex;
    animation: slideDownMobileMenu 0.3s ease-out;
  }
  @keyframes slideDownMobileMenu {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .main-navigation .nav-list li {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .main-navigation .nav-link {
    display: block;
    padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
    color: var(--text-color-dark); /* Ensure readability on glass menu */
    width: 100%;
  }
  .site-header.scrolled .main-navigation .nav-link,
  .main-navigation .nav-link:hover,
  .main-navigation .nav-link.active {
    color: var(--primary-color); /* Consistent hover/active on mobile */
    background-color: rgba(var(--primary-color-rgb, 0,122,255), 0.1);
  }
   .main-navigation .nav-link::after { /* No underline for mobile links, bg color is enough */
    display: none;
  }


  .hero-title { font-size: 2.3rem; }
  .hero-subtitle { font-size: 1.1rem; }

  .footer-container {
    grid-template-columns: 1fr; /* Stack footer columns */
    text-align: center;
  }
  .site-footer h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-social ul {
    justify-content: center; /* Center social links if they become flex-row */
    align-items: center;
  }

  /* Adjust card image heights for mobile if needed */
    .event-card .card-image,
    .pricing-card .card-image {
        height: 180px;
    }
    .insight-card .card-image {
        height: 160px;
    }
}

@media (max-width: 576px) { /* Mobile phones */
  :root {
    --spacing-unit: 0.8rem; /* Slightly reduce spacing unit */
  }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .section-title { font-size: 1.8rem; }
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; }
  .btn, button, input[type="submit"] {
    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5);
    font-size: 0.95rem;
  }
  .events-carousel > .card,
  .media-carousel > .card,
  .testimonials-carousel > .testimonial-item {
    min-width: 260px;
  }
}

/* Cookie Popup Font - Prompt specified minimal CSS in HTML, this is just for consistency */
#cookie-popup {
  font-family: var(--font-body);
}
#cookie-popup p a {
  color: var(--primary-color-light);
}
#cookie-popup #accept-cookies-btn {
  background-color: var(--secondary-accent-color);
  font-family: var(--font-heading); /* Match other buttons */
}

.card-content * {
  color: #1C1C1E !important;
}

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