* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --hout: #3B2418;
    --cognac: #8A5A36;
    --goud: #B08A4E;
    --creme: #F5EFE6;
    --donker: #24150E;
    --wit: #ffffff;

}


body {

    font-family: 'Inter', sans-serif;
    background: var(--creme);
    color: var(--hout);
    line-height: 1.7;
	animation: paginaStart 1s ease;
}

@keyframes paginaStart{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

h1,
h2,
h3 {

    font-family: 'Cormorant Garamond', serif;

}


a {

    text-decoration: none;
    color: inherit;

}



/* =====================
   NAVIGATIE
===================== */


.header {

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:1000;

    transition:.5s;

}


.header.scrolled {

    background:var(--hout);

    box-shadow:
    0 5px 25px rgba(0,0,0,.25);

}


.navbar {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 7%;

    background:rgba(59,36,24,.35);

    -webkit-backdrop-filter: blur(8px);
	
	backdrop-filter: blur(8px);

    color:white;

}


.logo h1 {

    font-size:clamp(24px, 5vw, 36px);

    letter-spacing:1px;

    color:#ffffff;

}




.menu {

    display: flex;
    gap: 30px;

    list-style: none;

}


.menu a {

    color: white;
    transition: .3s;

}


.menu a:hover {

    color: var(--goud);

}



/* =====================
   KNOPPEN
===================== */


.button {

    background:var(--goud);

    color:white;

    padding:15px 35px;

    border-radius:2px;

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:13px;

    transition:.4s;

}


.button:hover {

    background:#8A5A36;

    transform:translateY(-3px);

}



.button-outline {

    border:1px solid white;

    padding:14px 32px;

    color:white;

    display:inline-block;

    transition:.4s;

}


.button-outline:hover {

    background:white;
    color:var(--hout);

}
.formulier-knop {

    display:inline-block;

    width:auto;

    margin-top:20px;

    padding:16px 40px;

    font-size:14px;

    cursor:pointer;

}



/* =====================
   HERO
===================== */


.hero {

    height:100vh;

    background-image:
    url("../images/hero.jpg");

    background-size:cover;
    background-position:center;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    color:white;

}



.hero-overlay {

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)
    );

}



.hero-content {

    position:relative;
    z-index:2;

    max-width:900px;

}



.subtitle {

    letter-spacing:5px;

    color:var(--goud);

    text-transform:uppercase;

}



.hero h2 {

    font-size:80px;

    line-height:1.1;

    margin:25px 0;

}



.hero-content p {

    font-size:22px;

}



.hero-buttons {

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;

}



/* =====================
   INTRODUCTIE
===================== */


.intro {

    padding:50px 10%;

    text-align:center;

}



.intro-content {

    max-width:850px;

    margin:auto;

}



.intro h2 {

    font-size:55px;

    margin-bottom:35px;

}



.intro p {

    font-size:19px;

    margin-bottom:20px;

}



/* =====================
   FOOTER
===================== */


.footer {

    border-top:1px solid rgba(176,138,78,.4);

	background:var(--donker);

    color:white;

    text-align:center;

    padding:20px 20px;

}



.footer h2 {

    font-size:40px;

    color:var(--goud);

}



.footer p {

    margin:20px 0;

}

.footer small {

    display:block;

    margin-top:30px;

    color:#c7aa78;

}
.footer apps {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	
}
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  background-color: #25D366;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.whatsapp-float:active {
  transform: scale(1.05);
}

/* =====================
   ANIMATIE
===================== */


.hero-content {

    animation: verschijnen 1.5s ease;

}



@keyframes verschijnen {

    from {

        opacity:0;
        transform:translateY(40px);

    }


    to {

        opacity:1;
        transform:translateY(0);

    }

}



/* =====================
   WAARDEN
===================== */


.waarden {

    background:var(--hout);

    color:white;

    padding:100px 8%;

    text-align:center;

}


.waarden h2 {

    font-size:55px;

    color:var(--goud);

    margin-bottom:60px;

}


.waarden-container {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

}



.waarde h3 {

    font-size:35px;

    color:var(--goud);

    margin-bottom:15px;

}





/* =====================
   INSPIRATIE
===================== */


.inspiratie {

    padding:100px 8%;

    text-align:center;

}



.inspiratie h2 {

    font-size:55px;

    margin-bottom:50px;

}



.galerij {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.galerij img {

    width:100%;

    height:350px;

    object-fit:cover;

    transition:.5s;

}



.galerij img:hover {

    transform:scale(1.04);

}





/* =====================
   AFSPRAAK
===================== */


.afspraak {

    background:

    linear-gradient(
    rgba(59,36,24,.85),
    rgba(59,36,24,.85)
    ),

    url("../images/wijnkelder.jpg");


    background-size:cover;

    background-position:center;

    color:white;

    padding:120px 10%;

    text-align:center;

}



.afspraak h2 {

    font-size:60px;

    color:var(--goud);

}



.afspraak p {

    max-width:700px;

    margin:30px auto;

    font-size:20px;

}
/* =====================
   WIJNTONNEN PAGINA
===================== */


.collectie {

    padding:100px 8%;

    text-align:center;

}



.collectie h2 {

    font-size:55px;

    margin-bottom:60px;

}



.collectie-container {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}



.vat-card {

    background:white;

    padding-bottom:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

}



.vat-card img {

    width:100%;

    height:320px;

    object-fit:cover;

}



.vat-card h3 {

    font-size:34px;

    color:var(--cognac);

    padding:25px 20px 10px;

}



.vat-card p {

    padding:0 25px;

}



.details-section {

    background:var(--hout);

    color:white;

    padding:100px 8%;

    text-align:center;

}



.details-section h2 {

    color:var(--goud);

    font-size:55px;

    margin-bottom:50px;

}



.details-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));

    gap:40px;

}



.details-grid h3 {

    color:var(--goud);

    font-size:30px;

}
/* =====================
   OVER ONS
===================== */


.over-ons-hero {

    background-image:
    url("../images/wijnkelder.jpg");

}



.verhaal {

    padding:60px 8%;

}



.verhaal-content {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:60px;

    align-items:center;

}



.verhaal-image img {

    width:100%;

    box-shadow:
    0 15px 40px rgba(0,0,0,.2);

}



.verhaal-text h2 {

    font-size:55px;

    margin-bottom:30px;

}



.verhaal-text p {

    font-size:19px;

    margin-bottom:20px;

}



.visie {

    background:var(--hout);

    color:white;

    text-align:center;

    padding:100px 10%;

}



.visie h2 {

    color:var(--goud);

    font-size:55px;

}



.visie p {

    max-width:800px;

    margin:30px auto 0;

    font-size:20px;

}



.quote {

    padding:100px 10%;

    text-align:center;

    background:#24150E;

    color:white;

}



.quote h2 {

    color:var(--goud);

    font-size:60px;

}
/* =====================
   AFSPRAAK PAGINA
===================== */


.afspraak-hero {

    background-image:
    url("../images/wijnkelder.jpg");

}



.afspraak-intro {

    padding:100px 10%;

    text-align:center;

}



.afspraak-intro h2 {

    font-size:55px;

    margin-bottom:30px;

}



.afspraak-intro p {

    max-width:800px;

    margin:20px auto;

    font-size:19px;

}




.formulier {

    background:var(--hout);

    color:white;

    padding:30px 10%;

    text-align:center;

}



.formulier h2 {

    color:var(--goud);

    font-size:55px;

    margin-bottom:50px;

}



.formulier form {

    max-width:600px;

    margin:auto;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.form-group {

    text-align:left;

    margin-bottom:25px;

}



.form-group label {

    display:block;

    margin-bottom:8px;

}



.form-group input,
.form-group textarea,
.form-group select{

    width:100%;

    padding:16px;

    border:1px solid rgba(176,138,78,.35);

    border-radius:4px;

    background:#fff;

    font-size:16px;

    transition:.35s;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

    outline:none;

    border-color:var(--goud);

    box-shadow:0 0 12px rgba(176,138,78,.3);

}

.form-group textarea {

    height:150px;

}



.afspraak-extra {

    padding:100px 10%;

    text-align:center;

}



.afspraak-extra h2 {

    font-size:50px;

    color:var(--cognac);

}
/* =====================
   CONTACT PAGINA
===================== */


.contact-hero {

    background-image:
    url("../images/hero.jpg");

}



.contact {

    padding:100px 8%;

}

.contact h2 {

    font-size:55px;

    color:var(--goud);

    margin-bottom:60px;
	text-align:center;

}

.contact-container {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}

p.home {
	text-align:center;
}

.contact-box {

    background:white;

    padding:40px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.1);

}



.contact-box h2,
.contact-box h3 {

    color:var(--cognac);

    font-size:35px;

    margin-bottom:20px;

}




.contact-call {

    background:var(--hout);

    color:white;

    padding:100px 10%;

    text-align:center;

}



.contact-call h2 {

    color:var(--goud);

    font-size:55px;

}



.contact-call p {

    max-width:700px;

    margin:30px auto;

    font-size:20px;

}
/* =====================
   SCROLL ANIMATIES
===================== */


.verschijnen {

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity 1s ease,
    transform 1s ease;

}



.zichtbaar {

    opacity:1;

    transform:translateY(0);

}
/* Gouden sierlijn */

h2::after {

    content:"";

    display:block;

    width:80px;

    height:2px;

    background:var(--goud);

    margin:25px auto;

}
img {

    transition:
    transform .8s ease;

}


img:hover {

    transform:scale(1.03);

}
/* Verberg menu op mobiel */
.menu-knop {

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:30px;

}


/* =====================
   MOBIEL
===================== */

@media(max-width:900px){


.menu-knop {

    display:block;

}


.menu {

    display:none;
	 z-index:999;

}


.menu.open {

    display:flex;

    flex-direction:column;

    background:var(--hout);

    padding:30px;

    position:absolute;

    top:90px;

    right:20px;

}
.navbar {
    flex-direction:row;
	padding:20px;
	gap:20px;
	position: relative;
}

.button {
    display:none;
}
.formulier-knop {
	display:inline-block;

        width:100%;

        padding:18px;

        font-size:16px;

    }


.menu-knop {
    display:block;
}

.navbar::after {

    content:"";

    position:absolute;

    bottom:0;

    left:7%;

    right:7%;

    height:1px;

    background:var(--goud);

    opacity:.7;

}
.hero h2 {

    font-size:45px;

}


.hero-buttons {

    flex-direction:column;

}
.form-row{

    grid-template-columns:1fr;

}
.logo h1{
    font-size:clamp(24px,5vw,36px);
}

.logo h1 span{
     font-size:clamp(24px,5vw,36px);
}
.logo .sub {
    display: block;
    font-size: 0.42em;
    letter-spacing: 0.15em;
    color: #e5cfa5;
}
}




/* =====================
   LOGO
===================== */


.logo {

    display:flex;

    align-items:center;

    gap:15px;

}


.logo-icon {

    font-size:42px;

    color:var(--goud);

}


.logo span {

    font-size:13px;
    color:#e5cfa5;
	letter-spacing:2px;
}

.logo h1 span{
     font-size:clamp(24px,5vw,36px);
}
.logo span.sub {
	
	letter-spacing:4px;
}


/* =====================
   PAGINA LADEN
===================== */

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:30px 0;

    color:white;

}

.checkbox input{

    width:auto;

    margin-top:5px;

}