.header-fixed {
 --fallback-header-height: 75px;
 --fallback-header-max-height: 75px; 
  position: fixed;
  height: var(--header-height, var(--fallback-header-height));
max-height:   var(--header-max-height, var(--fallback-header-max-height));
  top: 0;
  left: 0;
  z-index: 1000; /* Ensure it stays on top of other content */
  /*background-color:rgba(255, 100, 100, 0.5);*/
  background-color:var(--theme-bg-color-dark-blue, rgba(255, 100, 100, 0.5));
  width:100%;
}



.header {
  top: 18px;
    height: var(--header-height, var(--fallback-header-height));
  width: 100%;
}


.header img {
  float: left;
  width: 100%;
  /* height: 100%; */
  height: var(--header-height, var(--fallback-header-height));
  background: #555;
}

/*
.header::after {
  content: "";
  display: table;
  clear: both;
}
*/

/*
.header div {
  position: relative;
  background-color: #e5f5e5;
  padding:15px;
  text-align:center;
}
*/
 /* Have td height =1ps, this will make the div to fill td fully */

.header div {
  top: 18px;
}

.header-title {
  position: relative;
  top: 18px;
  left: 10px;
    
  /* Other content styling */
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
  display: inline-block;
  text-align:center;
  padding:15px;
  background-color: #e5f5e5;
}

/* Add to your stylesheet, targeting any element with an ID */
/*
#divPageContent,  #page2, #page3 , #title1{
   padding-top: 120px;  
   margin-top: -120px;  
  scroll-padding-top: 220px;
}
*/

footer {
        background-color: #666;
        color: #fff;
        padding: 1px 0;
        text-align: center;
    }