@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

/* body {
  background-image: url("./images/bg.png");
  width: 100%;

  background-position: center;

  background-size: cover;
  background-repeat: no-repeat;
} */
body {
  background: url("../images/bg.png") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}

#signup_wrapper {
  margin-top: 160px;
}
/* ----------- media-query -------- */
@media (max-width: 768px) {
  .background-image {
    background-position: center;
  }
}
@media (max-width: 1000px) {
  #signup_wrapper {
    margin-top: 50px;
  }
}
/* ----------- media-query -------- */
.form-control {
  height: 45px !important;
}
.navbar {
  background-color: white;
  overflow: hidden;
}

/* Add styles for the logo */
.logo {
  padding-left: 10%;
  float: left;
}

.text-center {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin-top: 25px;
}

h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 750;
  font-size: 37px;
  line-height: 45px;
  text-align: left;
  vertical-align: top;
  letter-spacing: -0.17px;
  margin-top: 18px;
}

h2 {
  text-align: left;
  color: #ffffff;
  padding-left: 10%;
  padding-top: 10%;
  padding-right: 50%;
}

.text-justify {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.17;
  text-align: left;
  vertical-align: top;
  color: #ffffff;
  padding-left: 10%;
  margin-top: 10px;
}
.text-justify::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c"; /* Unicode character for Font Awesome check icon */
  margin-right: 15px;
  color: #ffffff;
}
.form {
  /* position: absolute;
  right: 12%; */
  /* transform: translateY(-65%); */
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* @media (max-width: 1100px) {
  .form {
    right: 0%;
    transform: translateY(-50%);
  }
}
@media (max-width: 787px) {
  .form {
    right: 0%;
    transform: translateY(0%);
  }
} */
.check {
  margin-right: 10px;
}

label {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.17px;
  margin-top: 10px;
}

.terms-services {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 13px;
  margin-left: 10px;
  /* color:black */
  /* line-height: 20px;
    line-height: 116%; */
  /* vertical-align: Top; */
  fill: Solid, #679bff;
  text-decoration: none;
  position: relative;
  top: -10px;
  left: 8px;
}

.log-in {
  font-family: "Poppins" sans-serif;
  font-weight: 630;
  font-size: 14px;
  line-height: 18px;
  line-height: 100%;
  vertical-align: Top;
  letter-spacing: -0.17px;
  text-decoration: none;
}

.term-policy {
  text-decoration: none;
}

.email-signup {
  display: block;
  margin: 0px !important;
  position: relative;
  top: -15px;
  /* margin-top: 10px; */
}

.email-signup:disabled {
  background-color: #d3d3d3 !important;
  border: 1px solid #d3d3d3;
  color: #555;
  font-weight: 600;
  font-size: 16px;
  font-family: "Poppins" sans-serif;
  padding: 10px 0px;
}

.email-signup:not(:disabled) {
  background-color: black;
  color: white;
  font-weight: 600;
  font-size: 16px;
  font-family: "Poppins" sans-serif;
  padding: 10px 0px;
}
/* .phone_number{
  width:412px;
} */

.validEmail {
  color: red;
  font-size: 13px;
}

/* country flag dropdown css */
/* ------------------------------- */
.iti__flag.iti__us {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background-position: -5263px 0;
}
.iti__flag-box div {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background-position: -5263px 0;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: transparent !important;
  /* border-radius: 50% !important; */
  border: none!important;
}
.iti--separate-dial-code .iti__selected-flag:focus{
  outline: none!important;
}
.iti__selected-flag div:first-child {
  border-radius: 50%;
  height: 20px !important;
}
.iti {
  display: block !important;
}
.iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #555;
}
.iti__arrow--up {
  border-bottom: none !important;
}

.iti__country-list{
  width:411px;
  white-space:normal;
}

/* ---------media query------- */
@media(max-width:1500px){
  .iti__country-list{
    width:354px;
  }
}
@media(max-width:1597px) and (min-width:1580px){
  .iti__country-list{
    width:354px;
  }
}
@media(max-width:1580px) and (min-width:1530px){
  .iti__country-list{
    width:345px;
  }
}
@media(max-width:1530px) and (min-width:1460px){
  .iti__country-list{
    width:333px;
  }
}
@media(max-width:1460px) and (min-width:1430px){
  .iti__country-list{
    width:320px;
  }
}
/* @media(max-width:1448px) and (min-width:1431px){
  .iti__country-list{
    width:313px;
  }
} */
/* @media(max-width:1447px){
  .iti__country-list{
    width:354px;
  }
} */
@media(max-width:1432px){
  .iti__country-list{
    width:312px;
  }
}
@media(max-width:1405px){
  .iti__country-list{
    width:306px;
  }
}
@media(max-width:1405px) and (min-width:1380px){
  .iti__country-list{
    width:300px;
  }
}
@media(max-width:1380px) and (min-width:1300px){
  .iti__country-list{
    width:287px;
  }
}
@media(max-width:1300px) and (min-width:1240px){
  .iti__country-list{
    width:271px;
  }
}
@media(max-width:1240px) and (min-width:1220px){
  .iti__country-list{
    width:261px;
  }
}
@media(max-width:1220px) and (min-width:1200px){
  .iti__country-list{
    width:259px;
  }
}
@media(max-width:1200px) and (min-width:1170px){
  .iti__country-list{
    width:352px;
  }
}
@media(max-width:1170px) and (min-width:1140px){
  .iti__country-list{
    width:344px;
  }
}
@media(max-width:1140px) and (min-width:1120px){
  .iti__country-list{
    width:331px;
  }
}
@media(max-width:1120px) and (min-width:1100px){
  .iti__country-list{
    width:328px;
  }
}
@media(max-width:1050px) and (min-width:999px){
  .iti__country-list{
    width:304px;
  }
}
@media(max-width:999px) and (min-width:992px){
  .iti__country-list{
    width:288px;
  }
}
@media(max-width:992px) and (min-width:955px){
  .iti__country-list{
    width:597px;
  }
}
@media(max-width:955px) and (min-width:940px){
  .iti__country-list{
    width:578px;
  }
}
@media(max-width:938px) and (min-width:930px){
  .iti__country-list{
    width:570px;
  }
}
@media(max-width:930px) and (min-width:900px){
  .iti__country-list{
    width:552px;
  }
}
@media(max-width:900px) and (min-width:870px){
  .iti__country-list{
    width:540px;
  }
}
@media(max-width:870px) and (min-width:855px){
  .iti__country-list{
    width:520px;
  }
}
@media(max-width:855px) and (min-width:830px){
  .iti__country-list{
    width:510px;
  }
}
@media(max-width:830px) and (min-width:810px){
  .iti__country-list{
    width:500px;
  }
}
@media(max-width:810px) and (min-width:767px){
  .iti__country-list{
    width:460px;
  }
}
@media(max-width:767px) and (min-width:750px){
  .iti__country-list{
    width:703px;
  }
}
@media(max-width:750px) and (min-width:730px){
  .iti__country-list{
    width:685px;
  }
}
@media(max-width:730px) and (min-width:700px){
  .iti__country-list{
    width:650px;
  }
}
@media(max-width:700px) and (min-width:680px){
  .iti__country-list{
    width:630px;
  }
}
@media(max-width:680px) and (min-width:660px){
  .iti__country-list{
    width:610px;
  }
}
@media(max-width:680px) and (min-width:630px){
  .iti__country-list{
    width:590px;
  }
}
@media(max-width:630px) and (min-width:610px){
  .iti__country-list{
    width:565px;
  }
}
  @media(max-width:610px) and (min-width:580px){
    .iti__country-list{
      width:536px;
    }
  }
  @media(max-width:580px) and (min-width:490px){
    .iti__country-list{
      width:449px;
    }
  }
  @media(max-width:490px) and (min-width:450px){
    .iti__country-list{
      width:425px;
    }
  }
/* 
----------------------- */


/* --------custom checkbox--------------------- */

input[type="checkbox"] {
  display: none;
}

/* style the label to look like a checkbox */
#checkbox label {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  letter-spacing: 0px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  top: -10px;
  /* padding-top: 3px; */
  user-select: none;
  line-height: 1.5;
}

/* create the checkbox icon */
#checkbox label:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 2px;
  background-color: #ffffff;
  width: 25px;
  border-radius: 7px;
  height: 25px;
  border: 1px solid #000000;
}
#checkbox label:after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold !important;
  content: "\f00c";
  display: inline-block;
  position: absolute;
  left: 7px;
  top: 4px;
  font-size: 14px;
  color: #fff;
}

/* style the checkbox icon when checked */
input[type="checkbox"]:checked + label:before {
  content: "";
  background-color: #000000 !important;
  border-color: #000000;
  border-radius: 7px;
}
input[type="checkbox"]:checked + label:after {
  color: #fff; /* change tick sign color */
  border-radius: 6px;
}