/* ==========================================================
   YAYA SPORTS
   Coming Soon
   ElgamelGraphics
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;
    color:#ffffff;
    background:#203B77;
    overflow:hidden;
    height:100vh;

}

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

Background

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

.background{

    position:fixed;

    inset:0;

    background:url('../img/hero.jpg') center center;

    background-size:cover;

    background-repeat:no-repeat;

    animation:bgZoom 25s ease-in-out infinite alternate;

    z-index:-3;

}


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

Dark Overlay

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

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.70);

    backdrop-filter:blur(2px);

    z-index:-2;

}



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

Yellow Glow

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

.overlay::before{

    content:'';

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:#C6D300;

    filter:blur(170px);

    opacity:.10;

    top:-250px;

    right:-250px;

}


.overlay::after{

    content:'';

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:#0059ff;

    filter:blur(180px);

    opacity:.08;

    bottom:-220px;

    left:-220px;

}



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

Loader

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

#loader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}


.loader-logo img{

    width:500px;

    animation:logoLoader 2s ease infinite;

}



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

Main

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

main{

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}



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

Hero

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

.hero{

    width:100%;

    max-width:900px;

    text-align:center;

    padding:70px 50px;

    border-radius:35px;

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

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

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:

        0 0 50px rgba(0,0,0,.45),

        inset 0 0 30px rgba(255,255,255,.03);

}



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

Background Animation

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

@keyframes bgZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}



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

Logo Loader

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

@keyframes logoLoader{

    0%{

        transform:scale(.9);

        opacity:.5;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.5;

    }

}

/*==========================================================
LOGO
==========================================================*/

.logo{

    width:250px;

    margin-bottom:30px;

    animation:logoAnimation 2s ease forwards;

    filter:drop-shadow(0 0 20px rgba(255,212,0,.40));

    transition:.4s;

}

.logo:hover{

    transform:scale(3.08);

    filter:drop-shadow(0 0 40px rgba(123, 255, 0, 0.9));

}



/*==========================================================
COMPANY
==========================================================*/

.company{

    font-size:18px;

    letter-spacing:10px;

    text-transform:uppercase;

    color:#C6D300;

    font-weight:600;

    margin-bottom:18px;

}



/*==========================================================
COMING SOON
==========================================================*/

.hero h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:95px;

    line-height:1;

    letter-spacing:5px;

    margin-bottom:15px;

    color:#ffffff;

    text-shadow:

    0 5px 25px rgba(255,255,255,.20);

}



/*==========================================================
DESCRIPTION
==========================================================*/

.hero p{

    max-width:650px;

    margin:auto;

    margin-bottom:45px;

    color:#dddddd;

    font-size:20px;

    line-height:1.9;

    font-weight:300;

}




/*==========================================================
BUTTON
==========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:240px;

    height:62px;

    border-radius:60px;

    text-decoration:none;

    color:#111;

    background:#C6D300;

    font-size:17px;

    font-weight:700;

    letter-spacing:1px;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(255,212,0,.25);

}



.btn:hover{

    transform:translateY(-6px);

    background:#ffffff;

    box-shadow:

    0 25px 45px rgba(255,255,255,.20);

}

/*==========================================================
SOCIAL
==========================================================*/

.social{

    margin-top:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}

.social a{

    width:58px;

    height:58px;

    border-radius:50%;

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

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

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#ffffff;

    font-size:22px;

    transition:.35s;

    backdrop-filter:blur(8px);

}

.social a:hover{

    background:#C6D300;

    color:#111;

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

    box-shadow:

    0 0 25px rgba(255,212,0,.45);

}


/*==========================================================
FOOTER
==========================================================*/

footer{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    text-align:center;

    color:#bdbdbd;

    font-size:14px;

    letter-spacing:1px;

}

footer p{

    margin-bottom:8px;

}

footer strong{

    color:#C6D300;

    font-weight:700;

}



/*==========================================================
DECORATIVE LINES
==========================================================*/

body::before{

    content:"";

    position:fixed;

    top:0;

    left:-30%;

    width:160%;

    height:2px;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,212,0,.9),
    transparent);

    animation:lineMove 10s linear infinite;

    opacity:.45;

}

body::after{

    content:"";

    position:fixed;

    bottom:0;

    right:-30%;

    width:160%;

    height:2px;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent);

    animation:lineMoveReverse 12s linear infinite;

    opacity:.35;

}



/*==========================================================
CURSOR LIGHT
==========================================================*/

.cursor-light{

    position:fixed;

    width:280px;

    height:280px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,212,0,.18),
    transparent 70%);

    pointer-events:none;

    mix-blend-mode:screen;

    z-index:999;

    transform:translate(-50%,-50%);

}



/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#C6D300;

    border-radius:20px;

}



/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes logoAnimation{

    0%{

        opacity:0;

        transform:translateY(-60px) scale(.5);

    }

    100%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes lineMove{

    from{

        transform:translateX(-15%);

    }

    to{

        transform:translateX(15%);

    }

}

@keyframes lineMoveReverse{

    from{

        transform:translateX(15%);

    }

    to{

        transform:translateX(-15%);

    }

}




#particles-js{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:-2;

    pointer-events:none;

}



footer a {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

footer a:hover {
    color: #FFD700;
    text-decoration: underline;
}