html,body{ 
    width:100%;height:100%;margin:0px auto -10em; padding:0px; padding-bottom: 0px; 
    background-color:#f8f9fa; color:#000000 !important; 
    font-size:1em !important; font-family: 'Segoe UI', sans-serif; 
    display: flex;
    flex-direction: column; }
main {
      flex: 1;
      width: 100%;
      margin: 0%;
      padding: 0;      
      flex-direction: column;
      background-color:#f8f9fa;
    }
#headerimage{width: 100%; height:10%; border: 0px; margin:0px; padding: 0px;z-index: -1;}
#pageTop{width:100%; margin: 0px; background-color: #0D6EFD;  padding: 0px;}
#pageMid{width:100%; margin:0; margin-top:0; padding-bottom:60px; padding-left:20px; padding-right:20px;  padding-top:5px; }
#pageBtm, footer {width:100%; bottom:0; left:0;right:0; text-align:center; background-color:#243d57; color:#ffffff;}

h1{text-align: center; margin-bottom: 0px; font-size: 20px;}
#dropbtn { display: none;}
caption {font-size: 20px; font: dialog;}
.section-title  {    font-size: 2rem; margin-bottom: 1rem; }
.course-card { border: 1px solid #ddd; border-radius: 10px; padding: 20px; transition: 0.3s; }
.course-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
@media ( max-width: 576px )  {    
#dropbtn {display: block; }
.show {
    display: block;
}
h1{text-align: center; margin-bottom: 0px; font-size: 10px;}
#pageBtm, footer { width: 100%; bottom:0; left:0;right:0; text-align:center; background-color:#243d57; color:#ffffff; font-size: 10px; }
#pageMid{width:100%; margin:0; margin-top:0; padding-bottom:60px; padding-left:20px; padding-right:20px;  padding-top:5px; }
#pageTop{width:100%; margin: 0px; background-color: #0D6EFD;  padding: 0px;}    
}