@media screen and (min-width:767px) and (max-width:1024px) {
    h1{
        font-size: 45px !important;
    }
    p{
        font-size: 15px ;
    }
    h3{
        font-size: 15px !important;
    }
    .myoder1{
        order: 2;
    }
    .myoder2{
        order: 1;
    }
    
    main{
    
        display: grid;
        grid-template-columns: 1fr ;
        /* place-content: center; */
        
    }
    .box{
        width: 532px;
        height: 412px;
        border: 1px solid black;
        position: relative;
        margin: auto;

    }
    .box::after{
        content: '';
        position: absolute !important;
        width: 532px;
        height: 412px;
        right: -10px;
    
        bottom: -10px;
        border: 1px solid black;
    
    }




    .paart2{
        display: none !important;
    }
    .myCard::before{
        content: '';
       display: none;
       
       
       
    
    }











    /* content   */
    .mybox2{
        position: relative;
    }
    .mybox2::before{
        content: '';
        position: absolute ;
        
        height: 468px;
        right: -20px;
        
        top: 20px;
        /* width: 700px; */
        z-index: -1;
       
       
        border: 1px solid black;
    
    }






    form input[type=submit]{
        width: 300px;
    
    }






    /* what  */
    .what_crd p{
        font-size: 18px;
    }



    




    .cred{
        padding-top: 50px;
    }

    .myCard{
        padding-top: 6rem;
        padding-bottom: 6rem;
        height: 100%;
    }
    .myCard2{
        padding-top: 6rem;
        padding-bottom: 6rem;
        height: 100%;
    }
    .wcsau{
        padding-top: 6rem;
        padding-bottom: 6rem;
        
    }






    .pro_crd{
        width: 130px;
        height: 100px;
        
    }
   

    .wrk_w{
        height: 100%;
    }

    .myCard2 main{
        gap: 40px;
    }
    .myCard2 h1{
        z-index: 50;
    }



    .result_box1{
        height: 400px;
    }
    .result_box2{
        height: 400px;
    }

    .hmy_1{
        height: 200px;
    }
    .hmy_2{
        height: 400px;
    }
    .hmy_3{
        height: 150px;
    }
}