:root{
  --primary: #0072CE;
  --dark: #111;
  --light: #f4f4f4;
  --white: #fff;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; }

/* Page header */
.reg-header {
  max-width: 1100px;
  margin: 24px auto 8px;
  padding: 0 18px;
}
.reg-header h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  color: var(--primary);
}
.reg-subtitle { margin: 0 0 12px; color: #555;  text-align: center;}

/* Container + grid */
.reg-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px 40px;
}
.reg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
@media (max-width: 760px){
  .reg-grid { grid-template-columns: 1fr; }
}

/* Card */
.reg-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.reg-card.animate__animated:nth-child(1){ animation-delay:.1s; }
.reg-card.animate__animated:nth-child(2){ animation-delay:.5s; }

.reg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.reg-card-body { padding: 20px 20px 6px; }
.reg-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.reg-card p  { margin: 0 0 10px; color: #444; line-height: 1.45; }

/* Features list */
.reg-features { margin: 8px 0 0; padding: 0 0 6px 18px; color: #444; }
.reg-features li { margin: 6px 0; }

/* Buttons */
.reg-btn {
  margin: 14px 20px 20px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  color: var(--dark);
  background: #f9fafb;
  transition: filter .15s ease, transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.reg-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }

.reg-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.reg-btn-primary:hover { filter: brightness(1.06); }

/* Footer */
.reg-foot {
  max-width: 1100px;
  margin: 0 auto 26px;
  padding: 0 18px;
  color: #555;
}
.reg-foot a { color: var(--primary); text-decoration: none; font-weight: 600; }
.reg-foot a:hover { text-decoration: underline; }

/* Dark mode (cooperates with body.dark from your site) */
body.dark { background: #121212; color: #eaeaea; }
body.dark .reg-header .reg-subtitle { color: #cfcfcf; }
body.dark .reg-card { background: #1e1e1e; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
body.dark .reg-card p, 
body.dark .reg-features { color: #d5d5d5; }
body.dark .reg-btn { background: #232323; color: #eaeaea; border-color: #2b2b2b; }
body.dark .reg-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
body.dark .reg-foot { color: #cfcfcf; }

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}