body { margin: 0; font-family: 'Georgia', serif; background-color: #fdf5e6; } .invitation-border { background: url('border.png') repeat; padding: 30px; } .invitation-card { background-color: #fdf1dc; border: 2px solid #d88d2b; max-width: 700px; margin: auto; padding: 30px; text-align: center; box-shadow: 0 0 15px rgba(0,0,0,0.1); position: relative; } h1 { color: #801515; font-size: 2.5em; margin: 0.3em 0; } h2 { color: #5a2a00; margin-bottom: 0; } .details { font-weight: bold; color: #5a2a00; font-size: 1.1em; margin-bottom: 1em; } .telugu { font-size: 1.2em; color: #600404; margin-bottom: 1.5em; } button { background-color: #fff6e5; color: #5a2a00; border: 2px solid #d88d2b; padding: 10px 20px; font-size: 1em; border-radius: 6px; cursor: pointer; margin-top: 10px; } button:hover { background-color: #fce3b9; }

.chatbox {
  display: inline-block;
  position: relative;
  background: #fff3d4;
  border: 2px solid #d88d2b;
  border-radius: 20px;
  padding: 16px 24px;
  margin: 20px auto;
  font-size: 1em;
  color: #5a2a00;
  max-width: 300px;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Tail of the speech bubble */
.chatbox::after {
  content: "";
  position: absolute;
  bottom: -20px; /* below the box */
  left: 30px;     /* position the tail */
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #fff3d4;
  border-bottom: 0;
  margin-left: -6px;
}

/* Optional outline for the tail to match border */
.chatbox::before {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 29px;
  width: 0;
  height: 0;
  border: 13px solid transparent;
  border-top-color: #d88d2b;
  border-bottom: 0;
  margin-left: -6px;
  z-index: -1;
}

.voice-btn { margin-top: 10px; } .krishna-img { width: 180px; margin-top: 30px; border-radius: 12px; }