*{
    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);
}


.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;
}
.footer p{
    font-size: 17px;
    color: var(--second-color);
    letter-spacing: 1px;
}

}