/*-----------------------------------*\
  #style.css
\*-----------------------------------*/


/*-----------------*\
   #CUSTOM PROPERTY
\*-----------------*/

:root {
    /**
    colors
     */
    --raisin-black-1: hsl(234, 14%, 14%);
    --raisin-black-2: hsl(231, 12%, 12%);
    --raisin-black-3: hsl(228, 12%, 17%);
    --eerie-black: hsl(240, 11%, 9%);
    --light-gray: hsl(0, 0%, 80%);
    --platinum: hsl(0, 4%, 91%);
    --xiketic: hsl(213, 93%, 11%);
    --orange: hsl(200, 70%, 50%);
    --white: hsl(0, 0%, 100%);
    --onyx: hsl(240, 5%, 26%);
    --color-bg1: hsl(213, 93%, 3%);
    --color-bg2: hsl(213, 93%, 30%);


    /**
    typography
     */

    --ff-refault: "Refault", Georgia;
    --ff-oswald: 'Oswald', sans-serif;
    --ff-poppins: 'Poppins', sans-serif;


    --fs-1: 54px;
    --fs-2: 34px;
    --fs-3: 30px;
    --fs-4: 26px;
    --fs-5: 22px;
    --fs-6: 20px;
    --fs-7: 18px;
    --fs-8: 15px;
    --fs-9: 14px;
    --fs-10: 13px;
    --fs-11: 12px;

    --fw-400: 400;
    --fw-500: 500;
    --fw-700: 700;

    /**
    transition
     */

    --transition-1: 0.15s ease-in-out;
    --transition-2: 0.15s ease-in;
    --transition-3: 0.25s ease-out;


    /**
    spacing
     */
    --section-padding: 60px;

    /**
    clip path
     */

    --polygon-1: polygon(90% 0, 100% 34%, 100% 100%, 10% 100%, 0 66%, 0 0);
    --polygon-2: polygon(0 0, 100% 0%, 82% 100%, 0% 100%);
    --polygon-3: polygon(0 0, 100% 0%, 100% 100%, 18% 100%);
    --polygon-4: polygon(96% 0, 100% 36%, 100% 100%, 4% 100%, 0 66%, 0 0);




}


/*-----------------*\
   #RESET
\*-----------------*/

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {text-decoration: none;}
li {list-style: none;}

html {overflow-x: clip;}

.body{
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    /* perspective: 1px;
     transform-style: preserve-3d;*/
     overflow-x: clip;
     overflow-y: scroll;
    background: linear-gradient(70deg, var(--color-bg1), var(--color-bg1), var(--color-bg2), var(--color-bg1), var(--color-bg1));
    background-image: url("../images/PolyEgoImages/bg_pattern2.png");
    background-repeat: repeat;
}
.body::after{
    width: 100%;
    height: 100%;
    background: linear-gradient(70deg, var(--color-bg1), var(--color-bg1), var(--color-bg2), var(--color-bg1), var(--color-bg1));
    background-size: cover;
    z-index: 4;
}

a,
img,
span,
input,
button,
ion-icon {display: block;}

button {
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

input {
    font: inherit;
    width: 100%;
    border: none;
}

html {
    font-family: var(--ff-poppins);
    scroll-behavior: smooth;
}

body {overflow-x: clip;}
body.active {overflow-y: hidden;}

::-webkit-scrollbar {width: 8px;}

::-webkit-scrollbar-track {background: var(--raisin-black-2);}

::-webkit-scrollbar-thumb {
    background: var(--orange);
    border-radius: 10px;
}

/*-----------------*\
   #CUSTOM FONT
\*-----------------*/

/* Webfont: Refault-Italic */
@font-face {
    font-family: 'Refault';
    src: url('../fonts/REFAULT.eot'); /* IE9 Compat Modes */
    src: url('../fonts/REFAULT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/REFAULT.woff') format('woff'), /* Modern Browsers */
    url('../fonts/REFAULT.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/REFAULT.ttf') format('truetype'); /* Safari, Android, iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


/*-----------------*\
   #REUSED STYLE
\*-----------------*/

.container{
    padding-inline: 15px;
    align-self: center;
}

.about-background{
    padding-inline: 15px;
    align-self: center;
}

.h1 {
    color: var(--white);
    font-family: var(--ff-refault);
    font-size: var(--fs-9);
    font-weight: var(--fw-400);
    text-transform: uppercase;
    z-index: 3;
}
.h2{
    font-size: var(--fs-2);
    color: var(--white);
    line-height: 1.2;
    text-transform: uppercase;
    font-family: var(--ff-oswald);
    justify-content: center;
    z-index: 3;
}
.h3{
    font-family: var(--ff-oswald);
    font-size: var(--fs-2);
    text-transform: uppercase;
    line-height: 1.2;
    justify-content: center;
    z-index: 3;

}

.btn{
    color: var(--white);
    font-family: var(--ff-oswald);
    font-size: var(--fs-6);
    font-weight: var(--fw-500);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 13px;
    clip-path: var(--polygon-1);
    transition: var(--transition-1);
    z-index: 3;
}

.btn-primary{ background:var(--orange);}
.btn-primary:is(:hover, :focus){ background: var(--raisin-black-1);}

.btn-primary:is(:hover, :focus)
{ background: var(--raisin-black-1);}

.btn-secondary {
    background: var(--white);
    color: var(--orange);
 }
.btn-secondary:is(:hover, :focus){
    background: var(--raisin-black-1);
    color: var(--white);
}
.btn-link:is(:hover, :focus){
    color: var(--orange);
}

.has-scrollbar::-webkit-scrollbar{ height: 6px;}
.has-scrollbar::-webkit-scrollbar-button{width: 40px;}

.team .container .section-title-team{
    position: relative;
    text-align: center;
    padding-top: 250px;
    padding-bottom: 50px;
    border-radius: 10px;
    text-shadow: 3px 3px hsla(0, 0%, 0%, 1);
    margin: 0 auto;
}
.section-title{
    position: relative;
    text-align: center;
    margin-bottom: 80px;
}
.section-title::before,
.section-title::after{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 5px;
    width: 120px;
    background: var(--orange);
    border-radius: 0 0 5px 5px;
}

.section-title::before{
    bottom: -23px;
    height: 4px;
    width: 30px;
}

/*-----------------*\
   #HEADER
\*-----------------*/
.header{

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    background: var(--raisin-black-1);
    box-shadow: 0 3px 27px hsla(0, 0%, 0%, 0.5);
    padding-block: 3px;
    z-index: 5;
}

.header .container {

    max-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img,
.logo-img{
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}


.header-actions {display: none;}

.nav-open-btn{
    color: var(--white);
    font-size: 40px;
    padding: 5px;
}

.nav-open-btn ion-icon { --ionicon-stroke-width: 40px;}

.navbar{
    position: fixed;
    top: 0;
    right: -300px;
    width: 100%;
    max-width: 300px;
    background: var(--raisin-black-2);
    height: 100%;
    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.5);
    visibility: hidden;
    z-index: 7;
    transition: var(--transition-2);
}

.navbar.active
{
    right: 0;
    visibility: visible;
    transition: var(--transition-3);
}

.navbar-top{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 25px;
}

.nav-close-btn{
    color: var(--orange);
    font-size: 25px;
    padding: 10px;
    transform: translateX(15px);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 70px;}
.navbar-list {
    border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    margin-bottom: 60px;
}

.navbar-link{
    color: var(--white);
    font-size: 15px;
    padding: 10px 25px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
    font-weight: var(--fw-500);
    transition: 0.15s ease-in-out;
}

.navbar-link:is(:hover, :focus) {color: var(--orange);
}

.nav-social-list
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.social-media-navbar
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-left: 30px;
}
.social-media-nav-div{
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-media-nav-div ion-icon{
    color: white;
    padding: 15px;
    border-radius: 40px;
    animation: 10s linear;
}
.social-media-nav-div ion-icon:hover{
    animation-delay: 5s;
    color: white;
    background: #054594;
}

.social-link{
    color: var(--orange);
    font-size: 18px;
}

.overlay{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: var(--transition-2);
}

.overlay.active{

    background: hsla(0, 0%, 0%, 0.7);
    pointer-events: all;
    transition: var(--transition-3);
}







/*-----------------*\
   #HERO
\*-----------------*/
.hero {

    /*
    background: url("../Images/Images/GreedWallpaper/HighresScreenshot00037_format=2500w.png") no-repeat;
    background-size: cover;
    background-position: top center;
    */
    margin-top: 90px;
    padding: var(--section-padding) 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    z-index: -4;
}

.hero .container{
    margin: 0 auto;
    align-items: center;
    min-height: 90vh;
    
}
.hero-background-wallpaper {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -4;
    min-height: 300px;
    height: 70%;
    width: 100%;
    overflow: hidden;
    object-fit: cover; /* Scale the image to cover the entire container */
}
.youtubevideo,
.hero-details{
    position: absolute;
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    margin: 0 auto;justify-content: center;
}

.hero-game-logo{
    position: relative;
    width: auto;
    z-index: 3;
    margin: 0 auto;
    padding: 15px;
    text-shadow: 10px 10px hsla(0, 0%, 0%, 1);
}

.back-video {
    position: absolute;
    width: 70%;
    min-height: 320px;
    max-width: 1600px;
    height: 65%;
    top: 50%;
    left: 50%;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    z-index: -1;
    object-fit: cover;
}


.youtubevideo {
    position: relative;
    width: 100%;
    height: 70vh;
    /*overflow: hidden;*/
}

.youtubevideo iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw; /* 100% of viewport width */
    height: 56.25vw; /* 16:9 aspect ratio */
    transform: translate(-50%, -50%);
    pointer-events: none;
}


.hero-border{
    --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);
    clip-path: var(--polygon-1);
    position: absolute;
    width: 71%;
    max-width: 1620px;
    min-height: 330px;
    height: 70%;
    max-height: 630px;
    top: 50%;
    border-radius: 5px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    object-fit: cover;
    border: 2px solid var(--orange);
    resize: both;
    overflow: hidden;
}

.hero-subtitle {
    color: var(--white);
    font-family: var(--ff-oswald);
    font-size: var(--fs-1);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    letter-spacing: 9px;
    text-shadow: 0 7px hsla(0, 0%, 0%, 0.4);
    margin: 15px;
    padding: 10px; /* Add space around the text */

    z-index: 3;
}

.hero-title{margin-bottom: 10px;
z-index: 3}

.btn-group{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    z-index: 4;
}

.hero .btn-primary ion-icon {font-size: 25px;}






/************\
    ABOUT
\************/

.about {
    align-items: center; /* Vertically center the content */
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    border-bottom: 40px;
}

.about-align-item{
    display: flex;
    align-items: center;
    padding: 50px 0 var(--section-padding);
    justify-content: space-around;
    margin-left: 150px;
    border-radius: 50px;
}
.about-background{
    border-radius: 50px;
    height: 70vh;
    background: url("../images/PolyEgoImages/Low/3.jpg") no-repeat center;
    background-size: 80vw cover;
    background-color: hsla(0, 0%, 0%, 0.3);
    margin: 0 auto;
}
.about-banner{ margin-bottom: 40px;}

.about-img{ width: 100%;}


.about-content{
    margin-right: 20px;
    background: var(--raisin-black-1);
    color: var(--white);
    padding: 40px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2);
}
.bluepy-about{
    position: relative;
    padding: 30px;
}
.bluepy-about-image{
    min-width: 250px;
    width: 30vw;
    max-width: 600px;
    height: auto;
    margin: 30px;
    animation: moveUpDown 3s linear infinite;

    -webkit-filter: drop-shadow(5px 5px 5px #999);
    filter: drop-shadow(0 0 10px hsla(200, 100%, 70%, 0.3)) brightness(140%);
    z-index: 3;
}

.about-background{
    height: 70vh;
    max-height: 100vh;
    background-size: 1600px;
    border-radius: 15px;
    margin: 0 auto;
    max-width: 1600px;
}
.about-banner{ margin-bottom: 40px;}

.about-img{ width: 100%;}

.stars{
    display: flex;
    flex-direction: row;
    font-size: 20px;
    justify-content: center;
    align-self: center;
    margin: 30px;
    color: var(--orange);
}

.about-content,
.about2-content{
    margin: 0 auto;
    background: var(--raisin-black-1);
    color: var(--white);
    padding: 40px 20px;
    border-radius: 4px;
    box-shadow: inset 0 0 3px 3px var(--orange);
}

.about3-content{
    margin: 0 auto;
    background: var(--raisin-black-1);
    color: var(--white);
    padding: 40px 20px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.74);
    width: 100%;
    align-content: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    left: 50%;
}

.about3-title,
.about3-text{
    align-content: center;
    align-self: center;
    justify-content: center;
}

.about-subtitle
{
    color: var(--orange);
    font-family: var(--ff-oswald);
    font-size: var(--fs-8);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.about-title{
    font-family: var(--ff-oswald);
    font-size: var(--fs-2);
    font-weight: var(--fw-400);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.about-title strong { color: var(--orange);}
.about2 .about2-title strong { color: hsl(0, 87%, 43%);}

.about-text,
.about-bottom-text{
    color: var(--light-gray);
    font-size: var(--fs-7);
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.about-text{margin-bottom: 20px;}

.about-bottom-text{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.about-bottom-text ion-icon{
    color: var(--orange);
    font-size: 25px;
    --ionicon-stroke-width: 45px;
}



/************\
    ABOUT2
\************/

.about2 {
    align-items: center; /* Vertically center the content */
    width: 100vw;
    height: 100vh;
    margin: 0 auto;

}


.about2-align-item{
    display: flex;
    padding: 50px 0 var(--section-padding);
    align-items: center;
    vertical-align: center;
    flex-direction: row-reverse;
    justify-content: space-around;
    margin-left: 150px;
}

.about2-background{
    border-radius: 10px;
    background: url("../images/PolyEgoImages/HallwayBluepyDramaticImage/HighresScreenshot00006_format=2500w.jpg") no-repeat center;
    filter: brightness(120%);
    background-size: cover;
    margin: 0 auto;
    max-height: 70vh;
    max-width: 1600px;
    width: auto;
    height: 85vh;
}

.about3-background{
    border-radius: 10px;
    background: url("../images/PolyEgoImages/NewPhotos/PolyEgoScreenshot3.jpg") no-repeat center;
    background-size: cover;
    filter: brightness(120%);
    margin: 0 auto;
    max-height: 70vh;
    max-width: 1600px;
    width: auto;
    height: 85vh;
}

.about2-content{
    margin-right: 20px;
    background: var(--raisin-black-1);
    color: var(--white);
    border-radius: 8px;
    box-shadow: inset 0 0 3px 3px var(--orange);
}

.bluepy-about2{
    position: relative;
    padding: 30px;
}

.Enemy-Eye-Poly-Ego{
    min-width: 250px;
    width: 30vw;
    max-width: 600px;
    height: auto;
    animation: moveUpDown 1.5s linear infinite;

    -webkit-filter: drop-shadow(5px 5px 5px #999);
    filter: drop-shadow(0 0 10px hsla(0, 100%, 70%, 0.6)) brightness(120%);
    z-index: 3;
}

.about2-banner{ margin-bottom: 40px;}

.about2-img{ width: 100%;}

@keyframes circle {
    to {
        transform: translateY(200px);
    }

}
@keyframes moveUpDown {
    0%, 100% {
        transform: translateY(0); /* Start and end position (no movement) */
    }
    50% {
        transform: translateY(-20px); /* Midpoint position (move up) */
    }
}
@keyframes moveUpDown2 {
    0%, 100% {
        transform: scale(80%) translateY(30px); /* Start and end position (no movement) */
    }
    50% {
        transform: scale(80%) translateY(10px); /* Midpoint position (move up) */
    }
}

.about2-content{
    margin: 0 auto;
    background: var(--raisin-black-1);
    color: var(--white);
    padding: 40px 20px;
    border-radius: 4px;
    box-shadow: inset 0 0 4px 4px hsla(0, 100%, 70%, 1);
}

.about2-subtitle
{
    color: var(--orange);
    font-family: var(--ff-oswald);
    font-size: var(--fs-8);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.about2-title{
    font-family: var(--ff-oswald);
    font-size: var(--fs-2);
    font-weight: var(--fw-400);
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.about2-title strong { color: var(--orange);}
.about2-text,
.about2-bottom-text{
    color: var(--light-gray);
    font-size: var(--fs-7);
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.about2-text{margin-bottom: 20px;}

.about2-bottom-text{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.about2-bottom-text ion-icon{
    color: var(--orange);
    font-size: 25px;
    --ionicon-stroke-width: 45px;
}

/************\
 GALLERY SLIDE


.flex-card-wrapper{
    background-color: white;
    min-height: 100vh;
    width: 70%;
    max-width: 100rem;
    height: 70%;
    max-height: 50rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-card-wrapper .flex-card-container{
    height: 100%;
    width: 14%;
    transition: 450ms all ease-in-out;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 5px 0 5px;
}

.flex-card-container .flex-card-container.active{
    width: 100%;
}

.flex-card-wrapper .flex-card-container.active .overlay-card h3, .flex-card-wrapper .flex-card-container.active .overlay-card p{
    opacity: 1;
    transform: translateX(0);
}
.flex-card-wrapper .flex-card-container.poke-1{
    background-image: url("../images/PolyEgoImages/PcScreenshot3/1_format=2500w.png");
}
.flex-card-wrapper .flex-card-container:last-child{
    margin: 0 0 0 0;
}
.flex-card-wrapper .flex-card-container .overlay-card{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 8rem;
    padding: 0 0 2rem 1.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    transition: 450ms all ease-in-out;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}
.flex-card-wrapper .flex-card-container .overlay-card .icon{
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background-color: #0c1016;
    transition: 450ms all ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-card-wrapper .flex-card-container .overlay-card h3{
    top: 0;
    font-size: 50px;
    margin: 0;
    transition: 350ms 200ms all ease-in-out;
}
.flex-card-wrapper .flex-card-container .overlay-card p{
    bottom: 20px;
    font-size: 25px;
    margin: 0;
    transition: 350ms 300ms all ease-in-out;
}
.flex-card-wrapper .flex-card-container .overlay-card h3, .flex-card-wrapper .flex-card-container .overlay-card p{
    color: white;
    position: absolute;
    width: 20rem;
    opacity: 0;
    transform: translateX(-15px);
}
@media (max-width: 1024px) {
    .flex-card-wrapper{
        max-width: 90rem;
        height: 90%;
    }
}
@media (max-width: 992px) {
    .flex-card-wrapper{
        width: 90%;
        flex-flow: row wrap;
    }
    .flex-card-wrapper .flex-card-container{
        height: 12%;
        width: 100%;
        margin: 5px 0 5px 0;
    }
    .flex-card-wrapper .flex-card-container.active{
        width: 100%;
        height: 45%;
    }
}

\************/

/************\
 DESCRIPTION
\************/
/*
.description-text{
    opacity: 0;
    animation: 10s linear;
}
.description-text--visible{
    opacity: 1;
}
*/
.image-description{
    min-height: 700px;
    height: 700px;
    max-height: 700px;
    width: 100vw;
    justify-items: center;
    display: flex;
    align-items: center;
}

.image-description-red{
    min-height: 700px;
    height: 700px;
    max-height: 700px;
    width: 100vw;
    justify-items: center;
    display: flex;
    align-items: center;
}

.image-description4{
    min-height: 700px;
    height: 700px;
    max-height: 700px;
    width: 100vw;
}
.image-description3 .description-title2{
    margin: 0 auto;
}

.image-description3{
    min-height: 700px;
    height: 700px;
    max-height: 700px;
    width: 100vw;
}

.description-wrapper{
    gap: 40px;
}

.bluepy-images{

    position: relative;
    width: 100%;
    height: 500px;
    margin-bottom: -3px;
}

.bluepy-gun-section{
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    min-height: 800px;
    background: url("../images/PolyEgoImages/bg-red.png");
   /* background-color: hsl(0, 87%, 43%);*/
    margin-top: -2px;

}

.contain-section{
    min-height: max-content;
    display: flex;
    height: 100%;
    bottom: 0;
    left: 0;
    flex-direction: column;

}


.anpc{
    display: flex;
    flex-direction: row;
    gap: 50px;
}
.litigii{
    max-width: 150px;
}
.custom-shape{
    position: relative;
    width: 100vw;
    height: 100%; /* Ensure the container fills the parent */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Align images vertically */
    align-items: center; /* Align images horizontally */
}

.custom-shape img{

    width: 100vw;
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.custom-shape-img1, .custom-shape-img2{
    scale: 125%;
}
/*
.custom-shape-img{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    min-height: max-content;
    height: auto;
}*/


.reviews-section{
    margin-top: 100px;
    height: fit-content;
    border-top: 400px;
    border-bottom: 50px;
    width: 100vw;
    max-width: 100vw;
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: rgba(0, 0, 0, 0.507);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.reviews-title{
    display: flex;
    align-content: center;
    flex-direction: row;
    margin: 0 auto;
    left: 50%;
}

.reviews-container{
    width: 90vw;
    max-width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    gap: 30px;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.review-box{
    max-width: 500px;
}





.image-description2{
    min-height: 800px;
    height: 800px;
    max-height: 800px;
    width: 100vw;
    top: 0;
    justify-content: center;
    align-items: center;
}
.description-container-reverse{
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 60px;
}

.image-description3 .description-container-reverse{
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 60px;
}
.image-description3 .quest-title-description{
    margin: 0 auto;
    align-content: center;
    justify-content: center;
    display: flex;
    background-color: #054594;
}

.image-description3 .description-container-reverse{
    margin: 0 auto;
    padding-top: 20px;
    align-content: center;
    justify-content: center;
    display: flex;
    background-color: #054594;
}
.image-description2 .description-container-reverse{
    height: 700px;
    top: 0;
    width: 90%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 0 auto;

}


.description-container{
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 100px;

}

.description-bg-light-red{
    position: absolute;
    z-index: -5;
    justify-content: right;
    align-self: center;
    right: 200px;
    transform: scale(75%);
    filter: brightness(100%);
}



.description-bg-light3{
    position: absolute;
    z-index: -5;
    justify-content: right;
    align-self: center;
    left: 300px;
    transform: scale(800%);
    filter: brightness(60%);
    animation-delay: 300ms;
    animation: var(--color-interactive);
}

.image-description-red{
    height: 100%;
    width: 100%;
    max-height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 100px;
    background: url("../images/PolyEgoImages/bg-red2.png");

}

.image-description4 .description-container3 {
    height: 650px;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 60px;
}

.image-description3 .custom-shape{
     bottom: 100px;
     left: 0;
     width: 100%;
     overflow: hidden;
     line-height: 0;
     color: aqua;
 }
.image-description .custom-shape{
    position: relative;
    height: 150px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    color: aqua;
}

.image-description .custom-shape-top{
    position: relative;
    top: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    color: aqua;
}
.image-description2-image{
    max-width: 100vw;
    width: 100vw;
    height: auto;
}

.custom-shape-top2{
    position: relative;
    left: -30px;
    width: 110%;
    overflow: hidden;
    line-height: 0;
    color: aqua;
    transform: scaleY(0.4) translateY(-158px);
}
.custom-shape3{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    color: aqua;
}
.image-description .description-container-reverse{
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 60px;
}

.image-description11{
    width: 100vw;
    height: fit-content;
    padding: 40px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.image-description11 .description-container-reverse11{
    width: 100%;
    height: 900px;
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 400px;
}

.image-description11 .description-container-reverse11 .description-box{
    width: fit-content;
    height: fit-content;
}


.discord-text{
    position: relative;
    width: 800px;
    min-height: 420px;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--orange);
    overflow: hidden;
    border-radius: 20px;
    filter: brightness(130%);
    display: flex;
    flex-direction: column;
}
.discord-text p{
    z-index: 2;
}

.discord-text h2{
    z-index: 2;
}

.discord-text::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 80%;
    background-color: white;
    box-shadow: 0 0 20px rgb(8, 8, 8);
    animation: animate 10s linear infinite;
}

.discord-text::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: rgb(18, 18, 39);
    background-position: center;
    background-size: contain;
    filter: brightness(100%);
    border-radius: 10px;
}


.description-image{
    position: relative;
    width: 800px;
    min-height: 420px;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--orange);
    overflow: hidden;
    border-radius: 20px;
    filter: brightness(110%);
}
.media-object{
    position: relative;
    width: 800px;
    max-width: 80%;
    min-height: 200px;
    height: 420px;
    max-height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--orange);
    overflow: hidden;
    border-radius: 20px;
    filter: brightness(110%);
}


.description-image::before{
    content: '';
    position: absolute;
    width: 150%;
    height: 80%;
    background-color: white;
    box-shadow: 0 0 20px rgb(8, 8, 8);
    animation: animate 10s linear infinite;
}

.description-image::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: url("../images/PolyEgoImages/Low/5.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.image-description4 .description-image::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: url("../images/PolyEgoImages/Low/1.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.bluepy-gun-section .description-image::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: url("../images/PolyEgoImages/Low/Quest/1.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.image-description-red .description-image::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: url("../images/PolyEgoImages/Low/Quest/5.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

.image-description2 .description-image::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: url("../images/PolyEgoImages/NewPhotos/HighresScreenshot00029.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}


.media-object::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: 0 0 20px rgb(8, 8, 8);
    animation: animate 10s linear infinite;
}

.media-object::after{
    content: '';
    position: absolute;
    inset: 5px;
    background: url("../images/PolyEgoImages/PcScreenshot3/1_format=2500w.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}

@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }

}


.description-image2{
    width: 800px;
    min-height: 420px;
    height: auto;
    align-items: center;
    justify-content: center;
    filter: brightness(110%);
}

.description-border2{
    width: 100%;
    max-width: 810px;
    height: auto;
    position: absolute;
    transform: translateX(-10px) translateY(-10px);
    box-shadow: inset 0 0 2px 2px hsl(191, 100%, 50%);
    --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);
    clip-path: var(--polygon-1);
    background-size: cover;
    background-position: center;
}

.description-border{
    width: 103%;
    max-width: 810px;
    height: 110%;
    max-height: 440px;
    position: absolute;
    transform: translateX(-10px) translateY(-10px);
    box-shadow: inset 0 0 2px 2px hsl(191, 100%, 50%);
    --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);
    clip-path: var(--polygon-1);
    background-size: cover;
    background-position: center;
}
.image-description-width{

    background: url("../images/PolyEgoImages/Cassette.png");
    background-repeat: no-repeat;
    background-size: contain;
    padding: 30px 80px;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 700px;
    max-width: 100vw;
    height: 500px;
    overflow-x: clip;
}

.description-box{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    margin-top: 0;
    text-align: center;
    width: auto;
    max-width: 400px;
    max-height: 300px;
}

.description-box p{
    color: white;
    font-size: var(--fs-5);
}

.description-box .description-btn{
    min-width: 250px;
}



/************\
Break Section
\************/

.break-section{
    max-height: 400px;
    height: auto;
    min-height: 200px;
    z-index: -5;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 60px;
}

.description-bg-light4{
    position: absolute;
    justify-content: right;
    align-self: center;
    left: 40px;
    transform: scale(200%);
    filter: brightness(80%);
    animation-delay: 300ms;
    animation: var(--color-interactive);
    z-index: 1;
}

.break-section-container{
    width: fit-content;
    height: 90%;
    min-height: 90%;
    z-index: -3;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
}

.great-robot-right{
    align-items: end;
    justify-content: end;
    display: flex;
    padding-top: 20px;
    right: 0;
    width: 100%;
}

.media-text{
    margin: 0 auto;
    padding: 10px;
}
.media-object{
    justify-content: center;
    align-content: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}















/************\
 NEW GALLERY
\************/

.new-gallery{
    min-height: 750px;
    height: 90vh;
    border: 0;
    padding: 0;
}


.new-gallery .container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    height: 70vh;
    max-width: 100vw;
    max-height: 1500px;
    border-radius: 10px;
    margin: 0;
    padding: 0;

}


.new-gallery .box {
    filter: brightness(120%);
    flex: 1;
    overflow: hidden;
    transition: .4s;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
}

.new-gallery .box > img {
    width: 100%;
    height: calc(100%);
    object-fit: cover;
    background-size: cover;
    transition: .4s;
}

.new-gallery .box:hover { flex: 1 1 50%; }
.new-gallery .box:hover > img {
    width: 100%;
    height: 100%;
}



/*------------*\
Tournament
 \*-----------*/


/* Adding space before the .tournament section */
.tournament {
    /* Your existing styles go here */
    color: var(--white);
    padding: 40px 0;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 15px;
    margin: 0 auto;
    width: 90vw;
    max-width: 90vw;
    height: 1000px;
}
.tournament.container{

    width: 90vw;
    max-width: 90vw;
}

/* To maintain aspect ratio while scaling the image */
.discord-image {
    min-width: 200px;
    min-height: 200px;
    max-width: 400px;
    max-height: 400px; /* Set a maximum height to prevent excessive stretching */
    width: 70%;
    height: 100%;
    animation: moveUpDown 1.5s linear infinite;

    filter: drop-shadow(0 0 10px hsla(0, 100%, 70%, 0.6)) brightness(120%);
}
.discord-background-image{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 80vh;
    max-height: 80vh;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../images/PolyEgoImages/NewPhotos/Discord_Background.jpg") no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
        padding: 30px;
    }
}

.discord-background-image{
    width: 100%;
    max-width: 99vw;
}

.discord-text{
        width: auto;

        padding: 40px;
        border-color: var(--orange);
        border-width: 2px;
    margin-top: 30px;
        z-index: 3;
        box-shadow: inset 0 0 3px 3px var(--orange);
        border-radius: 15px;
        background: var(--raisin-black-1);

}


.tournament-subtitle {
    color: var(--orange);
    font-family: var(--ff-oswald);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.tournament-title{ margin-bottom: 20px;}

.tournament-text{
    color: var(--light-gray);
    font-size: var(--fs-9);
    line-height: 1.6;
    margin-bottom: 50px;
    padding: 30px;
}

.tournament .btn-primary {
     width: 150px;
     display: block; /* Ensures the button takes up the full width */
    border-top: 30px;
    margin: 30px auto;
 }


/*----------*\
#GALLERY
\*----------*/

.gallery {padding: var(--section-padding)0;}
.gallery-list{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: inline mandatory;
    padding-inline: 5px;
}

.gallery-list li{
    min-width: 60%;
    scroll-snap-align: center;
}

.gallery-item img{
    width: 100%;
    border-radius: 1px;
    box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2);
}


/*-----------------*\
#TEAM
\*-----------------*/

/*.team{padding: var(--section-padding)0;}
*/

.team-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 55px;
    margin: 0 auto;
}

.stores-video {
    border: 40px;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    max-width: 100%;
    min-height: 900px;
    height: 65%;
    z-index: -2;
    object-fit: cover;
    filter: brightness(110%);
}

.team-list li{ max-width: 40%;
    background: hsla(0, 0%, 0%, 0.6);
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
border-radius: 10px;
    box-shadow: inset 0 0 3px 3px var(--orange);}

.team-member{
    -webkit-filter: drop-shadow(5px 5px 5px #999);
    filter: drop-shadow(0 0 10px hsla(200, 100%, 70%, 0.3)) brightness(130%);
    position: relative;
    border-radius: 50%;
    padding-bottom: 20px;
    transition: var(--transition-1);
    margin: 0 auto;
}
.team .team-list h2{
    margin: 0 auto;
    line-height: 1;
    height: 60px;
}
.team-member.section-title{
    text-shadow: 0 0 10px hsla(200, 100%, 70%, 1);
    -webkit-filter: drop-shadow(5px 5px 5px #999);
    filter: drop-shadow(0 0 10px hsla(200, 100%, 70%, 0.3)) brightness(130%);
    color: white;
}
.team-member:is(:hover, :focus) { border-color: var(--orange);}

.team-member img{ width: 100%;}

.team-member:is(:hover, :focus) img{opacity: 0.5;}

.team-member ion-icon{
    -webkit-filter: drop-shadow(5px 5px 5px #999);
    filter: drop-shadow(0 0 10px hsla(200, 100%, 70%, 0.3)) brightness(130%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--orange);
    font-size: 50px;
    transition: var(--transition-1);
    opacity: 0;
}

.team-member:is(:hover, :focus) ion-icon { opacity: 1;}

.team .btn-primary {margin-inline: auto;}

/************\
 #NEWS-SECTION
\************/

.media-section{
    max-height: 70vh;
    min-height: 1000px;
    width: 90vw;
    margin: 0 auto;
    align-self: center;
}
.media-container{
    height: 90%;
    max-height: 700px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-top: 30px;

}
.news-rows{
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.media-title{
    margin: 0 auto;
    align-self: center;
    justify-content: center;
}

.media-object-video{
    position: absolute;
    margin: 0 auto;
    z-index: 4;
    background-size: cover;
    height: 300px;

    width: 500px;
    max-width: 600px;
    border-radius: 5px;
    object-fit: cover;
}


/************\
 #NEWSLETTER
\************/

.newsletter-img img{
    max-width: 100px;
}

.newsletter .btn-secondary{
    margin: 10px;
    z-index: 4;
}


.mc_embed_shell{
    margin: 0 auto;
    justify-self: center;
    display: flex;
    left: 50%;
}


.newsletter-text{
    font-size: var(--fs-10);
    width: auto;

}
.newsletter-text a{
    display: inline-block;
    color: aqua;
}

.newsletter{ padding: var(--section-padding)0 120px;
align-content: center;
align-items: center;}

.newsletter-card{
    background: url("../images/PolyEgoImages/newsletter-bg2.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 25px;
    border-radius: 12px;
    text-align: center;
    max-width: 800px;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.newsletter-content{ margin-bottom: 30px;}

.newsletter-img{
    width: max-content;
    margin-inline: auto;
    margin-bottom: 10px;
}

.newsletter .newsletter-ads{

    padding: 20px 5px;
}

.newsletter-title{font-size: var(--fs-3);}

.newsletter .input-field {
    background: hsla(0, 0%, 0%, 0.2);
    color: var(--white);
    border: 1px solid var(--white);
    font-size: var(--fs-10);
    padding: 17px 25px;
    margin-bottom: 15px;
}

.newsletter .input-field:focus{
    background: hsla(0, 0%, 0%, 0.4);
    outline: none;
}

.newsletter .input-field::placeholder{
    color: inherit;
    font-size: var(--fs-9);
}

.newsletter .btn-secondary {
    font-size: var(--fs-7);
    margin-inline: auto;
    padding: 10px;
    max-width: 200px;
}

.beats-wrapper{
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    min-height: 350px;    
    padding-top: 30px;
    padding-bottom: 30px;
}

.grand-beats-class {
    align-content: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    min-height: 100%;
    max-width: 100vw;
    background-color: hsla(215, 23%, 10%, 0.747);
}

.beats-img{
    max-height: 150px;
    max-width: 50vw;
}
.grand-text{
    color: white;
    font-size: var(--fs-10);
    text-align: center;
    margin: 0 auto;
    justify-self: center;
}
.grand-text .a{
    color: aqua;
}
/*-------*\
#FOOTER
\*-------*/

.small-footer-img{
    max-width: 80px;
    height: auto;
}


.footer-top{
    background-color: hsl(228, 16%, 13%);
    background-size: auto;
    padding: var(--section-padding)0;
}

.footer-brand-wrapper{
    position: relative;
    padding-bottom: 30px;
    border-bottom: 1px solid hsl(220, 14%, 8%);
    margin-bottom: 50px;
}

.footer-brand-wrapper::after{
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: hsla(0, 0%, 50%, 0.2);
}

.footer-top .logo{
    width: max-content;
    margin-inline: auto;
    margin-bottom: 50px;
}

.footer-menu-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px 40px;
    margin-bottom: 20px;
}

.footer-menu-link{
    color: var(--platinum);
    font-family: var(--ff-oswald);
    font-size: var(--fs-8);
    font-weight: var(--fw-500);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition-1);
}

.footer-menu-link:is(:hover, :focus){ color: var(--orange);}

.footer-input-wrapper{
    position: relative;
    max-width: 260px;
    margin-inline: auto;
}

.footer-input{
    --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);

    background: var(--xiketic);
    color: var(--white);
    font-size: var(--fs-10);
    padding: 17px 25px;
    clip-path: var(--polygon-1);
}

.footer-input:focus{outline: none;}

.footer-input::placeholder{font-size: var(--fs-9);}

.footer-input-wrapper .btn-primary{
    --polygon-1: polygon(70% 0, 100% 30%, 100% 100%, 30% 100%, 0 63%, 0 0);
    position: absolute;
    top: 0;
    right: 0;
    padding: 17px;
}

.footer-input-wrapper .btn-primary:is(:hover, :focus){
    background: var(--white);
    color: var(--orange);
}

.quicklink-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.quicklink-item{
    color: var(--light-gray);
    font-family: var(--ff-oswald);
    font-size: var(--fs-7);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 10px;
    transition: var(--transition-1);
}

.quicklink-item:is(:hover, :focus){ color: var(--orange);}


.footer-social-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.footer-social-link{
    background: var(--xiketic);
    color:var(--light-gray);
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    font-size: 14px;
    border-radius: 50%;
    transition: var(--transition-1);
}
.footer-social-link ion-icon{
    width: 20px;
    height: 20px;
}

.footer-social-link:is(:hover, :focus) {color: var(--orange);}

.footer-bottom{
    padding: 25px 0;
    background: var(--xiketic);
    text-align: center;
    align-content: space-around;
    justify-content: space-around;
}
.copyright{
    color: var(--light-gray);
    font-family: var(--ff-oswald);
    font-size: var(--fs-9);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.copyright a{
    display: inline-block;
    color: var(--orange);
}

.footer-bottom-img{
    width: 30px;
    max-width: 100%;
    margin-inline: auto;
}



/*-------*\
#GO TO TOP
\*-------*/


.go-top{
    --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);

    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-1);
    z-index: 15;
}

.go-top.active{
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.go-top:is(:hover, :focus){
    background: var(--white);
    color: var(--orange);
}

.parallax-test,
.parallax-div{
    min-height: 100vh;
    min-width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.parallax-test img{
    position: absolute;
    width: auto;
    height: auto;
    object-fit: contain;
}



@keyframes clipMe {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
}
@keyframes rotateImage {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.description-image{
    z-index: 3;
}

.description-bg-light{
    filter: brightness(100%);
    max-width: 150%;
    animation-delay: 300ms;
    animation: moveUpDown2 2s linear infinite;
}

.rotating-circle-background{
    position: relative;
    width: 100%;
    scale: 120%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.rotating-circle-background::before{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    scale: 200%;
    z-index: -4;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rotating-circle-background::before {
    content: "";
    width: 100%;
    height: 100%;
    overflow: visible;
    background: url("../images/PolyEgoImages/RotatingCirle.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: rotateImage 45s linear infinite;
    z-index: -80;
}
.rotating-circle-background::before {
    animation-delay: -4s;
}



/*-------*\
#RESPONSIVE
\*-------*/

/*
RESPONSIVE FOR LARGER THAN 420px
 */

@media (min-width: 0px) {
    /*custom property

     */
    :root {
        --fs-1: 70px;
    }


    .hero-title {
        width: auto;
        max-width: 70%;
        margin: 0 auto;
    }

    .hero-game-logo{
        max-width: 50vw;
    }


    .reviews-container{
        flex-direction: column;
        max-width: 80vw;
    }
    .reviews-container h2{
        font-size: 20px;
    }


    .youtubevideo{
        position: relative;
    }

    .hero-details{
        justify-content: center;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-content: center;
        height: 90vh;
        font-size: var(--fs-10);
        filter: drop-shadow(0 0 10px hsl(202, 93%, 5%));
    }
    .hero-title{
        font-size: var(--fs-8);
    }
    
    .hero {
        height: 110vh;
        min-height: 110vh;
        max-height: 110vh;
        margin-top: 0;
        margin-bottom: 100px;
        padding: 0;
        justify-content: start;
        align-content: start;
        display: flex;
        flex-direction: column;
    }
    
    .youtubevideo{
        margin-top: 20px;
        max-height: 90vh;
        height: 90vh;
        min-height: 100vh;
    }
    .youtubevideo iframe{
        height: 96vh;
    }
    .vertical-video{
        height: 100%;
        overflow: hidden;
        width: 500vw;
        visibility: visible;
    }
    .horizontal-video{
        visibility: collapse;
    }

    .btn-group{
        font-size: var(--fs-6);
    }


    .about2-background,
    .about3-background,
    .about-background,
    .about2-align-item,
    .about-align-item {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        margin: 0 auto;
        width: auto;
        align-items: center;
        border: 20px;
    }

   

    .about2 {
        background-size: 55%;
        background-position: 90% center;
        min-height: 700px;
        max-height: 500px;

    }

    .about {
        background-size: 55%;
        background-position: 90% center;
        min-height: 700px;
        max-height: 800px;

    }

    .about-height {
        height: 600px;
    }

    .about-height2 {
        height: 200px;
    }

    .bluepy-about2-image,
    .bluepy-about-image {
        display: flex;
        border: 0;
        padding: 0;
        justify-content: center;
        margin: 0 auto;
        align-items: center;
        align-self: center;
    }

    .about2-content {
        padding: 20px;
        margin: 10px;
    }

    .about-background,
    .about3-background,
    .about2-background {
        min-height: 400px;
        height: 50vh;
    }

    .tournament {
        min-width: 100%;
        max-width: 100vw;
        margin-right: 10px;
        margin-top: 40px;
        min-height: 750px;
        max-height: 500px;

    }

    .discord-background-image {
        max-height: 700px;
    }

    .tournament-content,
    .tournament.container {


        min-width: 100%;
        width: 100%;
        max-width: 100vw;
    }

    .tournament-content {
        min-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
    }

    .discord-image {
        width: 40%;
        min-width: 300px;
    }

    .footer-social-list {
        width: auto;
        max-width: 100%;
    }


    .team .container .section-title-team {
        position: relative;
        text-align: center;
        padding-top: 150px;
        padding-bottom: 30px;
    }

    .team,
    .team .container {
        min-height: 1000px;
        height: 1000px;
        max-height: 1000px;
        margin: 0;
        border: 0;
        gap: 20px;
    }

    .stores-video {
        min-width: auto;
        min-height: 900px;
        height: 100vh;
        transform: translate(-15px, 0);
    }

    .stores-icon {
        max-width: 100px;
        max-height: 100px;
        align-self: center;
        margin: 0 auto;
    }

    .team-list {
        line-height: 0.2;
        width: auto;
        max-width: 90%;
        margin: 0 auto;
    }

    .team-member {
        height: auto;
    }

    .newsletter {
        padding: 0;
        border: 0;
        margin: 0;
        align-items: center;
        justify-content: center;
        display: flex;
        max-width: 100vw;
        width: 100vw;
        min-width: 100vw;
    }

    .newsletter .container {
        min-height: 800px;
        max-height: 800px;
        height: 50vh;
        padding: 20px;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        min-width: 100%;
    }

    .description-image {
        max-width: 95vw;
        min-width: 95vw;
        width: 95vw;
        max-height: 300px;
        height: 300px;
        min-height: 300px;
    }

    .description-border {
        width: 103%;
        max-width: 96vw;
        height: 105%;
        max-height: 320px;
        position: absolute;
        transform: translateX(-5px) translateY(-5px);
        box-shadow: inset 0 0 2px 2px hsl(191, 100%, 50%);
        --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);
        clip-path: var(--polygon-1);
        background-size: cover;
        background-position: center;
    }


    .image-description {
        min-height: 800px;
        height: 800px;
        max-height: 800px;
    }

    .image-description2 {
        min-height: 800px;
        height: 800px;
        max-height: 800px;
    }

    .image-description4 {

        min-height: 800px;
        height: 800px;
        max-height: 800px;
    }

    .description-container,
    .description-container3,
    .description-container5 {
        min-height: 100%;
        height: 100%;
        max-height: 100%;
    }


    .media-section {
        justify-content: center;
        align-items: center;
        display: flex;
        border-top: 300px;
        max-height: 100vh;
        min-height: 1600px;
        width: 90vw;
        margin: 0 auto;
        align-self: center;
    }

    .media-container {
        height: 100%;
        max-height: 1000px;
        width: 100%;
        margin: 0 auto;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 80px;
        padding-top: 30px;

    }

    .news-rows {
        width: 100%;
        height: 100%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin: 0 auto;
    }

    .media-object-video {
        width: 99%;
        min-height: 99%;
        max-width: 99%;
        max-height: 99%;
        margin: 0 auto;
        border-radius: 10px;
    }


    .media-object {
        justify-content: center;
        align-content: center;
        display: flex;
        flex-direction: column-reverse;
        padding: 30px;
        background: hsla(211, 100%, 14%, 0.2);
        border-radius: 10px;
        gap: 15px;
    }


    .break-section-container {
        width: fit-content;
        max-width: 80%;
        height: 90%;
        min-height: 90%;
        z-index: -3;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 auto;
    }

    .break-section-container h2 {
        font-size: 20px;
        text-align: center;
    }

    .bluepy-images {

        position: relative;
        width: 100%;
        height: 250px;
        margin-bottom: -3px;
    }

    .image-description11 .description-container-reverse11 {

        flex-direction: column;
        gap: 100px;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
    }

    .image-description11 .description-container-reverse11 .image-description-width {
        max-height: 400px;
        max-width: 700px;
        height: 500px;
        width: 99vw;
        overflow-x: clip;
    }
    .image-description11 .description-box{
        gap: 10px;
    }
    .image-description11 .description-box p{
        font-size: 15px;
    }

    .rotating-circle-background {
        scale: 60%;
    }

    .image-description2,
    .image-description4,
    .image-description,
    .image-description11 {
        min-height: 800px;
        width: 90%;
        padding: 20px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin: 0 auto;
    }

    .image-description4 .description-container3 {

        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
        margin: 0 auto;
    }

    .bluepy-gun-section {
        min-height: 800px;
        width: 100vw;
        padding: 20px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin: 0 auto;
    }

    .bluepy-gun-section .description-container-reverse {

        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
        margin: 0 auto;
    }

    .bluepy-gun-section .description-container-reverse .image-description-width {
        max-height: 300px;
        max-width: 100vw;
    }

    .image-description-red {

        min-height: 800px;
        width: 100vw;
        padding: 20px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin: 0 auto;
    }

    .description-container5 {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }


    .description-container {
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
        margin: 0 auto;
    }

    .description-image {
        max-width: 90vw;
        width: 90vw;
        min-width: 90vw;
    }


    .image-description11 .image-description-width,
    .image-description-width {
        max-height: 400px;
        max-width: 100vw;
        height: 500px;
        width: 99vw;
        padding: 20px 80px;
        overflow-x: clip;
    }

    .image-description-width h2 {
        font-size: 25px;
    }

    .image-description-width p {
        font-size: 18px;
    }

    .image-description2 .description-container-reverse {

        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 0;
        justify-content: center;
        align-items: center;
        padding: 30px 0;
        margin: 0 auto;
    }
}

/*
RESPONSIVE FOR LARGER THAN 575px
 */

@media (min-width: 575px){
    /*custom property

     */
    :root
    {
        --fs-1:90px;
        --fs-2:45px;
    }


    .tournament .btn-primary {
        width: 150px;
        margin: 0 auto; /* This centers horizontally */
        display: block; /* Ensures the button takes up the full width */
    }
    .hero{ height: 100vh;
        margin-top: 110px;
    margin-bottom: 150px;}


    .youtubevideo{
        margin-top: 20px;
        max-height: 90vh;
        height: 90vh;
        min-height: 100vh;
    }
    .youtubevideo iframe{
        height: 56.25vw; /* 16:9 aspect ratio */
    }

    .hero .btn-group{
        border: 0;
        margin: 0;
    }

    .vertical-video{
        visibility: collapse;
    }
    .horizontal-video{
        visibility: visible;
    }

    .hero-title{
        width: auto;
        max-width: 70%;
        margin: 0 auto;
    }
    .about2,
    .about{
        height: 50vh;
        padding: 40px;
    }
    .about2-background,
    .about3-background,
    .about2-align-item,
    .about-background,
    .about-align-item{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        margin: 0 auto;
        width: auto;
        align-items: center;
        border: 20px;
        background-size: cover;
        height: 40vh;
        min-height: 30vh;
    }
    .about-height{
        height: 800px;
    }
    .about,
    .about-content,
    .about2-content{
        height: auto;
        min-height: auto;
        padding: 10px;
        border: 10px;
        max-width: 100vw;
        overflow-x: clip;
    }
    .bluepy-about2-image,
    .bluepy-about-image{
        display: flex;
        border: 0;
        padding: 0;
        justify-content: center;
        margin: 0 auto;
        align-items: center;
        align-self: center;
    }


/*
REUSED STYLE
 */
.container{
   border: 30px;
}

.hero {
    height: 600px;
    min-height: 600px;
    max-height: 600px;
    margin-top: 0;
    margin-bottom: 100px;
    padding: 0;
    justify-content: start;
    align-content: start;
    display: flex;
    flex-direction: column;
}

.youtubevideo{
    margin-top: 0;
    max-height: auto;
    height: 400px;
    min-height: 400px;
}
    /**
    ABOUT
     */

.about-banner{
    position: relative;
    max-width: 410px;
    margin-inline: auto;
    z-index: 1;
}
.about,
.about2,
.about-height{
    min-height: 800px;
    height: 1200px;
    max-height: 60vh;
}
.about-content,
.about2-content{padding: 60px 40px;}


    /*
    TORUNAMENT
     */
    .tournament{
        max-width: 100vw;
        margin-right: 10px;
        margin-top: 40px;
        max-height: 90vh;

    }
    .discord-background-image{
        width: 100%;
        max-width: 100vw;
    }
    .tournament,
    .discord-background-image{
        --fs-2: 30px;
        --fs-3: 30px;
        --fs-6: 16px;

        text-align: center;
        gap: 30px;
        width: 500px;
        min-width: 100%;
        max-width: 99vw;
    }
    .tournament .btn-primary {
        width: 150px;
        margin-top: 25px; /* This centers horizontally */
        display: block; /* Ensures the button takes up the full width */
    }
    .team .container .section-title-team{
        padding-top: 100px;
    }

    .team,
    .team .container
    {
        min-height: 1000px;
        height: 1000px;
        max-height: 1000px;
        margin: 0;
        border: 0;
        gap: 20px;
    }
    .stores-video{
        min-width: auto;
        min-height: 900px;
        height: 100vh;
        transform: translate(-15px, 0);
    }
/**
GALLERY
 */

.gallery .container{max-width: unset;}
.gallery-list li{min-width: 80%;}

}



/*
RESPONSIVE FOR LARGER THAN 768px
 */

@media (min-width: 768px){
    /*custom property

     */
    :root
    {
        --fs-1:115px;
        --fs-2:36px;
    }




    /*
    REUSED STYLE
     */
    .container{
      border: 30px;
    }

    .has-scrollbar::-webkit-scrollbar-button{width: 150px;}

    /*
    HEADER
     */

    .header::after,
    .header::before{
        content: "";
        position: absolute;
        width: 115px;
        height: 20px;
        background: var(--raisin-black-1);
        bottom: -15px;
    }

    .header::before{
        left: 0;
        clip-path: var(--polygon-2);
    }
    .header::after{
        right: 0;
        clip-path: var(--polygon-3);
    }


    /*
    HERO
     */

    .hero-title{
        width: auto;
        max-width: 1600px;
        margin: 0 auto;
    }
    .hero {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
        margin-top: 0;
        margin-bottom: 100px;
        padding: 0;
        justify-content: start;
        align-content: start;
        display: flex;
        flex-direction: column;
    }
    
    .youtubevideo{
        margin-top: 0;
        max-height: auto;
        height: 550px;
        min-height: 550px;
    }
    .hero-background-wallpaper{
        min-height: 350px;
    }
    .back-video{
        min-height: 400px;
    }
    .hero-border{
        min-height: 410px;
    }

    .hero-subtitle{
        --fs-7: 25px;
        letter-spacing: 30px;
        padding: 15px;
        margin: 20px;
    }
    .btn-group{
        margin-bottom: 330px;
    }

    /*
    ABOUT
     */
    .about2-banner,
    .about-banner{max-width: 430px;}


    .about2,
    .about{
        min-height: 550px;
        max-height: 450px;
        height: 60vh;
        padding: 40px;
        max-width: 1600px;
    }
    .about-height{
        min-height: 500px;
        height: 500px;
        max-height: 500px;
    }


    .about2-background,
    .about3-background,
    .about2-align-item{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 20px;
        margin: 0 auto;
        width: auto;
        align-items: center;
        border: 20px;
        background-size: cover;
        min-height: 300px;
        max-height: 300px;
    }
    .about-background,
    .about-align-item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px;
        margin: 0 auto;
        width: auto;
        align-items: center;
        border: 20px;
        background-size: cover;
        max-height: 300px;
        min-height: 300px;

    }

    .bluepy-about2-image,
    .bluepy-about-image{
        display: flex;
        border: 0;
        padding: 0;
        justify-content: center;
        margin: 0 auto;
        align-items: center;
        align-self: center;
    }

    /*
    TORUNAMENT
     */

    .team .container .section-title-team{
        position: relative;
        text-align: center;
        padding-top: 150px;
        padding-bottom: 30px;
    }



    .tournament,
    .discord-background-image{
        --fs-2: 30px;
        --fs-3: 30px;
        --fs-6: 16px;

        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; /* Center vertically */
        gap: 30px;
        min-width: 100%;
        max-width: 99vw;
        width: 100%;
    }

    .tournament .btn-primary {
        width: 150px;
        margin-top: 25px; /* This centers horizontally */
        display: block; /* Ensures the button takes up the full width */
    }

    /*
    GALLERY
     */
    .gallery-list{padding-bottom: 30px}
    .gallery-list li{min-width: 70%;}


    /*
    NEWSLETTER
     */

    .newsletter,
    .newsletter .container{
        max-width: 100%;
        width: 100%;
        min-height: 800px;
        min-width: 100%;
        max-height: 600px;
        height: 800px;
        padding-top: 100px;
    }
    .newsletter-card{ text-align: left;}
    .newsletter-content{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        max-width: 440px;
        margin-inline: auto;
    }


    .newsletter-ads{
        justify-content: center;
        display: flex;
        flex-direction: row;
        max-width: 200px;
        margin: 0 auto;
        align-content: center;
        gap: 20px;
        vertical-align: center;
        align-items: center;
    }

    .newsletter-img{ margin-inline: 0;}
    .newsletter-form{
        position: relative;
        max-width: 550px;
        margin-inline: auto;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        padding: 10px;
    }

    .newsletter-form::after{
        content: "";
        position: absolute;
        bottom: 9px;
        left: -3px;
        width: 27px;
        height: 1px;
    }

    .newsletter .input-field{
        clip-path: var(--polygon-4);
        margin-bottom: 0;
    }

    /*
    FOOTER
     */

    .footer-menu-wrapper,
    .footer-quicklinks,
    .footer-bottom .container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: auto;
    }

    .footer-menu-list{
        max-width: 50%;
        justify-content: flex-start;
        column-gap: 16px;
        margin-bottom: 0;

    }

    .footer-input-wrapper{
        margin-inline: 0;
        width: 50%;
    }

    .quicklink-list{
        margin-bottom: 0;
        column-gap: 15px;
    }

    .copyright{margin-bottom: 0;}

    .image-description-width{
        max-width: 600px;
        min-width: 600px;
        width: 600px;
        height: 600px;
    }

    .image-description4,
    .image-description11,
    .image-description{
        min-height: 900px;
        height: 900px;
        max-height: 900px;
    }
    .image-description2 .image-description-width{
        padding: 150px;
    }
    .image-description2 .description-box{
        max-width: 400px;
    }
    .description-image{
        min-height: 400px;
    }

    .red-img-bottom{
        min-height: 400px;
    }
}



/*
RESPONSIVE FOR LARGER THAN 1024px
 */

@media (min-width: 1024px){
    /*
    CUSTOM PROPERTY
     */
    :root{
        /*
        SPACING
         */
        --section-padding: 100px;
    }

    /*
    REUSED STYLE
     */

    .container{max-width: 1000px;
    margin: 0 auto;}
    .has-scrollbar::-webkit-scrollbar-button{width: 200px;}

    /*
    HEADER
     */

    .header{padding-block: 0;}

    .header .logo {margin-right: 25px;}


    .nav-open-btn {display: none;}

    .navbar{
        position: static;
        opacity: 1;
        visibility: visible;
        background: none;
        max-width: unset;
        width: max-content;
        height: auto;
        box-shadow: none;
        display: flex;
        justify-content: space-between;
    }

    .navbar-top{display: none;}

    .nav-social-list ion-icon{
        padding: 10px;
        color: white;
        gap: 0;
        font-size: 20px;
    }

    .nav-social-list ion-icon:hover{
        background: white;
        color: #054594;
        border-radius: 40px;
    }
    .nav-social-list{
        gap: 0;
        margin-left: 30px;
    }

    .navbar-list{
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }


    .navbar-link{
        position: relative;
        color: var(--platinum);
        padding-block: 34px;
        border: none;
        font-family: var(--ff-oswald);
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 1;
    }

    .navbar-link::after{
        content: "";
        position: absolute;
        inset: 0;
        transform: skew(-15deg);
        border-bottom: 5px solid transparent;
        z-index: -1;
        transition: var(--transition-1);
    }

    .navbar-link:focus{outline: none;}
    .navbar-link:is(:hover, :focus)::after{
        background: var(--raisin-black-2);
        border-color: var(--orange);
    }


    .header-actions{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header-actions .search{
        color: var(--white);
        font-size: 18px;
        padding: 25px;
        transition: var(--transition-1);
    }

    .search ion-icon { --ionicon-stroke-width: 70px;}

    .header-actions .search:is(:hover, :focus) { color: var(--orange);}

    .btn-sign-in{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--raisin-black-3);
        color: var(--light-gray);
        font-family: var(--ff-oswald);
        font-size: var(--fs-11);
        font-weight: var(--fw-500);
        letter-spacing: 1px;
        padding: 5px;
        border-right: 5px solid var(--orange);
        box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2);
        margin-left: 15px;
        transition: var(--transition-1);
    }

    .btn-sign-in::after{
        content: "";
        position: absolute;
        top: 50%;
        left: -20px;
        width: 5px;
        transform: translateY(-50%);
        height: 40px;
        background: var(--eerie-black);
        box-shadow: 0 3px 7px hsla(345, 75%, 30%, 0.2), inset 0 3px 7px 0 hsla(335, 53%, 14%, 0.4);
    }

    .btn-sign-in:is(:hover, :focus){ color: var(--orange);}

    .btn-sign-in .icon-box{
        font-size: 18px;
        background: var(--raisin-black-2);
        padding: 6px;
        margin-right: 5px;
        box-shadow: 0 3px 7px hsla(345, 75%, 30%, 0.2), inset 0 3px 7px 0 hsla(335, 53%, 14%, 0.4);
    }

    .btn-sign-in .icon-box ion-icon{ --ionicon-stroke-width: 40px;}

    .btn-sign-in span{ padding-inline: 10px;}

    .overlay{display: none;
        position: fixed;}

    .btn-group{
        margin-bottom: 330px;
    }

    /*
    ABOUT
     */
    .about2,
    .about {padding-top: 200px;}
    .about2-content,
    .about-content{
        max-width: 1000px;
        margin-inline: auto;
    }

    .new-gallery{
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        margin-top: 60px;
    }

    /*
    TORUNAMENT
     */
    /* DISCORD */

    .tournament,
    .discord-background-image{

        width: 100%;
        max-width: 99vw;
    }


    .discord-text{
        width: 550px;
        padding: 40px;
        border-color: var(--orange);
        border-width: 2px;
        z-index: 3;
        box-shadow: inset 0 0 3px 3px var(--orange);
        border-radius: 15px;
        background: var(--raisin-black-1);
    }
    .tournament{
        --fs-2: 40px;
        --fs-3: 20px;
        --fs-6: 15px;
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;

    }


    .tournament .btn-primary {
        width: 150px;
        margin-top: 25px; /* This centers horizontally */
        display: block; /* Ensures the button takes up the full width */
    }



    .reviews-container{
        flex-direction: row;
        max-width: 90vw;
    }
    .reviews-container h2{
        font-size: 30px;
    }


    /*
    GALLERY
     */

    .gallery-list{
        gap: 30px;
        padding-inline: 40px;
    }

    .gallery-list li{ min-width: 50%;}

    /*
    NEWSLETTER
     */
    .newsletter{
        padding-top: 200px;
    height: 800px;
    min-height: 800px;
    max-height: 800px;}

    .newsletter-card{
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
        padding: 45px 50px;
    }

    .newsletter-content{
        margin-inline: 0;
        margin-bottom: 0;
    }

    .newsletter-img{ padding-left: 30px;}

    .newsletter-form{ flex-grow: 1;}

    .newsletter-form::after{
        bottom: 9px;
        left: -5px;
        width: 25px;
    }

    /*
    FOOTER
     */

    .footer-brand-wrapper{
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-height: 50px;
        margin: 20px auto;
        border-top: 0;
        border-bottom: 30px;
    }

    .footer-top .logo{
        margin-inline: 0;
        margin-bottom: 0;
        margin-right: 50px;
    }

    .footer-menu-wrapper{ gap: 50px;}

    .footer-menu-list{
        flex-grow: 1;
        max-width: unset;
    }


    .team .container .section-title-team{
        position: relative;
        text-align: center;
        padding-top: 200px;
        padding-bottom: 30px;
    }

    .team,
    .team .container
    {
        min-height: 1100px;
        height: 1100px;
        max-height: 1100px;
        margin: 0;
        border: 0;
        gap: 20px;
        max-width: 100%;
        width: 100%;
        min-width: 100%;
    }
    .stores-video{
        min-width: auto;
        width: 100vw;
        max-width: 100vw;
        min-height: 900px;
        height: 900px;
        transform: translate(-15px, 0);
    }
    .stores-icon{
        max-width: 100px;
        max-height: 100px;
    }
    .team-list{
        line-height: 0.2;
        width: auto;
        max-width: 90%;
        margin: 0 auto;
    }
    .team-member{
        height: auto;
    }


    .break-section-container h2{
        font-size: 30px;
        text-align: center;
    }

    .media-section{
        max-height: 900px;
        min-height: 900px;
        height: 900px;
    }




}

/*
RESPONSIVE FOR LARGER THAN 1200px
 */

@media (min-width: 1200px){

    :root{


        --fs-1: 150px;
    }


    /*
    REUSED STYLE
     */


    .container{
        margin: 0 auto;
        max-width: 1200px;}

    /*
    HEADER
     */

    .navbar-link{ padding-block: 45px;}


    /*
    HERO
     */

    .hero-border{
        margin: 0 auto;
    }

    .hero .btn-group{
        border: 0;
        margin: 0;
    }


    /*
    ABOUT
     */
    .about2,
    .about{
        background-size: 55%;
        background-position: 90% center;
        min-height: 700px;
    }
    .about2-background,
    .about3-background,
    .about .container{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
    }
    .about2-banner,
    .about-banner{
        margin-inline: 0;
        margin-bottom: 0;
    }

    .about2-content,
    .about-content{
        min-width: 600px;
        margin-inline: 0;
    }

    .about3-background,
    .about2-background,
    .about-background,
    .about-align-item,
    .about2-align-item{
        min-height: 350px;
    }


    .about-height{
        min-height: 200px;

    }

    .description-image{
        max-width: 800px;
        min-width: 800px;
        max-height: 420px;

        width: 800px;
        min-height: 420px;
        height: 420px;
    }
    .description-border{
        width: 103%;
        max-width: 810px;
        height: 105%;
        max-height: 430px;
        position: absolute;
        transform: translateX(-5px) translateY(-5px);
        box-shadow: inset 0 0 2px 2px hsl(191, 100%, 50%);
        --polygon-1: polygon(93% 0, 100% 30%, 100% 100%, 7% 100%, 0 63%, 0 0);
        clip-path: var(--polygon-1);
        background-size: cover;
        background-position: center;
    }

    .image-description{
        min-height: 800px;
        height: 800px;
        max-height: 800px;
    }

    .image-description2{
        min-height: 1000px;
        height: 1000px;
        gap: 0;
        max-height: 1000px;
    }
    .description-container,
    .description-container3,
    .description-container5{
        min-height: 600px;
        height: 80%;
        padding: 0 150px;
        justify-content: center;
        align-items: center;
        display: flex;
        margin: 0 auto;
    }



    /*
   TORUNAMENT
    */
    /* DISCORD */

    .tournament,
    .discord-background-image{

        width: 100%;
        max-width: 99vw;
    }


    .discord-text{
        width: 550px;
        padding: 40px;
        border-color: var(--orange);
        border-width: 2px;
        z-index: 3;
        box-shadow: inset 0 0 3px 3px var(--orange);
        border-radius: 15px;
        background: var(--raisin-black-1);
    }
    .tournament{
        --fs-2: 40px;
        --fs-3: 20px;
        --fs-6: 15px;
        text-align: center;
        max-width: 1000px;
        margin: 0 auto;

    }


    .tournament .btn-primary {
        width: 150px;
        margin-top: 25px; /* This centers horizontally */
        display: block; /* Ensures the button takes up the full width */
    }


    /*
    GALLERY
     */
    .gallery{max-width: 100%;}

    /*
    MEDIA
     */



    .media-container{
        min-height: 700px;
        height: 700px;
        max-height: 700px;
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0;
    }

    .media-section{
        min-height: 700px;
        height: 700px;
        max-height: 700px;
        margin-bottom: 300px;
        padding: 0;
        border-bottom: 400px;
    }

    .news-rows{
        width: 100%;
        height: 100%;
        justify-content: center;
        display: flex;
        flex-direction: row;
        gap: 30px;
        align-items: center;
        margin: 0 auto;
    }

    .media-object{
        min-height: 500px;
        justify-content: center;
        align-content: center;
        display: flex;
        flex-direction: column-reverse;
        padding: 30px;
        background: hsla(211, 100%, 14%, 0.2) ;
        border-radius: 10px;
        gap: 15px;
    }





    /*
    NEWSLETTER
     */
    .newsletter{max-width: 1200px;
        margin-top: -200px;
        margin-bottom: 20px;
    padding-bottom: 100px;}

    .newsletter .container{
        padding-bottom: 300px;
    }
    .newsletter-card{ padding-block: 80px;}
    .newsletter-content{ max-width: 200px;}
    .newsletter-title{ --fs-3: 20px;}
    .newsletter .input-field{ max-width: 800px;}
    .newsletter-form{
        max-width: 800px;
        margin-inline: 0;
    }

    .newsletter-form::after{
        left: -3px;
    }

    /*
    TEAM
     */

    .team{
        max-height: 1100px;
        min-height: 1100px;
        width: 100%;
        margin: 0 auto;
    }
    .team.container{
        margin: 0 auto;
        text-align: center;
    }

    /*
    FOOTER
     */

    .footer-menu-wrapper{ flex-grow: 1;}
    .footer-menu-list{ justify-content: flex-end;}
    .footer-bottom{ align-items: end;}

    .image-description11 .image-description-width{
        scale: 110%;
        gap: 3px;
        justify-content: center;
    }
    .image-description11 .description-box{
        max-height: 300px;
        justify-content: center;
        gap: 30px;
    }

    .image-description11 .image-description-width h2{
        font-size: 30px;
        margin: 0 auto;
        border: 0;
        padding: 0;
    }
    .image-description11 .image-description-width p{
        font-size: 15px;
        margin: 0 auto;
        border: 0;
        padding: 0;
    }




    .image-description11{
        width: 90%;
        height: 600px;
        flex-direction: row-reverse;
        margin: 0 auto;
        gap: 50px;
        padding: 0 100px;
    }
    .rotating-circle-background{
        scale: 100%;
        z-index: 2;
        transform: translateY(-100px);
    }
    .description-bg-light{
        scale: 70%;
    }
    .image-description11 .description-container-reverse11{
        gap: 100px;
        justify-content: center;
    }


    .image-description-width{
        padding: 50px;
        scale: 90%;
        min-height: 500px;
        min-width: 500px;
    }

    .image-description-width h2{
       font-size: 40px;
    }
    .image-description-width p{
       font-size: 20px;
    }

    .description-container3,
    .description-container5,
    .description-container,
    .description-container-reverse{
        padding: 0 250px;
        gap: 10px;
        justify-content: center;
    }

    .image-description4,
    .image-description11,
    .image-description{
        min-height: 1250px;
    }

    .description-image{
        max-width: 90vw;
        width: 90vw;
        min-width: 90vw;
        min-height: 500px;
    }

    .bluepy-gun-section{
        padding-top: 50px;
    }
    .bluepy-images{
        min-height: 400px;
    }


}


@media (min-width: 1600px){

    :root{


        --fs-1: 150px;
    }


    /*
    REUSED STYLE
     */
    .about2,
    .about2-background,
    .about3-background,
    .about2-align-item,
    .container{max-width: 1600px;}

    /*
    HEADER
     */

    .navbar-link{ padding-block: 45px;}


    /*
    HERO
     */

    .hero {
        height: fit-content;
        min-height: 800px;
        max-height: 800px;
        margin-top: 110px;
        margin-bottom: 100px;
        padding: 0;
        justify-content: start;
        align-content: start;
        display: flex;
        flex-direction: column;
    }
    
    .youtubevideo{
        margin-top: 0;
        max-height: auto;
        height: 90vh;
        min-height: 90vh;
    }

    .hero .btn-group{
        border: 0;
        margin: 0;
    }

    /*
    ABOUT
     */
    .about2,
    .about{
        background-size: 55%;
        background-position: 90% center;
        height: 85vh;

    }


    .hero-border{
        height: 1200px;
        max-height: 67%;
    }

    .about-background,
    .about2-background,
    .about3-background,
    .about .container{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
        height: 40vh;
    }
    .about2-banner,
    .about-banner{
        margin-inline: 0;
        margin-bottom: 0;
    }

    .about2-content,
    .about-content{
        max-width: 600px;
        margin-inline: 0;
    }


    /*
    GALLERY
     */

    .gallery{
        max-width: 100%;
    }

    /*
    DISCORD
     */
    .tournament,
    .discord-background-image{

        width: 100%;
        max-width: 2000px;
        min-height: 1000px;
        height: 1000px;
        max-height: 1000px;
        border: 0;
    }
    .tournament{
        background: none;
        border: var(--raisin-black-1);
        border-width: 10px;
    }

    .discord-text{
        width: 500px;
        margin-left: 300px;
        border-color: var(--orange);
        border-width: 2px;
        z-index: 3;
        box-shadow: inset 0 0 2px 2px var(--orange);
        border-radius: 15px;
        background: var(--raisin-black-1);
        background: hsla(234, 14%, 14%, 0.9);
    }
    .discord-text p{
        font-size: 20px;
        letter-spacing: 1px;
    }
    .discord-text .btn-primary{
        width: 200px;
    }
    .discord-text a{
        font-size: 20px;
        letter-spacing: 1px;
    }
    .discord-text h2{
        font-size: 30px;
        letter-spacing: 1px;
    }









    /*
    STORES
     */
    .team{
        min-height: 950px;
        max-height: 950px;
        height: 950px;
        margin: 0 auto;
        border: 0;
        padding: 0;
    }
    .team .container{
        margin-top: 0;
        border: 0;
        min-height: 100%;
        height: 100%;
        max-height: 100%;
    }


    /*
    NEWSLETTER
     */
    .newsletter{max-width: 1200px;
        padding-top: 250px;
        margin-top: -200px;
        margin-bottom: 50px;
        padding-bottom: 100px;
        min-height: 800px;

    }
    .newsletter-card{ padding-block: 80px;}
    .newsletter-content{ max-width: 200px;}
    .newsletter-title{ --fs-3: 20px;}
    .newsletter .input-field{ max-width: 800px;}
    .newsletter-form{
        max-width: 800px;
        margin-inline: 0;
    }

    .newsletter-form::after{
        left: -3px;
    }

    .break-section-container h2{
        font-size: 35px;
        text-align: center;
    }



    /*
    FOOTER
     */

    .footer-menu-wrapper{ flex-grow: 1;}
    .footer-menu-list{ justify-content: flex-end;}
    .footer-bottom{ align-items: end;}



    .image-description11 .description-container-reverse11{
        width: 100%;
        margin-bottom: 80px;
        flex-direction: row-reverse;
        gap: 400px;
    }
    .rotating-circle-background{
        scale: 200%;
        transform: translateY(50px);
        z-index: -1;
    }

    @keyframes moveUpDown2 {
        0%, 100% {
            transform: scale(70%) translateY(-60px) ; /* Start and end position (no movement) */
        }
        50% {
            transform: scale(70%) translateY(-40px); /* Midpoint position (move up) */
        }
    }
    .description-bg-light{
        scale: 70%;
    }

    .image-description11{
        width: 100%;
        flex-direction: row-reverse;
        margin: 0 auto;
        gap: 150px;
        padding: 0 100px;
    }


    .bluepy-images{

        position: relative;
        width: 100%;
        height: 400px;
        margin-bottom: -3px;
    }


    .image-description-red,
    .image-description-red .description-container5{
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .image-description2,
    .image-description4 .description-container3,
    .description-container,
    .description-container5{
        flex-direction: row;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        max-width: 90%;
    }

    .image-description2 .description-container-reverse,
    .bluepy-gun-section .description-container-reverse{
        flex-direction: row-reverse;
        max-width: 90%;
    }


    .image-description-width{
        min-width: 600px;
        min-height: 600px;
    }
    .description-image{
        min-width: 1000px;
        width: 1000px;
        max-width: 1000px;
    }

    .image-description4{
        max-height: 500px;
        height: 500px;
        min-height: 500px;
    }

    .image-description11{
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
    }
    .image-description11 .description-container-reverse11{
        gap: 200px;
    }

    .image-description{
        max-height: 600px;
        height: 600px;
        min-height: 600px;
    }

    .bluepy-images{
        min-height: 700px;
    }

    .image-description2,
    .image-description-red,
    .bluepy-gun-section{
        max-height: 700px;
        height: 700px;
        min-height: 700px;
    }
    .description-bg-light{
        scale: 70%;
    }
    .media-section{
        min-height: 700px;
        height: 700px;
        max-height: 700px;
       margin-bottom: 300px;
        padding: 0;
        border-bottom: 400px;
    }
    .media-container{
        min-height: 700px;
        height: 700px;
        max-height: 700px;
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0;
    }
    .news-rows{
        max-height: fit-content;
        min-height: fit-content;
        height: fit-content;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    .media-object{
        min-height: 500px;
    }

    .description-box h2{
        font-size: 50px;
    }
    .description-box p{
        font-size: 25px;
    }

    .image-description11 .description-box h2{
        font-size: 40px;
    }

    .image-description11 .description-box p{
        font-size: 25px;
        line-height: 1.2;
    }
    .image-description2 .image-description-width{
        min-height: 600px;
        height: 600px;
        min-width: 600px;
        width: 600px;
        max-height: 600px;
        max-width: 600px;
        padding: 100px;
    }
    .image-description2 .description-box{
        max-width: 500px;
    }
    .image-description2 .description-box h2{
        font-size: 48px;
    }
    .image-description2 .description-box p{
        font-size: 22px;
    }


}

@media (min-width: 1900px){

   
    .hero .container{
        margin: 0 auto;
        align-items: center;
    }

    .hero, .youtubevideo{
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
        margin-bottom: 200px;
    }


    .new-gallery{
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
    }
    .new-gallery .container{
        margin: 0;
        padding: 0;
    }
    .container{
        max-width: 100vw;
        width: 100%;
        min-width: 100%;
        max-height: 100vh;
        margin: 0 auto;
        align-content: center;
        justify-content: center;
    }
    .about,
    .about-background,
    .about2-background,
    .about3-background,
    .about2,
    .about2-align-item,
    .about-align-item,
    .about-height,
    .about-height2{
        max-width: 100%;
        width: 100%;
        min-width: 100%;
        justify-content: center;
        gap: 200px;
        min-height: 60vh;
        max-height: 1000px;
    }

    .stores-video{
        min-height: 110vh;
        max-height: 110vh;
        height: 110vh;
        transform: translateX(0);
    }
    .team{
        min-width: 100vw;
        min-height: 950px;
        max-height: 120vh;
        height: 120vh;
        border: 0;
        margin: 0 auto;
        padding: 0;
    }
    .team .container{
        align-items: center;
        height: 100%;
        max-height: 100%;
        display: flex;
    }
    .team-list{
        align-items: center;
        justify-content: center;
        align-self: center;
        max-width: 100%;
    }

    .team .container .section-title-team{
        position: relative;
        text-align: center;
        align-items: center;
        border: 0;
        padding: 40px;
        margin: 0 auto;

    }


    .tournament{
        min-height: 600px;
        height: 600px;
        max-height: 600px;
        border: 0;
        padding: 0;
        margin: 0 auto;
    }
    .discord-background-image{
        border: 0;
        padding: 0;
        max-height: 100%;
        min-height: 100%;
        height: 100%;
    }


    .discord-background-image{

        max-height: 100%;
        height: 100%;
        min-height: 100%;
    }

    .newsletter-card{
        margin: 0 auto;
        align-self: center;
        border: 0;
    }

    .newsletter,
    .newsletter .container{
        max-width: 100%;
        width: 100%;
        min-width: 100%;
        max-height: 50vh;
        height: 50vh;
        min-height: 800px;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .btn-group{
        margin: 0 auto;
    }
    .footer-top .container{
        max-width: 2000px;
        padding-left: 50px;
        padding-right: 50px;
    }
    .header .container{
        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }

    .newsletter{
        padding-top: 0;
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }
    .description-bg-light{
        scale: 60%;
    }
    .image-description11 .description-container-reverse11{
        gap: 400px;
    }

    @keyframes moveUpDown2 {
        0%, 100% {
            transform: scale(90%) translateY(-60px) ; /* Start and end position (no movement) */
        }
        50% {
            transform: scale(90%) translateY(-40px); /* Midpoint position (move up) */
        }
    }


}

@media (min-width: 2200px){

    .hero .container{
        margin: 0 auto;
        align-items: center;
    }

    .hero, .youtubevideo{
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
        margin-bottom: 200px;
    }


    .hero .container .btn-primary{
        border-bottom: 0;
        margin-bottom: 0;
    }

    .bluepy-images{
        min-height: 900px;
        max-height: 900px;
    }
    .media-section{
        max-height: 1000px;
        height: 1000px;
        min-height: 1000px;
    }
    .media-container{
        gap: 20px;
    }
    .media-object{
        min-height: 500px;
    }
    .rotating-circle-background{
        transform: translateY(0);
        scale: 250%;
    }
    @keyframes moveUpDown2 {
        0%, 100% {
            transform: scale(80%) translateY(20px); /* Start and end position (no movement) */
        }
        50% {
            transform: scale(80%) translateY(0); /* Midpoint position (move up) */
        }
    }
    .description-bg-light{
        scale: 70%;
    }

    .image-description11 .description-container-reverse11{
        gap: 500px;
    }


    .tournament{
        min-height: 800px;
        height: 800px;
        max-height: 800px;
        border: 0;
        padding: 0;
        margin: 0 auto;
    }

}