@media screen and (max-width :992px){
  header{
    text-align: center;
  }

    nav{
        position: fixed;

    }

    ul.flex{
        flex-direction: column;
        position: absolute;
        top: 81px;
        background: #ffffff71;
        width: 100%;
        justify-content: center;
        left: 0;
        backdrop-filter: blur(10px);
        padding: 20px 0;
        display: none;
        
    }
      label .open{
        display: flex;
    }
     .close{
        display: none;
     }
     #menu-check:checked ~ ul{
       display: flex;
     }
     
     #menu-check:checked ~ label .open{
        display: none;
      }
      #menu-check:checked ~  label .close{
        display: inherit;
      }
      header .flex{
        flex-direction: column-reverse;
        margin: 7rem 0;
      }
       .card{
        max-width: 100%;
      }
      .cards-bg{
        width: 100%;
      }

    .section1 .container .flex{
      flex-direction: column;
      text-align: center;
     }
     .section2 .container{
      flex-direction: column-reverse;
      text-align: center;
     }
     .container-boxs{
      
      flex-direction: column;
      flex-grow: 1;
      flex-wrap: wrap;
     }

    
     .footer-section.flex{
      flex-direction: column;
     }
     .parant-all-section.flex{
      flex-direction: column;
     }
        .boos-container.flex{
        text-align: center;
            flex-direction: column;
        }

  }
  @media screen and (max-width :770px){
    .parant-flex .flex{
      flex-direction: column;
    }
    .flex .content img{
      margin-top: 30px;
    }
    .container h2{
      text-align: center;
      margin-bottom:20px ;
    }
  }