* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  .main-div {
    display: flex;
    width: 100%;
    height: 100vh;
  }
  .left {
    background-color: #0f1b29;
    width: 50%;
  }
  .right {
    width: 50%;
  }
  .left > img {
    width: 190px;
    margin: 30px 0px 0px 80px;
  }
  .left > img ~ div {
    margin: 25vh auto;
    width: 450px;
    height: 250px;
    font-family: "Poppins", sans-serif;
    line-height: 32px;
  }
  .left > img ~ div > p:first-child {
    font-size: 32px;
    color: white;
    margin-bottom: 12px;
    font-weight: bolder;
  }
  .left > img ~ div > p > span {
    color: #ff0077;
  }
  .left > img ~ div > p:nth-child(2) {
    margin-bottom: 20px;
    color: white;
  }
  .left > img ~ div > p:nth-child(3) > span {
    color: #ff0077;
  }
  .left > img ~ div > p:nth-child(3) {
    color: white;
  }
  .color {
    color: #ff0077;
  }
  .flex {
    display: flex;
    flex-direction: column;
    width: 460px;
    margin: 27vh auto;
    gap: 10px;
  }
  .box{
    font-family: 'Poppins', sans-serif;
  }
  .flex >div >button>img{
    height: 20px;
    margin: auto 5px;
  }
  #box-2>button, #box-3>button,#box-4>button{
    width: 460px;
    height: 74px;
    padding: 24px 40px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #E8E8E8;
    background-color:white;
  }
  #box-1{
    font-size: 12px;
    font-weight: 700;
    color:#404040;
    text-align: center;
    letter-spacing: 1px;
  }
  #box-5{
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
  }
  @media only screen and (max-width: 992px) {
    .main-div {
      flex-direction: column;
    }
    #box-2>button, #box-3>button,#box-4>button{
      width: 100%;
  
    }
    .left {
      width: 100%;
      height: 40vh;
    }
    .right {
      width: 100%;
    }
    .flex{
    margin: 10vh auto;
    width: 80%;
    }
    .left > img ~ div > p:first-child {
      text-align: center;
    }
    .left > img {
      width: 190px;
      margin: 10vh 39vw;
    }
    .left > img ~ div {
      margin: -70px auto 0px auto;
      width: 80%;
      height:35vh;
      font-family: "Poppins", sans-serif;
      line-height: 32px;
      text-align: center;
    }
  }
  @media only screen and (max-width: 992px) {
    .left {
      height: 43vh;
    }
  }
  @media only screen and (max-width: 870px){
    .left > img {
      margin: 10vh 36vw;
    }
  }
  @media only screen and (max-width: 768px){
    .left > img ~ div {
      width: 80%;        
    }
  }
  @media only screen and (max-width: 700px){
    .left > img {
      margin: 10vh 33vw;
    }
  }
  @media only screen and (max-width: 668px){
    .left > img ~ div {
      width: 80%;      
      height: 39vh;  
    }
  }
  @media only screen and (max-width: 570px){
    .left > img {
      margin: 10vh 31vw;
    }
  }
  @media only screen and (max-width: 545px){
    .left{
      height: 52vh;
    }
  }
  @media only screen and (max-width: 500px){
    .left > img {
      margin: 10vh 28vw;
    }
  }
  @media only screen and (max-width: 460px){
    .left{
      height: 57vh;
    }
  }
  @media only screen and (max-width: 450px){
    .left > img {
      margin: 10vh 26vw;
    }
    .left > img ~ div {
      width: 80%;
      height:47vh;
    }
  }
  @media only screen and (max-width: 384px){
    .left > img {
      margin: 10vh 23vw;
    }
  }
  @media only screen and (max-width: 380px){
    .left{
      height: 63vh;
    }
  }
  @media only screen and (max-width: 357px){
    .left > img {
      margin: 10vh 26vw;
    }
    .left > img ~ div {
      width: 80%;
      height:55vh;
    }
  }
  @media only screen and (max-width: 336px){
    .left > img {
      margin: 10vh 19vw;
    }
  }
  @media only screen and (max-width: 323px){
    .left{
      height: 73vh;
    }
  }
  @media only screen and (max-width: 282px){
    .left{
      height: 85vh;
    }
  }
  @media only screen and (max-width: 279px){
    .left > img {
      margin: 10vh 12vw;
    }
    .left > img ~ div {
      width: 80%;
      height:62vh;
    }
  }
  @media only screen and (max-width: 260px){
    .left > img {
      margin: 10vh 12vw;
    }
    .left > img ~ div {
      width: 80%;
      height:74vh;
    }
  }
  @media only screen and (max-width: 246px){
    .left > img {
      margin: 12vh 12vw;
      width: 150px;
    }
    .left > img ~ div {
      width: 80%;
      height:80vh;
    }
  }
  @media only screen and (max-width: 231px){
    .left{
      height: 90vh;
    }
  }
  @media only screen and (max-width: 216px){
    .left{
      height: 100vh;
    }
  }
  @media only screen and (max-width: 194px){
    .left{
      height: 900px;
    }
  }