/* ---------------------------
   CSS RESET & BASE STYLES
----------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0; padding: 0; border: 0;
    font-size: 100%; font: inherit; vertical-align: baseline;
    box-sizing: border-box;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.5;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    background-color: #faf7f0;
    color: #3b3635;
    font-size: 16px;
    min-height: 100vh;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
a {
    color: #23416e;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: #357420;
}
ul, ol {
    padding-left: 1.3em;
}
strong { font-weight: bold; }

/* Vintage retro patterns and fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@400;700&display=swap');
h1, h2, h3, h4, h5, h6 {
    font-family: 'Merriweather', serif;
    color: #23416e;
    letter-spacing: 0.01em;
}
h1 { font-size: 2.5rem; margin-bottom: 20px; }
h2 { font-size: 2rem; margin-bottom: 16px; }
h3 { font-size: 1.3rem; margin-bottom: 10px; }
h4, h5, h6 { font-size: 1.1rem; margin-bottom: 8px; }
p, li, blockquote, cite { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
blockquote {
    font-family: 'Merriweather', serif;
    color: #48705e;
    background: #f9efe3;
    border-left: 6px solid #d3b97a;
    padding: 16px 24px;
    margin: 0 0 10px 0;
    border-radius: 8px 18px 16px 8px;
    font-style: italic;
}
cite {
    display: block;
    font-size: 0.95em;
    color: #a57c41;
    margin-top: 6px;
    padding-left: 8px;
}

/* ---------------------------
   LAYOUT CONTAINERS & SPACING
----------------------------*/
.container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}
.section {
    margin-bottom: 60px;
    padding: 40px 20px;
    background: #fffdfa;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(153,119,56,0.08);
    border: 1.5px solid #f1e1c1;
    position: relative;
}
.content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.card {
    background: #f5ead1;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(204, 175, 124, 0.19);
    padding: 24px 18px;
    margin-bottom: 20px;
    position: relative;
}
.content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}
.text-image-section {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f6ece3;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(204, 190, 158, 0.11);
    margin-bottom: 20px;
    border: 1.5px solid #f1e1c1;
}
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
.text-section {
    margin-bottom: 20px;
}
.faq-list,
.seminar-list,
.service-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rating-summary {
    margin-top: 10px;
    font-size: 1.1rem;
    color: #9a753a;
    font-family: 'Merriweather', serif;
}

/* Vintage Section Dividers (Optional Decorative) */
.section::before {
    content: '';
    display: block;
    position: absolute;
    left: 30px;
    top: -18px;
    width: 90px;
    height: 9px;
    background: repeating-linear-gradient(90deg,#e7c27d 0 10px,#fff5de 10px 20px);
    border-radius: 8px 10px 8px 14px;
    z-index: 1;
    opacity: 0.15;
}

/* Feature Grid (Index Services Overview) */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: space-between;
    list-style: none;
    margin-bottom: 20px;
}
.feature-grid li {
    background: #f3ebd7;
    border: 1.5px solid #ead2ae;
    border-radius: 16px;
    box-shadow: 0 1px 6px rgba(204,175,124,0.10);
    flex: 1 1 260px;
    min-width: 220px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px 20px;
    margin-bottom: 0;
    transition: box-shadow 0.2s;
}
.feature-grid li:hover {
    box-shadow: 0 4px 20px rgba(153,119,56,0.14);
    transform: translateY(-2px) scale(1.03);
}
.feature-grid img {
    width: 44px; height: 44px;
    margin-bottom: 8px;
    filter: sepia(0.29) hue-rotate(-10deg) brightness(0.98) saturate(0.7);
    opacity: 0.88;
}

/* Cards for services/lists */
.service-list li, .seminar-list li {
    background: #f3ebd7;
    border: 1.5px solid #ead2ae;
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(204,175,124,0.11);
    padding: 18px 16px 14px;
    margin-bottom: 0;
    margin-top: 0;
    transition: box-shadow 0.2s, transform 0.13s;
}
.service-list li:hover, .seminar-list li:hover {
    box-shadow: 0 3px 18px rgba(110,65,35,0.10), 0 1px 6px #e6cbad23;
    transform: scale(1.025) translateY(-1px);
}

/* FAQ styles */
.faq-list li {
    background: #f8f3e2;
    border-radius: 12px;
    border-left: 4px solid #9a753a;
    padding: 14px 15px 10px 20px;
    color: #3b3635;
    font-size: 1.07em;
    line-height: 1.65;
}
.faq-snippet {
    background: #ede0ce;
    padding: 16px 16px 12px;
    border-left: 5px solid #7d6042;
    border-radius: 12px;
}

/* Visual Hierarchy & Patterns */
.text-section ul {
    padding-left: 1.6em;
    margin: 10px 0;
}

.featured-articles {
    background: #e7e4df;
    border-radius: 11px;
    padding: 14px 14px 11px;
    margin-top: 12px;
    border: 1px dashed #c7baa1;
}
.contact-details {
    background: #f6f0e7;
    border: 1.5px solid #ead2ae;
    border-radius: 10px;
    padding: 16px 16px 11px;
    margin-bottom: 12px;
    font-size: 1.04em;
}
.map-snippet {
    background: #e2e4e1;
    color: #495546;
    border-radius: 10px 22px 10px 12px;
    padding: 14px 12px;
    font-size: 0.98em;
    margin-bottom: 0;
}

/* ---------------------------
   BUTTONS & CTAS
----------------------------*/
.cta-btn, button, .mobile-menu-toggle, .mobile-menu-close, .cookie-btn {
    font-family: 'Merriweather', serif;
    font-size: 1.07rem;
    font-weight: 700;
    border-radius: 33px;
    padding: 12px 28px 11px;
    background: #23416e;
    color: #fffbea;
    border: none;
    box-shadow: 0 2px 8px rgba(35,65,110,0.08);
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s, box-shadow 0.13s, transform 0.11s;
    outline: none;
    margin-top: 6px;
    margin-bottom: 12px;
    display: inline-block;
}
.cta-btn:hover, button:hover, .mobile-menu-toggle:hover, .mobile-menu-close:hover, .cookie-btn:hover,
.cta-btn:focus, button:focus, .mobile-menu-toggle:focus, .mobile-menu-close:focus, .cookie-btn:focus {
    background: #357420;
    color: #fffbe9;
    box-shadow: 0 4px 20px rgba(68,157,43,0.11);
    transform: translateY(-1.5px) scale(1.025);
}
.cta-btn {
    background: #357420;
    color: #fff9e2;
    margin-right: 15px;
    border: 2.5px solid #e1e8f0;
}
.cta-btn:hover, .cta-btn:focus {
    background: #23416e;
    color: #fffbe9;
    border-color: #e7c27d;
}

/* ---------------------------
   HEADER & NAVIGATION
----------------------------*/
header {
    background: #fbf7ee;
    box-shadow: 0 2px 14px rgba(153,119,56,0.05);
    border-bottom: 1.5px solid #f5ead1;
    position: sticky;
    top: 0; left: 0; z-index: 800;
}
header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 10px 20px 6px;
}
header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
}
header nav ul li {
    margin: 0 5px;
}
header nav ul li a {
    font-family: 'Merriweather', serif;
    color: #23416e;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 6px 13px;
    border-radius: 9px;
    transition: background 0.13s, color 0.13s;
}
header nav ul li a:hover, header nav ul li a:focus {
    background: #e1e8f0;
    color: #357420;
}
header nav > a img {
    height: 34px;
    margin-right: 13px;
    vertical-align: middle;
}
.mobile-menu-toggle {
    display: none;
    background: #23416e;
    color: #fffbe9;
    font-size: 2.1rem;
    line-height: 1;
    padding: 0 17px;
    border-radius: 44px;
    border: none;
    margin-left: 6px;
}


/* ---------------------------
   MOBILE MENU
----------------------------*/
.mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(250, 243, 216, 0.975);
    z-index: 1500;
    overflow-y: auto;
    transform: translateX(-100vw);
    transition: transform 0.35s cubic-bezier(0.80, 0.15, 0.22, 1.05);
    box-shadow: 0 8px 32px rgba(35,65,110,0.09);
}
.mobile-menu.open {
    display: block;
    transform: translateX(0);
}
.mobile-menu-close {
    position: absolute;
    top: 20px; right: 20px;
    background: #e8bb7c;
    color: #23416e;
    border-radius: 28px;
    font-size: 2.1rem;
    font-weight: bold;
    z-index: 1520;
    width: 48px; height: 48px;
    border: 2px solid #e1e8f0;
    transition: background 0.15s, color 0.15s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
    background: #357420;
    color: #fffdf7;
}
.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 80px;
    padding: 30px 28px 18px 38px;
}
.mobile-nav a {
    font-family: 'Merriweather', serif;
    font-size: 1.28rem;
    color: #23416e;
    font-weight: 700;
    padding: 12px 5px 12px 0;
    border-radius: 12px;
    display: block;
    margin-bottom: 6px;
    transition: background 0.11s, color 0.11s;
    min-width: 180px;
}
.mobile-nav a:hover, .mobile-nav a:focus {
    background: #e1e8f0;
    color: #357420;
}

/* Hide mobile navigation on desktop */
@media (min-width: 991px) {
    .mobile-menu-toggle { display: none !important; }
    .mobile-menu { display: none !important; }
}
@media (max-width: 990px) {
    header nav ul, header nav .cta-btn { display: none; }
    .mobile-menu-toggle {
        display: inline-block;
    }
}

/* ---------------------------
   RESPONSIVE FLEX LAYOUTS
----------------------------*/
@media (max-width: 991px) {
    .container { padding: 0 9px; }
    .section { padding: 32px 10px; }
    .content-wrapper,
    .card-container,
    .content-grid,
    .feature-grid,
    .testimonial-card,
    .service-list,
    .seminar-list,
    .faq-list {
        gap: 18px;
    }
}
@media (max-width: 768px) {
    .container { padding: 0 4px; }
    .section { padding: 22px 2px;
              border-radius: 14px; }
    .content-wrapper { gap: 14px; }
    .feature-grid { flex-direction: column !important; gap: 16px; }
    .feature-grid li,
    .service-list li,
    .seminar-list li {
        min-width: 0;
        max-width: 100%;
    }
    .content-grid, .card-container {
        flex-direction: column;
        gap: 14px;
    }
    .text-image-section {
        flex-direction: column;
        gap: 18px;
    }
    .testimonial-card { flex-direction: column; }
    .mobile-nav a { font-size: 1.12rem; }
    h1 { font-size: 1.65rem; }
    h2 { font-size: 1.2rem; }
}

/* ---------------------------
   FOOTER
----------------------------*/
footer {
    background: #f0ebe0;
    border-top: 4px double #e7c27d;
    padding: 35px 0 16px 0;
    margin-top: 16px;
    font-size: 1.01em;
    letter-spacing: 0.01em;
}
footer nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: center;
    margin-bottom: 8px;
    list-style: none;
}
footer nav ul li a {
    color: #23416e;
    font-family: 'Merriweather', serif;
    font-size: 1em;
    font-weight: 600;
    padding: 7px 10px 5px;
    border-radius: 8px;
    transition: background 0.13s, color 0.13s;
}
footer nav ul li a:hover, footer nav ul li a:focus {
    background: #e1e8f0;
    color: #357420;
}
.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.footer-brand img {
    height: 36px;
    vertical-align: middle;
    opacity: 0.89;
}
.footer-contact {
    text-align: center;
    color: #7d6042;
    font-size: 0.97em;
    margin-top: 10px;
    letter-spacing: 0.01em;
}

/* ---------------------------
   COOKIE CONSENT BANNER & MODAL
----------------------------*/
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0;
    width: 100vw;
    background: #43391f;
    color: #fffbe9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 27px 14px 20px;
    border-top: 7px double #c7aa6c;
    box-shadow: 0 -2px 18px rgba(113,88,26,0.12);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    z-index: 1850;
    font-size: 1.07em;
    transition: transform 0.22s;
    flex-wrap: wrap;
}
.cookie-banner.hide {
    transform: translateY(120%);
    pointer-events: none;
    opacity: 0;
}
.cookie-banner .cookie-btn {
    background: #ffd86b;
    color: #493c23;
    font-family: 'Merriweather', serif;
    margin-right: 11px;
    margin-bottom: 7px;
    border-radius: 27px;
    font-weight: 700;
    font-size: 1.1em;
    border: none;
    padding: 9px 18px 6px;
    box-shadow: 0 2px 8px #3c340811;
}
.cookie-banner .cookie-btn:hover, .cookie-banner .cookie-btn:focus {
    background: #63a042;
    color: #fffef6;
}
.cookie-banner .cookie-settings {
    background: #23416e;
    color: #fffbea;
    margin-right: 0;
}

/* Cookie Modal */
.cookie-modal-overlay {
    position: fixed;
    z-index: 1900;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(36,33,20,0.56);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s;
}
.cookie-modal {
    background: #fffdfa;
    color: #23416e;
    border-radius: 17px;
    padding: 38px 30px 24px;
    min-width: 320px;
    max-width: 96vw;
    box-shadow: 0 10px 38px rgba(77,53,21,0.11);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.08em;
    display: flex;
    flex-direction: column;
    gap: 17px;
    position: relative;
}
.cookie-modal .cookie-category {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.cookie-modal label {
    font-weight: bold;
    font-family: 'Merriweather', serif;
    color: #357420;
}
.cookie-modal input[type="checkbox"] {
    accent-color: #357420;
    width: 18px; height: 18px;
}
.cookie-modal .cookie-category.essential label { color: #a57c41; }
.cookie-modal-close {
    position: absolute;
    right: 16px;
    top: 14px;
    border-radius: 18px;
    background: #f5ead1;
    color: #23416e;
    font-size: 2rem;
    border: none;
    width: 42px;
    height: 42px;
    transition: background 0.13s, color 0.13s;
}
.cookie-modal-close:hover,
.cookie-modal-close:focus {
    background: #357420;
    color: #fff;
}
.cookie-modal-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 22px;
    justify-content: flex-end;
}
.cookie-modal-actions .cookie-btn {
    margin: 0;
}

@media (max-width: 550px) {
    .cookie-modal { padding: 17px 10px 11px; font-size: 1em; min-width: 0; }
    .cookie-modal-actions { gap: 8px; }
    .cookie-banner { gap: 10px; padding: 13px 6px 14px; font-size: 0.98em; }
}

/* ---------------------------
   ANIMATIONS & MICROINTERACTIONS
----------------------------*/
a, .cta-btn, button, .cookie-btn {
    transition: color 0.15s, background 0.14s, box-shadow 0.11s, transform 0.11s;
}
.feature-grid li, .service-list li, .seminar-list li, .card, .testimonial-card {
    transition: box-shadow 0.16s, transform 0.12s;
}
.testimonial-card:hover,
.card:hover {
    box-shadow: 0 4px 32px rgba(50,65,110,0.14) !important;
    transform: translateY(-2px) scale(1.014);
}
input:focus, textarea:focus, select:focus {
    outline: 2px dashed #d3b97a;
}

/* ---------------------------
   RETRO DETAILS
----------------------------*/
body {
    background: repeating-linear-gradient(135deg, #f9efe3 0 12px, #fff9ee 12px 38px);
}
.section, .card, .testimonial-card, .feature-grid li, .service-list li, .seminar-list li {
    box-shadow: 0 2px 10px rgba(227, 169, 78, 0.07), 0 1.5px 6px #c7ba9023;
}

/* Retro headings underline */
h2, .content-wrapper > h1, .featured-articles > h2, .text-section > h2 {
    position: relative;
}
h2::after, .content-wrapper > h1::after, .featured-articles > h2::after, .text-section > h2::after {
    content: '';
    display: block;
    background: #e7c27d;
    width: 65px;
    height: 5px;
    border-radius: 15px 9px 8px 13px;
    position: absolute;
    left: 0; bottom: -12px;
    opacity: 0.18;
}

/* Decorative dots for sub-headings */
.featured-articles > h2::before {
    content: '\2022';
    color: #a57c41;
    margin-right: 8px;
    font-size: 1.3em;
    opacity: 0.6;
}

/* ---------------------------
   MISC
----------------------------*/
::-webkit-scrollbar {
  width: 10px;
  background: #f5ead1;
}
::-webkit-scrollbar-thumb {
  background: #e7c27d;
  border-radius: 14px;
}
::-webkit-selection { background: #efe2b9; color: #23416e; }
::selection { background: #efe2b9; color: #23416e; }

/* Form fields (if needed) */
input, textarea, select {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.05em;
    background: #f8f3e2;
    border: 1.5px solid #cccc92;
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 3px;
    margin-bottom: 13px;
    box-shadow: 0 1px 4px rgba(227, 178, 88, 0.08);
    transition: border 0.14s, box-shadow 0.13s;
}
input:focus, textarea:focus {
    border: 1.5px solid #357420;
    outline: none;
    background: #fffdfa;
}

/* Table styles (if ever present) */
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 18px;
    background: #fefcf7;
    border-radius: 12px 12px 9px 9px;
    box-shadow: 0 2px 10px rgba(199,186,144,0.09);
}
th, td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1.5px solid #e7c27d57;
    font-size: 1.02em;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
th {
    background: #e7c27d36;
    color: #23416e;
    font-weight: bold;
    letter-spacing: 0.015em;
}

/* Spacing between elements! */
.section:not(:last-child) { margin-bottom: 60px; }
.card-container > * { margin-bottom: 20px; }
.content-grid > * { margin-bottom: 20px; }
.text-image-section > * { margin-bottom: 15px; }
.card:not(:last-child), .service-list li:not(:last-child), .seminar-list li:not(:last-child), .testimonial-card:not(:last-child) { margin-bottom: 20px; }