*{
   margin: 0;
   padding: 0;
}


#nav-bar
{
position: fixed;
top: 0;
z-index: 10;
}
.navbar
{
 background-image: linear-gradient(to left, rgba(25, 150, 223, 0.651),rgba(103, 171, 216, 0.849));
 padding: 0 !important;
}
.navbar-brand img
{
   height: 40px;
   padding-left: 20px;
}
.navbar-nav li
{
   padding: 0 10px; 
}
.navbar-nav li a
{
   color: #fff !important;
   font-weight: 600;
   float:right;
   text-align: right;
}
.navbar-toggler
{
   color: #fff !important;
   font-size: 30px !important;
}
#banner
{
   background-image: linear-gradient(to right, #a517ba,#5f1782) !important;
   color: #fff;
   padding-top: 6%;
}
.promo-title
{
   font-size: 40px;
   font-weight: 600;
   margin-top: 100px;
}
#services
{
   text-align: center;
}
.services
{
  margin-right: 100px;                  
}
.services h4 
{
   padding: 5px;
   margin-top: 25px;
}
.services
{
   width: 80%; 
    font-size: 500px;
    margin:auto ;
    text-align: center;
    padding-top: 100px;
}
.services h1{
   width: 80%; 
   font-size: 500px;
   margin:auto ;
   text-align: center;
   padding-top: 100px;
}
.col-md-6{
   text-align: center;
}
#banner
{
background-image: linear-gradient(to right, rgba(64, 64, 138, 0.747),rgb(7, 30, 241));
   color: #fff;
   padding-top: 6%;
}
.promo-title
{
   font-size: 40px;
   font-weight: 600;
   margin-top: 100px;
}
.play-btn
{
   width: 45px;
   margin: 20px;
}
.hero-btn{
   display: inline-block;
   text-decoration: none;
   color: white;
   border: 1px solid blue;
   padding: 12px 34px;
   font-size: 13px;
   background: transparent;
   position: relative;
   cursor: pointer;
   left: 50;
}
.hero-btn:hover{
   border: 1px solid tomato;
   background-color:rgb(255, 174, 0);
   transition: 0.0001s;}
.navbar-image
{
   width: 350px;
   height: 500px;
   padding-left: 20px;
}
.banner
{   
   background-image : url("image/programmingillustration.png");
   background-repeat: no-repeat;
   height: 700px;
   color: #fff;
   padding-top: 6%;
}
/*-----corse--------*/
  .course{
   width: 80%; 
   font-size: 500px;
   margin: auto;
   text-align: center;
   padding-top: 100px;
  }
  .h1{
     font-size: 35px; 
     font-weight: 600;
     
  }
  p{
     color:black;
     font-size: 15px;
     font-weight:300;
     line-height: 25px;
     padding: 10px;
  }
  .row{
     margin-top: 5%;
     display: flex;
     justify-content: space-between;
     
  }
  .col-md-4{
   text-align: center;
    padding-top: 100px;
     justify-content: space-between;
     background: rgb(54, 138, 247);
     border-radius: 10px;
     margin-bottom: 5%;
     box-sizing:border-box;
     padding: 20px 12px;
     transition: 0.75s;
  }
  
  h3{
     text-align: center;
     font-size: 600;
     margin: 30px;
  }
  .col-md-4:hover{
     box-shadow: 0 0 20px 10px rgb(173, 165, 175);
              
   }  
  *{
     margin: 0;
     padding: 0;
     font-family: 'poppins',sans-serif;
  }
  .header{
     background-color: rgba(168, 253, 212, 0.205);
  
  }
  .nav-links2{
        display: flex;
        padding: 2% 6%;
        justify-content: space-between;
        align-items: center;
        color: white;
     
      }
  
  
 header{
           width: 100px ;
      }                 
      .nav-links2 a{ 
     display:block;
  } 
  .header a{
  color: black;
  }  
  .body{
  background-image: url('image/live-chat-icon-6.jpg');
  
  }
  
  .post-box{  
     text-align: center;

   }
.text-box{
  position: absolute;
  top: 250px;
  bottom: 100px;
  left: 470px;
  text-align: center;
 z-index: 0;
}

.h1{
  color: black;
}
.text-box{
 position: absolute;
 top: 250px;
 bottom: 100px;
 left: 300px;
 width: 1000px;
 text-align: center;
 z-index: 0;
}
.text-box h1 {
 font-size: 60px;
}

.text-box p{
 color: black;
 align-items: center;
  
}
.hero-btn{
 display: inline-block;
 text-decoration: none;
 color: black;
 border: 1px solid green;
 font-size: 13px;
 background: transparent;
 position: relative;
 cursor: pointer;
 left: 50;
}
.hero-btn:hover{
 border: 1px solid tomato;
 background-color:rgb(255, 174, 0);
 transition: 0.0001s;} 
.header1{
 background-color: rgb(228, 255, 242);
}
.nav-bar{
   position: fixed;
   width: 100%;
}
.hero-btn1{
   display: inline-block;
 text-decoration: none;
 color: black;
 border: 1px solid plum;
 font-size: 13px;
 background: transparent;
 position: relative;
 cursor: pointer;
 left: 50;
}
.hi{
   color: #fff;
}
.bubble img{
 width: 50px;
 animation: bubble 7s linear infinite;
}
.image{
   width: 100px;
}
.bubble{
   width: 100%;
   display: flex;
   position: absolute;
   bottom: -70px;
   justify-content: space-between;
}

@keyframes bubble{
   0%{
    transform: translateY(0);
    opacity: 0;
   }
   50%{
      opacity: 1; 
   }
     70%{
      opacity: 1;
   }
     100%{
      transform: translateY(-80vh);
      opacity: 0;
   }
}
.bubble img:nth-child(1){
   animation-delay: 2s;
}
.bubble img:nth-child(2){
   animation-delay: 1s;
}
.bubble img:nth-child(3){
   animation-delay: 3s;
}
.bubble img:nth-child(4){
   animation-delay: 4.5s;
}
.bubble img:nth-child(5){
   animation-delay: 3s;
}
.bubble img:nth-child(6){
   animation-delay: 6s;
}
.photo{
   width: 150px;
   justify-content: space-around;
   
}
.png{
   width: 200px;
}
#loading{
   background: rgb(250, 250, 252) url("https://cdn.dribbble.com/users/122350/screenshots/3021059/infinity_loop_-_logo.gif")
   center  no-repeat ;
   background-size: 55%;
   
   height: 100vh;
   width: 100%;
   position: fixed;
   z-index: 100; 
   text-align: center;
}
.png2{
   width: 100%;
   height: 335px;
}
.le{
   justify-content: center;
}
.closing{
   background-image: linear-gradient(to right, rgba(10, 172, 236, 0.329),rgba(15, 198, 223, 0.582)); 
   justify-content:center;
   align-items: center;
   text-align: center;
   font-size: 60px;
   line-height: 60px;
   color: #000;
}

.gcse-search{
   width: 8888px;
}
.movie{
   position: absolute; 
   top: 0;
   left: 0;
   width: 100%;

}
.movie1{
   position: relative;
   width: 90px;
   height: 50px;
   
   
}
.single-box{
 flex-basis: 48%;
 text-align: center;
 border-radius: 7px;
 margin-bottom: 20px;
 color: #fff;
position:  sticky;
}
.single-box img{
   width: 100%;
   border-radius: 7%;

}
.overlay{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 border-radius: 7px;
 cursor: pointer;
 background: linear-gradient(to right, rgba(10, 172, 236, 0.329),rgba(15, 198, 223, 0.582));
 opacity: 0;
 transition: 1s;
}
hr{
   margin: 15px auto;
   width: 100%;
   border: 0;
   height: 2px;
}
.single-box:hover .overlay{
 opacity: 1;
}
.dicrip{
width: 80%;
position: absolute;
bottom: 40%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
.single-box:hover .dicrip{
   opacity: 1;
}
.tit{
   background-color: blanchedalmond;
}
h5{
   color: #777777;
   text-align: center;
} 
.hp{
   height: 380px;
   overflow: scroll;
   background-color: rgb(250, 184, 1); 
   align-items: center;
   justify-content: center;
   text-align: center;
}
