@media(max-width:1400px) {
    .weaponProfile .weaponExpertName {
        position: absolute;
        bottom: 100px;
        left: 8%;
    }
}
@media(max-width:1301px) {
    header .contact {
        display: block;
    }

    header nav .logo {
        margin-left: 30px;
    }
}
@media(max-width:1185px) {
    header ul .consultation a {
        display: block;
    }

    header ul li:nth-child(7) {
        align-content: center;
    }
}

@media(max-width:1200px) {

    header nav .logo {
        margin-left: 10px;
    }
    

    main .hero-section .logo img {
            width: 150px;
    }

    main .hero-section .whiteDiv {
        font-size: 20px;
    }

    .kids .trialDiv h4 {
        font-size: 18px;
        padding: 1px 1px;
    }

    .adult .trialDiv h4 {
        font-size: 18px;
        padding: 1px 1px;
    }
    .weaponprogram .trialDiv h4 {
        font-size: 18px;
        padding: 1px 1px;
    }
    .weaponProfile .weaponExpertName {
        position: absolute;
        bottom: 45px;
        left: 6%;
    }
}

@media(max-width:1110px) {
    .kids .headings {
        padding-right: 0px;
    }
}

@media(max-width:992px) {
    header .title {
        text-align: center;
        padding: 0px 10px;
    }

    header nav .logo {
        width: 60px;
    }

    header nav ul li {
        border: none !important;
    }
    main .hero-section .logo {
        position: absolute;
        margin-top: 13px;
        margin-left: -7px;
        z-index: 2;
    }

  
    main .hero-section .heroContent {
        position: relative;
    }

    header nav ul li .tryBtn {
        color: black;
        background-color: transparent;
    }

    .instructorInfo .container h2 {
        font-size: 20px;
    }

    .review {
        height: 500px;
    }

    header ul .consultation a {
        display: flex;
    }

    main .hero-section .rightImg1 {
        width: 100%;
    }

    main .hero-section .rightImg2 {
        max-height: 450px;
        padding: 10px;
    }

    main .hero-section .heading2 {
        font-size: 16px;
    }

    main .hero-section .trials {
        width: fit-content;
        position: absolute;
        width: 180px;
        right: 1%;
        transform: translateY(-130%);
    }

    main .hero-section .leftImg {
        padding: 0px 10px;
    }

    .kids .five-corner-div h3 {
        font-size: 20px;
    }

    .kids .five-corner-div {
        position: relative;
        margin: auto;
        margin-bottom: 30px;
    }
    .Special-internet-offer .five-corner-div h3 {
        font-size: 20px;
    }

    .Special-internet-offer .five-corner-div {
        position: relative;
        margin: auto;
        margin-bottom: 30px;
    }
    .adult .five-corner-div h3 {
        font-size: 20px;
    }

    .adult .five-corner-div {
        position: relative;
        margin: auto;
        margin-bottom: 30px;
    }
    .weaponprogram .five-corner-div h3 {
        font-size: 20px;
    }

    .weaponprogram .five-corner-div {
        position: relative;
        margin: auto;
        margin-bottom: 30px;
    }
    .weaponProfile .grayDiv {
        padding: 5px 4px;
    }
    .weaponProfile .jaredimgDiv {
        margin-top: -20px;
    }
    .WEAPONS .text-content {
        padding-left: 0px;
        font-weight: 500;
    }

    .WEAPONS .weaponExpertName {
        bottom: 10px;
        left: 25%;
    }
    .weaponProfile .weaponExpertName {
        position: absolute;
        bottom: 0px;
        left: 25%;
    }
    nav .mobiletogglebtn {
        padding: 15px 8px;
    }
    .heading3 {
        opacity:0;
      
    }
}

@media(max-width:768px) {
    .review .carousel-indicators {
        top: 250px;
        height: 100px;
        display: flex;
        align-items: center;
    }
    main .hero-section .logo {
        position: absolute;
        margin-top: 8px;
        margin-left:-7px;
        z-index:2;
    }

    main .hero-section .whiteDiv {
        font-size: 20px;
    }
    .WEAPONS .weaponExpertName {
        position: absolute;
        bottom: 10px;
        left: 10%;
    }
    .WEAPONS .name {
        bottom: -32px;
    }

    .WEAPONS .name1 {
        bottom: -30px;
    }
    .weaponProfile .weaponExpertName {
        position: absolute;
        bottom: 60px;
        left: 25%;
    }
   
}

@media(max-width:768px) {
    main .hero-section .whiteDiv {
        font-size: 16px;
    }
}

@media(max-width:576px) {
    .review {
        height: 600px;
    }

        .review .carousel-indicators {
            top: 300px;
            height: 100px;
            display: flex;
            align-items: center;
        }

    main .hero-section .logo {
        position: absolute;
        margin-top: 7px;
        margin-left: -5px;
        z-index: 2;
    }

        main .hero-section .logo img {
            width: 80px;
        }
    header .instituteName {
        font-size: 22px;
        font-weight: bold;
    }

    header .title div {
        font-size: 14px;
    }

    header ul .consultation a {
        display: flex;
    }

    main .hero-section .whiteDiv {
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
    }

    main .hero-section .trials {
        width: fit-content;
        position: absolute;
        width: 120px;
        right: 1%;
        transform: translateY(-140%);
    }

    main .hero-section .onlineSpecial {
        height: auto;
    }
    .WEAPONS img {
        max-height: 500px;
    }

    .WEAPONS .weaponExpertName {
        position: absolute;
        bottom: 50px;
        left: 20%;
    }
    .offer-section p {
        font-size: 15px;
    }
   
}
@media (max-width: 380px) {
    .offer-section .StartDiv {
        position: absolute;
        max-height: 147px;
        max-width: 147px;
        top: 0px;
       right:10px;
    }
    .offer-section p {
        font-size: 14px !important;
    }
}
    @media (max-width: 355px) {
        nav .mobiletogglebtn {
            padding: 12px 6px;
        }

        nav .mobilebtns a {
            font-size: 14px;
        }

        header .nav-dropdown .btn {
            margin-bottom: 3px;
            font-weight: bold;
            font-size: 14px;
        }

        nav .free-phone {
            font-size: 18px;
        }
    }

@media (max-width: 768px) {
    .img-weapons-display,
    .img-training-session,
    .img-showcase {
        width: 100%;
        height: 200px;
        margin: 10px auto;
        display: block;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .img-display {
        margin-left: 18%;
        width: 80%;
    }

    .text-content {
        text-align: justify !important;
        padding: 20px;
    }
}
   /*Adult read more*/
@media (max-width: 1200px) {
    .custom-section .img-1,
    .custom-section .img-2,
    .custom-section .img-4,
    .custom-section .img-5 {
        width: 100%;
        height: auto;
        margin: 10px 0;
    }

    .custom-section .img-1,
    .custom-section .img-5,
    .custom-section .img-4 {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .custom-section p {
        font-size: 17px;
        margin-top: 2%;
    }

    .custom-section .img-3 {
        width: 60%;
        height: 76%;
        margin-left: -25%;
        margin-top: 10px;
    }

    .custom-section .img-5 {
        width: 100%;
        height: 60%;
    }
    .trainings {
        margin-left: 1vh;
    }

    .training-text-shift {
        margin-left: -7%;
    }
    .training {
        margin-left: 1%;
    }
}

@media (max-width: 768px) {
    .custom-section .img-1,
    .custom-section .img-2,
    .custom-section .img-3,
    .custom-section .img-4,
    .custom-section .img-5 {
        width: 100%;
        height: auto;
        margin: 10px 0;
    }
}




/*Adult page button fix */
@media(max-width:767px) {
    .d-lg-flex .custom-btn {
        margin-left: 2% !important;
    }
}

@media (max-width: 1000px) {
    .adult .kidsSectionLogo,
    .weaponprogram .kidsSectionLogo,
    .kids .kidsSectionLogo {
        width: 13%;
        bottom: -56px;
        margin-right: 1%;
        }
}


@media (max-width: 745px) {
    .adult .kidsSectionLogo,
    .weaponprogram .kidsSectionLogo,
    .kids .kidsSectionLogo {
        width: 14%;
        bottom: -36px;
       
    }
}

@media (max-width: 500px) {
    .adult .kidsSectionLogo,
    .weaponprogram .kidsSectionLogo,
    .kids .kidsSectionLogo {
        width: 19%;
        bottom: -31px;
       
    }
}


@media (max-width: 700px) {
    .ms-custom {
        margin-left: 4% !important;
    }
}
/*introductory HB*/
@media (max-width: 500px) {
    .Chief-Master {
        margin-left: -4%;
    }
}
@media (max-width: 500px) {
    .left {
        margin-left: 2%;
    }
}
@media (max-width: 800px) {
    .margin-left-tab {
        margin-left: -13px !important;
    }
}
@media (max-width: 800px) {
    .kwa-img {
        margin-left: 21%;
    }
}
@media (max-width: 800px) {
    .kao-img {
        margin-left: 1%;
        width:90%;
    }
}
@media (max-width: 800px) {
    .praying {
        margin-left: 1%;
        font-size: 20px;
    }
}

@media (max-width: 800px) {
    .Basic-fighting-concept {
        font-size: 21px !important;
    }
}


@media (max-width: 800px) {
    .sets-container {
        width: 129%; 
        margin: 0 auto;
    }
}
@media (max-width: 400px) {
    .sets-container {
        width: 157%; 
        margin: 0 auto; 
        transform: translateX(-7%);
    }
}

@media (max-width: 768px) {
    .square {
        width: 8px;
        height: 20px;
        margin-left:2%;
    }

    .border-double {
        margin-top: 0 !important;
        height: auto !important;
    }

    .sifu-reminder-section {
        margin-top: -27%;
        height: auto !important;
      
        border-style: double !important; /* Ensure double border */
    }
}




@media (max-width: 767px) {
    /* For mobile screens */
    .left-image, .right-image

{
    max-width: 60px; /* Adjusted size for smaller screens */
}

.col-md-4.offset-md-8 {
    margin-top: 0; /* Remove large margin on mobile */
}

.contant {
    font-size: 14px; /* Slightly smaller text on mobile */
}

}

@media (min-width: 1000px) {
    .inside-issue {
        margin-top: -59%;
    }
}

@media (max-width: 768px) {
    .text-underline-bottom {
        border-bottom: 2px solid #000; 
        padding-bottom: 27px; 
    }
}
@media (max-width: 450px) {
    .text-underline-bottom {
        border-bottom: 2px solid #000;
        padding-bottom: 29px;
    }
}
@media (max-width: 800px) {
    .custom-border-chinese {
        border: 1px solid #333;
        padding: 20px;
        width: 100%;
        height: 20%;
        margin-top: 5%;
    }
}
@media (max-width: 950px) {
    .custom-image-news {
        margin-top: 5%; /* Adjust margin for smaller screens */
        width: 20vh; /* Increase width for smaller screens */
        margin-left: 4%;
    }
}
@media (max-width: 950px) {
    .custom-image-news2 {
        margin-top: 43%;
        width: 100%;
        height: 24%;
        margin-left: 4%;
    }
}
@media (max-width: 800px) {
    .kungfugraduate {
        width: 100%;
        margin-left: 3%;
        margin-top:5%;
    }
}
@media (max-width: 800px) {
    .graduate {
        margin-left: 2%;
    }
}
@media (max-width: 800px) {
    .logo {
        width: 10%;
    }
}
@media (max-width: 800px) {
    .newsletter-main-content {
        min-height: 500px;
        width:97%;
    }
}
@media (max-width: 800px) {
    .border-double-3 {
        border-style: double;
        border-width: 4px;
        border-color: #343a40;
        padding: 1rem;
        width: 100%;
    }
}
@media (max-width: 1000px) {
    .issueoneimg {
        max-width: 172px;
        margin-top: 32%;
    }
}


@media (min-width: 992px) {
    .custom-image-news {
        width: 190%; 
    }
}
@media (min-width: 992px) {
    .custom-image-news {
        width: 190%;
    }
}
@media (max-width: 768px) {
    .patrick-lacour-graduation {
        width: 100%;
        margin-left: -1px;
        margin-right: auto;
        display: block; 
    }
}
@media (max-width: 700px) {
    .news-box {
        width: 100%;
        height: auto; 
        margin-left: 0;
        padding: 0px;
    }
}
/*old-photos*/
@media (max-width: 992px) {
    .older-photos .photo-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
    }

        .older-photos .photo-grid div:hover img {
            transform: none !important;
        }

        
        .older-photos .photo-grid div img {
            top: 0;
            left: 0;
            transform: none !important; 
        }
}


@media (max-width: 768px) {
    .older-photos .photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

        .older-photos .photo-grid div:hover img {
            transform: none !important;
        }

        .older-photos .photo-grid div img {
            top: 0;
            left: 0;
            transform: none; /* Prevent centering on smaller screens */
        }
}

@media (max-width: 576px) {
    .older-photos .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

        .older-photos .photo-grid div:hover img {
            transform: none !important;
        }

        .older-photos .photo-grid div img {
            top: 0;
            left: 0;
            transform: none; /* Prevent centering on smaller screens */
        }
}

@media (max-width: 360px) {
    .older-photos .photo-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .older-photos .photo-grid div:hover img {
            transform: none !important;
        }

        .older-photos .photo-grid div img {
            top: 0;
            left: 0;
            transform: none; /* Prevent centering on smaller screens */
        }
}
/*newer-photos*/

@media (max-width: 768px) {
    .thumbnail {
        width: 100%;
    }

    .photo-title {
        font-size: 12px;
    }

    .col-6, .col-sm-4, .col-md-2 {
        flex: 0 0 33.3333%;
    }


    .newer-photos .photo-grid .square-box:hover img {
        transform: none !important;
    }
}


@media (max-width: 480px) {
    .col-6, .col-sm-4, .col-md-2 {
        flex: 0 0 50%;
    }

    .photo-title {
        font-size: 10px;
    }

    
    .newer-photos .photo-grid .square-box:hover img {
        transform: none !important;
    }
}


@media (min-width: 769px) and (max-width: 875px) {
    .col-6, .col-sm-4, .col-md-2 {
        flex: 0 0 25%; 
    }

    .thumbnail {
        width: 100%;
    }

    .photo-title {
        font-size: 12px;
    }


    .newer-photos .photo-grid .square-box:hover img {
        transform: none !important;
    }
}

/*misc-photos*/

@media (max-width: 992px) {
    .misc-photos .photo-grid {
        grid-template-columns: repeat(5, 1fr); 
    }

        .misc-photos .photo-grid div:hover img {
            transform: scale(4);
            transform: none !important;
        }
}


@media (max-width: 768px) {
    .misc-photos .photo-grid {
        grid-template-columns: repeat(4, 1fr); 
    }

        .misc-photos .photo-grid div:hover img {
            transform: scale(3.5);
            transform: none !important;
        }
}


@media (max-width: 576px) {
    .misc-photos .photo-grid {
        grid-template-columns: repeat(2, 1fr); 
    }

        .misc-photos .photo-grid div:hover img {
            transform: scale(2.5);
            transform: none !important;
        }

}


@media (max-width: 480px) {
    .misc-photos .photo-grid {
        grid-template-columns: 1fr;
        transform: none !important;
    }

        .misc-photos .photo-grid div:hover img {
            transform: scale(2);
            transform: none !important;
        }
}


@media (max-width: 800px) {
    .misc-photos .photo-grid {
        grid-template-columns: repeat(3, 1fr);
        transform: none !important;
    }

        .misc-photos .photo-grid div:hover img {
            transform: scale(3);
            transform: none !important;
        }
}


@media (max-width: 600px) {
    .misc-photos .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        transform: none !important;
    }

        .misc-photos .photo-grid div:hover img {
            transform: scale(2);
            transform: none !important;
        }
}


@media (max-width: 360px) {
    .misc-photos .photo-grid {
        grid-template-columns: 1fr;
        transform: scale(2);
        transform: none !important;
    }
}


@media (max-width:900px) {
    .documents-img {
        margin-left: -1%;
    }
}

@media (max-width: 480px) {
    .documents-img {
        margin-left: -1%;
    }
}

@media (max-width: 800px) {
    .mobile-screen-email {
        display: block !important;
        margin-left: 183% !important;
        color: #000;
        border-radius: 0;
        font-size: 48%;
        white-space: nowrap;
        width: 100% !important; /* Set width to 600% */
        max-width: 100% !important; /* Ensure it doesn't exceed 600% */
        margin-top: 0% !important;
    }
}
@media (max-width: 500px) {
    .mobile-screen-email {
        display: block !important;
        color: #000;
        border-radius: 0;
        gap: 0%;
        margin-top: 0% !important;
    }
}
@media (max-width: 400px) {
    .mobile-screen-email {
        display: block !important;
        width: 600% !important; /* Set width to 600% */
        max-width: 600% !important; /* Ensure it doesn't exceed 600% */
        color: #000;
        border-radius: 0;
        box-sizing: border-box;
        margin-left: -200%; /* Offset the left margin to allow overflow */

        text-align: center;
        white-space: nowrap; /* Prevent text from breaking into multiple lines */
        margin-top: 0% !important;
    }
}
@media (max-width: 500px) {
    .mobile-screen-email {
        display: block !important;
        width: 600% !important; /* Set width to 600% */
        max-width: 600% !important; /* Ensure it doesn't exceed 600% */
        color: #000;
        border-radius: 0;
        box-sizing: border-box;
        margin-left: 225% !important; /* Offset the left margin to allow overflow */

        text-align: center;
        white-space: nowrap; /* Prevent text from breaking into multiple lines */
        margin-top: 0% !important;
    }
}
@media (max-width: 400px) {
    .mobile-screen-email {
        display: block !important;
        width: 600% !important; /* Set width to 600% */
        max-width: 600% !important; /* Ensure it doesn't exceed 600% */
        color: #000;
        border-radius: 0;
        box-sizing: border-box;
        margin-left: 179% !important; /* Offset the left margin to allow overflow */

        text-align: center;
        white-space: nowrap; /* Prevent text from breaking into multiple lines */
        margin-top: 0%!important;
    }
}





@media (max-width: 500px) {
    .call-us-now {
        position: relative;
        left: 312px; /* Adjust for 500px screen width */
        display: block !important;
        color: #000;
        border-radius: 0;
        font-size: 48%;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    .call-us-now {
        position: relative;
        left: 247px; /* Adjust for 400px screen width */
        display: block !important;
        color: #000;
        border-radius: 0;
        font-size: 48%;
        width: 119%;
        white-space: nowrap;
    }
}

@media (max-width: 300px) {
    .call-us-now {
        position: relative;
        left: 120px; /* Adjust for 300px screen width */
        display: block !important;
        color: #000;
        border-radius: 0;
        font-size: 48%;
        white-space: nowrap;
    }
}


@media (min-width: 501px) and (max-width: 820px) {
    .call-us-now {
        position: relative;
        left: 278px; 
        display: block !important;
        color: #000;
        border-radius: 0;
        font-size: 48%;
        white-space: nowrap;
    }
}
@media (min-width: 430px) and (max-width: 431px) {
    .call-us-now {
        position: relative;
        left: 312px; /* Adjust for 430px width screen */
        display: block !important;
        color: #000;
        border-radius: 0;
        font-size: 48%;
        white-space: nowrap;
    }
}
/* 
@media (min-width: 430px) and (max-width: 1420px) {
    .header-Notes {
        background-color: #feda66;
        color: red;
        padding: 20px 5px;
        font-size: 14px;
        font-weight: bold;
        border: 2px solid black;
        font-style: italic;
        white-space: nowrap;
        width: 101%;
    }
}
    */

@media (max-width: 500px) {
    .header-Notes {
        background-color: #feda66;
        color: red;
        padding: 20px 0;
        font-size: 20px !important;
        font-weight: !important;
        border: 2px solid black;
        font-style: italic;
        white-space: nowrap;
        width: 106% !important;
        margin-left: -3%;
    }
}



/* 
@media (min-width: 480px) and (max-width: 1480px) {
    .header-Notes {
        background-color: #feda66;
        color: red;
        padding: 20px 8px;
        font-size: 30px !important;
        font-weight: bold;
        border: 2px solid black;
        font-style: italic;
        white-space: nowrap;
        width: 106% !important;
        margin-left: -3%;
    }
}
    */
/* 
@media (min-width: 800px) and (max-width: 1514px) {
    .header-Notes {
        background-color: #feda66;
        color: red;
        padding: 20px 0px;
        font-size: 23px;
        font-weight: bold;
        border: 2px solid black;
        font-style: italic;
        white-space: nowrap;
        width: 100% !important;
        margin-left: -3%;
    }
}
*/




@media (max-width: 500px) {
    .AllDoc-center {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        background-color: none;
    }

        .AllDoc-center .col-title,
        .AllDoc-center .col-image {
            display: block;
            margin: 0 auto;
            text-align: center;
            margin-left: 20% !important;
            background-color: none !important;
            font-size: 9px !important;
        }

    .AllDoc-center-all {
        display: block;
        margin: 0 auto;
        text-align: center;
        margin-left: 50% !important;
    }

    .col-title {
        margin-left: 3% !important;
    }
}



@media (max-width: 393px) {
  


    .AllDoc-center-all {
        display: block;
        margin: 0 auto;
        text-align: center;
        margin-left: 30% !important;
    }

  
}



@media (max-width: 768px) {
    .Login-User-Management {
        width: 50%; 
        font-size: 18px; 
    }
}


@media (max-width: 480px) {
    .Login-User-Management {
        width: 80%; 
        font-size: 16px; 
    }
}

@media (max-width: 700px) {
    .table td:first-child {
        font-style: italic !important;
        font-family: 'Times New Roman';
        font-weight:bold;
    }
}


@media (max-width: 500px) {
    .text-center h4 {
        font-size: 12px !important;
        padding: 8px; 
        border: 2px solid #feda66;
    }
}


    @media (max-width: 500px) {
        .table-bordered {
            border: 2px solid black !important; 
        }

            
       

   
        .kwoon-container {
            border: none !important; 
        }
    }
@media (max-width: 800px) {
    .table-bordered {
        border: 2px solid black !important; 
    }




   
    .kwoon-container {
        border: none !important; 
    }
}
@media (max-width: 320px) {

    .text-center h4 {
        outline: 3px solid black ;
        font-size: 9px !important;
    }


    .data-table td img {
        max-width: 59px;
        height: auto;
        margin: 0 auto;
        display: block;
     
        margin-left: 40% !important;
    }
}

@media (max-width: 320px) {
   

        .AllDoc-center .col-title,
        .AllDoc-center .col-image {
            display: block;
            margin: 0 auto;
            text-align: center;
            margin-left: -13% !important;
            background-color: none !important;
            font-size:8px !important;
        }

   

}

@media (max-width: 992px) {
    .list-group {
        width: 50%; /* Make it wider for medium screens */
    }
}


@media (max-width: 600px) {
    .list-group {
        width: 85% !important; /* Almost full width */
        padding: 15px;
        font-size: 10px;
    }
    .inssize {
        font-size: 19px;
    }
    .list-group-item {
        font-size: 13px !important;
    }
}

@media (max-width: 800px) {
    .list-group {
        width: 85% !important; /* Almost full width */
        padding: 15px;
        font-size: 10px;
    }

    .list-group-item {
        font-size: 13px !important;
    }
   
}