/* HERO MIT HINTERGRUND BILD */

.hero{
padding:140px 0 80px;
position:relative;
overflow:hidden;
color:#fff;

/* ?? Hintergrundbild */
background:
linear-gradient(180deg,rgba(10,10,10,.65),rgba(10,10,10,.75)),
url('https://images.pexels.com/photos/4246119/pexels-photo-4246119.jpeg?auto=compress&cs=tinysrgb&w=1800');
background-size:cover;
background-position:center;
background-attachment:fixed;
}

/* TEXT WEISS */

.hero h1 {
    font-size: 300%;
    font-weight: 500;
    color: var(--white-bg);
    line-height: 1.1;
    margin-bottom: 2%;
}
.hero2 {
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #333;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.hero p{
color:  var(--white-bg);
max-width:650px;
font-size:120%;
}

/* BADGE */

.hero-badge{
display:inline-block;
background:rgba(255,255,255,.12);
border:1px solid var(--primary-text-color);
backdrop-filter:blur(10px);
padding:8px 14px;
border-radius:50px;
font-size:.9rem;
color:#fff;
margin-bottom:18px;
}

/* FORM GLASS EFFECT */

.hero-form{
background:var(--primary-text-color);
backdrop-filter:blur(18px);
border:1px solid var(--primary-dark);
padding:28px;
border-radius:18px;
box-shadow:0 20px 50px  var(--primary-light);
position:relative;
z-index:2;
color:#fff;
}

/* INPUTS */

.form-control,
.form-select{
border-radius:12px;
padding:12px;
margin-bottom:10px;
border:none;
background:var( --primary);
}

/* BUTTON */

.btn-submit{
width:100%;
background:var(--button-bg);
color:#fff;
padding:14px;
border:none;
border-radius:12px;
font-weight:700;
transition:.3s;
}

.btn-submit:hover{
background:var(--button-bg);
}
.btn, .btn-dark, .btn-lg{
background:var(--button-bg);
}
/* MOBILE */

@media(max-width:768px){
.hero{
text-align:center;
background-attachment:scroll;
}
}