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

body{
    background:#050816;
    color:#fff;
    overflow-x:hidden;
}

/* Loader */

#loader{
    position:fixed;
    inset:0;
    background:#050816;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.heart{
    width:80px;
    height:80px;
    background:#ff3366;
    transform:rotate(-45deg);
    animation:beat .8s infinite;
}

.heart:before,
.heart:after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    background:#ff3366;
    border-radius:50%;
}

.heart:before{
    top:-40px;
    left:0;
}

.heart:after{
    left:40px;
    top:0;
}

@keyframes beat{

0%,100%{
transform:rotate(-45deg) scale(1);
}

50%{
transform:rotate(-45deg) scale(1.2);
}

}

/* Hero */

#hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

position:relative;

overflow:hidden;

}

.content{

width:700px;

max-width:90%;

padding:40px;

text-align:center;

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

backdrop-filter:blur(15px);

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

border-radius:25px;

box-shadow:0 20px 60px rgba(0,0,0,.5);

z-index:10;

}

#title{

font-size:55px;

margin-bottom:25px;

}

#typing{

font-size:22px;

line-height:40px;

margin-bottom:35px;

color:#ddd;

}

button{

padding:15px 45px;

border:none;

background:#ff3366;

color:white;

font-size:20px;

border-radius:50px;

cursor:pointer;

transition:.4s;

}

button:hover{

transform:scale(1.08);

box-shadow:0 0 30px #ff3366;

}

/* Stars */

.stars{

position:absolute;

inset:0;

background-image:

radial-gradient(white 1px, transparent 1px);

background-size:40px 40px;

animation:moveStars 40s linear infinite;

opacity:.4;

}

@keyframes moveStars{

from{

transform:translateY(0);

}

to{

transform:translateY(-600px);

}

}

/* Timeline */

.timeline{

padding:100px 10%;

}

.timeline h2{

text-align:center;

font-size:45px;

margin-bottom:60px;

}

.card{

display:flex;

gap:30px;

margin-bottom:50px;

align-items:center;

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

padding:20px;

border-radius:20px;

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(255,51,102,.3);

}

.card img{

width:300px;

height:200px;

object-fit:cover;

border-radius:15px;

}

.text h3{

font-size:30px;

margin-bottom:15px;

}

.text p{

font-size:18px;

color:#ddd;

}

/* Gift */

#gift{

padding:120px 30px;

text-align:center;

}

#gift h1{

font-size:55px;

margin-bottom:20px;

}

#gift p{

font-size:22px;

margin-bottom:40px;

color:#ddd;

}

video{

max-width:90%;

border-radius:20px;

box-shadow:0 20px 60px rgba(0,0,0,.5);

}

/* Responsive */

@media(max-width:768px){

.card{

flex-direction:column;

}

.card img{

width:100%;

}

#title{

font-size:35px;

}

}