:root{
      --header:#235780;
      --header-dark:#1f4e75;
      --page:#d7e5ff;
      --text:#2f343b;
      --muted:#68717c;
      --pill:#f7faff;
      --accent:#21a8e4;
      --danger:#df6871;
      --nav:#235780;
      --nav-active:#25aae4;
      --radius:18px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family:Arial, Helvetica, sans-serif;
      background:#111;
      color:var(--text);
    }

    .app{
      width:100%;
      max-width:716px;
      min-height:100vh;
      margin:0 auto;
      background:var(--page);
      overflow-x:hidden;
      padding-bottom:105px;
    }


    .wallet,.card-button,.getapp{
      border:0;
      font:inherit;
      cursor:pointer;

    }
    .wallet{font-family:Arial, Helvetica, sans-serif}
    .card-button{padding:0;display:block}
    .getapp{font-family:Arial, Helvetica, sans-serif}
    .ticker-track{
      display:flex;
      width:max-content;
      animation:ticker 22s linear infinite;
      gap:70px;
      padding-left:100%;
    }
    .ticker-track span{display:block}
    @keyframes ticker{
      from{transform:translateX(0)}
      to{transform:translateX(-100%)}
    }

    .overlay{
      position:fixed; inset:0;
      background:rgba(0,0,0,.42);
      z-index:40;
      opacity:0;
      visibility:hidden;
      transition:.25s ease;
    }
    .overlay.show{opacity:1;visibility:visible}
    .sidebar{
      position:fixed;
      top:0;left:0;
      width:min(330px,86vw);
      height:100vh;
      background:#fff;
      z-index:50;
      transform:translateX(-105%);
      transition:transform .28s ease;
      box-shadow:8px 0 24px rgba(0,0,0,.22);
      padding:24px 18px;
      overflow-y:auto;
    }
    .sidebar.show{transform:translateX(0)}
    .sidebar-head{
      display:flex;align-items:center;justify-content:space-between;
      padding:4px 4px 22px;
      border-bottom:1px solid #e8edf2;
    }
    .sidebar-head img{width:68px;height:68px;object-fit:cover;border-radius:4px}
    .close-menu{
      width:42px;height:42px;border:0;border-radius:50%;
      background:#edf4fa;color:#24577f;font-size:31px;line-height:1;cursor:pointer;
    }
    .sidebar-user{
      display:flex;align-items:center;gap:12px;
      padding:20px 8px;
      margin-bottom:8px;
    }
    .avatar{
      width:48px;height:48px;border-radius:50%;
      display:grid;place-items:center;background:#dcecff;font-size:24px;
    }
    .sidebar-user strong{display:block;color:#23313e;font-size:16px}
    .sidebar-user small{display:block;color:#7a8793;margin-top:4px}
    .side-link{
      width:100%;border:0;background:transparent;
      padding:15px 12px;border-radius:12px;
      display:flex;align-items:center;gap:14px;
      color:#33414e;font-size:16px;font-weight:700;
      cursor:pointer;text-align:left;
    }
    .side-link:hover{background:#edf6ff;color:#1d6da5}

    @media(max-width:480px){
      .sidebar{padding:18px 14px}
      .ticker-track{animation-duration:18s}
    }

    /* Header */
    .topbar{
      height:90px;
      background:var(--header);
      display:flex;
      align-items:center;
      padding:0 30px;
      gap:28px;
      box-shadow:0 3px 8px rgba(0,0,0,.20);
    }

    .hamburger{
      width:62px;
      height:62px;
      border:0;
      background:transparent;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:9px;
      padding:5px;
      cursor:pointer;
    }
    .hamburger span{
      display:block;
      height:5px;
      width:56px;
      border-radius:5px;
      background:#fff;
    }

    .brand{
      width:45px;
      height:45px;
      object-fit:cover;
      border-radius:3px;
      box-shadow:0 2px 5px rgba(0,0,0,.25);
    }

    .wallets{
      margin-left:auto;
      display:flex;
      gap:9px;

    }
    .wallet{
      min-width:138px;
      height:50px;
      padding:0 18px;
      border-radius:12px;
      background-image: linear-gradient(blue, skyblue);
      border:2px solid rgba(255,255,255,.65);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-size:25px;
      font-weight:800;
      color:#20252b;
      box-shadow:inset 0 1px 0 #fff;
    }
    .wallet .emoji{font-size:36px}
    .wallet.small{min-width:136px}

    /* Notice */
    .notice-wrap{padding:14px 30px 0}
    .notice{
      height:61px;
      border-radius:13px;
      background:#083f5b;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:20px;
      letter-spacing:.2px;
      overflow:hidden;
      white-space:nowrap;
    }

    /* Main */
    main{padding:0 30px}
    .section-title{
      text-align:center;
      margin:84px 0 45px;
      font-size:29px;
      letter-spacing:2px;
      font-weight:800;
      color:#31353b;
    }

    .grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px 19px;
    }

    .tile{
      min-width:0;
    }

    .status{
      display:inline-flex;
      align-items:center;
      height:30px;
      padding:0 19px;
      border-radius:5px;
      background:rgba(255,255,255,.72);
      color:var(--danger);
      font-weight:800;
      font-size:11px;
      margin:0 0 18px;
      box-shadow:0 1px 5px rgba(0,0,0,.04);
    }
    .status .dot{
      width:10px;
      height:10px;
      background:#e95b65;
      border-radius:50%;
      margin-right:8px;
    }

    .card{
      width:100%;
      aspect-ratio:1/1;
      border-radius:18px;
      overflow:hidden;
      background:#222;
      box-shadow:0 2px 3px rgba(0,0,0,.06);
    }
    .card img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }

    .getapp{
      display:inline-flex;
      align-items:center;
      height:30px;
      padding:0 19px;
      border-radius:5px;
      background:rgba(255,255,255,.82);
      color:var(--danger);
      font-weight:800;
      font-size:11px;
      margin:18px 0 0;
    }
    .getapp .dot{
      width:10px;
      height:10px;
      background:#e95b65;
      border-radius:50%;
      margin-right:8px;
    }

    .services-title{
      text-align:center;
      margin:75px 0 39px;
      font-size:28px;
      letter-spacing:1.5px;
      font-weight:800;
    }

    .service-banner{
      height:280px;
      border-radius:18px;
      overflow:hidden;
      background:#222;
    }
    .service-banner img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
      display:block;
    }

    /* Bottom nav */
    .bottom-nav{
      position:fixed;
      left:50%;
      bottom:17px;
      transform:translateX(-50%);
      width:min(calc(100% - 0px), 716px);
      height:92px;
      padding:0 28px;
      border-radius:48px;
      background:var(--nav);
      display:flex;
      align-items:center;
      justify-content:space-between;
      z-index:20;
      box-shadow:0 3px 10px rgba(0,0,0,.25);
    }
    .nav-item{
      width:76px;
      height:76px;
      border:0;
      background:transparent;
      color:#d9e5f0;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      border-radius:50%;
    }
    .nav-item svg{
      width:42px;
      height:42px;
      stroke:currentColor;
      fill:none;
      stroke-width:1.8;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .nav-item.active{
      width:82px;
      height:82px;
      background:var(--nav-active);
      color:white;
      box-shadow:0 2px 5px rgba(0,0,0,.15);
    }

    @media(max-width:600px){
      .topbar{
        height:108px;
        padding:0 22px;
        gap:21px;
      }
      .hamburger{width:58px;height:58px}
      .hamburger span{width:51px;height:4px}
      .brand{width:76px;height:76px}
      .wallets{gap:7px}
      .wallet{
        min-width:111px;
        height:78px;
        padding:0 12px;
        border-radius:20px;
        font-size:21px;
       
      }
      .wallet.small{min-width:108px}
      .wallet .emoji{font-size:30px}
      .notice-wrap{padding:12px 30px 0}
      .notice{height:61px;font-size:18px}
      main{padding:0 30px}
      .section-title{margin-top:82px}
    }

    @media(max-width:480px){
      .topbar{padding:0 15px;gap:13px}
      .hamburger{width:54px}
      .brand{width:66px;height:66px}
      .wallet{
        min-width:93px;
        height:50px;
        font-size:18px;
        padding:0 7px;
        border-radius:12px;
      }
      .wallet.small{min-width:91px}
      .wallet .emoji{font-size:25px}
      .wallets{gap:5px}
      .notice-wrap,main{padding-left:18px;padding-right:18px}
      .notice{font-size:14px;height:51px}
      .section-title{font-size:24px;margin:66px 0 32px}
      .grid{gap:12px}
      .status,.getapp{font-size:14px;height:39px;padding:0 12px}
      .card{border-radius:14px}
      .services-title{font-size:23px;margin:57px 0 28px}
      .bottom-nav{
        bottom:9px;
        height:72px;
        padding:0 12px;
      }
      .nav-item{width:58px;height:58px}
      .nav-item svg{width:33px;height:33px}
      .nav-item.active{width:66px;height:66px}
    }
    @keyframes blink-animation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blink-text {
    animation: blink-animation 1s infinite;
}
.explore-services-bottom-content {
    padding: 30px 15px;
    background-color: #f9f9f9;
    text-align: center;
    margin-top: 20px;
    border-radius: 8px;
}