.overlay {
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 2;
   top: 0;
   left: 0;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0, 0.9);
   overflow-x: hidden;
   transition: 0.5s;
 }
 
 .overlay-content {
   position: relative;
   top: 25%;
   width: 100%;
   text-align: center;
   margin-top: 30px;
 }
 
 .overlay a {
   padding: 8px;
   text-decoration: none;
   font-size: 36px;
   color: #818181;
   display: block;
   transition: 0.3s;
 }
 
 .overlay a:hover, .overlay a:focus {
   color: #f1f1f1;
 }
 
 .overlay .closebtn {
   position: absolute;
   top: 20px;
   right: 45px;
   font-size: 60px;
 }
 
 @media screen and (max-height: 450px) {
   .overlay a {font-size: 20px}
   .overlay .closebtn {
   font-size: 40px;
   top: 15px;
   right: 35px;
   }
 }

/* HEADER */
.navbar {
   display: grid;
   overflow: hidden;
   height: auto; /* Change to auto for responsive height */
}
.navbartest{
   display: grid;
   overflow: hidden;
   height: auto; /* Change to auto for responsive height */
   position: fixed;
   top: 0%;
   width: 90%;
   background-color:#12111f;
   z-index: 1;
   padding-top: 3%;
}
 .navlogo{
   height: 9em;
   grid-column: 1 / span 3;
} 
/* HomeButton */
.navlogobutton {
   background: url("../src/png/SOLUTIONSTAILOREDTOYOURBUSINESSNEEDS2.png");
   width: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   height: 100%; 
   cursor: pointer;
   text-decoration: none;
   max-width: 100%; /* Ensure it doesn't overflow */
   border-style: none; 
}

/* Menue */
.btn-group {
   display: flex;
   justify-content: space-between; /*Space between buttons  */
   width: 100%;
   display: block;
   float: right;
   text-align: right;
   grid-area:  2 / 4 / 2 / 4;
}

.btn-group button {
   background-color: transparent;
   border-style: none;
   cursor: pointer;
   width: 100%;
   height: auto; /* Responsive height */
   text-align: center;
   font-size: 1.7em;
   color: #ffffff;
}
/* Menü-Span */
.btn-group span p{
   display:block;
   width: 100%;
   height: auto;
   text-align: right;
}
@media only screen and (min-width: 1300px) {
   .btn-group button{
       width: 20%;
   }
   .btn-group span{
      display: none;
   }
   
}
@media only screen and (max-width: 1920px) {
   .btn-group button{
       display: none;
   }
   .btn-group span {
     float: right;
     display: block;
     font-size:30px;
     cursor:pointer
   }
}

.btn-group button:hover {
   background-color: #42b8fd;
   height: auto; /* Responsive height */
   border-radius: 0; /* Remove border-radius */
}
.breadcrumps{
   display: flex;
   align-items: end;
   width: 100%;
   grid-area:  2 / 1 / 2 / 1;
   
}
/* Titlevideo */
.navbar img {
   /* padding-top: 2%; */
   width: 100%;
   height: auto;
   grid-column:  1 / span 3;
}