.page-cas-exosens{
  background-color: #073a46;
  & .title{
    color: #00f0d4;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
    font-weight: 500;
  }
  & .topPageCas{
    & .text{
      & p{
        width: 650px;
      }
    }
  }
  & .text {
    & p{
      width: 900px;
      max-width: 100%;
    }
  }
  & .casDetails{
    position: relative;
    margin-top: -5rem;
  }

  & .swiper:not(.swiper-initialized) .tranding-slider-control {
    display: none;
  }
  & .swiper.swiper-initialized {
    padding-bottom: 3rem;
  }
  & .swiper.swiper-initialized.few-slides {
    padding-bottom: 0;
  }
  & .swiper.swiper-initialized.few-slides .swiper-wrapper {
    justify-content: center;
  }
  & .swiper.swiper-initialized.few-slides .tranding-slider-control {
    display: none;
  }

  & .tranding-slider-control {
    position: absolute;
    bottom: 0;
    height: 3rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  & .tranding-slider-control.dark .swiper-button-next svg, & .tranding-slider-control.dark .swiper-button-prev svg {
    stroke: #fff;
  }
  & .tranding-slider-control.dark .swiper-pagination-bullet {
    border-color: #fff;
  }
  & .tranding-slider-control.dark .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #fff;
  }

  & .swiper-button-next, & .swiper-button-prev {
    position: initial;
    width: 1.5rem;
    height: 1.2rem;
    margin-top: 0;
    margin: 0 0.5rem;
  }
  & .swiper-button-next svg, & .swiper-button-prev svg {
    width: 1.5rem;
    height: 1.2rem;
    stroke-width: 2px;
    fill: none;
    stroke: #FFFFFF;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  & .swiper-button-next:after, & .swiper-button-prev:after {
    content: none;
  }

  & .swiper-pagination {
    position: initial;
    display: flex;
    align-items: center;
  }
  & .swiper-pagination:not(.swiper-pagination-bullets-dynamic) {
    width: auto !important;
  }
  & .swiper-pagination.swiper-pagination-bullets-dynamic {
    display: block;
    transform: translateX(0) !important;
    width: 120px !important;
  }

  & .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    opacity: 1;
    background-color: transparent;
    border: 1px solid #FFFFFF;
    transform: scale(0.8);
    transition: background-color 0.2s cubic-bezier(0, 0.07, 0.57, 0.99), transform 0.4s cubic-bezier(0, 0.07, 0.57, 0.99);
  }
  & .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #FFFFFF;
    transform: scale(1);
  }
}
.content_center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
}
.exosensIntro{
  position: relative;
  z-index: 1;
  padding: 0;
  & picture{
    width: 100%;
    height: 800px;
    display: block;
    opacity: 0;
    visibility: hidden;
    & img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
      -o-object-fit: cover;
      -o-object-position: center;
      vertical-align: middle;
    }
  }
  &:after{
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: 0;
    left: 0;
    background: radial-gradient(circle at 0% 0%, #0e1420 0%, rgba(14, 20, 32, 0) 70%);
    z-index: 1;
  }
  &:before{
    content: '';
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, #073a46 0%, rgba(7, 59, 70, 0) 100%);
  }
}
.logoExosens{
  position: absolute;
  width: 400px;
  left: 10vw;
  top: 20vw;
  z-index: 3;
}
.logoPart{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
    visibility: hidden;
  &.part1{
    position: initial;
    transform: translate(-50px,0);
  }
  &.part2{
    transform: translate(50px,0);
  }
  &.baseline1, &.baseline2, &.baseline3{
    transform: translate(0,20px);
  }
}
.logoLite{
  width: 460px;
  height: 386px;
  position: absolute;
  z-index: 1;
  left: calc(10vw - 30px);
  top: calc(20vw - 160px);
  mix-blend-mode: soft-light;
  opacity: 0;
  visibility: hidden;
  transform: scale(.7);
}

.exosensVisuals{
  margin-top: 4rem;
}

.swiperVisuals{
  overflow: visible;
  &:not(.swiper-initialized) {
    & .swiper-wrapper{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 0 1rem;
    }
  }
  & .swiper-slide{
    &:nth-child(2){
      & .exosensVisuals_gradient_top{
        width: clamp(5.5rem, 14vw, 18.75rem);
        left: 22%;
        top: -15%;
      }
      & .exosensVisuals_gradient_bottom{
        width: clamp(4.5rem, 10vw, 12.5rem);
        right: 8%;
        bottom: 3%;
      }
    }
     &:nth-child(3){
      & .exosensVisuals_gradient_top{
        width: clamp(4.5rem, 10vw, 12.5rem);
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }
      & .exosensVisuals_gradient_bottom{
        width: clamp(5rem, 11vw, 13.75rem);
        right: 12%;
        bottom: 8%;
      }
    }
  }
}
.exosensVisuals_item{
  position: relative;
  width: 100%;
  height: auto;
}
.cursors{
  position: absolute;
  right: 10%;
  top: -15%;
  width: 120px;
  height: 140px;
  pointer-events: none;
  user-select: none;
}
.cursor{
  position: absolute;
  width: 26px;
  height: 26px;
  &:nth-child(1){
    left: 5%;
    top: 35%;
  }
  &:nth-child(2){
    left: 50%;
    top: 10%;
  }
  &:nth-child(3){
    right: 0;
    bottom: 0;
  }
}
.graduation{
  position: absolute;
  left: 15%;
  opacity: .4;
  top: calc(50% - 100px);
  height: 200px;
  width: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  & span{
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    display: block;
    transform: scaleX(0);
    &:nth-child(even){
      width: 60%;
    }
  }
}
.exosensVisuals_gradient_top {
    position: absolute;
    width: clamp(4.5rem, 10vw, 12.5rem);
    aspect-ratio: 1;
    left: 0;
    top: -20%;
    border-radius: 50%;
    background: #00b8ff;
    opacity: .25;
    filter: blur(clamp(1.5rem, 3.5vw, 4.375rem));
}
.exosensVisuals_gradient_bottom {
    position: absolute;
    width: clamp(3rem, 6vw, 6.25rem);
    aspect-ratio: 1;
    right: 12%;
    bottom: 0;
    border-radius: 50%;
    background: #00b8ff;
    opacity: .5;
    filter: blur(clamp(1.5rem, 3.5vw, 4.375rem));
}

.exosensIdentity{
  color: #fff;
  & .container{
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 5rem 0;
  }
}

.nightVision{
  display: flex;
  justify-content: center;
  margin-top: -10rem;
  position: relative;
  & picture{
    opacity: 0;
    visibility: hidden;
    transform: scale(1.3);
  }
}
.logo5g{
    display: block;
    width: 100px;
    height: 60px;
    position: absolute;
    left: calc(50% - 50px);
    top: calc(65% - 50px);
    & svg{
      position: relative;
      z-index: 2;
    }
}
.logo5gHallo{
  width: 110%;
  height: 110%;
  position: absolute;
  z-index: 1;
  left: -5%;
  top: -5%;
  background-color: #64b357;
  filter: blur(30px);
  mix-blend-mode: hard-light;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.2);
}
.nightVisionTitle{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 10%;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  font-family: 'Ford Antenna', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-indent: .2rem;
  & .nightVisionSplit{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    & div{
      opacity: 0;
      transform: scale(.7);
    }
  }
}

.video5g{
  padding: 0;
  &.is-playing{
    & .video5gPlay{
      opacity: 0;
      pointer-events: none;
    }
  }
}
body{
  &:not(.can-touch){
    .video5g{
      &.is-playing{
        &:hover{
          & .video5gPlay{
            opacity: 1;
            pointer-events: auto;
          }
        }
      }
    }
  }
}
body{
  &.can-touch{
    .video5g{
      &.is-controls-visible{
        & .video5gPlay{
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }
}
.video5gContainer{
  width: 100%;
  height: 100%;
  position: relative;
  & video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: center;
    -o-object-position: center;
    vertical-align: middle;
  }
}
.video5gPlay{
  width: 60px;
  height: 60px;
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 30px);
  cursor: pointer;
  transition: opacity .3s ease;
  outline: none;
  & svg{
    fill: #3af948;
    transition: transform .3s ease, opacity .3s ease;
    position: relative;
    z-index: 1;
    outline: none;
    & .plain{
      fill: #fff;
    }
    &.pauseIcon{
      position: absolute;
      left: 0;
      top: 0;
    }
    &[hidden]{
      opacity: 0;
      pointer-events: none;
    }
  }
  &:before{
    content: '';
    width: 130%;
    height: 130%;
    position: absolute;
    z-index: 1;
    left: -15%;
    top: -15%;
    background-color: #42ff42;
    filter: blur(20px);
  }
  &:hover svg{
    transform: scale(1.1);
  }
}
.exosensProducts{
  color: #fff;
  & .container{
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.exosensExpos{
  color: #fff;
  & .container{
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 5rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.mainProduct{
  width: 500px;
  max-width: 90%;
  margin: 0 auto 2rem auto;
  position: relative;
  & picture{
    width: 100%;
    height: 100%;
    display: block;
  }
}
.mainProductOptique{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.swiperProducts{
  width: 1200px;
  max-width: 100%;
  overflow: visible;
  & .swiper-wrapper{
    transition-timing-function: linear;
  }
  & .swiper-slide{
    padding: 0 2rem;
    height: 130px;
    width: auto;
    max-width: 30vw;
    & picture{
      width: 100%;
      height: 100%;
      display: block;
    }
    & img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      -o-object-fit: contain;
      object-position: center;
      -o-object-position: center;
      vertical-align: middle;
    }
  }
}

.page-cas-exosens {
    & .swiperProducts.swiper-initialized {
        padding-bottom: 0;
    }
}


.swiperStandsContainer{
  width: 100%;
}
.swiperStands{
  width: 1000px;
  max-width: 100%;
  overflow: visible;
  & .swiper-slide{
    padding: 0 2rem;
    width: auto;
    overflow: hidden;
    & picture{
      display: block;
      width: auto;
      height: auto;
    }
    & img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      -o-object-fit: contain;
      object-position: center;
      -o-object-position: center;
      vertical-align: middle;
    }
  }
}

.page-cas-exosens {
    & .swiperVisuals.swiper-initialized{
      padding-bottom: 0;
    }
    & .swiperStands{
      padding-bottom: 0;
      padding-top: 3rem;
    }
    & .tranding-slider-control {
        top: 0;
        justify-content: flex-end;
        padding: 0 2rem;
    }
}

@media screen and (max-width: 1400px){
  .exosensIntro {
      & picture {
          width: 100%;
          height: 700px;
          max-height: 90vh;
      }
  }
  .logoLite{
    width: 360px;
    height: 300px;
  }
  .logoExosens {
    width: 300px;
    top: 17vw;
  }


  .swiperVisuals {
      &:not(.swiper-initialized) {
          & .swiper-wrapper {
              gap: 0;
          }
      }
  }
  .cursors {
    right: 15%;
    top: -10%;
    width: 100px;
    height: 110px;
  }
  .cursor{
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 1100px){
  .exosensIntro {
      & picture {
          max-height: 100vh;
      }
  }
  .logoExosens {
    width: 230px;
    top: 20vw;
  }
  .logoLite {
    width: 320px;
    height: 270px;
    top: calc(25vw - 160px);
    left: calc(10vw - 40px);
  }
}

@media screen and (max-width: 940px){
  .exosensIntro {
      & picture {
          height: 500px;
      }
  }

  .exosensVisuals{
    margin-top: 2rem;
  }
  .swiperVisuals {
      width: 760px;
      max-width: 90%;
  }
  .exosensVisuals_gradient_top {
    left: 10% !important;
    top: 10% !important;
  }

  .nightVision {
      margin-top: -5rem;
  }

}
@media screen and (max-width: 767px){
  .logoExosens {
    width: 230px;
    top: 30vw;
    left: 14vw;
  }
  .logoLite {
      width: 360px;
      height: 300px;
      top: calc(35vw - 160px);
      left: calc(10vw - 40px);
  }

}
@media screen and (max-width: 640px){
  .nightVision{
    margin-bottom: 2.5rem;
  }
  .logo5g {
      display: block;
      width: 70px;
      height: 43px;
      position: absolute;
      left: calc(50% - 35px);
      top: calc(60% - 21.5px);
  }
  .nightVisionTitle{
    bottom: 5%;
    & .nightVisionSplit{
      display: flex;
      flex-direction: column;
    }
  }

  .swiperProducts{
    & .swiper-slide{
      width: 180px;
      max-width: 100%;
    }
  }

}
@media screen and (max-width: 540px) {
    .content_center {
        padding: 0 1rem;
    }

    .logoExosens {
      top: 40vw;
      left: calc(50% - 115px);
      top: calc(50% - 21px);
    }
    
    .logoLite {
      width: 260px;
      height: 220px;
      top: calc(50% - 110px);
      left: calc(50% - 130px);
    }

    .exosensIdentity {
        & .container {
            padding-bottom: 2rem;
            padding-top: 3rem;
        }
    }
    .exosensProducts {
        & .container {
            padding: 2rem 0;
        }
    }
    .exosensExpos{
      & .container {
          padding: 2rem 0;
      }
    }
    .swiperStands {
        & .swiper-slide {
            padding: 0 1rem;
        }
    }
}
@media screen and (max-width: 480px) {
  .swiperVisuals {
      max-width: 100%;
  }
  .nightVisionTitle {
      bottom: 0;
  }
  .swiperProducts{
    & .swiper-slide{
      width: 140px;
    }
  }
}
@media screen and (max-width: 420px) {
  .content_center {
      align-items: flex-start;
      text-align: left;
  }
  .nightVision {
      margin-top: -2rem;
      margin-bottom: 3rem;
  }
}