/*=========================================================
    SENTRIX CYBER 2.0
    TIMELINE
    File : css/timeline.css
=========================================================*/

/*=========================================================
                TIMELINE SECTION
=========================================================*/

.timeline-section{

    position:relative;

    margin-bottom:70px;

}

.timeline{

    position:relative;

    margin-top:45px;

    padding-left:45px;

}

/*=========================================================
            MAIN TIMELINE LINE
=========================================================*/

.timeline::before{

    content:"";

    position:absolute;

    left:18px;

    top:0;

    bottom:0;

    width:3px;

    border-radius:50px;

    background:linear-gradient(
        to bottom,
        #4F7CFF,
        #8B5CF6,
        #00D4FF
    );

}

/*=========================================================
            TIMELINE ITEM
=========================================================*/

.timeline-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin-bottom:35px;

    padding:25px;

    border-radius:22px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.35s;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item:hover{

    transform:translateX(8px);

    border-color:rgba(79,124,255,.35);

    box-shadow:0 20px 40px rgba(79,124,255,.12);

}

/*=========================================================
            TIMELINE ICON
=========================================================*/

.timeline-icon{

    position:absolute;

    left:-42px;

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    color:#fff;

    background:#4F7CFF;

    border:4px solid #050816;

    box-shadow:0 0 20px rgba(79,124,255,.35);

}

/*=========================================================
            EVENT COLORS
=========================================================*/

.timeline-item.success .timeline-icon{

    background:#2DD4BF;

    box-shadow:0 0 20px rgba(45,212,191,.45);

}

.timeline-item.warning .timeline-icon{

    background:#FBBF24;

    box-shadow:0 0 20px rgba(251,191,36,.45);

}

.timeline-item.danger .timeline-icon{

    background:#FF4D67;

    box-shadow:0 0 20px rgba(255,77,103,.45);

}

.timeline-item.info .timeline-icon{

    background:#4F7CFF;

}

/*=========================================================
            CONTENT
=========================================================*/

.timeline-content{

    width:100%;

}

.timeline-content h4{

    font-size:18px;

    margin-bottom:12px;

    color:#ffffff;

}

.timeline-content p{

    color:#9AA9C4;

    line-height:1.7;

}

.timeline-content span{

    display:inline-block;

    margin-top:16px;

    color:#6E89C8;

    font-size:13px;

    font-weight:600;

}

/*=========================================================
            LIVE INDICATOR
=========================================================*/

.timeline-live{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:15px;

    color:#2DD4BF;

    font-size:13px;

    font-weight:700;

}

.timeline-live::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#2DD4BF;

    animation:timelinePulse 2s infinite;

}

@keyframes timelinePulse{

    0%{

        box-shadow:0 0 0 0 rgba(45,212,191,.7);

    }

    70%{

        box-shadow:0 0 0 14px rgba(45,212,191,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(45,212,191,0);

    }

}

/*=========================================================
            HOVER BAR
=========================================================*/

.timeline-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    border-radius:50px;

    background:#4F7CFF;

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.timeline-item:hover::before{

    transform:scaleY(1);

}

/*=========================================================
            EVENT TAG
=========================================================*/

.event-tag{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:50px;

    margin-top:18px;

    font-size:12px;

    font-weight:700;

}

.event-tag.safe{

    background:rgba(45,212,191,.15);

    color:#2DD4BF;

}

.event-tag.warning{

    background:rgba(251,191,36,.15);

    color:#FBBF24;

}

.event-tag.danger{

    background:rgba(255,77,103,.15);

    color:#FF4D67;

}

.event-tag.info{

    background:rgba(79,124,255,.15);

    color:#4F7CFF;

}
/*=========================================================
                THREAT SECTION
=========================================================*/

.threat-section{

    margin-bottom:70px;

}

.threat-container{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    margin-top:35px;

}

/*=========================================================
                WORLD MAP
=========================================================*/

.world-map{

    position:relative;

    min-height:500px;

    border-radius:26px;

    overflow:hidden;

    background:
    linear-gradient(
        145deg,
        rgba(79,124,255,.06),
        rgba(139,92,246,.04)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}

#worldThreatMap{

    width:100%;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:26px;
    font-weight:700;

    color:rgba(255,255,255,.15);

    letter-spacing:2px;

}

/*=========================================================
                MAP PULSE
=========================================================*/

.map-ping{

    position:absolute;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#FF4D67;

    animation:mapPulse 2.5s infinite;

}

@keyframes mapPulse{

    0%{

        transform:scale(.8);

        box-shadow:0 0 0 0 rgba(255,77,103,.7);

    }

    70%{

        transform:scale(1);

        box-shadow:0 0 0 25px rgba(255,77,103,0);

    }

    100%{

        transform:scale(.8);

        box-shadow:0 0 0 0 rgba(255,77,103,0);

    }

}

/*=========================================================
                THREAT FEED
=========================================================*/

.threat-feed{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.feed-item{

    position:relative;

    padding:22px;

    border-radius:20px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.feed-item:hover{

    transform:translateX(8px);

}

.feed-item span{

    display:block;

    margin-top:10px;

    font-size:13px;

    color:#97A6C4;

}

.feed-item.danger{

    border-left:5px solid #FF4D67;

}

.feed-item.warning{

    border-left:5px solid #FBBF24;

}

.feed-item.success{

    border-left:5px solid #2DD4BF;

}

.feed-item.info{

    border-left:5px solid #4F7CFF;

}

/*=========================================================
            LIVE FEED ANIMATION
=========================================================*/

.feed-item{

    animation:feedSlide .6s ease;

}

@keyframes feedSlide{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
            THREAT LEVEL
=========================================================*/

.threat-level{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:16px;

}

.threat-score{

    font-size:24px;

    font-weight:700;

    color:#fff;

}

.level-high{

    color:#FF4D67;

}

.level-medium{

    color:#FBBF24;

}

.level-low{

    color:#2DD4BF;

}

/*=========================================================
            CYBER ALERT
=========================================================*/

.cyber-alert{

    padding:25px;

    margin-top:35px;

    border-radius:22px;

    border:1px solid rgba(255,77,103,.3);

    background:rgba(255,77,103,.08);

}

.cyber-alert h3{

    color:#FF4D67;

    margin-bottom:15px;

}

.cyber-alert p{

    color:#C5D1E8;

}

/*=========================================================
            RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.threat-container{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.timeline{

padding-left:25px;

}

.timeline::before{

left:10px;

}

.timeline-icon{

left:-30px;

width:34px;

height:34px;

font-size:15px;

}

.timeline-item{

padding:20px;

}

.world-map{

min-height:320px;

}

}

@media(max-width:480px){

.timeline-item{

padding:18px;

}

.timeline-content h4{

font-size:16px;

}

.timeline-content p{

font-size:14px;

}

.feed-item{

padding:18px;

}

}

/*=========================================================
            4K DISPLAY
=========================================================*/

@media(min-width:1800px){

.timeline-item{

padding:35px;

}

.feed-item{

padding:28px;

}

.world-map{

min-height:650px;

}

}

/*=========================================================
                END OF FILE
=========================================================*/