/* ---------------------------
   CSS RESET & NORMALIZE
--------------------------- */
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:inherit; font-size:100%; vertical-align:baseline; box-sizing:border-box;
}
html { box-sizing:border-box; scroll-behavior:smooth; }
*, *:before, *:after { box-sizing:inherit; }
body { line-height:1.3; }

/*----------------------------
   BRAND VARIABLES & FONTS
----------------------------*/
:root {
  --primary: #16346B;
  --secondary: #50B45A;
  --accent: #F4F7FB;
  --black: #181818;
  --white: #FFF;
  --gray: #E1E7F0;
  --gray-dark: #3C4257;
  --danger: #E94E77;
  --brand-shadow: 0 4px 24px rgba(22,52,107,0.09);
  --section-bg1: #F4F7FB;
  --section-bg2: #E6FCEF;
  --section-bg3: #fffdea;
  --radius-large: 20px;
  --radius-med: 14px;
  --radius-small: 7px;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

body {
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--black);
  background: var(--accent);
  font-size: 16px;
  min-height: 100vh;
  letter-spacing: 0.02em;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--primary);
  font-weight: 900;
  margin-bottom: 12px;
  line-height: 1.13;
}
h1 { font-size: 2.25rem; letter-spacing: -1.2px; }
h2 { font-size: 1.6rem; letter-spacing: -1px; }
h3 { font-size: 1.25rem; }
@media (min-width:750px) {
  h1 { font-size:3rem; }
  h2 { font-size:2.1rem; }
  h3 { font-size:1.35rem; }
}

p,li {
  color: var(--gray-dark);
  font-size:1rem;
  margin-bottom:12px;
}
strong,b {
  font-weight:700;
  color: var(--primary);
}
a {
  text-decoration:none;
  color:var(--secondary);
  transition:color 0.25s;
}
a:hover,a:focus {
  color: var(--primary);
  text-decoration:underline;
}

/*----------------------------
  LAYOUT SPACING & CONTAINER
-----------------------------*/
.container {
  width: 94%;
  max-width: 1150px;
  margin: 0 auto;
}
.content-wrapper {
  width: 100%;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  align-items: center;
  gap:18px;
}
.section {
  margin-bottom:60px;
  padding: 40px 20px;
  background:var(--section-bg1);
  border-radius:var(--radius-large);
  box-shadow: var(--brand-shadow);
}
@media (min-width:900px) {
  .section { padding: 60px 32px; margin-bottom: 80px; }
}

/*----------------------------
  FLEXBOX COMPONENT PATTERNS
-----------------------------*/
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  margin-bottom:20px;
  position:relative;
  background:var(--white);
  border-radius:var(--radius-med);
  box-shadow:0 2px 13px rgba(22,52,107,0.06);
  transition:box-shadow 0.22s, transform 0.18s;
  padding:32px 20px 24px;
  min-width:270px;
  flex:1 1 300px;
  border-left: 4px solid var(--secondary);
}
.card:hover {
  box-shadow:0 8px 38px rgba(80,180,90,0.09),0 4px 14px rgba(22,52,107,0.07);
  transform:translateY(-5px) scale(1.021);
}
.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;
}
@media (max-width:768px) {
  .text-image-section {
    flex-direction: column;
    align-items:flex-start;
    gap:18px;
  }
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/*----------------------------
  EXPRESSIVE ARTISTIC ELEMENTS
-----------------------------*/
header, footer {
  background: var(--primary);
  color: var(--white);
  border-radius: 0 0 var(--radius-large) var(--radius-large);
  box-shadow: 0 6px 24px rgba(22,52,107,0.08);
  z-index:90;
}
header {
  padding: 0;
  position:relative;
  min-height:72px;
  width:100%;
}
header nav {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 16px 30px;
  padding: 0 14px;
  height: 62px;
}
header nav a {
  color: var(--white);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.04em;
  transition:color 0.21s;
  border-radius: var(--radius-small);
  padding: 3px 10px;
}
header nav a:hover, header nav a:focus {
  background: var(--secondary);
  color: var(--primary);
  text-decoration: none;
}
header nav a.btn-primary {
  background: var(--secondary);
  color: var(--primary);
  font-size:1.07rem;
  padding:8px 22px;
  border-radius: var(--radius-med);
  margin-left:18px;
  box-shadow: 0 2px 12px rgba(80,180,90,0.11);
  letter-spacing:0.06em;
  border:none;
  transition:background 0.18s, box-shadow 0.17s, color 0.18s;
}
header nav a.btn-primary:hover, header nav a.btn-primary:focus {
  background: var(--white);
  color: var(--secondary);
  box-shadow:0 7px 26px rgba(99,234,157,0.10),0 2px 14px rgba(22,52,107,0.07);
}
header nav img {
  height: 38px; width:auto; margin-right:10px; border-radius:13px;
  background:var(--white);
  padding:3px;
  box-shadow:0 2px 11px rgba(22,52,107,0.04);
}

/* Make nav responsive */
@media (max-width:1000px) {
  header nav {
    gap:10px 18px;
    font-size:0.97em;
  }
  header nav img { height:30px; }
}
@media (max-width:850px) {
  header nav { gap:8px 7px; padding:0 3px; }
}
@media (max-width:700px) {
  header nav { display:none; }
}

/*----------------------------
  MOBILE BURGER NAVIGATION
-----------------------------*/
.mobile-menu-toggle {
  display:block;
  position:absolute;
  right:18px;
  top:14px;
  background:var(--secondary);
  color:var(--primary);
  border:none;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:2rem;
  z-index:210;
  display:none;
  justify-content:center;
  align-items:center;
  box-shadow:0 2px 10px rgba(80,180,90,0.13);
  transition: background 0.15s, color 0.16s;
}
.mobile-menu-toggle:focus {
  outline:2px solid var(--primary);
  background:var(--white);
  color:var(--secondary);
}
@media (max-width:700px) {
  .mobile-menu-toggle { display:flex; }
}
.mobile-menu {
  position:fixed;
  top:0; left:0;
  height:100vh; width:100vw;
  background:rgba(22,52,107,0.95);
  z-index:301;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.34s cubic-bezier(.7,.46,.37,1.12);
  pointer-events:none;
  opacity:0;
}
.mobile-menu.open {
  transform:translateX(0);
  pointer-events:auto;
  opacity:1;
}
.mobile-menu-close {
  background:var(--secondary);
  color:var(--primary);
  border:none;
  border-radius:50%;
  width:42px;
  height:42px;
  font-size:1.7rem;
  margin:24px 14px 0 auto;
  transition: background 0.18s, color 0.16s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background:var(--white);
  color:var(--secondary);
  outline:2px solid var(--primary);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:100vw;
  margin-top:40px;
}
.mobile-nav a {
  color: var(--white);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size:1.23em;
  letter-spacing: 0.06em;
  padding: 12px 30px;
  border-radius: var(--radius-med);
  transition: background 0.2s, color 0.2s;
  width: max-content;
  margin-bottom: 7px;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background: var(--secondary);
  color: var(--primary);
}

/* Hide on desktop */
@media (min-width:701px) {
  .mobile-menu, .mobile-menu-toggle { display:none !important; }
}

/*----------------------------
        FOOTER
-----------------------------*/
footer {
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  margin-top:60px;
  padding:28px 0 19px 0;
  box-shadow: 0 -2px 17px rgba(22,52,107,0.07);
}
footer nav {
  display: flex;
  gap: 18px;
  flex-wrap:wrap;
  align-items: center;
  justify-content:center;
}
footer nav a {
  color: var(--white);
  font-weight: 500;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size:1rem;
  margin-bottom:4px;
  padding:3px 9px;
  border-radius:12px;
  transition:background 0.16s, color 0.13s;
}
footer nav a:hover {
  background: var(--secondary);
  color: var(--primary);
}
footer p {
  margin-top:19px;
  color: var(--accent);
  font-size:0.98em;
  text-align:center;
}

/*----------------------------
      BUTTONS & LINKS
-----------------------------*/
.btn-primary, .btn-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  outline:none;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight: bold;
  border-radius:var(--radius-large);
  padding:11px 30px;
  font-size:1.12em;
  letter-spacing:0.045em;
  cursor:pointer;
  transition: background 0.18s, color 0.18s, transform 0.19s, box-shadow 0.12s;
  box-shadow:0 3px 16px rgba(22,52,107,0.10);
  margin-top:12px;
}
.btn-primary {
  background:var(--secondary);
  color:var(--primary); 
}
.btn-primary:hover, .btn-primary:focus {
  background:var(--primary);
  color:var(--white);
  transform:translateY(-3px) scale(1.030);
  box-shadow:0 9px 30px rgba(80,180,90,0.18);
}
.btn-secondary {
  background:var(--white);
  color:var(--secondary);
  border:2px solid var(--secondary);
}
.btn-secondary:hover, .btn-secondary:focus {
  background:var(--secondary);
  color:var(--white);
  box-shadow:0 6px 22px rgba(80,180,90,0.10);
}

/*----------------------------
    TYPOGRAPHY & SUBLINES
-----------------------------*/
.subheadline {
  color:var(--secondary);
  font-size:1.14em;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  margin-bottom:18px;
}

/*----------------------------
    LISTS & TEXT SECTIONS
-----------------------------*/
ul,ol {
  padding-left: 23px;
  margin-bottom:17px;
  color: var(--gray-dark);
  font-size:1em;
}
li {
  margin-bottom: 9px;
}
.text-section, .cta-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  margin-bottom:12px;
}

/*----------------------------
    ARTISTIC FEATURE BLOCKS
-----------------------------*/
.feature-grid,.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 20px 0 0 0;
  justify-content: center;
}
.feature-grid > div, .service-grid > div {
  flex:1 1 250px;
  background:var(--white);
  min-width:220px;
  max-width:325px;
  border-radius:var(--radius-med);
  box-shadow:0 2px 15px rgba(80,180,90,0.09);
  padding:32px 18px 22px;
  display:flex; flex-direction:column; align-items:center;
  gap: 14px;
  border-top:4px solid var(--secondary);
  position:relative;
  transition:box-shadow 0.22s, transform 0.22s;
}
.feature-grid > div:hover, .service-grid > div:hover {
  box-shadow:0 8px 42px rgba(22,52,107,0.07);
  transform:translateY(-7px) scale(1.02);
}
.feature-grid img, .service-grid img {
  width: 49px; height:49px; border-radius:13px;
  background: var(--section-bg1);
  padding:7px;
  box-shadow:0 2px 11px rgba(22,52,107,0.06);
}

@media (max-width:910px) {
  .feature-grid,.service-grid { gap:14px; }
  .feature-grid>div, .service-grid>div {min-width:165px; max-width:95vw;}
}
@media (max-width:600px) {
  .feature-grid,.service-grid {
    flex-direction: column;
    gap:18px;
  }
}

/*----------------------------
      TESTIMONIALS
-----------------------------*/
.testimonial-card {
  display: flex;
  align-items: center;
  gap:20px;
  background: var(--white);
  color: var(--primary);
  padding: 20px 22px;
  border-radius: var(--radius-large);
  box-shadow: 0 3px 21px rgba(22,52,107,0.10);
  margin-bottom: 20px;
  margin-top:10px;
  font-size:1.15em;
  border-left: 5px solid var(--secondary);
  transition:box-shadow 0.2s, background 0.18s;
}
.testimonial-card strong {
  font-size:1em;
  font-family:'Montserrat',Arial,sans-serif;
  color:var(--secondary);
}
.testimonial-card p {
  color:var(--primary);
  font-size:1.08em;
  line-height:1.38;
}
.testimonial-card:hover {
  background: var(--accent);
  box-shadow:0 7px 30px rgba(80,180,90,0.10);
  cursor: pointer;
}

/* Ensure contrast in testimonials */
.testimonial-card p, .testimonial-card strong {
  color: var(--primary);
}

/*----------------------------
           TABLES
-----------------------------*/
table {
  width: 100%;
  border-collapse:collapse;
  background: var(--white);
  margin:22px 0 32px 0;
  border-radius: var(--radius-med);
  overflow:hidden;
  box-shadow:0 1px 10px rgba(22,52,107,0.07);
  font-size:1em;
}
thead tr {
  background: var(--secondary);
}
th, td {
  padding: 16px 7px;
  text-align: left;
  border-bottom:1px solid var(--gray);
}
th {
  color: var(--white);
  font-weight:bold;
  font-size:1.1em;
  letter-spacing: 0.04em;
}
tbody tr:nth-child(even) {
  background: var(--accent);
}
td {
  color: var(--primary);
  font-size:1em;
}

/*----------------------------
        COOKIE BANNER
-----------------------------*/
.cookie-consent-banner {
  position:fixed;
  bottom:0; left:0; width:100vw;
  background:var(--primary);
  color:var(--white);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 16px;
  z-index:3500;
  box-shadow:0 -3px 17px rgba(22,52,107,0.10);
  gap: 22px;
  font-size:1em;
  animation: slideUpCookie .55s cubic-bezier(.61,1.11,.55,.91);
}
@keyframes slideUpCookie {
  from { transform: translateY(100%); opacity:0 }
  to {transform:translateY(0); opacity:1}
}
.cookie-consent-banner p {
  color:var(--white);
  margin-bottom:0;
  flex:1 1 60vw;
  font-size:1em;
}
.cookie-btn-group {
  display:flex; gap:11px; flex-wrap: wrap;
}
.cookie-consent-banner button {
  font-family:'Montserrat',Arial,sans-serif;
  background:var(--secondary);
  color:var(--primary);
  border:none;
  border-radius:17px;
  padding:6px 21px;
  font-size:0.98em;
  margin-top:0;
  box-shadow:0 2px 9px #15346b14;
  cursor:pointer;
  transition:background 0.15s, color 0.15s, box-shadow 0.16s;
}
.cookie-consent-banner button:hover, .cookie-consent-banner button:focus {
  background:var(--white);
  color:var(--secondary);
  outline:2px solid var(--secondary);
}
.cookie-settings-btn {
  background:var(--white)!important;
  color:var(--secondary)!important;
  border:2px solid var(--secondary);
}
.cookie-settings-btn:hover, .cookie-settings-btn:focus {
  background:var(--secondary)!important;
  color:var(--white)!important;
}

@media (max-width:700px) {
  .cookie-consent-banner {
    flex-direction:column;
    align-items:flex-start;
    padding:15px 8px;
    gap:10px;
    font-size:0.93em;
  }
  .cookie-btn-group {
    gap:6px; margin-top:6px;
  }
}

/* Cookie modal */
.cookie-modal-bg {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(22,52,107,0.78);
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.25s;
}
.cookie-modal {
  background:var(--white);
  color:var(--primary);
  border-radius:var(--radius-large);
  max-width:410px;
  min-width:280px;
  width:97vw;
  box-shadow:0 4px 34px rgba(22,52,107,0.20);
  padding:32px 27px 25px 27px;
  display:flex;
  flex-direction:column;
  gap:16px;
  animation: popIn .4s cubic-bezier(.57,1.07,.63,0.91);
}
@keyframes popIn {
  from { transform:scale(0.85) translateY(13px); opacity:0 }
  to { transform:scale(1) translateY(0); opacity:1 }
}
.cookie-modal h2 {
  color:var(--primary);
  font-size:1.24em;
}
.cookie-modal label {
  display:flex; align-items:center;
  gap:10px; margin-bottom:13px;
  font-size:1em;
  font-family:'Montserrat',Arial;
}
.cookie-switch {
  appearance:none;
  width:35px; height:19px;
  background:var(--gray);
  border-radius:12px;
  position:relative;
  outline:none;
  transition:background 0.15s;
  margin-right:8px;
}
.cookie-switch:checked {
  background:var(--secondary);
}
.cookie-switch::after {
  content:'';
  position:absolute; top:3px; left:4px;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--white);
  transition:left 0.18s;
}
.cookie-switch:checked::after {
  left:18px;
}
.cookie-modal .close-modal-btn {
  align-self:flex-end;
  background:var(--secondary);
  color:var(--primary);
  border:none; border-radius:50%;
  width:33px; height:33px;
  font-size:1.22em;
  cursor:pointer;
}
.cookie-modal .close-modal-btn:hover,.cookie-modal .close-modal-btn:focus {
  background:var(--white);
  color:var(--secondary);
}
.cookie-modal .category-desc {
  color:var(--gray-dark);
  font-size:0.98em;
  margin-bottom:8px;
}

/*----------------------------
   RESPONSIVE ADJUSTMENTS
-----------------------------*/
@media (max-width:880px) {
  .section, .container { padding-left:8px; padding-right:8px; }
  .feature-grid > div, .service-grid > div {padding:20px 7px;}
}
@media (max-width:600px) {
  .section {
    padding:22px 5px 28px 5px;
    border-radius:var(--radius-med);
    margin-bottom: 34px;
  }
  h1 {font-size:1.42em;}
  h2 {font-size:1.13em;}
  h3 {font-size:1em;}
  .card {padding:12px 5px;}
}

/*----------------------------
     ADDITIONAL UI EFFECTS
-----------------------------*/
::-webkit-scrollbar {
  width:8px;
}
::-webkit-scrollbar-thumb {
  background:var(--primary);
  border-radius: 99em;
}
::-webkit-scrollbar-track {background:var(--section-bg1);}

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

/* Section alternation backgrounds */
section:nth-child(even) {
  background: var(--section-bg2);
}
section:nth-child(odd) {
  background: var(--section-bg3);
}

/* CTA section tweaks */
.cta-section {
  background:var(--secondary);
  color:var(--white);
  border-radius:var(--radius-large);
  padding:28px 20px;
  align-items:center;
  text-align:center;
  margin:20px 0 0 0;
  box-shadow:0 3px 18px rgba(80,180,90,0.13);
  gap:11px;
}
.cta-section h3 {color:var(--white);}

/* Misc spacing helpers */
.mt-2 {margin-top:16px !important;}
.mb-2 {margin-bottom:16px !important;}
.mt-3 {margin-top:24px !important;}
.mb-3 {margin-bottom:24px !important;}

/* Hide visually (e.g., for modals) */
.visually-hidden {
  position:absolute;
  left:-9999px;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

/*----------------------------
     ARTISTIC/UNIQUE FINISHES
-----------------------------*/
.section {
  position:relative;
  overflow:hidden;
}
.section::before {
  content:'';
  position:absolute;
  top:-36px; left:-53px;
  width:95px; height:95px;
  background:radial-gradient(circle,rgba(80,180,90,0.24) 66%,transparent 100%);
  z-index:0;
  border-radius:61% 49% 62% 38% / 35% 56% 44% 57%;
  pointer-events:none;
  filter: blur(6px);
  animation: artisticFade 10s infinite alternate;
}
@keyframes artisticFade {
  0% {opacity:0.11;}
  100% {opacity:0.38;}
}
.section::after {
  content:'';
  position:absolute;
  bottom: -33px; right:-38px;
  width:90px; height:90px;
  background:radial-gradient(circle,rgba(22,52,107,0.14) 65%,transparent 100%);
  z-index:0;
  border-radius:60% 49% 75% 47% / 44% 57% 66% 47%;
  pointer-events:none;
  filter: blur(7px);
}
.content-wrapper, .feature-grid > div, .service-grid > div, .testimonial-card, .card {
  position:relative;
  z-index:1;
}

/*----------------------------
     FORMS (inputs, etc.)
-----------------------------*/
input, select, textarea {
  font-family: inherit;
  font-size:1em;
  border-radius:var(--radius-small);
  border:1.5px solid var(--gray);
  padding:10px 13px;
  margin-bottom:12px;
  background:var(--white);
  width:100%;
  color:var(--primary);
  transition: border 0.17s, box-shadow 0.14s;
}
input:focus, select:focus, textarea:focus {
  border:1.5px solid var(--secondary);
  box-shadow:0 2px 10px rgba(80,180,90,0.08);
  outline:none;
}

/*----------------------------
     ACCESSIBILITY TWEAKS
----------------------------*/
:focus {
  outline:2.5px solid var(--secondary);
  outline-offset: 2px;
}

/*----------------------------
    ANIMATION EFFECTS
-----------------------------*/
.btn-primary, .btn-secondary, .card, .feature-grid > div, .service-grid > div, .testimonial-card {
  transition:box-shadow 0.18s, transform 0.16s, background 0.14s, color 0.13s;
}

/*----------------------------
    ENSURE NO OVERLAP
-----------------------------*/
.section, .card, .feature-grid>div, .service-grid>div, .testimonial-card, .card-container>*, .card-container, .content-grid>* {
  margin-bottom:20px!important;
}
.card-container, .feature-grid, .service-grid, .content-grid {
  gap:20px;
}

/*----------------------------
    PRINT ADJUSTMENT
-----------------------------*/
@media print { * { color: var(--black) !important; background: none !important;} body {background:#fff;}}