.banner {
          height: 210px;
          position: relative;
          color: black;
          display: flex;
          align-items: center;
        }


        .banner-1 {
          background-color:#95A7B9;
          position: relative;
          width: 100%; /* 110vw */
          left: -3vw;  /* -5vw */
          margin-top: -150px;
          /* Tilt the banner */
          transform: rotate(3deg);
        }

        .banner-2 {
          background-color:#95A7B9;
          position: relative;
          width: 100%;
          left: 0vw;
          margin-top: -10px;
          /* Title at the right side */
          justify-content: flex-end;
        }

        .banner-3 {
          background-image: linear-gradient(to left, #939fb0, #909cae, #8c99ac, #8997ab, #8694a9);
          position: relative;
          width: 100%;
          left: -3vw;
          margin-top: 5px;
          /* Tilt the banner */
          transform: rotate(-3deg);
        }

        .banner-4 {
          background-image: linear-gradient(to right, #a9b3c7, #a3adc0, #9ea8b9, #98a2b2, #939dab);
          position: relative;
          width: 100%; /* Full width */
          left: 0vw;
          margin-top: 0px;
          opacity: 0.8;
        }


        .title-container-1 {
          left: 5vw;
          position: relative;
          margin-top: -20px;
          width: 400px; /* Match the width of the viewport */

          transform: rotate(-3deg); /* Counter-rotate for alignment */
        }

        .title-container-2 {
          right: 5vw;
          position: relative;
          width: 400px; /* Match the width of the viewport */


        }

        .title-container-3 {
          left: 5vw;
          position: relative;
          width: 400px; /* Match the width of the viewport */

          transform: rotate(3deg); /* Counter-rotate for alignment */
        }

        .title-container-4 {
          left:1.4vw;
          position: relative;
          width: 400px; /* Match the width of the viewport */
        }

        .title-banner {
          /* border: 1px solid green; */
          font-size: 22px;
          font-family: 'Archivo';
          font-weight: 400;
          color:#3D4D5E;
        }

        /* Parallax Container */
        .parallax-container {
          width: 100vw;
          margin: 0;
          padding: 0;
          position: relative;
          height: 400px; /* Adjust as needed */
          overflow: hidden;
          z-index: -1; /* Place behind content */
        }

        /* Parallax Banner */
        .parallax-banner {
          z-index: -100;
          padding: 0;
          margin: 0;
          position: absolute;
          top: 0;
          left: 0;
          /* width: 110vw; */
          height: 400px; /* Same height as the container */
          display: flex;
          align-items: center;
          justify-content: center;
          /* justify-content: flex-start; */
        }

        .typeA {
          width: 110vw;
        }

        .typeB {
          width: 100vw;
        }


        html, body {
          margin: 0;
          padding: 0;
        }

/* Hide main scrollbar */

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

/* Hide scroll bar on firefox browser */

html {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}


body {
  /* overflow-x: hidden; */

  background-color: #B9C0CA !important;
  background-repeat: no-repeat;
  background-size: cover;
}

  /* pointer-events: none; */
#bodyWrapper {
  overflow-x: hidden;
  position: relative;
  z-index:1;
  background-image: url(/images/background/staff_backB.svg);
  background-repeat: no-repeat;
  background-size: cover;
}



/* ROTATE CARD ON HOVER */

.hover-rotate {
  /* overflow: hidden; */
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img{
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img{
  transform: scale(1.3) rotate(5deg);
  filter: brightness(50%);
}

.hover-rotate .textPhoto{
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover .textPhoto{
  transform: scale(1.3) rotate(5deg);
}


/* Style photo card */

.nopadding {
  /* background-color: red !important; */
   padding: 0 !important;
   margin: 0 !important;
}


.imagePhotoGrand{
object-fit: cover;
min-width: 120px;
height: 200px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
}


.imagePhotoPetit{
object-fit: cover;
min-width: 100px;
height: 180px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px
}


.nomPhotoA{
  margin-right:55px;
  margin-top: 10px;
  font-size:16px !important;
  color:black !important
}

.nomPhotoB{
  margin-right:55px;
  margin-top: 10px;
  font-size:16px !important;
  color:black !important
}


.positionPhoto{
  color:#45586B !important;
  font-size:14px !important
}

.positionPhotoDark{
  color:#273340 !important;
  font-size:14px !important
}

/* Hover - Text au milieu de l'image */

.textPhoto {
  color: white;
  font-size: 12px;
  font-family: 'Nunito';
  font-weight: 200;
}

.containerPhoto {
  /* background-color: white; */
  position: relative;
  /* width: 50%; */
}

.middlePhoto {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.containerPhoto:hover .middlePhoto {
  opacity: 1;
}