/* Default styles: Base styles for large screens or no constraints */
@media (max-width: 390px){
    /* Styles for phones */
    
   
    
   div#backtoUP {
       opacity: 1;
       transform: none;
       transition: none; /* Slow the animation */
     }
   .header {
       background-color: #201A35;
       position: relative;
       width: 100%;
       z-index: 999999999999;
       height: 100Px;
   }
   .header_blog {
      .container-fluid{
       padding: 0px !important;
      }
      .navbar-toggler:focus {
       box-shadow:none !important;
       } 
       .header.default {
           background-color: #201A35;
           height: 100px;
       }
       .menu {
           margin: 0px;
       }
       .logo {
           position: relative;
           left: 20Px;
           top: 20Px;
   
       }
       .menu-icon {
           margin-left: 345Px;
           top: -45px;
       }
       ul {
           height: auto; 
           right: auto; 
           border-radius: 1PX;
       }
       .middle-header img {
           width: 300px;
       }
       .menu-icon {
           margin-left: 345Px;
           top: -45px;
       }
       .menu-btn:checked ~ .menu {
           max-height: 380px;
           background-color: #201A35;
           position: relative;
           top: -42Px;
       }
       li :hover,
       li a:hover,
       .menu-btn:hover {
           border-radius: 0px 0px 0px 0px;
           background-color: #FFCB21;
       }
   }
   
   .header.default {
       background-color: #201A35;
       height: 100px;
   }
   .header .menu {
       margin: 0px;
   }
   .header .logo {
       position: relative;
       left: 20Px;
       top: 20Px;

   }
   .header .menu-icon {
       margin-left: 345Px;
       top: -45px;
   }
   .header ul {
       height: auto; 
       right: auto; 
       border-radius: 1PX;
   }
   .middle-header img {
       width: 300px;
   }
   .page-head{
       display: none;
   }
   .aventage .why .logo .image-class1 {
       width: 206px;
       height: 90Px;
       position: relative;
       top: 65px;
       left: -40px;
       object-fit: contain;
   }
   .aventage .why .logo .image-class2 {
       position: relative;
       width: 110px;
       left: -5px;
       top: 61Px;
   }
   .aventage {
       background-color: #201A35;
       height: 2500PX;
       
   }


   .presentation-2 {
       .buttom p {
           font-size: 13px !important;
       }
       .body {
           width: 300PX;
           padding: 0px 0 0 9% !important;
           top: 30Px;
           
       }
        
   }
   
   .vd-youtube{
       display: block;
       height: 375Px;
       
       top: 330Px;
       left: 0Px;
       width: 100%; 
       .test3 {
           position: absolute;
           top: -35px;
           left: -6px;
           right: 0;
           bottom: 422px;
           margin: auto;
           width: 91%;
           height: 82%;
       }
   }
   .vd-youtube .text {
       display: none;
   }
   .vd-youtube .mobile-text{
       display: block !important;
       margin: 78px 0 0 43px;

   }
   .vd-youtube p {
       font-size: 25px;
       width: 290px;
   }
   .vd-youtube span {
       font-family: Poppins;
       font-size: 25px;
   }
   .image-pop-up {
       width: 300px;
       position: relative;
       top: 55px;
       left: 35px;
   }
   .header .menu-btn:checked ~ .menu {
       max-height: 380px;
       background-color: #201A35;
       position: relative;
       top: -42Px;
   }
   .header li :hover, .header li a:hover, .header .menu-btn:hover {
       border-radius: 0px 0px 0px 0px;
       background-color: #FFCB21;
   }
   .service .image .img1 {
       width: 103px;
       position: relative;
       left: 10px;
       height: 114Px;
       margin-left: 13Px;
       display: none;
   }
   .service .image .img2 {
       width: 330Px;
       height: 105px;
       position: relative;
       left: 13px;
       top: 30px;
       OBJECT-FIT: contain;
       padding: 8px 34px 0 0;
   }
   .service .image .img2 {
       p {
           font-family: 'Cairo', sans-serif;
           font-size: 28px;
       }
   }
   .service .image .part2 {
       margin-left: -170px;
       border-radius: 20px;
       margin-top: 80px;
       padding: 12px 0 0 20px;
       width: 260.28px;
       height: 95.76px;
       left: -90px !important;
       top: 180px !important;
         
   }
   .service .image .part2 {
       p {
           font-family: Poppins;
           font-size: 13px;
           font-weight: 700;
           line-height: 71.3px;
           text-align: left;
           text-underline-position: from-font;
           text-decoration-skip-ink: none;
       }
   }
   .service .image .img3 {
       width: 340px;
       height: 80Px;
       position: relative;
       top: 100px;
       left: -320Px;
       object-fit: contain;

   }
   .proposition .title p {
       font-size: 15px;
   }
   .proposition .under-title p {
       font-size: 27px;
   }


   


   .service {
       height: 1970px;
       background-color: #FFCB21;
   }
   .service .part1,
   .service .part2 {
       position: relative;
       left: 20px;
   }
   .boxes2{
       position: relative;
       right: -24Px;
       margin-left: 20px;

   }
   .proposition .under-title p {
       font-size: 25px;
       line-height: 45px;
       padding: 12px 11px 0 19px;
   }
   .proposition .text p {
       font-size: 20px;
       line-height: 29.86px;
       padding: 20Px 15Px 0 22px;
   }
   .proposition .box img{
       width: 90px !important;
       top: 10px !important;
   }
   .rpi-overlay .box {
       width: 90px !important;
       height: 90px !important;
       margin-bottom: 0px !important;
       box-sizing: border-box !important;
   }
   .rpi-slide {
       min-width: 100%;
       height: 800px !important;
   }
   .section8 .text span, 
   .section8 .text p {
       font-family: Poppins;
       font-size: 40px;
   }
   .section8 {
       height: 400px;
   }

   .menu-item {
       flex-basis: 5%;
   }
   .slider-container {
       position: relative;
       height: 365px;
       overflow: hidden;
       display: block;
     }
     .box {
       display: flex;
       justify-content: center;
       align-items: center;
       background: transparent;
       border-radius: 25px;
       padding: 0px;
       margin-bottom: 30Px;
     }
     .square-mobile{
       display: block !important;
     }
   .footer {
       .title p {
           font-size: 20px;
       }
       .man-footer{
           display: none;
       }
       .frame .part1 {
           display: flex;
           margin-top: 20Px;
           position: relative;
           left: 54Px;                        
       }
       .screen-wts {
           width: 540Px;
           margin-left: -167px;

       }
       .man-think {
           padding: 30px 45px 0 40px;
           width: 310Px;
           height: 145px;
           position: relative;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
           top: 95Px;
           right: 62px;
           p {
               font-family: 'Cairo', sans-serif;
               font-size: 18.02px;
           }
       }
       .doz-privé {

           top: 225Px;
           right: 617PX;
           width: 243.84px;
           height: 94.71px;
           padding: 5px 35px 0 0px;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
       }
       .email-footer {

           top: 300Px;
           right: 960PX;
           z-index: 3;
           width: 341.56px;
           height: 90.17px;
           padding: 5px 50px 0 0;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
       }
       .phone-footer {
           top: 370Px;
           right: 1314PX;
           width: 355.6px;
           height: 212.97px;
           padding: 35px 0px 0 105px;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
           span,
           p{
               font-size: 19.02px;
           }
       }
       .reseau {
           top: 535Px;
           right: 1664PX;
           z-index: 3;
           width: 345.56px;
           height: 90.17px;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
           .logo {
               left: 83px !important;
               top: 20px;
               bottom: 1PX;
           }
       }
       
       }
       
       .aventage-flex-box {
           margin: 20px 10px 0px 30px;
           width: 360px ;
       }
       .service-flex-box {
           margin: 10px 10px 0 34px;
           width: 380px !important;
       }

       

       
       .rpi-overlay {

           left: -12px !important;
       }
       .aventage .aventage-flex-box .second-part {
           padding: 10Px 40px 0 45px;
       }
       .header li a {
           display: block;
           padding: 22px 20px;
           text-decoration: none;
           height: 70px;
       }
       hr{
           margin: 0px;
           width: 70%;
           color: #ffffff42;
           position: relative;
           left: 60px;
           display: block !important;
       }
       .aventage .mess {
           width: 246Px;
           height: 64px;
           padding: 0px 30px 0 0;
           position: relative;
           top: 65px;
           left: -3px;
   
           
       }
       .aventage .why {
           text-align: center;
           position: relative;
           bottom: 68px;
       }
       .aventage .mess p {
           font-size: 15px;
           font-weight: 700;
           line-height: 30.52px;
       }
       .aventage .mess span {
           font-size: 17Px;
       }
       .navigation-buttons {
           display: none;
       }
       
       .boxes {
           position: relative;
           right: -6Px !important;
           gap: 15px;
           margin-left: -14px;
       }
       .head-blog {
           & .title {
               h1 {
                   font-size: 20px;
                   line-height: 40px;
               }
           }
       }
       .indicateur-bar{
           padding: 25px 0 0 0;
       }
       .article-rec{
           ul{
               padding: 0px;
           }
       }
       .newsletter{
           border-radius: 0px;
       }
       .more-article-slider {
           .prev {
               left: 0px;
               top: 110px;
           }
       }
       .more-article-slider {
           .next {
               right: -35px;
               top: 110px;
           }
       }
       .body-blog {
           .reseau-s {
               display: flex ;
               gap: 8px;
           }
       }
       .newsletter {
           .input-container input {
               font-size: 11px;
          }
       }
       .gama-to-down {
           left: 10px !important
       }
       .body-blog {
           & .content-right {
               & .article-rec {
                   & ul {
                       & li {
                           a{
                               display: block;
                           }
                           .image {
                               width: 160px;
                               height: 125px;
                               position: relative;
                               left: 16%;
                           }
                           .text{
                               border: none;
                           }
                       }
                   }
               }
           }
       }
       .header{
           .navbar-collapse{
               background: #201a35;
           }
       }

}




/* Extra Small Devices (Portrait Phones, <576px) */
@media  (min-width: 390px) and (max-width: 575.98px) {
   /* Styles for phones */
  
   .link-to-up {
       font-size: 15px;
       right: 10px;
       padding: 10px;
   }
    
   
   .header {
       background-color: #201A35;
       position: relative;
       width: 100%;
       z-index: 999999999999;
       height: 100Px;
   }
   .header_blog{
       .container-fluid{
           padding: 5px !important;
          }
       .navbar-toggler:focus {
           box-shadow: none !important;
       }   
       default {
           background-color: #201A35;
           height: 100px;
       }
       .menu {
           margin: 0px;
       }
       .logo {
           position: relative;
           left: 20Px;
           top: 20Px;
   
       }
       .menu-icon {
           margin-left: 345Px;
           top: -45px;
       }
       ul {
           height: auto; 
           right: auto; 
           border-radius: 1PX;
       }
       .menu-btn:checked ~ .menu {
           max-height: 380px;
           background-color: #201A35;
           position: relative;
           top: -42Px;
       }
       li :hover,
       li a:hover,
       .menu-btn:hover {
           border-radius: 0px 0px 0px 0px;
           background-color: #FFCB21;
       }
   }
   
   .header.default {
       background-color: #201A35;
       height: 100px;
   }
   .header .menu {
       margin: 0px;
   }
   .header .logo {
       position: relative;
       left: 20Px;
       top: 20Px;

   }
   .header .menu-icon {
       margin-left: 345Px;
       top: -45px;
   }
   .header ul {
       height: auto; 
       right: auto; 
       border-radius: 1PX;
   }
   .middle-header img {
       width: 300px;
   }
   .page-head{
       display: none;
   }
   .aventage .why .logo .image-class1 {
       width: 206px;
       height: 90Px;
       position: relative;
       top: 65px;
       left: -40px;
       object-fit: contain;
   }
   .aventage .why .logo .image-class2 {
       position: relative;
       width: 110px;
       left: 7px;
       top: 61Px;
   }
   .aventage {
       background-color: #201A35;
               
   }


   
   
  
   .header .menu-btn:checked ~ .menu {
       max-height: 380px;
       background-color: #201A35;
       position: relative;
       top: -42Px;
   }
   .header li :hover, .header li a:hover, .header .menu-btn:hover {
       border-radius: 0px 0px 0px 0px;
       background-color: #FFCB21;
   }
   .service .image .img1 {
       width: 103px;
       position: relative;
       left: 10px;
       height: 114Px;
       margin-left: 13Px;
       display: none;
   }
   .service .image .img2 {
       width: 330Px;
       height: 105px;
       position: relative;
       left: 13px;
       top: 30px;
       OBJECT-FIT: contain;
       padding: 8px 34px 0 0;
   }
   .service .image .img2 {
       p {
           font-family: 'Cairo', sans-serif;
           font-size: 28px;
       }
   }
   
   .service .image .part2 {
       margin-left: -170px;
       border-radius: 20px;
       padding: 12px 0 0 20px;
       width: 260.28px;
       height: 95.76px;
       left: -90px !important;
       top: 180px !important;
         
   }
   .service .image .part2 {
       p {
           font-family: Poppins;
           font-size: 15px;
           font-weight: 700;
           line-height: 71.3px;
           text-align: left;
           text-underline-position: from-font;
           text-decoration-skip-ink: none;
       }
   }
   .service .image .img3 {
       width: 340px;
       height: 80Px;
       position: relative;
       top: 100px;
       left: -320Px;
       object-fit: contain;

   }
   .proposition .title p {
       font-size: 15px;
   }
   .proposition .under-title p {
       font-size: 27px;
   }
   .boxes{
       position: relative;
       right: -6Px !important;
       gap: 15px;
       margin-left: 11px;
       .box img {
           max-width: 85%;
       }
   }

   


   .service {
       height: 1970px;
       background-color: #FFCB21;
   }
   .service .part1,
   .service .part2 {
       position: relative;
       left: 20px;
   }
   .boxes2 {
       position: relative;
       right: 42Px;
       margin-left: 20px;
   }
   .boxes1 {
       position: relative;
       right: 22Px;
   }
   .proposition .under-title p {
       font-size: 25px;
       line-height: 45px;
       padding: 12px 11px 0 19px;
   }
   .proposition .text p {
       font-size: 16px;
       line-height: 29.86px;
       padding: 20Px 15Px 0 22px;
   }
   .proposition .text span {
       font-size: 14px;
   }

   .proposition .boxes1 .box img{
       width: 63px !important;
       top: 10px !important;
       position: relative;
       right: 14px;
   }
   .proposition .boxes2 .box img{
       width: 50px !important;
       top: 10px !important;
   }

   .rpi-overlay .box {
       width: 90px !important;
       height: 90px !important;
       margin-bottom: 0px !important;
       box-sizing: border-box !important;
   }
   .rpi-slide {
       min-width: 100%;
       height: 800px !important;
   }
   .section8 .text span, 
   .section8 .text p {
       font-family: Poppins;
       font-size: 40px;
   }
   .section8 {
       height: 400px;
   }

   .menu-item {
       flex-basis: 5%;
   }
   .slider-container {
       position: relative;
       height: 365px;
       overflow: hidden;
       display: block;
     }

     .box {
       display: flex;
       justify-content: center;
       align-items: center;
       background: transparent;
       border-radius: 25px;
       padding: 0px;
       margin-bottom: 30Px;
     }
     .square-mobile{
       display: block !important;
     }
   .footer {
       .title p {
           font-size: 25px;
       }
       .man-footer{
           display: none;
       }
       .frame .part1 {
           display: flex;
           margin-top: 20Px;
           position: relative;
           left: 80Px;                        
       }
       .screen-wts {
           width: 540Px;
           margin-left: -167px;

       }
       .man-think {
           padding: 30px 45px 0 40px;
           width: 310Px;
           height: 145px;
           position: relative;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
           top: 95Px;
           right: 62px;
           p {
               font-family: 'Cairo', sans-serif;
               font-size: 18.02px;
           }
       }
       .doz-privé {

           top: 225Px;
           right: 617PX;
           width: 243.84px;
           height: 94.71px;
           padding: 5px 35px 0 0px;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
       }
       .email-footer {

           top: 300Px;
           right: 960PX;
           z-index: 3;
           width: 341.56px;
           height: 90.17px;
           padding: 5px 50px 0 0;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
       }
       .phone-footer {
           top: 370Px;
           right: 1314PX;
           width: 355.6px;
           height: 212.97px;
           padding: 35px 0px 0 105px;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
           span,
           p{
               
               font-size: 19.02px;
           }
       }
       .reseau {
           top: 535Px;
           right: 1664PX;
           z-index: 3;
           width: 345.56px;
           height: 90.17px;
           background-position: center;
           background-repeat: no-repeat;
           background-size: contain;
           .logo {
               left: 83px !important;

           }
       }
       
       }
       .aventage .why {
           text-align: center;
           position: relative;
           bottom: 65Px;
       }
       
       
       .aventage-flex-box {
           margin: 20px 10px 0px 30px;
           width: 360px ;
       }
       .service-flex-box {
           margin: 10px 10px 0 30px;
           width: 380px !important;
       }

       

       
       .rpi-overlay {

           left: -12px !important;
       }
       .aventage .aventage-flex-box .second-part {
           padding: 10Px 40px 0 45px;
       }
       .header li a {
           display: block;
           padding: 22px 20px;
           text-decoration: none;
           height: 70px;
       }
       hr{
           margin: 0px;
           width: 70%;
           color: #ffffff42;
           position: relative;
           left: 60px;
           display: block !important;
       }
       .aventage .mess {
           width: 261Px;
           height: 69px;
           padding: 0px 30px 0 0;
           position: relative;
           top: 65px;
           left: -5px;
   
           
       }
       .aventage .mess p {
           font-size: 15px;
           font-weight: 700;
           line-height: 30.52px;
       }
       .aventage .mess span {
           font-size: 17Px;
       }
       .navigation-buttons {
           display: none;
       }
       .blur-filter{
           padding: 0 15px 0 15px;
       }
       
       div#backtoUP {
           opacity: 1;
           transform: none;
           transition: none; /* Slow the animation */
         }
         .head-blog {
           & .title {
               h1 {
                   font-size: 20px;
                   line-height: 40px;
               }
           }
       }
       .indicateur-bar{
           padding: 25px 0 0 0;
       }
       .article-rec{
           ul{
               padding: 0px;
           }
       }
       .newsletter{
           border-radius: 0px;
       }
       .more-article-slider {
           .prev {
               left: 0px;
               top: 110px;
           }
       }
       .more-article-slider {
           .next {
               right: -30px;
               top: 110px;
           }
       }
       .body-blog {
           .reseau-s {
               display: flex ;
               gap: 8px;
           }
       }
       .newsletter {
           .input-container input {
               font-size: 11px;
          }
       }
       .gama-to-down {
           left: 10px !important;
        }
        .header{
           .navbar-collapse{
               background: #201a35;
           }
       }
   }
   
   

   
   
   

 
 
 /* Small Devices (Landscape Phones/Tablets, 576px to 767px) */
 @media (min-width: 576px) and (max-width: 767.98px) {
   /* Styles for landscape phones or small tablets */
   .header .logo {
       position: relative;
       left: 20Px;
       top: 20Px;

   }
   .header .menu-icon {
       left: 150Px;
       top: 25px;
   }
   .header ul {
       height: auto; 
       right: auto; 
       border-radius: 1PX;
   }
   .middle-header img {
       width: 300px;
   }
   .page-head{
       display: none;
   }
   .aventage .why .logo .image-class1 {
       width: 225px;
       height: 90Px;
       position: relative;
       top: 40px;
       left: -10px;
   }
   .aventage .why .logo .image-class2 {
       position: relative;
       left: 115px;
       width: 120px;
       left: 10px;
       top: 20Px;
   }
   .aventage {
       background-color: #201A35;
       
   }
 }
 
 /* Medium Devices (Tablets, 768px to 991px) */
 @media (min-width: 768px) and (max-width: 991.98px) {
   /* Styles for tablets */
   .page-head{
       display: none;
   }
   .pin-spacer{
       display: none !important;
   }
   

 }

 

 

 @media  (max-width: 991px) {
   
   .presentation {
       display: none;
   }
   .presentation-mobile{
       display: block !important;
   }
   .presentation-2 {
       height: 360px;
       li{
           display: flex;
       }
       .buttom p {
           font-size: 15px;
       }
       .buttom a {
           display: flex;
           width: 190px;
           height: 75px;
           margin-bottom: 12px;
           position: relative;
           align-items: center;
           justify-content: center;
           padding: 16PX 0 0px 0px;               
       }
       .body {
           width: 300PX;
           padding: 0px 0 0 11%;
           top: 30Px;
           
       }
        .body p {
           font-family: Poppins;
           width: 300Px;
           font-size: 25px;
           line-height: 40px;
       }
       ul{
           padding-left: 1rem !important;
       }
   }
 }
 /* start    make part qui smme nous responive an other device  */
 
 @media (min-width: 992px) and (max-width: 1280px) {
   .presentation .part1 {
       margin-left: 20px !important;
   }
   .service     .part1 {
       margin-left: -9px !important;
   }
   .presentation {
       height: 700px;
       background-color: #FFCB21;
       display: flex;
       justify-content: center;
       padding: 0px 25px 0px 25px;
       .part2{
           margin-left: -209px;
       }
   }
   .qui1 {
       position: relative;
       right: 25px;
   }
   .qui4 {
       TOP: 260Px !important;   
   }
   .part1 .qui2 {

       padding: 40px 25px 0px 45px !important;
       border-radius: 35px !important;
       margin-top: 130px !important;
       
   }
   .qui3 {
       position: relative !important;
       top: 65Px !important;
       right: 20px !important;
       width: 190px !important;
   }
 }

 /*end        make part qui smme nous responive an other device  */
 @media  (max-width: 1023px) {
   .container-head{
       display: none;
   }
   .mobile-banner{
       display: block;
       border: none;
   }
    .mobile-banner img{
       width: 100%;
       height: 100%;
    }
    
    .vd-youtube{
       display: block;
       
       top: 423px;
       left: 0Px;
       width: 100%;
       padding: 25px 0 0 0;
       .test3 {
           position: absolute;
           top: -35px;
           left: -6px;
           right: 0;
           bottom: 422px;
           margin: auto;
           width: 91%;
           height: 82%;
       }
       .blur-filter{
           display: flex;
           justify-content: center;
       }
   }
   .vd-youtube .text {
       display: none;
   }
   .vd-youtube .mobile-text{
       display: flex !important;
       justify-content: center;

   }
   .vd-youtube p {
       font-size: 36px;
       
   }
   .vd-youtube span {
       font-family: Poppins;
       font-size: 25px;
   }
   .youtube-pop {
       position: relative;
       top: 0;
       left: 0;
       border-radius: 15px;
   }
   .service .image .part2 {
       position: relative;
       left: -90px !important;
       top: 180px !important;
   }
   .service-card {
       margin-top: 195px !important;
   }
   .man-footer{
       display: none;
   }
 }


 @media  (max-width: 1550px) {
   .service-card {
       margin-top: 185px;
   }
   .service .image .part2 {
       position: relative;
       left: 0px;
       top: 215px;
   }
 }
 
 @media (min-width: 760px) and (max-width: 900px) {
    .aventage .mess {
        left: 0px;
    }
    .aventage .why .logo .image-class2 {

        left: 40px;
    }
 }