.hero-banner{
    background-image: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/background-home.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    height: 100vh;
    padding: 0;
}

.hero-banner .content{
  z-index: 12;
}

h1{
    color: var(--green-dark);
    font-size: 12vh;
}

@media screen and (max-width:960px) {
h1{
  font-size: 3rem;
}  
}

.paramoteur-1{
    width: 25rem;
    filter: drop-shadow(4px 4px 10px #004E6420);
    animation: floatAndSway 10s ease-in-out infinite;
}


.paramoteur-2{
    width: 12.5rem;
    filter: drop-shadow(-4px -4px 10px #004E6420);
    top:6rem;
    right: 4rem;
    animation: floatAndSway2 17s ease-in-out infinite;
}

.paramoteur-2 .paramoteur{
    transform: scaleX(-1); /* Applique l'effet miroir */
}

@media screen and (max-width:960px) {
  .hero-banner{
    height: calc(95vh - 80px);
}


.paramoteur-1{
  width: 10rem;
  filter: drop-shadow(4px 4px 10px #004E6420);
  animation: floatAndSway 10s ease-in-out infinite;
  bottom: 6rem;
}


.paramoteur-2{
  width: 7.5rem;
  filter: drop-shadow(-4px -4px 10px #004E6420);
  top:2rem;
  right: 2rem;
  animation: floatAndSway2 17s ease-in-out infinite;
}
}

  /* Combined animation for floating up/down, swaying left/right, rotating, and adding depth */
@keyframes floatAndSway {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1); /* Position initiale, échelle normale */
    }
    25% {
      transform: translate(15px, -20px) rotate(5deg) scale(1.15); /* Mouvement vers la droite, rotation légère, zoom léger */
    }
    50% {
      transform: translate(0, -15px) rotate(0deg) scale(1); /* Retour au centre, échelle normale */
    }
    75% {
      transform: translate(-10px, 20px) rotate(-5deg) scale(0.85); /* Mouvement vers la gauche, rotation inverse, réduction légère */
    }
    100% {
      transform: translate(0, 0) rotate(0deg) scale(1); /* Retour à la position initiale */
    }
  }
  
  @keyframes floatAndSway2 {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1); /* Position initiale, échelle normale */
    }
    25% {
      transform: translate(-30px, -20px) rotate(-5deg) scale(1.15); /* Mouvement vers la droite avec rotation inverse et zoom léger */
    }
    50% {
      transform: translate(0, -15px) rotate(0deg) scale(1); /* Retour au centre, échelle normale */
    }
    75% {
      transform: translate(-5px, 20px) rotate(5deg) scale(0.85); /* Mouvement vers la gauche avec rotation légère et réduction */
    }
    100% {
      transform: translate(0, 0) rotate(0deg) scale(1); /* Retour à la position initiale */
    }
  }

  .position-decollage a{
    color: var(--green-dark);
  }
  
  .decollage{
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
  }

  .decollage-1{
    opacity: 0.16;
  }

  .decollage-2{
    opacity: 0.5;
  }


  .position-decollage{
    bottom: 1rem!important;
    z-index: 12;
  }

  .background-white-linear{
    background: rgb(245,245,245);
    background: -moz-linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(180deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#ffffff",GradientType=1);}

  /*-------------presentation---------------*/


  
  #presentation .uk-grid-collapse{
    background-color: var(--white);
    border-radius: 0.5rem;
    overflow: hidden;
  }

  #presentation h2{
    margin-bottom:0
  }

  .instructeur{
    background: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/cloud.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    right: 1.5rem;
  }

  .instructeur p{
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 1.5rem;
    font-style: italic;
    text-align: right;
    height: 80px;
    display: flex;
    align-items: center;
    
  }

/*-------------prestation---------------*/

      
  .prestations h3{
    margin-bottom: 0;
  }

  .prestations p{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
    
  .prestations .uk-card{
    min-height: 540px;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    }

    .prestations .uk-card .content{
        min-height: 540px;
        z-index: 12;
        position: relative;
        
    }

  .uk-card.bapteme{
    background: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/bapteme.webp);
    background-size: cover;
  }

  .uk-card.formation{
    background: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/formation.webp);
    background-size: cover;
  }

  .uk-card.achat-revente{
    background: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/achat-revente.webp);
    background-size: cover;
  }
  .prestations .uk-card::after{
    content: '';
    background-image: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/cloud-1.webp);
    background-size: cover;
    width: 100%;
    height: 320px;
    position: absolute;
    background-position: -6rem 3rem;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
  }

/*-------------Temoignages---------------*/

.temoignages{
  background-image: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/background-home.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
}

.temoignages::before{
  content: '';
  height:240px;
  width: 100%;
  position: absolute;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  top: 0;
  left: 0;
  z-index: 0;
}

.temoignages::after{
  content: '';
  height:240px;
  width: 100%;
  position: absolute;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  bottom: 0;
  left: 0;
  z-index: 0;
}

.temoignages .uk-container{
    z-index: 12;
  position: relative;
}

.faq{
  background-color: var(--white);
}

/* Conteneur des nuages */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Hauteur de la ligne des nuages */
  overflow: hidden;
  z-index: 1; /* Ajuste selon la position des nuages */
  pointer-events: none; /* Pour que les nuages ne bloquent pas les clics */
}
.cloud {
  position: absolute;
  width: 100%;
  height: 40vh;
  opacity: 0.8;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform;
}

.cloud1 {
  animation: moveClouds 50s linear infinite;
  left: -100px;
  background-image: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/cloud-banner-top.webp);
}

.cloud2 {
  animation: moveClouds2 55s linear infinite;
  left: -100px;
  bottom: 0;
  background-image: url(https://voldeloire-paramoteur41.com/wp-content/uploads/2024/10/cloud-banner-bottom.webp);
  background-position: right;
}

@media screen and (max-width:960px) {
  .cloud1 {
  top: 4rem;
  }
  
  .cloud2 {
    bottom: 0;
  }
}



@keyframes moveClouds {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}


@keyframes moveClouds2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}