body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: rgb(255, 255, 255);
}

header {
    position: relative;
    display: flex;
    height: 72px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    color: black;
}

.AudiHeaderLogo{
    position: absolute;
    left: 96px;
    top: 33%;
}


.linkje a {
    text-decoration: none; 
    color: rgb(109, 109, 109);        
    background: none;      
    border: none;           
}

.nav-linkje{
    display: flex;  
    list-style: none;
    padding: 0;
    margin: 0; 
    padding-left: 145px;
}

.linkje {
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    font-size: 17px;
}

.linkje :hover{
    color: rgb(0, 0, 0);
}

.AudiHeaderZoeken {
    position: absolute;
    right: 150px; /* Zet het helemaal rechts */
    top: 50%; /* Centreert het verticaal */
    transform: translateY(-50%); /* Zorgt voor perfecte verticale uitlijning */
}

.AudiHeaderZoeken button {
    display: flex;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.AudiHeaderStyles{
    position: absolute;
    right: 100px; /* Zet het helemaal rechts */
    top: 53%; /* Centreert het verticaal */
    transform: translateY(-50%); /* Zorgt voor perfecte verticale uitlijning */
}

.AudiHeaderStyles button {
    display: flex;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.auto1 {
    position: relative;
    top: 0;
    height: 100vh;
    background-image: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
        url(https://media.audi.com/is/image/audi/country/nl/assets/home-assets/A6e_1920x1080xNL.jpg?width%3D1920);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
}

.button{
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    background-color: rgb(255, 255, 255);
    color: black;
    cursor: pointer;
    gap: 2px;
    border: 2px solid #ffffff;
    padding: 15px;
    margin-left: 105px;
}

.button2{
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    background-color: transparent;
    color: rgb(255, 255, 255);
    cursor: pointer;
    gap: 2px;
    border: 2px solid #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
}

.tekst1 {
    margin-left: 105px; 
    color: #fff;
}

.tekst1 h2{
    font-size: 50px;
    font-weight: normal;
}

.tekst1 h3{
    margin-top: -30px;
    font-size: 20px;
    font-weight: normal;
}

.balk{
    background-color: black;
    height: 56px;
}


.auto-scroll-container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    height: 279px;
    margin-top: 130px;
}

.auto-scroll-container::-webkit-scrollbar {
    display: none; 
}
    
.auto-scroll-item {
    justify-content: center;
    min-width: 300px; 
    height: 200px; 
    margin: 15px; 
    scroll-snap-align: start; 
}

.auto2{
    height: 100vh;
    background-color: rgb(36, 89, 136);   
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.balkje{
    font-size: 13px;
    display: flex;
    align-items: center;
    padding-left: 100px;
    background-color: black;
    color: white;
    height: 87px;
}


.foto {
    display: flex;
    justify-content: center;
    height: 643px;
}

.foto-rij {
    background-color: rgb(255, 255, 255);
    height: 476px;   
    width: 670px;
    padding-left: 30px;
    margin-top: 80px;
    margin-bottom: 90px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    overflow: hidden;    
}

.foto-rij img {
    max-width: 105%; 
    max-height: 149%; 
    object-fit: cover; 
}




.auto3{
    height: 100vh;
    background-image: url(https://media.audi.com/is/image/audi/country/nl/assets/home-assets/q4_e-tron_1920x1080.jpg?width%3D1920);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.auto4{
    margin-top: 31px;
    height: 100vh;
    background-image:url(https://media.audi.com/is/image/audi/country/nl/assets/home-assets/a3-sb-tfsi-e/A3_2023_5801-L-1.jpg?width%3D1920);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.auto5{
    margin-top: 56px;
    height: 100vh;
    background-color: rgb(156, 100, 28);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.auto6{
    margin-top: 56px;
    height: 100vh;
    background-image:url(https://media.audi.com/is/image/audi/country/nl/assets/home-assets/a5-avant-1920x1080.jpg?width%3D1920);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.auto7{
    margin-top: 12px;
    height: 100vh;
    background-image: url(https://media.audi.com/is/image/audi/country/nl/assets/home-assets/Stage_Home_Direct.jpg?width%3D1920);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}



.footer {
    display: flex;
    justify-content: center;
    height: 380px;
    background-color: rgb(0, 0, 0);
    width: 100%;
    position: relative;
    bottom: 0;       
    left: 0;       
}

.sidebar {
    position: fixed;
    right: 0;
    width: 180px;
    height: 50px;
    gap: 5px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transition voor beide bewegingen */
    opacity: 1;
    z-index: 99999;
}

.icon {
    width: 24px;  /* Icoon grootte altijd 24px */
    height: 24px;  /* Icoon grootte altijd 24px */
    fill: #ffffff;
    cursor: pointer;
}

.sidebar .menu-item {
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-1 { top: 235px; }
.sidebar-2 { top: 290px; }
.sidebar-3 { top: 345px; }
.sidebar-4 { top: 400px; }


.sidebar.collapsed {
    transform: translateX(135px);  /* Verschuift de sidebar naar rechts, waardoor deze visueel krimpt */
    opacity: 1;
    transition: 0.3s ease-in-out;
}

.sidebar.collapsed .menu-item {
    opacity: 0;
}

.sidebar.collapsed .icon {
    width: 24px; 
    height: 24px; 
}