body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: white;
    color: white;
  
  }
  body::-webkit-scrollbar{
    display: none;
  }
  
  
  @font-face {
    font-family:'JannaLT-Regular' ;
    src: url(/assest/font/arbFONTS-JannaLT-Regular.ttf);
  }
  
  @font-face {
    font-family: 'Janna-LT-Regular';
    src: url(/assest/font/Janna-LT-Regular.ttf);
  }
  .poppins-thin {
    font-family: "Poppins", serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .poppins-extralight {
    font-family: "Poppins", serif;
    font-weight: 200;
    font-style: normal;
  }
  
  .poppins-light {
    font-family: "Poppins", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .poppins-regular {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .poppins-medium {
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .poppins-semibold {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: normal;
  }
  
  .poppins-bold {
    font-family: "Poppins", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .poppins-extrabold {
    font-family: "Poppins", serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .poppins-black {
    font-family: "Poppins", serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .poppins-thin-italic {
    font-family: "Poppins", serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .poppins-extralight-italic {
    font-family: "Poppins", serif;
    font-weight: 200;
    font-style: italic;
  }
  
  .poppins-light-italic {
    font-family: "Poppins", serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .poppins-regular-italic {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .poppins-medium-italic {
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .poppins-semibold-italic {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-style: italic;
  }
  
  .poppins-bold-italic {
    font-family: "Poppins", serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .poppins-extrabold-italic {
    font-family: "Poppins", serif;
    font-weight: 800;
    font-style: italic;
  }
  
  .poppins-black-italic {
    font-family: "Poppins", serif;
    font-weight: 900;
    font-style: italic;
  }
  
/* Circular Preloader styles */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-preloader {
    width: 80px;
    position: relative;
    top: 40px;
    left: 30px;
    height: auto;
    margin-bottom: 30px;
    animation: pulse 1.5s infinite alternate;
}

.loading-circle {
    position: relative;
    width: 135px;
    height: 135px;
}

.circle-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid #f0f0f0;
    border-top: 4px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
    background: linear-gradient(90deg, #ec2c7b, #fa722b);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes pulse {
    from {
        transform: scale(0.95);
        opacity: 0.8;
    }
    to {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

  /* Add this to prevent scrolling during load */
  body.loading {
      overflow: hidden;
      height: 100vh;
  }

  /* header */
  .header.default {
    background: linear-gradient(to bottom, #272727, #00000000);
  }
  .header.highlight {
  background-color: rgba(32, 26, 53, 0.7); /* Apply opacity to the background color only */
  
  }


  .header{
    background-color: transparent;
    position: fixed;
    width: 100%;
    z-index: 999;
    .navbar{
      padding: 0 0 0 0 !important;
    }
    .navbar-toggler:focus{
      box-shadow: none !important;
    }
    .navbar-toggler-icon{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }
    .navbar-collapse{
      flex-grow: 0 !important;
        border-radius: 20px;
    }
      a{
          color:  #393671 !important;
          font-size: 16px;
          font-weight: 600;
      }
       /* menu */
      ul {
      padding: 0;
      list-style: none;
      background-color: transparent;
      position: relative;
      height: 90px;      
      }
      ul a {
      font-family: Poppins;
      line-height: 23.86px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: white !important;
      height: 90px;
      
      }
      li a {
      display: block;
      padding: 43px 20px;
      text-decoration: none;
      }
      
      
      .jeune {
      background-color: #FFCB22;
      border-radius: 0px 0px 15px 15px;
      color: #393671 !important;
      font-weight: 600;
      cursor: pointer;

      }
      .logo {
      display: block;
      float: left;
      font-size: 2em;
      padding: 10px 20px;
      text-decoration: none;
      position: relative;
      left: 200Px;
      top: 0Px;
      
      }
     .menu {
      clear: both;
      max-height: 0;
      float: right;
    }
    
    /* menu icon */
    
     .menu-icon {
      cursor: pointer;
      display: inline-block;
      padding: 28px 0px;
      position: relative;
      user-select: none;
    }
    
     .menu-icon .navicon {
      background: white;
      display: block;
      height: 2px;
      position: relative;
      transition: background .2s ease-out;
      width: 18px;
    }
    
     .menu-icon .navicon:before,
     .menu-icon .navicon:after {
      background: white;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }
    
     .menu-icon .navicon:before {
      top: 5px;
    }
    
     .menu-icon .navicon:after {
      top: -5px;
    }
    
    /* menu btn */
    
     .menu-btn {
      display: none;
    }
    
     .menu-btn:checked ~ .menu {
      max-height: 240px;
    }
    
     .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
    }
    
     .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    
     .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    
     .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
     .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
    
    /* 48em = 768px */
    
   
    .middle-header{
      position: relative;
      top: 120px;
      text-align: center;
    }
    .middle-header img{
      width: 23%;
      height: 207px;
      margin: 7% 0px 0 1%;
      border-radius: 6px;
      object-fit: cover;
    }
    .page-head .footer-head-bar {
      text-align: center;
      position: relative;
      top: 70Px;
    }
    
  }
  @media (min-width: 48em) {
      .header_blog li {
        float: left;
      }
      .header_blog .menu {
        clear: none;
        max-height: none;
        height: 100Px;
        margin: 0px;
      }
      .header_blog .menu-icon {
        display: none;
      }
    }


    /* header */
  .page-head {
    height: 100vh; /* Ensure that .page-head has a height */
    position: relative; /* Set position to relative to position the pseudo-element */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .page-head::after {
    content: '';
    height: 15%;
    width: 15%;
    left: 50%;
    top: 50%;
    z-index: 3;
    position: absolute; /* Ensure the pseudo-element is positioned relative to .page-head */
    display: block;
    background-image: url('../image/midlle-zom.svg'); /* Correct path to image */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: translate(-50%, -50%);
  }
  #scrolling {
    content: '';
    height: 8%;
    width: 8%;
    left: 50%;
    top: 62%;
    z-index: 3;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  #scrolling img{
    max-width: 5%;
    font-size: 0;
    line-height: 0;
  }
  

  
  
  .mobile-banner{
    display: none;
  }
  
  

  .middle-header{
    position: relative;
    top: 120px;
    text-align: center;
  }
  .middle-header img{
    width: 23%;
    height: 207px;
    margin: 7% 0px 0 1%;
    border-radius: 6px;
    object-fit: cover;
  }
  .page-head .footer-head-bar {
    text-align: center;
    position: relative;
    top: 70Px;
  }
  
  
  /*-----------------------------aventage------------------------*/
  
  .aventage{
    background-color: #201A35;
    
  }
  .aventage .title{
    text-align: center;
    padding: 30px 0 0 0;
    height: 70px;
  }
  .aventage .title p{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    line-height: 27px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #FFCB21;
  }
  .aventage .mess{
    background-image: url(../image/avantage-jaune.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 425Px;
    height: 115px;
    padding: 5px 50px 0 0;
    position: relative;
    top: 10px;
    left: 90px;
  }
  #flesh-anim,
  #service-anim,
  #qui-anim,
  .image-class2,
  .mess {
    -webkit-animation: action 0.8s infinite  alternate;
    animation: action 0.8s infinite  alternate;
  }
  
    @-webkit-keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
  
    @keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
  .aventage .mess p{
    font-family: 'Cairo', sans-serif; 
    font-family: 'Cairo', sans-serif; 
    color: #393671;
    font-size: 26px;
    font-weight: 700;
    line-height: 48.52px;
    text-align: end;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }
  
  .aventage .mess span{
    font-family: Poppins;
    font-size: 24Px;
    font-weight: 600;
    line-height: 39.13px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    
  }
  .aventage .why{
    text-align: center;
  }
  .aventage .why .logo .image-class1{
    width: 370px;
    height: 110Px;
    position: relative;
    top: 30px;
    left: 79px;
  
  }
  .aventage .why .logo .image-class2{
    position: relative;
    left: 115px;
  }
  
  
  #aventage-flex-container {
    /* margin: 0; */
    padding: 0;
    width: 100%;
    gap: 15px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
  
  }
  .aventage-flex-box {
    width: 280px;
    color: black;
    font-size: 15px;
    background-color: #31294C;
    border-radius: 10px;
    margin-top: -105px;
    margin: 20px 10px 0 0;
    height: 505px;
    padding: 10px 10px 20px 10px;
  }
  .aventage .aventage-flex-box .image{
    height: 50%;
    text-align: center;
  }
  .aventage .aventage-flex-box img{
    width: 190px;
  }
  .aventage .aventage-flex-box .first-part{
    text-align: center;
    margin-top: 15px;
  }
  .aventage .aventage-flex-box .first-part p{
    
    font-family: 'Cairo', sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 70.78px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: white;
        
  }
  .aventage .aventage-flex-box .first-part span{
    font-family: Poppins;
    font-size: 26px;
    font-weight: 700;
    line-height: 42.81px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    position: relative;
    bottom: 20px;
  }
  .aventage .aventage-flex-box .second-part{
    text-align: center;
    padding-top: 10Px;
  }
  .aventage .aventage-flex-box .second-part p{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.59px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: white;
    width: 260px;
    position: relative;
    right: 5px;
        
  }
  .aventage .aventage-flex-box .first-part .span3{
  font-family: 'Cairo', sans-serif;
    font-size: 27px;
    font-weight: 700;
    line-height: 54.23px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
        
  }
  .aventage .aventage-flex-box .second-part span{
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    
  }
  #flex-1:hover ,
  #flex-1:hover {
  background-color: #00A7CD;
  }
  
  #flex-2:hover,
  #flex-2:hover {
  background-color: #9B2A65; 
  }
  
  #flex-3:hover,
  #flex-3:hover {
  background-color: #D79802;
  }
  
  #flex-4:hover,
  #flex-4:hover {
  background-color: #35AA6F; 
  }
  #flex-4 img{
    width: 232px;
    position: relative;
    top: 10px
  }
  /*-----------------------------aventage------------------------*/
  
  
  
  
  
  /*-----------------------------presentation------------------------*/
  
  .presentation{
    height: 405px;
    background-color: #FFCB21;
    display: flex;
  .part1{
    margin-left: 110px;
  
  }
  .qui1{
    background-image: url(../image/back-qui.png);
    width: 269px;
    height: 86.24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 35PX;
    padding: 28px 0 0 40px;
  
    p{
      font-family: "Poppins", serif;
      font-size: 20px;
      font-weight: 600;
      line-height: 30px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #31294C;
    }
  }
  .part1 .qui2{
    background-image: url(../image/back-qui-bleu.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 879.69px;
    height: 184.34px;
    margin-top: 30px;
    padding: 40px 25px 0px 45px;
    span{
      font-family: "Poppins", serif;
      font-size: 20px;
      font-weight: 600;
      line-height: 30px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      
    }
    p{
      font-family: "Poppins", serif;
      font-size: 20px;
      font-weight: 300;
      line-height: 30px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
            
    }
  }
  .qui3{
    background-image: url(../image/back-imoji.png);
    width: 185.62px;
    height: 86.24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 70px;
    padding: 17px 0 0 45px;
  }
  .qui4{
    position: relative;
    width: 280px;
    right: 35px;
    bottom: 31Px;
  }
  }
  
  .presentation-mobile{
    display: none;
    background-color: #FFCB21;
    
    .qui1{
      background-image: url(../image/back-qui.png);
      width: 269px;
      height: 86.24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 28px 0 0 40px;
    
      p{
        font-family: "Poppins", serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #31294C;
      }
    }
     .qui2{
      background-image: url(../image/back-qui-bleu.png);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 360.69px ;
      height: 365.34px ;
      padding: 40px 25px 0px 45px ;
      border-radius: 35px ;
      margin-top: 20px ;
      span{
        font-family: "Poppins", serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 30px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        
      }
      p{
        font-family: "Poppins", serif;
        font-size: 20px;
        font-weight: 300;
        line-height: 30px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
              
      }
    }
    .qui3{
      background-image: url(../image/back-imoji.png);
      width: 185.62px;
      height: 86.24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 25px;
      padding: 17px 0 0 45px;
    }
    .qui4{
      
    }
  }
  
  
  /*-----------------------------presentation------------------------*/
  
  
  
  
  
  /*-----------------------------presentation-2-----------------------*/
  .presentation-2{
    
    background-color: #201A35;
    li{
      list-style: none;
    }
  }
  .presentation-2 .buttom{
    height: 160px;
  }
  .presentation-2 .buttom ul{
    position: relative;
    top: 60Px;
  }
  .presentation-2 .buttom li{
    text-align: center;
  }
  .presentation-2 .buttom a{
  display: inline-block;
  width: 230px;
  height: 75px;
  background-color: white;
  text-decoration: none;
  color: #393671;
  text-align: center;
  border-radius: 55px;
  margin-right: 25px;
  padding: 0px 0 0 8px;
  }
  .presentation-2 .buttom p{
    font-family: Poppins;
    font-size: 30px;
    font-weight: 800;
    line-height: 76px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    
  }
  .presentation-2 .body{

    padding: 80px 150px 0 195px;
  
  }
  .presentation-2 .body p{
    font-family: Poppins;
    font-size: 66px;
    font-weight: 700;
    line-height: 84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: white;
    
  }
  
  /*-----------------------------presentation-2-----------------------*/
  
  
  
  
  
  /*-----------------------------vd-youtube---------------------------*/
  .vd-youtube{
    height: 500Px;
    background-color: #393671;
    display: flex;
    
  }
  .vd-youtube .text{
    margin: 165px 0 0 80px;
  
  }
  
  .vd-youtube p{
    font-family: Poppins;
    font-size: 66px;
    font-weight: 700;
    line-height: 64px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #4D499B;
  
    .word {
      color: black; /* Default color */
      transition: color 0.5s ease; /* Smooth transition */
    }
    .word.active {
      color: #FFCB21; /* Color when active */
    }
  }
  
  
  .test {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
    margin: auto;
  }
  
  .test2 {
    position: absolute;
    margin-left: 10%;
    margin-top: 10%;
    width: 80%;
    height: 80%
  }
  
  .test3 {
    position: absolute;
    top: 0;
    left: 40px;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 75%;
    height: 85%;
  
  }
  
  .bg {
    background-color: black;
    opacity: 0.65;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
  }
  .youtube-pop{
    position: relative;
    top: 100Px;
    left: 50px;
    border-radius: 15px;
  }
  
  
  /*-----------------------------vd-youtube---------------------------*/
  
  
  
  /*-----------------------------services---------------------------*/
  
  .service{
    background-color: #FFCB21;
  }
  .service .title{
    text-align: center;
    padding: 40px 0 0 0;
  }
  .service .title p{
    font-family: Poppins;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #393671;
        
  }
  .service .image{
    display: flex;
  }
  .service .image .img1{
    width: 160px;
    position: relative;
    left: 110px;
    height: 190Px;
  }
  .service .image .img2{
    background-image: url(../image/nos-service-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 405.39px;
    height: 132px;
    position: relative;
    left: 140px;
    top: 30px;
    background-color: white;
    border-radius: 30px;
    padding: 16px 60px 0 0;
    p{
      font-family: 'Cairo', sans-serif;
      font-size: 30px;
      font-weight: 700;
      line-height: 46px;
      text-align: right;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #393671;
    }
    span{
      font-family: Poppins;
      font-size: 30px;
      font-weight: 600;
      line-height: 46px;
      text-align: right;
      color: #393671;
      
    }
  }
  .service-card{
  margin-top: 70px;
      .service-flex-box .hover-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: #393671;
        padding: 35px 20px 20px 20px;
        opacity: 0; /* Start with hidden content */
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
  
    .service-flex-box:hover .text {
        display: none; /* Hide the original text when hovered */
    }
    .service-flex-box:hover img {
      display: none; /* Hide the original text when hovered */
  }
  
    .service-flex-box:hover .hover-content {
        opacity: 1;
        visibility: visible; /* Show the new content when hovered */
    }
  
    .service-flex-box:hover .image img {
        opacity: 0.5; /* Optional: Add a slight fade effect to the image */
    }
  
    .hover-content .hover-titlte {
      font-family: Poppins;
      font-size: 19px;
      font-weight: 700;
      line-height: 25px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #393671;
      
    }
    .hover-text{
      font-family: Poppins;
      font-size: 14px;
      font-weight: 500;
      line-height: 19.18px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
              
    }
  
  }
  
  .service .image .part2{
    padding: 23px 0 0 40px;
    width: 562.28px;
    height: 117.76px;
    background-color: #393671;
    border-radius: 30px;
    position: relative;
    left: 450Px;
    top: 110px;
  
    p{
      font-family: Poppins;
      font-size: 32px;
      font-weight: 700;
      line-height: 71.3px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
           
    }
  }
  
  #service-flex-container {
    /* margin: 0; */
    padding: 0;
    width: 100%;
    gap: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  
  }
  .service-flex-box {
    width: 325px !important;
    color: black;
    font-size: 15px;
    background-color: white;
    border-radius: 20px;
    margin-top: -105px;
    margin: 10px 10px 0 0;
    height: 220px;
    padding: 10px 10px 20px 10px;
  }
  .service .service-flex-box .image{
  height: 70%;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .service .service-flex-box .text{
  padding: 0px 40px 0 40px;
  }
  .service .service-flex-box .text p{
  font-family: Poppins;
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #393671;
    
  }
  .service-flex-box:hover {
  transform: translateY(-10px); /* Slightly lift the box */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect */
  }
  
  
  /*-----------------------------services---------------------------*/
  
  
  /*-----------------------------proposition---------------------------*/
  
  
  
  .proposition{
  background: white;
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  
    main {
      overflow: hidden;
    }
    .splide__slide {
      display: flex;
      flex-wrap: wrap; /* Allow images to wrap into rows */
      justify-content: center; /* Center the images horizontally */
      align-items: center; /* Center the images vertically */
      gap: 60px; /* Add spacing between the images */
      
  }
  .splide__arrow{
    display: none;
  }
  .box {
      width: 18%; /* Set the width to ensure 5 items per row */
      max-width: 150px; /* Optional: Add a max-width for responsive design */
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .boxes1 .box img {
    width: 115%;
    max-width: 160px;
    height: auto;
    position: static;
  }
  .boxes2 .box img{
    width: 84%;
  }
  .splide__pagination__page{
    background-color: #D9D9D9;
    width: 10px;
    height: 10px;
    margin-left: 15px;
    position: relative;
    top: 20px;
  }
  .splide__pagination__page.is-active {
    background: #FFCB21;
    transform: none !important;
    z-index: 1;
  }
  /* Optional: Responsive design for smaller screens */
  @media (max-width: 768px) {
      .box {
          width: 30%; /* Adjust to fit 3 items per row on smaller screens */
      }
  }
  
  @media (max-width: 480px) {
      .box {
          width: 20%; /* Adjust to fit 2 items per row on very small screens */
      }
      .splide__slide {
        gap: 0px;
    }
  }
  
    a,
    button {
      cursor: pointer;
      user-select: none;
      border: none;
      outline: none;
      background: none;
    }
    
    img {
      display: block;
      max-width: 120%;
      height: auto;
      object-fit: cover;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: -moz-crisp-edges;
      image-rendering: crisp-edges;
    }
    
    .section {
      margin-inline: auto;
      padding-block: 5rem;
    }
    
    .container {
      max-width: 75rem;
      height: auto;
      margin-inline: auto;
      padding-inline: 1.25rem;
    }
   
  }
  .title p{
    animation: backInUp ; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 5s; /* don't forget to set a duration! */
  }
  .under-title{
    animation: backInUp ; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 6s; /* don't forget to set a duration! */
  }
  .text{
    animation: backInUp ; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 7s; /* don't forget to set a duration! */
  }
  
  h3 {
    font-family: Roboto, sans-serif;
  }
  
  p {
    font-family: Inter, sans-serif;
  }
  
  .rpi-slider-container {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    display: flex;
    padding: 10px;
  }
  
  .rpi-slide {
    min-width: 100%;
    height: 565px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: none;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 10px;
  }
  
  .rpi-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  
  input[type="radio"] {
    display: none;
  }
  
  input#rpi-slide1:checked ~ .rpi-slide:nth-of-type(1),
  input#rpi-slide2:checked ~ .rpi-slide:nth-of-type(2),
  input#rpi-slide3:checked ~ .rpi-slide:nth-of-type(3),
  input#rpi-slide4:checked ~ .rpi-slide:nth-of-type(4) {
    display: flex;
  }
  
  .rpi-overlay {
    position: absolute;
    top: 0;
    left: 65px;
    width: 100%;
    height: 100%;
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to the next line */
    gap: 10px; /* Add space between the boxes */
    width: 100%; /* Adjust as needed */
    padding: 50px 0 0 50px;
  }
  .rpi-overlay .box {
    width: 240px;
    height: 140px;
    margin-bottom: 40px;
    box-sizing: border-box; /* Include padding/border in size */
    
  }
  
  
  
  .rpi-text-overlay {
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: 50%;
    max-width: 700px;
    position: absolute;
    bottom: 20px;
    left: 20px;
  }
  
  .rpi-text-overlay h3 {
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
  }
  
  .rpi-text-overlay p {
    font-size: 25px;
    margin-bottom: 15px;
    font-weight: 300;
  }
  
  .rpi-pill-button {
    background-color: #cc6666;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .rpi-dot-navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }
  
  .rpi-dot {
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  input#rpi-slide1:checked ~ .rpi-dot-navigation label[for="rpi-slide1"],
  input#rpi-slide2:checked ~ .rpi-dot-navigation label[for="rpi-slide2"],
  input#rpi-slide3:checked ~ .rpi-dot-navigation label[for="rpi-slide3"],
  input#rpi-slide4:checked ~ .rpi-dot-navigation label[for="rpi-slide4"] {
    background-color: #FFCB21;
  }
  
  @media (max-width: 1024px) {
    .rpi-text-overlay {
      width: 50%;
    }
  }
  
  @media (max-width: 768px) {
    .rpi-text-overlay {
      width: 100%;
      text-align: center;
      padding: 10px;
      margin: 0 auto;
    }
  }
  .proposition {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
  }
  
  .proposition.visible {
    opacity: 1;
    transform: translateY(0);
  }
  }
  .proposition .title{
  padding: 60px 0 0 0;
  }
  .proposition .title p{
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #393671;
  }
  
  .proposition .under-title p{
  font-family: Poppins;
  font-size: 68px;
  font-weight: 700;
  line-height: 84px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;    
  color: #393671;
  padding: 15px 130px 0 130px;
  }
  .proposition .text p{
  font-family: Poppins;
  font-size: 18px;
  font-weight: 500;
  line-height: 29.86px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #393671;
  padding: 35Px 190Px 0 190px;
  }
  .proposition .text span{
  font-family: Poppins;
  font-size: 18px;
  font-weight: 700;
  line-height: 29.86px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #393671;
  
  }
  
  
  
  .slider-container {
  position: relative;
  height: 665px;
  overflow: hidden;
  }
  
  
  .nested-boxes {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 images per row */
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: auto;
  }
  
  .box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-radius: 25px;
  padding: 10px;
  }
  
  
  
  
  
  .slider {
  display: flex;
  width: 100%;
  max-width: 90%;
  margin-left: 5%;
  height: 100%;
  transition: transform 0.5s ease-in-out, opacity 0.25s ease-in-out;
  opacity: 1;
  }
  
  .square {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.5rem;
  padding: 10px 0;
  }
  
  .content { 
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 5px;
  background: transparent;
  border-radius: 25px;
  position: relative;
  }
  
  .nested-boxes {
  display: grid
  ;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      width: 100%;
      height: 100%;
      padding: 10px;
      overflow: auto;
      margin-left: 123px;
  }
  
  .nested-box {
  background: transparent;
  border-radius: 25px;
  padding: 10px;
  text-align: center;
  font-size: 1.2rem;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .navigation-buttons {
  display: flex
  ;
      justify-content: center;
      gap: 10px;
      margin-top: -50px;
  }
  .nav-right{
  position: relative;
  left: 600px;
  bottom: 400px;
  }
  .nav-left{
  position: relative;
  right: 600px;
  bottom: 400px;
  }
  
  .nav-btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  color: white;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  }
  .menu-slider{
  display: flex
  ;
      justify-content: center;
  }
  
  .nav-btn:hover {
  transform: scale(1.1);
  }
  
  /* Styling for the menu and items */
  .proposition .menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Added for wrapping items when they exceed space */
  margin-top: 20px;
  padding: 10px 0;
  border-radius: 30px;
  }
  
  .menu-item {
  margin: 0px 0px;
  cursor: pointer;
  font-size: 1.5rem;
  color: #ffffff;
  transition: color 0.3s ease-in-out;
  flex-basis: 2%;
  }
  
  .menu-item:hover {
  color: #87cefa;
  }
  
  .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D9D9D9;
  transition: background-color 0.3s ease-in-out;
  }
  
  .menu-item:hover .icon {
  background: rgb(255 255 255 / 68%);
  color: rgb(60 68 119);
  }
  
  .menu-item.active .icon {
  background:#FFCB21;
  
  }
  
  
  /*-----------------------------proposition---------------------------*/
  .section8 { 
    height: 600px;
    background-image: url(../image/section8-edit.png);
    background-color: #201A35;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative; /* Ensures correct positioning for background manipulation */
  }
  
  .parallax-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the section */
    z-index: -1; /* Keep the image behind the content */
  }
  
  
  .section8 .text p {
  font-family: Poppins;
  font-size: 66px;
  font-weight: 700;
  line-height: 64px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  }
  
  .section8 .text span {
  font-family: Poppins;
  font-size: 66px;
  font-weight: 700;
  line-height: 64px;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFCB21;
  }
  .footer{
  background-color: #0A4250;
  overflow: hidden;
  .title p{
    font-family: Poppins;
    font-size: 68px;
    font-weight: 700;
    line-height: 84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
        
  }
  a{
    text-decoration: none;
    list-style: none;
  }
  
  
  
  .fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white; /* Optional: Add background to avoid transparency issues */
  }
  
  
  
  
  .title{
    padding: 60px 0 0 0;
  }
  .frame{
    display: flex;
  }
  .frame .part1{
    display: flex;
    margin-top: 90Px;
  
  }
  .man-footer{
    position: relative;
    left: 145Px;
    width: 406px;
    height: 613px;
    top: 110Px;
  }
  .man-think{
    background-image: url(../image/mess-whtsap1.png);
    position: relative;
    top: 149px;
    right: -22px;
    width: 370px;
    z-index: 3;
    width: 390.19px;
    height: 148.11px;
    padding: 25px 45px 0 45px;
    p{
      font-family: 'Cairo', sans-serif;
      font-size: 25.02px;
      font-weight: 700;
      line-height: 29.72px;
      text-align: right;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;   
      color: #393671;         
    }
  
  }
  .screen-wts{
    position: relative;
    right: 295PX;
    z-index: 1;
  
  }
  .doz-privé{
    background-image: url(../image/mess-whatsap2.png);
    position: relative;
    top: 275Px;
    right: 576PX;
    z-index: 3;
    width: 258.84px;
    height: 94.71px;
    padding: 5px 35px 0 0px;
  
    p{
      font-family: Poppins;
      font-size: 20.33px;
      font-weight: 600;
      line-height: 65.69px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #393671;   
    }
  }
  .email-footer{
    background-image: url(../image/mess-whatsap3.png);
    position: relative;
    top: 350Px;
    right: 960PX;
    z-index: 3;
    width: 392.56px;
    height: 90.17px;
    padding: 5px 50px 0 0;
    img{
      width: 30px;
      position: relative;
      right: 5Px;
      bottom: 2Px;
    }
    p{
      font-family: "Poppins", serif;
      font-size: 20.33px;
      font-weight: 600;
      line-height: 65.69px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #393671;
    }
    
  }
  .phone-footer{
    background-image: url(../image/mess-whtsap4.png);
    position: relative;
    top: 425Px;
    right: 1357PX;
    z-index: 3;
    width: 399.6px;
    height: 212.97px;
    padding: 25px 0px 0 105px;
    p{
      font-family: "Poppins", serif;
      font-size: 25.02px;
      font-weight: 600;
      line-height: 29.72px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #393671;      
    }
    span{
      font-family: "Poppins", serif;
      font-size: 25.02px;
      font-weight: 700;
      line-height: 40px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #393671;      
    }
  }
  .reseau{
    position: relative;
    background-image: url(../image/reseaux-soc.png);
    top: 595Px;
    right: 1746PX;
    width: 390px;
    height: 72px;
    z-index: 3;
  }
  .logo{
    display: flex;
    position: relative;
    top: 20px;
    left: 121px;       
    
  }
  .logo img{
    margin-right: 10px;
  }
  
  }
  
  
  
  
  div#backtoUP {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out; 
  }
  
  div#backtoUP.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  div#backtoUP .man-think {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out; 
  }
  
  div#backtoUP .man-think.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  div#backtoUP .doz-privé {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.5s ease-out; 
  }
  
  div#backtoUP .doz-privé.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  div#backtoUP .email-footer {
    opacity: 0;
    transform: translateY(50px);
    transition: all 2s ease-out; 
  }
  
  div#backtoUP .email-footer.visible {
    opacity: 1;
    transform: translateY(0);
  }
  div#backtoUP .reseau,
  div#backtoUP .phone-footer{
    opacity: 0;
    transform: translateY(50px);
    transition: all 2.5s ease-out; 
  }
  div#backtoUP .reseau.visible,
  div#backtoUP .phone-footer.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  div#backtoUP .reseau{
    opacity: 0;
    transform: translateY(50px);
    transition: all 3s ease-out; 
  }
  div#backtoUP .reseau.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  
  
  #whatsapp {
    position: fixed;
    color: #7ad06d;
    width: 60px;
    height: 60px;
    font-size: 38px;
    border-radius: 50%;
    z-index: 999;
    background: #fff;
    bottom: 30px;
    right: 10px;
    display: flex
  ;
    justify-content: center;
    align-items: center;
    transition: 0.7s ease;
  }
  #instagram {
    position: fixed;
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    width: 60px;
    height: 60px;
    font-size: 38px;
    border-radius: 50%;
    z-index: 999;
    background: #fff;
    bottom: 163px;
    right: 10px;
    display: flex
  ;
    justify-content: center;
    align-items: center;
    transition: 0.7s ease;
  }
  #facebook {
    position: fixed;
    color: #1B74E4;
    width: 60px;
    height: 60px;
    font-size: 38px;
    border-radius: 50%;
    background: #fff;
    bottom: 96px;
    right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: 0.7s ease;
  }
  .svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
  }
  svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
  }
  .link-to-up {
    position: fixed;
    width: 60px;
    height: 60px;
    font-size: 38px;
    border-radius: 50%;
    bottom: 229px;
    right: 10px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    transition: 0.5s;
  }
  
 .modal-footer{
   
    button{
      background: linear-gradient(344deg, #f780c7, #fe9a54, #74aefd);
      border: none !important;
      font-weight: 600;
      font-family: "Poppins", serif;
    }
  }
  .modal-body{
    input{
      height: 40px;
    }
    .input1:focus{
      outline: none;
      border: 1px solid #fe9a54;
      box-shadow: 0 0 5px #fe9a54 !important;
    }
    .input2:focus{
      outline: none;
      border: 1px solid #f780c7;
      box-shadow: 0 0 5px #f780c7 !important;
    }
    .input3:focus{
      outline: none;
      border: 2px solid #74aefd;
      box-shadow: 0 0 5px #74aefd !important;
    }
    .input4:focus{
      outline: none;
      border: 2px solid #fe9a54;
      box-shadow: 0 0 5px rgba(254, 154, 84, 0.5) !important;
    }
  
    
  }
  
  
  .rdv h3{
    font-family: Poppins;
    font-size: 48px;
    font-weight: 700;
    line-height: 84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;    
    color: #393671;
    padding: 15px 130px 0 130px;
  }







  /*     blogs page  */
  .blog{
    color: #393671;
    p,h1,h2,h3,h4,h5{
      font-family: "Poppins", serif;
    }
  }

.header_blog{
  .navbar{
    padding: 0 0 0 0 !important;
  }
  .navbar-collapse{
    flex-grow: 0 !important;
    
  }
    a{
        color: #393671 !important;
        font-size: 16px;
        font-weight: 600;
    }
     /* menu */
    ul {
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    height: 90px;
    right: 100Px;
    
    }
    ul a {
    font-family: Poppins;
    line-height: 23.86px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: white;
    height: 90px;
    
    }
    li a {
    display: block;
    padding: 43px 20px;
    text-decoration: none;
    }
    
    
    .jeune {
    background-color: #FFCB22;
    border-radius: 0px 0px 15px 15px;
    color: #393671;
    font-weight: 600;
    }
    .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
    position: relative;
    left: 200Px;
    top: 0Px;
    
    }
   .menu {
    clear: both;
    max-height: 0;
    float: right;
  }
  
  /* menu icon */
  
   .menu-icon {
    cursor: pointer;
    display: inline-block;
    padding: 28px 0px;
    position: relative;
    user-select: none;
  }
  
   .menu-icon .navicon {
    background: white;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
   .menu-icon .navicon:before,
   .menu-icon .navicon:after {
    background: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
   .menu-icon .navicon:before {
    top: 5px;
  }
  
   .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
   .menu-btn {
    display: none;
  }
  
   .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  
   .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
   .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
   .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
   .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
   .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  /* 48em = 768px */
  
 
  .middle-header{
    position: relative;
    top: 120px;
    text-align: center;
  }
  .middle-header img{
    width: 23%;
    height: 207px;
    margin: 7% 0px 0 1%;
    border-radius: 6px;
    object-fit: cover;
  }
  .page-head .footer-head-bar {
    text-align: center;
    position: relative;
    top: 70Px;
  }
  
}
@media (min-width: 48em) {
    .header_blog li {
      float: left;
    }
    .header_blog .menu {
      clear: none;
      max-height: none;
      height: 100Px;
      margin: 0px;
    }
    .header_blog .menu-icon {
      display: none;
    }
  }
.indicateur-bar{
    padding: 50px 0 0 40px;
  ul{
    display: flex;
    i{
      font-size: 23px;
    }
    li{
      list-style: none;
      font-size: 23px;
      a{
        text-decoration: none;
        color: #9E9EAF;
      }
    }      
  }
}

.head-blog{
  .title{
    h1{
      font-size: 54px;
      font-weight: 700;
      line-height: 81px;
    }
  }
}
.menu-icon{
  padding: 0px !important;
}
.bordeer{
  border: 1px solid black;
}
.head-blog{
 .first-blog-section{
  .section-presentation{
    align-content: center;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .gama-to-top{
    font-family: Manrope;
    display: flex;
    font-size: 75px;
    font-weight: 700;
    transform: rotateX(-160deg);
    letter-spacing: -0.13em;
    justify-content: center; 
    color: #FFCB21;
  }
  .text-right-image{
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
    color: #949494;
  }
  .gama-to-down{
    font-family: Manrope;
    display: flex;
    font-size: 75px;
    font-weight: 700;
    transform: rotateX(20deg);
    transform: rotatey(180deg);
    letter-spacing: -0.13em;
    justify-content: center;
    color: #FFCB21;
    position: relative;
    left: 17px;
  }
  .profil{
    display: flex;
    .image{
      background-color: #D9D9D9;
      width: 70px;
      height: 70px;
      border-radius: 40px;
    }
    .name-time{
      font-size: 20px;
      font-weight: 400;
    }
  }
  .reseau-s{
    display: flex;
    gap: 20px;
    p{
      font-size: 19px;
    }
    .svg{
      width: 70px;
      height: 70px;
      border-radius: 33px;
    }
  }
  .svg:hover{
    transform: scale(1.1);
  }
 }
 .button-copy {

  text-decoration: none;
  transition: 0.2s all ease-in-out;
  overflow: hidden;
}
.button-copy .container {
  position: relative;
  padding: 0px !important;
}
.button-copy .container .normal, .button-copy .container .hover, .button-copy .container .copied {
  display: block;
  text-align: center;
  line-height: 40px;

  position: absolute;
  transition: 0.2s all ease-in-out;
}
.button-copy .container .normal {
  opacity: 1;
  color: black;
  top: 0%;
  height: 70px;
}
.button-copy  .copied {
  color: #ffc107;
  display: none !important;
}
.button-copy  .copied-vue-succ {
  color: #ffc107;
  font-size: 19px
}

.button-copy.hover .container .normal {
  top: -100%;
  opacity: 0;
}
.button-copy.hover .container .hover {
  top: 0%;
  opacity: 1;
}

.button-copy.copied .container .normal, .button-copy.copied .container .hover {
  top: -100%;
}
.button-copy.copied .container .copied {
  top: 0%;
  opacity: 1;
  color: #ffc107;
}

}

.body-blog{
  border-bottom: 2px solid #D0D0D0;
  .content-left{
    text-align: justify;
    color: #33375B;
    .text{
      font-size: 22px;
      font-weight: 500;
      line-height: 27.39px;
    }
  }
  .list{
    h5{
      font-weight: 700;
    }
    p{
      font-size: 22px;
      font-weight: 500;
      line-height: 27.39px;
    }
    .list-paragraph{
      list-style: disc;
      font-size: 22px;
      font-weight: 500;
      line-height: 27.39px;

      li{
        margin-bottom: 25px;
      }
    }
  }
  .reseau-s{
    display: flex;
    gap: 20px;
    p{
      font-size: 19px;
    }
    .svg{
      width: 70px;
      height: 70px;
      border-radius: 33px;
    }
  
  }
  .svg:hover{
    transform: scale(1.1);
  }

  .button-copy {

    text-decoration: none;
    transition: 0.2s all ease-in-out;
    overflow: hidden;
  }
  .button-copy .container {
    position: relative;
    padding: 0px !important;
  }
  .button-copy .container .normal, .button-copy .container .hover, .button-copy .container .copied {
    display: block;
    text-align: center;
    line-height: 40px;
  
    position: absolute;
    transition: 0.2s all ease-in-out;
  }
  .button-copy .container .normal {
    opacity: 1;
    color: black;
    top: 0%;
  }
  .button-copy  .copied {
    color: #ffc107;
    display: none !important;
  }
  .button-copy  .copied-vue-succ {
    color: #ffc107;
    font-size: 19px;
  }
  
  .button-copy.hover .container .normal {
    top: -100%;
    opacity: 0;
  }
  .button-copy.hover .container .hover {
    top: 0%;
    opacity: 1;
  }
  
  .button-copy.copied .container .normal, .button-copy.copied .container .hover {
    top: -100%;
  }
  .button-copy.copied .container .copied {
    top: 0%;
    opacity: 1;
    color: #ffc107;
  }
  
}

.body-blog{
  .content-right{
    .ads-content{
      width: 100%;
      height: 275px;
      background-color: #d9d9d9;
      border-radius: 8px;
      align-content: center;
      p{
        font-family: Manrope;
        font-size: 36px;
        font-weight: 800;
        line-height: 49.18px;
        letter-spacing: -0.05em;
        text-align: center;
        color: #BFBFBF;
      }
    }
    .article{
      .title{
        display: flex;
        .icon-article{
          width: 60px;
          height: 60px;
        }
        p{
          font-size: 32px;
          font-weight: 700;
          line-height: 54px;
                   
        }
      }
      .date-pub{
        color: #9E9EAF;
      }
    }
    .article-rec{
      ul{
        counter-reset: item;
        li{
          display: flex;
          padding-top: 3rem;
          a{
            color: #171557;
            display: flex;
            text-decoration: none;
          }
          .text{
            width: 250px;
            border-bottom: 1px solid #9E9EAF;
            .title{
              font-size: 19px;
              font-weight: 700;
              line-height: 30px;
            }
            .date{
              font-size: 14px;
              font-weight: 500;
              line-height: 24px;
              letter-spacing: -0.02em;
              color: #9E9EAF;
            }
          }
          
          .image{
            background: #d9d9d9;
            width: 124px;
            height: 125px;
            text-align: center;
            align-content: center;
            img{
              width: 100%;
              height: 100%;
              border-radius: 11px;
              object-fit: cover;
            }
          }
        }
        li::marker {
          content: ""; 
      }

      li::before {
          content: counter(item);
          counter-increment: item;
          width: 45px;
          height: 45px;
          background-color: #f2f4ff;
          color: #4a56ff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          font-weight: bold;
      }
      }
    }
  }
}

.slider-article{
  .title{
    p{
      font-family: Manrope;
    font-size: 24px;
    font-weight: 800;
    line-height: 32.78px;
    letter-spacing: -0.03em;
    }
  }
}

.more-article-slider{
  .card{
    border: none !important;
    width: 335px;
  }
  .carousel-item{
    .col-md-3{
      margin: 0 40px 0 0;
    }
  }
  .image{
    width: 310px;
    height: 200px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 10px;
      object-fit: cover;
    }
  }
  .text{
     text-align: start;
     color: #393671;
    .title{
      font-size: 19px;
      font-weight: 700;
      line-height: 30px;
    }
    .date{
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: -0.02em;
      
    }
    
  }
  .btn{
    background-color: #FFCB21;
    width: 200px;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #393671;
    
  }
  .btn:hover{
   border: 1px solid black;
   background-color: #FFCB21;
  }
  .slider {
    position: relative;
    top: 50%;
    left: 0%;
    width: 100%;
    
 }
  .wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;
 }
  .slides {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    width: 10000px;
 }
  .slides.shifting {
    transition: left 0.2s ease-out;
 }
  .slide {
    width: 400px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    transition: all 1s;
    position: relative;
    border-radius: 2px;
 }
  .control {
    position: absolute;
    top: 38%;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50px;
    margin-top: -20px;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect */
 }
  .prev, .next {
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
 }
  .prev {
    background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
    left: 20px;
 }
  .next {
    background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
    right: 66px;
 }
  .prev:active, .next:active {
    transform: scale(0.8);
 }
  .dots i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: black;
 }
  .dots i.active {
    background: white;
 }
}
 .last-line{
  width: 85%;
  margin-left: 7%;
 }
.newsletter{
  background-color: #F4F5FA;
  border-radius: 30px;
  .title{
    font-size: 29px;
    font-weight: 700;
    line-height: 43.5px;
    text-align: left;
    color: #393671;
    font-family: Poppins;
  }
  .text{
    font-family: Poppins;
    font-size: 15px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.055em;
    text-align: justified;

       
  }
  .input-container {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input-container input {
    font-family: Manrope;
    border: none;
    outline: none;
    padding: 15px 20px;
    font-size: 16px;
    color: #b0b0b0;
    border-radius: 30px 0 0 30px;
    flex: 1;
    background-color: transparent;
}

.input-container button {
    background-color: #ffd23f;
    color: #1e1e1e;
    border: none;
    outline: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.input-container button:hover {
    background-color: #ffc107;
}
.terms{
  font-family: Manrope;
  font-size: 10px;
  font-weight: 500;
  line-height: 13.66px;
  letter-spacing: -0.035em;
  text-align: justified;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  
}
}
.title-index-blogs{
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #393671;  
}




.rotatation:hover {
  transform: rotate(360deg);
}

/*     zone style remove from html to css */

.width-150{
  width: 150px
}

.color-98ECFF{
  color: #98ECFF;
}
.color-F7BEDC{
  color: #F7BEDC;

}
.color-FFDB86{
  color: #FFDB86;
}
.color-99FFCC{
  color: #99FFCC;
}
.color-FFD43B{
  color: #FFD43B;
}
.width-205 {
  width: 205px !important;
}
.width-120{
  width: 120px !important;
}
.width-115{
  width: 115px !important;
}
.width-190{
  width: 190px !important;
}
.WWidth-90{
  width: 90% !important;
}
.WWidth-120{
  width: 120% !important;
}
.WWidht-65{
  width: 65% !important;
}
.width-150{
  width: 150px !important;
}

.top-20 {
  top: 20px !important;
}
.bottom-230{
  bottom: 230px !important;
}
.font-size-15{
  font-size: 15px !important;
}




.modal-header{
  border: none !important;
  p {
    font-weight: 600;
    background: linear-gradient(344deg, #f780c7, #fe9a54, #74aefd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    font-family: "Poppins", serif;
    display: inline-block;
    margin: 0 0.5rem;
    color: black;
    animation: bounceIn; 
    animation-duration: 2s; 
  }
}

/* .max-z-index{
  z-index: 999999999;
}

.rdv-form {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 15px  15px;
  gap: 20px;
  justify-content: center;
}
.social_info,
.ecole_info,
.perso_info{
  display: flex;
  gap: 15px;
}
  
input[type="text"],
input[type="phone"],
input[type="email"] {
  height: 48px;
  width: 230px;
  padding: 10px;
  border-radius: 20px;
  border: 2px solid #e0e0e0;
  transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="phone"]:focus,
input[type="email"]:focus {
  border: 2px solid #ef9d67 !important; 
  outline: none; 
}

.btn {
  border-radius: 4px;
  border: 2px solid transparent;
  padding: 10px 24px;
  font-size: 16px;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
.wizard {
  position: relative;
  display: flex;
  width: 100%;
}
.wizard:before {
  content: "";
  position: absolute;
  background-color: #fff;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.wizard-bar {
  position: absolute;
  background: linear-gradient(110deg, #f780c7,  #74aefd);
  height: 2px;
  top: 45%;
  left: 10px;
  transform: translateY(-50%);
  transition: 0.3s ease;
}
.wizard-list {
  padding: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.wizard-item {
  width: 110px;
  padding: 10px;
  height: 110px;
  cursor: pointer;
  border: 2px solid #c7c7d6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  img{
    width: 47px;
  }
}
.wizard-item.active {
  background: linear-gradient(to bottom, #ec2c7b 0%, #fa722b 100%);
  color: #fff;
  img{
    filter: invert(1);
  }
}
.form-buttons{
  font-family: "Roboto", sans-serif;
  margin-top: 20px;
  display: flex;
  justify-content: end;
  gap: 15px;
  .submit{
    color: white;
    background: linear-gradient(to bottom, #ec2c7b 0%, #fa722b 100%);
  }
  .return{
    color: #fa722b;
    border-color: #fa722b;
  }
  .return:hover{
    background: linear-gradient(to bottom, #ec2c7b 0%, #fa722b 100%);
    color: white;
  }
}
 
.success-message {
  padding: 30px 20px;
  font-family: "Poppins", serif;
}

.success-message h4 {
  font-weight: 600;
  font-size: 20px;
}

.success-message p {
  color: #666;
  font-size: 16px;
  margin-bottom: 25px;
}

/* Add error state for form validation */
.form-input.error {
  border-color: #ff3860;
  background-color: #ffedee;
}

.form-content.active {
  display: flex;
}

.form-content {
  display: none;
}

.wizard-item.active {
  background: linear-gradient(to bottom, #ec2c7b 0%, #fa722b 100%);
}

.wizard-item.active img {
  filter: brightness(0) invert(1);
}
.succes-close-btn{
    border: 1px solid #fc946e;
    border-radius: 25px;
    width: 110px;
    height: 42px;
    background: white;
}
.succes-close-btn:hover{
    background: linear-gradient(to bottom, #ec2c7b 0%, #fa722b 100%);
    color: white;
} */

.p-title{
    font-weight: 700;   
}