*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(-45deg,#F7F2E7,#fff7ef,#f6efe3,#faf7f1);
background-size:400% 400%;
animation:bgMove 15s ease infinite;
overflow:hidden;
}

@keyframes bgMove{
0%{
background-position:0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
}


.circle{
position:absolute;
border-radius:50%;
background:rgba(13,138,124,.08);
animation:float 12s infinite ease-in-out;
}


.circle:nth-child(1){
width:220px;
height:220px;
top:-80px;
left:-80px;
}


.circle:nth-child(2){
width:150px;
height:150px;
bottom:-50px;
right:-40px;
animation-duration:10s;
}


.circle:nth-child(3){
width:90px;
height:90px;
top:15%;
right:10%;
animation-duration:8s;
}


@keyframes float{
50%{
transform:translateY(-30px) rotate(25deg);
}
}


.container{

width:90%;
max-width:760px;
padding:50px;

background:rgba(255,255,255,.75);
backdrop-filter:blur(14px);

border-radius:25px;

box-shadow:0 15px 45px rgba(0,0,0,.12);

text-align:center;

position:relative;
z-index:10;

animation:fadeUp 1s ease;

}



@keyframes fadeUp{

from{
opacity:0;
transform:translateY(50px);
}

to{
opacity:1;
transform:translateY(0);
}

}



.logo{

width:170px;

margin-bottom:25px;

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

}



@keyframes logoFloat{

50%{
transform:translateY(-10px);
}

}



h1{

font-size:58px;

margin-bottom:15px;

color:#222;

}



.subtitle{

font-size:22px;

font-weight:600;

color:#0D8A7C;

margin-bottom:20px;

}



p{

color:#666;

font-size:18px;

line-height:1.8;

margin-bottom:35px;

}



.timer{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:35px;

flex-wrap:wrap;

}



.time-box{

background:#0D8A7C;

color:white;

padding:18px;

border-radius:15px;

min-width:90px;

box-shadow:0 10px 20px rgba(13,138,124,.25);

}



.time-box span{

display:block;

font-size:32px;

font-weight:700;

}



.time-box small{

font-size:13px;

letter-spacing:1px;

}



.notify{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}



.notify input{

width:320px;

padding:15px 20px;

border-radius:50px;

border:2px solid transparent;

outline:none;

font-size:15px;

transition:.3s;

}



.notify input:focus{

border-color:#0D8A7C;

box-shadow:0 0 15px rgba(13,138,124,.25);

}



.notify button{

padding:15px 35px;

background:#0D8A7C;

color:white;

border:none;

border-radius:50px;

cursor:pointer;

font-size:15px;

transition:.3s;

}



.notify button:hover{

transform:translateY(-3px);

background:#08695f;

}



.social{

margin-top:35px;

}



.social a{

display:inline-block;

margin:8px;

padding:10px 20px;

border-radius:30px;

text-decoration:none;

background:#0D8A7C;

color:white;

transition:.3s;

}



.social a:hover{

transform:translateY(-5px);

}



.footer{

margin-top:40px;

color:#777;

}



@media(max-width:700px){

.container{

padding:35px 20px;

}


h1{

font-size:42px;

}


.notify input,
.notify button{

width:100%;

}


.time-box{

min-width:70px;

}

}