h1,h2,h3,h4,h5,h6{
  color:#00396F;
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

._now, ._next, ._later{
  font-size:.7rem;
  text-algin:center;
  display:flex;
  color:#00C389;
  padding:1rem 0 1rem .5rem;
  vertical-align:middle;
}
._next{
  color:#89CEE3;
}
._later{
  color:#FF8D6D;
}

.back_btn button{
  color:#00396F;
  background:white;
  padding:.5rem 1rem .5rem 1rem;
  margin-top:1rem;
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
  border-radius:5px;
  border:1px solid rgb(0 57 111 / .25);
}
.back_btn:hover button{
  color:white;
  background:#00396F;
  
}
.header{
  background-size: cover;
  background-position:center top;
  background-repeat: no-repeat;
  height: 200px; /* you can adjust the height as per your requirement */
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

.header h1{
  padding:2rem;
  align-items:center;
  text-align:center;
  border-bottom: 1px solid rgb(0 21 40 / 4%);
}

.cmms-inner{
background-image: url(../images/cmms.jpg);
}
.permit-inner{
background-image: url(../images/permit.jpg);
}
.website-inner{
background-image: url(../images/website.jpg);
}
.erp-inner{
background-image: url(../images/erp.jpg);
}

.spacer{
  padding-top:2rem;
}
.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table thead tr th {
  background-color: #f1f1f1;
  text-align: left;
  padding: 12px;
}

.responsive-table tbody tr td {
  border-bottom: 1px solid #ddd;
  padding: 12px;
}

.accordion {
  background-color: #ffffff;
  border: 1px solid rgb(0 57 111 / .25);
    border-radius:5px;
  box-shadow: 1px 0 6px rgba(0, 0, 0, 0.2)  ; 
  -webkit-box-shadow: 1px 0 6px rgba(0, 0, 0, 0.2)  ; 
  -moz-box-shadow: 1px 0 6px rgba(0, 0, 0, 0.2)  ; 
  color: #00396F;
  cursor:pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  transition: 0.4s;
  margin:0 0 .9rem 0;
  font-weight:500;
}

.active, .accordion:hover {
  background-color: #00396F;
  color:#ffffff;
}
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  font-size:16px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.scroll-top{
 text-align:center;
  align-content:center;
  display:block;
  font-weight:500;
  margin: 0 auto;
  width:100%;
  padding:1rem;
  border-top:1px solid #ffffff33;
}

footer{
  color:#ffffff !important;
  background:#00396F;
  margin-top:2rem;
  text-transform:uppercase;
  position: relative;
  width: 100%;
  bottom: 0;
  width: 100%;
}

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

footer a:hover{
  color: #00D08D !important;
  text-decoration:none;
}

#footerLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

#footerLinks a {
  font-weight:500;
  display: block;
  padding: 10px;
  margin: 10px;
  text-align: center;
  text-decoration: none;
}


@media (max-width: 768px) {
  #footerLinks {
    flex-direction: column;
    align-items: center;
  }

  #footerLinks a {
    margin: 5px;
  }
}

@media screen and (max-width: 767px) {  
.responsive-table thead {
display: none;
}

.responsive-table tbody tr td {
display: block;
text-align: right;
}

.responsive-table tbody tr td:before {
content: attr(data-th);
display: block;
text-align: left;
}