@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

*{
   font-family: "PTRootUI",Helvetica,Arial,sans-serif;
   margin:0 0; 
   padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   text-transform: capitalize;
}

body{
   background-color: rgb(255, 255, 255);
   padding:0;
}
.container-hd{
   max-width: 100%;
   margin:0 0 20px 0;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap:20px;
}
.t3-topbar {
   background: #1b3060;
   color: rgba(255,255,255,0.5);
   font-size: 13px;
}
li {
   display: inline-block;
   text-align: -webkit-match-parent;
}
.list-info {
   border-left: 1px solid rgba(255,255,255,0.1);
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
}
.list-info li {
   border-right: 1px solid rgba(255,255,255,0.1);
   height: 40px;
   line-height: 40px;
   padding: 0 25px;
}
ul {
   list-style-type: disc;
   display:inline-block;
}
.pull-left {
   float: left !important;
}
 .cover-image{
   background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("../images/cover-image.jpg") ;
   background-position:center;
   background-size:cover;
   padding:250px 0;
   position:relative;
   Height:200px;
   max-width:100%;
   object-fit:cover;
   margin:0px 0px;
}

h3{
   letter-spacing:-0.6px;
   font-size:45px;
   color:#fff;
   font-weight:600;
   margin:0 auto 12.5px;
   line-height:1.5;
   align-items: center;
   width:900px;
}

.container{
   max-width: 1600px;
   margin:90px auto 200px auto;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap:20px;
   padding-left:30px;
   padding-right:30px;
}

.container .main-video-container{
   flex:1 1 400px;
   height: 600px;
   max-width:800;
   border-radius: 5px;
   box-shadow: 0 5px 15px rgba(0,0,0,.1);
   background-color: white;
   padding:15px;
   margin:0 auto 12.5px;
   font-family:sans-serif;
}

.container .main-video-container .main-video{
   margin-bottom: 20px;
   border-radius: 5px;
   width:900px;
   height: 500px;
   object-fit:fill;
}

.container .main-video-container .main-vid-title{
   color:rgba(1,1,1);
   font-size: 36px;
   font-weight: 400;
   line-height: 1.25;
}

.container-title{
   
    color:rgba(1,1,1);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 40px;
    margin-left:550px;
   
}
.container .video-list-container{
   flex:1 1 200px;
   height: 600px;
   width:50px;
   overflow-y: scroll;
   border-radius: 5px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
   background-color: white;
   padding:10px;   
}

.container .video-list-container::-webkit-scrollbar{
   width: 15px;
}

.container .video-list-container::-webkit-scrollbar-track{
   background-color: #aaa;
   border-radius: 5px;
}

.container .video-list-container::-webkit-scrollbar-thumb{
   background-color: #333;
   height:50px;
   border-radius: 5px;
}

.container .video-list-container .list{
   display: flex;
   align-items: center;
   gap:15px;
   padding:10px;
   background-color: #999;
   cursor: pointer;
   border-radius: 5px;
   margin-bottom: 10px;
}

.container .video-list-container .list:last-child{
   margin-bottom: 0;
}

.container .video-list-container .list.active{
   background-color: #666;
}

.container .video-list-container .list.active .list-title{
   color:#fff;
}

.container .video-list-container .list .list-video{
   width: 100px;
   border-radius: 5px;
   object-fit:fill;
   Height: 50px;
}

.container .video-list-container .list .list-title{
   font-size: 17px;
   color:#444;
      font-size: 15px;
      text-align: center;
      font-size: 24px;
      font-weight: 400;
      line-height: 1.25;
   }

footer{
    position:relative;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    background: #111;
    height:70px;
    width: 100vw;
    padding-top: 40px;
    color:#111;
    max-width:100%;

}


.logo-text a {
   color: #1b3060;
   text-decoration: none;
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -1px;
}
.logo a {
   display: inline-block;
   line-height: 1;
   margin: 0;
}
.logo-text a b {
   color: #d93030;


}
b, strong {
   font-weight: bold;
}

.container-inner {
   align-items: center;
   display: flex;
   justify-content: space-between;

   margin-left:150px;
}
header {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

.navbar-default .navbar-nav > li > a {
   color: #333333;
   padding-left: 0;
   margin-right: 0;
   margin-left: 30px;
   font-weight: 700;
}
.nav > li > a {
   position: relative;
   display: block;
   padding: 10px 15px;
}

.nav > li {
   position: relative;
   display: block;
   gap:inherit;
}
.header-inner {
   align-items: center;
   display: flex;
}

.t3-mainnav {
   background: transparent;
   border: 0;
   margin-bottom: 0;
   border-radius: 0;
}

.navbar-collapse {
   padding-right: 15px;
   padding-left: 15px;
   overflow-x: visible;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
   -webkit-overflow-scrolling: touch;
}

.t3-mainnav .t3-navbar-collapse .navbar-nav {
   margin: 0 -15px;
   border-top: 1px solid #f2f3f7;
   border-bottom: 1px solid #f2f3f7;
}

.current-active li{
   display:inline-block,flex;
   text-align: -webkit-match-parent;
   white-space: nowrap;
  
}
.current-active{
   width:800px;
}
span{
   position:relative;
}









@media (max-width:800px){

   .container{
      margin:0;
   }

}
@media (min-width: 992px){
   .navbar-nav > li > a {
    padding-top: 32.5px;
    padding-bottom: 32.5px;
}
}

@media (max-width:800px){

   .container .main-video-container .main-vid-title{
      font-size: 15px;
      text-align: center;
   }

   .container .video-list-container .list{
      font-size:15px;
      gap:10px;
   }

   .container .video-list-container .list .list-video{
      width: 100%;
   }

   .container .video-list-container .list .list-title{
      font-size: 15px;
      text-align: center;
   }

}