#alu-img1{
  /* The image used */
 
  mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);

  /* Full height */
 
  width: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
    

} 

#nav1{
    background-color:#093473;
}

.nav-link{

        
       text-transform: uppercase;
       font-weight: 400;
       font-size: 14px;
    text-align: center;
       

}
.dropdown-menu{
    background-color:#093473;
}
.dropdown-menu :hover{
    background-color:#768294;
   
}
.nav-link:hover{
    background-color:#768294;
    border-radius: 3px;
    
}

#card-body1:hover{
    background-color:#768294;
    transition: 0.5s;
    color:white;
    
  
}
#vision-mission-goals{
    text-transform: uppercase;
}

hr {
    border: none;
    height: 2px;
    background-color: rgb(38, 0, 99); /* Modern Browsers */


}
.dropdown:hover>.dropdown-menu {
    display: block;
    transition: 0.5s;
  }
  #courses{
    background-color:#093473;
    border-top:7px solid rgba(224, 63, 63, 0.856);
  }

 #arrow :hover{
    
    transform: rotateZ(50deg);
    transition:0.5s;
    cursor:pointer;

}
#jsslogo{
    width:200px;
    height: 230px;
    box-sizing: border-box;
    border:2px solid rgb(29, 7, 107);
    padding:6px;
   border-radius:20px;
    

    
}
#stc-logo{
    width:130px;
    height: 130px;
    margin-top: 10px;
   
   border-radius: 30px;
    padding:6px;
   
}

  

  
  /* Position text in the middle of the page/image */
  .container-form{
      position: absolute;
      background: rgb(0,0,0,0.6);
  }
  #avatar{
  /* The image used */
   /* The image used */
   background-image: url("../images/col1.png");
   mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
 
   /* Full height */
   
 
   /* Center and scale the image nicely */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
  
  } 
  
  
#mySidenav a {
  position: fixed; /* Position them relative to the browser window */
  right: -65px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 10px  5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  right: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
  top: 350px;
   background-color:#768294;
}