/* ============================================================
   SERVICE TABS LAYOUT
   ============================================================ */
.tabs-section{position: relative;padding:100px 0;background-image: url(../images/bg/bg-services.png);background-repeat: no-repeat;background-size: cover;background-position: center center;}
.tabs-layout{position: relative;display: flex;gap:40px;align-items:flex-start;flex-wrap: wrap;}
.tabs-nav{
  position:sticky;
  top:110px;
  background:#fff;
  border:1px solid var(--white-line);
  border-radius:18px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  width: 22%;
}
.tabs-nav-label{
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-grey);padding:14px 16px 8px;
}
.tab-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:12px;
  border:none;
  background:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--primary-color);
  transition:background .3s,color .3s;
  /* width:100%; */
}
.tab-btn .tab-ic{
  flex:none;width:34px;height:34px;border-radius:9px;background:var(--white-fog);display:flex;
  align-items:center;justify-content:center;font-size:14px;color:var(--primary-color);transition:.3s;
}
.tab-btn:hover{background:var(--white-fog);}
.tab-btn.active{background:var(--primary-color);color:#fff;}
.tab-btn.active .tab-ic{background:var(--second-color);color:#fff;}
.tabs-nav-note{
  margin-top:10px;padding:18px 16px;border-radius:12px;background:var(--white-fog);font-size:13px;color:var(--color-grey);
}
.tabs-nav-note a{color:var(--second-color);font-weight:700;}
.tabs-panels {
    position: relative;
    width: 65%;
}
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:panelIn .5s var(--ease);}
@keyframes panelIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

.panel-card{background:#fff;border:1px solid var(--white-line);border-radius:22px;padding:44px;}
.panel-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size: 13.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--second-color);
  margin-bottom:12px;
}
.panel-eyebrow .n{
  width:24px;height:24px;border-radius:7px;background:var(--primary-color);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:11px;
}
.panel-title{font-size:clamp(24px,3vw,32px);color:var(--primary-color);margin-bottom:18px;}
.panel-title .accent{color:var(--second-color);}
.panel-desc{color:var(--color-grey);font-size:15.5px;max-width:640px;margin-bottom:32px;}
.panel-visual{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/8;margin-bottom:36px;}
.panel-visual img{width:100%;height:100%;object-fit:cover;}
.panel-visual-tag{
  position:absolute;bottom:18px;left:18px;background:rgba(13,11,46,.85);backdrop-filter:blur(6px);
  color:#fff;padding:10px 16px;border-radius:10px;font-family:var(--font-mono);font-size:11.5px;
  display:flex;align-items:center;gap:10px;
}
.panel-visual-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--second-color);}
.panel-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px;}
.panel-feat{padding:22px;border-radius:14px;background:var(--white-fog);}
.panel-feat .fi{
  width:38px;height:38px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--second-color);font-size:15px;margin-bottom:14px;
}
.panel-feat h5{font-size:14.5px;color:var(--primary-color);margin-bottom:6px;}
.panel-feat p{font-size:13px;color:var(--color-grey);}
.panel-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.panel-tag{
  padding:8px 16px;border-radius:100px;background:var(--primary-color);color:#fff;font-size:12.5px;
  font-family:var(--font-mono);
}
.panel-actions{display:flex;gap:16px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--white-line);}

@media(max-width:1024px){
  .tabs-layout{
    flex-direction: column;
}
  .tabs-nav{position:static;flex-direction:row;overflow-x:auto;width: 100%;}
  .tab-btn{flex:none;white-space:nowrap;}
  .tabs-nav-note{display:none;}
  .panel-features{grid-template-columns:1fr;}
    .tabs-layout .tab-btn {
    /* width: 210px; */
}
    
.tabs-panels {
    width: 100%;
}

}
@media(max-width:760px){
  .panel-card{padding:26px;}
  .page-hero-count{flex-wrap:wrap;gap:18px 26px;}
}


/* ============================================================
   STATS BAND
   ============================================================ */

.stats-band{background:var(--black-color);padding:70px 0;position:relative;overflow:hidden;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stats-grid > div{border-right:1px solid rgba(255,255,255,.08);}
.stats-grid > div:last-child{border-right:none;}
.counter-unit {
    color: var(--second-color);
}
.stat-num {
    font-size: 50px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* *******************************************************************************************************
                                              process
******************************************************************************************************* */

section.wrapper-process {
    padding: 70px 0 60px;
    /* font-family: 'Quicksand', sans-serif; */
    /* background-color: #F6F9FB; */
    position: relative;
    /* background-color: #F6F6F6; */
    background-image: url(../images/bg/bg-process.jpg);
    background-size: cover;
    /* padding-top: 140px; */
}

.process.container {width: 1250px;}

.wrap-process {
    /* background-image: url(../images/bg/bg-line-process.png); */
    /* background-position: center center; */
    background-repeat: no-repeat;
    background-size: 70% auto;
    position: relative;
    align-content: flex-start;
    margin-top: 50px;
    align-items: unset;
}

.content-item-process {
    width: 20%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.num-process {
    color: #fff;
    font-family: 'League Spartan', sans-serif;
    font-size: 40px;
    font-weight: 700;
}

.item-process {
    width: 25%;
    padding: 0 15px;
    position: relative;
}

.content-item-process:nth-child(2n) .item-process {
    margin-top: 0px;
    transform: translateY(40px);
}

.wrap-item-process {
}

.circle-image {
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

.circle-image svg {
    transform: rotate(30deg);
    transition: all 0.4s;
    opacity: 70%;
}

.text-right {
  font-size: 17px;
}
.count-chiffres small {
  font-size: 24px;
}

.circle-image svg path:nth-child(1), 
.circle-image svg path:nth-child(2),
.circle-image svg path:nth-child(4) {
    fill: var(--primary-color);
}

.process-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 140px;
    width: 140px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.process-icon img {
    width: 60px;
    /* filter: grayscale(100%); */
}

.wrap-item-process:hover .process-icon img {
    /*transform: rotateY(360deg);*/
}

.process--meta {
    text-align: center;
}

h4.process--title {
    font-size: 18px;
    color: #000;
    line-height: 25px;
    font-weight: 600;
    margin-bottom: 5px;
}

p.process--text {
    margin: 0 0 20px 0;
    /*! font-family: 'Roboto',sans-serif; */
    font-size: 15px;
    line-height: 22px;
    color: #444;
    font-weight: 400;
    padding-top: 7px;
}

.item-process:nth-child(2) .circle-image svg, .item-process:nth-child(4) .circle-image svg {
    width: 160px;
    height: 160px;
}

.item-process:nth-child(2) .process-icon, .item-process:nth-child(4) .process-icon {
    width: 120px;
    height: 120px;
}
.wrap-btn-annaire {
    justify-content: center;
    display: flex;
    margin-top: 26px;
  }
.primary-btn.btn-btn-process1 {
  margin-right: 15px;
}
.primary-btn.btn-btn-process2 {
  color: var(--primary-color);
  background: white;
}
.primary-btn.btn-btn-process2 svg {
  fill: var(--primary-color);
}
.primary-btn.btn-btn-process2:hover {
  color: white;
}
.primary-btn.btn-btn-process2:hover svg {
  fill: white;
}
.chiffre-item-guide {
  font-size: 86px;
  font-weight: 700;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--clr-theme-2);
  line-height: 1.6;
  -webkit-text-stroke: 1px var(--second-color);
  position: absolute;
  z-index: 2;
  left: 10%;
  top: -24%;
  opacity: 0.4;
}
.process .section-title {
  margin-bottom: 90px;
}

.bg-process.has-animation {}

ul.shape-point {}

li.start-point {
    position: absolute;
    z-index: 1;
    top: -0.437rem;
    left: 13px;
    color: var(--second-color);
}

.opacity-animation.transition-50.transition-delay-10 {
    opacity: 1;
    visibility: visible;
    transition: cubic-bezier(0,1,1,1) 0.5s,opacity 0.3s;
}

li.end-point {
    position: absolute;
    z-index: 1;
    top: -14px;
    right: 44px;
}

.opacity-animation.transition-50.transition-delay-4000 {
    opacity: 1;
    visibility: visible;
    transition-delay: 4s;
    transition: cubic-bezier(0,1,1,1) 0.5s,opacity 0.3s;
    color: var(--second-color);
}

.bg-process.has-animation svg {
    position: absolute;
    top: 6px;
    left: 23px;
    right: 0;
    width: 1300px !important;
    object-fit: cover;
}

.bg-process svg path {
    /* stroke: #c6942a; */
    /* opacity: 20%; */
    /* stroke-dasharray: 1300; */
    /* stroke-dashoffset: 1300; */
    /* animation: dash_animation 4s linear forwards; */
    width: 1300px;
}

.content-elmt-process {
    position: relative;
}
.process .title-filigrane {
  color: #808080de;
}

.bg-process svg path:nth-child(1) {
    stroke: var(--black-color);
    /* opacity: 20%; */
    /*! stroke-dasharray: 1300; */
    /*! stroke-dashoffset: 1300; */
    animation: dash_animation 4s linear forwards;
}

.bg-process svg path:nth-child(2) {
    /* stroke: #F6F6F6; */
    stroke: #034c76;
    /* stroke-dasharray: 4; */
}

.wrap-item-process:hover svg {
    /*! fill: #fa360a; */
    opacity: 100%;
    transform: rotate(0deg);
}
.wrap-item-process:hover .circle-image svg path:nth-child(1), 
.wrap-item-process:hover .circle-image svg path:nth-child(2), 
.wrap-item-process:hover .circle-image svg path:nth-child(4) {
    fill: var(--primary-color);
}

.wrap-item-process:hover  .process-icon img {
    filter: grayscale(0);
}




/* ============================================================
                                       CTA
   ============================================================ */
.wrapper-cta {
    position: relative;
    padding: 30px 0 130px;
}
.wrap-cta{
    position: relative;
    border-radius:28px;
    padding:80px 60px;
    text-align:center;
    background-image: url(../images/bg/bg-cta.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.wrap-cta::before{
  position:absolute;
  content: "";
  inset: 0;
  background:linear-gradient(120deg,var(--primary-color) 0%,var(--primary-color-light) 55%,#1a3a8f 100%);
  opacity: 0.8;
}
.cta-motif{position:absolute;top:-40px;right:-20px;opacity:.5;transform:scale(1.6);}
.cta-motif.left{top:auto;bottom:-40px;left:-20px;right:auto;transform:scale(1.6) rotate(180deg);}
.wrap-cta h2{color:#fff;font-size:clamp(26px,4vw,40px);position:relative;z-index:1;}
.wrap-cta p{color:#C7C7E4;max-width:520px;margin:18px auto 0;position:relative;z-index:1;}
.cta-actions{display:flex;gap:16px;justify-content:center;margin-top:36px;flex-wrap:wrap;position:relative;z-index:1;}


/* =================================================================
                Temoignage
================================================================= */

.wrapper-temoignage {
    background-image: url(../images/bg/temoignage-bg.jpg);
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
    padding: 75px 0 50px;
}

.item-temoignage {
    position: relative;
    padding: 0 15px;
    /* width: calc(100% / 3); */
}
.wrap-temoignage {
    position: relative;
    padding-top: 10px;
}
.item-content-temoignage {
    position: relative;
    padding: 45px 30px 40px 65px;
    margin-top: 20px;
    padding-bottom: 23px;
}

.wrap-item-temoignage {
    background: url(../images/shapes/temoignage-shape.png);
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 50px 50px;
    background-position: top left;
    background-repeat: no-repeat;
    padding: 40px 35px 56px 40px;
}

.temoignage-quote {
    font-size: 86px;
    font-weight: 700;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--clr-theme-2);
    line-height: 1.6;
    -webkit-text-stroke: 1px var(--second-color);
    position: absolute;
    z-index: 2;
    right: 10%;
    top: -23px;
    opacity: 0.4;
}
.center .wrap-item-temoignage{
    transform: translateY(-50px);
    text-align: initial;
}

.wrap-item-temoignage{
    position: relative;
    background-color: #fff;
    border-radius: 10px 10px 50px 50px;
    box-shadow: 0px 0px 13px 0px rgb(2 2 2 / 6%);
    transition: transform 0.4s ease;
    transform: translateY(0);
}
.temoignage-rate-box {
    display: flex;
    color: #F5A623;
    font-size: 18px;
    letter-spacing: 4px;
    margin: 0 0 21px;
}

.temoignage-texte {
    font-size: 18px;
    line-height: 37px;
    font-weight: 500;
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    text-align: left;
}

.author-img {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
}
.author-information-box {
width: calc(100% - 80px);
}

.temoignage-text {
font-size: 18px;
line-height: 28px;
font-weight: 500;
position: relative;
z-index: 2;
margin: 0 0 18px;
}
.author-box {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 2;
    /* margin-top: 20px; */
}

.image-temoin {
    width: 240px;
    height: 150px;
border-radius: 70px 70px 70px 0;
transition: all 300ms ease;
    overflow: hidden;
}

.author-name {
    font-size: 20px;
    color: var(--second-color);
}

.author-info {
    margin-top: 10px;
}

.author-title {
    font-size: 20px;
    line-height: 1;
    margin-bottom: -1px;
    color: var(--second-color);
}

.author-designation {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 0;
}
    
.wrap-item-temoignage svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    fill: var(--primary-color-light);
    z-index: -1;
}

.wrap-temoignage .owl-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}

.wrap-temoignage .owl-stage-outer {
    padding-top: 77px;
}

.wrap-temoignage .nav-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    border-radius: 5px;
    background-color: var(--second-color);
    border: none;
    cursor: pointer;
    transition: background-color 500ms ease;
}

.wrap-temoignage .nav-btn:hover {
    background-color: var(--thirth-color);
}