:root{
    --thumb-h: 100px;
    --thumb-gap:7px;
    --visible: 4;
  }
  
  
  
  @media screen and (min-width: 1500px) and (max-width: 1920px) {
  
   :root{
    --thumb-h: 120px;
    --thumb-gap:7px;
    --visible: 4;
  }
  
  
  }
  
  
  
  
  
  
  
  


  .wrap{display:flex; gap:20px; align-items:center;}

  /* Thumbnail column */
  .thumb-col{width:120px; position:relative;}
  .arrow{
    width:36px; height:36px; border-radius:50%;
    background:transparent; color:#fff; display:flex;align-items:center;
    justify-content:center; cursor:pointer; user-select:none; position:relative; margin:6px auto;
  }
  .thumb-viewport{
    height: calc( (var(--thumb-h)) * var(--visible) + (var(--thumb-gap) * (var(--visible))) );
    overflow:hidden;
    margin:10px 0;
    border-radius:8px;
  }
  .thumb-list{
    transition: transform 300ms ease;
    display:flex;
    flex-direction:column;
    padding:4px;
  }
  .thumb{
    height:var(--thumb-h);
    margin-bottom:var(--thumb-gap);
    border-radius:6px;
    overflow:hidden;
    cursor:pointer;
    opacity:0.65;
      border: 1px solid #13BE8C;
    box-sizing:border-box;
    transition: transform 180ms ease, opacity 180ms ease, border-color 180ms ease;    display: flex;
    align-items: center;
    justify-content: center;
  }
  .thumb img{     width: 100%;
    object-fit: cover;
    display: block;
    max-width: 60px;
    height: auto;
 }
  .thumb.active{ opacity:1; transform:scale(1.03);     background: #13BE8C; }

  /* Main image area */
  .main{flex:1; max-width:820px; position:relative; overflow:hidden; border-radius:10px;}
  .main-inner{display:flex; transition:transform 0.6s ease;}
  .main-inner img{width:100%; height:auto; flex-shrink:0; border-radius:8px; display:block;}

  .main-controls{ display:none; gap:8px; margin-top:10px; }
  .btn{ padding:8px 12px; background:#f0f0f0; border-radius:6px; cursor:pointer; user-select:none; }

.main-inner img{    padding: 30px 12%;
    display: flex;
    box-sizing: border-box;}



  /* --- Responsive layout --- */
  @media (max-width:781px){
    .wrap{flex-direction:column; align-items:center;}
    .thumb-col{width:100%; order:2;}
    .thumb-viewport{
      width:100%; height:auto;
      display:flex; overflow:hidden;
    }
    .thumb-list{
      flex-direction:row;
      transition: transform 300ms ease;        width: 100%;

    }
    .thumb{
             width: 100%;
        height: auto;
        margin-right: var(--thumb-gap);
        margin-bottom: 0;
        padding: 10px;;
    }
    .arrow{
      position:absolute;
      top:50%; transform:translateY(-50%);
      margin:0;
      background:rgba(0,0,0,0.55);
      z-index:5;
    }
    #up{left:5px; transform:translateY(-50%) rotate(90deg);}
    #down{right:5px; transform:translateY(-50%) rotate(90deg);}
    
    .section.pro-inner-sec .content .grid-3, #pro-inner-last .grid-3 {
    grid-template-columns: 1fr !important;gap:1.5rem !important}
    
   
   .section.pro-inner-sec .content .grid-3 .bx{
    border-right: unset !important;padding-bottom:0.75rem !important;
    border-bottom: 1px solid #13BE8C !important;
   }
    
    #banner{padding-bottom:10% !important;padding-top: 100px !important;}
    
    #pro-inner-last{border-radius:30px !important;}
    
    
    /*.main-inner{    align-items: center;*/
    /*justify-content: center}*/
    
    /*.main-inner img {*/
    /*max-width: 70%;}*/
    
    .product-slider .main{max-width: 100% !important;width:100% !important}
    
    
        #last figure img {max-width: unset !important;        width: 100%;}
    
    #last .img-sec{    display: grid;
    grid-template-columns: 1fr 1fr;}
    
    #up,#down{display:none;}
    
    .thumb-col img{width:100%;height:auto;}
    
    .main-inner img{    padding: 0 15%;
    display: flex
;
    box-sizing: border-box;}
    
    
    
    
  }