#container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: auto;
  width: 100%;
  height: content;
  max-width: 1600px;
  
}



/* =========header section */
header{
  display: flex;
  justify-content: space-evenly;
  align-content: space-around;
  flex-flow: row wrap;
  position:relative;
  
}
nav{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-flow: row wrap;
  gap: 1em;

}

.Logo{


  max-height: 17vh;

}
.Logo img{
  width:100%;
   display: block;
   margin: auto;
}
/* =====header section end */

/* ======middle section*/
/*container*/
#middlecontainer {
  flex:1;
  display: flex;
  gap: 10px;
  align-items: start;

}
.box{
    display: flex;
  flex-direction: column;
}
/*sections*/
.section{
flex: 1;
}

/* =====middle section end */

 /* footer section */

footer{
  height: 90px;
  text-align: center;
  position:relative;
}
/* footer section end*/
/* responsive layout*/
@media (max-width: 900px){
 #container{
margin: 0em;
}

#middlecontainer{
flex-direction: column;
gap: 5px;
 align-items: stretch;
}

}
/*<main id="container">
  <header>
<div class="Logo">
  <img src="/assets/common/Logo2.png" alt="Logo">
</div>
<nav>
</nav>

  </header>
<div id="middlecontainer"> 
  <section class="SideL">  
  </section>
<section class="Main">
  </section>
<section class="SideR">
  </section>
  </div> 
  <footer> 
  </footer>
</main>
*/