.kids-page-box::before {
  content: '\f1a2'; /* This is the Unicode representation of the code point eaf6 */
  font-family: 'Material Symbols Outlined';
  display: inline-block; /* Aligns the icon with the text properly */
  font-size: 5em;
  vertical-align: middle; /* Centers the icon vertically relative to adjacent text */
  opacity: 0.5;
}
.adult-kids-container {
    position: relative;
    display: flex;
    flex-direction: column; /* Stacks the elements vertically */
    align-items: flex-start; /* Aligns the content to the left of the container */
    text-align: left; /* Aligns the text to the left */
    padding-left: 1em; /* Optional: Adds some padding from the left edge */
}

.adult-button {
    text-decoration: none;
    color: inherit;
    position: relative;
    display: block; /* Ensures the button takes full width and height */
}

.adult-button::before {
    content: '\ea1d';
    font-family: 'Material Symbols Outlined';
    font-size: 5em;
    opacity: 0.5;
    display: block;
    margin: 0; /* Removes automatic centering */
}

.adult-text-label {
    margin-top: 0.5em; /* Adds space between the icon and the text */
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: inherit;
    opacity: 0.5;
}
  .kids-start-conversation {
    margin: 20px;
}

.conversation-example {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    position: relative;
    text-align: center; /* Center the content */
}

.kids-start-conversation-quote {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.2em;
    position: relative;
    display: inline-block; /* Makes the quote behave like inline content for better centering */
    margin: 0;
    color: #333;
    padding-left: 40px; /* Increased padding to avoid overlap with opening quote */
    padding-right: 40px; /* Increased padding to avoid overlap with closing quote */
}

.kids-start-conversation-quote::before {
    content: "\f10d"; /* Font Awesome opening quote */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    color: #555;
    font-size: 1.5em;
    top: 50%;
    transform: translateY(-50%);
}

.kids-start-conversation-quote::after {
    content: "\f10e"; /* Font Awesome closing quote */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    color: #555;
    font-size: 1.5em;
    top: 50%;
    transform: translateY(-50%);
}

.kids-start-conversation-title {
    font-size: 1.2em;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.kids-start-conversation-advice {
    margin: 10px 0 0;
    color: #666;
    font-size: 0.9em;
}