:root{
  --bg:#f6f8fb;
  --surface:#ffffff;

  --muted:#3d3d3d;

  /* New Color Palette */
  --green:#0F9D58;
  --lemon:#F4B400;
  --red:#DB4437;
  --black:#202124;

  /* Gradients using the new palette */
  --accent-start: var(--green);
  --accent-end: var(--lemon);

  --max-width:1100px;
  --radius:12px;
  --container-padding:24px;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding: 28px var(--container-padding);
}

/* ---------------- HEADER ---------------- */

.site-header{
  background:linear-gradient(90deg, rgba(15,157,88,0.06), rgba(244,180,0,0.06));
  border-bottom:1px solid rgba(32,33,36,0.05);
  position:sticky;
  top:0;
  z-index:40;
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
}
.logo span{font-weight:600}
.nav a{margin-left:18px; text-decoration:none; color:var(--muted)}
.nav a.cta{
  padding:8px 12px; 
  border-radius:8px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  color:white; 
  font-weight:600; 
  text-decoration:none
}
.nav a.small{font-size:14px}

/* ---------------- HERO ---------------- */

.hero{
  background: linear-gradient(180deg, rgba(15,157,88,0.06), rgba(244,180,0,0.05));
  padding:36px 0;
}
.hero-inner{
  display:flex;
  gap:28px;
  align-items:stretch;
  justify-content:space-between;
}
.hero-left{flex:1; min-width:300px}
.hero-right{width:360px; display:flex; flex-direction:column; gap:16px}

h1{font-size:28px; margin:0 0 8px}
.lead{color:var(--muted); margin-bottom:16px}
.meta{list-style:none; padding:0; margin:0 0 18px}
.meta li{margin-bottom:6px; color:var(--black)}

.hero-actions{display:flex; gap:12px; margin:12px 0}
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  border:1px solid rgba(32,33,36,0.1);
}
.btn.primary{background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); color:#fff}
.btn.outline{background:transparent; border:1px solid rgba(32,33,36,0.15)}
.btn.ghost{background:transparent; color:var(--muted)}

/* ---------------- CARDS ---------------- */

.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(32,33,36,0.05);
  padding:18px;
  overflow:hidden;
}
.card img{width:100%; display:block; border-radius:8px; margin-top:8px}

.card.highlight{
  border:1px solid rgba(15,157,88,0.12);
  background:linear-gradient(180deg, rgba(255,255,255,0.97), #fff);
}

.tag{
  margin-top:10px;
  display:inline-block;
  font-weight:600;
  padding:6px 8px;
  border-radius:8px;
  background:linear-gradient(90deg, rgba(15,157,88,0.12), rgba(244,180,0,0.1));
  color:#232323;
}

/* ---------------- AGENDA ---------------- */

.section{padding:36px 0}

.agenda-section {
  background: var(--surface);
  padding: 60px 0;
}

.agenda-table {
  width: 100%;
  max-width: 800px;
  margin: 30px auto 0 auto;
  border-collapse: collapse;
  display: table;
}

.agenda-row {
  display: table-row;
}

.agenda-row .time,
.agenda-row .desc {
  display: table-cell;
  padding: 14px 20px;
  vertical-align: top;
}

.agenda-row .time {
  width: 150px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

.agenda-row .desc {
  color: var(--black);
  font-size: 15px;
}

.agenda-row:nth-child(odd) {
  background: rgba(15,157,88,0.05);
}

.agenda-row:hover {
  background: rgba(244,180,0,0.12);
  transition: background 0.2s ease;
}

/* ---------------- WORKSHOP CARD ---------------- */

.workshop-card {
  background: var(--surface);
  border: 1px solid rgba(32, 33, 36, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(32,33,36,0.08);
  padding: 40px;
  margin: 60px auto;
  max-width: 1200px;
}

.workshop-card .two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .workshop-card .two-col {
    grid-template-columns: 1fr;
  }
}

/* -------- Learn Cards -------- */

.learn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.learn-card {
  background: #ffffff;
  border: 1px solid rgba(32,33,36,0.1);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(32,33,36,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.learn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.learn-card h4 {
  margin-top: 0;
  color: var(--green);
  font-size: 17px;
}

.learn-card p {
  font-size: 15px;
  color: #444;
  line-height: 1.55;
}

/* ---------------- REGISTER SECTION ---------------- */

.register-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 20px;
  background: linear-gradient(135deg, var(--green) 0%, var(--lemon) 100%);
  color: #fff;
  text-align: center;
}

.register-card {
  background: #ffffff;
  color: var(--black);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  padding: 60px 40px;
  max-width: 700px;
  width: 100%;
  text-align:center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.register-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.register-card h2 {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 16px;
}

.register-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 20px 0 32px;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

.event-detail i {
  color: var(--green);
}

.register-btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--green), var(--lemon));
  color: #fff;
  padding: 14px 36px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration:none;
  box-shadow: 0 6px 16px rgba(15,157,88,0.30);
  transition: background 0.3s ease, transform 0.2s ease;
}

.register-btn:hover {
  background: linear-gradient(90deg, var(--red), var(--black));
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(219,68,55,0.4);
  
}

/* ---------------- Image ---------------- */
.image-placeholder{
  width:600px;
  height:300px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(32,33,36,0.1);
}

/* ---------------- FOOTER ---------------- */

.site-footer{
  padding:24px 0; 
  color:var(--muted); 
  font-size:13px; 
  border-top:1px solid rgba(32,33,36,0.06)
}

/* MOBILE TWEAKS */

@media (max-width:900px){
  .hero-inner{flex-direction:column}
  .hero-right{width:100%}
  .two-col{grid-template-columns:1fr}
  .nav a{display:none}
}

@media (max-width:700px){
  .agenda-row {display:block; padding:12px 0;}
  .agenda-row .time,
  .agenda-row .desc {display:block; width:100%; padding:6px 0;}
}