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

.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  padding: 18px 5%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(5, 14, 28, 0.75);
  backdrop-filter: blur(15px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  transition: 0.4s;
}

/* Glow Effect */

.navbar::before {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  background: #0b5cff;

  filter: blur(120px);

  top: -180px;
  left: -100px;

  opacity: 0.5;

  z-index: -1;

  animation: moveGlow 5s infinite alternate;
}

@keyframes moveGlow {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(80px);
  }
}

/* ================= BRAND ================= */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LOGO IMAGE */

.logo1 {
  width: 65px;
  height: 65px;

  object-fit: contain;
}

/* TEXT LOGO */

.logo {
  text-decoration: none;

  color: #fff;

  font-size: 22px;

  font-weight: 700;

  letter-spacing: 2px;

  line-height: 1.1;

  font-family: "Cinzel", serif;

  position: relative;
}

.logo span {
  color: #0b5cff;

  font-size: 14px;

  letter-spacing: 2px;

  font-weight: 400;
}

.logo::after {
  content: "";

  position: absolute;

  width: 100%;

  height: 3px;

  background: #0b5cff;

  bottom: -6px;

  left: 0;

  transform: scaleX(0);

  transform-origin: left;

  transition: 0.4s;
}

.logo:hover::after {
  transform: scaleX(1);
}

/* ================= NAV LINKS ================= */

.nav-links {
  display: flex;

  align-items: center;

  gap: 5px;

  list-style: none;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  text-decoration: none;

  color: #fff;

  font-size: 12px;

  font-weight: 600;

  padding: 12px 10px;

  border-radius: 30px;

  display: flex;

  align-items: center;

  gap: 8px;

  transition: 0.4s;
}

.nav-links a:hover {
  color: #0b5cff;

  transform: translateY(-3px);
}

/* ================= DROPDOWN ================= */

.dropdown-menu {
  position: absolute;

  top: 45px;

  left: 0;

  width: 290px;

  background: #071327;

  padding: 10px 0;

  list-style: none;

  border-radius: 10px;

  display: none;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.dropdown-menu li a {
  padding: 12px 18px;

  width: 100%;

  font-size: 13px;
}

.dropdown-menu li a:hover {
  background: #0b5cff;

  color: white;
}

/* Desktop Dropdown */

@media (min-width: 951px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

/* Arrow */

.dropdown i {
  font-size: 12px;

  transition: 0.3s;
}

.dropdown:hover i {
  transform: rotate(180deg);
}

/* ================= BUTTON ================= */

.nav-btn {
  background: linear-gradient(135deg, #0b5cff, #1d8fff);

  padding: 12px 25px !important;

  border-radius: 40px;

  color: white !important;
}

.nav-btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 15px 35px rgba(11, 92, 255, 0.5);
}

/* ================= MOBILE MENU ================= */

.menu-btn {
  display: none;

  color: white;

  font-size: 26px;

  cursor: pointer;
}

@media (max-width: 950px) {
  .navbar {
    padding: 15px 5%;
  }

  .menu-btn {
    display: block;
  }

  .nav-links {
    position: absolute;

    top: 100%;

    right: -100%;

    width: 300px;

    height: 100vh;

    background: #08192f;

    flex-direction: column;

    align-items: flex-start;

    padding: 35px 25px;

    transition: 0.5s ease;

    overflow-y: auto;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    width: 100%;
  }

  /* Mobile Dropdown */

  .dropdown-menu {
    position: static;

    width: 100%;

    display: none;

    background: #0b1d38;

    box-shadow: none;
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }

  .dropdown.active i {
    transform: rotate(180deg);
  }

  .nav-btn {
    width: 100%;

    text-align: center;

    margin-top: 15px;
  }
}

/* ================= SMALL DEVICES ================= */

@media (max-width: 480px) {
  .logo1 {
    width: 45px;

    height: 45px;
  }

  .logo {
    font-size: 16px;
  }

  .logo span {
    font-size: 10px;
  }

  .nav-links {
    width: 270px;
  }
}