/*
    OTHER
*/
.containerGap{
  gap: 1em;
}


.linkContainerCard{
  display: flex;
    justify-content: center;
    align-items: center;
}

.linkContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (max-width: 768px) {

  h5{
    overflow-x: auto;
  }
  .cardExpContent{
    width: 15em !important;
  }
  /* Contenu du modal */
  .modalExp-content {
    width: 100% !important;
    margin: 0 !important; /* Centrer le contenu */
    margin-bottom: 0 !important;

  }
  .determined {
    top: -10px !important;
    left: 110% !important;
    transform: translateX(-50%);
    color: #ff6347;
  }
  
  .smiling {
    top: -10px !important;
    right: 60% !important;
    transform: translateX(-50%);
    color: #ffcc00;
  }
  
  .calm {
    bottom: -5% !important;
    right: -20% !important;
    transform: translateY(-50%);
    color: #3cb371;
  }
  
  .autonomous {
    bottom: -5% !important;
    right: 85% !important;
    transform: translateY(-50%);
    color: #87ceeb;
  }
  .background{
    background: linear-gradient(to bottom, rgba(92, 77, 66, 0) 0%, rgba(92, 77, 66, 0) 100%), url("/static/assets/bkg-tel.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
  
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
  }
  .flexProductys{
    flex-direction: column;
  }
  .parallaxDiv{
    display: none;
  }
  header.masthead {
    padding-top: 5rem;

  }
  .productys-card{
    flex-direction: column;
  }

  /* Style pour la section timeline */
#timeline {
  position: relative;
  padding: 1em;
  background-color: #6c757d !important;
}

/* Style pour chaque élément de la timeline */
.tl-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 40px;
}

/* Fond de l'image */
.tl-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.6);
  z-index: -1;
  border-radius: 8px;
}

/* Année de la timeline */
.tl-year {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}

/* Contenu de la timeline */
.tl-content {
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tl-content h1 {
  font-size: 1.5em;
}
/* Style de SVG */
.socialSvg {
  width: 24px;
  height: 24px;
}

/* Style de la timeline pour mobile */
@media (max-width: 768px) {
  .tl-item {
      padding-left: 0;
      padding-top: 40px;
      padding-bottom: 40px;
  }

  .tl-year {
      font-size: 1em;
      margin-bottom: 8px;
  }

  .tl-content {
      padding: 10px;
  }
}

/* Ligne verticale entre les éléments de la timeline */
#timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: #ddd;
}

.tl-item:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0077b5;
}

}


@media (min-width: 1922px){
  .determined {
    top: -10px;
    left: 110%;
    transform: translateX(-50%);
    color: #ff6347;
  }
  
  .smiling {
    top: -10px;
    right: 60%;
    transform: translateX(-50%);
    color: #ffcc00;
  }
  
  .calm {
    bottom: -5%;
    right: -20%;
    transform: translateY(-50%);
    color: #3cb371;
  }
  
  .autonomous {
    bottom: -5%;
    right: 85%;
    transform: translateY(-50%);
    color: #87ceeb;
  }
  
}
@media (max-width: 1921px){
  .determined {
    top: -20px;
    left: 90%;
    transform: translateX(-50%);
    color: #ff6347;
  }
  
  .smiling {
    top: -20px;
    right: 40%;
    transform: translateX(-50%);
    color: #ffcc00;
  }
  
  .autonomous {
    bottom: -20%;
    right: 65%;
    transform: translateY(-50%);
    color: #87ceeb;
  }
  
  .calm {
    bottom: -20%;
    right: 1%;
    transform: translateY(-50%);
    color: #3cb371;
  }
}

@media (min-width: 769px) {

  .containerGap div{
    margin-top: 0;
  }
  .container-main-page{
    margin-left: 12% !important;
     margin-right: 12% !important;
  }
  .col-left{
    margin-right: 1em;

  }
  .col-right{
    margin-left: 1em;
  }
  .sizeContainerSkills{
    height: 34em;
  }
  .parallaxDiv{
    height: 15rem;
  }

  .background{
    background: linear-gradient(to bottom, rgba(92, 77, 66, 0) 0%, rgba(92, 77, 66, 0) 100%), url("/static/assets/img/wallpaper8.png");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
  
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh; /* Prend toute la hauteur de la fenêtre */
  }
  header.masthead {
    padding-top: 10rem;

  }


  #timeline {
    padding: 0;
    display: flex;
    border-top: var(--bs-primary) 2px solid;
    border-bottom: var(--bs-primary) 2px solid;
    background-color: #031625;
    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    line-height: 1.75;
    &:hover {
      .tl-item {
        width: 23.3333%;
      }
    }
  }
  
  .tl-item {
    padding-top: 4em;
    transform: translate3d(0, 0, 0);
    position: relative;
    width: 25%;
    height: 50vh;
    min-height: 600px;
    color: #fff;
    overflow: hidden;
    transition: width 0.5s ease;
    
    &:before, &:after {
      transform: translate3d(0, 0, 0);
      content: '';
      position: absolute;
      left: 0; top: 0;
      width: 100%; height: 100%;
    }
  
    &:after {
      background: transparentize(#031625, 0.15);
      opacity: 1;
      transition: opacity 0.5s ease;
    }
  
    &:before {
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 75%);
      z-index: 1;
      opacity: 0;
      transform: translate3d(0, 0, 0) translateY(50%);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
  
    &:hover {
      width: 30% !important;
      
      &:after {
        opacity: 0;
      }
  
      &:before {
        opacity: 1;
        transform: translate3d(0, 0, 0) translateY(0);
        transition: opacity 1s ease, transform 1s ease 0.25s;
      }
      
      .tl-content {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.75s ease 0.5s;
      }
  
      .tl-bg {
        filter: grayscale(0);
      }
    }
  }
  
  .tl-content {
    transform: translate3d(0, 0, 0) translateY(25px);
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 1.618em;
    top: 55%;
    opacity: 0;
    align-items: center;
    h1 {
      font-family: 'Pathway Gothic One',Helvetica Neue,Helvetica,Arial,sans-serif;
      text-transform: uppercase;
      color: #1779cf;
      font-size: 1.44rem;
      font-weight: normal;
    }
  }
  
  .tl-year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    font-weight: bold;
    text-align: center;
    border-radius: 3%;
    background-color: rgba(0, 0, 0, .5);
    padding: 6px;

    border-bottom: var(--bs-primary) 3px solid;
    .p {
      font-family: 'Pathway Gothic One',Helvetica Neue,Helvetica,Arial,sans-serif;
      font-size: 1.728rem;
      line-height: 0;
    }
    
  }
  
  .tl-bg {
    transform: translate3d(0, 0, 0);
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background-size: cover;
    background-position: center center;
    transition: filter 0.5s ease;
    filter: grayscale(100%);
  }

  .buttonTimeline {
    margin: auto;
    bottom: 10%;
  }
}


.cardAvatar{
  padding: 1em;
}

#services{
  padding-bottom: 0;
}
.containerProjects{
  border-bottom: 1px solid var(--bs-primary);
  margin-top: 3em;
}

.cardProjects {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  padding: 0 !important;
  z-index: 10;

}

.cardProjects .card-body {

  padding-bottom: 0 !important;
}

.cardProjects:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 11;

}
.resumeText{
  font-size: large;
}
.spanBody{
  position: relative;
  z-index: 10;
}
.cardContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2rem;
}


.linkSocialMedias
{ 
  display: flex;
  justify-content: center;
}


/*
    END OTHER
    TIMELINE
*/

#timelineTitle{

    text-align: center;
    background-color: var(--bs-primary);
    font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #fff;
    font-weight: bold;
}

  
/*
    END TIMELINE

    BUTTONS TIMELINE
*/


/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: .3s;
}

.containerThree:hover {
  background-color: var(--bs-primary);
  transition-duration: .3s;
}


.instaContainer:hover {
  background-color: #72054D;
  transition-duration: .3s;
}
.instaContainer{
}
.linkedinContainer{

}
.linkedinContainer:hover {
  background-color: #007BFF;
  transition-duration: .3s;
}

.gitContainer{

}
.gitContainer:hover {
  background-color: var(--bs-primary);
  transition-duration: .3s;
}


.socialContainer:active {
  transform: scale(0.9);
  transition-duration: .3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* 
    END BUTTONS TIMELINE
    CHECKBOX
*/

.cardCheckBox{
    margin-top: 1em;
    justify-content: center;
    align-items: baseline;
    display: flex;
}
/* From Uiverse.io by Yaya12085 */ 
.checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 20px; /* Divisé par 2 */
  height: 20px; /* Divisé par 2 */
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px; /* Divisé par 2 */
  transition-duration: .5s;
}

.bars {
  width: 100%;
  height: 2px; /* Divisé par 2 */
  background-color: var(--bs-primary);
  border-radius: 2px; /* Divisé par 2 */
}



/* CHECKBOX 1*/

#bar2 {
  transition-duration: .8s;
}

#bar1 {
  width: 50%;
}

#bar2 {
  width: 75%;
}

#checkbox1:checked + .toggle .bars {
  position: absolute;
  transition-duration: .5s;
}

#checkbox1:checked + .toggle #bar2 {
  transform: scaleX(0);
  transition-duration: .1s;
}

#checkbox1:checked + .toggle #bar1 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: .5s;
}

#checkbox1:checked + .toggle #bar3 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: .5s;
}

#checkbox1:checked + .toggle {
  transition-duration: .5s;
  transform: rotate(180deg);
}

/* CHECKBOX 2*/

#bar5 {
  transition-duration: .8s;
}

#bar4 {
  width: 50%;
}

#bar5 {
  width: 75%;
}

#checkbox2:checked + .toggle .bars {
  position: absolute;
  transition-duration: .5s;
}

#checkbox2:checked + .toggle #bar5 {
  transform: scaleX(0);
  transition-duration: .1s;
}

#checkbox2:checked + .toggle #bar4 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: .5s;
}

#checkbox2:checked + .toggle #bar6 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: .5s;
}

#checkbox2:checked + .toggle {
  transition-duration: .5s;
  transform: rotate(180deg);
}


/* CHECKBOX 3*/


#bar8 {
  transition-duration: .8s;
}

#bar7 {
  width: 50%;
}

#bar8 {
  width: 75%;
}

#checkbox3:checked + .toggle .bars {
  position: absolute;
  transition-duration: .5s;
}

#checkbox3:checked + .toggle #bar8 {
  transform: scaleX(0);
  transition-duration: .1s;
}

#checkbox3:checked + .toggle #bar7 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: .5s;
}

#checkbox3:checked + .toggle #bar9 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: .5s;
}

#checkbox3:checked + .toggle {
  transition-duration: .5s;
  transform: rotate(180deg);
}

/* CHECKBOX 4*/


#bar11 {
  transition-duration: .8s;
}

#bar10 {
  width: 50%;
}

#bar11 {
  width: 75%;
}

#checkbox4:checked + .toggle .bars {
  position: absolute;
  transition-duration: .5s;
}

#checkbox4:checked + .toggle #bar11 {
  transform: scaleX(0);
  transition-duration: .1s;
}

#checkbox4:checked + .toggle #bar10 {
  width: 100%;
  transform: rotate(45deg);
  transition-duration: .5s;
}

#checkbox4:checked + .toggle #bar12 {
  width: 100%;
  transform: rotate(-45deg);
  transition-duration: .5s;
}

#checkbox4:checked + .toggle {
  transition-duration: .5s;
  transform: rotate(180deg);
}

/* 
    END CHECKBOX
*/

.contentLoader{
  display: grid;
  justify-content: center;
  margin-top: 2em;
}
/* From Uiverse.io by zebra76966 */ 
.loader {
  border-top: 8px solid hotpink;
  border-bottom: 8px solid #f55951;
  border-left: 8px solid #3a9efd;
  border-right: 8px solid #1fff7c;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  animation: looper 5s infinite ease-in-out;
}

@keyframes looper {
  0% {
    border-radius: 100% 100% 100% 100%;
    border-color: hotpink #3a9efd #1fff7c #f55951;
  }

  10% {
    border-radius: 0% 100% 0% 0%;
    border-color: #f55951;
    transform: rotate(150deg);
  }

  20% {
    border-radius: 0% 0% 0% 0%;
    border-color: #3a9efd;
  }

  30% {
    border-radius: 0% 0% 0% 0%;
    border-color: #1fff7c;
  }

  40% {
    border-radius: 0% 0% 0% 0%;
    border-color: #3a9efd;
  }

  50% {
    border-radius: 100%;
    border-color: #f55951;
  }

  90% {
    border-radius: 100%;
    transform: rotate(360deg);
    border-style: dashed;
  }

  100% {
    transform: rotate(0deg);
    border-radius: 100% 100% 100% 100%;
    border-color: hotpink #3a9efd #1fff7c #f55951;
  }
}

/*
  END CHECKBOX
  MISSIONS
*/

.mission-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  padding: 20px;
}

/* Styles pour chaque mission */
.mission-item {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-left: 6px solid #4CAF50; /* Bande colorée à gauche */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.mission-item:nth-child(1) {
  border-left-color: #4CAF50; /* Vert */
  background-color: #E8F5E9; /* Vert pâle */
}

.mission-item:nth-child(2) {
  border-left-color: #2196F3; /* Bleu */
  background-color: #E3F2FD; /* Bleu pâle */
}

.mission-item:nth-child(3) {
  border-left-color: #FF9800; /* Orange */
  background-color: #FFF3E0; /* Orange pâle */
}

.mission-item:hover {
  transform: translateY(-5px);
  background-color: #f0f0f0; /* Couleur de fond au survol */
}

.mission-item h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333333;
}

.mission-item p {
  margin: 10px 0 0;
  color: #666666;
  font-size: 1em;
  line-height: 1.5;
}

.mission-icon {
  width: 24px;
  height: 24px;
  margin-left: 10px;
}
/*
  END Mission
  Main page
*/

.classic-card{
  margin-top: 1em;
  background: white;
  border-radius: 8px;
  display: flex;
  padding: 0.5em !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}


.main-card{
  justify-content: space-around;
  align-items: center;
}
.main-img-avatar{
    width:40%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.presentation-card{
    flex-direction: column;
    align-items: center;
}
.custom-card{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.main-img{
  border: 1px solid rgb(0, 0, 0, 0.125);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  padding: 0 !important;
}

.productys-card{
  display: flex;
}

.header-card{
  margin: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*
  END Main page
  circle chart profile
*/
.donut {
  position: relative;
  width: 12em;
  height: 12em;
  border-radius: 50%;
  background: conic-gradient(
      #ff6347 0% 25%,  /* dégradé orange */
      #3cb371 25% 50%, /* dégradé vert */
      #87ceeb 50% 75%, /* dégradé bleu ciel */
      #ffcc00 75% 100% /* dégradé jaune */
  );
  border: 20px solid transparent;
  background-clip: content-box;
}

.donut::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 10px #f4f4f4;
}

.quality {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/*

*/



/*
  End Profile
  Loisirs
*/

.hobbys div{
  margin: 1em;
}

.hobbys svg{
  width: 1.5em;
  margin-right: 0.3em;
}

/*
  END LOISIRS
  SKILL
*/

.svg-icon-skills{
  height: 30px;
  right: 0;
}
.container-skills {
  position: relative;
  width: 100%;
  background: white;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5em;
}

.container-skills .skill-box {
  width: 100%;
  margin: 25px 0;
}

.skill-header{
  display: flex;
  justify-content: baseline;
  align-items: baseline;
}
.skill-box .title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: var(--bs-primary);
}
.title{
  width: 100%;
}

.skill-box .skill-bar {
  height: 8px;
  width: 100%;
  border-radius: 6px;
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.3);
}

.skill-bar .skill-per {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--bs-primary);
  animation: progress 0.4s ease-in-out forwards;
  opacity: 0;
  width: 0;
}


@keyframes progress {
  0% {
    width: 0;
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.skill-per .tooltip {
  position: absolute;
  right: -14px;
  top: -28px;
  font-size: 9px;
  font-weight: 500;
  color: rgb(0, 0, 0);
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgb(226, 226, 226);
  z-index: 1;
}

.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  height: 10px;
  width: 10px;
  z-index: -1;
  background-color: rgb(226, 226, 226);
  transform: translateX(-50%) rotate(45deg);
}

/*
  END Skill
  Container Prog
*/

.container-prog{
  background-color: #E8F5E9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 2em;
}


.container-soft{
  background-color: #E3F2FD;
    border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 2em;

}

.container-lang{
  background-color: #FFF3E0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 2em;

}

.contentSoft > div{
  margin: 0.2em;
  border-radius: 8px;
  background-color: #EAEAEA;
  padding: 0.2em;
  font-weight: bold;
}

/*
  END Container Prog
  Button dw
*/

/* From Uiverse.io by adamgiebl */ 
.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  border-radius: 0.8em;
  cursor: pointer;
  border: none;
  background: linear-gradient(to right, #8e2de2, var(--bs-primary));
  color: ghostwhite;
  overflow: hidden;
}

.cssbuttons-io svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.cssbuttons-io span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: 0.8em 1.2em 0.8em 1.05em;
}

.cssbuttons-io::before,
.cssbuttons-io::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cssbuttons-io::before {
  content: "";
  background: #000;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.cssbuttons-io:hover::before {
  transform: translate3d(100%, 0, 0);
}

.cssbuttons-io:active {
  transform: scale(0.95);
}

/*
  END Button downoald
  Content Experience detail 
*/
.contentExpDetail{
  margin-bottom: 3em;
  display: flex;
  flex-direction: row;
    z-index: 10;
  padding: 1.5em;
  overflow-x: auto;

}

.cardExpContent{
  height: 12em;
  width: 20em;
  border: 1px solid rgb(0, 0, 0, 0.125);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  z-index: 10;
  background: white;
  flex-shrink: 0;

}

.cardExpContent:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  z-index: 11;

}

/* Le modal (caché par défaut) */
.modalExp {
  overflow-y: scroll;
  display: none; /* Caché par défaut */
  position: fixed; /* Position fixe */
  z-index: 1200; /* Par-dessus le contenu */
  left: 0;
  top: 0;
  width: 100vw; /* Prend toute la largeur */
  height: 100vh; /* Prend toute la hauteur */
  background-color: rgba(0, 0, 0, 0.5); /* Fond sombre transparent */
}

/* Contenu du modal */
.modalExp-content {
  z-index: 1500;
  background-color: #fefefe;
  margin: 5% auto; /* Centrer le contenu */
  margin-bottom: 0 !important;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Largeur du modal */
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Le bouton de fermeture (X) */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/*
  END Content Experience detail 
  Loader
*/

body{
  overflow-y: hidden;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.cardloader {
  /* color used to softly clip top and bottom of the .words container */
  --bg-color: #212121;
  background-color: var(--bg-color);
  padding: 1rem 2rem;
  border-radius: 1.25rem;
}
.loadercontent {
  color: rgb(124, 124, 124);
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 25px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
}

.words {
  overflow: hidden;
  position: relative;
}
.words::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--bg-color) 10%,
    transparent 30%,
    transparent 70%,
    var(--bg-color) 90%
  );
  z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: #956afa;
  animation: spin_4991 4s infinite;
}

@keyframes spin_4991 {
  10% {
    -webkit-transform: translateY(-102%);
    transform: translateY(-102%);
  }

  25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform: translateY(-202%);
    transform: translateY(-202%);
  }

  50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform: translateY(-302%);
    transform: translateY(-302%);
  }

  75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform: translateY(-402%);
    transform: translateY(-402%);
  }

  100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}