/* @media screen and (max-width: px){

} */

@media screen and (max-width: 1170px) {
  .section1 {
    flex-direction: column;
  }
  .section1 .text {
    /* align-items: center; */
    /* text-align: center; */
  }
  .section1 img {
    width: 340px;
  }
  .section1 .tv1 video {
    top: 53px;
    right: 48px;
    width: 248px;
  }
  .tv2 video {
    top: 25px;
    left: 62px;
    width: 212px;
  }

  .sbox {
    top: 140px;
    left: 45px;
    height: 70px;
  }
  .sbox .stext {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #stranger {
    width: 50px;
  }
  #loader {
    height: 40px;
    width: auto;
  }
  .sbox .stext :nth-child(1) {
    font-size: 15px;
  }
  .sbox .stext :nth-child(2) {
    font-size: 10px;
  }
}

@media screen and (max-width: 1130px) {
  .main-text :nth-child(1) {
    font-size: 33px;
  }
  .main-text :nth-child(2) {
    font-size: 24px;
  }
  .main-text :nth-child(3) {
    font-size: 20px;
  }
}

@media screen and (max-width: 750px) {
  .main-text {
    margin-top: 120px;
  }
  .main-input {
    margin-top: 350px;
    flex-direction: column;
    align-items: center;
  }
  .input + label {
    left: 10px;
    top: 16%;
  }

  .input:focus + label,
  .input:not(:placeholder-shown) + label {

    left: 11.5px;
    top: 10%;
  }
}

@media screen and (max-width: 560px) {
  nav {
    width: 90vw;
  }
}

@media screen and (max-width: 500px) {
  main {
    height: 560px;
  }
  .main-input input {
    width: 350px;
  }
  .main-input {
    margin-top: 430px;
  }
}

@media screen and (max-width: 450px) {
  nav {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .main-text {
    margin-top: 140px;
  }
}

@media screen and (max-width: 380px) {
  .main-input input {
    width: 300px;
  }
}