* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    /* Clean, modern sans-serif font */
    font-size: 18px;
    /* Comfortable reading size */
    line-height: 1.6;
    /* Optimal line height for readability */
    color: #333;
    /* Dark grey for a soft contrast */
    background-color: #f4f4f4;
    /* Light background for easy reading */
    margin: 0;
    /* Remove default margin */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    /* Elegant serif font for headings */
    color: #222;
    /* Slightly darker for headings */
    line-height: 1.3;
    /* Compact line height for headings */
    margin-top: 1.2em;
    /* Space before the heading */
    margin-bottom: 0.8em;
    /* Space after the heading */
}

p {
    margin-bottom: 1.5em;
    /* Spacing between paragraphs */
}

a {
    color: #007BFF;
    /* Soft blue for links */
    text-decoration: none;
    /* Remove underline */

    /* Add subtle bottom border */
}

a:hover {
    color: #0056b3;
    /* Darker blue on hover */
    border-bottom: 1px solid #0056b3;
    /* Keep hover state consistent */
}

/* Navigation Bar Styling */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    color: black;
    padding: 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar .logo {
    font-size: 35px;
    font-weight: bold;
    color: #163c58;
}

.navbar .logoSlogan {
    font-size: 20px;
    font-weight: bold;
    color: #444444;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    color: black;
    text-decoration: none;
    font-size: 18px;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

/* Banner */
.banner-container {
    display: grid;
    grid-template-columns: auto auto;
    background-color: #292D38;
}

.banner1 {    
    color: white;
    padding-left: 50px;
    font-size: 6rem;
    font-weight: bold;
}


/* Main Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "intro intro intro intro"
        "WhyChooseDarryl WhyChooseDarryl WhyChooseDarryl WhyChooseDarryl"
        "Holistic Holistic Values Values"
        "HowWork HowWork HowWork HowWork"
        "Services Services Services Services"
        "service1 service2 service3 service4"
        "service5 service6 service7 service8"
        "service9 service10 service11 service12"
        "service13 service14 service15 service16"
        "WhatExpect WhatExpect WhatExpect WhatExpect"
        "HowItWorks HowItWorks HowItWorks HowItWorks"
        "MeetDarryl MeetDarryl MeetDarryl MeetDarryl"
        "GetStarted GetStarted GetStarted GetStarted"
        "Address Address Address Address"
        "Hours Hours Hours Hours";
    gap: 10px;
    padding: 1%;
}

.grid-container > * {
    padding: 30px;
    background-color: #fff;
}

.grid-container2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "post-single post-single post-single post-single"
        "post-list post-list post-list post-list";
    gap: 10px;
    padding: 1%;
}

.grid-container2 > * {
    padding: 30px;
    background-color: #fff;
}

/* Assign Grid Areas */
.intro { grid-area: intro; }
.WhyChooseDarryl { grid-area: WhyChooseDarryl; }
.Holistic { grid-area: Holistic; }
.Values { grid-area: Values; }
.HowWork { grid-area: HowWork; }
.Services { grid-area: Services; }
.service1 { grid-area: service1; }
.service2 { grid-area: service2; }
.service3 { grid-area: service3; }
.service4 { grid-area: service4; }
.service5 { grid-area: service5; }
.service6 { grid-area: service6; }
.service7 { grid-area: service7; }
.service8 { grid-area: service8; }
.service9 { grid-area: service9; }
.service10 { grid-area: service10; }
.service11 { grid-area: service11; }
.service12 { grid-area: service12; }
.service13 { grid-area: service13; }
.service14 { grid-area: service14; }
.service15 { grid-area: service15; }
.service16 { grid-area: service16; }
.WhatExpect { grid-area: WhatExpect; }
.HowItWorks { grid-area: HowItWorks; }
.MeetDarryl { grid-area: MeetDarryl; }
.GetStarted { grid-area: GetStarted; }
.Address { grid-area: Address; }
.Hours { grid-area: Hours; }
.post-single { grid-area: post-single; }
.post-list { grid-area: post-list; }


.WhyChooseDarryl {    
    background-color: #ede6d8;
    color: black;
    padding-bottom: 50px;
    }

.GetStarted {    
    background-color: #3A5B8B;
    color: white;
    padding-bottom: 50px;
    }


.centered-image {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.sectionTitle {
    text-align: center;
    padding: 10px 0;
}

.sectionBody {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    /* Adjust as necessary */
    padding-right: 20px;
    /* Adjust as necessary */
    max-width: 800px;
    /* Controls the total width of the text container */
    text-align: left;

}

/* Styling for the modern button */
.modern-button {
    display: block;
    /* Ensure it's treated like a button */
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding: 15px 30px;
    /* Add padding for a button-like feel */
    background-color: #2C637D;
    /* Green background */
    font-size: 18px;
    /* Larger font size for emphasis */
    font-weight: bold;
    /* Make the text bold */
    text-align: center;
    /* Center the text inside the div */
    border: none;
    /* Remove any default borders */
    border-radius: 30px;
    /* Round corners for a modern look */
    cursor: pointer;
    /* Pointer cursor to indicate it's clickable */
    transition: all 0.3s ease;
    /* Smooth transitions for hover effects */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
    text-decoration: none;
}

.modern-button a {
    text-decoration: none;
    /* Removes the underline */
    color: white;
}

/* Hover effect for modern button */
.modern-button:hover {
    background-color: #458AAB;
    /* Slightly darker green on hover */
    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2);
    /* Larger shadow on hover */
    transform: translateY(-1px);
    /* Lift the button slightly on hover */
    color: white;
    text-decoration: none;
}

/* Active state when clicking the button */
.modern-button:active {
    background-color: #458AAB;
    /* Darker green when active */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    /* Softer shadow when clicked */
    transform: translateY(0px);
    /* Return to normal position */
    color: white;
    text-decoration: none;
}

.main {
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    max-width: calc(var(--main-width) + var(--gap) * 2);
    margin: auto;
    padding: var(--gap);
}

.page-header h1 {
    font-size: 40px;
}

.post-list {
    margin-left: 10%;
    margin-right: 10%;
}

.post-single {
    margin-left: 10%;
    margin-right: 10%;
}

.post-meta {
    font-size: 0.9em;
    color: #666;
}

.post-meta .meta-item {
    display: inline-block;
    margin-right: 5px;
}

.post-meta .separator {
    margin-right: 5px;
}

.post-meta i {
    margin-right: 3px;
    color: #888;
}

.post-meta a {
    color: #007bff;
    text-decoration: none;
}

.post-meta a:hover {
    text-decoration: underline;
}


.pagination {
    display: flex;
}

.pagination a {
    color: var(--theme);
    font-size: 13px;
    line-height: 36px;
    background: var(--primary);
    border-radius: calc(36px / 2);
    padding: 0 16px;
}

.pagination .next {
    margin-inline-start: auto;
}


.social-icons a {
    display: inline-flex;
    padding: 10px;
}

.social-icons a svg {
    height: 26px;
    width: 26px;
}

code {
    direction: ltr;
}

div.highlight,
pre {
    position: relative;
}

.copy-code {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(78, 78, 78, 0.8);
    border-radius: var(--radius);
    padding: 0 5px;
    font-size: 14px;
    user-select: none;
}

div.highlight:hover .copy-code,
pre:hover .copy-code {
    display: block;
}

.post-entry {
    position: relative;
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--entry);
    border-radius: var(--radius);
    transition: transform 0.1s;
    border: 1px solid var(--border);
}

.post-entry:active {
    transform: scale(0.96);
}

.tag-entry .entry-cover {
    display: none;
}

.entry-header h2 {
    font-size: 24px;
    line-height: 1.3;
}

.entry-content {
    margin: 8px 0;
    color: var(--secondary);
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.entry-footer {
    color: var(--secondary);
    font-size: 13px;
}

.entry-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.entry-hint {
    color: var(--secondary);
}

.entry-hint-parent {
    display: flex;
    justify-content: space-between;
}

.entry-cover {
    font-size: 14px;
    margin-bottom: var(--gap);
    text-align: center;
}

.entry-cover img {
    border-radius: var(--radius);
    pointer-events: none;
    width: 100%;
    height: auto;
}

.entry-cover a {
    color: var(--secondary);
    box-shadow: 0 1px 0 var(--primary);
}

.page-header,
.post-header {
    margin: 24px auto var(--content-gap) auto;
}

.post-title {
    margin-bottom: 2px;
    font-size: 40px;
}

.post-description {
    margin-top: 10px;
    margin-bottom: 5px;
}

.post-meta,
.breadcrumbs {
    color: var(--secondary);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
}

.post-meta .i18n_list li {
    display: inline-flex;
    list-style: none;
    margin: auto 3px;
    box-shadow: 0 1px 0 var(--secondary);
}

.breadcrumbs a {
    font-size: 16px;
}

.post-content {
    color: var(--content);
}

.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin: 24px 0 16px;
}

.post-content h1 {
    margin: 40px auto 32px;
    font-size: 40px;
}

.post-content h2 {
    margin: 32px auto 24px;
    font-size: 32px;
}

.post-content h3 {
    font-size: 24px;
}

.post-content h4 {
    font-size: 16px;
}

.post-content h5 {
    font-size: 14px;
}

.post-content h6 {
    font-size: 12px;
}

.post-content a,
.toc a:hover {
    box-shadow: 0 1px 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.post-content a code {
    margin: auto 0;
    border-radius: 0;
    box-shadow: 0 -1px 0 var(--primary) inset;
}

.post-content del {
    text-decoration: line-through;
}

.post-content dl,
.post-content ol,
.post-content p,
.post-content figure,
.post-content ul {
    margin-bottom: var(--content-gap);
}

.post-content ol,
.post-content ul {
    padding-inline-start: 20px;
}

.post-content li {
    margin-top: 5px;
}

.post-content li p {
    margin-bottom: 0;
}

.post-content dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.post-content dt {
    width: 25%;
    font-weight: 700;
}

.post-content dd {
    width: 75%;
    margin-inline-start: 0;
    padding-inline-start: 10px;
}

.post-content dd~dd,
.post-content dt~dt {
    margin-top: 10px;
}

.post-content table {
    margin-bottom: var(--content-gap);
}

.post-content table th,
.post-content table:not(.highlighttable, .highlight table, .gist .highlight) td {
    min-width: 80px;
    padding: 8px 5px;
    line-height: 1.5;
    border-bottom: 1px solid var(--border);
}

.post-content table th {
    text-align: start;
}

.post-content table:not(.highlighttable) td code:only-child {
    margin: auto 0;
}

.post-content .highlight table {
    border-radius: var(--radius);
}

.post-content .highlight:not(table) {
    margin: 10px auto;
    background: var(--code-block-bg) !important;
    border-radius: var(--radius);
    direction: ltr;
}

.post-content li>.highlight {
    margin-inline-end: 0;
}

.post-content ul pre {
    margin-inline-start: calc(var(--gap) * -2);
}

.post-content .highlight pre {
    margin: 0;
}

.post-content .highlighttable {
    table-layout: fixed;
}

.post-content .highlighttable td:first-child {
    width: 40px;
}

.post-content .highlighttable td .linenodiv {
    padding-inline-end: 0 !important;
}

.post-content .highlighttable td .highlight,
.post-content .highlighttable td .linenodiv pre {
    margin-bottom: 0;
}

.post-content code {
    margin: auto 4px;
    padding: 4px 6px;
    font-size: 0.78em;
    line-height: 1.5;
    background: var(--code-bg);
    border-radius: 2px;
}

.post-content pre code {
    display: grid;
    margin: auto 0;
    padding: 10px;
    color: rgb(213, 213, 214);
    background: var(--code-block-bg) !important;
    border-radius: var(--radius);
    overflow-x: auto;
    word-break: break-all;
}

.post-content blockquote {
    margin: 20px 0;
    padding: 0 14px;
    border-inline-start: 3px solid var(--primary);
}

.post-content hr {
    margin: 30px 0;
    height: 2px;
    background: var(--tertiary);
    border: 0;
}

.post-content iframe {
    max-width: 100%;
}

.post-content img {
    border-radius: 4px;
    margin: 1rem 0;
}

.post-content img[src*="#center"] {
    margin: 1rem auto;
}

.post-content figure.align-center {
    text-align: center;
}

.post-content figure>figcaption {
    color: var(--primary);
    font-size: 16px;
    font-weight: bold;
    margin: 8px 0 16px;
}

.post-content figure>figcaption>p {
    color: var(--secondary);
    font-size: 14px;
    font-weight: normal;
}

.toc {
    margin: 0 2px 40px 2px;
    border: 1px solid var(--border);
    background: var(--code-bg);
    border-radius: var(--radius);
    padding: 0.4em;
}

.dark .toc {
    background: var(--entry);
}

.toc details summary {
    cursor: zoom-in;
    margin-inline-start: 10px;
    user-select: none;
}

.toc details[open] summary {
    cursor: zoom-out;
}

.toc .details {
    display: inline;
    font-weight: 500;
}

.toc .inner {
    margin: 5px 20px 0;
    padding: 0 10px;
    opacity: 0.9;
}

.toc li ul {
    margin-inline-start: var(--gap);
}

.toc summary:focus {
    outline: 0;
}

.post-footer {
    margin-top: 56px;
}

.post-footer>* {
    margin-bottom: 10px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tags li {
    display: inline-block;
}

.post-tags a,
.share-buttons,
.paginav {
    border-radius: var(--radius);
    background: var(--code-bg);
    border: 1px solid var(--border);
}

.post-tags a {
    display: block;
    padding: 0 14px;
    color: var(--secondary);
    font-size: 14px;
    line-height: 34px;
    background: var(--code-bg);
}

.post-tags a:hover,
.paginav a:hover {
    background: var(--border);
}

.share-buttons {
    padding: 10px;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    gap: 10px;
}

.share-buttons li,
.share-buttons a {
    display: inline-flex;
}

.share-buttons a:not(:last-of-type) {
    margin-inline-end: 12px;
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
    display: inline-flex;
    color: var(--secondary);
    margin-inline-start: 8px;
    font-weight: 500;
    user-select: none;
}

.pagination .next, .pagination .prev, .pagination .page-number { 
  display: inline-block;
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #163c6d;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
.pagination .page-number { 
  display: inline-block;
  padding: 8px 20px;
  margin: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: #163c6d;
  border: none;
  border-radius: 15px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }
  
.pagination .next:hover, .pagination .prev:hover, .pagination .page-number:hover {
  background-color: #1f4b8f;
  transform: translateY(-2px);
}

.pagination .page-number.active {
  background-color: #000246;
  pointer-events: none;
  transform: none;
}


h1>a>svg {
    display: inline;
}

img.in-text {
    display: inline;
    margin: auto;
}


#searchbox input {
    padding: 4px 10px;
    width: 100%;
    color: var(--primary);
    font-weight: bold;
    border: 2px solid var(--tertiary);
    border-radius: var(--radius);
}

#searchbox input:focus {
    border-color: var(--secondary);
}

#searchResults li {
    list-style: none;
    border-radius: var(--radius);
    padding: 10px;
    margin: 10px 0;
    position: relative;
    font-weight: 500;
}

#searchResults {
    margin: 10px 0;
    width: 100%;
}

#searchResults li:active {
    transition: transform 0.1s;
    transform: scale(0.98);
}

#searchResults a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    outline: none;
}

#searchResults .focus {
    transform: scale(0.98);
    border: 2px solid var(--tertiary);
}

.terms-tags li {
    display: inline-block;
    margin: 10px;
    font-weight: 500;
}

.terms-tags a {
    display: block;
    padding: 3px 10px;
    background: var(--tertiary);
    border-radius: 6px;
    transition: transform 0.1s;
}

.terms-tags a:active {
    background: var(--tertiary);
    transform: scale(0.96);
}


.archive-posts {
    width: 100%;
    font-size: 16px;
}

.archive-year {
    margin-top: 40px;
}

.archive-year:not(:last-of-type) {
    border-bottom: 2px solid var(--border);
}

.archive-month {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}

.archive-month-header {
    margin: 25px 0;
    width: 200px;
}

.archive-month:not(:last-of-type) {
    border-bottom: 1px solid var(--border);
}

.archive-entry {
    position: relative;
    padding: 5px;
    margin: 10px 0;
}

.archive-entry-title {
    margin: 5px 0;
    font-weight: 400;
}

.archive-count,
.archive-meta {
    color: var(--secondary);
    font-size: 14px;
}

.not-found {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    font-size: 160px;
    font-weight: 700;
}

.footer-content {
    color: #FFC218;
    background-color: #292D38;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.footer-content a{
color:#FFC218;
}

.footer-content svg {
  width: 40px;
  height: 40px;
  fill: #FFC218;
}



/* For screens smaller than 768px (mobile) */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "WhyChooseDarryl"
            "Holistic"
            "Values"
            "HowWork"
            "Services"
            "service1"
            "service2"
            "service3"
            "service4"
            "service5"
            "service6"
            "service7"
            "service8"
            "service9"
            "service10"
            "service11"
            "service12"
            "service13"
            "service14"
            "service15"
            "service16"
            "WhatExpect"
            "HowItWorks"
            "MeetDarryl"
            "GetStarted"
            "Address"
            "Hours";
    }


    .grid-container>* {
        grid-column: 1 / -1 !important;
    }
    
    .grid-container2 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "post-single"
            "post-list";
    }


    .grid-container2>* {
        grid-column: 1 / -1 !important;
    }

    .banner-container {
        grid-template-columns: 1fr !important;
    }

    .banner1 {
        font-size: 2.5rem;
        padding: 20px;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .sectionBody {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .post-list {
    margin-left: 1%;
    margin-right: 1%;
	}

	.post-single {
		margin-left: 1%;
		margin-right: 1%;
	}

    img {
        max-width: 100%;
        height: auto;
    }
}