header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;

  .header-top {
    background: var(--color-primary);
    border-bottom: 1px solid #3d3d3d;
    height: 40px;
    padding: 2px 0;

    .container-contact,
    .container-networks {
      /* a:not(:first-child) {
        border-left: 1px solid white;
      } */

      a {
        text-decoration: none;
        font-size: var(--font-size-content);
        font-family: var(--font-family-body);
        &:hover {
          color: gray !important;
        }
      }
    }

    .container-networks {
      display: flex;
      justify-content: center;
      align-items: center;

      a .btn-icon-header {
        color: #000;
        font-size: var(--font-size-content);
        font-size: var(--font-size-content);
        font-family: var(--font-family-body);

        &:hover {
          color: gray !important;
        }
      }

      a:nth-of-type(odd) .btn-icon-header {
      }

      a:nth-of-type(even) .btn-icon-header {
      }

      .btn-icon-header:hover {
      }
    }

    .dropdown-menu {
      margin-top: 10px !important;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
      border: none;

      a {
        color: #000;
        padding-top: 10px;
        padding-bottom: 10px;
        font-family: var(--ff-poppins);
        line-height: 110%;

        &:hover {
          background: var(--color-tertiary) !important;
          color: #fff;
        }
      }
    }

    .btn-icon-header {
      padding: 4px;
      background: transparent;
      color: #000;
      border: none;
      outline: none;
      transition: 0.4s;
      border-radius: 100%;
      overflow: hidden;
      aspect-ratio: 1;
      margin: 0 3px;
      text-decoration: none;
      
      &:hover {
        @media (width>=768px) {
          color: var(--color-tertiary);
        }
      }
    }

    .page-width {
      .container-text {
        font-family: var(--font-family-title);
        font-weight: 400;
        font-size: var(--font-size-content);
        text-align: center;
        text-transform: capitalize;
        color: #2b2b2b;
      }

      @media (width<520px) {
        padding-inline: 0;

        .btn-icon-header {
          padding-inline: 0;
          aspect-ratio: 1;
        }
      }
    }
  }
  .logo-header-img {
    width: auto;
    max-height: 85px;
  }
  .header-bottom {
    background: #ffffff;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  }
  .header-bottom {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
  }

  .header-bottom.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .btn-header{
    padding: 15px 40px!important;
  }
}