.page-header {
overflow: hidden;
background: black;
height: 580px;
width: 100%;
}

main {
background-color: white;
}

.header-words {
z-index: 1;
color: white;
display: flexbox;
position: sticky;
top: 280px;
background: none;
}

.header-words > h2 {
    font-size: 50px;
    background: none;
}

.header-words > h4 {
    font-size: 16px;
    font-weight: lighter;
    background: none;
}

.img-banner {
object-fit: cover;
width: 100%;
margin-top: -300px;
opacity: 0.9;
}

h3 {
font-size: 27px;
font-weight: lighter;
}

.products {
padding-bottom: 200px;
}

.products > h6 {
    color: rgb(187, 184, 184);
    font-weight: lighter;
    font-size: 10px;
}

.products > ul {
    justify-content: center;
    margin-right: 20px;
    margin-top: 100px;
    gap: 150px;
    display: grid;
    grid-template-columns: 140px 140px 140px 140px;
}

    .products > ul > li > p {
        font-weight: lighter;
        color: rgb(159, 155, 155);
        margin-right: 120px;
        margin-top: 30px;
    }

    .products > ul > li {
        width: 300px;
        overflow: hidden;
    }

        .products > ul > li > img {
            display: flexbox;
            margin-right: 120px;
            height: 150px;
        }


.explore {
background: url("Images/news-background.jpg");
height: 600px;
}

.explore > p {
    display: block;
    font-size: 12px;
    font-weight: lighter;
    color: rgb(187, 184, 184);
}

.explore > a {
    display: block;
    margin-top: 40px;
    text-decoration: none;
}

.in-action {
padding-top: 70px;
padding-bottom: 200px;
}

.in-action > h3 {
    font-weight: bold;
}

.in-action > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 200px;
    margin-left: 60px;
}

    .in-action > ul > li {
        text-align: left;
    }

        .in-action > ul > li > h5 {
            font-size: 16px;
        }

        .in-action > ul > li > article {
            font-size: 13px;
            font-weight: lighter;
        }

        .in-action > ul > li::before {
            content: "GAMING";
            font-weight: bold;
            color: rgb(216, 11, 11);
            font-size: 14px;
        }

.join-us {
position: static;
overflow: hidden;
height: 600px;
}

.join-us > h3, p {
    z-index: 1;
    color: white;
    display: flexbox;
    position: sticky;
}

.join-us > h3 {
    font-size: 32px;
    font-weight: bolder;
    top: 280px;
    margin-left: 900px;
}

.join-us > p {
    font-size: 15px;
    text-align: left;
    top: 335px;
    margin-left: 990px;
    margin-right: 90px;
}

.join-us > img {
    object-fit: cover;
    width: 100%;
}

footer {
position: relative;
overflow: hidden;
}

.footer-main {
display: grid;
justify-content: center;
gap: 20px;
grid-template-columns: 200px 200px 200px;
height: 300px;
padding-top: 30px;
background-color: rgb(34, 33, 33);
}

.footer-main > ul {
    margin-top: 130px;
    font-size: 15px;
    font-weight: lighter;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .footer-main > ul > li {
        margin-top: 9px;
        color: rgb(187, 184, 184);
        font-weight: lighter;
        font-size: 10px;
        text-align: left;
    }

.footer-bottom > ul {
margin-right: 20px;
display: grid;
grid-template-columns: 250px 70px 70px;
float: right;
text-align: center;
}

.footer-bottom > ul li:not(#copy)::before {
    content: "|";
    color: rgb(187, 184, 184);
    padding-right: 8px;
}

.footer-bottom > ul > li:first-child {
    color: rgb(187, 184, 184);
    margin-right: -20px;
}


.footer-bottom > ul > li {
    font-size: 9px;
    font-family: 'Titillium Web', sans-serif;
}

.line-end {
overflow-y: hidden;
bottom: -2;
display: block;
position: relative;
height: 5px;
width: 100%;
background: linear-gradient(90deg, #5ff9fc, #69a5dc 23.5%, #b460c6 69.44%, #f232b1);
}

.progress {
animation: progress 8010ms forwards;
transform-origin: 0% 100%;
transform: scaleX(0);
}

@keyframes progress {
100% {
    transform: scaleX(1);
}
}