@charset "UTF-8";
/*---------------------------------------------------------
[Master Stylesheet]
Theme Name: GamePlay – Games & App Store Html Template
Version: 1.0.0
Author: LeeuCode
----------------------------------------------------------*/

/*----------------------------------------------------------
[Table of contents]
01. Global Styles
02. Helper Classes
03. Header
04. Home Banner
05. Carousel Slider
06. App Hover Affect
07. App Item
08. Breadcrumb
09. Single App Content
10. Widget
11. single Description
12. Categories List
13. Rating
14. User Rating
15. Reviews List
16. Categories
17. Pagination
18. Social Icon
19. Menu Footer
15. Footer
-------------------------------------------------------------*/

/*=============================
	[01. Global Styles]
===============================*/
* {
    font-family: 'Cairo', sans-serif;
}

a {
    text-decoration: none;
}

body {
    background-color: #f2f5f9;
}

.global-title {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    text-shadow: 0px 0px 1px #6f6f6f;
}

.global-small-title {
    font-size: 1.5rem;
}

.global-title a {
    text-decoration: none;
    align-items: center;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.global-title a i {
    margin-top: -1px;
}

/*=============================
	[02. Helper Classes]
===============================*/
.btn-send {
    padding: 0.3rem 2rem;
    border-radius: 2px;
}

/*=============================
	[03. Header]
===============================*/
.navbar-game {
    background-color: #fff;
    border-bottom: 1px solid #ededed;
    box-shadow: 2px 0px 9px 0px #6f6f6f;
    padding: 1rem 0;
}

/*.logo {
    height: 32px;
}*/

.search-input-group input {
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

.search-input-group input:focus {
    box-shadow: none;
    border-color: #eee;
    border-right: 0;
}

.search-input-group .btn {
    background-color: #fff;
    border-left: 0;
    padding: 0 1rem;
    color: #6f6f6f;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.search-input-group input,
.search-input-group .btn {
    border-color: #eee;
}

.main-menu li a {
    font-size: 1rem;
    color: #6f6f6f;
}

.main-menu li i {
    margin-right: 2px;
}

.bg-primary .main-menu li a,
.bg-success .main-menu li a {
    color: #f2f5f9;
}
nav .row {
    display: flex;
    justify-content: center;
    align-items: center;
}
nav .main-menu {
    display: flex;
    justify-content: end;
    align-items: center;
}

/*=============================
	[04. Home Banner]
===============================*/
.home-banner {
    width: 100%;
    position: relative;
}

.home-banner .thumb {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding-bottom: 30%;
    opacity: 0.5;
    z-index: -1;
}

.banner-container {
    background: #2c5ed3f1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.banner-content h1 {
    font-size: 2.2rem;
    font-weight: 800;
    text-shadow: 0px 0px 10px #6f6f6f;
}

.banner-content h2 {
    font-size: 1.4rem;
    font-weight: 800;
    text-shadow: 0px 0px 10px #6f6f6f;
}

.banner-content .search-input-group {
    box-shadow: 0px 0px 10px 0px #6f6f6f;
    border-radius: 50px;
}


.home-categories {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.home-categories li {
    padding: 1rem;
}

.home-categories .category-thumb {
    border: 3px solid #ededed;
    border-radius: 50px;
    padding: 3px;
    width: 90px;
    height: 90px;
    display: block;
    overflow: hidden;
}

.home-categories img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: all 0.2s ease;
    opacity: 0.9;
}

.home-categories li a {
    text-decoration: none;
    width: 100%;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #eee;
}

.home-categories li a:hover img {
    opacity: 1;
    transform: scale(1.1);
}

/*=============================
	[05. Carousel Slider]
===============================*/
.carousel-slider-3-items .app-item-hover {
    margin: 0 3px;
    position: relative;
}

.carousel-slider-3-items .slick-arrow {
    background-color: #fff;
    color: #6f6f6f;
    border-radius: 50px;
    border: 1px solid #eee;
    position: absolute;
    top: 50%;
    font-family: 'IcoFont';
    font-size: 1.5rem;
    text-align: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    box-shadow: 0px 0px 10px 0px #6f6f6f;
    z-index: 1;
}

.carousel-slider-3-items .slick-prev {
    left: -20px;
}

.slick-prev:before {
    content: "\ea9d";
}

.carousel-slider-3-items .slick-next {
    right: -20px;
}

.slick-next::before {
    content: "\eaa0";
}

.carousel-slider-2-items,
.carousel-slider-4-items {
    position: relative;
}

.carousel-slider-2-items img,
.carousel-slider-4-items img {
    border-radius: 10px;
    width: 100%;
    max-height: 296px;
    margin: 0 0.3rem;
}

.carousel-slider-2-items .slick-arrow,
.carousel-slider-4-items .slick-arrow {
    background-color: #fff;
    color: #6f6f6f;
    border-radius: 50px;
    border: 1px solid #eee;
    position: absolute;
    top: 50%;
    font-family: 'IcoFont';
    font-size: 1.1rem;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    box-shadow: 0px 0px 10px 0px #6f6f6f;
    z-index: 1;
}

.carousel-slider-2-items .slick-prev,
.carousel-slider-4-items .slick-prev {
    left: -10px;
}

.carousel-slider-2-items .slick-next,
.carousel-slider-4-items .slick-next {
    right: -10px;
}

/*=============================
	[06. App Hover Affect]
===============================*/
.app-item-hover {
    border-radius: 7px;
}

.app-item-hover:hover {
    background-color: #fff;
}

.app-item-hover-2:hover {
    background-color: #fbfbfb;
}


/*=============================
	[07. App Item]
===============================*/
.app-cover {
    background-size: cover;
    background-position: center;
    border-radius: 7px;
    width: 100%;
    padding-bottom: 55%;
}

.app-group-info {
    display: flex;
    align-items: flex-start;
}

.app-item-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    /* object-fit: cover; */
}

.app-item-info {
    width: 100%;
    padding: 0 10px;
}

.app-item-title {
    font-size: 1rem;
    font-weight: 700;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
}

.app-item-title a {
    text-decoration: none;
    color: #333;
}

.app-item-category {
    text-decoration: none;
    color: #6f6f6f;
    font-size: 14px;
}

.app-item-rating {
    color: #6f6f6f;
    font-size: small;
    margin: 0;
}

.app-item-style-2 img {
    background-color: #000000;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #eee;
    /* width: 90%; */
    width: 122px;
    height: 122px;
    object-fit: cover;
}

.app-item-style-2 .app-item-title {
    font-size: 0.9rem;
    text-align: start;
}

/*=============================
	[08. Breadcrumb]
===============================*/
.breadcrumb {
    background-color: #fff;
}

.breadcrumb-item+.breadcrumb-item::before {
    font-family: "IcoFont";
    content: "\ea5d";
    color: #333;
}

.breadcrumb .breadcrumb-item {
    font-size: 14px;
}

.breadcrumb a {
    text-decoration: none;
    color: #6f6f6f;
}

/*=============================
	[09. Single App Content]
===============================*/
.single-icon,
.single-icon img {
    border-radius: 10px;
}

.single-title {
    font-size: 1.8rem;
}

.single-info {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.single-info li {
    border-right: 1px solid #ededed;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

.single-info li:last-child {
    border-right: 0;
}

.single-info li span:first-child {
    font-size: 0.9rem;
    color: #6f6f6f;
}

.btn-single-app {
    border-radius: 2px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.rating-container {
    align-items: center;
}

/*=============================
	[10. Widget]
===============================*/
.widget {
    background-color: #fff;
}

.widget-title {
    font-size: 1.1rem;
    background-color: #fbfbfb;
    border-bottom: 1px solid #eee;
    margin: 0;
    margin-bottom: 5px;
}

.widget-content .app-item {
    padding: 1rem;
    border-bottom: 1px solid #ededed;
}

/*=============================
	[11. single Description]
===============================*/
.description-content {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    position: relative;
}

.description-readmore {
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.507));
    display: block;
    width: 100%;
    padding: 1rem;
    color: #2c5ed3;
    position: absolute;
    left: 0;
    bottom: 0;
}

.description-readmore strong {
    cursor: pointer;
}

.read-less {
    max-height: 100%;
    overflow: unset;
}

.read-less .description-readmore {
    position: relative;
}


/*=============================
	[12. Categories List]
===============================*/
.categories-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.categories-list li {
    margin-bottom: 0.6rem;
}

.categories-list a {
    display: block;
    text-decoration: none;
    color: #6f6f6f;
    border: 1px solid #eee;
    border-radius: 50px;
    font-size: 0.9rem;
    text-shadow: 0px 0px 0px #6f6f6f;
    box-shadow: 2px 0px 9px 0px #eee;
    padding: 0.3rem 1rem;
}

.categories-list a:hover {
    background-color: #f2f5f9;
}

/*=============================
	[13. Rating]
===============================*/
.rating {
    text-align: center;
    text-shadow: 0px 0px 0px #6f6f6f;
    font-size: 2.7rem;
    flex: 1;
}

.rating span {
    font-size: 0.8rem;
    color: #6f6f6f;
}

.rating-prograss-group {
    flex: 2;
}

.rating-progress {
    align-items: center;
}

.rating-progress i {
    color: #6f6f6f;
}

/*=============================
	[14. User Rating]
===============================*/
.user-rate {
    transform: rotate(180deg);
}

.user-rate input {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    appearance: none;
}

.user-rate input::before,
.user-rate input::after {
    content: '\f000';
    font-family: 'IcoFont';
    transform: rotate(180deg);
    font-size: 1.3rem;
}

.user-rate input::before {
    color: #6f6f6f;
}

.user-rate input::after {
    color: gold;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all 0.2s;
}

.user-rate input:hover~input:after,
.user-rate input:checked~input:after,
.user-rate input:hover:after,
.user-rate input:checked:after {
    opacity: 1;
}

.star-gold {
    color: gold;
}

/*=============================
	[15. Reviews List]
===============================*/
.reviews-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.review-header {
    display: flex;
    border-top: 1px solid #eee;
}

.reviews-list .avater {
    width: 60px;
}

.user-name {
    font-size: 0.875rem;
    text-shadow: 0px 0px 1px #6f6f6f;
}

.user-rating {
    font-size: 0.875rem;
    color: #6f6f6f;
}

.created-at {
    font-size: 0.75rem;
    color: #6f6f6f;
}

.review-content {
    font-size: 0.9rem;
}

/*=============================
	[16. Categories]
===============================*/
.categories {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.categories li {
    width: 50%;
}

.categories li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    width: 100%;
    color: #6f6f6f;
    padding: 0.5rem;
    font-size: 0.85rem;
}

.categories li a:hover {
    background-color: #fbfbfb;
    color: #2c5ed3;
}

.categories img {
    width: 40px;
    border-radius: 50px;
}

/*=============================
	[17. Pagination]
===============================*/
.lc-pagination {
    flex-wrap: wrap;
}

.lc-pagination .page-item {
    margin: 0.5rem;
}

.lc-pagination .page-item .page-link {
    background-color: #fff;
    box-shadow: 0px 3px 9px #eee;
    color: #6f6f6f;
    padding: 0.5rem 1rem;
    /* border: 0; */
    border-radius: 2px;
}

.lc-pagination .page-item .page-link:hover {
    background-color: #eee;
}

.lc-pagination .page-item:first-child .page-link,
.lc-pagination .page-item:last-child .page-link {
    border-radius: 2px;
}

.footer {
    background-color: #fff;
}

/*=============================
    [18. Social Icon]
===============================*/
.social-icons {
    list-style: none;
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    margin-top: 1rem;
}

.social-icons a {
    margin-right: 0.4rem;
    width: 32px;
    height: 32px;
    display: flex;
    color: #333;
    border-radius: 3px;
    align-items: center;
    justify-content: center
}

.social-icons a:hover {
    background-color: #eee;
    color: #0877cc;
}

/*=============================
    [19. Menu Footer]
===============================*/
.menu-footer {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-footer li {
    margin-bottom: 0.7rem;
}

.menu-footer li a {
    color: #6f6f6f;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* .navbar-brand {
        display: flex;
        margin-bottom: 10px;
        justify-content: center;
    } */
/* 
    .main-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        padding: 0.6rem 0;
    }
 
    .main-menu li a {
        font-size: small;
    }

    .bg-primary .main-menu li a,
    .bg-success .main-menu li a {
        color: #6f6f6f;
    }
*/  
    /* .img-fluid {
        width: 100%;
        height: auto;
    } */
    
    .col-12 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-menu li a {
        font-size: small;
    }
    .carousel-slider-3-items .slick-prev {
        left: 0;
    }

    .carousel-slider-3-items .slick-next {
        right: 0;
    }

    .banner-content {
        width: 100% !important;
    }

    .banner-content h1 {
        font-size: 1.8rem;
    }

    .banner-content h2 {
        font-size: 1.1rem;
    }

    .home-categories li {
        padding: 0.5rem 0.2rem;
    }

    .home-categories .category-thumb {
        width: 64px;
        height: 64px;
    }

    .home-categories span {
        font-size: 0.9rem;
    }

    .single-icon {
        display: flex;
        justify-content: center;
    }

    .single-icon img {
        width: 60% !important;
    }

    .single-title {
        margin-top: 0.5rem;
        font-size: 1.5rem;
        text-align: center;
    }

    .single-info {
        flex-wrap: wrap;
    }

    .single-info li {
        width: 50%;
        text-align: center;
        padding: 0.25rem 0;
    }

    .single-info li:nth-child(2) {
        border: 0;
    }

    .btn-single-app {
        padding: 0.25rem 0.5rem;
    }
}
.banner-ad-max-width-600-ad {
    display: block;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    .banner-ad-max-width-600 {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .banner-ad-max-width-600 {
        max-width: 970px;
        margin: 0 auto;
    }
}
.mobile-ad-only {
    display: none;
}
@media screen and (max-width: 600px) {
    .mobile-ad-only {
        display: block;
        width: 100%;
        margin: 0 auto;
    }
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
    /* .main-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        padding: 0.6rem 0;
    }

    .bg-primary .main-menu li a,
    .bg-success .main-menu li a {
        color: #6f6f6f;
    } */
    
    nav .main-menu {
        justify-content: center;
    }

    .banner-content {
        width: 100% !important;
    }

    .banner-content h1 {
        font-size: 2rem;
    }

    .widget-content {
        display: flex;
        flex-wrap: wrap;
    }

    .widget-content .app-item {
        width: 50%;
    }

    .categories li {
        width: 33%;
    }
}
/* 
Medium devices (tablets, 768px and up) 
@media (min-width: 768px) and (max-width: 1199.98px) {} */

/* Ensure the ad container is responsive */
#div-gpt-ad-1744967416739-0 {
    width: 100%; /* Full width on all screen sizes */
    max-width: 970px; /* Limit to the maximum ad width */
    margin: 0 auto; /* Center the ad */
  }
  
  /* Mobile-specific styles */
  @media (max-width: 600px) {
    #div-gpt-ad-1744967416739-0 {
      max-width: 320px; /* Make the ad smaller on mobile */
    }
  }
  
  @media (min-width: 601px) and (max-width: 1024px) {
    #div-gpt-ad-1744967416739-0 {
      max-width: 728px; /* Set a medium size for tablets */
    }
  }


  /* V CSSSS  */
  .w-30{
    width: 30%;

  }

  .w-100-cust{
    width: 100% !important; 
  }



  @media (max-width:768px) {

    .w-30{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

      .w-100-cust{
        width: 40% !important;

    }


  }