@media (max-width: 900px) {
    .left-nav,
    .right-nav {
        display: none; /* Hide desktop navs */
    }

    .mobile-nav {
        display: flex; /* Show mobile menu structure */
    }

    header {
        justify-content: space-between;
        padding: 10px 20px;
    }

    .logo {
        position: static;
        transform: none;
        order: 2;
        flex-grow: 1;
        text-align: center;
        height: auto;
    }

    .logo img {
        height: 45px;
    }

    .menu-icon {
        display: flex;
        order: 3;
        
    }
}

@media (max-width: 500px) {
    header {
        padding: 10px 15px;
    }

    .logo img {
        height: 40px;
    }

    .mobile-nav {
        width: 200px;
        left: -230px; /* ⬅️ Adjusted to match width if needed */
    }
}
        /* ////////////////////// Responsive CSS for POF End ////////////////////// */
        /* ////////////////////// Hero CSS for POF Start ////////////////////// */
        @media (max-width: 768px) {
            .hero-bg {
                padding-top: 20px;
                flex-direction: column;
                text-align: center;
            }

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

            .hero-content h2 {
                font-size: 1.5rem;
            }

            .hero-image img {
                max-width: 250px;
            }
        }
        /* ////////////////////// Hero CSS for POF End ////////////////////// */
        /* ////////////////////// How to play CSS for POF Start ////////////////////// */
        @media (max-width: 768px) {
  .how-to-play-container {
    flex-direction: column;
    text-align: center;
  }

  .how-to-play-image img {
    padding-left: 0px;
    width: 100%;
    max-height: 300px;
  }

  .play-steps li {
    font-size: 1.1rem;
    justify-content: start;
  }

  .download-btn {
    display: inline-block;
    width: 80%;
    margin-top: 10px;
  }
}

        /* ////////////////////// How to play CSS for POF End ////////////////////// */