/**************/
/* CSS REMEDY */
/**************/
*, *::after, *::before {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;  
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
    --color-text: black;
    --background-color: white;
    --color-nav: #666666;
    --hover-color: black;
    --theme-color: blue;
    font-family: Audi-type;
}

@font-face {
    font-family: Audi-type;
    src: url(../fonts/AudiTypeVF_Lat.woff2);
}

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

.darkmode { 
    --color-text: white;
    --background-color: black;
    --color-nav: white; 
    --hover-color: rgb(231, 197, 138);
     font-family: Audi-type;
}

.darkmode .bekijk-a6 {
    color: white;
    background-color: var(--background-color);
    border: 2px solid #43ea0f;
    box-shadow: 0 0 20px 0 #43ea0f;
}

.darkmode.configureer-a6 { 
    color: #43ea0f;
    background-color: var(--background-color);
    border: 2px solid #43ea0f;
    box-shadow: 0 0 20px 0 #43ea0f;
}

.darkmode .bekijk-a6:hover { 
background-color: #33b30c;
color: #111;
box-shadow: 0 0 80px 0 #43ea0f;
}

.darkmode .configureer-a6 { 
    border: 2px solid #43ea0f;
    color: black;
    box-shadow: 0 0 20px 0 #43ea0f;
}

.darkmode .configureer-a6:hover { 
    color: black;
    box-shadow: 0 0 80px 0 #43ea0f;
}

.darkmode .bekijk-q6 { 
    border: 2px solid #43ea0f;
    color: white;
    box-shadow: 0 0 20px 0 #43ea0f;
}

.darkmode .bekijk-q6:hover { 
background-color: #33b30c;
color: #111;
box-shadow: 0 0 80px 0 #43ea0f;
}

.darkmode .configureer-q6 { 
    border: 2px solid #43ea0f;
    color: white;
    box-shadow: 0 0 20px 0 #43ea0f;
}

.darkmode img { 
    background-color: white;
}

#thema-switch { 
display: flex;
justify-content: center;
align-items: center;
position: fixed;
text-decoration: none;
top: 10px;
left: 20px;
height: 50px;   
width: 50px;
padding: 0;
border-radius: 50%;
background-color: var(--theme-color);
}


#thema-switch svg:last-child{
    display: none;
}

.darkmode #thema-switch svg:first-child{
    display: none;
}
.darkmode #thema-switch svg:last-child{
    display: block;
}

img { 
    margin-top: auto;
    padding: 0px;
    height: 30px;
    margin-left: 0px;
}

.feedback { 
    position: fixed;
    right: 0em;
    top: 6.5em;
    height: 110px;
    width: 30px;
    z-index: 100;
}

/*chat-gpt*/

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 80px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000;
    max-width: 400px;
    width: 100%;
}


.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header .logo {
    width: 100px; 
    height: auto;
    margin-left: 0px; 
}

.close-button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.modal-body-specifiek {
    margin-top: 10px;
    border-style: solid;
    transition: all 0.3s ease;
}

.modal-body-specifiek:hover { 
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background-color: #f0f0f0;
    border-color: #888;
}

.modal-body-algemeen { 
    margin-top: 10px;
    border-style: solid;
    transition: all 0.3s ease;
}

.modal-body-algemeen:hover { 
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background-color: #f0f0f0;
    border-color: #888;
}

.modal-body-chat { 
    margin-top: 10px;
    border-style: solid;
    transition: all 0.3s ease;
}

.modal-body-chat:hover { 
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    background-color: #f0f0f0;
    border-color: #888;
}

.modal.open {
    display: block;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

#overlay.active {
    display: block;
}

.logo { 
    margin-top: auto;
    height: 28px;
    margin-left: 70px;
    animation-name: slide-left;
    animation-duration: 2s;
}

.logo:hover { 
transition: none;
}

/*chat-gpt*/

.logo-feedback {
    margin-top: auto;
    height: 28px;
    margin-left: 0px;
}

@keyframes slide-left { 
    from{transform: translateX(1200%);}

}

@keyframes slide-right { 
    to{transform: translateX(1200%);}

}

.zoek-icoon {
position: absolute;
height: 20px;
width: auto;
right: 7em;
}

.account-icoon { 
position: absolute;
height: 20px;
width: auto;
right: 5em;
}

nav { 
    margin: 0px;
    margin-bottom: -8px;
    padding: 0%;
}

ul { 
    color: var(--color-nav);
    list-style: none;
    padding: 0;
    margin: 23px;
    display: flex;
    justify-content: left;
}

nav li {
    color: var(--color-nav);
    font-family: Audi-type;
    font-size: 17px; 
    margin-bottom: 0px;
    margin-right: 5px;
    margin-left: 28px;
}

nav a {
    position: relative; 
    color: var(--color-nav);
    font-family: Audi-type;
    font-size: 17px; 
    margin-bottom: 0px;
    margin-right: 5px;
    margin-left: 0px;
    text-decoration: none;
}

nav a::after {
    content: '';
    position: absolute;
    left: 50%; 
    bottom: -2px; 
    width: 0; 
    height: 2px; 
    background-color: var(--hover-color, black); 
    transform: translateX(-50%) scaleX(0); 
    transform-origin: center; 
    transition: transform 0.5s ease-in-out; 
}

nav a:hover::after {
    width: 100%; 
    transform: translateX(-50%) scaleX(1); 
}

nav a:hover {
    color: var(--hover-color); 
}

nav li:hover {
    color: var(--hover-color); 
}

.elektrisch-hoofd-nav li {
    color: var(--color-nav);
    font-family: Audi-type;
    font-size: 17px; 
    margin-bottom: 0px;
    margin-right: 10px;
    margin-left: 28px;
    overflow: hidden;
    transition: color 0.3s ease;
}

.elektrisch-hoofd-nav li::after { 
    content: '';
    position: absolute;
    left: 50%; 
    bottom: -2px; 
    width: 0; 
    height: 2px; 
    background-color: var(--hover-color, black); 
    transform: translateX(-50%) scaleX(0); 
    transform-origin: center; 
    transition: transform 0.5s ease-in-out; 
}

.elektrisch-hoofd-nav li:hover { 
    color: var(--hover-color); 
}

.elektrisch-hoofd-nav li:hover::after { 
    width: 100%; 
    transform: translateX(-50%) scaleX(1); 
}

.uitgelichte-modellen h2 { 
    display: flex;
    justify-content: center;
    font-family: Audi-type;
    font-size: 30px;
    font-weight: 400;
    margin: 20px;
    margin-top: 70px;
    letter-spacing: 5px;
    color: black
}

.p-etron { 
    position: absolute; 
    top: 0%;
    margin-top: 180px;
    font-size: 16px;
    font-weight: 200;
    margin-left: 100px;
    margin-bottom: 50px;
    color: white;
    font-family: Audi-type;
    letter-spacing: 2px;
}

.bekijk-a6 { 
    position: absolute;
    top: 0%;
    padding: 18px 50px;
    margin-top: 220px;
    margin-left: 100px;
    font-family: Audi-type;
    color: var(--color-text);
    background-color: var(--background-color);
    transition: 500ms;
}

.bekijk-a6::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: white;
    z-index: -1;
    border-radius: 50%;
}

.bekijk-a6:hover {
    background-color: #666666;
    transition: 500ms;
}

.configureer-a6 { 
    position: absolute;
    top: 0%;
    margin-top: 220px;
    margin-left: 450px;
    padding: 18px 50px;
    padding-bottom: 15px;
    font-family: Audi-type;
    font-weight: 100;
    color: black;
    border-style: solid;
    transition: 250ms;
    z-index: 0;
}

.configureer-a6:hover { 
    color: #666666;
    transition: 250ms;
}

.balk { 
    display: block;
    height: 50px;
    width: 100%;
    margin-top: -10px;
    background-color: var(--background-color)
}

.witte-balk { 
    display: block;
    height: 50px;
    width: 100%;
    margin-top: -10px;
    background-color: var(--background-color);
}

.klik-alle-modellen { 
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    font-family: Audi-type;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-text);
}

.klik-alle-modellen:hover {
color: var(--hover-color); 
transition: 500ms;
}

.etron img {
    position: relative;
    background-size: cover;
    text-align: center;
    color: var(--color-text);
    width: 100%;
    height: 100vh;
    filter: brightness(85%) contrast(120%);
}

.etron h1 { 
    position: absolute; 
    top: 0%;
    margin-top: 110px;
    font-size: 40px;
    font-weight: 400;
    margin-left: 100px;
    margin-bottom: 50px;
    color: white;
    font-family: Audi-type;
    letter-spacing: 3px;
}

.uitgelichte-modellen img { 
    width: 100%;
    height: 100vh;
}

/* Algemene styling voor de sectie */
.uitgelichte-modellen {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-color: var(--background-color);
}

.achtergrond-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    z-index: 1;
}

/* Styling voor de carousel container */
.carousel-container {
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
}

/* Styling voor de carousel */
.carousel {
    position: absolute;
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: transform 0.5s ease-in-out;
}

.carousel li {
    flex-shrink: 0;
    width: 300px;
    height: auto;
    text-align: center;
}

.carousel img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.carousel img:hover {
    transform: scale(1.10);
}

/* Styling voor de knoppen */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background-color 0.3s ease-in-out;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-prev:hover,
.carousel-next:hover {
    color: #111;
}


.brandstofverbruik { 
padding: 1.5em;
color: var(--color-nav);
margin-left: 100px;
font-family: Audi-type;
font-size: small;
}

video { 
    width: 100%; 
    height: 100vh; 
    object-fit: cover; 
}

.play-q6 h2 {
    position: absolute;
    color: white;
    margin-top: 1em;
    font-family: Audi-type;
    letter-spacing: 3px;
    font-size: 40px;
    font-weight: 400;
    margin-left: 100px;
}

.play-q6 p { 
    position: absolute;
    color: white;
    margin-top: 5em;
    font-family: Audi-type;
    letter-spacing: 3px;
    font-size: 20px;
    font-weight: 400;
    margin-left: 100px; 

}

.bekijk-q6 { 
    position: absolute;
    top: 0%;
    padding: 18px 50px;
    margin-top: 2160px;
    margin-left: 100px;
    font-family: Audi-type;
    color: var(--color-text);
    background-color: var(--background-color);
    text-decoration: none;
    transition: 500ms;
}

.bekijk-q6:hover { 
   background-color: var(--background-color);
   transition: 500ms;
}

.configureer-q6 { 
    position: absolute;
    top: 0%;
    padding: 18px 50px 15px;
    margin-top: 2160px;
    margin-left: 385px;
    border-style: solid;
    font-family: Audi-type;
    color: white;
    text-decoration: none;
    transition: 500ms;
}

.groep1 { 
    margin-bottom: 5em;
}

.groep1 img { 
width: 80vh;
height: 40vh;
margin-left: 60px;   
margin-bottom: -50px;
margin-top: 60px;
filter: brightness(75%);
transition: transform 0.3s ease-in-out;
}

.groep1 h3 { 
    z-index: 100;
}

h3.bekijk-audi-q5 {
    position: absolute;
    color: white;
    margin-left: 220px;
    margin-top: 300px;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 2px;
    transition: opacity 0.3s ease-in-out;
}

h3.op-de-hoogte { 
    position: absolute;
    color: white;
    margin-left: 80px;
    margin-top: 300px;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 2px;
    transition: opacity 0.3s ease-in-out;
}


.groep1 img:hover { 
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out; 
}

h3.stories-progress { 
    position: absolute;
    color: white;
    margin-left: 1000px;
    margin-top: -40px;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 2px;  
}

h3.audi-nieuws {
    position: absolute;
    color: white;
    margin-left: 900px;
    margin-top: -40px;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 2px; 
}

.volledig-elektrische-modellen img { 
    position: relative;
    background-size: cover;
    text-align: center;
    color: var(--color-text);
    width: 100%;
    height: 100vh;
    filter: brightness(85%) contrast(120%);
}

.gerelateerde-pagina {
    display: flex;
    justify-content: left;
    color: var(--color-text);
    font-family: Audi-type; 
    font-size: 20px;
    letter-spacing: 2px;
}

.tweede-navigatie { 
    padding: 0%;
    margin: 0;
}

.volledig-elektrische-modellen h1 { 
    position: absolute;
    color: white;
    margin-top: 1em;
    font-family: Audi-type;
    letter-spacing: 3px;
    font-size: 40px;
    font-weight: 400;
    margin-left: 90px;
    margin-top: -800px;
}

.elektrisch-volgens-audi h2{ 
    font-family: Audi-type;
    font-weight: 300;
    font-size: 40px;
    color: var(--color-text);
    margin-top: 3em;
    margin-bottom: -20px;
    margin-left: 120px;
    letter-spacing: 3px;
}

.elektrisch-volgens-audi p { 
    font-family: Audi-type;
    text-align: left;
    color: var(--color-text);
    margin-top: 3em;
    margin-left: 120px;
    margin-right: 160px;
    margin-bottom: 8em;
    line-height: 30px;

}

.audi-a6-avant h2 { 
    font-family: Audi-type;
    font-weight: 300;
    font-size: 40px;
    margin-top: 3em;
    margin-bottom: 20px;
    margin-left: 120px;
    letter-spacing: 3px;
    color: var(--color-text);
}

.audi-a6-avant p { 
    font-family: Audi-type;
    text-align: left;
    color: var(--color-text);
    margin-top: 1em;
    margin-left: 120px;
    margin-right: 160px;
    margin-bottom: -3em;
    line-height: 30px;

}

.audi-a6-avant img { 
    position: absolute;
    height: 350px;
    width: auto;
    margin-left: 800px;
    margin-top: 0;
}

.audi-a6-avant ul { 
    flex-direction: column;
    text-align: left;
    margin-left: 170px;
    font-family: Audi-type;
}

.avant-list li { 
margin-top: 50px;
}

.avant-list li::before{ 
position: absolute;
margin-left: -40px;
margin-top: -1em;
content: url("../images/pijltje.svg");
width: 10px;
color: var(--color-text);
font-family: Audi-type;
}

.meer-info-avant { 
position:absolute;
margin-top: 30px;
margin-left: 140px;
font-family: Audi-type;
}

.configureren-avant { 
    position:absolute;
    margin-top: 30px;
    margin-left: 280px;
    font-family: Audi-type;
}

/*css-tricks*/

.meer-info-avant::after { 
    content: url("../images/pijltje.svg");
}

.configureren-avant::after { 
    content: url("../images/pijltje.svg");
}

/*css-tricks*/

.audi-a6-sportback h2 { 
    font-family: Audi-type;
    font-weight: 300;
    font-size: 40px;
    margin-top: 4em;
    margin-bottom: 20px;
    margin-left: 120px;
    letter-spacing: 3px;
    color: var(--color-text);
}

.audi-a6-sportback p {
    font-family: Audi-type;
    text-align: left;
    color: var(--color-text);
    margin-top: 1em;
    margin-left: 120px;
    margin-right: 160px;
    margin-bottom: -3em;
    line-height: 30px;
}

.audi-a6-sportback img {
    position: absolute;
    height: 350px;
    width: auto;
    margin-left: 800px;
    margin-top: 0;
}

.sportback-list { 
    flex-direction: column;
    text-align: left;
    margin-left: 170px;
    font-family: Audi-type;
}

.sportback-list li {
    margin-top: 50px;
}

.sportback-list li::before{ 
    position: absolute;
    margin-left: -40px;
    margin-top: -1em;
    content: url("../images/pijltje.svg");
    width: 10px;
    color: var(--color-text);
    font-family: Audi-type;
}

.meer-info-sportback { 
position:absolute;
margin-top: 30px;
margin-left: 140px;
font-family: Audi-type;
}

.configureren-sportback {
position:absolute;
margin-top: 30px;
margin-left: 280px;
font-family: Audi-type;
}

.meer-info-sportback::after { 
    content: url("../images/pijltje.svg");

}

.configureren-sportback::after { 
    content: url("../images/pijltje.svg");
    
}

.audi-s6 h2 { 
    font-family: Audi-type;
    font-weight: 300;
    font-size: 40px;
    margin-top: 3em;
    margin-bottom: 20px;
    margin-left: 120px;
    letter-spacing: 3px;
    color: var(--color-text);

}

.audi-s6 p { 
    font-family: Audi-type;
    text-align: left;
    color: var(--color-text);
    margin-top: 1em;
    margin-left: 120px;
    margin-right: 160px;
    margin-bottom: -3em;
    line-height: 30px;
}

.audi-s6 img { 
    position: absolute;
    height: 350px;
    width: auto;
    margin-left: 800px;
    margin-top: 0;
}

.s6-list { 
    flex-direction: column;
    text-align: left;
    margin-left: 170px;
    font-family: Audi-type;
}

.s6-list li { 
    margin-top: 50px;
}

.s6-list li::before { 
    position: absolute;
    margin-left: -40px;
    margin-top: -1em;
    content: url("../images/pijltje.svg");
    width: 10px;
    color: #333333;
    font-family: Audi-type;
}

.meer-info-s6 { 
position:absolute;
margin-top: 30px;
margin-left: 140px;
font-family: Audi-type;
}

.configureren-s6 { 
position:absolute;
margin-top: 30px;
margin-left: 280px;
font-family: Audi-type;
}

.meer-info-s6::after { 
content: url("../images/pijltje.svg");
}

.configureren-s6::after { 
content: url("../images/pijltje.svg");
}

.meer-elektrisch-rijden { 
    display: flex;
    justify-content: center;
    margin-top: 300px;
    margin-bottom: 100px;
    font-size: 50px;
    top: 0%;
    padding: 80px 50px;
    letter-spacing: 3px;
    font-family: Audi-type;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease-out;
    z-index: 100;
}

.meer-elektrisch-rijden.visible { 
    opacity: 1;
    transform: translateY(0);
}


.hidden { 
    display: flex;
    justify-content: center;
    margin-top: 300px;
    margin-bottom: 100px;
    font-size: 50px;
    top: 0%;
    padding: 80px 50px;
    letter-spacing: 3px;
    font-family: Audi-type;
    color: white;
    background-color: black;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease-out;
    z-index: 100;
}

.hidden.visible { 
    opacity: 1;
    transform: translateY(0);
}


@media screen and (max-width: 375px) {

    h2 { 
        margin-left: 2.5em;
        margin-top: 1em;
        font-size: 1.5em;
        display:flex;
    }

    .logo { 
        display: flex;
        justify-content: center;
        height: 24px; 
        width: 69px;
        margin-left: 125px;
    }

    .zoek-icoon { 
        height: 15px;
        right: 2em;
    }

.bekijk-a6 { 
    padding: 30px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 550px;
    font-size: 14px;
    color: white;
    background-color: #111;
}

.configureer-a6 { 
    padding: 20px;
    padding-right: 50px;
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 635px;
    font-size: 14px;
    color: black;
}

li { 
    display: none;
}

.zoek-icoon { 
    display: none;
}

.groep1 img { 
 width: 50vh;
 margin-left: 15px;
 margin-right: 10px;
}

.brandstofverbruik { 
    margin-left: 10px;
    margin-right: 10px;
    font-size: 10px;
}

video { 
    width: 100%;
    height: fit-content;
}

.etron h1 { 
    position: absolute; 
    top: 0%;
    font-size: 30px;
    font-weight: 400;
    margin-left: 20px;
    font-family: Audi-type;
}

.p-etron { 
    position: absolute; 
    top: 0%;
    margin-top: 200px;
    font-size: 16px;
    font-weight: 200;
    margin-left: 20px;
    margin-bottom: 50px;
    color: white;
    font-family: Audi-type;
    letter-spacing: 2px;
}

.uitgelichte-modellen .a3 {
    margin-top: 1150px;
    margin-left: 20px;
    height: auto;
    width: 50vh;
}

.etron img {
    width: 100%;
    filter: brightness(85%) contrast(120%);
}

.feedback { 
    top: 4em;
}



}