header{
    display: flex;
    position: fixed;
    z-index: 99;
    flex-direction: column;
    width: 100dvw;
    height: 20dvw;
    font-family: "Montserrat";
    font-weight: 600;

    /* Mobile (horizontal) */
    @media(max-height: 600px) and (orientation: landscape){
        height: 10dvw;
        position: fixed;
    }

    /* Tamanho médio (tablets) */
    @media (min-width: 768px) and (min-height: 600px){
        height: 12dvh;
        position: fixed;
    }
  
    /* Tamanho médio (Desktop) */
    @media (min-width: 1000px) {
        height: 17dvh;
        position: fixed;
    }
}

/* Header: upper section */
.contact-media--section{
    display: flex;
    flex: 1;
    background-color: #e3d0c2;
    justify-content: space-between;
    padding: 0% 2% 0% 0%;
}

/* Header: lower section */
.nav-bar--section{
    display: flex;
    flex: 2;
    background-color: #fe6300;
    justify-content: space-between;
    padding: 0% 2% 0% 2%;
}


/* section which contains the social media icons */
.icon-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 3px;
    width: 40dvw;
    font-size: 1.8dvh;

    /* Mobile (horizontal) */
    @media(max-height: 600px) and (orientation: landscape){
        width: 20dvw;
        font-size: 2dvw;
    }

    /* Tamanho médio (tablets) */
    @media (min-width: 768px) and (min-height: 600px){
        width: 30dvw;
        font-size: 22px;
    }
  
    /* Tamanho médio (Desktop) */
    @media (min-width: 1200px) {
        width: 20dvw;
        font-size: 25px;
    }

}

/* container for links "convenios", "seja um franqueado" and "trabalhe conosco"*/
.header--upper-bar{
    display: none;
    align-items: center;

    @media(max-height: 600px) and (orientation: landscape){
        display: flex;
        justify-content: space-between;
        width: 35dvw;
        font-size: 1vw;
    }
    
    @media (min-width: 768px) and (min-height: 600px){
        display: flex;
        justify-content: space-between;
        width: 35dvw;
        gap: 5px;
        font-size: 1vw;
    }

    @media (min-width: 1000px){
        display: flex;
        justify-content: space-between;
        width: 30dvw;
        gap: 5px;
        font-size: 0.8vw;
    }
    
    @media (min-width: 1200px) {
        display: flex;
        justify-content: space-between;
        width: 35dvw;
        gap: 5px;
    }
}

.header--upper-bar-option{
    text-decoration: none;
    color: #a24a16;
}

.header--upper-bar-option:hover{
    text-decoration: underline;
    text-shadow: 1px 1px 5px #dabea8;
    cursor: pointer;
}

.header-main--options{
    display: none;
    list-style-type: none;
    font-size: 1.2vw;

    @media(max-height: 600px) and (orientation: landscape){
        display: flex;
        width: 40dvw;
        justify-content: space-between;
        font-size: 1.1vw;
    }
    
    @media (min-width: 600px) and (min-height: 600px){
        display: flex;
        justify-content: space-between;
        width: 35dvw;
        gap: 5px;
        font-size: 0.8vw;
    }
    
    @media (min-width: 1000px) {
        display: flex;
        width: 33dvw;
        justify-content: space-between;
        font-size: 0.8vw;
    }

}

.header-main--option{
    flex: 1;
    text-align: end;
    text-decoration: none;
    color: #FFFFFF;
}

.header-main--option:hover{
    text-decoration: underline;
    text-shadow: 1px 1px 5px #dabea8;
}

.main-logo--container{
    width: 18dvw;
    display: flex;
    justify-content: center;
    align-items: center;

    @media(max-height: 600px) and (orientation: landscape){
        width: 10dvw;
    }
    
    @media (min-width: 768px) and (min-height: 600px){
        width: 12dvw;
    }
    
    @media (min-width: 1200px) {
        width: 12dvw;
    }
}

.main--logo{
    width: 60%;

    @media(max-height: 600px) and (orientation: landscape){
        width: 60%
    }
    
    @media (min-width: 768px) and (min-height: 600px){
        width: 65%;
    }
    
    @media (min-width: 1000px) {
        width: 45%;
    }
}

.main--logo > img{
    width: 100%;
}

.main-nav-bar--container{
    width: 70dvw;
    display: flex;
    justify-content: right;
    align-items: center;

    @media(max-height: 600px) and (orientation: landscape){
        width: 80dvw;
    }
    
    @media (min-width: 768px) and (min-height: 600px){
        width: 75dvw;
    }
    
    @media (min-width: 1200px) {
        width: 80dvw;
    }
}


.bar--icon{
    color: #eee9e7;
    font-size: 2dvh;
    margin-right: 2%;

    @media (min-width: 600px) or (orientation: landscape){
        display: none;
    }
}

/*      ICONS COLOR SECTION     */

/* default color*/
.icon--hover{
    color: #fe6300;
}

#whatsapp:hover{
    color: #4aad20;
}

#instagram:hover{
background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#pinterest:hover{
    color: #e60023;
}

#facebook:hover{
    color: #1876f0;
}

#youtube:hover{
    color: #fe0032;
}

#tiktok:hover{
    background: linear-gradient(45deg, #69C9D0, #EE1D52);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}