/*
Theme Name: ecenter Child
Author: RSTheme
Author URI: http://www.rstheme.com
Description: Ecenter - WordPress Theme
Template: ecenter
Version: 1.0.9
Text Domain: ecenter
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, creative, portfolio
*/

/* Add your custom styles here */

    .progress-bar {
      background-color: #e0e0e0;
      border-radius: 4px;
      height: 6px;
      margin-bottom: 10px;
      overflow: hidden;
    }

    .progress {
      background-color: #1686e5;
      height: 100%;
      transition: width 0.3s ease-in-out;
    }

    .step {
      display: none;
    }

    .step.active {
      display: block;
      animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .controls {
      margin-top: 20px;
      text-align: right;
    }

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

    .tile {
      height: 145px;
      width: 145px;
      position: relative;
      display: inline-block;
  }
  .tile input[type="checkbox"]{
/*       -webkit-appearance: none; */
      position: relative;
      height: 100%;
      width: 100%;
      background-color: #ffffff;
      border-radius: 10px;
      cursor: pointer;
      border: 3px solid transparent;
      outline: none;
      box-shadow: 15px 15px 25px rgba(2,28,53,0.05);
  }
  .tile input[type="radio"]{
    -webkit-appearance: none;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    border: 3px solid transparent;
    outline: none;
    box-shadow: 15px 15px 25px rgba(2,28,53,0.05);
}
  .tile input[type="checkbox"]:after{
      position: absolute;
      font-family: "Font Awesome 5 Free";
      font-weight: 400;
      content: "\f111";
      font-size: 22px;
      top: 10px;
      left: 10px;
      color: #e2e6f3;
  }

  .tile input[type="radio"]:after{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f111";
    font-size: 22px;
    top: 10px;
    left: 10px;
    color: #e2e6f3;
}
  /*.tile input[type="checkbox"]:hover{
      transform: scale(1.08);
  }*/
  .tile input[type="checkbox"]:checked{
      border: 3px solid #478bfb;
  }
  .tile input[type="radio"]:checked{
    border: 3px solid #478bfb;
}
  input[type="checkbox"]:checked:after{
      font-weight: 900;
      content: "\f058";
      color: #478bfb;
  }
  input[type="radio"]:checked:after{
    font-weight: 900;
    content: "\f058";
    color: #478bfb;
}
  .tile label{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
/*       gap: 20px;
      height: 80%;
      width: 100%; */
      position: absolute;
      bottom: 0;
      cursor: pointer;
  }
  .tile label .fas{
      font-size: 60px;
      color: #2c2c51;
  }
  .tile input[type="checkbox"]:checked + label .fas{
      animation: grow 0.5s;
  }
  @keyframes grow{
      50%{
          font-size: 80px;
      }
  }
  .tile label h6 {
      font-size: 15px;
      font-weight: 600;
      color: #000;
  }
  .tile img {
      width: 50px;
  }
  .multisteps-parent-form input {
    margin-bottom: 0 !important;
}
.iti {
  display: block !important;
}

button.iti__selected-country, button.iti__selected-country:hover {
  background: none;
}




/*******   MULTIPLE STEP FORM ********/
.step {
  display: none;
}

.step.active {
  display: block;
}

.error-message {
  color: red;
  display: none;
}

.image-pos {
  position: relative;
}

.image-pos h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
font-size: 26px;
line-height: 30px;
}


.mb-3.check-text label {
  font-size: 13px;
  font-weight: 400;
  text-transform: capitalize;
}

.iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
  margin-bottom: 10px;
}

ul.classList li {
  margin-bottom: 5px;
}
.tile label h6{
  padding: 10px;
}
div#secondary-school-years {
  	display: flex;
    justify-content: space-between;
	flex-direction:column !important;
}
ul.check-list-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
h2.verification {
  font-size: 20px;
  color: #6D6D6D;
}

/* multi step css from ftp */

.google-btn {
    text-align: center;
}

button.g-btn {
    background: #fff;
    color: black;
    border: 2px solid black;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 800;
    padding: 10px 60px;
}

button.g-btn:hover {
    background: rgb(207 228 255);
}
.code-btn{
    background: #fff !important;
    color: black !important;
    border: 2px solid black !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 11px 40px !important;
    height: fit-content;
}
.code-btn:hover{
    background: rgb(207 228 255) !important;
}
.optionor {
    padding: 10px;
    text-align: center;
}

.divider {
    display: flex;
    align-items: center;
    padding: 0 20px;
	color: #a3a3a3 !important;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #a3a3a3;
}

.divider::before {
    margin-right: 10px;
}

.divider::after {
    margin-left: 10px;
}

.form-width {
    width: 75%;
}

.form-center {
    display: flex;
    justify-content: center;
}

.row.padding- .col-lg-12 {
    background: #f2f3f5;
}

.form-width input {
    padding: 10px !important;
}

.image-pos img {
    height: 100%;
}

.form-center-2 {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
/*     align-items: center; */
}


.create-btn {
    width: 100%;
    background: rgb(207 228 255) !important;
    border: 2px solid black !important;
    border-radius: 10px !important;
    color: black !important;
    font-size: 18px;
    font-weight: 800 !important;
    padding: 12px 60px;
}
.iti.iti--allow-dropdown.iti--show-flags.iti--inline-dropdown {
    margin-right: 10px !important;
}

.create-btn:hover {
    background: white !important;
}

.mb-3.check-text label a {
    color: blue;
}

.otp-flex {
    display: flex;
}
input#verification_code {
    width: 75%;
}
.step-2-btn{
    color: black !important;
    border-radius: 10px !important;
    border: 2px solid black;
    background: white !important;
	font-size:18px;
}
.contt{
	color: black !important;
    border-radius: 10px !important;
    border: 2px solid black;
    background: white !important;
	width:50%;
	font-size:18px;
}
/* div#secondary-school-years {
    display: flex;
    justify-content: space-between;
    flex-direction: row !important;
} */
.dark-p{
    font-size: 15px;
}
.dark-i{
    font-size: 13px;
}
.hr-margin{
    margin-top: 0px !important;
}


/*css extra*/
.option_item .option_inner {
  width: 180px;
  height: 100%;
  background: #fff;
  border-radius: 5px;
  text-align: center;
  padding: 30px 35px;
  cursor: pointer;
  color: #585c68;
  display: block;
  border: 5px solid #ddefff;
  position: relative;
}

.option_item .option_inner .icon {
  margin-bottom: 10px;
}

.option_item .option_inner .icon .fab {
  font-size: 32px;
}

.option_item .option_inner .name {
  user-select: none;
}

.option_item .checkbox:checked ~ .option_inner.facebook {
  border-color: #3b5999;
  color: #3b5999;
}

.option_item .checkbox:checked ~ .option_inner.twitter {
  border-color: #55acee;
  color: #55acee;
}

.option_item .checkbox:checked ~ .option_inner.instagram {
  border-color: #e4405f;
  color: #e4405f;
}

.option_item .checkbox:checked ~ .option_inner.linkedin {
  border-color: #0077b5;
  color: #0077b5;
}

.option_item .checkbox:checked ~ .option_inner.whatsapp {
  border-color: #25d366;
  color: #25d366;
}

.option_item .checkbox:checked ~ .option_inner.google {
  border-color: #dd4b39;
  color: #dd4b39;
}

.option_item .checkbox:checked ~ .option_inner.reddit {
  border-color: #ff5700;
  color: #ff5700;
}

.option_item .checkbox:checked ~ .option_inner.quora {
  border-color: #b92b27;
  color: #b92b27;
}

.option_item .option_inner .tickmark {
    position: absolute;
    top: 0;
    right: 0;
    border: 20px solid;
    border-color: #000 transparent transparent #000;
    display: none;
    rotate: 90deg;
}

.option_item .option_inner .tickmark:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -20px;
    width: 15px;
    height: 5px;
    border: 3px solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(-132deg);
}

.option_item .checkbox:checked ~ .option_inner .tickmark {
  display: block;
}


.option_item .option_inner.twitter .tickmark {
  border-color: #55acee transparent transparent #55acee;
}

.tile label{
    gap: unset;
    height: auto;
    width: auto;
}
input#secondary-school {
    visibility: hidden;
}
input#primary-school {
    visibility: hidden;
}

.tile{
    width: 100% !important;
}

.subject .option_item .option_inner {
    width: 150px !important;
    height: 150px !important;
}
.subject input.checkbox {
    visibility: hidden;
}
.offer{
    font-size: 15px;
    color: blue !important;
}
/* @media screen and (min-width: 480px){
	.form-width {
    width: 100% !important;
}
} */


input {
    border: 2px solid #dddddd !important;
}
input#agreement {
    height: 35px;
    width: 40px;
}
.check-adj{
	display:flex;
}
.otp-info-text{
	color:black;
	font-size:13px;
	width: 40%;
}

.we-offer-text{
		margin-top: 15px;
    color: #0b2fac;
    font-size: 15px;
	margin-bottom:0px;
	text-align:center;
}
.child-no-info{
	font-size:14px;
	color:black;
	margin-bottom:0px;
}
.col-md-5.mb-3.child-no-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 15px;
	  padding-left: 0px;
}
ul.check-list-flex li {
    margin: 7px;
}
.step-3 .option_item .option_inner .tickmark {
    position: absolute;
    top: 75%;
    right: 0;
    border: 20px solid;
    border-color: #55acee transparent transparent #55acee;
    display: none;
    rotate: 180deg;
}
.step-3 .option_item .option_inner .tickmark:before {
    content: "";
    position: absolute;
    top: -10px;
    left: -20px;
    width: 15px;
    height: 5px;
    border: 3px solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(-224deg);
}


@media screen and (max-width: 767px){
	.col-md-5.mb-3.child-no-block{
		padding-left:15px;
		padding-top:0px;
	}
	.col-md-6.d-flex.check-adj{
		flex-wrap: wrap;
	}
	input#verification_submit {
    margin-top: 10px;
}
	.col-width{
		width:50%;
	}
	.tile {
    padding: 3px;
}
	.multi-choose .col-md-3 {
    margin-bottom: 10px;
    width: 50%;
}
	.container.step-4 {
    padding: 0px;
}
	.elementor-element.elementor-element-dd0bc9f.e-flex.e-con-boxed.e-con.e-parent{
		padding:0px;
	}
	.subject .container {
    padding-left: 0px !important;
}
	button.g-btn {
    font-size: 12px;
	padding:10px 35px;
	width:100%;
}
	p.otp-info-text {
    width: auto;
    padding: 10px 15px 0px 15px;
		text-align:center;
}
	.we-offer-text{
		display:block;
		width:100%;
		text-align:left;
		padding-left:20px;
	}
	ul.check-list-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
	.contt{
		width:100%;
	}
}