@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
    height:100%;
}
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff;
    font-family: "Plus Jakarta Sans", sans-serif;
    background:url("images/onamcontestbg.jpg") no-repeat;
    background-size:cover;
    background-position:bottom center;
    height:100%;
}

.main-container {
  max-width: 2000px;
}

.page {
  display: none;
  padding: 20px;
}

.page.active {
  display: block;
}

.question {
  margin-bottom: 15px;
}

.main-heading {
  margin-bottom: 30px;
  color: #4b4b4b;
  text-align: center;
}

nav {
  width: 100%;

  padding: 20px 90px;
  display: flex;
}
.main-div {
    height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

nav img {
  width: 350px;
  height: auto;
  margin: 0 auto;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

.error-message {
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
}

.form-container {
    width: 1200px;
    height: 500px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.form-image-container {
  width: 40%;
  height: 100%;
}

.form-image-container img {
  width: 100%;
  height: auto;
}

.form-input-container {
  width: 60%;
  height: 100%;

  padding: 46px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  justify-content: center;
}
.main-heading img{

  max-width: 40%;
  height: auto;


}

.form-input-container h2 {
  font-size: 33px;
  font-weight: 600;
  line-height: 25px;
  text-align: left;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.input-row {
  column-gap: 30px;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.input-field {
  width: 50%;

}
.input-field label {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  text-align: left;
  color: #4b4b4b;
}
.input-field input {
    padding: 10px 15px;
    border: 0px solid #b7b7b7;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    text-align: left;
    font-weight: 500;
    border-radius:0px !important;
}

.next-button {
    width: 100%;
    height: 50px;
    background-color: #5f8741;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: 400;
    line-height: 21.78px;
    border-radius: 0;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.next-button:hover {
    background-color: #6e9448;
}

.custom-input {
  display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 0px solid #b7b7b7;
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 0rem;
    background:#fff;
}
button i {
  padding: 0px 10px;
}

.input-flag {
  padding: 10px 10px;
  border-right: 1px solid #d7d7d7;
  height: 100%;
}

.input-flag img {
  width: 33px;
  max-width: 33px;
  height: auto;
}

.country-code {
  font-size: 16px;
  color: #cfcfcf;
  padding: 10px 10px;
}

.custom-input input {
  width: 100%;
  border: none;
  padding: 0;
  padding-left: 0px;
  transition: padding 0.3s ease;
}

.custom-input input:focus::placeholder {
  transform: translateX(5px);
  transition: transform 0.3s ease;
}

input[type="text"]:not(#phonenumber),
input[type="email"]:not(#phonenumber),
input[type="radio"]:not(#phonenumber) {
  outline: none;
}

input[type="text"]:not(#phonenumber):focus,
input[type="email"]:not(#phonenumber):focus,
input[type="radio"]:not(#phonenumber):focus {
  border-color: #696cff;
}

input[type="text"]:not(#phonenumber):focus::placeholder,
input[type="email"]:not(#phonenumber):focus::placeholder {
  transform: translateX(5px);
  transition: transform 0.3s ease;
}

input#phonenumber {
  outline: none;
}

form {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.radio-container {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  cursor: pointer;
}

.radio-container input,
.radio-container label {
  width: 32px;
  height: 25px;
  text-align: center;

  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
  text-align: left;
  color: #4b4b4b;
}

.question p {
  font-size: 25px;
  font-weight: 600;

  text-align: left;
  color: #4b4b4b;
}

.question .flex-row {
  justify-content: start;
  width: 200px;
}

.form3-input-field {
  width: 100%;
  row-gap: 8px;
}

.form3-input-field label {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  color: #4b4b4b;
}
.form3-input-field input {
    padding: 15px;
    border: 1px solid #b7b7b7;
    width: 60%;
    border-radius: 0.5rem;
}

.final-page-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
}

.final-page-container i {
  font-size: 90px;
  color: #fb7215;
}

.final-page-container h2 {
  color: #4b4b4b;
  font-size: 26px;
  font-weight: 600;
  line-height: 33px;
}
div#response.responseerror {
    position: relative;
    top: -2rem;
    left: 24px;
    background: #ffffff;
    color: #d75151;
    padding: 10px;
}
div#response li {
    list-style: none;
    color: #d75151;
    font-weight: bold;
    line-height: 29px;
}

.back-button   {
    width: 162px;
    height: 58px;
    background-color: #000;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: 400;
    line-height: 21.78px;
    border-radius: 0.5rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.back-button:hover{
  background-color: #000000d9; 
}
.input-flag img {
    width: 33px;
    max-width: 33px;
    height: auto;
}

/* Loading */
.loader {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    align-content: center;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: bounce 1.5s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@media (max-width: 480px) {
  body {
    height: auto;
  }
  nav {
    width: 100%;
    padding: 10px 41px;
    margin:0 auto;
    text-align: center;
  }

  .form-image-container {
    width: 100%;
  }

  .form-input-container h2 {
      text-align: center;
      margin-top: 150px;
      font-size: 29px;
  }

  form {
    row-gap: 8px;
    margin-bottom: 30px;
  }

  .form-container {
    width: 100%;
  }

  .form-container {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: column;
  }

  .input-row {
    row-gap: 8px;
  }

  .form-input-container {
    width: 100%;
    padding: 16px;
  }

  .input-field {
    width: 100%;
  }
  .next-button, .back-button {
     width: 100%;
  }

  .main-heading {
    margin: 30px 0px;
    text-align: center;
    margin-top: 100px;
  }

  nav img {
    width: 280px;
  }

  .form3-input-field input {
    width: 100%;
  }

  .question p {
    font-size: 19px;
  }

  .form3-input-field input {
    padding: 12px;
  }

  .radio-container {
    height: 35px;
  }

  .radio-container input,
  .radio-container label {
    width: 30px;
    height: 19px;
    font-size: 16px;
  }

  .radio-container label {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .final-page-container {
    row-gap: 22px;
  }
  .main-heading img {
    max-width: 50%;
    height: auto;
    text-align: center;
}
}

@media screen and (max-width: 768px) {
      body {
          background:url("images/onamcontestbgmobile.jpg") no-repeat;
          background-size:cover !important;
          background-position:bottom right;
          border:0px solid red;
          height:100%;

      }
}