/* Responsive Scaling for smaller screens */


@media (max-width: 1400px) {
    .ph-mission-section {
        padding: 0px 40px;
    }

    .ph-hero {
        padding-left: 40px;
        padding-right: 40px;
    }

}


@media (max-width: 1200px) {


}


@media (max-width: 1024px) {
    .ph-mission-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .ph-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ph-bottom-section {
        grid-template-columns: 1fr 1fr;
    }
    .ph-setup-mockup {
        display: none; /* Hide decorative mockup to save structural space */
    }
}



@media (max-width: 992px) {
    .main-title1{
        font-size: 50px;
        text-align: left;
    }
    .sub-description {
      font-size: 21px;
      text-align: left;
    }

    .features-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    .feature-text p {
        white-space: normal;
    }

    .top-header {
        flex-direction: row;
        text-align: center;
        gap: 40px;
    }

    .mobile-title{
        display: none;
    }

    .left-text-block {
        width: 100%;
    }

    .right-art-block {
        width: 100%;
        max-width: 440px;
        display: flex;
        justify-content: center;
    }

    /* Balanced coordinate adjustments for smaller layout */
    .glowing-base {
        right: calc(50% - 95px);
    }

    .board-element {
        right: calc(50% - 45px);
    }

    .alert-element {
        right: calc(50% - 70px);
    }

    .icon-pad {
        left: 12%;
    }

    .icon-star {
        left: 20%;
    }

    .icon-heart {
        right: 12%;
    }

    .icon-bolt {
        right: 10%;
    }
}


@media (max-width: 991px) {
    .cf-main-grid {
        flex-direction: column;
    }
    .cf-sidebar, .cf-form-container {
        flex: none;
        width: 100%;
    }
}



@media (max-width: 768px) {

    .title_catg-G {
        font-size: 20px ;
    }
    .see_more_games {
        padding: 2px 12px;
    }

    .menu-bar-items {
        display: block !important;
    }

    /* #site-navigation {
        display: none !important;
    } */
    
    #primary-menu .menu-search {
      display: none !important;
    }
    
    #primary-menu .cu_logout , #primary-menu .cu_login {
       margin-top: 6px; 
    }

    .page-wrapper {
        padding: 40px 10px;
    }


    .ph-mission-section  {
        grid-template-columns: none;
    }

    .ph-hero-text {
        font-size: 18px;
        line-height: 20px;
        color: #9ca3af;
        text-align: left;
        width: 60%;
    }

    .ph-main-title {
        font-size: 40px;
        text-align:left;
    }

    .ph-hero {
       padding-top: 10px;
       padding-bottom: 10px;
    }
     
   
    .ph-gaming-body {
        padding: 30px 10px;
    }
    
    .ph-hero {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .ph-main-title {
        font-size: 2.5rem;
    }
    
    .ph-hero-visual {
        height: 200px;
        width: 100%;
    }
    
    .ph-controller-fallback {
        font-size: 5.5rem;
    }
    
    .ph-section-title {
        font-size: 1.4rem;
    }

    .ph-features-grid {
        grid-template-columns: 1fr; /* Completely stacked layout for pure readability */
        gap: 15px;
    }
    
    .ph-card {
        padding: 20px;
    }

    .ph-bottom-section {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .ph-bullets-grid {
        grid-template-columns: 1fr; /* Stack custom list elements vertically */
        gap: 12px;
    }

    .both-wrape-in {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-categories-d {
        justify-content: flex-start;
    }

    .mobile-title {
        display: block;
        font-size: 50px;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #fff;
        text-align: left;
        width: 85%;
    }

    .dm-wrapper {
        padding: 0px 10px;
    }

    .main-title1 {
        display: none;
    }

    .main-wrapper1 .image-ine {
        flex-direction: row;
        align-items: center;
        padding: 0px;
    }


    .main-wrapper1 {
        padding: 40px 10px;
    }

    .top-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .main-title1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        line-height: 1.3;
    }

    .sub-description {
        font-size: 15px;
        width: 50%;
        text-align: left;
    }

    .right-art-block {
        margin-top: 20px;
        width: 100%;
    }

    .cards-flex-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 30px;
    }

    .card-box {
        width: 100%;
        padding: 20px 0px;
    }

    .icon-ring {
        margin: 0 auto 10px;
    }

    .card-inner-text h3 {
        font-size: 18px;
    }

    .card-inner-text p {
        font-size: 0.9rem;
    }

    .card-box .card-inner-text p {
        width: 94%;
    }

    .card-box {
        width: 100%;
        /* Collapse completely into 1 single block column */
        padding: 22px;
        gap: 16px;
    }

    .main-title {
        font-size: 2.8rem;
    }

    .has-inline-mobile-toggle .inside-header{
        padding: 0 10px;
    }

    .footer-widgets-container{
        padding: 30px 10px;
    } 

    .inside-site-info {
        padding-left: 10px;
        padding-right: 10px;
    } 
   

    .hero {
        width: 100%;
        display : block;
        padding: 60px 10px;
        /* padding-left: 10px; */
        /* padding-right:10px ; */
    }
    .hero-left {
        width: 100%;
    }
    .featured-card {
        display: none;
    }

    .trending {
        padding: 15px 10px;
    }
    /* -------------- */

    .games {
        grid-template-columns: repeat(2, 1fr);  
        gap: 15px;
        justify-content: space-between;
        align-items: center;
    }

    .card h4 {
        font-size: 12px;
        padding: 6px;
    }
    .card {
        width: 48%;
    }

    #mobile-menu-control-wrapper {
        background-color: #0d1233
    }

    .icon-menu-bars {
        color: #fff;
    }

    .hero-left h1 {
     font-size: 50px;
    }

    /* ----------- */

    .containers.home-wrapper{
        padding: 20px 10px;
    }
    
    .blog-header {
        padding-left: 0px;
    }

   .categories {
        grid-template-columns: repeat(3, 1fr); /* 🔥 3 COLUMN */
        gap: 10px;
        padding: 20px 30px;
    }

    .cat a {
       /* height: 80px;  mobile me slightly small */
        font-size: 11px;
    }

    .cat i {
        font-size: 16px;
    }
    .cat {
        padding: 15px 30px;
    }


    /* footer accordian  */

    


    .inside-footer-widgets>div:not(:last-child) {
        margin-bottom: 5px;
    }

    .inside-footer-widgets {
        display: block;
    }

    .inside-footer-widgets > div {
        border-bottom: 1px solid #1e293b;
        padding: 10px 0;
    }

    /* TITLE STYLE */
    .widget-title,
    .wp-block-heading {
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }

    .widget-title {
        margin-bottom: 10px;
    }

    /* ARROW */
    .widget-title::after,
    .wp-block-heading::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 12px;
        transition: 0.3s;
    }

    /* ROTATE */
    .active .widget-title::after,
    .active .wp-block-heading::after {
        transform: rotate(180deg);
    }

    /* 🔥 IMPORTANT: ONLY HIDE CONTENT (ul, p, div) */
    .footer-widget-2 ul,
    .footer-widget-3 ul,
    .footer-widget-4 ul,
    .footer-widget-5 ul,
    .footer-widget-5 p {
        display: none;
    }

    /* SHOW WHEN ACTIVE */
    .footer-widget-2.active ul,
    .footer-widget-3.active ul,
    .footer-widget-4.active ul,
    .footer-widget-5.active ul,
    .footer-widget-5.active p {
        display: block;
        margin-top: 10px;
    }

    /* LOGO SECTION ALWAYS OPEN */
    .footer-widget-1 {
        display: block;
    }

    .my-inline-footer {
        flex-direction: column;   /* vertical layout */
        text-align: center;       /* text center */
        gap: 8px;
    }

    .footer-col {
        width: 100%;
        text-align: center;
    }

    .footer-right p {
        margin: 0;
    }
    
    .inside-header {
        padding: 5px 28px;
    }

    /* categories page  */

    .categories_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-categories {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /*  3 columns */
        gap: 10px;
        text-align: center;
    }

    .top-categories div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .top-categories i {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .top-categories span {
        font-size: 12px;
    }

    .top-categories div {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #1e293b;
    }


    /* ----- */


    .main-layout {
        grid-template-columns: 1fr;
    }
    .article-main-img {
        height: 250px;
    }
    .article-inner-img {
        height: 220px;
    }
    .sticky-share {
        position: static;
    }

    /* --blog--- */

    .blog-container {
        grid-template-columns: 1fr;
    }
    .featured-post {
        flex-direction: column;
        align-items: flex-start;
    }
    .featured-img-container {
        width: 100%;
        height: 200px;
    }




    /* 🔥 STOP HORIZONTAL SCROLL */
    html, body {
        overflow-x: hidden;
    }

    * {
        box-sizing: border-box;
    }

    /* ===== WRAPPER FIX ===== */
    .blog-wrapper {
        padding: 20px 10px;
    }

    /* ===== GRID FIX (MAIN ISSUE) ===== */
    .blog-container {
        grid-template-columns: 1fr; /* 🔥 sidebar नीचे चला जाएगा */
    }

    /* ===== FEATURED POST (FIRST - KEEP SAME STYLE BUT STACK) ===== */
    .featured-post {
        flex-direction: column;
        padding: 0px;
    }

    .featured-img-container {
        width: 100%;
        height: 200px;
    }

    .sidebar-card {
        padding: 0px 0px;
    }

    /* ===== LIST POSTS (YOUR REQUIREMENT) ===== */
    .list-post-item {
        flex-direction: column; /* 🔥 IMAGE TOP */
        align-items: flex-start;
        padding: 0px;
    }

    .list-post-img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .list-post-content {
        width: 100%;
    }

    .list-post-content h3 a {
        font-size: 20px;
    }

    .list-post-content p {
        font-size: 16.5px;
    }

    /* ===== BUTTON LEFT SIDE ===== */
    .btn-readmore-sm {
        margin-top: 8px;
        align-self: flex-start;
    }

    /* ===== SIDEBAR FIX ===== */
    .sidebar-column {
        width: 100%;
    }

    .inner-category-description {
        width: 100% !important;
    }

    /* ========== single game page================ */

    .cloudarcade-mobile-play-container {
        display: none;
    }

    .gp-game-cpt-container {
        padding: 30px 10px;
    }

    .player-controls-strip{
        margin-top: 80px !important;
        margin-bottom: 2px !important
    }

    .reactions-strip {
        padding: 0px !important;
        margin-top: 90px !important;
    }

    .reactions-right .action-link-btn {
        flex: unset !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    .reactions-left {
        gap: 2px !important;
    }

    .game-media-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        
    }
    .side-screenshots-stack {
        /* display: none !important; */
        flex-direction: row;
    }

    .game-main-grid {
        display: block !important; /* ya flex bhi use kar sakte ho */
    }

    /* here  */

    /* Main container vertical */
    .game-media-container {
        display: block !important;
    }

    /* 🎮 Player - 16:9 rectangle */
    .main-player-frame {
        position: relative;
        width: 100%;
        /* padding-top: 56.25%; 16:9 */
        height: 0;
        border-radius: 12px;
        overflow: hidden;
    }

    .main-player-frame iframe,
    .main-player-frame img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 🖼️ Screenshots below in 3 columns */
    .side-screenshots-stack {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-top: 12px;
    }

    .side-screenshots-stack a {
        display: block;
    }

    .side-screenshots-stack img {
        width: 100%;
        height: 80px;
        object-fit: cover;
        border-radius: 10px;
    }

    /* 🎮 Action buttons row (Play / Fullscreen) */
    .game-action-row {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;
        gap: 10px;
    }

    .game-action-row button {
        flex: 1;
        padding: 10px;
        border-radius: 8px;
        background: #1a1f3a;
        color: #fff;
        border: none;
    }

    /* 👍 Reaction row */
    .reactions-strip {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .reactions-strip button {
        flex: 1;
        padding: 8px;
        font-size: 13px;
        border-radius: 8px;
        background: #11162c;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .categories_card:hover h4 {
        letter-spacing: normal !important;   /* remove spacing */
        transform: none !important;          
        color: #60a5fa;
    }

    /* ============== mobile menu ============== */

   

    /* When Menu Open */
    #primary-menu.active {
        max-height: 400px; /* adjust if needed */
    }

    /* Menu Items */
    #primary-menu ul {
        padding: 10px 0;
    }

    #primary-menu ul li {
        border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    }

    #primary-menu ul li a {
        display: block;
        padding: 12px 20px;
        color: #fff;
        transition: 0.3s;
    }

    /* Hover Effect */
    #primary-menu ul li a:hover {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
    }

    /* login */

    .login-card {
        padding: 35px 20px;
    }
    .xoo-aff-group.onehalf {
        width: 100%;
        float: none;
        margin-bottom: 10px;
    }

    .social-login {
        grid-template-columns: 1fr;
    }
    .features-bar {
        grid-template-columns: 1fr;
    }
    .bg-elements {
        display: none; /* Clean interface on small mobile views */
    }

    .sub-description {
        width: 100%;
    }

    /* ------------------ */

    /* Accordion style for cards */
    .card-box {
        position: relative;
        cursor: pointer;
        overflow: hidden;
        transition: background 0.3s ease;
    }

    .card-box::after {
        content: "\276F";
        /* right arrow */
        position: absolute;
        right: 15px;
        top: 30px;
        transform: translateY(-50%) rotate(0deg);
        transition: transform 0.3s ease;
        font-size: 1.2rem;
        color: #fff;
    }

    .card-box.active::after {
        transform: translateY(-50%) rotate(90deg);
    }

    .card-box .card-inner-text p , .card-box .card-inner-text ul{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* show two lines */
        -webkit-box-orient: vertical;
    }

    .card-box.active .card-inner-text p , .card-box.active .card-inner-text ul{
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    
}


@media (max-width: 650px) {
    .cf-header h1 { font-size: 2.2rem; }
    .cf-form-container { padding: 25px 20px; }
    .cf7-grid {
        flex-direction: column;
        gap: 20px;
    }
    .cf-footer-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 30px 20px;
    }
    .cf-footer-left {
        flex-direction: column;
        gap: 15px;
    }
    .cf-faq-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 580px) {

    .mobile-title{
        font-size: 40px;
    }

    .card-box {
        padding: 20px 0px;
    }

    .image-ine {
        display: block;
    }

    .top-header {
        display: block;
    }

    .mobile-title {
        font-size: 33px;
    }

    .sub-description{
        width: 50% !important;
    }

    .card-box::after {
        top: 18px;
    }

    .card-inner-text h3 {
        font-size: 16px;
    }


}



@media (max-width: 400px) {

    .card-box{
        padding: 10px 0px;
    }

    .sub-description {
        width: 100%;
    }


}


@media (max-width: 300px) {

    .card-box{
     padding: 10px 0px;
    }

   .social-login {
        grid-template-columns: 1fr;
    }
    .features-bar {
        grid-template-columns: 1fr;
    }
    .bg-elements {
        display: none; /* Clean interface on small mobile views */
    }

    .btn-play-now {
        padding: 7px 13px !important;
        font-size: 14px !important;
    }
    .report-modal-actions{
        flex-direction: column;
    }

    .report-modal-actions {
        justify-content: space-between;

    }

    .report-modal-card {
        padding: 13px 8px;
    }

    .report-modal-close{
       font-size: 14px;
       height: 8px;

    }

    .report-modal-header {
        align-items: flex-start
    }

    .game-header-info h1 {
        font-size: 34px !important;
    }

    .game-stars {
        font-size: 12px !important;
    }

    .menu-toggle {
        padding: 0 8px;
    }

    .main-navigation .menu-bar-item>a {
        padding-left: 8px;
        padding-right: 8px;
    }
}


@media (max-width: 480px) {
    .games {
        grid-template-columns: repeat(2, 1fr); 
    }

    .card {
        width: 47%;
    }

    .hero-left h1 {
        font-size: 40px;
    }

    button.btn.primary {
        width: 100%;
        margin-bottom: 5px;
    }

    button.btn.secondary {
        width: 100%;
    }

    .site-header .header-image {
        width: 160px;
    }

    /* single game page */

    .reactions-right {
        margin-left: 0 !important;
        width: 50% !important;
        justify-content: space-between !important;
    }
}


@media (min-width: 769px) and (max-width: 1220px) {

    .main-navigation .main-nav ul {
        gap: 5px;
    }

    .main-navigation .main-nav ul li a{
        font-size: 16px;
    }

    .inside-footer-widgets {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        gap: 20px;
    }

    /* 🔥 FIRST WIDGET FULL WIDTH + CENTER */
    .footer-widget-1 {
        grid-column: 1 / -1; /* full width */
        text-align: center;
    }

    .footer-widget-1 img {
        margin: 0 auto;
        display: block;
    }

    .footer-widget-1 p {
        text-align: center;
    }

    .footer-widget-1 .ph-social-container {
        justify-content: center;
    }

    /* 🔥 REST 4 IN 4 COLUMNS */
    .footer-widget-2,
    .footer-widget-3,
    .footer-widget-4,
    .footer-widget-5 {
        text-align: left;
    }

    /* ================ */

    .footer-widget-1 {
        grid-column: 1 / -1;   /* full width */
        text-align: center;
        margin: 0 auto;
    }

    /* Logo center */
    .footer-widget-1 img {
        display: block;
        margin: 0 auto;
    }

    /* Text center */
    .footer-widget-1 p {
        text-align: center;
        margin: 10px auto;
        max-width: 500px;
    }

    /* Social icons center */
    .footer-widget-1 .ph-social-container {
        display: flex;
        justify-content: center;
        margin: 10px auto;
    }

    /* -----------game-single page----- */
    .game-main-grid {
        grid-template-columns: 1fr !important;
    }

}