/* Header Styles */
header {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  /* Hero Styles */
.hero {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-width: 700px; /* Ajout d'une largeur minimale pour le hero */
    padding: 80px 7%; /* Utilisation de pourcentages pour mieux s'adapter à la largeur */
    gap: 40px;
  }


  .about{
    margin:auto;
    grid-column-gap: 6rem;
    grid-row-gap: 2rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 2fr;
    grid-auto-columns: 1fr;
    display: grid;
    padding:180px 7% 180px;
    max-width: 1400px;
    min-width: 600px; /* Ajout d'une largeur minimale pour le main */
    height: auto;
    }

  /* Project Styles */
.project {
    display: flex;
    width: 100%;
    height: 516px;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    background-color: #5F6BE0;
    border-radius:24px;
  }

  /* Project Name Styles */
.project-name {
    display: flex;
    max-width: 680px;
    padding: 0 0 118px 130px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
  }

 /* ============================================================================
   HEADINGS
============================================================================ */

 h4,h5,h6 {
   color: var(--project-theme-4);
 }
 
  .text-container {
    margin:auto;
    display:flex;
    flex-direction: column;
    padding: 90px 10% 90px;
    gap: 16px;
    max-width: 1400px;
    min-width: 600px;
  }

/* Main Styles */
main {
  padding-top: 48px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

header.active {
  opacity: 1;
}

main.active{
  opacity:1;
}

.storyboard{
    width:100%;
}

.thinking{
  display: flex;
  background:#FBFBFB;
  width:100%;
  gap: 8px;
  height: auto;
  }


/* Styles pour la section de navigation vers d'autres projets */
.other-projects {
  display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      margin: auto;
      padding: 180px 10% 180px;
      gap: 16px;
      width: 1400px;
      min-width: 600px;
flex-direction: column;
gap:24px;
}


.project-cards {
display: flex;
gap:24px;
flex-wrap: wrap;
width:100%;
}



.project-card {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-right:48px;
background: #F4F4F4;
color: #121212;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: 0.7s;
transition: opacity 0.8, transform 0.8s ease;
max-height:100%;
border-radius:24px;
}

.size_link{
  width: calc(50% - 20px);
}

.project-name2 {
display: flex;
padding: 0px 0px 48px 48px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
align-self: stretch;
width:90%;
}

.title2 {
font-family: Gotham;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.subtitle2 {
font-family: Gotham-Book;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.project-img{
max-width: 400px;
min-width:130px;
}


.project-card img {
width:100%;
transition: 0.3s;
filter: grayscale(100%);
}

.project-card:hover img {
filter: grayscale(0%);
}

.project-card:hover {
background-color:#ffebe1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%, 0 0);
}

.solana:hover {
  background-color:#ffebe1;
  color:#030A3F;
  }

.mgdis:hover{
background:#0F056B;
color:#FFFFFF;
}

.icon-text-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px; /* Espacement entre chaque ligne */
}

.icon {
  width: 24px; /* Largeur du pictogramme */
  height: 24px; /* Hauteur du pictogramme */
  fill:#5d5d5d;
}

.icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ajustement de l'image dans la div */
}

.text {
  font-size: 24px; /* Taille du texte */
  line-height: 24px; /* Hauteur de ligne égale à la taille du texte pour centrer verticalement */
}



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

  .intro{
  padding:100px 7% 180px;
  }
  
  /* Project Name Styles */
  .project-name {
  display: flex;
  min-width: 350px;
  padding: 0 0 64px 76px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  }
  
  /* Project Styles */
  .project {
  display: flex;
  width: 100%;
  height: 100%;
  padding-right:10px;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  }

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

  main{
    max-width:768px;
    min-width:350px;
  }
  
  #intro{
  padding:20px 0%;
  display:flex;
  flex-direction:column;
  }

  .about{
    padding:20px 7% 180px;
    display:flex;
    flex-direction:column;
    }

  .bloc_info{
    width:100%;
  }
  
  .text-img {
  display: flex;
  flex-direction: column;
  height: auto;
  gap:32px;
  align-items: center;
  align-self: stretch;
  margin-bottom: 40px;
  } 
  
  .hero {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height:480px;
    max-width:768px;
    min-width:350px;
    padding: 177px 7% 20px; /* Utilisation de pourcentages pour mieux s'adapter à la largeur */
    gap: 40px;
    }
  
  .text-container{
  padding: 90px 7%;
  }
  
  /* Project Styles */
  .project {
  display: flex;
  width: 100%;
  min-height: 140px;
  gap:8px;
  padding-right:10px;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  margin-bottom: 0px;
  }
  
  
  .project-name {
    min-width: 200px;
    padding: 0px 0px 8% 8%;
  }
  
  .project-name{
    font-size: 1.4rem;
  }
  .project-image{
    max-width:40%;
    min-width:30%;
    height:auto;
  }
  
  .other-projects{
    max-width:768px;
    min-width:350px;
  }
  
  .text-container,nav,.quote,.about{
    max-width:768px;
    min-width:350px;
  }
  
  }


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

    main{
      padding:0px;
    }
    .hero {
     display: flex;
    justify-content: center;
              flex-direction: column;
              height: 320px;
              max-width: 768px;
              min-width: 375px;
              padding: 177px 7% 20px;
              gap: 40px;
      }
  
    .project{
      border-radius:20px;
    }

    .other-projects {
          padding: 48px 7% 96px;
    }
  
    .text-container,.text-container2,.quote{
      padding: 48px 7% 48px;
    }
  
    .about{
      padding: 20px 0% 0px;
      gap:0px;
    }
  
    #intro{
      padding:20px 7% 0px;
    }
  
    .title{
      font-size:20px !important;
    }
    .subtitle{
      font-size:18px !important;
    }

      .project-cards {
        display:flex;
        flex-direction: column;
        align-items: stretch;
      }

      
.project-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-right:16px;
  transition: 0.3s;
  filter: grayscale(0%);
  }

  .solana{
    background-color:#ffebe1;
    color:#030A3F;
    }
  
  .mgdis{
  background:#0F056B;
  color:#FFFFFF;
  }

.project-name2{
  padding-left:24px;
}

.title2{
  font-size:18px;
}

.subtitle2{
  font-size:16px;
}
    
      .size_link{
        width:100%;
      }

.project-card img{
  filter: grayscale(0%);
}
    
  }