/* MKS Template Components v4.1.0 */

/* Page Header */
.mks-page-header {
  text-align: center;
  padding: 2rem 0;
}

.mks-page-header h1 {
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-h1);
  font-weight: var(--mks-font-weight-bold);
  color: var(--mks-text);
  margin: 0;
}

.mks-subtitle {
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-body);
  color: var(--mks-text);
  margin-top: 0.5rem;
}

/* Card Component */
.mks-card {
  background: var(--mks-bg);
  box-shadow: var(--mks-shadow);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.mks-card-image {
  width: 100%;
  height: auto;
  display: block;
}

.mks-card-body {
  padding: 1.5rem;
}

.mks-card-title {
  font-family: var(--mks-font);
  font-size: 1.5rem;
  font-weight: var(--mks-font-weight-bold);
  color: var(--mks-text);
  margin: 0 0 0.5rem;
}

.mks-card-content {
  font-family: var(--mks-font);
  font-size: var(--mks-font-size-body);
  line-height: var(--mks-line-height);
  color: var(--mks-text);
}

.mks-card-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--mks-primary);
  font-family: var(--mks-font);
  font-weight: var(--mks-font-weight-bold);
  text-decoration: none;
}

.mks-card-link:hover {
  text-decoration: underline;
}

/* Button Component */
.mks-btn {
  display: inline-block;
  background: var(--mks-primary);
  color: var(--mks-bg);
  font-family: var(--mks-font);
  font-weight: var(--mks-font-weight-bold);
  font-size: var(--mks-font-size-body);
  padding: 0.6rem 1.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.mks-btn:hover {
  opacity: 0.9;
}

.mks-btn-secondary {
  background: transparent;
  color: var(--mks-primary);
  border: 2px solid var(--mks-primary);
}

.mks-btn-secondary:hover {
  background: var(--mks-primary);
  color: var(--mks-bg);
}