.videos-banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.29)), url('../img/video-banner.png');
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  margin-top: 69px;
}
.headline {
  height: 45vh;
  align-content: center;
  /* padding-top: 67px; */
}
.videos-banner h3{
  color:#dfa957
}

#videos {
  background-image: linear-gradient(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.58)), url('../img/video-background.jpg');
  background-size: cover;
  background-position: center;
  /* padding-top: 157px !important; */
}
.video-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap:1rem;
  align-items: flex-start;
  padding:1rem 5%;
justify-content: center;
    }
.video-container .video-player{
  background-color: #dba655;
  border-radius: 5px;
  padding:10px ;
}
.video-container .video-player iframe{
  width: 100%;
  border-radius:5px;
}
.video-container .video-list{
  /* background: #eee; */
  border-radius: 5px;
  height: 470px; 
  overflow-y: scroll;
}
.video-container .video-list::-webkit-scrollbar{
  width: 7px;
}
.video-container .video-list::-webkit-scrollbar-track{
  background: #ccc;
  border-radius: 50px;
}
.video-container .video-list::-webkit-scrollbar-thumb{
  background: #666;
  border-radius: 50px;
}
.video-container .video-list .video-item img{
  width: 100px;
  height: 50px;
  border-radius: 3px;
}
.video-container .video-list .video-item{
  display: flex;
  align-items: center;
  gap: 15px;
  background:#f7f7f7;
  border-radius: 3px;
  margin:10px;
  padding: 5px;
  border: 1px solid rgba(0,0,0,.1);
  cursor: pointer;
}
.video-container .video-list .video-item h3{
    font-size: 12px !important;
    background: none !important;
    text-align: left;
    color: #000;
}
.video-container .video-list .video-item:hover{
  background: #2c697d;
}
.video-container .video-list .video-item.active{
   background: #2c697d;
}
.video-description {
    margin-top: 10px;
    color: #000;
}
@media (max-width: 1200px) {
.videos-banner {;
  margin-top: 50px;
}
.books-banner {
  margin-top: 50px;

}
@media (max-width:960px){
.video-container{
  grid-template-columns: 1.5fr 1fr;
  padding:2rem;
}
}
@media (max-width: 768px){
.video-container{
  grid-template-columns: 1fr;
} 
.video-container .video-player iframe{
  width: 100%;
  height: 300px !important;
  border-radius:5px; 
}
}