:root {
  /* Color Palette (Tetradic - Green, Teal, Orange, Purple) */
  --primary-color: #4caf50; /* Vibrant Green */
  --primary-color-dark: #388e3c; /* Darker Green */
  --secondary-color: #009688; /* Teal */
  --secondary-color-dark: #00796b; /* Darker Teal */
  --accent-color-1: #ff9800; /* Orange */
  --accent-color-1-dark: #f57c00; /* Darker Orange */
  --accent-color-2: #9c27b0; /* Purple */
  --accent-color-2-dark: #7b1fa2; /* Darker Purple */

  --text-color-light: #ffffff;
  --text-color-dark: #363636; /* Bulma's default dark text for body */
  --text-color-headings: #2c3e50; /* Dark desaturated blue/grey for headings */
  --text-color-medium: #555e67;
  --text-color-footer: #e0e0e0; /* Lighter text for dark footer */

  --background-light: #f4f7f6; /* Off-white with a hint of green/neutral */
  --background-grey: #f0f2f5; /* Light grey for sections like services */
  --background-dark: #1e2a3a; /* Dark blue/slate for footer */
  --card-background: #ffffff;
  --border-color: #e0e0e0;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-color-darker: rgba(0, 0, 0, 0.12);

  /* Fonts */
  --font-heading: "Oswald", Arial, sans-serif;
  --font-body: "Nunito", Arial, sans-serif;

  /* Transitions */
  --transition-speed: 0.3s;
  --transition-timing: ease-in-out;

  /* Spacing & Sizes */
  --navbar-height: 5rem; /* approx 80px */
  --section-padding: 4rem 1.5rem;
  --card-border-radius: 8px;
  --button-border-radius: 25px;
}

h1,
h2,
h3,
h4,
p {
  word-break: break-word;
}

/* GENERAL STYLES */
html {
  scroll-behavior: smooth;
  background-color: var(
    --background-light
  ); /* Base background for the whole page */
}

body {
  font-family: var(--font-body);
  color: var(--text-color-dark);
  line-height: 1.7;
  font-size: 1rem; /* Base font size */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle {
  font-family: var(--font-heading);
  color: var(--text-color-headings);
  font-weight: 400; /* Oswald is quite bold already */
}
.title {
  color: var(--text-color-headings); /* Ensure Bulma title uses our variable */
}
.subtitle {
  color: var(--text-color-medium); /* Subtitles can be a bit lighter */
}

/* Links */
a {
  color: var(--primary-color);
  transition: color var(--transition-speed) var(--transition-timing);
}
a:hover {
  color: var(--primary-color-dark);
}

/* Sections */
.section {
  padding: var(--section-padding);
  position: relative; /* For potential pseudo-elements and parallax layers */
}
.section.has-background-light {
  background-color: var(
    --background-grey
  ) !important; /* Override Bulma if needed */
}
.section.has-background-primary-light {
  background-color: #e6f7e9 !important; /* A light primary tint */
}

.section-title {
  font-size: 2.5rem; /* Larger titles for sections */
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
  color: var(--text-color-headings);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.section-title::after {
  /* Creative underline */
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--primary-color);
  margin: 0.75rem auto 0;
  transform: skewX(-20deg); /* Skewed element */
  border-radius: 2px;
}

/* Paragraphs and Content */
.content p {
  margin-bottom: 1.25em;
  color: var(--text-color-dark);
}
.content ul li {
  margin-bottom: 0.5em;
}

/* Buttons - Global Styles */
.button,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-body);
  font-weight: 700; /* Bolder for buttons */
  border-radius: var(--button-border-radius);
  padding: 0.75em 1.75em;
  transition: all var(--transition-speed) var(--transition-timing);
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 10px var(--shadow-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.button.is-primary,
button.is-primary,
input[type="submit"].is-primary {
  background-color: var(--primary-color);
  color: var(--text-color-light);
}
.button.is-primary:hover,
button.is-primary:hover,
input[type="submit"].is-primary:hover {
  background-color: var(--primary-color-dark);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px var(--shadow-color-darker);
}

.button.is-link,
button.is-link {
  /* Customizing Bulma's link button */
  background-color: transparent;
  color: var(--accent-color-1);
  border: 2px solid var(--accent-color-1);
  padding: 0.6em 1.5em; /* Slightly smaller */
}
.button.is-link:hover,
button.is-link:hover {
  background-color: var(--accent-color-1);
  color: var(--text-color-light);
  border-color: var(--accent-color-1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow-color);
}

/* Forms */
.input,
.textarea {
  font-family: var(--font-body);
  border-radius: 8px; /* Slightly less rounded than buttons */
  border: 1px solid var(--border-color);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: border-color var(--transition-speed),
    box-shadow var(--transition-speed);
}
.input:focus,
.textarea:focus,
.input.is-focused,
.textarea.is-focused,
.input:active,
.textarea:active,
.input.is-active,
.textarea.is-active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.125em rgba(76, 175, 80, 0.25); /* Primary color focus ring */
}
.label {
  font-family: var(--font-heading);
  color: var(--text-color-medium);
  font-weight: 600;
}

/* HEADER */
.site-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(
    255,
    255,
    255,
    0.95
  ) !important; /* Slight transparency */
  backdrop-filter: blur(5px); /* Glassmorphism element */
  box-shadow: 0 2px 10px var(--shadow-color);
}
.navbar-item,
.navbar-link {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-color-medium);
  transition: color var(--transition-speed);
}
.navbar-item:hover,
.navbar-link:hover,
.navbar-item.is-active,
.navbar-link.is-active {
  /* Style for active link */
  color: var(--primary-color) !important;
  background-color: transparent !important;
}
.navbar-burger span {
  background-color: var(--primary-color); /* Burger icon color */
}

/* Adjust main content for fixed header */
main {
  padding-top: var(--navbar-height);
}
.page-with-fixed-header-offset {
  /* For privacy.html, terms.html */
  padding-top: calc(var(--navbar-height) + 2rem); /* Extra space */
}

/* HERO SECTION */
.section-hero {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative; /* For parallax or overlay */
  color: var(--text-color-light) !important; /* Ensure all text is white */
}
.section-hero .title,
.section-hero .subtitle,
.section-hero p {
  color: var(--text-color-light) !important;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); /* Enhance readability on image */
}
.section-hero .hero-body {
  padding-top: calc(
    var(--navbar-height) + 3rem
  ); /* Adjust if hero is first under fixed nav */
  padding-bottom: 5rem;
  min-height: calc(
    80vh - var(--navbar-height)
  ); /* Ensure it's substantial but not fixed 400px */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Parallax effect for hero background (simple CSS version) */
.section-hero[style*="background-image"] {
  /* background-attachment: fixed; Disable if using JS parallax */
}

/* CARDS (Services, News, etc.) */
.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* For equal height cards in a row */
  background-color: var(--card-background);
  border-radius: var(--card-border-radius);
  box-shadow: 0 5px 15px var(--shadow-color);
  overflow: hidden;
  transition: transform var(--transition-speed) var(--transition-timing),
    box-shadow var(--transition-speed) var(--transition-timing);
}
.card:hover {
  transform: translateY(-8px) scale(1.02); /* More dynamic hover */
  box-shadow: 0 10px 25px var(--shadow-color-darker);
}
.card .card-image {
  /* Bulma's card-image */
  position: relative;
}
.card .card-image .image-container {
  /* Custom container for fixed height and object-fit */
  height: 220px; /* Standardized height for card images */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-grey); /* Placeholder bg for images */
}
.card .card-image .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the area, crop if needed */
  object-position: center;
  transition: transform 0.4s ease;
}
.card:hover .card-image .image-container img {
  transform: scale(1.1); /* Zoom effect on image hover */
}

.card .card-content {
  padding: 1.5rem;
  flex-grow: 1; /* Allow content to fill space */
  text-align: center; /* As per strict requirement */
}
.card .card-content .title {
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
  color: var(--text-color-headings);
  text-align: center; /* Ensure title in card is centered */
}
.card .card-content .content {
  font-size: 0.95rem;
  color: var(--text-color-medium);
  text-align: left; /* Content text usually better left-aligned for readability */
}
.card .card-content .content p {
  text-align: left;
}
.card .card-content .button.is-small.is-link {
  margin-top: auto; /* Push to bottom if card content is flex */
  font-size: 0.8rem;
  padding: 0.5em 1.2em;
  align-self: center; /* Center button if card-content is flex */
}

/* Progress Indicators */
.progress.is-primary::-webkit-progress-value {
  background-color: var(--primary-color) !important;
}
.progress.is-primary::-moz-progress-bar {
  background-color: var(--primary-color) !important;
}
.progress.is-primary::-ms-fill {
  background-color: var(--primary-color) !important;
}
.progress {
  height: 0.75rem;
  border-radius: 10px;
}

/* WEBINARS & WORKSHOPS (Placeholders) */
.content-carousel-placeholder,
.timeline-placeholder {
  padding: 2rem;
  border-radius: var(--card-border-radius);
  box-shadow: 0 5px 15px var(--shadow-color);
}
.timeline .timeline-item {
  /* Basic styling for Bulma timeline extension */
  padding-bottom: 2rem;
}
.timeline .timeline-marker.is-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.timeline .timeline-content .heading {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-color-medium);
  text-transform: uppercase;
}
.timeline .timeline-content .title {
  font-size: 1.3rem;
  margin-top: 0.25rem;
}

/* EXTERNAL RESOURCES */
.external-link-card {
  background-color: var(--card-background);
  border-left: 5px solid var(--secondary-color); /* Accent border */
  padding: 1.5rem;
  border-radius: var(--card-border-radius);
  box-shadow: 0 3px 10px var(--shadow-color);
  transition: box-shadow var(--transition-speed),
    transform var(--transition-speed);
}
.external-link-card:hover {
  box-shadow: 0 6px 15px var(--shadow-color-darker);
  transform: translateY(-3px);
}
.external-link-card h4 a {
  color: var(--secondary-color-dark);
}
.external-link-card h4 a:hover {
  text-decoration: underline;
}

/* CAREERS SECTION */
.section-careers .content {
  font-size: 1.1rem;
}

/* CONTACT PREVIEW */
.section-contact-preview .is-size-4 strong {
  color: var(--text-color-dark);
}

/* FOOTER */
.site-footer {
  background-color: var(--background-dark) !important;
  color: var(--text-color-footer) !important;
  padding: 3rem 1.5rem 2rem; /* More padding */
}
.site-footer .title {
  color: var(--text-color-light) !important;
  font-size: 1.5rem; /* Smaller titles in footer */
  margin-bottom: 1rem;
}
.site-footer p,
.site-footer li {
  font-size: 0.95rem;
  color: var(--text-color-footer);
}
.site-footer a {
  color: var(--text-color-footer) !important;
  transition: color var(--transition-speed);
}
.site-footer a:hover {
  color: var(--primary-color) !important; /* Highlight on hover */
  text-decoration: underline;
}
.site-footer .content.has-text-centered p {
  color: var(
    --text-color-medium
  ) !important; /* Copyright text slightly darker */
  font-size: 0.9rem;
}
.site-footer .column ul {
  list-style: none;
  margin-left: 0;
}
.site-footer .column ul li {
  margin-bottom: 0.5em;
}

/* SUCCESS PAGE STYLING */
body.success-page {
  /* Add this class to body on success.html */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.success-page main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 0; /* Override main padding if header is not on this page, or adjust */
}
.success-page .success-container {
  background-color: var(--card-background);
  padding: 3rem;
  border-radius: var(--card-border-radius);
  box-shadow: 0 10px 30px var(--shadow-color-darker);
}
.success-page .success-container .icon {
  font-size: 4rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

/* RESPONSIVE ADJUSTMENTS (Bulma handles most, add custom if needed) */
@media screen and (max-width: 768px) {
  .section {
    padding: 2.5rem 1rem;
  }
  .section-title {
    font-size: 2rem;
  }
  .hero-body {
    padding-top: calc(var(--navbar-height) + 1rem);
    padding-bottom: 3rem;
  }
  .card .card-content .content {
    font-size: 0.9rem;
  }
  .footer .columns {
    text-align: center;
  }
  .footer .column {
    margin-bottom: 1.5rem;
  }
}

/* Animation helpers (JS will toggle these) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--transition-timing),
    transform 0.6s var(--transition-timing);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Skewed decorative background for some sections for "Iskrivlennye setki" trend */
/* This is a subtle example. Apply this class to a section like #webinars or #workshops */
.section-creative-bg {
  position: relative;
  overflow: hidden; /* Important for containing skewed pseudo-elements */
}
.section-creative-bg::before {
  content: "";
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-color-rgb), 0.05),
    rgba(var(--secondary-color-rgb), 0.05)
  ); /* Needs RGB vars */
  transform: skewY(-2.5deg) rotate(2deg);
  z-index: -1;
  opacity: 0.7;
}
/* Define RGB versions of colors if using them in rgba like above */
/* Example: --primary-color-rgb: 76, 175, 80; */

/* For above example:
:root {
    ...
    --primary-color-rgb: 76, 175, 80;
    --secondary-color-rgb: 0, 150, 136;
    ...
}
*/