.slider-setting{
  border: 1px solid #FF640A !important;
  padding: 8px !important;
  border-radius: 6px;
}
.slider-setting .btn-box .wp-block-button.btn:hover{
  background-color: transparent !important;
}
.slider-setting .btn-box .wp-block-button.btn{
  padding: 0 !important;
}
.slider-setting .btn-box .wp-block-button.btn a:hover{
  background-color: var(--wp--preset--color--luminous-vivid-orange) !important;
}
.slider-setting img{
  border-radius: 6px !important;
}
.slider-btn.slider-btn .slider-sec-btn .project-btn i{
  font-size: 20px !important;
  align-items: center;
  padding-left: 4px !important;
}
.slider-btn .slider-sec-btn .project-btn{
    padding: 4px 8px 4px 6px !important;
    border-radius: 4px;
    display: inline-flex !important;
}
.slider-setting .cross-btn{
  display: inline-flex !important;
  padding: 6px 11px 6px 11px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
}
.top-charts-section .play-btn{
  display: inline;
  padding: 7px 10px 7px 10px !important;
  font-size: 15px;
  border-radius: 6px;
  border: solid 2px #FF640A;
}
.top-charts-section {
  margin-top: 40px !important;
}
.top-charts-section .learn-more-btn{
  display: inline-flex;
  padding: 6px 10px 6px 10px !important;
  border-radius: 4px;
  font-size: 16px !important;
  font-weight: 800;
  border: 2px solid #FF640A;
}
.top-charts-section .cover-card{
  border-radius: 7px !important;
}
.top-charts-section .btn-box{
  display: ruby !important;
}
.top-charts-section .image-card{
    margin-top: -24px !important;
}
.top-charts-section p{
  font-size: 20px;
}
.top-charts-section .topcharts-info {
  margin-top: -61px !important;
  padding: 6px 10px 23px 10px;
  margin-bottom: 8px !important;
}
.top-charts-section .star-content{
  display: flex;
  justify-content: space-between;
}
 .top-charts-section .cover-card img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    border-radius: 4px;
  }
  .chart-year{
  position: relative;
  display: inline-flex;
  padding: 2px 10px 2px 10px;
  top: -309px !important;
  left: 10px !important;
  border: 2px solid #FF640A;
  border-radius: 4px !important;
  background-color: white !important;
  color: #FF640A !important;
  padding: 2px 9px 2px 9px !important;
  font-size: 15px !important;
}
 .top-charts-section .projects-btns{
  display: grid !important;
  grid-template-columns: auto auto!important;
  margin-top: -47px !important;
  justify-content: center !important;
  margin-top: -9px !important;
} 
.slider-setting .slider-info{
  display: flex !important;
  justify-content: space-between !important;
  margin-left: 10px !important;
} 
.top-charts-section .learn-more-btn:hover{
  background-color: #FF640A !important;
  color: white !important;
}
.top-charts-section .learn-more-btn p:hover{
  color: white !important;
}
.top-charts-section .play-btn:hover{
  background-color: #FF640A !important;
  color: white !important;
}

.slider-setting .btn-box{
  display: flex !important;
    justify-content: end !important;
}
.slider-setting .btn-info img{
  width: 20px !important;
  margin-right: 2px !important;
}
.slider-setting .btn-info a{
  border-radius: 7px !important;
    padding: 7px 10px 7px 10px !important;
    color: #FF640A !important;
}
.slider-setting .cross-btn img{
  width: 25px !important;
}
.slider-setting .cross-btn a{
  padding: 7px 10px 7px 10px !important;
  border-radius: 7px !important;
}

@media screen and (min-width: 320px) and (max-width: 767px){
  .slider-setting{
    height: 364px !important;
  }
  .slider-setting .slider-first-box p{
    font-size: 15px !important;
    text-align: center !important;
  }
  .slider-setting img{
    height: 250px !important;
    /* margin-top: 10px !important; */
  }
  .top-charts-section .topcharts-info{
    margin-bottom: 5px !important;
  }
  .top-charts-section .cover-card img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
  }
  .chart-year{
   top: -264px !important;
  }
   .top-charts-section .projects-btns{
    margin-top: -47px !important;
  } 
   .slider-setting .slider-info{
    display: flex !important;
    justify-content: center !important;
  }
  .slider-setting .btn-box{
    margin-top: -36px !important;
    display: flex !important;
    justify-content: center !important;
  }
  .slider-setting .btn-info img{
  width: 20px !important;
  height: 20px !important;
}
.slider-setting .btn-info a{
  border-radius: 7px !important;
    padding: 7px 8px 7px 8px !important;
}
.slider-setting .cross-btn img{
  width: 25px !important;
  height: 25px !important;
}
.slider-setting .cross-btn a{
  padding: 4px 10px 4px 10px  !important;
  border-radius: 7px !important;
}
  }
@media screen and (min-width: 768px) and (max-width: 991px){
  .top-charts-section .image-card{
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: center;
  }
  .top-charts-section .cover-card img {
    width: 100% !important;
    object-fit: cover !important;
  }
  .top-charts-section .projects-btns{
    margin-right: 109px !important;
  }
   .slider-setting .slider-info{
    display: flex !important;
    flex-wrap: nowrap !important;
  } 
  .slider-setting .btn-content{
    flex-basis: 50% !important;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
  .top-charts-section .image-card{
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    justify-content: center;
  }
  .top-charts-section .topcharts-info{
   margin-bottom: 5px !important;
  }
  .top-charts-section .cover-card img {
    width: 100% !important;
    object-fit: cover !important;
  }
  .slider-setting .slider-info {
    display: flex !important;
    margin-top: 15px !important;
  }
  .top-charts-section .projects-btns{
    margin-top: -21px !important;
    margin-right: 0 !important;
  }
  .slider-first-boxs{
    flex-basis: 60% !important;
  }
  .slider-btn{
    flex-basis: 39% !important;
  }
  .slider-setting .btn-content{
    flex-basis: 50% !important;
  }
  .slider-setting .btn-info img{
    width: 20px !important;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1481px){
  .slider-first-boxs{
    flex-basis: 18% !important;
  }
  .slider-btn{
    flex-basis: 39% !important;
  }
}