/* Start custom CSS for html, class: .elementor-element-6031329 */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');

.dg-hoveniers2 {
  --brand-yellow: #fab702;
  --brand-black: #111111;
  --green-deep: #1e3b2b;
  --green-mid: #2e5f44;
  --ink: #111111;
  --container: 1220px;
  --gutter: clamp(16px, 3vw, 34px);
  --ring: 0 0 0 4px rgba(250, 183, 2, 0.35);
  --shadow-soft: 0 16px 38px rgba(17, 17, 17, 0.11);
  --shadow: 0 24px 56px rgba(17, 17, 17, 0.16);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: transparent;
  line-height: 1.55;
  direction: ltr;
  text-align: left;
}

.dg-hoveniers2,
.dg-hoveniers2 * {
  box-sizing: border-box;
}

.dg-hoveniers2 h1,
.dg-hoveniers2 h2,
.dg-hoveniers2 h3,
.dg-hoveniers2 p {
  margin: 0;
}

.dg-hoveniers2 img {
  max-width: 100%;
  display: block;
  height: auto;
}

.dg-hoveniers2 a {
  color: inherit;
  text-decoration: none;
}

.dg-hoveniers2 .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.dg-hoveniers2 .skip-link {
  position: absolute;
  left: -999px;
  top: 12px;
  background: var(--brand-black);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  z-index: 9999;
}

.dg-hoveniers2 .skip-link:focus {
  left: 12px;
  outline: none;
  box-shadow: var(--ring);
}

.dg-hoveniers2 .hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(1250px 680px at 14% 10%, rgba(250, 183, 2, 0.2), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f6f8f6 100%);
}

.dg-hoveniers2 .hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, rgba(12, 27, 20, 0.86) 0%, rgba(24, 56, 41, 0.62) 56%, rgba(24, 56, 41, 0.24) 100%),
    url("https://degierbv.nl/wp-content/uploads/2024/07/hov3-1024x768.jpeg") center/cover no-repeat;
  transform: scale(1.03);
  filter: saturate(0.96) contrast(1.04);
}

.dg-hoveniers2 .hero__content {
  position: relative;
  z-index: 1;
  max-width: 940px;
  color: #fff;
  padding-top: clamp(88px, 10vw, 150px);
  padding-bottom: clamp(64px, 8vw, 114px);
}

.dg-hoveniers2 .kicker {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.84);
}

.dg-hoveniers2 .kicker--dark {
  color: rgba(17, 17, 17, 0.72);
}

.dg-hoveniers2 .hero__title {
  margin-top: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.055em;
  line-height: 0.95;
  font-size: clamp(38px, 5.5vw, 78px);
  color: #fff;
}

.dg-hoveniers2 .hero__title-accent {
  display: inline-block;
  color: var(--brand-yellow);
  text-shadow: 0 18px 42px rgba(250, 183, 2, 0.18);
}

.dg-hoveniers2 .hero__lead {
  margin-top: 14px;
  max-width: 72ch;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
  font-size: 16px;
}

.dg-hoveniers2 .hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.dg-hoveniers2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.dg-hoveniers2 .btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.dg-hoveniers2 .btn--primary {
  background: var(--brand-yellow);
  color: var(--brand-black);
  box-shadow: 0 18px 38px rgba(250, 183, 2, 0.24);
}

.dg-hoveniers2 .btn--primary:hover {
  transform: translateY(-1px);
  filter: brightness(0.99);
}

.dg-hoveniers2 .btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.dg-hoveniers2 .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.dg-hoveniers2 .btn--dark {
  background: var(--brand-black);
  color: #fff;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.18);
}

.dg-hoveniers2 .btn--dark:hover {
  transform: translateY(-1px);
}

.dg-hoveniers2 .btn--outline {
  background: transparent;
  border-color: rgba(17, 17, 17, 0.48);
  color: var(--brand-black);
}

.dg-hoveniers2 .btn--outline:hover {
  background: rgba(17, 17, 17, 0.06);
  transform: translateY(-1px);
}

.dg-hoveniers2 .hero__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.dg-hoveniers2 .meta {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 800;
  font-size: 12px;
}

.dg-hoveniers2 .section {
  padding: 68px 0;
}

.dg-hoveniers2 .section--intro {
  padding-bottom: 24px;
}

.dg-hoveniers2 .intro {
  max-width: 980px;
}

.dg-hoveniers2 .h2 {
  margin-top: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1.01;
  font-size: clamp(30px, 3.2vw, 46px);
  color: var(--brand-black);
}

.dg-hoveniers2 .h2--light {
  color: #fff;
}

.dg-hoveniers2 .lead {
  margin-top: 12px;
  color: rgba(17, 17, 17, 0.7);
  font-weight: 600;
  max-width: 72ch;
}

.dg-hoveniers2 .services {
  display: grid;
  gap: 18px;
}

.dg-hoveniers2 .services > :not(.service) {
  display: none;
}

.dg-hoveniers2 .service {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dg-hoveniers2 .service:hover {
  box-shadow: var(--shadow);
  border-color: rgba(46, 95, 68, 0.34);
}

.dg-hoveniers2 .service--ontwerp {
  border-left: 4px solid var(--brand-yellow);
}

.dg-hoveniers2 .service--ontwerp:hover {
  transform: translateY(-4px) scale(1.005);
}

.dg-hoveniers2 .service--aanleg {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
}

.dg-hoveniers2 .service--aanleg:hover {
  transform: translateX(4px);
}

.dg-hoveniers2 .service--onderhoud {
  border-top: 4px solid var(--brand-yellow);
}

.dg-hoveniers2 .service--onderhoud:hover {
  transform: translateY(-2px) rotate(-0.18deg);
}

.dg-hoveniers2 .service--reverse .service__copy {
  order: 2;
}

.dg-hoveniers2 .service--reverse .service__media {
  order: 1;
}

.dg-hoveniers2 .service__copy {
  padding: clamp(20px, 3.5vw, 34px);
  align-self: center;
}

.dg-hoveniers2 .service__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-yellow);
}

.dg-hoveniers2 .service__title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-size: clamp(25px, 2.4vw, 36px);
  color: var(--brand-black);
}

.dg-hoveniers2 .service__text {
  margin-top: 10px;
  color: rgba(17, 17, 17, 0.68);
  font-weight: 600;
  font-size: 14px;
}

.dg-hoveniers2 .service__media {
  min-height: 320px;
}

.dg-hoveniers2 .service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dg-hoveniers2 .section--dark {
  background: radial-gradient(1200px 700px at 12% 0%, rgba(250, 183, 2, 0.14), transparent 55%),
    linear-gradient(180deg, var(--green-deep) 0%, var(--green-mid) 100%);
  color: #fff;
}

.dg-hoveniers2 .section__head {
  margin-bottom: 18px;
}

.dg-hoveniers2 .proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dg-hoveniers2 .proof {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 16px;
}

.dg-hoveniers2 .proof h3 {
  color: var(--brand-yellow);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.dg-hoveniers2 .proof p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
}

.dg-hoveniers2 .section--cta {
  padding-top: 54px;
}

.dg-hoveniers2 .cta {
  background: var(--brand-yellow);
  border-radius: 32px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 26px 60px rgba(17, 17, 17, 0.16);
}

.dg-hoveniers2 .cta__title {
  margin-top: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1.02;
  font-size: clamp(22px, 2.6vw, 36px);
  color: #000;
}

.dg-hoveniers2 .cta__text {
  margin-top: 8px;
  color: rgba(17, 17, 17, 0.72);
  font-weight: 700;
}

.dg-hoveniers2 .cta__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .dg-hoveniers2 .service {
    grid-template-columns: 1fr;
  }

  .dg-hoveniers2 .service__copy,
  .dg-hoveniers2 .service--reverse .service__copy {
    order: 2;
  }

  .dg-hoveniers2 .service__media,
  .dg-hoveniers2 .service--reverse .service__media {
    order: 1;
  }

  .dg-hoveniers2 .proof-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .dg-hoveniers2 .hero {
    min-height: 530px;
  }

  .dg-hoveniers2 .hero__lead {
    font-size: 15px;
  }

  .dg-hoveniers2 .section {
    padding: 54px 0;
  }

  .dg-hoveniers2 .proof-grid {
    grid-template-columns: 1fr;
  }

  .dg-hoveniers2 .cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .dg-hoveniers2 .service__media {
    min-height: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dg-hoveniers2 .btn,
  .dg-hoveniers2 .service {
    transition: none;
  }

  .dg-hoveniers2 .btn:hover,
  .dg-hoveniers2 .service:hover {
    transform: none;
  }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-1c3b292 */<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agrarisch Loonwerk | De Gier BV</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            yellow: '#fab702',
                            black: '#111111',
                            dark: '#1a1a1a',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');
        body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
        
        .agrarisch-hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                        url('https://images.unsplash.com/photo-1594145070029-79a61771962a?auto=format&fit=crop&q=80&w=2000') no-repeat center center/cover;
        }

        .feature-card:hover i {
            transform: scale(1.1) rotate(5deg);
        }
    </style>
</head>
<body class="bg-white text-brand-black">

    <!-- Navigatie (Versimpeld voor deze pagina) -->
    <nav class="fixed w-full z-50 bg-white/95 border-b border-brand-black/5 backdrop-blur-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-20">
                <div class="flex items-center">
                    <span class="text-2xl font-extrabold tracking-tighter text-brand-black uppercase">DE GIER <span class="text-brand-yellow">BV</span></span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="font-medium text-gray-600 hover:text-brand-black transition">Home</a>
                    <a href="over-ons-redesign.html" class="font-medium text-gray-600 hover:text-brand-black transition">Over ons</a>
                    <a href="#" class="font-bold text-brand-black border-b-2 border-brand-yellow">Agrarisch</a>
                    <a href="#contact" class="px-5 py-2.5 bg-brand-yellow text-brand-black rounded-lg font-bold hover:bg-yellow-500 transition duration-300">Contact</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="agrarisch-hero h-[70vh] flex items-center relative overflow-hidden pt-20">
        <div class="max-w-7xl mx-auto px-4 relative z-10 w-full text-center lg:text-left">
            <h1 class="text-brand-yellow font-bold tracking-[0.3em] uppercase text-sm mb-4">Onze Wortels, Uw Rendement</h1>
            <h2 class="text-5xl lg:text-8xl font-black text-white uppercase tracking-tighter leading-none mb-6">
                Agrarisch <br><span class="text-brand-yellow">Loonwerk</span>
            </h2>
            <p class="text-white/80 text-lg max-w-2xl font-medium">Al meer dan 60 jaar de vertrouwde partner voor de agrarische ondernemer. Kwaliteit, capaciteit en vakmanschap op het moment dat het telt.</p>
        </div>
        <!-- Scroll indicator -->
        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-white animate-bounce hidden lg:block">
            <i class="fas fa-chevron-down text-2xl"></i>
        </div>
    </section>

    <!-- Kernwaarden / USP's -->
    <section class="py-12 bg-brand-yellow">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="flex items-center gap-5">
                    <div class="bg-brand-black text-brand-yellow w-14 h-14 rounded-full flex items-center justify-center shrink-0 shadow-lg">
                        <i class="fas fa-clock text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-black uppercase tracking-tight text-brand-black leading-none mb-1">24/7 Service</h4>
                        <p class="text-brand-black/70 text-xs font-bold uppercase tracking-wider">Inzetbaar wanneer nodig</p>
                    </div>
                </div>
                <div class="flex items-center gap-5">
                    <div class="bg-brand-black text-brand-yellow w-14 h-14 rounded-full flex items-center justify-center shrink-0 shadow-lg">
                        <i class="fas fa-satellite-dish text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-black uppercase tracking-tight text-brand-black leading-none mb-1">GPS Precisie</h4>
                        <p class="text-brand-black/70 text-xs font-bold uppercase tracking-wider">Modern machinepark</p>
                    </div>
                </div>
                <div class="flex items-center gap-5">
                    <div class="bg-brand-black text-brand-yellow w-14 h-14 rounded-full flex items-center justify-center shrink-0 shadow-lg">
                        <i class="fas fa-users text-xl"></i>
                    </div>
                    <div>
                        <h4 class="font-black uppercase tracking-tight text-brand-black leading-none mb-1">Vakmanschap</h4>
                        <p class="text-brand-black/70 text-xs font-bold uppercase tracking-wider">Ervaren loonwerkers</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introductie Tekst -->
    <section class="py-24 bg-white">
        <div class="max-w-4xl mx-auto px-4 text-center">
            <h3 class="text-brand-yellow font-bold tracking-widest uppercase text-sm mb-3">Partner van de Boer</h3>
            <h2 class="text-4xl lg:text-5xl font-black uppercase tracking-tighter mb-10 text-brand-black">Samen voor een optimale oogst</h2>
            <div class="prose prose-lg mx-auto text-gray-600 leading-relaxed space-y-6">
                <p>
                    Loonbedrijf De Gier BV is diep geworteld in de regio Benschop. Wij begrijpen dat de agrarische sector nooit stilstaat en dat elk seizoen zijn eigen uitdagingen kent. Of het nu gaat om graslandonderhoud, maïsoogst of specialistische bemesting; wij staan voor u klaar.
                </p>
                <p class="font-semibold text-brand-black">
                    Met ons brede assortiment aan modern materieel en diepgaande kennis van zaken, streven wij naar een maximaal rendement voor uw bedrijf.
                </p>
            </div>
        </div>
    </section>

    <!-- Diensten Grid -->
    <section class="py-24 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                
                <!-- Grasland -->
                <div class="feature-card bg-white p-10 rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-2xl transition-all group">
                    <div class="w-20 h-20 bg-gray-50 text-brand-yellow rounded-3xl flex items-center justify-center mb-8 group-hover:bg-brand-yellow group-hover:text-brand-black transition-colors">
                        <i class="fas fa-seedling text-3xl transition-transform"></i>
                    </div>
                    <h3 class="text-2xl font-black uppercase tracking-tight mb-4">Grasland & Voederwinning</h3>
                    <p class="text-gray-500 text-sm leading-relaxed mb-6">
                        Maaien, schudden, harken en inkuilen. Wij beschikken over een hoge capaciteit voor een snelle en kwalitatieve voederwinning.
                    </p>
                    <ul class="space-y-3 text-xs font-black uppercase tracking-widest text-brand-black/40">
                        <li class="flex items-center gap-3"><i class="fas fa-chevron-right text-[8px] text-brand-yellow"></i> Grootpakpersen</li>
                        <li class="flex items-center gap-3"><i class="fas fa-chevron-right text-[8px] text-brand-yellow"></i> Hakselen & Inkuilen</li>
                    </ul>
                </div>

                <!-- Maïs -->
                <div class="feature-card bg-white p-10 rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-2xl transition-all group">
                    <div class="w-20 h-20 bg-gray-50 text-brand-yellow rounded-3xl flex items-center justify-center mb-8 group-hover:bg-brand-yellow group-hover:text-brand-black transition-colors">
                        <i class="fas fa-leaf text-3xl transition-transform"></i>
                    </div>
                    <h3 class="text-2xl font-black uppercase tracking-tight mb-4">Maïs Oogsten & Zaaien</h3>
                    <p class="text-gray-500 text-sm leading-relaxed mb-6">
                        Van precisie-zaaien met GPS tot de complete oogst. Wij zorgen voor een strak resultaat en minimale bodemverdichting.
                    </p>
                    <ul class="space-y-3 text-xs font-black uppercase tracking-widest text-brand-black/40">
                        <li class="flex items-center gap-3"><i class="fas fa-chevron-right text-[8px] text-brand-yellow"></i> GPS gestuurd zaaien</li>
                        <li class="flex items-center gap-3"><i class="fas fa-chevron-right text-[8px] text-brand-yellow"></i> Modern hakselmaterieel</li>
                    </ul>
                </div>

                <!-- Bemesting -->
                <div class="feature-card bg-white p-10 rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-2xl transition-all group">
                    <div class="w-20 h-20 bg-gray-50 text-brand-yellow rounded-3xl flex items-center justify-center mb-8 group-hover:bg-brand-yellow group-hover:text-brand-black transition-colors">
                        <i class="fas fa-flask text-3xl transition-transform"></i>
                    </div>
                    <h3 class="text-2xl font-black uppercase tracking-tight mb-4">Bemesting & Transport</h3>
                    <p class="text-gray-500 text-sm leading-relaxed mb-6">
                        Zodenbemesting, bouwlandinjectie en sleepslangbemesting. Efficiënt en volgens de laatste milieu-normen.
                    </p>
                    <ul class="space-y-3 text-xs font-black uppercase tracking-widest text-brand-black/40">
                        <li class="flex items-center gap-3"><i class="fas fa-chevron-right text-[8px] text-brand-yellow"></i> Sleepslangbemesting</li>
                        <li class="flex items-center gap-3"><i class="fas fa-chevron-right text-[8px] text-brand-yellow"></i> Mestdistributie</li>
                    </ul>
                </div>

            </div>
        </div>
    </section>

    <!-- Seizoens-sectie -->
    <section class="py-24 bg-brand-black text-white relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 relative z-10">
            <div class="flex flex-col lg:flex-row items-center gap-16">
                <div class="lg:w-1/2">
                    <h2 class="text-brand-yellow font-bold tracking-widest uppercase text-sm mb-3">Altijd in beweging</h2>
                    <h3 class="text-4xl lg:text-5xl font-black uppercase tracking-tighter mb-8 leading-tight">Jaarrond inzetbaar in het groene hart</h3>
                    <p class="text-gray-400 text-lg mb-10">Of het nu de hectiek van de voorjaarsbemesting is of het precisiewerk van het slootonderhoud in de winter; De Gier BV is uw constante factor in een veranderlijk landschap.</p>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
                        <div class="border-l-2 border-brand-yellow pl-6">
                            <h4 class="font-black uppercase text-brand-yellow mb-2">Voorjaar</h4>
                            <p class="text-xs text-gray-500 font-bold uppercase tracking-wider leading-relaxed">Bemesting, grondbewerking en zaaiwerkzaamheden.</p>
                        </div>
                        <div class="border-l-2 border-brand-yellow pl-6">
                            <h4 class="font-black uppercase text-brand-yellow mb-2">Zomer</h4>
                            <p class="text-xs text-gray-500 font-bold uppercase tracking-wider leading-relaxed">Hooibouw, voederwinning en gewasbescherming.</p>
                        </div>
                        <div class="border-l-2 border-brand-yellow pl-6">
                            <h4 class="font-black uppercase text-brand-yellow mb-2">Najaar</h4>
                            <p class="text-xs text-gray-500 font-bold uppercase tracking-wider leading-relaxed">Maïsoogst, laatste snedes en landwinterklaar maken.</p>
                        </div>
                        <div class="border-l-2 border-brand-yellow pl-6">
                            <h4 class="font-black uppercase text-brand-yellow mb-2">Winter</h4>
                            <p class="text-xs text-gray-500 font-bold uppercase tracking-wider leading-relaxed">Slootonderhoud, transport en materieelrevisie.</p>
                        </div>
                    </div>
                </div>
                <div class="lg:w-1/2">
                    <div class="relative rounded-[3rem] overflow-hidden shadow-2xl border-4 border-brand-yellow/20">
                        <img src="https://images.unsplash.com/photo-1592982537447-7440770cbfc9?auto=format&fit=crop&q=80&w=1000" alt="Loonwerk in actie" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-700">
                        <div class="absolute inset-0 bg-brand-yellow/10 pointer-events-none"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section id="contact" class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="bg-brand-yellow rounded-[4rem] p-12 lg:p-24 text-center relative overflow-hidden shadow-2xl">
                <!-- Decoratieve tractor bandenspoor (SVG of iconen op achtergrond) -->
                <div class="absolute top-0 left-0 w-full h-full opacity-5 pointer-events-none">
                    <i class="fas fa-tractor text-[20rem] absolute -bottom-20 -right-20 rotate-12"></i>
                </div>
                
                <h2 class="text-4xl lg:text-7xl font-black text-brand-black uppercase tracking-tighter mb-8 leading-none relative z-10">
                    Klaar voor de <br><span class="italic underline decoration-brand-black decoration-8 underline-offset-8">volgende oogst?</span>
                </h2>
                <p class="text-brand-black/70 font-bold uppercase tracking-widest mb-12 relative z-10">Plan vandaag nog uw werkzaamheden in of vraag om advies.</p>
                
                <div class="flex flex-col sm:flex-row justify-center gap-6 relative z-10">
                    <a href="tel:0306882273" class="px-12 py-5 bg-brand-black text-white rounded-2xl font-black uppercase tracking-widest hover:scale-105 transition-all shadow-xl">
                        Bel Direct: 030-6882273
                    </a>
                    <a href="#" class="px-12 py-5 border-4 border-brand-black text-brand-black rounded-2xl font-black uppercase tracking-widest hover:bg-brand-black hover:text-white transition-all">
                        Vraag Offerte aan
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="py-12 bg-white border-t border-gray-100 text-center">
        <p class="text-brand-black font-black text-xl mb-4 tracking-tighter uppercase">DE GIER <span class="text-brand-yellow">BV</span></p>
        <p class="text-[10px] uppercase tracking-[0.3em] font-bold text-gray-400">&copy; 2024 Loonbedrijf De Gier BV - Benschop</p>
    </footer>

</body>
</html>/* End custom CSS */