@use "sass:math";

@keyframes goUp {
    0% {
      transform: translateY(200vh);
    }
    100% {
      transform: translateY(-500px); 
    }
  }

header {
    width: 100vw;
    height: 80vh;
    min-height: 600px;
    margin: 0 auto 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    row-gap: 10px;
    .carousel {
      width: 100vw;
      .splide__track {
        overflow: inherit;
      }
      @media (max-width: $tablet) {
        width: 100%;
        .splide__list {
          position: relative;
          top: 100px;
        }
      }
    }
    .splide__slide {
      display: flex;
      width: 100%;
      height: 85vh;
      min-height: 550px;
      .content-carousel {
        position: relative;
        width: 100%;
        display: flex;    
        justify-content: flex-end;
        .content {
          position: absolute;
          left: 50%;
          bottom: 0%;
          width: 90%;
          transform: translate(-50%, 50%);
          z-index: 2;
          padding: 30px 30px;
          opacity: 0;
          transition: all .75s;
          a.btn {
            margin: 20px auto; 
          }
        }
      }
      .image {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      &.is-visible {
        .content-carousel {
          .content {
            bottom: 50%;
            opacity: 1;
          }
        }
      }
    }
    h1, h2 {
        font-size: 3.5em;
        text-transform: none;
        position: relative;
        margin: 0 auto;
        text-align: center;
        line-height: 1.4;
        color: white;
        span {
            display: block;
        }
    }
    p {
        color: white;
        text-align: center;
    }
}
section {
    width: 75vw;
    margin: 100px auto;
    @media (max-width: 768px) {
        width: 90vw;
    }
    h2 {
        text-align: center;
        margin-top: 0;
    }
    &.aboutus {
      width: 100vw;
      position: relative;
      & > .row {
        display: flex;
        align-items: center;
        height: 80vh;
        .aboutusContent {
          width: 50%;
          max-width: 600px;
          padding: 50px 30px;
          background: white;
          h2 {
            text-align: left;
          }
          p {
            color: #807965;
          }
        }
        .aboutusImage {
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          height: 80vh;
          z-index: -1;
          text-align: right;
          background: white;
          img {
            object-fit: fill;
            width: auto;
            height: 100%;
          }
        }
      }
      @media (max-width: 920px) {
        & > .row {
          flex-direction: column;
          height: auto;
          .aboutusContent {
            width: 100%;
          }
          .aboutusImage {
            position: relative;
            width: 100%;
            height: auto;
         }
        }
      }
    }
    &.services {
        margin: 100px auto;
        h2 {
          text-align: left;
        }
        & > .row {
            justify-content: center;
            gap: 40px;
            .servicesparticulier, .servicespro {
                max-width: 350px;
            }
        }
    }
    &.valeurs {
        background-color: white;
        margin: 100px auto;
        padding: 20px 40px;
        min-height: 200px;
        width: 100vw;
        display: flex;
        gap: 50px;
        justify-content: center;
        align-items: flex-start;
        .valeur {
          flex: 1;
        }
        @media (max-width: 920px) {
          flex-wrap: wrap;
        }
    }
}
.overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(255,255,255, .4);
  backdrop-filter: blur(10px);
  visibility: hidden;
  opacity: 0;
  transition: all .75s;
  z-index: 4;
  &.active {
      opacity: 1;
      visibility: visible;
  }
}