@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: translateX(-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;
          border-radius: 0px 10px 10px 0;
        }
      }
      &.is-visible {
        .content-carousel {
          .content {
            bottom: 20%;
            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: $tablet) {
                flex-direction: column;
                .aboutusContent {
                    width: 100%;
                }
                .aboutusImage {
                    width: 100%;
                }
            }
        }
    }
    &.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: $tablet) {
          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;
  }
}