/* ===========================
   KRETA - KINDERWELT CSS
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI",sans-serif;
    overflow-x:hidden;
    background:#9edfff;
}

/* ===========================
   HERO
=========================== */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:linear-gradient(
        to bottom,
        #72cfff 0%,
        #9fe5ff 40%,
        #d9f6ff 60%,
        #fff3c2 100%
    );
}

/* ===========================
   SUN
=========================== */

.sun{

    position:absolute;

    width:170px;

    height:170px;

    background:#FFD84D;

    border-radius:50%;

    right:120px;

    top:80px;

    box-shadow:
    0 0 30px #FFD84D,
    0 0 80px gold,
    0 0 140px orange;

    animation:sunGlow 5s infinite alternate;

}

@keyframes sunGlow{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

/* ===========================
   SKY
=========================== */

.sky{

position:absolute;

width:100%;

height:100%;

}

/* ===========================
   CLOUDS
=========================== */

.cloud{

position:absolute;

background:white;

border-radius:50px;

opacity:.95;

}

.cloud:before{

content:"";

position:absolute;

background:white;

border-radius:50%;

}

.cloud:after{

content:"";

position:absolute;

background:white;

border-radius:50%;

}

.cloud1{

width:220px;

height:65px;

top:120px;

left:-250px;

animation:moveCloud 30s linear infinite;

}

.cloud1:before{

width:90px;

height:90px;

top:-40px;

left:20px;

}

.cloud1:after{

width:90px;

height:90px;

top:-45px;

right:20px;

}

.cloud2{

width:170px;

height:55px;

top:250px;

left:-350px;

animation:moveCloud 42s linear infinite;

}

.cloud2:before{

width:70px;

height:70px;

top:-30px;

left:15px;

}

.cloud2:after{

width:70px;

height:70px;

top:-35px;

right:15px;

}

.cloud3{

width:260px;

height:70px;

top:60px;

left:-450px;

animation:moveCloud 50s linear infinite;

}

.cloud3:before{

width:100px;

height:100px;

top:-45px;

left:25px;

}

.cloud3:after{

width:100px;

height:100px;

top:-45px;

right:25px;

}

@keyframes moveCloud{

100%{

transform:translateX(2200px);

}

}

/* ===========================
   SEA
=========================== */

.sea{

position:absolute;

bottom:0;

width:100%;

height:220px;

background:linear-gradient(

to bottom,

#00a8ff,

#0078d7,

#005fb8

);

overflow:hidden;

}

/* ===========================
   WAVES
=========================== */

.waves{

position:absolute;

top:-25px;

left:0;

width:200%;

height:60px;

background:

radial-gradient(circle at 30px 30px,
white 22px,
transparent 23px)

repeat-x;

background-size:60px 60px;

animation:waveMove 8s linear infinite;

opacity:.65;

}

@keyframes waveMove{

100%{

transform:translateX(-60px);

}

}

/* ===========================
   BEACH
=========================== */

.beach{

position:absolute;

bottom:0;

width:100%;

height:80px;

background:#f9df97;

}

/* ===========================
   HERO CONTENT
=========================== */

.hero-content{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

text-align:center;

z-index:10;

animation:fadeUp 2s;

}

.hero-content h1{

font-size:4rem;

color:white;

text-shadow:3px 3px 12px rgba(0,0,0,.4);

margin-bottom:20px;

}

.hero-content p{

font-size:1.5rem;

color:white;

margin-bottom:40px;

}

.hero-btn{

display:inline-block;

padding:18px 45px;

background:#ff9800;

color:white;

border-radius:50px;

font-size:1.2rem;

text-decoration:none;

font-weight:bold;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.hero-btn:hover{

transform:translateY(-5px) scale(1.05);

background:#ffb300;

}

/* ===========================
   FADE
=========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translate(-50%,-30%);

}

to{

opacity:1;

transform:translate(-50%,-50%);

}

}


/* =====================================
   DOLPHIN
===================================== */

.dolphin{
    position:absolute;
    width:140px;
    height:80px;
    bottom:110px;
    left:-180px;
    background:url("image/dolphin.png") center/contain no-repeat;
    animation:dolphinJump 12s linear infinite;
    z-index:20;
}

@keyframes dolphinJump{

0%{
left:-180px;
bottom:80px;
transform:rotate(0deg);
}

20%{
bottom:180px;
transform:rotate(-20deg);
}

35%{
bottom:260px;
transform:rotate(-35deg);
}

50%{
bottom:150px;
transform:rotate(10deg);
}

70%{
bottom:90px;
}

100%{
left:120%;
bottom:80px;
}

}

/* =====================================
   TURTLE
===================================== */

.turtle{

position:absolute;

bottom:18px;

left:-120px;

width:90px;

height:90px;

background:url("image/turtle.png") center/contain no-repeat;

animation:turtleWalk 35s linear infinite;

z-index:30;

}

@keyframes turtleWalk{

100%{

left:110%;

}

}

/* =====================================
   PALMS
===================================== */

.palm{

position:absolute;

bottom:70px;

width:230px;

height:320px;

background-size:contain;

background-repeat:no-repeat;

animation:palmMove 4s ease-in-out infinite;

transform-origin:bottom;

}

.palm-left{

left:0;

background-image:url("image/balloon1.png");

}

.palm-right{

right:0;

background-image:url("image/balloon1.png");

transform:scaleX(-1);

}

@keyframes palmMove{

0%{

transform:rotate(-2deg);

}

50%{

transform:rotate(2deg);

}

100%{

transform:rotate(-2deg);

}

}

/* =====================================
   BUBBLES
===================================== */

.bubble{

position:absolute;

bottom:40px;

width:18px;

height:18px;

border-radius:50%;

background:rgba(255,255,255,.7);

animation:bubbleUp 5s linear infinite;

}

.bubble1{

left:20%;

animation-delay:0s;

}

.bubble2{

left:35%;

animation-delay:1s;

}

.bubble3{

left:50%;

animation-delay:2s;

}

.bubble4{

left:70%;

animation-delay:3s;

}

.bubble5{

left:85%;

animation-delay:4s;

}

@keyframes bubbleUp{

0%{

transform:translateY(0) scale(.4);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(-320px) scale(1.3);

opacity:0;

}

}

/* =====================================
   BALLOONS
===================================== */

.balloon{

position:absolute;

width:70px;

height:100px;

background-size:contain;

background-repeat:no-repeat;

animation:balloonFly 18s linear infinite;

opacity:.9;

}

.balloon1{

left:10%;

bottom:-150px;

background-image:url("images/balloon1.png");

}

.balloon2{

left:45%;

bottom:-220px;

animation-delay:5s;

background-image:url("images/balloon2.png");

}

.balloon3{

left:82%;

bottom:-180px;

animation-delay:10s;

background-image:url("images/balloon3.png");

}

@keyframes balloonFly{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-1300px);

}

}

/* =====================================
   KINDER CARDS
===================================== */

.kinder-card{

transition:.45s;

border-radius:25px;

overflow:hidden;

cursor:pointer;

}

.kinder-card:hover{

transform:translateY(-15px) rotate(2deg);

box-shadow:0 25px 50px rgba(0,0,0,.3);

}

.kinder-card img{

transition:.5s;

}

.kinder-card:hover img{

transform:scale(1.08);

}

.kinder-card h3{

color:#1565c0;

margin:15px 0;

}

.kinder-card p{

font-size:17px;

}

/* =====================================
   FLOATING STARS
===================================== */

.star{

position:fixed;

width:8px;

height:8px;

background:#FFD700;

border-radius:50%;

pointer-events:none;

animation:starFade .8s linear forwards;

}

@keyframes starFade{

0%{

opacity:1;

transform:scale(1);

}

100%{

opacity:0;

transform:scale(3);

}

}