/* for tablet 992px */
 @media screen and (max-width:1024px) {
     .hero {
         padding: 50px 0;
         background-repeat: no-repeat;
         background-size: 102%;
         height: auto;
     }

     .whyplay {
         margin-top: -17px;
     }
 }

 /* for i pad 768px */
 @media screen and (max-width: 991px) {
     #herohding {
         font-size: 35px;
     }

     .hero {
         /* background-size: 110%; */
         background-position: top center;
         height: auto;
         padding: 0;
     }

     .hero h5 {
         font-size: 15px;

     }



     .hero button {
         padding: 6px 30px;
         margin-top: 7px;
     }

     .hero p {
         font-size: 16px;
     }

     button h4 {
         font-size: 20px;
         font-weight: 100;
     }

     .whyplay {
         margin-top: -15px;
     }

     #skillh3 {
         font-size: 30px;
     }

     .skill {
        padding-top: 35px;
        padding-bottom: 5px;
    }

     .taajgames .col-lg-3 {
         text-align: center;
     }

     #winpara {
         font-size: 15px;
     }


     .third-sec h3 {
         font-size: 30px;
     }


     .faqs h3 {
         font-size: 30px;
     }


     .title {
         font-size: 20px;
     }

     .item {
         font-size: 15px;
     }


     .faq-question {
         font-size: 16px;
     }

     .active .faq-answer {
         font-size: 15px;
     }

     #popularpamnt {
         margin-top: 15px;

     }

     footer h1 {
         font-size: 38px;
     }


     footer .col-md-6 {
         flex: 0 0 auto;
         width: 50%;
         text-align: justify;
     }

     .payment-icon {
         max-width: 50%;
         gap: 10px;
     }


     /* ------ classic ludo 768----- */


     .classic h3 {
         font-size: 30px;
     }

     .classic-content {
         font-size: 15px;
     }



     .about-app h2 {
         margin: 10px 0;
     }

     .about-app p {
         font-size: 13px;
         line-height: 23px;
         margin-bottom: 5px;
     }

     #aboutimg {
         align-content: center;
     }

     .download_btns {
         display: flex;
     }

     .form-box {
         width: 450px;
     }

     #mail-id {
         font-size: 16px;
     }

     .contact p {
         font-size: 15px;
     }

     .icon i {
         font-size: 15px;
         margin-left: 0px;
     }

     .input-detail {
         display: block;
     }

     .input-field {
         width: 100%;
         display: flex;
     }



     section.how_to_download .how_to_download_boxes .box::before {
        width: 27px;
        height: 40px;
        right: -19px;
    }
    section.how_to_download .how_to_download_boxes .steps {
        font-size: 12px;
    }
 }

 /* for mobile 360px */
 @media screen and (max-width:767px) {
     body p {
         padding: 0 10px;
     }

     .navbar-brand img {
         max-width: 25%;
     }

     .hero {
         /* background-size: 210%; */
         text-align: center;
         background-position: top center;
         background-repeat: no-repeat;
         height: auto;
         background-size: 160rem;
     }


     .hero button {
        border:1px solid #fff;
        padding: 5px 45px;
    }
    button h4 {
        font-size: 25px;
        font-weight: 100;
    }
    #herobgimg2 {
        padding: 50px 0 0 0;
    }


     .whyplay {
        padding: 30px;
    }
    .skill {
        margin-right: 20px;
        margin-left: 20px;
    }


    .custom-btn {
        width: 75%;
    }


     #diffludo {
         padding-bottom: 20px;
     }

     #mobilepic {
         padding: 15px 0;
     }

     .que-arrow {
         padding: 0 10px;
     }

     .title {
         font-size: 18px;
     }

     .item a {
         font-size: 13px;
     }

     /* #popularpamnt {
        font-size: 18px;
    } */

     .copyright b {
         margin-bottom: 5px;

     }

     .payment-icon {
         max-width: 70%;
         gap: 10px;
     }

     .how_to_download_boxes .box::before {
        bottom: -45px;
        right: 46%;
        width: 25px;
        transform: rotate(90deg);
    }




    section.how_to_download h2.title img {
        width: 30px;
     }
     
     section.how_to_download h2.title {
        font-size: 16px !important;
        padding: 10px 0;
        margin: 0 0 0;
     }
     
     section.how_to_download {
        padding: 20px 0 0px;
     }
     
     section.how_to_download .how_to_download_boxes .box {
        width: 100%;
        margin: 0 0 50px;
     }
     
     .how-to-play-boxes-main {
        padding: 20px 15px 20px;
        border-radius: 15px;
        margin: 0 0 0;
        background: linear-gradient(180deg, #9929ea 10%, #240b44 40%);
     }
     
     section.how_to_download .how_to_download_boxes {
        padding: 0 0px 0;
     }
     
     section.how_to_download .how_to_download_boxes::before {
        height: 8px;
        border-radius: 0px;
     }
     
        section.how_to_download .how_to_download_boxes .steps {
        margin: 20px 0 0;
        text-align: center;
    }

     
     section.Do_you_know p {
        font-size: 12px;
     }
     
     section.how_to_download .how_to_download_boxes .box::before {
        bottom: -45px;
        right: 46%;
        width: 25px;
        transform: rotate(90deg);
     }
     
     .How_to_download_bottom-contant {
        margin-bottom: 0;
        font-size: 12px;
        font-weight: 500;
        padding-bottom: 10px;
     }

     /* -------------------------------
    ----aboutus resp. css ---------
    ------------------------------- */
     #aboutimg {
         margin-bottom: 25px;
     }

     .download_btns {
         display: flex;
     }



     /* -------------------------------
    ----contact resp. css ---------
    ------------------------------- */
     .form-box {
         width: 100%;
     }

     .icon i {
         font-size: 15px;
         margin-left: 0px;
     }

     .input-detail {
         display: block;
     }

     .input-field {
         width: 100%;
         display: flex;
     }

     .input-field input {
         width: inherit;
     }

     #form-sec2 {
         margin-top: 0px;
     }


     .Privacy h3 {
         font-size: 30px;
     }

     .policy_content strong {
         font-size: 14px;
     }

     .policy_content p {
         font-size: 14px;
     }

     .policy_content ul {
         padding-left: 0px;
     }

     .policy_content ol {
         padding-left: 0px;
         font-size: 14px;

     }




     .refund h3 {
         font-size: 30px;
     }


     .refund p {
         font-size: 14px;
     }

 }