/* =====================================================
   CENTER 2 x 2 SLIDING DASHBOARD
   ===================================================== */

.center-dashboard-grid {
    align-items: stretch;
}

.center-dashboard-grid > [class*="col-"] {
    display: flex;
}

.center-dashboard-card {
    width: 100%;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe7ed;
    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(0, 60, 113, 0.10);
}

.center-dashboard-header {
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 14px;

    background: #005086;
    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
}

.center-dashboard-header i {
    font-size: 17px;
}

.center-dashboard-carousel {
    height: 285px;
}

.center-dashboard-carousel .carousel-inner,
.center-dashboard-carousel .carousel-item {
    height: 285px;
}

.center-dashboard-image-link {
    display: block;
    text-decoration: none;
}

.center-dashboard-image {
    display: block;

    width: 100%;
    height: 195px;

    object-fit: cover;
}

.center-dashboard-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 10px 12px;

    color: #ffffff;
    background: rgba(0, 0, 0, 0.62);
}

.center-dashboard-overlay h5 {
    margin: 0;

    font-size: 16px;
    font-weight: 600;
}

.center-dashboard-content {
    min-height: 90px;
    padding: 9px 12px 10px;

    background: #ffffff;
}

.center-dashboard-content h5 {
    margin: 0 0 4px;

    color: #005086;

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

    line-height: 1.25;
}

.center-dashboard-content p {
    margin: 0 0 6px;

    color: #516273;

    font-size: 12px;
    line-height: 1.35;
}

.center-dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    color: #0056a6;

    font-size: 12px;
    font-weight: 600;
    text-decoration: none;

    transition: color 0.2s ease, gap 0.2s ease;
}

.center-dashboard-link:hover {
    color: #f5820b;
    gap: 8px;
}

.center-dashboard-no-image,
.center-dashboard-empty {
    height: 285px;

    display: flex;
    flex-direction: column;

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

    gap: 8px;

    padding: 20px;

    text-align: center;

    color: #6c757d;
    background: #f8fafc;
}

.center-dashboard-no-image i,
.center-dashboard-empty i {
    font-size: 34px;
}

.center-dashboard-empty p {
    margin: 0;

    font-size: 13px;
}

/* Carousel arrows */
.center-dashboard-carousel .carousel-control-prev,
.center-dashboard-carousel .carousel-control-next {
    width: 36px;

    opacity: 0;

    transition: opacity 0.2s ease;
}

.center-dashboard-card:hover .carousel-control-prev,
.center-dashboard-card:hover .carousel-control-next {
    opacity: 0.9;
}

/* Indicators */
.center-dashboard-carousel .carousel-indicators {
    z-index: 5;
    margin-bottom: 7px;
}

.center-dashboard-carousel .carousel-indicators button {
    width: 20px;
    height: 3px;

    margin: 0 2px;

    border: 0;
    border-radius: 4px;
}

/* =====================================================
   TABLET / MOBILE
   ===================================================== */

@media (max-width: 991px) {

    .center-dashboard-carousel,
    .center-dashboard-carousel .carousel-inner,
    .center-dashboard-carousel .carousel-item {
        height: 285px;
    }

    .center-dashboard-image {
        height: 195px;
    }

}

@media (max-width: 575px) {

    .center-dashboard-header {
        min-height: 44px;
        font-size: 15px;
    }

    .center-dashboard-carousel,
    .center-dashboard-carousel .carousel-inner,
    .center-dashboard-carousel .carousel-item {
        height: 280px;
    }

    .center-dashboard-image {
        height: 190px;
    }

    .center-dashboard-content {
        min-height: 90px;
    }

}

/* =========================================================
   NE1 FRONT PAGE — MODERN VISUAL OVERLAY
   Structure unchanged
   ========================================================= */


/* =========================================================
   PAGE / HERO BACKGROUND
   ========================================================= */

.hero-section {
    padding: 28px 0 38px;
    background: #f4f7fa;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.hero-section > .container {
    max-width: 1440px;
}


/* =========================================================
   GLOBAL CARD STYLE
   ========================================================= */

.hero-section .profile-card,
.hero-section .center-dashboard-card,
.hero-section .birthday-alert-card,
.hero-section .marketing-sidebar-card,
.hero-section .marketing-sidebar-card1 {

    border: 1px solid #e2e9ef !important;

    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
        0 6px 20px rgba(0, 60, 113, 0.08) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


/* subtle hover */

.hero-section .profile-card:hover,
.hero-section .center-dashboard-card:hover,
.hero-section .birthday-alert-card:hover,
.hero-section .marketing-sidebar-card:hover,
.hero-section .marketing-sidebar-card1:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 60, 113, 0.12) !important;

    border-color: #d4e0e9 !important;
}


/* =========================================================
   LEFT COLUMN — CGM / NE1
   ========================================================= */

.compact-profile-card {
    overflow: hidden;
}


.compact-profile-photo {

    width: 100% !important;

    height: 145px !important;

    object-fit: cover !important;

    display: block;

    background: #eef3f7;
}


/* CGM portrait should not become excessively tall */

.cgm-profile-card .compact-profile-photo {

    width: 120px !important;
    height: 135px !important;

    margin: 14px auto 0;

    border-radius: 12px !important;

    object-fit: cover !important;
}


/* left body */

.compact-profile-body {

    padding: 14px 16px 16px !important;

    text-align: center;
}


.compact-profile-title {

    margin: 0 0 4px !important;

    color: #005086 !important;

    font-size: 20px !important;

    font-weight: 700 !important;

    line-height: 1.25;
}


.compact-designation {

    margin-bottom: 10px;

    color: #718096;

    font-size: 14px;

    font-weight: 500 !important;
}


.compact-profile-text {

    margin: 9px 0 14px !important;

    color: #5d6d7e;

    font-size: 13px;

    line-height: 1.55;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   LEFT ACTION BUTTON
   ========================================================= */

.profile-action-btn {

    width: 100% !important;

    min-height: 42px;

    border: 0 !important;

    border-radius: 9px !important;

    background: #0d6efd !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.profile-action-btn:hover {

    background: #0056b3 !important;

    transform: translateY(-1px);
}


/* =========================================================
   GAP BETWEEN LEFT CARDS
   ========================================================= */

.hero-section .col-lg-3 > .profile-card + .profile-card {

    margin-top: 18px;
}


/* =========================================================
   CENTER — 2 x 2 GRID
   ========================================================= */

.center-dashboard-grid {

    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;

    align-items: stretch;
}


.center-dashboard-grid > [class*="col-"] {

    display: flex;
}


.center-dashboard-card {

    width: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   CENTER HEADERS
   ========================================================= */

.center-dashboard-header {

    flex: 0 0 48px;

    min-height: 48px !important;

    height: 48px !important;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 14px !important;

    background: #005086 !important;

    color: #ffffff !important;

    border: 0 !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    letter-spacing: 0.05px;
}


.center-dashboard-header i {

    font-size: 17px;

    opacity: 0.95;
}


/* =========================================================
   CENTER CAROUSEL
   ========================================================= */

.center-dashboard-carousel,
.center-dashboard-carousel .carousel-inner,
.center-dashboard-carousel .carousel-item {

    width: 100% !important;

    height: 290px !important;
}


.center-dashboard-carousel {

    overflow: hidden !important;
}


/* =========================================================
   CENTER IMAGES
   ========================================================= */

.center-dashboard-image {

    width: 100% !important;

    height: 195px !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center center !important;

    background: #eef2f5;

    transition:
        transform 0.35s ease;
}


.center-dashboard-image-link {

    display: block;

    width: 100%;

    overflow: hidden;
}


.center-dashboard-card:hover
.center-dashboard-image-link
.center-dashboard-image {

    transform: scale(1.018);
}


/* =========================================================
   CENTER MAIN SLIDER OVERLAY
   ========================================================= */

.center-dashboard-overlay {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 48px;

    display: flex;

    align-items: center;

    padding: 8px 12px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.70),
        rgba(0,0,0,0.10)
    );

    color: #ffffff;
}


.center-dashboard-overlay h5 {

    margin: 0;

    font-size: 14px;

    font-weight: 600;
}


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

.center-dashboard-content {

    flex: 1;

    min-height: 95px;

    padding: 10px 13px 12px !important;

    background: #ffffff;
}


.center-dashboard-content h5 {

    margin: 0 0 4px !important;

    color: #005086 !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


.center-dashboard-content p {

    margin: 0 0 5px !important;

    color: #627385 !important;

    font-size: 12px !important;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   CENTER LINKS
   ========================================================= */

.center-dashboard-link {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #0056a6 !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        gap 0.2s ease;
}


.center-dashboard-link:hover {

    color: #f5820b !important;

    gap: 8px;
}


/* =========================================================
   CAROUSEL ARROWS
   ========================================================= */

.center-dashboard-carousel
.carousel-control-prev,
.center-dashboard-carousel
.carousel-control-next {

    width: 36px;

    opacity: 0;

    transition: opacity 0.2s ease;

    z-index: 5;
}


.center-dashboard-card:hover
.carousel-control-prev,
.center-dashboard-card:hover
.carousel-control-next {

    opacity: 0.85;
}


/* =========================================================
   INDICATORS
   ========================================================= */

.center-dashboard-carousel .carousel-indicators {

    margin-bottom: 6px;

    z-index: 8;
}


.center-dashboard-carousel
.carousel-indicators
button {

    width: 18px;

    height: 3px;

    margin: 0 2px;

    border: 0;

    border-radius: 10px;
}


/* =========================================================
   RIGHT — BIRTHDAY CARD
   ========================================================= */

.birthday-alert-card {

    overflow: hidden;

    background: #ffffff !important;
}


.birthday-alert-header {

    min-height: 66px;

    padding: 14px 16px !important;

    background: #005086 !important;

    color: #ffffff !important;

    display: flex;

    align-items: center;

    gap: 12px;
}


.birthday-alert-header > i {

    font-size: 28px;

    line-height: 1;
}


.birthday-alert-header h4 {

    margin: 0;

    font-size: 18px !important;

    font-weight: 700 !important;
}


.birthday-alert-header span {

    display: block;

    margin-top: 2px;

    font-size: 12px;

    opacity: 0.9;
}


/* Birthday list */

.birthday-alert-list {

    padding: 12px !important;
}


.birthday-group-title {

    margin-bottom: 9px;

    color: #d32845 !important;

    font-size: 14px !important;

    font-weight: 700 !important;

    display: flex;

    align-items: center;

    gap: 7px;
}


.birthday-alert-person {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 10px;

    border-radius: 12px;

    background: #fff8f9;

    border: 1px solid #f5dde2;

    border-left: 3px solid #d32845;
}


.birthday-alert-photo {

    flex: 0 0 58px;

    width: 58px;

    height: 58px;

    overflow: hidden;

    border-radius: 50%;

    border: 2px solid #f1cbd2;

    background: #ffffff;
}


.birthday-alert-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.birthday-alert-info h5 {

    margin: 0 0 2px;

    color: #005086;

    font-size: 15px !important;

    font-weight: 700;
}


.birthday-alert-designation {

    color: #748394;

    font-size: 12px;
}


.birthday-wish {

    margin-top: 4px;

    color: #d32845;

    font-size: 11px;

    line-height: 1.3;
}


/* =========================================================
   RIGHT — FEATURED / MARKETING
   ========================================================= */

.marketing-sidebar-card,
.marketing-sidebar-card1 {

    overflow: hidden;
}


.marketing-sidebar-header,
.marketing-sidebar-header1 {

    min-height: 54px;

    padding: 0 15px !important;

    background: #005086 !important;

    color: #ffffff !important;

    display: flex;

    align-items: center;

    gap: 9px;
}


.marketing-sidebar-header h4,
.marketing-sidebar-header1 h4 {

    margin: 0 !important;

    font-size: 17px !important;

    font-weight: 700 !important;
}


.marketing-sidebar-list {

    padding: 12px !important;

    background: #ffffff;
}


.marketing-sidebar-item {

    display: block;

    overflow: hidden;

    border-radius: 10px;

    background: #f4f7fa;

    text-decoration: none;
}


.marketing-sidebar-image {

    display: block;

    width: 100% !important;

    height: 145px !important;

    object-fit: cover !important;

    transition: transform 0.3s ease;
}


.marketing-sidebar-item:hover
.marketing-sidebar-image {

    transform: scale(1.025);
}


.marketing-sidebar-title {

    padding: 9px 10px;

    color: #005086;

    font-size: 13px;

    font-weight: 600;
}


/* =========================================================
   RIGHT ADVERTISEMENT
   ========================================================= */

.marketing-sidebar-card1 {

    margin-top: 18px !important;
}


.right-marketing-grid {

    padding: 10px !important;

    background: #ffffff;
}


.right-marketing-image {

    display: block;

    width: 100% !important;

    height: 185px !important;

    object-fit: cover !important;

    border-radius: 9px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


.right-marketing-item {

    display: block;

    overflow: hidden;

    border-radius: 9px;
}


.right-marketing-item:hover
.right-marketing-image {

    transform: scale(1.025);

    opacity: 0.97;
}


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

@media (min-width: 992px) {

    .hero-section .row {

        align-items: stretch;
    }

    .hero-section
    .col-lg-3,
    .hero-section
    .col-lg-6 {

        display: flex;

        flex-direction: column;
    }

    .hero-section
    .col-lg-6
    .center-dashboard-grid {

        flex: 1;
    }

}


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

@media (max-width: 991.98px) {

    .hero-section {

        padding: 22px 0 30px;
    }

    .center-dashboard-carousel,
    .center-dashboard-carousel .carousel-inner,
    .center-dashboard-carousel .carousel-item {

        height: 280px !important;
    }

    .center-dashboard-image {

        height: 185px !important;
    }

}


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

@media (max-width: 767.98px) {

    .hero-section {

        padding: 16px 0 25px;
    }

    .center-dashboard-grid {

        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .center-dashboard-carousel,
    .center-dashboard-carousel .carousel-inner,
    .center-dashboard-carousel .carousel-item {

        height: 270px !important;
    }

    .center-dashboard-image {

        height: 180px !important;
    }

    .center-dashboard-header {

        min-height: 46px !important;

        height: 46px !important;

        font-size: 14px !important;
    }

}


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

@media (max-width: 575.98px) {

    .hero-section > .container {

        padding-left: 10px;
        padding-right: 10px;
    }

    .center-dashboard-grid > [class*="col-"] {

        width: 100%;
    }

    .center-dashboard-carousel,
    .center-dashboard-carousel .carousel-inner,
    .center-dashboard-carousel .carousel-item {

        height: 265px !important;
    }

    .center-dashboard-image {

        height: 175px !important;
    }

    .compact-profile-title {

        font-size: 18px !important;
    }

}

/* =========================================================
   CENTER VIDEOS — FIT + AUTOPLAY DISPLAY
   ========================================================= */

.center-feature-video {
    position: relative;

    width: 100% !important;
    height: 195px !important;

    overflow: hidden !important;

    background: #000000;

    margin: 0;
    padding: 0;
}


/* YouTube container */
.youtube-video-player {
    position: relative;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    background: #000000;
}


/* YouTube iframe */
.youtube-video-player iframe,
.youtube-player-frame,
.youtube-player-frame iframe {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    border: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Self-hosted MP4 */
.center-self-video {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    background: #000000;
}


/* Remove any old image sizing from video slides */
.center-feature-video .center-dashboard-image {
    display: none !important;
}

/* =========================================================
   MODERN ANIMATED CENTER HEADERS
   About NE 1
   Exclusive Deals
   Recent Activities
   Marketing Communications
   ========================================================= */

.center-dashboard-header {

    position: relative;

    height: 50px !important;
    min-height: 50px !important;

    display: flex !important;
    align-items: center !important;

    gap: 10px;

    padding: 0 15px !important;

    overflow: hidden;

    background: #005086 !important;
    color: #ffffff !important;

    border: 0 !important;

    border-bottom: 3px solid #f5820b !important;

    font-size: 16px !important;
    font-weight: 600 !important;

    letter-spacing: 0.1px;

    box-sizing: border-box;

    isolation: isolate;
}


/* =========================================================
   MOVING LIGHT SWEEP
   ========================================================= */

.center-dashboard-header::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120px;

    width: 90px;
    height: 100%;

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

    transform: skewX(-22deg);

    z-index: 0;

    animation:
        centerHeaderSweep 5s ease-in-out infinite;
}


@keyframes centerHeaderSweep {

    0% {
        left: -120px;
    }

    35% {
        left: 115%;
    }

    100% {
        left: 115%;
    }

}


/* =========================================================
   SECONDARY TOP ACCENT
   ========================================================= */

/* =========================================================
   ORANGE TOP LINE — EXPAND ON HOVER
   ========================================================= */

.center-dashboard-header::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #f5820b;

    z-index: 4;

    opacity: 1;

    transition: width 0.45s ease;
}


/* Expand from left to right */
.center-dashboard-card:hover
.center-dashboard-header::after {

    width: 100%;
}


/* =========================================================
   ICON BOX
   ========================================================= */

.center-dashboard-header i {

    position: relative;

    z-index: 3;

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: inline-flex;

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

    border-radius: 8px;

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

    color: #ffffff;

    font-size: 16px;

    line-height: 1;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}


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

.center-dashboard-header span {

    position: relative;

    z-index: 3;

    display: inline-block;

    color: #ffffff;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    transform: translateX(0);

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


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

.center-dashboard-card:hover
.center-dashboard-header i {

    transform: translateY(-1px) rotate(-5deg);

    background: rgba(245,130,11,0.95);

    box-shadow:
        0 4px 10px rgba(0,0,0,0.15);
}


.center-dashboard-card:hover
.center-dashboard-header span {

    transform: translateX(3px);

    color: #ffffff;
}


/* =========================================================
   ACTIVE / FOCUS
   ========================================================= */

.center-dashboard-header:focus-within {

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.18);
}


/* =========================================================
   SUBTLE ORANGE LINE PULSE
   ========================================================= */

.center-dashboard-card:hover
.center-dashboard-header {

    border-bottom-color: #ff9a2f !important;

    transition:
        border-bottom-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   HEADER TEXT RESPONSIVENESS
   ========================================================= */

@media (max-width: 991.98px) {

    .center-dashboard-header {

        height: 48px !important;
        min-height: 48px !important;

        font-size: 15px !important;

        padding: 0 13px !important;
    }

    .center-dashboard-header i {

        width: 29px;
        height: 29px;

        flex-basis: 29px;

        font-size: 15px;
    }

}


@media (max-width: 575.98px) {

    .center-dashboard-header {

        height: 46px !important;
        min-height: 46px !important;

        font-size: 14px !important;

        padding: 0 12px !important;
    }

    .center-dashboard-header i {

        width: 28px;
        height: 28px;

        flex-basis: 28px;

        font-size: 14px;
    }

}

/* =========================================================
   CENTER HEADER — REMOVE BOTTOM ACCENT
   ========================================================= */

.center-dashboard-header {
    border-bottom: none !important;
}


/* =========================================================
   ORANGE TOP LINE — EXPANDS ON HOVER
   ========================================================= */

.center-dashboard-header::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #f5820b;

    opacity: 1;

    z-index: 4;

    transition: width 0.45s ease;
}


.center-dashboard-card:hover
.center-dashboard-header::after {

    width: 100%;
}

/* =========================================================
   GLASSY MODERN CENTER HEADERS
   ========================================================= */

.center-dashboard-header {

    position: relative;

    background: rgba(0, 80, 134, 0.78) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.18) !important;

    border-bottom: none !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 4px 14px rgba(0, 60, 113, 0.10);

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Slightly richer glass on hover */

.center-dashboard-card:hover .center-dashboard-header {

    background: rgba(0, 80, 134, 0.88) !important;

    border-color: rgba(255,255,255,0.24) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 6px 18px rgba(0, 60, 113, 0.14);
}


/* =========================================================
   ICON — GLASS TILE
   ========================================================= */

.center-dashboard-header i {

    background: rgba(255,255,255,0.13) !important;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 2px 6px rgba(0,0,0,0.08);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}


.center-dashboard-card:hover
.center-dashboard-header i {

    background: rgba(245,130,11,0.88) !important;

    border-color: rgba(255,255,255,0.28);

    transform: translateY(-1px) rotate(-4deg);
}


/* =========================================================
   REMOVE OLD BOTTOM ACCENT
   ========================================================= */

.center-dashboard-header {
    border-bottom: none !important;
}


/* =========================================================
   ORANGE LINE — ONLY ON HOVER
   ========================================================= */

.center-dashboard-header::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #f5820b;

    z-index: 5;

    transition: width 0.45s ease;
}


.center-dashboard-card:hover
.center-dashboard-header::after {

    width: 100%;
}

/* =========================================================
   EMPLOYEE BIRTHDAY — ANIMATED CELEBRATION ICON
   Cake → Balloon → Celebration → repeat
   ========================================================= */

.birthday-alert-header > i {

    position: relative;

    width: 42px;
    height: 42px;

    display: inline-flex;

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

    flex: 0 0 42px;

    color: #ffffff;

    font-size: 30px;

    line-height: 1;

    transform-origin: center bottom;
}


/* Cake */
.birthday-alert-header > i.birthday-icon-cake {

    animation:
        birthdayCake
        0.9s
        ease-in-out;
}


/* Balloon */
.birthday-alert-header > i.birthday-icon-balloon {

    animation:
        birthdayBalloon
        1.1s
        ease-in-out;
}


/* Celebration / crackers */
.birthday-alert-header > i.birthday-icon-celebrate {

    animation:
        birthdayCelebrate
        0.9s
        ease-in-out;
}


/* =========================================================
   CAKE ANIMATION
   ========================================================= */

@keyframes birthdayCake {

    0% {
        transform: scale(0.7) translateY(6px) rotate(-8deg);
        opacity: 0;
    }

    45% {
        transform: scale(1.15) translateY(-2px) rotate(4deg);
        opacity: 1;
    }

    75% {
        transform: scale(0.98) translateY(0) rotate(-2deg);
    }

    100% {
        transform: scale(1) translateY(0) rotate(0);
        opacity: 1;
    }

}


/* =========================================================
   BALLOON ANIMATION
   ========================================================= */

@keyframes birthdayBalloon {

    0% {
        transform: translateY(12px) scale(0.75);
        opacity: 0;
    }

    35% {
        transform: translateY(-5px) scale(1.12);
        opacity: 1;
    }

    65% {
        transform: translateY(1px) scale(1);
    }

    100% {
        transform: translateY(-2px) scale(1);
        opacity: 1;
    }

}


/* =========================================================
   CRACKER / CELEBRATION BURST
   ========================================================= */

@keyframes birthdayCelebrate {

    0% {
        transform: scale(0.4) rotate(-20deg);
        opacity: 0;
    }

    25% {
        transform: scale(1.3) rotate(8deg);
        opacity: 1;
    }

    45% {
        transform: scale(0.95) rotate(-5deg);
    }

    65% {
        transform: scale(1.18) rotate(4deg);
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }

}


/* =========================================================
   SMALL CELEBRATION PARTICLES
   ========================================================= */

.birthday-alert-header > i.birthday-icon-celebrate::before {

    content: "✦";

    position: absolute;

    top: -2px;
    right: -4px;

    font-size: 13px;

    animation:
        birthdaySpark
        0.8s
        ease-out;
}


.birthday-alert-header > i.birthday-icon-celebrate::after {

    content: "✦";

    position: absolute;

    bottom: -2px;
    left: -5px;

    font-size: 11px;

    animation:
        birthdaySpark2
        0.8s
        ease-out;
}


@keyframes birthdaySpark {

    0% {
        transform: scale(0);
        opacity: 0;
    }

    40% {
        transform: scale(1.5) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(45deg);
        opacity: 0;
    }

}


@keyframes birthdaySpark2 {

    0% {
        transform: scale(0);
        opacity: 0;
    }

    45% {
        transform: scale(1.4) rotate(-20deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(-45deg);
        opacity: 0;
    }

}

/* =========================================================
   CENTER HEADERS — AUTOMATIC RE-ANIMATION
   Every few seconds
   ========================================================= */

.center-dashboard-header {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   LIGHT SWEEP
   Moves across the header, then pauses
   ========================================================= */

.center-dashboard-header::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120px;

    width: 90px;
    height: 100%;

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

    transform: skewX(-22deg);

    pointer-events: none;

    z-index: 1;

    animation:
        headerLightSweep
        6s
        ease-in-out
        infinite;
}


@keyframes headerLightSweep {

    0% {
        left: -120px;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    25% {
        left: 110%;
        opacity: 1;
    }

    30% {
        left: 110%;
        opacity: 0;
    }

    100% {
        left: 110%;
        opacity: 0;
    }

}


/* =========================================================
   ICON AUTOMATIC PULSE
   ========================================================= */

.center-dashboard-header i {

    position: relative;

    z-index: 3;

    animation:
        headerIconPulse
        6s
        ease-in-out
        infinite;
}


@keyframes headerIconPulse {

    0% {
        transform: scale(1) rotate(0deg);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.18),
            0 2px 6px rgba(0,0,0,0.08);
    }

    5% {
        transform: scale(1.08) rotate(-3deg);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.22),
            0 4px 12px rgba(245,130,11,0.22);
    }

    10% {
        transform: scale(1) rotate(2deg);
    }

    15% {
        transform: scale(1) rotate(0deg);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.18),
            0 2px 6px rgba(0,0,0,0.08);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }

}


/* =========================================================
   TITLE SUBTLE HIGHLIGHT
   ========================================================= */

.center-dashboard-header span {

    position: relative;

    z-index: 3;

    animation:
        headerTextPulse
        6s
        ease-in-out
        infinite;
}


@keyframes headerTextPulse {

    0% {
        transform: translateX(0);
        text-shadow: none;
    }

    5% {
        transform: translateX(3px);
        text-shadow:
            0 0 8px rgba(255,255,255,0.22);
    }

    10% {
        transform: translateX(0);
        text-shadow: none;
    }

    100% {
        transform: translateX(0);
        text-shadow: none;
    }

}


/* =========================================================
   CARD HEADER SLIGHT GLOW
   ========================================================= */

.center-dashboard-card {

    --header-glow: rgba(0, 80, 134, 0.18);
}


.center-dashboard-card:hover
.center-dashboard-header {

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 6px 18px rgba(0,60,113,0.14);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .center-dashboard-header::before,
    .center-dashboard-header i,
    .center-dashboard-header span {

        animation: none !important;
    }

}

/* =========================================================
   CIRCULAR RESULTS HEADER
   ========================================================= */

.employee-circular-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}


.employee-circular-header-title {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #183b63;

    font-size: 1rem;
    font-weight: 750;
}


.employee-circular-header-title i {
    color: #0756a6;
    font-size: 1rem;
}


/* =========================================================
   SECTION DROPDOWN
   ========================================================= */

.employee-circular-section-form {
    margin: 0;

    flex: 0 0 auto;
}


.employee-circular-section-select {

    min-width: 220px;

    height: 40px;

    padding:
        0 38px 0 13px;

    border:
        1px solid #d6e2ee;

    border-radius: 9px;

    background: #ffffff;

    color: #183b63;

    font-size: .76rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.employee-circular-section-select:hover {

    border-color:
        #9fc5e8;

    background:
        #fbfdff;
}


.employee-circular-section-select:focus {

    outline: none;

    border-color:
        #0756a6;

    box-shadow:
        0 0 0 3px
        rgba(7,86,166,.10);
}


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

@media (max-width: 700px) {

    .employee-circular-header {

        align-items: flex-start;

        flex-direction: column;

    }


    .employee-circular-section-form {

        width: 100%;

    }


    .employee-circular-section-select {

        width: 100%;

    }

}


/* =========================================================
   NETWORK O&M — CENTERED CLICKABLE HEADER
   ========================================================= */

.employee-network-header {

    padding: 0 !important;

    min-height: 54px;

    display: flex;

    align-items: stretch;

    justify-content: center;

    overflow: hidden;
}


/* Entire header is clickable */

.employee-network-header-link {

    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    color: #0756a6 !important;

    background: #ffffff;

    text-decoration: none !important;

    font-size: 1rem;

    font-weight: 800;

    transition:
        color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;
}


/* Icon */

.employee-network-header-link i {

    font-size: 1.05rem;

    color: #0756a6;

    transition:
        transform .22s ease,
        color .22s ease;
}


/* Hover */

.employee-network-header-link:hover {

    color: #064b83 !important;

    background: #f4f9ff;

    box-shadow:
        inset 0 -3px 0 #0756a6;
}


.employee-network-header-link:hover i {

    color: #f5820b;

    transform:
        scale(1.12)
        rotate(-5deg);
}


/* Focus */

.employee-network-header-link:focus-visible {

    outline: none;

    box-shadow:
        inset 0 0 0 2px #0756a6;
}


/* Mobile */

@media (max-width: 700px) {

    .employee-network-header-link {

        min-height: 50px;

        font-size: .92rem;
    }

}

/* =========================================================
   SECTIONS PANEL — FULL BLUE
   ========================================================= */

.employee-sections-panel {

    background: #0756a6 !important;

    border: 1px solid #0756a6 !important;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(7, 86, 166, 0.16);
}


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

.employee-sections-panel
.office-dashboard-card-header {

    background: #0756a6 !important;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16) !important;

    color: #ffffff !important;
}


.employee-sections-panel
.office-dashboard-card-header h2 {

    color: #ffffff !important;

    font-size: 1rem;

    font-weight: 800;
}


.employee-sections-panel
.office-dashboard-card-header h2 i {

    color: #ffffff !important;
}


/* Number at top-right */

.employee-sections-panel
.office-admin-count {

    background:
        rgba(255, 255, 255, 0.16) !important;

    color: #ffffff !important;

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

}


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

.employee-sections-panel
.office-dashboard-card-body {

    background: #0756a6 !important;

}


/* =========================================================
   SECTION BUTTONS
   ========================================================= */

.employee-sections-panel
.employee-section-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.employee-sections-panel
.employee-section-tab {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 8px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.35) !important;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;

    text-decoration: none;

    font-size: .76rem;

    font-weight: 750;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease,
        color .22s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.employee-sections-panel
.employee-section-tab:hover {

    background:
        rgba(255, 255, 255, 0.22) !important;

    border-color:
        rgba(255, 255, 255, 0.65) !important;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.14);
}


/* =========================================================
   ACTIVE BUTTON
   ========================================================= */

.employee-sections-panel
.employee-section-tab.active {

    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #0756a6 !important;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.16);
}


/* =========================================================
   DESCRIPTION TEXT
   ========================================================= */

.employee-sections-panel
.employee-sections-note {

    margin-top: 14px;

    color:
        rgba(255, 255, 255, 0.78) !important;

    font-size: .70rem;

    line-height: 1.5;
}


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

@media (max-width: 700px) {

    .employee-sections-panel
    .employee-section-tabs {

        gap: 8px;
    }


    .employee-sections-panel
    .employee-section-tab {

        min-height: 38px;

        padding: 7px 12px;

        font-size: .72rem;
    }

}
/* =========================================================
   NETWORK O&M CARD — SOLID BLUE BORDER
   ========================================================= */

.employee-network-panel {

    border: 2px solid #0756a6 !important;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 6px 18px rgba(7, 86, 166, 0.08);

    overflow: hidden;
}


/* Network O&M header */

.employee-network-panel
.office-dashboard-card-header {

    border-bottom:
        1px solid #d5e3f0 !important;

    background: #ffffff;
}


/* Header link */

.employee-network-panel
.employee-network-header-link {

    color: #0756a6 !important;

    font-weight: 800;

    text-decoration: none !important;
}


/* Icon */

.employee-network-panel
.employee-network-header-link i {

    color: #0756a6 !important;

}


/* Hover */

.employee-network-panel
.employee-network-header-link:hover {

    background: #f4f9ff;

    color: #064b83 !important;

}


/* Slight blue glow on hover */

.employee-network-panel:hover {

    border-color: #064b83 !important;

    box-shadow:
        0 8px 22px rgba(7, 86, 166, 0.14);
}