@charset "utf-8";

/******************************* Important CSS *******************************/
@import url('notification.css');
@import url("https://unpkg.com/aos@2.3.1/dist/aos.css");
@import url("https://unpkg.com/balloon-css/balloon.min.css");

/********************************* Font Awesome *****************************************/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/fontawesome.min.css');

/********************************* OWL Carousel *****************************************/
@import url('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css');

/********************************* Slick Carousel *****************************************/
@import url('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
@import url('https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css');

/********************************* Modal Video *****************************************/
@import url('modal-video.min.css');

/********************************* Magnific Popup *****************************************/
@import url('https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');

/********************************* Font Families *****************************************/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Manrope:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Unbounded:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@font-face {
    font-family: reeyregular;
    src: url(fonts/reey/Reey-Regular.otf);
}

/*********************************************** COLOR VARIABLES ********************************************/

:root {/*    --primary-color: #369FF4;*/--primary-color: #1e6ee7;--second-color: #ff3b00;--white-color: #fff;--black-color: #000;--primary-font: "Roboto";--title-font: "Poppins";--smooth-font: "Roboto";--primary-font: 'Catamaran', sans-serif;--second-font: 'Unbounded', sans-serif;}


/*********************************************** Default styles ********************************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    border: none;
    text-decoration: none;
    color: inherit;
    word-wrap: break-word;
}

::placeholder {
    font-weight: inherit;
    color: inherit;
}

input, select, button {
    outline: none;
    font-size: 14px;
    background: transparent;
    font-family: inherit;
}

a {
    cursor: pointer;
    transition: all 0.5s ease;
    color: var(--primary-color);
}

img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

.container {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

.row-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.owl-nav.disabled {
    display: none !important;
}

:root {
    --primary-color: #fc943a;
    --primary-color-rgb: rgb(254, 194, 74);
    --second-color: #222222;
    --second-color-rgb: rgb(34, 34, 34);
    --title-color: #0A0A0A;
    --title-color2: #161921;
    --white-color: #fff;
    --black-color: #16243d;
    --title-font: "Plus Jakarta Sans', sans-serif";
    --primary-font:
      'Catamaran', sans-serif;
    --second-font:
      'Inter', sans-serif;
    --thirth-font:
      'Montserrat', sans-serif;
    --smooth-font:
      "Popins" sans-serif;
  }
  

  body {
    position: relative;
    overflow-x: hidden;
    font-family: var(--second-font);
    line-height: 1.5;
    font-weight: 400;
    font-size: 15px;
    color: #4B4B4B;
    position: relative;
}

.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
    animation: smoothScroll 1s forwards;
}

.wrapper-super-header.sticky {
    z-index: 10;
}

/*********************************************** Loaders ********************************************/

#loader{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

#loader2{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 105;
}

#loader3{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 110;
}

/****************************************************** Messages Erreurs **************************************/

.message-erreur {
    display: none;
    position: relative;
    font-size: 12px;
    background: none;
    margin: 5px 0 0px;
    padding: 0 0 0 15px;
    text-align: left;
    color: #be1e2d;
    width: 100%;
}

.message-erreur::before {
    display: block;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -5px;
    left: 20px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #be1e2d;
}

/* ====================================================== Titre General =========================================== */

/* ====================================================== Titre General =========================================== */


.section-title{
    position: relative;
    z-index: 2;
    margin-top: -6px;
    margin-bottom: 25px;
}
.sub-title {
    display: inline-block;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--body-font);
    position: relative;
    margin-bottom: 24px;
    padding-left: 40px;
    text-transform: uppercase;
    margin-top: -0.34em;
    line-height: 14px;
}
.sub-title::before{
    width: 30px;
    top: auto;
    bottom: 10px;
    position: absolute;
    content: '';
    background-color: var(--primary-color);
    left: 0px;
    height: 2px;
}
.sub-title::after{
    width: 20px;
    margin-top: 3px;
    top: 5px;
    position: absolute;
    content: '';
    background-color: var(--primary-color);
    left: 10px;
    height: 2px;
}

.sub-title .double-line::before, .sub-title .double-line::after{
    transform: translate(100%, 0);
    right: -10px;
    left: auto;
}

.sub-title .double-line::before{
    width: 30px;
    top: auto;
    bottom: 10px;
}
.sub-title .double-line::after{
    margin-top: 3px;
    width: 20px;
    top: 5px;
}
.sub-title .double-line::before,.sub-title .double-line::after {
    position: absolute;
    content: '';
    background-color: var(--primary-color);
    height: 2px;
}

.main-title{
    font-size: 48px;
    line-height: 1.227;
    margin-top: -0.25em;
    margin-bottom: 20px;
}

.title-center .watermark-title{
    text-align: center;
    position: absolute;
    top: -22px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.watermark-title{
    position: absolute;
    top: -26px;
    left: 0px;
    -webkit-text-stroke-color: #22222236;
    -webkit-text-stroke-width: 1px;
    color: #00000000 !important;
    font-size: 100px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--title-color);
    clear: both;
    line-height: 1.2;
    margin: 0 0 15px;
    font-weight: 700;
    font-family: be vietnam pro, sans-serif;
}
p {
    font-family: var(--body-font);
    margin: 0 0 18px 0;
    color: var(--body-color);
    line-height: 1.75;
}

/* .ligne-titre {
    margin: 0 auto 40px;
    position: relative;
    width: 1200px;
}

.ligne-titre .section-title {
    margin: 0;
    width: 50%;
    padding: 0 15px;
    position: unset;
} */


/************************************************** BTN-STYLE ************************************* */

.primary-btn {
  font-family: var(--body-font);
  color: var(--white-color);
  background-color: var(--primary-color);
  position: relative;
  padding: 17px 36px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  text-transform: uppercase;
  z-index: 2;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: none;
  transition: 0.4s;
}
.primary-btn i {
    margin-left: 5px;
}
.primary-btn.black-btn {
  background-color: var(--title-color);
}
.primary-btn.white-btn {
  background-color: var(--primary-color);
}
.primary-btn.white-btn {
  background-color: var(--white-color);
  color: var(--title-color);
}
.primary-btn.orange-btn:hover, .primary-btn.transparent-btn:hover{
  color: var(--title-color);
}
.primary-btn.transparent-btn{
  color: var(--white-color);
  background-color: transparent;
  border: 2px solid var(--white-color);
}
.primary-btn.transparent-btn::before, .primary-btn.transparent-btn::after {
    background-color: var(--white-color);
}
.primary-btn.orange-btn::before, .primary-btn.orange-btn::after {
    background-color: var(--white-color);
}
.primary-btn::before, .primary-btn::after{
  content: '';
    position: absolute;
    z-index: -1;
    left: 100%;
    top: 0;
    width: 150%;
    height: 100%;
    background-color: var(--title-color);
    color: var(--white-color);
    -webkit-transform: skew(30deg) translate3d(0, 0, 0);
    transform: skew(30deg) translate3d(0, 0, 0);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.primary-btn::before {
    left: auto;
    right: 100%;
    -webkit-transform: skew(-30deg) translate3d(0, 0, 0);
    transform: skew(-30deg) translate3d(0, 0, 0);
}
.primary-btn.black-btn::before, .primary-btn.primary-btn.black-btn::after{
  background-color: var(--primary-color);
}
.primary-btn.white-btn::before, .primary-btn.primary-btn.white-btn::after{
  background-color: var(--title-color);
}
.primary-btn:hover {
    color: var(--white-color);
}
.primary-btn:hover::before {
    -webkit-transform: skew(-30deg) translate3d(70%, 0, 0);
    transform: skew(-30deg) translate3d(70%, 0, 0);
    opacity: 1;
}
.primary-btn:hover::after {
    -webkit-transform: skew(30deg) translate3d(-70%, 0, 0);
    transform: skew(30deg) translate3d(-70%, 0, 0);
    opacity: 1;
}

span.play-text {
    display: flex;
    align-items: center;
}


.secondary-btn{
    display: inline-block;
    height: 45px;
    line-height: 48px;
    padding: 0 22px 0 25px;
    border-radius: 5px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-box-shadow: 0 10px 30px rgba(var(--primary-color), .29);
    box-shadow: 0 10px 30px rgba(var(--primary-color), .29);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.secondary-btn i{
    font-size: 12px;
    line-height: 1;
    margin-left: 5px;
    position: relative;
    top: 1px;
    -webkit-transition: all 300ms linear 0ms;
    transition: all 300ms linear 0ms;
}
.secondary-btn:hover i{
    animation: toRightFromLeft .3s linear 1;
}
@keyframes toRightFromLeft{
    49% {
        transform: translate(100%);
    }   
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
.secondary-btn::after{
    content: "";
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    position: absolute;
    height: 120%;
    width: 15px;
    opacity: .2;
    left: -35%;
    top: -10%;
    transform: rotate(0);
    -webkit-transform: rotate(0);
}

.secondary-btn:hover::after{
    left: 130%;
}

    
/**************************************** Margins & Paddings styles ***************************************/

.mb-50 {
    margin-bottom: 50px;
}

.mb-40 {
     margin-bottom: 40px; 
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-0 {
    margin-bottom: 0;
}



.mt-50 {
    margin-top: 50px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-0 {
    margin-top: 0;
}


.pb-50 {
    padding-bottom: 50px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-0 {
    padding-bottom: 0;
}


.pt-50 {
    padding-top: 50px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-0 {
    padding-top: 0;
}

.white, .white > * {
    color: var(--white-color) !important;
}

.center, .center > * {
    text-align: center !important;
}

/**************************************** Header Mobile ***************************************/


.header-mobile {
    display: none;
}


/**************************************** Pop up Video ***************************************/

.popup-video {
    padding: 0px 0px 0px 0px;
    width: 65px;
    height: 65px;
    color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
    font-size: 25px;
    position: relative;
    z-index: 6;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.popup-video i:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: red;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0 currentColor;
    box-shadow: 0 0 0 0 currentColor;
    -webkit-animation:pulse-border 3s infinite;
    animation:pulse-border 3s infinite;
    opacity: .6;
    z-index: -1;
}

.popup-video:before,
.popup-video:after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 70px;
    height: 70px;
    background: #005aa9;
    border-radius: 50%;
    animation: pulse-border 1.9s ease-in-out 0s infinite;
    z-index: -1;
}

.popup-video::before {
    opacity: .4;
    animation: none;
}

.element-shape-decor {}

.item-shape-decor {
    position: absolute;
    z-index: 1;
}

.item-shape-decor img {}

.item-shape-decor:nth-child(1) {
    bottom: 0;
    left: 0;
}

.item-shape-decor:nth-child(2) {
    top: 0;
    right: 0;
}

/****************************************************************************************************************|
                                                                                                              |**|
                                                    Animations                                                |**|
                                                                                                              |**|
*****************************************************************************************************************/

@keyframes smoothScroll {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes slide {
    from { background-position: 0 0; }
    to { background-position: 1920px 0; }
}
@keyframes animateBubble {
    0% {
        margin-top: 20%
    }
    to {
        margin-top: -30%
    }
}

@keyframes ripple {
    70% {
        background: rgba(255, 255, 255, 0);
        width: 120px;
        height: 120px;
    }
    100% {
        background: rgba(255, 255, 255, 0);
        width: 0px;
        height: 0px;
    }
}

@keyframes circle {
    0% {
         opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes rotateme {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes float-bob {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes rtLeftRight {
    0% {
        transform: perspective(600px) translate3d(0px, 0px, 0px) rotateY(45deg);
    }
    50% {
        transform: perspective(600px) translate3d(0px, 0px, 0px) rotateY(-45deg);
    }
    100% {
        transform: perspective(600px) translate3d(0px, 0px, 0px) rotateY(45deg);
    }
}


/********************************************************************************************************/
 
 
@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.3);
        opacity: 0;
    }
}
@keyframes shapeMover {
  0%, 100% {
    -webkit-transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
  }
  50% {
    -webkit-transform: perspective(400px) rotate(0deg) translateZ(20px) translateY(20px) translateX(20px);
    transform: perspective(400px) rotate(0deg) translateZ(20px) translateY(20px) translateX(20px);
  }
}
 
/*****************************************************************************************************/

@keyframes UpDown {
  0%,100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}

@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}


@keyframes zoom-fade {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}



@keyframes animationFramesOne {

    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-40px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(40px);
    }
    100% {
        transform: translateX(0);
    }
}
 


@keyframes alltuchtopdown {
    0% {
        transform: rotateX(0deg) translateY(0px);
    }
    50% {
        transform: rotateX(0deg) translateY(-20px);
    }
    100% {
        transform: rotateX(0deg) translateY(0px);
    }

}

 
/**************************************************************************************************/
 


/****************************************************************************************************************|
                                                                                                              |**|
                                                        Header                                                |**|
                                                                                                              |**|
*****************************************************************************************************************/



.bloc-left-header {
    width: 44%;
  }
  
  
  
  .nous-contacter {
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
  }
  .middle-header {
  width: 100%; 
  display: flex;
  justify-content: center;
  }
  .bloc-right-header {
    width: 44%;
  }
  
  .navlink {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    justify-content: center;
  }
  
  .wrap-header.row-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .wrap-header-navlink {
    /* background-color: #0e0e0e; */
    padding: 0 30px 0 80px;
    flex-grow: 1;
  }
  .wrap-middle-header.row-container {
    justify-content: space-between;
    width: 100%;
  }
  .container.middle-header {
    width: 1200px;
  }
  .item-info-left-header {
    color: #041A38;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
    margin-right: 5px;
    color: var(--primary-color);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
  }
  .item-info-left-header span {
    background-repeat: no-repeat;
    transition: background-size .4s cubic-bezier(.22,.61,.36,1);
    background-size: 0 1px;
    background-image: linear-gradient(currentColor,currentColor);
    background-position: 0 85%;
  }

  .left-top-header.row-container {
    justify-content: inherit;
  }
  .item-info-left-header span:hover {
    background-size: 100% 1px;
  }
  
  .social-header {
    justify-content: flex-end;
  }
  .right-bottom-header {
    justify-content: space-between;
    width: 100%;
  }
  .wrap-info-top-right-header {
    justify-content: flex-end;
  }
  .info-top-right-header {
    height: 28.5%;
    justify-content: flex-end;
    display: flex;
  }
  .navlink>li>a {
   
  }
  .wrap-left-bottom-header {
    flex-wrap: nowrap;
  }
  .social-header a {
    margin-right: 10px;
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    font-size: 18px;
    border-radius: 50%;
    /* overflow: hidden; */
    transition: all .3s ease;
    /* background-color: white !important; */
  }
  .wrapper-super-header::before {
   
  }
  
  .item-info-left-header i {
    margin-right: 5px;
  }
  .left-bottom-header-contact {
    font-family: Roboto,sans-serif;
    font-size: 10px;
    line-height: 1.385em;
    font-weight: 500;
    letter-spacing: .1em;
    position: relative;
    display: block;
    width: auto;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 0;
    outline: 0;
    transition: color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid #041A37;
    width: max-content;
    display: flex;
    justify-content: center;
  }
  .left-bottom-header {
    height: 71.5%;
    flex-wrap: nowrap;
  }
  .bottom-header {
    height: 71.5%;
    flex-wrap: nowrap;
  }
  .navlink-header {
  }
  .wrap-header.row-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  
  .wrapper-super-header::after {
    
  }
  
  .wrap-middle-header {
   
  }
  .wrap-left-header {
   
  }
  .nous-contacter a {
    
  }
  .left-right-header {
    display: flex;
    margin-right: 24px;
  }
  .progress-bar-header {
    font-size: 25px;
    padding-left: 10px;
  }
  .wrap-left-bottom-header.row-container {
    display: flex;
    justify-content: space-between;
  }
  .navlink li {
    /*! height: 100%; */
    padding: 5px 17px;
  }
  ul li .header-store>i {
    color: var(--primary-color);
}
  .wrapper-middle-header {
    /*! padding: 10px 0; */
    /* max-height: 120px; */
    box-shadow: 0 13px 29px rgba(0,0,0,.1);
    /* background: #1d1c1c; */
    height: 120px;
  }
  .icon-middle-info-header {
    width: 45px;
    aspect-ratio: 1;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2ede7;
    /* fill: #3358d3; */
    color: var(--primary-color);
    font-size: 18px;
    border-radius: 10px;
  }
  .item-middle-info-header.row-container {
    justify-content: center;
    margin-left: 20px;
    padding-left: 20px;
    position: relative;
    /* min-height: 80px; */
  }
  .text-middle-info-header {
    font-size: 14px;
    color: #1a1a1a;
  }
  .text-middle-info-header h3 {
    line-height: 20px;
    font-weight: 600;
    display: block;
    line-height: 24px;
    font-weight: 400;
    font-size: 13px;
    color: gray;
    margin-bottom: 0;
  }
  .text-middle-info-header span {
    display: block;
    line-height: 20px;
    font-size: 15px;
    color: black;
    font-weight: 600;
  }
  .social-header a:hover {
    transform: translateY(-5px);
    color: var(--primary-color);
  }

  .item-middle-info-header::before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #ddefee;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0,-50%);
    -khtml-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
  }
  
  .containeur-header .middle-header a img {
      height: 90px;
      position: relative;
      /* filter: brightness(0) invert(1); */
  }
  
  .wrap-header.row-container {
    display: flex;
    /* flex-wrap: nowrap; */
    align-items: unset;
    /* overflow: hidden; */
    width: 92%;
  }
  .wrap-header-navlink {
    /* background-color: var(--primary-color); */
    padding: 0 20px 0 20px;
    flex-grow: 1;
    border-radius: 0 0 20px 20px;
    position: relative;
  }
  .wrap-middle-header.row-container {
    justify-content: space-between;
    width: 100%;
    align-items: center;
    flex-wrap:  nowrap;
  }
  .container.middle-header {
    width: 1200px;
  }
  .navlink>li>a.active::before {
    width: 12px;
  }
  
  .has-children>a::after {
    margin-left: 4px;
    content: '\f107';
    font-family: "fontAwesome";
    display: inline-block;
  }
  .bg-header {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .bg-header1 {
    position: relative;
  }
  .bg-header2 {
    right: -55px;
    position: relative;
  }
  .bg-header img {
    height: 64px;
    opacity: 1;
  }
  .navlink>li>a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 77%;
    margin: auto;
    /*! background-color: var(--primary-color); */
    background-image: -webkit-gradient(linear,left top,right top,from(#d1651a),to(#c1282a));
    background-image: -webkit-linear-gradient(left,#d1651a,#c1282a);
    background-image: -moz-linear-gradient(left,#d22a19,#c1282a);
    height: 12px;
    width: 0;
    -webkit-transition: all .25s cubic-bezier(.37,.31,.2,.85);
    -khtml-transition: all .25s cubic-bezier(.37,.31,.2,.85);
    -moz-transition: all .25s cubic-bezier(.37,.31,.2,.85);
    -ms-transition: all .25s cubic-bezier(.37,.31,.2,.85);
    -o-transition: all .25s cubic-bezier(.37,.31,.2,.85);
    transition: all .25s cubic-bezier(.37,.31,.2,.85);
    background: var(--primary-color);
    border-radius: 50px;
  }
.info-middle-header {
    width: 80%;
    position: relative;
    top: -20px;
}
.logo-middle-header {
    /* padding: 33px 114px 32px 0; */
    position: relative;
    z-index: 1;
    width: 15%;
    height: 120px;
    display: flex;
    align-items: center;
}

/* .logo-middle-header::before {
    background-color: var(--primary-color);
    content:
    "";
    height: 100%;
    width: 3000px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 98.5% 100%, 0% 100%);
}
 */
/* .shape-logo {
    background-color: #122A4D;
    height: 100%;
    width: 3000px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    clip-path: polygon(0 0, 100% 0, 99% 100%, 0% 100%);
} */

/* .logo-middle-header::after {
    background-color: var(--primary-color);
    content:"";
    width: 90px;
    height: 50px;
    position: absolute;
    bottom: 0;
    right: 0;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    z-index: -3;
} */

.wrapper-header-fixed{
    display: none;
    box-shadow: 0 3px 10px #0000000d;
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    z-index: 99;
    background: #fff;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-name: fadeInDown;
    /* height: 90px; */
    z-index: 99;
}
.logo-header-fixed {
    width: 60px;
}
.wrap-header-fixed .navlink {
    margin-right: 25px;
}
.wrap-header-fixed-navlink.row-container::before {
    position: absolute;
    /* top: -6px; */
    right: -370px;
    content: "";
    background-color: var(--second-color);
    width: 100%;
    height: 100%;
    transform: skew(-35deg);
}

.scrolled{
    display: block !important;
}

a.about_btn i {
    margin-left: 7px;
}
  .wrap-header-recherche {
    font-size: 12px;
    color: white;
    margin-left: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 25px;
    aspect-ratio: 1;
    background-color: white;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-right: 45px;
    position: relative;
    border-radius: 50%;
    color: var(--primary-color);
  }
  
.contener-btn-action {
  display: flex;
  align-items: center;
}

.about_btn:hover {
  color: #fff;
  background-color: #6f4f10;
}
.about_btn:hover .bg-icon-header {
  background: white;
  color: var(--second-color);
}

.about_btn{
    position: relative;
    display: flex;
    background-color: var(--primary-color);
    color: #fff;
    /* border: 3px solid var(--primary-color); */
    font-size: 16px;
    align-items: center;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 15px 8px 15px;
    transition: all 0.5s linear;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}
.about_btn-box:not(:last-child){padding-right: 10px;}
.about_btn .about_btn-hover_1{
    position: absolute;
    content: "";
    background-color: var(--primary-color);
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    top: -110%;
    left: -10%;
    border-radius: 50%;
    transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
    z-index: -1;
}
.about_btn:hover .about_btn-hover_1{
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}
.about_btn .about_btn-hover_2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: #16243d;
    transform: translate3d(0, -100%, 0);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
    z-index: -1;
}
.about_btn:hover .about_btn-hover_2{
    transform: translate3d(0, 0, 0);
    transition-duration: 0.05s;
    transition-delay: 0.4s;
    transition-timing-function: linear;
}
.about_call{
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 20px;
}
.about_call-icon{
    position: relative;
    height: 50px;
    width: 50px;
    border: 2px solid #e0e4e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0ce0ff;
    font-size: 20px;
    transition: all 500ms ease;  
}
.about_call-icon:hover{
    background-color: #015fc9;
    color: #ffffff;
    border: 2px solid #015fc9;
}
.about_call-content{
    position: relative;
    margin-left: 10px;
    top: -2px;     
}
.bg-icon-header {
    width: 25px;
    min-width: 25px;
    position: relative;
    display: flex;
    justify-content: center;
    background: var(--primary-color);
    border-radius: 50%;
    height: 25px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    font-size: 12px;
    color: white;
    align-items: center;
    margin-right: 5px;
}

.about_call-content a{
    font-size: 16px;
    font-weight: 700;
    color: #16243d;
    display: inline-block;
    letter-spacing: -0.02em;
    transition: all 500ms ease;
}
.about_call-content a:hover{
    color: #015fc9;
}
  .right-super-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrap-header-recherche::before {
    height: 95%;
    width: 100%;
    border-left: 1px solid #bbbbbb;
    content: '';
    position: absolute;
    right: -48px;
  }
  .right-super-header ul li {
    padding: 0 15px;
    margin-right: 15px;
    border-right: 1px solid #7b7b7b;
}


.right-super-header ul li i {
    color: var(--primary-color);
    padding-right: 5px;
    font-size: 18px;
}
  .wrap-header-button::before {
    transition: all 220ms ease-in-out;
    position: absolute;
    width: 0;
    height: 100%;
    content: "";
    z-index: -1;
    left: 0;
    border-radius: 0 0 5px 5px;
    /*! background: red; */
  }
  .bg-header1 img {
    height: 48px;
    opacity: 0.8;
  }
  .wrap-header-button:hover::before {
    width: 100%;
    z-index: 1;
  }
  .wrap-header-button:hover a {
    z-index: 2;
    position: relative;
  }
  .wrap-header-navlink.row-container {
    justify-content: space-between;
    /* box-shadow: 0 13px 29px rgba(0,0,0,.1); */
    align-items: inherit;
    /* gap: 223px; */
  }
  .wrapper-header {
    width: 100%;
    display: flex;
    justify-content: end;
    position: relative;
    z-index: 10;
  }
    .header {
        position: relative;
        top: -35px;
        width: 70%;
        display: flex;
        justify-content: end;
        /* background: white; */
        /* box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2); */
        /* border-top: 1px solid #eee; */
        /* border-radius: 0 0 15px 15px; */
    }
.header::before {
    position: absolute;
    /* top: -6px; */
    right: -50px;
    content: "";
    background-color: var(--second-color);
    width: 100%;
    height: 100%;
    transform: skew(-35deg);
}
  .containeur-header {
    position: relative;
    font-family: poppins,sans-serif;
  }
  .wrap-header-button {
    line-height: 52px;
    border-radius: 0;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all 200ms linear 0ms;
    font-family: poppins,sans-serif;
    box-shadow: 0 8px 10px rgba(12,12,12,.1);
    position: relative;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    border: none;
    background-color: var(--second-color);
    background-position: 0;
    height: auto;
    color: var(--white-color);
    margin-left: 15px;
    border-radius: 10px;
  }
  .wrap-header-button a i {
    margin-left: 8px;
    font-size: 12px;
  }
  .wrap-header-recherche:hover {
    color: var(--primary-color);
  }
  .item-middle-info-header:nth-child(1)::before {
    display: none;
  }
  
  .middle-header a {
    
  }
  .page-wrapper {}
  
  .wrapper-super-header {
     background-color: var(--second-color);
     padding: 11px 0;
     color: #fff;
     font-size: 14px;
     line-height: 24px;
  }
.item-shape-decor {
    position: absolute;
    z-index: 1;
}

.item-shape-decor img {}

.item-shape-decor:nth-child(1) {
    bottom: 67px;
    left: -3px;
}

.item-shape-decor:nth-child(2) {
    top: -9px;
    right: -46px;
}


  
  .header.container {
  }
  
  .wrap-header {
      
  }
  .wrap-super-header {
   
  }
.left-super-header>strong {
    color: var(--primary-color);
}
  .left-header {
      padding: 0 0 0 25px;
      /* box-shadow: 6px 0px 20px rgba(0 0 0 / 15%); */
      /* display: flex; */
      /* align-items: center; */
      /* height: 100%; */
  }
  
  
  .navlink > li > a {
      /* font-size: 16px; */
      position: relative;
      display: flex;
      transition: all .5s ease;
      /* font-weight: 300; */
      color: #ddd;
  }
  
  .navlink > li > a.active, .navlink > li > a:hover, .navlink > li:hover > a, .navlink > li.active > a {
      /* text-shadow: 0.05px 0 0 rgb(255 255 255/80%); */
      color: var(--primary-color);
  }
  
  .active .navlink > li > a::before {
    color: var(--second-color);
  }
  
  
  
  /* ssmenu */
  
  .dropdown-ssubmenu-panel li a {
    line-height: normal;
    padding: 12px 0;
    padding-right: 0px;
    position: relative;
    font-weight: 500;
    font-size: 15px;
    display: block;
    /*! border-bottom: 1px solid rgba(90,90,90,.11); */
    /*! color: #2e3d44; */
    transition: all 220ms linear 0ms;
    padding-right: 15px;
  }
  .dropdown-ssubmenu-panel li a:hover::before {
    left: -10px;
  }
  .dropdown-ssubmenu-panel li a::before {
    content: "\f105";
    position: relative;
    font-family: "Fontawesome";
    margin-left: 10px;
  }
  
  .navlink > li > a:hover::before {
  }
  .navlink>li>a {
    /* letter-spacing: .1em; */
    color: #fff;
    position: relative;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 47px;
    text-transform: uppercase;
  }
.header-store {
    display: flex;
    align-items: center;
}

.header-store i {
    margin-left: 5px;
}
  
  
  .wrap-left-bottom-header {
    flex-wrap: nowrap;
    width: 100%;
  }
  
  .search-header {}
  
  .search-header {
      position: relative;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding-right: 20px;
  }
  
  .search {
      
      color: var(--primary-color);
      position: relative;
      aspect-ratio: 1;
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* color: var(--white-color); */
      background-color: rgba(6 122 197 / 10%);
      font-size: 12px;
      border-radius: 50%;
      /* overflow: hidden; */
      transition: all .5s ease;
  }
  
  .search:hover {
      background-color: var(--primary-color);
      color: var(--white-color);
  }
  
  .search:before {
      content: "";
      position: absolute;
  }
  .wrap-right-header {
    display: flex;
    margin-left: 10px;
    height: 100%;
    justify-content: center;
    display: flex;
  }
  
  
  /*ssmenu*/
  ul.dropdown-submenu-panel,ul.dropdown-ssubmenu-panel  {
      
      -ms-transform: translateY(-10px);
      transform: translateY(-19px);
      /*! border-bottom: 4px solid var(--primary-color); */
      position: absolute;
      background: #fff;
      padding: 22px 0;
      top: 100%;
      margin-left: 14px;
      margin-top: 30px;
      margin-bottom: 0;
      min-width: 260px;
      z-index: 99;
      visibility: hidden;
      opacity: 0;
      -webkit-box-shadow: 11px 10px 38px 0 rgb(46 63 99 / 15%);
      -khtml-box-shadow: 11px 10px 38px 0 rgba(46,63,99,.15);
      -moz-box-shadow: 11px 10px 38px 0 rgba(46,63,99,.15);
      -ms-box-shadow: 11px 10px 38px 0 rgba(46,63,99,.15);
      -o-box-shadow: 11px 10px 38px 0 rgba(46,63,99,.15);
      box-shadow: 11px 10px 38px rgb(46 63 99 / 15%);
      -webkit-transition: all 220ms linear 0ms;
      -khtml-transition: all 220ms linear 0ms;
      -moz-transition: all 220ms linear 0ms;
      -ms-transition: all 220ms linear 0ms;
      -o-transition: all 220ms linear 0ms;
      transition: all 100ms linear 0ms;
      -webkit-border-radius: 8px;
      -khtml-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      border-radius: 8px;
      /*! clip: rect(1px,1px,1px,1px); */
      transform-origin: 0 0 0;
      -webkit-transform-origin: 0 0 0;
      -ms-transform-origin: 0 0 0;
      -o-transform-origin: 0 0 0;
      text-align: left;
  }
  
  
  
  
  .dropdown-item li a:hover {
      color: #d30d33;
  }
  ul.smenu a:hover {
    padding-left: 18px;
    color: var(--primary-color);
  }
  
  .dropdown-item i {
      font-size: 12px;
      position: relative;
      top: 5px;
      right: -14px;
  }
  
  a.dropdown-item {
      /* white-space: nowrap; */
      /* font-size: 15px; */
      /* font-weight: 500; */
      /* letter-spacing: 1px; */
      /* padding: 7px 25px; */
      /* color: #585757; */
      /* display: flex; */
      /* letter-spacing: 0.1px; */
  }
  
  li.has-children.submenu-item:hover .dropdown-ssubmenu-panel {
      visibility: visible;
      opacity: 1;
      /* transform: translateY(0); */
  }
  
  li.has-children.submenu-item {
      position: relative;
      z-index: 1;
  }
  
  
  li.has-children.submenu-item a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  
  li.has-children.submenu-item > a:after {
      content: "\f105";
      position: relative;
      font-family: "Fontawesome";
      margin-left: 10px;
  }
  
  ul.dropdown-ssubmenu-panel {
      position: absolute;
      left: 100%;
      transform: translateY(-10px);
      /* pointer-events: none; */
      /* background-color: #fff; */
      /* border-radius: 0 0 10px 10px; */
      /* width: auto; */
      box-shadow: 0 8px 83px rgba(40,40,40,8%);
  }
  
  ul.dropdown-submenu-panel,
  ul.dropdown-ssubmenu-panel  {
      opacity: 2;
      /*! visibility: visible; */
      -o-transition: transform .4s ease;
      /*! background: red; */
  }
  
  ul.smenu li:hover ul.dropdown-ssubmenu-panel {
    visibility: visible;
    visibility: visible;
    opacity: 1;
    clip: inherit;
    margin-top: -23px;
    transition: all 0.2s ease-in-out;
  }
  
  a.dropdown-item.active {
      background: rgba(255,255,255,.5);
      color: rgb(18 159 97);
  }
  
  li.submenu-item:not(:last-child) {
      /* border-style: solid; */
      /* border-width: 0 0 1px; */
      /* border-color: #f0f0f0; */
      /* position: relative; */
  }
  
  .menu-item:hover>.dropdown-submenu-panel,
  .submenu-item:hover>.dropdown-ssubmenu-panel {
      /* opacity: 1; */
      /* visibility: visible; */
      /* -webkit-transform: translateY(0px); */
      -ms-transform: translateY(0px);
      /* transform: translateY(-1px); */
      /* pointer-events: auto; */
      visibility: visible;
      opacity: 1;
      clip: inherit;
      margin-top: 0;
  }
  
  a.nav-link.active, a.nav-link:hover, .menu-item:hover a.nav-link {
      color: #d30d33;
  }
  
  
  
  
  /***************************************************Recherche*************************************************************/
  
  
  
  .bloc-search-bar-- {
      position:  absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      top: 0;
      width:  100%;
      background-color: rgb(245, 245, 245);
      height: 200px;
      z-index: 10010;
      margin-top: 1px;
      padding-top: 30px;
      transform: translateY(-178%);
      transition: all 0.8s;
      display: none;
  }
  
  .content-search-display {
      width: 900px;
      max-width: 100%;
      margin:  0 auto;
      height: auto;
      position:  relative;
      padding-right: 100px;
      box-sizing: border-box;
  }
  
  button#close {
      position: absolute !important;
      top: 0;
      right: 0;
      margin-right: 0 !important;
      padding: 0 !important;
      border: 0;
      background-color: rgba(0, 0, 0, 0);
      color: rgb(255, 255, 255);
      width: 34px;
      cursor: pointer;
  }
  
  
  .titre-search-bar {
      margin: 0 0 10px 0;
      font-size: 27px;
      letter-spacing: .5px;
      font-weight: 400;
      color: var(--primary-color);
      text-align: center;
  }
  
  p.description-search-bar {
      color: rgb(37, 37, 37);
      font-size: 17px;
      width: auto;
      line-height:  1.5;
      opacity: 0.8;
      width: 100%;
      margin-top: 15px;
      text-align: center;
  }
  
  .bloc-search-bar--:before {
      position: absolute;
      right: 0;
      top: -15px;
      left: 55vw;
      width: 0;
      height: 0;
      margin: auto;
      content: '';
      border-bottom: 15px solid rgb(242, 242, 242);
      border-right: 20px solid rgba(0, 0, 0, 0);
      border-left: 20px solid rgba(0, 0, 0, 0);
      z-index: 1500;
      display: none;
  }
  
  .bloc-search-bar--.show-search-bar--- {
      transform: translateY(0);
  }
  
  .icone-search svg, 
  .icone-cle svg {
  }
  form#search-bar label {
      width: 70%;
  }
  input#mot-cle {
      width: 100%;
      height: 50px;
      border: 0px solid rgb(216, 216, 216);
      padding: 0 10px;
      font-size: 19px;
      margin-right: 0;
      background: #fff;
  }
  
  
  form#search-bar {
      position:  relative;
      display: flex;
      width:  100%;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0px 6px 12px rgb(0 0 0 / 5%);
      height: 80px;
      border-radius: 40px;
      padding: 0 15px 0 20px;
      position: relative;
      z-index: 2;
      align-items: center;
  }
  
  .content-button-client a:last-child .icone-cle {
      width: 123px;
  }
  
  button#search-button {
      position: relative;
      font-size: 15px;
      font-weight: 500;
      color: #ffffff;
      padding: 0 45px;
      text-align: center;
      text-transform: uppercase;
      -webkit-border-radius: 35px;
      -moz-border-radius: 35px;
      border-radius: 35px;
      height: 55px;
      background: var(--primary-color);
      cursor: pointer;
      display: none;
  }
  
  .element-recherche {
      position: absolute;
      top: 80%;
      width: 95%;
      padding: 18px 30px 20px;
      /* background: #f2f2f2; */
      background: var(--white-color);
      /* border-radius: 10px; */
      border-bottom: 5px solid var(--second-color);
      /* margin-top: 50px; */
      /* visibility: hidden; */
      /* opacity: 0; */
      box-shadow: 11px 10px 38px rgb(46 63 99 / 15%);
      transition: all 220ms linear 0ms;
      border-radius: 8px;
      /* clip: rect(1px,1px,1px,1px); */
      /* transform-origin: 0 0 0; */
  }
  
  .resultats-recherche{
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      color: var(--second-color);
      padding: 0 0 20px;
  }
  
  ul.liste-element-recherche {
      /*position: absolute;
      top: 80%;
      width: 70%;*/
      max-height: 250px;
      overflow-y: auto;
  }
  
  form#search-bar:hover .element-recherche {
      /*visibility: visible;
      opacity: 1;
      clip: inherit;
      margin-top: 0;*/
  }
  
  li.item-element-recherche {
      padding: 2px 0;
      /* line-height: 1.5; */
      font-size: 14px;
      cursor: pointer;
      transition: all 220ms linear 0ms;
  }
  
  li.item-element-recherche:not(:last-child) {
      border-bottom: 1px solid #eee;
  }
  
  li.item-element-recherche:hover {
      /* cursor: pointer; */
      color: var(--primary-color);
  }
  
  div#div_preloader {}
  
  div#loadercontenteur {
      /*    background: #6e6e6e;*/
      /*    width: 33px;*/
      position: absolute;
      right: 1%;
  }
  
  div#loadercontenteur img {
      width: 50px;
  }
  
  
  /******************************************************************************************************/
  
  
  
  
  
  
  
  
  /*GESTION DES SOUS MENUS*/
  
  ul.smenu, ul.ssmenu {
      /*! border-bottom: 4px solid var(--primary-color); */
      position: absolute;
      background: #fff;
      padding: 22px 0;
      top: 100%;
      /*! left: 0; */
      margin-top: 40px;
      /* margin-bottom: 0; */
      min-width: 250px;
      z-index: 2;
      visibility: hidden;
      opacity: 0;
      transition: all 220ms linear 0ms;
      border-radius: 0 0 8px 8px;
      clip: rect(1px,1px,1px,1px);
      transform-origin: 0 0 0;
      text-align: left;
      box-shadow: 0 8px 83px rgba(40,40,40,8%);
  }
  
  ul.smenu li, .ssmenu li {
      padding: 0 32px;
      white-space: nowrap;
      position: relative;
  }
  
  ul.smenu a {
      line-height: normal;
      padding: 7px 0;
      position: relative;
      font-weight: 500;
      font-size: 14px;
      display: block;
      /*! border-bottom: 1px solid rgba(90,90,90,.11); */
      color: rgba(1,16,50,.87);
      transition: all 220ms linear 0ms;
  }
  .dropdown-ssubmenu-panel li a:hover::before {
    left: -10px !important;
  }
  
  ul.ssmenu {
      top: 0;
      left: 100%;
  }
  
  ul.ssmenu li {}
  
  ul.ssmenu a {}
  
  ul.navlink li:hover .smenu, ul.smenu li:hover .ssmenu {
      visibility: visible;
      opacity: 1;
      clip: inherit;
      margin-top: 0;
      z-index: 2;
      position: absolute;
  }
  
  ul.smenu a:before {
      content: '';
      width: 10px;
      height: 2px;
      position: absolute;
      top: 50%;
      left: -10px;
      transform: translate(0,-50%);
      opacity: 0;
      transition: all 220ms linear 0ms;
      background-color: var(--second-color);
      bottom: -5%;
  }

li.dropdown-ssmenu::after {
  content: "\f105";
  position: absolute;
  font-family: "Fontawesome";
  left: 92%;
  top: 0;
  color: #8d8383;
  font-size: 14px;
}
li.dropdown-ssmenu {
  display: flex;
  position: relative;
}
  
  .has-children a::before {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translate(0,-50%);
  }
  
  ul.smenu a:hover {
      padding-left: 18px;
      color: var(--primary-color);
  }
  
  ul.smenu a:hover:before {
      opacity: 1;
      left: 0;
  }
  
  ul.navlink li:last-child a {
      /*! border-bottom: none; */
  }
  .left-top-header.row-container {
    justify-content: space-between;
    flex-wrap: nowrap;
    color: white;
  }
  



/* ================================================================================================================== 
|                                                       FOOTER                                                       |
====================================================================================================================*/


.wrapper-footer .shape-right {
    position: absolute;
    /* bottom: 65px; */
    /* right: 0px; */
    z-index: -1;
    width: 100%;
    height: 100%;
}
.wrapper-footer{
    background: var(--second-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.wrapper-footer-shape1, .wrapper-footer-shape2{
    position: absolute;
    z-index: -1;

}
.wrapper-footer-shape1{
    bottom: 0%;
    left: 0%;
}
.wrapper-footer-shape2{
    bottom: 0%;
    right: 0%
}
.wrap-footer{
    padding: 60px 0 35px;
    display: flex;
    flex-wrap: wrap;
}

.go-top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 10px;
    font-size: 25px;
    position: absolute;
    bottom: -27px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    transition: all .3s ease-in-out;
}

.go-top-btn:hover {
    background-color: #fff;
    color: var(--primary-color);
}
.item-footer.about{
    flex: 0 0 auto;
    width: 33.33333%;
}
.wrap-item-footer{
    margin-bottom: 20px;
}
.wrap-item-footer>a {
    display: inline-flex;
}
.logo-img-box {
    width: 100px;
    /* background-color: #fff; */
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
.item-footer.about img{
    width: 100%;
    /* margin-bottom: 15px; */
    object-fit: cover;
}
.item-footer.about p{
    color: #fff;
    padding-right: 18px;
    margin-bottom: 20px;
}
.footer-contact li {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
}
.footer-contact li a{
    color: #fff;
    transition: 0.3s;
}
.footer-contact li i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-right: 15px;
    border-radius: 5px;
    background: var(--primary-color);
    text-align: center;
    -webkit-transition: .3s;
    transition: .3s;
    color: #fff;
}
.item-footer.list1{
    flex: 0 0 auto;
    width: 16.6666667%;
}
.item-footer.list2{
    flex: 0 0 auto;
    width: 25%;
}
.footer-title{
    color: #fff;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 30px;
    font-size: 21px;
    z-index: 1;
}
.footer-title::before{
    position: absolute;
    content: '';
    z-index: -1;
    width: 90px;
    height: 3px;
    border-radius: 50px;
    background: linear-gradient(45deg, var(--primary-color) 0%, transparent 100%);
    bottom: 0;
    left: 0;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.footer-list li a {
    color: #fff;
    transition: all 0.5s ease-in-out ;
}
.footer-list li a i {
    margin-right: 5px;
    color: var(--primary-color);
}
.footer-list li a:hover {
    padding-left: 10px;
    color: var(--primary-color);
}
.item-footer.newsletter{
    flex: 0 0 auto;
    width: 25%;
}
.item-footer.newsletter p{
    color: #fff;
    padding-right: 18px;
    margin-bottom: 20px;
}
.subscribe-form .form-control {
    padding: 20px;
    border-radius: 8px;
    box-shadow: none;
    border: none;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.subscribe-form .footer-btn {
    margin-top: 20px;
    width: 100%;
    padding: 18px 14px;
}
.footer-btn {
    font-size: 14px;
    color: #fff;
    padding: 14px 20px;
    transition: all .5s;
    text-transform: uppercase;
    position: relative;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: none;
    background: var(--primary-color);
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
    z-index: 1;
}
.subscribe-form .footer-btn::before {
    background: #fff;
}
.footer-btn::before {
    position: absolute;
    content: '';
    background: var(--color-dark2);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: scaleY(0);
    transition: all .5s ease-in-out;
    z-index: -1;
}
.footer-btn:hover:before {
    transform: scaleY(1);
    transition: all .5s ease-in-out;
}
.subscribe-form .footer-btn:hover {
    color: var(--primary-color);
}

.subscribe-form .footer-btn::before {
    background: #fff;
}
.footer-btn i {
    margin-left: 5px;
}
.copyright {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.1);););););););););););
    border-bottom: 4px solid var(
    --primary-color);
    z-index: 1
}

.wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.item-copyright{
    flex: 0 0 auto;
    width: 50%;
}
.copyright .copyright-text {
    color: #fff;
    margin-bottom: 0;
    font-size: 16px;
}
.copyright .copyright-text a {
    color: var(--primary-color);
    font-weight: 500;
}
.footer-social {
    display: flex;
    gap: 15px;
    justify-content: end;
}
.footer-social li a i {
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 8px;
    background: #fff;
    color: var(--primary-color);
    transition:  all .5s ease-in-out;
}
.footer-social li a i:hover {
    background: var(--primary-color);
    color: #fff;
}

.fadeInUp{
  visibility: visible;
  animation-delay: 0.25s;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
}


@keyframes fadeInUp{
  0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
  }
}

.fadeInDown{
  visibility: visible;
  animation-delay: 0.25s;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-name: fadeInDown;
}

@keyframes fadeInDown{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}