.section-intro {
padding-block: 3rem 4rem;
background-color: #f8f6ee;
overflow: hidden;
position: relative;
z-index: 1;
}
.section-intro::before {
content: '\e90f';
font-family: 'icomoon';
z-index: -1;
font-size: 44rem;
display: flex;
line-height: 1;
align-items: center;
justify-content: center;
position: absolute;
left: 44%;
top: 44%;
transform: translate(-50%, -50%);
background: linear-gradient(
289.48deg,
rgba(255, 255, 255, 0.65) 17.49%,
rgba(255, 255, 255, 0.17) 52.97%,
#ffffff 84.04%
);
-webkit-background-clip: text;
color: transparent;
}
.single-post-title {
font-size: 3.5rem;
color: var(--gray-800);
line-height: 1.25;
margin-block: 2.25rem;
text-wrap-style: pretty;
}
.single-post-thumbnail {
border-radius: 1.25rem;
width: 100%;
overflow: hidden;
}
.single-post-thumbnail img {
width: 100%;
object-fit: cover;
border-radius: 1.25rem;
display: block;
}
.single-post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
color: var(--gray-700);
font-size: 1rem;
line-height: 1.25;
}
.single-post-categories {
display: flex;
align-items: center;
gap: 0.125rem;
flex-wrap: wrap;
}
.single-post-categories a {
transition: color 0.5s;
}
.single-post-categories a:hover {
color: var(--gold-500);
}
.single-post-content {
margin-top: 2rem;
}
.latest-posts {
margin-top: 4.5rem;
}
.latest-posts-wrapper {
border-top: 1px solid #d5d7da;
padding-top: 4rem;
}
.search-title,
.latest-posts-title {
font-size: 2.5rem;
line-height: 1.25;
text-align: center;
color: var(--gray-800);
margin-bottom: 2.25rem;
}
.search-title {
margin-bottom: unset !important;
} .search-archive-title,
.blog-archive-title {
font-size: 3.5rem;
text-align: center;
margin-bottom: 2rem;
line-height: 1;
color: var(--gray-800);
}
.search-post-list,
.blog-post-list {
margin-top: 5rem;
}
.row_blog {
row-gap: 3.5rem;
}
.blog-archive .latest-posts-wrapper {
padding-top: unset;
border-top: unset;
}
h2.screen-reader-text {
display: none;
}
.blog-pagination .nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 5rem;
flex-wrap: wrap;
}
.blog-pagination a.prev.page-numbers {
margin-right: 4rem;
}
.blog-pagination a.next.page-numbers {
margin-left: 4rem;
}
.blog-pagination a.prev.page-numbers,
.blog-pagination a.next.page-numbers {
display: flex;
align-items: center;
font-weight: 600;
font-size: 1rem;
gap: 0.75rem;
color: var(--gray-600);
width: 6rem;
}
.blog-pagination .page-numbers:not(.prev),
.blog-pagination .page-numbers:not(.next) {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
color: var(--gray-500);
border-radius: 50%;
font-weight: 500;
gap: 0.5rem;
font-size: 1rem;
}
.blog-pagination .page-numbers {
transition: 0.5s;
}
.blog-pagination .page-numbers:hover i {
color: var(--gold-500);
}
.blog-pagination .page-numbers i {
font-size: 0.8125rem;
color: var(--gray-500);
transition: 0.5s;
}
.blog-pagination span.page-numbers.current {
background-color: var(--gold-100);
color: #000;
}
.blog-pagination .page-numbers:not(.current):hover {
color: var(--gold-500);
} .blog-post-title {
text-align: center;
text-wrap-style: pretty;
font-size: 2.5rem;
color: var(--gray-800);
line-height: 1.25rem;
margin-bottom: 2rem;
}
#searchform {
max-width: 47.5rem;
position: relative;
margin: 1.75rem auto 3rem;
}
#searchform i {
position: absolute;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
pointer-events: none;
color: var(--gray-400);
font-size: 1.25rem;
left: 1.75rem;
top: 50%;
transform: translateY(-50%);
transition: color 0.5s;
justify-content: center;
}
#searchform input {
border: 1px solid var(--gray-400);
width: 100%;
height: 3.25rem;
border-radius: 3rem;
padding-left: 4rem;
text-transform: capitalize;
display: flex;
align-items: center;
outline: none;
transition: border-color 0.5s;
}
#searchform input:focus + i {
color: var(--gold-500);
}
#searchform input:focus {
border-color: var(--gold-500);
} @media (max-width: 991.98px) {
.section-intro {
padding-block: 2.5rem;
}
.single-post-title {
font-size: 2.125rem;
}
.single-post-title {
margin-block: 1.75rem;
}
.editor-content blockquote {
font-size: 1rem;
}
.latest-posts-wrapper {
padding-top: 2.5rem;
}
.search-title,
.latest-posts-title {
font-size: 1.875rem;
margin-bottom: 2rem;
}
.no-results {
font-size: 1rem;
}
.latest-posts {
margin-top: 2.5rem;
}
.search-archive-title,
.blog-archive-title {
font-size: 2.125rem;
}
.blog-post-title {
font-size: 2rem;
}
#searchform {
max-width: 47.5rem;
position: relative;
margin: 1.75rem auto;
}
#searchform i {
left: 1rem;
}
#searchform input {
padding-left: 3rem;
}
.blog-post-list {
margin-top: 4rem;
}
.row_blog {
row-gap: 2.5rem;
}
.blog-pagination .nav-links {
margin-top: 3rem;
}
}
@media (max-width: 575.98px) {
.single-post-thumbnail img {
height: 13rem;
}
.blog-pagination i {
display: none;
}
.blog-pagination a.prev.page-numbers {
margin-right: 0rem;
gap: 0.125rem;
font-size: 0.875rem;
}
.blog-pagination a.next.page-numbers {
margin-left: 0rem;
gap: 0.125rem;
font-size: 0.875rem;
}
.blog-pagination a.prev.page-numbers,
.blog-pagination a.next.page-numbers {
width: 4rem;
}
} .editor-content {
font-size: 1rem;
line-height: 1.5;
color: var(--gray-700);
}
.editor-content h1 {
font-size: 3rem !important;
}
.editor-content h2 {
font-size: 2.5rem !important;
}
.editor-content h3 {
font-size: 2rem;
}
.editor-content h4 {
font-size: 1.5rem !important;
}
.editor-content h5 {
font-size: 1.25rem !important;
}
.editor-content h6 {
font-size: 1.125rem !important;
}  aside {
position: sticky;
top: 8rem;
& .sidebar-section {
& .sidebar-title {
color: var(--Gray-700, #414651);
font-family: 'Playfair Display';
font-size: 1.5rem;
font-weight: 700;
text-transform: capitalize;
}
&.sidebar-services {
background-color: var(--gray-100, #f8f6ee);
padding: 2rem 1rem;
border-radius: 1.25rem;
& .sidebar-services-list {
list-style-type: none;
padding: 0;
margin: 0;
color: var(--gray-700, #414651);
font-size: 1.125rem;
font-weight: 500;
text-transform: capitalize;
& li {
& .sidebar-service-link {
color: var(--gray-700, #414651);
font-family: var(--main-font);
text-decoration: none;
transition: color 0.5s;
&:hover {
color: var(--gold-500, #cfae7b);
}
}
}
}
}
&.sidebar-blog-posts {
& .sidebar-blog-posts-list {
list-style-type: none;
padding: 0;
margin: 0;
color: var(--gray-700, #414651);
font-size: 1.125rem;
font-weight: 500;
& li.sidebar-blog-post-item {
margin-bottom: 1rem;
padding: 1rem;
border-radius: 1.25rem;
background: var(--gray-100, #f5f5f5);
display: flex;
flex-direction: row-reverse;
gap: 1rem;
align-items: center;
& .sidebar-blog-post-title {
color: var(--Gray-900, #181d27);
font-family: var(--main-font);
font-size: 1rem !important;
font-weight: 600;
text-transform: capitalize;
}
& a {
color: var(--gray-700, #414651);
text-decoration: none;
transition: color 0.5s;
flex: 1 0 auto;
&:hover {
color: var(--gold-500, #cfae7b);
}
}
& .article-thumbnail img {
width: 5.5rem;
height: 5.5rem;
object-fit: cover;
object-position: -5rem 0rem;
}
}
}
}
}
}