* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: #f0f0f5;
      /* padding: 30px; */
    }

    .ob-wrap {
      background: linear-gradient(135deg, #282854 0%, #5a4fa0 50%, #3a3a7c 100%);
      background-size: 200% 200%;
      animation: gradShift 6s ease infinite;
      padding: 0 0 1px;
      border-radius: 0px;
      overflow: hidden;
      padding: 6px 5px;
    }

    @keyframes gradShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .ob-glow-line {
      height: 2px;
      background: linear-gradient(90deg, transparent, #a89cf7, #e0d8ff, #a89cf7, transparent);
      background-size: 200% 100%;
      animation: glowMove 3s linear infinite;
    }

    @keyframes glowMove {
      0%   { background-position: -100% 0; }
      100% { background-position: 200% 0; }
    }

    .ob-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 28px;
    }

    /* ── Logo ── */
    .ob-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      animation: fadeSlideLeft 0.7s ease both;
    }

    .ob-logo-icon {
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.15);
      border: 1.5px solid rgba(255,255,255,0.3);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      color: #fff;
      transition: transform 0.3s ease, background 0.3s ease;
      cursor: pointer;
    }

    .ob-logo-icon:hover {
      transform: rotate(-8deg) scale(1.1);
      background: rgba(255,255,255,0.25);
    }

    .ob-logo-text {
      font-size: 15px;
      font-weight: 600;
      color: #d5cfff;
      letter-spacing: 0.5px;
      line-height: 1.2;
    }

    .ob-logo-text span {
      display: block;
      font-size: 10px;
      color: rgba(255,255,255,0.45);
      font-weight: 400;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    /* ── Center ── */
    .ob-center {
      flex: 1;
      text-align: center;
      animation: fadeDown 0.7s ease 0.15s both;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .ob-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50px;
      padding: 3px 12px 3px 8px;
    }

    .ob-badge-dot {
      width: 6px;
      height: 6px;
      background: #7effc0;
      border-radius: 50%;
      animation: pulse 1.8s ease infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: 0.5; transform: scale(0.7); }
    }

    .ob-badge-text {
      font-size: 10px;
      color: rgba(255,255,255,0.65);
      letter-spacing: 1.4px;
      text-transform: uppercase;
      font-weight: 500;
    }

    .ob-title {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.4px;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .ob-title-icon {
      width: 30px;
      height: 30px;
      background: rgba(255,255,255,0.13);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #d6c657;
      animation: iconBounce 3s ease infinite;
    }

    @keyframes iconBounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-3px); }
    }

    /* ── Contact ── */
    .ob-contact {
      animation: fadeSlideRight 0.7s ease 0.3s both;
    }

    .ob-contact-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.11);
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 12px;
      padding: 10px 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .ob-contact-btn:hover {
      background: rgba(255,255,255,0.22);
      border-color: rgba(255,255,255,0.44);
      transform: translateY(-2px);
    }

    .ob-contact-icon-wrap {
      width: 36px;
      height: 36px;
      background: rgba(126,255,192,0.16);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #d6c657;
      animation: ringShake 4s ease infinite;
    }

    @keyframes ringShake {
      0%, 85%, 100% { transform: rotate(0deg); }
      87%           { transform: rotate(-12deg); }
      90%           { transform: rotate(12deg); }
      93%           { transform: rotate(-8deg); }
      96%           { transform: rotate(8deg); }
      98%           { transform: rotate(0deg); }
    }

    .ob-contact-info {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .ob-contact-label {
      font-size: 10px;
      color: rgba(255,255,255,0.48);
      letter-spacing: 1.1px;
      text-transform: uppercase;
    }

    .ob-contact-num {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.4px;
    }

    /* ── Entry animations ── */
    @keyframes fadeSlideLeft {
      from { opacity: 0; transform: translateX(-20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeSlideRight {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-12px); }
      to   { opacity: 1; transform: translateY(0); }
    }


    /* ── Responsive ── */
    @media (max-width: 768px) {
      .ob-inner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
      }
      .ob-title {
        font-size: 16px;
      }
      .ob-logo-text {
        font-size: 13px;
      }
      .ob-center{ display:none;}
        .ob-contact-btn {
        gap: 6px;
        padding: 5px 5px;
        margin-top: 7px;
    }
    .ob-contact-icon-wrap {
    width: 28px;
    height: 29px;
    font-size: 13px;
    }
    .ob-wrap {

    padding: 2px 8px;
    }
    .bd-body {
    padding: 15px 10px !important;
}
.header-icon{ display:none !important;}
.card-header-bar { padding: 19px 12px !important;}

.btn-nav.solid {
    background: #9b9045;
    border-radius: 15px;
    }
  .btn-nav.outline
  {
       border-radius: 15px;
    }
    .btn-nav {
   
    padding: 11px 24px !important;
    }
    .nav-actions{ margin-top:0px;}
    .pd-card{ margin-bottom:0px;}
    }
 
  .upd-card_top {
    border-top: 4px solid !important;
    border-image: linear-gradient(90deg, #1e4db7 0%, #2563eb 50%, #f59e0b 100%) !important;
    border-image-slice: 1 !important;
    border-radius: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    border-bottom: 0px !important;
}
  .nav-actions{ margin-top:0px !important;}
    .pd-card{ margin-bottom:0px !important;}