@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

:root {
  --blue-color: #009ee0;
  --orange-color: #e85412;
  --color-black: #000000;
  --color-blanc: #ffffff;
  --border-radius: 4px;
}

/* Body Styles */
body {
  font-family: "Inter", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
  font-weight: 600 !important;
}
p {
  font-family: "Inter", sans-serif;
  font-weight: 400 !important;
}
.subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 600 !important;
}
button,
.btn {
  font-family: "Inter", sans-serif;
  font-weight: 500 !important;
}
a:hover {
  text-decoration: none;
}
/*Style header*/
header {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  height: 60px;
}

.dropdown-menu > li{
  color:#1A171B;
  text-align:center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.dropdown-menu > li:hover {
    background: #EBEDEE;
    border-radius: 4px;
}
.dropdown-menu > li > a{
  color:#1A171B;
}
.dropdown-menu > li.txt-ar> a > span{
  font-family: "Cairo", sans-serif;
}
#navbar2SupportedContent{
    padding-right: 0px !important;
    padding-left: 0px !important;
}
#dropdownMenu1{
   padding-right: 0px;
}
/*End style header*/
/*Style Footer*/
footer {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.footer-text-columns p {
  font-size: 10px;
}

.footer-text-columns p {
  text-align: center;
}
.footer-text-droits {
  font-weight: bold !important;
}
.footer-socials-columns {
  text-align: right;
  flex-flow: row-reverse;
}
.footer-socials-columns div {
  gap: 1em;
}
/*End style footer*/

/*Main switch lang*/
.main-switch-lang {
  padding-top: 80px;
  padding-bottom: 80px;
}
.main-switch-lang .titre-ar {
  font-family: "Cairo", sans-serif;
  font-weight: 700;
}
.btn-home-page {
  gap: 1.5em;
  width: 100%;
  margin-top: 40px;
}
.btn-home-page a {
  padding: 12px;
  color: #fff;
  border-radius: 4px;
  width: 200px;
  text-align: center;
  font-size: 14px;
}
.btn-home-page a.btn-home-page-fr {
  background-color: var(--blue-color);
}
.btn-home-page a.btn-home-page-ar {
  background-color: var(--orange-color);
  font-family: "Cairo", sans-serif;
}

.image-simulateur-cih {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  margin-top: 40px;
}
.profession-container {
  flex-flow: wrap;
  gap: 24px;
}
/*End main switch lang*/
/*selection profesion*/
.title_fieldset h2 {
  font-size: 20px;
  margin-bottom: 25px;
}
.profession-container .card {
  cursor: pointer;
  width: 18rem;
  transition: transform 0.2s;
  padding: 20px;
}
.profession-container .card .card-title {
  font-size: 14px;
  margin-top: 15px;
}

.profession-container .card-body {
  padding: 0;
}
.card.prefession-liberales {
  width: 37.3em;
}
.profession-container .card:hover {
  transform: scale(1.05);
}
.card{
  border: 0.5px solid #1a171b !important;
}
.profession-container .card.selected {
  border: 0.5px solid #00b250;
  box-shadow: 0px 0px 8px rgba(0, 128, 0, 0.5);
  background-color: rgba(0, 178, 80, 0.1);
}
.profession-container .form-check {
  text-align: center;
}
.profession-container .form-check input {
  margin-bottom: 10px;
}

.profession-container .card img {
  height: 60px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.silulez-mon-credit,
.silulez-mon-credit:focus,
.silulez-mon-credit:hover {
  padding: 12px;
  color: #fff;
  border-radius: 4px;
  width: 180px;
  text-align: center;
  background-color: var(--orange-color);
  border: none;
  outline: none;
  margin-top: 40px;
  font-size: 14px;
  font-weight: 500 !important;
}
.btn-suivant,
.btn-suivant:focus,
.btn-suivant:hover {
  padding: 12px;
  color: var(--color-blanc);
  border-radius: 4px;
  width: 150px;
  text-align: center;
  background-color: var(--orange-color);
  border: 1px solid var(--orange-color);
  outline: none;
  margin-top: 50px;
  font-size: 14px;
  float: right;
}
.btn-retour,
.btn-retour:focus,
.btn-retour:hover {
  padding: 12px;
  color: var(--orange-color);
  border-radius: 4px;
  width: 150px;
  text-align: center;
  background-color: transparent;
  border: 1px solid var(--orange-color);
  outline: none;
  margin-top: 50px;
  font-size: 14px;
  float: left;
}
.silulez-mon-credit img,
.btn-suivant img {
  margin-left: 10px;
}
.btn-retour img {
  margin-right: 10px;
}
/*And selection  profession*/

/*Simulation montant*/
.formulair-simuler-credit .montant-group,
.formulair-simuler-credit .duree-group,
.nom-group,
.prenom-group,
.email-group,
.telephone-group {
  border: 0.5px solid #1a171b;
  border-radius: 4px;
}

.formulair-simuler-credit label,
.fieldse_information label {
  float: left;
  font-size: 16px;
  font-weight: 400;
  color: #1a171b;
  margin-bottom: 0px;
}

.formulair-simuler-credit input::placeholder,
.fieldse_information input::placeholder {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #9da4ab !important;
  opacity: 1 !important;
}

.formulair-simuler-credit input::-webkit-input-placeholder,
.fieldse_information input::-webkit-input-placeholder {
  /* Chrome, Safari, Opera */
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #9da4ab !important;
  opacity: 1 !important;
}

.formulair-simuler-credit input::-moz-placeholder,
.fieldse_information input::-moz-placeholder {
  /* Firefox */
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #9da4ab !important;
  opacity: 1 !important;
}

.formulair-simuler-credit input:-ms-input-placeholder,
.fieldse_information input:-ms-inputholder {
  /* IE */
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #9da4ab !important;
  opacity: 1 !important;
}

.formulair-simuler-credit input,
.fieldse_information input {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a171b;
}

.formulair-simuler-credit input:focus,
.formulair-simuler-credit input:active,
.fieldse_information input:focus,
.fieldse_information input:active {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a171b;
}

.validate-icon {
  width: 20px;
  height: auto;
}
/*End Simulation montant*/

/* Style the input fields */
.input-group-text {
  background-color: #fff;
  border-left: 1px solid #ced4da;
}
.form-control:focus {
  box-shadow: none;
  border-color: #28a745;
}

.input-group-append {
  position: absolute;
  right: 0;
  bottom: 15px;
  z-index: 99;
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.suffix {
  position: absolute;
  right: 10px;
  font-weight: bold;
  color: #555;
}
/*End Simulateur Montant*/

/*information personnel*/
.cih-group {
  padding: 0px !important;
}
.cih-options {
  display: flex;
  gap: 40px;
}

.cih-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  height: 80px;
  border: 0.5px solid #1a171b;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3sease-in-out;
  position: relative;
  background: white;
}

.cih-option input {
  display: none;
}

.cih-label {
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: #1a171b;
  margin-left: 15px;
  margin-right: 15px;
}

.cih-checkmark {
  display: none;
  position: absolute;
  right: 10px;
  color: green;
  font-size: 20px;
  font-weight: bold;
}

.cih-option.selected {
  border-color: #008000;
  box-shadow: 0px 0px 8px rgba(0, 128, 0, 0.5);
}

.cih-option.selected .cih-checkmark {
  display: block;
}
.cih-checkmark img{
  width:20px;
}
/*And information personnel*/

/*validate form*/
/* Désactiver le bouton tant qu'aucune profession n'est sélectionnée */
.disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: grey !important;
    border-color: gray !important;
}


/* Validation des champs Montant et Durée */
.montant-group, .duree-group {
    transition: all 0.3s ease-in-out;
}

.section_mensualite_ttc {
  background: #f6fefa;
  border: 0.5px solid #00b250;
  border-radius: 4px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.mensualite_ttc_title {
  font-size: 18px;
  margin-bottom: 0px;
  font-weight: 700 !important;
}
.mensualite_ttc_text {
  font-size: 14px;
}
#mensualite_ttc,
#mensualite_ttc:active,
#mensualite_ttc:focus,
#mensualite_ttc:focus-visible {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 35px;
  font-weight: 700;
  color: #1a171b;
  text-align: center;
  width: 100%;
}
.mensualite_ttc_info_text {
  font-size: 10px;
    margin-top: 20px;
    text-align: left;
}
.titre_document-domander{
  font-size: 14px;
    text-align: left;
    margin-top: 15px;

}
#documents-list{
      text-align: left;
    font-size: 12px;
}
.btn-partager,
.btn-partager:hover,
.btn-partager:focus {
  padding: 12px 5px;
  color: var(--orange-color);
  border-radius: 4px;
  width: 47%;
  text-align: center;
  background-color: transparent;
  border: 1px solid var(--orange-color);
  outline: none;
  margin-top: 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-download,
.btn-download:hover,
.btn-download:focus {
  padding: 12px 5px;
  color: var(--color-blanc);
  border-radius: 4px;
  width: 47%;
  text-align: center;
  background-color: var(--orange-color);
  border: 1px solid var(--orange-color);
  outline: none;
  margin-top: 10px;
  font-size: 12px;
  cursor: pointer;
}
.mensualite_ttc_info_btns {
  gap: 6%;
  width: 100%;
}
.fieldse_result_montant-group,
.fieldse_result_duree-group {
  border: 0.5px solid #1a171b;
  border-radius: 4px;
}

.fieldse_result_montant-group label,
.fieldse_result_duree-group label,
.fieldse_result_profession-group label {
  float: left;
  font-size: 16px;
  font-weight: 400;
  color: #1a171b;
  margin-bottom: 0px;
}
.fieldse_result_montant-group input,
.fieldse_result_duree-group input,
.fieldse_result_profession-group input {
  border: none;
  background: transparent;
  background-color: transparent !important;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a171b;
}

.fieldse_result_profession-group {
  border: 0.5px solid #00b250;
  border-radius: 4px;
  background: #f6fefa;
}
/* End result form*/

.multi_step_form {
  background: var(--color-blanc);
  display: block;
  overflow: hidden;
  margin-top: 10px;
}
.multi_step_form #msform {
  text-align: center;
  position: relative;
  padding: 50px 30px;
  max-width: 900px;
  min-height: 800px;
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
}

.multi_step_form #msform fieldset {
  border: 0;
  padding: 20px 20px 0;
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
}
.multi_step_form #msform fieldset:not(:first-of-type) {
  display: none;
}
.multi_step_form #msform fieldset h3 {
  font: 500 18px/35px "Inter", sans-serif;
  color: #3f4553;
}
.multi_step_form #msform fieldset h6 {
  font: 400 15px/28px "Inter", sans-serif;
  color: #5f6771;
  padding-bottom: 30px;
}
.multi_step_form #msform fieldset .intl-tel-input {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.multi_step_form
  #msform
  fieldset
  .intl-tel-input
  .flag-container
  .selected-flag {
  padding: 0 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  width: 65px;
}
.multi_step_form
  #msform
  fieldset
  .intl-tel-input
  .flag-container
  .selected-flag
  .iti-arrow {
  border: 0;
}
.multi_step_form
  #msform
  fieldset
  .intl-tel-input
  .flag-container
  .selected-flag
  .iti-arrow:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  font: normal normal normal 24px/7px Ionicons;
  color: #5f6771;
}
.multi_step_form #msform fieldset #phone {
  padding-left: 80px;
}
.multi_step_form #msform fieldset .form-group {
  padding: 20px 10px;
  position: relative;
}
.multi_step_form #msform fieldset .fg_2,
.multi_step_form #msform fieldset .fg_3 {
  padding-top: 10px;
  display: block;
  overflow: hidden;
}
.multi_step_form #msform fieldset .fg_3 {
  padding-bottom: 70px;
}

.multi_step_form #msform fieldset .done_text {
  padding-top: 40px;
}

.multi_step_form #msform fieldset .done_text h6 {
  line-height: 23px;
}
.multi_step_form #msform fieldset .code_group {
  margin-bottom: 60px;
}
.multi_step_form #msform fieldset .code_group .form-control {
  border: 0;
  border-bottom: 1px solid #a1a7ac;
  border-radius: 0;
  display: inline-block;
  width: 30px;
  font-size: 30px;
  color: #5f6771;
  padding: 0;
  margin-right: 7px;
  text-align: center;
  line-height: 1;
}

.multi_step_form #msform #progressbar {
  overflow: hidden;
  margin-bottom: 0px;
}
.multi_step_form #msform #progressbar li {
  list-style-type: none;
  color: #9da4ab;
  font-size: 9px;
  width: calc(100% / 4);
  float: left;
  position: relative;
  font: 500 13px/1 "Inter", sans-serif;
}
.multi_step_form #msform #progressbar li:nth-child(2):before {
  content: "2";
  font-family: "Inter", sans-serif;
}
.multi_step_form #msform #progressbar li:nth-child(3):before {
  content: "3";
  font-family: "Inter", sans-serif;
}
.multi_step_form #msform #progressbar li:nth-child(4):before {
  content: "✓";
  font-family: "Inter", sans-serif;
}
.multi_step_form #msform #progressbar li:before {
  content: "1";
  font: 16px / 20px "Inter", sans-serif;
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: block;
  background: #eaf0f4;
  border-radius: 50%;
  margin: 0 auto 10px auto;
}
.multi_step_form #msform #progressbar li:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #ebedee;
  position: absolute;
  left: -50%;
  top: 15px;
  z-index: -1;
}
.multi_step_form #msform #progressbar li:last-child:after {
  width: 150%;
}
.multi_step_form #msform #progressbar li.active {
  color: var(--blue-color);
}
.multi_step_form #msform #progressbar li.active:before,
.multi_step_form #msform #progressbar li.active:after {
  background: var(--blue-color);
  color: var(--color-blanc);
}


 .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        text-align: center;
        z-index: 1000;
        width: 300px;
        display: none;
    }
    .popup-content button {
        padding: 12px 12px;
    border-radius: 4px;
    width: 100%;
     text-align: left;
    outline: none;
    margin-top: 10px;
    font-size: 14px;
    }
    .hidden {
        display: none;
    }

    .btn-pop-whatsapp{
      background-color: #25D366;
      border: 1px solid #25D366;
      color: #fff;
    }
    .btn-pop-email{
      background-color: #009EE0;
      border: 1px solid #009EE0;
      color: #fff;
    }
    .btn-pop-fermer{
        background-color: transparent;
    border: 1px solid #E85412;
    color: #E85412;
    }
    .popup-content .icon-pop{
      float: left;
      margin-right: 10px;
      width: 18px;
    }
    .popup-content .flesh{
      float: right;
      width: 12px;
      margin-top: 6px;
    }
    .flesh-fermer{
      margin-top: 9px !important;
    }
@media only screen and (max-width: 767px) {
  .menu-content ul li {
    margin-bottom: 26px;
    color: #fff;
    font-size: 30px;
  }
  .image-simulateur-cih{
      width: 100%;
  }
  .btn-home-page a {
    padding: 12px 6px;
    font-size: 13px;
      
  }
  .multi_step_form #msform {
    padding: 50px 10px;
    max-width: 100%;
  }
  .multi_step_form #msform fieldset {
    padding: 20px 0px 0;
      
  }
  .main-switch-lang .titre-ar {
    font-size: 25px;
  }
  .main-switch-lang .titre-fr {
    font-size: 28px;
  }
  .footer-text-columns {
    margin-top: 20px;
  }
  .profession-container .card {
    width: 10rem;
    padding:15px;
  }
  .card.prefession-liberales {
    width: 20.5rem !important;
    padding:15px;
  }
  .profession-container .card img {
    height: 50px;
  }

  .formulair-simuler-credit label,
  .fieldse_information label {
    font-size: 12px;
  }
  .formulair-simuler-credit input,
  .fieldse_information input {
    font-size: 14px;
  }
  .multi_step_form #msform fieldset .form-group {
    padding: 10px;
  }
  .title_fieldset h2 {
    font-size: 16px;
  }
  .cih-label {
    font-size: 14px;
  }
  .cih-option {
    height: 57px;
  }
  #msform > fieldset.fieldse_result > div > div:nth-child(2) {
    margin-top: 40px;
  }
  .input-group-append {
    bottom: 8px;
  }
  .profession-container {
      gap: 8px;
    }
}