.heading{
  color: #444;
  font-size: 40px;
  text-align: center;
  padding:10px;
}

.containeryoutube {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  align-items: flex-start;
  /* padding: 5px 5%; */
}

.containeryoutube .main-video {
  background: #fff;
  border-radius: 5px;
  /* padding: 10px; */
  /* height: 100%; */
}

.containeryoutube .main-video iframe{
  width:100%;
  height: 600px; /* Adjust this value based on your preference */
  border-radius: 5px;
}

.containeryoutube .main-video .title{
  color: #ffffff;
  font-size: 16px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: right;
}

.containeryoutube .video-list {
  background: #fff;
  border-radius:2px;
  width: 100%;
  height:680px;
  overflow-y: scroll;
  margin-top: -10px;
}

.containeryoutube .video-list::-webkit-scrollbar{
  width: 7px;
}

.containeryoutube .video-list::-webkit-scrollbar-track{
  background: #030000;
  border-radius: 50px
}

.containeryoutube .video-list::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 5px
}

.containeryoutube .video-list .vid video{
   width: 100px;
   border-radius: 5px;
}

.containeryoutube .video-list .vid{
  display: flex;
  align-items: center;
  gap:15px;
  background: #f7f7f7;
  border-radius: 5px;

  margin:10px;
  /* padding:10px; */
  border:1px solid rgba(0,0,0,.1);
  cursor: pointer;
}
.containeryoutube .video-list .vid:hover{
  background-color: #eee;
}
.containeryoutube .video-list .vid.active{
  background-color: #4b87c6;
}
.containeryoutube .video-list .vid.active .title{
  color: #fff;
}
.containeryoutube .video-list .vid .title{
  color: #ffffff;
  font-size: 10px;
}
@media (max-width:991px) {
  .containeryoutube {
    grid-template-columns: 1.5fr 1fr;
    padding: 10px;
  }
}
@media (max-width:768px) {
  .containeryoutube {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}