/* ==========================================
   PREMIUM LANDING PAGE CSS
   PART - 1
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:
    radial-gradient(circle at top,#103b8f 0%,#08182f 35%,#02050d 70%,#000000 100%);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:5px;

}

::-webkit-scrollbar-thumb{

    background:#00bfff;

    border-radius:50px;

}

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

.background-animation{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:0;

    pointer-events:none;

}

.background-animation span{

    position:absolute;

    width:2px;

    height:240px;

    background:linear-gradient(
        transparent,
        #00d5ff,
        transparent);

    opacity:.45;

    filter:blur(.6px);

    animation:moveLine linear infinite;

}

.background-animation span:nth-child(1){left:4%;animation-duration:5s;}
.background-animation span:nth-child(2){left:13%;animation-duration:6s;}
.background-animation span:nth-child(3){left:22%;animation-duration:7s;}
.background-animation span:nth-child(4){left:31%;animation-duration:8s;}
.background-animation span:nth-child(5){left:40%;animation-duration:5.5s;}
.background-animation span:nth-child(6){left:50%;animation-duration:6.5s;}
.background-animation span:nth-child(7){left:61%;animation-duration:7.5s;}
.background-animation span:nth-child(8){left:73%;animation-duration:5.8s;}
.background-animation span:nth-child(9){left:86%;animation-duration:6.8s;}
.background-animation span:nth-child(10){left:96%;animation-duration:8s;}

@keyframes moveLine{

0%{

transform:translateY(-250px);

opacity:0;

}

20%{

opacity:.6;

}

100%{

transform:translateY(120vh);

opacity:0;

}

}

/* ===========================
Main Container
=========================== */

.container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:430px;

    margin:auto;

    padding:18px 14px 40px;

}

/* ===========================
Top Banner
=========================== */

.banner{

    width:100%;

    aspect-ratio:600/314;

    overflow:hidden;

    border-radius:20px;

    border:1px solid rgba(0,180,255,.35);

    background:#061324;

    box-shadow:

    0 0 20px rgba(0,180,255,.20),

    0 0 60px rgba(0,130,255,.15),

    inset 0 0 12px rgba(255,255,255,.05);

}

.banner img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.5s;

}

.banner img:hover{

    transform:scale(1.03);

}

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

.box{

    margin-top:24px;

    padding:16px;

    border-radius:20px;

    background:rgba(9,17,35,.78);

    backdrop-filter:blur(20px);

    border:1px solid rgba(0,170,255,.15);

    box-shadow:

    0 15px 40px rgba(0,0,0,.45),

    inset 0 0 15px rgba(0,170,255,.08);

}

/* Image inside Card */

.box .banner{

    margin-bottom:16px;

}

/* ===========================
Heading
=========================== */

.box h2{

    color:#fff;

    text-align:center;

    font-size:21px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

    text-shadow:

    0 0 12px rgba(0,180,255,.25);

}
/* ==========================================
   PREMIUM BUTTON
========================================== */

.btn{

    display:block;

    width:100%;

    padding:17px 15px;

    text-align:center;

    text-decoration:none;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

    border-radius:15px;

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

    background:linear-gradient(
    135deg,
    #ff4da6 0%,
    #ff0088 35%,
    #d100ff 70%,
    #7dff7d 100%);

    background-size:300% 300%;

    animation:buttonGradient 5s linear infinite;

    box-shadow:

    0 10px 25px rgba(255,0,170,.35),

    0 0 20px rgba(0,255,170,.18);

    transition:.35s ease;

}

/* Gradient Animation */

@keyframes buttonGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* Hover */

.btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 35px rgba(255,0,170,.45),

    0 0 30px rgba(0,255,170,.30);

}

/* Click */

.btn:active{

    transform:scale(.97);

}

/* ==========================================
   Floating Glow
========================================== */

.box{

    animation:cardFloat 5s ease-in-out infinite;

}

@keyframes cardFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

@media(max-width:430px){

.container{

padding:16px 12px 40px;

}

.box{

padding:15px;

margin-top:22px;

}

.box h2{

font-size:20px;

}

.btn{

font-size:17px;

padding:16px;

}

}

/* ==========================================
Desktop View
========================================== */

@media(min-width:431px){

body{

display:flex;

justify-content:center;

background:#000;

}

.container{

max-width:430px;

}

}

/* ==========================================
Smooth Fade Animation
========================================== */

.banner,
.box{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(20px);

}

100%{

opacity:1;

transform:translateY(0);

}

}