@media screen and (max-width:767px) {
    .about{
        display: block;
    }
    h1{
        font-size: 30px !important;
    }
    
    header h1{
        font-size: 25px !important;

    }





    .myCard::before{
        content: '';
       display: none;
       
       
       
    
    }
    .wants_to_work .myflex{
        gap: 20px;
        justify-content: flex-start;
        flex-direction: column;
    }
    form input[type=submit]{
        width: 100%;
    
    }
    
    .navbar {
        position: absolute;
        width: 100%;
        
    }
    
    .part2{
        display: none !important;
    }
    .main-hero{
        position: relative;
        display: flex;
        place-content: center;
        height: 100%;
        background: url("image/hero.png");
        background-repeat: no-repeat;
        background-size: cover;

        background-position: center;

        color: #ffffff;

    }
    .main-hero:after{

        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.679);
        z-index: 1;
    }
    p,h1,button,img{
     z-index: 3;
    }
    
    main{
        height: 100%;
    
        display: grid;
        grid-template-columns: 1fr;
        /* place-content: center; */
        
    }
    .mybox2{
        width: 250px;
        height: 250px;

    }
    
    .mybox2::before{
        content: '';
        display: none;
        position: absolute ;
        width: 250px;
        height: 250px;
        background: black;
        right: 0;
        top: 50px;
        z-index: -1;
       
       
        border: 1px solid black;
    
    }
    .myCard{
        padding-top: 6rem;
        padding-bottom: 6rem;
        height: 100%;
    }
    .myCard h1{
        font-size: 25px !important;
        
    }
    .myCard2{
        padding-top: 6rem;
        padding-bottom: 6rem;
        height: 100%;
    }
    .wcsau{
        padding-top: 6rem;
        padding-bottom: 6rem;
        
    }
    .myCard .go {
       
        gap: 20px !important;
       
    }

    .dnone{
        display: none;
    }

    .mobileProject{
       display: grid;
       place-items: center;
    }
    .scdm{
     width: 60%;
     height: 200px;
   
     z-index: 2;
     border-radius: 10px;
     overflow: hidden;
    }
    .frtm{
     width: 40vw;
     height: 150px;
        
        position: absolute;
        left: 10px;
        border-radius: 10px;
        /* opacity: 50%; */
        overflow: hidden;
        z-index: -1;
    
    }
    .trdm{
     width: 40vw;
     height: 150px;
    
        position: absolute;
        right: 10px;
        border-radius: 10px;
        /* opacity: 50%; */
        overflow: hidden;
        z-index: -1;
    }
    .rt::after{
        content: '';
        position: absolute;
        background: #2828285b;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        
    }
    .carousel-inner{
     height: 100%;
     overflow: hidden;
     
    }
    .carousel-item{
        height: 100%;
        overflow: hidden;
    
        place-items: center;

    }
    /*.mobileProject .carousel-inner::after{*/
    /*    display: none;*/
    /*}*/


    .scdm .carousel-item img{
        width: 100% !important;
        height: 200px !important;
        position: relative !important;
    }
    .frtm .carousel-item img{
        width: 100% !important;
        height: 150px !important;
        position: relative !important;
    }
    .trdm .carousel-item img{
        width: 100% !important;
        height: 150px !important;
        position: relative !important;
    }









    /* why choose us */
    .whyImg{
        width: 128px;
        height: 110px;
    }
    .cont .des{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .des h3{
        font-size: 18px;
        font-weight: bold;
    }
    .des p{
        font-size: 11.3px;
        
    }
    .cred_img{
        width: 40px;
        height: 40px;
    }
    .cont2{
        grid-template-columns: 1fr;
    }
    







    /* what client are saying about us */
    .what_crd{
        width: 305px;
        /* height: 282px; */
        padding: 20px;
      
        position: relative;
      
    }
    .what_crd p{
        font-size: 13px;
    }

    .img_what{
        width: 35px;
        height: 35px;
    }
    .txt2 h3{
        font-size: 13px;
    
    }
    .txt2 p{
        font-size: 12px;
        font-weight: 100;
    }
















    




        
    /* digital marketing */
    .mybox3{
        width: 250px;
        height: 250px;
    }
    .go{
        order: 1;

    }
    .go2{
        order: 2;
    }
    .cred{
        padding-top: 50px;
    }











    /* about */
    .about{
        padding-top: 2rem;
        padding-bottom: 2rem;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 20px;
        background: #282828;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
       
    }
    .about_crd{
        height: 245px;
        
    }



    /* projects */
    .hmy_1{
        height: 219px;
    }
    .hmy_2{
        height: 332px;
    }
    .but{
        width: 100%;
        height: 50px;
        position: relative;
        display: flex;
        align-items: center;
        border: 1px solid black;
        overflow: hidden;
    
    }












    /* footer*/
    .myoder1{
        order: 2;
    }
    .myoder2{
        order: 1;
    }
    .myflex p{
        font-size: 10px;
        color: rgb(185, 184, 184);
    }
    footer h3{
        font-size: 25px;
        
    }
    .small-p{
        font-size: 10px;
    }















    /* our service */
    .related_project{
        display: none;
    }
    .semi_box{
        width: 300px;
        height: 230px;
        border: 1px solid black;
    }
    .semi{
        padding: 4vw 8vw;
    }






    .result_box1{
        height: 230px;
    }
    .result_box2{
        height: 80px;
    }




    .our_team_card{
        width: 134px;
        height: 170px;
    }
    .OT_crd_img{
        height: 132px;
        background: lightgray;
    }
    .hmy_1{
        height: 150px;
    }
    .hmy_2{
        height: 350px;
    }
    .hmy_3{
        height: 100%;
    }
   
    .myCard2 p{
        font-size: 14px;
    }
    .myCard p{
        font-size: 14px;
    }
}