/*=========================================================
    MODERN NOTICE WIDGET
    PURPLE + CYAN GLASSMORPHISM DESIGN
=========================================================*/

.notice-widget{
    position: relative;

    overflow: hidden;

    border: none !important;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.92),
            rgba(240,249,255,0.88)
        );

    backdrop-filter: blur(12px);

    box-shadow:
        0 20px 50px rgba(76,29,149,0.10);

    transition: all 0.45s ease;
}


/*=========================================================
    HOVER EFFECT
=========================================================*/

.notice-widget:hover{
    transform: translateY(-8px);

    box-shadow:
        0 30px 65px rgba(6,182,212,0.18);
}


/*=========================================================
    ANIMATED TOP BORDER
=========================================================*/

.notice-widget::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #06b6d4,
            #14b8a6,
            #7c3aed
        );

    background-size: 300% 100%;

    animation: gradientMove 8s linear infinite;

    z-index: 5;
}


/*=========================================================
    FLOATING SHAPES
=========================================================*/

.notice-widget::after{
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        rgba(124,58,237,0.08);

    z-index: 0;

    animation: floatingShape 10s ease-in-out infinite;
}


/*=========================================================
    HEADER
=========================================================*/

.notice-widget .card-header{
    position: relative;

    z-index: 2;

    border: none;

    padding: 24px 24px 18px !important;

    background: transparent;
}


/*=========================================================
    TAB BUTTON GROUP
=========================================================*/

.notice-tabs{
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


/*=========================================================
    TAB BUTTON STYLE
=========================================================*/

.notice-tabs .btn{
    flex: 1;

    border: none;

    border-radius: 60px !important;

    padding: 13px 20px;

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

    background:
        rgba(255,255,255,0.85);

    color: #4c1d95;

    backdrop-filter: blur(10px);

    box-shadow:
        0 8px 18px rgba(0,0,0,0.05);

    transition: all 0.35s ease;
}


/*=========================================================
    ACTIVE TAB
=========================================================*/

.notice-tabs .btn.active,
.notice-tabs .btn:hover{
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #06b6d4
        );

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 28px rgba(124,58,237,0.22);
}


/*=========================================================
    BODY
=========================================================*/

.notice-widget .card-body{
    position: relative;

    z-index: 2;

    padding: 0 24px 24px !important;
}


/*=========================================================
    SCROLL CONTAINER
=========================================================*/

.notice-scroll{
    position: relative;

    height: 420px;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.9),
            rgba(240,249,255,0.9)
        );

    border: 1px solid rgba(255,255,255,0.5);

    backdrop-filter: blur(12px);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.3);
}


/*=========================================================
    NOTICE DISPLAY
=========================================================*/

.notice-display{
    position: absolute;

    width: 100%;

    margin: 0;
    padding: 0;

    animation: noticeScroll 26s linear infinite;
}


/*=========================================================
    PAUSE ON HOVER
=========================================================*/

.notice-scroll:hover .notice-display{
    animation-play-state: paused;
}


/*=========================================================
    NOTICE ITEM
=========================================================*/

.notice-display .list-group-item{
    position: relative;

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

    gap: 16px;

    padding: 18px 20px;

    border: none !important;

    border-bottom:
        1px solid rgba(148,163,184,0.15) !important;

    background: transparent;

    transition: all 0.35s ease;
}


/*=========================================================
    LEFT GLOW BAR
=========================================================*/

.notice-display .list-group-item::before{
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 5px;
    height: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            to bottom,
            #7c3aed,
            #06b6d4
        );

    transition: all 0.35s ease;
}


/*=========================================================
    ITEM HOVER
=========================================================*/

.notice-display .list-group-item:hover{
    background:
        rgba(255,255,255,0.65);

    transform: translateX(8px);

    backdrop-filter: blur(10px);
}

.notice-display .list-group-item:hover::before{
    height: 72%;
}


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

.notice-display span{
    display: flex;

    flex-direction: column;

    gap: 8px;

    flex: 1;
}


/*=========================================================
    TITLE LINK
=========================================================*/

.notice-display span a:first-child{
    color: #0f172a;

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

    line-height: 1.7;

    text-decoration: none;

    transition: all 0.3s ease;
}


/*=========================================================
    TITLE HOVER
=========================================================*/

.notice-display span a:first-child:hover{
    color: #7c3aed;
}


/*=========================================================
    DOWNLOAD BUTTON
=========================================================*/

.notice-display span a:last-child{
    display: inline-flex;

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

    width: fit-content;

    padding: 7px 16px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #06b6d4,
            #14b8a6
        );

    color: #ffffff;

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

    text-decoration: none;

    box-shadow:
        0 8px 18px rgba(6,182,212,0.20);

    transition: all 0.35s ease;
}


/*=========================================================
    DOWNLOAD HOVER
=========================================================*/

.notice-display span a:last-child:hover{
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(20,184,166,0.28);
}


/*=========================================================
    DATE STYLE
=========================================================*/

.notice-display small{
    min-width: 68px;

    padding: 10px 12px;

    border-radius: 14px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,0.10),
            rgba(6,182,212,0.10)
        );

    color: #4c1d95;

    font-size: 12px;
    font-weight: 800;

    backdrop-filter: blur(8px);

    box-shadow:
        inset 0 0 0 1px rgba(124,58,237,0.10);
}


/*=========================================================
    EMPTY ITEM
=========================================================*/

.notice-display .list-group-item:only-child{
    justify-content: center;

    text-align: center;

    color: #64748b;

    font-weight: 600;
}


/*=========================================================
    AUTO SCROLL ANIMATION
=========================================================*/

@keyframes noticeScroll{

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

    100%{
        transform: translateY(-100%);
    }

}


/*=========================================================
    GRADIENT ANIMATION
=========================================================*/

@keyframes gradientMove{

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

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

}


/*=========================================================
    FLOATING SHAPE
=========================================================*/

@keyframes floatingShape{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(20px);
    }

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

}


/*=========================================================
    LARGE DESKTOP
=========================================================*/

@media (min-width: 1400px){

    .notice-scroll{
        height: 500px;
    }

    .notice-display span a:first-child{
        font-size: 16px;
    }

}


/*=========================================================
    DESKTOP
=========================================================*/

@media (max-width: 1199px){

    .notice-scroll{
        height: 400px;
    }

}


/*=========================================================
    TABLET DEVICE
=========================================================*/

@media (max-width: 991px){

    .notice-widget{
        border-radius: 22px;
    }

    .notice-widget .card-header{
        padding: 20px 20px 16px !important;
    }

    .notice-widget .card-body{
        padding: 0 20px 20px !important;
    }

    .notice-scroll{
        height: 360px;

        border-radius: 18px;
    }

    .notice-tabs .btn{
        font-size: 14px;
    }

}


/*=========================================================
    MOBILE DEVICE
=========================================================*/

@media (max-width: 767px){

    .notice-widget{
        border-radius: 18px;
    }

    .notice-tabs{
        flex-direction: column;
    }

    .notice-tabs .btn{
        width: 100%;
    }

    .notice-scroll{
        height: 320px;
    }

    .notice-display .list-group-item{
        flex-direction: column;

        align-items: flex-start;
    }

    .notice-display span a:first-child{
        font-size: 14px;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width: 575px){

    .notice-scroll{
        height: 280px;
    }

    .notice-display .list-group-item{
        padding: 14px;
    }

    .notice-display span a:first-child{
        font-size: 13px;
    }

    .notice-display small{
        font-size: 11px;
    }

}