/* =========================================
   HEADER
========================================= */


.header {

    width: 100%;

    background: var(--color-white);

}

/* =========================================
   TOP BAR
========================================= */


.header__top {

    width: 100%;

    background: var(--color-header-bg);

}



.header__top .container {

    height: 42px;

    padding: 0 var(--container-padding) 0 var(--container-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.header__contact {

    display: flex;

    align-items: center;

    gap: 30px;

}

/* =========================================
   CONTATOS
========================================= */


.header__top-info {

    display: flex;

    align-items: center;

    gap: 30px;

}

.header__contact i {

    color: var(--color-primary);

    font-size: var(--icon-sm);

}

.header__contact a {

    position: relative;

    font-size: var(--text-md);

    color: var(--color-text);

}

.header__contact a:hover span {

    color: var(--color-highlight);

}

.header__contact span {

    margin-left: 8px;

    color: var(--color-text);

    font-size: var(--text-md);

    transition: all .3s ease;

}

.header__contact span:hover {

    color: var(--color-highlight);

    transition: all .3s ease;

}


.header__contact a:not(:last-child)::after {

    content: "";

    position: absolute;

    right: -15px;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 18px;

    background: var(--color-divider);

    pointer-events: none;

}



.header__top-link {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--color-black);

    text-decoration: none;

    font-family: var(--font-body);

    font-size: .82rem;

    transition: .3s ease;

}



.header__top-link i {

    color: var(--color-primary);

    font-size: .8rem;

}



.header__top-link:hover {

    color: var(--color-primary);

}



/* =========================================
   REDES
========================================= */


 .header__top-social {

    display: flex;

    align-items: center;

    gap: 10px;

}



.header__top-social a {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-black);

    text-decoration: none;

    border-radius: 50%;

    transition: .3s ease;

}



.header__top-social a:hover {

    background: var(--color-primary);

    color: var(--color-header-bg);

}



/* =========================================
   NAVBAR
========================================= */


.header__navbar {

    width: 100%;

    height: 88px;

    background: var(--color-white);

}



.header__navbar .container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 var(--container-padding) 0 var(--container-padding);

    border-bottom: 1px solid var(--color-divider);

}



/* =========================================
   LOGO
========================================= */


.header__logo {

    display: flex;

    align-items: center;

    text-decoration: none;

}



.header__logo-image {

    width: 160px;

    transition: .3s ease;

}



/* =========================================
   LINKS GLOBAIS
========================================= */


a {

    text-decoration: none;

}



/* =========================================
   BOTÃO MENU MOBILE
========================================= */


.header__sidebar-btn {

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: transparent;

    cursor: pointer;

}



.header__sidebar-btn span,
.header__sidebar-btn span::before,
.header__sidebar-btn span::after {


    width: 24px;

    height: 2px;

    background: var(--color-black);

    border-radius: 20px;

    transition: .3s ease;


}



.header__sidebar-btn span {

    position: relative;

}



.header__sidebar-btn span::before,
.header__sidebar-btn span::after {

    content: "";

    position: absolute;

    left: 0;

}



.header__sidebar-btn span::before {

    top: -8px;

}



.header__sidebar-btn span::after {

    top: 8px;

}

.header__sidebar-btn.active span {

    background: transparent;

}



.header__sidebar-btn.active span::before {

    transform: rotate(45deg);

    top: 0;

}



.header__sidebar-btn.active span::after {

    transform: rotate(-45deg);

    top: 0;

}

.header__navbar.fixed {

    position: fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    animation: headerShow .3s ease;

}


@keyframes headerShow {

    from {

        transform: translateY(-100%);

    }

    to {

        transform: translateY(0);

    }

}

/* =========================================
   Responsive
========================================= */

@media(max-width:1024px){


    #menu-container {

        display:none;

    }



    .header__sidebar-btn {

        display:flex;

    }

    .header__logo img {

        width:180px;

    }

    .header__top-social {

        display:none;

    }


}

@media(max-width:600px){

    .header__top-info {

        justify-content:center;

    }


    .header__contact span {

        display:none;

    }

}