/**
 * Theme Name:     Astra Child
 * Author:         Ahsan Ali khan
 * Template:       astra
 * Text Domain:	   astra-child
 * Description:    The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
 */


body.single-game {
      background: url(https://gaming.bitzstudio.com/wp-content/uploads/2025/02/Frame-1261155811.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
}


.single-game .ast-container{
display: block;
padding: 0;
}


/* ------------------ CSS Start for Section One ------------------------ */


.single-game .ast-single-entry-banner[data-post-type="game"][data-banner-background-type="featured"] {
    padding: 175px 0;
    margin-top: -135px;
}


.single-game .ast-single-entry-banner[data-post-type="game"][data-banner-background-type="featured"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
}

.single-game .ast-container .entry-title{
    position: relative;
    font-size: 72px;
    font-weight: 800;
    line-height: 82px;
    color: white;
    font-family: 'Orbitron', sans-serif;
}




/* Main Section */
.single-game .main-content {
    display: flex;
    padding: 50px;
    justify-content: center;
    gap: 100px;
}

.single-game .main-content .img-info-holder .image-holder{
    margin-top: -130px;
    position: relative;
}

/* Game Image */
.single-game .game-image {
    width: 100%;
    max-width: 390px;
    max-height: 560px;
    height: 100%;

}


.single-game .main-content .img-info-holder .info-holder{
    display: flex;
    justify-content: space-between;
}

    /* Game Details */
.single-game .game-details {
    max-width: 50%;
    width: 100%;
}

.single-game .game-details p{
    font-weight: 400;
    line-height: 32px;
    font-size: 24px;
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 20px;
}

/* Game Info */
.single-game .game-info {
    display: flex;
    flex-direction: column;
}

.single-game .info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.single-game .info-item img {
    width: 100%;
    max-width: 40px;
    max-height: 40px;
    height: 100%;
    margin-top: 30px;
}

.single-game .info-text {
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    color: white;
    font-family: 'Orbitron', sans-serif;
white-space: pre-line;
margin: 0;
}


.single-game .info-text span{
    font-size: 16px;
}


/* Social Icons */
.single-game .social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.single-game .social-icons img {
       width: 100%;
    height: 100%;
    max-width: 50px;
    max-height: 50px;
    cursor: pointer;
    transition: 0.3s;

}

.single-game .social-icons img:hover {
    transform: scale(1.1);
}


/* Responsive Design */
@media (max-width: 1024px) { /* Tablets */
    .single-game .main-content {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .single-game .game-details {
        max-width: 100%;
    }

    .single-game .info-text {
    font-size: 18px;
    line-height: 26px;
}
.single-game .info-text span {
    font-size: 14px;
}

.single-game .game-details p {
    line-height: 28px;
    font-size: 18px;
}


}

@media (max-width: 768px) { /* Mobile Devices */
    .single-game .main-content {
        gap: 40px;
    }    

    .single-game .info-holder {
        flex-direction: column;
        align-items: center;
    }

    .single-game .info-item {
        flex-direction: column;
        text-align: center;
    }

    .single-game .ast-container .entry-title {
        font-size: 6vw;
    }

    .single-game .game-details p {
        font-size: 16px;
    }
}


/* ------------------ CSS End for Section One ------------------------ */



/* ------------------ CSS Start for Section Two ------------------------ */

       .single-game .section-two_game-single-page.ast-container{
            max-width: 100%;
            padding: 0;
            width: 100%;
       }


        /* Video Section */
       .single-game .video-section {
            position: relative;
            width: 100%;
            max-width: 100%;
            height: 485px !important;
            background: #000;
            overflow: hidden;
            cursor: pointer;
        }

       .single-game .video-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Play Button */
       .single-game .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 135px;
            height: 135px;
            background: url('https://gaming.bitzstudio.com/wp-content/uploads/2025/02/Group-1261154121.svg');
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s ease;
        }

       .single-game .play-button:hover {
            transform: translate(-50%, -50%) scale(1.1);
        }

      /* .single-game .play-button::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 20px solid white;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
        }
*/
        /* Popup Modal */
       .single-game .video-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

       .single-game .video-popup video {
            width: 80%;
            max-width: 900px;
            border-radius: 10px;
        }

        /* Close Button */
       .single-game .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 30px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }

       .single-game .close-btn:hover {
            color: red;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
           .single-game .video-section {
                height: 300px;
            }

           .single-game .play-button {
                width: 60px;
                height: 60px;
            }

           .single-game .play-button::after {
                border-left: 15px solid white;
                border-top: 9px solid transparent;
                border-bottom: 9px solid transparent;
            }

           .single-game .video-popup video {
                width: 90%;
            }
        }

/* ------------------ CSS End for Section Two ------------------------ */





/* ------------------ CSS Start for Section Three ------------------------ */

     .single-game .section-three_game_single_page {
            display: flex;
            max-width: 1200px;
            padding: 40px 20px;
            margin: 0;
            gap: 50px;
}

        .single-game .left-section {
            flex: 2;
        }

       .single-game .right-section {
            flex: 1;
        }

        .single-game .left-section p {
             font-size: 24px;
             font-weight: 400;
             line-height: 32px;
             font-family: 'Orbitron', sans-serif;
             color: white;
             margin: 20px 0;
        }

        .single-game .left-section .featured-image-holder{
            width: 100%;
            max-height: 570px;
            height: 100%;
            object-fit: cover;
        }

       .single-game .right-section h2 {
             font-size: 32px;
             font-weight: 800;
             line-height: 52px;
             color: white;
             font-family: 'Orbitron', sans-serif;
             margin-bottom: 20px;
        }

        .single-game .right-section img {
                width: 100%;
                margin-bottom: 20px;
                height: 200px;
                object-fit: cover;
        }

        @media (max-width: 1024px) {
           .single-game .section-three_game_single_page {
                flex-direction: column;
                padding: 20px;
            }

            .single-game .left-section, .right-section {
                width: 100%;
                padding-right: 0;
            }

            .single-game .left-section p {
               font-size: 18px;
               line-height: 28px;
            }
        }

        @media (max-width: 768px) {
            .single-game .section-three_game_single_page {
                padding: 20px;
                gap: 20px;
            }

            .single-game .left-section p {
               font-size: 16px;
            }

            .single-game .right-section h2 {
              font-size: 32px;
              text-align: center;
            }
        }

        @media (max-width: 480px) {
        

            .single-game .right-section h2 {
                font-size: 18px;
            }
        }


/* ------------------ CSS End for Section Three ------------------------ */





/* ------------------ CSS Start for Section Four ------------------------ */

.single-game .section-four_game-single-page.ast-container{
        max-width: 1240px !important;
        width: 100% !important;
        padding: 0 20px 100px !important;
}

.single-game  .para-section p{
        font-size: 24px;
        font-weight: 400;
        line-height: 32px;
        color: white;
        font-family: 'Orbitron', sans-serif;
        margin: 0;
}

  @media (max-width: 1024px) {

   .single-game .section-four_game-single-page.ast-container{
        padding: 20px 20px 50px !important;
}

        .single-game .para-section p {
         font-size: 18px;
         line-height: 28px;
      
}

}


  @media (max-width: 768px) {

    .single-game .section-four_game-single-page.ast-container{
        padding: 20px !important;
}

        .single-game .para-section p {
         font-size: 16px;
      
}
  }


/* ------------------ CSS End for Section Four ------------------------ */




/* ------------------ CSS Start for Section Five ------------------------ */

      .section-five_game_single_page{
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
      }


      .single-game .gallery-holder .gallery {
           display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 0;
            width: 100%;
            height: 100%;
        }

        .single-game .gallery-holder .gallery img {
              width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        @media (max-width: 768px) {
           .single-game .gallery-holder .gallery {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }
        }

        /* ------------------ CSS End for Section Five ------------------------ */






        /* ------------------ CSS Start for Section Six ------------------------ */



.single-game .section-six_game_single_page{
    background: url(https://gaming.bitzstudio.com/wp-content/uploads/2025/02/Games-detail.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    padding: 400px 20px;
}

.single-game .section-six_game_single_page .text-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.single-game .section-six_game_single_page .text-holder .heading-wrapper{
    padding-bottom: 20px;
}

.single-game .section-six_game_single_page .text-holder .heading-wrapper h1{

    font-size: 62px;
    font-weight: 800;
    line-height: 72px;
    color: white;
    font-family: 'Orbitron', sans-serif;

}

.single-game .section-six_game_single_page .text-holder .para-wrapper {
    width: 980px;
}

.single-game .section-six_game_single_page .text-holder .para-wrapper p{
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: white;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}

.single-game .section-six_game_single_page .text-holder .button-wrapper{
    background-color: white;
    padding: 8px 20px;
    border-radius: 12px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 4px 0 #3F7188; /* Box shadow with the requested color */
}

.single-game .section-six_game_single_page .text-holder .button-wrapper a{
    color: #03B0DE;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 32px;
}



@media (max-width: 2560px) and (min-width: 1500px) {
	.single-game .section-six_game_single_page {
    padding: 550px 20px;
}
}


  @media (max-width: 1024px){

    .single-game .section-six_game_single_page .text-holder .heading-wrapper h1 {
    font-size: 50px;
    line-height: 55px;
   
}

.single-game .section-six_game_single_page .text-holder .para-wrapper p {
    font-size: 18px;
    line-height: 28px;
}
.single-game .section-six_game_single_page .text-holder .para-wrapper {
    width: 100%;
}

  }


  @media (max-width: 768px){

.single-game .section-six_game_single_page {

    padding: 200px 20px;
}

    .single-game .section-six_game_single_page .text-holder .heading-wrapper h1 {
        font-size: 40px;
        line-height: 50px;
    }

        .single-game .section-six_game_single_page .text-holder .para-wrapper p {
        font-size: 16px;
        line-height: 25px;
    }

    .single-game .section-six_game_single_page .text-holder .button-wrapper a {
    font-size: 16px;
    line-height: 28px;
}
  }


  @media (max-width: 600px){

    .single-game .section-six_game_single_page {
        padding: 150px 20px;
    }

   .single-game .section-six_game_single_page .text-holder .heading-wrapper h1 {
        font-size: 30px;
        line-height: 40px;
    }

        .single-game .section-six_game_single_page .text-holder .para-wrapper p {
        font-size: 14px;
        line-height: 22px;
    }
  }

@media (max-width: 480px){

.single-game .section-six_game_single_page {
        padding: 100px 20px;
    }

.section-six_game_single_page .text-holder .heading-wrapper {
    padding-bottom: 0 !important;
}

    .single-game .section-six_game_single_page .text-holder .heading-wrapper h1 {
        font-size: 25px;
        line-height: 32px;
        text-align: center;
    }


    .single-game .section-six_game_single_page .text-holder .button-wrapper a {
        font-size: 14px;
        line-height: 24px;
    }

}

@media (max-width: 375px){
    .single-game .section-six_game_single_page {
        padding: 50px 20px;
    }

    .single-game .section-six_game_single_page .text-holder .heading-wrapper h1 {
        font-size: 22px;
        line-height: 30px;
    }
}


        /* ------------------ CSS End for Section Six ------------------------ */