:root {
  /* Tetrad Colors & Theme Palette */
  --primary-color: #0A2463; /* Dark Blue */
  --primary-color-darker: #071a48;
  --secondary-color: #FF8C00; /* Orange */
  --secondary-color-darker: #e07c00;
  --accent-color-1: #D81E5B; /* Magenta/Pink */
  --accent-color-1-darker: #b3184c;
  --accent-color-2: #3E9651; /* Green */
  --accent-color-2-darker: #2f733f;

  /* Neutrals */
  --text-light: #F0F4F8;
  --text-dark: #1E1E1E; /* Primary dark text for high contrast */
  --text-dark-secondary: #333333; /* Slightly lighter dark text for paragraphs */
  --text-muted-custom: #6c757d;

  --background-light: #F0F4F8; /* Light gray for sections */
  --background-dark: #1E1E1E; /* Dark gray for footer */
  --background-page: #FFFFFF; /* White for main page background */

  /* Fonts */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  /* Neo-Brutalism Elements */
  --brutalist-border-color: var(--text-dark);
  --brutalist-border: 2px solid var(--brutalist-border-color);
  --brutalist-shadow-strong: 4px 4px 0px var(--accent-color-1);
  --brutalist-shadow-medium: 3px 3px 0px var(--secondary-color);
  --brutalist-shadow-subtle: 2px 2px 0px var(--primary-color-darker);

  /* Transitions */
  --transition-speed: 0.25s;
  --transition-easing: ease-in-out;

  /* Header Height - adjust if necessary */
  --header-height: 70px;
}

/* Global Styles */
body {
  font-family: var(--font-body);
  background-color: var(--background-page);
  color: var(--text-dark-secondary);
  line-height: 1.7;
  overflow-x: hidden;
  padding-top: var(--header-height); /* For fixed header */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700; /* Inter bold */
  color: var(--primary-color);
  margin-bottom: 1rem;
  line-height: 1.3;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

h1.display-3, h1.display-5, /* From Bootstrap */
h2.display-3, h2.display-5,
h3.display-3, h3.display-5 {
    font-weight: 900; /* Inter black for very large headings */
    color: var(--primary-color-darker); /* Even darker for main titles */
}
/* Ensure section titles are clearly visible */
section h2.text-center {
    color: var(--primary-color-darker); /* Example: #222222 or darker */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}


p {
  font-family: var(--font-body);
  margin-bottom: 1.25rem;
  color: var(--text-dark-secondary);
}

a {
  color: var(--accent-color-1);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing), text-decoration var(--transition-speed) var(--transition-easing);
}

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

/* Global Button Styles */
.btn, button, input[type='submit'], input[type='button'] {
  font-family: var(--font-heading);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px; /* Increased letter spacing */
  padding: 12px 28px; /* Slightly larger padding */
  border-radius: 0;
  transition: all var(--transition-speed) var(--transition-easing);
  cursor: pointer;
  border: 2px solid transparent; /* Base border */
  box-shadow: var(--brutalist-shadow-medium); /* Default shadow */
}

.btn:hover, button:hover, input[type='submit']:hover, input[type='button']:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--secondary-color-darker); /* Enhanced hover shadow */
}
.btn:active, button:active, input[type='submit']:active, input[type='button']:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--secondary-color-darker); /* Pressed shadow */
}

.btn-custom-primary {
  background-color: var(--secondary-color);
  color: var(--primary-color-darker); /* Darker text for better contrast on orange */
  border-color: var(--secondary-color); /* Border matching bg */
  box-shadow: var(--brutalist-shadow-medium);
}
.btn-custom-primary:hover {
  background-color: var(--secondary-color-darker);
  border-color: var(--secondary-color-darker);
  color: var(--primary-color-darker);
}

.btn-custom-secondary {
  background-color: var(--accent-color-2);
  color: var(--text-light);
  border-color: var(--accent-color-2);
  box-shadow: 3px 3px 0px var(--accent-color-1);
}
.btn-custom-secondary:hover {
  background-color: var(--accent-color-2-darker);
  border-color: var(--accent-color-2-darker);
  color: var(--text-light);
}

.btn-outline-custom {
  color: var(--accent-color-1);
  border-color: var(--accent-color-1);
  background-color: transparent;
  box-shadow: var(--brutalist-shadow-subtle); /* Use a different shadow for outline */
}
.btn-outline-custom:hover {
  background-color: var(--accent-color-1);
  color: var(--text-light);
  border-color: var(--accent-color-1);
  box-shadow: 3px 3px 0px var(--accent-color-1-darker);
}

/* Section Defaults */
section {
  padding-top: 5rem; /* Increased default padding */
  padding-bottom: 5rem;
}
section:nth-of-type(even) {
  background-color: var(--background-light); /* Alternating section background */
}

/* Header & Navigation */
.navbar {
  transition: background-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  min-height: var(--header-height);
}
.navbar-brand {
  transition: color var(--transition-speed) var(--transition-easing);
  font-weight: 900 !important; /* From HTML, ensure it's applied */
}
.navbar .nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.9); /* Brighter nav links */
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  padding: 0.6rem 0.9rem;
  transition: color var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
  position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { /* .active class might be added by Bootstrap's scrollspy or JS */
  color: var(--secondary-color);
}
.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Slightly below text */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px; /* Thicker underline */
    background-color: var(--secondary-color);
    transition: width var(--transition-speed) var(--transition-easing);
    border-radius: 2px; /* Rounded underline */
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    width: 60%;
}
.navbar-toggler {
    border: 2px solid var(--secondary-color); /* Thicker border */
    border-radius: 0;
    padding: .35rem .65rem; /* Adjust padding */
}
.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(255, 140, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* Thicker lines in icon */
}

/* Hero Section */
#hero {
  position: relative;
  /* min-height: 100vh; From HTML, CSS confirms */
  /* background-attachment: fixed; From HTML, CSS confirms */
}
#hero h1 {
  color: var(--text-light); /* V IMPORTANT: Hero text must be white */
  font-weight: 900;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7); /* Stronger shadow for readability on varied bg */
}
#hero p.lead {
  color: var(--text-light); /* V IMPORTANT: Hero text must be white */
  font-size: 1.3rem; /* Slightly larger lead */
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400; /* IBM Plex Sans regular for lead */
}

/* Background Image Styling (if set via CSS class) */
.has-bg-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Ensure inline background images also respect this */
[style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
/* For dark overlays on background images with text (already in HTML via linear-gradient) */
.dark-overlay::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1; /* Make sure content is above overlay */
}
/* Content on overlay needs higher z-index */
.dark-overlay > .container {
    position: relative;
    z-index: 2;
}

/* Card Styles (Services, Insights, Webinars, Resources) */
.neo-brutalist-card {
  background-color: var(--background-page);
  border: var(--brutalist-border);
  box-shadow: var(--brutalist-shadow-strong);
  transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.neo-brutalist-card:hover {
  transform: translateY(-6px) translateX(-6px); /* More pronounced hover effect */
  box-shadow: 10px 10px 0px var(--accent-color-1-darker);
}
.card-image { /* Wrapper for image */
  width: 100%;
  overflow: hidden;
  /* Height is determined by img attributes (width/height) for aspect ratio, or specific fixed height */
  display: flex; /* For centering image if it's smaller than container */
  justify-content: center; /* Horizontal centering of img */
  align-items: center; /* Vertical centering of img */
  background-color: #e9ecef; /* Placeholder if image fails to load */
}
.card-image img {
  width: 100%;
  height: 100%; /* Makes image fill the .card-image container if container has a set height */
  object-fit: cover; /* Crucial for maintaining aspect ratio and covering */
  transition: transform 0.4s var(--transition-easing); /* Slower zoom for image */
}
.neo-brutalist-card:hover .card-image img {
  transform: scale(1.08); /* Slightly more zoom */
}
.card-content {
  padding: 1.75rem; /* Increased padding */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; -- removed to let card-text grow naturally */
  text-align: left; /* Default, for readability of paragraphs */
}
.card-title { /* Inside .card-content */
  font-family: var(--font-heading);
  color: var(--primary-color-darker);
  margin-bottom: 0.75rem;
  font-size: 1.3rem; /* Slightly larger card titles */
}
.card-text { /* Inside .card-content */
  font-family: var(--font-body);
  color: var(--text-dark-secondary);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  flex-grow: 1; /* Allows text to take up available space */
}
.card-content .btn-link { /* "Read more" style */
  font-family: var(--font-body);
  font-weight: bold;
  color: var(--accent-color-1);
  text-decoration: none;
  padding: 0.3rem 0; /* Vertical padding for better click area */
  display: inline-block;
  margin-top: auto; /* Pushes to bottom if it's the last element and parent is flex */
  align-self: flex-start;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-speed) var(--transition-easing), border-bottom-color var(--transition-speed) var(--transition-easing), transform var(--transition-speed) var(--transition-easing);
}
.card-content .btn-link:hover {
  color: var(--accent-color-1-darker);
  text-decoration: none;
  border-bottom-color: var(--accent-color-1-darker);
  transform: translateX(2px); /* Subtle shift */
}
.card-content .btn-link i {
  margin-left: 0.4em;
  transition: transform var(--transition-speed) var(--transition-easing);
}
.card-content .btn-link:hover i {
  transform: translateX(4px);
}

/* Statistics Section */
#statistics {
  color: var(--text-light); /* Ensured by inline style in HTML */
}
#statistics h2, #statistics h3, #statistics p {
  color: var(--text-light); /* Ensured by inline style in HTML */
}
#statistics h3.display-4 { /* Specific to the large numbers */
    color: var(--secondary-color) !important; /* Important to override Bootstrap if needed */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.stat-item { /* Already styled inline, this can augment */
  transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
}
.stat-item:hover {
    transform: translateY(-5px) scale(1.03); /* Hover effect for stat items */
    box-shadow: 5px 5px 0px var(--accent-color-1-darker) !important; /* Stronger shadow on hover */
}

/* Workshops Section (Bootstrap Carousel) */
#workshops .carousel-inner {
  /* Border and shadow from inline HTML styles */
  background-color: var(--background-light); /* Ensure good contrast for content */
}
#workshops .carousel-item .row {
  /* Padding from inline HTML styles */
  align-items: center; /* Vertically align items in carousel row */
}
#workshops .carousel-item h3 {
  color: var(--accent-color-1); /* Ensure heading color */
}
#workshops .carousel-control-prev-icon,
#workshops .carousel-control-next-icon {
  /* Background color and padding from inline HTML styles */
  background-size: 60% 60%; /* Make arrow larger */
  filter: invert(10%) sepia(80%) saturate(5000%) hue-rotate(190deg) brightness(100%) contrast(100%); /* Example to color the arrow if it's an SVG */
  opacity: 0.8;
  transition: opacity var(--transition-speed) var(--transition-easing);
}
#workshops .carousel-control-prev:hover .carousel-control-prev-icon,
#workshops .carousel-control-next:hover .carousel-control-next-icon {
  opacity: 1;
}
#workshops .carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
    border-radius: 0; /* Square indicators */
    width: 15px; /* Larger indicators */
    height: 15px;
    margin: 0 6px;
    border: 2px solid var(--secondary-color); /* Border for inactive */
    opacity: 0.6;
    transition: opacity var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
}
#workshops .carousel-indicators .active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    opacity: 1;
}

/* External Resources (Media) Section */
#media-resources .resource-card { /* Specific styling for resource cards if different */
  background-color: var(--background-page);
  border: 2px solid var(--accent-color-2); /* Green border */
  box-shadow: 4px 4px 0px var(--primary-color); /* Blue shadow */
}
#media-resources .resource-card .card-title a {
    color: var(--accent-color-1); /* Pink link */
    font-size: 1.05rem; /* Slightly adjusted font size */
}
#media-resources .resource-card .card-title a:hover {
    color: var(--accent-color-1-darker);
}
#media-resources .resource-card .card-text {
    font-size: 0.9rem;
    color: var(--text-dark-secondary);
}
#media-resources .resource-card .text-muted {
    font-size: 0.8rem;
    color: var(--text-muted-custom) !important;
}

/* Contact Section */
#contact {
  color: var(--text-light); /* From inline HTML */
}
#contact h2, #contact p, #contact h4 {
    color: var(--text-light); /* From inline HTML */
}
#contact a { /* Email link */
    color: var(--secondary-color); /* From inline HTML */
}
#contact a:hover {
    color: var(--secondary-color-darker); /* From inline HTML */
}
.neo-brutalist-form { /* Form container */
  /* Background, border, shadow from inline HTML */
}
.neo-brutalist-form .form-label {
  font-family: var(--font-body);
  color: var(--secondary-color); /* Label color from inline HTML */
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block; /* Ensure labels are block for consistent spacing */
}
.neo-brutalist-form .form-control {
  border-radius: 0;
  border: 2px solid var(--accent-color-2); /* Input border color from inline HTML */
  background-color: var(--background-light); /* Input background from inline HTML */
  color: var(--text-dark); /* Input text color from inline HTML */
  padding: 0.85rem 1.1rem; /* Slightly more padding */
  transition: border-color var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing), background-color var(--transition-speed) var(--transition-easing);
  font-size: 1rem;
}
.neo-brutalist-form .form-control:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.3); /* Orange focus glow */
  background-color: #fff; /* Brighter background on focus */
}
.neo-brutalist-form textarea.form-control {
    min-height: 130px; /* Slightly taller textarea */
    resize: vertical; /* Allow vertical resize only */
}

/* Footer */
footer {
  background-color: var(--background-dark);
  color: var(--text-light);
  font-size: 0.9rem;
  padding-top: 4rem;
  padding-bottom: 3rem;
}
footer h5 {
  color: var(--secondary-color);
  font-family: var(--font-heading);
  margin-bottom: 1.25rem; /* More space below footer titles */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
footer p, footer ul li {
  font-family: var(--font-body);
  color: rgba(240, 248, 255, 0.75); /* Slightly dimmer text */
  font-size: 0.9rem;
}
footer .list-unstyled li {
  margin-bottom: 0.6rem;
}
footer .footer-link { /* Text-based social links & other footer links */
  color: rgba(240, 248, 255, 0.75);
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing), padding-left var(--transition-speed) var(--transition-easing);
  display: inline-block; /* For padding-left hover effect */
  position: relative;
}
footer .footer-link:hover {
  color: var(--secondary-color);
  padding-left: 4px; /* Micro-animation on hover */
  text-decoration: none; /* Avoid double underline if base 'a' has it */
}
footer .footer-link::before { /* Optional: add a small bullet or icon */
  content: "› "; /* Example */
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-easing);
  position: absolute;
  left: -10px;
}
footer .footer-link:hover::before {
  opacity: 1;
  left: -15px; /* Adjust with padding-left */
}
footer hr {
  border-color: rgba(255, 140, 0, 0.15); /* Dimmer separator */
}
footer .text-center { /* Copyright text */
    color: rgba(240, 248, 255, 0.6);
    font-size: 0.85rem;
}

/* Specific Page Styles */
/* Success Page */
.page-success-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background-color: var(--background-light);
}
.page-success-container .card {
    border: var(--brutalist-border);
    box-shadow: var(--brutalist-shadow-strong);
    max-width: 550px; /* Slightly wider */
    padding: 2rem 1.5rem; /* Inner padding for card */
}
.page-success-container h1 {
    color: var(--accent-color-2); /* Green for success */
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.page-success-container p {
    font-size: 1.1rem;
    color: var(--text-dark-secondary);
    margin-bottom: 1.5rem;
}
.page-success-container .btn {
    margin-top: 1rem;
}

/* Privacy and Terms Pages (Legal Content) */
.page-legal-content {
  padding-top: calc(var(--header-height) + 2rem); /* Ensure content below fixed header + extra space */
  padding-bottom: 4rem;
  background-color: var(--background-page);
}
.page-legal-content .container {
    max-width: 800px;
}
.page-legal-content h1 {
    margin-bottom: 2.5rem;
    text-align: center;
    color: var(--primary-color-darker);
    font-size: 2.8rem;
}
.page-legal-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-size: 1.8rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--secondary-color); /* Underline for H2 */
    padding-bottom: 0.5rem;
}
.page-legal-content p, .page-legal-content ul li {
    color: var(--text-dark-secondary);
    line-height: 1.8;
    font-size: 1rem;
}
.page-legal-content ul {
    padding-left: 25px; /* More indent for lists */
    margin-bottom: 1.25rem;
    list-style-type: disc; /* Standard disc */
}
.page-legal-content ul li {
    margin-bottom: 0.6rem;
}

/* General content padding for simple pages like about.html, contacts.html */
.main-content-padding {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 4rem;
}

/* AOS Animations - ensure they don't cause layout shifts or performance issues */
[data-aos] {
  /* Consider adding will-change for elements that animate transform/opacity */
  /* will-change: transform, opacity; */
}

/* Cookie Consent Popup - Styles are mostly inline in HTML as requested */
/* This is just a fallback or for minor global adjustments if needed. */
#cookieConsentPopup {
    /* Inline styles from HTML are primary. Example: */
    /* font-family: var(--font-body) !important; */
    /* box-shadow: 0 -3px 10px rgba(0,0,0,0.2); /* Add a top shadow */
}
#cookieConsentPopup p {
    color: var(--text-light); /* Ensure good contrast */
}
#acceptCookieConsent {
    /* Ensure global button styles are not clashing heavily.
       Inline styles in HTML are specific. */
}

/* Responsive Adjustments (Bootstrap handles most grid responsiveness) */
@media (max-width: 991.98px) { /* Medium devices (tablets, less than 992px) */
    .navbar .nav-link {
        margin-left: 0;
        margin-right: 0;
        padding: 0.8rem 1rem; /* More padding for touch on mobile */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Separator in mobile menu */
    }
    .navbar .nav-link:last-child {
        border-bottom: none;
    }
    .navbar .nav-link::after {
        display: none; /* Hide underline in collapsed menu */
    }
    .navbar-collapse {
        background-color: var(--primary-color-darker); /* Darker bg for collapsed menu */
        margin-top: 0.5rem;
        border-top: 2px solid var(--secondary-color);
    }
}

@media (max-width: 767.98px) { /* Small devices (landscape phones, less than 768px) */
    h1.display-3, h1.display-5 { font-size: 2.8rem; }
    h2.display-5 { font-size: 2.2rem; }
    section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    #hero p.lead {
        font-size: 1.1rem;
    }
    .btn, button, input[type='submit'], input[type='button'] {
        padding: 10px 22px; /* Slightly smaller buttons on small screens */
        font-size: 0.9rem;
    }
}