/* Import a stylish Google Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');

/* 1. Stylish brown H3 */
h4 {
    font-family: 'Playfair Display', serif;
    color: #8B4513; /* rich brown */
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* 2 & 3. UL pushed inward and given light gray background */
ul {
    margin-left: 0.5in;          /* half-inch inward */
    background-color: #f5f5f5;   /* very light gray */
    padding: 15px 20px;          /* inner spacing */
    border-radius: 8px;          /* soft rounded edges */
}

/* 4. Teal list text */
ul li {
    color: #008080;              /* teal text */
    margin-bottom: 6px;
}

/* Dark blue dots */
ul li::marker {
    color: #003366;              /* dark blue bullets */
    font-weight: bold;
}
.floating-fb{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
margin-bottom:10px;
z-index:999;
}

.floating-fb img{
border-radius:50%;
box-shadow:0 2px 6px rgba(0,0,0,0.3);
cursor:pointer;
}
.article-text p:first-of-type{
    font-size: 19px;
}
.article-text{
    font-size:18px;
    line-height:1.6;
}

.article-text p{
    margin-bottom:16px;
}
 display: flex;
    align-items: center;
    gap: 20px;              /* space between image and text */
    margin-bottom: 40px;   /* space between rows */
}

.cartoon-row.reverse {
    flex-direction: row-reverse;
}

.cartoon-img {
    width: 40%;
    max-width: 300px;
    border-radius: 10px;
}

.cartoon-text {
    width: 60%;
    padding: 10px 20px;   /* internal padding for text */
    font-size: 16px;
    line-height: 1.6;
}