html, body{
  height: 100%;
}

body {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  background: #222324;
}

.logo-xn{
  width:100%;
  max-width: 100px;
}
.logo-xn:hover{
  opacity: 0.7;
}
@media (min-width: 768px){
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}}
.navbar-nav .nav-link{
  font-weight: 600;
}
.navbar-nav .nav-item.active .nav-link, .navbar-nav .nav-item .nav-link:hover{
  color: #ea6e2f;
}
@media (min-width: 992px) {
  .animatedrmenu {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    background: #e7e8e9;
    border-radius: 0;
        padding-top: 60px;
    padding-bottom: 60px;
  }
}

@keyframes slideIndrmenu {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIndrmenu {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIndrmenu {
  -webkit-animation-name: slideIndrmenu;
  animation-name: slideIndrmenu;
}
.service-icon{
  max-width: 100%;
    width: 90px;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
}
a {
    color: #e46c2e;
    text-decoration: none;
}
a:hover {
    color: #ff7a0b;
}
.dropdown-item.active, .dropdown-item:active {
    color: #ea6e2f;
    text-decoration: none;
    background-color: #ffe7db;
}
.dropdown-item + p{
      font-size: 12px;
    font-weight: 300;
    color: #202122;
        width: 90%;
    margin: 0 auto;
}
.masthead{
  background: url(../img/bg-header-l.png) no-repeat left bottom, url(../img/bg-header-r.png) no-repeat right bottom, url('../img/effect1-header.png') no-repeat center center;
  background-color: #222324;
  background-size: contain; 
  height: 100%;  
  position: relative;
  overflow: hidden;
  height: 84%;
  min-height: 650px;
}
.stylefixMenu{
          position: fixed;
          width: 100%;
          background: #1e1f20;
          zoom: 0.8;
          margin-top: 0 !important;
          animation-name: anniFixMenu;
          animation-duration: 2s;
}
@keyframes anniFixMenu {
  from {top: -200px;}
  to {top: 0px;}
}
#switch-dark{
  position: absolute;
  top: 50%;
  right: 0;
  transform: rotate(90deg);
}
#switch-dark .form-check-input:checked {
    background-color: #e46c2e;
    border-color: #e46c2e;
}
#switch-dark .form-check-input:focus {
    border-color: #ffa77a;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(253 122 13 / 25%);
}
h1{
    max-width: 790px;
    font-weight: 800;
    font-size: 2.8rem;
    padding-bottom: 25px;
    margin: 0 auto;
    text-align: center;
}
h1 span.hometext::before { 
        content: "marketing"; 
        animation: animateTitleHome infinite 8s; 
        
} 
  
@keyframes animateTitleHome { 
  
        0% { 
            content: "marketing"; 
        } 
  
        25% { 
            content: "sales"; 
        }

        50% { 
            content: "leads"; 
        } 

        75% { 
            content: "branding"; 
        }  
  
        100% { 
            content: "marketing"; 
        } 
}

.font-s2{
      max-width: 790px;
    font-weight: 300;
    font-size: 1.8rem;
    padding-bottom: 8px;
    margin: 0 auto;
    text-align: center;
}
.font-s3{
  font-weight: 800;
    font-size: 2.8rem;
    color: #ea6e2f;
    max-width: 600px;
    margin: 0 auto 25px auto;
    text-align: center;
}

.orange-color{
  color: #ea6e2f !important;
}
.language-icon{
  width: 32px;
}
#dropdownLangue{
  cursor: pointer;
}
#dropdownLangue:hover{
  opacity: 0.8;
}
.dropdown-lang{
    min-width: auto;
    padding: .5rem 6px;
    margin: .125rem 0 0;
    background-color: rgb(255 255 255 / 12%);
}
.dropdown-lang .dropdown-item{
  opacity: 0.6;
}
.dropdown-lang .dropdown-item:focus, .dropdown-lang .dropdown-item:hover {
    background-color: transparent !important;
    opacity: 1;
}
.active-lang{
  opacity: 0.3;
}
.a-lang{
  padding-left: 4px;
}
.a-lang:hover{
  opacity: 0.8;
}

.btn-menuhead{
      background-color: #e7e8e9;
    border: none;
    border-radius: 22px;
    color: #0f1010 !important;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    display: block;
}
.xfa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.xfa-fleche:before {
    content: "";
    background: url(../img/fleche-orange1.png) center no-repeat;
    background-size: 24px;
    width: 24px;
    height: 10px;
    display: block;
}
.btn-menuhead:hover{
    color: #ea6e2f !important;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px #a7a7a7;
}
.list-check{
    list-style: none;
    display: table;
    margin: 0 auto;
}
.masthead .list-check li {
    color: #fff;
    padding-bottom: 18px;
    font-size: 1.1rem;
    font-weight: 300;
}
.masthead .list-check li:before {
    content: '';
    width: 25px;
    height: 21px;
    position: absolute;
    background-image: url(../img/list-check.png);
    background-size: cover;
    background-position: center;
    margin-top: 2px;
    margin-left: -31px;
}
.princ-title p{
  text-align: center;
  margin: 15px auto;
  font-size: 1.2rem;
}
a, a:hover, a:focus{
  text-decoration: none;
  outline: none;
}
.btn-actionhead{
  margin: 32px auto 0 auto;
  text-align: center;
}
.btn-callback{
    text-align: center;
    background: #e46c2e;
    border-radius: 30px;
    color: #ffffff;
    padding: 12px 18px;
    width: 216px;
    max-width: 100%;
    display: inline-block;
}
.btn-callback:hover{
  background: #ff8141;
  color: #ffffff;
}
#ourvalues h2 span{
      color: #ea6e2f !important;
      display: block;
      font-size: 3rem;
    font-weight: 700;
}
#ourvalues img{
  width: 120px;
  max-width: 100%;
  margin-bottom: 6px;
}
#ourvalues .col-ourvalues{
  padding: 30px 20px;
}
#ourvalues .col-ourvalues2{
  background: #2b2c2d;
}
#ourvalues h4{
    color: #ea6e2f;
    font-weight: 600;
    padding-bottom: 5px;
}
#benefits {
    background: #252627;
    padding: 0;
}
#benefits .bg-partner{
  background: url(../img/bg-partner.jpg) bottom left no-repeat;
  background-size: cover;
  min-height: 650px;
}
#benefits p{
  font-size: 0.9rem;
}
.btn-learnmore{
    text-align: center;
    background: transparent;
    border: 2px solid #e46c2e;
    border-radius: 30px;
    color: #ffffff;
    padding: 12px 18px;
    width: 216px;
    max-width: 100%;
    display: inline-block;
}
.btn-learnmore:hover {
    background: #e7e8e9;
    border: 2px solid #e7e8e9;
    color: #212223;
}
section{
  padding: 50px 0 50px 0;
  
}
#logos-rev{
  background: #252627;
}
#logos-rev img{
      width: 280px;
    max-width: 100%;
}
#logos-rev img:hover{
  opacity: 0.7;
}

#services{
  background: url(../img/bg-services.png) center no-repeat;
  background-color: #222324;
  background-size: contain;
}
h2{
  font-size: 3rem;
  font-weight: 700;
}
h2 span{
  font-weight: 300;
  font-size: 1.5rem;
  display: block;
}
#services #recent-carousel .owl-dot {
    display: block;
    width: 15px;
    background: #eee;
    height: 15px;
    float: left;
    margin-right: 5px;
    border-radius: 20px;
        opacity: 0.2;
}
#services #recent-carousel .owl-dot.active{
  opacity: 1;
}
#services #recent-carousel .owl-dots{
  display: table;
    margin: auto;
    text-align: center;
}
#services #recent-carousel h5{
  font-size: 2.2rem;
  font-weight: 700;
  color: #ea6e2f;
  text-align: left;
  margin-bottom: 20px;
}
#services #recent-carousel h5 span{
  font-weight: 400;
  font-size: 3.5rem;
}
#services #recent-carousel p{
  text-align: justify;
      padding-right: 20px;

}
.btn-learn{
    text-align: center;
    background-color: #e7e8e9;
    color: #0f1010;
    border-radius: 30px;
    padding: 12px 18px;
    width: 216px;
    max-width: 100%;
    display: inline-block;
    margin-top: 15px;
}
.btn-learn:hover{
  color: #ea6e2f;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px #a7a7a7;
}

#services .bg-circle{
  background: url(../img/ellipse1.png) no-repeat center;
  background-size: contain;
      padding: 20px;
}
#services .logo-carsouel{
  max-width: 100%;
}
#recent-carousel .owl-next, #recent-carousel .owl-prev {
    display: block !important;
}
#recent-carousel .owl-next img, #recent-carousel .owl-prev img {
    width: 50px;
    opacity: 0.6;
}
#recent-carousel .owl-next img:hover, #recent-carousel .owl-prev img:hover {
    opacity: 1;
}
#recent-carousel .owl-prev{
  left: -55px;
      top: 40%;
}
#recent-carousel .owl-next{
  right: -55px;
      top: 40%;
}
.sep1{
  background-color: #222324;
}
.sep1 img{
  width: 60px;
}
.credentials-p1{
  font-size: 1.4rem;
  font-weight: 300;
  text-align: right;
}
.credentials-img1{
  max-width: 100%;
}
#credentials2{
  background: url(../img/map-global.png) no-repeat center;
  background-size: contain;
    padding-bottom: 200px;
}
.bulle-hi{
  background: url(../img/bulle-hi.png) no-repeat center;
  background-size: contain;
  height: 260px;
}
#bulleHiText{
  color: #ea6e2f;
    font-size: 3rem;
    font-weight: 700;
    position: relative;
    top: 28%;
}
.addsize{
  font-size: 1.3rem;
}
#callback{
  background: url(../img/bg-callback.jpg) no-repeat center;
  background-size: cover;
}

#callback p{
  font-size: 1.6rem;
  max-width: 700px;
  margin: 0 auto;
  font-weight: 300;
}


.callback_form h3{
    color: #ea6e2f;
    font-weight: 700;
    padding-bottom: 20px;
}
.callback_form .icon-contact {
    width: 46px;
}
.callback_form .form-control2 {
    width: 100%;
    height: 45px;
    border: none;
    border-bottom: 1px solid #c5c5c5;
    font-size: 20px;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: transparent;
    color: #aaa;
}
.dark-mode .callback_form .form-control2:focus, .dark-mode .callback_form .form-control:focus {
    border: none;
    outline: none;
    color: #fff;
    box-shadow: none;
}
.callback_form .form-control2:focus, .callback_form .form-control:focus {
    border: none;
    outline: none;
    color: #555;
    box-shadow: none;
}
.callback_form .focus-border {
    display: block;
    position: relative;
    top: -26px;
    left: 0px;
    width: 0px;
    height: 2px;
    background-color: #ea6e2f;
    transition: 0.4s;
}
.callback_form .form-control2:focus ~ .focus-border, .callback_form .form-control:focus ~ .focus-border {
    width: 100%;
    transition: 0.4s;
}
.callback_form .btn-envoyer {
    text-align: center;
    background-color: #ea6e2f;
    color: #ffffff;
    border-radius: 30px;
    padding: 12px 20px;
    max-width: 100%;
    min-width: 150px;
    display: inline-block;
    margin-top: 25px;
    outline: none;
    border: none;
}
.callback_form .btn-envoyer:hover {
    background: #ff8141;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 19%);
}

.btn-callback2{
    text-align: center;
    background-color: #ea6e2f;
    color: #ffffff;
    border-radius: 30px;
    padding: 12px 20px;
    max-width: 100%;
    display: inline-block;
    margin-top: 25px;
}
.btn-callback2:hover{
    background: #ff8141;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 19%);
}
.xfa-fleche2:before {
    content: "";
    background: url(../img/fleche-white1.png) center no-repeat;
    background-size: 24px;
    width: 24px;
    height: 10px;
    display: block;
}
.xfa-fleche3:before {
    content: "";
    background: url(../img/fleche-white2.png) center no-repeat;
    background-size: 24px;
    width: 24px;
    height: 10px;
    display: block;
}
.xfa-fleche4:before {
    content: "";
    background: url(../img/check-white1.png) center no-repeat;
    background-size: 24px;
    width: 24px;
    height: 16px;
    display: block;
}
.navCertif {
    display: inline-flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#certifications .nav-pills .nav-link{
  opacity: 0.2;
}
#certifications .nav-pills .nav-link img{
  height:  80px;
  max-width: 90%;
}

#certifications .nav-pills .nav-link.active, #certifications .nav-pills .show>.nav-link {
    color: #fff;
    background-color: transparent;
    opacity: 1;
}
#certifications .tab-content>.active {
    border: 1px solid #5f5f5f;
    margin-top: 30px;
    padding: 20px;
}
#certifications .hover-certif{
  display: none;
  width: 56px;
  height: 8px !important;
  margin: 38px auto -41px auto;
}
#certifications .nav-pills .nav-link.active .hover-certif{
  display: block;
}
#certifications h4{
      color: #ea6e2f;
    font-weight: 600;
}

#recent-carousel2 .logo-carsouel{
  max-width: 100%;
  width: 150px;
      margin: 0 auto;
}
#realisations{
  background: url(../img/bg-realisationleft.png) left bottom no-repeat, url(../img/bg-realisationright.png) right bottom no-repeat;
  background-size: 20%, cover;
  background-color: #252627;
}
#realisations .projectModal1{
  background: url(../img/realisations/wwics-2.jpg) center no-repeat;
}
#realisations .projectModal2{
  background: url(../img/realisations/ucar-2.jpg) center no-repeat;
}
#realisations .projectModal3{
  background: url(../img/realisations/prestigia-2.jpg) center no-repeat;
}
#realisations .projectModal4{
  background: url(../img/realisations/schneider-2.jpg) center no-repeat;
}
#realisations .projectModal5{
  background: url(../img/realisations/asilah-2.jpg) center no-repeat;
}
#realisations .projectModal{
  background-size: cover;
  padding: 0;
  outline: 2px solid #252627;
  border: none;
  border-radius: 0;
  width: 100%;
  height: 200px;
}
#realisations .projectModal .inner{
    padding: 15px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
#realisations .projectModal:focus{
  outline: none;
  box-shadow: none;
}
#realisations .projectModal:hover .inner, #realisations .projectModal:focus .inner{
    background: rgb(0 0 0 / 49%);
        -webkit-transition: all .8s ease;
    transition: all .8s ease;
}
#realisations .projectModal .inner img{
  width: 180px;
  max-width: 100%;
  text-align: center;
    margin: 0 auto;
}
#realisations .modal-content{
  background-color: #222324;
}
#realisations .modal-content .logo-real{
  width: 150px;
  max-width: 100%;
}
#realisations .modal-content .logo-real:hover{
  opacity: 0.7;
}
#realisations .modal-content h3{
      color: #ea6e2f;
    font-size: 2rem;
    font-weight: 700;
}
#realisations .modal-content .first-treal{
  max-width: 360px;
}
#realisations .modal-content .spanfirst-treal{
    font-size: 1.5rem;
    font-weight: 300;
}
#realisations .modal-content .tablecomp .borderbt{
      border-bottom: 1px solid #888;
}
#realisations .modal-content .tablecomp th{
    border-right: 1px solid #888;
     transform: rotate(270deg);
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
         padding: 10px;
    height: 150px;
    vertical-align: middle;
    text-align: center;
}
#realisations .modal-content .tablecomp td{
  padding: 10px;
}
#realisations .modal-header{
  border-bottom: none;
}
#realisations .modal-content .btn-close{
  color: #ea6e2f;
  font-size: 3rem;
    background: none;
}

#realisations .modal-content .btn-close:hover{
  color: #fa793d;
}
#realisations .modal-content .btn-close:focus {
    outline: 0;
    box-shadow: none;
    opacity: 1;
}
#realisations .modal-content .fleche-after{
  width: 70px;
}
#realisations .modal-content .rowbgchang{
      background: #29292a;
      padding: 3rem;
}
#realisations .modal-content .icons-blocreal{
  width: 100px;
  max-width: 100%;
  padding-bottom: 10px;
}
#realisations .modal-content .listresultat{
  list-style: none;
}
#realisations .modal-content .listresultat li {
    color: #fff;
    padding-bottom: 18px;
    font-size: 1.1rem;
    font-weight: 300;
}
#realisations .modal-content .listresultat li:before {
    content: '';
    width: 25px;
    height: 21px;
    position: absolute;
    background-image: url(../img/realisations/listresultat.png);
    background-size: cover;
    background-position: center;
    margin-top: 2px;
    margin-left: -31px;
}
#realisations .modal-content .keyresl-img{
  background: url(../img/realisations/keyresl-img.png) center no-repeat;
  background-size: 100%;
  height: 346px;
  width: 340px;
  max-width: 100%;
  margin: auto;
}
#realisations .modal-content .keyresl-img h4{
  color: #ea6e2f;
  font-size: 5rem;
      font-weight: 700;
    padding-top: 25%;
}
#realisations .modal-content .keyresl-img p{
  font-size: 1.2rem;
  font-weight: 300;
}
#realisations .modal-content .img-testi{
  width: 100px;
  max-width: 100%;
  padding-bottom: 10px;
}
#realisations .modal-content .float-virgule-tes{
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}
#realisations .modal-content .float-virgule-tes img{
      height: 71px;
    padding-right: 12px;
}
#realisations .modal-content .text-testi{
  padding-top: 10px;
  max-width: 600px;
  margin: 0 auto;
}
#clutchsection{
  background: url(../img/bg-clutch.png) right no-repeat;
  background-size: contain;
  background-color: #222324;
}
#clutchsection .icon-chif{
  width: 100px;
  max-width: 100%;
}
#clutchsection h3{
  font-size: 1rem;
    font-weight: 300;
    margin-bottom: 50px;
}
#clutchsection h3 span{
    display: block;
    font-size: 3.6rem;
    font-weight: 700;
}

/* Style the form */
#wizardForm {
      background-color: #2d2e2f;
    margin: 0 auto;
    padding: 40px;
    width: 80%;
}
#wizardForm h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #ea6e2f;
    margin-bottom: 35px;
    text-align: center;
}
#wizardForm .form-check {
    position: relative;
    display: block;
    padding-left: 0;
    /*background: #444647;*/
    background: #ffffff;
    color: #000;
}
#wizardForm input[type="text"], #wizardForm input[type="number"], #wizardForm input[type="email"], #wizardForm select, #wizardForm textarea {
    display: block;
    width: 100%;
    padding: .575rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-align: center;
}

/* Style the input fields 
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  border: 1px solid #aaaaaa;
}
*/

input.invalid, select.invalid, textarea.invalid {
      background-color: #ffe9e9 !important;
    border: 1px solid #f00 !important;
}

.invalid-mesg{
  display: none;
}
input.invalid + .invalid-mesg, select.invalid + .invalid-mesg, textarea.invalid + .invalid-mesg{
  display: block;
  font-size: 14px;
    margin-top: 10px;
    color: #ff2d2d;
}

.tab {
  display: none;
  margin-bottom: 30px;
  position: relative;
  animation: annimtab 1s 1;
}
@keyframes annimtab {
  0%   {opacity:0; right: -200px;}
  100% {opacity:1; right: 0px; }
}
/*.form-check-input:checked {
    background-color: #ea6e2f;
    border-color: #db692f;
}
*/

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

.step.finish {
  background-color: #ea6e2f;
}
#nextBtn, #prevBtn{
  text-align: center;
    background-color: #ea6e2f;
    color: #ffffff;
    border-radius: 30px;
    padding: 12px 20px;
    max-width: 100%;
    min-width: 150px;
    display: inline-block;
    margin-top: 25px;
    outline: none;
    border: none;
}
#nextBtn:hover, #prevBtn:hover{
    background: #ff8141;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 19%);
}

#wizardForm .posi-check{
  position: absolute;
    margin-left: 6px !important;
    margin-top: 6px !important;
}
#wizardForm .label-checkcompany{
    padding: 15px;
    width: 100%;
    min-height: 161px;
    border: 1px solid rgba(154, 154, 154, 0.31);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
}
#wizardForm .label-checkcompany img{
  width: 50px;
    margin-bottom: 15px;
}
.label-checkcompany:hover, .label-checkcompany:focus, #wizardForm input[type="radio"]:checked + .label-checkcompany, #wizardForm input[type="checkbox"]:checked + .label-checkcompany{
      background: #ffebe0;
    color: #484746;
    border: 1px solid #e5651f;
    cursor: pointer;
}
.layer-hover, .layer-active{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(229, 101, 31, 0.55);
 
}
.layer-hover img, .layer-active img{
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  left: 50%;
  opacity: 1;
}
.label-checkcompany:hover > .layer-hover{
  display: block;
}

.label-checkcompany:hover > .layer-hover img{
   animation-name: wicongoal;
  animation-duration: 1s
}
@keyframes wicongoal {
  from {top: 85%; opacity: 0;}
  to {top: 50%; opacity: 1;}
}


input[type="radio"]:checked + .label-checkcompany .layer-hover{
  display: none !important;
}
input[type="radio"]:checked + .label-checkcompany .layer-active{
  display: block;
}

input[type="checkbox"]:checked + .label-checkcompany .layer-hover{
  display: none !important;
}
input[type="checkbox"]:checked + .label-checkcompany .layer-active{
  display: block;
}


.wizard{
  list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-top: 20px;
}
.wizard .next a, .wizard .finish button{
  background: #fb7329;
    border: none;
    border-radius: 0;
    color: #fff;
    padding: 12px;
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 26px;
    text-decoration: none;
}
.wizard .next a:hover, .wizard .finish a:hover{
  text-decoration: none;
  background: #e5651f;
}
#wizardForm .progress {
    width: 100%;
    margin: 0 auto 20px auto;
    }

.progress-bar{
    background-color: #e5651f !important;
}
#wizardForm label.error{
  /*display: none !important;
    position: absolute;
    left: 112%;
    top: -22%;
    display: block;
    z-index: 0;
    width: 100%;*/
    color: red;
    text-decoration: underline;
    font-size: 12px;
}
#wizardForm #r-goals label.error{
  display: none !important;
}
#wizardForm .errorgoal{
    border: none;
    border-radius: 50%;
    animation-name: errorg;
    animation-duration: 2s;
}
@keyframes errorg {
  from {
    border: 1px solid rgba(255, 0, 0, 0.75);
  }
  to {
    border: 1px solid rgba(255, 0, 0, 0.1);
  }
}


.hidden{display:none!important;visibility:hidden!important}

.progress-bar.active, .progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}
.progress-striped .progress-bar, .progress-bar-striped {
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}

#wizardForm #commentForm select.form-control, #wizardForm #commentForm input.form-control{
  height: 56px;
  font-size: 18px;
    font-weight: 400;
    color: #636363;
}
#wizardForm #commentForm select.form-control:hover, #wizardForm #commentForm input.form-control:hover {
    border-color: rgb(229, 101, 31) !important;
    border-style: solid !important;
    border-width: 1px !important;
    background-color: rgb(255, 255, 255) !important;
    transition: all 0.5s ease !important;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12), 0 3px 5px -1px rgba(0,0,0,0.2) !important;
    color: rgb(64, 64, 64) !important;
}
.info label {
    font-size: 20px;
    font-weight: 500;
}
#tabMessageSent{
  display: none;
  text-align: center;
  margin: 20px auto;
}
#tabMessageSent img{
  max-width: 100%;
  width: 100px;
}
form #success .alert-danger{
    color: #ed172b;
    background-color: transparent;
    border: none;
}
form #success .alert-danger button.close {
    margin-right: 10px;
    background: #ed172b;
    border: none;
    color: #fff;
}
form #success .alert-info {
    background-color: transparent;
    border: none;
    color: #ea6e2f;
}
form #success .alert-info button.close{
  display: none;
}

/*style mlti select*/
:root
{
  --textsel1: "Select your goals";
}
#wizardForm .multiple_select
{
  height: 43px;
  width: 100%;
  white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  -webkit-appearance: menulist;
  position: relative;
  padding: .575rem 0 !important;
  z-index: 99999999;
}
#wizardForm .multiple_select::before
{
  content: var(--textsel1);
  display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
#wizardForm .multiple_select_active
{
  overflow: visible !important;
  white-space: initial;
  width: 100%;
   height: 100%;
  max-height: fit-content;
  max-height: -moz-fit-content;
  max-height: -webkit-fit-content;
}
#wizardForm .multiple_select option
{
  display: none;
  height: 40px;
  background-color: white;
      text-align: left;
    padding: .575rem 0.2rem !important;
}
#wizardForm .multiple_select_active option
{
  display: block;
}

#wizardForm .multiple_select option::before {
  content: "\2610";
}
#wizardForm .multiple_select option:checked::before {
  content: "\2611";
}
.check-goal{
    text-align: left;
    padding: 5px;
}
.check-goal .form-check-input{
    margin-left: 8px;
    margin-right: 8px;
}

/*end style form*/


button.accordion-button.collapsed {
        background: #2d2e2f;
    font-weight: 500;
    font-size: 1rem;
}
.accordion-button{
  color: #fff;
}
.accordion-button:not(.collapsed) {
    color: #ea6e2f;
    background-color: #2d2e2f;
    font-weight: 600;
    font-size: 1.3rem;
}
.accordion-body {
        background: #39393a;
    color: #ffffff;
    font-weight: 300;
}
.accordion-button:focus {
    z-index: 3;
    border-color: #514e4e;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(118 118 118 / 25%);
}
.accordion-button::after {
  background-image: url(../img/accor-arrow2.png);
      width: 1.0rem;
    height: 1.0rem;
    background-size: 1.0rem;
}
.accordion-button:not(.collapsed)::after{
  background-image: url(../img/accor-arrow1.png);
}
footer {
    background: #2d2e2f;
    padding: 30px 15px;
    margin-top: 40px;
}
footer p{
  margin-bottom: 0;
}
footer .btn-gotop{
      text-align: right;
    margin-top: -50px;
    position: absolute;
    right: 23px;
    z-index: 9;
    opacity: 0.9;
}
footer .btn-gotop img{
  width: 46px;
}


/*style page ppc*/
.bg-headerppc h1{
	max-width: 790px;
    font-weight: 300;
    font-size: 1.8rem;
    padding-bottom: 8px;
    margin: 0 auto;
    text-align: center;
}
.bg-headerppc h3{
    font-weight: 800;
    font-size: 2.8rem;
    color: #ea6e2f;
    max-width: 600px;
    margin: 0 auto 25px auto;
    text-align: center;
}
.bg-headerppc{
  background: url(../img/bg-header-l.png) no-repeat left bottom, url(../img/bg-header-ppc-r.png) no-repeat right bottom, url('../img/effect1-header.png') no-repeat center center;
  background-size: contain;
  background-color: #222324;
}

h1 span.ppctext::before { 
        content: "Conversions"; 
        animation: animateTitlePpc infinite 10s; 
        
} 
  
@keyframes animateTitlePpc { 
        0% { 
            content: "Conversions"; 
        } 
        27% { 
            content: "Leads"; 
        }
        35% { 
            content: "Sales"; 
        } 
        54% { 
            content: "Impact"; 
        }
        70% { 
            content: "Exposure"; 
        }
        87% { 
            content: "Interactions"; 
        }  
        100% { 
            content: "Conversions"; 
        } 
}
#ppc-calculator .rangeppc-icon{
  width: 100px;
  max-width: 100%;
}
#ppc-calculator #amountInput{
      font-size: 3rem;
    padding: 0;
    font-weight: 700;
    width: 98px;
    min-width: 127px;
    text-align: right;
    background: transparent;
    outline: 0;
    border: none;
    color: #ea6e2f;
}
#ppc-calculator .channels img{
  width: 46px;
  opacity: 0.18;
  cursor: pointer;
}
#ppc-calculator .channels .form-check-input{
  visibility: hidden;
}
#ppc-calculator .channels .form-check-input:checked + .form-check-label img{
  opacity: 1;
}
#ppc-calculator #amountRange::-webkit-slider-thumb {
  background: #ea6e2f;
  width: 30px;
  height: 30px;
  margin-top: -10px;
}
#ppc-calculator #amountRange::-moz-range-thumb {
  background: #ea6e2f;
}
#ppc-calculator .bg-grey1{
  background: #252627;
}
#ppc-calculator .steep1c{
  display: none;
}

#ppc-calculator #steep2c{
  display: none;
}
#ppc-calculator .steep2c{
  display: block !important;
  position: relative;
  animation: annimsteepc 1s 1;
}
@keyframes annimsteepc {
  0%   {opacity:0; right: -200px;}
  100% {opacity:1; right: 0px; }
}
#ppc-calculator .check-calcul{
    width: 80px;
    padding-bottom: 15px;
}
#ppc-calculator h4{
  color: #ea6e2f;
  padding-bottom: 15px;
}
#ppc-calculator .emailCalc{
    width: 100%;
    max-width: 510px;
    margin: auto;
    text-align: center;
    display: block;
    padding: .575rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#ppc-calculator .emailCalc:focus {
    border-color: #fec386;
    box-shadow: 0 0 0 0.25rem rgb(253 178 13 / 25%);
}
#solutions{
    background: #252627;
}
#solutions img.solution-icon {
    width: 70px;
    padding-bottom: 15px;
}
#solutions h4 {
    color: #ea6e2f;
    padding-bottom: 8px;
}
#solutions .bg-ppc-facts{
  background: url(../img/bg-ppc-facts.png) no-repeat;
  background-size: cover;
  padding: 46px 60px;
}
#services-ppc .bg-ppc-tips{
  background: url(../img/bg-ppc-tips.png) no-repeat;
  background-size: cover;
  padding: 46px 60px;
}
#solutions .bg-ppc-facts h3, #services-ppc .bg-ppc-tips h3, #howwedoit .bg-leadgen-tips h3{
    color: #ea6e2f;
    font-weight: 700;
    font-size: 2.5rem;
    padding-bottom: 10px;
}
#solutions .bg-ppc-facts ul, #services-ppc .bg-ppc-tips ul, #howwedoit .bg-leadgen-tips ul{
    list-style: none;
    display: table;
    margin: 0 auto;
}
#solutions .bg-ppc-facts li, #services-ppc .bg-ppc-tips li, #howwedoit .bg-leadgen-tips li{
    color: #fff;
    padding-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 300;
}
#solutions .bg-ppc-facts li:before, #services-ppc .bg-ppc-tips li:before, #howwedoit .bg-leadgen-tips li:before {
    content: '';
    width: 25px;
    height: 21px;
    position: absolute;
    background-image: url(../img/solution-check1.png);
    background-size: cover;
    background-position: center;
    margin-top: 2px;
    margin-left: -31px;
}
.limt-w{
  width: 600px;
  max-width: 100%;
  margin: 15px auto;
}
#channelsppc .col-channel{
  background: #333;
  outline: 2px solid #222324;
  padding: 30px;
}
#channelsppc .col-channel:hover{
      background: #3c3c3c;
}
#channelsppc .col-channel .channel-logo{
  height: 60px;
  margin-bottom: 25px;
}
#channelsppc .col-channel h4{
  color: #ea6e2f;
}
#channelsppc .col-channel p{
  font-weight: 300;
}
#channelsppc .p-other-channel{
  font-weight: 100;
  font-size: 1.5rem;
  font-style: italic;
}
#foreverything-ppc .bg-grey1{
  padding-top: 30px;
  padding-bottom: 20px;
}
#foreverything-ppc .bg-grey2{
  background: #252627;
  padding-top: 30px;
  padding-bottom: 20px;
}
#foreverything-ppc ul {
    list-style: none;
    display: table;
    margin: 0 auto;
}
#foreverything-ppc li {
    color: #a5a5a5;
    padding-bottom: 18px;
    font-size: 1rem;
    font-weight: 300;
}
#foreverything-ppc li:hover{
  color: #fff;
}
#foreverything-ppc li:before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    background-image: url(../img/solution-check1.png);
    background-size: cover;
    background-position: center;
    margin-top: 2px;
    margin-left: -31px;
}
#hw-worksppc img{
    width: 120px;
    max-width: 100%;
    margin-bottom: 15px;
}
#hw-worksppc h4{
      color: #ea6e2f;
}
#hw-worksppc p{
  font-weight: 300;
}
#hw-worksppc .col-hw-worksppc {
    padding-top: 15px;
    padding-bottom: 15px;
}
#hw-worksppc .col-hw-worksppc:hover{
background: #252627;
}
#hw-worksppc {
    background: url(../img/bg-services.png) center no-repeat;
    background-color: #222324;
    background-size: contain;
}

/*leadgen page*/
.bg-headerleadgen{
  background: url(../img/bg-header-l.png) no-repeat left bottom, url(../img/bg-header-leadgen-r.png) no-repeat right bottom, url('../img/effect1-header.png') no-repeat center center;
  background-size: contain;
  background-color: #222324;
}

h1 span.leadgentext::before { 
        content: "Qualified"; 
        animation: animateTitleLeadgen infinite 8s; 
        
} 
  
@keyframes animateTitleLeadgen { 
        0% { 
            content: "Qualified"; 
        } 
        25% { 
            content: "Very Hot"; 
        }
        50% { 
            content: "Sales ready"; 
        } 
        75% { 
            content: "Inbound"; 
        }  
        100% { 
            content: "Qualified"; 
        } 
}
#solutions .bg-leadgen-whatweget{
  background: url(../img/bg-leadgen-whatweget.png) no-repeat;
  background-size: cover;
  padding: 46px 60px;
}
.bg-leadgen-howdo{
  background: url(../img/bg-leadgen-howdo.png) center top no-repeat;
  background-size: 850px 552px;
}
#howwedoit .schema-hwd .schema-hwd-h3 h3 {
    font-weight: 300;
    padding: 15px;
    margin: 0;
}
#howwedoit .schema-hwd .schema-hwd-h4 h4 {
    font-weight: 300;
    padding: 15px;
    margin: 0;
}
#howwedoit .schema-hwd .schema-hwd-h5 h5 {
    font-size: 2rem;
    padding: 5px 15px 30px 15px;
    margin: 0;
    font-weight: 100;
    color: #ef9161;
}
#howwedoit .schema-hwd .schema-hwd-h5 h6 {
    font-weight: 300;
    padding: 5px 15px;
    font-size: 30px;
    color: #ea6e2f;
}
#howwedoit .schema-hwd .schema-hwd-h5 span{
    font-size: 1.1rem;
    font-weight: 300;
    display: block;
    padding: 3px 15px;
}
#howwedoit .schema-hwd .schema-hwd-h6 h4 {
    margin-top: 4px;
    padding: 15px;
    font-weight: 300;
    color: #ea6e2f;
}
#howwedoit .schema-hwd .schema-hwd-h6 h5 {
    font-weight: 300;
    color: #505050;
    font-size: 1.5rem;
    padding: 0 15px 15px 0;
}
#howwedoit .bg-leadgen-tips {
    background: url(../img/bg-leadgen-tips.png) no-repeat;
    background-size: cover;
    padding: 46px 60px;
}
#howwedoit .bg-leadgen-tips h3 {
    color: #ea6e2f;
    font-weight: 700;
    font-size: 2.5rem;
    padding-bottom: 10px;
}
#callback2{
    background: url(../img/bg-callback-3.jpg) no-repeat center;
    background-size: cover;
}
#callback2 p {
    font-size: 1.6rem;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}
#hw-leadgen .hw-leadgen-icon{
      width: 140px;
    max-width: 100%;
}
#hw-leadgen .hr-style1{
      color: #ffb28c;
}
#hw-leadgen h3{
  color: #eaeaea;
}
#hw-leadgen .collapse-fleche{
      width: 26px;
    margin-top: 15px;
}
#hw-leadgen .btn:focus {
    outline: 0;
    box-shadow: none !important;
}
#hw-leadgen .btn:hover .hw-leadgen-icon, #hw-leadgen .btn:hover h3, #hw-leadgen .btn:hover .collapse-fleche{
  opacity: 0.7;
}
#hw-leadgen .card {
    background-color: #252627;
}
#hw-leadgen .card ul{
  margin-bottom: 0;
}
#hw-leadgen .card li{
      color: #ffb995;
}

/*digital marketing page*/
.bg-headerdigmarketing{
  background: url(../img/bg-header-l.png) no-repeat left bottom, url(../img/bg-header-digmarketing-r.png) no-repeat right bottom, url('../img/effect1-header.png') no-repeat center center;
  background-size: contain;
  background-color: #222324;
}

h1 span.digmarketingtext::before { 
        content: "Winning"; 
        animation: animateTitledigmarketing infinite 8s; 
        
} 
  
@keyframes animateTitledigmarketing { 
        0% { 
            content: "Winning"; 
        } 
        25% { 
            content: "Impactful"; 
        }
        50% { 
            content: "Effective"; 
        } 
        75% { 
            content: "Innovative"; 
        }  
        100% { 
            content: "Winning"; 
        } 
}
.corner-bg-exp{
    background: url(../img/corner-bg-exp.png) left top no-repeat;
    background-color: #333334;
    background-size: 46px;
    padding: 46px 60px;
}
.corner-bg2-exp{
    background: url(../img/corner-bg2-exp.png) left top no-repeat;
    background-color: #333334;
    background-size: 46px;
    padding: 46px 60px;
}
.corner-bg-exp h3 {
    color: #ea6e2f;
    font-weight: 700;
    font-size: 2.5rem;
    padding-bottom: 10px;
}
.corner-bg-exp ul {
    list-style: none;
    display: table;
    margin: 0 auto;
}
.corner-bg-exp li {
    color: #fff;
    padding-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 300;
}
.corner-bg-exp li:before {
    content: '';
    width: 25px;
    height: 21px;
    position: absolute;
    background-image: url(../img/solution-check1.png);
    background-size: cover;
    background-position: center;
    margin-top: 2px;
    margin-left: -31px;
}
#callback-dsConsulting{
  background: url(../img/bg-callback-dsconsulting.jpg) no-repeat center;
  background-size: cover;
}
#callback-dsConsulting p {
    font-size: 1.4rem;
    font-weight: 300;
    max-width: 570px;
}

.bg-callback-dsaudit{
  background: url(../img/bg-callback-dsaudit.jpg) no-repeat center;
  background-size: cover;
  padding: 30px;
}
.bg-callback-dsaudit p {
    font-size: 1.4rem;
    font-weight: 300;
    max-width: 570px;
}
#compMarket{
  background: url(../img/bg-compmarket.png) left bottom no-repeat;
  background-size: contain;
  background-color: #252627;
}
#compMarket .p-callMarketRes {
    font-size: 1.4rem;
    max-width: 640px;
    margin: 0 auto;
    font-weight: 300;
}
#strategydev .strategydev-photo{
    width: 340px;
    max-width: 90%;
    margin-bottom: 20px;
}
#strategydev .strategydev-photo:hover{
  opacity: 0.7;
}

#strategydev .linkcollapse-strategydev{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ea6e2f;
    margin-bottom: 20px;
    cursor: pointer;
}
#strategydev .linkcollapse-strategydev:hover{
  opacity: 0.8;
}
#strategydev .linkcollapse-strategydev img{
    width: 150px;
    max-width: 100%;
}

.linkcollapse-strategydev2{
  display: block;
  cursor: pointer;
}
#collapseStrategydev1.show + .linkcollapse-strategydev2, #collapseStrategydev2.show + .linkcollapse-strategydev2, #collapseStrategydev3.show + .linkcollapse-strategydev2{
  display: none;
}
#strategydev .p-callstrategydev{
  font-size: 1.4rem;
    max-width: 640px;
    margin: 0 auto;
    font-weight: 300;
}
/*Digital Advertising page*/
.bg-headerdigadv{
  background: url(../img/bg-header-l.png) no-repeat left bottom, url(../img/bg-header-digadv-r.png) no-repeat right bottom, url('../img/effect1-header.png') no-repeat center center;
  background-size: contain;
  background-color: #222324;
}

h1 span.digadvtext::before { 
        content: "reach"; 
        animation: animateTitledigadv infinite 8s; 
        
} 
  
@keyframes animateTitledigadv { 
        0% { 
            content: "reach"; 
        } 
        20% { 
            content: "resonate"; 
        }
        40% { 
            content: "impress"; 
        } 
        60% { 
            content: "engage"; 
        }
        78% { 
            content: "buzz"; 
        } 
        88% { 
            content: "sell"; 
        }  
        100% { 
            content: "reach"; 
        } 
}

/*join-us page*/
#contact2 {
    background: url(../img/bg-joinus.png) center no-repeat;
    background-color: #222324;
    background-size: contain;
}
#contact2 #join-usform{
    background-color: #2d2e2f;
    margin: 0 auto;
    padding: 40px;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.6rem;
    line-height: 2.5;
    text-align: center;
}
#contact2 #join-usform input, #contact2 #join-usform select{
    background: none;
    border: none;
    border-bottom: 1px solid #8a8989;
    outline: none;
    width: 100%;
    max-width: fit-content;
    max-width: -moz-fit-content;
    max-width: -webkit-fit-content;
    line-height: 32px;
    display: inline-block;
    vertical-align: middle;
    color: #ea6e2f;
}
#contact2 #join-usform input:focus, #contact2 #join-usform select:focus{
  border-bottom: 1px solid #fff;
}
#contact2 #join-usform #attachment{
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    line-height: 20px;
}
#contact2 #join-usform #attachment+label{
    line-height: 20px;
    border-bottom: 1px solid #fff;
    width: 100%;
    max-width: fit-content;
    max-width: -moz-fit-content;
    max-width: -webkit-fit-content;
    vertical-align: middle;
    color: #ea6e2f;
}
#contact2 .btn-sendit{
      text-align: center;
    background-color: #ea6e2f;
    color: #ffffff;
    border-radius: 30px;
    padding: 3px 30px;
    max-width: 100%;
    min-width: 150px;
    outline: none;
    border: none;
    font-size: 1rem;
    margin: 35px auto 0 auto;
    display: block;
}
#contact2 .btn-sendit:hover, #contact2 .btn-sendit:focus{
    background: #ff8141;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 19%);
}
/*partnership page*/
#dig-partner{
    background: url(../img/bg-services.png) center no-repeat;
    background-color: #222324;
    background-size: contain;
}
#dig-partner .grid-align{
  display: grid;
  justify-content: end;
}
#dig-partner .bg-grey-digpartner{
  background: #252627;
  padding: 30px;
}
/*contact page*/
#contactpartner .bloc-form{
    background: url(../img/corner-bg-exp.png) left top no-repeat;
    background-color: #333334;
    background-size: 46px;
    padding: 46px 60px;
    margin: 0 auto;
    width: 100%;
    max-width: 750px;
}
#contactpartner .icon-contact{
  width: 46px;
}
#contactpartner .form-control2{
    width: 100%;
    height: 45px;
    border: none;
    border-bottom: 1px solid #c5c5c5;
    font-size: 20px;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: transparent;
    color: #aaa;
}
#contactpartner .form-control{
    width: 100%;
    border: none;
    border-bottom: 1px solid #c5c5c5;
    font-size: 20px;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: transparent;
    border-radius: 0;
    color: #aaa;
}
#contactpartner .form-control2:focus, #contactpartner .form-control:focus{
  border: none;
  outline: none;
  color: #fff;
  box-shadow: none;
}
#contactpartner .focus-border {
    display: block;
    position: relative;
    top: -26px;
    left: 0px;
    width: 0px;
    height: 2px;
    background-color: #ea6e2f;
    transition: 0.4s;
}
#contactpartner .form-control2:focus ~ .focus-border, #contactpartner .form-control:focus ~ .focus-border {
    width: 100%;
    transition: 0.4s;
}
#contactpartner .btn-envoyer{
      text-align: center;
    background-color: #ea6e2f;
    color: #ffffff;
    border-radius: 30px;
    padding: 12px 20px;
    max-width: 100%;
    min-width: 150px;
    display: inline-block;
    margin-top: 25px;
    outline: none;
    border: none;
}
#contactpartner .btn-envoyer:hover {
    background: #ff8141;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 19%);
}
#callback-cont p {
    font-size: 1.6rem;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}
.btn-call1{
    text-align: center;
    background-color: #179207;
    color: #ffffff;
    border-radius: 30px;
    padding: 12px 20px;
    max-width: 100%;
    display: inline-block;
    margin-top: 25px;
}
.btn-call1:hover {
    background: #20b90c;
    color: #ffffff;
    box-shadow: 0px 0px 15px rgb(0 0 0 / 19%);
}
.xfa-phone:before {
    content: "";
    background: url(../img/phone-white1.png) center no-repeat;
        background-size: 45px;
    width: 54px;
    height: 20px;
    display: block;
}
.bg-headercontact{
    background: url(../img/bg-header-l.png) no-repeat left bottom, url(../img/bg-header-contact-r.png) no-repeat right bottom, url(../img/effect1-header.png) no-repeat center center;
    background-size: contain;
    background-color: #222324;
}
#contactpartner {
    background: url(../img/bg-contactandpratnership.png) center no-repeat;
    background-size: contain;
}
button.accordion-button {
    text-align: left;
}

/*style page social media*/
h1 span.socialmediatext::before { 
        content: "leads"; 
        animation: animateTitleSocialMedia infinite 10s; 
        
} 
  
@keyframes animateTitleSocialMedia { 
        0% { 
            content: "leads"; 
        } 
        27% { 
            content: "orders"; 
        }
        35% { 
            content: "views"; 
        } 
        54% { 
            content: "likes"; 
        }
        70% { 
            content: "followers"; 
        }
        87% { 
            content: "comments"; 
        }  
        100% { 
            content: "leads"; 
        } 
}
















/*mode dark*/
.dark-mode #dropdownLangue, .dark-mode .active-lang, .dark-mode .a-lang{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode .dropdown-item.active, .dark-mode .dropdown-item:active{
      background: #272727;
}
.dark-mode form #success .alert-danger {
    color: #fb8994;
}
.dark-mode form #success .alert-danger button.close {
    background: #ff8a95;
    color: #000;
}

.dark-mode h1, .dark-mode h2, .dark-mode li, .dark-mode p, .dark-mode {
      color: #b9b9b9;
}
.dark-mode .masthead{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}

.dark-mode #logos-rev{
  background: #fff;
}
.dark-hide{
  display: none;
}
.dark-mode .dark-show{
  display: none;
}
.dark-mode .dark-hide{
  display: block;
}

.dark-mode .btn-callback, .dark-mode .btn-callback2{
  color: #000;
}
.dark-mode #services, .dark-mode #separator,  .dark-mode #credentials, .dark-mode #credentials2{
   filter: invert(1) hue-rotate(180deg) contrast(130%);
  background-color: #222222;
}
.dark-mode #callback{
    background: url(../img/bg-callback-2.jpg) no-repeat center;
        background-size: cover;
}
.dark-mode #callback .container{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #ourvalues{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
  background-color: #222222;
}
.dark-mode #benefits{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
  background-color: #0b0b0b;
}
.dark-mode #benefits .bg-partner {
    filter: invert(0.9);
    background: url(../img/bg-partner-2.jpg) bottom left no-repeat;
    background-size: cover;
    min-height: 650px;
}
.dark-mode #certifications{
      background: #f9f9f9;
}
.dark-mode #certifications h2, .dark-mode #certifications p{
      color: #353535;
}
.dark-mode #recent-carousel2{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #realisations{
  background-color: #ffffff;
      background-blend-mode: difference;
}
.dark-mode #realisations h2, .dark-mode #realisations p, .dark-mode #realisations td, .dark-mode #realisations li, .dark-mode #realisations {
      color: #353535 !important;
}
.dark-mode #realisations .projectModal {
    outline: 2px solid #f9f9f9;
  }
.dark-mode #realisations .projectModal:hover .inner, .dark-mode #realisations .projectModal:focus .inner {
    background: rgb(245 106 35 / 51%);
}
.dark-mode #realisations .modal-content {
    background-color: #ffffff;
}
.dark-mode #realisations .modal-content .rowbgchang {
    background: #f1f1f1;
}
.dark-mode #realisations .modal-content .logo-real {
    filter: invert(0.8);
}
.dark-mode #clutchsection, .dark-mode #contact, .dark-mode #faq{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
  background-color: #222222;
}
.dark-mode .col-clutchcaro{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #wizardForm {
    background-color: #000000;
    filter: invert(0);
}
.dark-mode #wizardForm .form-check {
    background: #000000;
}
.dark-mode #wizardForm .check-goal{
    color: #0b0b0b;
    background-color: #d9d9d9;
    border-color: #9d9d9d;
    filter: invert(1);
}
 
.dark-mode #wizardForm .posi-check {
    background: #2a2a2a;
    border-color: #575757;
}
.dark-mode .label-checkcompany:hover, .dark-mode .label-checkcompany:focus, .dark-mode #wizardForm input[type="radio"]:checked + .label-checkcompany, .dark-mode #wizardForm input[type="checkbox"]:checked + .label-checkcompany {
    background: #000000;
}
.dark-mode #wizardForm input[type="text"], .dark-mode #wizardForm input[type="number"], .dark-mode #wizardForm input[type="email"], .dark-mode #wizardForm select, .dark-mode #wizardForm textarea{
        color: #0b0b0b;
    background-color: #d9d9d9;
    border-color: #9d9d9d;
    filter: invert(1);
}
.dark-mode input.invalid, .dark-mode select.invalid {
        background-color: rgb(26 103 217 / 27%) !important;
    border: 1px solid #00a2ff !important;
}
.dark-mode #nextBtn, .dark-mode #prevBtn{
  color: #000;
}
.dark-mode .xfa-fleche4:before, .dark-mode .xfa-fleche2:before, .dark-mode .xfa-fleche3:before{
  filter: invert(1);
}

.dark-mode .accordion-body {
    background: #363636;
    color: #c0c0c0;
}
.dark-mode .accordion-button:not(.collapsed) {
    background-color: #000000;
}
.dark-mode footer{
  background-color: #fff;
}
.dark-mode footer p{
  color: #222222;
}
.dark-mode main{
  background: #f9f9f9;
}
.dark-mode .animatedrmenu{
      background: #000000;
}
.dark-mode .service-icon{
  filter: invert(1) hue-rotate(165deg);
}
.dark-mode .dropdown-item:focus, .dark-mode .dropdown-item:hover {
    color: #bebebe;
    background-color: #262626;
}
.dark-mode .dropdown-item{
      color: #c4c4c4;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.section-modal .text-danger {
    color: #f82c2c!important;
}

.dark-mode-icon{
  display: none;
}
/*darke mode page ppc*/
.dark-mode #ppc-calculator, .dark-mode #foreverything-ppc {
    filter: invert(1) hue-rotate(180deg) contrast(130%);
    background-color: #222222;
}
.dark-mode #ppc-calculator input[type="email"]{
    color: #0b0b0b;
    background-color: #fff;
    border-color: #9d9d9d;
    filter: invert(1);
}
.dark-mode #solutions{
  background: #f3f4f5;
}
.dark-mode #solutions h2, .dark-mode #solutions p, .dark-mode #solutions li{
    color: #353535;
}
.dark-mode #solutions .bg-ppc-facts {
    background: url(../img/bg-ppc-facts2.png) no-repeat;
    background-size: cover;
}
.dark-mode #solutions .bg-ppc-facts li:before{
  filter: invert(1);
}
.dark-mode #solutions .bg-ppc-facts h3, .dark-mode #services .bg-ppc-tips h3 {
    color: #ff5d0b;
}
.dark-mode #services-ppc .bg-ppc-tips {
    background: url(../img/bg-ppc-tips2.png) no-repeat;
    background-size: cover;
}
.dark-mode #services-ppc .bg-ppc-tips h3 {
    color: #ff5d0b;
}
.dark-mode #services-ppc li{
  color: #353535;
}
.dark-mode #services-ppc li:before{
  filter: invert(1);
}
.dark-mode #channelsppc h2, .dark-mode #channelsppc p{
    color: #353535;
}
.dark-mode #channelsppc .col-channel{
    background: #fff;
    outline: 2px solid #f9f9f9;
}
.dark-mode #channelsppc .col-channel:hover {
    background: #f2f2f2;
}
.dark-mode #hw-worksppc{
      background: #f3f4f5;
}
.dark-mode #hw-worksppc h2{
    color: #ff5d0b;
}
.dark-mode #hw-worksppc p{
    color: #353535;
}
.dark-mode #hw-worksppc .col-hw-worksppc:hover {
    background: #eeeeee;
}
/*darke mode page leadgen*/
.dark-mode #solutions .bg-leadgen-whatweget{
      background: url(../img/bg-leadgen-whatweget-2.png) no-repeat;
    background-size: cover;
}
.dark-mode #howwedoit h2, .dark-mode #howwedoit p, .dark-mode #howwedoit li {
    color: #353535;
}
.dark-mode #howwedoit .schema-hwd-h3, .schema-hwd-h4, .schema-hwd-h5 span{
  color: #fff;
}
.dark-mode #howwedoit .bg-leadgen-tips li:before {
    filter: invert(1);
}
.dark-mode #howwedoit .bg-leadgen-tips {
    background: url(../img/bg-leadgen-tips-2.png) no-repeat;
    background-size: cover;
}
.dark-mode #callback2 {
    background: url(../img/bg-callback-4.jpg) no-repeat center;
    background-size: cover;
}
.dark-mode #callback2 .container {
    filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #hw-leadgen {
    filter: invert(1) hue-rotate(180deg) contrast(130%);
    background-color: #222222;
}
/*darke mode page strategy digital*/
.dark-mode #dsconsulting{
    filter: invert(1) hue-rotate(180deg) contrast(130%);
    background-color: #222222;
}
.dark-mode #callback-dsConsulting {
    background: url(../img/bg-callback-dsconsulting2.jpg) no-repeat center;
    background-size: cover;
}
.dark-mode #callback-dsConsulting .container {
    filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #compMarket{
    filter: invert(1) hue-rotate(180deg) contrast(130%);
    background-color: #000;
}
.dark-mode .bg-callback-dsaudit {
    background: url(../img/bg-callback-dsaudit2.jpg) no-repeat center;
    background-size: cover;
    filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode .bg-callback-dsaudit p{
    color: #212121;
}
.dark-mode .bg-callback-dsaudit a{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #strategydev h2, .dark-mode #strategydev p, .dark-mode #strategydev a, .dark-mode #strategydev li{
    filter: invert(1) hue-rotate(180deg) contrast(130%);
    
}
.dark-mode #strategydev .corner-bg-exp, .dark-mode #strategydev .corner-bg-exp ul{
  filter: invert(1) hue-rotate(180deg) contrast(130%);
}
.dark-mode #contact2 {
    filter: invert(1) hue-rotate(180deg) contrast(130%);
    background-color: #222222;
}
.dark-mode #join-usform {
    background-color: #000000 !important;
    filter: invert(0);
}
.dark-mode #contact2 .btn-sendit{
    color: #000;
}
/*darke mode page partnership*/
.dark-mode #dig-partner, .dark-mode #contactpartner{
    background-color: #f7f7f7;
}
.dark-mode #contactpartner .bloc-form{
  filter: invert(1) hue-rotate( 180deg) contrast(130%);
  background-color: #000;
}
.dark-mode #dig-partner .bg-grey-digpartner {
    background: #ffffff;
}
.dark-mode #dig-partner h2, .dark-mode #dig-partner p, .dark-mode #dig-partner li, .dark-mode #callback-cont p {
    color: #353535;
}
.dark-mode .btn-envoyer{
    color: #000 !important;
}













/*for mobile*/
@media (max-width:768px){
.masthead{
  background-size: cover;
      height: auto;
}
.logo-xn {
    width: 70px;
}
h1 {
    font-size: x-large;
    padding-top: 30px;
}
.font-s2{
    max-width: 790px;
    font-weight: 300;
    font-size: 1.2rem;
    padding-bottom: 8px;
    margin: 0 auto;
    text-align: center;
}
.font-s3{
    font-size: x-large;
    padding-top: 0px;
}
.bg-headerppc h1 {
    max-width: 790px;
    font-weight: 300;
    font-size: 1.2rem;
    padding-bottom: 8px;
    margin: 0 auto;
    text-align: center;
}
.bg-headerppc h3{
    font-size: x-large;
    padding-top: 0px;
}
.masthead .list-check li {
    font-size: 0.9rem;
}
.masthead .list-check li:before {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 20px;
    margin-top: 0px;
    margin-left: -26px;
}
.princ-title p {
    font-size: 1rem;
    margin: 5px auto;
}
.masthead .btn-callback {
    margin-bottom: 15px;
}
.masthead .navbar-dark .navbar-toggler {
    color: rgb(255 255 255 / 100%);
    border-color: rgb(234 110 47);
}
.masthead .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(241 98 25 / 18%);
}
#navbarsPrincipal{
  padding: 15px;
    background: #2f2f2f;
}
.masthead .btn-menuhead{
    width: 150px;
    padding-left: 12px !important;
    margin-top: 15px;
    text-align: center;
    margin: 0 auto;
    min-width: fit-content;
    min-width: -moz-fit-content;
    min-width: -webkit-fit-content;
}
.masthead .navbar-collapse .navbar-nav{
  text-align: center;
}
.masthead .dropdown-item{
    padding-top: 35px;
    padding-bottom: 24px;
    border-bottom: 1px solid #cecece;
}
.masthead .dropdown-menu .col-md-3:last-child .dropdown-item{
  border-bottom: none;
}
.masthead .service-icon{
    float: left;
        margin-top: -13px;
    width: 50px;
}
.dropdown-item + p{
  display: none;
}
#logos-rev img{
  padding-bottom: 10px;
}
h2 {
    font-size: x-large;
}
#services .logo-carsouel {
    max-width: 70%;
    margin: 0 auto;
}
#services #recent-carousel h5 {
    font-size: x-large;
    text-align: center;
}
#services #recent-carousel h5 span {
    font-size: 1.5rem;
}
#services #recent-carousel p {
    text-align: center;
    padding-right: 0;
}
#services .bg-circle {
    background-size: 88%;
    padding: 0 20px;
}
 #services .owl-dots{
  margin-top: 30px !important;
 }
#services .owl-nav{
  display: none !important;
}
#services .btn-learn {
    display: block;
    margin: 15px auto 0 auto;
}
.credentials-p1 {
    font-size: 1.1rem;
    text-align: center;
}
#credentials2 {
    background-size: cover;
    padding-bottom: 20px;
    padding-top: 0;
}
#credentials2 .credentials-p2 {
    text-align: center;
}
#callback p {
    font-size: 1.4rem;
}
#ourvalues h2 span {
    font-size: x-large;
}
#benefits .bg-partner {
    min-height: 300px;
        margin-bottom: 20px;
}
.col-benefits {
    text-align: center;
}
#certifications .nav-link{
      padding: 8px 0;
}
#certifications .nav-pills .nav-link img {
    height: 46px;
}
#certifications .nav-pills .nav-link.active .hover-certif {
    display: none;
}
#certifications .nav-item{
  width: 50%;
}
#realisations .modal-content .logo-real {
    text-align: center;
    margin: 0 auto 20px auto;
    display: block;
}
#realisations .modal-content .first-treal, #realisations .modal-content .spanfirst-treal{
  text-align: center;
  font-size: x-large;
      display: block;
}
#realisations .modal-content h3 {
    font-size: x-large;
}
#realisations .center-elem{
  text-align: center;
}
#realisations .modal-content .rowbgchang {
    padding: 1rem;
}
#realisations .modal-content .rowbgchang img{
  margin-top: 15px;
}
#realisations .modal-content .keyresl-img h4 {
    font-size: 4rem;
    padding-top: 30%;
}
#clutchsection .col-clutchcaro{
  text-align: center;
  margin: 0 auto;
  width: auto;
}
#clutchsection .icon-chif {
    text-align: center;
    display: block;
    margin: 0 auto;
}
#clutchsection h3 span {
    font-size: xx-large;
    text-align: center;
}
#clutchsection h3 {
    text-align: center;
}
#clutchsection{
      background-position: bottom;
}
#wizardForm {
    width: 100%;
    margin: 0;
    padding: 20px 0px;
}
#wizardForm h3 {
    font-size: x-large;
}
.accordion-body {
    /*text-align: center;*/
}
.dark-mode-icon{
  display: block;
}
#switch-dark{
  display: none;
}
.dark-mode-icon2{
  display: none;
}
.dark-mode .dark-mode-icon2{
  display: block;
}
.dark-mode .dark-mode-icon1{
  display: none;
}
/*ppc*/
#ppc-calculator .channels img {
    padding-bottom: 15px;
}
#solutions .bg-ppc-facts, .dark-mode #solutions .bg-ppc-facts {
    background-size: cover;
    padding: 15px;
    text-align: left;
}
#services-ppc .bg-ppc-tips, .dark-mode #services-ppc .bg-ppc-tips {
    background-size: cover;
    padding: 15px;
}

#solutions h3, #services-ppc h3{
    font-size: x-large !important;
}
/*leadgen*/
#howwedoit .bg-leadgen-tips{
  padding: 15px;
  text-align: left;
}
#howwedoit .bg-leadgen-tips h3{
    font-size: x-large !important;
}
/*digital strategy*/
#dsconsulting h3, #compMarket h3, #strategydev h3 {
    font-size: x-large;
}
/*join us*/
#contact2 #join-usform {
    font-size: 1rem;
}
/*partnership*/
.bg-headercontact{
  min-height: 380px;
}
#dig-partner{
  text-align: center;
}
#dig-partner img{
  width: 70% !important;
}
#dig-partner .grid-align {
    display: block;
    text-align: center;
}
#dig-partner .grid-align ul {
    text-align: left;
}
#contactpartner .bloc-form {
    padding: 28px 15px;
}


}


@media (max-width:575px){
/*ppc*/
#services-ppc .bg-ppc-tips, .dark-mode #services-ppc .bg-ppc-tips {
    background-position: right !important;
}
#solutions .bg-ppc-facts{
  background-position: right !important;
}  
/*leadgen*/
#howwedoit .bg-leadgen-tips{
  background-position: right !important;
}
.bg-leadgen-howdo{
  background: none;
}
.schema-hwd .container{
  padding: 0;
  margin: 0;
}
.row.schema-hwd-h3 {
    background: #ef9161;
    width: 100%;
    padding: 0;
    margin: 0;
}
.row.schema-hwd-h4 {
    background: #ea6e2f;
    width: 100%;
    padding: 0;
    margin: 0;
}
.row.schema-hwd-h5 {
    background: #505050;
    width: 100%;
    padding: 0;
    margin: 0;
}
.row.schema-hwd-h6 {
    background: #fadccc;
    width: 100%;
    padding: 0;
    margin: 0;
}
#howwedoit .schema-hwd .schema-hwd-h5 h5 {
    font-size: 1.5rem;
}
#howwedoit .schema-hwd .schema-hwd-h5 h6 {
    font-size: 22px;
}
#howwedoit .schema-hwd .schema-hwd-h5 span {
    font-size: 1rem;
}
/*gigital strategy*/
#dsconsulting h3{

}
#dsconsulting h2, #dsconsulting h3, #dsconsulting p, #dsconsulting a, #callback-dsConsulting, #compMarket h2, #compMarket p {
  text-align: center;
}
.corner-bg-exp, .corner-bg2-exp {
    padding: 25px 15px;
}
}













/*modifications*/

.stylefixMenu{
          position: fixed;
          z-index: 1020;
          width: 100%;
          background: #1e1f20;
          box-shadow: 0 10px 16px rgb(169 169 169 / 17%);
          zoom: 0.8;
          margin-top: 0 !important;
          animation-name: anniFixMenu;
          animation-duration: 2s;
}

@keyframes anniFixMenu {
  from {top: -200px;}
  to {top: 0px;}
}
#myNav{
    background: #222324;
        z-index: 1;
}
.stylefixMenu .logo-xn {
    width: 100%;
    max-width: 60px;
}
.masthead{
  height: 74%;
}
#contact #wizardForm .step-info{
  max-width: 480px;
}
#contact #wizardForm .step-info .icon-contact1{
  max-width: 100%;
  width: 44px;
}
#contact #wizardForm .step-info input{
  text-align: left;
}
#page-thanks {
    background: #f7f8f9;
}
.header-thanks {
    background: #ffffff;
}
.bg-bloc-merci {
    background: #f7f8f9;
    color: #5a5a5a;
}
.p-commercial {
    background: #ffffff;
}
#actions-ux {
    background: #f7f8f9;
}
#page-thanks .logo-xn {
    filter: invert(1) hue-rotate(180deg) contrast(130%);
}
/*for clutch*/
.clutchpage{
  height: 54%;
}
.clutchpage h1{
  text-align: left;
}
.clutchpage .princ-title p {
    text-align: left;
}
.clutchpage .bloc-form {
    background: url(../img/corner-bg-exp.png) left top no-repeat;
    background-color: #1d1d1d;
    background-size: 46px;
    padding: 46px 60px;
    margin: 0 auto;
    max-width: 750px;
}
.dark-mode .clutchpage #contact{
  filter: none;
    background-color: #1d1d1d;
}
.clutchpage #wizardForm {
    background-color: #1d1d1d;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
.clutchpage .budget-zoom{
  zoom: 0.8;
}







.dark-mode #myNav, .dark-mode #myNav:hover, .dark-mode #myNav:focus{
    filter: invert(1) hue-rotate(180deg) contrast(130%) !important;

}
.dark-mode .btn-menuhead {
  background-color: transparent;
  border: 1px solid;
  color: #ff5a40 !important;
}
.dark-mode .btn-menuhead:hover {
    background-color: #000000!important;
    box-shadow: 0 0 10px rgb(177 176 176 / 12%);
}


@media (max-width: 768px){
#myNav .navbar-collapse .navbar-nav {
    text-align: center;
}
.masthead {
    height: auto;
    min-height: 600px;
}
#myNav .dropdown-item {
    padding-top: 35px;
    padding-bottom: 24px;
    border-bottom: 1px solid #cecece;
}
#myNav .service-icon {
    float: left;
    margin-top: -13px;
    width: 50px;
}
#myNav .btn-menuhead{
    width: 150px;
    padding-left: 12px !important;
    margin-top: 15px;
    text-align: center;
    margin: 0 auto;
    min-width: fit-content;
    min-width: -moz-fit-content;
    min-width: -webkit-fit-content;
}
}