:root {
     --bg: #f5f8fb;
     --card-bg: #ffffff;
     --card-border: rgba(15, 23, 42, 0.06);
     --accent-1: #0b72b9;
     --accent-2: #7dd3fc;
     --muted: #6b7280;
     --glass: rgba(255, 255, 255, 0.6)
 }

 * {
     box-sizing: border-box
 }

 body {
     font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     background: var(--bg);
     margin: 0;
     color: #0f172a
 }

 .page {
     max-width: 1400px;
     margin: 32px auto;
     padding: 28px
 }

 /* Hero */
 .hero {
     background: linear-gradient(135deg, var(--accent-1), #2563eb);
     color: #fff;
     border-radius: 12px;
     padding: 28px 28px 22px;
     display: flex;
     align-items: center;
     gap: 18px;
     overflow: hidden
 }


 .hero h1 {
     margin: 0;
     font-size: 22px;
     letter-spacing: 0.6px
 }

 .hero p {
     margin: 6px 0 0;
     color: rgba(255, 255, 255, 0.85)
 }

 /* Grid */
 .grid-wrap {
     margin-top: 18px
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 18px
 }

 .card {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: 12px;
     padding: 18px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     text-decoration: none;
     color: inherit;
     transition: transform .22s cubic-bezier(.2, .9, .3, 1), box-shadow .22s
 }

 .card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(2, 6, 23, 0.08)
 }

 .card-top {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .card .icon {
     width: 64px;
     height: 64px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--accent-2), #60a5fa);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #05204a;
     font-weight: 700;
     font-size: 20px;
     box-shadow: inset 0 -6px 18px rgba(255, 255, 255, 0.06)
 }

 .card .title {
     font-size: 15px;
     font-weight: 700
 }

 .card .desc {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.35
 }

 .card .footer {
     margin-top: 8px;
     font-size: 12px;
     color: var(--muted);
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 /* Ribbon */
 .ribbon {
     background: rgba(255, 255, 255, 0.12);
     padding: 6px 10px;
     border-radius: 999px;
     font-size: 12px;
     color: #fff
 }

 @media (max-width:520px) {
     .hero {
         flex-direction: column;
         align-items: flex-start
     }

     .logo {
         width: 64px;
         height: 64px
     }
 }

 /* Watermark using the LBS logo (falls back gracefully if image missing) */
 .page {
     position: relative;
     overflow: hidden
 }

 .page::after {
     content: "";
     position: absolute;
     right: 10px;
     bottom: 10px;
     width: 100%;
     height: 100%;
     pointer-events: none;
     opacity: .05;
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     background-image: url('../images/lbs_logo_only.png');

 }

 /* Banner overlay text */
 .banner-hero {
     position: relative
 }

/* Banner header styles */
.banner-hero{
    background: linear-gradient(90deg,var(--accent-1) 0%, #1291cf 100%);
    color: #ffffff;
    padding: 36px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.06);
}
.banner-hero h1{
    color: #fff;
    font-size: clamp(20px, 3.6vw, 40px);
    font-weight: 800;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.banner-hero p{
    color: rgba(255,255,255,0.92);
    margin:0;
    font-size: clamp(14px,2.2vw,18px);
}
.text-dark{
    color: #9b0d0d !important;
}

@media (max-width:576px){
    .banner-hero{padding:22px 14px}
}

 .banner-hero .overlay {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-shadow: 0 6px 20px rgba(2, 6, 23, 0.6)
 }

 .banner-hero .overlay h1 {
     font-size: clamp(20px, 3.2vw, 36px);
     font-weight: 700;
     margin: 0
 }

 .app-card {
     transition: transform .18s ease, box-shadow .18s ease
 }

 .app-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08)
 }

 .lead-muted {
     color: #6b7280
 }

/* Notifications ticker */
.notifications-ticker{
    background: linear-gradient(90deg, rgba(255,241,79,0.12), rgba(255,99,71,0.06));
    border:1px solid rgba(255,99,71,0.18);
    padding:10px 14px;
    border-radius:10px;
    display:flex;align-items:center;gap:14px;overflow:hidden;margin-bottom:18px;box-shadow:0 6px 20px rgba(255,99,71,0.06)
}
.ticker-viewport{flex:1;overflow:hidden}
.ticker-list{display:inline-flex;white-space:nowrap;gap:28px;align-items:center}
.ticker-item{display:inline-flex;align-items:center;gap:10px;color:#062a3a;font-weight:700}
.ticker-item .time{font-weight:500;color:var(--muted);font-size:13px}
.ticker-text{max-width:560px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-new{background:#ff3b30;color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;box-shadow:0 6px 18px rgba(255,59,48,0.18)}

/* NEW badge pulse */
.badge-new.pulse{animation:badge-pulse 1.6s infinite}
@keyframes badge-pulse{
    0%{transform:scale(1);box-shadow:0 6px 18px rgba(255,59,48,0.18)}
    50%{transform:scale(1.06);box-shadow:0 12px 32px rgba(255,59,48,0.22)}
    100%{transform:scale(1);box-shadow:0 6px 18px rgba(255,59,48,0.18)}
}

/* Pause animation when hovering */
.ticker-list.paused{animation-play-state:paused}

@keyframes ticker-scroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

 @media (max-width:576px) {
     .page::after {
         width: 260px;
         height: 260px;
         opacity: .04
     }
 }

/* Vertical notifications panel styles */
.notifications-vertical{
    position: relative;
    background: linear-gradient(180deg, rgba(250,250,250,0.96), #fff);
    border:1px solid rgba(2,6,23,0.06);
    box-shadow:0 8px 20px rgba(2,6,23,0.04);
}
.notifications-vertical-list{
    overflow:hidden;
    height:100%;
}
.notifications-vertical .notification-row{
    align-items:flex-start;
}
.notification-row .badge-new{
    flex-shrink:0;
    margin-top:4px;
}

/* Make panel scrollable internally */
#notificationsPanel{
    overflow-y:auto;
}

/* Responsive: hide side panel on small screens */
@media (max-width: 991px){
    aside.col-lg-3.d-none.d-lg-block{ display:none !important; }
}

 /* from lbs styles */
 .col-lg-12-top {

     width: 100%;
     background-color: #2789e2;
     height: 5px;

 }

 .navbar {
     border-radius: 0px;
 }

 /* Decorative header image sizing (moved from inline styles) */
 .header-decorative {
     width: 230px;
     max-width: 100%;
     height: auto;
        margin-top: -15px;
    
    
 }

 @media (max-width:992px) {
     .header-decorative {
         width: 180px
     }
 }


 .navbar-undermerabi {
     /*background-color: #fff;*/
     background-image: url('../images/background.jpg');
     /*background-position: center;*/
     background-repeat: no-repeat;
     background-size: cover;
     cursor: pointer;
     font-size: 1.9em;
     color: #000;

     min-height: 100px;
     margin-top: 0px;
     margin-bottom: 0px;
     border: none;
 }

 .navbar {
     padding: 0px;
 }

 @media (min-width: 320px) {
     img.logo {
         width: 220px;
     }
 }

 @media (min-width: 480px) {
     img.logo {
         width: 220px;
     }
 }

 @media (min-width: 768px) {
     img.logo {
         width: 270px;
     }
 }

 @media (min-width: 992px) {
     img.logo {
         width: 340px;
     }
 }

 @media (min-width: 1200px) {
     img.logo {
         width: 370px;
     }

     .side-e-service .panel {

         min-height: 216px;
         max-height: 216px;
         overflow-y: hidden;
     }
 }

 .container {
     padding: 0px;

     margin: auto;
 }