* {

    margin: 0;

    padding: 0;

    font-family: sans-serif;

}



a {

    text-decoration: none;

}



.mainbody {

    padding: 6rem 13rem;



    .items {

        display: grid;

        grid-template-columns: 1fr 1fr 1fr;

        grid-gap: 3rem;



        .item {

            overflow: hidden;

            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

            height: 100%;

            width: 100%;

            display: flex;

            flex-direction: column;

            align-items:center;

            justify-content: center;

            transition: all ease-in-out 0.4s;

            &:hover{

                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

                transition: all ease 0.4s;

            }

            .img {

                width: 350px;

                height:200px;

            }

        }

    }

}

#icon{

    font-size:2rem ;

    color: rgb(0, 0, 0);

    cursor: pointer;

    position: absolute;

    right: 3rem;

    top: 1rem;

    display: none;

  

}

/* #checke{

    font-size:4rem ;

    width: 30px;

    height: 28px;;

    

    position: absolute;

    right: 3rem;

    top: 1rem;

    display:none ;

    

  

} */



#close{

    font-size:2rem ;

    color: rgb(0, 0, 0);

    cursor: pointer;

    position: absolute;

    right: 3rem;

    top: 1rem;

    display: none; 

}

@media only screen and (max-width: 1400px) {

    

   .mainbody{

    padding: 6rem 13rem;

    .items{

       

        grid-template-columns: 1fr 1fr ;

    }}



}

@media only screen and (max-width: 950px) {

    

    .mainbody{

        width: 100%;



     padding: 4rem 0.2rem;

     .items{

        

        

         grid-template-columns: 1fr  ;

         .item{

            height: 100%;

            width: 100%;

         }

     }}

     

 }



 @media only screen and (max-width:600px) {

    #icon{

        display: block;

    }

   

    .block{

        display: block !important;

    }

    .none{

        display: none !important;

    }

    



    .mainbody h1{

        margin-top: 3rem;

        margin-bottom: -1.5rem !important;

        font-size: 2rem !important;

    }

    .maind{

      

        margin-top: 2rem;

        margin: 0;

        font-size: 1rem !important;



    }

    .maind img{

        width: 100%;

    }

   }