/* 
Diep Bruin (basisaccent)
#6B4F3B → rgb(107, 79, 59)

Warme Cacao
#A2836E → rgb(162, 131, 110)

Zachte Caramel
#C9A782 → rgb(201, 167, 130)

Licht Beige (background)
#E6D5C3 → rgb(230, 213, 195)

Pastel Crème (highlight)
#F5EDE4 → rgb(245, 237, 228)
*/

:root{
  --font-script: "Caveat", "Kalam", "Comic Sans MS", "Segoe UI", cursive;
  --font-sans: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Times New Roman", Times, serif;
}

html, body {
    height: 100%;     /* let body take full viewport height */
    margin: 0;
    background-color: rgb(245, 237, 228);
}

body {
    display: flex;       /* use flexbox */
    flex-direction: column;
    font-family: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

header {
    background-color: #040506;
    color: white;
    text-align: center;
    padding: 10px;
}

.headerdiv {
    margin: 0;
    background-color: #040506;
    display: flex;          /* place children in a row */
    gap: 1rem; 
}

.headerdiv p {
    flex: 1;                /* make all columns equal width */
    margin: 0;              /* remove default p margins */
}

.logosearch {
    display: flex;
    align-items: center;      /* Verticaal centreren */
    justify-content: center;  /* Horizontaal centreren van de zoekbalk */
    position: relative;
    min-height: 60px;
    padding: 0;
    margin: 0;
    background-color: white;
    flex-wrap: wrap;
}

.logosearch img {
    position: absolute;
    left: 10px;
    top: 10px;             /* Afstand vanaf links */
    height: 130px; 
    z-index: 1;
}

.search-container {
    display: flex;               /* Align input and button horizontally */
    justify-content: center;     /* Center horizontally */
    align-items: center;         /* Center vertically */
    gap: 10px;                   /* Space between input and button */
    margin: 0px;
    flex-wrap: wrap;
}

.search-box {
    padding: 10px 15px;          /* Inside spacing */
    font-size: 16px;
    border: 2px solid #ebebeb;      /* Border style */
    background-color: #f3f3f3;
    flex: 1;                     /* Flexible width */
    min-width: 400px;            /* Minimum width */
}

.search-box:focus {
    border-color: #f3f3f3;       /* Highlight border on focus */
    outline: none;
}

.navbar {
    background-size: cover;      /* cover = fill the box */
    background-position: center; /* center the image */
    color: white;                /* text color */
    background-color: white;
    display: flex;               /* optional: center text */
    text-align: center;
    align-items: center;
    justify-content: center;
    transition-duration: 0.6s;
    position: sticky;
    padding-left: 150px;
    flex-wrap: wrap;
}

.navbar a {
    flex: 1;                /* make all columns equal width */
    margin: 0;
    height: 90px;
    text-decoration: none;  /* remove underline */
    font-family: "Nothing You Could Do", "Comic Sans MS", "Segoe UI", cursive;
    font-weight: lighter;
    font-size: larger;
    color: #040506;
    transition-duration: 0.6s;
    display: flex;              /* turn <a> into flexbox */
    justify-content: center;    /* horizontal center */
    align-items: center;   
} 

.navbar :hover {
    transition-duration: 0.6s;
    color: rgb(255, 255, 255);
    background-color: #040506;
}

.firstcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 200px;
    margin-right: 200px;
    min-height: 700px;
    background-color: rgb(201, 167, 130);
    padding: 0;
}

.firstcontainer > div {
    flex: 1;
    text-align: center;     /* center text inside */
    padding: 20px;
    box-sizing: border-box;
}

.tekstcontainerfirst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-align: center;
    width: fit-content;
    padding: 75px;
    font-family: "Nothing You Could Do", "Comic Sans MS", "Segoe UI", cursive;
    font-weight: lighter;
    font-size: 37px;
}

.firstcontainer img {
    height: 700px;
}

@media (max-width: 1420px) {
  .firstcontainer {
    margin: 0;              /* remove margins */
    width: 100%;            /* take full width */
  }
}

.welkom {
    flex-wrap: wrap;
    background-color: rgb(230, 213, 195);
    margin: 0;
    padding: 15px;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.Branches {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-align: center;
    margin-left: 200px;
    margin-right: 200px;
    border-right: 5px solid #d1d1d1;
    border-left: 5px solid #d1d1d1;
    background-color: white;
    box-shadow: 0px 7px 30px rgba(0,0,0,0.8);
    padding: 90px;
    gap: 100px
}


@media (max-width: 1420px) {
  .Branches {
    margin: 0;              /* remove margins */
    width: 100%;            /* take full width */
  }
}

.Keukengerei, .Meubels, .Sieraden, .Lijsten, .Woonaccessoires, .Spellen {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 400px;
    margin: 0;
    border-radius: 12px;
    background-size: cover;     /* image covers the whole div */
    background-position: center; /* center the image */
    background-repeat: no-repeat; /* don’t repeat */
    padding: 0px;
    transition: all 0.3s ease; /* smooth transition */
}

.bottomblurkeuken {
    background: url("Foto's/Logonewwhite.png") center bottom / cover no-repeat; /* takes the image from parent */
}

.bottomblurMeubel {
    background: url("Foto's/Logonewwhite.png") center bottom / cover no-repeat; /* takes the image from parent */
}

.bottomblurSieraden {
    background: url("Foto's/Logonewwhite.png") center bottom / cover no-repeat; /* takes the image from parent */
}

.bottomblurLijsten {
    background: url("Foto's/Logonewwhite.png") center bottom / cover no-repeat; /* takes the image from parent */
}

.bottomblurWoonaccessoires {
    background: url("Foto's/Logonewwhite.png") center bottom / cover no-repeat; /* takes the image from parent */
}

.bottomblurSpellen {
    background: url("Foto's/Logonewwhite.png") center bottom / cover no-repeat; /* takes the image from parent */
}

.bottomblurkeuken, .bottomblurMeubel, .bottomblurSieraden, .bottomblurLijsten, .bottomblurWoonaccessoires, .bottomblurSpellen {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    filter: blur(10px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
}

.Keukengerei:hover, .Meubels:hover, .Sieraden:hover, .Lijsten:hover, .Woonaccessoires:hover, .Spellen:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    transform: translate(-5px, -5px); /* move 5px left and 5px up */
}

.Keukengerei p, .Meubels p, .Sieraden p, .Lijsten p, .Woonaccessoires p, .Spellen p {
    position: absolute;
    bottom: -35px;         /* distance from bottom */
    left: 40px;           /* distance from left */
    color: #040506;
    font-family: "Nothing You Could Do", "Comic Sans MS", "Segoe UI", cursive;
    font-weight: lighter;
    font-size: 37px;
    text-decoration: none;
    color: white;
    font-size: 50px;
    text-shadow: 5px 5px 20px black;
}

.Keukengerei {
    background-image: url("Foto's/Logonewwhite.png");
}

.Meubels {
    background-image: url("Foto's/Logonewwhite.png");
}

.Sieraden {
    background-image: url("Foto's/Logonewwhite.png");
}

.Lijsten {
    background-image: url("Foto's/Logonewwhite.png");
}

.Woonaccessoires {
    background-image: url("Foto's/Logonewwhite.png");
}

.Spellen {
    background-image: url("Foto's/Logonewwhite.png");
}

footer {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: #040506;
    color: white;
    text-align: center;
    padding: 1rem;
    flex-wrap: wrap;
    margin: 0;
}

footer p {
    padding: 15px;
}