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

:root{
    --primary-dark: #c6bfba;
    --primary:  #e7dfd8; /*#5E98F0*/
    --secondary: #a65d59;
    --secondary-dark: #a7443e;
    /* --secondary: #de4969;
    --secondary-dark: #c43756; */
    --star-yellow: #FFD430;
    --white: #FFFFFF;
    --black: #18191B;
    --light-gray: #efefef;
    --off-white: #F3F3F3;
    --gray: #a7aabd;
    --brown: #bfa5a7;

    --font-primary: "Oswald", system-ui;;
    --font-normal: "Cormorant Garamond", sans-serif;
}


h1, h2, h3, h4{
    font-family: var(--font-primary) !important;
    font-weight: 100;
    color: var(--black);
}
p, a, button, input, select, textarea, span, label, ul, li{
    font-family: var(--font-normal);
    color: var(--black);
    text-decoration: none;
}

p, li{
    font-size: 1.2em;
}

ul{
    margin-left: 1em;
}

h1{
    font-size: 4em;
}
h2{
    font-size: 2em;
}
h3{
    font-size: 1.7em;
}
h4{
    font-size: 1.5em;
}

.mt-8{
    margin-top: 8px;
}
.mt-16{
    margin-top: 16px;
}
.mt-32{
    margin-top: 32px;
}
.gap-8{
    gap: 8px;
}
.gap-16{
    gap: 16px;
}
.gap-32{
    gap: 32px;
}
hr.def{
    margin: 0 auto;
    width: 100px;
    background-color: var(--primary);
    color: var(--primary);
    border-color: var(--primary);
}

hr.def_light{
    margin: 0 auto;
    width: 100px;
    background-color: var(--secondary);
    color: var(--secondary);
    border-color: var(--secondary);
}

.fa-arrow-right{
    color: var(--primary);
    margin-left: 8px;
}

.flex{
    display: flex;
}

.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}


.flex-wrap{
    flex-wrap: wrap;
}

.def-padding{
    padding: 64px 16px
}

.w-100{
    width: 100%;
}

.inner-1280{
    max-width: 1280px;
    width: 100%;
}
.inner-1100{
    max-width: 1100px;
    width: 100%;
}
.inner-800{
    max-width: 800px;
    width: 100%;
}
.more_btn, .more_btn *{
    cursor: pointer;
    transition: all 100ms ease-in-out;
}
    .more_btn span{
        font-size: 1.1em;
    }
    .more_btn:hover i{
        margin-left: 12px;
    }
    div.double_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
.primary_btn{
    min-width: 150px;
    padding: 8px 16px;
    background-color: var(--secondary);
    color: var(--white);
    border: none;
    border: 2px solid var(--secondary);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    font-size: 1em;
    font-family: var(--font-primary);
}
    .primary_btn:hover{
        opacity: 0.8;
    }
    .primary_btn_order i{
        margin-right: 10px;
    }
.add_to_cart_btn{
    padding: 4px 6px;
    background-color: var(--secondary);
    color: var(--white);
    border: none;
    border: 2px solid var(--secondary);
    outline: none;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    font-style: italic;
}
    .add_to_cart_btn:hover{
        opacity: 0.8;
    }
.add_to_cart_btn_large{
    padding: 12px 15px;
    background-color: var(--secondary);
    color: var(--white);
    border: none;
    border: 2px solid var(--secondary);
    outline: none;
    cursor: pointer;
    font-size: 1em;
}
    .add_to_cart_btn_large:hover{
        opacity: 0.8;
    }
.secondary_btn{
    min-width: 150px;
    padding: 12px 16px;
    color: var(--secondary);
    border: none;
    border: 2px solid var(--secondary);
    outline: none;
    cursor: pointer;
    background: transparent;
    font-size: 1.1em;
}
    .secondary_btn:hover{
        opacity: 0.8;
    }
.secondary_btn_black{
    min-width: 150px;
    padding: 12px 16px;
    color: var(--black);
    border: none;
    border: 2px solid var(--black);
    outline: none;
    cursor: pointer;
    background: transparent;
    font-size: 1.1em;
}
    .secondary_btn_black:hover{
        opacity: 0.8;
    }
div.header_container{
    z-index: 9999;
    width: 100%;
}
div.top{
    justify-content: flex-end;
    background: var(--primary);
    padding: .8em;
    border-bottom: 1px solid var(--gray);
}   
    div.top * {
        color: var(--white);
    }
    div.top_inner{
        margin: 0 auto;
        max-width: 1300px;
        width: 100%;
    }
        div.top_left{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 64px;   
        }
            
            div.top_left div.top_item{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 1em;   
            }
            div.top_left .review_stars *{
                color: var(--star-yellow);
            }
        div.top_right{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 64px;
        }
div.header{
    position: sticky;
    background-color: var(--primary);
}
#scroll_header div.header{
    background-color: var(--white);
}
div.header_inner{
    margin: 0 auto;
    padding: 8px 1.3em;
    max-width: 1300px;
    width: 100%;
}
    div.header_left{
        width: 100%;
    }
        div.header_left img{
            height: 100px;
            object-fit: contain;
        }
    div.header_middle{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }   
        div.search_bar_container{
            padding: .8em;
            max-width: 600px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--gray);
            border-radius: 999px;
            gap: .5em;
        }
            div.search_bar_container i{
                opacity: .4;
            }
            div.search_bar_container input{
                width: 100%;
                font-size: 1em;
                font-weight: normal;
                border: none;
                outline: none;
            }
            div.search_bar_container input::placeholder{
                opacity: .4;
            }
    div.header_right{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 32px;
    }
    div.menu_item, div.menu_item_dropdown_body_item{
        font-size: 1.4em;
    }
    div.menu_item_dropdown div.menu_item a{
        display: flex;
        gap: .2em;
    }
        div.menu_item_dropdown div.menu_item a i{
            font-size: .8em;
            padding-top: 4px;
        }
            
        div.menu_item_btn i{
            font-size: 1.5em;
        }
            div.menu_item a{
                color: var(--black);
            }
                div.menu_item a:hover{
                    color: var(--secondary);
                }
            a.menu_active{
                border-bottom: 2px solid var(--primary) !important;
            }
        div.menu_item_dropdown{
            position: relative;
        }
            div.menu_item_dropdown_body{
                position: absolute;
                width: max-content;
                background: white;
                padding: 10px;
                border-radius: 2px;
                display: none;
            }
            
            div.menu_item_dropdown:hover div.menu_item_dropdown_body{
                display: flex;
            }
        div.header_right_res{
            display: none;
            width: 100%;
            justify-content: flex-end;
            align-items: center;
        }
        div.header_right_res i{
            font-size: 2em;
        }
        div.shopping_cart_holder{
            position: relative;
        }
            div.shopping_cart_counter{
                position: absolute;
                top: -10px;
                right: -10px;
                width: 25px;
                height: 25px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--primary);
                color: var(--white);
                border-radius: 9999px;
                font-family: var(--font-normal);
            }
    div.cat_header{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--secondary);
    }
        div.cat_header_inner{
            margin: 0 auto;
            max-width: 1000px;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 2em;
            padding: 1em;
        }
            div.cat_header_item p{
                color: var(--white);
                font-weight: bold;
            }
        div.cat_header_inner_res{
            display: none;
            width: 100%;
            position: relative;
        }
        div.cat_header_inner_title p{
            width: 100%;
            text-align: left;
            color: var(--white);
            padding: 1em;
        }
            div.cat_header_inner_dropdown{
                display: none;
                position: absolute;
                background-color: var(--secondary-dark);
                width: 100%;
                bottom: 0;
                transform: translateY(100%);
                padding: 1em;
                z-index: 9999;
            }
                div.cat_header_inner_dropdown_inner{
                    display: flex;
                    flex-direction: column;
                    gap: 2em;
                }
#scroll_header{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    display: none;
    background-color: var(--white);
    z-index: 9999;
    box-shadow: 0px 6px 16px rgba(0,0,0,0.2);
}
    #scroll_header div.menu_item a{
        color: var(--black);
    }
    #scroll_header div.header_left img{
        height: 100px;
    }
    #scroll_header div.header_inner{
        padding: 16px;
    }
    #scroll_header div.header_right_res i{
        color: var(--black);
    }
#resMenu{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--primary);
    z-index: 99999;
}
    div.header_close {
        position: absolute;
        top: 16px;
        left: 16px;
        cursor: pointer;
    }
        div.header_close i{
            position: relative;
            z-index: 999999;
            font-size: 2em;
            color: var(--black);
        }
    #resMenu div.header{
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }
div.hero{
    position: relative;
    background: var(--primary);
    height: 65vh;
    overflow:hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
    div.hero_inner{
        margin: 0 auto;
        max-width: 1300px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2em;
        z-index: 999;
        padding: 10px;
    }
        div.hero_left{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
        }
            div.hero_left h1{
                font-weight: 100;
                color: var(--secondary);
            }
        div.hero_right{
            border-radius: .4em;
            width: 100%;
        }
            div.hero_right img{
                width: 100%;
                height: 100%;
                max-height: 500px;
                object-fit: cover;
                object-position: center;
                border-radius: .4em;
            }
  
    div.hero button{
        margin-top: 1em;
    }

    div.hero_content_holder{
        max-width: 700px;
        width: 100%;
    }
    div.chevron{
        position: absolute;
        bottom: 64px;
        left: 50%;
        transform: translateX(-50%);
    }
        div.chevron i{
            font-size: 2em;
            color: var(--white);
        }
    div.hero .double_btn{
        justify-content: flex-start;
        z-index: 1;
    }

div.workshops_hero{
    width: 100%;
    padding: 4em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

    div.workshops_hero_inner{
        max-width: 1200px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2em;
    }
        div.workshops_hero_item{
            max-width: 400px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1em;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--light-gray);
            border-radius: .4em;
            padding: .5em 0.3em;
        }
            div.workshops_hero_item img{
                width: 100%;
                height: 100%;
                max-height: 400px;
                object-fit: cover;
            }


div.over_ons{
    position: relative;
    background: var(--primary);
    overflow:hidden;
    display: flex;
    justify-content: center;
    padding: 4em 1em;
    align-items: center;
}
    div.over_ons_inner{
        margin: 0 auto;
        max-width: 1100px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2em;
        padding: 10px;
    }
        div.over_ons_left{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            gap: 1em;
        }
            div.over_ons_left > div p{
                margin: .3em 0;
            }
            div.over_ons h2{
                font-weight: 100;
                color: var(--secondary);
            }
        div.over_ons_right{
            width: 100%;
        }
            div.over_ons_right img{
                width: 100%;
                height: 100%;
                max-height: 500px;
                object-fit: cover;
                object-position: center;
                border-radius: .4em;
            }
div.portfolio{
    position: relative;
    background: var(--primary);
    overflow:hidden;
    display: flex;
    justify-content: center;
    padding: 4em 1em;
    align-items: center;
}
    div.portfolio_inner{
        margin: 0 auto;
        max-width: 1300px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2em;
        padding: 10px;
    }
        div.portfolio_imgs{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .7em;
        }
            div.portfolio_img_item{
                width: 300px;
                height: 170px;
            }
                div.portfolio_img_item img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: .4em;
                }
            div.portfolio_middle{
                margin: 1em 0;
                padding: 1em 0;
                width: 100%;
                text-align: center;
                border-top: 1px solid var(--secondary);
                border-bottom: 1px solid var(--secondary);
            }
div.footer{
    background-color: var(--primary);
}
    div.footer *{
        color: var(--black);
    }
    div.footer_inner{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 16px;
        gap: 32px;
    }
    div.footer_item{
        display: flex;
        flex-direction: column;
    }
        div.footer_item hr{
            margin: 16px 0;
        }
    div.footer_item:has(img){
        max-width: 400px;
        max-height: 300px;
        width: 100%;
        align-items: center;
    }
        div.footer_item img{
            width: 100%;
            max-height: 300px;
            height: 100%;
            object-fit: contain;
        }
        div.footer_item_body{
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
            div.footer_contact_item{
                display: flex;
                gap: 8px;
            }
                div.footer_contact_item i{
                    width: 32px;
                    text-align: center;
                }
div.bottom{
    padding: 8px 12px;
    background-color: var(--secondary);
}
    div.bottom_inner{
        justify-content: space-between;
    }
    div.bottom_inner *{
        color: var(--white);
    }
    
.workshop__subtitle {
    color: var(--secondary);
    font-weight: bold;
}
.section-title {
    color: var(--secondary);
}

div.workshop__intro {
    background: var(--off-white);
}

.workshop__modules-container {
    justify-content: space-around;
}
.workshop__module-card {
    border-color: var(--secondary) !important; 
    text-align: center;
}
.workshop__module-title {
    color: var(--secondary);
}
.workshop__module-text {
    font-size: 1em;
}


div.workshop__pricing {
    background: var(--primary);
}
.workshop__pricing-inner {
    margin: 0 auto;
    text-align: center;
}
.price-card {
    padding: 32px;
    border-radius: 4px;
    background: var(--white);
    text-align: left;
}
.price-card--creative {
    border: 2px solid var(--secondary);
}
.price-card--strategic {
    border: 2px solid var(--black);
}
.price-card__price {
    font-weight: bold;
}
.price-card__list {
    margin-left: 1.5em;
    padding-left: 0;
}
.price-card__list li {
    font-size: 1em; 
}
.price-card__list--creative li::before {
    content: '🎨 ';
    margin-right: 0.5em;
}
.price-card__list--strategic li::before {
    content: '🎯 ';
    margin-right: 0.5em;
}


.contact__inner {
    margin: 0 auto;
    text-align: center;
}
.contact-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-form .form_group_double {
    display: flex;
}
.contact-form .form-item {
    margin-bottom: 0;
}
.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold; 
}
.contact-form input[type="text"], 
.contact-form input[type="email"], 
.contact-form select,
.contact-form textarea {
    padding: 12px;
    width: 100%;
    border: 1px solid var(--gray);
    border-radius: 4px;
    font-size: 1em;
    outline: none;
    box-sizing: border-box;
}
.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%20173.8H5.4c-4.8%200-8.9-3.9-8.9-8.9s4.1-8.9%208.9-8.9H287c4.8%200%208.9%203.9%208.9%208.9s-4.1%208.9-8.9%208.9z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M146.2%20292.4c-4.9%200-9-1.9-12.4-5.3L5.3%20146.2c-7-7-7-18.4%200-25.4s18.4-7%2025.4%200l115.5%20115.5%20115.5-115.5c7-7%2018.4-7%2025.4%200s7%2018.4%200%2025.4L158.6%20287.1c-3.5%203.5-7.7%205.3-12.4%205.3z%22%2F%3E%3C%2Fsvg%3E") no-repeat right 12px center;
    background-size: 10px 10px;
    background-color: var(--white);
}

.contact-form__submit-btn {
    align-self: flex-start;
}

@media only screen and (max-width: 750px) {
    .contact-form .form_group_double {
        flex-direction: column;
        gap: 0;
    }
}
@media only screen and (max-width: 1100px) {
    div.usp_banner_inner{
        padding: 0 150px;
    }
    .proj_inner{
        flex-direction: column;
    }
    .addToCartBtnContainer{
        position: fixed;
        width: 100%;
        bottom: 10px;
        left: 0;
        padding: 0 10px;
    }   
        .addToCartBtnContainer button{
            width: 100%;
            padding: 1em .5em;
            border-radius: .4em;
            box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.2);
        }
}
@media only screen and (max-width: 1040px) {
    div.header_middle{
        display: none;
    }
}
@media only screen and (max-width: 1000px) {
    div.proj_inner {
        flex-direction: column;
        gap: 4em;
    }
    div.proj_left, div.proj_right {
        width: 100%;
        padding: 0 10px;
    }
    div.proj_img_thumb, div.proj_img_nav {
        max-width: 100%;
        padding: 0;
    }
    div.proj_left div img {
        max-height: 400px; 
    }
    div.proj_left .proj_img_nav div img {
        max-height: 60px; 
    }
}
@media only screen and (max-width: 1600px) {
    div.aanbiedingen_item_container{
        overflow-x: scroll;
        scrollbar-width: none;
    }
    div.aanbieding_item{
        transform: scale(0.9);
    }
    div.aanbieding_item:hover{
        transform: scale(0.95);
    }
}
@media only screen and (max-width: 960px) {
    div.service_cat_inner_bottom{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    div.service_cat_secondary div.service_cat_inner_bottom{
        flex-direction: column;
    }
}
@media only screen and (max-width: 940px) {
    div.header_right{
        display: none;
    }
    div.header_right_res{
        display: flex;
    }
}
@media only screen and (max-width: 900px) {
    div.footer_inner{
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    div.service_cat_secondary div.service_cat_inner{
        flex-direction: column-reverse;
    }
    div.service_cat_inner{
        flex-direction: column;
    }
}
@media only screen and (max-width: 875px) {
    div.contact{
        background-size: 120%;
    }
}
@media only screen and (max-width: 800px) {
    div.contact_inner{
        flex-direction: column;
    }
    div.contact_left{
        max-width: 100%;
    }
}
@media only screen and (max-width: 750px) {
    div.top_item p , div.top_item a span{
        display: none;
    }
    div.top_right {
        justify-content: flex-end;
        gap: 1.5em;
    }
    .checkout_container {
        flex-direction: column;
        gap: 20px;
    }

    .form_group_double {
        flex-direction: column;
        gap: 0;
    }
}
@media only screen and (max-width: 700px) {
    div.top_right_corner{
        display: none;
    }
    div.hero h1{
        font-size: 10vw;
    }
    
    div.prod_highlights{
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 650px) {
    div.cat_header_inner{
        display: none;
    }
    div.cat_header_inner_res{
        display: block;
    }
    div.hero{
        height: unset;
    }
    div.hero_inner{
        flex-direction: column-reverse;
    }
    div.hero_right, div.hero_left{
        justify-content: center;
        text-align: center;
    }
}
@media only screen and (max-width: 600px) {
    div.contact{
        background-size: 175%;
    }
    div.assortiment_container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    div.assortiment_filter_container{
        border-right: none;
        border-bottom: 1px solid var(--light-gray)
    }
    div.assortiment_item_container{
        justify-content: center;
        align-content: center;
    }
}
@media only screen and (max-width: 581px) {
    div.footer_inner{
        justify-content: start;
    }
}
@media only screen and (max-width: 550px) {
    div.hero h1{
        font-size: 13vw;
    }
    h2{
        font-size: 10vw;
    }
    h3{
        font-size: 8vw;
    }
}
@media only screen and (max-width: 500px) {
    div.form_item_double{
        flex-direction: column;
    }
}
@media only screen and (max-width: 400px) {
    div.top_right{
        gap: 16px;
    }
        div.proj_img_thumb, div.proj_img_nav {
        padding: 0;
    }
    div.proj_left div img {
        max-height: 300px;
    }
}