.hero{
    display: block;
    margin-top: 100px;
}


.hero_image{
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 500px;
}

.content_headline_h1{
    display: block;
    margin:16px auto;
    color:var(--text-color);
    width: 500px;
}

.content_headline_h2{
    display: block;
    margin:16px auto;
    color:var(--text-color);
    width: 500px;
}



.content_description{
    display: block;
    margin: 16px auto;
    color: var(--second-color);
    width: 500px; 
    

}


.sticky .h-btn{
    background: var(--text-color);
    color: #000;
}

a {
    color: white;
}


*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
    font-family: 'Josefin Sans', sans-serif;
    list-style: none;
    text-decoration: none;
    scroll-behavior: smooth;
    scroll-padding-top:3.5rem ;
}
:root{
    --bg-color:#101010;
    --secound-bg-color:#191919;
    --text-color:#fff;
    --second-color:#c6c9d8bf;
    --main-color:#1d165d;
    --big-font:5.3rem;
    --h2-font:4.2rem;
    --p-font:1.1rem;
}

body{
    background: var(--bg-color);
    color:var(--text-color);
}

.logo {
    color: var(--text-color);
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
}



header{
    display: flex;
    justify-content: space-between; /* Logo links, Navbar rechts */
    align-items: center; /* Vertikal zentrieren */
    padding: 50px 50px; /* Abstand links/rechts */
    position:fixed;
    width: 100%;
    top:0;
    right:0;
    z-index:1000;
    background-color: transparent;
    transition-duration: .3s;
}


header.sticky{
    padding:12px 15%;
    background:var(--secound-bg-color);
}

.navbar {
    display: flex;
    justify-content: space-between; /* Logo links, Menü rechts */
    align-items: center; /* Vertikal zentrieren */
    padding: 0 20px; /* Abstand links/rechts */
}

.navbar li{
    position: relative;

}
.navbar a{
    color:var(--text-color);
    font-weight: bold;
    font-size: 1rem;
    padding:10px 20px;
}
.navbar a::after{
    content: '';
    position: absolute;
    width:0;
    height:2px;
    background:var(--main-color);
    left:0;
    bottom:-4px;
    transition:ease .40s;
}

.sticky .navbar a::after{
    background: var(--text-color);
}

.navbar a:hover::after{
    width:100%;
}


.scroll-container {
  display: flex;
  gap: 20px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 20px;
  scroll-snap-type: x mandatory;
}

@media (max-width:1270px){

header{
    padding:18 px 4%;
    transition:.2s;
} 
header.sticky{
    padding:10px 4%;
    transition:.2s;
}

section{
    padding: 80px 4%;
    transition: .2s;
}
:root{
    --big-font:4.8rem;
    --h2-font: 3.8rem;
    --p-font:1rem;
    transition:.2s;
}
.footer{
    text-align:center;
    background: var(--secound-bg-color);
    padding:34px;
    width: 100%;
}
.footer p{
    font-size: 17px;
    color: var(--second-color);
    letter-spacing: 1px;

}

}


@media(max-width:990px){
    .navbar{
        position:absolute;
        top:-700px;
        left:0;
        right:0;
        flex-direction: column;
        background: var(--bg-color);
        text-align: left;
        transition: all .30s;

    }
    .navbar a{
        display: block;
        padding:1.1rem;
        margin:1.3rem;
        border-left: 2px solid var(--text-color); 

    }
    .navbar a:hover{
        background:var(--main-color);
    }
    .navar a::after{
        display: none;
    }
    .navbar.active{
        top:100%;
    }

}



@media(max-width:300px){

.hero_image{
    display: block;
    margin: 0 auto;
    width: 500px;
}


    .navbar{
        position:absolute;
        top:-700px;
        left:0;
        right:0;
        flex-direction: column;
        background: var(--bg-color);
        text-align: left;
        transition: all .30s;

    }
    .navbar a{
        display: block;
        padding:1.1rem;
        margin:1.3rem;
        border-left: 2px solid var(--text-color); 

    }
    .navbar a:hover{
        background:var(--main-color);
    }
    .navar a::after{
        display: none;
    }
    .navbar.active{
        top:100%;
    }
    .footer{
        width: 100%;
    }
}