.main-nav a,
.wp-element-button, 
input[type="submit"],
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em !important;
    border-radius: var(--border-radius) !important;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease-in-out;
}

        .main-nav a {

            font-weight: bold;
            margin-right: 4px;
            white-space: nowrap;
            

        }

        .wp-element-button{
            font-weight: 700;
            /* background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1)); */
            backdrop-filter: blur(8px);
        }


        .attention .wp-element-button,
        .footer .wp-element-button{
            background-color: var(--kiem) !important;
            border-color: var(--kiem) !important;
        }   

        .carousel .wp-element-button{
            border-color: var(--kiem) !important;
           
        }
        .carousel .wp-block-button:not(.attention) .wp-element-button{

         color: var(--kiem) !important;

         &:hover{
            color: var(--houtskool) !important;
         }
         }
    }
 
     

.main-nav .current-menu-item a,
.main-nav a:hover,
input[type="submit"]:hover,
.btn:hover, 
.btn:focus,
.footer .wp-element-button:hover,
.wp-element-button:hover,
.wp-element-button:focus { 
    border-radius: 3em !important; 
    background-color: var(--kiem) !important;
    border-color: var(--kiem) !important;
}

        .menu-item-type-custom:first-child a{
            margin-left: 3em !important;
        }
        
        .main-nav .menu-item-type-custom a,
        .btn-signin {
            background: transparent;
            height: 2em !important;
            font-family: 'BwGradual', Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .mobile-nav .menu-item-type-custom a,
        .mobile-nav .btn-signin {
            border: 0;
            height: 2em;
            padding: 0 !important;
            border-radius: var(--border-radius) !important;
        }

        .main-nav .menu-item-type-custom:last-child a,
        .btn-signup {
            background: var(--houtskool);
            color: #fff;
            height: 2em;
        }


    
        .menu-item-type-custom:last-child a:hover,
        .btn-signup:hover { 

            background-color: var(--kiem);
            color: var(--houtskool) !important;;
            border-radius: 2rem;
   
        }

       .has-kiem-background-color .wp-element-button,
        .has-lichee-background-color .wp-element-button,
        .has-dauw-background-color .wp-element-button,
        .has-perzik-background-color .wp-element-button,
        .has-olijf-background-color .wp-element-button{
            background-color: var(--houtskool);
            border-color: var(--houtskool) ;
            color: var(--kiem);

            &:hover{
                background-color: var(--houtskool) !important;
                border-color: var(--houtskool)!important;       
            }
        }        

        .has-perzik-background-color .wp-element-button{
            color: var(--perzik);
        }
        .has-dauw-background-color .wp-element-button{
            color: var(--dauw);
        }
        .has-lichee-background-color .wp-element-button{
            color: var(--lichee);
        }

        .has-olijf-background-color .wp-element-button{
            color: var(--olijf);
        }


        .has-houtskool-background-color .wp-element-button,
        .pricing .has-salie-background-color .wp-element-button{
            background-color: var(--kiem) !important;
            color: var(--houtskool) !important;
            border-color: var(--kiem) !important;

            &:hover{
                color: var(--houtskool)!important;       
            }          

        }
   
    /*footer*/
    .footer-menu .menu-item-type-custom a,
    .footer-menu .menu-item-type-custom{
        height: auto !important;

    }



.carousel-pagination-custom .swiper-pagination-bullet {
 
    display: inline-block;
}

.carousel .btn{
    position: relative;
    width: auto;
    height: auto;
    background: rgba(25,25,25,0.1);
    opacity: 1;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #fff;
    border: var(--border-width) solid rgba(255,255,255,1);
    overflow: hidden;

    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;

    &:before{
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;                       
        backdrop-filter: blur(8px);
        border-radius: inherit;        
        transition: border-radius .3s ease;   
        pointer-events: none;  
    }
}


.carousel .btn:hover,
.carousel-pagination-custom .swiper-pagination-bullet-active {
    background: var(--kiem);
    color: var(--houtskool);
    border-color: var(--kiem);
    border-radius: 3em !important;
}





/*------------------------------------*\
    form elements
\*------------------------------------*/

form{
}

.form-row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: var(--gutter);
    padding: 1em 0;
    margin-bottom: 1em;
}

.field-group{
    width: calc( 50% - var(--gutter));
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    label{
        font-size: calc( var(--font-size) * 0.8);

    }
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    border: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 1em !important;
    border: var(--border-width) solid var(--houtskool);
    border-radius: var(--border-radius) !important;
    box-shadow: none;
    font-family: 'BwGradual', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--kiem);
    background-color: var(--kiem);
    border-radius: 3em !important;
}

textarea:focus {
    border-radius: 1em !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
    font-style: italic;
    color: var(--houtskool);
    
}

form .full-width{
    width: 100%;
    flex-basis: 100%;
}

.form-submit {
    width: 100%;
    display: inline-flex;
    margin-top: 1em;
    justify-content: flex-end;

    & p {display: flex;}

    & input[type="submit"] {
        order: 2 !important;
        all: unset;
        cursor: pointer;
        background-color: var(--kiem);
        color: var(--houtskool);
        border-color: var(--kiem);
        border-radius: var(--border-radius) !important;
        padding: 0.5em 1.5em !important;

        &:hover{border-radius: 3em;}
    }

}

.wpcf7-response-output{
    margin-top: 1em;
    font-size: calc( var(--font-size) * 0.8);
    border: 0 !important;
    background-color: var(--kiem);
}