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

:root {
    --primary-color: #f2a225;
    --secondary-color: #ffb138;
    --text-color: #000000;
    --text-foreground: rgb(110 110 110);
    --white: #ffffff;
    --cream: #fdf3da;
    --button-text: #ffffff;
    --faq-text: #ffffff;

    --light-gray: hsl(0deg 0% 95% / 39%);
    --gray: #f3f4f6;
    --dark-gray: #ffb848;
    --border-color: #e5e7eb;
    --font-family: 'Open Sans', sans-serif;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 100px;
    --spacing: 60px;
}

#menu-right-menu a {
    border: 1px solid var(--primary-color);
    padding: 10px 32px;
    border-radius: 10px;
    background: var(--primary-color);
    color: var(--button-text);
}

.bg-line {
    display: none !important;
}
img {
    border-radius: 10px;
}
.hero_container_fluid .hero_container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    text-align: left !important;
}

.hero_container_fluid {
    border-top: 5px solid var(--primary-color);
    background-color: var(--primary-color);
}


.hero_container {
    margin-top: auto !important;
}

.hero_content {
    width: 100%;
}

.hero_container_fluid .hero_title {
    max-width: 100% !important;
    text-align: left !important;
    color: white;
}

.hero_container_fluid .hero_container p {
    max-width: 100% !important;
    color: white;
}

.hero_container_fluid .hero_img {
    height: 100%;
    width: 100%;
}

.hero_container_fluid .dark_btn {
    background-color: white !important;
    border-color: white !important;
    color: var(--primary-color) !important;
}

.set_title {
    text-align: left !important;
    width: 100%;
}

.cta_container {
    background-color: var(--gray);
}

.cta_container p {
    color: var(--text-foreground);
}

#functies {
    background-color: var(--primary-color);
}

#functies .function_item p {
    color: var(--text-foreground) !important;
}

#functies .function_item h3 {
    margin: 0 !important;
    margin-top: 20px !important;
}

#functies .function_item p {
    min-height: 90px;
    margin-top: 10px;
}

img.icon_img {
    width: 75px;
    height: 85px;
    object-fit: contain;
}
.function_item {
    justify-content: space-around !important;
}
@media only screen and (min-width: 768px) {
    .hero_content {
        width: 50%;
    }

    #dynamicPrice {
        font-size: 6.5rem;
    }

    .cards_container .blok_paragraph {
        width: 90% !important;
    }
}
footer {
    background-color: var(--primary-color);
    color: white;
}
footer pre, footer p, footer a, .footer-logo p{
    color: white;
}

.footer-bottom {
    border-top: 1px solid var(--secondary-color);
}
.pricing-wave .pricing_container {
    background-color: var(--primary-color);
    color: white !important;
}
.pricing_content p {
    color: var(--text-foreground) !important;
}
#functies p, #functies h2{
    color: white !important;
}
#functies .btn {
    background-color: white !important;
    color: var(--primary-color) !important;
    color: white;
}
#functies .btn:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* wave */
 .hero_wave .wave1 .main-wave1 {
     fill: var(--primary-color) !important;
 }
.hero_wave .wave1 .border-wave1 {
    fill: var(--primary-color) !important;
}
.functie-wave .wave1 .main-wave1, .functie-wave .wave2 .main-wave2 {
    fill: var(--primary-color) !important;
}
.functie-wave .wave1 .border-wave1, .functie-wave .wave2 .border-wave2 {
    fill: var(--primary-color) !important;
}

.pricing-wave .functie-wave .wave1 .main-wave1,.pricing-wave .functie-wave .wave2 .main-wave2 {
    fill: var(--primary-color) !important;
}

.pricing-wave .functie-wave .wave1 .border-wave1,.pricing-wave .functie-wave .wave2 .border-wave2 {
    fill: var(--primary-color) !important;
}

.footer-wave .functie-wave .main-wave2 {
    fill: var(--primary-color) !important;
}

.wave2 {
    display: block;
    position: relative;
    top: 0 ;
    z-index: 100;
}

.wave1 {
    display: block;
    transform: rotate(180deg);
    position: relative;
    top: -1px;
    z-index: 100;
}
.functie-wave {
    margin-bottom: -10px;
}
@media only screen and (max-width: 768px) {
    .wave1 {
        top: -2px;
    }
}

.social-media-icons i {
    background: #ffffff !important;
    color: #000000 !important;
}