/* ==========================================================================
   💎 ULTRA PREMIUM HOMEPAGE - HORN ANALYSIS
   Advanced Editorial Design System with Micro-Animations
   Version: 2.0 - Complete Redesign
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 DESIGN TOKENS & CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* Premium Color Palette */
    --premium-navy: #0a1628;
    --premium-navy-light: #12263f;
    --premium-gold: #d4a853;
    --premium-gold-light: #f1d89a;
    --premium-charcoal: #1a1a2e;
    --premium-slate: #2d3748;
    --premium-cream: #fffdf7;
    --premium-ivory: #f8f6f0;

    /* Gradient Definitions */
    --gradient-gold: linear-gradient(135deg, #d4a853 0%, #f1d89a 50%, #d4a853 100%);
    --gradient-navy: linear-gradient(135deg, #0a1628 0%, #1e3a5f 50%, #0a1628 100%);
    --gradient-premium: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-dark-overlay: linear-gradient(to top, rgba(10, 22, 40, 0.98) 0%, rgba(10, 22, 40, 0.6) 40%, transparent 100%);

    /* Premium Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.18);
    --shadow-gold: 0 10px 40px rgba(212, 168, 83, 0.25);
    --shadow-hover: 0 25px 70px rgba(0, 0, 0, 0.15);

    /* Typography Scale */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-heading: 'Outfit', -apple-system, sans-serif;
    --font-body: 'Lora', Georgia, serif;

    /* Timing Functions */
    --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --section-padding: 60px;
    --container-padding: 20px;

    /* Premium Background Patterns */
    --pattern-dots: radial-gradient(circle, rgba(212, 168, 83, 0.05) 1px, transparent 1px);
    --pattern-grid: linear-gradient(rgba(212, 168, 83, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 168, 83, 0.03) 1px, transparent 1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ GLOBAL ENHANCEMENTS & ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection Styling */
::selection {
    background: var(--premium-gold);
    color: var(--premium-navy);
}

/* Fade-in Animation for Scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(212, 168, 83, 0.4);
    }

    50% {
        box-shadow: 0 0 30px 10px rgba(212, 168, 83, 0.2);
    }
}

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.15) translate(-2%, -2%);
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📐 SECTION BAND REDESIGN
   ═══════════════════════════════════════════════════════════════════════════ */
.section-band {
    padding: var(--section-padding) 0 !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}

/* Alternating Section Backgrounds - NOW DARK */
.section-band:nth-child(odd) {
    background: #0B1221 !important;
    /* Deep Navy */
}

.section-band:nth-child(even) {
    background: #0F172A !important;
    /* Slate Dark */
}

/* Subtle Section Separator */
.section-band::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--premium-gold), transparent);
}

/* Remove separator from hero */
.section-band.bg-hero::after {
    display: none;
}

/* Premium Dark Section Background Variants - Varied Tones */
.section-band.bg-light {
    background: #0B1120 !important;
    /* Deep Navy - Slightly lighter than hero */
}

.section-band.bg-hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #020617 !important;
    /* Midnight - Almost Black */
}

.section-band.bg-white {
    background: #0F172A !important;
    /* Slate 900 */
}

.section-band.bg-politics {
    background: #111827 !important;
    /* Gray 900 - Cool Tone */
}

.section-band.bg-opinion {
    background: #1e1e24 !important;
    /* Raisin Black - Warm Tone */
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.section-band.bg-opinion::before {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📝 PREMIUM SECTION TITLES
   ═══════════════════════════════════════════════════════════════════════════ */
.section-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 2.2rem !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
    margin-bottom: 30px !important;
    position: relative !important;
    padding-bottom: 15px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px;
    color: #ffffff !important;
    /* White text for dark mode */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
}

/* Small Colored Accent Text (e.g. LATEST) */
.title-accent {
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--premium-gold) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    transform: translateY(-2px);
}

/* Gold accent line under title */
/* Gold accent line under title */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 6px;
    background: var(--gradient-gold);
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(212, 168, 83, 0.3);
}

.section-title:hover::after {
    width: 120px;
}

/* Decorative element before title */
/* Decorative element before title - Removed for cleaner look */
.section-title::before {
    display: none;
}

.section-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s var(--ease-smooth);
}

.section-title a:hover {
    color: var(--premium-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎬 HERO CAROUSEL - CINEMATIC EXPERIENCE
   ═══════════════════════════════════════════════════════════════════════════ */
#heroCarousel {
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: var(--shadow-xl) !important;
    margin-bottom: 0;
}

#heroCarousel .carousel-item {
    height: 75vh !important;
    min-height: 600px !important;
    max-height: 800px !important;
}

/* Ken Burns Effect on Images */
#heroCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75) saturate(1.1);
    transition: none !important;
}

#heroCarousel .carousel-item.active img {
    animation: kenBurns 12s ease-out forwards;
}

/* Premium Gradient Overlay */
#heroCarousel .carousel-item .position-absolute,
#heroCarousel .position-absolute {
    background: var(--gradient-dark-overlay) !important;
    padding: 60px 50px 80px !important;
    text-align: left !important;
}

/* Hero Category Badge */
#heroCarousel .cat-badge {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 2px !important;
    padding: 10px 20px !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    margin-bottom: 25px !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}

#heroCarousel .cat-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 3s infinite;
}

/* Hero Title - Editorial Style */
#heroCarousel .post-title,
#heroCarousel .display-4 {
    font-family: var(--font-display) !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    max-width: 900px !important;
    letter-spacing: -0.02em !important;
}

#heroCarousel .post-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    background-image: linear-gradient(var(--premium-gold), var(--premium-gold));
    background-repeat: no-repeat;
    background-size: 0% 3px;
    background-position: left bottom;
    transition: background-size 0.5s var(--ease-premium);
}

#heroCarousel .post-title a:hover {
    background-size: 100% 3px;
}

/* Hero Author Line */
#heroCarousel .text-white.opacity-75 {
    opacity: 0.9 !important;
    font-family: var(--font-heading) !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px !important;
}

/* Carousel Controls - Minimal Design */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    width: 80px !important;
    opacity: 0 !important;
    transition: opacity 0.4s var(--ease-smooth);
}

#heroCarousel:hover .carousel-control-prev,
#heroCarousel:hover .carousel-control-next {
    opacity: 1 !important;
}

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s var(--ease-smooth);
}

#heroCarousel .carousel-control-prev-icon:hover,
#heroCarousel .carousel-control-next-icon:hover {
    background-color: var(--premium-gold) !important;
    transform: scale(1.1);
}

/* Carousel Indicators - Premium Pills */
#heroCarousel .carousel-indicators {
    bottom: 30px !important;
    gap: 8px;
}

#heroCarousel .carousel-indicators button {
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    transition: all 0.4s var(--ease-smooth);
}

#heroCarousel .carousel-indicators button.active {
    width: 60px !important;
    background-color: var(--premium-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📰 LATEST UPDATES - MAGAZINE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main Hero Card in Latest Section */
.col-lg-8>.card {
    position: relative;
    transition: all 0.5s var(--ease-premium);
}

.col-lg-8 .img-hover-box {
    position: relative;
    overflow: hidden;
    border-radius: 8px !important;
    box-shadow: var(--shadow-lg);
}

.col-lg-8 .img-hover-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 22, 40, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.col-lg-8 .img-hover-box img {
    transition: transform 0.8s var(--ease-premium), filter 0.5s ease;
}

.col-lg-8 .card:hover .img-hover-box img {
    transform: scale(1.08);
    filter: brightness(0.9);
}

/* Main Hero Title */
.col-lg-8 .card .post-title {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.col-lg-8 .card .post-title a {
    color: #ffffff !important;
    display: inline;
    background-image: linear-gradient(transparent 90%, var(--premium-gold) 90%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.5s var(--ease-premium);
    text-decoration: none !important;
}

.col-lg-8 .card:hover .post-title a {
    background-size: 100% 100%;
}

/* Category Badge Styling */
.col-lg-8 .badge.cat-badge,
.badge.cat-badge {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 1.5px !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    position: relative;
    overflow: hidden;
}

/* Sidebar Items in Latest Section */
.col-lg-4>.card {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 20px 0 !important;
    margin-bottom: 0 !important;
    transition: all 0.4s var(--ease-smooth);
    position: relative;
}

.col-lg-4>.card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--gradient-gold);
    transition: height 0.4s var(--ease-smooth);
    border-radius: 2px;
}

.col-lg-4>.card:hover::before {
    height: 70%;
}

.col-lg-4>.card:hover {
    padding-left: 15px !important;
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.05) 0%, transparent 100%);
}

.col-lg-4>.card:last-child {
    border-bottom: none !important;
}

/* Sidebar Thumbnails */
.col-lg-4 .img-hover-box {
    border-radius: 6px !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s var(--ease-smooth);
}

.col-lg-4 .card:hover .img-hover-box {
    box-shadow: var(--shadow-md);
    transform: scale(1.05);
}

/* Sidebar Titles */
.col-lg-4 .post-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
    color: var(--premium-charcoal) !important;
    transition: color 0.3s ease;
}

.col-lg-4 .card:hover .post-title {
    color: var(--premium-navy) !important;
}

.col-lg-4 .post-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Sidebar Badges */
.col-lg-4 .badge {
    font-size: 0.65rem !important;
    padding: 5px 10px !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎴 MIDDLE STRIP - FEATURED GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.py-4.border-bottom.bg-white {
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 50%, #f8f9fc 100%) !important;
    padding: 70px 0 !important;
    border: none !important;
}

.col-md-3 .card {
    background: transparent !important;
    transition: all 0.5s var(--ease-premium);
    position: relative;
}

.col-md-3 .card::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.1), transparent);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.col-md-3 .card:hover::before {
    opacity: 1;
}

.col-md-3 .card:hover {
    transform: translateY(-8px);
}

.col-md-3 .img-hover-box {
    border-radius: 8px !important;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all 0.5s var(--ease-premium);
}

.col-md-3 .card:hover .img-hover-box {
    box-shadow: var(--shadow-hover);
}

.col-md-3 .img-hover-box img {
    transition: transform 0.7s var(--ease-premium);
}

.col-md-3 .card:hover .img-hover-box img {
    transform: scale(1.1);
}

/* Middle Strip Titles */
.col-md-3 h5.fw-bold {
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 15px !important;
}

.col-md-3 h5.fw-bold a {
    color: var(--premium-charcoal) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.col-md-3 h5.fw-bold a:hover {
    color: var(--premium-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📦 GENERIC CARD ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
    border: none !important;
    background: transparent !important;
}

.card.shadow-sm {
    box-shadow: var(--shadow-md) !important;
    border-radius: 10px !important;
    overflow: hidden;
    transition: all 0.5s var(--ease-premium);
}

.card.shadow-sm:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-5px);
}

/* Premium Image Hover Effect */
.img-hover-box {
    overflow: hidden;
    border-radius: 6px !important;
    position: relative;
}

.img-hover-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 22, 40, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card:hover .img-hover-box::after {
    opacity: 1;
}

.img-hover-box img {
    transition: transform 0.7s var(--ease-premium);
}

.card:hover .img-hover-box img {
    transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🏷️ CATEGORY BADGES - PREMIUM STYLING
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    letter-spacing: 1px !important;
    padding: 6px 14px !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    position: relative;
    transition: all 0.3s ease;
}

.badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎠 HORIZONTAL SCROLL LAYOUTS - REFINED
   ═══════════════════════════════════════════════════════════════════════════ */
.horizontal-scroll-layout {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px;
    padding: 30px 10px 40px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Custom Scrollbar */
.horizontal-scroll-layout::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll-layout::-webkit-scrollbar-track {
    background: rgba(10, 22, 40, 0.1);
    border-radius: 4px;
}

.horizontal-scroll-layout::-webkit-scrollbar-thumb {
    background: var(--gradient-gold);
    border-radius: 4px;
}

.horizontal-scroll-layout::-webkit-scrollbar-thumb:hover {
    background: var(--premium-gold);
}

/* Scroll Items */
.h-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: all 0.5s var(--ease-premium);
}

.h-item:hover {
    transform: translateY(-10px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   💫 OPINION SECTION - STORIES DESIGN (ENHANCED)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Opinion Circle Item - Dark Mode Fix */
.circle-scroll-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 300px !important;
    flex: 0 0 300px !important;
    padding: 35px 25px;
    background: #1e293b !important;
    /* Dark Slate to match Style */
    backdrop-filter: blur(20px);
    border-radius: 28px;
    transition: all 0.5s var(--ease-bounce);
    position: relative;
    overflow: visible;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle white border */
}

.circle-scroll-item::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 30px;
    padding: 3px;
    background: linear-gradient(135deg, var(--premium-gold), #f1d89a, var(--premium-navy));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.circle-scroll-item:hover::before {
    opacity: 1;
}

.circle-scroll-item:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 80px rgba(212, 168, 83, 0.25);
    background: #ffffff;
}

/* Avatar Box - Premium Ring */
.circle-avatar-box {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(135deg, var(--premium-gold) 0%, #f1d89a 30%, var(--premium-gold) 60%, var(--premium-navy) 100%);
    background-size: 300% 300%;
    animation: gradientRotate 6s ease infinite;
    margin-bottom: 25px;
    transition: all 0.5s var(--ease-bounce);
    box-shadow: 0 20px 50px rgba(212, 168, 83, 0.35);
    position: relative;
}

@keyframes gradientRotate {

    0%,
    100% {
        background-position: 0% 50%;
    }

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

.circle-avatar-box::before {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 168, 83, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.circle-scroll-item:hover .circle-avatar-box::before {
    opacity: 1;
}

.circle-avatar-box img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    transition: all 0.5s var(--ease-bounce);
    filter: grayscale(15%) contrast(1.05);
}

.circle-scroll-item:hover .circle-avatar-box {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 25px 60px rgba(212, 168, 83, 0.45);
}

.circle-scroll-item:hover .circle-avatar-box img {
    filter: grayscale(0%) contrast(1.1);
    border-color: var(--premium-gold-light);
}

/* Author Name */
.circle-name {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--premium-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 12px;
    transition: all 0.4s ease;
}

.circle-name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--gradient-gold);
    transition: width 0.4s var(--ease-smooth);
    border-radius: 2px;
}

.circle-scroll-item:hover .circle-name::after {
    width: 60px;
}

.circle-scroll-item:hover .circle-name {
    color: var(--premium-gold) !important;
}

/* Snippet Quote */
.circle-snippet {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    color: #555 !important;
    line-height: 1.7 !important;
    font-style: italic !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 15px;
}

.circle-snippet::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 4rem;
    color: rgba(212, 168, 83, 0.15);
    font-family: Georgia, serif;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   💻 TECHNOLOGY / GALLERY CARDS - MODERN TECH STYLE
   ═══════════════════════════════════════════════════════════════════════════*/
.tech-new-card {
    display: flex !important;
    gap: 20px;
    align-items: center;
    background: #1e293b !important;
    /* Slate 800 */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium);
    padding: 15px;
}

.tech-new-card p,
.tech-new-card .text-muted,
.tech-new-card .article-excerpt {
    display: none !important;
}

.tech-new-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(212, 168, 83, 0.3) !important;
}

.tech-new-card .ratio img {
    transition: transform 0.6s var(--ease-premium);
}

.tech-new-card:hover .ratio img {
    transform: scale(1.1);
}

.tech-body {
    padding: 25px !important;
}

.tech-title {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
    color: var(--premium-charcoal) !important;
}

.tech-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.tech-title a:hover {
    color: var(--premium-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📊 GRID LAYOUTS - PREMIUM CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* 3-Column Grid Layout */
.col-md-4>.card.border-0 {
    transition: all 0.5s var(--ease-premium);
    padding: 0 !important;
}

.col-md-4>.card.border-0:hover {
    transform: translateY(-12px);
}

.col-md-4 .img-hover-box {
    border-radius: 10px !important;
    box-shadow: var(--shadow-md);
    transition: all 0.5s var(--ease-premium);
}

.col-md-4 .card:hover .img-hover-box {
    box-shadow: var(--shadow-lg);
}

/* Grid Post Titles */
.col-md-4 h3.post-title {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    margin-top: 15px !important;
}

.col-md-4 h3.post-title a {
    color: var(--premium-charcoal) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.col-md-4 h3.post-title a:hover {
    color: var(--premium-gold) !important;
}

/* Article Excerpt */
.article-excerpt {
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin-top: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📋 SPLIT LAYOUT (HERO + SIDEBAR)
   ═══════════════════════════════════════════════════════════════════════════ */
.section-band.bg-politics .col-lg-8 .img-hover-box,
.section-band .col-lg-8 .img-hover-box {
    box-shadow: var(--shadow-lg);
    border-radius: 10px !important;
}

/* Split Layout Hero */
.section-band .col-lg-8 .card.border-0 {
    position: relative;
}

.section-band .col-lg-8 .position-absolute {
    background: linear-gradient(to top, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.4) 50%, transparent 100%) !important;
    padding: 40px !important;
    border-radius: 0 0 10px 10px !important;
}

/* Split Layout Sidebar */
.section-band .col-lg-4 .card.opinion-new-card {
    background: #1e293b !important;
    /* Dark Card */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium);
}

.opinion-new-card p,
.opinion-new-card .text-muted,
.opinion-new-card .article-excerpt {
    display: none !important;
}

.opinion-new-card .img-hover-box {
    margin: 15px 15px 0 15px;
    border-radius: 8px !important;
}

.section-band .col-lg-4 .card.border-0 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 18px 0 !important;
    transition: all 0.4s var(--ease-smooth);
}

.section-band .col-lg-4 .card.border-0:hover {
    padding-left: 15px !important;
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.08) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   📝 LIST LAYOUT - EDITORIAL STYLE
   ═══════════════════════════════════════════════════════════════════════════ */
.section-band .col-lg-8>.card.border-0.mb-4 {
    padding: 25px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.4s var(--ease-smooth);
    position: relative;
}

.section-band .col-lg-8>.card.border-0.mb-4::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--gradient-gold);
    border-radius: 2px;
    transition: height 0.4s var(--ease-smooth);
}

.section-band .col-lg-8>.card.border-0.mb-4:hover::before {
    height: 80%;
}

.section-band .col-lg-8>.card.border-0.mb-4:hover {
    padding-left: 15px !important;
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.05) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔄 ZIG ZAG LAYOUT - ALTERNATING CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.section-band .card.border-0.shadow-sm.mb-4.overflow-hidden {
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.5s var(--ease-premium);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.section-band .card.border-0.shadow-sm.mb-4.overflow-hidden:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-8px);
    border-color: rgba(212, 168, 83, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🏛️ OVERLAY GRID - DRAMATIC CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.card.border-0.text-white.rounded-3.overflow-hidden.position-relative.shadow-sm {
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    transition: all 0.5s var(--ease-premium);
}

.card.border-0.text-white.rounded-3.overflow-hidden.position-relative.shadow-sm:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-xl) !important;
}

.card.border-0.text-white.rounded-3 img {
    transition: transform 0.6s var(--ease-premium), filter 0.4s ease;
}

.card.border-0.text-white.rounded-3:hover img {
    transform: scale(1.15);
    filter: brightness(0.6);
}

.card-img-overlay {
    background: linear-gradient(to top, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.3) 50%, transparent 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔳 SCROLL CARD LAYOUT - MODERN WHITE CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.horizontal-scroll-layout .card.h-100.border-0.shadow-sm {
    border-radius: 14px !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.5s var(--ease-premium);
    overflow: hidden;
}

.horizontal-scroll-layout .card.h-100.border-0.shadow-sm:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-10px);
    border-color: rgba(212, 168, 83, 0.2);
}

.horizontal-scroll-layout .card-body {
    padding: 20px !important;
}

.horizontal-scroll-layout .card-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
}

.horizontal-scroll-layout .card-title a {
    color: var(--premium-charcoal) !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.horizontal-scroll-layout .card-title a:hover {
    color: var(--premium-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    :root {
        --section-padding: 60px;
    }

    .section-title {
        font-size: 2rem !important;
    }

    #heroCarousel .carousel-item {
        height: 60vh !important;
        min-height: 500px !important;
    }

    #heroCarousel .post-title {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 992px) {
    :root {
        --section-padding: 50px;
    }

    .section-title {
        font-size: 1.75rem !important;
        margin-bottom: 35px !important;
    }

    #heroCarousel .carousel-item {
        height: 55vh !important;
        min-height: 450px !important;
    }

    #heroCarousel .post-title {
        font-size: 2rem !important;
    }

    .col-lg-8 .card .post-title {
        font-size: 1.8rem !important;
    }

    .circle-scroll-item {
        width: 260px !important;
        flex: 0 0 260px !important;
    }

    .circle-avatar-box {
        width: 150px !important;
        height: 150px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 40px;
    }

    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 30px !important;
    }

    .section-title::before {
        display: none;
    }

    #heroCarousel .carousel-item {
        height: 50vh !important;
        min-height: 400px !important;
    }

    #heroCarousel .post-title {
        font-size: 1.6rem !important;
    }

    #heroCarousel .position-absolute {
        padding: 30px 25px 50px !important;
    }

    .col-lg-8 .card .post-title {
        font-size: 1.5rem !important;
    }

    .circle-scroll-item {
        width: 240px !important;
        flex: 0 0 240px !important;
        padding: 25px 18px;
    }

    .circle-avatar-box {
        width: 130px !important;
        height: 130px !important;
    }

    .circle-name {
        font-size: 1rem !important;
    }

    .circle-snippet {
        font-size: 0.9rem !important;
    }

    /* Adjust card layouts */
    .horizontal-scroll-layout {
        gap: 20px;
        padding: 20px 5px 30px 5px;
    }

    .h-item {
        width: 260px !important;
        min-width: 260px !important;
    }
}

@media (max-width: 576px) {
    :root {
        --section-padding: 35px;
    }

    .section-title {
        font-size: 1.35rem !important;
    }

    #heroCarousel .carousel-item {
        height: 45vh !important;
        min-height: 350px !important;
    }

    #heroCarousel .post-title {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }

    #heroCarousel .cat-badge {
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }

    .col-lg-8 .card .post-title {
        font-size: 1.3rem !important;
    }

    .circle-scroll-item {
        width: 220px !important;
        flex: 0 0 220px !important;
        border-radius: 20px;
    }

    .circle-avatar-box {
        width: 110px !important;
        height: 110px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌙 DARK MODE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
body.dark-mode .section-band:nth-child(odd),
body.dark-mode .section-band:nth-child(even) {
    background: var(--premium-charcoal) !important;
}

body.dark-mode .section-band.bg-light {
    background: linear-gradient(180deg, #1a1a2e 0%, #252540 100%) !important;
}

body.dark-mode .section-title {
    color: #ffffff !important;
}

body.dark-mode .col-lg-4 .post-title,
body.dark-mode .col-md-3 h5.fw-bold a,
body.dark-mode .col-md-4 h3.post-title a,
body.dark-mode .tech-title,
body.dark-mode .tech-title a,
body.dark-mode .horizontal-scroll-layout .card-title a {
    color: #e0e0e0 !important;
}

body.dark-mode .circle-scroll-item {
    background: rgba(30, 30, 50, 0.95);
    border-color: rgba(212, 168, 83, 0.2);
}

body.dark-mode .circle-name {
    color: #ffffff !important;
}

body.dark-mode .circle-snippet {
    color: #aaa !important;
}

body.dark-mode .card.shadow-sm,
body.dark-mode .tech-new-card,
body.dark-mode .horizontal-scroll-layout .card.h-100 {
    background: var(--premium-slate) !important;
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .article-excerpt {
    color: #999 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ✨ FINAL POLISH - MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Link Hover Underline Effect */
a.text-dark,
a.text-decoration-none {
    position: relative;
}

/* Smooth Focus States for Accessibility */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--premium-gold);
    outline-offset: 3px;
}

/* Global Dark Theme Text Overrides */
p,
.card-text,
.list-group-item,
li,
span,
.text-muted {
    color: #cbd5e1 !important;
    /* Slate 300 - Light Grey */
}

/* Global Dark Theme Title Overrides */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.post-title,
.post-title a,
.tech-new-card .post-title,
.tech-new-card h3,
.opinion-new-card h3 {
    color: #ffffff !important;
}

.card {
    background: transparent !important;
}

/* Ensure links are visible */
a:not(.btn) {
    color: #ffffff !important;
}

a:not(.btn):hover {
    color: var(--premium-gold) !important;
}

/* Print Styles - Hide decorative elements */
@media print {

    .section-band::after,
    .section-title::before,
    .section-title::after,
    .circle-scroll-item::before,
    .circle-avatar-box::before {
        display: none !important;
    }

    .horizontal-scroll-layout {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   💎 ADVANCED PREMIUM ENHANCEMENTS - ULTRA LUXURY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subtle Background Pattern for Sections */
.section-band.bg-light {
    background-image: var(--pattern-dots) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 10px 10px !important;
}

.section-band.bg-white {
    position: relative;
}

.section-band.bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--pattern-grid);
    background-size: 40px 40px;
    opacity: 0.3;
    pointer-events: none;
}

/* Premium Card Lift Effect */
.card {
    will-change: transform;
}

.card:hover {
    z-index: 10;
}

/* Enhanced Image Quality */
.img-hover-box img,
.card-img-top,
.carousel-item img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Premium Typography Enhancement */
.post-title,
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sophisticated Badge Glow */
.badge {
    position: relative;
}

.badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: inherit;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.badge:hover::before {
    opacity: 0.5;
}

/* Premium Scrollbar for Horizontal Layouts */
.horizontal-scroll-layout {
    scrollbar-width: thin;
    scrollbar-color: var(--premium-gold) rgba(10, 22, 40, 0.1);
}

.horizontal-scroll-layout::-webkit-scrollbar {
    height: 10px;
}

.horizontal-scroll-layout::-webkit-scrollbar-track {
    background: linear-gradient(to right, rgba(10, 22, 40, 0.05), rgba(212, 168, 83, 0.05), rgba(10, 22, 40, 0.05));
    border-radius: 5px;
}

.horizontal-scroll-layout::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--premium-gold), var(--premium-gold-light), var(--premium-gold));
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.horizontal-scroll-layout::-webkit-scrollbar-thumb:hover {
    background: var(--premium-gold);
}

/* Enhanced Section Dividers */
.section-band+.section-band {
    position: relative;
}

.section-band+.section-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--premium-gold), transparent);
    opacity: 0.3;
}

/* Premium Loading States */
@keyframes shimmerLoading {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.loading-shimmer {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(212, 168, 83, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 1000px 100%;
    animation: shimmerLoading 2s infinite;
}

/* Sophisticated Parallax Effect for Hero */
#heroCarousel .carousel-item {
    perspective: 1000px;
}

#heroCarousel .carousel-item img {
    transform-style: preserve-3d;
}

/* Premium Gradient Overlays */
.img-hover-box::after {
    background: linear-gradient(135deg,
            rgba(10, 22, 40, 0) 0%,
            rgba(10, 22, 40, 0.1) 50%,
            rgba(212, 168, 83, 0.15) 100%) !important;
}

/* Enhanced Category Badge Styles */
.cat-badge,
.badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Luxury Card Borders */
.card.shadow-sm,
.tech-new-card,
.opinion-new-card {
    border: 1px solid rgba(212, 168, 83, 0.1) !important;
}

.card.shadow-sm:hover,
.tech-new-card:hover,
.opinion-new-card:hover {
    border-color: rgba(212, 168, 83, 0.3) !important;
}

/* Premium Text Selection */
::selection {
    background: var(--premium-gold);
    color: var(--premium-navy);
    text-shadow: none;
}

::-moz-selection {
    background: var(--premium-gold);
    color: var(--premium-navy);
    text-shadow: none;
}

/* Sophisticated Container Shadows */
.container {
    position: relative;
}

/* Enhanced Readability */
.article-excerpt,
.card-text,
p {
    font-feature-settings: "kern" 1, "liga" 1;
    letter-spacing: 0.01em;
}

/* Premium Button Styles (if any) */
.btn {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s var(--ease-premium);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Refined Image Captions */
figcaption,
.image-caption {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: #666;
    margin-top: 10px;
    text-align: center;
}

/* Premium Blockquote Enhancement */
blockquote {
    position: relative;
    padding-left: 30px;
    border-left: 4px solid var(--premium-gold);
    font-style: italic;
    color: var(--premium-slate);
}

blockquote::before {
    content: '"';
    position: absolute;
    left: -10px;
    top: -20px;
    font-size: 4rem;
    color: rgba(212, 168, 83, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

/* Advanced Grid Layouts */
.row {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

/* Premium Spacing System */
.section-band .container {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Sophisticated Hover States for All Links */
a {
    transition: all 0.3s var(--ease-premium);
}

a:not(.btn):hover {
    text-decoration: none;
}

/* Enhanced Focus Indicators */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--premium-gold);
    outline-offset: 4px;
    border-radius: 2px;
}

/* Premium Loading Animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.card,
.section-band {
    animation: fadeInScale 0.6s var(--ease-premium) backwards;
}

/* Stagger animation for cards */
.row>[class*="col-"]:nth-child(1) .card {
    animation-delay: 0.05s;
}

.row>[class*="col-"]:nth-child(2) .card {
    animation-delay: 0.1s;
}

.row>[class*="col-"]:nth-child(3) .card {
    animation-delay: 0.15s;
}

.row>[class*="col-"]:nth-child(4) .card {
    animation-delay: 0.2s;
}

.row>[class*="col-"]:nth-child(5) .card {
    animation-delay: 0.25s;
}

.row>[class*="col-"]:nth-child(6) .card {
    animation-delay: 0.3s;
}

/* Premium Dark Mode Refinements */
body.dark-mode .section-band.bg-white::before {
    opacity: 0.1;
}

body.dark-mode .badge {
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .card.shadow-sm,
body.dark-mode .tech-new-card,
body.dark-mode .opinion-new-card {
    background: rgba(30, 30, 50, 0.6) !important;
    backdrop-filter: blur(10px);
}

/* Elegant Transitions */
* {
    transition-timing-function: var(--ease-premium);
}

/* Premium Accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    .section-band::after,
    .section-title::after {
        display: none;
    }

    .badge,
    .nav-link {
        border: 2px solid currentColor;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   📱 MOBILE & RESPONSIVE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* Stack layout adjustments */
    .row>[class*="col-"] {
        margin-bottom: 25px;
    }

    /* Reduce Section Padding */
    .section-band {
        padding: 40px 0 !important;
    }

    /* Hero Carousel Height on Tablet */
    #heroCarousel .carousel-item {
        height: 50vh !important;
        min-height: 400px !important;
    }

    /* Adjust Title Sizes */
    .section-title {
        font-size: 1.8rem !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .title-accent {
        font-size: 0.9rem !important;
    }

    /* Middle Strip Grid */
    .col-md-3 {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {

    /* Global Container Padding */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Hero Carousel Mobile */
    #heroCarousel .carousel-item {
        height: 60vh !important;
        min-height: 400px !important;
    }

    #heroCarousel .post-title,
    #heroCarousel .display-4 {
        font-size: 2rem !important;
    }

    #heroCarousel .position-absolute {
        padding: 30px 20px 40px !important;
    }

    /* Top Bar Mobile Adjustments */
    .top-nav-bar,
    .top-bar {
        justify-content: center;
    }

    .top-nav-bar .date-text {
        display: none !important;
        /* Hide date on very small screens to save space if needed */
    }

    /* Section Titles Mobile */
    .section-title {
        font-size: 1.6rem !important;
        margin-bottom: 20px !important;
    }

    .title-accent {
        font-size: 0.85rem !important;
        width: 100%;
        display: block;
        margin-bottom: -5px;
    }

    /* Fix Latest Updates Grid */
    .col-lg-8 .img-hover-box img {
        height: 300px !important;
    }

    .col-lg-8 .card .post-title {
        font-size: 1.6rem !important;
    }

    /* Adjust Sidebar Items */
    .col-lg-4>.card {
        padding: 15px 0 !important;
    }

    .col-lg-4 .img-hover-box {
        width: 90px !important;
        height: 65px !important;
    }

    /* Opinion Circles */
    .circle-scroll-item {
        width: 240px !important;
        flex: 0 0 240px !important;
        padding: 25px 15px;
    }

    .circle-avatar-box {
        width: 120px !important;
        height: 120px !important;
    }

    /* Horizontal Scroll Containers */
    .horizontal-scroll-layout {
        padding: 20px 10px 30px 10px;
        gap: 15px;
    }

    .h-item {
        width: 240px !important;
    }
}

@media (max-width: 576px) {
    /* Ultra Small Screens */

    /* Hero Text */
    #heroCarousel .post-title,
    #heroCarousel .display-4 {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    #heroCarousel .cat-badge {
        padding: 6px 12px !important;
        font-size: 0.65rem !important;
    }

    /* Footer / General Text */
    body {
        font-size: 15px;
    }

    /* Navbar Brand */
    .brand-logo .word-horn {
        font-size: 22px !important;
    }

    .brand-logo .word-analysis {
        font-size: 9px !important;
    }

    .logo-icon .shield-shape {
        height: 36px !important;
    }
}