@import "./reset.css";
@import "./header.css";
@import "./sign-in.css";
@import "./hero.css";
@import "./categories.css";
@import "./section--header.css";
@import "./trending.css";
@import "./game.css";
@import "./reviews.css";
@import "./coming.css";
@import "./filter.css";
@import "./post.css";
@import "./ultimate.css";
@import "./faq.css";
@import "./footer.css";



@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

h1,h2,h3,h4,h5,h6, p {
    margin: 0;
}


*,
*:before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Vazirmatn", sans-serif;
    background-color: #1C1B29;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}


/*Tablet*/
@media(max-width: 1080px) {
    .container {
        padding: 0 98px;
    }
    /*    Header     */
    .header_prime {
        font-size: 14px;
    }
    .header_gaming {
        font-size: 20px;
    }
    .header_nav {
        gap: 15px;
    }
    .header_nav-link {
        font-size: 14px;
        padding: 10px;
    }

    /*Hero*/
    .hero {
        min-height: 500px;
    }
    .hero_title {
        font-size: 32px;
    }
    .hero_text {
        font-size: 14px;
    }
    .hero_pc {
        padding: 4px 41px;

    }
    .hero_ps4 {
        padding: 4px 35px;

    }
    .hero_xbox {
        padding: 4px 16px;

    }
    .hero_bottom {
        width: 541px;
    }
    .hero_game {
        width: 101px;
        height: 179px;
    }
    .hero_icons {
        gap: 8px;
    }

    /*Categor*/
    .categor {
        gap: 20px;
    }

    /*Treding*/
    .trending_item {
        gap: 12px;
    }
    .trending_content {
        width: 167px;
        height: 330px;
        padding: 8px;
    }
    .trending_list-inner-2 {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }
    .trending_img {
        width: 151px;
        height: 184px;
    }

    /*Reviews*/
    .reviews_inner {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 12px;
    }
    .reviews_item {
        width: 100%;
        max-width: 884px;
        min-height: 196px;
    }

    /*Game*/
    .game_content {
        gap: 24px;
    }
    .game_content-inner {
        width: 100%;
        max-width: 430px;
        overflow: hidden;
    }
    .game_img {
        width: 430px;
        height: 285px;
    }
    .game_images {
        gap: 8px;
    }
    .game_icon {
        width: 157px;
        height: 84px;
    }
    .game_btn {
        padding: 7px 72px;
    }

    /*Coming*/
    .coming_item {
        gap: 12px;
    }
    .coming_list {
        width: 100%;
        max-width: 167px;
        min-height: 284px;
        padding: 8px;
    }
    .coming_img {
        width: 151px;
        height: 172px;
    }
    .coming_buy {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }
    .coming_title {
        text-align: center;
    }

    /*Post*/
    .post_icon {
        width: 436px;
        height: 380px;
    }
    .post_title {
        font-size: 16px;
        font-weight: 500;
    }
    .post_right {
        gap: 8px;
    }
    .post_img {
        width: 214px;
        height: 186px;
    }
    .post_subtitle {
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }
    .post_wolf {
        left: 230px;
    }
    .post_outlaws {
        left: 230px;
    }

    /*Ultimate*/
    .ultimate_inner {
        gap: 16px;
    }
    .ultimate_item {
        width: 100%;
        max-width: 434px;
    }
    .ultimate_content {
        width: 211px;
        height: 130px;
    }
    .ultimate_form {
        width: 100%;
        max-width: 434px;
        min-height: 391px;
    }
    .ultimate_inputs {
        width: 386px;
    }
    .ultimate_signup {
        padding: 8px 161px;
        white-space: nowrap;
    }
    .ultimate_google {
        padding: 7px 104px;
    }

    /*Filter*/
    .filter_input {
        width: 884px;
    }
    .filter_click {
        width: 194px;
    }
    .range-wrapper input {
        width: 153px;
    }
    .range-labels {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .filter_btn {
        padding: 6px 18px;
    }
    .filter_game {
        gap: 12px;
    }
    .filter_game-item {
        width: 167px;
        height: 332px;
    }
    .filter_media {
        border: none;
    }
    .filter_icon-game {
        width: 151px;
        height: 178px;
    }
}


/*Mobile*/
@media(max-width: 430px) {
    body::-webkit-scrollbar {
        display: none;
    }
    .container {
        padding: 0 24px;
    }
    .header_form {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header_regis {
        display: none;
    }
    .header_nav {
        display: none;
    }
    .header_burger span {
        display: flex;
    }

    /*Hero*/
    .hero_inner {
        display: flex;
        flex-direction: column-reverse;
        row-gap: 48px;
    }
    .hero_top {
        text-align: center;
        margin-top: 48px;
    }
    .hero_bottom {
        width: 382px;
        text-align: center;
    }
    .hero_prev-next {
        display: flex;
        gap: 270px;
        align-items: center;
    }
    .hero_icons,.hero_items, .hero_itemt {
        display: none;
    }
    .hero_title-name {
        font-size: 0;
    }
    .hero_text {
        font-size: 0;
    }
    .hero_num {
        font-size: 14px;
    }
    .hero_numbs {
        font-size: 20px;
        font-weight: 600;
    }
    .hero-btn-orange {
        background-color: #FF5733;
        color: #fff;
    }
    .hero-btn-border {
        color: #FF5733;

        &:hover {
            background: none;
        }
    }

    /*Categor*/
    .categor {
        display: flex;
        gap: 12px;
        align-items: center;

        overflow: auto;
        scroll-snap-type: x mandatory;
        --webkit-overflow-scrolling:touch;
        padding: 0 16px 8px;
        margin: 0 -16px;
    }
    .categor::-webkit-scrollbar {
        display: none;
    }

    /*Trending*/
    .trending {
        margin: 60px 0;
    }
    .trending_left {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .trending_item {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        --webkit-overflow-scrolling: touch;
        padding: 0 16px 8px;
        margin: 0 -16px;
    }
    .trending_item::-webkit-scrollbar {
        display: none;
    }
    .trending_right {
        display: none;
    }
    .trending_title {
        font-size: 20px;
    }
    .trending_click {
        font-size: 14px;
        font-weight: 300;
    }
    .trending_button {
        display: none;
    }
    .trending_content {
        height: 297px;
    }

    /*Filter*/
    .filter_game {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .filter_game-item {
        width: 183px;
        min-height: 297px;
        padding: 8px;
    }
    .filter_item {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
    }
    .filter_input {
        width: 382px;
    }
    .filter_block {
        display: none;
    }
    .filter_button {
        display: flex;
        gap: 12px;
        align-items: center;
    }
    .filter_coln {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .filter_colon {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    /*Ultimate*/
    .ultimate_inner {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }
    .ultimate_info {
        display: flex;
        flex-direction: column;
        row-gap: 12px;
    }
    .ultimate_content {
        width: 382px;
        padding: 12px;
        height: 92px;
    }
    .ultimate_title {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
    }
    .ultimate_text {
        font-size: 12px;
        font-weight: 400;
        text-align: center;
    }
    .ultimate_form {
        width: 100%;
        max-width: 382px;
        min-height: 372px;
        padding: 16px 24px;
    }
    .ultimate_inputs {
        width: 334px;
    }
    .ultimate_signup {
        padding: 8px 135px;
    }
    .ultimate_google {
        padding: 7px 78px;
        white-space: nowrap;
    }

    /*Game*/
    .game_content {
        display: flex;
        flex-direction: column;

    }
    .game_header {
        row-gap: 24px;
    }
    .game_list {
        display: flex;
        flex-direction: column;
    }
    .game_btn {
        padding: 7px 60px;
    }
    .game_text {
        font-size: 14px;
    }
    .game-btns {
        background: 0;
        color: #FF5733;
    }


    /*Reviews*/
    .reviews_item {
        display: flex;
        flex-direction: column;
        max-width: 310px;
        min-height: 490px;
        padding: 8px;
        position: relative;
    }
    .reviews_inner {
        display: flex;
        gap: 16px;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        --webkit-overflow--scrolling:touch;
        padding: 0 16px 8px;
        margin: 0 -16px;
    }
    .reviews_inner::-webkit-scrollbar {
        display: none;
    }
    .reviews_aside {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 16px;
    }
    .reviews_full {
        padding: 7px 112px;
    }
    .reviews_right {
        display: none;
    }
    .reviews_photo {
        max-width: 294px;
        min-height: 194px;
        object-fit: cover;
        aspect-ratio: 16/9;
    }
    .reviews_title-text {
        margin: 16px 0;
    }
    .reviews_title::after {
        content: "";
        width: 294px;
    }
    .reviews_footer {
        display: flex;
        gap: 32px;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
    }
    .reviews_img {
        position: absolute;
        top: 415px;
        left: 37px;
        z-index: 1;
    }
    .reviews_img-2 {
        position: absolute;
        top: 415px;
        left: 168px;
        z-index: 1;
    }
    .reviews_img-3 {
        position: absolute;
        top: 415px;
        left: 278px;
        z-index: 1;
    }

    /*Coming*/
    .coming {
        margin: 60px 0;
    }
    .coming_item {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        --webkit-overflow--scrolling: touch;
        padding: 0 16px 8;
        margin: 0 -16px;
    }
    .coming_item::-webkit-scrollbar {
        display: none;
    }

    /*Post*/
    .post_inner {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        --webkit-overflow-scrolling:touch;
        padding: 0 16px 8px;
        margin: 0 -16px;
    }
    .post_inner::-webkit-scrollbar {
        display: none;
    }
    .post_icon,.post_img {
        width: 280px;
        height: 191px;
    }
    .post_right {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    /*Footer*/
    .footer_header {
        display: flex;
        flex-direction: column;
        row-gap: 24px;
        place-items: center;
    }
}