/** DO NOT TOUCH THIS AREA OR YOUR THEME WILL NOT WORK **/
@import url("library.css");
/** DO NOT TOUCH THIS AREA OR YOUR THEME WILL NOT WORK **/

/** ==========================================================
    GLOBAL CONFIG
========================================================== */
body:before {
    background-image: url("https://i.imgur.com/VLDIv34.png");
}

/* Global text colors */
.dashboard-widget-small-box .element,
.dashboard-widget-small-box i,
.dashboard-widget-small-box .caption,
h1,h2,h3,h4,h5,h6,
.content,
.news-block span,
.pkg-step,
.footer, .version,
.srv-box .fa,
.btn-prom, .btn-prom:hover,
.form-horizontal,
.form-group, .categoryLink, .form-control,
.header,
.store-box-lower,
.main-menu-box ul.sub-menu .submenu-header,
.main-menu-box a,
a:hover,
.tos-link,
.dashboard-nav a,.dashboard-nav a.active,
.version-marker,
.buy-btn,
.featured-header,
.bs-callout,
.ticket-header, .stat-box-header, .panel-body > .panel-header,
.table-striped > tbody > tr:nth-of-type(even),
#sortable li,
.store-box-header,
.store-box-upper span {
    color: #EEE !important;
}

a:hover { color: #D6D6D6 !important; }
.srv-box .fa:hover { color: #D6D6D6 !important; }
.btn-default:hover, .buy-btn:hover { color: #D6D6D6 !important; }

/* Tables */
.table-striped thead,
.table-striped > tbody > tr:nth-of-type(odd),
.panel-body .panel-inner,
.form-control { color: #EEE !important; }

/* Dropdown links */
.dropdown-menu > li > a { color:#EEE !important; }

/* Progress bar */
.progress-bar { color:#EEE !important; }

/** ==========================================================
    HERO LOGO + ANIMATION
========================================================== */
.masthead {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.masthead .logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.masthead .logo img.hero-logo {
    width: 800px !important;
    max-width: 90vw !important;
    height: auto !important;
    display: block !important;
    margin: 60px auto 20px auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 35px rgba(255,0,0,0.4));

    animation: heroFloat 7s ease-in-out infinite !important;
    /* REMOVE transform: none — it CANCELS the animation */
}


/** ==========================================================
    WELCOME TEXT + DIVIDER
========================================================== */
.highlight {
    text-align:center !important;
    width:100% !important;
    margin:0 auto 30px auto !important;
}
.highlight h1 { font-size:2.5rem; font-weight:700; }
.highlight p { font-size:1.2rem; opacity:0.85; }

.hero-divider {
    width:60%;
    height:4px;
    margin:25px auto 40px auto !important;
    background: linear-gradient(90deg,rgba(255,0,0,0) 0%,rgba(255,70,70,0.8) 50%,rgba(255,0,0,0) 100%);
    border-radius:50px;
    filter: drop-shadow(0 0 6px rgba(255,70,70,0.6));
}

/** ==========================================================
    FEATURE BOXES (3 main home buttons)
========================================================== */
.feature {
    background: rgba(0,0,0,0.25) !important;
    border-radius: 12px;
    padding: 25px !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
}

.feature .desc h2 {
    font-weight:700;
    margin-bottom:15px;
}
.feature ul li { margin:6px 0; opacity:0.9; }

/* Inner glowing border */
.feature .border {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 50, 50, 0.4) !important;
    box-shadow:
        0 0 8px rgba(255, 40, 40, 0.6),
        0 0 16px rgba(255, 40, 40, 0.4),
        inset 0 0 12px rgba(255, 40, 40, 0.3) !important;
    border-radius:12px;
    transition:0.35s ease;
}
.feature:hover .border {
    border-color: rgba(255, 90, 90, 0.8) !important;
    box-shadow:
        0 0 12px rgba(255, 80, 80, 0.9),
        0 0 22px rgba(255, 60, 60, 0.7),
        inset 0 0 14px rgba(255, 60, 60, 0.4) !important;
}

/** ==========================================================
    FLOATING PARTICLES
========================================================== */
#particles {
    position:fixed;
    bottom:0; left:0;
    width:100%; height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}
.particle {
    position:absolute;
    width:6px; height:6px;
    background:rgba(255,70,70,0.8);
    border-radius:50%;
    box-shadow:0 0 12px rgba(255,70,70,0.8);
    opacity:0.8;
    animation: riseParticles linear infinite;
}
@keyframes riseParticles {
    0% { transform:translateY(0) scale(1); opacity:0.8; }
    100% { transform:translateY(-120vh) scale(0.2); opacity:0; }
}

/** ==========================================================
    NAVBAR — CLEAN WHITE + RED GLOW
========================================================== */
.navbar,
.navbar-inverse {
    background: rgba(0,0,0,0.25) !important;
    border: none !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4) !important;
}

.navbar.scrolled,
.navbar-inverse.scrolled {
    background: rgba(0,0,0,0.55) !important;
}

/* Nav links */
.navbar .nav-link,
.navbar-inverse .nav-link {
    color:#fff !important;
    padding:14px 20px !important;
    font-weight:600;
    background:transparent !important;
    position:relative;
    transition:color .25s ease, text-shadow .25s ease;
}

/* Hover glow */
.navbar .nav-link:hover {
    color:#ff4444 !important;
    text-shadow:
        0 0 6px rgba(255,60,60,1),
        0 0 12px rgba(255,40,40,0.9),
        0 0 22px rgba(255,0,0,0.8);
}

/* Underline animation */
.navbar .nav-link::after {
    content:"";
    position:absolute;
    bottom:4px;
    left:50%;
    width:0%;
    height:2px;
    background:#ff4444;
    border-radius:10px;
    transition:width .3s ease, left .3s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-item.active .nav-link::after {
    width:60%;
    left:20%;
}

/** STORE TAB DROPDOWN FIX — keeps underline */
.nav-item.dropdown > .nav-link.dropdown-toggle {
    position:relative !important;
    color:#fff !important;
    background:transparent !important;
    padding:14px 18px !important;
}

.nav-item.dropdown > .nav-link.dropdown-toggle::after {
    content:"";
    position:absolute;
    bottom:6px;
    left:50%;
    width:0%;
    height:2px;
    background:#ff4444 !important;
    border-radius:10px;
    transition:width .3s ease,left .3s ease;
    display:block !important;
    opacity:1 !important;
}

.nav-item.dropdown > .nav-link.dropdown-toggle:hover::after,
.nav-item.dropdown.active > .nav-link.dropdown-toggle::after {
    width:60% !important;
    left:20% !important;
}

/* ==========================================================
   NEWS SECTION — CLEAN VERSION
========================================================== */

/* Container */
.news-container {
    width: 100%;
    margin: 0 auto 40px auto;
}

/* Title */
.news-title {
    font-size: 38px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-left: 8px;
    color: #fff;
    text-shadow: 0 0 12px rgba(255,0,0,0.8);
}

/* Outer glowing bar */
.news-block {
    width: 100%;
    padding: 35px;
    border-radius: 14px;

    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,80,80,0.35);

    box-shadow:
        0 0 18px rgba(255,0,0,0.25),
        inset 0 0 10px rgba(255,0,0,0.12);
}

/* Inner post boxes */
.news-block > .news-block {
    width: 85%;
    margin: 15px auto;
    padding: 25px;

    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,60,60,0.35);

    box-shadow:
        0 0 12px rgba(255,0,0,0.45),
        inset 0 0 14px rgba(255,0,0,0.25);
}

/* Text styles */
.news-block p,
.news-block span,
.news-block small {
    color: #eee !important;
    font-size: 17px;
    line-height: 1.5;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Remove ghost block when news is empty */
.news-container > .news-block:empty {
    display: none !important;
}

/* Remove empty child blocks */
.news-block > .news-block:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   RESTORE FLOATING ANIMATION TO LOGO
   ============================================================ */

/* Apply floating animation to the main logo image */
.masthead .logo img {
    animation: heroFloat 7s ease-in-out infinite !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Floating animation keyframes */
@keyframes heroFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}
/* ============================================================
   FIX: Hide empty news block (ghost square)
   ============================================================ */

/* If the news-block contains no actual post content */
.news-block:empty,
.news-block:has(.panel-body:empty),
.news-block:has(.news:empty),
.news-block:has(.panel:empty) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* ALSO hide the wrapper if news-block has no content */
.news-container:not(:has(.news-block *)) {
    display: none !important;
}