body {
    /* Hero Video Background */
    .video-bg {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .bg-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .video-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1;
    }
    /* Keep template text above video */
    .video-bg .hero-content,
    .video-bg .container,
    .video-bg h1,
    .video-bg p {
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .game-item img {
        transition: transform 0.5s ease; /* Smooth animation */
    }

        .game-item img:hover {
            transform: scale(1.05) translateY(-5px); /* Slight zoom + lift */
            cursor: pointer; /* Optional: changes cursor to pointer */
        }

    .game-item {
        overflow: hidden;
        border-radius: 10px;
    }

        .game-item img:hover {
            transform: scale(1.05) translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
        }

    .logo {
        width: 200px;
        height: auto;
    }

    .intro-section {
        padding: 60px 0;
    }

    .intro-card {
        position: relative;
        background: rgba(0, 0, 0, 0.99);
        padding: 30px;
        border-radius: 45px;
        height: 350px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.35s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }
    /* Front & Back */
    .card-front,
    .card-back {
        position: absolute;
        inset: 30px;
        transition: all 0.35s ease;
    }
    /* Default visible */
    .card-front {
        opacity: 1;
        transform: translateY(0);
    }
    /* Hidden initially */
    .card-back {
        opacity: 0;
        transform: translateY(20px);
    }
    /* Hover Effect */
    .intro-card:hover {
        background: rgba(0, 180, 255, 0.15);
        box-shadow: 0 25px 50px rgba(0, 150, 255, 0.35);
    }
        /* Swap content */
        .intro-card:hover .card-front {
            opacity: 0;
            transform: translateY(-20px);
        }

        .intro-card:hover .card-back {
            opacity: 1;
            transform: translateY(0);
        }
    /* Text Styling */
    .intro-card h3 {
        margin-bottom: 10px;
    }

    .read-more {
        color: #00b4ff;
        font-weight: 600;
        text-decoration: none;
    }
    /*----------------------------------------------------------------*/
    /* Title */
    .gallery-title {
        font-size: 40px;
        font-weight: 800;
    }

    .gallery-desc {
        max-width: 800px;
        margin: 15px auto;
        font-size: 16px;
        color: #555;
    }
    /* Filter Buttons */
    .filter-buttons .filter-btn {
        border: none;
        padding: 12px 22px;
        margin: 6px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        font-weight: 600;
        cursor: pointer;
    }

        .filter-buttons .filter-btn.active {
            background: #0d6efd;
            color: #fff;
        }
    /* App Card */
    .app-card {
        background: #fff;
        border-radius: 24px;
        padding: 30px;
        position: relative;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        height: 100%;
        transition: transform 0.3s ease;
    }

        .app-card:hover {
            transform: translateY(-8px);
        }
    /* App Icon */
    .app-icon {
        width: 120px; /* bigger size */
        height: 120px;
        display: block;
        margin: 0 auto 25px; /* center horizontally */
        object-fit: cover; /* fill image fully */
        border-radius: 24px; /* smooth rounded corners */
    }
    /* Price Badge */
    .price-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        background: #0d6efd;
        color: #fff;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 700;
    }
    /* Sale Tag */
    .sale-tag {
        display: inline-block;
        background: #fff3e0;
        color: #ff9800;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        margin: 15px 0;
    }
    /* Play Button */
    .play-btn {
        display: block;
        margin-top: 20px;
        background: #0d6efd;
        color: #fff;
        padding: 14px;
        border-radius: 14px;
        text-align: center;
        font-weight: 600;
        text-decoration: none;
    }

        .play-btn:hover {
            background: #084298;
            color: #fff;
        }
    /* Filter Buttons */
    .filter-buttons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .filter-btn {
        background: #ffffff;
        border: none;
        padding: 12px 24px;
        border-radius: 14px;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }
        /* Hover Effect */
        .filter-btn:hover {
            background: #0d6efd; /* blue on hover */
            color: #ffffff;
            transform: translateY(-2px);
        }
        /* Active (Clicked) Button */
        .filter-btn.active {
            background: #0d6efd;
            color: #ffffff;
            box-shadow: 0 12px 30px rgba(13,110,253,0.4);
        }
    /*      --------------------------------------------------------------------------------------------------------------*/

    .blog-page {
        background: #f9fafc;
        padding: 80px 0;
    }
    /* Blog Card */
    .blog-card {
        background: #ffffff;
        padding: 35px;
        border-radius: 20px;
        margin-bottom: 30px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    }

        .blog-card h2 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 10px;
        }

    .blog-meta {
        font-size: 14px;
        color: #0d6efd;
        margin-bottom: 15px;
    }

    .blog-card p {
        color: #555;
        line-height: 1.8;
    }
    /* Read More */
    .read-more {
        display: inline-block;
        margin-top: 15px;
        font-weight: 600;
        color: #0d6efd;
        text-decoration: none;
    }

        .read-more:hover {
            text-decoration: underline;
        }
    /* Sidebar */
    .sidebar-box {
        background: #ffffff;
        padding: 30px;
        border-radius: 20px;
        margin-bottom: 30px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    }

        .sidebar-box h4 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
            position: relative;
        }

            .sidebar-box h4::after {
                content: "";
                width: 40px;
                height: 3px;
                background: #0d6efd;
                display: block;
                margin-top: 8px;
            }
    /* Search */
    .search-box {
        display: flex;
        gap: 10px;
    }

        .search-box input {
            flex: 1;
            border: none;
            padding: 12px 15px;
            border-radius: 10px;
            background: #f3f5f9;
            outline: none;
        }

        .search-box button {
            border: none;
            background: #0d6efd;
            color: #fff;
            padding: 12px 16px;
            border-radius: 10px;
            cursor: pointer;
        }
    /* Recent Posts */
    .recent-posts {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .recent-posts li {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
        }

            .recent-posts li:last-child {
                border-bottom: none;
            }

        .recent-posts a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
        }

            .recent-posts a:hover {
                color: #0d6efd;
            }
}