:root {
  /* Color Palette - Complementary (Blue & Orange) */
  --primary-color: #0D47A1; /* Deep Blue - Trust, Professionalism */
  --secondary-color: #FFA500; /* Orange - Energy, Attention */
  --accent-color-light: #FFC107; /* Lighter Orange/Yellow for highlights */
  --accent-color-dark: #E69500; /* Darker Orange for hover states */

  /* Neomorphism Base */
  --nm-bg: #E0E5EC; 
  --nm-bg-light-variant: #D1D9E6; /* For alternating sections */
  --nm-shadow-light: #ffffff;
  --nm-shadow-dark: #A3B1C6; 
  --nm-shadow-inset-dark: #bec8d2; 
  
  /* Text Colors */
  --text-color-dark: #333333;
  --text-color-medium: #555555;
  --text-color-light: #FFFFFF;
  --heading-color: #222222;
  --link-color: var(--primary-color);
  --link-hover-color: var(--secondary-color);

  /* Font Families */
  --font-family-headings: 'Montserrat', sans-serif;
  --font-family-body: 'Merriweather', serif;

  /* Neomorphism Shadows & Radii */
  --nm-border-radius-soft: 15px;
  --nm-border-radius-main: 20px;
  --nm-border-radius-sharp: 10px;

  --nm-shadow-outer-soft: 6px 6px 12px var(--nm-shadow-dark), -6px -6px 12px var(--nm-shadow-light);
  --nm-shadow-outer-strong: 8px 8px 15px var(--nm-shadow-dark), -8px -8px 15px var(--nm-shadow-light);
  --nm-shadow-inner-soft: inset 6px 6px 12px var(--nm-shadow-inset-dark), inset -6px -6px 12px var(--nm-shadow-light);
  --nm-shadow-inner-strong: inset 8px 8px 15px var(--nm-shadow-inset-dark), inset -8px -8px 15px var(--nm-shadow-light);
  
  /* Spacing */
  --spacing-extra-small: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem; /* Reduced from 2rem for tighter design */
  --section-padding-y: 3.5rem; /* Reduced slightly */

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

/* --- Global Styles --- */
body {
  font-family: var(--font-family-body);
  background-color: var(--nm-bg);
  color: var(--text-color-dark);
  line-height: 1.7;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.main-container {
  overflow: hidden; /* Contains parallax and animations */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-headings);
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: var(--spacing-medium);
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-large);
  color: var(--heading-color);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for titles */
}

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

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-speed-fast) var(--transition-timing-function);
}

a:hover, a:focus {
  color: var(--link-hover-color);
  text-decoration: underline;
}

section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
}

/* --- Neomorphism Base Elements --- */
.neomorphic-element {
  background: var(--nm-bg);
  border-radius: var(--nm-border-radius-main);
  box-shadow: var(--nm-shadow-outer-strong);
  transition: box-shadow var(--transition-speed-normal) var(--transition-timing-function), transform var(--transition-speed-normal) var(--transition-timing-function);
}

.neomorphic-element-light-bg { /* For elements on lighter variant background */
  background: var(--nm-bg-light-variant);
  box-shadow: 6px 6px 12px #b8c0cc, -6px -6px 12px #eaf2ff; /* Adjusted shadows for lighter bg */
}


.neomorphic-inset {
  background: var(--nm-bg);
  border-radius: var(--nm-border-radius-main); /* Match outer radius */
  box-shadow: var(--nm-shadow-inner-strong);
  padding: var(--spacing-small) var(--spacing-medium);
  border: none; /* Override default input borders */
  transition: box-shadow var(--transition-speed-normal) var(--transition-timing-function);
}
.neomorphic-inset:focus-within, 
.neomorphic-inset:focus {
  box-shadow: var(--nm-shadow-inner-soft), 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25); /* Focus ring like Bootstrap */
}

/* --- Buttons --- */
.btn, button, input[type="submit"], input[type="button"] {
  font-family: var(--font-family-headings);
  font-weight: bold;
  padding: 0.75rem 1.5rem; /* Base padding */
  border-radius: var(--nm-border-radius-sharp); /* Sharper radius for buttons */
  transition: all var(--transition-speed-normal) var(--transition-timing-function);
  cursor: pointer;
  border: none; /* Remove default borders */
  text-decoration: none;
  display: inline-block;
  text-align: center;
  /* Default neomorphic button - slightly extruded */
  background: var(--nm-bg);
  color: var(--primary-color);
  box-shadow: var(--nm-shadow-outer-soft);
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 15px var(--nm-shadow-dark), -8px -8px 15px var(--nm-shadow-light); /* Stronger extrusion */
  color: var(--link-hover-color); /* General hover color */
}

.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: var(--nm-shadow-inner-soft); /* Inset on active */
}

/* Specific button style from HTML (Hero button) */
.btn.neomorphic-element[style*="background-color: #FFA500"] {
    color: var(--primary-color); /* Ensure text color is set for contrast */
}
.btn.neomorphic-element[style*="background-color: #FFA500"]:hover {
    background-color: var(--accent-color-dark) !important; /* Important to override inline style */
    color: var(--primary-color);
}

/* Buttons that are meant to be inset */
.btn.neomorphic-inset {
    box-shadow: var(--nm-shadow-inner-strong);
    color: var(--primary-color);
}
.btn.neomorphic-inset:hover {
    box-shadow: var(--nm-shadow-inner-soft); /* Softer inset on hover */
    transform: none; /* No Y translation for inset buttons */
    color: var(--link-hover-color);
}
.btn.neomorphic-inset:active {
    box-shadow: inset 10px 10px 18px var(--nm-shadow-inset-dark), inset -10px -10px 18px var(--nm-shadow-light); /* Deeper inset */
}


/* --- Header / Navbar --- */
header.sticky-top {
  z-index: 1030; /* Ensure it's above other content */
}
.navbar {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
  background-color: var(--nm-bg) !important; /* Override Bootstrap */
  box-shadow: var(--nm-shadow-outer-soft); /* Subtle shadow for navbar */
}
.navbar .navbar-brand {
  font-family: var(--font-family-headings);
  font-weight: 700;
  color: var(--primary-color);
}
.navbar .nav-link {
  font-family: var(--font-family-headings);
  color: var(--text-color-dark);
  padding: var(--spacing-small) var(--spacing-medium);
  margin: 0 var(--spacing-extra-small);
  border-radius: var(--nm-border-radius-sharp);
  transition: all var(--transition-speed-fast) var(--transition-timing-function);
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--secondary-color);
  background-color: rgba(0,0,0,0.03); /* Slight indication */
}
.navbar-toggler { /* Neomorphic Toggler */
    border: none;
    padding: 0.5rem 0.75rem;
    background: var(--nm-bg);
    box-shadow: var(--nm-shadow-outer-soft);
}
.navbar-toggler:focus {
    box-shadow: var(--nm-shadow-outer-strong);
}
.navbar-toggler-icon {
    /* Customize if needed, Bootstrap's default is usually fine */
}

/* Add padding to body if using fixed-top navbar, sticky-top handles its own space */


/* --- Hero Section --- */
#hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Parallax effect - basic CSS, can be enhanced with JS */
  background-attachment: fixed; 
  position: relative; /* For overlay */
  color: var(--text-color-light); /* Ensured by HTML specific overlay */
}
#hero .container.text-overlay { /* From HTML */
    /* background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); */ /* Already in HTML */
    /* border-radius: 15px; */ /* Already in HTML */
    /* padding: 40px; */ /* Already in HTML */
    animation: fadeIn 1s ease-out; /* Simple fade-in for hero content */
}

#hero h1 {
  color: var(--text-color-light); /* V.IMPORTANT */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
#hero .lead {
  color: var(--text-color-light); /* V.IMPORTANT */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


/* --- Sections with light variant background --- */
.bg-light-neomorphic {
    background-color: var(--nm-bg-light-variant);
}
.bg-light-neomorphic .neomorphic-element { /* Cards on this bg */
    background: var(--nm-bg-light-variant);
    box-shadow: 8px 8px 15px #b8c0cc, -8px -8px 15px #eaf2ff; /* Adjusted shadows */
}
.bg-light-neomorphic .neomorphic-inset {
    background: var(--nm-bg-light-variant);
    box-shadow: inset 8px 8px 15px #b8c0cc, inset -8px -8px 15px #eaf2ff;
}
.bg-light-neomorphic .accordion-button {
    background-color: var(--nm-bg-light-variant); /* Match section bg */
    box-shadow: var(--nm-shadow-outer-soft); /* Use standard shadows as it's an element on the bg */
}
.bg-light-neomorphic .accordion-button:not(.collapsed) {
    box-shadow: var(--nm-shadow-inner-soft); /* Inset when open */
}

/* --- Cards (General Styling for Features, Customer Stories, Webinars, Workshops, External Resources) --- */
.card.neomorphic-element,
.card.neomorphic-element-light-bg {
  display: flex; /* STROGO */
  flex-direction: column; /* STROGO */
  align-items: center; /* STROGO */
  text-align: center; /* STROGO */
  height: 100%; /* Ensure cards in a row have same height if content varies (using Bootstrap .h-100) */
  padding: var(--spacing-large); /* Consistent padding for cards */
}
.card .card-image {
  margin-bottom: var(--spacing-medium);
  width: 100%; /* Ensure it spans card padding if needed */
  display: flex; /* For centering content within card-image div */
  justify-content: center; /* Center image/icon if not full width */
  align-items: center;
}

/* STROGO: Card images object-fit and height */
/* Icons in Features */
#features .card-image img {
  width: 80px; /* From HTML */
  height: 80px; /* From HTML */
  object-fit: contain; /* For SVG icons, contain is often better */
}

/* Circular images in Customer Stories */
#customer-stories .card-image img {
  width: 150px; /* From HTML */
  height: 150px; /* From HTML */
  object-fit: cover;
  border-radius: 50%; /* Ensure it's circular */
  box-shadow: var(--nm-shadow-outer-soft); /* Give the image itself a slight neomorphic pop */
}

/* Rectangular images in Webinars & Workshops */
#webinars .card-image .card-img-top,
#workshops .card-image .img-fluid { /* .img-fluid is used in workshop */
  width: 100%;
  height: 200px; /* STROGO: Fixed height example */
  object-fit: cover;
  border-radius: var(--nm-border-radius-soft); /* Rounded corners for images within cards */
}
#workshops .card-image .img-fluid {
  border-radius: var(--nm-border-radius-soft); /* Specifically for workshop images */
}


.card .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allows footer elements like buttons to stick to bottom */
  width: 100%; /* Ensure body takes full width within card padding */
}
.card .card-title {
  color: var(--primary-color);
  margin-bottom: var(--spacing-small);
}
.card .card-text {
  color: var(--text-color-medium);
  font-size: 0.95rem;
  flex-grow: 1; /* Push buttons/links to bottom if card-body is flex */
}
.card blockquote p {
    font-size: 0.9rem;
    color: var(--text-color-dark);
}

/* --- Awards Section --- */
#awards .neomorphic-element img {
  width: 120px; /* Adjusted size */
  height: 120px;
  object-fit: contain;
  margin-bottom: var(--spacing-small);
}
#awards .neomorphic-element h5 {
    font-size: 1.1rem;
    color: var(--primary-color);
}
#awards .neomorphic-element p {
    font-size: 0.85rem;
}
#awards .neomorphic-element p small {
    font-size: 0.75rem;
    color: var(--text-color-medium);
}


/* --- Partners Section --- */
#partners .partner-logo {
  max-height: 60px; /* Control logo height */
  width: auto;
  object-fit: contain;
  filter: grayscale(80%) opacity(0.7); /* Subtle effect for logos */
  transition: filter var(--transition-speed-normal) var(--transition-timing-function);
}
#partners .partner-logo:hover {
  filter: grayscale(0%) opacity(1);
}

/* --- External Resources Section --- */
#external-resources .card {
    padding: var(--spacing-medium);
}
#external-resources .card-title a {
    font-size: 1.1rem;
    font-weight: bold;
}
#external-resources .card-text {
    font-size: 0.85rem;
    line-height: 1.5;
}


/* --- FAQ Section (Accordion) --- */
.accordion-item {
  border: none; /* Remove Bootstrap border */
  margin-bottom: var(--spacing-medium) !important; /* Spacing between items */
  border-radius: var(--nm-border-radius-main) !important; /* Ensure neomorphic radius */
  overflow: hidden; /* Important for rounded corners with accordion */
}
.accordion-button {
  font-family: var(--font-family-headings);
  font-weight: 600;
  color: var(--primary-color);
  background-color: var(--nm-bg); /* Match section bg */
  border-radius: var(--nm-border-radius-main);
  box-shadow: var(--nm-shadow-outer-soft);
  transition: all var(--transition-speed-normal) var(--transition-timing-function);
  border: none; /* Remove default accordion button border */
}
.accordion-button:not(.collapsed) {
  color: var(--secondary-color);
  background-color: var(--nm-bg); /* Keep same bg */
  box-shadow: var(--nm-shadow-inner-soft); /* Inset when open */
}
.accordion-button:focus {
  z-index: 3;
  border-color: transparent; /* Remove Bootstrap focus border */
  outline: 0;
  box-shadow: var(--nm-shadow-inner-strong); /* Stronger inset on focus or use Bootstrap's ring */
}
.accordion-button::after { /* Style Bootstrap's arrow icon */
  filter: invert(20%) sepia(85%) saturate(2500%) hue-rotate(200deg) brightness(90%) contrast(100%); /* Color primary */
}
.accordion-button:not(.collapsed)::after {
  filter: invert(60%) sepia(90%) saturate(600%) hue-rotate(350deg) brightness(100%) contrast(100%); /* Color secondary */
}
.accordion-body {
  padding: var(--spacing-large);
  background: var(--nm-bg); /* Ensure body bg matches for inset effect */
  border-bottom-left-radius: var(--nm-border-radius-main);
  border-bottom-right-radius: var(--nm-border-radius-main);
  /* The neomorphic-inset class is applied in HTML - this makes the content area appear inset */
}
.accordion .neomorphic-inset { /* Applied to accordion-body */
    border-top-left-radius: 0;
    border-top-right-radius: 0; /* Align with accordion item */
}


/* --- Contact Section --- */
#contact form.neomorphic-element {
  padding: var(--spacing-large) var(--spacing-large);
}
.form-label {
  font-family: var(--font-family-headings);
  font-weight: 600;
  color: var(--text-color-dark);
  margin-bottom: var(--spacing-extra-small);
}
.form-control.neomorphic-inset {
  background-color: var(--nm-bg); /* Ensure background for inset effect */
  color: var(--text-color-dark);
  border: none; /* Override Bootstrap border */
  padding: 0.75rem 1rem; /* Consistent padding */
  box-shadow: var(--nm-shadow-inner-strong); /* Apply neomorphic inset */
  border-radius: var(--nm-border-radius-sharp); /* Consistent radius */
}
.form-control.neomorphic-inset::placeholder {
  color: #999;
}
.form-control.neomorphic-inset:focus {
  background-color: var(--nm-bg);
  color: var(--text-color-dark);
  box-shadow: var(--nm-shadow-inner-soft), 0 0 0 0.2rem rgba(var(--primary-color-rgb, 13, 71, 161), 0.25); /* Focus ring like BS */
  /* Define --primary-color-rgb if using rgba() */
}
:root { /* Add RGB version for rgba() usage */
  --primary-color-rgb: 13, 71, 161; 
}


/* --- Footer --- */
footer.neomorphic-element {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  background-color: var(--nm-bg);
  color: var(--text-color-medium);
  border-top-left-radius: var(--nm-border-radius-main) !important; /* Curved top edge for footer */
  border-top-right-radius: var(--nm-border-radius-main) !important;
  box-shadow: 0 -8px 15px var(--nm-shadow-dark), 0 8px 15px var(--nm-shadow-light); /* Shadow appears above */
}
footer a {
  color: var(--link-color);
  font-weight: 500;
  margin: 0 var(--spacing-small);
}
footer a:hover {
  color: var(--link-hover-color);
}
footer .mb-3 p.mb-1 { /* "Siganos..." text */
    font-family: var(--font-family-headings);
    color: var(--text-color-dark);
}
footer p small {
    font-size: 0.8em;
    color: var(--text-color-medium);
}

/* --- Specific Page Styles --- */
/* success.html */
.success-page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--spacing-large);
  background-color: var(--nm-bg); /* Consistent background */
}
.success-page-container .neomorphic-element {
    padding: calc(var(--spacing-large) * 2); /* More padding for the content box */
    max-width: 600px;
}
.success-page-container h1 {
    color: var(--primary-color);
}
.success-page-container img.success-icon {
    width: 100px;
    height: 100px;
    margin-bottom: var(--spacing-large);
}


/* privacy.html & terms.html */
.privacy-page-container,
.terms-page-container,
.about-page-container, /* Adding for about.html as well */
.contacts-page-container { /* Adding for contacts.html */
  padding-top: calc(var(--section-padding-y) + 70px); /* Account for fixed header height approx */
  padding-bottom: var(--section-padding-y);
}
.privacy-page-container .content-wrapper,
.terms-page-container .content-wrapper,
.about-page-container .content-wrapper,
.contacts-page-container .content-wrapper {
  background-color: var(--nm-bg);
  padding: var(--spacing-large);
  border-radius: var(--nm-border-radius-main);
  box-shadow: var(--nm-shadow-outer-strong);
}
.privacy-page-container h1,
.terms-page-container h1,
.about-page-container h1,
.contacts-page-container h1 {
  margin-bottom: var(--spacing-large);
  text-align: center;
}
.privacy-page-container h2,
.terms-page-container h2,
.about-page-container h2,
.contacts-page-container h2 {
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-small);
  color: var(--primary-color);
}

/* --- Parallax & Animations (Placeholders for JS interaction) --- */
.parallax-bg {
  /* background-attachment: fixed; */ /* Basic CSS parallax, JS preferred for smoothness/mobile */
  /* JS will handle transformations */
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--transition-timing-function), transform 0.6s var(--transition-timing-function);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* --- Utility Classes --- */
.text-shadow {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* --- "Read More" Links --- */
.read-more-link {
    display: inline-block;
    margin-top: auto; /* Pushes to bottom if card body is flex */
    padding: var(--spacing-small) var(--spacing-medium);
    color: var(--secondary-color);
    font-weight: bold;
    font-family: var(--font-family-headings);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--nm-border-radius-sharp);
    transition: all var(--transition-speed-fast) var(--transition-timing-function);
}
.read-more-link:hover, .read-more-link:focus {
    color: var(--text-color-light);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }
  #hero h1 {
    font-size: 2.5rem;
  }
  #hero .lead {
    font-size: 1.1rem;
  }
  .btn, button, input[type="submit"], input[type="button"] {
    padding: 0.6rem 1.2rem;
  }
  /* Ensure parallax background fixed attachment is disabled on mobile for performance/rendering issues */
  .parallax-bg {
    background-attachment: scroll !important;
  }
  .privacy-page-container,
  .terms-page-container,
  .about-page-container,
  .contacts-page-container {
      padding-top: calc(var(--section-padding-y) + 60px); 
  }
}

@media (max-width: 576px) {
  #hero {
    min-height: 60vh;
  }
  #hero .container.text-overlay {
    padding: 20px;
  }
  .section-title {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-medium);
  }
  section {
    padding-top: calc(var(--section-padding-y) * 0.8);
    padding-bottom: calc(var(--section-padding-y) * 0.8);
  }
}