courses.css

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   width:auto;
   background-color: rgb(244, 244, 244); /* Light grey background */
}
.head{
   width:100%;
}
header {
   background: rgb(0, 123, 255); /* Blue background */
   color: white;
   padding: 15px 20px;
   text-align: center;
   /* width:auto; */
}
/* Navigation styling */
nav {
   background-color: rgb(22, 31, 81);
   color: rgb(255, 255, 255);
   padding: 1em;
   /* position: fixed; */
   width: auto;
   height:auto
 
   
   
}
.navall {
   position: sticky;
}

nav ul {
   list-style: none;
   display: flex;
   
}

.navspecial {
  
   background-color: rgb(98, 112, 190);
   padding: 9px;
   border-radius: 20px;
   margin-right: 30px;
   margin-left: 15px;

}
.navend {
   display: flex;
   margin-left: 43%;
   justify-content: space-evenly;
   
}
.navend li a {
   background-color: rgb(98, 106, 190);
   padding: 9px;
   border-radius: 20px;
   margin-right: 15px;
   
   
}


nav a {
   color: white;
   margin: 0 10px;
   text-decoration: none;
   font-weight: bold;
   transition: color 0.3s;
}

nav a:hover {
   color: rgb(224, 224, 224); /* Light grey on hover */
}

main {
   padding: 20px;
   max-width: 800px;
   margin: auto;
   background-color: white; /* White background for main content */
   border-radius: 5px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.course {
   border: 1px solid rgb(0, 123, 255); /* Blue border for courses */
   border-radius: 5px;
   margin: 10px 0;
   padding: 15px;
   background-color: rgb(249, 249, 249); /* Light grey for course cards */
   transition: transform 0.2s, box-shadow 0.2s;
   /* height: 50px;
   width:50px;
   display:flex; */
}

.course:hover {
   transform: scale(1.02);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
}

input[type="checkbox"] {
   margin-right: 10px;
}
/* Blue button */
button {
   background-color: rgb(0, 123, 255); 
   color: white;
   border: none;
   padding: 10px 15px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s;
}

button:hover {
   background-color: rgb(0, 86, 179); /* Darker blue on hover */
}

footer {
   text-align: center;
   padding: 10px 0;
   background: rgb(0, 123, 255); /* Blue footer */
   color: white;
   /* position: fixed; */
   width: auto;
   /* bottom: 0; */
   margin: 20px;
}