.header-top-compution{width: 100%; display: flex; align-items: center; justify-content: space-between;
 background: linear-gradient(135deg, rgb(0, 0, 0), rgb(139, 0, 0) 80%, rgb(255, 255, 0) 100%);
   padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); position: fixed; top: 0; z-index: 999;
}

.header-top-compution .parte-one{display: flex; align-items: center;}

.header-top-compution .parte-one .icon{width: 50px; height: 50px; border: 2px solid rgb(255, 255, 0); border-radius: 100px;
background-image: url("../icon/logo-ao.png"); background-size: 70%;}
.header-top-compution .parte-one h2{font-size: 1.3rem; color: #fff;  margin-left: 10px;}

.header-top-compution .parte-two{display: flex;}

.header-top-compution .parte-two .linha1 .separation{display: flex;}
.header-top-compution .parte-two .linha1 .separation a:nth-of-type(2){margin-left: 16px;}

.header-top-compution .parte-two .linha2{margin-left: 10px;}

.header-top-compution .parte-two a{font-weight: 600;}

.header-top-compution .parte-thrue button{padding: 6px 16px; border: 2px solid #ffffff; display: flex; border-radius: 26px;}
.header-top-compution .parte-thrue button .icon{width: 25px; height: 25px; margin-right: 6px; background-image: url("../icon/do-utilizador.png");

}

.header-top-compution .parte-thrue button h2{color: #ffffff;}




 @media (max-width: 770px) {

     .header-top-compution{flex-direction: column;}
     .header-top-compution .parte-one{width: 100%;}
    
     .header-top-compution .parte-two{width: 100%; padding-top: 12px;}


     .header-top-compution .parte-thrue{display: none;}
 .header-top-compution .parte-thrue button{font-size: 0.9rem}
 .header-top-compution .parte-thrue button .icon{width: 20px; height: 20px;}


    header{margin-top: 150px;}


 }