/* Slideshow container */
.slideshow-container {
  width: 100%;
  height: 30vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;

}

.slide-img {
    width: 40vw;
    height: 25vw;
    display: flex;
}

img.slideshow {
    max-width: 40vw;
    max-height: 25vw;
    margin: 0 auto;
}

.slide-text {
    width: 40vw;
    height: 25vw;
    display: flex;
    flex-direction: column;
    /*padding: 0 2.5vw;*/
    font-family: Verdana,sans-serif; 
    overflow: hidden;
}

.slide-text h2 {
    font-size: 2.5vw;
    margin: 1.25vw 0;
}

.slide-text p {
    font-size: 1.2vw;
    margin: 0 0 1vw 0;
    line-height: 1.8vw;
}

.read-more-btn {
    border-radius: 1vw 0 1vw 0;
    background-color: #2B388F;
    border: none;
    color: white;
    text-align: center;
    font-size: 1.4vw;
    height: 3vw;
    width: 14vw;
    padding-top: 0.6vw;
    transition: all 0.5s;
    cursor: pointer;
    letter-spacing: 0.1vw;
    text-decoration: none;
    font-weight: bold;
    overflow: hidden;
  }

#read-more-btn-id{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1.25vw;
    /*font-size: 28px;*/
    margin-left: 43vw;
    height: auto;
}

.read-more-btn {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: padding-right 0.3s ease, padding-left 0.3s ease;
  }


  
.read-more-btn:after {
    content: '❯';
    position: absolute;
    opacity: 0;  
    top: 0.5vw;
    right: -1vw;
    transition: right 0.3s ease, opacity 0.3s ease;
    color: #8BC53F;
  }
  
.read-more-btn:hover{
    padding-right: 1.5vw;
    padding-left: 0vw;
  }

.read-more-btn:hover:after {
    opacity: 1;
    right: 1vw;
  }

/* Container for the cards */
.modern-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    padding: 1rem;
    background-color: #8BC53F;
}

/* Individual card */
.modern-card {
    background-color: #ffffff; /* White */
    border: 1px solid #EFEFEF; /* Light Gray */
    border-radius: 12px;
    padding: 1.5rem;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

#yanick-footer-foto{
    /*width: 100%;*/
    height: 100%;
    border-radius: 50%;
    top: 200px;
}

/* Card Heading */
.modern-card h2 {
    color: #113428; /* Dark Green */
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Card Text */
.modern-card p {
    color: #333333; /* Charcoal */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Card Image */
.modern-card img {
    max-width: 100px;
    margin-bottom: 1.5rem;
    opacity: 0.85;
    transition: opacity 0.3s;
}

.modern-card img:hover {
    opacity: 1;
}

/* Modern Button */
.modern-button {
    background: linear-gradient(90deg, #37EDAB, #459578); /* Gradient Teal/Green */
    color: white;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: background 0.3s, box-shadow 0.3s;
}

.modern-button:hover {
    background: linear-gradient(90deg, #459578, #37EDAB); /* Reverse Gradient */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}


.explain-text{
    font-size: 1.2vw;
    margin: 1.25vw 0;
    line-height: 1.8vw;
    font-family: Verdana,sans-serif;
}

.arrow {
    width: 10vw;
    height: 30vw;
    display: flex;
}

/* Hide the images by default */
.mySlides {
  display: flex;
  height: 25vw;
  width: 80vw;
  margin: 2.5vw 0vw;
  overflow: hidden;
}

/* Hide all slides except the first one by default */
.mySlides:not(:first-child) {
    display: none;
  }

/* Next & previous buttons */
.prev, .next {
    display: flex;
    cursor: pointer;
    position: absolute;
    margin-top: 13.5vw;
    padding: 0.2vw 1.3vw 0.4vw 1vw;
    color:white;
    font-weight: bold;
    font-size: 2vw;
    border-radius: 1vw 0 1vw 0;
    user-select: none;
    background-color: #8BC53F;
    transition: background-color 0.3s ease;
}

/* Position the "next button" to the right */
.next {
  right: 4vw;
  float: right;
  padding: 0.2vw 1.1vw 0.4vw 1.2vw;
}

.prev {
    left: 4vw;
}

.prev:hover, .next:hover {
  background-color: #45631e;
}

/* The dots/bullets/indicators */
.dots {
    margin-top: 5vw;
    margin: 0 auto;
    width: 20vw;
    display: flex;
    justify-content: center;
}

.dot {
  cursor: pointer;
  height: 1vw;
  width: 1vw;
  margin: 0 2vw;
  background-color: #bbb;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.quote {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 25vw;
    background-image: linear-gradient(to left, rgba(139,197,63,1), rgba(98, 140, 42,1));
    margin-top: 2.5vw;
    font-family: Verdana,sans-serif;
    padding: 2.5vw 0;
    overflow: hidden;
}

.quote-text {
    display: flex;
    width: 30vw;
    height: 20vw;
    margin-left: 7.5vw;
    font-size: 1.25vw;
    color: white;
    font-style: italic;
    font-weight: 100;
    line-height: 2.5vw;
    margin-top: -1.25vw;
    text-align: right;
}

.quote-img {
    display: flex;
    width: 25vw;
    height: 20vw;
    margin-left: 2.5vw;
}

.quote-img img {
    height: 20vw;
    width: 20vw;
    border-radius: 50%;
    margin: 0 auto;
}

.quote-person {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 25vw;
    height: 20vw;
    margin-left: 2.5vw;
    margin-top: 2.5vw;
}


.quote-person a, .quote-person h4, .quote-person h5 {
    color: white;
}

.quote-person a {
    width: fit-content;
    font-size: 2vw;
    font-weight: bold;
    background-color: white;
    border-radius: 1vw 0 1vw 0;
    color: #8BC53F;
    text-decoration: none;
    padding: 0.5vw 1vw;
    transition: color 0.3s ease;
    margin-bottom: 1vw;
}

.quote-person a:hover {
    color:#45631e;
}

.quote-person h4 {
    font-size: 1.5vw;
    margin: 0.75vw 0;
}

.quote-person h5 {
    font-size: 1.25vw;
    margin: 0.75vw 0;
    font-weight: normal;
}

.figures {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 5vw 6vw;
}

div.countries, div.researchers, div.budget, div.goal {
    width: 20vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0 2vw;
    font-family: Verdana,sans-serif;
    text-align: center;
}


.countries h2, .researchers h2 {
    position: relative;
    font-size: 2.75vw;
    margin: 2vw auto 1.5vw auto;
    background-color: #2B388F;
    border-radius: 1.5vw 0 1.5vw 0;
    color: white;
    letter-spacing: -0.3vw;
    padding: 1vw 2vw 1vw 1.75vw;
}

.budget h2, .goal h2 {
    position: relative;
    font-size: 2.25vw;
    margin: 2.25vw auto 1.5vw auto;
    background-color: #2B388F;
    background-size: 80% 80%;
    border-radius: 1.5vw 0 1.5vw 0;
    height: 5vw;
    padding: 1vw 2vw;
    color: white;
}

.figures h3 {
    font-size: 1.45vw;
    color: #69962d;
    letter-spacing: 0.1vw;
    margin: 0 auto;
}

.mobile-team {
    display: none;
}

.team {
    margin: 2.5vw auto 0 auto;
    font-family: Verdana,sans-serif;
    background-color: #8BC53F;
    padding: 2.5vw 0;

}

.team h1 {
    text-align: center;
    color: white;
    margin-top: 0;
}

.row {
    display: flex;
    flex-direction: row;
    padding: 0 5vw;
}

/* Three columns side by side */
.column {
    float: left;
    width: 33.3%;
    margin-bottom: 0.5vw;
    padding: 0 2vw;
}
  
/* Add some shadows to create a card effect */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: white;
}

/* Some left and right padding inside the container */
.team-container {
padding: 0 1.5vw;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
text-align: center;
}
  
.team-container h2 {
    margin: 1vw 0 0.5vw 0;
}

.team-container p {
    margin: 0.5vw 0;
}

/* Clear floats */
.container::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.title {
    color: grey;
    font-size: 1.2vw;
}

.team-button a {
    display: flex;
    height: 3vw;
    width: 3vw;
    background-color: #8BC53F;
    border-radius: 5vw;
    transition: background-color ease 0.3s;
}

.team-button a:hover {
    background-color: #69962d;
}

.team-button img {
height: 2vw;
width: 2vw;
margin: 0.5vw auto;
}

.team-buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 2vw;
margin: 1vw auto 2vw auto;
}

.mobile-carousel {
    display: none;
}

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

    #body {
        overflow: hidden;
    }

    .carousel {
        display: none;
      }
      
    .mobile-carousel {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5vw;
        padding: 10vw;
        font-family: Verdana,sans-serif;
    }

    .explain-text {
        font-size: 4vw;
        line-height: 6vw;
    }

    .mobile-carousel-title h2 {
        font-size: 6vw;
        font-weight: bold;
        text-align: center;
        margin-top: 0;
    }

    .mobile-carousel-image img {
        width: 100%;
    }

    .mobile-carousel-text {
        font-size: 4vw;
    }

    .mobile-carousel-button {
        justify-content: center;
        margin: -2.5vw auto 0 auto;
    }
    
    .read-more-btn {
        display: flex;
        flex-direction: row;
        border-radius: 3vw 0 3vw 0;
        background-color: #2B388F;
        border: none;
        color: white;
        text-align: center;
        font-size: 4.5vw;
        height: 10vw;
        width: 45vw;
        padding: 2vw 5vw;
        cursor: pointer;
        letter-spacing: 0.2vw;
        text-decoration: none;
        font-weight: bold;
        overflow: hidden;
      }
      
      .read-more-btn:after {
        content: '❯';
        position: flex;
        opacity: 1;
        top: 1.5vw;
        right: 4vw;  
        color: #8BC53F;
      }
      
    .read-more-btn:hover{
        padding-right: 0vw;
        padding-left: 0vw;
        color: white;
      }
    
    .read-more-btn:hover:after {
        opacity: 1;
        right: 4vw;
      }


    .team {
        display: none;
    }

    .mobile-team {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        font-family: Verdana,sans-serif;
        background-color: #8BC53F;
        padding: 5vw 0;
    }
    
    .mobile-team h1 {
        text-align: center;
        color: white;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0vw;
        font-size: 7vw;
    }

    .title {
        font-size: 4vw;
    }
    
    .team-row {
        display: flex;
        flex-direction: column;
        padding: 0 10vw;
        width: 100%;
    }
    
    /* Three columns side by side */
    .team-column {
        float: left;
        width: 100%;
        margin: 5vw 0;
        padding: 0 5vw;
    }
      
    /* Add some shadows to create a card effect */
    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: white;
    }
    
    /* Some left and right padding inside the container */
    .team-container {
    padding: 3vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: center;
    }
      
    .team-container h2 {
        margin: 2vw 0 1vw 0;
    }
    
    .team-container p {
        margin: 1vw 0;
    }
    
    /* Clear floats */
    .container::after, .row::after {
        content: "";
        clear: both;
        display: table;
    }
    
    .title {
        color: grey;
    }
    
    .team-button a {
        display: flex;
        height: 10vw;
        width: 10vw;
        background-color: #69962d;
        border-radius: 10vw;
        transition: background-color ease 0.3s;
    }
    
    .team-button a:hover {
        background-color: #45631e;
    }
    
    .team-button img {
    height: 6vw;
    width: 6vw;
    margin: 2vw auto;
    }
    
    .team-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5vw;
    justify-content: center;
    margin-top: 2.5vw;
    }
}