@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&family=Play:wght@400;700&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow&family=Play:wght@400;700&family=Press+Start+2P&display=swap'); */
:root 
{
    --header-footer-color: #ffffff; 
    --button-color: #d3022e; 
    --button-hover-color: #dd3022; 
    --button-active-color: #530600;
    --text-color: #333333; 
    --background-color: #fee19b; /*#eee2c7; */
    --background-lighter-color:#f3efe7;
    --app-description-background-color: #ffffff;
    --description-author-background-color:#010101;
    --a-color: rgb(5, 83, 5);
    --mid-color:#fffaec;

    --primary-color: #d3022e;
    --primary-color-rgb: 211,2,46;
    --secondary-color: #010101;
    --light-font-color: #f5ebd8;
    --dark-font-color: #333333;

    --font-light-primary: #c0b296;
    --font-light-secondary: #9d9992;

    /* --banner-color:linear-gradient(to right, #b30000, #800000); */
    --banner-color:linear-gradient(to right, var(--background-color), #e2dacd);

    --category-menu-height: 805px;
}

*
{
    box-sizing: border-box;
}

.pt-sans-narrow-regular {
  font-family: "PT Sans Narrow", serif;
  font-weight: 400;
  font-style: normal;
}

body
{
    box-sizing: border-box;
    font-family: "Roboto Flex", sans-serif;
    color: var(--text-color);
    font-size: 16px;
    margin: 0;
    /*background-color: white;*/
    background-color: white;

}

a
{
    text-decoration: none;
    color: var(--button-color);
}

h1, h2
{
    color: #111;

}
.first-page-description h2, .banner h2
{
    color: #fff;
}
.games-blog-container h1
{
    margin-top: 0;
    margin-bottom: 36px;
}

.all-apps-h1 h2
{

    font-family: "Play", serif;
    margin-bottom: 0px;
}

.all-apps-h1 p
{
    margin-top: 24px;
}
.main-container h1 
{
    margin-top: 0px;
}
.main-container2 h1 
{
    color: #555;
    /* margin-top: 15px; */
    /* padding-left: 20px; */
    margin-bottom: 35px;
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
}
.faq-container h1
{
    margin-bottom: 35px;
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
}
.contact-all-container h1
{
    padding-inline: min(20px, 8%);
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
}
.app-name
{
    margin-bottom: 0px;
}
.app-h1 
{
    margin-top: 0px;
    margin-bottom: 30px;
}
.first-page-games h2
{
    /* margin-left: 36px; */

    font-family: "Play", serif;
    font-weight: bold;
    font-style: normal;
}
.games-blog-container h2
{
    margin-bottom: 26px;
    margin-top: 0px;
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
}
h4
{
    font-size: 0.9em;
}


.loading-cover{
    background-color: #010101;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    position: fixed;
}

.header 
{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: space-around;
    /* padding: 8px; */
    background-color: var(--header-footer-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    position: relative;
}


    .logo
    {
        
    }
    .header img 
    {
        height: 55px;
        width: auto;
    }

    .main-menu
    {
        margin-block: 8px;
    }
    .categories
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px; 
        margin-left:0 auto; 
    }

    .category, .download a, .main-menu a
    {
        text-decoration: none;
        padding: 8px 12px;
        background: linear-gradient(to bottom, var(--primary-color), #da0404);
        /* border: 1px solid #ddd; */
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .category:hover , .download a:hover, .read-more:hover, .main-menu a
    {
        background-color: var(--button-hover-color);
        color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .category:active , .download a:active, .main-menu a
    {
        background-color: var(--button-active-color);
        color: white;
        border-color: var(--button-active-color);
    }



/*****BANNER****/

.banner 
{
    padding: 14px 40px;
    text-align: center;
    border-radius: 5px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .banner h2 
    {
        font-size: 24px;
        margin: 0;
        color: #000;
    }

    .banner a 
    {
        background-color: black;
       
        color: white;
        padding: 10px 26px;
        font-size: 1em;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    }

    .banner a:hover {
        
        filter: brightness(1.1);
    }

    .banner-container {
        max-width: 1200px;
        margin: 0 auto;
        margin: 22px 0 30px 0;
        background: #eee;
        border-radius: 5px;
    }



/****************/


    .main-menu2 
    {
        background-color: var(--header-footer-color); 
        padding: 10px 0;
        text-align: center;
        width: calc(100% - 90px);
    }

    .main-menu2 ul 
    {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 20px; 
    }

    .main-menu2 li 
    {
        position: relative; 
    }

    .main-menu2 a 
    {
        text-decoration: none;
        color: var(--light-font-color); 
        font-size: 1em;
        font-weight: bold;
        text-transform: uppercase;
        padding: 5px 10px;
        position: relative;
    }


    .main-menu2 .active a::after 
    {
        content: "";
        position: absolute;
        bottom: -5px; 
        left: 0;
        width: 100%; 
        height: 4px; 
        background-color: red; 
    }


    .main-menu2 a::before 
    {
        content: "";
        position: absolute;
        top: -5px; 
        left: 50%;
        transform: translateX(-50%) scaleX(0); 
        width: 100%; 
        height: 4px; 
        background-color: red; 
        transition: transform 0.3s ease; 
    }

    .main-menu2 a:hover::before 
    {
        transform: translateX(-50%) scaleX(1); 
    }

/*****GAMEMENU********/
.game-menu-container {
    width: 100%;
    /*height: 454px; */
    border: 1px solid #e2dacd;
    /*border-radius: 8px 8px 0px 0px;*/
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    position: absolute;
    bottom: 0px;
    z-index: 2;
}
    .game-list-container
    {
       
        height: 100%;
        overflow: hidden;
    }

.game-menu 
{
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.game-menu-container  h2 

{
    background-color: var(--background-color); /*#b30000;*/
    margin: 0;
    padding: 15px;
    text-align: center;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    border-bottom: 1px solid #e2dacd;
}

.game-menu ul 
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.game-menu li 
{
    height: 35px;
    border-bottom: 1px solid #e2dacd;
}

.game-menu li:last-child {
    border-bottom: none;
}

.game-menu a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 15px;
    color: #000000;
    font-size: 16px;
    background-color: #fffaec;
    height: 100%;
    transition: all 0.3s ease;
    opacity: .93;
    font-weight: 200;
}

.game-menu a:hover {
    background-color: #b30000;
    color: #fff;
    padding-left: 20px;
    box-shadow: inset 5px 0 0 #800000;
}

.controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: -40px;
    left: -2px;
    width: 101%;
    
}

.controls button {
    width: 100px;
    background: linear-gradient(to bottom, var(--primary-color), #da0404);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 0px 0px 5px 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.controls button:hover 
{
    box-shadow: 0 0 40px 0 rgba(var(--primary-color-rgb), 1);
}    


/****************categories-horizontal*****************/


.game-list-container-horizontal {
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    padding: 5px;
    padding-inline: 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.game-menu-horizontal ul {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
}

.game-menu-horizontal {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.game-menu-horizontal li {
    white-space: nowrap;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.game-menu-horizontal li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 4px 8px; 
  box-sizing: border-box;
  text-decoration: none;
    color: white;

}




.left-menu {
    display: flex;
    gap: 12px;
}
.left-menu ul {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.left-menu li {
    white-space: nowrap;
}


.btn-clr-0
{
    background-color: #eee;
    border: 1px solid #BBB;
}

.btn-clr-0 a {
    color: #333 !important;
}

.btn-clr-1  { background-color: #3049f4; }  /* Blue */
.btn-clr-2  { background-color: #f60; }     /* Orange */
.btn-clr-3  { background-color: #ffb400; }  /* Yellow */
.btn-clr-4  { background-color: #fe0060; }  /* Magenta */
.btn-clr-5  { background-color: #692aed; }  /* Purple */
.btn-clr-6  { background-color: #07c78f; }  /* Teal */
.btn-clr-7  { background-color: #3f4dab; }  /* Blue (repeat) */
.btn-clr-8  { background-color: rgb(182, 76, 6); }     /* Orange (repeat) */
.btn-clr-9  { background-color: #cba240; }  /* Yellow (repeat) */

.btn-clr-10 { background-color: #e91e63; }  /* Pink */
.btn-clr-11 { background-color: #00bcd4; }  /* Cyan */
.btn-clr-12 { background-color: #009688; }  /* Dark teal */
.btn-clr-13 { background-color: #4caf50; }  /* Green */
.btn-clr-14 { background-color: #8bc34a; }  /* Light green */
.btn-clr-15 { background-color: #a7b519; }  /* Lime */
.btn-clr-16 { background-color: #ff5722; }  /* Deep orange */
.btn-clr-17 { background-color: #795548; }  /* Brown */

.game-menu-horizontal a {
    color: #444;
    font-weight: 400;
}

#moreBtn {
    font-size: 20px;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 5px;

    background-color: #eee;
    border: 1px solid #BBB;
}
#moreBtn, .game-menu-horizontal li
{
    height: 32px;
}

#moreBtn:hover, .game-menu-horizontal li:hover, .random-icon a:hover
{
    filter: brightness(1.1);
}

#moreWrapper {
    list-style: none;
    white-space: nowrap;
    padding-right: 0;
}

#categoryList {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex: 1;
    padding-right: 0;
}

.mobile
{
    display: none!important;
}

.random-a-container
{
    height: 70px;
    width: 70px;
}

.recommended-a-container
{
    height: 100px;
    width: 100px;
}

.app-related-a-container
{
    width: 60px;
    height: 60px;
}

.recommended-a-container:hover, .app-related-a-container:hover
{
    filter: brightness(1.1);
}

.recommended-a-container, .random-a-container, .app-related-a-container
{
    overflow: hidden;
    border-radius: 15px;
}

.random-games-container img
{
     transition: transform 0.3s ease;
}
.random-games-container img:hover
{
   transform: scale(1.1);
   
}


@media(max-width: 1400px)
{
    .game-menu-horizontal ul 
    {
        justify-content: flex-end;
        padding-right: 6px;
    }
}

/* Modal style with animation */
.category-modal {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    transition: width 0.3s ease;
    z-index: 1000;
}

.category-modal.show {
    width: 100%; 
}

.category-modal .modal-content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    background: white;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
}

.category-modal.show .modal-content {
    transform: translateX(0);
}

#modalCategories
{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .5rem;
    padding: 0;
    flex-shrink: 0;
}

#closeModalBtn
{
    height: 16px;
    width: 16px;
    background: transparent;
    color: #000;
    border: none;
    font-weight: 600;
    position: absolute;
    right: 20px;
    top: 8px;
    font-size: 1.25em;
    cursor: pointer;
}

.side-navigation
{
    flex-shrink: 0;
}

/*********/
.grid-container
{
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr 350px;
    padding-inline: 14px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    gap: 48px;
}


.grid-container2
{
    max-width: 1400px;
    min-height: calc(100vh - 260px);
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 350px;
    margin: 0 auto;
    gap: 48px;
    padding: 20px;
}

.grid-contaoner-app-page
{
    grid-template-columns: 1fr;
}
    .image-pagination-container
    {
        display: flex;
        flex-direction: column;
        
    }

    .first-page-image
    {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin: 10px auto;
        width: auto;
       
    }
        .first-page-photo-background
        {
            position: relative;
            width: 100%;
            min-height: var(--category-menu-height);
            height: auto;
            overflow: hidden;
            border-radius: 5px;
        }
        .first-page-photo-background img 
        {
            width: 100%; 
            height: 100%; 
            display: block;
            object-fit: cover;
        }
        .first-page-photo-background-dimm
        {
            position: absolute; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.5); 
            z-index: 1; 
        }
        .first-page-description
        {
            position: absolute; 
            top: 50%; 
            left: 0; 
            width: 100%; 
            height: 100%;
            transform: translateY(-50%); 
            color: white;
            text-align: left; 
            z-index: 2; 
            padding: 20px;
            box-sizing: border-box; 
        }
        .first-page-description h1
        {
            color: #ffffff;
            font-family: "Play", serif;
            font-weight: 400;
            font-style: normal;
        }
       
        .blog-posts 
        {
            text-align: center;
            width: 100%;

        }
            .blog-posts h2 
            {
                color: #333;
            }

            .posts-grid {
                display: grid;
                /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
                gap: 8px;
                max-width: 100%;
                width: 100%;
                margin: 0 auto;
                
            }

            .post 
            {
                background-color: #eee;
                border-radius: 5px;
                text-align: center;
                /* padding: 8px; */
                /* margin-top: 42px; */
            }
            .posts-image-text
            {
                display:grid;
                grid-template-columns: 1fr 2fr;
                gap: 15px;
                overflow: hidden; 
                position: relative;
                border: 1px solid #e2dacd;
                border-radius: 5px;
                min-height: 185px;
            }
                .posts-image-text img
                {
               
                    border-radius: 5px 0 0 5px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center; 
                }
                .posts-text
                {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 15px 15px 15px 0;
                }
            

            .post h3 
            {
                font-size: 1.1em;
                color: #382d17; 
                text-align: left;
                /* margin-block: 0; */
                margin: 0 0 10px 0;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 3;
                text-overflow: ellipsis;
             }

            .post p 
            {
                color: #706e6c;
                text-align: left;
                margin-block: 0;
                font-size: 14px;
            }


            .read-more 
            {
                display: inline-block;
                background: linear-gradient(to bottom,var(--primary-color),#da0404);
                padding: 10px 15px;
                border-radius: 5px;
                text-decoration: none;
                text-align: center;
                transition: background-color 0.3s;
                margin-top: 16px;
                color: #ffff;
            }
            .grid-container .read-more, .games-blog-container .read-more
            {
                color: var(--button-color);
                text-align: right;
                text-decoration: underline;
                background: none;
                padding: 0;
                max-width: 80px;
                align-self: flex-end;
            }

            .read-more:hover
            {
                box-shadow: 0 0 10px 0 rgba(var(--primary-color-rgb), 1);
            }

            .grid-container .read-more:hover, .games-blog-container .read-more:hover
            {
                font-weight: 600;
                box-shadow: none;
                padding: 0;
            }



    .image-container 
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); /*220px*/
        /* grid-template-rows: repeat(4, minmax(200px, 1fr)); */
        width: 100%;
        /* padding-inline: 24px; */
        margin: 0 auto;
        margin-top: 12px;
        gap: 4px;
        border-radius: 5px;
    }
    .games-blog-container
    {
       padding: 20px 0 0 0;
       /* padding-bottom: 0px; */
       /*width: 90%;*/
       display: flex;
       flex-direction: column;
    }
    .random-games-container
    {
        margin-top: 32px;
    }

    .random-games-container h3{
        font-family: "Play", serif;
        font-weight: 400;
        font-style: normal;
    }
     
        .img-container 
        {
            margin: 0 auto;
            /* border: 2px solid transparent;  */
            transition: border 0.3s ease, box-shadow 0.3s ease;
        }
        
        .image-item 
        {
            position: relative;
            overflow: hidden;
            text-align: center;
            cursor: pointer;
            border-radius: 25px;
            border: 5px solid rgba(0, 0, 0, 0); 
            aspect-ratio: 1 / 1;
            align-items: center;
            justify-content: center;
            transition: border 0.3s ease; 
        }
        
        .image-item:hover 
        {
            filter: brightness(1.1);
        }
        
        .image-item:hover img 
        {
            transform-origin: center center;
            transform: scale(1.1); 
            transition: transform 0.3s ease;
        }
        
        .image-item img 
        {
            width: 100%;
            height: auto;
            border-radius: 30px;
            scale: 1;
            transition: transform 0.3s ease;
        }
        
        /* .image-item .image-txt 
        {
            position: absolute;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: -122%; 
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 16px;
            transition: bottom 0.3s ease;
        }
        
        .image-item:hover .image-txt 
        {
            bottom: 0; 
        } */
        
        .image-txt button 
        {
            text-transform: uppercase;
            border-radius: 5px;
            font-size: 0.8em;
            border: none;
            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
            color: var(--light-font-color);
            font-weight: 700;
            padding: 10px 10px 10px;
            transition: all 0.6s ease;
            cursor: pointer;

        }
        
        .image-txt button:hover 
        {
            color: #fff;
            box-shadow: 0 0 40px 0 rgba(var(--primary-color-rgb), 1);
        }
        
        .random-games-grid
        {
            display: grid;
            gap: 16px;
        }

        .name-under
        {
            position: absolute;
        }

        .image-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .image-item.empty {
            visibility: hidden;
        }

        .image-item-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .image-item {
            display: block;
            width: 100%;
            text-decoration: none;
        }

        .img-container img {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }

        .image-txt button {
            margin-top: 4px;
        }

        .app-name {
            width: 90%;
            margin-top: 4px;
            font-size: 0.875em;
            color: #333;
            font-weight: 600;
            text-align: center;

            display: -webkit-box;
            -webkit-line-clamp: 2; 
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 2.6em;      
            word-break: break-word; 
            hyphens: auto;              
        }



    .random-icon
    {
        display: flex;
        gap: 32px;
    }    
        .random-icon img
        {
            max-width: 70px;
            border-radius: 5px;
        }
        .random-game-name
        {
            display: flex;
            align-items: center;
        }           

    .pagination 
    {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        justify-content: center;
        padding: 4px;
        gap: 4px;
        margin: 32px auto 22px auto;
    }

        .pagination li 
        {
            margin: 4px 5px;
        }

        .pagination a 
        {
            background-color: #b30000;
            display: inline-block;
            width: 35px; 
            height: 35px; 
            font-size: 0.9em;
            line-height: 35px; 
            text-align: center; 
            text-decoration: none;
            color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination a.active 
        {
            background-color: black;
            color: white;
            border-color: #af4f4c;
        }

        .pagination a:hover 
        {
            background-color: #800000;
            border-color: #ddd;
        }

.footer 
{
    display: flex;
    flex-direction: column;
    background-color: var(--header-footer-color); 
    color: var(--light-font-color);
    text-align: center; 
    padding: 8px 0px; 
    font-size: 0.8em;
}
    .footer-top
    {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1000px;
        gap: 8px;
        margin: 24px auto;
        
    }

        .footer-top img
        {
            max-width: 100%; 
            width: auto; 
            max-height: 160px;

        }
        .footer a 
        {
            color: #706e6c; 
            text-decoration: none; 
            
        }

        .footer a:hover 
        {
            text-decoration: underline; 
        }
        .footer-top .footer-menu
        {
            display: flex;
            flex-direction: column;
            text-transform: uppercase;
            /* justify-content: space-between; */
            text-align: left;
            gap: 12px;
        }
        .footer-top-mid
        {
            text-align: left;
            padding-inline: 24px;
            line-height: 1.6;
            
        }
            .footer-top-mid-text
            {
                max-width: 280px;
                margin: 0 auto;
            }
        .best-container 
        {
            max-width: 400px;
            text-align: center;
        }
        
        .best-title 
        {
            margin-top: 0;
            margin-bottom: 20px;
            text-transform: uppercase;
        }
        
        .best-grid 
        {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        
        .best-icon 
        {
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s;
        }
        
        .best-icon img 
        {
            max-width: 50px;
            max-height: 50px;
            border-radius: 10%;
        }
        
        .best-icon:hover 
        {
            transform: scale(1.1);
        }
        .footer-links
        {
            display: flex;
            gap: 32px;
            justify-content: space-between;
        }
    .footer-bot
    {   
        display: flex;
        flex-direction: column;
        box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);
        padding: 8px;
        text-align: center;
        color: #706e6c;
    }

    .footer-bot p{
        margin: 5px 0 5px 0;    
    }

        .terms-cond
        {
            max-width: 330px;
            width: 100%;
            display: flex;
            margin: 0 auto;
            justify-content: space-between;

        }

/***********************************************************************************/

.main-container, .different-blog-container .blog-container
{
    display: flex;
    flex-direction: column;
    margin: 16px auto 0 auto;
    background-color: white;
    border-radius:5px;
    padding: 0px 0px 16px 0px;
    
}
.image-pagination-container .main-container .blog-container
{
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 16px auto 0 auto;
    background-color: white;
    border-radius: 16px;
    padding: 0px;
    box-shadow: none;
}

    .app-details-top
    {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
        padding: 8px;
        padding-inline: 0px;
        margin-bottom: 12px;
        
    }

        .app-icon img
        {
            max-width: 160px;
            max-height: 160px;
            border-radius: 16px;
            margin-bottom: 8px;
            box-shadow: 2px 8px 8px rgba(0, 0, 0, 0.5);
        }

        .app-det-top-item-up
        {
            font-size: 0.7em;
            font-weight: 800;
        }

        .app-details-bot
        {
            display: flex;
            justify-content: left;
            gap: 30px;
            border-bottom: 1px dashed;
            border-bottom: 1px solid #e2dacd;
            padding-bottom: 20px;
        }

        .app-details-bot h1
        {
            margin-top: 0;
        }

.app-description
{
    
    height: 90%;
}
    .app-description h2
    {
        margin-bottom: 0;
    }
    pre
    {
        font-family: "Roboto Flex", sans-serif;
        display: block;
        width: 100%;
        margin: 0;
        white-space: break-spaces;
        
    }
    pre span
    {
        display: flex;
        margin-block: 24px;
    }
    pre img
    {
        max-width: 100%;
        border-radius: 8px;
        margin: 0 auto;
    }

.app-instruction
{
    margin-bottom: 32px;
}
.app-description-author   
{
    display: flex;
    gap: 16px;
    margin-block: 32px;
    border: 1px solid #A8A093;
    color: #333;
    border-radius: 8px;
    padding: 16px;
}
    .app-description-author img
    {
        max-width: 98px;
        border-radius: 8px;
    }
    .app-description-author h4
    {
        margin-top: 0;
        font-size: 18px;
        margin-bottom: 16px;
    }
    .app-description-author p
    {
        margin: 0;
    }
.app-instruction ol
{
    padding-left: 17px;
    
}
.app-download
{
    text-align: center;

}
    .download a
    {
        display: inline-block;
        color: var(--background-lighter-color);
        background-color: var(--button-color);
        width: 200px;
        font-size: 1.5em;
        margin-block: 16px;
        margin-inline: 8px;
    }
.app-related
{
    /* text-align: center; */
    padding: 0 20px;
    margin-top: 16px;
}

.app-related h2{
    text-align: center;
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
    text-align: justify;
}
    .app-related-list
    {
        max-width: 1400px;
        margin: 32px auto;
        display: grid;
        gap: 15px;
        /* padding: 0 20px; */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /* justify-items: center; */
    }
    .app-related-list img
    {
        max-width: 60px;
        border-radius: 16px;

    }

    .app-related-list-item
    {
        display: flex;
        justify-content: left;
        gap: 16px;
        align-items: center;
    }
    .recommended-list .app-related-list-item strong
    {
        text-align: center;
    }
    
    .app-related-list-item-icon
    {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .app-related-list-item-icon:hover
    {
        transform: scale(1.1); 
    }

    .app-related-list-item-name
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }

    .app-related-list a
    {
        color: var(--dark-font-color);
    }


.recommended-list    
{
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.recommended-list img 
{
    max-width: 100px;
}

.blog-list-item
{
    flex-direction: column;
}

.app-details-top-text
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/***************************************************************************************************************************************************************************************************/
.blog-top
{
    border-bottom: 1px solid #e2dacd;
    padding-bottom: 20px;
}
    .blog-top-date
    {
        display: flex;
        justify-content: left;
        gap: 16px;
        font-weight: 200;
    }
    .blog-top-date-item 
    {
        font-size: 1em;
    }

.blog-list-container
{
    
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* padding: 20px; */
    border-radius: 8px;
    margin-top: 25px;
}
    .blog-list-container h2
    {
        margin-top: 8px;
    }
    .blog-list-container-item
    {
        display: flex;
        background-color: var(--background-lighter-color);
        border-radius: 8px;
        /* gap: 32px; */
    }
        .blog-list-container-item .posts-text
        {
            padding-block: 0;
        }
            .posts-text p
            {
                display: -webkit-box;
                -webkit-line-clamp: 3; 
                -webkit-box-orient: vertical;
                overflow: hidden; 
                text-overflow: ellipsis; 
                width: 90%; 
                margin-top: 0;
            }
    .blog-list-container-item .blog-top
    {
        border-bottom: none;
        padding: 15px;
    }
    .blog-list-container-item img
    {
        max-width: 40%;
        border-radius: 8px 0 0 8px;
        object-fit: cover;
        object-position: center;
    }
    .blog-list-container-item .red-btn
    {
        width: 100%;
        margin: 5px auto;
        min-width: 150px;
    }
    .blog-list-container-item .posts-image-text
    {
        overflow: visible;
    }
/******************************************************************/
.faq-all-container
{
    max-width: 1400px;
    min-height: calc(100vh - 497px);
    margin: 0px auto;
    /* padding: 32px 0px 20px 20px; */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: white;
    overflow: auto;
    padding: 20px;
}
    .search-container 
    {
        width: 100%;
        display: flex;
        gap: 10px;
        margin: 0 auto;
        margin-bottom: 64px;

    }

        .search-input 
        {
            flex: 1;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid var(--description-author-background-color);
            font-size: 1em;
            transition: border 0.3s, box-shadow 0.3s;
        }
        .search-input:focus, .category-dropdown:focus 
        {
            border: 1px solid var(--primary-color);
            outline: none;
            box-shadow: 0 0 5px var(--primary-color);
        }

        .category-dropdown 
        {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid var(--secondary-color);
            font-size: 1em;
            background-color: var(--background-lighter-color);
            color: var(--secondary-color);
        }

        .search-button 
        {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }

.faq-container 
{
    width: 100%;
    margin: 0 auto;
    /* padding-right: min(32px, 3%); */
    
}

    .faq-item 
    {
        margin-bottom: 20px;
    } 

    .faq-question 
    {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        background-color: var(--secondary-color);
        border: 1px solid var(--secondary-color);
        color: var(--light-font-color);
        padding: 15px;
        font-size: 1em;
        cursor: pointer;
        border-radius: 5px 5px 0px 0px;
        outline: none;
        gap: .5rem;
    }

    .faq-question:hover
    {
        filter: brightness(1.1);
    }

    .faq-icon 
    {
        font-size: 18px;
        transition: transform 0.3s;
    }

    .faq-answer 
    {
        display: block;
        padding: 10px;
        background-color: var(--secondary-color);
        color: var(--light-font-color);
        border-radius: 0px 0px 5px 5px; 
        max-height: 0; 
        overflow: hidden; 
        opacity: 0; 
        transition: max-height 0.3s ease, opacity 0.3s ease; 
    }
        .faq-answer.show 
        {
            max-height: 100px; 
            opacity: 1; 
        }
        .faq-answer p
        {
            line-height: 1.5;
        }
.faq-random-container
{
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 20px;
}
/*****BLOG*********/
/* .blog-container
{
    padding: 20px;
    padding-top: 0px;
} */

.blog-container h1,
.blog-container h2,
.blog-container h3{
    
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
}

.blog-container h1{
    margin-bottom: 20px;
    font-weight: 600;
}
/******************************************************************/
.contact-all-container
{
    
    min-height: 768px;
}
.contact-container 
{
    display: flex;
    gap: 4px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding-block: 20px;
    /* padding-inline: min(20px, 8%); */
    /* background-color: var(--header-footer-color); */
    background-color: white;
    border-radius: 10px;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);*/
    justify-content: space-between;
    flex-direction: column;
}
.contact-form
{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    padding: min(20px, 8%);
    border-radius: 5px;
    margin-top: 64px;
}

.contact-info 
{
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-card 
{
    text-align: center;
    background-color: var(--background-color);
    padding: 20px;
    border-radius: 10px;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);*/

    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 350px;
    background: url('../images/contact_bg.png') no-repeat center center;
    background-size: cover;
    position: relative;
}

    .icon-c {
        position: absolute;
        width: 50px;
        height: 50px;
        animation: float 10s infinite;
    }

    @keyframes float {
        0% {
            transform: translateY(0) translateX(0);
        }
        25% {
            transform: translateY(-50px) translateX(30px);
        }
        50% {
            transform: translateY(0) translateX(60px);
        }
        75% {
            transform: translateY(50px) translateX(30px);
        }
        100% {
            transform: translateY(0) translateX(0);
        }
    }

    /* Unique animation for each icon */
    .icon-c:nth-child(1) {
        top: 15%;
        left: 5%;
        animation-duration: 8s;
    }

    .icon-c:nth-child(2) {
        top: 20%;
        left: 45%;
        animation-duration: 12s;
    }

    .icon-c:nth-child(3) {
        top: 15%;
        left: 65%;
        animation-duration: 10s;
    }

    .icon-c:nth-child(4) {
        top: 20%;
        left: 25%;
        animation-duration: 14s;
    }

    .icon-c:nth-child(5) {
        top: 15%;
        left: 75%;
        animation-duration: 9s;
    }

.icon-wrapper 
{
    font-size: 50px;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.contact-form-items
{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
                        
        .contact-form h2 
        {
            margin-bottom: 10px;
            text-transform: uppercase;
            color: var(--primary-color);
        }

        .contact-form p 
        {
            margin: 0px 5px;
            /* color: var(--dark-font-color); */
            color: var(--dark-font-color-2);
        }
        .contact-form h3 
        {
            margin: 5px 0px 30px 5px;
            color: var(--dark-font-color-2);
        }
        .contact-form .red-btn
        {
            margin: 16px auto 0px auto;
            width: 30%;
            min-width: 200px;
            color: var(--background-lighter-color);
            padding: 16px 24px;
            border-radius: 5px;
            text-align: center;
            background: linear-gradient(to bottom, var(--primary-color), #da0404);
            border: none;
        }
        .contact-form .red-btn:hover
        {
            box-shadow: 0 0 10px 0 rgba(var(--primary-color-rgb), 1);
            cursor: pointer;
        }

    .form-row
    {
        
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
        .form-row-item
        {
            color: var(--light-font-color);
            display: flex;
            justify-content: center;
            justify-items: center;
            position: relative;
            width: 100%;
        }

        input, textarea 
        {
            padding: 10px;
            border: 1px solid #907c4b;
            border-radius: 5px;
            background-color: #e2dacd;
            color: #6b665b;
            outline: none;
            width: 100%; 
            box-sizing: border-box; 
            transition: border 150ms cubic-bezier(0.4,0,0.2,1);
        }

        input::placeholder,
        textarea::placeholder {
            color: #6b665b;
            font-size: 16px;
            font-family: "Roboto Flex", sans-serif;
        }
        .form-label
        {
            position: absolute;
            left: 15px;
            top: -12px;
            pointer-events: none;
            transform: translateY(0.5rem);
            transition: border 150ms cubic-bezier(0.4,0,0.2,1);
            opacity: 0;
        }
    
        input:focus, 
        textarea:focus
        {
            border: 1px solid var(--primary-color);
            outline: none;
            box-shadow: 0px 0px 10px 0px var(--primary-color);
        }
        
        input:valid,
        textarea:valid
        {
            border: 1px solid #08d418;
            outline: none;
            box-shadow: 0px 0px 10px 0px #08d418;
        }

       
        input:focus ~ label,
        textarea:focus ~ label
        {
            transform: translateY(-50%) scale(0.8);
            background-color: var(--primary-color);
            color: #fff;
            padding: 5px 10px;
            border-radius: 8px 8px 0 0;
            /* box-shadow: 0px 0px 20px 0px var(--primary-color); */
            transition: opacity 0.2s ease-in-out;
            opacity: 1;
        }

        input:valid ~ label,
        textarea:valid ~ label
        {
            transform: translateY(-50%) scale(0.8);
            background-color: #08d418;
            color: #000;
            padding: 5px 10px;
            border-radius: 8px 8px 0 0;
            /* box-shadow: 0px 0px 20px 0px #08d418; */
        }
.email-img
{
    width: 100%;
    max-width: 300px;
}                                                            
/*****************************************************************/

/* @media (max-width: 1350px) and (min-width: 769px) 
{
    .first-page-description h2
    {
        display: none;
    }
} */


@media (max-width: 1000px)
{
    .blog-list-container-item
    {
        flex-direction: column;
    }
    .blog-list-container-item img
    {
        max-width: 100%;
        border-radius: 8px;
        border-radius: 8px 8px 0 0;
    }
    .app-details-bot
    {
        flex-direction: column;
    }
    .first-page-photo-background {
        /* min-height: 652px; */
        min-height: calc(var(--category-menu-height) - 153px);
        max-height: calc(var(--category-menu-height) - 153px);
    }
    .first-page-description{
        display: none;
    }

        .grid-container, .grid-container2, .faq-random-container 
    {
        grid-template-columns: 1fr;
       
        width: 100%;
    }
    
    .blog-related
    {
        display: none;
    }

        .random-games-grid
    {
        grid-template-columns: 1fr 1fr;
    }
}


@media (min-width: 768px) and (max-width: 900px)
{


    .footer-top
    {
        max-width: 700px;
        
    }

    .best-container 
    {
        display: none;
    }



}

@media (max-width: 768px) 
{

    .header
    {
        flex-wrap: wrap
    }
    .grid-container, .grid-container2, .faq-random-container 
    {
        grid-template-columns: 1fr;
       
        width: 100%;
    }
    .banner-container
    {
        margin-top: 48px;
    }
    .banner
    {
        flex-direction: column;
        gap: 1rem;
    }
        .banner button
        {
            width: 100%;
        }

    .main-menu2
    {
        width: 100%;
    }
    .main-menu2 ul 
    {
        flex-wrap: wrap;
        gap: 15px;
    }
    .main-menu2 a 
    {
        padding:4px 8px ;
    }
    .footer-top
    {
        flex-direction: column;
    }
        .footer-top img 
        {
            width: 40%;
            max-height: 40%;
            margin: 0 auto;
        }
        .best-icon img
        {
            width: 100%;
            max-width: fit-content;
            max-height: 100%;
            margin: 0 auto;
        }
        .footer-top-mid-text 
        {
            max-width: max-content;
        }
        .best-title 
        {
            text-align: center;
            margin-block: 16px;
        }
        .best-container 
        {
            display: none;
        }
        .best-grid
        {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            max-width: 100%;
            gap: 32px;
            padding: 24px;
        }
        .footer-top .footer-menu 
        {
            text-align: center;
            gap: 12px;
        }
        .footer-links
        {
            justify-content: space-around;
        }


    .hide-in-mobiles{
        display: none;
    }

    #categoryModal #moreBtn, #categoryModal .game-menu-horizontal li 
    {
        height: 56px;
    }

}

@media(max-width:564px)
{
    .mobile
    {
        display: flex!important;
        flex-direction: column!important;
        justify-content: center!important;
        padding: 0!important;
    }

    .not-mobile
    {
        display: none!important;
    }
    .left-menu
    {
        width: 60%;
    }
    .game-list-container-horizontal
    {
        gap: 10px;
    }
}


@media (max-width:550px)
{
    .search-container 
    {
        flex-direction: column;
    }

    .random-games-grid
    {
        grid-template-columns: 1fr;
    }

}


@media  (max-width: 468px)
{
    .app-details-top
    {
        flex-direction: column;
        
    }
    .pagination
    {
        max-width: 380px;
    }

    .category-modal .modal-content 
    {
        width: 100%;
    }
}
@media (max-width: 448px) 
{
    .first-page-description h2
    {
        display: none;
    }
        .faq-random-container, .grid-container2,.grid-container
    {
        display: block;
    }
}

@media(max-width:375px)
{
    .app-details-top 
    {
        grid-template-columns: 1fr 1fr;
       
    }
    .app-icon
    {
        margin: 0 auto;
    }
    .app-name
    {
        text-align: center!important;
    }
}
@media  (max-width: 354px)
{
    .post
    {
        width: 100%;
    }
    .posts-text
    {
        padding: 15px 15px 15px 15px;
    }
    .posts-image-text 
    {
        grid-template-columns: 1fr;
    }
        .posts-image-text img 
        {
            display: none;
            width: 100%;
        }

    .app-description-author
    {
        flex-direction: column;
    }
}

@media (max-width: 277px) 
{
    .left-menu 
    {
        width: 10%;
    }
}



  .app-details-text h1{
    margin-bottom: 20px;
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25em;
    text-align: justify;
  }

  .app-details-text h1 span{
    font-weight: 600;
  }

  .app-description h2, .app-description h3{
    font-family: "Play", serif;
    font-weight: 400;
    font-style: normal;
    font-weight: 600;
  }