:root{

--features-ground:#f3f4fb;
--worddesign-color:#bdb1f7;
--learning-ground: #563d7c;

}

*{
  padding: 0px;
  margin: 0px;
}




body {
  padding-top: 80px; 
}

#logo{
    width: 150px;
}
.nav-link:hover {
  color: #bdb1f7;
}
.signup:hover{
background-color: #bdb1f7 !important;
color: black !important;

} 
.special{
    color: #bdb1f7;
}
#learning{
  background-color: var(--learning-ground);
  color: white;
}
#learning:hover{

  background-color: #bdb1f7;
}
#demo{
  border: 1px solid white ;
  color: white;

}
#demo:hover{
  background-color: white;
  color: #bdb1f7;
}
.startimg{
  width: 120px;
}
.imgtable{
  width: 35%;
}
.img-s{
  width: 243px;
  height: 300px;
}
#features{
background-color: var(--features-ground);
color: black;
 padding-top: 100px;   
padding-bottom: 100px; 


}
.worddesign{
  color:var(--worddesign-color) ;
}
.cardcolor{
  background-color: var(--features-ground);
  border: none;
}
.leftcontent {
  margin-right: 150px; 
}
.experiance{
   padding-top: 100px;   
  padding-bottom: 100px; 
}
.coursementor {
  margin-left: 150px; 
}
.sec4{
background: linear-gradient(to right,#f3f4fb 50%, #ffffff 50%);
padding-top: 100px;   
padding-bottom: 100px; 

}

.sec4icon{
margin-right: 350px;
width: 80px;


}
.sec4-cards{
  margin-left: 200px;
}
.card-border1{
  border-top: 3px solid black;
}
.card-border2{
  border-top: 3px solid #bdb1f7;
}

.sec5{
  padding-top: 140px;
  padding-bottom: 100px; 
}
#sec5link{
background-color: white;
color: black;
border: 2px solid black;
}
#sec5link:hover{
   background-color: var(--learning-ground);
  color:white;
  
}
.sec6{
  background-color: var(--features-ground);
  padding-top: 100px;   
padding-bottom: 100px; 
}


.sec6card{
  background-color: var(--features-ground);
  border: none;
}
.sec6card i{
  background-color: var(--worddesign-color);
  color: var(--learning-ground);
  padding: 8px;
  border-radius: 50%;
}
.sec6card i:hover{
  opacity: 0.5;
}
.sec7{

background: linear-gradient(to bottom, white 50%, black 50%);

}





.sec7container{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--worddesign-color);
  border-radius: 25px;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;

}
#sec7button{
  background-color: black;
  color: var(--worddesign-color);
}
#sec7button:hover{
  background-color: white;
  color: black;
}
.s7img-left img{
 
  border-radius: 150px;
  border: 3px solid black;
}
.s7left-1{
 position: absolute;
  width: 50px;
  top: 50px;   
  left: 100px;  
  z-index: 1000;
}
.s7left-2{
  width: 35px;
position: absolute;
  top: 95px;   
  left: 180px;  
  z-index: 999;

}
.s7left-3{
 position: absolute;
  width: 50px;
  top: 120px;   
  left: 100px;  
  z-index: 998;
}
.s7img-right img{
 
  border-radius: 150px;
  border: 3px solid black;
}
.s7right-1{
  position: absolute;
  width: 50px;
  top: 180px;   
 right: 100px;  
  z-index: 997;
}
.s7right-2{
 width: 35px;
position: absolute;
  top: 230px;   
 right: 50px;  
  z-index: 996;
}
.s7right-3{
position: absolute;
  width: 50px;
  top: 270px;   
 right: 100px;  
  z-index: 995;

}

.sec8{
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: black;
}


.end:hover{
color: var(--worddesign-color) !important;
}



footer{
  background-color: black;
  padding-top: 100px;
  padding-bottom: 100px;
}
.footer-text{
  color: gray;
}
.UiCore{
  color: #563d7c;
}
.footer-color{
  color: gray;
}

.arrow1{
  z-index: 754;
}



@media (max-width: 768px) {
  .sec4text {
    background: none ;
   background-color: var(--features-ground);
   margin-bottom: 30px;

  }
  .s7left-1{
 position: absolute;
  width: 50px;
  top: 20px;   
  left: 20px;  
  z-index: 1000;
}
.s7left-2{
  width: 35px;
position: absolute;
  top: 60px;   
  left:100px;  
  z-index: 999;

}
.s7left-3{
 position: absolute;
  width: 50px;
  top: 90px;   
  left: 20px;  
  z-index: 998;
}
.s7img-right img{
 
  border-radius: 150px;
  border: 3px solid black;
}
.s7right-1{
  position: absolute;
  width: 50px;
  top: 180px;   
 right: 70px;  
  z-index: 997;
}
.s7right-2{
 width: 35px;
position: absolute;
  top: 230px;   
 right: 20px;  
  z-index: 996;
}
.s7right-3{
position: absolute;
  width: 50px;
  top: 270px;   
 right: 70px;  
  z-index: 995;

}

}