a {
      font-weight: bold;
    }

    .figure.img-center img {
      width: 100%;
      display: block;
      margin: auto;
    }

    body h1 {
      text-align: center !important;
      font-size: 32px;
    }

    body h2 {
      margin-top: 20px;
    }

    .register-area-form .register-form {
      background: none !important;
    }

    .register-area-form .register-form .login-footer2 {
      /* padding: 0; */
      padding: 20px 0 30px 0 !important;
      text-align: center;
      font-size: 18px;
      border-bottom: #a67f2d38 solid 1px;
    }

    .howto-heading {
      display: flex;
      border-bottom: #986969 solid 1px;
    }


    .howto-heading h2,
    .howto-heading p {
      flex-flow: row;
    }

    .howto-heading h2 {
      flex: 20%;
      color: #f8a981;
      /* border: #a67f2d solid 1px; */
      border-radius: 20px;
      text-align: center;
      background: #fff;
      padding: 15px 0;
      font-size: 18px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .howto-active h2 {
      flex: 20%;
      color: #F36F2D;
      border: #F36F2D solid 1px;
      border-radius: 10px;
      text-align: center;
      background: #f8a9813b;
      padding: 15px 0;
      font-size: 18px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .howto-heading p {
      flex: 80%;
      line-height: 1.3;
      align-self: center;
      padding: 3px 20px;
      margin-bottom: 0px !important;
      font-size: 1.8rem;

    }

    .howto-main {
      margin-top: 30px;
    }

    .howto-main .row:nth-child(2) {
      border: red solid 1px;
    }

    .howto-main .col-md-4 {
      padding: 0 20px 5px 20px;
    }

    .howto-main .step1-text p {
      line-height: 1.8em !important;
      margin-bottom: 20px;
    }

    .step1-text .list-group {
      border: #ffffff solid 1px;
      margin-bottom: 30px;
      font-size: 16px;
    }

    .step1-text .list-group li {
      /* padding: 15px 0; */
      margin-left: 30px;
    }

    .step1-text .list-group .active {
      padding: 10px 20px;
      margin-left: 0px !important;
      text-align: center;
      background: #F36F2D !important;
      color: #fff !important;
      border: none;
      margin-bottom: 10px;
    }


    .howto-main .step2-text p {
      line-height: 1.8em !important;
      margin: 20px;
      font-size: 1.8rem;
    }


    .howto-main .step2-cta,
    .howto-mobile .step2-cta {
      width: 100%;
      text-align: center;
      color: #fff !important;
      /* margin-top:50px; */
      margin-bottom: 40px
    }


    .howto-main .step2-cta a,
    .howto-mobile .step2-cta a {
      /* background: #a67f2d !important; */
      background: #F36F2D !important;
      /* padding: 20px 30px; */
      padding: 10px;
      color: #fff;
      border-radius: 5px;
      display: inline-block;
    }


    .howto-mobile .step2-cta a {
      padding: 8px;
    }

    /* .howto-active .step2-cta a{
        background: #a67f2d !important;
        padding: 20px 30px;
        color: #fff;
        border-radius: 5px;
      } */

    .howto-main .step3-text p {

      line-height: 1.8em !important;
      margin: 20px;
      font-size: 1.8rem;
    }

    .howto-main .step3-text .card .card-header,
    .howto-mobile .step3-text .card .card-header {
      background: #F36F2D 2e;
    }

    .howto-main .step3-text h4 i.fa-solid.fa-star,
    .howto-mobile .step3-text h4 i.fa-solid.fa-star {
      color: #F36F2D;
    }

    .howto-main .step3-text h4 {
      margin-bottom: 0px !important;
      border: none !important;
    }

    .howto-main .step3-text .card {
      border: transparent;
      margin-bottom: 20px;
    }

    .howto-main .step3-text .card ul li {
      font-size: 18px;
    }

    .step2-text,
    .step3-text {
      opacity: .5;
    }

    .howto-active {
      cursor: pointer;
      background: #ddcdcd1c;
      border: #986969 solid 1px;
      border-radius: 20px;
      margin-top: 50px;
      height: max-content;
      padding-top: 0px !important;

    }

    .opacity-50 {
      opacity: 0.5;
    }

    .hover-inactive {
      border: 1px solid transparent;
      border-radius: 20px;
      background: none;

    }


    .hover-active {
      border: #a67f2d solid 1px !important;
      border-radius: 20px !important;
    }


    .step-inactive {
      background: none !important;
      color: #986969 !important;
      border: none !important;
    }



    .howto-step:hover .step2-text,
    .howto-step:hover .step3-text {
      opacity: 1;
    }


    .ms-slide-bgcont {
      border-radius: 10px !important;
    }


    i.fa-solid.fa-star {
      margin-right: 5px;
    }


    /***************STEPS MOBILE ACCORDION STYLE***************/


    .panel-title-row {
      display: flex;
      align-items: center;
      column-gap: 5px;

    }


    .howto-mobile .panel .panel-heading {
      background: transparent !important;
    }

    .step {
      width: 70px;
      border-radius: 2px;
      font-size: 1.5rem;
      color: #fff;
      text-align: center !important;
      background: #f8a9813b;
      /*change to your desired bg color*/
      transition: all .5s;
      outline: 2px solid #F36F2D;
      /*change to your desired border color*/
      color: #F36F2D;
      /*change to your desired color*/
      padding: 15px 7px;
    }

    .step-text {

      font-size: 15px;
      padding-left: 46px;
      padding-top: 5px;
      color: #2D2E34;
      /*change to your desired color*/
      padding-inline: 2px !important;
    }

    .panel-default {
      border-color: transparent;
    }

    .panel {
      margin-bottom: 20px;
      background-color: transparent;
      border: 0px solid transparent;
      border-radius: 4px;
      -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
      box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
    }

    .panel-title {
      padding: 10px 8px;
      border-radius: 3px;

    }

    .panel.panel-default {
      margin-bottom: 10px;
    }

    .panel-default>.panel-heading {
      color: #333;
      background-color: transparent;
      border-color: transparent;
      padding: 0;
    }

    .panel-group .panel-heading+.panel-collapse .panel-body {
      border-top: 0px solid #ddd;
    }

    .panel-group {
      margin-bottom: 0px;
    }


    /*************START OF STYLE USED WITH JAVASCRIPT**********/

    /**to devs incharge-- change the bg-color and color according to your site color palette if you want **/

    .howto-mobile-active-heading {
      background-color: #0C1D32 !important;

    }


    .howto-mobile-active-title {
      color: #DBE7F5 !important;
    }




    .howto-mobile-active-step {
      background: #A67F2D !important;
      color: #DBE7F5 !important;
    }


    .howto-mobile-inactive-step {
      color: #986969 !important;

      outline: 2px solid transparent !important;
      background: transparent !important;
    }



    .howto-active-mobile {
      outline: 1px solid #986969;
      background-color: #ddcdcd1c !important;
    }


    .howto-active-mobile .panel-title {
      background: #ddcdcd1c !important;
    }



    /*************END OF  STYLE USED WITH JAVASCRIPT**********/


    /************END OF  STEP MOBILE ACCORDION STYLE***************/


    /*********** REGISTER FORM STYLE OVERRIDE*************/

    /* .register-area-form .register-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    }
     */
    @media screen and (min-width: 1024px) {

      .midcontarea {
        max-width: 100% !important;
        margin-inline: auto !important;
      }

      .register-area-form .register-form .form-group {
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
      }

      .register-area-form .register-form .form-group .birth_month {
        width: 30% !important;
      }

      .register-area-form .register-form .form-group label.col-lg-3.control-label {
        margin-right: auto;
        font-size: 15px;
        padding-inline: 0;
        line-height: 3rem;
        width: 100%;
        text-align: left;
      }

      .register-area-form .register-form .form-group .col-lg-9 {
        width: 100% !important;
      }

    }

    /************START OF MEDIA QUERIES*****************/

    @media screen and (max-width: 992px) {

      h1 {
        font-size: 2rem !important;
      }

      .howto-main {
        display: none;
      }

      .howto-mobile .list-group {
        width: 100%;
      }



      .step2-text,
      .step3-text {
        opacity: 1;
      }


      .howto-mobile {
        margin-top: 35px;
      }

      .howto-mobile .card {
        margin-bottom: 22px;
      }

    }



    @media screen and (min-width: 993px) {
      .howto-mobile {
        display: none;
      }

      label.col-lg-3.control-label {
        width: 10%;
      }
    }