.no-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.svg-container {
width: 100%;
height: 350px;
/* Tinggi container, sesuaikan sesuai kebutuhan */
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
/* Memastikan SVG ter-crop */
background-position: center;
/* Memastikan bagian tengah SVG selalu terlihat */
background-repeat: no-repeat;
/* Menghindari pengulangan */
}
.svg-container2 {
width: 100%;
height: 70px;
/* Tinggi container, sesuaikan sesuai kebutuhan */
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
/* Memastikan SVG ter-crop */
background-position: center;
/* Memastikan bagian tengah SVG selalu terlihat */
background-repeat: no-repeat;
/* Menghindari pengulangan */
}
.mask-faq {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%; /* Masking mengikuti ukuran div */
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* Animasi untuk ikan (bergerak naik turun) */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float-ikan {
0%, 100% {
transform: translateY(-20px); /* Mulai dari posisi lebih tinggi */
}
50% {
transform: translateY(0px); /* Bergerak ke posisi normal */
}
}
.animate-float-ikan {
animation: float-ikan 3s ease-in-out infinite;
}
/* Animasi untuk hiu (bergerak maju mundur) */
@keyframes swim {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(-20px);
}
}
.animate-swim {
animation: swim 4s ease-in-out infinite;
}
/* Tambahkan keyframes untuk animasi kepiting */
@keyframes walkAround {
0% {
transform: translate(0, 0) rotate(-12deg);
}
25% {
transform: translate(50px, -30px) rotate(-5deg);
}
50% {
transform: translate(100px, 0) rotate(40deg);
}
}
/* Class untuk animasi kepiting */
.animate-walk {
animation: walkAround 8s ease-in-out infinite;
}
.mask-home {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}