.cloud{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: url("../image/clouds.png?v=2024");
  animation: animate-clouds 90s linear infinite;
}

@keyframes animate-clouds{
    0%{
        background-position: 0px;
    }
    100%{
        background-position: 7000px;
    }
}

.clouds2{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 70%;
  background: url("../image/clouds.png?v=2024");
  animation: animate-clouds2 90s linear infinite;
}

@keyframes animate-clouds2{
    0%{
        background-position: 0px;
    }
    100%{
        background-position: -7000px;
    }
}

.clouds3{
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 100%;
  height: 400px;
  background: url("../image/clouds3.png?v=2569");
  animation: animate-clouds3 90s linear infinite;
}

@keyframes animate-clouds3{
    0%{
        background-position: 0px;
    }
    100%{
        background-position: -7000px;
    }
}

.birds{
  background:url("../image/birds_white.png?v=25681124");
  width: 31px;
  height: 20px;
  position: absolute;
}

.birds-1{
  top: 25%;
  left: -10%;
  animation: birdFly .9s steps(8) infinite, birdMove1 15s linear infinite;
}

.birds-2{
  top: 20%;
  left: -10%;
  animation: birdFly 1s steps(8) infinite, birdMove 15s linear infinite;
  animation-delay:2s;
}

.birds-3{
  top: 32%;
  left: -10%;
  animation: birdFly 1s steps(8) infinite, birdMove3 15s linear infinite;
  animation-delay:3s;
}

.birds-4{
  top: 30%;
  left: -10%;
  animation: birdFly 1s steps(8) infinite, birdMove 15s linear infinite;
  animation-delay:4s;
}

.birds-5{
  top: 35%;
  left: -10%;
  animation: birdFly 1s steps(8) infinite, birdMove 15s linear infinite;
  animation-delay:5s;
}

.birds-6{
  top: 40%;
  left: -10%;
  animation: birdFly 1s steps(8) infinite, birdMove 15s linear infinite;
  animation-delay:7s;
}

.birds-7{
  top: 40%;
  left: -10%;
  animation: birdFly 1s steps(8) infinite, birdMoveUp 15s linear infinite;
  animation-delay:9s;
}

@keyframes birdFly{
 	0%{
 		background-position-x: 0px;
	}

 	100%{
		background-position-x: 248px;
	}

}

@keyframes birdMove{
	0%{
		left: -10%;
	}

	100%{
		left: 100%;
	}

}

@keyframes birdMoveUp{
	0%{
		left: -10%;
	}
	
	25%{
top: 350px;
}

50%{
top: 60px;
}

75%{
top: 0px;
}

	100%{
		left: 100%;
	}

}

@keyframes birdMove1{
	0%{
		left: -10%;
	}
	
	25%{
top: 0px;
}

50%{
top: 60px;
}

75%{
top: 350px;
}

	100%{
		left: 100%;
	}

}

@keyframes birdMove3{
	0%{
		left: -10%;
	}
	
	25%{
top: 0px;
}

50%{
top: 60px;
}

75%{
top: 150px;
}

	100%{
		left: 100%;
	}

}


/* ===== ACTIVITY CARD BUTTON FIX ===== */
.activity-card{
    display:flex !important;
    flex-direction:column !important;
}

.activity-card .btn-detail,
.activity-card .detail-btn,
.activity-card a.btn{
    margin-top:18px !important;
    margin-bottom:0 !important;
    align-self:center !important;
}

.activity-card .activity-content,
.activity-card .card-body{
    padding-bottom:10px !important;
}

/* ===== Butterfly effect ===== */
.butterfly-container{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:9999;
}

.butterfly{
    position:absolute;
    transform-origin:center center;
    will-change:left,top,transform;
}

.butterfly img{
    width:100%;
    height:auto;
    display:block;

    animation:
        flap .24s ease-in-out infinite alternate,
        hoverFly 2.5s ease-in-out infinite;

    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

@keyframes flap{
    0%{
        transform:
            scaleX(.72)
            rotate(-2deg);
    }

    100%{
        transform:
            scaleX(1.05)
            rotate(2deg);
    }
}

@keyframes hoverFly{
    0%,100%{
        margin-top:0;
    }

    50%{
        margin-top:-2px;
    }
}