*{
  box-sizing: border-box;
}

.container{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background: white;
    border: none;
}
nav{
   background: white;
   border: none;

}

 .b1{
    height: 90vh;
    display: grid;
    grid-template-columns: 4fr 7fr;
    position: relative;
 }
 .b1 .left{
    font-size: 160%;
    border: none;

 }

 .left button{
    margin-top: 1rem;
    padding: .5rem;
    width: 60%;
    border: none;
    background: rgb(198, 152, 116);
    color: white;
 }

 .b1 .right{
    background: url(../assets/phone.jpg);
    background-size: cover;
    background-position: center;
 
 }

 .ct{
    position: absolute;
    bottom: 3rem;
    width: 30rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
    left: calc(50vw - 15rem);
  }

 .b2{
    margin-top: 3rem;
 
 }
.line{
    width: 80%;
     height: 5rem;
    margin-top: 3rem;
    margin-left: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.li{
    height: 90%;
    width: 7rem;
 }
 .b3{
  background: rgba(121, 121, 121, 0.127);
     color: white;
 }

 .b3 .info{
    width: 80%;
    text-align: center;
    margin: 4rem;
    background: rgba(69, 119, 69, 0.823);
    padding: 3rem;
    text-align: center;
    font-size: 2rem;
    border-radius: 14px;
    font-weight: 200;
 }
 .li img{
  width: 70%;
 }
 .bi img{
  width: 38% !important;
 }
 .b3 .line{
  margin-top: -1rem;
 }
 .bi h3{
  line-height: 1.3rem;
  margin-top: .5rem;
 }

 .b3 h6{
  font-weight: 200;
 }

 .b3 h4{
    margin-top: 1rem;
    font-weight: 400;
 }
 .b3 h5{
  font-weight: 400;
  font-size: 1.2rem;
 }

 .b4 p{
    width: 80%;
 
 }

 .icon img{
  width: 70%;
 }
 .i2 img{
  width: 95%;
 }

 .b4{
     text-align: center;
    position: relative;
     height: max-content;
    padding: 4rem;
    padding-bottom: 6rem;
    background: rgba(121, 121, 121, 0.127);


 }

 .b4 h5{
    font-size: 2rem;
    margin-bottom: 2rem;
 }

 .line .bi{
    height: 14rem;
    width: 14rem;
  }

 .b4 .line{
    margin-top: 8rem !important;
    height: 14rem;
  }

  .b4 button{
    width: 16rem;
    padding: .6rem;
    position: absolute;
    bottom: 1rem;
    left: calc(50% - 8rem);
    background: rgb(198, 152, 116);
    border: none;

  }

  .b5{
    background: rgba(121, 121, 121, 0.127);
  }
  .slide{
     margin-top: 2rem;
    text-align: left;

    
  }

  .slide .i1{
    height: 18rem;

     display: grid;
    grid-template-columns: 1fr 1fr;
    height: 95%;
    padding: 1rem;
  }
  .bottom{
    display: grid;
    grid-template-columns: 1fr 1fr;
 
  }

  .sr{
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  .sr h6{
    font-size: 0.9rem;
  }
  .sr p{
    font-size: 0.7rem;
    margin-top: 1rem;
    line-height: 1.3rem;
  }

  .bg{
    background-size: cover;

  }
  .sr .top{
    margin-top: .7rem;
  }

  .si img{
    width: 80%;
    max-height: 90%;
     border-radius: 15px;
    
  }
.sr .icon{
    height: 5rem;
    width: 5rem;
 }
  span{
   }

  .fd_c p{
    margin-top: .3rem;
    text-align: center;
  }

  .title{
   width: 100%;
   text-align: center;
   font-size: 1.9rem;
  }

  .subtitle{
   width: 100%;
   text-align: center;
   font-size: 1rem;
  }
  

  .b6{
   padding-top: 4rem;
   margin-bottom: 5rem;
  }

  .tib{
   
   padding: 1rem;
   justify-content: space-between !important;
    font-size: .9rem;
   text-align: center;
   height: 10rem;
   
  }

  .tib .img{
    height: 3rem;
   width: 80%;
   margin-bottom: 1rem;
  }
  .tib .img img{
    width: 90%;
  }

  @media (max-width: 600px){
   .b1{

      display: flex;
      flex-direction: column-reverse;
          
   }

   .b1 .right{
      width: 100%;
      height: 40vh;
      position: absolute;
      top: 0;
      left: 0;
   }
   .b1 .left{
      height: max-content;
      padding: 2rem;
      position: absolute;
      top: calc(40vh + 2rem);
      font-size: 2rem;
      color: rgb(34, 34, 42);
    }
    .ct{
      display: none;
    }

    .left button{
      width: 100%;
      padding: .8rem;
      border-radius: 8px;
    }
    .line{
      width: 90%;
      margin-left: 5%;
    }

    .line .li{
      width: 5rem;
    }
    .none{
      display: none;
    }
    .li img{
      width: 100%;
    }
    .b4{
      padding: 1rem;
      padding-bottom: 8rem;
    }
    .b4 .line, .b6 .line{
      height: max-content;
      justify-content: space-between;
      align-items: center;
       flex-wrap: wrap;
       padding: .5rem;
    }
    .line .bi{
      height: 7rem;
      width: 7rem;
      margin-top: 2rem;
      font-size: .7rem;
    }
    .slide .i1{
      grid-template-columns: 1fr;
    }
    .top p{
      text-align: left;
    }
    .b6{
      padding: 1rem;
      text-align: center;
    }
   
  }