/* ==================================================
   style.css voor Acomo SEAL
   ==================================================

/* --------------------------------------------------
   Fontimport & CSS-variabelen
   -------------------------------------------------- */
   @import url('https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&display=swap');

   :root {
     --primary-color: #2e4f3a;
     --secondary-color: #a3b9a1;
     --text-color: #333333;
     --bg-color: #f7f8f6;
     --btn-text: #ffffff;
     --max-width: 1200px;
     --radius: 25px;
     --shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   }
   
   /* ==================================================
      Reset & Basisinstellingen
      ================================================== */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   html {
     font-size: 100%;
     scroll-behavior: smooth;
   }
   body {
     font-family: 'Arsenal', sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     background-color: #fff;
   }
   
   /* ==================================================
      Container & Secties
      ================================================== */
   .container {
     width: 90%;
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 2rem 0;
   }
   section {
     padding: 4rem 0;
   }
   section:nth-of-type(odd) {
     background-color: #ffffff;
   }
   section:nth-of-type(even) {
     background-color: var(--bg-color);
   }
   
   /* ==================================================
      Hero / Banner
      ================================================== */
   header#hero {
     background: var(--secondary-color) url('../images/banner-background.jpg') no-repeat center/cover;
     padding: 6rem 0;
     position: relative;
     overflow: hidden;
     color: #fff;
     border-radius: 0 0 var(--radius) var(--radius);
     box-shadow: var(--shadow);
   }
   header#hero .logo {
     position: absolute;
     top: 20px;
     left: 20px;
     width: 200px;
   }
   header#hero .hero-content {
     background-color: rgba(255, 255, 255, 0.85);
     padding: 1.5rem;
     border-radius: var(--radius);
     text-align: center;
     max-width: 600px;
     margin: 0 auto;
   }
   header#hero h1 {
     font-size: 3rem;
     margin-bottom: 1rem;
     color: var(--primary-color);
   }
   header#hero p {
     font-size: 1.25rem;
     margin-bottom: 2rem;
     color: var(--text-color);
   }
   
   /* ==================================================
      Varianten
      ================================================== */
   #varianten h2 {
     text-align: center;
   }
   #varianten p.variant-intro {
     text-align: center;
     margin-bottom: 2rem;
     color: var(--text-color);
   }
   .variants {
     display: grid;
     gap: 2rem;
     grid-template-columns: 1fr;
   }
   @media (min-width: 768px) {
     .variants {
       grid-template-columns: repeat(3, 1fr);
     }
   }
   .variant {
     background-color: #ffffff;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 1.5rem;
     text-align: center;
   }
   .variant img {
     max-width: 100%;
     height: auto;
     margin-bottom: 1rem;
     border-radius: var(--radius);
   }
   .variant h3 {
     margin-bottom: 0.75rem;
     color: var(--primary-color);
   }
   .variant ul {
     list-style: none;
     margin-bottom: 1rem;
   }
   .variant ul li {
     margin-bottom: 0.5rem;
   }
   .variant ul li::before {
     content: '✔';
     margin-right: 0.5rem;
     color: var(--primary-color);
   }
   .variants .btn {
     background-color: var(--primary-color) !important;
     color: #fff !important;
   }
   
   /* ==================================================
      Kenmerken & Voordelen
      ================================================== */
   #eigenschappen h2 {
     text-align: center;
   }
   .feature-intro {
     text-align: center;
     margin-bottom: 2rem;
     color: var(--text-color);
   }
   .features {
     display: grid;
     gap: 1.5rem;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   }
   .feature {
     background-color: #77A88C;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 1rem;
     text-align: center;
   }
   .feature-icon {
     width: 60px;
     height: 60px;
     object-fit: contain;
     margin-bottom: 0.5rem;
   }
   #eigenschappen .feature h4 {
     font-size: 0.875rem;
     color: #fff;
   }
   
   /* ==================================================
      Afgeronde Projecten – Grid met max 2 per rij
      ================================================== */
   .gallery {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
   }
   .gallery a {
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
   }
   .gallery img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
   }
   #projecten-gallery p {
     margin-bottom: 1rem; /*zelfde als gap tussen items*/
   }
   @media (max-width: 480px) {
     .gallery {
       grid-template-columns: 1fr;
     }
   }
   
   /* ==================================================
      Offerte-formulier
      ================================================== */
   form {
     background-color: #ffffff;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 2rem;
   }
   form label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: bold;
   }
   form input,
   form textarea {
     width: 100%;
     padding: 0.75rem;
     margin-bottom: 1.5rem;
     border: 1px solid #ccc;
     border-radius: var(--radius);
   }
   form button {
     padding: 0.75rem 1.5rem;
     border: none;
     cursor: pointer;
     font-family: 'Arsenal', sans-serif;
   }
   
   /* ==================================================
      Buttons
      ================================================== */
   .btn {
     display: inline-block;
     text-decoration: none;
     padding: 0.75rem 1.5rem;
     border-radius: var(--radius);
     font-weight: bold;
     transition: filter 0.2s ease;
   }
   .btn-primary {
     background-color: var(--primary-color);
     color: var(--btn-text);
   }
   .btn-primary:hover {
     filter: brightness(0.9);
   }
   .btn:not(.btn-primary) {
     background-color: var(--secondary-color);
     color: var(--primary-color);
   }
   .btn:not(.btn-primary):hover {
     filter: brightness(0.9);
   }
   
   /* ==================================================
      Footer
      ================================================== */
   footer#footer {
     background-color: var(--secondary-color);
     color: #fff;
   }
   footer#footer .container {
     padding-top: 2rem;
     padding-bottom: 2rem;
   }
   .footer-columns {
     display: grid;
     gap: 2rem;
     grid-template-columns: 1fr;
   }
   @media (min-width: 768px) {
     .footer-columns {
       grid-template-columns: repeat(3, 1fr);
     }
   }
   footer a {
     color: #fff;
     text-decoration: none;
   }
   footer a:hover {
     text-decoration: underline;
   }
   
   /* ==================================================
      Responsive Tweaks
      ================================================== */
   @media (max-width: 480px) {
     header#hero h1 {
       font-size: 2rem;
     }
     .btn {
       width: 100%;
       text-align: center;
     }
     .features {
       grid-template-columns: repeat(2, 1fr);
     }
   }