// start section2 
.section2_container{
    background-color: #F9F7F7;
    padding-bottom: 39px;
    .slider_section2{
      position: relative;
      max-width: 1680px;
      margin: auto 0 auto auto;
      @include clamp("padding-left", 0px, 4.7vw, 241px);
    
    // slider with scrollbar
      .slider-container {
         max-width:1680px ; 
         overflow-x: scroll;
         margin: auto 0 auto auto;
         position: relative;
         width: 100%;
       }
       
       .slider-wrapper {
         display: flex;
         width: 2000px;
         @media only screen and (max-width: 992px){ 
          width: 100%;
      
        }
       }
       
       .slider-item {
         flex-shrink: 0;
         cursor: pointer;
         margin-right: 64px;
         position: relative;
        //  padding-bottom: 12px;
        padding-bottom: 51px;
        //  images
         img{
            width: 100%;
            max-width: 415px;
            max-height: 289px;
            object-fit: cover;
         }
    
         @media only screen and (max-width: 455px){ 
          padding-bottom:0px;
          margin-right: 0;
          width: calc(100%);
          }
         // background balck and icon zoom
         .with-bg{
            position: relative;
            max-height: 289px;
            @media only screen and (max-width: 455px){
              margin-right: 4px;
            }
           }
         
        
           .with-bg:before {
               content: '';
               display: none;
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: rgba(0, 0, 0, 0.4); 
               z-index: 1;
               max-height:289px;
               height: 100%;
               opacity: 0;
               transition: opacity 0.3s ease;
             }
            
             .zoom-icon {
               display: none;
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               z-index: 2;
               width: 40px;
               height: 40px;
               background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='53' height='53' fill='none' viewBox='0 0 53 53'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23fff' d='M28.983 20h-6v-6a1 1 0 0 0-2 0v6h-6a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z'/%3e%3cpath fill='%23fff' d='M51.704 51.273 36.845 35.82c3.79-3.801 6.138-9.041 6.138-14.82 0-11.58-9.42-21-21-21s-21 9.42-21 21 9.42 21 21 21c5.083 0 9.748-1.817 13.384-4.832l14.895 15.491a.998.998 0 0 0 1.414.028 1 1 0 0 0 .028-1.414ZM2.983 21c0-10.477 8.523-19 19-19s19 8.523 19 19-8.523 19-19 19-19-8.523-19-19Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h52.966v52.966H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");            background-size: cover;
             }
             .with-bg:hover .zoom-icon,.with-bg:hover:before{
              display: block;
              opacity: 1;
              cursor: pointer;
            }
          //  info the card item title / price ...
         .info,.temps{
            display: flex;
            text-transform: uppercase;
            font-weight: 400;
            padding: 15px 0px;
            
            .product_prix{
             text-align: right;
             font-family: $Playfair;
             font-size: 14px;
             line-height: 32px;
             width: 50%;
             color: #EE7D00;
             text-transform: uppercase;
             span{
              font-size: 25px;
             }
            }
            .product_title{
              width: 50%;
               color: #7E2110;
               @media only screen and (max-width: 992px) {
                color: #EE7D00;
               }
            }
            .horaire_slide{
               font-family: $Jost;
               font-size: 16px;
               line-height: 23px;
               color: #000000;
               width: 50%;
               display: flex;
               justify-items: center;
               align-items: center;
               svg{
                  vertical-align: sub;
               }
  
            }
            .reserver{
              text-align: end;
              width: 50%;
            }
          
            
         }
         .temps{
          padding: 0 0 2px 0;
         }
         
       }
       @media only screen and (min-width: 768px){
        &::before{
          content: "";
          background: linear-gradient(270deg, #E7E8E3 12.5%, rgba(217, 217, 217, 0) 100%);
           width: 300px;
           display: block;
           height: 100%;
           position: absolute;
           right: 0;
           z-index: 2;
         }
       }
       @media only screen and (max-width: 768px){
        padding-bottom: 21px;
        padding-left: 15px;
        padding-right: 15px;
       }
     
      
    }
    @media only screen and (max-width: 992px){ 
      padding-bottom: 0;
    }
  }

  .slider_btn{
    background-color: #ffffff;
    position: absolute;
    top: 52%;
    transform: translateY(-50%);
    right: 205px;
    z-index: 2;
    border-radius: 100px;
    display: flex;
    @media only screen and (max-width: 768px){
  
       justify-content: space-between;
       width: calc(100% + -4px);
       right: 2px;
       background-color: transparent !important;
       height: 0px;
       top: 47%;
       .slider-btn {
        padding: 0;
       }
    }
  
  }
  .slider-btn {
    
    background-color: transparent !important;      
    padding: 7px 14px;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
  }

  .prev-btn {
    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='43' fill='none' viewBox='0 0 40 43'%3e%3cpath fill='%23000' fill-rule='evenodd' d='M34.375 21.5c0 .371-.28.672-.625.672H6.25c-.345 0-.625-.301-.625-.672 0-.371.28-.672.625-.672h27.5c.345 0 .625.301.625.672Z' clip-rule='evenodd'/%3e%3cpath fill='%23000' fill-rule='evenodd' d='M17.942 34.069a.595.595 0 0 1-.884 0L5.808 21.975a.708.708 0 0 1 0-.95L17.058 8.93a.595.595 0 0 1 .884 0 .708.708 0 0 1 0 .95L7.134 21.5l10.808 11.619a.708.708 0 0 1 0 .95Z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 43px;
    height: 42px;
    @media only screen and (max-width: 768px){
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='38' height='48' fill='none' viewBox='0 0 38 48'%3e%3cpath fill='%23EE7D00' d='M24.464 6.144c0 .394-.149.787-.449 1.087L7.244 24l16.769 16.769a1.535 1.535 0 1 1-2.172 2.172L3.985 25.085c-.6-.6-.6-1.572 0-2.172L21.84 5.057a1.535 1.535 0 0 1 2.623 1.087Z'/%3e%3c/svg%3e ");   }
  }
  
  .next-btn {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='43' fill='none' viewBox='0 0 40 43'%3e%3cpath fill='%23000' fill-rule='evenodd' d='M5.625 21.5c0-.371.28-.672.625-.672h27.5c.345 0 .625.301.625.672 0 .371-.28.672-.625.672H6.25c-.345 0-.625-.301-.625-.672Z' clip-rule='evenodd'/%3e%3cpath fill='%23000' fill-rule='evenodd' d='M22.058 8.931a.595.595 0 0 1 .884 0l11.25 12.094a.708.708 0 0 1 0 .95L22.942 34.07a.595.595 0 0 1-.884 0 .708.708 0 0 1 0-.95L32.866 21.5 22.058 9.881a.708.708 0 0 1 0-.95Z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 43px;
    height: 42px;
    @media only screen and (max-width: 768px){
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='37' height='48' fill='none' viewBox='0 0 37 48'%3e%3cpath fill='%23EE7D00' d='M13.536 41.856c0-.394.149-.787.449-1.087L30.756 24 13.987 7.231A1.535 1.535 0 1 1 16.16 5.06l17.856 17.856c.6.6.6 1.572 0 2.172L16.16 42.943a1.535 1.535 0 0 1-2.623-1.087Z'/%3e%3c/svg%3e ");
       
    }
  }