style.css

/* Navbar */
@media (min-width: 991.98px) {
    main {
      padding-left: 240px;
    }
  }
  
  /* Sidebar */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 58px 0 0; /* Height of navbar */
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
    width: 240px;
    z-index: 600;
  }
  
  @media (max-width: 991.98px) {
    .sidebar {
      width: 100%;
    }
  }
  .sidebar .active {
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  }
  
  .sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto; 
  }
  /*  */

/* Navbar MSG */
#sidebar-head1{
    font-size: 20px;
    font-family:'Mitr', sans-serif;
    width: 100%;
    color:#014672;
}
#repair-msg{
    font-size: 15px;
    font-family: 'Itim', cursive;
    width: 100%;
    color:dimgray;
}
/* FOllowwork */
#followwork_head{
  font-size: 30px;
  text-align: left;
  font-family: 'Itim', cursive;
  color:#014672;
  margin-left: 4px;
}
#followwork_detail{
  font-size: 15px;
  text-align: left;
  font-family: 'Itim', cursive;
  color:black;
  margin-left: 4px;
}
/* Banner */
#banner-image{
    width: 100%;
    height: 50vh;
    background-image: url('img/building-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#head-banner-section{
    font-size: 30px;
    font-family:'Mitr', sans-serif;
    width: 100%;
    color:coral;
}
#sub-banner-section{
    font-size: 15px;
    font-family:'Mitr', sans-serif;
    color: gray;
}
/*  */
/* Service */
#service-head-section{
  font-size: 40px;
  font-family:'Mitr', sans-serif;
  width: 100%;
  color: #014672;
}
#service-subhead-section{
  font-size: 15px;
  font-family:'Mitr', sans-serif;
  color: orange;
}
#service-cardhead-section{
  font-size: 20px;
  text-align: left;
  font-family: 'Chakra Petch', sans-serif;
  color:black;
}
#service-cardsubhead-section{
  font-size: 12px;
  text-align: left;
  font-family: 'Itim', cursive;
  color:black;
  margin-left: 4px;
}
#service-detail-head-section{
  font-size: 40px;
  text-align: center;
  font-family:'Mitr', sans-serif;
  width: 100%;
  color: #014672;
}
#service-detail-img-section{
  width: 50%;
  justify-content: center;
}

/*  */
/* Profile */
#profile-msg{
    font-size: 15px;
    font-family: 'Noto Sans Thai Looped', sans-serif;
    color: gray;
}
/*  */
/* History */
#history-head{
  font-size: 40px;
  font-family:'Mitr', sans-serif;
  width: 100%;
  color: black;
}
#history-subhead{
  font-size: 20px;
  font-family:'Mitr', sans-serif;
  width: 100%;
  color: gray;
}
/*  */
/* Login */
#login-head{
    font-size: 30px;
    font-family:'Mitr', sans-serif;
    width: 100%;
    color: black;
}
#login-subhead{
    font-size: 12px;
    font-family:'Mitr', sans-serif;
    width: 100%;
    color: gray;
}
#login-email{
    font-size: 15px;
    font-family:'Mitr', sans-serif;
    width: 100%;
    text-align: left;
    margin-top: 3px;
    color: black;
}
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 4px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
/*  */

/* Recommend-Section */
#recommended-section{
    width: 100%;
    height:max-content;
    background-color:rgba(229,234,239,.5);
    border-radius: 20px;
}
#recommended-head-section{
    font-size: 40px;
    font-family:'Mitr', sans-serif;
    width: 100%;
    color: #014672;
}
#recommended-subhead-section{
    font-size: 20px;
    font-family:'Mitr', sans-serif;
    color: orange;
}
/*  */