@media screen and (min-width: 375px) and (max-width: 767px) {
   .container-1218{
      max-width: 375px;
      margin: 0 auto;
    }

    .header-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
   
   .header{
      padding-bottom: 18px;
    }

    .logo-desktop{
      display: none;
    }

    .logo-tablet{
      display: none;
    }

    .logo-mobail{
      display:block ;
      width: 56px;
      height: 56px;
      margin-left: 15px;
    }

    .nav{
      display: none;
    }

    .nav-mob{
       display: block;
       margin-right: 18px;
    }

    .nav-btn{
      border: 0;
      background-color: #fff;
    }

    /* header end */

    /* main start */

    .hero{
      background-color: #F5F8FF;
      margin-bottom: 71px;
      background-image: url(../img/box-mob.png);
      background-repeat: no-repeat, no-repeat;
      background-position: top 133% left 94%;  
    }
    
    .main{
      max-width: 375px;
      margin: 0 auto;
      padding-top: 43px;
      padding-bottom: 409px;
    }

    .main-name{
      max-width: 302px;
      margin: 0 ;
      padding: 0;
      padding-left: 43px;
      margin-bottom: 28px;
    }

    .main-text{
      max-width: 293px;
      margin: 0;
      margin-bottom: 14px;
      padding: 0;
      padding-left: 43px;
    }

    .btn-singup{
      margin-left: 38px;
 }

    /* main end */

    /* plans start */

    .container-1270{
      max-width: 375px;
      margin: 0 auto;
      margin-bottom: 85px;
    }

    .plans-row{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-bottom: 14px;
    }

    .plan{
      width: 348px;
      height: 188px;
    }

    .plan-left{
      background-image: url(../img/plan1-mobail.png);
      background-repeat: no-repeat;
      margin-bottom: 18px;
    }

    .plan-rigt{
      background-image: url(../img/plan2-mobail.png);
      background-repeat: no-repeat;
    }

    .plan-name{
      font-size: 30px;
      line-height: 41px;
    }

    .plan-price{
      font-size: 30px;
      line-height: 39px;
    }

    .btn-solid{
      width: 179px;
      height: 39px;
      font-size: 14px;
      line-height: 29px;
    }

    .plans-bot{
      font-size: 14px;
      line-height: 18px;
    }

    /* plans end */

    /* works start */

    .container-1026{
      max-width: 375px;
      margin: 0 auto;
      margin-bottom: 138px;
      overflow-x: hidden;
    }

    .works-heading{
      margin: 0 0 486px 0;
    }

    .setup{
      margin-bottom: 540px;
    }

    .feature-11 {
      max-width: 324px;
      height: 370px;
      left: 10%;
      top: -200%;
    }

    .feature-12{
      max-width: 288px;
      left: -72%;
      top: -204%;
    } 

    .feature-number{
      left: 14%; 
      top: -263%;
      z-index: 2; 
    }

    .title{
      font-family: 'DM Serif Text', serif; 
      font-weight: 400;
      font-style: normal;
      width: 284px;
      font-size: 36px;
      line-height: 44px;
      color: #000000;
      margin: 0;  
      margin-right: 47px;
      margin-bottom: 12px;
    }

    .subtitle{
      max-width: 277px;
      font-size: 18px;
      line-height: 23px;
      margin-right: 47px;
    }
    
    .setup2{
      margin-bottom: 566px;
    }

    .feature21{
      max-width: none;
      height: 600px;
      width: 994px;
      left: -86%;
      top: -207%;
    }

    .feature22{
      left: -29.4%;
      top: -68%;
      width: 160px;
    }

    .feature23{
      display: none;
    }

    .feature-number2{
      left: 10%;
      top: -260%;
    }

    .title2{
      max-width: 197px;
      font-size: 36px;
      line-height: 44px;
      margin-right: 120px;
      margin-bottom: 12px;
    }

    .subtitle2{
      max-width: 294px;
      font-size: 18px;
      line-height: 23px; 
      margin: 0;
      margin-right: 29px;
    }

    .setup3{
      margin-bottom: 60px;
    }

    .feature31{
      max-width: none;
      width: 328px;
      height: 450px;
      left: 5%;
      top: -190%;
    }

    .feature32{
      left: 60.6%;
      top: -72%;
      width: 195.89px;
      height: 173.93px;
    }

    .feature-number3{
      left: 5%;
      top: -234%; 
    }

    .title3{
      max-width: 125px;
      margin-right: 197px;
      margin-bottom: 12px;
    }

    .subtitle3{
      max-width: 281px;
      margin-right: 41px;
      padding-bottom: 60px;
    }

    .btn-main{
      margin-left: 20%;
    }

    /* end */

    /* start post */

    .post{
      background-position: top 268px left 70%, top 784px left 73%;  
    }

    .list{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    }

    .lists{
      max-width: none;
    }

    .insta{
      margin-left: 32px;
    }

    /* footer start */

    .container-1381{
      max-width: 348px;
      margin-bottom: 36px;
    }

    .logofooter{
      width: 133px;
      padding-top: 40.73px;
      margin-left: 34px;
    }

    .icon{
      display: none;
    }

    
    .conteiner-1162{
      max-width: 325px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 34px;
      margin-right: 0px;
      margin-bottom: 45px;
      flex-wrap: wrap;
      width: 100%;
      height: 60%;
    }

    .conteiner-1162_div{
      width: 40%;
      height: 40%;
    }

    .pading_left{
      margin: 0;
    }

    .h4{
      font-size: 16px;
      line-height: 21px;
    }

    .link1162{
      font-size: 12px;
      line-height: 16px;
    }

    .p{
      display: flex;
      flex-direction: column;
      margin-bottom: 88.45px;
    }

    .p-text{
      padding: 0;
      margin: 0;
      margin-top: 21.35px;
      margin-bottom: 12px;
    }
    
    .p-text:last-child{
      margin-top: 0px;
    }

    .p-text{
      margin-left: 34px;
    }

    .p-text_footer{
      width: 274px;
      font-size: 11px;
      line-height: 14px;
      margin: 0;
      padding: 0;
      margin-left: 34px;
      margin-bottom: 25px;
    }
}