/* Enhanced styles to match the reference site's color and layout more closely */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
:root{
  --accent:#0071b9; /* main blue similar to the original */
  --accent-dark:#005a91;
  --muted:#6b6b6b;
  --bg:#f7f9fb;
  --topbar-bg:#bd7e49; /* requested top navbar color */
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Montserrat,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;margin:0;color:#222;background:var(--bg)}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}

/* Page background: wood processing image */
body {
  background-image: url('../img/mainBg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

h2{color:var(--topbar-bg);font-size:1.5rem;margin:1.5rem 0 .5rem}
h3{color:var(--accent);font-size:1.25rem;margin:1.25rem 0 .25rem}
/* Header */
.topbar{background:var(--topbar-bg);border-bottom:1px solid rgba(0,0,0,0.06);font-size:0.95rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 1rem}
.topbar .contact{color:#fff}
.topbar .lang a{color:#fff;text-decoration:none;font-weight:700}
.topbar .quote-btn{background:#fff;color:var(--topbar-bg);padding:.4rem .7rem;border-radius:4px;text-decoration:none;font-weight:700}
.topbar .quote-btn:hover{opacity:0.95}

.site-header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,0.04)}
.navbar .container{display:flex;align-items:center;gap:1rem;padding:1rem}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem;letter-spacing:0.5px}
.logo img{height:40px;display:block}
.nav-toggle{display:none}
.main-nav{display:flex;gap:0.5rem;margin-left:auto;align-items:center}
.main-nav a{color:#222;text-decoration:none;padding:.6rem .8rem;border-radius:4px;font-weight:500}
.main-nav a:hover{background:rgba(0,113,185,0.06)}
.cta{background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:4px;text-decoration:none;margin-left:1rem;font-weight:700}
.cta:hover{background:var(--accent-dark)}
.phone-link{color:var(--accent-dark);font-weight:700;text-decoration:none;padding:.5rem .6rem;border-radius:4px;border:1px solid rgba(0,0,0,0.04);background:#fff}
.phone-link:hover{background:#fff;opacity:0.95}

.card-text {
  background: #bd7d4994;
  padding: 1rem;
  color: #fff;
}

.card-text h3, .card-text p {
  color: #fff;
}

/* Hero */
.hero{background:linear-gradient(180deg,rgba(0,113,185,0.08),transparent);padding:5rem 0 3rem;text-align:left}
.hero .container{display:flex;flex-direction:column;gap:1rem}
.hero h1{font-size:2.4rem;margin:0;color:var(--topbar-bg);line-height:1.1}
.hero p{color:var(--muted);margin:0;max-width:640px}

.btn{display:inline-block;background:var(--topbar-bg);color:#fff;padding:.75rem 1.1rem;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(0,113,185,0.12)}

/* Make the contact page 'Send' button visually larger (approx. double length) */
#contact-form .btn[type="submit"], #contact-form button[type="submit"] {
  padding-left:2.2rem;
  padding-right:2.2rem;
  min-width: 260px; /* ensure visually larger width */
}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:rgba(255, 255, 255);border:1px solid rgba(0,0,0,0.05);padding:.5rem;border-radius:6px;overflow:hidden}
.card img{width:100%;height:160px;object-fit:cover;display:block}
.card h3{margin:.5rem 0 0.25rem}
.card p{color:var(--muted);font-size:.95rem}

/* Activities: exactly two larger columns on desktop, single column on small screens; taller cards */
.activities .grid { grid-template-columns: repeat(2, 1fr); gap:1.5rem; }
.activities .card { display:flex; flex-direction:column; min-height:650px; }
.activities .card img {
    display: block; /* show the image normally */
    width: 100%;
    height: 550px; /* keep the increased height */
    object-fit: cover;
}

/* Remove any overlay pseudo-element */
.activities .card::before {
    display: none;
}

@media (max-width:700px) {
  .activities .grid { grid-template-columns: 1fr; }
  .activities .card { min-height: auto; }
  .activities .card img { height: 200px; }
}

.thumb img{width:100%;height:180px;object-fit:cover;border-radius:6px}

.jobs ul{padding-left:1.2rem}

.site-footer{background:#fff;padding:1.2rem 0;border-top:1px solid rgba(0,0,0,0.04);margin-top:2rem}
.site-footer .footer-nav a{color:var(--muted);text-decoration:none}

.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;background:#222;color:#fff;padding:.7rem;border-radius:6px;display:flex;justify-content:center;align-items:center;gap:.5rem}

/* Banner and contact-preview tweaks */
.banner {
  width: 100%;
  background: url('../img/background_banner.png') center/cover no-repeat;
  text-align: center;
  padding: 0;
  height: 500px;
}
.banner .container {
  padding: 0; /* let the background span full container width */
}
.banner img { display:none; }

section.contact-preview {
  background: transparent !important;
  text-align: center;
  padding: 2rem 0;
}
section.contact-preview address {
  display: inline-block;
  text-align: center;
  margin-bottom: 1rem;
}
section.contact-preview .more {
  text-align: center;
}

/* Contact box inside contact-preview */
.contact-preview {
  padding: 4rem 0; /* keep vertical spacing around the box */
}
.contact-box {
  background: #ffffffd9;
  padding: 120px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 6px;
}
.contact-box h2 {
  margin-top: 0;
}

/* Ensure links and address stay centered */
.contact-box address, .contact-box .more {
  text-align: center;
}

/* Make all site sections white, except the hero and contact-preview which have special styles */
section:not(.hero):not(.contact-preview) {
  background: #ffffff;
  padding: 2rem 0;
}

/* Ensure sections span the full viewport width while their inner content stays constrained */
section.container {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Constrain immediate children inside section.container to the site max width */
section.container > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Hero box similar to contact box */
.hero-box {
  background: #ffffff;
  padding: 120px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-radius: 6px;
  text-align: center;
}
.hero-box h1{margin-top:0}

.jobs {
  padding: 4rem 0;
  text-align: center;
}

@media(max-width:900px){
  .main-nav{display:none;position:absolute;left:0;right:0;top:112px;background:#fff;flex-direction:column;padding:1rem;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
  .nav-toggle{display:block;margin-left:auto;border:0;background:transparent;font-size:1.2rem}
  .contact-box, .hero-box { padding: 40px; }
}

@media(max-width:600px){
  .hero h1{font-size:1.4rem}
}

/* Added HR styling for a white line background */
hr {
    border: none;
    border-top: 1px solid #fff;
}

/* Increase paragraph font size for better readability */
p {
  font-size: 1.1rem;
}

/* Sticky footer layout: ensure footer sits at bottom when page content is short */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto; /* allow main to grow and push footer to bottom */
}
.site-footer {
  flex-shrink: 0; /* don't let footer shrink */
}