/* --- Tablet & Small Desktop --- */
@media only screen and (max-width: 1200px) {
    .row {
        padding: 0 2%;
    }
}

/* --- Small Laptops / Landscape Tablets --- */
@media only screen and (max-width: 1023px) {
    body {
        font-size: 18px;
    }
    section {
        padding: 60px 0;
    }
    .header-navigation {
        padding-bottom: 10px;
    }
    .header-navigation-box {
        padding-top: 10px;
    }
    .long-copy {
        margin-left: 10%;
        width: 80%;
    }
    .works-step {
        margin-bottom: 40px;
    }
    .works-step:last-of-type {
        margin-bottom: 60px;
    }
    .app-screen {
        width: 50%;
    }
    .icon-small {
        margin-right: 5px;
        width: 17px;
    }
    .plan-box {
        margin-left: 0;
        width: 100%;
    }
    .plan-price {
        font-size: 150%;
    }
    .contact-form {
        width: 80%;
    }
    .plan-price span {
        font-size: 70%;
        font-weight: 300;
    }
    .banner-image,
    .video-container-chat,
    #stream {
        display: none;
    }
    .steps-box,
    .steps-box:last-child,
    .social-links {
        margin-top: 10px;
    }
    .city-future,
    .plan-price-game {
        font-size: 90%;
    }
    #affiliate-link {
        text-align: center;
        position: sticky;
        top: 0;
        padding: 10px;
        font-size: 10px;
        z-index: 1000
    }
}

/* --- Mobile Devices (Portrait/Landscape) --- */
@media only screen and (max-width: 767px) {
    
    /* NEW: Explicitly hide menu-label elements and override flexbox on social menu */
    .menu-label,
    .social-menu.menu-label {
        display: none !important;
    }

    body {
        font-size: 16px;
    }
    section {
        padding: 30px 0;
    }
    .header-navigation {
        padding-bottom: 10px;
    }
    .header-navigation-box {
        padding-top: 10px;
    }
    .row {
        padding: 0 4%;
    }
    
    /* NEW: Force all grid columns to stack vertically and clear floats */
    .col, 
    .span-1-of-3,
    .box {
        margin: 0 0 20px 0; /* Add space between stacked items */
        width: 100% !important; /* Force full width */
        float: none; /* Disable side-by-side alignment */
        display: block;
    }
    
    /* NEW: Ensure images inside boxes resize correctly */
    .box img {
        width: 100%;
        height: auto !important; /* Override inline styles to prevent skewing */
    }

    /* NEW: Center the text inside the stacked boxes for a cleaner look */
    .box .smallfont {
        text-align: center;
        margin-bottom: 15px;
    }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 10px 0;
    }
    .sticky .mobile-nav-icon i {
        color: #555;
    }
    
    h1 {
        font-size: 180%;
        text-align: center; /* NEW: Center main headers */
    }
    h2 {
        font-size: 150%;
        text-align: center; /* NEW: Center sub headers */
    }
    
    .long-copy {
        margin-left: 0;
        width: 100%;
    }
    .app-screen {
        width: 40%;
    }
    .steps-box:first-child {
        text-align: center;
    }
    .works-step div {
        font-size: 120%;
        height: 40px;
        margin-right: 15px;
        padding: 4px;
        width: 40px;
    }
    #social-links {
        display: none;
    }
    footer {
        width: 100%;
    }
    footer p {
        color: #fff;
        text-align: center;
        padding: 5px 0 0 0;
        margin: 0
    }
    .footer-nav {
        float: none;
        list-style: none;
    }
    .social-links {
        float: none;
        list-style: none;
        margin-top: 0;
    }
    .banner-image,
    .video-container-chat,
    #stream,
    .gtranslate_wrapper {
        display: none;
    }
    .sticky .main-nav,
    .sticky .mobile-nav-icon {
        margin-top: 10px;
    }
    .works-step,
    .works-step:last-of-type {
        margin-bottom: 20px;
    }
    #affiliate-link {
        text-align: center;
        position: sticky;
        top: 0;
        padding: 10px;
        font-size: 10px;
        z-index: 1000
    }
}

/* --- Tiny Mobile Devices (iPhone X, SE, etc.) --- */
@media only screen and (max-width: 480px) {
    section {
        padding: 25px 0;
    }
    
    /* NEW: Reduce header sizes further so they don't dominate the screen */
    h1 {
        font-size: 150%; 
        line-height: 1.2;
    }
    h2 {
        font-size: 130%;
        margin-bottom: 15px;
    }

    .header-navigation {
        padding-bottom: 10px;
    }
    .header-navigation-box {
        padding-top: 10px;
    }
    .contact-form {
        width: 100%;
    }
    .mobile-nav-icon {
        display: inline-block;
    }
    .main-nav {
        float: right;
        margin-top: 25px;
        text-align: right;
    }
    .main-nav li {
        display: block;
    }
    .main-nav li a:link,
    .main-nav li a:visited {
        border: 0;
        display: block;
        font-size: 100%;
        padding: 10px 0;
    }
    .games-showcase li {
        display: block;
        float: left;
        width: 50%;
    }
    #social-links {
        display: none;
    }
    footer {
        width: 100%;
    }
    footer p {
        color: #fff;
        text-align: center;
        padding: 5px 0 0 0;
        margin: 0
    }
    .footer-nav {
        float: none;
        list-style: none;
    }
    .social-links {
        float: none;
        list-style: none;
        margin-top: 0;
    }
    header,
    .section-testimonials {
        background-attachment: scroll !important;
    }
    .banner-image,
    .video-container-chat,
    #stream,
    .gtranslate_wrapper {
        display: none;
    }
    #affiliate-link {
        text-align: center;
        position: sticky;
        top: 0;
        padding: 10px;
        font-size: 10px;
        z-index: 1000
    }
}