@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
body{
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    background-color: #151515;
    color: #ffffff;
}

/*-- navbar style --*/
/* .animate__animated.animate__bounceInUp{
    -webkit-animation-duration: 5s;
} */
.navbar{
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(21, 21, 21, 1)!important;
    opacity: 10;
    
}
.navbar-nav li{
    padding:.7rem; 
    
}
.navbar-link {
    color: white;
    padding-top: .8rem;
}

.navbar-link:hover{
 color: #1ebba3;   
}

/*   image slider */
.carousel-item{
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100%;
}
.carousel-caption{
   position: absolute;
    right: 70%;
    top: 30%;
    text-transform: uppercase;  
}
.carousel-caption2{
    position: absolute;
     right: 20%;
     left: 40%;
     top: 38%;
     text-transform: uppercase;  
 }
.carousel-caption h1,.c2Header{
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .5rem black;
    color: white;
}
.carousel-caption h3{
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
     text-shadow: .1rem .1rem .5rem black;
}
.carousel-caption a{
    margin-top: 1.0rem;
     border-width: medium;
    border-radius: 0;
    font-size: 1.1rem;
    
}
.jt{
    font-size: 3.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3rem;
     color: #000000;
}
.card-img-top {
    margin: 1.1rem;
}
.card-img-top:hover{
    transition-duration: 1s;
   transform: scale(1.1,1.1);
    
}
.mypar{
    padding-top: 0.08rem;
    letter-spacing: 0.08rem;
    font-size: 1.2rem;
    
    
}

.skillbox{
    box-sizing : border-box;
    width: 100%;
    margin: 20px 0;
    
}
.skillBox p{
    
    
    text-transform: uppercase;
    font-weight: bold;
    
}
.skillBox p:nth-child(2)
{
    float: right;
    position: relative;
    top: -35px;
}
.skillBox:hover{
  
    width: 110%;
    
    border: 5px #11f111;
    
}
.skill{
   background: #ffffff;
    
    box-sizing: border-box;
    border: 1px solid #505123;
    border-radius: 2px;
}
.skillLevel{
    background: #B2AB8C;
    width: 100%;
    height: 10px;
}
.newDiv{

margin: 5px;
height:200px;

background-color: #97a19a;
text-align: center;
font-size: large;

}
.card,.jumbotron,.edudiv{
    background-color: #151515;
    color: #ffffff;
}
logo{
    background: #ffffff;
    
}
.col-md-3:hover{
 opacity: 0.5;
 background-color: #000043;  
}
.col-md-3{
    opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

footer{
    background: #505962;
    
}
@media only screen and (max-width: 767px){
    
    .carousel-caption{
        position: absolute;
         right: 70%;
         top: 58%;
         text-transform: uppercase;  
     }
     .carousel-caption2{
         position: absolute;
          right: 20%;
          left: 40%;
          top: 78%;
          text-transform: uppercase;  
      }
    
.carousel-caption h1{
    font-size: 2.3rem;

    letter-spacing: .3rem;
   
}
.carousel-caption h3{
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .3rem;
     text-shadow: .1rem .1rem .5rem black;
}
.carousel-caption a{
    margin-top: 1.0rem;
   
    font-size: 1rem;
    
}
.front,
.back {
  backface-visibility: hidden;
  transition: transform 0.6s linear;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.14);
}
/* product frontside */
.front {
  transform: perspective(600px) rotateY(0deg);
}
/* product backside */
.back {
  position: absolute;
  background: #000043;
  height: 100%;
  width: 100%;
  padding: 10px;
  transform: perspective(600px) rotateY(180deg);
}
.back-content {
  height: 100%;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50px;
  left: 0;
}
        
}