

.bgImageCont {
  background-image: url("https://c4.wallpaperflare.com/wallpaper/319/3/739/clouds-evening-cloudy-sky-wallpaper-preview.jpg");
  color: rgb(127, 100, 96);
  background-size: cover;
}

.fgImageContCloud {
  height: 10%;
  /*width: 70%;*/
  mix-blend-mode: luminosity;
  /*filter: opacity(50%);
  position: absolute;*/
  transition: 1s ease-in-out;
  /*margin-bottom: -10%;*/
  /*scale: 1 .5;*/
}

/*.fgImageContCloud:hover {
 transform: translateX(-30%);
}*/



/*
.fgImageContGrad {
  background-image: inear-gradient(150deg, purple, beige);
  height: 50%;
  width: 50%;
  mix-blend-mode: color;
  position: absolute;
}
*/

.Cont4CloudCont {
  width: 50%; 
  display: flex;
  flex-direction: column;
  /*position: absolute;*/
}

.biggerCont {
  display: flex;
  flex-direction: row;
  row-gap: 0px;
  justify-content: space-around;
}

.SecondBiggerCont {
  display: flex;
  flex-direction: column;
  row-gap: 0px;
  justify-content: space-around;
  align-items: center;
}

.SecondCloudCont {
  width: 140%; 
  height: 10%;
  display: flex;
  flex-direction: row;
  /*position: absolute;*/
}

.fgImageContCloudSecond {
  margin-left: 20%;
}

.fgImageContCloudThird {
  margin-left: -10%;
}

.SecondCloudCont:hover .fgImageContCloudSecond{
  transform: translateX(-35%);
}

.SecondCloudCont:hover .fgImageContCloudThird{
  transform: translateX(35%);
}

.SecondCloudCont:hover + .SecondCloudCont .fgImageContCloudSecond{
  transform: translateX(-20%);
}

.SecondCloudCont:hover + .SecondCloudCont .fgImageContCloudThird{
  transform: translateX(20%);
}

.myCenterHeader {
  text-align: center;
}

.fgImageContCloudComp {
  width: 50%;
  transition: 1s ease-in-out;
  mix-blend-mode: hard-light;
  margin-bottom: -7%;
}