/* Experience page (nog eigen css file voor maken)*/
html{
    scroll-behavior:smooth;
  }

body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
  }

.experience{
    background-color:white;
}

h1, h2, label{
font-family: "Yeseva One", serif;
font-weight: 400;
font-style: normal;
letter-spacing:-1.4px;
font-size:36px;
}

h1 {
    font-size:100px
}

p {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;

    color: rgba(10, 51, 35, 1); 
    font-size: 24px; 
    line-height: 1.5em;
    letter-spacing: -1.2;
  }

.navbar{
    position:relative;
    top:0; 
    width:100%;
    background-color: white;
    z-index: 1000;
}

.navbar li{
    display:inline-block;
    padding: 3%;
}

.navbar ul {
    margin:0;
}

.navbar a, .menu-toggle  {
    text-decoration:none;
    color: rgba(10, 51, 35, 1);
    padding:14px 16px;
    font-size: 20px;

    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}


.navbar a:hover{
        color:rgba(211, 150, 140, 0.6);
    }

.menu-toggle:hover{
    color:rgba(10, 51, 35, 1);
}

    
/* Button to toggle the menu */
.menu-toggle {
    display: none; 
    background-color: white;
    color:rgba(211, 150, 140, 0.6);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    text-align:center;
}

/* Media query for navigation bar */
@media (max-width: 600px) {
    .navbar {
        /* Stacks elements vertically */
        display: flex;
        flex-direction: column;
        align-items: flex-start; 
    }

    .menu-toggle {
        display: block; 
        margin: 14px 10px; 
    }

    .navbar ul {
        display: none;
        flex-direction: column; 
        width: 100%;
    }

    .navbar li {
        width: 100%; 
        text-align: left; 
        display: block; 
    }

    /* When the 'show' class is added to the navbar, show menu */
    .navbar.show ul {
        display: flex; 
    }
}

/* .banner-3{
    padding: 2%;
    margin:auto;
} */


.exptext{
    display:flex;
    flex-direction:column;
    width:50%;
    max-width:1200px;
    margin: 10px auto;
    border-radius: 12px;
    padding: 50px 15px;
    /* position:relative; */
    border: white;
}

.exptext h1{
    font-size:28px;
}

.exptext::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px; 
    height: 100%;
    width: 1px; 
    background-color: white;
    border-radius: 12px 0 0 12px; 
}

.ex {
    color:rgba(10, 51, 35, 1);
    font-size:24px;
}

.references {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:flex-start;
    min-width:60%;
    gap: 40px;

    border: 2px solid white;
    padding:2%;
}

.references div{
    max-width:600px;
}


.reftitle{
    display:flex;
    flex-direction:column;
    justify-content:left;
    align-items:center;
    width:100%;
    font-size:44px;
    color:rgb(131, 153, 88);
}


.ref {
    display:flex;
    flex-direction:column;
    width: 70%;
    max-width:auto;
    color:rgba(10, 51, 35, 1);
}

.reftext{
    font-style: italic;
    color:rgb(131, 153, 88);
}

.reftext2{
    font-style: italic;
    color:rgba(10, 51, 35, 1);
}

/* accordion */
.accordion{
    margin: 60px auto;
    width: 100%;
    background-color:white;
    padding:0;
}

.accordion li{
    list-style: none;
    width:100%;
    margin:auto;
    padding:10px;
    box-sizing: border-box;
}


.accordion li label{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    /* font-size: 44px; */

    cursor:pointer;
    color:rgba(10, 51, 35, 1);
}

.accordion li label:hover{
    color:rgba(211, 150, 140, 0.6);
}

label::before{
    margin-right: 10px;
    font-size: 30px;
    font-weight: 600;
}

input[type="checkbox"]{
    display: none;
}

.accordion .content{
    position:relative;
    padding:0 10px;
    line-height:26px;
    max-height:0;
    overflow:hidden;
    transition: max-height 0.5s, padding 0.5s ;
    color:rgba(10, 51, 35, 1);
}

.accordion input[type="checkbox"]:checked ~ .content {
    max-height: 100%; 
    padding: 10px 10px 20px;
}

/* eind accordion */
.deets{
    color:rgb(131, 153, 88);
    text-align:center;
}

/* animation */
.hidden{
    opacity:0;
    transition: all 0.7s;
}

.show{
    opacity: 1;
    transform: translateX(0);
}

.footer{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    background-color:rgba(211, 150, 140, 0.6);
    /* padding:1%; */
    width:100%;
    margin-top: auto;
}

.footer p{
    font-size: 14px;
    margin: 0;
    padding: 10px 5px;
}

.footer img{
    height: 20px;
    width: 20px;
    margin: 0 10px;
}

.fcolor{
    color:rgb(16, 86, 102);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}



/* document button */
.document {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
    font-size: 16px;
    background-color: white;
    color: #162c3a;
    border-radius: 12px;
    border: solid 1px #162c3a;
    cursor: pointer;
    padding: 10px 15px;
    display: inline-block;
    margin: 6%;
}

.document:hover {
    background-color: #162c3a;
    color: #f7f3e8;
}

a:has(.document) {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

/* media query for headers */
@media (max-width: 600px) {
    .title h1 {
        font-size: 2em;  
        width: 100%;    
        text-align: center;
        padding: 0 10px; 
    }

    .exptext {
        width: 80% !important;
        padding: 0 10px;
        word-spacing:normal;
        background-color: none;
    }

    .references {
        flex-direction: column; /* stack items vertically */
        align-items: center;    
    }

    .ref {
        width: 100% !important;
        padding: 0 10px;
        word-spacing:normal;
    }

}