@import url(/assets/plugins/font-awesome4/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700);


/********************************/
/* BEGIN navbar
/********************************/
.navbar-nav>li>a {
    letter-spacing: 2px;
}
.navbar-brand img.navbar-logo {
    display: inline-block;
    vertical-align: middle; /* aligns with text */
    height: 30px;           /* adjust to match text size */
    filter: brightness(1.5) contrast(1.2); /* brightens image */
    margin-left: -6px;
}
    .navbar {
      background-color: rgba(0,0,0,0.8);
    }
/* ABOUT SECTION */
.about-section {
  background: rgba(0, 0, 0, 0.75);
  border-top: 2px solid #ff4757;
  border-bottom: 2px solid #1b74b8;
}

.about-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  color: #ff4757;
  text-shadow: 0 0 10px #ff4757, 0 0 20px #ff4757;
}

.about-box {
  background: rgba(20, 20, 20, 0.8);
  border-radius: 15px;
  box-shadow: 0 0 25px #1b74b8;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #e6e6e6;
  border-left: 4px solid #ff4757;
  border-right: 4px solid #1b74b8;
  transition: 0.3s ease;
}

.about-box:hover {
  transform: scale(1.02);
  box-shadow: 0 0 50px #ff4757;
}
/* Navbar background */
.navbar {
  background-color: rgba(0,0,0,0.85) !important;
  border: none !important;
}
.navbar-inverse .navbar-nav>li>a {
    color: #999999;
    color: #f59607 !important;
    text-shadow: 0 0 6px #f59607, 0 0 12px #f59607 !important;
    background: transparent !important;
}
.navbar-inverse .navbar-nav>li>a:hover {
        color: #ffffff !important;
        text-shadow: 0 0 10px #f59607, 0 0 20px #f59607 !important;
        background: rgba(245,150,7,0.12) !important;
        box-shadow: 0 0 12px #f59607 inset !important;
        border-radius: 10px;
}

/* Neon Gold Toggle Button */
.neon-gold-toggle {
    border: 1px solid #f59607 !important;
    box-shadow: 0 0 8px #f59607, 0 0 15px #f59607;
}

/* Icon bars neon glow */
.neon-gold-toggle .icon-bar {
    background-color: #f59607 !important;
    box-shadow: 0 0 6px #f59607, 0 0 12px #f59607;
}

/* Optional: hover glow boost */
.neon-gold-toggle:hover {
    box-shadow: 0 0 12px #f59607, 0 0 22px #f59607;
}

.neon-gold-toggle:hover .icon-bar {
    box-shadow: 0 0 10px #f59607, 0 0 18px #f59607;
}

/* NEON COLORS */
.neon-blue {
  color: #1b74b8;
  text-shadow:
    0 0 5px #1b74b8,
    0 0 5px #1b74b8,
    0 0 5px #1b74b8;
<!--  animation: bluePulse 2.5s infinite ease-in-out; -->
}
.neon-blue-0 {
  color: #1b74b8;
      -webkit-text-stroke: 2px #b3edfb;
  text-shadow:
    0 0 5px #1b74b8,
    0 0 5px #1b74b8,
    0 0 5px #1b74b8;
<!--  animation: bluePulse 2.5s infinite ease-in-out; -->
}

.neon-red {
  color: #ff4757;
  text-shadow:
    0 0 5px #ff4757,
    0 0 10px #ff4757,
    0 0 20px #ff4757;
<!--  animation: redPulse 2.5s infinite ease-in-out; -->
}

/* ANIMATIONS */
@keyframes bluePulse {
  0% { text-shadow: 0 0 5px #1b74b8, 0 0 10px #1b74b8, 0 0 18px #1b74b8; }
  50% { text-shadow: 0 0 12px #1b74b8, 0 0 25px #1b74b8, 0 0 40px #1b74b8; }
  100% { text-shadow: 0 0 5px #1b74b8, 0 0 10px #1b74b8, 0 0 18px #1b74b8; }
}

@keyframes redPulse {
  0% { text-shadow: 0 0 5px #ff4757, 0 0 10px #ff4757, 0 0 18px #ff4757; }
  50% { text-shadow: 0 0 12px #ff4757, 0 0 25px #ff4757, 0 0 45px #ff4757; }
  100% { text-shadow: 0 0 5px #ff4757, 0 0 10px #ff4757, 0 0 18px #ff4757; }
}
/********************************/
/* END navbar */
/********************************/



/********************************/
/* BEGIN SideBar            
/********************************/

/********************************/
/* END SideBar                
/********************************/


/********************************/
/* BEGIN Header                 
/********************************/

/********************************/
/* END Header                 
/********************************/

/********************************/
/* BEGIN Shopping Cart                 
/********************************/


/********************************/
/* END Shopping Cart                 
/********************************/

/********************************/
/* BEGIN defaults
/********************************/
    body {
      font-family: 'Arial', sans‑serif;
      background: linear-gradient(135deg, #1b74b8, #ff9800);
      color: #fff;
    }
/* =========================================
   BOOTSTRAP 3 SPACING UTILITY PATCHES
   Enables BS5 classes in BS3
   ========================================= */

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 20px !important; }
.mb-4 { margin-bottom: 30px !important; }
.mb-5 { margin-bottom: 50px !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 20px !important; }
.mt-4 { margin-top: 30px !important; }
.mt-5 { margin-top: 50px !important; }

/* Margin Left / Right */
.ml-1 { margin-left: 5px !important; }
.ml-2 { margin-left: 10px !important; }
.ml-3 { margin-left: 20px !important; }
.mr-1 { margin-right: 5px !important; }
.mr-2 { margin-right: 10px !important; }
.mr-3 { margin-right: 20px !important; }

/* Padding Top + Bottom */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-2 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-3 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-4 { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-5 { padding-top: 60px !important; padding-bottom: 60px !important; }

/* Padding Left + Right */
.px-1 { padding-left: 5px !important; padding-right: 5px !important; }
.px-2 { padding-left: 10px !important; padding-right: 10px !important; }
.px-3 { padding-left: 20px !important; padding-right: 20px !important; }

.p-4 { padding: 1.5rem !important;}

/* BS5 .g-4 gutter replacement */
.row.g-4 > [class*="col-"] {
    margin-bottom: 30px !important;
}
/********************************/
/* END defaults
/********************************/

/********************************/
/* BEGIN Buttons
/********************************/

/********************************/
/* END Buttons
/********************************/


/********************************/
/* BEGIN global classes
/********************************/



/********************************/
/* END global classes
/********************************/


/********************************/
/* BEGIN Bread Crumb styles
/********************************/
/* BREADCRUMB STYLES (Custom — won’t override Bootstrap defaults) */
.breadcrumbs {
  background: rgba(0, 0, 0, 0.65);
  padding: 25px 0;
  border-bottom: 2px solid #1b74b8;
  border-top: 2px solid #ff4757;
  box-shadow: 0 0 15px #1b74b8;
}

.breadcrumbs h1 {
  font-family: 'Orbitron', sans-serif;
  color: #ff4757;
  font-size: 2rem;
  margin: 0;
  text-shadow: 0 0 8px #ff4757, 0 0 15px #ff4757;
}

.breadcrumbs .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 1.1rem;
}

.breadcrumbs .breadcrumb > li {
  color: #ddd;
  text-shadow: 0 0 5px #1b74b8;
}

.breadcrumbs .breadcrumb > li > a {
  color: #1b74b8;
  font-weight: bold;
  text-shadow: 0 0 5px #1b74b8;
  transition: 0.3s ease;
}

.breadcrumbs .breadcrumb > li > a:hover {
  color: #ff4757;
  text-shadow: 0 0 8px #ff4757;
}

.breadcrumbs .breadcrumb > .active {
  color: #ff4757;
  font-weight: bold;
  text-shadow: 0 0 8px #ff4757;
}


/* Optional: Separator glowing style */
.breadcrumbs .breadcrumb > li + li:before {
  color: #888;
  text-shadow: 0 0 5px #1b74b8;
}

/********************************/
/* END Bread Crumb styles */
/********************************/

/* ============================================
   BEGIN NEON SECTION DIVIDERS
   ============================================ */

.neon-divider {
  width: 100%;
  height: 6px;
  margin: 60px 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #ff4757, #1b74b8, #ff4757);
  background-size: 300% 100%;
  animation: neonFlow 4s linear infinite, neonGlow 2s ease-in-out infinite alternate;
  box-shadow: 0 0 12px #ff4757;
}

/* Double glowing line */
.neon-double {
  height: 10px;
  box-shadow: 
    0 0 10px #ff4757,
    0 0 20px #1b74b8,
    inset 0 0 10px #ff4757;
}

@keyframes neonFlow {
  0%   { background-position: 0% 0%;   }
  100% { background-position: 300% 0%; }
}

@keyframes neonGlow {
  0% {
    box-shadow: 
      0 0 10px #ff4757,
      0 0 20px #ff4757;
  }
  100% {
    box-shadow: 
      0 0 20px #1b74b8,
      0 0 40px #1b74b8;
  }
}
/* ============================================
    END NEON SECTION DIVIDERS
   ============================================ */

/* ============================================
    BEG NEON BRAND
   ============================================ */


/* ---------- Neon Base Styles ---------- */
.neon-logo {
    font-family: 'Orbitron', sans-serif; /* bold, futuristic neon/gamer font */
    font-size: 4rem;
    letter-spacing: 2px;
    display: inline-block;
}
/* Neon Gold */
.neon-gold {
    color: #FFD700; 
    -webkit-text-stroke: 2px #FFF1A8; /* bright outline */
    text-shadow:
        0 0 2px #FFD700,
        0 0 4px #FFD700,
        0 0 6px #FFD700,
        0 0 10px #FFC200,
        0 0 20px #FFB000,
        0 0 30px #FFAA00,
        0 0 40px #FFD633;
    animation: neonGoldPulse 2s ease-in-out infinite;
}

/* Neon Purple */
.neon-purple {
    color: #B266FF; 
    -webkit-text-stroke: 2px #D9B3FF; /* bright outline */
    text-shadow:
        0 0 2px #B266FF,
        0 0 4px #B266FF,
        0 0 6px #B266FF,
        0 0 10px #A64DFF,
        0 0 20px #9933FF,
        0 0 30px #8C1AFF,
        0 0 40px #B266FF;
    animation: neonPurplePulse 2s ease-in-out infinite;
}

/* Pulse animations */
@keyframes neonBluePulse {
    0%, 100% { text-shadow: 0 0 2px #1bb8ff,0 0 4px #1bb8ff,0 0 6px #1bb8ff,0 0 10px #00aaff,0 0 20px #0095ff,0 0 30px #00c0ff,0 0 40px #00e0ff; }
    50% { text-shadow: 0 0 4px #1bb8ff,0 0 8px #1bb8ff,0 0 12px #00aaff,0 0 20px #0095ff,0 0 40px #00c0ff,0 0 60px #00e0ff; }
}

@keyframes neonGoldPulse {
    0%, 100% { text-shadow: 0 0 2px #FFD700,0 0 4px #FFD700,0 0 6px #FFD700,0 0 10px #FFC200,0 0 20px #FFB000,0 0 30px #FFAA00,0 0 40px #FFD633; }
    50% { text-shadow: 0 0 4px #FFD700,0 0 8px #FFC200,0 0 12px #FFB000,0 0 20px #FFAA00,0 0 40px #FFD633,0 0 60px #FFE066; }
}

@keyframes neonPurplePulse {
    0%, 100% { text-shadow: 0 0 2px #B266FF,0 0 4px #B266FF,0 0 6px #B266FF,0 0 10px #A64DFF,0 0 20px #9933FF,0 0 30px #8C1AFF,0 0 40px #B266FF; }
    50% { text-shadow: 0 0 4px #B266FF,0 0 8px #A64DFF,0 0 12px #9933FF,0 0 20px #8C1AFF,0 0 40px #B266FF,0 0 60px #C580FF; }
}
/* ---------- Blue Neon Text ---------- */
.neon-blue {
    color: #1bb8ff; 
    -webkit-text-stroke: 2px #b3edfb; /* creates a bright outline */
    text-shadow:
        0 0 2px #1bb8ff,
        0 0 4px #1bb8ff,
        0 0 6px #1bb8ff,
        0 0 10px #00aaff,
        0 0 12px #0095ff,
        0 0 16px #00c0ff,
        0 0 20px #00e0ff;
  <!--  animation: neonBluePulse 2s ease-in-out infinite; -->
}

/* ---------- Red Neon Text ---------- */
.neon-red {
    color: #ff2a2a;
    -webkit-text-stroke: 2px #faa6a6; /* red outline */
    margin-left: 4px;
    text-shadow:
        0 0 2px #ff2a2a,
        0 0 4px #ff2a2a,
        0 0 6px #ff2a2a,
        0 0 10px #ff0000,
        0 0 16px #ff0000,
        0 0 25px #ff3333;
 <!--   animation: neonRedPulse 2s ease-in-out infinite; -->
}

/* ---------- Blue Pulse Animation ---------- */
@keyframes neonBluePulse {
    0%, 100% {
        text-shadow:
            0 0 2px #1bb8ff,
            0 0 4px #1bb8ff,
            0 0 6px #1bb8ff,
            0 0 10px #00aaff,
            0 0 20px #0095ff,
            0 0 30px #00c0ff,
            0 0 40px #00e0ff;
    }
    50% {
        text-shadow:
            0 0 4px #1bb8ff,
            0 0 8px #00aaff,
            0 0 14px #0095ff,
            0 0 20px #0077cc,
            0 0 28px #005f99,
            0 0 35px #00aaff,
            0 0 50px #00ccff;
    }
}

/* ---------- Red Pulse Animation ---------- */
@keyframes neonRedPulse {
    0%, 100% {
        text-shadow:
            0 0 2px #ff2a2a,
            0 0 4px #ff2a2a,
            0 0 8px #ff2a2a,
            0 0 16px #ff0000,
            0 0 32px #ff0000,
            0 0 45px #ff3333;
    }
    50% {
        text-shadow:
            0 0 4px #ff2a2a,
            0 0 8px #ff0000,
            0 0 14px #cc0000,
            0 0 24px #990000,
            0 0 32px #660000,
            0 0 40px #ff0000;
    }
}

/* ============================================
    END NEON BRAND
   ============================================ */

/********************************/
/* BEG MODAL STYLES
/********************************/



/********************************/
/* END MODAL STYLES
/********************************/


/*********************************/
/* BEG Product Gallery        */
/********************************/

/********************************/
/* END Product Gallery       */
/*******************************/

/*********************************/
/* BEG Footer Styles            */
/********************************/
    footer {
      background: #000;
      text-align: center;
      padding: 20px 0;
      font-size: 1.5rem;
      color: #ccc;
    }

/* Beg Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

/* End Sticky footer styles
-------------------------------------------------- */


.footer .container {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

/* END Footer styles */

/* BEGIN media styles
-------------------------------------------------- */
@media (max-width: 767px) {
.neon-logo {
    font-size: 2.5rem;
}
.navbar-collapse.in {
    width: 100%;

.neon-blue {
  color: #1b74b8;
  text-shadow:
    0 0 5px #1b74b8,
    0 0 10px #1b74b8,
    0 0 10px #1b74b8;
<!--  animation: bluePulse 2.5s infinite ease-in-out; -->
}

.neon-red {
  color: #ff4757;
  text-shadow:
    0 0 5px #ff4757,
    0 0 10px #ff4757,
    0 0 10px #ff4757;
<!--  animation: redPulse 2.5s infinite ease-in-out; -->
}

/* ANIMATIONS */
@keyframes bluePulse {
  0% { text-shadow: 0 0 5px #1b74b8, 0 0 10px #1b74b8, 0 0 18px #1b74b8; }
  50% { text-shadow: 0 0 8px #1b74b8, 0 0 25px #1b74b8, 0 0 40px #1b74b8; }
  100% { text-shadow: 0 0 5px #1b74b8, 0 0 10px #1b74b8, 0 0 18px #1b74b8; }
}

@keyframes redPulse {
  0% { text-shadow: 0 0 5px #ff4757, 0 0 10px #ff4757, 0 0 18px #ff4757; }
  50% { text-shadow: 0 0 8px #ff4757, 0 0 25px #ff4757, 0 0 45px #ff4757; }
  100% { text-shadow: 0 0 5px #ff4757, 0 0 10px #ff4757, 0 0 18px #ff4757; }
}
    /* Mobile menu background when opened */
    .navbar-inverse .navbar-collapse.in {
        background: rgba(0,0,0,0.95) !important;
        box-shadow: 0 0 10px #f59607, 0 0 20px #f59607 inset;
    }

    /* Strong override to beat Bootstrap defaults */
    .navbar-inverse .navbar-collapse.in .nav > li > a,
    .navbar-inverse .navbar-collapse.collapsing .nav > li > a {
        color: #f59607 !important;
        text-shadow: 0 0 6px #f59607, 0 0 12px #f59607 !important;
        border-bottom: 1px solid rgba(245,150,7,0.25) !important;
        background: transparent !important;
    }

    /* Hover glow */
    .navbar-inverse .navbar-collapse.in .nav > li > a:hover,
    .navbar-inverse .navbar-collapse.collapsing .nav > li > a:hover {
        color: #ffffff !important;
        text-shadow: 0 0 10px #f59607, 0 0 20px #f59607 !important;
        background: rgba(245,150,7,0.12) !important;
        box-shadow: 0 0 12px #f59607 inset !important;
    }

}
.navbar-toggle {}

}

@media (min-width: 768px) {
    .container>.navbar-header, .container>.navbar-collapse {
        padding-top: 10px;
        padding-bottom: 5px;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

/* END Media styles */