/**
 * Indian News Website Style - Color Enhancement
 * Inspired by Aaj Tak, NDTV, Zee News, India TV
 * For Varient CMS Magazine Theme
 */

/* ========================================
   CSS CUSTOM PROPERTIES - COLOR PALETTE
   ======================================== */
:root {
    /* Primary News Colors */
    --news-red: #E50914;
    --news-red-dark: #B71C1C;
    --news-blue: #1A237E;
    --news-blue-light: #3949AB;
    --news-orange: #FF6B00;
    --news-yellow: #FFD700;
    --news-gold: #FFC107;

    /* Category Colors */
    --cat-red: #DC3545;
    --cat-blue: #007BFF;
    --cat-green: #28A745;
    --cat-orange: #FD7E14;
    --cat-purple: #6F42C1;
    --cat-teal: #17A2B8;
    --cat-pink: #E91E63;
    --cat-indigo: #3F51B5;

    /* Backgrounds */
    --bg-dark-navy: #0D1B2A;
    --bg-gradient-blue: linear-gradient(135deg, #1A237E 0%, #3949AB 100%);
    --bg-gradient-red: linear-gradient(135deg, #E50914 0%, #B71C1C 100%);
}

/* ========================================
   TOP NAVIGATION BAR - Red Premium Style
   ======================================== */
#nav-top {
    background: linear-gradient(135deg, #C62828 0%, #E53935 100%) !important;
    border-bottom: none !important;
    padding: 6px 0 !important;
}

#nav-top .navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    transition: all 0.2s ease !important;
}

#nav-top .navbar-nav .nav-item .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
}

#nav-top .navbar-nav .nav-item svg {
    color: rgba(255, 255, 255, 0.9) !important;
}

#nav-top .btn-success {
    background: #fff !important;
    color: var(--news-red) !important;
    border: none !important;
    font-weight: 600 !important;
}

#nav-top .btn-success:hover {
    background: var(--news-yellow) !important;
    color: #222 !important;
}

#nav-top .dropdown-menu {
    border: none !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 5px !important;
}

/* ========================================
   MAIN NAVIGATION - Clean White with Red Accents
   ======================================== */
.nav-main {
    background: #fff !important;
    border-bottom: none !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
}

.nav-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #E53935, #FF5722, #FF9800, #E53935);
    background-size: 300% 100%;
    animation: gradient-flow 3s linear infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

.nav-main .navbar-brand {
    margin-right: 25px !important;
}

.nav-main .navbar-nav .nav-link {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    padding: 18px 14px !important;
    position: relative;
    transition: all 0.2s ease !important;
    letter-spacing: 0.3px !important;
}

.nav-main .navbar-nav .nav-link:hover {
    color: #E53935 !important;
    background: rgba(229, 57, 53, 0.05) !important;
}

.nav-main .navbar-nav .nav-link i {
    font-size: 10px !important;
    margin-left: 4px !important;
    opacity: 0.6;
}

/* Active nav indicator */
.nav-main .navbar-nav .nav-item:hover .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    background: #E53935;
    border-radius: 3px 3px 0 0;
}

/* Dropdown Menu Styling */
.nav-main .dropdown-menu,
.nav-dropdown-menu {
    border: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 10px 0 !important;
    margin-top: 0 !important;
    border-top: 3px solid #E53935 !important;
}

.nav-main .dropdown-menu .dropdown-item,
.nav-dropdown-menu .dropdown-item {
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444 !important;
    transition: all 0.2s ease !important;
}

.nav-main .dropdown-menu .dropdown-item:hover,
.nav-dropdown-menu .dropdown-item:hover {
    background: linear-gradient(90deg, rgba(229, 57, 53, 0.1) 0%, transparent 100%) !important;
    color: #E53935 !important;
    padding-left: 25px !important;
}

/* Search Icon */
.nav-main .search-icon {
    color: #333 !important;
    padding: 18px 12px !important;
}

.nav-main .search-icon:hover {
    color: #E53935 !important;
}

.nav-main .search-icon svg {
    width: 18px !important;
    height: 18px !important;
}

/* Search Form Popup */
.nav-main .search-form {
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    overflow: hidden !important;
}

.nav-main .search-form .form-input {
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 15px !important;
}

.nav-main .search-form .btn {
    background: #E53935 !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
}

/* ========================================
   BREAKING NEWS TICKER - Red Style
   ======================================== */
.section-newsticker {
    background: var(--bg-gradient-red) !important;
    padding: 8px 0 !important;
    margin-bottom: 15px !important;
}

.section-newsticker .newsticker-container {
    background: transparent !important;
}

.section-newsticker .newsticker-title {
    background: var(--news-yellow) !important;
    color: var(--news-red-dark) !important;
    font-weight: 700 !important;
    padding: 6px 15px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    animation: pulse-glow 2s infinite !important;
}

.section-newsticker .newsticker-title svg {
    color: var(--news-red-dark) !important;
}

.section-newsticker .newsticker li a {
    color: #fff !important;
    font-weight: 500 !important;
}

.section-newsticker .nav-sm-buttons button {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
}

.section-newsticker .nav-sm-buttons button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 5px var(--news-yellow);
    }

    50% {
        box-shadow: 0 0 15px var(--news-yellow), 0 0 25px var(--news-gold);
    }
}

/* ========================================
   SECTION HEADERS - Colorful Category Style
   Each category gets a unique vibrant color
   ======================================== */
.section .section-head {
    border-bottom: none !important;
    padding-bottom: 15px !important;
    margin-bottom: 25px !important;
    position: relative !important;
}

.section .section-head .title {
    display: inline-flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #C62828 0%, #E53935 100%) !important;
    color: #fff !important;
    padding: 12px 30px 12px 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    font-size: 14px !important;
    border-radius: 5px 0 0 5px !important;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3) !important;
}

.section .section-head .title::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    margin-right: 10px;
    animation: blink 1.5s infinite;
}

.section .section-head .title::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 22px 0 22px 24px;
    border-color: transparent transparent transparent #E53935;
    filter: drop-shadow(3px 0 5px rgba(0, 0, 0, 0.1));
}

/* ============= COLORFUL CATEGORY ROTATION ============= */

/* Technology - Vibrant Blue */
.section:nth-of-type(6n+1) .section-head .title {
    background: linear-gradient(135deg, #1565C0 0%, #1E88E5 100%) !important;
    box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3) !important;
}

.section:nth-of-type(6n+1) .section-head .title::after {
    border-color: transparent transparent transparent #1E88E5;
}

.section:nth-of-type(6n+1) .section-head .link-category {
    color: #1E88E5 !important;
}

/* Lifestyle - Vibrant Green */
.section:nth-of-type(6n+2) .section-head .title {
    background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%) !important;
    box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3) !important;
}

.section:nth-of-type(6n+2) .section-head .title::after {
    border-color: transparent transparent transparent #43A047;
}

.section:nth-of-type(6n+2) .section-head .link-category {
    color: #43A047 !important;
}

/* Business - Vibrant Orange */
.section:nth-of-type(6n+3) .section-head .title {
    background: linear-gradient(135deg, #E65100 0%, #FB8C00 100%) !important;
    box-shadow: 0 4px 15px rgba(251, 140, 0, 0.3) !important;
}

.section:nth-of-type(6n+3) .section-head .title::after {
    border-color: transparent transparent transparent #FB8C00;
}

.section:nth-of-type(6n+3) .section-head .link-category {
    color: #FB8C00 !important;
}

/* Entertainment - Vibrant Purple */
.section:nth-of-type(6n+4) .section-head .title {
    background: linear-gradient(135deg, #6A1B9A 0%, #8E24AA 100%) !important;
    box-shadow: 0 4px 15px rgba(142, 36, 170, 0.3) !important;
}

.section:nth-of-type(6n+4) .section-head .title::after {
    border-color: transparent transparent transparent #8E24AA;
}

.section:nth-of-type(6n+4) .section-head .link-category {
    color: #8E24AA !important;
}

/* Sports - Vibrant Teal */
.section:nth-of-type(6n+5) .section-head .title {
    background: linear-gradient(135deg, #00838F 0%, #00ACC1 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 172, 193, 0.3) !important;
}

.section:nth-of-type(6n+5) .section-head .title::after {
    border-color: transparent transparent transparent #00ACC1;
}

.section:nth-of-type(6n+5) .section-head .link-category {
    color: #00ACC1 !important;
}

/* Politics/News - Vibrant Red */
.section:nth-of-type(6n+6) .section-head .title {
    background: linear-gradient(135deg, #C62828 0%, #E53935 100%) !important;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3) !important;
}

.section:nth-of-type(6n+6) .section-head .title::after {
    border-color: transparent transparent transparent #E53935;
}

.section:nth-of-type(6n+6) .section-head .link-category {
    color: #E53935 !important;
}

/* View All Links */
.section .section-head .link-category {
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.section .section-head .link-category:hover {
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

/* ========================================
   CATEGORY BADGES - Colorful Tags
   ======================================== */
.badge-category {
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.badge-category:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   SECTION CONTAINERS - Modern Card Style
   ======================================== */
.section {
    /*background: #fff !important;*/
    border-radius: 10px !important;
    padding: 30px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Featured Section Special Styling */
.section-featured {
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 30px !important;
}

/* Latest Posts Section */
.section-latest-posts .section-head .title {
    background: linear-gradient(135deg, #37474F 0%, #546E7A 100%) !important;
    box-shadow: 0 4px 15px rgba(84, 110, 122, 0.3) !important;
}

.section-latest-posts .section-head .title::after {
    border-color: transparent transparent transparent #546E7A;
}

/* ========================================
   POST CARDS - Enhanced Hover Effects
   ======================================== */
.post-item,
.item {
    transition: all 0.3s ease !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.post-item:hover,
.item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.post-item .title a:hover,
.item .title a:hover {
    color: var(--news-red) !important;
}

/* Featured post cards border */
.section-featured .item {
    border-bottom: 3px solid transparent !important;
    transition: all 0.3s ease !important;
}

.section-featured .item:hover {
    border-bottom-color: var(--news-red) !important;
}

/* ========================================
   BUTTONS - Gradient Style
   ======================================== */
.btn-custom,
.btn-primary {
    background: var(--bg-gradient-red) !important;
    border: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

.btn-custom:hover,
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(229, 9, 20, 0.4) !important;
}

/* Secondary buttons */
.btn-default {
    background: var(--news-blue) !important;
    color: #fff !important;
    border: none !important;
}

.btn-default:hover {
    background: var(--news-blue-light) !important;
}

/* ========================================
   MEGA MENU - Enhanced Colors (Red Theme)
   ======================================== */
.mega-menu {
    border-top: 3px solid #E53935 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 0 8px 8px !important;
}

.mega-menu .menu-left {
    background: linear-gradient(180deg, #C62828 0%, #B71C1C 100%) !important;
    border-radius: 0 0 0 8px !important;
}

.mega-menu .menu-left a {
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 15px !important;
    transition: all 0.2s ease !important;
}

.mega-menu .menu-left a:hover,
.mega-menu .menu-left a.active {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
    padding-left: 20px !important;
}

.mega-menu .menu-right {
    padding: 20px !important;
}

.mega-menu .menu-post-item .title {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.mega-menu .menu-post-item .title a:hover {
    color: #E53935 !important;
}

/* ========================================
   SIDEBAR WIDGETS - Red Theme Headers
   ======================================== */
.widget .widget-head {
    background: linear-gradient(135deg, #C62828 0%, #E53935 100%) !important;
    color: #fff !important;
    padding: 12px 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-left: none !important;
    border-radius: 5px 5px 0 0 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

.widget {
    border: 1px solid #eee !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

/* ========================================
   FOOTER - Dark Navy Style
   ======================================== */
#footer {
    background: var(--bg-dark-navy) !important;
}

#footer .footer-top {
    background: var(--bg-dark-navy) !important;
    border-top: 4px solid var(--news-red) !important;
}

#footer .footer-bottom {
    background: #081521 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#footer .footer-widget .widget-title {
    color: var(--news-yellow) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--news-red) !important;
    margin-bottom: 15px !important;
}

#footer a {
    color: #b0bec5 !important;
}

#footer a:hover {
    color: var(--news-yellow) !important;
}

/* Social icons in footer */
#footer .social-links a {
    background: rgba(255, 255, 255, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    transition: all 0.3s ease !important;
}

#footer .social-links a:hover {
    background: var(--news-red) !important;
    transform: translateY(-3px) !important;
}

/* ========================================
   MOBILE NAVIGATION - Colorful
   ======================================== */
.header-mobile {
    background: #FFFFFF !important;
}

.nav-mobile {
    background: var(--news-blue) !important;
}

.nav-mobile .nav-item .nav-link {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-mobile .nav-item .nav-link:hover {
    background: var(--news-red) !important;
}

/* ========================================
   SEARCH BOX - Enhanced
   ======================================== */
.search-form .form-input {
    border: 2px solid var(--news-blue) !important;
    border-radius: 25px 0 0 25px !important;
}

.search-form .btn {
    background: var(--news-red) !important;
    border-radius: 0 25px 25px 0 !important;
}

/* ========================================
   PAGINATION - Colorful
   ======================================== */
.pagination .page-link {
    color: var(--news-blue) !important;
    border: 1px solid #ddd !important;
}

.pagination .page-item.active .page-link {
    background: var(--news-red) !important;
    border-color: var(--news-red) !important;
    color: #fff !important;
}

.pagination .page-link:hover {
    background: var(--news-blue) !important;
    color: #fff !important;
}

/* ========================================
   READING PROGRESS BAR (if exists)
   ======================================== */
.reading-progress-bar {
    background: var(--news-red) !important;
    height: 3px !important;
}

/* ========================================
   SCROLL TO TOP BUTTON
   ======================================== */
.scroll-top,
.btn-scroll-top {
    background: var(--news-red) !important;
    color: #fff !important;
}

.scroll-top:hover,
.btn-scroll-top:hover {
    background: var(--news-blue) !important;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */
.dark-mode #nav-top {
    background: linear-gradient(135deg, #0D1B2A 0%, #1A237E 100%) !important;
}

.dark-mode .nav-main {
    background: #1a1a1a !important;
    border-bottom-color: var(--news-red) !important;
}

.dark-mode .nav-main .navbar-nav .nav-link {
    color: #fff !important;
}

.dark-mode .section .section-head {
    border-bottom-color: #333 !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    animation: slideIn 0.5s ease-out;
}

/* Live indicator dot animation */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--news-red);
    border-radius: 50%;
    margin-right: 5px;
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}