/* =================== */
/* BRUTALISM + NEO-BRUTALISM MODERN UI THEME */
/* =================== */

/* ------ VARIABLES: THEME TETRADA ------ */
:root {
  /* Primary - Yellow Gold */
  --brutal-yellow: #FFD700;
  --brutal-yellow-dark: #C6A300;
  /* Secondary - Teal Blue */
  --brutal-teal: #28B5B5;
  --brutal-teal-dark: #1C7676;
  /* Accent 1 - Bright Coral */
  --brutal-coral: #FF6F61;
  --brutal-coral-dark: #C63D30;
  /* Accent 2 - Deep Purple */
  --brutal-purple: #6B5B95;
  --brutal-purple-dark: #3C3361;
  /* Neutral - Black/White */
  --brutal-bg: #fff;
  --brutal-bg-dark: #222222;
  --brutal-header-bg: #201A23;

  /* Typography */
  --brutal-title: 'Inter', Arial, sans-serif;
  --brutal-text: 'IBM Plex Sans', Arial, sans-serif;
  --brutal-radius: 18px;
  --brutal-radius-sm: 12px;

  /* Shadows */
  --brutal-shadow-lg: 0 8px 32px rgba(0,0,0,0.29);
  --brutal-shadow-md: 0 3px 12px rgba(0,0,0,0.13);
  --brutal-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);

  /* Parallax gradient backgrounds */
  --parallax-hero: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.51));
  --parallax-purple: linear-gradient(125deg, #6B5B95 70%, #FFD700 100%);
  --parallax-teal: linear-gradient(120deg,#28B5B5 80%, #6B5B95 100%);
  --parallax-coral: linear-gradient(125deg, #FF6F61 70%, #28B5B5 100%);
  --parallax-card: linear-gradient(108deg, #fff 75%, #FFD700 108%);
}

/* ------ RESET & BASE ------ */
html {
  box-sizing: border-box;
  font-size: 16px;
  scroll-behavior: smooth;
  background: var(--brutal-bg);
}
*, *:before, *:after { box-sizing: inherit; }

body {
  font-family: var(--brutal-text);
  background-color: var(--brutal-bg);
  color: #232323;
  margin: 0;
}

a {
  color: var(--brutal-coral);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.17s cubic-bezier(.76,.05,.86,.06);
}

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

.section-title {
  font-family: var(--brutal-title);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 2.5rem 0 2rem 0;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  line-height: 1.13;
}

.main-container {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

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

/* ----------------------------------- */
/* LAYOUT */
/* ----------------------------------- */

.brutal-section {
  width: 100%;
  margin: 0 auto;
  padding: 4vw 0 4vw 0;
  position: relative;
  box-sizing: border-box;
}

.brutal-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  width: 100%;
}

.is-two-thirds {
  flex: 2 1 65%;
  min-width: 300px;
  max-width: 80vw;
}

/* For cards in columns */
@media (max-width: 1040px) {
  .brutal-columns {
    flex-direction: column;
    align-items: center;
    gap: 1.7rem;
  }
  .is-two-thirds, .card { max-width: 98vw; }
}

/* ----------------------------------- */
/* HEADER + NAVIGATION */
/* ----------------------------------- */

.header {
  width: 100%;
  position: fixed;
  top: 0; left: 0;
  z-index: 2000;
  background-color: var(--brutal-header-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.11);
  transition: background-color 0.2s;
  padding: 0;
}

.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2vw;
  display: flex;
  height: 74px;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--brutal-title);
  letter-spacing: 0.03em;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  margin-right: 2vw;
}

.nav {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav > li > a {
  font-family: var(--brutal-title);
  font-weight: 700;
  font-size: 1.04rem;
  color: #fff;
  padding: 8px 10px;
  border-radius: 11px;
  transition: background 0.15s, color 0.16s;
  position: relative;
  line-height: 1.2;
}

.nav > li > a:hover,
.nav > li > a:focus {
  background: var(--brutal-yellow-dark);
  color: #232323;
  text-decoration: none;
}

.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap:5px;
  margin-left: 1.7rem;
  z-index: 2;
}

.burger span {
  height: 4px;
  width: 30px;
  border-radius:2px;
  margin: 0;
  background: var(--brutal-yellow);
  display: block;
  transition: .25s;
}

/* Mobile Header & Burger Menu */
@media (max-width: 900px) {
  .nav {
    position: absolute;
    right: 0;
    top: 74px;
    background: var(--brutal-header-bg);
    flex-direction: column;
    width: 220px;
    border-bottom-left-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.29);
    max-height: 0;
    overflow: hidden;
    transition: max-height .36s cubic-bezier(.83,.04,.36,.91);
  }
  .nav.open { max-height: 380px; transition: max-height .45s cubic-bezier(.3,.83,.31,1); }
  .nav > li { margin: 0.8em 0; }
  .burger { display: flex; }
}
@media (max-width: 480px) {
  .nav-container { padding: 0 7vw; }
}

/* Add top padding for content after header (header height + small extra) */
@media (max-width: 900px) {
  .main-container { padding-top: 88px; }
}
@media (min-width: 900px) {
  .main-container { padding-top: 82px; }
}

/* ----------------------------------- */
/* HERO */
/* ----------------------------------- */
.hero {
  background: var(--parallax-hero), url('image/hero-business-consulting-training-people-meeting.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 35%;
  position: relative;
  min-height:480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  z-index: 1;
}

.hero-content {
  text-align: center;
  margin: 0 auto;
  padding: 6vw 3vw 9vw 3vw;
  max-width: 940px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.hero h1, .hero .section-title, .hero-lead {
  color: #fff !important;
  text-shadow: 2px 3px 23px rgba(0,0,0,0.66), 1px 1px 6px rgba(0,0,0,0.5);
}

.hero h1 {
  font-family: var(--brutal-title);
  font-size: 3.8rem;
  margin-bottom: 1.5rem;
}

.hero-lead {
  font-family: var(--brutal-text);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  background: rgba(25,25,29,0.36);
  border-radius: 1.7rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.47);
  margin: 1.2rem auto 2.4rem;
  padding: 1.15rem 2.5rem;
  color: #fff;
}

/* Hero Stats */
.hero-stats {
  margin-top:2.5rem;
  gap: 2.1rem;
  display:flex;
  justify-content:center;
  align-items: center;
}
.stat {
  min-width:115px;
  text-align:center;
}
.stat-number {
  font-family: var(--brutal-title);
  font-size:2.1rem;
}
.stat-desc {
  font-size:1.07rem;
  font-family: var(--brutal-text);
}

@media (max-width: 700px) {
  .hero h1,
  .section-title { font-size: 2.18rem; }
  .hero-lead { font-size: 1.09rem; }
  .hero-content { padding: 7vw 2vw 9vw 2vw; }
}

@media (max-width: 450px) {
  .hero { min-height:320px; }
  .hero-content { padding: 10vw 0.5rem 10vw 0.5rem;}
}

/* ----------------------------------- */
/* GENERAL BUTTONS & CTA */
/* ----------------------------------- */
.btn,
button,
input[type='submit'],
.brutal-btn,
.brutal-cta {
  font-family: var(--brutal-title);
  background: var(--brutal-yellow);
  color: #232323;
  border:none;
  font-weight: 700;
  border-radius: 2rem;
  text-align: center;
  padding: 1.05rem 2.3rem;
  cursor: pointer;
  font-size: 1.08rem;
  box-shadow: 0 2px 14px rgba(0,0,0,0.25);
  text-shadow: none;
  margin: 0.7em auto 0.7em auto;
  transition: background 0.12s cubic-bezier(.61,.01,.64,1), color 0.13s;
  outline: none;
  position: relative;
  letter-spacing:0.01em;
  display: inline-block;
}

.btn:hover, .btn:focus,
button:hover, button:focus,
input[type='submit']:hover, input[type='submit']:focus,
.brutal-btn:hover, .brutal-btn:focus,
.brutal-cta:hover, .brutal-cta:focus {
  background: var(--brutal-coral);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.30), 0 2px 4px #FFD700;
  outline: none;
  text-decoration:none;
}

/* Read more link */
.read-more, .read-more-link {
  display:inline-block;
  color: var(--brutal-purple);
  background: none;
  border-bottom: 2px solid var(--brutal-purple);
  font-weight: 700;
  font-family: var(--brutal-title);
  padding: 2px 0 1px 0;
  transition: color .16s, border-color .14s;
  position: relative;
  margin-top: 0.31em;
  cursor: pointer;
}
.read-more:hover, .read-more-link:hover {
  color: var(--brutal-yellow-dark);
  border-color: var(--brutal-yellow-dark);
  text-decoration: none;
}

/* ----------------------------------- */
/* CARDS & IMAGE CARDS */
/* ----------------------------------- */
.card,
.item,
.testimonial,
.team-member,
.product-card,
.success-card,
.project-card,
.workshop-card,
.award-card,
.resource-card,
.about-card,
.innovation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: var(--brutal-radius);
  box-shadow: var(--brutal-shadow-md);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  text-align:center;
  transition: box-shadow 0.18s cubic-bezier(.76,.05,.86,.06), transform .15s;
}

/* Card Hover effect */
.card:hover,
.item:hover,
.success-card:hover,
.project-card:hover,
.workshop-card:hover,
.award-card:hover,
.resource-card:hover,
.about-card:hover,
.innovation-card:hover {
  box-shadow: 0 5px 34px rgba(0,0,0,0.25), 0 2px 8px var(--brutal-yellow-dark);
  transform: translateY(-3px) scale(1.01);
  z-index: 2;
}

.card-image, .image-container {
  width: 100%;
  max-width: 550px;
  height: 220px;
  min-height: 170px;
  border-top-left-radius: var(--brutal-radius);
  border-top-right-radius: var(--brutal-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  background: #f3f3f3;
  position: relative;
}

.card-image img, .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  border-radius: 0;
  transition: transform .18s;
}

.card:hover .card-image img,
.card:hover .image-container img {
  transform: scale(1.05);
}

.card-content {
  width: 100%;
  box-sizing: border-box;
  padding: 1.1rem 1.38rem 1.24rem 1.38rem;
  background: rgba(255,255,255,0.98);
  flex: 1 1 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Fix for different card heights in multicolumn */
@media (max-width: 690px) {
  .card-image, .image-container { height: 155px; min-height: 110px; }
  .card-content { padding:1rem 0.7rem 1.06rem 0.7rem; }
}

/* ----------------------------------- */
/* SECTIONS: ABOUT, PROJECTS, SUCCESS, WORKSHOPS, AWARDS, INNOVATION */
/* ----------------------------------- */

/* --- ABOUT --- */
.about-section {
  background: var(--parallax-coral), #fff;
  border-bottom: 4px solid var(--brutal-purple);
}
.about-content { gap:3.5rem; }
.about-text {
  font-size: 1.14rem;
  color: #222;
  line-height: 1.62;
  font-family: var(--brutal-text);
  margin: 0 0 0 0;
  text-align: left;
  padding-left:2vw;
  padding-right:2vw;
}

/* --- PROJECTS --- */
.projects-section {
  background: var(--parallax-purple), var(--brutal-yellow);
  border-bottom: 4px solid var(--brutal-teal);
}

.project-gallery {
  padding: 0.4rem 1vw 0.8rem 1vw;
}

/* --- SUCCESS STORIES + SLIDER --- */
.success-section {
  background: var(--parallax-teal), var(--brutal-teal);
  border-bottom: 4px solid var(--brutal-yellow);
  color: #fff;
}

.success-gallery {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.6rem;
  width: 100%;
}
.success-gallery > .card {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.success-progress {
  margin: 2rem auto 1.2rem;
  width: 95%;
  max-width: 410px;
}
.progress-bar-bg {
  width: 100%;
  height: 13px;
  background: #fff;
  border-radius: 10px;
  margin: 0.6rem 0;
}
.progress-bar-fill {
  background: var(--brutal-yellow);
  height: 13px;
  border-radius: inherit;
  transition: width 2.2s cubic-bezier(.74,.25,.32,1);
}

/* --- WORKSHOPS --- */
.workshops-section {
  background: var(--brutal-purple);
  background-image: var(--parallax-purple);
  color: #fff;
  border-bottom: 4px solid var(--brutal-coral);
}

.workshop-list {
  gap: 2.8rem;
}
.workshop-card .card-content strong {color:var(--brutal-purple);text-shadow:0 2px 3px #FFD70055;}

/* --- RESOURCES --- */
.resources-section {
  background: #fff;
  border-top: 4px solid var(--brutal-yellow);
  border-bottom: 4px solid var(--brutal-teal);
  color: #232323;
}
.resources-content { gap:2.2rem; }
.resource-card .card-content strong {color:var(--brutal-teal);}

/* --- AWARDS & INNOVATION --- */
.awards-section {
  background: #fff8e1;
  border-bottom: 4px solid var(--brutal-teal);
}

.award-card .card-content strong {color:var(--brutal-yellow);}

.innovation-section {
  background: var(--brutal-bg-dark);
  border-bottom: 4px solid var(--brutal-yellow);
}
.innovation-section .section-title {
  color:var(--brutal-yellow);
  text-shadow:2px 2px 7px rgba(0,0,0,0.81);
}
.innovation-card .card-content {background:rgba(33,33,33,0.96); color: #eee;}
.innovation-widgets {
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  width:100%;
  align-items:center;
  margin-left:1.1vw;
}

.stat-widget {
  width:100%;
  max-width:340px;
  margin: 0 auto;
  font-size:1.01rem;
  box-shadow:var(--brutal-shadow-sm);
  border-radius:var(--brutal-radius-sm);
  padding:1.1rem 1.6rem;
  font-family:var(--brutal-text);
  text-align: center;
}

@media (max-width: 980px) {
  .innovation-content { flex-direction: column; gap:2rem;}
}

/* ----------------------------------- */
/* CONTACT FORM */
/* ----------------------------------- */
.contact-section {
  background: #fff;
  color:#232323;
  border-top: 4px solid var(--brutal-teal);
}
.contact-form-container {
  margin: 0 auto;
  padding:2vw 0.5vw;
}

.brutal-form {
  background: linear-gradient(110deg,rgba(255,255,255,0.95) 88%,var(--brutal-yellow) 100%);
  border-radius: var(--brutal-radius);
  box-shadow: 0 4px 36px 0 rgba(21,21,21,0.11);
  padding:2rem 2.7rem;
  max-width: 540px;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  gap:0.7rem;
}

.brutal-form label {
  color: #232323;
  font-family: var(--brutal-title);
  font-size: 1.13rem;
  font-weight:700;
  margin-bottom:0.33rem;
  margin-top:0.98rem;
}

.brutal-form input,
.brutal-form textarea {
  font-family: var(--brutal-text);
  font-size: 1.06rem;
  color: #232323;
  padding: 0.8em 1.09em;
  margin-bottom: 1.1em;
  border-radius: 7px;
  border: 2px solid #e2e2e2;
  background: #fff;
  box-shadow: 0 1px 2px #ffd7000a;
  transition: border-color 0.19s, box-shadow 0.15s;
  resize: none;
}

.brutal-form input:focus, 
.brutal-form textarea:focus {
  border-color: var(--brutal-yellow);
  outline: none;
  box-shadow: 0 2px 6px #FFD70055;
}

#form-success {
  font-size: 1.23rem;
  font-weight: 600;
}

/* Responsive Contact */
@media (max-width:540px) {
  .brutal-form {
    padding: 1.15rem 0.65rem;
  }
}

/* ----------------------------------- */
/* FOOTER */
/* ----------------------------------- */
.footer {
  width: 100vw;
  margin: 0;
  padding: 2.6rem 0 0.9rem 0;
  background: var(--brutal-header-bg);
  color: #fff;
  position: relative;
  z-index: 11;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.15);
}

.footer-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2.7rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 2vw;
}

.footer-nav ul,
.footer-social ul {
  margin: 0.6rem 0 0.8rem 0;
  padding: 0;
  list-style: none;
}

.footer-nav li,
.footer-social li {
  margin-bottom: 0.46em;
}

.footer a {
  color: #fafbfc;
  text-decoration: underline;
  font-family: var(--brutal-title);
  transition: color 0.14s;
  font-size:1.04em;
}

.footer a:hover {
  color: var(--brutal-yellow);
  background: transparent;
  text-decoration: underline dotted;
}

.footer-contacts p,
.footer-contacts a {
  font-family: var(--brutal-text);
  color: #fff;
  font-size: 1em;
}
.footer-contacts a:hover { color: var(--brutal-coral); }

.footer .footer-social a { color: #fff; font-weight:700;}
.footer .footer-social a:hover { color: var(--brutal-purple); }

.footer-contacts {
  line-height: 1.62;
}

/* Social Icons Styles (text links only) */
.footer .footer-social li {
  display: inline-block;
  margin-right: 1.55em;
  margin-bottom: 0.58em;
  font-family: var(--brutal-title);
  font-size:1.07em;
}

.footer .footer-social li:last-child { margin-right:0;}
.footer .footer-social a::after {
  content: '';
  display: inline-block;
  margin-left: .4em;
  width: 0.75em;
  height: 0.75em;
  vertical-align: middle;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .58;
  margin-bottom: 1px;
  transition: border-color .15s;
}
.footer .footer-social a:hover::after {
  border-color: var(--brutal-yellow);
}

/* For good footer stacking on mobile */
@media (max-width: 700px) {
  .footer-content { flex-direction: column; gap: 1.4rem; padding: 0 3vw;}
}

/* ----------------------------------- */
/* PARALLAX / GLASSMORPHISM */
/* ----------------------------------- */
.parallax-bg {
  background-attachment: fixed;
  will-change: background-position;
  /* fallback for iOS devices, etc. */
  @media (max-width: 900px) {
    background-attachment: scroll;
  }
}
.parallax-blur {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.14);
}

/* ----------------------------------- */
/* SCROLLBAR (for gallery slider) */
/* ----------------------------------- */
.success-gallery {
  scrollbar-width: thin;
  scrollbar-color: var(--brutal-yellow) #f3f3f3;
}
.success-gallery::-webkit-scrollbar {
  height: 10px;
  background: #eee;
  border-radius: 7px;
}
.success-gallery::-webkit-scrollbar-thumb {
  background: var(--brutal-yellow);
  border-radius: 7px;
}

/* ----------------------------------- */
/* UTILITIES */
/* ----------------------------------- */
.text-dark { color: #232323 !important; }
.text-white, .text-light { color: #fff !important; }
.text-gold { color: var(--brutal-yellow); }
.text-purple { color: var(--brutal-purple); }
.text-coral { color: var(--brutal-coral); }
.bg-gold { background: var(--brutal-yellow) !important; }
.bg-teal { background: var(--brutal-teal) !important; }
.bg-purple { background: var(--brutal-purple) !important; }
.bg-coral { background: var(--brutal-coral) !important; }
.radius { border-radius: var(--brutal-radius); }

/* For better column sizing on larger screens */
@media (min-width:900px) {
  .is-two-thirds { max-width: 67vw; }
  .footer-content > section { flex-basis: 27%; min-width: 200px;}
}

/* ----------------------------------- */
/* PAGE-SPECIFIC STYLES                */
/* ----------------------------------- */

/* ---- SUCCESS.HTML ---- */
.success-success-page {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#FFD700 40%,#28B5B5 100%);
  color:#222;
  text-align:center;
}
.success-success-page h1 {
  font-size:2.8rem;
  font-family:var(--brutal-title);
  color:var(--brutal-coral);
  margin-bottom:1.4rem;
  text-shadow:1px 1px 3px #fff8e1bb;
}
.success-success-page .btn, 
.success-success-page button {
  margin-top:2rem;
}

/* ---- PRIVACY / TERMS ---- */
.privacy-content,
.terms-content {
  padding-top: 100px;
  max-width:900px;
  margin:0 auto;
  font-family:var(--brutal-text);
  color:#232323;
  background:#fff;
}

.privacy-content h1,
.terms-content h1 {
  font-family:var(--brutal-title);
  font-size:2.2rem;
  color:var(--brutal-coral);
  margin-bottom:1.1rem;
}

.privacy-content h2,
.terms-content h2 {
  color:var(--brutal-purple);
  font-family:var(--brutal-title);
  font-size:1.24rem;
}

/* ---- MISC AND ANIMATION ---- */
@media (max-width: 540px) {
  .section-title {font-size:1.48rem;}
}

/* AOS fade-up override for crisper parallax effect */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(.96);
  transition-property: opacity, transform;
}
[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.00);
}

[data-aos="fade-down"] {
  opacity: 0;
  transform: translate3d(0, -34px, 0) scale(.96);
}
[data-aos="fade-down"].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.00);
}

/* Smoother page transitions */
body, .main-container, .brutal-section {
  transition: background 0.27s cubic-bezier(.72,.08,.52,1), color 0.19s;
}

@media (max-width: 700px) {
  .brutal-section {
    padding: 7vw 0 6vw 0;
  }
  .section-title { margin-top:1.44rem;margin-bottom:1.1rem;}
}

/* ----------- END ----------- */