@import url('https://fonts.googleapis.com/css?family=Lato:300');
    *{
      text-decoration:none;
      padding:  0px;
      margin: 0px;
      transition: all .4s ease;
      color: rgb(0, 0, 0);
      font-family: 'Lato';
    }

    .container{
      text-decoration:none;
      width: 100%;
      height: 100vh;
      display: flex;
    }

    .container .two, .one{
      text-decoration:none;
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .container .one{
      text-decoration:none;
      flex: 1;
      height: 100%;
      background-image: url('https://i.ibb.co/XYHLJVG/bg.png');
      display: flex;
      align-items: center;
    }
    .container .one:hover {
      text-decoration:none;
      flex: 1.5 !important;
    }


    .container .two{
      text-decoration:none;
      flex: 1;
      background-image: url('https://i.ibb.co/wphcKmy/flipbgkk.png');
      height: 100%;
      display: flex;
      align-items: center;
    }
    .container .two:hover {
      text-decoration:none;
      flex: 1.5 !important;
    }

.btnone{

      text-decoration:none;
      width: 200px;
      height: 40px;
      border-radius: 6em;
      display: flex;
      justify-content: center;
      align-items: center;
      background: white;
      cursor: pointer;
      color:black;
      box-shadow: 0px 3px 10px 1px rgba(0,0,0,.4);
      margin-top: 500px
    }

.btntwo{

     text-decoration:none;
     width: 200px;
     height: 40px;
     border-radius: 6em;
     display: flex;
     justify-content: center;
     align-items: center;
     background: white;
     cursor: pointer;
     color:black;
     box-shadow: 0px 3px 10px 1px rgba(0,0,0,.4);
    margin-top: 500px
    }

    .content{
      text-decoration:none;
      width: 100%;
      height: 100%;
    }

    .one .content{
      text-decoration:none;
       background: rgb(0,0,0);
background: linear-gradient(270deg, rgba(0,0,0,0.5046219171262255) 35%, rgba(198,2,2,0.47100847174807425) 100%);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }


    .two .content{
      text-decoration:none;
        background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0.5046219171262255) 35%, rgba(2,32,198,0.47100847174807425) 100%);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }


    @media (max-width: 768px)
    {
      .container{
        text-decoration:none;
        flex-direction: column
      }
    }