.main-wrap{background-color: #161616; position: relative; min-height: calc(100vh - 15rem); height: fit-content; width:100%; max-width: 1800px; margin: 0 auto; display: flex;}
.main-header .wrapper{padding: 0;} 
.sidebar{ position: relative;}
.main-header {width: 480px ; min-height: 100vh;  z-index: 1 !important; position: fixed; height: auto; }
.main-header nav {display: block; position: absolute; bottom: 82px; padding-bottom: 4%;}
.main-header nav ul{display: flex !important; flex-direction: column; gap: 10px;     align-items: flex-start;}
.main-header nav ul li a{font-size: 2.2rem;}
.main-header nav ul li.active a{font-size: 3rem; font-weight: bold; opacity: 1; line-height: 1.2;}

.btn-menu {
    pointer-events: auto;
    z-index: 9999;
}
@media only screen and (max-width:1800px){
.main-wrap{padding: 0 5%; box-sizing: border-box;}
}
@media only screen and (max-width:1280px){
  .main-header {width: 300px ;}
   .main-header nav{bottom: 100px;}
}

@media only screen and (max-width:960px){
  .main-wrap{flex-direction: column;}
     .main-header{width: 100%;  min-height: auto !important;  padding-left: 0;  }
     .main-slider-wrap{padding-right: 20px;}
.main-header .wrapper{    padding: 0 4%;} 
       .main-header nav {
        transform: translateX(100%);
        transition: 0.3s;
        background-color: #505050;
        min-height: 100vh;
       

    }
    
    .main-wrap{padding: 0; }
       .main-header nav ul{
         background-color: #505050;
       }

    .main-header nav.active {
        transform: translateX(0);
    }

}



.main-slider-wrap{ margin-left: 40%; width: 100%; max-width: 75%;  height: 100vh;   overflow: hidden; position: relative; display: flex;  gap: 25px; justify-content: flex-end;box-sizing: border-box; }
.grid-slider-base{ display:  block;  box-sizing: border-box;}
.grid-slider-base li{position: relative;  display: flex; border-radius: 16px; justify-content: center; width: 100%;  color: #fff; overflow: hidden; }
.grid-slider-base li a{display:block;  margin-bottom:25px;}

.thumb-txt {width: 100%;position: absolute; bottom: 25px; padding: 20px; box-sizing: border-box; color: #fff;}
.grid-slider-base li a h4{font-size: 2rem; line-height: 1.2; font-weight: 300; padding-top: 5px;}
.grid-slider-base li a p{font-size: 14px; opacity: 0.5;  line-height: 1.2;}

.grid-slider-base li a:hover .thumb img{transform: scale(1.1);  }
.grid-slider-base li .thumb {  width: 100%; aspect-ratio: 340 / 440;  overflow: hidden;  border-radius: 10px; }
.grid-slider-base li .comingsoon{margin-bottom:25px;}
.grid-slider-base li .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease;}


.main-list{ padding-bottom: 80px;  overflow: hidden; position: relative;  margin-left: 40%;   }
.main-list .grid-slider-base{ display: grid;  grid-template-columns: repeat(3, 1fr); gap:0px 20px; justify-content: flex-end; }
.main-list .grid-slider-base:first-of-type{padding-top: 20px;}
.main-list .grid-slider-base:last-of-type{padding-bottom: 20px;}
.main-list .grid-slider-base li{margin-bottom: 0px !important; border-color: #060606;   width: 100%;}

/* .main-slider-wrap:hover .grid-slider {
  animation-play-state: paused !important;
}

 @keyframes scroll-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes scroll-down {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0%); }
} */



@media only screen and (max-width:960px){

  .grid-slider-base li a h4{font-size: 2.2rem;}
  .grid-slider-base li a p{ font-size: 14px;}
  .thumb-txt{padding: 15px;}
  .grid-slider-base li .comingsoon{margin-bottom:10px;}
  .grid-slider-base li a{ margin-bottom:10px;}

 .main-slider-wrap{gap: 10px; margin-left: 0; flex-direction: column; padding:100px 4%; height: auto; max-width: 100%; margin-left: 0;}

  .main-list{padding: 4% !important; gap: 10px; margin-left: 0; flex-direction: column; padding-top:120px ; height: auto; margin-left: 0px;}
.thumb-txt{width: 100%;}
.main-list .grid-slider-base{ gap: 0px 10px;  justify-content: center; padding-bottom: 10px;   grid-template-columns: repeat(2, 1fr);}
.main-list .grid-slider-base:first-of-type{padding-top: 82px;}
.main-list .grid-slider-base:last-of-type{padding-bottom: 82px;}
.grid-slider-base li{width: calc(50% - 5px); border-radius: 10px; margin-bottom: 0;}

 .grid-slider,
  .grid-slider2 {
    animation: none !important;
    transform: translateY(0) !important;
    transition: none !important;
    
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 calc(50% - 340px);

  }
  /* .grid-slider-base li:nth-child(odd){
    margin-right: auto;
  } */



}

@media only screen and (max-width:460px){
  .grid-slider-base li{  width: calc(50% - 5px);}

}


footer.main-footer{margin-top: 0; position: fixed; bottom: 0; width: 100%; z-index: 10; background-color: #060606; opacity: 0.9; left: 0;     padding: 2rem 0 !important; font-size: 14px;} 
footer.main-footer .wrapper{padding: 0;     align-items: center;}



@media only screen and (max-width:1800px){footer.main-footer .wrapper{padding: 0 5%;}}

@media only screen and (max-width:960px){
  footer.main-footer {z-index: 0; position: absolute; bottom: -15rem;}

}



.scroll-animation {
  opacity: 0;
 transform: translateY(40px) ;
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}  

.scroll-animation.show {
  opacity: 1;
  transform: translateY(0);
}