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);
 }

 /* Bold the navbar's brand and put spacing on its left so it shifts right. */
 .navbar-brand {
   font-weight: bold;
 }

 #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;
 }

 .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%;
 }

 #subjects2 {
  position: relative;
   background-image: url("images/qa.webp");
   height: 250px;
   background-size: cover;
 }

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

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

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

 .topic {
   background-color: skyblue;
   text-align: center;
   width: 50%;
 }

 @media screen and (min-width: 600px) {
   #subjects2 {
     height: 500px;
   }

   #subject1 {
     height: 500px;
   }
 }