@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.main-div,
.loggedin-div {
  position: relative;
  width: 100%;
  height: 100vh;
  display: none;
}

.resetpass-div {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
}

.main-div .imgBx,
.resetpass-div .imgBx {
  position: relative;
  width: 50%;
  height: 100%;
}

.main-div .imgBx:before,
.resetpass-div .imgBx:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(225deg, #ff00de, #03a9f4);
  z-index: 1;
  mix-blend-mode: screen;
}

.main-div .imgBx img,
.resetpass-div .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-div .contentBx,
.resetpass-div .contentBx {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}

.main-div .contentBx .formBx .resetpass-div .contentBx .formBx {
  width: 50%;
}

.main-div .contentBx .formBx h2,
.resetpass-div h2 {
  color: #607d8b;
  font-weight: 500;
  font-size: 1.5em;
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 4px solid #ff00de;
  display: inline-block;
  letter-spacing: 1px;
}

.main-div .contentBx .formBx .inputBx,
.resetpass-div .contentBx .formBx .inputBx {
  margin-bottom: 20px;
}

.main-div .contentBx .formBx .inputBx span,
.resetpass-div .contentBx .formBx .inputBx span {
  font-size: 16px;
  margin-bottom: 5px;
  display: inline-block;
  color: #607d8b;
  font-weight: 300;
  letter-spacing: 1px;
}

.main-div .contentBx .formBx .inputBx input,
.main-div .contentBx .formBx .inputBx button,
.resetpass-div .contentBx .formBx .inputBx button,
.resetpass-div .contentBx .formBx .inputBx input,
.loggedin-div button {
  width: 100%;
  padding: 10px 20px;
  outline: none;
  font-weight: 400;
  border: 1px solid #607d8b;
  font-size: 16px;
  letter-spacing: 1px;
  color: #607d8b;
  background: transparent;
  border-radius: 30px;
}

.main-div .contentBx .formBx .inputBx button,
.resetpass-div .contentBx .formBx .inputBx button,
.loggedin-div button {
  background: #ff00de;
  color: #fff;
  outline: none;
  border: none;
  font-weight: 500;
  cursor: pointer;
  max-width: 500px;
}

.main-div .contentBx .formBx .inputBx button:hover,
.resetpass-div .contentBx .formBx .inputBx button:hover,
.loggedin-div button:hover {
  background: #ff00de;
}

.main-div .contentBx .formBx .inputBx p,
.resetpass-div .contentBx .formBx .inputBx p,
.loggedin-div p {
  color: #607d8b;
}

.main-div .contentBx .formBx .inputBx p a,
.resetpass-div .contentBx .formBx .inputBx p a {
  color: #ff00de
}

.container-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
}

@media (max-width: 991px) {

  .main-div .imgBx,
  .resetpass-div .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .main-div .contentBx,
  .resetpass-div .contentBx {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .main-div .contentBx .formBx,
  .resetpass-div .contentBx .formBx {
    width: 100%;
    padding: 40px;
    background: rgba(255 255 255 / 0.9);
    margin: 50px;
  }

  .loggedin-div button {
    max-width: 350px;
  }
}