/* Dit is een algemeen css-bestand, dit zal in alle html werken */





@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #A3D1C6;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #8d7070;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #3D8D7A;

}

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

/* for easy changeing */
:root {
  --title-color: #3D8D7A;
  --text-color: white;
  --title-font: 'monserrat', sans-serif, bold;
  --text-font: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--title-font);
  color: var(--title-color);
}
p{
    font-family: var(--text-font);
}

.products{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.product-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 350px;
    height: 450px;
    transition: 0.3s;
}

.product-card h3{
    font-size: 1rem;
    color: black;
    text-decoration: underline;
}

.product-card p{
    font-size: 0.8rem;
    color: #828282;
    
}

.product-card .btn{
  color: black;
  text-decoration: none;
  font-weight: bolder;
  font-size: 1.4rem;
}




/* shaaaaaaaaaaaaaker */


/* Contact pagina ----------------------------------------------------------------------------------- */


/* Contact pagina ----------------------------------------------------------------------------------- */