/* XLarge */
@media (min-width: 1024px){
    .navbar-expand-1024{
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-1024 .navbar-toggler{
        display: none;
    }

    .navbar-expand-1024 .navbar-collapse{
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-1024 .navbar-nav{
        flex-direction: row;
        gap: 6px;
    }

    .navbar-right p{
        display: none;
    }
}

@media (max-width: 1024px){
    .nav-container{
        width: 100%;
        padding: 0px 24px;
    }

    .navbar-nav{
        padding: 16px 0px;
        gap: 16px;
    }

    .navbar-right{
        display: flex;
        flex-direction: column;
        gap: 0px !important;
    }

    .navbar-right-inner{
        display: flex;
        flex-direction: column;
        padding-top: 16px;
        gap: 0px !important;
        border-top: 1px solid oklch(27.8% .033 256.848);
        width: 100%;
    }

    .messages, .notifications{
        display: flex;
        text-align: center;
        align-items: center;
        gap: 16px;
        margin-bottom: 12px;
        cursor: pointer;
    }

    .navbar-right-inner p{
        margin-bottom: 0;
    }

    .navbar-right-inner a:hover p{
        color: var(--neon-green);
    }

    .navbar-right button{
        width: 100%;
        padding: 12px 24px;
    }

    #hero .row{
        display: flex;
        flex-direction: column;
        gap: 72px;
    }

    #hero .container{
        padding-top: 24px !important;
    }

    #hero .row>div{
        text-align: center;
    }

    .row h1{
        font-family: "Days One", sans-serif;
        font-size: 48px;
        font-weight: 700;
        line-height: 60px;
        color: rgb(241, 241, 241);
        width: max-content;
        display: flex;
        flex-direction: column;
        justify-self: center;
    }

    .hero-p{
        max-width: 576px;
        display: flex;
        justify-self: center;
    }

    .hero-p~ div{
        width: max-content;
        align-self: center;
    }

    .hero-gradient{
        justify-self: center;
    }

    .trophy{
        transform: translate(-100%, 50%);
    }

    #latest-games .container{
        padding: 0;
        margin: 0;
    }

    #latestGamesCarousel .row>div{
        width: 50%;
    }

    .carousel-item .row>div:nth-child(3){
        display: none;
    }

    #what-we-do-text~ h2{
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
    }

    #what-we-do>div>div>div p, span{
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
    }

    #what-we-do .container, #our-team .container-custom{
        width: 95%;
    }

    #what-we-do .grid-config{
        grid-template-areas: 
            "pc-game mobile-game"
            "controllers vr-solution"
            "vr-design superhero"
            "ps4 three-d" !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-card{
        margin-bottom: 0;
    }

    #our-team .grid-config{
        grid-template-areas: 
            "member-1 member-2"
            "member-3 member-4"
            "member-5 member-6"
            "member-7 member-8";
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-card-inner{
        height: 320px;
        position: relative;
        width: 100%;
    }

    #contact-us .grid-config{
        grid-template-columns: 1fr;
    }

    #contact-us .container-custom{
        width: 95%;
    }

    #footer .container-custom{
        width: 100%;
        padding: 0px 24px;
    }

    #footer .grid-config{
        grid-template-areas: 
            "footer-about footer-games"
            "footer-tournaments footer-support";
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: auto auto;
        display: grid !important;
    }

    .container-custom .col{
        width: 100%; 
        max-width: 100%;
    }

    .social-links{
        width: 100%;
    }

    .bottom-footer{
        width: 95vw;
    }

    .policies{
        width: 40%;
    }
}

/* Medium */
@media (max-width: 768px){

    .trophy{
        transform: translate(-50%, 50%);
    }

    #latestGamesCarousel .row>div{
        width: 100%;
    }

    .carousel-item .row>div:nth-child(2){
        display: none;
    }

    .carousel-item .row>div:nth-child(3){
        display: none;
    }

    #our-team .grid-config{
        grid-template-areas: 
            "member-1"
            "member-2"
            "member-3"
            "member-4"
            "member-5"
            "member-6"
            "member-7"
            "member-8";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .bottom-footer{
        width: 95%;
        display: flex;
        flex-direction: column;
    }

    .bottom-footer p{
        margin: auto;
        margin-bottom: 12px;
    }

    .policies{
        width: 50%;
        margin: auto;
    }
}

/* Small */
@media (max-width: 640px){

    #hero .row h1{
        font-size: 31.5px;
        font-weight: 700;
        line-height: 39.375px;
    }

    #hero .container-custom{
        width: 95%;
    }

    #hero .row>div{
        width: 100%;
    }

    .hero-p{
        font-size: 12.25px;
        font-weight: 400;
        line-height: 19.9062px;
        display: flex;
        justify-self: center;
    }

    .hero-p~ div{
        width: 100%;
        justify-content: center;
    }

    #hero .btn{
        width: 100%;
    }

    .hero-gradient{
        height: 250px;
    }

    .trophy {
        transform: translate(-30%, 50%);
    }

    #footer .grid-config{
        grid-template-areas: 
            "footer-about"
            "footer-games"
            "footer-tournaments"
            "footer-support";
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr; 
        display: grid !important;
    }

    .social-links{
        width: 50%;
    }

    .cols{
        width: 100%;
    }

    .policies{
        width: 80%;
        margin: auto;
    }
}