/* Placeholder EV CSS */

body {
    margin: 0;
    padding: 0;
    height: 100vh; /* Set the body height to 100% of the viewport height */
    background-color: #FFF;
    background-image: url('../images/honda-evf-bg-1.jpg');
    background-size: cover; /* Scale the image to cover the entire background */
    background-position: top center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}

@media (max-width: 767px) {
    /* Styles for mobile devices */
    body {
        background-color: #112a2e;
        background-image: url('../images/honda-evf-bg-1.jpg');
        background-position: center top; /* Adjust the background position for mobile */
        background-attachment: scroll; /* Allow background to scroll on mobile */
    }
}

.bgwhite {
    padding: 50px;
    margin-top : 40px;
    background-color: #FFF;
    -webkit-box-shadow: 4px 13px 51px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 13px 51px -2px rgba(0,0,0,0.75);
    box-shadow: 4px 13px 51px -2px rgba(0,0,0,0.75);
}

label {
    font-family: "Bebas Neue Pro", sans-serif;
    color : #11263B;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
}

input[type=text], input[type=email], select.form-control, select, select option
{
    border : 1px solid #EFEFEF;
    height : 56px;
    font-size: 20px;
    border-radius: 0px;
    line-height: 36px;
    border-bottom : 3px solid #5e6d80;
}

.bike-bg {
    background-image: url('../images/em1e-cover.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
    position: relative; /* nodig voor absolute positioning van de tekst */
}

.bike-text {
    position: absolute;
    bottom: 20px;   /* afstand vanaf onderkant */
    left: 40px;     /* afstand vanaf linkerkant */
}

.bike-text h1 {
    font-family: "Bebas Neue Pro", sans-serif;
    color: #fff;
    font-size: 68px;
    font-weight: 700;
    margin: 0;
}


option {
    font-family: "Bebas Neue Pro", sans-serif;
    color : #11263B;
    font-size: 20px;
}

h1 {
    font-family: "Bebas Neue Pro", sans-serif;
    color : #FFFF;
    font-size: 68px;
    font-weight: 700;
}

h2 {
    margin-top : 50px;
    font-family: "Bebas Neue Pro", sans-serif;
    color: #5e6d80;
    font-size: 36px;
    font-weight: 700;
}

h3 {
    font-family: "Bebas Neue Pro", sans-serif;
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 700;
}

.cta {
    font-family: "Bebas Neue Pro", sans-serif;
    color: #000000;
    font-size: 32px;
    font-weight: 400;
    line-height: 50px;
}

.gutter {
    padding-left: 0;
    padding-right: 0;
}

.top-banner {
    background-color: rgba(17, 38, 59, 0.74); /* #11263B with 74% transparency */
    padding: 20px;
    text-align: center;
    margin-bottom : 100px;
}

.top-banner img {
    width : 200px;
}

.boatpad {
    padding-top: 400px;
}

.skewed-bg {
    background-color: rgba(17, 38, 59, 0.74);
}

.textpos {
}

.bottomlogo {
    position: absolute;
    bottom: 30px;
    left: -10px;
    width: 100%;
}

.displace {
    position: absolute;
    top : -300px;
}

.form-check-input {
    margin-top: 0.9em;   /* iets naar beneden duwen zodat hij met de eerste regel uitlijnt */
}

.toplogo {
    height : 40px;
}

.btn-primary {
    border : none;
    background-color: #162333;
    border-radius: 0;
    font-family: "Bebas Neue Pro", sans-serif;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;

}

@media (max-width: 767px) {
    .boatpad {
        padding-top: 100px;
    }

    .cta {
        font-family: "Bebas Neue Pro", sans-serif;
        color: #000000;
        font-size: 24px;
        font-weight: 400;
        line-height: 28px;
    }

}
/* button vlaggetjes */
.btn-flag { display: inline-flex; align-items: center; gap: .5rem; }
.btn-flag svg { width: 24px; height: 16px; border-radius: 0px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex: 0 0 auto; }

.btn-lang {
    border : none;
    background-color: #162333;
    border-radius: 0;
    font-family: "Bebas Neue Pro", sans-serif;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
}

.btn-lang .flag { width:24px; height:16px; border-radius:0px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); flex:0 0 auto; }
.btn-lang.active { pointer-events:none; }

.footer-banner, .footer-banner a {
    color: #162333 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-bar a:hover { text-decoration: underline; }