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

body{

background:
linear-gradient(-45deg,
#ffe4ec,
#fff5fa,
#ffe9f2,
#ffffff);

background-size:400% 400%;

animation:bgMove 15s infinite ease;

overflow-x:hidden;

}

/*======================*/

header{

position:sticky;
top:0;
z-index:9999;

}

/*======================*/

.navbar{

width:95%;

max-width:1450px;

margin:20px auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 30px;

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

backdrop-filter:blur(18px);

border-radius:25px;

border:1px solid rgba(255,255,255,.4);

box-shadow:

0 8px 35px rgba(255,105,180,.18);

animation:showNavbar 1s ease;

}

/*======================*/

.logo{

display:flex;

align-items:center;

gap:10px;

text-decoration:none;

font-size:28px;

font-weight:700;

color:#ff3c7c;

}

.logo:hover{

transform:scale(1.05);

}

.heart{

animation:heartbeat 1.3s infinite;

}

/*======================*/

.nav-links{

display:flex;

gap:12px;

}

.nav-links a{

position:relative;

text-decoration:none;

color:#555;

font-weight:600;

padding:12px 18px;

border-radius:15px;

transition:.35s;

overflow:hidden;

}

.nav-links a::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;
height:100%;

background:
linear-gradient(120deg,
transparent,
rgba(255,255,255,.7),
transparent);

transition:.6s;

}

.nav-links a:hover::before{

left:100%;

}

.nav-links a:hover{

background:#ff5c99;

color:white;

transform:translateY(-5px);

box-shadow:0 10px 20px rgba(255,90,150,.35);

}

.active{

background:#ff3c7c;

color:white!important;

}

/*======================*/

.menu-toggle{

display:none;

cursor:pointer;

}

.menu-toggle span{

display:block;

width:30px;

height:3px;

margin:6px;

background:#ff3c7c;

transition:.4s;

}

.menu-toggle.open span:nth-child(1){

transform:rotate(45deg) translate(6px,6px);

}

.menu-toggle.open span:nth-child(2){

opacity:0;

}

.menu-toggle.open span:nth-child(3){

transform:rotate(-45deg) translate(7px,-7px);

}

/*======================*/

.floating-hearts{

position:absolute;

top:0;
left:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:-1;

}

.floating-hearts span{

position:absolute;

bottom:-50px;

color:#ff8bb5;

font-size:25px;

animation:float 10s linear infinite;

opacity:.25;

}

.floating-hearts span:nth-child(1){

left:8%;
animation-duration:10s;
}

.floating-hearts span:nth-child(2){

left:25%;
animation-duration:14s;
font-size:18px;
}

.floating-hearts span:nth-child(3){

left:50%;
animation-duration:12s;
}

.floating-hearts span:nth-child(4){

left:75%;
animation-duration:16s;
font-size:30px;
}

.floating-hearts span:nth-child(5){

left:90%;
animation-duration:11s;
}

/*======================*/

@keyframes float{

0%{

transform:translateY(0) rotate(0deg);

opacity:0;

}

15%{

opacity:.25;

}

100%{

transform:translateY(-600px) rotate(360deg);

opacity:0;

}

}

@keyframes heartbeat{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.25);

}

}

@keyframes bgMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes showNavbar{

from{

opacity:0;

transform:translateY(-60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*======================*/

@media(max-width:1050px){

.menu-toggle{

display:block;

z-index:1001;

}

.nav-links{

position:fixed;

top:0;
right:-100%;

width:300px;

height:100vh;

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

backdrop-filter:blur(25px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

transition:.5s;

}

.nav-links.show{

right:0;

}

.nav-links a{

width:80%;

text-align:center;

font-size:18px;

}

}