/* ==========================================================================
  01. SPECIFIC STYLES
  =========================================================================== */

  .font-6c { color: #6c757d; }
  .weight-400 { font-weight: 400; } 
  
  
  .h1-title {
      font-size: 3rem;
      min-height: 72px;
  }
  
  
  .h2-title {
      font-size: 2.75rem;
  }
  .h2-title1 {
      font-size: 2.75rem;
  }
  .h2-title2 {
      font-size: 2.5rem;
  }
  .h3-title {
      font-size: 1.5rem;
  }
  .h4-title {
      font-size: 2.75rem;
  }
  .h5-title {
      font-size: 2.5rem;
  }
  
  @media (min-width: 992px) { 
      .img-fluid-120 {
          max-width: 120%;
      }        
      .img-fluid-110 {
          max-width: 110%;
      }    
      
      .img-fluid-90 {
          max-width: 90%;
      }
  
      .img-fluid-80 {
          max-width: 80%;
      }
  
      .img-fluid-70 {
          max-width: 70%;
      }
  
      .img-fluid-60 {
          max-width: 60%;
      }
  
      .img-fluid-50 {
          max-width: 50%;
      }
      .img-fluid-40 {
          max-width: 40%;
      }
      .img-fluid-30 {
          max-width: 30%;
      }
      .img-fluid-20 {
          max-width: 20%;
      }     
  }
  
  @media (max-width: 992px) { 
      
      
      .h1-title {
          font-size: 3rem;
      }
      .h2-title {
          font-size: 3rem;
      }  
      .h2-title1 {
          font-size: 3rem;
      }
      .h2-title2 {
      font-size: 2.5rem;
      }    
      .h3-title {
          font-size: 2.5rem;
      }  
      .h4-title {
          font-size: 2.5rem;
      }   
      .h5-title {
          font-size: 2.5rem;
      }   
  }
  
  
  @media (max-width: 768px) { 
         
      
      .h1-title {
          font-size: 2.5rem;
      }
      .h2-title {
          font-size: 2.5rem;
      }
      .h2-title1 {
          font-size: 2.5rem;
      }
      .h2-title2 {
      font-size: 2rem;
      }        
      .h3-title {
          font-size: 2rem;
      }
      .h4-title {
          font-size: 2rem;
      }   
      .h5-title {
          font-size: 2rem;
      }   
      .hide-for-mobile {
          display: none;
      }
  }
  
  @media (max-width: 460px) { 
      
      
      .h1-title {
          font-size: 2rem;
      }
      .h2-title {
          font-size: 2rem;
      }
      .h2-title1 {
          font-size: 2rem;
      }
      .h2-title2 {
      font-size: 1.5rem;
      }        
      .h3-title {
          font-size: 1.5rem;
      }    
      .h4-title {
          font-size: 1.5rem;
      }
      .h5-title {
          font-size: 1.5rem;
      }       
  }
  
  
  
  .h2-typed {
      width: 100%;
      height: 70px;
  }
  
  /* The typing animation */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor animation */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }
  
  .flex-start {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
  }
  
  .flex-between {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
  }
  
  .flex-end {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
  }
  
  
  
  /* ==========================================================================
  FIRST PRINT
  =========================================================================== */
  @media (max-width: 992px) { 
      .hero-1-img {
          margin-left: unset;
          margin-right: unset;
          margin-bottom: unset;
          padding-left: unset;
          margin-top: 40px;
      }
  }
  
  
  
  
  
  /* ==========================================================================
  HOMEPAGE
  =========================================================================== */
  .justify-content-middle {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  
  
  
  /* ==========================================================================
    MENU
    =========================================================================== */
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu {
      max-width: 500px;
  }
  
  .wsmenu > .wsmenu-list > li > ul.menu-first {
      max-width: 930px;
      width: 930px;
      left: 100px;
  }
  
  .wsmenu > .wsmenu-list > li > ul.menu-first:before {
      content: "";
      background-color: #fff;
      position: absolute;
      top: -8px;
      left: 50%;
      height: 0;
      width: 0;
  }
  
  @media (max-width: 1140px) { 
      .wsmenu > .wsmenu-list > li > ul.menu-first {
          max-width: 930px;
          width: 930px;
          left: 50%;
          margin-left: -475px;
      }
  }
  
  @media (max-width: 960px) { 
      .wsmenu > .wsmenu-list > li > ul.sub-menu {
          width: 100%;
      }
  }
  
  @media (max-width: 992px) { 
      .wsmenu > .wsmenu-list > li > ul.menu-first {
          max-width: 100%;
          left: 0;
          margin-left: 0;
      }
          
  }
  
      
  /* ==========================================================================
  LANGUAGES
  =========================================================================== */
      
  .container-languages {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;    
  }
  
  .container-languages .input-languages {
      width: calc(50% - 75px);
  }
  
  .container-languages .input-languages h3 {
      font-size: 2rem;
      color: #2f353e;
      font-family: 'Rubik', sans-serif;
      font-weight: 500;
      letter-spacing: -0.75px;
      margin-bottom: 16px;
      line-height: 1.4;
      text-align: center;
  }
  
  .container-languages .input-languages h4 {
      font-size: 1.2rem;
      color: #383f76;
      font-family: 'Rubik', sans-serif;
      font-weight: 400;
      margin-bottom: 20px;
      line-height: 1.4;
      text-align: center;
  }
  
  .container-languages .languages {
      width: 100%;
      background: #f8f8f8;
      border: 1px solid #ccc;
      border-radius: 12px;
      box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;  
  }
  
  .container-languages .languages div {
      min-width: 25%;
      padding: 10px;
      box-sizing: border-box;
      font-size: 12px;
  }
  
  .container-languages .languages img {
       width: 30px;
      border-radius: 6px;
      margin-right: 10px;
  }
  
  .container-languages .languages label {
      width: calc(100% - 50px)
  }
  
  
  
  .container-languages .switch-languages {
      width: 100px;
      text-align: center;
      margin-top: 110px;
      color: #94a3b8;
      font-size: 14px;
      line-height: 1.4;
  }
  
  .container-languages .switch-languages i {
      font-size: 50px;
      margin-top: 0px;
      color: #fff;
      padding:16px;
      background: #2f353e;
      border-radius:50%;
      cursor: pointer;
      margin-bottom: 10px;
  }
  
  @media (min-width: 1200px) and (max-width: 1400px) { 
      .container-languages .languages div {
          min-width: 33.3333%;
      }
      
  }
  
  @media (max-width: 1200px) { 
      .container-languages .input-languages {
          width: calc(100% - 0px);
      }
      
      .container-languages .switch-languages {
          width: 100px;
          display: table;
          margin: auto;
          margin-top: 30px;
          margin-bottom: 30px;
      }
      
  }
  
  @media (max-width: 768px) { 
      .container-languages .languages div {
          min-width: 33.3333%;
      }
      
  }
  
  @media (max-width: 500px) { 
      .container-languages .languages div {
          min-width: 50%;
      }
      
  }
  
  
  
  
  
  /* ==========================================================================
  REVIEWS
  =========================================================================== */
  
  .masonry-container {
   column-count: 3;
   column-gap: 15px;
  }
  .masonry-item {
   display: inline-block;
   width: 100%;
  }
  
  
  #reviews-1 .d-flex.justify-content-between{
      flex-wrap: wrap;
  }
  
  #reviews-1 .col-xl-4 {
      width: 33.3333%;
  }
  
  #reviews-1 .review-1 {
      margin: 0 10px 20px;
  }
  
  @media (max-width: 992px) { 
      
      #reviews-1 .col-xl-4 {
          width: 50%;
      }
      
      .masonry-container {
          column-count: 2;
      }
      
  }
  
  @media (max-width: 768px) { 
      
      #reviews-1 .col-xl-4 {
          width: 100%;
      }
      
      .masonry-container {
          column-count: 1;
      }
      
      #reviews-1 .review-1 {
          margin: 0 0px 10px;
      }
      
  }
  
  /* ==========================================================================
    CONTENTS
    =========================================================================== */
  .sub-menu .img-menu {
      width: 380px;
  }
  
  .sub-menu .img-menu img {
      width: 380px;
      height: auto;
      margin-top: 16px;
  }
  
  .sub-menu .items-menu {
      width: 500px;
  }
  
  .bloc-create-content {
      width: calc(100% - 0px);
      padding: 16px;
      background: #11111100;
      border-radius: 6px;
      color: #2C3E50;
      font-size: 14px;
      cursor: pointer;
  }
  .bloc-create-content:hover {
      background: #11111110;
  }
  
  
  .bloc-create-content .title-description {
      margin-left: 10px;
      width: calc(100% - 46px);
  }
  
  .bloc-create-content .title {
      clear: both;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
      line-height: 1.2;
      text-align: left;
      color: #2c3e50;
      padding-top: 2px;
      
  }
  
  .bloc-create-content .icon {
      width: 32px;
      height: 32px;
      padding-top: 3px;
      box-sizing: border-box; 
      float: left;
      font-size: 18px;
      background: #fff;
      color: #0195ff;
      box-shadow: 7px 7px 20px rgba(0,0,0,.07);
      margin-bottom: 10px;
      border-radius: 6px;
  
     
  }
  
  .bloc-create-content .icon-new {
      width: 36px;
      font-size: 18px;
      color: #0195ff;
  }
  
  
  .bloc-create-content .description {
      line-height: 1.2;
      text-align: left;
      font-size: 14px;
  }
  
  
  .form-div-contents {
      position: relative;
      margin-top: 0px;
      margin-bottom: 0px;
      padding: 16px;
      background: #0195FF20;
      border-radius: 6px;
  }
  
  
  
  
  
  
  /* ==========================================================================
    RESULTATS
    =========================================================================== */
  .bloc-option-resultat {
      width: calc(20% - 10px);
      padding: 12px 16px;
      background: #11111103;
      border-radius: 6px;
      border: 1px solid #ccc;
      color: #2C3E50;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
  }
  .bloc-option-resultat:hover {
      background: #11111110;
  }
  
  .bloc-option-resultat .icon {
      float: left;
      width: 34px;
      height: 34px;
      padding-top: 4px;
      margin-right:10px;
      font-size: 24px;
      color: #fff;
      background: #005BBF;
      text-align: center;
      border-radius: 44px;
  }
  
  .grey-bloc .icon {
      background: #B3B3B3;
  }
  
  .bloc-option-resultat .title {
      float: left;
      font-size: 16px;
      font-weight: 500;
      line-height: 34px;
  }
  
  .bloc-option-resultat .more {
      float: right;
      font-size: 24px;
      color: #2C3E50;
      text-align: center;
      margin-top: 5px;
  }
  
  
  .flaticon-facebook:hover {
      color: #3b5998; 
    }
  
  .flaticon-instagram:hover {
      color: #E4405F;  
    }
  .flaticon-youtube:hover {
      color: #ff0000;
    }
  .flaticon-twitter:hover {
      color: #2aa3f0;
    }
  .flaticon-linkedin:hover {
      color: #0277b5;
    }
  
  
  
  .accordion-title:hover {
      color: #306aff;
    }
  
  
  .footer-link:hover {
      text-decoration: underline;
      color: #306aff;
    }
  
  
  
  /* ==========================================================================
    COOKIE
    =========================================================================== */
  #cookieConsentPopup {
      position: fixed;
      z-index: 1033;
      bottom: 15px;
      left: 50%; 
      transform: translateX(-50%); 
      width: 50%;
      max-width: 1000px;
      background: #ffffffe6;
      padding: 10px;
      box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
      border-radius: 40px;
      text-align: center;
      backdrop-filter: blur(20px) saturate(5);
      padding-left: 50px;
      padding-right: 50px;
  }
  
  .cookieConsentContainer {
      margin: auto;
      padding-top:10px;
  }
  .cookieConsentContainer label {
      display: flex;
      justify-content:center;
      margin-bottom: 10px 0; 
  }
  
  .cookieConsentContainer label input[type="checkbox"] {
      margin-right: 10px; 
  }
  .cookieButton {
      background-color: #6064E3; 
      color: white;
      border: none;
      padding: 10px 30px;
      margin: 10px;
      border-radius: 20px;
      cursor: pointer;
  }
  
  .cookieButton:hover {
      background-color: #3700b3; 
  }
  .rejectButton {
      background-color: white; 
      color: black; 
      border: 1px solid grey; 
  }
  .rejectButton:hover {
      background-color:white;
  }
  #customConsentOptions {
     display: flex; 
      flex-wrap: nowrap; 
      justify-content: center; 
      margin-top:15px;
      margin-bottom:10px;
  }
  #customConsentOptions label {
      display: flex; 
      align-items: center; 
      margin-right: 10px; 
      max-width: 200px; 
  
  }
  .checkboxContainer {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
  }
  .checkboxContainer label {
      margin-right: 10px; 
  }
  #customConsentOptions > button {
      margin-top:15px;
  }
  
  #moreChoicesLink {
      
      cursor: pointer;
      color: #6C757D; 
  }
  #easierChoicesLink {
      color: #6C757D; 
      margin-top: 10px; 
  }
  #privacyLink {
      margin-left:10px;
  }
  @media (max-width: 600px) { 
      #cookieConsentPopup {
          width: 95%; 
          padding: 10px; 
          bottom: 10px;
      }
  
      .checkboxContainer, #customConsentOptions {
          flex-direction: row; 
          align-items: center;
          flex-wrap:wrap
      }
  
      .checkboxContainer label, #customConsentOptions label {
          margin-right: 0; 
          margin-bottom: 10px; 
          margin-left:10px;
      }
  
      #customConsentOptions > button {
          margin-top: 15px;
          width: auto; 
      }
  }
  
  
  
  
  /* ==========================================================================
    SIGNUP
    =========================================================================== */
  #signup-3 {
      background: #fff;
      padding: 0;
  }
  
  #signup-3 .col-form {
      width: 600px;
      height: 100vh;
      padding: 50px;
      box-sizing: border-box;
      position: relative;
  }
  
  #signup-3 .col-testimonials {
      width: calc(100% - 600px);
      height: 100vh;
      padding: 50px;
      box-sizing: border-box;
      background: linear-gradient(to bottom, #99f4e4, #875def);
      position: relative;
  }
  
  #signup-3 .register-form {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 500px;
  }
  
  .register-form-title img {
      width: 200px;
      margin-bottom: 20px;
  }
  
  #signup-3 .h3-xs {
      font-size: 1.8rem;
  }
  
  #signup-3 .reviews {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      width: 600px;
      margin: auto;
      overflow: hidden;
  }
  
  #signup-3 .container_reviews {
      width: 5600px; 
      float: left; 
      transition: margin-left .3s ease;
  }
  
  #signup-3 .container_review {
      width: 560px; 
      float: left; 
      margin-left: 20px; 
      margin-right: 20px; 
      height: 350px;
      position: relative;
  }
  
  #signup-3 .review-1 { 
      width: 560px; 
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
  }
  
  #signup-3 .dots {
      display: flex; 
      justify-content: center; 
      gap:5px;
  }
  
  #signup-3 .dots span {
      width: 10px;
      height: 10px;
      margin: 5px 7px;
      background: #CCC;
      display: block;
      transition: opacity .2s ease;
      border-radius: 30px;
      cursor: pointer;
      opacity: .8;
  }
  
  #signup-3 .dots span:hover {
      opacity: 1;
  }
  
  @media (max-width: 1200px) { 
      
      #signup-3 .col-form {
          width: 400px;
      }
      
      #signup-3 .register-form {
           width: 350px;
      }
      
      #signup-3 .col-testimonials {
          width: calc(100% - 400px);
      }
  }
  
  @media (max-width: 992px) { 
      
      #signup-3 .col-form {
          width: 100%;
      }
      
      #signup-3 .register-form {
           width: calc(100% - 100px);
      }
      
      #signup-3 .col-testimonials {
          display: none;
      }
  }
  
  
  
  
  /* ==========================================================================
    WELCOME
    =========================================================================== */
  #signup-3 .col-welcome-form {
      width: 50%;
      height: 100vh;
      padding: 50px;
      box-sizing: border-box;
      position: relative;
      overflow: scroll;
  }
  
  .logo-welcome {
      width: 250px;
  }
  
  #signup-3 .welcome-form {
      position: absolute;
      top: 200px;
      left: 50%;
      transform: translateX(-50%);
      width: 500px;
      color: #2C3E50;
  }
  
  .rounded-steps {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
      column-gap: 12px;
      height: 8px;
      margin-bottom: 30px;
  }
  
  .rounded-step {
      height: 8px;
      width: 70px;
      border-radius: 8px;
      background: #efefef;
  }
  
  .active-step {
      background: #3b82f6;
  }
  
  .welcome-form h1 {
      text-align: left;
      font-size: 40px;
      margin-bottom: 30px;
      color: #2C3E50;
  }

  .welcome-form .subtitle {
      margin-bottom: 30px;
  }

  .welcome-form .label {
      font-size: 14px;
      color: #222;
      margin-bottom: 10px;
  }
  
  .div-input-choice {
      float: left;
      width: 30px;
      cursor: pointer;
  }
  
  .line-choice {
      float: left;
      width: calc(100% - 30px);
      line-height: 20px;
      font-size: 16px;
      cursor: pointer;
  }
  
  .input-choice-radio {
      width: 18px;
      height: 18px;
      padding: 2px;
      background: #fff;
      border: 2px solid #333;
      border-radius: 100%;
      cursor: pointer;
  }
  
  .input-choice-radio-active span {
      display: block;
      width: 10px;
      height: 10px;
      background: #3b82f6;
      border-radius: 100%;
  }
  
  .work-selection {
      background: #efefef;
      padding: 16px;
      border-radius: 12px;
  }
  
  .work-selection span {
      font-size: 14px;
  }
  
.welcome-form .input-list {
      font-size: 16px;
      color: #2C3E50;
      border: 2px solid #e4e4e4;
      height: 45px; 
      padding-left: 16px;
      width: 100%; 
      border-radius: 8px;
      background-color: #fff;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
      background-repeat:no-repeat;
      background-position:right .75rem center;
      background-size:16px 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
 
.welcome-form .input-text {
    display: block;
    width: 100%;
    height: 45px;
    padding: 5px 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e5e5e5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: all 50ms ease-in-out;
    margin-bottom: 20px;
}

    .div-choice {
        width: 200px;
        padding: 20px;
        border:2px solid #ccc;
        color: #2C3E50;
        border-radius: 12px;
        text-align: center;
        margin-right: 20px;
        float: left;
        background: #f7f7f730;
        cursor: pointer;
    }
  
  .welcome-btn {
      background-color: #efefef;
      border: 1px solid #ccc;
      border-radius: 6px;
      color: #2C3E50;
      font-size: 16px;
      font-weight: 500;
      min-width: 0 !important;
      padding: 12px 12px;
      text-align: center;
      width: fit-content;
      cursor: normal;
      transition:all .3s ease;
  }
  
  .welcome-btn i {
      vertical-align: bottom;
  }
  
  .welcome-btn-active {
      background: #3b82f6;
      color: #fff;
      border: 1px solid #3b82f6;
      cursor: pointer;
  }
  
  
  
  
  
  
  
  
  #signup-3 .col-welcome-image {
      width: 50%;
      height: 100vh;
      padding: 50px;
      box-sizing: border-box;
      background: linear-gradient(to bottom, #99f4e4, #875def);
      position: relative;
  }
  
  .welcome-banner {
      position: absolute;
      width: calc(100% - 100px);
      top: 50%;
      transform: translateY(-50%);
      border-radius: 16px;
  }




@media (max-width: 1400px) { 
    
    #signup-3 .welcome-form {
        width: calc(100% - 0px);
        left: 0;
        transform: unset;
        position: relative;
        
        
    }
    
}

@media (max-width: 1200px) { 
    .welcome-form h1 {
        font-size: 34px;
    }
}

@media (max-width: 1024px) { 
    #signup-3 .col-welcome-form {
        width: 100%;
        padding-left: 150px;
        padding-right: 150px;
    }
    
    #signup-3 .col-welcome-image {
        display: none;
    }
    
    #signup-3 .welcome-form {
        top: 40px;   
    }
}
  

@media (max-width: 768px) { 
    #signup-3 .col-welcome-form {
        padding-left: 40px;
        padding-right: 40px;
    }
    
}

@media (max-width: 530px) { 
    .div-choice {
        width: 100%;
        margin: 0;
        margin-bottom: 20px;
    }
}


@media (max-width: 350px) { 
    .logo-welcome {
        width: 100%;
    }
}