/*                                                              */      
/*                   skjástærðir: allar                         */
/*                                                              */

.back-button {
   width: 30px;
   margin-top:10px;
}
.menu-icon {
    width: 50px;
}

/*                                                              */      
/*           skjástærðir: Tablet and desctop                    */
/*                                                              */
@media (min-width: 768px) {
.header-box {
    width: 500px;
    height: 55px;
    background-color: black;
    box-shadow: 0px 5px 10px #D09E59;
    margin: 0 auto; /* Horizontally center the box */
    display: flex; /* Flexbox to contain the inner boxes */
	justify-content: space-between;
    position: relative; /* Keep it relative by default */
    top: 0; /* Positioned at the top */
}

.header-box-left,
.header-box-middle,
.header-box-right {
    height: 100%;
    padding: 2px;
    box-sizing: border-box; /* To make sure padding doesn't increase total width */
}

.header-box-left {
    background-color: black;
    width: 10%;
    text-align: left; /* Content aligned to the left */
}
.header-box-left img {
    width: 50px;
}

.header-box-middle {
    width: 80%;
    color:#D09E59; 
    text-align: center; /* Content centered */
}
.header-box-middle img {
    margin-top: 0px;
    height: 150px;
    width: auto; /* To maintain the aspect ratio */
}
.header-box-right {
    background-color: black;
    width: 10%;
    text-align: right; /* Content aligned to the right */
  }
}
/*                                                              */      
/*                  skjástærðir:  Mobile                        */
/*                                                              */

@media (max-width: 767px) {
.header-box {
    width: 100%;
    height: 55px;
    background-color: black;
    box-shadow: 0px 5px 10 px #D09E59;
    margin: 0 auto; /* Horizontally center the box */
    display: flex; /* Flexbox to contain the inner boxes */
    justify-content: space-between;
    position: relative; /* Keep it relative by default */
    top: 0; /* Positioned at the top */
}

.header-box-left,
.header-box-middle,
.header-box-right {
    height: 100%;
    padding: 2px;
    box-sizing: border-box; /* To make sure padding doesn't increase total width */
}

.header-box-left {    
    position: relative; 
    background-color: black;
    width: 15%;
    text-align: left; /* Content aligned to the left */
}
.header-box-left img {
    width: 50px;
}
.header-box-middle {
    background-color: black;
    width: 70%;
    color:#D09E59; 
    text-align: center; /* Content centered */
}

.header-box-right {
    background-color: black;
    width: 15%;
    text-align: right; /* Content aligned to the right */
  }
}                                      /*END mobile phone*/