.mantra-page {
  background-color: white;
  min-height: 100%;
  padding: 40px 40px 40px 80px;
  position: relative;
  font-family: var(--form-font-family) !important;
  color: #2c3e50;
  line-height: 32px;
  box-shadow: var(--opus-shadow-lg);
  border-radius: var(--opus-border-radius);
  /* Lined paper effect */
  background-image: linear-gradient(transparent 31px, #e1e9f0 1px);
  background-size: 100% 32px;
  background-attachment: local;
  background-position: 0 40px;
}

.mantra-header {
  position: relative;
  margin-bottom: 32px;
  padding-top: 0;
}

.mantra-floral {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 150px;
  height: 150px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

.mantra-content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding-top: 6px; /* Fine-tune to sit on the line */
}

.mantra-paragraph {
  margin-bottom: 32px;
  font-size: 1.2rem;
  text-indent: 0;
  padding-left: 10px;
}

/* Red vertical line on the left like a notebook */
.mantra-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 70px;
  height: 100%;
  width: 2px;
  background-color: rgba(255, 100, 100, 0.3);
  z-index: 1;
}

.mantra-page h1 {
  font-family: var(--form-font-family) !important;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 50px;
  color: #00326b;
  border: none;
}

@media (max-width: 768px) {
  .mantra-page {
    padding: 20px;
  }
  .mantra-page::before {
    left: 30px;
  }
  .mantra-floral {
    width: 100px;
    height: 100px;
    top: -10px;
    right: -10px;
  }
}