@import url("_variables.css");

@media ((min-width: 1300px) and (max-width: 1400px)) {
  .login-container {
    position: absolute;
    top: 50%;
    right: 0.9%;
    width: 25%;
  }
}

@media ((min-width: 1200px) and (max-width: 1300px)) {
  .login-container {
    position: absolute;
    top: 50%;
    right: 1.4%;
    width: 27%;
  }
}

@media (max-width: 998px) {
  .login-container {
    position: absolute;
    top: 50%;
    right: 5.4%;
    width: 27%;
  }
}

@media ((max-width: 998px)) {
  .iphone_img {
    display: none !important;
  }

  .qr_code {
    justify-content: center !important;
    align-items: center !important;
  }
  .navbar-nav {
    justify-content: center !important;
    align-items: center !important;
  }
  .paragraph_content {
    text-align: center;
  }
  .content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding-top: 20%;
  }

  .qr_code {
    width: 100% !important;
    align-items: center !important;
  }

  .iphone_img {
    width: 80% !important;
    height: auto !important;
    position: static !important;
    margin-top: 20px !important;
  }

  .login-container {
    position: static !important;
    width: 70% !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hidden-section-right,
  .hidden-section-bottom {
    opacity: 1 !important;
    transform: none !important;
  }

  .social_apps {
    width: 100px !important;
  }
}

@media (max-width: 992px) {
  .content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    height: 100vh;
  }

  .qr_code {
    width: 100% !important;
    align-items: center !important;
  }

  .iphone_img {
    display: none !important; /* Hide large iPhone image */
  }

  .login-container {
    position: static !important;
    width: 90% !important;
    /* margin-top: 20px !important; */
    transform: none !important;
    opacity: 1 !important;
    /* padding: 15px !important; */
  }

  .social_apps {
    width: 100% !important;
  }

  .hidden-section-right,
  .hidden-section-bottom {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Fix the phone input width */
  .input-group {
    width: 100% !important;
  }

  /* Fix button widths */
  .btn {
    width: 100% !important;
    font-size: 14px !important;
  }
  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1200px;
    object-fit: cover;
    transition: opacity 2s ease-in-out;
    opacity: 0;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1200px;
    background: linear-gradient(to right, #462f0633, #000000);
  }
  .hero {
    overflow: visible;
    margin-top: 25px;
  }
}

@media (max-width: 500px) {
  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 850px;
    object-fit: cover;
    transition: opacity 2s ease-in-out;
    opacity: 0;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 850px;
    background: linear-gradient(to right, #462f0633, #000000);
  }
  .social_apps {
    width: 100% !important;
  }
  .login-container {
    margin-top: 10%;
  }
}