@import url("variables.css");
* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
  background-color: var(--bg-color-secondary);
}
img {
  object-fit: contain;
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  .bg_image {
    background-image: none;
  }
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
  .bg_image {
    background-image: none;
  }
}
/* =========================================================
   MOBILE HEADER / NOTIFICATION BAR THEME
========================================================= */

/* Mobile Top Navbar */
@media (max-width: 768px) {

    .main-header,
    .navbar,
    .navbar-dark {

        background: linear-gradient(
            135deg,
            #29503d 0%,
            #1d3f30 22%,
            #133123 55%,
            #0b1d15 100%
        ) !important;

        border-bottom: 1px solid rgba(139, 195, 74, 0.12);

        box-shadow:
            0 8px 24px rgba(0,0,0,0.28),
            0 0 18px rgba(76, 175, 80, 0.10);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    /* Notification Dropdown */
    .dropdown-menu {

        background: linear-gradient(
            145deg,
            #29503d 0%,
            #1d3f30 18%,
            #133123 45%,
            #0b1d15 100%
        ) !important;

        border: 1px solid rgba(255,255,255,0.05);

        box-shadow:
            0 16px 40px rgba(0,0,0,0.35),
            0 0 22px rgba(76, 175, 80, 0.10);

        backdrop-filter: blur(35px);
        -webkit-backdrop-filter: blur(35px);
    }

    /* Notification Icon */
    .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link {

        color: rgba(255,255,255,0.82) !important;
    }

    /* Mobile Notification Badge */
    .navbar .badge,
    .navbar-nav .badge {

        background: linear-gradient(
            135deg,
            #8BC34A 0%,
            #4CAF50 45%,
            #2e7d32 100%
        ) !important;

        color: #ffffff !important;

        box-shadow:
            0 0 14px rgba(76, 175, 80, 0.30);
    }

    /* Hamburger Menu */
    .navbar-toggler {

        border: 1px solid rgba(255,255,255,0.06) !important;

        background: rgba(255,255,255,0.04);

        border-radius: 12px;

        padding: 8px 10px;

        box-shadow:
            0 4px 14px rgba(0,0,0,0.18);
    }

    .navbar-toggler:focus {

        outline: none !important;

        box-shadow:
            0 0 0 3px rgba(76, 175, 80, 0.14),
            0 0 14px rgba(76, 175, 80, 0.12);
    }
}