@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,400;1,700;1,900&display=swap');

html{
  scroll-behavior: smooth;
}

.ifl-orange-text{
  color: #fd7e13;
}

.desktop__hero__img{
  display: none;
}
body{
font-size: 12px;
font-family: 'Roboto', sans-serif;
}

input::-webkit-input-placeholder, input:-ms-input-placeholder, input::placeholder  { /* Edge */
    font-family: 'Roboto', sans-serif;
}

.ifl__hero__lead > h1{
    font-weight: 900;
    color: white;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.ifl__hero__lead__subtitle{
  font-size: 1.2rem;
  color: #fd7e13;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.ifl__hero__benefits{
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
    padding-bottom:5px;
  background:
  linear-gradient(90.03deg, #FFFFFF 0.03%, rgba(255, 255, 255, 0) 99.97%)
    left 
    bottom
    rgba(119, 119, 119, 0)    
    no-repeat; 
  background-size:40% 1.5px 
}

.ifl__hero__icon__row{
    margin-bottom: 0.5rem;
}
.ifl__hero__icon{
    width: 2rem;
    margin-right: 1.5rem;
}

.mbl__icon__helper__text{
font-weight:700;
font-size:15px;
color:white;
margin:0;
}

.ifl-orange{
    color: var(--orange);
}


.ifl__form__widget__container{
    margin-top: -6rem;
    background-color: white;
    border-radius: 10px;
    width: 90%;
    min-height: 200px!important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-bottom: 1rem;
}

.ifl__form__wizard__card > .header > .heading{
  background-color: #fd7e13;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}



.ifl__form__wizard__card > .header{
    text-transform: uppercase;
    font-size: 1rem;
    color: white;
    font-weight: 900;
    padding-bottom: 3px;
    /* background:
    linear-gradient(90.03deg, rgba(255, 255, 255, 0) 0.03%, #1565D8 50.52%, rgba(255, 255, 255, 0) 99.97%)
    center 
    bottom
    rgba(119, 119, 119, 0)    
    no-repeat; 
  background-size:80% 1.5px; */
  margin-bottom:1.5rem;
}

.ifl__hero__section{
    /* background: linear-gradient(136.04deg, #1565D8 30.97%, #5C74FC 64.21%, #6DB8FE 95.91%); */
    background-color: #26598b;
    
    
}

.ifl__hero__section.animate__animated.animate__fadeIn{
  --animate-duration: 1.5s;
}


/* Text & Heading Styles */
.red-heading{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(233.17deg, #EE741D 21.57%, #FF5E3A 87.2%);
}

.heading-display{
  font-size:1.4rem
}


/* Wizard */
span{
  pointer-events: none;
}

span.dob__span {
  top: 6px;
  background-color: #BFFFE0;
  right: 6px;
  position: relative;
  border-radius: 5px;
  position: absolute;
  padding: 5px 10px 5px 10px;
}

span.dob__span.danger {
  top: 6px;
  background-color: #fbbaba!important;
  color: darkred!important;
  /* right: 6px;
  position: relative;
  border-radius: 5px;
  position: absolute;
  padding: 5px 10px 5px 10px; */
}

button:disabled{
background-color: gray;
}
.gender__selected, .smoking__selected{
  border:2px solid #1564d8!important;
  color: #1564d8!important;
}

.gender__select, .smoking__select{
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.gender__select__btn:focus, .smoking__select__btn:focus {
  outline: none;
  box-shadow: none;
}

.gender__select > li{
  margin: 1rem auto;
  
}

.gender__select > li > button, .smoking__select > li > button{
 height: 40px;
 border: 1px solid gray;
 color: gray;
 font-size: 1.2rem;
 width: 80%;
 border-radius:5px;

}

.input-label{
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: #1564d8;
    text-transform: uppercase;
}

.next__btn__0{
    width: 100%;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    background-color: #1564d8;
    border: 0;
    border-radius: 10px;
}

.next__btn{
    width: 79%;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    background-color: #1564d8;
    border: 0;
    border-radius: 10px;
}

.prev__btn{
    width: 19%;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    background-color: #516a8e;
    border: 0;
    border-radius: 10px;
}

/* Style the form */
#regForm {
    background-color: #ffffff;
    margin: 100px auto;
    padding: 40px;
    width: 70%;
    min-width: 300px;
  }
  
  /* Style the input fields */
  input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    border: 1px solid #aaaaaa;
    border-radius: 5px;
  }
  
  /* Mark input boxes that gets an error on validation: */
  input.invalid {
    background-color: #ffdddd;
  }
  
  /* Hide all steps by default: */
  .tab {
    display: none;
  }
  
  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }
  
  /* Mark the active step: */
  .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #1564d8;
  }

  /* Reasons to buy IFL moneyplan */
  .content__card{
    box-shadow: 0px 4px 4px 2px rgb(0 0 0 / 12%);
    border-radius: 5px;
    min-height: 4rem;
    margin: 3rem auto;
    padding: 1rem 1rem;
    font-size: 0.7rem;
    width: 90%;
    padding-top: 2rem;
    padding-left: 3rem;
    margin-top: 3rem;
    position: relative;
  }

  .content__card__number{
    font-size: 3rem;
    font-weight: 700;
    top: -35px;
    left: 7px;
    position: absolute;
  }
  
  .content__card__content{
  font-size: inherit;  
  }

  h3.mbl__benefits__section__heading {
    font-size: 1.6rem;
    width: 90%;
    margin: 0 auto!important;
    font-weight: 900;
    color: #144B81;
}


/* v2 */



ul.gender__select.v2 >li {
  width: 33%;
}

.gender__select.v2>li>.gender__select__btn, .smoking__select__btn{
font-size:0.8rem;
/* text-align: left; */
width:90%;
background-color:white;
}

ul.gender__select.v2.mb-4.li-inline {
  margin-top: -18px;
}

ul.smoking__select.v2 >li {
  width: 33%;
}

.smoking__select.v2>li>.smoking__select__btn{
font-size:0.8rem;
/* text-align: left; */
width:90%;
}

ul.smoking__select.v2.mb-4.li-inline {
  margin-top: -18px;
}

.otp__submit__button {
  top: 5px;
    background-color: #1F67DD;
    box-shadow: 0px 0px 3px 0px #949494;
    right: 6px;
    border-radius: 5px;
    position: absolute;
    padding: 5px 9px 5px 9px;
    color: white;
    border: 0;
    pointer-events: all;
}

.otp__submit__button:hover{
  outline: 0!important;
  background-color: #113c84;
}

#otp-verify{
  width: 50%;
}

#otp-verify-btn{
  width: 47%;
    float: right;
    height: 46px;
    border: 0;
    border-radius: 5px;
    background-color: #4F5A83;
    color: white;
    text-transform: uppercase;
    font-weight: 500;
}

input, #otp-verify::-webkit-input-placeholder, #mobile::-webkit-input-placeholder{
font-size:0.8rem;
font-weight:400;
}

.mbl__submit__button > .btn, .footer__cta__buton {
  background-color: #f46d27;
  font-size: 1.3rem;;
}

.selected > span > i, .selected > span{
  color: #f46d27;
}

/* Add class to selected button */
button.selected{
  border-color: #f46d27!important;
}

.ifl__form__widget__container.animate__animated.animate__fadeInUp, 
.mbl__reasonstobuy__container.animate__animated.animate__fadeInUp,
.benefits__container.animate__animated.animate__fadeInUp,
.footer__container.animate__animated.animate__fadeInUp{
  --animate-duration: 1.5s;

}


/* Date input hide prompt and dropdown selector */
input::-webkit-calendar-picker-indicator{
  display: none;
}
input[type="date"]::-webkit-input-placeholder{ 
  visibility: hidden !important;
}

/* Benefits section iamges */
img.img-fluid.mx-auto.d-block.my-5.benefits__img.float-left {
  width: 50%;
}

.hero__background__image{
  /* background-image: url(assets/img/ifl__hero__bg__alt.png); */
  background-size: auto;
  position: absolute;
  height: 350px;
  background-repeat: no-repeat;
  /* width: 96%; */
  top: 49px;
  background-size: 231px;
  background-position: 164px 100px;
  z-index: -1;
}


.danger-select {
  color: #dc3545!important;
  border-color: #dc3545!important;
}

.desktop{
  display: none;
}

.p-relative{
  position: relative;
}

.p-absolute{
  position: absolute;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.sample-illustration-header-row > th{
background-color: #144b81;
color: white;
}

.custom-align{
  text-align: left!important;
}

h6.custom-align{
  margin-left: 18px;
}

h3.sample-illustration-heading{
  margin-top: 4rem!important;
    font-size: 1.6;
    color: #144B81;
    font-weight: 600;
    margin-left: 16px;
}


/* h3.sample-illustration-heading{
  font-size: 1.6rem;
  width: 90%;
  font-weight: 600; */
  


.bottom-cta-margins{
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Media queries for Desktop */
@media only screen and (min-width: 762px) {
  
  h3.sample-illustration-heading{
    margin-top: 4rem!important;
      font-size: 3rem;
      color: #144B81;
      font-weight: 600;
      margin-left: 16px;
  }
  
  .desktop{
    display: block;
  }

  .custom-align{
    text-align: center!important;
  }

  .bottom-cta-margins{
    margin: 6rem auto 6rem auto;
  }

  h6.custom-align{
    margin-left: auto;
  }
  .section.hero__section{
    background-color: #144b81;
  }
      .ifl__form__widget__container{
        width: 50%!important;
      position: absolute;
      top: 12.7rem;
      right: 10%;
      width: 35%!important;
      background: linear-gradient(315deg, #144b81 1.9%, rgb(86 154 252 / 20%) 83.91%);
      }
        
        
      
      
      .ifl__hero__section{
        background:none;
      }

      .ifl__hero__lead__subtitle{
        margin-top: 6rem;
        font-size: 1.8rem;
        color: #f46d27;
        margin-bottom: 0rem;
        font-weight: 700;
      }
      
      .lead.ifl__hero__lead{
        font-size: 2rem;
      }
      
      .lead.ifl__hero__lead > h1{
        font-size: 2.4rem;
      }

      .desktop__hero__bg__img{
        display: block;
        background: url(assets/img/desktop__hero__img.png);
        height: 100%;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: left;
        position: absolute;
        width: 100%;
        right: 50px;
      }

      .hero__headline__benefits__container{
        margin-top: -15%;
      }

      .container{
        max-width: 80%!important;
      }

      .desktop__hero__img{
        width: 40%;
        display: block;
      }

      /* .ifl__form__wizard__card > .header > .heading{
        background: none;
      } */

      .input-label{
        color: white;
      }
      .disclaimer{
        color: white;
      }
      .ifl__form__widget__container{
        box-shadow: none;
        z-index: 1000;
      }

      .text-danger{
        color: #ffb3b3!important;
      }

      input{
        height: 30px;
      }

      span.dob__span {
        top: 5px;
        background-color: #BFFFE0;
        right: 5px;
        position: relative;
        border-radius: 5px;
        position: absolute;
        padding: 3px 10px 3px 10px;
        font-size: 0.6rem;
    }

    .gender__select > li > button, .smoking__select > li > button {
      height: 30px;
      border: 1px solid gray;
      color: gray;
      font-size: 1.2rem;
      width: 80%;
      border-radius: 5px;
  }

  .otp__submit__button {
    top: 4px;
    background-color: #1F67DD;
    box-shadow: 0px 0px 3px 0px #949494;
    right: 4px;
    border-radius: 5px;
    position: absolute;
    padding: 3px 9px 3px 9px;
    color: white;
    border: 0;
    pointer-events: all;
    font-size: 0.7rem;
}

.custom-margin-gender-validation{
  margin-bottom: 6px;
  margin-top: -15px;
}


p.form-validation-message.d-inline-block-c{
  display: inline-block;
  /* float: left; */
  margin-right: 5px;
  margin-bottom:0!important;
  letter-spacing: 0.6px;
}

.mbl__reasonstobuy__container.container{
margin-top: 5rem!important;
}

#email-validation-message, #fullname-validation-message{
  margin-bottom: 0!important;
}
.text-success{
  color: #93ffac!important;
}

.content__card {
  box-shadow: 0px 4px 4px 2px rgb(0 0 0 / 12%);
  border-radius: 5px;
  min-height: 9rem;
  margin: 3rem auto;
  padding: 1rem 1rem;
  font-size: 0.7rem;
  width: 90%;
  padding-top: 2rem;
  padding-left: 4rem;
  margin-top: 3rem;
  position: relative;
  padding-bottom: 2rem;
  margin-bottom: 5rem;
  font-size: 1rem;
}

.six-reasons-six{
  height: 6.9rem;
    margin-right: 1rem;
    pointer-events: none;
    margin-top: -1.5rem;
}


.benefits__img__col{
  text-align: center;
}

.benefits__img{
  float: none;
  width: 25%!important;
}

.mbl{
  display: none;
}

.mbl__benefits__section__heading{
  font-size: 3rem;
}

h3.mbl__benefits__section__heading{
  margin-top: 4rem!important;
  font-size: 3rem;
}

.red-heading{
  font-size: 3rem;
}
.text-left{
  text-align: left!important;
}

.custom-six-align-desktop{
  font-size: 7.9rem;
  top: -25px;
  left: 451px;
}

.ifl-blue-heading{
  color:#144B81;
  font-weight: 600;
}

#resend-otp{
  color: white;
  text-decoration: underline;
}

.bottom-white-gradient{
  font-size: 1rem;
    color: white;
    text-transform: uppercase;
    padding-bottom: 5px;
    /* background: linear-gradient(90.03deg, rgba(255, 255, 255, 0) 0.03%, #FFFFFF 50.52%, rgba(255, 255, 255, 0) 99.97%) center bottom rgba(119, 119, 119, 0) no-repeat!important; */
    background-size: 40% 1.5px!important;
}

#disclaimer-checkbox-ifl{
  margin-top: -4px;
}

    }

  /* Media queries for Tablet */
@media only screen and (max-width: 1200px){
  .lead.ifl__hero__lead.animate__animated.animate__fadeInUp>h1{
    font-size: 1.5rem;
  }
}


/* Media queries for MD to LG */
@media only screen and (min-width: 1200px){

  .content__card {
    box-shadow: 0px 4px 4px 2px rgb(0 0 0 / 12%);
    border-radius: 5px;
    min-height: 9rem;
    margin: 3rem auto;
    padding: 1rem 1rem;
    font-size: 0.7rem;
    width: 90%;
    padding-top: 2rem;
    padding-left: 4rem;
    margin-top: 3rem;
    position: relative;
    padding-bottom: 2rem;
    margin-bottom: 5rem;
    font-size: 1rem;
  }
}