/* SCROLL UITZETTEN 31/01/2026 */
html, body{
    height: 100%;
    overflow-x: hidden; /* geen horizontale scroll */
}


body{
    margin: 0;
    padding: 0;
    background-color: black;
}

/* WAAR JE HELE NAVIGATIE LIGT 30/01/2026*/

.section-wrap-navigation{
    width: 99.9%;
    height: 55em;
    
}

/* HEEL JE HOOFDING NIET RAKEN IS JE NAVIGATIE 30/01/2026*/

.navigation-bar{
    float: left;
    background-color: black; /* ACHTERGROND KLEUR MSS NOG VERANDEREN */
    width: 120em;
    height: 5em;
    
}

/* DIT ZIJN ALLE NAVIGATIE KNOPPEN, LINKER KANT : 30/01/2026*/

.navigation-buttons-left-side{
    
    width: 40em;
    margin-top: 0.8em;
    float: left;
    height: 60%;
}


/* DIT ZIJN ALLE NAVIGATIE KNOPPEN, LINKER RECHTER : 30/01/2026*/

.navigation-buttons-right-side{
    
    width: 40em;
    margin-top: 0.8em;
    float: right;
    height: 60%;
}

/* LOGO GEPLAATS IN HET MIDDEN : 30/01/2026*/

.navigation-center-logo{
    
    width: 5em;
    margin: auto;
    margin-top: 0.90em;
    height: 80%;
}

ul li a{
    float: left;
    padding: 1em;
    text-decoration: none;
    color: rgba(245, 245, 245, 0.637);
    gap: 3.5em;
}

.navigation-buttons-left-side ul{
    width: 37.5em;
    height: 100%;
    display: flex;
    text-decoration: none;
    float: right;
    
    list-style-type: none;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1em;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

.navigation-buttons-right-side ul{
    width: 37.5em;
    height: 100%;
    display: flex;
    text-decoration: none;
    float: right;
    
    list-style-type: none;
    margin: 0;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: 1em;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

/* HHH */

/* TAG LATER ANIMATIE TOEVOEGEN 30/01/2026 */
/* SETUP VAN ANIMATIE ZO DAT HET SMOOTH IS 31/01/2026 */

.navigation-buttons-right-side ul li a, .navigation-buttons-left-side ul li a{
    transition: 
        background-color 0.50s ease, 
        border-color 0.25s ease,
        color 0.45s ease;
}

.navigation-buttons-right-side ul li a, .navigation-buttons-left-side ul li a{
    
    border-radius: 1px;
}

/* HOVER ALS IEMAND ZIJN MUIS DAAROP PLAATST : 30/01/2026
   HEB BORDERS GEVOEGD OM HET MOOIER TE MAKEN OMDAT HET ECHT DAN LELIJK IS 31/01/2026*/


.navigation-buttons-right-side ul li a:hover, .navigation-buttons-left-side ul li a:hover{
    background-color: rgba(75, 75, 75, 0.473);
    border-radius: 1px;
    border: 0px solid rgba(255, 255, 255, 0.432);
    color: whitesmoke;
}


.navigation-buttons-right-side ul li{
    padding-left: 3.38em;
}

.navigation-buttons-left-side ul li{
    padding-right: 4em;
}


.navigation-button li{
    display: flex;
}

/* Waar ik article ga toevoegen zo front page : 30/01/2026 */

.navigation-article-case{
    width: 120em;
    height: 63em;

    float: left;
}

.navigation-article-image-case{
    width: 120em;
    height: 80%;
    float: left;
    
    /* VOOR DEZE HEB IK CHATGPT MOETEN VRAGEN HOE IK HET KON DOEN MEERDERE AFBEELDINGEN OP ELKAAR 30/01/2026 */
    background-image: 
    /* IK SPAM DRIE KEER GRADA.PNG OM HET DONKERDER TE MAKEN */
    url("img/grada.png"),
    url("img/grada.png"),
    url("img/grada.png"),
    url("img/undergradient.png"),
    url("img/final-background.jpeg");
    background-size: cover;
    background-position: center;
}

/* CASE/VAK WAARIN TEKST WORDT GESCHREVEN BIJ ONZE AFBEELDING */

.navigation-article-tekst-case{
    margin: auto;
    float: left;
    width: 48em;
    height: 45%;

    margin-top: 9em;
    margin-left: 7.4em;
}

.navigation-article-header{
    width: 100%;
    height: 50%;
    
    text-align: left;
    float: left
}

.navigation-article-paragraph{
    width: 100%;
    height: 20%;
    float: left;
    
}

.navigation-article-button-case{
    width: 100%;
    height: 29%;
    float: left;
}

.navigation-article-header h1, .main-title-case h1{
    font-family: "Imperial Script", cursive;
    font-weight: 500;
    text-align: left;
    font-style: normal;
    color: white;
    font-size: 4em;
}

.navigation-article-paragraph p{
    font-family: "Roboto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    color: white;
    float: left;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "GRAD" 0;
}

/* haal standaard ul voor onze buttons spacing weg 31/01/2026 */
.navigation-button-choices ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1em;
    align-items: center;
}



.navigation-button-choices ul li a{
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 1em;
    float: left;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "GRAD" 0;    
    display: flex;              
    align-items: center;
    justify-content: center;
    height: 3.2em;              
    width: 10em;                
    padding: 0; 
    margin-right:1em;                
    float: none;                /* ik stop even float voor buttons */
    border: 0px solid rgb(0, 117, 163);
    border-radius: 1px;
    color: rgba(255, 255, 255, 0.637);
    text-decoration: none;
}

/* HIER START IK DE ANIMATIES VOOR ALS JE JE MUIS EROVER DOET 31/01/2026 */

.navigation-button-choices ul li a{
    transition: 
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

/* NAVIGATIE BIJNA KLAAR, LATER MSS EENTJE VOEGEN MET ACHTERGROND DIE BEWEEGT 31/01/2026 */

.navigation-button-choices ul li:nth-child(1) a:hover{
    background-color: rgba(255, 255, 255, 0.068);
}

.navigation-button-choices ul li:nth-child(2) a{
    color: rgba(255, 255, 255, 0.863);
    background-color: rgb(0, 117, 163);
}

.navigation-button-choices ul li:nth-child(2) a:hover{
    color: rgba(255, 255, 255, 0.637);
    background-color: rgb(0, 97, 136)
}


.navigation-button-choices ul li:nth-child(1) a{
    border: 1px solid gray;
}

/* LOGO IN HET MIDDEN BIJ OVERGANG OM TE VULLEN OMDAT HET KAN 01/02/2026 */

.logo-foot{
    
    width: 18em;
    height: 15em;
    margin: auto;
    color: white;
}

/* NU BEGINNEN WE DE SHOWCASE ZO VAN WAT WE VERKOPEN DUS HIER IS DE MAIN CASE DIE ALLES BEVAT 31/01/2026*/

.main-article-case{
    float: left;
    width: 100%;
    height: 190vh;
    background-color: rgb(255, 255, 255);
    background-image: 
    url("img/background-fade.png"),
    url("img/top-gradient.png"),
    url("img/top-gradient.png"),
    url("img/top-gradient.png"),
    url("img/under-gradient.png"),
    url("img/under-gradient.png"),
    url("img/top-gradient.png");
    background-size: cover;
    background-position: center;
}

/* Hier bij de main-cases, is er sowieso een betere manier om ze allemaal naast elkaar te zetten maar ik heb gewoon reken werk gedaan is niet zo moeilijk 31/01/2026*/

.main-case{
    margin: auto;
    margin-top: 1em;
    width: 110em;
    height: 88%;
    
}

.main-case-first{
    width: 61%;
    height: 43%;
    
    float: left;
    margin-right: 7.350em;
        background-image: 
    url("img/under-gradient.png"),
    url("img/undergradient.png"),
    url("img/classe\ a.avif");
    background-size: cover;
    background-position: center;
    
}

.main-case-second{
    width: 32%;
    height: 43%;
    
    float: left;
    background-image: 
    url("img/background-fade.png"),
    url("img/under-gradient.png"),
    url("img/undergradient.png"),
    url("img/merco.avif");
    background-size: cover;
    background-position: center;
}

.main-case-third{
    margin-top: 2.962em;
    margin-right: 1.962em;
    width: 32%;
    height: 43%;
    
    float: left;
    background-image: 
    url("img/background-fade.png"),
    url("img/under-gradient.png"),
    url("img/undergradient.png"),
    url("img/140y.avif");
    background-size: cover;
    background-position: center;
}

.main-case-fourth{
    margin-top: 2.962em;
    margin-right: 1.992em;
    width: 32%;
    height: 43%;
    
    float: left;
    background-image: 
    url("img/background-fade.png"),
    url("img/under-gradient.png"),
    url("img/undergradient.png"),
    url("img/third-image.avif");
    background-size: cover;
    background-position: center;
}

.main-case-fifth{
    margin-top: 2.962em;
    width: 32%;
    height: 43%;
    
    float: left;
    background-image: 
    url("img/background-fade.png"),
    url("img/under-gradient.png"),
    url("img/undergradient.png"),
    url("img/new-glb.avif");
    background-size: cover;
    background-position: center;
}

/* CASE WAARIN IK INFORMATIE ONDER AFBEELDING GA ZETTEN 31/01/2026*/ 

.main-case-bar{
    width: 100%;
    height: 29.8%;
    
    margin-top: 30em;
    background-color: black;
    border-radius: 11px;
}

/* IK ZET HIER EEN ANIMATIE OP ELKE MAIN-CASE VOOR ZO ZOOM IN EFFECT 31/01/2026 */

.main-case-fifth, .main-case-fourth, .main-case-third, .main-case-second, .main-case-first{
    background-size: 100% 100%;
    background-position: center;
    transition: background-size 0.6s ease;
    border-radius: 11px;
}

.main-case-fifth:hover, .main-case-fourth:hover, .main-case-third:hover, .main-case-second:hover, .main-case-first:hover{
    background-size: 110% 110%;
}

/* NA INSTELLEN VAN ELKE IMAGE CASE GA IK NU IN DETAILS GAAN 31/01/2026 
EN HIER IS ONZE EERSTE CASE GEMAAKT EN IK GA ALLES PROBEREN ZO MAKEN IN 1 KEER 31/01/2026 
bon ik heb alles gewoon in HTML kant copy/paste voor mijn main-case bar te kunnen gebruiken bij alle onderdelen 1/02/2026
En nu uur of twee later heb ik alles correct ingevuld en border-box een radius gegeven zonder het mooi afgerond is 1/02/2026
*/


.main-case-titel{
    width: 100%;
    height: 25%;
    
    float: left;
    color: white;
    font-family: "Roboto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    padding-top: 0.6em;
    padding-left: 0.4em;
    font-size: 2em;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "GRAD" 0;
}

.main-case-description{
    width: 100%;
    height: 7%;
    padding-left: 1em;
    color: rgba(255, 255, 255, 0.753);
    
    float: left;
}

.main-case-button ul{
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;      
    display: flex;
    margin-top: 2em;
    margin-left: 1em;
    gap: 1em;
    align-items: center;
}

.main-case-button ul li a{
    float: left;
    font-family: "Roboto", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 1em;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 3.2em;
    width: 10em;

    padding: 0;
    text-decoration: none;
    border-radius: 1px;

    transition:  text-decoration-thickness 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.main-case-button ul li:nth-child(1) a{
    border: 0;
    background-color: rgb(0, 117, 163);
    color: rgba(255, 255, 255, 0.863);
}

.main-case-button ul li:nth-child(1) a:hover{
    background-color: rgb(0, 97, 136);
    color: rgba(255, 255, 255, 0.637);
}

.main-case-button ul li:nth-child(2) a{
    border: 1px solid gray;
    border-radius: 1px;
    text-decoration-thickness: 0em;
    background: transparent;
    color: rgba(204, 204, 204, 0.75);
}

.main-case-button ul li:nth-child(2) a:hover{
    text-decoration-line: underline;
    text-decoration-thickness: 0.01em;
    background-color: rgba(255, 255, 255, 0.06);
}

/* TEN SLOTTE GEEN INSPIRATIE MEER EINDIG IK AL MET KLEINE FOOTER VOOR NU OM AAN DE ANDERE PAGINA'S TE WERKEN ! 01/02/2026 */

.footer-banner{
    width: 120em;
    height: 2em;
    background-color: black;
    float: left;
    color: white;
}

.footer-banner h1{
    text-align: center;
    font-family: "Roboto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    padding-top: 0.6em;
    padding-left: 0.4em;
    font-size: 0.5em;
    font-style: normal;
    font-variation-settings:
        "wdth" 100,
        "GRAD" 0;
}