/* ========================================================================
   CSS RESET & BASELINE NORMALIZATION
=========================================================================== */
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,main,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,main,menu,nav,section {display:block;}
ul,ol{list-style:none;margin:0;padding:0;}
a{text-decoration:none; color:inherit;}
img{border:0;max-width:100%;display:block;}
table{border-collapse:collapse;border-spacing:0;}
input,button,textarea,select{font:inherit;margin:0;padding:0;background:none;box-sizing:border-box;}
button{cursor:pointer;}
:focus{outline:2px solid #7CA85D;outline-offset:2px;}
html{box-sizing:border-box;scroll-behavior:smooth;}
*,*:before,*:after{box-sizing:inherit;}

/*
==========================================================================
   NATURE ORGANIC THEME – COLORS & TYPOGRAPHY
==========================================================================*/
:root {
  /* Earthy color palette for "nature_organic" theme and brand */
  --primary:#223343;
  --primary-dark:#1a2533;
  --secondary:#f5f3f1;
  --background:#f5f3f1;
  --foreground:#223343;
  --accent:#E17527;
  --accent-dark:#b95d18;
  --organic-green:#7CA85D;
  --organic-beige:#ece6dd;
  --card-bg:#ffffff;
  --card-shadow:rgba(44, 62, 52, 0.08);
  --border-radius:22px;
  --radius-small:12px;
  --shadow-med:0 4px 24px rgba(49, 58, 47, 0.10);
  --shadow-btn:0 2px 8px rgba(61, 75, 60, 0.16);
  --disabled:#bbc5b1;
  /* Font Families */
  --ff-display:'Montserrat', Arial, sans-serif;
  --ff-body:'Open Sans', Arial, sans-serif;
}

body {
  font-family:var(--ff-body);
  font-size:16px;
  color:var(--primary);
  background:var(--background);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--ff-display);
  color:var(--primary-dark);
}
h1 {font-size:2.5rem; line-height:1.15; margin-bottom:20px; font-weight:700; letter-spacing:-1px;}
h2 {font-size:2rem;   margin-bottom:16px; font-weight:700; letter-spacing:-0.5px;}
h3 {font-size:1.3rem; margin-bottom:12px; font-weight:600; letter-spacing:-0.25px;}
h4, h5, h6 {font-weight:600;}

.subtitle {
  font-size:1.15rem;
  color:var(--primary);
  opacity: 0.8;
  margin-bottom:22px;
}

p, ul, ol {margin-bottom:16px;}
strong {font-weight:700; color:var(--primary-dark);}

.container {
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
}

main {
  padding-top:34px;
  padding-bottom:34px;
}

.section {
  margin-bottom:60px;
  padding:40px 20px;
  background:transparent;
}

/* ==================================================================
   FLEXBOX LAYOUTS & UNIQUE ORGANIC SPACING
================================================================== */
.content-wrapper {
  display:flex;
  flex-direction:column;
  gap:24px;
}
.feature-grid, .service-grid, .project-grid, .team-grid, .blog-list {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
}
.team-grid > div, .project-grid > div, .feature-grid > div, .service-grid > .service-card, .blog-list > .blog-post-preview {
  background:var(--card-bg);
  border-radius:var(--border-radius);
  box-shadow: var(--shadow-med);
  padding:32px 24px 24px 24px;
  min-width:260px;
  flex: 1 1 300px;
  margin-bottom:20px;
  position:relative;
  transition:box-shadow 0.25s,transform 0.18s;
}
.team-grid > div:hover, .project-grid > div:hover, .feature-grid > div:hover, .service-card:hover, .blog-post-preview:hover {
  box-shadow:0 8px 32px rgba(34,51,67,0.16);
  transform:translateY(-4px) scale(1.02);
}

.text-section {
  padding:24px 18px;
  background:var(--organic-beige);
  border-radius:var(--radius-small);
  margin-bottom:20px;
  box-shadow:0 2px 8px rgba(60,86,64,.05);
}

ul>li {
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
}
ul>li:before {
  content:'';
  position:absolute;
  left:0;top:11px;
  width:10px;height:10px;
  background:var(--organic-green);
  border-radius:50%;
}

dl, dt, dd {margin-bottom:8px;}

.cta-section {
  background:var(--organic-green);
  color:#fff;
  border-radius:var(--border-radius);
  box-shadow:var(--shadow-med);
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
  padding:38px 22px;
}
.cta-section h2, .cta-section p {color:#fff;}

/* ===================================================================
   CTA & BUTTONS: ORGANIC, ROUNDED & ACCENTED WITH HOVER STATES
=================================================================== */
.cta-btn, button, .newsletter-signup button {
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:36px;
  padding:14px 32px;
  font-family:var(--ff-display);
  font-size:1.13rem;
  font-weight:bold;
  letter-spacing:.5px;
  box-shadow:var(--shadow-btn);
  transition:background 0.23s, box-shadow .23s, transform .15s;
  margin-right:12px;
  margin-top: 6px;
  margin-bottom: 6px;
  cursor:pointer;
  display:inline-block;
  position:relative;
}
.cta-btn:hover, .newsletter-signup button:hover, button:hover {
  background:var(--accent-dark);
  box-shadow:0 4px 16px rgba(225,117,39,0.14);
  transform:scale(1.055);
}
.cta-btn:focus, .newsletter-signup button:focus, button:focus {
  outline:2px solid var(--organic-green);
}

button:disabled, .cta-btn[disabled] {
  opacity:.55; background: var(--disabled); cursor: not-allowed;
}

/* Links in text-section */
.text-section a { color:var(--accent);text-decoration:underline;}
.text-section a:hover { color:var(--primary-dark); text-decoration:none;}

/* Newsletter Signup (Blog) */
.newsletter-signup {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  margin-top:20px;
}
.newsletter-signup input[type=email] {
  border:1.5px solid var(--primary);
  padding:12px 18px;
  border-radius:36px;
  font-size:1rem;
  outline:none;
  width:220px;
  max-width:85vw;
  margin-bottom:6px;
}
.newsletter-signup input[type=email]:focus {
  border-color:var(--organic-green);
}

/* ========================================================================
   HEADER + FLEX NAV – ORGANIC NAVIGATION STYLES
========================================================================== */
header {
  background:var(--secondary);
  border-bottom:2.5px solid var(--organic-green);
  min-height:72px;
  position:relative;
  z-index:51;
}
header .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px 18px 20px;
}
header img {
  height:44px;
  width:auto;
  object-fit:contain; 
  border-radius: 12px;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:32px;
}
.main-nav a {
  font-family:var(--ff-display);
  font-size:1rem;
  color:var(--primary);
  padding:7px 12px;
  border-radius:22px;
  transition:background 0.18s, color 0.19s;
  position:relative;
}
.main-nav a:hover, .main-nav a:focus {
  background:var(--organic-beige);
  color:var(--accent);
}
/* Navbar CTA Button */
header .cta-btn {
  margin-left:24px;
  margin-right:0;
  font-size:1rem;
  padding:13px 28px;
  background:var(--organic-green);
  color:#fff;
  transition:background 0.22s, box-shadow 0.22s;
}
header .cta-btn:hover {background:var(--primary-dark);color:#fff;}

/* MOBILE NAV (HAMBURGER) */
.mobile-menu-toggle {
  display:none;
  background:var(--organic-green);
  color:#fff;
  border:none;
  border-radius:50%;
  width:46px;
  height:46px;
  font-size:2rem;
  justify-content:center;
  align-items:center;
  position:absolute;
  top:17px;right:22px;
  z-index:1202;
  box-shadow:var(--shadow-btn);
  transition:background .18s;
}
.mobile-menu-toggle:hover{background:var(--accent);}

.mobile-menu {
  position:fixed;
  top:0;left:0;width:100vw;height:100vh;
  background:var(--organic-beige);
  box-shadow:0 2px 32px rgba(34,51,67,0.16);
  z-index:1201;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transform:translateX(-100vw);
  transition:transform 0.36s cubic-bezier(0.67,0.04,0.25,1.19);
  padding:36px 0 0 0;
  will-change:transform;
}
.mobile-menu.open {
  transform:translateX(0);
}
.mobile-menu-close {
  background:var(--organic-green);
  color:#fff;
  border-radius:50%;
  border:none;
  width:44px;height:44px;
  font-size:1.5rem;
  align-self:flex-end;
  margin-right:28px;
  margin-bottom:8px;
  transition:background 0.2s;
  z-index:1203;
}
.mobile-menu-close:hover { background:var(--accent);}
.mobile-nav {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  padding:18px 32px;
}
.mobile-nav a {
  font-family:var(--ff-body);
  font-size:1.13rem;
  color:var(--primary-dark);
  padding:13px 0;
  border:none;
  width:100%;
  border-radius:16px;
  transition:background 0.18s,color 0.15s;
}
.mobile-nav a:hover, .mobile-nav a:focus {background:var(--organic-green);color:#fff;}

/* Hide main-nav, show burger on mobile */
@media (max-width: 950px){
  .main-nav, header .cta-btn {display:none;}
  .mobile-menu-toggle {display:flex;}
}
@media (max-width: 768px){
  header .container{padding:11px 12px;}
  header img{height:32px;}
}
/* Show on desktop */
@media (min-width:951px){
  .mobile-menu, .mobile-menu-toggle{display:none!important;}
  .main-nav{display:flex;}
}

/* ====================================================================
   TESTIMONIALS (Slider/List/Review Cards)
   Bright backgrounds, strong contrast, deep earthy accents
==================================================================== */
.testimonial-slider, .testimonial-list {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
}
.testimonial-card {
  background:#fff;
  color:var(--primary-dark);
  border-radius:var(--border-radius);
  box-shadow: var(--shadow-med);
  padding:20px;
  min-width:240px;
  flex:1 1 300px;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
  margin-bottom:20px;
  border:2px solid var(--organic-green);
  position:relative;
  transition:box-shadow 0.18s, transform 0.14s;
}
.testimonial-card strong{color:var(--accent);font-size:1.07rem;margin-bottom:3px;}
.testimonial-card span{margin-top:4px;font-size:1.06rem;color:var(--organic-green);font-family:var(--ff-display);letter-spacing:2.2px;}
.testimonial-card p{color:var(--primary-dark);line-height:1.65;font-size:1.08rem;}
.testimonial-card:before{
  content:"";
  position:absolute;
  top:-14px;left:28px;
  width:48px;height:48px;
  background:url('../assets/deco-leaf.svg') no-repeat center center/contain;
  opacity:.13;
  z-index:0;
  pointer-events:none;
}
.testimonial-card:hover {
  box-shadow:0 4px 32px rgba(125,150,90,0.18);
  transform:scale(1.025);
}

/* ===================================================================
   BLOG LAYOUT: ORGANIC CARD PREVIEWS
=================================================================== */
.blog-list {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
}
.blog-post-preview {
  border-radius: var(--border-radius);
  background: #fff;
  box-shadow: var(--shadow-med);
  flex: 1 1 330px;
  padding: 28px 22px 22px 22px;
  margin-bottom: 20px;
  min-width:240px;
  display:flex;
  flex-direction:column;
  gap:12px;
  border-left:6px solid var(--organic-green);
  transition:box-shadow 0.2s,transform 0.13s;
}
.blog-post-preview:hover {
  box-shadow:0 4px 22px rgba(34,51,67,0.15);
  transform:translateY(-2px) scale(1.021);
  border-left:6px solid var(--accent);
}
.blog-post-preview span {
  color:var(--accent);
  font-size:0.98rem;
  font-family:var(--ff-display);
  font-weight:600;
}

/* ===================================================================
   CARDS, SERVICES, FEATURES, GAUGE FOR MOBILE
=================================================================== */
.service-card {
  background:var(--card-bg);
  border-radius:var(--border-radius);
  box-shadow: var(--shadow-med);
  padding:32px 24px 28px 24px;
  min-width:220px;
  flex:1 1 240px;
  position:relative;
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  border-left:5px solid var(--organic-green);
  transition:box-shadow .15s,transform .12s,border .17s;
}
.service-card h3{margin-bottom:8px;font-size:1.19rem;color:var(--primary-dark);}
.service-card .price {
  font-family:var(--ff-display);
  font-weight:700;
  color:var(--accent);
  margin-top:10px;
  font-size:1.05rem;
}
.service-card:hover {
  box-shadow:0 4px 22px rgba(34,51,67,0.12);
  transform:translateY(-2px) scale(1.021);
  border-left:5px solid var(--accent);
}

.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}

.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card {
  background:var(--card-bg);
  border-radius:var(--border-radius);
  box-shadow: var(--shadow-med);
  padding:28px 22px 22px 22px;
  margin-bottom:20px;
  position:relative;
  transition:box-shadow 0.23s, transform .13s;
}
.card:hover {box-shadow:0 6px 30px rgba(60,90,60,0.14);transform:scale(1.017);}

.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;
}
.card-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* =======================================================================
   FOOTER : NATURE-ORGANIC STYLE FOOTER – STRAIGHT, EARTHY, CLEAN
========================================================================*/
footer {
  background:var(--primary);
  color:#fff;
  border-top:5px solid var(--organic-green);
  padding:36px 0 0 0;
}
footer .container{padding:0 20px;}
.footer-main {
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  align-items:flex-start;
  justify-content:space-between;
  padding-bottom:26px;
}
.footer-main > a img {height:48px;width:auto;margin-bottom:16px;}
.footer-nav {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-right:24px;
}
.footer-nav a {
  color:#fff;
  font-family:var(--ff-body);
  font-size:1rem;
  opacity:.92;
  transition:color 0.17s, opacity 0.16s;
}
.footer-nav a:hover,.footer-nav a:focus {color:var(--organic-green);opacity:1;}
.footer-contact p, .footer-contact a {color:#fff;font-size:0.96rem;line-height:1.8;opacity:0.91;}
.footer-contact a {border-bottom:1px dotted var(--organic-green);transition:border 0.17s;}
.footer-contact a:hover {color:var(--organic-green);border-bottom:1.5px solid var(--accent);}

/* Legal links on mobile aligned center */
@media (max-width: 650px){
  .footer-main {flex-direction:column;align-items:center;gap:18px;padding-bottom:14px;}
  .footer-nav{align-items:center; margin:0 0 14px 0;}
  .footer-contact{text-align:center;}
}

/* ====================================================================
   COOKIE CONSENT BANNER & COOKIE SETTINGS MODAL
==================================================================== */
.cookie-banner {
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9999;
  background:var(--organic-beige);
  color:var(--primary-dark);
  border-top:3.5px solid var(--organic-green);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:26px 18px;
  font-size:1.01rem;
  box-shadow: 0 -2px 24px rgba(34,51,67,.08);
  gap:18px;
  min-height:70px;
  transition:transform .36s;
}
.cookie-banner .cookie-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.cookie-banner button {
  background:var(--organic-green);
  color:#fff;
  padding:10px 24px;
  border:none;
  border-radius:22px;
  font-size:1rem;
  margin:0;
  box-shadow:var(--shadow-btn);
  transition:background .18s,transform 0.14s;
  font-family:var(--ff-display);
  font-weight:600;
}
.cookie-banner button.accept { background:var(--organic-green); }
.cookie-banner button.reject { background:var(--accent); }
.cookie-banner button.settings { background:var(--primary); }
.cookie-banner button:hover, .cookie-banner button:focus, .cookie-banner button:active {background:var(--accent-dark);color:#fff;transform:scale(1.06);}
.cookie-banner.hide { transform:translateY(115%); }

/* COOKIE SETTINGS MODAL POP-UP */
.cookie-modal-backdrop {
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(34,51,67,0.44);
  z-index:10001;
  display:flex;
  justify-content:center;
  align-items:center;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.23s;
}
.cookie-modal-backdrop.open {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.cookie-modal {
  background:#fff;
  border-radius:var(--border-radius);
  padding:38px 34px 24px 34px;
  box-shadow:0 6px 34px rgba(44,62,52,0.16);
  max-width:96vw;
  min-width:285px;
  min-height:120px;
  z-index:10002;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  animation:modalin 0.32s cubic-bezier(0.51,.22,0.3,1.05);
}
@keyframes modalin {
  0% {transform:scale(0.91) translateY(18px); opacity:0;}
  100%{transform:scale(1) translateY(0); opacity:1;}
}
.cookie-modal h3 {margin-bottom:10px;font-size:1.3rem;font-family:var(--ff-display);color:var(--primary-dark);}
.cookie-modal label {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:13px;
  font-size:1rem;
  font-family:var(--ff-body);
  color:var(--primary-dark);
}
.cookie-modal input[type=checkbox] {
  width:24px;height:24px;
  accent-color:var(--organic-green);
  border-radius:5px;
  margin-right:3px;
}
.cookie-modal .modal-actions {
  display:flex;
  gap:15px;
  margin-top:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.cookie-modal .modal-close {
  background:transparent;
  position:absolute;
  right:16px;top:16px;
  border:none;
  color:var(--primary-dark);
  font-size:1.5rem;
  width:32px;height:32px;
  border-radius:50%;
  transition:background .18s;
}
.cookie-modal .modal-close:hover{background:var(--organic-beige);}

/* ====================================================================
   RESPONSIVE DESIGN // FLEX COLUMN STACK FOR MOBILE
==================================================================== */
@media (max-width:1050px){
  .feature-grid, .service-grid, .project-grid, .team-grid, .blog-list, .testimonial-slider, .testimonial-list {
    gap:18px;
  }
}

@media (max-width: 900px){
  .feature-grid, .service-grid, .team-grid, .project-grid,
  .blog-list, .testimonial-slider, .testimonial-list {
    flex-direction:column;
    gap:16px;
  }
  .feature-grid > div, .service-card, .team-grid > div, .project-grid > div , .blog-post-preview, .testimonial-card {
    min-width:0;
    flex:1 1 100%;
  }
}
@media (max-width:768px) {
  .container {max-width:100vw;padding:0 8px;}
  .content-wrapper, .cta-section, .feature-grid, .service-grid, .team-grid, .project-grid,
   .blog-list, .testimonial-slider, .testimonial-list{
    gap:14px;
  }
  .section {padding:30px 4px;margin-bottom:38px;}
  h1{font-size:2rem;}
  h2{font-size:1.45rem;}
  .text-image-section, .content-grid, .card-container {
    flex-direction:column !important;
    gap:20px;
  }
  .newsletter-signup {flex-direction:column;align-items:stretch;gap:12px;}
  .testimonial-card, .service-card, .blog-post-preview, .team-grid>div, .project-grid>div, .feature-grid>div {padding:18px 10px 14px 14px;}
}
@media (max-width:480px) {
  .container {padding:0 3px;}
  h1{font-size:1.47rem;}
  h2{font-size:1.12rem;}
  .footer-main > a img {height:36px;}
}

/* ====================================================================
   MICRO-INTERACTIONS & ORGANIC EFFECTS
==================================================================== */
a, .cta-btn, button, .newsletter-signup button,
.main-nav a, .footer-nav a, .mobile-menu-toggle, .mobile-menu-close {
  transition:background .2s, color .2s, box-shadow .15s, transform .13s;
}
input:focus, textarea:focus, select:focus {outline:2px solid var(--organic-green);}

::-webkit-scrollbar {width:11px;background:var(--organic-beige);}
::-webkit-scrollbar-thumb {background:var(--organic-green);border-radius:10px;}
::-webkit-scrollbar-thumb:hover {background:var(--accent);}

/* Subtle section dividers (organic) */
.section:not(:last-child) {border-bottom:1.5px dashed var(--organic-beige);}

/* Decorative nature SVG divider (can be added via before/after if needed)
.section:after {
  content:""; display:block; height:26px;
  background:url('../assets/deco-branch.svg') no-repeat center center/contain;
  opacity:.13;
  margin-top:18px;
}
*/

/* ====================================================================
   MISC. UTILITY
==================================================================== */
.hide{display:none!important;}
.d-flex{display:flex!important;}
.flex-column{flex-direction:column!important;}
.align-center{align-items:center!important;}
.text-center{text-align:center!important;}

/***** END NATURE ORGANIC THEME – PRIMAL ARC CSS *****/