*{margin: 0;}


header{
    font-family: "DM Sans", sans-serif;
    font-weight: 300;
    letter-spacing: -0.5px;
    font-size: 2vh;
}



.topheader1{
    display: flex;
}


.leftheader{
    height: 10vh;
    width: 19vw;
    margin-left: 2vw;
    display: flex;
    justify-content: space-between;
    text-align: start
}

p {
    margin-top: 3.5vh;
    font-weight: 200;
}



.rightheader{
    height: 10vh;
    width: 38vw;
    margin-left: 2vw;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: 2vw;
}

p {
    margin-top: 3.5vh;
}


section{
    display: grid;
    display: flex;
    grid-template-columns:repeat(5, 1fr) ;
    grid-template-rows: repeat(2,1fr);
    height: 86vh;
    width: 96vw;
    display: grid;
    column-gap: 1vh;
    row-gap: 1vh;
    margin-left: 2vw;
    margin-right: 2vw; 
    font-family: "DM Sans", sans-serif;
}


a{
    color: black;
    text-decoration: none;
}


a:visited{
    color: black;
    text-decoration: none;
}




div[class^="image"] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 60%;
}


div[class^="image"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Initial opacity for images */
div[class^="image"] {
    opacity: 0; /* Start at 0% opacity */
    transition: opacity 1s ease; /* Smooth fade-in effect */
}

/* Fade-in effect on page load */
.loaded div[class^="image"] {
    opacity: 0.6; /* Images fade in to 60% opacity */
}

/* Hover effect to 100% opacity */
div[class^="image"]:hover {
    opacity: 1; /* Full opacity on hover */
    transition: opacity 0.3s ease; /* Smooth hover transition */
}

/* Start with images hidden */
div[class^="image"] {
    opacity: 0;
    transition: opacity 1s ease; /* Smooth fade-in effect */
}

/* Fade-in effect when the page is fully loaded */
.loaded div[class^="image"] {
    opacity: 0.6; /* Final opacity after load */
}

/* Hover effect to 100% opacity */
div[class^="image"]:hover {
    opacity: 1;
    transition: opacity 0.3s ease;
}


/* Initial hidden state */
.leftheader p {
    opacity: 0;
    transition: opacity 1s ease; /* Smooth fade-in and fade-out effect */
}

/* Fade-in effect on load */
.loaded .leftheader p {
    opacity: 1; /* Fully visible after load */
}

/* Animation fade-out de toute la page */
.fading-out {
    opacity: 0;
    transition: opacity 1s ease;
}


a:hover{
    opacity: 60%;
}