/*==========================================================
    Fedora Games
    style.css
==========================================================*/

:root{

    --bg:#04080f;
    --bg2:#07111d;
    --bg3:#0d1b2b;

    --blue:#3f8cff;
    --blue2:#63c2ff;

    --purple:#6675ff;

    --white:#ffffff;
    --text:#d6e2f1;
    --muted:#90a2b8;

    --glass:
        rgba(255,255,255,.045);

    --glass2:
        rgba(255,255,255,.025);

    --border:
        rgba(255,255,255,.07);

    --shadow:
        0 30px 70px rgba(0,0,0,.45);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    font-family:Inter,sans-serif;

    color:var(--white);

    overflow-x:hidden;

    background:

    radial-gradient(circle at 50% -10%,
        rgba(70,140,255,.22),
        transparent 40%),

    radial-gradient(circle at 80% 20%,
        rgba(110,80,255,.08),
        transparent 30%),

    linear-gradient(
        180deg,
        #07111d 0%,
        #04080f 45%,
        #02060d 100%
    );

}

body::before{

content:"";

position:fixed;

left:-20%;

top:-20%;

width:140%;

height:140%;

pointer-events:none;

background:

radial-gradient(circle,
rgba(70,140,255,.06),
transparent 60%);

animation:ambientMove 24s ease-in-out infinite;

z-index:-5;

}

/***************************************************
    Background glow
****************************************************/

#bgGlow{

    position:fixed;

    width:900px;
    height:900px;

    left:50%;
    top:-350px;

    transform:translateX(-50%);

    background:

    radial-gradient(circle,
        rgba(70,140,255,.25),
        rgba(70,140,255,.05),
        transparent 70%);

    pointer-events:none;

    z-index:-1;

}

/***************************************************
    Navigation
****************************************************/

header{

    position:fixed;

    width:100%;

    z-index:500;

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 60px;

    transition:var(--transition);

}

.navbar.scrolled{

background:

rgba(5,9,16,.82);

backdrop-filter:

blur(22px);

border-bottom:

1px solid rgba(255,255,255,.05);

}

.logo img{

    height:58px;

}

.navbar ul{

    display:flex;

    gap:40px;

    list-style:none;

}

.navbar a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

    position:relative;

}

.navbar a:hover{

    color:var(--primary2);

}

.navbar a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--primary2);

    transition:var(--transition);

}

.navbar a:hover::after{

    width:100%;

}

.menuButton{

    display:none;

    font-size:32px;

    cursor:pointer;

}

/***************************************************
    Hero
****************************************************/

.hero{

position:relative;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.15),

rgba(0,0,0,.65)

);

}

.hero::after{

content:"";

position:absolute;

width:1000px;

height:1000px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(80,150,255,.18),

transparent 70%

);

filter:blur(40px);

animation:pulseGlow 12s infinite;

}

.heroOverlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        rgba(5,8,12,.15),
        rgba(5,8,12,.55)
    );

}

.heroContent{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:40px;

}

.heroLogo{

width:340px;

animation:

logoFloat 8s ease-in-out infinite;

filter:

drop-shadow(0 0 50px rgba(70,140,255,.25))

drop-shadow(0 0 120px rgba(70,140,255,.12));

}

.hero h1{

font-size:4.8rem;

font-weight:800;

letter-spacing:-3px;

text-shadow:

0 0 30px rgba(60,140,255,.18);

}

.hero p{

font-size:1.35rem;

max-width:760px;

margin:auto;

color:var(--text);

line-height:2;

}

/***************************************************
    Buttons
****************************************************/

.heroButtons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.primaryButton,
.secondaryButton{

    text-decoration:none;

    padding:16px 36px;

    border-radius:50px;

    transition:var(--transition);

    font-weight:700;

}

.primaryButton{

background:

linear-gradient(

135deg,

#4d8fff,

#2b66ff

);

border-radius:60px;

padding:

18px 42px;

box-shadow:

0 20px 50px

rgba(60,130,255,.25);

transition:.35s;

}

.primaryButton:hover{

transform:

translateY(-6px)

scale(1.03);

box-shadow:

0 25px 70px

rgba(60,130,255,.40);

}

.secondaryButton{

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

    color:white;

}

.secondaryButton:hover{

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

}

/***************************************************
    Sections
****************************************************/

section{

    padding:120px 60px;

}

.sectionTitle{

    text-align:center;

    margin-bottom:70px;

}

.sectionTitle h2{

    font-size:2.8rem;

    margin-bottom:15px;

}

.sectionTitle p{

    color:var(--muted);

}

.darkSection{

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

}

/***************************************************
    Cards
****************************************************/

.cards{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

.card{

background:

linear-gradient(

180deg,

rgba(255,255,255,.06),

rgba(255,255,255,.025)

);

backdrop-filter:

blur(18px);

border:

1px solid rgba(255,255,255,.06);

border-radius:22px;

overflow:hidden;

transition:.35s;

}

.card:hover{

transform:

translateY(-12px);

border-color:

rgba(100,180,255,.40);

box-shadow:

0 40px 80px

rgba(0,0,0,.45);

}

.image{

    height:220px;

}

.placeholder{

background:

linear-gradient(

140deg,

#0f2237,

#204785,

#0b1624

);

position:relative;

overflow:hidden;

}

.placeholder::before{

content:"";

position:absolute;

left:-200px;

top:0;

width:120px;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:skewX(-20deg);

animation:shine 6s infinite;

}
.card h3{

    padding:30px 30px 10px;

    font-size:1.5rem;

}

.card p{

    padding:0 30px 25px;

    color:var(--muted);

    line-height:1.8;

}

.card a{

    display:inline-block;

    margin:0 30px 30px;

    color:var(--primary2);

    text-decoration:none;

    font-weight:700;

}

/***************************************************
    Wide Cards
****************************************************/

.wideCard{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:50px;

    border-radius:24px;

    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

    border:1px solid var(--border);

}

.wideCard h3{

    font-size:2rem;

    margin-bottom:15px;

}

.wideCard p{

    color:var(--muted);

    line-height:1.8;

}

.wideCard a{

    text-decoration:none;

    background:var(--primary);

    color:white;

    padding:15px 30px;

    border-radius:50px;

    white-space:nowrap;

    transition:var(--transition);

}

.wideCard a:hover{

    transform:translateY(-4px);

}

/***************************************************
    About
****************************************************/

.about{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.about p{

    color:var(--muted);

    line-height:2;

    font-size:1.1rem;

}

/***************************************************
    Footer
****************************************************/

footernew{
padding:80px 60px;
background:

linear-gradient(

180deg,

#08111b,

#02060d

);

    grid-template-columns:

        1fr
        1fr
        1fr;

    gap:50px;
}

footer{

    padding:80px 60px;

    background:#050b12;

    display:grid;

    grid-template-columns:

        1fr
        1fr
        1fr;

    gap:50px;

}


footer img{

    width:160px;

}

footer h3{

    margin-bottom:15px;

}

footer p{

    color:var(--muted);

}

footer a{

    display:block;

    margin-bottom:12px;

    text-decoration:none;

    color:var(--muted);

    transition:var(--transition);

}

footer a:hover{

    color:white;

}

/***************************************************
    Animations
****************************************************/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.8;

    }

}

@keyframes ambientMove{

0%{

transform:

translate(-3%,0);

}

50%{

transform:

translate(3%,2%);

}

100%{

transform:

translate(-3%,0);

}

}

@keyframes pulseGlow{

0%{

transform:

scale(.9);

opacity:.5;

}

50%{

transform:

scale(1.1);

opacity:1;

}

100%{

transform:

scale(.9);

opacity:.5;

}

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

@keyframes shine{

0%{

left:-200px;

}

100%{

left:120%;

}

}

/***************************************************
    Responsive
****************************************************/

@media(max-width:980px){

.navbar{

    padding:20px;

}

.navbar ul{

    display:none;

}

.menuButton{

    display:block;

}

.hero h1{

    font-size:2.8rem;

}

.heroLogo{

    width:260px;

}

.wideCard{

    flex-direction:column;

    text-align:center;

}

footer{

    grid-template-columns:1fr;

    text-align:center;

}

}

@media(max-width:700px){

section{

    padding:80px 24px;

}

.hero h1{

    font-size:2.2rem;

}

.hero p{

    font-size:1rem;

}

.sectionTitle h2{

font-size:3rem;

font-weight:800;

letter-spacing:-2px;

margin-bottom:20px;

}

.sectionTitle::after{

content:"";

display:block;

margin:

30px auto 0;

width:120px;

height:3px;

background:

linear-gradient(

90deg,

transparent,

#5ea6ff,

transparent

);

}

}