html {
    scroll-behavior: smooth;
  }
body {
    max-width: 1024px;
    padding-top: 50px;
    margin: auto;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;

}

h1, h2, h3, h4, h5, h6  {
    font-family: "Bitter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}


/**navigatie**/
#logo{
    width: 200px;
}

nav{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    /**background-color: #3f3f3f;**/
}

ul{
    list-style: none;
}

.icon{
    padding: 15px 25px;
    background-color: rgb(228, 228, 228);
    align-self: end;
    border-radius: 50px;
}

.icon a {
    color: black;
}

.icon a:hover {
    color: rgb(48, 15, 236);
}
.links{
    display: flex;

}

.links li{
    margin-right: 15px;
}

.links li a{
    text-decoration: none;
    color: #050c6e;
    font-weight: 600;
}

.links li a:hover{
    color: rgb(211, 58, 58);
    text-decoration: underline;
    text-underline-offset: 10px;
}

.nav-links{
    display: flex;
}

input{
    border: none;
}
input:focus{
    outline-width: 0;
}

form{
    border: 1px solid #3f3f3f;
    padding: 15px 25px;
    border-radius: 25px;
}
.searchbox{
    margin-left: 25px;
}

/** filter sectie**/

.filter-section{
    display: flex;
}

.date-select{
    margin-right: 15px;
    padding: 10px 15px;
    border: 1px solid black;
    border-radius: 25px;
    background-color: white;
}

.date-select:hover{
    cursor: pointer;
}

.margin-rechts{
    margin-right: 15px;
}

.filter-wrapper{
    display: flex;
    justify-content: space-between;
    
}

/**tours sectie**/

.cards-wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 25px;
    gap: 15px;

}

.tour-info{
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image{
    min-height: 200px;
    background-repeat: no-repeat;
    border-radius: 10px;
    background-size: cover;
    cursor: pointer;
}

.card-info{

background-color: red;
color: white;
font-weight: 600;
padding: 5px 10px;
border-radius: 50px;
}

.card-info:hover{
    cursor: pointer;
}

.sterren{
    display: flex;
    align-items: center;
    flex-wrap: no-wrap;
    font-size: 0.8em;
    font-weight: 600;
}

.sterren img{
    max-width: 20px;
}

.prijs{
    font-size: 1.2em;
    font-weight: 800;
}

.button-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}
.laad_meer{
    background-color: transparent;   
    padding: 15px 25px;
    border-radius: 50px;
    text-align: center;
    margin: 25px auto;
    cursor: pointer;
}

/**footer**/

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background-color: #201f3f;
    color: white;
    font-weight: 600;
}

footer a {
    color: white;
}