/* ============================================================ */
/* THE MIND FACTORY — ADVANCED TRANSITIONS & KINETIC ANIMATIONS */
/* ============================================================ */

/* Editorial Rule */
.editorial-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--navy) 0%, rgba(1, 26, 56, 0.15) 100%);
}

/* Modal Overlay Transitions */
.modal-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Book 3D Elevation */
.book-stage {
    perspective: 1400px;
}
.book-spine-shadow {
    filter: drop-shadow(-18px 24px 30px rgba(0, 23, 51, 0.45));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.book-stage:hover .book-spine-shadow {
    transform: translateY(-8px) rotateY(4deg) scale(1.02);
    filter: drop-shadow(-24px 32px 42px rgba(0, 23, 51, 0.55));
}

/* View Switching (Multi-page feel) with smooth cross-fade */
.page-view {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-home,
.page-view.active-view {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0);
}
.page-view:not(.active-view):not(#view-home) {
    display: none !important;
}
body.has-custom-view #view-home:not(.active-view) {
    display: none !important;
}

/* Nav Link Underline with smooth cubic-bezier */
.nav-item-link {
    position: relative;
    transition: color 0.25s ease;
}
.nav-item-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: var(--red);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item-link:hover::after, .nav-item-link.nav-current::after {
    width: 100%;
}

/* Scroll-triggered reveal animations with safe progressive enhancement */
.reveal-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
body.js-ready .reveal-on-scroll:not(.is-revealed) {
    opacity: 0;
    transform: translateY(30px);
}
.reveal-on-scroll.is-revealed {
    opacity: 1 !important;
    transform: translateY(0);
}

/* Ensure articles grids are always visible without delay */
#home-articles-grid .reveal-on-scroll,
#articles-grid-container .reveal-on-scroll {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Ensure hover transforms can never be blocked by is-revealed */
.reveal-on-scroll.is-revealed:hover {
    transform: none;
}

/* Staggered delay helpers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Hover elevation & fluid card micro-interactions */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -10px rgba(1, 26, 56, 0.16);
}

/* Kinetic floating animation */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.float-gentle {
    animation: gentleFloat 6s ease-in-out infinite;
}

/* Smooth marquee ticker animation */
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: 200%;
    animation: tickerScroll 28s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* Testimonial slider slide transitions */
.slider-slide-in {
    animation: sliderFadeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes sliderFadeIn {
    0% {
        opacity: 0;
        transform: translateX(18px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Reading / Scroll progress bar indicator at top */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 100%);
    width: 0%;
    z-index: 100;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 8px rgba(217, 0, 0, 0.6);
}

/* Ambient Glow Pulse */
@keyframes ambientPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(1.08); }
}
.ambient-glow {
    animation: ambientPulse 8s ease-in-out infinite;
}

/* Subtle Shimmer for Highlights */
@keyframes subtleShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.text-shimmer {
    background: linear-gradient(90deg, #FFFFFF 0%, #FF6B6B 50%, #FFFFFF 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: subtleShimmer 7s linear infinite;
}

/* Magnetic interactive tags */
.magnetic-tag {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.magnetic-tag:hover {
    transform: translateY(-3px) scale(1.04);
    background-color: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

/* Enhanced card shine hover effect */
.card-shine {
    position: relative;
    overflow: hidden;
}
.card-shine::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(217, 0, 0, 0.08) 0%, transparent 65%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.card-shine:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Responsive Fluid Typography & Platform Optimization */
@media (max-width: 640px) {
    h1 { font-size: 2.25rem !important; line-height: 1.1 !important; }
    .hero-diagonal-container { min-height: auto !important; }
    .hero-title-in { font-size: 2.35rem !important; }
    .hero-title-in .hero-word-red, .hero-title-in .text-5xl { font-size: 2.85rem !important; }
    .dark-panel { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .brand-divider { padding: 0 1rem !important; height: 38px !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .hero-diagonal-container { min-height: 600px !important; }
    .hero-title-in { font-size: 3.25rem !important; }
}

/* Prevent Horizontal Overflow */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Mobile Drawer Transition */
#mobile-nav-drawer {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-nav-drawer:not(.hidden) {
    display: block;
    animation: mobileMenuSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes mobileMenuSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Touch Button Target Optimization */
button, a, input, select, textarea {
    touch-action: manipulation;
}

/* Hero Diagonal Layout & Authentic Brush Effect */
.hero-diagonal-container {
    position: relative;
    background: #f8fafc;
    overflow: hidden;
}

.mountains-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/mountains-bg.jpg');
    background-size: cover;
    background-position: center 30%;
    opacity: 0.32;
    pointer-events: none;
    z-index: 1;
}

.mountains-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

.skyline-bg {
    display: none;
}

.dark-panel {
    background-color: var(--navy);
    position: relative;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}

@media (max-width: 1024px) {
    .dark-panel {
        clip-path: none !important;
    }
}

/* Artistic Brush Stroke Simulation */
.brush-stroke-red {
    position: absolute;
    top: 0;
    left: 6%;
    width: 140px;
    height: 100%;
    background: linear-gradient(135deg, rgba(217, 0, 0, 0.92) 0%, rgba(217, 0, 0, 0) 70%);
    transform: skewX(-16deg);
    pointer-events: none;
    opacity: 0.88;
    z-index: 1;
}

.brush-stroke-white {
    position: absolute;
    top: 0;
    left: 11%;
    width: 45px;
    height: 100%;
    background: rgba(255, 255, 255, 0.22);
    transform: skewX(-16deg);
    pointer-events: none;
    z-index: 2;
}

.brush-accent-bottom {
    position: absolute;
    bottom: -20px;
    right: 25%;
    width: 260px;
    height: 120px;
    background: linear-gradient(45deg, rgba(217, 0, 0, 0.85) 0%, rgba(217, 0, 0, 0) 75%);
    transform: skewY(-8deg) rotate(-10deg);
    pointer-events: none;
    opacity: 0.75;
    z-index: 25;
}

/* Hero Dynamic Animations & Micro-Interactions */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(0.5deg); }
}
.hero-float-gentle {
    animation: heroFloat 5.5s ease-in-out infinite;
}

@keyframes brushGlow {
    0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 10px rgba(217, 0, 0, 0.4)); transform: skewX(-16deg) scale(1); }
    50% { opacity: 0.98; filter: drop-shadow(0 0 28px rgba(217, 0, 0, 0.85)); transform: skewX(-15.5deg) scale(1.02); }
}
.animate-brush-glow {
    animation: brushGlow 4.5s ease-in-out infinite;
}

@keyframes heroTitleFade {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}
.hero-title-in {
    animation: heroTitleFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Interactive Headline Word Stagger & Hover Glint */
.hero-word {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease, text-shadow 0.35s ease;
}
.hero-word:hover {
    transform: translateY(-3px) scale(1.03);
    text-shadow: 0 10px 20px rgba(0, 26, 56, 0.2);
}
.hero-word-red:hover {
    transform: translateY(-3px) scale(1.03);
    text-shadow: 0 10px 24px rgba(217, 0, 0, 0.35);
}

/* Center Portrait Floating & Ambient Lighting */
@keyframes melvinPortraitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.hero-portrait-anim {
    animation: melvinPortraitFloat 6.5s ease-in-out infinite;
    transform-origin: bottom center;
}

/* 3D Dynamic Book Tilt & Glow in Hero */
.hero-book-3d {
    perspective: 1000px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-book-3d:hover {
    transform: translateY(-8px) rotateY(-10deg) rotateX(4deg) scale(1.06);
}
.hero-book-3d img {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-book-3d:hover img {
    box-shadow: -15px 22px 35px rgba(0, 0, 0, 0.85), 0 0 28px rgba(217, 0, 0, 0.5);
    border-color: rgba(217, 0, 0, 0.6) !important;
}

/* Value pillar hover bounce with glow ripple */
.pillar-icon-box {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.pillar-icon-box:hover {
    transform: translateY(-5px) scale(1.15);
    border-color: var(--red) !important;
    color: #ffffff !important;
    background-color: var(--red) !important;
    box-shadow: 0 0 20px rgba(217, 0, 0, 0.55);
}

/* Hero skyline gentle breathe */
@keyframes skylineBreathe {
    0%, 100% { opacity: 0.12; transform: scale(1); }
    50% { opacity: 0.20; transform: scale(1.03) translateY(-4px); }
}
.animate-skyline {
    animation: skylineBreathe 10s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Trust ticker hover polish */
.trust-logo-item {
    transition: all 0.3s ease;
    position: relative;
}
.trust-logo-item:hover {
    color: #ffffff;
    transform: translateY(-2px);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* BRAND PATTERN INTER-SECTION DIVIDERS & ACCENTS */
.brand-divider {
    position: relative;
    width: 100%;
    height: 36px;
    background: linear-gradient(90deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-dark) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 4px 12px rgba(1, 26, 56, 0.15);
    z-index: 20;
}
.brand-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: dividerSweep 7s infinite linear;
}
@keyframes dividerSweep {
    0% { left: -50%; }
    100% { left: 150%; }
}

/* Geometric Brand Watermark for Section Backdrops */
.brand-watermark-grid {
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(1, 26, 56, 0.06) 1px, transparent 0);
    background-size: 28px 28px;
}

.brand-watermark-dark {
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(217, 0, 0, 0.12) 1px, transparent 0);
    background-size: 32px 32px;
}

/* Editorial Corner Accent in brand colors */
.brand-corner-accent {
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-corner-accent::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-top: 3px solid var(--red);
    border-right: 3px solid var(--navy);
    pointer-events: none;
    transition: all 0.35s ease;
}
.brand-corner-accent:hover::after {
    width: 36px;
    height: 36px;
    border-top-color: var(--red-bright);
    border-right-color: var(--red);
}

/* ============================================================ */
/* NEW ADVANCED PAGE ANIMATIONS & INTERACTIVE MOTION SUITE      */
/* ============================================================ */

/* 1. Page Entrance Transition with Cinematic Stagger */
.page-view.active-view {
    animation: viewFadeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes viewFadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Hero Headline Kinetic Word Reveal */
.hero-word {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.hero-word:hover {
    transform: translateY(-3px) scale(1.03);
}

/* 3. Interactive Floating Badge Animation */
@keyframes pulseSubtleGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(217, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(217, 0, 0, 0);
    }
}
.pulse-badge {
    animation: pulseSubtleGlow 3s infinite;
}

/* 4. Glassmorphic Card Hover with Light Glare */
.interactive-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.interactive-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 30px -10px rgba(1, 26, 56, 0.15), 0 0 1px 1px rgba(217, 0, 0, 0.1);
}
.interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.interactive-card:hover::before {
    left: 140%;
}

/* 5. Smooth Button Ripple and Glow Micro-Interactions */
.btn-smooth {
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-smooth:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(217, 0, 0, 0.4);
}
.btn-smooth:active {
    transform: translateY(0) scale(0.98);
}

/* 6. Form Input Interactive Glow on Focus */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(217, 0, 0, 0.15) !important;
    border-color: var(--red) !important;
}

/* 7. Floating Book Tilt Effect */
.book-cover-tilt {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}
.book-cover-tilt:hover {
    transform: rotateY(-8deg) rotateX(4deg) translateY(-8px);
}

/* 8. Chapter Number Floating Elevation */
.chapter-number {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.group:hover .chapter-number,
.hover-lift:hover .chapter-number {
    transform: scale(1.1) translateX(4px);
    color: var(--red-bright) !important;
}

/* 9. Glowing Quote Border */
.quote-highlight {
    border-left: 3px solid var(--red);
    transition: border-left-width 0.3s ease, padding-left 0.3s ease;
}
.quote-highlight:hover {
    border-left-width: 6px;
    padding-left: 1.25rem;
}

/* 10. Floating Particle Animation for Dark Banners */
@keyframes floatUpFade {
    0% { transform: translateY(0) scale(0.8); opacity: 0.2; }
    50% { opacity: 0.6; }
    100% { transform: translateY(-30px) scale(1.1); opacity: 0; }
}
.floating-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: floatUpFade 4s ease-in-out infinite;
}

/* ============================================================ */
/* 11. SMOOTH PAGE & VIEW ENTRANCE SLIDE ANIMATIONS            */
/* ============================================================ */
@keyframes viewFadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-view.active-view {
    animation: viewFadeSlideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================================ */
/* 12. DYNAMIC PILLAR & STAT CARD HIGHLIGHT & POP-UP ANIMATION */
/* ============================================================ */

/* Pop-up entrance keyframe */
@keyframes pillarPopUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pillar-card {
    position: relative;
    border: 1px solid #00224d;
    background: #001733;
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.3s ease, 
                border-color 0.3s ease;
    cursor: pointer;
    transform-origin: center center;
    will-change: transform, box-shadow, opacity;
}

/* Staggered entrance pop-up when scrolled into view */
body.js-ready .pillar-card.reveal-on-scroll:not(.is-revealed) {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
}

.pillar-card.reveal-on-scroll.is-revealed {
    animation: pillarPopUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pillar-card.reveal-on-scroll.is-revealed.delay-100 {
    animation-delay: 0.08s;
}

.pillar-card.reveal-on-scroll.is-revealed.delay-200 {
    animation-delay: 0.16s;
}

.pillar-card.reveal-on-scroll.is-revealed.delay-300 {
    animation-delay: 0.24s;
}

.pillar-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

/* Hover & Active Selected Slight Pop-Up Animation */
.pillar-card:hover,
.pillar-card.pillar-active {
    transform: translateY(-5px) scale(1.015) !important;
    background: #001c3d !important;
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.5), 
                0 0 20px rgba(217, 0, 0, 0.25) !important;
    border-color: #D90000 !important;
    z-index: 10 !important;
}

.pillar-card:hover::before,
.pillar-card.pillar-active::before {
    border-color: #D90000 !important;
    box-shadow: inset 0 0 10px rgba(217, 0, 0, 0.12), 0 0 14px rgba(217, 0, 0, 0.25) !important;
}

.pillar-card:active {
    transform: translateY(-2px) scale(1.005) !important;
    transition-duration: 0.1s !important;
}

.pillar-card:hover .pillar-icon,
.pillar-card.pillar-active .pillar-icon {
    transform: scale(1.12) rotate(4deg) !important;
    color: #FF2E2E !important;
}

.pillar-card:hover .pillar-num,
.pillar-card.pillar-active .pillar-num {
    color: #FF2E2E !important;
    letter-spacing: 0.14em !important;
}

.pillar-card:hover .pillar-title,
.pillar-card.pillar-active .pillar-title {
    color: #FFFFFF !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.35) !important;
}

.pillar-icon {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
}

.pillar-num {
    transition: color 0.25s ease, letter-spacing 0.25s ease !important;
}

.pillar-title {
    transition: color 0.25s ease, text-shadow 0.25s ease !important;
}

/* Stat Card Active / Hover Glow */
.stat-card {
    position: relative;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card:hover,
.stat-card.stat-active {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -8px rgba(1, 26, 56, 0.15);
    border-top-color: #D90000 !important;
}