/* ---------------------------For Desktop------------------------------ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer {
      padding: 30px 50px;
      flex-wrap: wrap;
      gap: 20px;
    }
  
    .header {
      padding: 20px 50px;
    }
  
    .container {
      flex-wrap: wrap;
      padding: 40px 50px;
      height: auto;
      gap: 20px;
    }
  
    .hii-text {
      width: 100%;
      order: 2;
    }
  
    .bg-image {
      width: 80%;
      order: 1;
      margin: 0 auto;
    }
  }
  /* ---------------------------For Tablet------------------------------ */
  @media only screen and (min-width: 481px) and (max-width: 767px) {
    .footer {
      padding: 30px 50px;
      flex-wrap: wrap;
      gap: 20px;
    }
  
    .header {
      padding: 20px 50px;
    }
  
    .container {
      flex-wrap: wrap;
      padding: 40px 50px;
      height: auto;
      gap: 20px;
    }
  
    .hii-text {
      width: 100%;
      order: 2;
    }
  
    .bg-image {
      width: 100%;
      order: 1;
      margin: 0 auto;
    }
  
    .hii-text h4 {
      font-size: 28px;
    }
  
    .hii-text p,
    .hii-text button {
      font-size: 16px;
    }
  
    .logo-image img {
      height: 30px;
    }
  
    .login-btn {
      padding: 10px 25px;
    }
  }
  /* ---------------------------For Phone------------------------------ */
  @media only screen and (min-width: 50px) and (max-width: 480px) {
    .footer {
      padding: 30px 20px;
      flex-wrap: wrap;
      gap: 20px;
    }
  
    .header {
      padding: 20px;
    }
  
    .container {
      flex-wrap: wrap;
      padding: 40px 20px;
      height: auto;
      gap: 20px;
    }
  
    .hii-text {
      width: 100%;
      order: 2;
    }
  
    .bg-image {
      width: 100%;
      order: 1;
      margin: 0 auto;
      padding: 0;
    }
  
    .hii-text h4 {
      font-size: 28px;
    }
  
    .hii-text p,
    .hii-text button {
      font-size: 16px;
    }
  
    .logo-image img {
      height: 26px;
    }
  
    .login-btn {
      padding: 6px 10px;
    }
  
    .Apps {
      flex-wrap: wrap;
    }
  
    .text-area {
      height: auto;
    }
  }
  
  @media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .header {
      padding: 20px 50px;
    }
  
    .bg-image {
      padding: 0 70px;
    }
  
    .container {
      padding: 0 50px;
    }
  
    .footer {
      padding: 30px 50px;
    }
  }