/* BACKGROUND IMAGES */
.service-card:nth-child(1) {
  background: url('../images/hero2.jpg') center/cover no-repeat;
  animation-name: creche;
  animation-direction: alternate-reverse;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

.service-card:nth-child(2) {
  background: url('../images/maternelle1.jpeg') center/cover no-repeat;
  animation-name: maternelle;
  animation-direction: alternate-reverse;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

.service-card:nth-child(3) {
  background: url('../images/classP.jpeg') center/cover no-repeat;
  animation-name: primaire;
  animation-direction: alternate-reverse;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

.service-card:nth-child(4) {
  background: url('../images/autre1.jpeg') center/cover no-repeat;
  animation-name: autres;
  animation-direction: alternate-reverse;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}
  
/* Keyframes Animations */
@keyframes creche {
  0% { background-image: url(../images/maternelle2.jpeg); }
  100% { background-image: url(../images/maternelle1.jpeg); }
}

@keyframes maternelle {
  0% { background-image: url(../images/11.jpg); }
  100% { background-image: url(../images/12.jpg); }
}

@keyframes primaire {
  0% { background-image: url(../images/primaire3.jpg); }
  100% { background-image: url(../images//primaire1.JPG); }
}

@keyframes autres {
  0% { background-image: url(../images/maternelle1.jpeg); }
  100% { background-image: url(../images/maternelle2.jpeg); }
}

.hero {
  position: relative;
  height: 600px;
  padding: 50px;
  text-align: center;
  color: white;
  background: url('../images/hero1.jpg') center/cover no-repeat;
  animation: heroSlider 15s infinite alternate ease-in-out;
}
  
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
  
.hero h1,
.hero p,
.hero a {
  position: relative;
  z-index: 1;
}

@keyframes heroSlider {
  0% { background-image: url('../images/creche2.jpeg'); }
  20% { background-image: url('../images/maternelle2.jpeg'); }
  40% { background-image: url('../images/classM.jpeg'); }
  60% { background-image: url('../images/primaire3.jpg'); }
  80% { background-image: url('../images/creche1.jpg'); }
  100% { background-image: url('../images/creche2.jpeg'); }
}