/*Mobile-------------------------------------*/
@media only screen and (max-width: 799px) {
  .cta-text-2 {
    padding: 2em;
    color: white;
    text-align: center;
  }
  
  .heading-text-2 {
    font-size: 1.85em;
    font-family: 'Montserrat', sans-serif;
  }
  .subheading-2 {
    font-size: 1.3em;
    padding-top: 1em;
  }
  .form-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 92%;
    margin: auto;
  
    background-image: url(/public/assets/form-city-min.jpeg);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    color: black;
    z-index: 1;
    transition: 0.5s;
    backdrop-filter: blur(15px);
  }
  .form {
    padding: 2.5em 2em;
    font-size: 1em;
  }
}

/*Tablet-------------------------------------*/
@media only screen and (min-width: 800px) and (max-width: 1099px) {
  .cta-text-2 {
    padding: 4em;
    color: white;
    text-align: center;
  }
  
  .heading-text-2 {
    font-size: 2.5em;
    font-family: 'Montserrat', sans-serif;
  }
  .subheading-2 {
    font-size: 1.5em;
    padding-top: 1em;
  }
  .form-container {
    background-color: var(--main-blue);
    border-radius: 10px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 700px;
    margin: auto;
  
    background-image: url(/public/assets/form-city-min.jpeg);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    color: black;
    z-index: 1;
    transition: 0.5s;
    backdrop-filter: blur(15px);
    
  }
  .form {
    padding: 3em;
    font-size: 1.1em;
  }
}

/*Desktop-------------------------------------*/
@media only screen and (min-width: 1100px) {
  .cta-text-2 {
    padding: 6em;
    color: white;
    text-align: center;
  }
  
  .heading-text-2 {
    font-size: 3.5em;
    font-family: 'Montserrat', sans-serif;
  }
  .subheading-2 {
    font-size: 1.5em;
    padding-top: 1em;
  }
  .form-container {
    background-color: var(--main-blue);
    border-radius: 10px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 700px;
    margin: auto;
  
    background-image: url(/public/assets/form-city-min.jpeg);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    color: black;
    z-index: 1;
    transition: 0.5s;
    backdrop-filter: blur(15px);
  }
  .form {
    padding: 3em;
    font-size: 1.1em;
  }
}


 /* workaround */
.iti-mobile .intl-tel-input {
  display: table-cell;
}



.form-main {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(4,76,108, 1),  
      rgba(4,76,108, 0.25) 
    ),
    /* bottom, image */
   
    url(/public/assets/form-city-min.jpeg);
   
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 8em;
}

.form-affiliate-code {
  width: 100%;
  border: 1px solid  white;
  border-radius: 10px;
  padding: 1em 0.75em 0 0.75em;
  color: white;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.form select {
  width: 100%;
  padding: 0.5em;
  border: none;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 25px;
  background-image: url(/public/assets/form-city-min.jpeg);      
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  color: black;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(5px);
}
.country {
  margin-top: 25px;
}
.form input[type="checkbox"] {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 10px;
  cursor: pointer;
}
label {
  color: white;
}
.form-control {
 
  border: none;
}
.submit {
 background-color: white;
  margin-top: 45px;
  width: 100%;
  color: var(--main-blue);
  border-radius: 10px;
  padding: 0.5em 0;
  border: none;
  font-size: 1.35em;
  letter-spacing: 2px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  cursor: pointer;
}
.form-control label {
  display: inline-block;
  margin-bottom: 10px;
  color: white;
}
.form-control input {
  display: block;
  font-family: inherit;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  border: 0;
  background-image: url(/public/assets/form-city-min.jpeg);         
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  color: black;
  z-index: 1;
  transition: 0.5s;
  backdrop-filter: blur(5px);
  color: white;
  font-size: 1.1em;
}

.form-control input:focus {
  outline: 0;
}

.form-affiliate-code input {
  max-width: 300px;
  text-align: center;
  margin: auto;
  display: block;
 }
 .form-affiliate-code > p {
  padding-bottom: 1em;
 }
 option {
  background-color: var(--main-blue)
 }
.form-tc {
  color: white;
}

.errors{
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin: 1em;
  padding: 0.75em;
  border-radius: 10px;
  font-size: 1.05em;
  color: red;
}