/* Services section typography & justification
Place this file at: /assets/css/services.css
Then include in your (header.php):
*/
/* Basic font smoothing and base line-height for readability */
.services {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.65;
color: #123;
font-size: 1rem;
}
/* Keep headings centered and visually prominent */
.services h1,
.services h2 {
text-align: center;
color: #1997cd; /* keeps same accent as inline styles */
margin-top: 1.25rem;
margin-bottom: 0.75rem;
}
/* Apply full justification to main write-ups (div blocks and paragraphs) */
.services > div,
.services p {
text-align: justify; /* align both left and right */
text-justify: inter-word; /* better spacing for most browsers */
hyphens: auto; /* allow hyphenation where supported */
margin-bottom: 1rem;
word-break: break-word;
}
/* If some of your content blocks include
, keep list content readable:
By default list items are left-aligned (preferred for short list items).
*/
.services ul {
margin: 0.5rem 0 1rem 1.25rem;
padding: 0;
list-style-position: outside;
}
/* Keep the list items left-aligned for readability */
.services ul li {
text-align: left;
margin-bottom: 0.45rem;
}
/* OPTIONAL: If you want list items to be fully justified too,
uncomment the following block. Note: very short list items may
look odd when justified (they will add spacing between words).
*/
/*
.services ul {
text-align: justify;
}
.services ul:after {
content: "";
display: inline-block;
width: 100%;
}
.services ul li {
display: inline-block; // allows justification across the line
width: 100%;
}
*/
/* Images in the services section remain centered and responsive */
.services img {
max-width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Small screens: reduce margins and slightly adjust line-height */
@media (max-width: 700px) {
.services {
line-height: 1.55;
font-size: 0.98rem;
}
.services > div,
.services p {
margin-bottom: 0.9rem;
}
}