body{
margin:0;
font-family:Poppins;
background:linear-gradient(135deg,#fff200,#8cff00);
}
.hero{

position:relative;
height:600px;

background:linear-gradient(
180deg,
#00bfff,
#0077b6,
#023e8a
);

overflow:hidden;

}

/* WATER WAVE */
.waves{

position:absolute;
bottom:0;
width:100%;
overflow:hidden;

}

.waves svg{

width:200%;
animation:waveMove 8s linear infinite;

}

@keyframes waveMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}
.water{

position:absolute;
bottom:0;
width:200%;
height:200px;
background:url("https://i.imgur.com/ZAts69K.png");
background-size:1000px 200px;

animation:wave 10s linear infinite;

opacity:0.4;

}

@keyframes wave{

0%{background-position-x:0}
100%{background-position-x:1000px}

}


/* BUBBLES */

.bubbles span{

position:absolute;
bottom:-100px;
width:20px;
height:20px;

background:white;

border-radius:50%;

opacity:.5;

animation:bubble 8s infinite;

}

.bubbles span:nth-child(1){left:10%;animation-duration:6s}
.bubbles span:nth-child(2){left:20%;animation-duration:8s}
.bubbles span:nth-child(3){left:35%;animation-duration:7s}
.bubbles span:nth-child(4){left:50%;animation-duration:10s}
.bubbles span:nth-child(5){left:65%;animation-duration:9s}
.bubbles span:nth-child(6){left:80%;animation-duration:6s}
.bubbles span:nth-child(7){left:90%;animation-duration:7s}

@keyframes bubble{

0%{

transform:translateY(0);
opacity:.6;

}

100%{

transform:translateY(-800px);
opacity:0;

}

}


/* FISH */

.fish{

position:absolute;
width:120px;
animation:swim linear infinite;

}

.fish1{

top:200px;
animation-duration:20s;

}

.fish2{

top:350px;
animation-duration:25s;

}

.fish3{

top:120px;
animation-duration:18s;

}

@keyframes swim{

0%{

left:-200px;
transform:scaleX(1);

}

50%{

transform:scaleX(1);

}

100%{

left:120%;
transform:scaleX(1);

}

}


/* HERO TEXT */

.hero-text{

position:relative;
z-index:10;
text-align:center;
color:white;

}



.hero-text h1{

font-size:60px;
font-weight:700;

}

.hero-text h2{

color:yellow;
font-size:40px;

}
header{

display:flex;
justify-content:space-between;
align-items:center;

padding:15px 25px;

background:#ffd400;
position:fixed;
width:100%;
top:0;
z-index:999;

}

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:20px;
}


.logo img{
width:40px;
border-radius:50%;
}


nav{
display:flex;
gap:30px;
}


nav a{
text-decoration:none;
color:#333;
font-weight:600;
}


.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}



.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 8%;
gap:50px;
}


.hero-text h1{
font-size:50px;
color:#006400;
}


.hero-text h2{
color:red;
font-size:36px;
}


.hero-text p{
font-size:18px;
}


.btn{
background:#008000;
color:white;
padding:15px 30px;
border-radius:10px;
text-decoration:none;
display:inline-block;
margin-top:20px;
transition:0.3s;
}


.btn:hover{
transform:scale(1.1);
}


.hero-img img{
width:500px;
animation:float 4s ease-in-out infinite;
}


@keyframes float{

0%{transform:translateY(0)}

50%{transform:translateY(-20px)}

100%{transform:translateY(0)}

}



.highlight{
padding:80px 8%;
text-align:center;
}


.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin-top:40px;
}


.box{
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
transition:0.3s;
}


.box:hover{
transform:translateY(-10px);
}



#produk{
padding:80px 8%;
text-align:center;
}


.fish-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin-top:40px;
}


.fish-card{
background:white;
padding:20px;
border-radius:20px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
transition:0.4s;
}


.fish-card:hover{
transform:scale(1.05);
}


.fish-card img{
width:100%;
border-radius:10px;
}



.marinasi{
padding:100px 20px;
text-align:center;
background:#006400;
color:white;
font-size:22px;
}



#lokasi{
padding:80px 8%;
text-align:center;
}


#lokasi iframe{
width:100%;
height:400px;
border-radius:15px;
border:none;
}



#kontak{
padding:80px;
text-align:center;
}


.btn-wa{
background:#25D366;
padding:20px 40px;
color:white;
border-radius:10px;
text-decoration:none;
font-size:20px;
}



footer{
background:#004d00;
color:white;
text-align:center;
padding:20px;
}



.floating-wa{
position:fixed;
right:20px;
bottom:20px;
background:#25D366;
color:white;
font-size:25px;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
box-shadow:0 5px 20px rgba(0,0,0,0.3);
}



@media(max-width:768px){

.hero{
flex-direction:column;
text-align:center;
}

.hero-img img{
width:100%;
}

nav{
position:absolute;
top:70px;
left:0;
width:100%;
background:white;
flex-direction:column;
display:none;
}

nav.active{
display:flex;
}

.menu-toggle{
display:block;
}

}