html,
body {
   padding: 0;
   margin: 0;
   font-family: Roboto, sans-serif;
   width: 100%;
   height: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.topBar {
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.05)
}

.topBarContainer {
   display: flex;
   justify-content: space-evenly;
   /* align-items:end */
}

.logo {
   display: flex;
   justify-content: center;
   align-items: center;
}

.menu {
   display: flex;
}

.menu-item {
   padding: 2em 0.5em;
   font-weight: bold;
}

.menu-item:hover{
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05)
}

.menu .menu-item{
   z-index: 9999;
   background-color: white;
}

a {
   color: inherit;
}

a,
a:hover,
a:focus,
a:active {
   text-decoration: none;
}

/* footer */
.footer{
   background-color: rgb(54, 154, 254);
   color:white;
   font-size: large;
   height: 70px;
   display: flex;
   width: 100%;
   justify-content: center;

   margin-top: auto;

   /* position: absolute; */
   /* bottom: 0; */
   /* margin-top: 5em; */
}

.ham{
   display: none;
   justify-content: center;
   align-items: center;
}

.ham span{
   font-weight: bold;
   padding-right: 0.5em;
}

.close{
   display: none;
   font-weight: bold;
   padding-right: 0.5em;
   justify-content: end;
}
.close span{
   font-weight: bold;
   padding-right: 0.5em;
   padding: 0.5em 0;
   margin-right: 0.5em;
}

.tel{
   bottom: 1em;
   right: 1em;
   position: fixed;
}

code{
   background-color: rgb(61, 61, 61);
   color: white;
}

.h1-contact{
   text-align: center;
   color: white;
   background-color: dodgerblue;
   padding: 1em 0;
   margin: 0;
}

.widget-wrapper {
   background-color: rgb(243, 248, 253);
   padding-top: 4em;
   padding-bottom: 2em;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}