#header {
  width: 100%;
  height: auto;
  background: linear-gradient(
    180deg,
    rgba(0, 42, 82, 0.3) 0%,
    rgba(20, 20, 20, 0) 72.59%
  );

  .logo-img {
    width: 150px;
    height: 89px;
    transition: 1s;

    &:hover {
      scale: 1.1;
    }
  }

  & li {
    cursor: pointer;

    .item {
      color: white;
    }

    &:hover {
      .item {
        color: var(--primary100);
      }
    }
  }
  .active a {
    color: var(--primary100);

    &:hover {
      color: var(--primary200);
    }
  }

  .img-nav {
    width: 20px;
    height: 20px;
  }

  .btn {
    padding: 12px 22px;
    border: double 1.5px transparent;
    border-radius: 4px;
    background-image: linear-gradient(var(--dark900), var(--dark900)),
      linear-gradient(
        160deg,
        var(--secondary700) 0%,
        var(--secondary100) 50%,
        var(--secondary700) 100%
      );
    background-origin: border-box;
    background-clip: padding-box, border-box;

    &:hover {
      background-image: linear-gradient(var(--dark1000), var(--dark1000)),
        linear-gradient(
          160deg,
          var(--secondary100) 0%,
          var(--secondary800) 50%,
          var(--secondary100) 100%
        );

      & span {
        color: var(--secondary200);
      }
    }

    & span {
      color: var(--light200);
    }
  }

  .right a {
    color: var(--primary100);

    &:hover {
      color: var(--primary300);
      scale: 1.03;
    }
  }

  .menu-btn {
    width: 0px;
    height: 0px;
    cursor: pointer;
  }
  .menu-btn img {
    width: 100%;
    height: 100%;
  }

  .navbar-cel ul {
    background-color: var(--dark900);
  }
  .navbar-cel ul li {
    padding: 0;
  }
}

#location {
  & a {
    color: var(--dark300);
    cursor: pointer;
  }
  & a:last-child {
    color: var(--light600);

    &:hover {
      color: var(--primary100);
    }
  }

  & span {
    color: var(--dark200);
  }

  .contain {
    border-top: 1px solid var(--dark800);
    border-bottom: 1px solid var(--dark800);
    padding: 8px;
  }
}

#ap {
  .box {
    background: linear-gradient(
      45deg,
      rgba(122, 44, 0, 1) -15%,
      rgba(0, 106, 204, 1) 50%,
      rgba(0, 42, 82, 1) 100%
    );
    border: 1px solid var(--primary400);

    &:hover {
      transform: scale(1.1);
      transition: 1s;
      box-shadow: 6px 12px 12px black;
    }
  }

  .img {
    width: 100%;
    height: auto;

    & img {
      width: 50%;
      height: auto;
    }
  }

  & h4 {
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 32px;
    color: white;
  }

  .txt {
    color: var(--secondary100);
    width: 80%;
    height: auto;
    padding-right: 16px;
    border-right: 1px solid var(--primary400);
  }

  .minilogo {
    width: 20%;
    height: auto;
    margin-left: 16px;
    display: flex;

    & img {
      width: 100%;
      height: auto;
    }
  }

  .aps {
    border-top: 1px solid var(--primary400);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

    &:hover {
      transform: scale(1.1);
      transition: 1s;
      border: 1px solid var(--primary400);
      border-style: inset;
      background: linear-gradient(
        45deg,
        rgba(0, 42, 82, 1) 0%,
        rgba(0, 106, 204, 1) 50%,
        rgba(122, 44, 0, 1) 120%
      );
    }
  }
}

#others {
  & h2 {
    color: white;
  }

  .item {
    background-color: var(--dark1000);
    border-left: 5px solid var(--secondary400);

    &:hover {
      transform: translateY(-10px);
      transition: 0.5s;
    }

    & p {
      color: var(--dark100);
    }
    & a {
      color: var(--primary400);
      border-left: 1px solid var(--dark800);
      display: flex;
      width: 20%;
      height: 50px;
      background-color: var(--dark1000);

      &:hover {
        transform: scale(1.2);
        transition: 1s;
      }
    }
  }

  .img {
    width: 100%;
    height: auto;

    & img {
      width: 100%;
      height: auto;
    }
  }
}

#footer {
  width: 100%;
  height: auto;
  background-color: var(--dark1000);

  & p {
    text-align: center;
    color: white;

    & span {
      color: var(--primary400);
    }
  }
}

/* XXL */
@media (max-width: 1399.98px) {
  #ap {
    .box {
      & h4 {
        font-size: 24px;
      }
    }
  }
  #others {
    .item {
      & a {
        width: 25%;
      }
    }
  }
}

/* SM */
@media (max-width: 575.98px) {
  #others {
    .item {
      & a {
        width: 35%;
        height: 70px;
      }
    }
  }
}