@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&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');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

:root{
  --color-corp: #38BFD2;
  --color-gray-lightest: #D9D9D9;
  --color-gray-dark: #414141;
  --color-milk: #F3F3F3;
  --color-stone: #788395;
}

.img-optimized {
    image-rendering: -webkit-optimize-contrast;
}

@media (min-width: 768px) {
    .h-md-100 {
        height: 100% !important;
    }
}

.fw-initial {
    font-family: 'Poppins', sans-serif !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
}

body {
    overflow-x: hidden;
}

.btn-primary {
    position: relative;
}

@-webkit-keyframes popcircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  99% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}

@keyframes popcircle {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  99% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
  }
}


.btn-primary::before {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: popcircle;
    animation-name: popcircle;
    border: 3px solid #38bfd2;
    border-radius: 100px;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.bottom-panel {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #fff;
}

@media(max-width:768px){
  .selectCity {
    height: initial !important;
  }
  
  .custom-input .form-check-input {
     font-size: 34px !important;
          min-width: 36px;
    min-height: 36px;

  }
  
  .form-check-label br {
     display: none;
  }
  
  .fs-4 {
      font-size: 14px !important;
  }
  
  .fs-3 {
      font-size: 17px !important;
  }
  
}

body{
  font-family: 'Poppins', sans-serif;
  background: #F5F5F5;
}
h1{
  font-family: 'Bebas Neue', sans-serif;
}
.font-family-bebas{
  font-family: 'Bebas Neue', sans-serif !important;
}
.text-corp{
  color: var(--color-corp);
}
.text-yellow{
  color: #FFD122;
}
.text-stone{
  color: var(--color-stone);
}
.bg-corp{
  background: var(--color-corp);
}

.bg-milk{
  background: var(--color-milk);
}

.bg-gray{
  background: #D1D1D1;
}

.btn-signup, .btn-more{
  border: 1px solid var(--color-corp);
  border-radius: 33px;
  text-decoration: none;
}
.btn-signup{
  margin-left:100px !important;
  padding: 13px 35px !important;
}
.btn-more{
  padding: 14px 1px;
}
.btn-registration, .btn-img-banner{
  border-radius: 19px;
  text-decoration: none;
  padding: 14px 1px;
}
.btn-registration{
  border: 1px solid var(--color-corp);
}
.btn-img-banner{
  border: 2px solid white;
}
.fs-15{
  font-size: 15px;
}
.text-gray-dark{
  color: var(--color-gray-dark);
}
.text-gray-light{
  color: #5F5959;
}
.text-gray-lighter{
  color:#8C8C8C;
}
.text-gray-lightest{
  color: var(--color-gray-lightest);
}
.text-gray-westminster{
  color:#CCCBCB;
}
.rounded-input{
  border-radius: 30px;
  box-shadow: 0px 3px 8px 4px #EBEBEB;
  padding: 7px 1px 7px 10px;
  position: relative;
  bottom:488px;
  left:10px;
}
.rounded-border{
  border-radius: 25px 25px 25px 0;
}
.girl-banner{
  height:600px;
}
.rating-banner{
  height:150px;
  position: relative;
  bottom: 60px;
  left:250px;
}
.margin-top-180{
  margin-top: 180px;
}
.card-more{
  padding: 50px 20px;
}
.card-shadow{
  box-shadow: 0px 3px 8px 4px #EBEBEB;
  border: 0;
}
.boost-shadow{
  box-shadow: 0px 4px 50px 14px #CCCCCC40;
  border:0;
}
.fs-150{
  font-size: 150px;
}
.fs-60{
  font-size: 60px;
}
.fs-45{
  font-size: 45px;
}
.fs-110{
  font-size: 110px;
}
.fs-18{
  font-size:18px;
}
.w-200{
  width:200px;
}
.line{
  width:300px;
  height:1px;
  background: #AFAFAF;
  border: 1px solid #AFAFAF;
}
.check{
  list-style: none;
  margin-right: 90px;
}
.margin-start-85{
  margin-left: 85px;
}
.margin-start-35{
  margin-left: 35px;
}
.check-icon{
  bottom: 43px;
}
#card-left{
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  border-radius: 20px 0 0 20px;
}
#card-right{
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0 20px 20px 0;
}
#card-center{
  border-top: 0;
  border-bottom: 0;
}
.card-border{
  border: 1px solid #535353;
}
.line-height-1{
  line-height: 1px;
}
.line-height-37{
  line-height: 37px;
}
.line-height-10{
  line-height: 10px;
}
.bg-img-blue{
  background-image: url("images/blue_banner.png");
  background-color: #cccccc;
  background-size: cover;
}
.p-80{
  padding: 80px 130px 40px 170px;
}

/*quizIntro.html*/
.quizIntro{
  padding-top: 200px;
}

.quizIntro h2{
  font-size: 42px;
  font-weight: 700;
  line-height: 60px;
}

.line-black{
  border: 3.5px solid black;
  width: 80px;
  border-radius: 20px;
}

.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-corp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-corp);
  --bs-btn-active-color: var(--color-corp);
  --bs-btn-active-bg: #fff;
  border: 0;
  padding: 18px 8px;
  width: 200px;
  font-weight: bold;
}

/*selectCourse.html*/
.custom-input .form-check-input{
  font-size: 50px;
  border: 2px solid var(--color-corp);
}

.form-check-input:checked{
  background-color: var(--color-corp);
  border-color: var(--color-corp);
}

.progress{
  height: 7px;
  background: var(--color-gray-lightest);
}

.progress-label::before{
  content: url('images/progress-dot.png');
  position: absolute;
  padding-top: 29px;
}

.bi-arrow-left-short{
  padding: 5px 10px;
  border: 2px solid var(--color-gray-lightest);
}

.fw-extrabold{
  font-weight: 800;
}

/*Select city*/
.selectCity{
  height: 100vh;
}

/*fillForm.html*/
.fillForm{
  padding: 73px 150px 0 150px;
}

.fillForm-box{
  box-shadow: 0px 3.522388219833374px 44.02985382080078px 12.32835865020752px #CCCCCC40;
}


/*Timeline*/
body{margin-top:20px;}
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem;
}

@media (min-width:768px) {
    .timeline-steps .timeline-step:not(:last-child):after {
        content: "";
        display: block;
        border-top: .1rem solid var(--color-gray-dark);
        width: 10.25rem;
        position: absolute;
        left: 7.5rem;
        top: .7rem;
    }
    .timeline-steps .timeline-step:not(:first-child):before {
        content: "";
        display: block;
        border-top: .1rem solid var(--color-gray-dark);
        width: 10.25rem;
        position: absolute;
        right: 7.5rem;
        top: .7rem;
    }
}

.timeline-steps .timeline-content {
    width: 11rem;
    text-align: center;
}

.timeline-steps .timeline-content .inner-circle {
    border-radius: 1.5rem;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #38BFD2;
}

@media (min-width: 778px) {
    .w-lg-75 {
        width: 75%;
    }
}

/* Media */
@media (max-width: 992px) {
  .quizIntro h2 {
    font-size: 21px;
    line-height: 27px;
  }
  
  .quizIntro {
    padding-top: 40px;
  }
  
  .fillForm {
    padding: 15px 15px 0 15px;
  }
  
  #fillForm-number option{
    font-size: 10px;
  }

  .img-home {
    height: 190px;
    width: 100%;
    object-fit: cover;
  }

  .telephone {
    font-size: 26px;
  }
  
  .text-heading {
    font-size: 17px;
  }
  
  .text-heading br {
      display: none;
  }
  
  .fillForm-box .form-check-label {
     position: relative;
     top: -26px;
     width: 100%;
  }
}