/*=====================================================
  Google Font
=====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

body{
    font-family:'Poppins',sans-serif;
    background:#08121f;
    color:#fff;
    overflow-x:hidden;
}

/*=====================================================
Animated Background
=====================================================*/

.bg-animation{
    position:fixed;
    inset:0;
    background:linear-gradient(-45deg,#0f172a,#1e3a8a,#4f46e5,#7c3aed,#ec4899);
    background-size:500% 500%;
    animation:gradientMove 15s ease infinite;
    z-index:-2;
}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.bg-animation span{

position:absolute;
display:block;
width:25px;
height:25px;
background:rgba(255,255,255,.15);
border-radius:50%;
animation:float 25s linear infinite;
bottom:-150px;

}

.bg-animation span:nth-child(1){

left:10%;
width:80px;
height:80px;
animation-duration:18s;

}

.bg-animation span:nth-child(2){

left:30%;
animation-duration:22s;

}

.bg-animation span:nth-child(3){

left:55%;
width:60px;
height:60px;

}

.bg-animation span:nth-child(4){

left:75%;
width:90px;
height:90px;
animation-duration:28s;

}

.bg-animation span:nth-child(5){

left:90%;
animation-duration:16s;

}

@keyframes float{

0%{

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

}

20%{

opacity:.4;

}

100%{

transform:translateY(-120vh) rotate(720deg);
opacity:0;

}

}

/*=====================================================
Glass Card
=====================================================*/

.glass-card{

background:rgba(255,255,255,.10);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.2);
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,.35);
transition:.4s;

}

.glass-card:hover{

transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,.5);

}

/*=====================================================
Login
=====================================================*/

.login-card{

padding:40px;

}

.logo-circle{

width:100px;
height:100px;
border-radius:50%;
background:linear-gradient(45deg,#ff4d6d,#ff006e);
display:flex;
align-items:center;
justify-content:center;
font-size:45px;
margin:auto;
box-shadow:0 0 30px #ff4d6d;

}

.form-control{

background:rgba(255,255,255,.15);
border:none;
color:white;

}

.form-control::placeholder{

color:#ddd;

}

.form-control:focus{

background:rgba(255,255,255,.2);
color:white;
box-shadow:none;

}

/*=====================================================
Buttons
=====================================================*/

.btn-love{

background:linear-gradient(45deg,#ff006e,#ff4d6d);
border:none;
border-radius:12px;
padding:14px;
font-weight:700;
color:white;
transition:.3s;

}

.btn-love:hover{

transform:scale(1.05);
box-shadow:0 0 25px #ff4d6d;
color:white;

}

/*=====================================================
Navbar
=====================================================*/

.glass-navbar{

background:rgba(0,0,0,.25);
backdrop-filter:blur(12px);

}

.navbar-brand{

font-size:1.4rem;

}

.nav-link{

color:white !important;
font-weight:500;
margin-left:15px;
transition:.3s;

}

.nav-link:hover{

color:#ffd166 !important;

}

/*=====================================================
Hero
=====================================================*/

.hero-section{

padding:100px 0;

}

.hero-section h1{

font-size:3.5rem;
font-weight:800;
margin-bottom:20px;

}

.hero-section p{

font-size:1.15rem;
color:#ececec;
line-height:1.8;

}

.hero-heart{

font-size:180px;
animation:pulse 2s infinite;
filter:drop-shadow(0 0 25px #ff4d6d);

}

@keyframes pulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.1);

}

}

/*=====================================================
Dashboard Cards
=====================================================*/

.stat-card{

padding:35px;
text-align:center;

}

.stat-card i{

font-size:45px;
margin-bottom:20px;
color:#ffd166;

}

.stat-card h2{

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

}

/*=====================================================
Section Title
=====================================================*/

.section-title{

font-size:2.3rem;
font-weight:700;
margin-bottom:30px;

}

/*=====================================================
Timeline
=====================================================*/

.timeline{

position:relative;
margin-top:40px;
padding-left:30px;
border-left:4px solid #ffd166;

}

.timeline-item{

position:relative;
padding:25px;
margin-bottom:25px;
background:rgba(255,255,255,.08);
border-radius:15px;
transition:.3s;

}

.timeline-item:hover{

transform:translateX(8px);

}

.timeline-item::before{

content:'';
position:absolute;
left:-42px;
top:28px;
width:18px;
height:18px;
background:#ffd166;
border-radius:50%;
box-shadow:0 0 15px #ffd166;

}

/*=====================================================
Blessings
=====================================================*/

.blessing-card{

padding:35px;
text-align:center;
height:100%;

}

.blessing-card h4{

font-size:28px;
margin-bottom:15px;

}

.blessing-card:hover{

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

}

/*=====================================================
Footer
=====================================================*/

footer{

background:rgba(0,0,0,.3);
backdrop-filter:blur(15px);

}

footer h4{

font-weight:700;

}

/*=====================================================
Scrollbar
=====================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#ff4d6d;
border-radius:10px;

}

/*=====================================================
Responsive
=====================================================*/

@media(max-width:992px){

.hero-section{

text-align:center;

}

.hero-heart{

font-size:120px;
margin-top:40px;

}

.hero-section h1{

font-size:2.5rem;

}

}

@media(max-width:768px){

.hero-section{

padding:60px 0;

}

.hero-section h1{

font-size:2rem;

}

.section-title{

font-size:1.8rem;

}

.logo-circle{

width:80px;
height:80px;
font-size:35px;

}

.stat-card{

padding:25px;

}

}

@media(max-width:576px){

.login-card{

padding:25px;

}

.hero-heart{

font-size:90px;

}

.hero-section p{

font-size:1rem;

}

}