/* =================================================
   FLOWSUITE DESIGN TOKENS
   ================================================= */

:root{

    /* Brand */
    --fs-azure:#0F4C81;

    /* Blue */
    --fs-blue:#1F4F7A;
    --fs-blue-hover:#163E63;

    /* Gold */
    --fs-gold:#C6A46C;
    --fs-gold-hover:#B89354;

    /* White */
    --fs-white:#FFFFFF;
    --fs-warm-white:#F4F1EC;

    /* Text */
    --fs-text-dark:#3F3F3F;
    --fs-text-mid:#5A5A5A;
    --fs-text-light:rgba(255,255,255,.92);

    /* Border thickness */
    --fs-border-thin:1px;
    --fs-border-normal:2px;
    --fs-border-bold:3px;

    /* Active border */
    --fs-border-active:var(--fs-border-normal);

}



/* =================================================
   RESET ELEMENTOR BUTTON
   ================================================= */

.flowsuite-btn .elementor-button,
.flowsuite-btn .elementor-button:visited{

    background:none !important;
    box-shadow:none !important;

}



/* =================================================
   BASE BUTTON
   ================================================= */

.flowsuite-btn .elementor-button{

    display:inline-block !important;

    padding:14px 26px !important;

    border-radius:4px !important;

    font-weight:600 !important;

    letter-spacing:.3px;

    text-decoration:none !important;

    transition:all .25s ease;

    border:var(--fs-border-active) solid transparent !important;

}



/* =================================================
   BLUE BUTTON
   ================================================= */

.flowsuite-btn.flowsuite-btn-blue .elementor-button{

    background:var(--fs-blue) !important;
    border-color:var(--fs-white) !important;

    color:var(--fs-text-light) !important;

    box-shadow:0 8px 18px rgba(0,0,0,.20) !important;

}

.elementor-widget-button.flowsuite-btn.flowsuite-btn-blue .elementor-button:hover,
.elementor-widget-button.flowsuite-btn.flowsuite-btn-blue .elementor-button:focus{

    background:var(--fs-blue-hover) !important;
    border-color:var(--fs-white-hover) !important;

    color:var(--fs-text-light) !important;

    box-shadow:0 10px 22px rgba(0,0,0,.25) !important;

}



/* =================================================
   GOLD BUTTON
   ================================================= */

.flowsuite-btn.flowsuite-btn-gold .elementor-button{

    background:var(--fs-gold) !important;
    border-color:var(--fs-gold) !important;

    color:var(--fs-white) !important;

    box-shadow:0 10px 26px rgba(198,164,108,.35) !important;

}

.elementor-widget-button.flowsuite-btn.flowsuite-btn-gold .elementor-button:hover,
.elementor-widget-button.flowsuite-btn.flowsuite-btn-gold .elementor-button:focus{

    background:var(--fs-gold-hover) !important;
    border-color:var(--fs-gold-hover) !important;

    color:var(--fs-white) !important;

    box-shadow:0 12px 30px rgba(198,164,108,.45) !important;

}



/* =================================================
   WHITE BUTTON
   ================================================= */

.flowsuite-btn.flowsuite-btn-white .elementor-button{

    background:var(--fs-white) !important;
    border-color:var(--fs-white) !important;

    color:var(--fs-text-dark) !important;

    box-shadow:0 8px 18px rgba(0,0,0,.18) !important;

}

.elementor-widget-button.flowsuite-btn.flowsuite-btn-white .elementor-button:hover,
.elementor-widget-button.flowsuite-btn.flowsuite-btn-white .elementor-button:focus{

    background:var(--fs-warm-white) !important;
    border-color:var(--fs-warm-white) !important;

    color:var(--fs-text-dark) !important;

    box-shadow:0 10px 22px rgba(0,0,0,.22) !important;

}



/* =================================================
   TRANSPARENT BLUE BUTTON
   ================================================= */

.flowsuite-btn.flowsuite-btn-blue-outline .elementor-button{

    background:transparent !important;

    border-color:var(--fs-blue) !important;

    color:var(--fs-blue) !important;

}

.flowsuite-btn.flowsuite-btn-blue-outline .elementor-button:hover{

    background:var(--fs-blue) !important;

    color:var(--fs-white) !important;

}



/* =================================================
   TRANSPARENT GOLD BUTTON
   ================================================= */

.flowsuite-btn.flowsuite-btn-gold-outline .elementor-button{

    background:transparent !important;

    border-color:var(--fs-gold) !important;

    color:var(--fs-gold) !important;

}

.flowsuite-btn.flowsuite-btn-gold-outline .elementor-button:hover{

    background:var(--fs-gold) !important;

	border-color:var(--fs-white) !important;
	
    color:var(--fs-white) !important;

}



/* =================================================
   TRANSPARENT WHITE BUTTON
   ================================================= */

.flowsuite-btn.flowsuite-btn-white-outline .elementor-button{

    background:transparent !important;

    border-color:var(--fs-white) !important;

    color:var(--fs-white) !important;

}

.flowsuite-btn.flowsuite-btn-white-outline .elementor-button:hover{

    background:var(--fs-gold) !important;

    border-color:var(--fs-white) !important;
	
    color:var(--fs-text-light) !important;

}


/* =================================================
   BUTTON TEXT
   ================================================= */

.flowsuite-btn .elementor-button-text{

    color:inherit !important;

}



/* =================================================
   FOCUS RESET
   ================================================= */

.flowsuite-btn .elementor-button:focus{

    outline:none !important;

}



/* =================================================
   MICRO INTERACTION
   ================================================= */

.flowsuite-btn .elementor-button:hover{

    transform:translateY(-2px);

}

/* FlowSuite CTA button */

/* verwijder hover divider voor CTA */

.menu-nav > li.cta-button,
.menu-nav > li.cta-button:hover{
    border-top:none !important;
}

/* verwijder eventuele pseudo divider */

.menu-nav > li.cta-button::before,
.menu-nav > li.cta-button::after,
.menu-nav > li.cta-button:hover::before,
.menu-nav > li.cta-button:hover::after{
    display:none !important;
}

/* CTA knop styling */
/* CTA button */

.menu-nav > li.cta-button > a{
    background:#1F4F7A !important;
    color:#ffffff !important;
    padding:12px 30px !important;
    border-radius:4px;
    border:1px solid #FFFFFF !important;
	box-shadow:0 4px 10px rgba(0,0,0,0.15);
    display:inline-block;
    position:relative;
    z-index:2;
}

/* hover */
.menu-nav > li.cta-button > a:hover{
    background:#C6A46C !important;
    color:#FFFFFF !important;
    border:2px solid #FFFFFF !important;
}