html {
   scroll-behavior: smooth;
   user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   font-size: 18px;
   font-weight: 500;
   opacity: 1;
   line-height: 15px;

 }

 /* Color the background and add some space to the sides of the main column. */
 .container-fluid {
   background-color: #F8B003;
   /* We use !important to override the padding setting that Bootstrap already put for the container-fluid class. */
   padding-left: 10% !important;
   padding-right: 10% !important;
 }

 /* Color the main column background white. */
 .col {
   background-color: white;
 }

 .navbar {
   box-shadow: 0px 4px 8px rgba(17, 17, 17, 0.2);
 }

 .navbar-light .navbar-nav .nav-link {
   font-size: 0.89rem !important;
   color: black !important;
   font-weight: 500 !important;
   margin-right: 10px !important;
 }

 .navbar-light .navbar-nav .nav-link:hover {
   color: goldenrod !important;
 }

 .navbar-brand {
   font-size: 1.085rem !important;
   font-weight: bold !important;
 }

 /*For nav bar icon*/
 .navbar-toggler {
   font-size: 1.23rem !important;
 }

 .navbar-toggler>.close-icon {
   display: block !important;
   width: 1.7em !important;
   height: 1.8em !important;
   background: no-repeat center center !important;
   background-size: 100% 100% !important;
   background-image: url("/images/close.png") !important;
   color: black !important;
 }

 .navbar-toggler.collapsed>.close-icon,
 .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
   display: none !important;
 }

 .navbar-light .navbar-toggler-icon {
   background-image: url("/images/open.png") !important;
 }

 .navbar-light .navbar-toggler {
   border: none !important;
   color: black !important;
 }

 .navbar-light .navbar-toggler:focus {
   outline: none !important;
 }

 .overlay {
   position: absolute;
   background-color: black;
   opacity: 50%;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }

 #home {
   padding: 20%;
   background-image: url("media/pavement.jpg");
   background-size: cover;

 }

 #contact {
   background-image: url("images/Term_1.jepg");
   height: 350px;
   background-size: cover;
   background-repeat: no-repeat;
 }

 .button {
   display: flex;
   flex-direction: column;
 }

 .one {
   float: left;
 }

 .buton {
   display: flex;
   flex-direction: row;
   width: 100%;
 }

 .button1 {
   margin-left: 40px;
 }

 #quote {
   user-select: none;
   -ms-user-select: none;
   -webkit-user-select: none;
   height: 150px;
   background-color: black;
   color: wheat;
   justify-content: center;
   align-content: center;
 }

 .sub {
   font-size: 2rem;
   color: #000000;
   text-transform: uppercase;
   margin-top: 30px;
   text-align: center;
 }

 .subjects {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .button {
   display: inline-block;
   padding: 12px 24px;
   border: none;
   border-radius: 6px;
   background-color: #2196f3;
   color: #ffffff;
   font-size: 1.4rem;
   text-decoration: none;
   text-align: center;
   transition: background-color 0.3s ease;
   margin-bottom: 15px;
   width: 300px;
   max-width: 80%;
 }

 #subjects {
   position: relative;
   background-image: url("images/wave\(3\).jpg");
   height: 250px;
   background-size: cover;
 }

 #subjects>div {
   width: 100%;
   height: inherit;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
   align-items: center;
   position: absolute;
 }

 #subjects>div>h5 {
   text-align: center;
   color: #F8B003;
   width: 95%;
   font-size: 20px;
   margin-top: 30px;
   font-style: bold;
 }

 #subjects>div>p {
   text-align: center;
   color: white;
   width: 80%;
   font-style: bold;
 }

 #subjects>div>button {
   align-self: center;
   padding: 8px 16px;
   border: 1px solid transparent;
   color: white;
   background-color: goldenrod;
   border-radius: 25px;
   font-size: 15px;
   cursor: pointer;
   box-shadow: 0px 4px 8px rgba(17, 17, 17, 0.2);
 }

 #subjects>div>button>a {
   color: white;
 }

 #subjects>div>button>a>i {
   text-align: center;
   margin-left: 6px;
 }

 #subjects>div>button:hover {
   background-color: white;
 }

 #subjects>div>button:hover a {
   color: #F8B003;
   text-decoration-line: none;
 }


 #subject1 {
   position: relative;
   background-image: url("images/biology.jpeg");
   height: 250px;
   background-size: cover;
 }

 .bio-ss3 {
  background-image: url("/images/bio-third.webp");
 }

 .button:hover {
   background-color: #1565c0;
 }

 .button a {
   color: #ffffff;
   text-decoration: none;
 }

 .button:hover a {
   color: #ffffff;
   text-decoration: none;
 }

 .topics {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
 }

 .topics>a:hover,
 .topics>a>p:hover {
   text-decoration-line: none;
 }

 .topics>a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
   width: 75%;
   margin: 20px 0;
   background-color: whitesmoke;
   border-radius: 15px 20px 0px 0px;
   box-shadow: 0px 4px 8px rgba(17, 17, 17, 0.2);
   height: fit-content;
 }

 .topics>a>img {
   align-self: center;
   padding: 10px 0;
   cursor: pointer;
 }

 .topics>a>p {
   align-self: center;
   text-align: center;
   width: 100%;
   color: #010b14;
   font-weight: 500;
   background-color: white;
   padding: 20px;
   cursor: pointer;
   margin-bottom: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 @media screen and (min-width: 600px) {
   .topics {
     flex-direction: row;
   }

   .topics>a {
     margin: 30px 50px;
     width: 40%;
   }

   .overlay {
     opacity: 55%;
   }

   #subjects {
     height: 500px;
   }

   #subject1 {
     height: 500px;
   }
 }

 @media screen and (min-width: 768px) {
   .nav {
     width: 100%;
   }

   .navbar-light .navbar-nav .nav-link {
     margin: 0 -4px !important;
   }

   .topics {
     flex-direction: row;
   }

   .topics>a {
     margin: 30px 50px;
     width: 32%;
   }

   #subjects>div>h5 {
     font-size: 40px;
   }

   #subjects>div>p {
     display: block;
     width: 70%;
     font-size: 30px;
   }

   #subjects>div>button {
     font-size: 25px;
     padding: 12px 24px;
     border-radius: 32px;
     margin-top: 10px;
   }

 }

 @media screen and (min-width: 1024px) {
   .navbar-light .navbar-nav .nav-link {
     margin: 0 10px !important;
   }

   #subjects>div>p {
     width: 50%;
   }
 }

 @media screen and (min-width: 1280px) {
   .nav {
     width: auto;
   }

   .topics>a {
     margin: 30px 50px;
     width: 20%;
   }

   #subjects {
     height: 500px;
   }

   #subjects>div>p {
     width: 40%;
   }
 }